:root{--r:18px;--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[data-theme=dark]{--bg:#0d0e12;--card:#171922;--card2:#1f222d;--text:#f3f4f8;--hint:#8c92a4;--line:#272b39;--accent:#7c5cff;--accent2:#35d6a7;--warn:#f5a524;--bad:#ff5d6c;--shadow:0 10px 30px rgba(0,0,0,.35)}
[data-theme=light]{--bg:#f3f4f9;--card:#fff;--card2:#eff0f6;--text:#14161c;--hint:#6b7080;--line:#e3e5ee;--accent:#6a4cf5;--accent2:#12b886;--warn:#d98a00;--bad:#e5384f;--shadow:0 10px 26px rgba(30,30,80,.08)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.4 var(--font);-webkit-font-smoothing:antialiased}
#app{max-width:560px;margin:0 auto;padding:14px 14px calc(92px + env(safe-area-inset-bottom))}
h3{margin:22px 4px 10px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hint)}
.boot{display:grid;place-items:center;height:70vh}
.logo{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),#c04bff)}
.logo.big{width:64px;height:64px;font-size:30px;border-radius:20px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(.92);opacity:.7}}
.head{display:flex;align-items:center;gap:12px;margin:2px 2px 16px}
.head b{font-size:19px}.head small{display:block;color:var(--hint);font-size:13px;margin-top:1px}
.hero{border-radius:24px;padding:20px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#8f6bff 0%,#5b3df0 45%,#3a2bb8 100%);box-shadow:var(--shadow)}
.hero small{opacity:.8;font-size:13px}.hero .big{font-size:36px;font-weight:750;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.hero .sub{opacity:.85;font-size:13px;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.tiles.two{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--card);border-radius:16px;padding:13px 14px;border:1px solid var(--line)}
.tile b{display:block;font-size:22px;font-weight:720;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile span{color:var(--hint);font-size:12.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:8px}
.row .grow{flex:1;min-width:0}.row .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .s{color:var(--hint);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.row .amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.row.click{cursor:pointer}.row.click:active{transform:scale(.99)}
.ava{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--card2));flex:none}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--card2);color:var(--hint);white-space:nowrap}
.pill.ok{background:color-mix(in srgb,var(--accent2) 18%,transparent);color:var(--accent2)}
.pill.warn{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.btn{appearance:none;border:0;border-radius:14px;padding:12px 16px;font:600 15px var(--font);color:#fff;background:var(--accent);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.full{width:100%}.btn.white{background:#fff;color:#4a34d6}.btn.ghost{background:var(--card2);color:var(--text)}.btn.good{background:var(--accent2);color:#04241b}
.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:11px}.btn[disabled]{opacity:.5}
.btn:active{transform:scale(.98)}
.icon-btn{appearance:none;border:0;width:38px;height:38px;border-radius:12px;background:var(--card2);color:var(--text);display:grid;place-items:center;cursor:pointer;flex:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:99px;padding:7px 14px;font:600 13.5px var(--font);white-space:nowrap;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.bar{height:8px;border-radius:99px;background:var(--card2);overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#c04bff)}
.fun{margin-bottom:12px}.fun .l{display:flex;justify-content:space-between;font-size:13.5px}.fun .l span{color:var(--hint)}
.input{width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:14px;padding:13px 14px;font:15px var(--font);outline:none}
.input:focus{border-color:var(--accent)}
.promo{margin-top:18px;border-radius:22px;padding:18px;background:linear-gradient(135deg,#0f8f7a,#0a5f8f);color:#fff;position:relative;overflow:hidden}
.promo .pill{background:rgba(255,255,255,.2);color:#fff}.promo b{display:block;font-size:19px;margin:8px 0 4px}.promo p{margin:0 0 14px;opacity:.9;font-size:14px}
.empty{text-align:center;color:var(--hint);padding:26px 12px;font-size:14px}
.err{background:color-mix(in srgb,var(--bad) 14%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);border-radius:16px;padding:16px;text-align:center}
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:2px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.tabs[hidden]{display:none}
.tab{appearance:none;border:0;background:none;color:var(--hint);flex:1;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border-radius:12px;font:600 11px var(--font);cursor:pointer}
.tab.on{color:var(--accent)}.tab.on svg{transform:translateY(-1px)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:#000c;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;pointer-events:none;transition:.25s;z-index:30;max-width:90%}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;z-index:20;animation:fade .2s}
.sheet[hidden]{display:none}
.sheet .box{width:100%;max-width:560px;margin:0 auto;background:var(--bg);border-radius:24px 24px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));animation:up .25s}
.sheet h2{margin:0 0 4px;font-size:19px}.sheet p{margin:0 0 14px;color:var(--hint);font-size:14px}.sheet .gap{height:10px}
@keyframes up{from{transform:translateY(40px);opacity:.4}}@keyframes fade{from{opacity:0}}
.skel{height:64px;border-radius:16px;margin-bottom:10px;background:linear-gradient(90deg,var(--card) 25%,var(--card2) 50%,var(--card) 75%);background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}.kv:last-child{border:0}.kv span{color:var(--hint)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--hint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}