:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f1f4;
  --color-header: #eaecef;
  --color-text: #1c1e21;
  --color-text-muted: #6b7280;
  --color-border: #d7dae0;
  --color-border-strong: #b8bcc4;
  --color-accent: #2563eb;
  --color-accent-soft: rgba(37, 99, 235, 0.14);
  --color-accent-line: #2563eb;
  --color-selection: rgba(37, 99, 235, 0.10);
  --color-danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.16);
  --cell-w: 100px;
  --cell-h: 26px;
  --gutter-w: 44px;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
}

[data-theme="dark"] {
  --color-bg: #16181d;
  --color-surface: #1e2128;
  --color-surface-alt: #242832;
  --color-header: #2a2f3a;
  --color-text: #e6e8eb;
  --color-text-muted: #8b919c;
  --color-border: #333945;
  --color-border-strong: #454c5a;
  --color-accent: #4f8cff;
  --color-accent-soft: rgba(79, 140, 255, 0.20);
  --color-accent-line: #4f8cff;
  --color-selection: rgba(79, 140, 255, 0.14);
  --color-danger: #f87171;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; }