/* Changed from the design prototype in exactly one respect: the two type
   families are served from this host rather than from a font CDN. The fallback
   stacks below are what the page is set in until they load. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fraunces-latin.5d2835174326.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fraunces-latin-ext.3592119408ee.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fraunces-italic-latin.be1b7d1cec18.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fraunces-italic-latin-ext.173659e9f51e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/karla-latin.5f5978e3e448.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/karla-latin-ext.5b9a2614c4e4.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#f7f3ec;
  --paper:#fffdf9;
  --ink:#17161a;
  --ink-2:#4a474f;
  --ink-3:#8b8791;
  --line:#e7e0d4;
  --coral:#ff5a3c;
  --coral-deep:#d93b1f;
  --amber:#ffb238;
  --teal:#0f766e;
  --shadow:0 10px 30px -14px rgba(23,22,26,.25);
  --r:18px;
  --side:240px;
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Karla","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
svg:not([width]){width:20px;height:20px;flex:none}
.cta svg,.doc svg{width:18px;height:18px}
.who .vf{width:16px;height:16px}
input,textarea{font:inherit}
::selection{background:var(--amber);color:var(--ink)}

/* ---------- shell ---------- */
/* No z-index here: one would make .app a stacking context, and the options sheet
   inside it could then never rise above the mobile tab bar, which sits outside.
   The noise layer stays underneath because it comes first in tree order. */
