* { box-sizing: border-box; margin: 0; }
:root { --bg:#101418; --card:#1b2129; --fg:#e8edf2; --muted:#8b98a5;
        --accent:#2d6cdf; --ok:#2e9e5b; --due:#d99a2b; --overdue:#d9482b;
        --border:#2c3540; --border2:#232b34; --input-bg:#0d1116;
        --chip-neutral:#2c3540; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f2f4f7; --card:#ffffff; --fg:#1a2028; --muted:#5b6875;
    --border:#d4dae1; --border2:#e3e8ee; --input-bg:#eef1f5;
    --chip-neutral:#8b98a5; }
}
:root[data-theme="light"] {
  --bg:#f2f4f7; --card:#ffffff; --fg:#1a2028; --muted:#5b6875;
  --border:#d4dae1; --border2:#e3e8ee; --input-bg:#eef1f5;
  --chip-neutral:#8b98a5; }
body { background:var(--bg); color:var(--fg);
       font-family:-apple-system, system-ui, sans-serif;
       padding-left: calc(84px + env(safe-area-inset-left)); }
header { display:flex; justify-content:space-between; align-items:center;
         padding:14px 16px; }
.brand { font-weight:700; font-size:1.2rem; letter-spacing:.03em; }
main { padding: 0 16px 16px; max-width: 640px; margin: 0 auto; }
h2 { margin: 10px 0; font-size:1.05rem; color:var(--muted);
     text-transform:uppercase; letter-spacing:.06em; }
.card { background:var(--card); border-radius:12px; padding:14px; margin:10px 0; }
.stack label { display:block; margin:10px 0 4px; color:var(--muted); }
input, select, button, textarea { font-size:1rem; padding:10px; width:100%;
  border-radius:8px; border:1px solid var(--border); background:var(--input-bg);
  color:var(--fg); }
button { background:var(--accent); border:none; font-weight:600; margin-top:10px; }
button.danger { background:var(--overdue); }
.chip { display:inline-block; padding:4px 12px; border-radius:999px;
        color:#fff; text-decoration:none; font-weight:600; font-size:.9rem; }
.chip.ok { background:var(--ok); } .chip.due { background:var(--due); }
.chip.overdue { background:var(--overdue); }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px;
                margin:16px 0; }
.profile-btn { padding:28px 10px; font-size:1.15rem; border-radius:14px; }
.tabbar { position:fixed; top:0; bottom:0; left:0; display:flex;
  flex-direction:column; width:calc(84px + env(safe-area-inset-left));
  padding-left: env(safe-area-inset-left);
  padding-top: calc(12px + env(safe-area-inset-top));
  background:var(--card); border-right:1px solid var(--border); }
.tabbar a { text-align:center; padding:16px 4px; color:var(--muted);
            text-decoration:none; font-size:.85rem; }
.chart-wrap { position:relative; height:320px; width:100%; }
.row { display:flex; justify-content:space-between; align-items:center;
       gap:8px; padding:8px 0; border-bottom:1px solid var(--border2); }
.row:last-child { border-bottom:none; }
.muted { color:var(--muted); font-size:.85rem; }
details { margin:12px 0; } summary { color:var(--muted); padding:6px 0; }
.warn { color:var(--due); } .bad { color:var(--overdue); }
.calc-result { margin-top:12px; padding:14px; border-radius:8px;
  background:var(--input-bg); border:1px solid var(--border); text-align:center;
  font-size:1.15rem; font-weight:700; }
.chart-wrap.small { height:220px; }
.input-group { display:flex; gap:8px; }
.input-group input { flex:1; }
.input-group select { width:auto; min-width:88px; }
button.range { background:var(--chip-neutral); }
button.range.active { background:var(--accent); }
.chip.neutral { background:var(--chip-neutral); }