/* Couraja — public site styles. Mobile-first, RTL-aware (logical properties), light/dark. */
:root{
  --indigo-900:#14132F;--indigo-800:#1B1A45;--indigo-700:#2B2A6B;--indigo-500:#4B48A8;--indigo-300:#9A97E0;
  --coral:#F27059;--amber:#F7B267;--lavender:#E8E4F6;--lavender-2:#F4F2FB;--charcoal:#2E2C3A;
  --bg:#F7F6FB;--surface:#FFFFFF;--surface-2:#F1EFF8;--text:#23212F;--muted:#6E6A80;--line:#E4E1EE;
  --primary:var(--indigo-700);--primary-ink:#fff;--accent-c:var(--coral);
  --ok:#2F9E6E;--warn:#C98A12;--err:#D2453B;--info:#3A74D8;
  --radius:18px;--radius-sm:12px;--shadow:0 1px 2px rgba(20,19,47,.04),0 8px 24px rgba(20,19,47,.06);
  --fs:16px;--nav-h:64px;
}
[data-mode="dark"]{
  --bg:#0F0E24;--surface:#1A1937;--surface-2:#222147;--text:#ECEAF7;--muted:#A19DBB;--line:#2E2C57;
  --primary:#8C88F0;--primary-ink:#12112B;--lavender:#2A2856;--lavender-2:#1F1E42;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.25);
}
[data-fs="sm"]{--fs:14.5px}[data-fs="lg"]{--fs:17.5px}[data-fs="xl"]{--fs:19.5px}
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.55;min-height:100vh;overflow-x:hidden}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%}
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:6px}
.skip{position:absolute;inset-inline-start:1rem;top:0;transform:translateY(-150%);background:var(--surface);padding:.5rem 1rem;z-index:100}.skip:focus{transform:none}
.muted{color:var(--muted)}.small{font-size:.85rem}.center{text-align:center}.grow{flex:1}.req{color:var(--err)}
.sys-banner{background:var(--indigo-800);color:#fff;text-align:center;padding:.45rem 1rem;font-size:.9rem}.sys-banner.warn{background:var(--warn)}

/* ---------- Topbar & navigation ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem;color:var(--text);letter-spacing:-.01em}.brand:hover{text-decoration:none}
.top-search{flex:1;max-width:420px;display:none;align-items:center;gap:.5rem;background:var(--surface-2);border-radius:999px;padding:.35rem .9rem;color:var(--muted)}
.top-search input{border:0;background:none;outline:none;flex:1;min-width:0;color:var(--text)}
.top-actions{margin-inline-start:auto;display:flex;align-items:center;gap:.35rem}
.icon-btn{display:inline-flex;align-items:center;gap:.25rem;background:none;border:0;padding:.45rem;border-radius:12px;cursor:pointer;color:var(--text)}.icon-btn:hover{background:var(--surface-2);text-decoration:none}
.lang-code{font-size:.75rem;font-weight:700}
.dropdown{position:relative}.dd-menu{display:none;position:absolute;inset-inline-end:0;top:110%;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);min-width:150px;padding:.35rem;z-index:40}
.dropdown.open .dd-menu{display:block}.dd-menu a{display:block;padding:.5rem .75rem;border-radius:10px;color:var(--text)}.dd-menu a:hover,.dd-menu a.on{background:var(--surface-2);text-decoration:none}
.sidenav{display:none}
.only-mobile{display:inline-flex}
.bottomnav{position:fixed;bottom:0;inset-inline:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:center;background:var(--surface);border-top:1px solid var(--line);z-index:30}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.7rem;padding:.3rem .5rem;border-radius:12px}.bottomnav a:hover{text-decoration:none;color:var(--text)}.bottomnav a.on{color:var(--primary)}
.bell{position:relative}.count-badge{position:absolute;top:0;inset-inline-end:-2px;background:var(--coral);color:#fff;border-radius:999px;font-size:.62rem;line-height:1.05rem;min-width:1.05rem;padding:0 .25rem;text-align:center;font-weight:700}
.count-badge.zero{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.fab{position:fixed;z-index:35;inset-inline-end:1.1rem;bottom:calc(var(--nav-h) + 1rem + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff;border-radius:999px;padding:.85rem;box-shadow:0 10px 26px rgba(242,112,89,.45);font-weight:700}
.fab:hover{text-decoration:none;transform:translateY(-2px)}.fab span{display:none}
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(300px,86vw);background:var(--surface);z-index:80;display:flex;flex-direction:column;padding:1rem;gap:.15rem;box-shadow:var(--shadow);overflow-y:auto}
.drawer a,.drawer-logout{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border-radius:12px;color:var(--text);background:none;border:0;width:100%;text-align:start;cursor:pointer;font:inherit}
.drawer a:hover{background:var(--surface-2);text-decoration:none}.drawer a.on{background:var(--lavender-2);color:var(--primary);font-weight:600}
.drawer-head{display:flex;align-items:center;gap:.6rem;padding:.3rem .3rem 1rem}.drawer-head b{flex:1}
.drawer-post{background:linear-gradient(135deg,var(--coral),var(--amber))!important;color:#fff!important;font-weight:700;margin-bottom:.4rem}
.drawer-backdrop{position:fixed;inset:0;background:rgba(15,14,36,.5);z-index:79}
.drawer-logout{color:var(--err)!important;margin-top:auto}
main{padding:1rem;max-width:1120px;margin:0 auto}
main.with-nav{padding-bottom:calc(var(--nav-h) + 2rem)}
@media (min-width:900px){
  .top-search{display:flex}
  .only-mobile,.bottomnav{display:none!important}
  .fab{bottom:1.5rem;padding:.9rem 1.3rem}.fab span{display:inline}
  .sidenav{display:flex;position:fixed;top:64px;inset-inline-start:max(1rem,calc(50vw - 640px));width:200px;flex-direction:column;align-items:stretch;padding:1rem 0;gap:.25rem;z-index:20}
  .sidenav a{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;gap:.8rem;font-size:1rem;padding:.7rem 1rem;color:var(--text)}.sidenav a:hover{background:var(--surface-2)}
  .sidenav a.on{background:var(--surface);box-shadow:var(--shadow);color:var(--primary);font-weight:600}
  .sidenav .nav-post{background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff!important;font-weight:600;margin:.5rem 0}.sidenav .nav-post .ic{background:none;box-shadow:none;padding:0;width:22px;height:22px}.sidenav .nav-post span{display:inline}
  main.with-nav{padding-inline-start:calc(200px + 2rem);padding-bottom:3rem;max-width:1320px}
}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid transparent;border-radius:999px;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;background:var(--surface-2);color:var(--text);transition:transform .08s,background .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{text-decoration:none}.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--primary-ink)}.btn-primary:hover{box-shadow:0 6px 18px rgba(43,42,107,.25)}
.btn-ghost{background:transparent;border-color:var(--line)}.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--err);color:#fff}.btn-oauth{background:var(--surface);border-color:var(--line)}
.btn-sm{padding:.4rem .85rem;font-size:.88rem}.btn-lg{padding:.85rem 1.6rem;font-size:1.05rem}.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-link{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.85rem;padding:.2rem}.btn-link.danger,.danger{color:var(--err)}
.field{display:flex;flex-direction:column;gap:.35rem;margin:0;border:0;padding:0}.field>span,.field legend{font-weight:600;font-size:.9rem}.field small{color:var(--muted);font-size:.8rem}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.65rem .85rem;outline:none;transition:border .15s}
input:focus,select:focus,textarea:focus{border-color:var(--indigo-300)}
textarea{resize:vertical}
.stack{display:flex;flex-direction:column;gap:1rem}.stack-sm{display:flex;flex-direction:column;gap:.4rem}
.row2,.row3{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}.row3{grid-template-columns:repeat(3,1fr)}}
.row-end{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.input-row{display:flex;gap:.5rem;align-items:center}
.check{display:flex;gap:.55rem;align-items:flex-start;cursor:pointer}.check input{margin-top:.3rem;accent-color:var(--primary)}
.switch{display:flex;gap:.8rem;align-items:flex-start;cursor:pointer;padding:.35rem 0}
.switch input{position:absolute;opacity:0}.switch>span{flex:none;width:42px;height:24px;background:var(--line);border-radius:999px;position:relative;transition:.2s;margin-top:2px}
.switch>span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--primary)}.switch input:checked+span::after{inset-inline-start:21px}
.switch input:focus-visible+span{outline:3px solid var(--amber)}
.switch div{display:flex;flex-direction:column}.switch small{color:var(--muted);font-size:.82rem}
.seg{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px;width:100%}
.seg label{flex:1;text-align:center;padding:.55rem .8rem;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg label.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.seg input{position:absolute;opacity:0}
.seg.small{width:auto}

/* ---------- Cards / chips ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow)}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .65rem;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.8rem;border:1px solid transparent;white-space:nowrap}
a.chip:hover{text-decoration:none;border-color:var(--line)}.chip.on{background:var(--primary);color:var(--primary-ink)}.chip-lg{font-size:.95rem;padding:.4rem .9rem}
.chip-ai{background:transparent;border-color:var(--line);color:var(--muted)}
.chip-me{background:var(--lavender);color:var(--primary);font-size:.7rem}.chip-op{background:var(--coral);color:#fff;font-size:.7rem}
.chip-pin{background:#FFF1DA;color:#8A5A00}.chip-pick{background:var(--lavender);color:var(--primary)}
.chip-warn,.st-flagged,.st-pending{background:#FFF1DA;color:#8A5A00}.chip-err,.st-blocked,.st-removed{background:#FDE3E1;color:#A1261D}
.st-published,.st-visible{background:#DDF5EA;color:#1C6B49}.st-expired{background:var(--surface-2);color:var(--muted)}.st-draft{background:var(--lavender);color:var(--primary)}
[data-mode="dark"] .chip-warn,[data-mode="dark"] .st-flagged,[data-mode="dark"] .st-pending{background:#3D3113;color:#F4C96B}
[data-mode="dark"] .chip-err,[data-mode="dark"] .st-blocked,[data-mode="dark"] .st-removed{background:#43201F;color:#F59C94}
[data-mode="dark"] .st-published,[data-mode="dark"] .st-visible{background:#15382A;color:#7FD8AE}
[data-mode="dark"] .chip-pin{background:#3D3113;color:#F4C96B}
.flash{padding:.8rem 1rem;border-radius:var(--radius-sm);margin:0 0 1rem;border:1px solid;font-size:.95rem}
.flash-ok{background:#E6F6EE;border-color:#BFE6D2;color:#1C6B49}.flash-err{background:#FDECEA;border-color:#F6C8C3;color:#A1261D}.flash-warn{background:#FFF6E3;border-color:#F4DDA8;color:#7A5200}
[data-mode="dark"] .flash-ok{background:#12301F;border-color:#1F5236;color:#8EE0B6}[data-mode="dark"] .flash-err{background:#3A1A18;border-color:#5E2622;color:#F7A9A2}[data-mode="dark"] .flash-warn{background:#35290E;border-color:#5C4613;color:#F4CF7F}
.page-title{font-size:1.6rem;margin:.25rem 0 1rem}.section-title{font-size:1.1rem;margin:1.5rem 0 .75rem}
.title-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.title-row .page-title{margin-inline-end:auto}
.narrow{max-width:680px;margin:0 auto}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted)}.empty-ic{font-size:2.8rem;margin-bottom:.5rem}.empty h3{color:var(--text)}
.spinner{display:inline-block;width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.feed-loader{text-align:center;padding:1rem}
.notice{margin-bottom:1rem}

/* ---------- Landing ---------- */
.hero{position:relative;text-align:center;padding:4rem 1rem 3rem;overflow:hidden;border-radius:28px;background:radial-gradient(120% 90% at 50% 0%,#2B2A6B 0%,#14132F 70%);color:#fff;margin-bottom:2rem}
.hero-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(242,112,89,.45),transparent 65%);top:-120px;inset-inline-start:50%;transform:translateX(-50%);filter:blur(20px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.6;transform:translateX(-50%) scale(1.1)}}
.hero h1{font-family:var(--font-text);font-size:clamp(2rem,6vw,3.4rem);font-weight:600;margin:.8rem 0;position:relative}
.hero .lead{font-size:1.15rem;opacity:.85;max-width:560px;margin:0 auto 2rem;position:relative}
.hero-cta{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;position:relative}.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.hero .btn-primary{background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff}
.pillars{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:2rem}@media(min-width:700px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}.pillar>span{font-size:2rem}
.landing-trust{text-align:center;max-width:720px;margin:0 auto 2rem}

/* ---------- Feed ---------- */
.feed-layout{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1180px){.feed-layout{grid-template-columns:minmax(0,1fr) 300px}}
.feed-side{display:none}@media(min-width:1180px){.feed-side{display:flex;flex-direction:column;gap:1rem;position:sticky;top:80px;align-self:start}}
.side-card h3{font-size:1rem}.side-post{display:block;padding:.6rem 0;border-top:1px solid var(--line);color:var(--text);font-family:var(--font-text);font-size:.92rem}.side-post small{display:block;color:var(--muted);font-family:var(--font-ui)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.4rem}.tag-cloud small{color:var(--muted)}
.composer-teaser{display:flex;align-items:center;gap:.8rem;color:var(--muted);margin-bottom:1rem}.composer-teaser:hover{text-decoration:none;border-color:var(--indigo-300)}.composer-teaser>span:nth-child(2){flex:1}
.tabs{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:.75rem}
.tabs a{padding:.6rem .9rem;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a.on{color:var(--text);border-color:var(--coral)}.tabs .surprise{margin-inline-start:auto;display:flex;align-items:center;gap:.3rem;color:var(--primary)}
.filters{display:flex;gap:.5rem;overflow-x:auto;margin-bottom:1rem;scrollbar-width:none}.filters select{width:auto;flex:none;padding:.4rem .7rem;border-radius:999px;font-size:.88rem}
.feed{display:flex;flex-direction:column;gap:1rem}
.rail{margin-bottom:1.25rem}.rail-head{display:flex;justify-content:space-between;align-items:baseline}.rail-head h2{font-size:1.05rem}
.rail-track{display:flex;gap:.75rem;overflow-x:auto;padding:.25rem .1rem .75rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail-card{flex:none;width:210px;scroll-snap-align:start;background:linear-gradient(160deg,var(--indigo-700),var(--indigo-900));color:#fff;border-radius:18px;padding:.9rem;display:flex;flex-direction:column;gap:.5rem;min-height:150px}
.rail-card:hover{text-decoration:none;transform:translateY(-2px)}.rail-card p{margin:0;font-family:var(--font-text);font-size:.92rem;flex:1;opacity:.95}
.rail-cd{font-size:.78rem;background:rgba(255,255,255,.14);border-radius:999px;padding:.15rem .6rem;align-self:flex-start}.rail-alias{font-size:.75rem;opacity:.7}

/* ---------- Post card ---------- */
.post{position:relative;transition:opacity .9s ease,transform .9s ease,filter .9s}
.post-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem}
.avatar{border-radius:50%;flex:none;display:block}
.who{display:flex;flex-direction:column;min-width:0;flex:1}.alias{font-weight:600;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.alias a{color:var(--text)}.meta{font-size:.8rem;color:var(--muted)}
.countdown{font-size:.78rem;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
.countdown.soon{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.countdown.last-hour{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(242,112,89,.45)}50%{box-shadow:0 0 0 7px rgba(242,112,89,0)}}
.post.vanishing{opacity:0;transform:scale(.97) translateY(-6px);filter:blur(4px)}
.badges{display:flex;gap:.4rem;margin-bottom:.5rem}
.inspired{display:inline-block;font-size:.82rem;margin-bottom:.4rem;color:var(--muted)}
.confession-text{font-family:var(--font-text);font-size:1.12rem;line-height:1.7;overflow-wrap:anywhere}
.post-body .confession-text a.stretch{color:inherit;display:block}.post-body .confession-text a.stretch:hover{text-decoration:none}
.post-body{position:relative}
.is-sensitive .post-body>*:not(.reveal){filter:blur(9px);user-select:none;pointer-events:none}
.is-sensitive.revealed .post-body>*{filter:none;pointer-events:auto;user-select:auto}
.reveal{position:absolute;inset:0;z-index:2;margin:auto;height:fit-content;width:fit-content;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;cursor:pointer;font-weight:600}
.revealed .reveal{display:none}
.post-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.75rem 0 .25rem}
.post-actions{display:flex;align-items:center;gap:.2rem;border-top:1px solid var(--line);margin-top:.6rem;padding-top:.4rem}
.act{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;color:var(--muted);padding:.45rem .6rem;border-radius:999px;cursor:pointer;font-size:.9rem}
.act:hover{background:var(--surface-2);text-decoration:none;color:var(--text)}
.act.like.on{color:var(--coral)}.act.like.on svg{animation:pop .35s}.act.save.on{color:var(--primary)}
.act svg path[fill="currentColor"]{fill:transparent;stroke:currentColor;stroke-width:2}
.act.on svg path[fill="currentColor"]{fill:currentColor}
@keyframes pop{50%{transform:scale(1.35)}}
.react-wrap,.more-wrap{position:relative}
.react-menu,.more-menu{display:none;position:absolute;bottom:115%;inset-inline-start:0;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);padding:.3rem;z-index:10}
.react-wrap.open .react-menu{display:flex}.react-menu button{background:none;border:0;font-size:1.4rem;padding:.25rem .4rem;cursor:pointer;border-radius:50%;display:flex;flex-direction:column;align-items:center;transition:transform .15s}
.react-menu button:hover{transform:scale(1.25)}.react-menu button.on{background:var(--lavender)}.react-menu small{font-size:.6rem;color:var(--muted);min-height:.8em}
.more-menu{border-radius:14px;inset-inline-start:auto;inset-inline-end:0;flex-direction:column;min-width:190px}
.more-wrap.open .more-menu{display:flex}
.more-menu a,.more-menu button{display:block;text-align:start;background:none;border:0;padding:.55rem .8rem;border-radius:10px;cursor:pointer;color:var(--text);font-size:.9rem}
.more-menu a:hover,.more-menu button:hover{background:var(--surface-2);text-decoration:none}.more-menu .danger{color:var(--err)}
.crisis-box{background:#FFF6E3;border:1px solid #F4DDA8;color:#6A4700;border-radius:12px;padding:.7rem .9rem;margin-top:.75rem;font-size:.92rem}
[data-mode="dark"] .crisis-box{background:#35290E;border-color:#5C4613;color:#F4CF7F}

/* Audio player */
.audio{display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,color-mix(in srgb,var(--indigo-500) 14%,var(--surface)),var(--surface-2));border-radius:999px;padding:.5rem .9rem .5rem .5rem;position:relative}
.audio::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(60% 120% at 20% 50%,rgba(242,112,89,.25),transparent 70%);z-index:0;opacity:0;transition:opacity .4s}
.audio.playing::before{opacity:1;animation:breathe2 2.4s ease-in-out infinite}@keyframes breathe2{50%{opacity:.5}}
.audio>*{position:relative;z-index:1}
.audio-play{width:44px;height:44px;border-radius:50%;border:0;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 4px 14px rgba(43,42,107,.3)}
.audio-play .ic-pause,.audio.playing .ic-play{display:none}.audio.playing .ic-pause{display:block}
.wave{flex:1;display:flex;align-items:center;gap:2px;height:40px;cursor:pointer;direction:ltr}
.wave i{flex:1;background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:2px;min-height:4px;transition:background .15s}
.wave i.played{background:var(--coral)}
.audio-time{font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--muted);min-width:3ch}
.transcript{margin-top:.7rem}.transcript summary{cursor:pointer;color:var(--muted);font-size:.88rem}.transcript p{font-size:1rem;margin:.5rem 0 0}

/* ---------- Composer ---------- */
.composer{display:flex;flex-direction:column;gap:1.1rem}
.rte-toolbar{display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.rte-toolbar button{background:none;border:0;min-width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:1rem}.rte-toolbar button:hover{background:var(--surface-2)}
.counter{font-size:.8rem;color:var(--muted)}
.rte{min-height:180px;padding:.8rem .2rem;outline:none;white-space:pre-wrap}
.rte:empty::before{content:attr(data-placeholder);color:var(--muted)}
.emoji-wrap{position:relative}.emoji-pop{display:none;position:absolute;top:110%;inset-inline-start:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.4rem;grid-template-columns:repeat(5,1fr);gap:.1rem;z-index:10;width:230px}
.emoji-wrap.open .emoji-pop{display:grid}
.recorder{display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center}
.rec-canvas{width:100%;height:80px;border-radius:14px;background:var(--surface-2)}
.rec-time{font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:600}
.rec-btn{width:78px;height:78px;border-radius:50%;border:4px solid color-mix(in srgb,var(--coral) 35%,transparent);background:var(--surface);cursor:pointer;display:grid;place-items:center;touch-action:none;transition:transform .15s}
.rec-btn span{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--amber));transition:all .2s}
.rec-btn.rec span{width:30px;height:30px;border-radius:8px}.rec-btn.rec{animation:pulse 1.4s infinite;transform:scale(1.05)}
.rec-review{width:100%;display:flex;flex-direction:column;gap:.5rem;align-items:center}.rec-review .audio{width:100%}
.transcript-field{width:100%;text-align:start}
.expiry{border:0;padding:0;margin:0}.expiry legend{font-weight:700;margin-bottom:.6rem}
.timeline{position:relative;display:flex;justify-content:space-between;padding:.3rem 0}
.tl-line{position:absolute;top:28px;inset-inline:10%;height:4px;background:var(--line);border-radius:4px;z-index:0}
.tl-line i{position:absolute;inset-block:0;inset-inline-start:0;background:linear-gradient(90deg,var(--coral),var(--indigo-500));border-radius:4px;transition:width .3s;width:var(--tl,100%)}
[dir=rtl] .tl-line i{background:linear-gradient(270deg,var(--coral),var(--indigo-500))}
.tl-stop{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;flex:1}
.tl-stop input{position:absolute;opacity:0}
.tl-ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-size:1.25rem;transition:all .2s}
.tl-stop.on .tl-ic{border-color:var(--coral);background:var(--coral);color:#fff;transform:scale(1.12);box-shadow:0 6px 16px rgba(242,112,89,.35)}
.tl-stop input:focus-visible+.tl-ic{outline:3px solid var(--amber)}
.tl-lb{font-size:.78rem;color:var(--muted);text-align:center}.tl-stop.on .tl-lb{color:var(--text);font-weight:600}
.timeline.mini{justify-content:center;gap:.9rem}.timeline.mini span{display:flex;flex-direction:column;align-items:center;font-size:1.3rem;opacity:.5}.timeline.mini span.on{opacity:1}.timeline.mini small{font-size:.7rem}
.reassure{margin:.6rem 0 0;font-size:.9rem}
.options{display:flex;flex-direction:column;gap:.25rem}
.composer-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1rem}
.inspired-src{margin-bottom:1rem;border-inline-start:4px solid var(--coral)}.inspired-src p{font-family:var(--font-text);margin:.3rem 0}

