:root{--bg:#0B1220;--panel:#0f172a;--elev:#1e293b;--input:#1a1a2e;--line:#334155;--text:#e2e8f0;--muted:#94a3b8;--gold:#F2B233;--em:#10b981;--em2:#059669;--red:#ef4444;--blue:#60a5fa}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--blue)}
[hidden]{display:none!important}
button,input,textarea{font:inherit}
.top{position:sticky;top:0;z-index:5;background:rgba(11,18,32,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.brand{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-size:22px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);text-decoration:none;line-height:1}
.brand small{display:block;font-family:inherit;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:3px}
.top-r{display:flex;gap:8px;align-items:center}
.pill-link{font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--gold);border:1px solid rgba(242,178,51,.45);border-radius:999px;padding:6px 10px;text-decoration:none;white-space:nowrap}
.pill-link:active{background:rgba(242,178,51,.15)}
@media (max-width:360px){.pill-link{font-size:10.5px;padding:5px 8px}}
.bell{position:relative;width:34px;height:34px;border-radius:50%;background:var(--elev);display:grid;place-items:center;font-size:16px;text-decoration:none}
.bell i{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--bg)}
.me-av{width:34px;height:34px;border-radius:50%;display:block}
main{max-width:560px;margin:0 auto;padding:12px 14px 24px}
.view h2{margin:10px 0 12px;font-size:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
.login{margin-top:30px;padding:20px}
.login h1{margin:0 0 4px;font-size:22px}
.sub{color:var(--muted);margin:0 0 14px}
.hint{color:var(--muted);font-size:12.5px;margin:12px 0 0}
.link{background:none;border:none;color:var(--blue);padding:0;cursor:pointer;font-size:inherit;text-decoration:underline}
input,textarea{width:100%;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text);outline:none}
input:focus,textarea:focus{border-color:var(--blue)}
.stack>*{margin-bottom:8px}
form input{margin-bottom:10px}
.btn{display:inline-block;border:1px solid var(--line);background:var(--elev);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none}
.btn.primary{background:var(--em);border-color:var(--em)}
.btn.primary:active{background:var(--em2)}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 14px;font-size:13.5px}
.btn.more{display:block;width:100%;margin:8px 0}
.btn[disabled]{opacity:.5;pointer-events:none}
.err{color:#fecaca;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);border-radius:10px;padding:8px 10px;font-size:13px;margin-top:4px}
.empty{color:var(--muted);text-align:center;padding:30px 0}
.back{display:inline-block;margin:2px 0 10px;font-size:14px;text-decoration:none;color:var(--muted)}
/* avatar */
.av{width:36px;height:36px;border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:#475569;background-size:cover;background-position:center;overflow:hidden}
.av.sm{width:28px;height:28px;font-size:11px}
.av.big{width:96px;height:96px;font-size:34px;margin:4px auto 12px}
/* compose */
.compose .row{display:flex;gap:10px;align-items:flex-start}
.compose textarea{resize:none;min-height:42px;max-height:220px;border-radius:14px}
.compose-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.compose-foot .note{flex:1;font-size:11.5px;color:var(--muted)}
.icon-btn{width:36px;height:36px;border-radius:50%;background:var(--elev);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.photo-prev{position:relative;margin-top:8px}
.photo-prev img{display:block;max-width:100%;max-height:260px;border-radius:10px}
.photo-prev .x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;cursor:pointer}
.mention-pick{margin-top:6px;background:var(--elev);border:1px solid var(--line);border-radius:10px;max-height:180px;overflow:auto}
.mention-pick div{padding:8px 12px;cursor:pointer}
.mention-pick div:hover,.mention-pick div.hi{background:rgba(96,165,250,.15)}
/* post */
.post{margin-top:10px}
.post.pinned{border-color:rgba(242,178,51,.5)}
.pin{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:6px}
.who{display:flex;gap:10px;align-items:center}
.who .nm{font-weight:700;font-size:14px}
.who .t{font-size:11px;color:var(--muted)}
.who .dots{margin-left:auto;background:none;border:none;color:var(--muted);font-size:20px;letter-spacing:1px;cursor:pointer;padding:0 6px;line-height:1}
.body{font-size:14.5px;line-height:1.45;margin:10px 0 8px;white-space:pre-wrap;word-wrap:break-word}
.body .m{color:var(--blue);font-weight:600}
.body a{word-break:break-all}
.pimg{display:block;max-width:100%;border-radius:10px;margin:4px 0 8px}
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.rx{display:inline-flex;gap:4px;align-items:center;background:var(--elev);border:1px solid transparent;border-radius:999px;padding:4px 9px;font-size:12px;color:var(--text);cursor:pointer}
.rx.on{background:rgba(242,178,51,.18);color:var(--gold);border-color:rgba(242,178,51,.4)}
.rx.zero{opacity:.55}
.acts .rep{margin-left:auto;text-decoration:none;color:var(--muted)}
.locked-tag{font-size:11px;color:var(--muted);margin-left:auto}
.reply{margin:10px 0 0 14px;padding-left:12px;border-left:2px solid var(--line)}
.reply .who .nm{font-size:13px}
.reply .body{font-size:13.5px;margin:6px 0 4px}
.preview{margin-top:10px}
.reply.inline{margin:8px 0 0 10px;padding:8px 10px 8px 12px}
.more-replies{display:block;margin:8px 0 0 24px;font-size:13px;text-decoration:none;color:var(--muted)}
.locked-note{color:var(--muted);text-align:center;padding:12px;font-size:13px}
/* mentions */
.mention{display:block;text-decoration:none;color:var(--text);padding:10px 12px;border-bottom:1px solid var(--line)}
.mention.unseen{background:rgba(96,165,250,.08)}
.mention b{color:var(--blue)}
.mention .t{font-size:11px;color:var(--muted)}
.mention .s{font-size:13px;color:var(--muted);margin-top:2px}
/* profile / mod */
.profile{text-align:center;margin-bottom:12px}
.profile h2{margin:0 0 10px}
.profile .btn{margin:6px 4px}
.mod-list{max-height:320px;overflow:auto;margin:8px 0 14px;border:1px solid var(--line);border-radius:10px}
.mod-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:13px}
.mod-row .n{flex:1;min-width:0}.mod-row .n small{display:block;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}
.mod-row .btn{padding:5px 10px;font-size:12px}
.mod-row.banned .n{color:var(--muted);text-decoration:line-through}
/* footer */
.foot{max-width:560px;margin:0 auto;padding:18px 14px 28px;text-align:center;color:var(--muted);font-size:12.5px}
.foot p{margin:0 0 8px}
.btn.donate{background:var(--em);border-color:var(--em);margin:4px 0 10px}
.ctp{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#64748b}
.build{font-size:10px;color:#475569;font-family:ui-monospace,Menlo,Consolas,monospace}
/* toast + sheet */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--elev);border:1px solid var(--line);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;z-index:20;max-width:90vw}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:15;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:16px 16px 0 0;width:100%;max-width:560px;padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
.sheet button{display:block;width:100%;background:none;border:none;color:var(--text);text-align:left;padding:14px 12px;font-size:15px;border-radius:10px;cursor:pointer}
.sheet button:hover{background:var(--elev)}
.sheet button.danger{color:#fecaca}
.sheet button.cancel{color:var(--muted);text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* stats */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.tile{background:var(--input);border:1px solid var(--line);border-radius:10px;padding:10px}
.tile .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}.tile .l{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin:6px 0 2px;padding:0 2px}
.spark i{flex:1;background:var(--blue);border-radius:3px 3px 0 0;min-height:2px;opacity:.85}
.spark i.p{background:var(--gold)}
.spark-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:10px}
.top-posters{font-size:13px;color:var(--muted);margin-bottom:14px}.top-posters b{color:var(--text)}
.money{float:right;font-size:16px;color:var(--em);font-variant-numeric:tabular-nums}
.months{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.months span{background:var(--input);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.mod-list.short{max-height:220px}
.don-row{display:flex;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.don-row .a{font-weight:800;min-width:64px}.don-row .w{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.don-row .x{background:none;border:none;color:var(--muted);cursor:pointer}
.row-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.row-form input,.row-form select{margin:0}
select{width:100%;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--text)}