:root{
  --bg:#0b1120; --surface:#131c31; --surface2:#1b2740; --border:rgba(255,255,255,.08);
  --text:#eef2f9; --muted:#8a97b1; --accent:#3b82f6; --pos:#34d399; --neg:#f87171; --warn:#fbbf24;
  --r:16px; --sp:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{max-width:520px;margin:0 auto;min-height:100dvh}
.screen{min-height:100dvh}
[hidden]{display:none!important}

/* Splash */
.splash{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;letter-spacing:.02em;color:var(--muted)}

/* Login */
#login{display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:32px 24px}
.brand{font-size:2rem;font-weight:800;letter-spacing:.01em}
.brand-sub{color:var(--muted);font-size:.9rem;margin:.35rem 0 1.75rem}
#login-form{display:flex;flex-direction:column;gap:12px}
input{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;color:var(--text);font-size:16px}
input:focus{outline:none;border-color:var(--accent)}
button{border:0;border-radius:12px;padding:15px;font-size:16px;font-weight:700;cursor:pointer}
#login-btn{background:var(--accent);color:#fff;margin-top:6px}
#login-btn:disabled{opacity:.6}
.error{color:var(--neg);font-size:.85rem;text-align:center}

/* Topbar */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 14px) 20px 14px;background:rgba(11,17,32,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand-sm{font-weight:800;font-size:1.25rem}
.logout{background:var(--surface2);color:var(--muted);width:38px;height:38px;border-radius:50%;font-size:1rem}

/* Feed */
.feed{display:flex;flex-direction:column;gap:14px;padding:16px 16px calc(env(safe-area-inset-bottom) + 32px)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 18px}
.card__label{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card__foot{color:var(--muted);font-size:.78rem;margin-top:8px}
.card--hero{background:linear-gradient(160deg,#1a2745,#131c31)}
.kpi-hero{font-size:2.6rem;font-weight:800;letter-spacing:-.01em;margin-top:8px;line-height:1.05}
.kpi{font-size:1.9rem;font-weight:800}
.ca-row{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.delta{font-weight:700;font-size:.95rem}
.delta.up{color:var(--pos)} .delta.down{color:var(--neg)}
.chip{background:var(--surface2);color:var(--text);font-weight:700;font-size:.82rem;padding:4px 10px;border-radius:20px}

/* Lists */
.list{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:2px}
.li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--border)}
.li:first-child{border-top:0}
.li__main{min-width:0}
.li__title{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li__sub{color:var(--muted);font-size:.76rem;margin-top:2px}
.li__amt{font-weight:700;white-space:nowrap}
.tag{font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--surface2);color:var(--muted)}
.tag--0-30 j{background:rgba(52,211,153,.15);color:var(--pos)}
.tag--31-60 j{background:rgba(251,191,36,.15);color:var(--warn)}
.tag--61-90 j,.tag--90\+ j{background:rgba(248,113,113,.15);color:var(--neg)}
.empty{color:var(--muted);font-size:.9rem;padding:14px 0 4px}
.foot-note{text-align:center;color:var(--muted);font-size:.72rem;margin-top:6px}