:root { --bg:#f6f7f9; --fg:#1d2330; --muted:#667085; --card:#fff; --line:#e4e7ec; --accent:#2457d6; --err:#b42318; }
@media (prefers-color-scheme: dark) { :root { --bg:#12151b; --fg:#e6e9ef; --muted:#98a2b3; --card:#1b2029; --line:#2a313d; --accent:#7aa2ff; --err:#ff8a80; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif; line-height:1.6; }
.bar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; } .brand small { color:var(--muted); font-weight:400; margin-left:4px; }
.wrap { max-width:960px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px; }
.narrow { max-width:400px; margin:40px auto; }
h1 { font-size:1.4rem; margin:0 0 12px; }
label { display:block; margin:12px 0; font-size:.9rem; }
input { display:block; width:100%; margin-top:4px; padding:10px 12px; font-size:1rem; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--fg); }
button { margin-top:8px; width:100%; padding:12px; font-size:1rem; border:0; border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; }
button.link { width:auto; margin:0; padding:4px 8px; background:none; color:var(--accent); }
.inline { display:inline; }
.error { color:var(--err); } .muted { color:var(--muted); }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:16px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; display:flex; flex-direction:column; }
.tile .label { color:var(--muted); font-size:.85rem; } .tile .num { font-size:1.8rem; font-weight:700; }