.app{position:relative;display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;padding:28px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 22px}
.brand .word{font-family:var(--font-display);font-weight:700;font-size:30px;letter-spacing:-.03em;line-height:1}
.brand .word i{font-style:italic;font-weight:500;color:var(--coral)}
.nav a{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:14px;font-weight:600;color:var(--ink-2);transition:background .18s,color .18s,transform .18s}
.nav a svg{width:24px;height:24px;flex:none}
.nav a:hover{background:#fff;color:var(--ink);transform:translateX(2px)}
.nav a.on{background:var(--ink);color:#fff}
.nav a.on .badge{background:var(--coral)}
.badge{margin-left:auto;background:var(--coral);color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px}
.side .me:hover{background:#fff}
.side .me img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.side .me b{display:block;font-size:14px}
.side .me span{font-size:12px;color:var(--ink-3)}
.side .me.guest{gap:8px}
.side .me.guest .btn{flex:1;padding:9px 10px;font-size:13px}
/* The footer link row, shared by its three hosts: this sidebar, the feed rail
   and the auth screens' `.legal`. A wrapping flex row rather than an inline run,
   because `_footer.html` writes the anchors with no whitespace between them and
   an inline run therefore has nowhere to break — see that file. */
.links{display:flex;flex-wrap:wrap;column-gap:8px}
.side .foot{padding:12px 12px 0;font-size:11.5px;color:var(--ink-3);line-height:1.8}
.side .foot a:hover{color:var(--ink);text-decoration:underline}

.main{min-width:0}
.wrap{max-width:980px;margin:0 auto;padding:28px 28px 90px}
.cols{display:grid;grid-template-columns:minmax(0,600px) 300px;gap:44px;justify-content:center}
.col{min-width:0}
.rail{position:sticky;top:28px;align-self:start}

/* ---------- avatar / ring ---------- */
.av{border-radius:50%;object-fit:cover;background:#ddd;flex:none}
.ring{position:relative;flex:none}
.ring::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(from 200deg,var(--coral),var(--amber),var(--coral))}
.ring.seen::before{background:var(--line)}
.ring img{position:relative;border:2.5px solid var(--bg);border-radius:50%;object-fit:cover}

/* ---------- moments strip ---------- */
.moments{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scrollbar-width:none;margin-bottom:10px}
.moments::-webkit-scrollbar{display:none}
.moment{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);flex:none;width:72px;transition:transform .15s}
.moment:hover{transform:translateY(-2px)}
.moment .ring img{width:62px;height:62px}
.moment.add .ring::before{background:none;border:2px dashed var(--ink-3)}
.moment span{max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- post card ---------- */
/* A running or filling transform animation makes the card the containing block
   for anything fixed inside it, so the options sheet's backdrop would cover the
   card instead of the page. Hence `backwards` rather than `both`, and no
   animation at all on a card whose sheet is open, even mid-animation. */
.post{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin-bottom:22px;overflow:hidden;box-shadow:var(--shadow);animation:rise .5s cubic-bezier(.2,.7,.2,1) backwards}
.post:has(.opts[open]){animation:none}
.post:nth-child(2){animation-delay:.06s}.post:nth-child(3){animation-delay:.12s}.post:nth-child(4){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.post .head{display:flex;align-items:center;gap:11px;padding:13px 16px}
.post .head .av{width:38px;height:38px}
.post .head b{display:block;font-size:14px;line-height:1.1}
.post .head small{color:var(--ink-3);font-size:12px}
.post .head .more{margin-left:auto;color:var(--ink-3);padding:6px;border-radius:8px}
.more svg,.tabbar svg,.mobile-top svg{width:22px;height:22px}
.btn svg{width:18px;height:18px}
.sheet .opt svg{width:16px;height:16px}
.post .head .more:hover{background:var(--bg);color:var(--ink)}
.post .media{position:relative;aspect-ratio:4/5;background:#e9e3d8;overflow:hidden}
.post .media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post .media:hover img{transform:scale(1.025)}
.post .media .heart{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}
.post .media .heart svg{width:110px;height:110px;fill:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.post .media.pop .heart{animation:pop .7s ease-out}
@keyframes pop{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.08)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
.acts{display:flex;align-items:center;gap:4px}
.post .acts{padding:10px 10px 0}
/* Each action is its own form, because a state change must be a POST — a GET
   that liked a post would be actioned by anything that follows links, which on
   this site is the visitor we care about. `display:contents` puts the button
   back in the row's flex flow, so the wrapper is invisible to the layout. */
.acts form{display:contents}
.acts button,.acts a,.acts span{display:inline-flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:13px;transition:background .15s,transform .1s}
.acts button:hover,.acts a:hover{background:var(--bg);color:var(--ink)}
.acts button:active{transform:scale(.94)}
.acts button svg,.acts a svg,.acts span svg{width:22px;height:22px}
.acts .save,.acts form.save button{margin-left:auto}
.acts .liked{color:var(--coral)}
.acts .liked svg{fill:var(--coral)}
.acts .saved svg{fill:var(--ink)}
.post .body{padding:6px 16px 16px}
.post .likes{font-weight:700;font-size:14px}
.post .cap{margin:5px 0 0}
.post .cap b{margin-right:6px}
.post .cap .tag{color:var(--teal)}
.post .cmts{color:var(--ink-3);margin-top:6px;font-size:13.5px;display:block}
.post .cmts:hover{color:var(--ink)}
.post .time{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.addc{display:flex;gap:10px;border-top:1px solid var(--line);padding:10px 16px}
.addc input{flex:1;border:0;background:none;outline:none;font-size:14px}
.addc button{color:var(--coral);font-weight:700;font-size:13px;opacity:.5}
.addc input:not(:placeholder-shown)+button{opacity:1}

/* sponsored */
.post.ad .head .sp{font-size:11px;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.head .pp{display:block;font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.post.ad .cta{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,#fff3ea,#fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:700}
.post.ad .cta span{color:var(--coral)}
.post.ad .why{font-size:12px;color:var(--ink-3);padding:10px 16px 0}
.post.ad .why a{text-decoration:underline}

/* ---------- rail ---------- */
.rail .me{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.rail .me img{width:52px;height:52px}
.rail .me b{display:block}
.rail .me span{color:var(--ink-3);font-size:13px}
.rail h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px;font-weight:700}
.sug{display:flex;align-items:center;gap:10px;padding:7px 0}
.sug img{width:38px;height:38px}
.sug b{display:block;font-size:13.5px}
.sug span{font-size:12px;color:var(--ink-3)}
.sug .fl{margin-left:auto}
.fl{font-weight:700;font-size:12.5px;color:var(--coral);padding:6px 12px;border-radius:999px;border:1.5px solid var(--coral);transition:all .15s}
.fl:hover{background:var(--coral);color:#fff}
.fl.on{border-color:var(--line);color:var(--ink-3)}
.fl.on:hover{background:#fff;color:var(--ink)}
.rail .foot{margin-top:22px;font-size:11.5px;color:var(--ink-3);line-height:1.9}
.rail .foot a:hover{text-decoration:underline}

/* ---------- page headers ---------- */
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.ph h1{font-family:var(--font-display);font-weight:500;font-size:40px;letter-spacing:-.03em;margin:0;line-height:1}
.ph h1 i{color:var(--coral)}
.ph p{margin:6px 0 0;color:var(--ink-3)}
.search{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:10px 16px;width:320px;max-width:100%}
.search input{border:0;background:none;outline:none;flex:1;font-size:14px}
.search svg{width:18px;height:18px;color:var(--ink-3)}

/* ---------- discover grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:6px}
.grid a{position:relative;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#e9e3d8}
.grid a img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.grid a:hover img{transform:scale(1.06)}
.grid a .ov{position:absolute;inset:0;background:rgba(23,22,26,.45);display:flex;align-items:center;justify-content:center;gap:18px;color:#fff;font-weight:700;opacity:0;transition:opacity .2s}
.grid a:hover .ov{opacity:1}
.grid a .ov span{display:inline-flex;align-items:center;gap:6px}
.grid a .ov svg{width:18px;height:18px;fill:#fff}
.grid a.tall{grid-row:span 2;aspect-ratio:auto}
.grid a .loop{position:absolute;top:8px;right:8px;width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:600;color:var(--ink-2)}
.chip.on,.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- loops ---------- */
.loops{display:flex;flex-direction:column;align-items:center;gap:26px}
.loop{position:relative;width:min(420px,100%);aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.loop img{width:100%;height:100%;object-fit:cover;opacity:.92}
.loop .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.75))}
.loop .play{position:absolute;inset:0;display:grid;place-items:center}
.loop .play span{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);transition:transform .2s}
.loop:hover .play span{transform:scale(1.08)}
.loop .play svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.loop .meta{position:absolute;left:18px;right:80px;bottom:20px;color:#fff}
.loop .meta .who{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700}
.loop .meta .who img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;opacity:1}
.loop .meta p{margin:0;font-size:14px;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.loop .meta .snd{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.85;margin-top:10px}
.loop .meta .snd svg{width:14px;height:14px;fill:#fff}
.loop .rail-r{position:absolute;right:14px;bottom:20px;display:flex;flex-direction:column;gap:18px;align-items:center;color:#fff;font-size:12px;font-weight:700}
.loop .rail-r button,.loop .rail-r a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff}
.loop .rail-r svg{width:28px;height:28px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.loop .dur{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;padding:4px 8px;border-radius:6px;font-weight:700}

/* ---------- profile ---------- */
.prof{display:grid;grid-template-columns:150px 1fr;gap:34px;align-items:center;padding:8px 0 30px;border-bottom:1px solid var(--line);margin-bottom:26px}
.prof .ring img{width:150px;height:150px}
.prof h1{font-family:var(--font-display);font-weight:500;font-size:34px;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prof h1 .vf{width:20px;height:20px;fill:var(--teal)}
.prof .handle{color:var(--ink-3);margin:2px 0 14px}
.prof .stats{display:flex;gap:26px;margin-bottom:14px}
.prof .stats b{font-size:18px;font-family:var(--font-display);font-weight:700;display:block;line-height:1}
.prof .stats span{font-size:12.5px;color:var(--ink-3)}
.prof .bio{white-space:pre-line;margin:0 0 14px;max-width:460px}
.prof .bio a{color:var(--teal);font-weight:600}
.prof .btns{display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;font-weight:700;font-size:14px;border:1.5px solid var(--line);background:var(--paper);transition:all .15s}
.btn:hover{border-color:var(--ink)}
.btn:disabled{opacity:.45;cursor:default}
.btn:disabled:hover{border-color:var(--line)}
.btn.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.pri:hover{background:#000}
.btn.coral{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn.coral:hover{background:var(--coral-deep);border-color:var(--coral-deep)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button,.tabs span{padding:10px 2px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:8px;align-items:center}
.tabs button svg,.tabs span svg{width:14px;height:14px}
.tabs button.on,.tabs span.on{color:var(--ink);border-color:var(--ink)}
.hl{display:flex;gap:18px;margin-bottom:22px;overflow-x:auto;scrollbar-width:none}
.hl .moment .ring::before{background:var(--line)}

/* ---------- inbox ---------- */
.inbox{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 56px);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.inbox .list{border-right:1px solid var(--line);overflow:auto}
.inbox .list h2{font-family:var(--font-display);font-weight:500;font-size:24px;margin:0;padding:20px 20px 12px}
.thread{display:flex;gap:12px;padding:12px 20px;align-items:center;cursor:pointer}
.thread:hover,.thread.on{background:var(--bg)}
.thread img{width:48px;height:48px}
.thread b{display:block;font-size:14px}
.thread span{display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.thread.unread b{color:var(--ink)}
.thread.unread span{color:var(--ink);font-weight:600}
.thread .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);margin-left:auto;flex:none}
.chat{display:flex;flex-direction:column;min-width:0}
.chat .top{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line)}
.chat .top img{width:40px;height:40px}
.chat .top b{display:block;font-size:14px}
.chat .top span{font-size:12px;color:var(--teal)}
.chat .msgs{flex:1;overflow:auto;padding:22px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:68%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.4;animation:rise .3s both}
.msg.them{background:var(--bg);border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--ink);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.img{padding:0;overflow:hidden;width:220px}
.msg .ts{display:block;font-size:10.5px;opacity:.55;margin-top:4px}
.chat .comp{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line)}
.chat .comp input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 16px;outline:none;background:var(--bg)}
.chat .comp input:focus{border-color:var(--ink)}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth .art{position:relative;overflow:hidden;background:var(--ink)}
.auth .art .tiles{position:absolute;inset:-6%;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;transform:rotate(-8deg) scale(1.1)}
.auth .art .tiles img{width:100%;height:100%;object-fit:cover;border-radius:14px;opacity:.85;animation:drift 14s ease-in-out infinite alternate}
.auth .art .tiles img:nth-child(odd){animation-delay:-6s}
@keyframes drift{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
.auth .art .tag{position:absolute;left:44px;bottom:44px;color:#fff;font-family:var(--font-display);font-size:44px;font-weight:500;letter-spacing:-.02em;line-height:1.05;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.auth .art .tag i{color:var(--amber)}
.auth .form{display:flex;flex-direction:column;justify-content:center;padding:60px;max-width:520px;margin:0 auto;width:100%}
.auth .form .brand{padding:0 0 26px}
.auth h1{font-family:var(--font-display);font-weight:500;font-size:34px;letter-spacing:-.02em;margin:0 0 6px}
.auth p.sub{color:var(--ink-3);margin:0 0 26px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.field input{width:100%;border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:12px 14px;outline:none;transition:border .15s}
.field input:focus{border-color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);margin:6px 0 18px}
.check a{color:var(--teal);font-weight:600;text-decoration:underline}
.auth .btn{width:100%;padding:13px}
.auth .alt{margin-top:20px;text-align:center;font-size:14px;color:var(--ink-3)}
.auth .alt a{color:var(--coral);font-weight:700}
.auth .legal{margin-top:auto;padding-top:30px;font-size:11.5px;color:var(--ink-3);line-height:1.8}
.auth .legal a:hover{text-decoration:underline}
.err{color:var(--coral-deep);font-size:13px;margin:-6px 0 14px}

/* ---------- doc pages ---------- */
.doc{max-width:720px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:44px 52px;box-shadow:var(--shadow)}
.doc .kicker{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);font-weight:700;margin-bottom:8px}
.doc h1{font-family:var(--font-display);font-weight:500;font-size:38px;letter-spacing:-.03em;margin:0 0 4px;line-height:1.05}
.doc .upd{color:var(--ink-3);font-size:13px;margin-bottom:28px}
.doc h2{font-family:var(--font-display);font-weight:600;font-size:21px;margin:30px 0 8px}
.doc h3{font-size:15px;margin:18px 0 6px}
.doc p,.doc li{color:var(--ink-2);line-height:1.65}
.doc ul{padding-left:20px}
.doc a{color:var(--teal);font-weight:600}
.doc .box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:14px 0}
.doc .box b{display:block;margin-bottom:4px}
.doc table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
.doc td,.doc th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"-"}
.faq details p{margin:8px 0 0}

/* ---------- report flow, as pages ---------- */
.sheet{width:min(440px,100%);background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin:0 auto}
.sheet h3{font-family:var(--font-display);font-weight:600;font-size:22px;margin:0;padding:22px 24px 6px}
.sheet p{margin:0;padding:0 24px 16px;color:var(--ink-3);font-size:14px}
.sheet .opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 24px;border-top:1px solid var(--line);text-align:left;font-weight:600;font-size:14.5px}
.sheet .opt:hover{background:var(--bg)}
.sheet .opt.red{color:var(--coral-deep)}
.sheet .opt svg{width:16px;height:16px;color:var(--ink-3)}
.sheet .done{padding:30px 24px;text-align:center}
.sheet .done .ok{width:56px;height:56px;border-radius:50%;background:#e6f4f1;color:var(--teal);display:grid;place-items:center;margin:0 auto 14px}
.sheet .done .ok svg{width:28px;height:28px}
.sheet textarea{width:calc(100% - 48px);margin:0 24px 16px;border:1.5px solid var(--line);border-radius:12px;padding:12px;min-height:90px;resize:vertical;outline:none;background:var(--bg)}
.sheet .row{display:flex;gap:10px;padding:0 24px 22px}
.sheet .row .btn{flex:1}

/* ---------- post detail ---------- */
.pv{display:grid;grid-template-columns:minmax(0,1.1fr) 380px;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.pv .media{background:#111;display:grid;place-items:center;min-height:420px}
.pv .media img{width:100%;height:100%;object-fit:cover}
.pv .side-p{display:flex;flex-direction:column;min-width:0}
.pv .side-p .head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pv .side-p .head img{width:34px;height:34px}
.pv .side-p .head b{font-size:14px}
.pv .side-p .head .more{margin-left:auto;color:var(--ink-3)}
.pv .cl{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.c{display:flex;gap:10px;font-size:13.5px;line-height:1.4}
.c img{width:30px;height:30px}
.c b{margin-right:6px}
.c small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}
.pv .foot{border-top:1px solid var(--line)}
.pv .foot .acts{padding:8px 8px 0}
.pv .foot .likes{padding:4px 18px 2px;font-weight:700;font-size:14px}
.pv .foot .time{padding:0 18px 8px;color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}

/* moment viewer */
.mv{position:relative;width:min(400px,100%);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#111;margin:0 auto}
.mv img{width:100%;height:100%;object-fit:cover}
.mv .who{position:absolute;top:24px;left:14px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.mv .who img{width:34px;height:34px;border-radius:50%;border:2px solid #fff}
.mv .who span{font-weight:400;opacity:.8;font-size:12px}
.mv .cap{position:absolute;left:16px;right:16px;bottom:70px;color:#fff;font-family:var(--font-display);font-size:26px;font-weight:500;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.mv .reply{position:absolute;left:14px;right:14px;bottom:16px;display:flex;gap:8px}
.mv .reply input{flex:1;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff;border-radius:999px;padding:10px 16px;outline:none}
.mv .reply input::placeholder{color:rgba(255,255,255,.7)}
.mv .reply button,.mv .reply a{color:#fff;display:grid;place-items:center}
.mv .reply svg{width:24px;height:24px;fill:#fff}

/* ---------- options sheet (the three dots) ---------- */
.opts summary{list-style:none;cursor:pointer}
.opts summary::-webkit-details-marker{display:none}
.head .opts{margin-left:auto}
.opts .more{display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);padding:6px;border-radius:8px}
.opts .more:hover,.opts[open] .more{background:var(--bg);color:var(--ink)}
.opts .more:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.opts .scrim{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(23,22,26,.45);backdrop-filter:blur(6px);color:var(--ink);font-size:15px;font-weight:400;text-align:left}
.opts .scrim .x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.3);color:#fff;display:grid;place-items:center}
.opts .sheet form{display:block}
.btns .opts .more{height:100%;min-height:42px;padding:0 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
/* The Loop rail sets white, stacked, filled controls; the sheet opened from it is not one of them. */
.loop .rail-r .opts .more{color:#fff;padding:0}
.loop .rail-r .opts .more:hover,.loop .rail-r .opts[open] .more{background:none}
.loop .rail-r .sheet .opt{flex-direction:row;justify-content:space-between;color:var(--ink);font-size:14.5px}
.loop .rail-r .sheet .opt.red{color:var(--coral-deep)}
.loop .rail-r .sheet svg{fill:none;filter:none;width:16px;height:16px}
.loop .rail-r .scrim .x svg{width:20px;height:20px;filter:none}
.moment.add{width:80px}
.moment.add span{max-width:80px}
.moment .blank{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--paper);color:var(--ink-3);position:relative}
@media (max-width:820px){
  .opts .scrim{place-items:end stretch;padding:0}
  .opts .sheet{width:100%;border-radius:20px 20px 0 0;border-bottom:0}
}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:60}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* mobile tab bar */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:8px 10px;justify-content:space-around;z-index:40}
.tabbar a{padding:8px 12px;border-radius:12px;color:var(--ink-3)}
.tabbar a.on{color:var(--ink)}
.tabbar svg{width:26px;height:26px}
.tabbar img{width:26px;height:26px;border-radius:50%}
.mobile-top{display:none;position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 16px;z-index:30;align-items:center;justify-content:space-between}

.empty{color:var(--ink-3);padding:60px 0;text-align:center}
.notif{display:flex;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)}
.notif img.av{width:44px;height:44px}
.notif .th{width:44px;height:44px;border-radius:8px;object-fit:cover;margin-left:auto}
.notif p{margin:0;font-size:14px}
.notif small{color:var(--ink-3)}

@media (max-width:1060px){.cols{grid-template-columns:minmax(0,600px)}.rail{display:none}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .mobile-top{display:flex}
  .tabbar{display:flex}
  .wrap{padding:16px 14px 90px}
  .prof{grid-template-columns:90px 1fr;gap:18px}
  .prof .ring img{width:90px;height:90px}
  .prof h1{font-size:24px}
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox .chat{display:none}
  .auth{grid-template-columns:1fr}
  .auth .art{display:none}
  .auth .form{padding:36px 24px}
  .pv{grid-template-columns:1fr}
  .pv .media{min-height:0}
  .doc{padding:28px 22px}
  .ph h1{font-size:30px}
  .search{width:100%}
}