/* Dark theme is the default (on :root); [data-theme="light"] overrides it. The theme attribute is set on by an inline script in index.html before first paint, so there is no flash of the wrong theme. */ :root { font-family: system-ui, sans-serif; color-scheme: dark; --bg: #16181c; --text: #e4e6eb; --surface: #1e2228; --border: #2c3038; --muted: #9aa0aa; --input-bg: #14161a; --input-border: #3a3f48; --ac-hover: #2a3343; --accent: #3b82f6; --accent-hover: #2f6feb; --on-accent: #fff; --row-border: #2a2e36; --pin: #e2b53c; --pinned-bg: #332b10; --pin-pass-bg: #16351b; --pin-fail-bg: #3a1620; --pin-na-bg: #23262d; --range-fg: #6ee7a0; --range-bg: #15361f; --out-fg: #f1a7a0; --out-bg: #3a1c1a; --fast-fg: #8fbce6; --fast-bg: #1c2a3a; --slow-fg: #e6c98f; --slow-bg: #3a311c; /* Stats chip: offensive = purple, defensive = teal — a distinct pair from the amber/blue (physical/special) and red/green (exclude/only) already in use. */ --offense-fg: #c4b5fd; --offense-bg: #2a2342; --defense-fg: #2dd4bf; --defense-bg: #0e3a35; --shadow: rgba(0, 0, 0, 0.5); } :root[data-theme="light"] { color-scheme: light; --bg: #f5f6f8; --text: #1c1d20; --surface: #fff; --border: #e2e4e8; --muted: #5a5d63; --input-bg: #fff; --input-border: #cfd2d8; --ac-hover: #eef2fb; --accent: #2f6feb; --accent-hover: #275ec9; --on-accent: #fff; --row-border: #eef0f3; --pin: #c9a227; --pinned-bg: #fffbe6; --pin-pass-bg: #e7f7ea; --pin-fail-bg: #fdeaee; --pin-na-bg: #eceef1; --range-fg: #126b2c; --range-bg: #e7f6ec; --out-fg: #b42318; --out-bg: #fdeceb; --fast-fg: #1d4ed8; --fast-bg: #e8f0fb; --slow-fg: #b45309; --slow-bg: #fdf6e8; --offense-fg: #6d28d9; --offense-bg: #f2ecfe; --defense-fg: #0e7490; --defense-bg: #e0f4f7; --shadow: rgba(0, 0, 0, 0.1); } body { margin: 0; background: var(--bg); color: var(--text); } main { max-width: 1400px; margin: 0 auto; padding: 24px 16px 64px; } h1 { font-size: 22px; font-weight: 600; text-align: center; } form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: grid; gap: 12px; max-width: 720px; margin: 0 auto; } label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); } /* Caption for a chip group — same look as a label, but not a