/* ---------- Post detail & comments ---------- */
.back{display:inline-block;margin-bottom:.75rem;color:var(--muted)}
.post-detail .post{margin-bottom:1rem}
.comments{margin-top:1rem}
.comment-form{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.replying{font-size:.85rem;color:var(--muted)}.replying button{background:none;border:0;cursor:pointer;color:var(--muted)}
.comment{display:flex;gap:.65rem;padding:.8rem 0;border-top:1px solid var(--line)}
.comment.reply{margin-inline-start:2.6rem;border-top-style:dashed}
.comment.is-pending{opacity:.65}
.comment-main{flex:1;min-width:0}.comment-head{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;font-size:.9rem}
.comment p{margin:.25rem 0}
.comment-actions{display:flex;gap:.75rem}.comment-actions button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.8rem;padding:0}.comment-actions button:hover{color:var(--text)}
.vanished{text-align:center;padding:3rem 1rem;animation:fadeIn 1.2s}
@keyframes fadeIn{from{opacity:0;filter:blur(6px)}to{opacity:1}}

/* ---------- Profile ---------- */
.profile-head{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}.profile-head>div:nth-child(2){flex:1;min-width:200px}
.profile-head h1{font-size:1.4rem;margin:0}.verified{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--info);color:#fff;font-size:.7rem;vertical-align:middle}
.stats{display:flex;gap:1.3rem;margin-top:.6rem}.stats div{display:flex;flex-direction:column}.stats b{font-size:1.2rem}.stats span{font-size:.75rem;color:var(--muted)}
.profile-actions{display:flex;gap:.5rem}
.my-list{display:flex;flex-direction:column;gap:.75rem}
.my-item{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;color:var(--text);margin-bottom:.75rem}.my-item:hover{text-decoration:none}
.my-main{flex:1;min-width:220px}.my-text{display:block;color:var(--text);font-family:var(--font-text)}
.my-meta{display:flex;gap:.6rem;align-items:center;font-size:.82rem;margin-top:.35rem;flex-wrap:wrap}
.my-side{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.big-countdown{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem}
.my-item.status-expired{opacity:.6}
.extend{width:auto!important;padding:.3rem .6rem!important;font-size:.8rem;border-radius:999px!important}
.settings .card{margin-bottom:1.25rem}.avatar-edit{display:flex;gap:1rem;align-items:center}
.toggle-grid{display:grid;grid-template-columns:1fr;gap:.1rem}@media(min-width:600px){.toggle-grid{grid-template-columns:1fr 1fr}}
.font-preview p{margin:.3rem 0}
.danger-zone{border-top:1px solid var(--line);padding-top:1rem}
.qr{display:flex;justify-content:center;padding:.5rem;background:#fff;border-radius:12px;width:fit-content;margin:0 auto}
code.secret{display:block;text-align:center;letter-spacing:.1em}

/* ---------- Explore ---------- */
.search-big{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:.35rem .4rem .35rem 1rem;margin-bottom:1rem;color:var(--muted)}
.search-big input{border:0!important;padding:.4rem 0!important;background:none!important}
.chips-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.tag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}
.tag-tile{display:flex;flex-direction:column;gap:.2rem;color:var(--text);padding:1rem}.tag-tile:hover{text-decoration:none;border-color:var(--indigo-300)}.tag-tile small{color:var(--muted)}
.alias-list{display:grid;gap:.5rem}.alias-item{display:flex;align-items:center;gap:.75rem;color:var(--text);padding:.7rem 1rem}.alias-item small{margin-inline-start:auto;color:var(--muted)}

/* ---------- Notifications ---------- */
.notif-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.notif{display:flex;gap:.8rem;align-items:flex-start;padding:.85rem 1rem}.notif.unread{border-inline-start:4px solid var(--coral)}
.notif-ic{font-size:1.3rem}.notif-body{color:var(--text);display:flex;flex-direction:column;gap:.2rem;flex:1}.notif-body:hover{text-decoration:none}
.notif blockquote{margin:.3rem 0;padding:.5rem .8rem;background:var(--surface-2);border-radius:10px}

/* ---------- Auth / onboarding ---------- */
.auth-wrap{min-height:70vh;display:grid;place-items:center}
.auth-card{width:100%;max-width:420px;padding:2rem}.auth-brand{text-align:center;margin-bottom:1.25rem}.auth-brand h1{font-size:1.5rem;margin:.6rem 0 .2rem}
.sep{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.85rem;margin:1rem 0}.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-note{font-size:.82rem;color:var(--muted);text-align:center;margin-top:1.25rem}
body.onboarding{background:radial-gradient(120% 80% at 50% 0%,#2B2A6B 0%,#14132F 75%);color:#fff}
.onb{max-width:460px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:1rem}
.onb-top{display:flex;justify-content:space-between;align-items:center}.onb-top a{color:rgba(255,255,255,.7)}
.onb-slides{flex:1;display:grid;align-items:center}.onb-slide{grid-area:1/1;opacity:0;transform:translateX(30px);transition:all .45s;pointer-events:none;text-align:center}
[dir=rtl] .onb-slide{transform:translateX(-30px)}
.onb-slide.on{opacity:1;transform:none;pointer-events:auto}
.onb-art{width:180px;height:180px;border-radius:50%;margin:0 auto 2rem;display:grid;place-items:center;font-size:5rem;background:radial-gradient(circle,rgba(242,112,89,.35),transparent 70%)}
.onb-slide h1{font-family:var(--font-text);font-size:2rem}.onb-slide p{opacity:.85;font-size:1.05rem}
.onb-form{text-align:start;color:var(--text);background:var(--surface);padding:1.25rem;border-radius:var(--radius);margin-top:1rem}
.onb-foot{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}
.dots{display:flex;gap:.4rem}.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s}.dots i.on{background:var(--coral);width:24px;border-radius:4px}
.onb .btn-primary{background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff}

/* ---------- Pages ---------- */
.page-nav{display:flex;gap:.3rem;overflow-x:auto;margin-bottom:1rem;scrollbar-width:none}.page-nav a{padding:.4rem .8rem;border-radius:999px;color:var(--muted);white-space:nowrap;font-size:.9rem}.page-nav a.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.prose{line-height:1.75}.prose h2{margin-top:1.5rem;font-size:1.2rem}.prose li{margin:.3rem 0}
.blocked-card{text-align:center}.blocked-card .reason{font-size:1.1rem;font-weight:600;color:var(--err)}.blocked-card blockquote{text-align:start;background:var(--surface-2);border-radius:12px;padding:.8rem 1rem;margin:1rem 0;font-family:var(--font-text)}
.blocked-card form{text-align:start}

/* ---------- Footer, modals, toast ---------- */
.site-footer{text-align:center;padding:2rem 1rem calc(var(--nav-h) + 2rem);color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);margin-top:2rem}
@media(min-width:900px){.site-footer{padding-bottom:2rem}}
.site-footer nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:.75rem 0}.site-footer nav a{color:var(--muted)}
.crisis-footer{max-width:640px;margin:0 auto}
.modal{border:0;padding:0;background:transparent;max-width:min(460px,calc(100vw - 2rem));width:100%;color:var(--text)}
.modal::backdrop{background:rgba(15,14,36,.55);backdrop-filter:blur(3px)}
.modal-card{background:var(--surface);border-radius:22px;padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow)}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}
.radio-list{display:grid;gap:.35rem}.radio-list label{display:flex;gap:.6rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;cursor:pointer}.radio-list label:has(input:checked){border-color:var(--primary);background:var(--lavender-2)}
.copy-row{display:flex;gap:.5rem}.share-apps{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center}
.toast{position:fixed;bottom:calc(var(--nav-h) + 1.25rem);left:50%;transform:translateX(-50%) translateY(20px);background:var(--indigo-800);color:#fff;padding:.7rem 1.2rem;border-radius:999px;opacity:0;transition:all .25s;z-index:100;pointer-events:none;font-size:.92rem;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.cookie-bar{position:fixed;bottom:calc(var(--nav-h) + .75rem);inset-inline:1rem;max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;padding:.8rem 1rem;display:flex;gap:1rem;align-items:center;z-index:60;font-size:.88rem}
.cookie-bar p{margin:0;flex:1}@media(min-width:900px){.cookie-bar,.toast{bottom:1.5rem}}
body.bare .cookie-bar{bottom:1rem}
/* Confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:200}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.top-search input{border:0!important;padding:.2rem 0!important;background:none!important;box-shadow:none!important}
.sidenav .nav-post.on{background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff}
[hidden]{display:none!important}
@media(max-width:480px){.top-actions .btn-ghost{display:none}.brand span{font-size:1.05rem}}
.my-text:hover{text-decoration:none}

/* ---------- v2 components ---------- */
.anon-banner{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--lavender-2);border:1px solid var(--line);border-radius:14px;padding:.55rem .9rem;margin-bottom:1rem;font-size:.9rem}
.anon-banner a{margin-inline-start:auto;font-size:.85rem}
.chip-anon{background:var(--surface-2);color:var(--muted);font-size:.68rem;border:1px solid var(--line)}
.chip-kind{font-size:.72rem;font-weight:600}.k-problem{background:#E3F1FF;color:#1F5FA8}.k-embarrassing{background:#FFE8EE;color:#A8325A}.k-confession{background:var(--lavender);color:var(--primary)}
[data-mode="dark"] .k-problem{background:#16304F;color:#9CC8F7}[data-mode="dark"] .k-embarrassing{background:#40182A;color:#F4A6BF}
.chip-dur{background:var(--primary);color:var(--primary-ink);font-weight:700}
.chip-helpful{background:#DDF5EA;color:#1C6B49;font-size:.68rem}[data-mode="dark"] .chip-helpful{background:#15382A;color:#7FD8AE}
.badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.meta a{color:inherit}
.top-comment{display:flex;gap:.5rem;align-items:flex-start;background:var(--surface-2);border-radius:12px;padding:.5rem .7rem;margin-top:.6rem;color:var(--text);font-size:.88rem}
.top-comment:hover{text-decoration:none;background:var(--lavender-2)}.top-comment b{margin-inline-end:.3rem}
.view-comments{display:inline-block;margin-top:.4rem;font-size:.85rem;color:var(--muted)}
.act.relate .lbl{font-size:.8rem}.act.relate.on{color:var(--primary);background:var(--lavender-2)}
.act.report:hover{color:var(--err)}
@media(max-width:520px){.act.relate .lbl{display:none}.post-actions .act{padding:.45rem .45rem}}
.audio{position:relative}.audio-wm{position:absolute;inset-inline-end:.9rem;bottom:-1px;font-size:.6rem;color:var(--muted);opacity:.6;pointer-events:none;user-select:none;white-space:nowrap}
.protect{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.audio,.audio *{-webkit-touch-callout:none}
.feed-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:.75rem}
.feed-head .tabs{border:0;margin:0;flex:1;min-width:0}
.more-dd .dd-menu{min-width:200px}
.filter-btn{display:inline-flex;align-items:center;gap:.35rem}
.filter-count{background:var(--coral);color:#fff;border-radius:999px;font-size:.7rem;padding:0 .4rem}
.filter-drawer{border:0;padding:0;margin:0 0 0 auto;max-width:420px;width:100%;height:100vh;max-height:100vh;background:var(--surface);color:var(--text)}
[dir=rtl] .filter-drawer{margin:0 auto 0 0}
.filter-drawer::backdrop{background:rgba(15,14,36,.5)}
.filter-drawer form{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;height:100%;overflow-y:auto}
.chip-radio{display:flex;flex-wrap:wrap;gap:.4rem}.chip-radio label{cursor:pointer}.chip-radio input{position:absolute;opacity:0}
.chip-radio span{display:inline-flex;gap:.3rem;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--line);font-size:.88rem}
.chip-radio input:checked+span{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.chip-radio input:focus-visible+span{outline:3px solid var(--amber)}
.collapsible.collapsed .tag-cloud>*:nth-child(n+7){display:none}
.see-all{background:none;border:0;color:var(--primary);cursor:pointer;padding:.4rem 0;font:inherit;font-size:.88rem}
.mood-scroll{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.4rem;margin-bottom:.8rem;scrollbar-width:none}
@media(min-width:1180px){.mood-scroll{display:none}}
.skeleton{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.skeleton i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-2),var(--lavender-2),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s infinite}
.skeleton i:first-child{width:40%}.skeleton i:last-child{width:70%}@keyframes shimmer{to{background-position:-200% 0}}
.ptr{position:fixed;top:64px;left:50%;transform:translate(-50%,-60px);background:var(--surface);border-radius:999px;box-shadow:var(--shadow);padding:.45rem;z-index:25;transition:transform .15s}
.countdown.soon6{color:var(--coral)}
.post.vanish-pulse .countdown{animation:pulse 1.8s ease-in-out infinite}
.composer-box{border:1.5px solid var(--line);border-radius:14px;padding:.3rem .8rem;background:var(--surface);transition:border .15s}
.composer-box:focus-within{border-color:var(--indigo-300)}
.rte{min-height:200px}
.char-guide{font-size:.8rem;color:var(--muted);margin:.3rem 0 0}
.counter.warn{color:#D9822B;font-weight:700}.counter.danger{color:var(--err);font-weight:700}
.nick-row{display:flex;gap:.5rem;align-items:center}.nick-row input{flex:1}
.kind-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.kind-pick label{cursor:pointer}
.kind-pick input{position:absolute;opacity:0}.kind-pick span{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.7rem .4rem;border:1.5px solid var(--line);border-radius:14px;text-align:center;font-size:.85rem}
.kind-pick span b{font-size:1.4rem}.kind-pick input:checked+span{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,var(--surface))}
.kind-pick input:focus-visible+span{outline:3px solid var(--amber)}
.hint-list{margin:.3rem 0 0;padding-inline-start:1.1rem;font-size:.8rem;color:var(--muted)}
.autosave{font-size:.78rem;color:var(--muted)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;padding-inline-start:1.4rem;font-size:1rem;margin:0 0 1rem}
.hp{position:absolute;width:1px!important;height:1px!important;padding:0!important;border:0!important;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
.cookie-actions{display:flex;gap:.4rem}
.folder-bar{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.folder-select{width:auto!important;padding:.25rem .5rem!important;font-size:.8rem;border-radius:999px!important}
.follow-btn.on{background:var(--primary);color:var(--primary-ink)}
.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.mood-tile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:1rem;color:var(--text);text-align:center}.mood-tile b{font-size:2rem}.mood-tile:hover{text-decoration:none;border-color:var(--indigo-300)}
.mood-tile.on{border-color:var(--coral)}
.prose h2{margin-top:1.6rem}.prose table{border-collapse:collapse;width:100%}.prose td,.prose th{border:1px solid var(--line);padding:.4rem .6rem;text-align:start}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;margin:1rem 0}
.stat-grid .card{text-align:center}.stat-grid b{display:block;font-size:1.6rem}
.status-row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}.status-dot{width:10px;height:10px;border-radius:50%}
.err-page{text-align:center;padding:4rem 1rem}.err-page .code{font-size:4rem;font-weight:800;background:linear-gradient(135deg,var(--coral),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}

.cookie-bar{flex-wrap:wrap}.cookie-actions{flex-wrap:wrap}
.anon-banner>span{flex:1 1 200px}
.counter{direction:ltr;unicode-bidi:isolate}
.hero{overflow:hidden}
.cookie-bar>p,.cookie-bar>span,.cookie-bar>div:first-child{flex:1 1 260px;margin:0}

/* ---------- v3 polish: softer depth, motion and focus ---------- */
::selection{background:color-mix(in srgb,var(--coral) 30%,transparent)}
body{background:radial-gradient(1200px 600px at 100% -10%,color-mix(in srgb,var(--indigo-300) 14%,transparent),transparent 60%),radial-gradient(900px 500px at -10% 10%,color-mix(in srgb,var(--amber) 10%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
.card{transition:box-shadow .25s ease,transform .25s ease,border-color .25s}
.post:hover{box-shadow:0 2px 4px rgba(20,19,47,.05),0 16px 40px rgba(20,19,47,.09);border-color:color-mix(in srgb,var(--primary) 18%,var(--line))}
.btn{transition:transform .12s ease,background .2s,box-shadow .2s,filter .2s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}
.btn-primary:hover{filter:saturate(1.1) brightness(1.03);box-shadow:0 8px 20px color-mix(in srgb,var(--coral) 35%,transparent)}
.field input,.field select,.field textarea,.input-row input{transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 15%,transparent)}
.confession-text{line-height:1.75;letter-spacing:.005em}
.topbar{box-shadow:0 1px 0 var(--line),0 6px 20px rgba(20,19,47,.03)}
.sidenav a{border-radius:14px;transition:background .15s,color .15s}
.sidenav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--coral) 12%,var(--surface)),var(--surface))}
.chip{transition:background .15s,border-color .15s}
a.chip:hover{text-decoration:none;border-color:color-mix(in srgb,var(--primary) 30%,transparent)}
.fab{transition:transform .2s ease,box-shadow .2s}.fab:hover{text-decoration:none;transform:translateY(-2px) scale(1.02);box-shadow:0 14px 34px rgba(242,112,89,.5)}
.oauth-stack{display:grid;gap:.55rem}
.btn-oauth{gap:.6rem;font-weight:600}.btn-oauth:hover{background:var(--surface-2)}
.btn-oauth-fb{background:#1877F2;color:#fff;border-color:#1877F2}.btn-oauth-fb:hover{background:#166FE5}
.page-nav a{transition:background .15s}
.prose hr{border:0;height:1px;background:var(--line);margin:2rem 0}
.prose h2[id]{scroll-margin-top:80px}
section[id]{scroll-margin-top:80px}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 40%,transparent) transparent}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.cookie-bar>p{flex:1 1 260px;margin:0}
/* v4: notification count always red */
.count-badge,.count-badge.zero{background:#E5383B;color:#fff;border:0;box-shadow:0 0 0 2px var(--surface)}
/* suggestions */
.sug{display:flex;gap:1rem;align-items:flex-start;text-align:start}
.sug-vote button{display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:3.2rem;padding:.45rem .3rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer;color:var(--muted);font-size:.8rem}
.sug-vote button b{font-size:1.05rem;color:var(--text)}.sug-vote button.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}.sug-vote button.on b{color:inherit}
.sug-main{flex:1;min-width:0}.sug-main h3{margin:0 0 .3rem;font-size:1.05rem}.sug-main p{margin:.2rem 0 .4rem}
.sug-reply{background:var(--surface-2);border-radius:12px;padding:.5rem .7rem;font-size:.9rem}
.sug-planned{background:#E8F0FF;color:#2D5BD3}.sug-done{background:#E3F6EC;color:#2F9E6E}.sug-declined{background:#F6E5E4;color:#B5443A}

/* ---------- v4 desktop shell: menu, content and header share one centered 1200px column; search in the middle ---------- */
@media (min-width:900px){
  :root{--shell:1200px;--side-w:220px}
  .topbar{display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;padding-inline:max(1rem,calc((100% - var(--shell)) / 2))}
  .topbar .brand{justify-self:start;grid-column:1}
  .topbar .top-search{grid-column:2;justify-self:stretch;max-width:none;width:100%}
  .topbar .top-actions{grid-column:3;justify-self:end;margin-inline-start:0}
  .sidenav{inset-inline-start:max(1rem,calc((100% - var(--shell)) / 2));width:var(--side-w);padding-top:1.25rem}
  .sidenav a{padding-inline:.9rem}
  main.with-nav{max-width:var(--shell);margin-inline:auto;padding-inline-start:calc(var(--side-w) + 2.5rem);padding-inline-end:1rem}
  main.with-nav .narrow{margin-inline:0;max-width:760px}
}
@media (min-width:900px) and (max-width:1240px){ main.with-nav{padding-inline-start:calc(var(--side-w) + 2rem + max(1rem,calc((100% - var(--shell)) / 2)))} }
/* v4: with the wider side menu, the right column only appears on large screens */
@media (min-width:1180px) and (max-width:1359px){.feed-layout{grid-template-columns:minmax(0,1fr)}.feed-side{display:none}.mood-scroll{display:flex}}
.guest-cta b{color:var(--text)}

/* ---------- v5: growth features ---------- */
.counters{white-space:nowrap}
.quoted{display:block;margin:.4rem 0 .6rem;padding:.6rem .8rem;border-inline-start:3px solid var(--coral);background:var(--surface-2);border-radius:0 12px 12px 0;color:var(--text)}
[dir="rtl"] .quoted{border-radius:12px 0 0 12px}
.quoted:hover{text-decoration:none;background:color-mix(in srgb,var(--coral) 8%,var(--surface-2))}
.quoted-head{display:block;font-size:.78rem;color:var(--muted);margin-bottom:.2rem}.quoted-text{display:block;font-size:.92rem;line-height:1.5}
.btn-wa{background:#25D366;color:#fff!important;border-color:#25D366}.btn-wa:hover{background:#1EBE5A}
.post-actions .act.wa{color:#25D366}.post-actions .act.wa:hover{background:rgba(37,211,102,.12)}
.post-actions .act.quote .lbl{font-size:.8rem}
.share-card .btn-wa{margin:.4rem 0 .8rem;font-size:1.05rem;padding:.8rem}
.share-cards{margin:.2rem 0 .8rem}.card-thumbs{display:grid;grid-template-columns:.6fr 1fr 1.4fr;gap:.6rem;align-items:end}
.card-thumb{margin:0;text-align:center}.card-thumb img{width:100%;border-radius:10px;background:var(--surface-2);box-shadow:var(--shadow)}
.card-story img{aspect-ratio:9/16}.card-square img{aspect-ratio:1}.card-wide img{aspect-ratio:1200/630}
.card-thumb figcaption{font-size:.68rem;color:var(--muted);margin:.25rem 0}.thumb-actions{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap}
.thumb-actions .btn{padding:.3rem .55rem;font-size:.72rem}
@media(max-width:520px){.card-thumbs{grid-template-columns:1fr 1fr}.card-wide{grid-column:1/-1}}
.share-apps{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.row-wrap{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.reply-elsewhere h2{margin-bottom:.3rem}
.quotes h2{font-size:1.05rem;margin:1.2rem 0 .6rem}
.rank-list{list-style:none;margin:0 0 .4rem;padding:0;display:grid;gap:.45rem}
.rank-list a{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.5rem;align-items:start;color:var(--text);font-size:.86rem}.rank-list a:hover{text-decoration:none;color:var(--primary)}
.rank{font-weight:800;color:var(--coral)}.rank-list small{color:var(--muted)}
.ranked-item{position:relative}.rank-badge{position:absolute;inset-inline-start:-.6rem;top:-.6rem;z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;font-weight:800;box-shadow:var(--shadow);display:flex;gap:.35rem;align-items:baseline}
.rank-badge.top{background:linear-gradient(135deg,var(--coral),var(--amber));color:#fff;border:0}.rank-badge small{font-weight:600;opacity:.8}
.progress{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--amber));border-radius:inherit}
.ref-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.ref-list li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.help-link{color:var(--coral)!important;font-weight:600}
/* ---- v6: share picker, type chip next to the name, notifications dropdown, trending near you ---- */
.share-card h2{display:flex;align-items:center;gap:.4rem;margin:0}
.size-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.4rem 0 .7rem}
.size-opt{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.6rem .3rem;border:2px solid var(--line);border-radius:14px;background:var(--surface);color:inherit;cursor:pointer;font:inherit}
.size-opt small{color:var(--muted);font-size:.7rem}.size-opt b{font-size:.8rem}
.size-opt.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}
.size-box{display:block;border:2px solid currentColor;border-radius:4px;opacity:.7}
.size-story .size-box{width:22px;height:39px}.size-square .size-box{width:32px;height:32px}.size-wide .size-box{width:44px;height:23px}
.size-preview{display:flex;justify-content:center;background:var(--surface-2);border-radius:14px;padding:.6rem;min-height:120px}
.size-preview img{max-height:46vh;max-width:100%;border-radius:10px;box-shadow:var(--shadow)}
.share-main{justify-content:center;margin-top:.7rem}.share-main .btn{display:inline-flex;align-items:center;gap:.35rem}
.share-link-label{margin:.8rem 0 .2rem;text-align:center}
.post-head .alias{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}.post-head .alias .chip{font-size:.7rem;padding:.1rem .45rem}
.real-name{font-weight:700}
.act.share svg,.act.quote svg{display:block}
/* notifications dropdown */
.bell-wrap{position:relative}
.notif-pop{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:min(380px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25);z-index:60;padding:.4rem}
.notif-pop[hidden]{display:none}
.notif-pop .np-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem}.notif-pop .np-head h3{margin:0;font-size:1.05rem}
.notif-pop .np-item{display:flex;gap:.6rem;padding:.55rem .6rem;border-radius:12px;color:inherit;text-decoration:none;align-items:flex-start}
.notif-pop .np-item:hover{background:var(--surface-2)}.notif-pop .np-item.unread{background:color-mix(in srgb,var(--brand) 8%,transparent)}
.notif-pop .np-item .np-ic{font-size:1.2rem;line-height:1.4}.notif-pop .np-item small{display:block;color:var(--muted);font-size:.72rem}
.notif-pop .np-item.unread::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;margin-top:.45rem;margin-inline-start:auto}
.notif-pop .np-foot{display:block;text-align:center;padding:.5rem;font-weight:600}
.notif-pop .np-empty{padding:1.5rem;text-align:center;color:var(--muted)}
@media(max-width:640px){.notif-pop{position:fixed;top:58px;inset-inline:8px;width:auto}}
/* trending near you */
.near-trend{margin:.2rem 0 1rem}.near-trend h3{margin:0 0 .5rem;font-size:1rem}
.near-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.near-grid a{display:flex;flex-direction:column;gap:.3rem;padding:.7rem;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:inherit;text-decoration:none;min-height:92px}
.near-grid a p{margin:0;font-size:.86rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.near-grid a small{color:var(--muted);font-size:.72rem;margin-top:auto}
.feed-side .near-grid{grid-template-columns:1fr}
@media(min-width:1360px){.feed-main .near-trend{display:none}}
.sched-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.sched-row input[type=datetime-local]{max-width:240px}
.count.over{color:var(--err)}
.count-badge.zero{display:none}
/* ---- v7: human review ---- */
.human-badge{display:inline-flex;align-items:center;gap:.2rem;color:var(--ok);font-weight:600;font-size:.78rem}
.review-box{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:var(--radius);margin:.6rem 0 1rem;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.review-box p{margin:.3rem 0}
.review-box .review-ic{font-size:1.6rem;line-height:1}
.review-box.pending{border-inline-start:4px solid var(--indigo-500,#4B48A8);background:color-mix(in srgb,var(--lavender) 55%,var(--surface))}
.review-box.ok{border-inline-start:4px solid var(--ok)}
.review-box.no{border-inline-start:4px solid var(--coral);background:color-mix(in srgb,var(--coral) 8%,var(--surface))}
.review-note{border-inline-start:4px solid var(--coral);margin-bottom:1rem}
.review-note p{margin:.35rem 0}
.review-promise{margin:.6rem 0 0;padding:.55rem .8rem;border-radius:12px;background:color-mix(in srgb,var(--lavender) 60%,transparent);color:var(--text)}
.soft-err{background:color-mix(in srgb,var(--coral) 12%,var(--surface));border-color:color-mix(in srgb,var(--coral) 40%,transparent);color:var(--text)}
.notif-cta{margin-top:.4rem}
.chip.st-pending_human_review{background:color-mix(in srgb,var(--lavender) 80%,transparent)}
.chip.st-rejected_by_human{background:color-mix(in srgb,var(--coral) 18%,transparent)}
.chip.st-approved{background:color-mix(in srgb,var(--ok) 18%,transparent)}
/* ---- v8: menus, mobile search, sidebar on post pages, people to follow ---- */
.sidenav .side-logout{margin:.6rem 0 0;padding-top:.6rem;border-top:1px solid var(--line)}
.sidenav .side-logout button{display:flex;align-items:center;gap:.8rem;width:100%;font:inherit;font-size:1rem;padding:.7rem 1rem;color:var(--muted);background:none;border:0;border-radius:14px;cursor:pointer;text-align:start}
.sidenav .side-logout button:hover{background:var(--surface-2);color:var(--err)}
@media (max-width:899px){
  .topbar{flex-wrap:wrap;row-gap:.5rem}
  .topbar .top-search{display:flex;order:10;flex:1 0 100%;max-width:none;padding:.45rem .9rem}
}
.follow-sugg{display:flex;flex-direction:column;gap:.55rem}
.follow-row{display:flex;align-items:center;gap:.6rem}
.follow-row a.who{display:flex;flex-direction:column;min-width:0;flex:1;color:inherit;text-decoration:none}
.follow-row a.who b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.follow-row a.who small{color:var(--muted);font-size:.75rem}
.follow-row .btn{flex:none}
.follow-mini{margin-inline-start:.2rem;padding:.05rem .55rem;font-size:.72rem;border-radius:999px;border:1px solid var(--primary);color:var(--primary);background:none;cursor:pointer;font-weight:600}
.follow-mini.on{background:var(--primary);color:var(--primary-ink)}
.fcount{color:var(--muted);font-size:.75rem;font-weight:400}
.feed-layout.post-layout .feed-main{max-width:720px}
.act.quote{color:var(--muted)}.act.quote:hover{color:var(--primary)}
.sec-table{width:100%;border-collapse:collapse}
.sec-table th{text-align:start;font-size:.78rem;color:var(--muted);font-weight:600;padding:.3rem .2rem;border-bottom:1px solid var(--line)}
.sec-table td{padding:.7rem .2rem;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.92rem}
.sec-table td:last-child{text-align:end}.sec-table td[colspan]{text-align:start}
/* ---- v9: mobile menu at the top (icons only), inside the sticky header ---- */
.bottomnav{display:none!important}
.mobnav{display:flex;order:20;flex:1 0 100%;justify-content:space-around;align-items:center;margin:.1rem -1rem -.6rem;padding:.15rem .5rem;border-top:1px solid var(--line)}
.mobnav a{display:flex;align-items:center;justify-content:center;flex:1;padding:.55rem 0;color:var(--muted);border-bottom:3px solid transparent}
.mobnav a:hover{text-decoration:none;color:var(--text)}
.mobnav a.on{color:var(--primary);border-bottom-color:var(--coral)}
@media (max-width:899px){
  main.with-nav{padding-bottom:5rem}
  .fab{bottom:calc(1rem + env(safe-area-inset-bottom))}
  .toast{bottom:1.25rem}
  .cookie-bar{bottom:.75rem}
  .site-footer{padding-bottom:5rem}
}
@media (min-width:900px){.mobnav{display:none!important}}
@media (max-width:899px){.topbar{background:var(--surface)}}

/* ===== v10: new brand mark + mobile header like the app (menu · logo — bell · profile) ===== */
.logo-mark{flex:none;display:block}
.brand{gap:.4rem}
.brand span{font-weight:800;letter-spacing:-.015em}
.hide-mobile{display:inline-flex}
@media (max-width:899px){
  .hide-mobile{display:none!important}
  .top-actions{gap:.15rem}
  .top-profile.on{color:var(--primary)}
}

/* ===== v11: mobile = header (menu · logo — bell · profile) + search on top, icon bar sticky at the BOTTOM ===== */
@media (max-width:899px){
  .mobnav{position:fixed;inset-inline:0;bottom:0;z-index:40;order:initial;margin:0;padding:0 .5rem env(safe-area-inset-bottom);
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(27,26,69,.06);height:calc(3.4rem + env(safe-area-inset-bottom))}
  .mobnav a{height:3.4rem;padding:0;border-bottom:3px solid transparent}
  .mobnav a.on{color:var(--primary);border-bottom-color:var(--coral)}
  main.with-nav{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .fab{bottom:calc(4.4rem + env(safe-area-inset-bottom))}
  .toast{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .cookie-bar{bottom:calc(4.2rem + env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))}
  .topbar{padding-bottom:.6rem}
}

/* ===== v11b: share buttons (brand colours), search icon instead of the search bar, header hides while scrolling down ===== */
.share-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.7rem 0}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.7rem .2rem;border-radius:16px;border:0;font:inherit;font-size:.78rem;font-weight:700;color:#fff;cursor:pointer;text-align:center}
.share-btn:hover{text-decoration:none;filter:brightness(1.07);transform:translateY(-1px)}
.share-btn svg{width:26px;height:26px}
.sb-wa{background:#25D366}.sb-fb{background:#1877F2}.sb-x{background:#000}[data-mode="dark"] .sb-x{background:#2a2a2a}
.sb-copy{background:var(--surface-2,#EEEBF7);color:var(--text);border:1px solid var(--line)}
.share-url-hidden{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.copy-row:has(#share-url){display:none}
/* Confess button: orange, on the left in Arabic (RTL) and on the right in LTR */
.fab{background:linear-gradient(135deg,#F27059,#FDB46A)!important;color:#fff!important}
[dir="rtl"] .fab{left:1.1rem;right:auto}
[dir="ltr"] .fab{right:1.1rem;left:auto}
@media (max-width:899px){
  .topbar .top-search{display:none!important}
  .topbar{transition:transform .25s ease;will-change:transform}
  .topbar.tb-hidden{transform:translateY(-110%)}
  .top-search-btn.on{color:var(--primary)}
}
.trend-where{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:-.3rem 0 1rem}

/* ===== v12 (phones): Confess = orange square in the header, no floating button; both bars hide while scrolling down ===== */
.top-compose{display:none}
@media (max-width:899px){
  .fab{display:none!important}
  .top-compose{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;margin-inline-end:.15rem;
    background:linear-gradient(135deg,#F27059,#FDB46A);color:#fff;box-shadow:0 4px 12px rgba(242,112,89,.35)}
  .top-compose:hover{text-decoration:none;filter:brightness(1.05)}
  .mobnav{transition:transform .25s ease;will-change:transform}
  .mobnav.tb-hidden{transform:translateY(110%)}
  .toast{bottom:calc(1.25rem + env(safe-area-inset-bottom))}
}
.vbadge{display:inline-block;vertical-align:-.15em;margin-inline-start:.25rem;flex:none}

/* ===== v13: background picture on every tag and feeling ===== */
.has-bg{position:relative;overflow:hidden;background-size:cover;background-position:center;border:0;color:#fff!important;min-height:110px;justify-content:flex-end;isolation:isolate}
.has-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,19,47,.05) 20%,rgba(20,19,47,.55))}
.has-bg a,.has-bg b,.has-bg span,.has-bg small{color:#fff!important;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.has-bg small{opacity:.92}
.has-bg .follow-btn{background:rgba(255,255,255,.92);color:var(--indigo-800,#1B1A45)!important;border-color:transparent;text-shadow:none}
.has-bg .follow-btn.on{background:var(--primary);color:#fff!important}
.has-bg:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(20,19,47,.18)}
.mood-tile.has-bg{min-height:150px}
.mood-tile.has-bg.on{outline:3px solid var(--coral);outline-offset:2px}
.bg-hero{height:140px;border-radius:20px;background-size:cover;background-position:center;margin:0 0 1rem;display:flex;align-items:flex-end;padding:1rem 1.2rem;position:relative;overflow:hidden;isolation:isolate}
.bg-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(20,19,47,.5))}
.bg-hero span{color:#fff;font-weight:800;font-size:1.5rem;text-shadow:0 2px 8px rgba(0,0,0,.35)}

/* ===== v14: "Open in the app" bar (Android, app installed) ===== */
.app-open-bar{position:fixed;inset-inline:.6rem;top:.6rem;z-index:80;display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,19,47,.18)}
.app-open-bar span{flex:1;font-weight:600;font-size:.92rem}
.app-open-bar[hidden]{display:none}

/* ===== Sunset accent — colours only (no element, size or layout change) ===== */
:root{
  --indigo-900:#2A1230;--indigo-800:#3B1740;--indigo-700:#7A2453;--indigo-500:#C2405E;--indigo-300:#F3A27C;
  --coral:#F2603D;--amber:#FFB04A;--lavender:#FDE3D3;--lavender-2:#FFF1E7;
  --bg:#FFF8F2;--surface:#FFFFFF;--surface-2:#FCEDE2;--text:#2B1820;--muted:#8B706B;--line:#F1DCCF;
  --primary:var(--indigo-700);--accent-c:var(--coral);
  --sunset:linear-gradient(135deg,#C2405E 0%,#F2603D 60%,#FF8A3D 100%);
  --sunset-warm:linear-gradient(135deg,#FFB04A,#F2603D 55%,#C2405E);
  --shadow:0 1px 2px rgba(90,30,20,.05),0 8px 24px rgba(160,60,40,.08);
}
:root[data-mode="dark"]{
  --bg:#170D1A;--surface:#22142A;--surface-2:#2C1A33;--text:#F6ECEA;--muted:#B79FA6;--line:#3A2440;
  --primary:#FF9F7A;--primary-ink:#1E0F18;--lavender:#3A2236;--lavender-2:#2A1A2E;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28);
}
body{background:
  radial-gradient(1200px 620px at 100% -10%,rgba(255,176,74,.20),transparent 60%),
  radial-gradient(900px 520px at -10% 10%,rgba(194,64,94,.12),transparent 60%),
  radial-gradient(900px 600px at 50% 120%,rgba(242,96,61,.08),transparent 60%),var(--bg)}
.btn-primary,.chip.on,.follow-btn.on,.sug-vote button.on,.chip-dur,.chip-radio input:checked+span,.audio-play{background:var(--sunset);color:#fff;border-color:transparent}
.btn-primary:hover{box-shadow:0 8px 22px rgba(242,96,61,.35)}
.rail-card{background:linear-gradient(165deg,#FF9F45 0%,#F2603D 32%,#C2405E 62%,#4A1A48 100%)}
.rail-card .countdown{background:rgba(255,255,255,.22);color:#fff}
.fab,.sidenav .nav-post,.sidenav .nav-post.on,.drawer-post,.hero .btn-primary,.onb .btn-primary,.rank-badge.top,.progress span,.rec-btn span{background:var(--sunset-warm)!important}
.fab{box-shadow:0 10px 26px rgba(242,96,61,.35)}
.sidenav a.on{background:linear-gradient(90deg,color-mix(in srgb,var(--coral) 14%,var(--surface)),var(--surface))}
.tabs a.on{border-image:linear-gradient(90deg,#FFB04A,#F2603D,#C2405E) 1}
.tl-line i,[dir=rtl] .tl-line i{background:linear-gradient(270deg,#FFB04A,#F2603D,#C2405E)}
.tl-stop.on .tl-ic{box-shadow:0 6px 16px rgba(242,96,61,.35)}
.anon-banner{background:linear-gradient(90deg,var(--lavender-2),var(--bg))}
.sys-banner,.toast{background:#3B1740}
.countdown.soon,.countdown.soon6{color:#E04A2B}

/* ===== Sunset full style — shapes, type, buttons, tabs, cards (layout unchanged) ===== */
:root{
  --radius:22px;--radius-sm:14px;
  --tint:#FFF0E6;--tint-line:#F6D5C2;--glass:rgba(255,250,246,.78);
  --sun:linear-gradient(135deg,#FFB04A 0%,#F2603D 52%,#C2405E 100%);
  --sun-h:linear-gradient(90deg,#FFB04A,#F2603D 50%,#C2405E);
  --ink-grad:linear-gradient(90deg,#7A2453,#C2405E 55%,#F2603D);
  --shadow:0 1px 1px rgba(122,36,83,.04),0 2px 6px rgba(160,60,40,.05),0 14px 34px -18px rgba(160,60,40,.28);
  --shadow-up:0 2px 4px rgba(122,36,83,.05),0 22px 44px -20px rgba(194,64,94,.38);
  --glow:0 8px 20px -6px rgba(242,96,61,.55);
}
:root[data-mode="dark"]{
  --tint:#2E1A2E;--tint-line:#46283F;--glass:rgba(28,16,32,.78);
  --ink-grad:linear-gradient(90deg,#FFC08A,#FF9F7A 50%,#F27A8C);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 16px 36px -18px rgba(0,0,0,.6);
  --shadow-up:0 2px 4px rgba(0,0,0,.4),0 24px 48px -20px rgba(242,96,61,.25);
}

/* ---------- page & sky ---------- */
body{background:
  radial-gradient(900px 420px at 85% -120px,rgba(255,176,74,.38),transparent 70%),
  radial-gradient(800px 460px at 0% 0%,rgba(242,96,61,.16),transparent 70%),
  linear-gradient(180deg,#FFE9DA 0,#FFF3EA 360px,var(--bg) 760px) no-repeat,var(--bg)!important;
  letter-spacing:.005em}
:root[data-mode="dark"] body{background:
  radial-gradient(900px 420px at 85% -120px,rgba(242,96,61,.22),transparent 70%),
  radial-gradient(800px 460px at 0% 0%,rgba(194,64,94,.18),transparent 70%),
  linear-gradient(180deg,#2A1430 0,#1C1022 380px,var(--bg) 760px) no-repeat,var(--bg)!important}
h1,h2,h3,.page-title,.section-title,.rail-head h2,.side-card h3,.profile-head h1,.auth-brand h1{font-family:var(--font-display);letter-spacing:-.01em}
.page-title,.profile-head h1,.auth-brand h1{background:var(--ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.muted,small{color:var(--muted)}

/* ---------- top bar ---------- */
.topbar{background:var(--glass)!important;backdrop-filter:blur(18px) saturate(1.4);border-bottom:0!important;box-shadow:0 10px 30px -22px rgba(160,60,40,.45)!important}
.topbar::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--sun-h);opacity:.75}
.top-search{background:var(--surface)!important;border:1.5px solid var(--tint-line);box-shadow:inset 0 1px 2px rgba(160,60,40,.06);transition:border-color .2s,box-shadow .2s}
.top-search:focus-within{border-color:#F2603D;box-shadow:0 0 0 4px rgba(242,96,61,.14)}
.icon-btn{border-radius:14px}.icon-btn:hover{background:var(--tint)!important;color:#C2405E}
.count-badge{background:var(--sun)!important;box-shadow:0 0 0 2px var(--surface)}

/* ---------- side navigation ---------- */
.sidenav a{border-radius:16px!important;font-weight:500;transition:background .2s,color .2s,transform .15s}
.sidenav a:hover{background:var(--tint)!important;color:#C2405E;text-decoration:none}
.sidenav a.on{background:var(--sun)!important;color:#fff!important;font-weight:700;box-shadow:var(--glow)!important}
.sidenav a.on svg,.sidenav a.on i{color:#fff;stroke:#fff}
.sidenav .side-logout{border-top:1px dashed var(--tint-line)!important}
.drawer a.on{background:var(--sun)!important;color:#fff!important}
.bottomnav{background:var(--glass)!important;backdrop-filter:blur(18px);border-top:0!important;box-shadow:0 -10px 30px -22px rgba(160,60,40,.45)}
.bottomnav a.on{color:#F2603D!important;background:var(--tint)}

/* ---------- cards ---------- */
.card{border:1px solid color-mix(in srgb,var(--tint-line) 70%,transparent)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow)!important}
.card:hover{box-shadow:var(--shadow-up)!important}
.post.card{overflow:hidden}
.post.card::before{content:"";position:absolute;inset-block:18px;inset-inline-start:0;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,#FFB04A,#F2603D,#C2405E);opacity:.85}
[dir=rtl] .post.card::before{border-radius:4px 0 0 4px}
.post-head .alias,.post-head .who b,.post-head strong{font-weight:700}
.confession-text{line-height:1.85;font-size:1.14rem}
.post-tags .chip,.chip[href*="tag"]{background:var(--tint);border-color:var(--tint-line);color:#A62F55}
.top-comment{background:linear-gradient(90deg,var(--tint),color-mix(in srgb,var(--tint) 40%,var(--surface)))!important;border-radius:16px!important;border-inline-start:3px solid #F2603D}
.post-actions{border-top:1px dashed var(--tint-line)!important}
.act{transition:background .15s,color .15s,transform .12s}
.act:hover{background:var(--tint)!important;color:#C2405E!important}
.act.like.on{color:#F2603D!important}
.countdown{background:var(--tint)!important;color:#C2405E!important;font-weight:600;border:1px solid var(--tint-line)}
.avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #F9C7A6}
:root[data-mode="dark"] .avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #6A2E4B}

/* ---------- chips & tabs ---------- */
.chip{background:var(--tint);border:1px solid var(--tint-line)!important;color:var(--text)}
.chip.on,.chip-radio input:checked+span{background:var(--sun)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--glow)}
.k-confession,.chip-me,.chip-pick{background:#FFE4D3!important;color:#7A2453!important}
:root[data-mode="dark"] .k-confession,:root[data-mode="dark"] .chip-me,:root[data-mode="dark"] .chip-pick{background:#3A2236!important;color:#FFB59A!important}
.tabs{border-bottom:0!important;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--tint-line);border-radius:999px;padding:4px;gap:2px}
.tabs a{border-bottom:0!important;border-radius:999px;padding:.5rem 1rem!important}
.tabs a:hover{background:var(--tint)}
.tabs a.on{background:var(--sun);color:#fff!important;border-image:none!important;box-shadow:var(--glow)}
.seg{background:var(--tint)!important;border:1px solid var(--tint-line)}
.seg label.on{background:var(--sun)!important;color:#fff!important}
.filter-btn,.more-wrap>button,.tabs~* .btn-ghost{border-radius:999px}

/* ---------- buttons ---------- */
.btn{border-radius:999px;font-weight:700;letter-spacing:.01em}
.btn-primary{background:var(--sun)!important;color:#fff!important;box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn-ghost{background:var(--surface)!important;border:1.5px solid var(--tint-line)!important;color:#7A2453}
:root[data-mode="dark"] .btn-ghost{color:#FFB59A}
.btn-ghost:hover{border-color:#F2603D!important;color:#F2603D}
.follow-btn,.follow-mini{border-radius:999px}
.fab{border-radius:999px!important;box-shadow:0 14px 30px -8px rgba(242,96,61,.6),inset 0 1px 0 rgba(255,255,255,.35)!important}

/* ---------- inputs ---------- */
.field input,.field select,.field textarea,.input-row input,.composer-box,textarea{border-radius:16px!important;border:1.5px solid var(--tint-line)!important;background:color-mix(in srgb,var(--surface) 92%,var(--tint))!important}
.field input:focus,.field select:focus,.field textarea:focus,.composer-box:focus-within{border-color:#F2603D!important;box-shadow:0 0 0 4px rgba(242,96,61,.14)!important}
.composer-teaser{border-radius:var(--radius)!important}
.anon-banner{border-radius:16px!important;border:1px dashed #F2A27E!important;background:linear-gradient(90deg,var(--tint),transparent)!important}

/* ---------- vanishing rail: a sunset in each card ---------- */
.rail-card{position:relative;overflow:hidden;border-radius:22px!important;background:linear-gradient(180deg,#FFB04A 0%,#F7804A 28%,#E2525C 58%,#7A2453 86%,#3B1740 100%)!important;box-shadow:0 18px 34px -18px rgba(194,64,94,.7)}
.rail-card::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;inset-inline-end:-30px;bottom:-60px;background:radial-gradient(circle,#FFE3A1 0,#FFC46B 45%,rgba(255,196,107,0) 72%);opacity:.8}
.rail-card::after{content:"";position:absolute;inset-inline:0;bottom:0;height:38%;background:linear-gradient(180deg,transparent,rgba(42,18,48,.55))}
.rail-card>*{position:relative;z-index:1}
.rail-card .countdown,.rail-cd{background:rgba(255,255,255,.2)!important;color:#fff!important;border-color:rgba(255,255,255,.3)!important;backdrop-filter:blur(4px)}
.rail-head h2{font-weight:700}

/* ---------- side widgets ---------- */
.side-card h3{font-weight:700;position:relative;padding-bottom:.5rem}
.side-card h3::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:34px;height:3px;border-radius:3px;background:var(--sun-h)}
.side-post{border-top:1px dashed var(--tint-line)!important;border-radius:14px}
.side-card .card,.side-card>a.card{border-radius:18px!important}

/* ---------- tags / feelings / trending / notifications / profile ---------- */
.tag-tile,.mood-tile{border-radius:24px!important;overflow:hidden}
.tag-tile:hover,.mood-tile:hover{transform:translateY(-2px)}
.rank{background:var(--sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.rank-badge.top{box-shadow:var(--glow)}
.notif{border-radius:18px!important}
.notif.unread{border-inline-start:0!important;background:linear-gradient(90deg,var(--tint),var(--surface))!important;box-shadow:inset 4px 0 0 #F2603D,var(--shadow)!important}
[dir=rtl] .notif.unread{box-shadow:inset -4px 0 0 #F2603D,var(--shadow)!important}
.notif-ic{border-radius:14px}
.stats b{font-family:var(--font-display);background:var(--ink-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.35rem}
.profile-head .avatar{box-shadow:0 0 0 3px var(--surface),0 0 0 6px #F7A27A}

/* ---------- compose ---------- */
.kind-pick span{border-radius:18px!important;border:1.5px solid var(--tint-line)!important;background:var(--surface)}
.kind-pick input:checked+span{border-color:transparent!important;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--sun) border-box!important;border:2px solid transparent!important;box-shadow:var(--glow)}
.tl-ic{border:2px solid var(--tint-line)!important;background:var(--surface)!important}
.tl-stop.on .tl-ic{background:var(--sun)!important;border-color:transparent!important}
.tl-line{background:var(--tint-line)!important}
.rte-toolbar{border-bottom:1px dashed var(--tint-line)!important}

/* ---------- auth ---------- */
.auth-card{border-radius:28px!important;box-shadow:0 30px 60px -30px rgba(194,64,94,.45)!important}
.auth-card::before{content:"";position:absolute;inset-inline:28px;top:0;height:4px;border-radius:0 0 4px 4px;background:var(--sun-h)}
.auth-card{position:relative}
.btn-oauth{border-radius:999px!important;border:1.5px solid var(--tint-line)!important}

/* ---------- misc ---------- */
.site-footer a{color:var(--muted)}.site-footer a:hover{color:#F2603D}
.toast{background:linear-gradient(90deg,#3B1740,#7A2453)!important;box-shadow:0 12px 30px -10px rgba(122,36,83,.6)}
.cookie-bar{border-radius:22px!important}
::selection{background:rgba(255,176,74,.4)}
.has-bg .follow-btn{background:rgba(255,255,255,.92)!important;color:#7A2453!important;border:0!important}
.has-bg .follow-btn.on,.follow-btn.on{background:var(--sun)!important;color:#fff!important;border:0!important;box-shadow:var(--glow)}

/* ===== v17: follow next to names · people between posts · sticky sidebars · terms before social sign-up ===== */
.follow-mini{background:var(--sun);color:#fff!important;border:0;padding:.14rem .7rem;font-size:.72rem;font-weight:800;box-shadow:0 4px 10px -4px rgba(242,96,61,.6);text-decoration:none!important;display:inline-flex;align-items:center;vertical-align:middle}
.follow-mini:hover{filter:saturate(1.15) brightness(1.03)}
.follow-mini.on{background:var(--tint);color:#C2405E!important;border:1px solid var(--tint-line);box-shadow:none}
:root[data-mode="dark"] .follow-mini.on{color:#FFB59A!important}
/* left menu: never taller than the screen */
@media(min-width:900px){.sidenav{max-height:calc(100vh - 64px);overflow-y:auto;scrollbar-width:none}.sidenav::-webkit-scrollbar{display:none}}
/* right sidebar: sticky top and bottom (top is set by app.js) */
@media(min-width:1180px){.feed-side{position:sticky;top:80px;align-self:start}}
/* People to follow between the posts (hidden when the sidebar shows it) */
.people-inline{padding:1rem 0 1rem 1rem!important;overflow:hidden}
[dir=rtl] .people-inline{padding:1rem 1rem 1rem 0!important}
.pi-head{display:flex;align-items:baseline;justify-content:space-between;padding-inline-end:1rem;margin-bottom:.6rem}
.pi-head h3{margin:0;font-size:1.02rem}
.pi-row{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 1rem 4px 2px}
.pi-row::-webkit-scrollbar{display:none}
.pi-card{flex:none;width:150px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:.9rem .6rem;border-radius:18px;background:linear-gradient(180deg,var(--tint),var(--surface));border:1px solid var(--tint-line)}
.pi-who{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--text);text-decoration:none!important;min-width:0;width:100%}
.pi-who b{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pi-who small{color:var(--muted);font-size:.75rem}
.pi-card .btn{width:100%;padding:.35rem .6rem}
@media(min-width:1360px){.people-inline{display:none}}
/* Terms / Privacy / Community rules before "Continue with Google / Facebook" */
.oauth-agree{font-size:.88rem;margin-bottom:.2rem}
.oauth-agree-err{color:var(--err);font-size:.85rem;margin:0}
.shake{animation:shake .5s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* v21: sidebar also on Trending, Tags, Feelings and Saved — the page column keeps its reading width */
.feed-layout > .feed-main.narrow{max-width:none;margin:0;min-width:0}
/* v26: share window — one row of round network buttons + copy / download */
.share-to-label{font-weight:700;margin:.2rem 0 .7rem}.share-to-label[hidden]{display:none}
.share-nets{display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;margin:0 0 1rem}
.share-net{display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--text)!important;text-decoration:none!important;font-size:.8rem;cursor:pointer}
.share-net b{font-weight:600}
.share-net .ci{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transition:transform .15s}
.share-net:hover .ci{transform:translateY(-2px)}
.sb-ig{background:linear-gradient(45deg,#FEDA75,#FA7E1E 30%,#D62976 60%,#962FBF 85%,#4F5BD5)}
.sb-more{background:var(--tint,#F2E6EC);color:var(--text)!important}.sb-more svg{color:var(--text)}
.share-two{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.share-two .btn{justify-content:center;display:inline-flex;align-items:center;gap:.35rem}.share-two [hidden]{display:none}
.share-two:has([data-card-dl][hidden]){grid-template-columns:1fr}