/* GENERATED by theme/build.py from theme/tokens.json. Edit the tokens, not this file. */
:root {
  color-scheme: light dark;
  --bg: #f6f4fa; --card: #ffffff; --text: #221c33; --muted: #7a7390; --line: #e6e1f0; --soft: #efe9fb;
  --violet: #7040e0; --violet-light: #9a6bff; --accent: #ff7ab8;
  --grad-from: #5b4bff; --grad-mid: #3a2bd0; --grad-to: #1c1165;
  --grad: linear-gradient(135deg, var(--grad-from), var(--grad-mid) 55%, var(--grad-to));
  --radius: 16px; --pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14111d; --card: #1e1a2b; --text: #ede9f7; --muted: #9a93b0; --line: #2e2942; --soft: #241f35; }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--violet); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.bar { background: var(--grad); color: #fff; }
.btn { border: 0; border-radius: var(--pill); padding: 12px 28px; font: inherit; font-weight: 700; cursor: pointer; background: var(--grad); color: #fff; }
.btn.secondary { background: var(--soft); color: var(--violet); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }
.tabs { display: flex; padding: 3px; border-radius: var(--pill); background: var(--soft); border: 1px solid var(--line); }
.tab { border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; padding: 6px 16px; border-radius: var(--pill); cursor: pointer; }
.tab.active { background: var(--grad); color: #fff; }
.badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; display: inline-grid; place-items: center; }