:root {
    color-scheme: light;
    --bg:        oklch(0.985 0.004 250);
    --bg-2:      oklch(0.965 0.006 250);
    --panel:     #ffffff;
    --ink:       oklch(0.20 0.02 260);
    --ink-2:     oklch(0.40 0.015 260);
    --muted:     oklch(0.62 0.012 260);
    --line:      oklch(0.90 0.008 260);
    --line-2:    oklch(0.83 0.012 260);
    --accent:    oklch(0.55 0.16 255);
    --accent-soft: oklch(0.95 0.04 255);
    --primary-bg: var(--ink);
    --primary-fg: #ffffff;
    --primary-border: var(--ink);
    --primary-hover-bg: oklch(0.30 0.025 260);
    --selected-bg: var(--ink);
    --selected-fg: #ffffff;
    --good:      oklch(0.62 0.15 155);
    --good-soft: oklch(0.95 0.05 155);
    --warn:      oklch(0.65 0.18 35);
    --warn-soft: oklch(0.95 0.05 35);

    /* Stripe palette (rows A..E) — shared chroma/lightness, varied hue */
    --row-A: oklch(0.86 0.12 80);   /* amber */
    --row-B: oklch(0.90 0.14 110);  /* lime */
    --row-C: oklch(0.86 0.12 155);  /* mint */
    --row-D: oklch(0.84 0.10 230);  /* sky */
    --row-E: oklch(0.82 0.10 290);  /* lilac */
    /* Soft tints for empty row slots — same hue, much higher lightness */
    --row-A-soft: oklch(0.97 0.025 80);
    --row-B-soft: oklch(0.97 0.030 110);
    --row-C-soft: oklch(0.97 0.025 155);
    --row-D-soft: oklch(0.97 0.022 230);
    --row-E-soft: oklch(0.97 0.022 290);
    /* Borders for empty row slots */
    --row-A-line: oklch(0.78 0.10 80);
    --row-B-line: oklch(0.80 0.11 110);
    --row-C-line: oklch(0.78 0.10 155);
    --row-D-line: oklch(0.76 0.09 230);
    --row-E-line: oklch(0.74 0.09 290);
    --row-empty: oklch(0.94 0.005 260);
    --shadow: 0 16px 36px rgb(15 23 42 / 0.12);

    --radius: 10px;
    --radius-sm: 6px;
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg:        oklch(0.18 0.018 260);
    --bg-2:      oklch(0.23 0.018 260);
    --panel:     oklch(0.255 0.018 260);
    --ink:       oklch(0.94 0.008 260);
    --ink-2:     oklch(0.78 0.010 260);
    --muted:     oklch(0.65 0.012 260);
    --line:      oklch(0.36 0.018 260);
    --line-2:    oklch(0.48 0.020 260);
    --accent:    oklch(0.72 0.13 255);
    --accent-soft: oklch(0.34 0.055 255);
    --primary-bg: oklch(0.32 0.070 255);
    --primary-fg: oklch(0.96 0.006 260);
    --primary-border: oklch(0.58 0.11 255);
    --primary-hover-bg: oklch(0.37 0.075 255);
    --selected-bg: oklch(0.34 0.055 255);
    --selected-fg: oklch(0.90 0.050 255);
    --good:      oklch(0.72 0.13 155);
    --good-soft: oklch(0.34 0.055 155);
    --warn:      oklch(0.74 0.15 35);
    --warn-soft: oklch(0.34 0.06 35);

    --row-A: oklch(0.78 0.11 80);
    --row-B: oklch(0.80 0.12 110);
    --row-C: oklch(0.78 0.10 155);
    --row-D: oklch(0.74 0.09 230);
    --row-E: oklch(0.76 0.09 290);
    --row-A-soft: oklch(0.29 0.045 80);
    --row-B-soft: oklch(0.30 0.050 110);
    --row-C-soft: oklch(0.30 0.045 155);
    --row-D-soft: oklch(0.30 0.040 230);
    --row-E-soft: oklch(0.30 0.040 290);
    --row-A-line: oklch(0.58 0.09 80);
    --row-B-line: oklch(0.60 0.10 110);
    --row-C-line: oklch(0.58 0.09 155);
    --row-D-line: oklch(0.56 0.08 230);
    --row-E-line: oklch(0.56 0.08 290);
    --row-empty: oklch(0.30 0.012 260);
    --shadow: 0 18px 42px rgb(0 0 0 / 0.36);
  }
  *,*::before,*::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  button { font: inherit; color: inherit; cursor: pointer; }