@font-face{font-family:"Montserrat";src:url(fonts/montserrat.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{--bg:#090E18;--card:#0F1321;--card2:#151a2b;--line:#232a40;--gold:#BC9540;--gold2:#d4ad5a;--text:#F2F6FF;--mute:#8d96ad;--green:#2E8B57;--amber:#DAA520;--red:#B22222;--slate:#344172;--slate2:#4C5B8E}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#03060c;color:var(--text);font-family:"Montserrat",system-ui,sans-serif}
body{display:flex;justify-content:center;align-items:center;min-height:100vh}
.phone{position:relative;width:390px;height:844px;background:var(--bg);overflow:hidden;border-radius:44px;box-shadow:0 0 0 10px #1a1f2e,0 30px 80px #000c}
@media (max-width:500px),(max-height:900px) and (max-width:500px){body{display:block}.phone{width:100%;height:100vh;height:100dvh;border-radius:0;box-shadow:none}}
@media (max-width:430px){.phone{border-radius:0;box-shadow:none}}
.status{height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;font-size:14px;font-weight:600}
.hdr{text-align:center;font-weight:600;font-size:20px;padding:6px 0 14px;border-bottom:1px solid #ffffff10}
.scroll{position:absolute;top:44px;bottom:78px;left:0;right:0;overflow-y:auto;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}
.tabbar{position:absolute;bottom:0;left:0;right:0;height:78px;background:#0b101c;border-top:1px solid #ffffff10;display:flex;justify-content:space-around;padding:8px 6px 18px;z-index:20}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mute);text-decoration:none;font-size:10px;font-weight:600;width:64px}
.tab svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--text)}.tab.on svg{stroke:var(--gold2)}
.tab.dim{opacity:.55}
.newdot{position:absolute;top:0;right:16px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;font:600 16px "Montserrat",sans-serif;padding:15px 22px;cursor:pointer;min-height:50px;transition:transform .12s,filter .2s}
.btn:active{transform:scale(.97)}
.btn.gold{background:var(--gold);color:#111}
.btn.ghost{background:transparent;color:var(--text);border:1px solid #ffffff30}
.btn.quiet{background:transparent;color:var(--mute);font-weight:500}
.btn.block{width:100%}
.proto-note{position:absolute;left:0;right:0;bottom:80px;text-align:center;font-size:9px;color:#ffffff40;pointer-events:none;z-index:25;letter-spacing:.3px}
.astro{flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4C5B8E,#1c2440);border:2px dashed #8d96ad80;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#c9d0e4;text-align:center;line-height:1.1}
.sheet-bg{position:absolute;inset:0;background:#000a;opacity:0;pointer-events:none;transition:opacity .25s;z-index:40}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:24px 24px 0 0;padding:12px 22px 34px;transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.3,1);z-index:41;border-top:1px solid #ffffff14}
.sheet.open{transform:none}
.grab{width:40px;height:5px;border-radius:9px;background:#ffffff30;margin:0 auto 16px}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.4px}