/* 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 ---------- */
.app{position:relative;z-index:1;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}
.side .foot{padding:12px 12px 0;font-size:11.5px;color:var(--ink-3);line-height:1.8}
.side .foot a{margin-right:8px}
.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 ---------- */
.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) both}
.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}
.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{margin-right:8px}
.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.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{margin-right:8px}
.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}

/* consent prompt.
   `.balanced` and `.weighted` are the two shapes the flag selects. The
   difference is prominence only — both offer the same two choices. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(23,22,26,.35);padding:18px 22px;display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.consent-copy{max-width:640px}
.consent-copy b{display:block;font-size:14.5px;margin-bottom:3px}
.consent-copy p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5}
.consent-copy a{color:var(--teal);font-weight:600;text-decoration:underline}
.consent-actions{display:flex;align-items:center;gap:10px;flex:none}
.consent-actions.balanced .consent-btn{min-width:132px;padding:11px 18px;font-size:14px;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink)}
.consent-actions.balanced .consent-btn:hover{background:var(--bg)}
.consent-actions.balanced .consent-manage{padding:11px 16px;font-size:14px}
.consent-actions.weighted .consent-btn{min-width:150px;padding:13px 26px;font-size:15px}
.consent-actions.weighted .consent-quiet{font-size:11.5px;color:var(--ink-3);text-decoration:underline;order:2}
@media (max-width:820px){.consent{bottom:64px;padding:14px 16px;gap:12px}}

/* 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%}
}