:root { --accent:#0a66e8; --ink:#18283b; --muted:#6b7a8c; --line:#e3e8ee; --canvas:#f4f6f8; --surface:#fff; --good:#2b8a3e; --warn:#e67700; --bad:#c92a2a; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--canvas); color:var(--ink); font:15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
a { color:var(--accent); }
.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; padding-top:calc(.7rem + env(safe-area-inset-top)); background:var(--accent); color:#fff; }
.top img { width:34px; height:34px; border-radius:8px; background:#fff; object-fit:contain; }
.brand { display:flex; flex-direction:column; flex:1; min-width:0; }
.brand small { opacity:.8; font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.icon-btn { background:rgb(255 255 255 / 18%); border:0; color:#fff; width:36px; height:36px; border-radius:10px; font-size:1.1rem; }
main { max-width:560px; margin:0 auto; padding:1rem; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1rem; margin-bottom:.85rem; }
.hero { background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); color:#fff; border:0; }
.hero .muted { color:rgb(255 255 255 / 80%); }
.row { display:flex; align-items:center; gap:.6rem; }
.between { justify-content:space-between; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.stat { background:var(--canvas); border-radius:12px; padding:.6rem .7rem; }
.hero .stat { background:rgb(255 255 255 / 14%); }
.stat small { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; opacity:.75; font-weight:700; }
.stat b { font-size:1.15rem; }
.muted { color:var(--muted); }
.center { text-align:center; padding:2rem 1rem; }
h1 { font-size:1.35rem; margin:.2rem 0 .8rem; }
h2 { font-size:1rem; margin:0 0 .6rem; }
.chip { display:inline-block; padding:.12rem .55rem; border-radius:99px; font-size:.72rem; font-weight:700; background:var(--canvas); color:var(--muted); }
.chip.good { background:#e6f4ea; color:var(--good); } .chip.warn { background:#fff3e0; color:var(--warn); } .chip.bad { background:#fdecec; color:var(--bad); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; border:0; border-radius:12px; padding:.75rem 1rem; font-weight:700; font-size:.95rem; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
.btn.block { width:100%; }
.btn.ghost { background:var(--canvas); color:var(--ink); }
.btn.light { background:#fff; color:var(--accent); }
.btn.sm { padding:.45rem .75rem; font-size:.82rem; border-radius:10px; }
.btn:disabled { opacity:.55; }
.actions { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; }
.actions a { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.7rem .2rem; border-radius:14px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.75rem; font-weight:600; }
.actions a span { font-size:1.3rem; color:var(--accent); }
.list > div { padding:.7rem 0; border-bottom:1px solid var(--line); }
.list > div:last-child { border-bottom:0; }
label { display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin:.6rem 0 .25rem; }
input, select, textarea { width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius:12px; font:inherit; background:#fff; color:var(--ink); }
textarea { min-height:90px; }
.seg { display:flex; background:var(--canvas); border-radius:12px; padding:.25rem; margin-bottom:.8rem; }
.seg button { flex:1; border:0; background:transparent; padding:.5rem; border-radius:9px; font-weight:700; color:var(--muted); }
.seg button.on { background:#fff; color:var(--accent); box-shadow:0 1px 2px rgb(0 0 0 / 8%); }
.plan { border:1px solid var(--line); border-radius:14px; padding:.8rem; margin-bottom:.6rem; }
.plan.cur { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.banner { background:#fff3e0; color:#8a4b00; border-radius:12px; padding:.7rem .8rem; margin-bottom:.8rem; font-size:.88rem; }
.bubble { max-width:85%; padding:.5rem .7rem; border-radius:12px; margin:.35rem 0; background:var(--canvas); }
.bubble.mine { margin-left:auto; background:color-mix(in srgb, var(--accent) 14%, #fff); }
.bars { display:flex; align-items:flex-end; gap:2px; height:110px; }
.bars div { flex:1; background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; opacity:.85; }
.tabs { position:fixed; bottom:0; left:0; right:0; z-index:5; display:flex; background:#fff; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; padding:.45rem 0 .5rem; font-size:.7rem; color:var(--muted); text-decoration:none; font-weight:600; }
.tabs a span { font-size:1.2rem; line-height:1.3; }
.tabs a.on { color:var(--accent); }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:12px; font-size:.88rem; z-index:9; max-width:90vw; }
.toast.bad { background:var(--bad); }
.login-logo { width:64px; height:64px; border-radius:16px; margin:1rem auto .5rem; display:block; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8eef4; --muted:#9aa8b6; --line:#2a3542; --canvas:#11181f; --surface:#18212b; }
  input, select, textarea, .tabs, .seg button.on, .btn.light { background:#1f2a35; color:var(--ink); }
  .bubble.mine { background:color-mix(in srgb, var(--accent) 30%, #18212b); }
}