:root{--bg:#f1f1f4;--surface:#fff;--ink:#14172a;--muted:#5d6479;--line:#d9dbe5;--red:#c8202f;--blue:#1f4fb4;--ok:#1f7a4d;--warn:#b45309;--bad:#b42318;--onred:#fff;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0d0f1a;--surface:#171a2b;--ink:#eef0f8;--muted:#9aa2bd;--line:#2a2f4a;--red:#ef3b4a;--blue:#5b8cff;--ok:#5fcf95;--warn:#f0a850;--bad:#f27a6e}}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Barlow,system-ui,sans-serif}
.wrap{max-width:640px;margin:0 auto;padding:20px 16px 100px}
h1,h2,h3{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;margin:0;line-height:1.1}
h1{font-size:2.4rem;border-left:6px solid var(--red);padding-left:12px}
h2{font-size:1.7rem;margin-bottom:6px}
.sub{color:var(--muted);margin:6px 0 18px}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav button{flex:1;padding:14px 2px;border:0;background:none;color:var(--muted);font:600 .86rem Barlow,sans-serif;cursor:pointer;border-top:3px solid transparent}
nav button[aria-selected=true]{color:var(--ink);border-top-color:var(--red)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px}
.chip{flex:none;padding:7px 14px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font:500 .92rem Barlow,sans-serif;cursor:pointer}
.chip[aria-pressed=true]{background:var(--red);color:var(--onred);border-color:var(--red)}
.tools{display:grid;gap:10px;margin-bottom:12px}
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.sw{flex:none;width:44px;height:44px;border-radius:8px;border:1px solid var(--line);display:grid;place-items:center;font:700 1rem 'Barlow Condensed',sans-serif;color:#fff;background:var(--blue)}
.nm{font-weight:600}.meta{color:var(--muted);font-size:.88rem}
.end{margin-left:auto;text-align:right;flex:none}
.st{font-size:.85rem;font-weight:600}.ok{color:var(--ok)}.low{color:var(--warn)}.out{color:var(--bad)}
.empty{padding:28px 0;color:var(--muted);text-align:center}
.btn{padding:11px 18px;border:0;border-radius:8px;background:var(--red);color:var(--onred);font:600 1rem Barlow,sans-serif;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn.alt{background:var(--blue);color:#fff}.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:6px 12px;font-size:.9rem}.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;align-items:center}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:16px}
.badge{display:inline-block;font:700 1.7rem 'Barlow Condensed',sans-serif;font-style:italic;padding:2px 16px;border-radius:6px;color:#fff;margin:6px 0}
.bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;border-radius:99px}
.ladder{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.ladder li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;border:1px solid var(--line);border-left-width:6px;font-size:.95rem}
.ladder li.on{background:color-mix(in srgb,var(--surface) 80%,var(--ink) 10%);font-weight:600}
.ladder .r{margin-left:auto;text-align:right}
.earn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 0;padding:0;list-style:none;font-size:.92rem}
.earn li{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.hint{font-size:.88rem;color:var(--muted);margin:10px 0 0}
.ev{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.date{flex:none;width:58px;height:64px;text-align:center;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:8px;background:var(--surface);padding-top:4px}
.date b{display:block;font:700 1.7rem/1.1 'Barlow Condensed',sans-serif}.date span{font-size:.8rem;color:var(--muted)}
.ev p{margin:4px 0 10px;color:var(--muted);font-size:.92rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
label{font-size:.88rem;color:var(--muted);display:block;margin:8px 0 3px}
.msg{margin-top:10px;font-size:.92rem}
#astock .item,#amem .item,#aacc .item{flex-wrap:wrap}
.top{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}.top li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-left-width:6px;border-radius:8px}.top .pos{width:1.6em;font:700 1.3rem 'Barlow Condensed',sans-serif;font-style:italic;color:var(--muted)}.top .xp{margin-left:auto;text-align:right;font-size:.9rem}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}.brand .sub{margin:2px 0 0}.brand h1{border:0;padding:0;font-size:2rem}.logo{flex:none;width:80px;height:auto}
#acct{flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.potwimg{width:100%;max-height:360px;object-fit:cover;border-radius:10px;display:block;margin-top:10px}
.tot{font:700 2rem 'Barlow Condensed',sans-serif;font-style:italic}
.qrimg{width:100%;max-width:280px;display:block;margin:10px auto;border-radius:10px;background:#fff;padding:8px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:20px;width:min(92vw,440px);max-height:90vh;overflow:auto}
dialog::backdrop{background:rgba(8,10,20,.65)}
.link{background:none;border:0;padding:0;color:var(--blue);font:inherit;cursor:pointer;text-decoration:underline}
.av,.ring{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font:700 1.1rem 'Barlow Condensed',sans-serif}
.post img,.post video,#storybody img,#storybody video{width:100%;max-height:70vh;object-fit:contain;background:#000;border-radius:10px;display:block}
.solo,.reel{margin-top:12px}
.reel{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory}
.reel>*{flex:none;width:86%!important;height:320px;object-fit:cover!important;scroll-snap-align:center}
.cap{white-space:pre-line;margin:10px 0;overflow-wrap:anywhere}
.cms{margin-top:10px;border-top:1px solid var(--line);padding-top:6px}
.cm{padding:6px 0;font-size:.95rem;display:flex;gap:8px;overflow-wrap:anywhere}
.stories{display:flex;gap:12px;overflow-x:auto;padding:16px 0 4px}
.story{flex:none;width:68px;background:none;border:0;color:var(--ink);font:500 .78rem Barlow,sans-serif;cursor:pointer;display:grid;justify-items:center;gap:4px;padding:0}
.story span:last-child{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ring{width:56px;height:56px;border:3px solid var(--red);font-size:1.4rem}
#storybody{display:grid;gap:12px}
.toast{position:fixed;left:16px;right:16px;bottom:calc(64px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;z-index:9;text-align:center}
[hidden]{display:none!important}