*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root, [data-theme="light"] {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface2: #eef2f7;
  --border: #d8dee8;
  --accent: #4f46e5;
  --accent2: #4338ca;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #d97706;
  --text: #0f172a;
  --muted: #64748b;
  --ok-bg: #dcfce733;
  --ok-fg: #166534;
  --ok-border: #86efac88;
  --err-bg: #fee2e233;
  --err-fg: #b91c1c;
  --err-border: #fca5a588;
}
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1f2e;
  --surface2: #242938;
  --border: #2d3348;
  --accent: #6366f1;
  --accent2: #818cf8;
  --danger: #ef4444;
  --success: #22c55e;
  --warn: #f59e0b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --ok-bg: #14532d33;
  --ok-fg: #86efac;
  --ok-border: #22c55e55;
  --err-bg: #7f1d1d33;
  --err-fg: #fca5a5;
  --err-border: #ef444455;
}
body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}