:root{--bg:#0d0f14;--card:#171a22;--line:#262a36;--tx:#e8eaf0;--mut:#8a90a2;--acc:#3ee08f;--red:#ff5d6c;--gold:#ffc94d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;height:100dvh;display:flex;flex-direction:column;overflow:hidden;user-select:none}
#hud{padding:calc(env(safe-area-inset-top) + 10px) 14px 8px;background:linear-gradient(#141826,#0d0f14);border-bottom:1px solid var(--line)}
.hrow{display:flex;justify-content:space-between;align-items:baseline}.city{font-weight:800;font-size:20px}.day{color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}.stat{background:var(--card);border-radius:10px;padding:5px 8px}.stat b{display:block;font-size:14px}.stat small{color:var(--mut);font-size:11px}
#view{flex:1;overflow:auto;padding:10px 12px 20px}
#tabs{display:flex;border-top:1px solid var(--line);background:#11141b;padding-bottom:env(safe-area-inset-bottom)}
#tabs button{flex:1;background:none;border:0;color:var(--mut);padding:9px 0 11px;font:600 11px system-ui;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:58px}
#tabs button span{font-size:22px}#tabs button.on{color:var(--acc)}
.row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;margin-bottom:8px;min-height:60px;transition:transform .1s}
.row:active,.btn:active{transform:scale(.97)}.row .nm{flex:1}.row .nm b{display:block}.row .nm small{color:var(--mut)}
.price{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}.up{color:var(--red)}.dn{color:var(--acc)}
.btn{border:0;border-radius:12px;padding:12px 16px;font:700 15px system-ui;background:var(--acc);color:#04130b;min-height:48px;transition:transform .1s}
.btn.sec{background:#262b3a;color:var(--tx)}.btn.red{background:var(--red);color:#fff}.btn:disabled{opacity:.35}
.btns{display:flex;gap:8px;margin-top:10px}.btns .btn{flex:1}
h2{font-size:13px;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin:14px 4px 8px}
svg.spark{width:60px;height:24px}
#modal{position:fixed;inset:0;display:none;background:#000a;align-items:flex-end;z-index:9}#modal.on{display:flex;animation:fade .15s}
.sheet{background:#1a1e29;width:100%;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:up .22s cubic-bezier(.2,.9,.3,1.2)}
.sheet.card{margin:auto 16px;border-radius:22px;animation:pop .3s cubic-bezier(.2,.9,.3,1.4)}.sheet h3{margin:0 0 6px;font-size:20px}.sheet p{color:#c5c9d6}
input[type=range]{width:100%;height:36px;accent-color:var(--acc)}.qty{font-size:30px;font-weight:800;text-align:center}
@keyframes up{from{transform:translateY(100%)}}@keyframes pop{from{transform:scale(.7);opacity:0}}@keyframes fade{from{opacity:0}}
.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.flash{animation:flash .4s}@keyframes flash{50%{background:#3ee08f33}}
.map{position:relative;height:150px;background:radial-gradient(#1a2233,#0f131c);border-radius:14px;margin-bottom:8px}.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mut);transform:translate(-50%,-50%)}.dot.me{background:var(--acc);box-shadow:0 0 12px var(--acc)}
.hp{height:8px;background:#333;border-radius:4px;overflow:hidden}.hp i{display:block;height:100%;background:var(--acc)}
table{width:100%;border-collapse:collapse}td{padding:6px 4px;border-bottom:1px solid var(--line)}
select{background:#262b3a;color:var(--tx);border:0;border-radius:10px;padding:12px;font-size:15px;width:100%}