:root { --bg:#0b1020; --card:#151b2e; --line:#26304a; --fg:#e5e7eb; --mute:#9ca3af; --red:#ef4444; --yel:#eab308; --grn:#22c55e; --pri:#3b82f6; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; padding-bottom:64px; }
.top { position:sticky; top:0; display:flex; gap:8px; align-items:center; padding:10px 14px; background:#111827; border-bottom:1px solid var(--line); z-index:2; }
.top .link { margin-left:auto; }
.view { padding:12px 14px; }
.muted { color:var(--mute); font-size:14px; }
.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:#111827; border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); }
.tabs button { flex:1; padding:12px 0; background:none; border:0; color:var(--mute); font-size:15px; }
.tabs button.on { color:var(--fg); font-weight:700; }
label { display:block; margin:10px 0; font-size:14px; color:var(--mute); }
input, select { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:16px; }
button { font:inherit; cursor:pointer; }
.primary { width:100%; padding:12px; border:0; border-radius:8px; background:var(--pri); color:#fff; font-weight:700; margin-top:8px; }
.link { background:none; border:0; color:var(--mute); text-decoration:underline; }
.msg { min-height:1.4em; }
.msg.err { color:var(--red); } .msg.ok { color:var(--grn); }
.hint { color:var(--mute); font-size:13px; }
.seg { display:flex; gap:6px; }
.seg button { flex:1; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--mute); }
.seg button.on { color:#fff; border-color:var(--pri); background:#1e3a8a; }
h2 { font-size:16px; margin:16px 0 6px; }
.alerts li { color:#fecaca; }
ul { margin:0; padding-left:18px; }
.cat { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--line); }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; }
.card.red { border-color:var(--red); }
.card .row { display:flex; justify-content:space-between; gap:8px; }
.card .amt { font-weight:700; font-variant-numeric:tabular-nums; }
.diff { color:var(--red); font-weight:700; }
.ok { color:var(--grn); }
.yel { color:var(--yel); }
.risk { color:var(--red); font-size:14px; }
.entries { margin-top:8px; font-size:14px; }
.entries li { display:flex; justify-content:space-between; gap:6px; }
.entries .void { text-decoration:line-through; color:var(--mute); }