*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── DARK THEME (default) ── */
    :root {
      --bg: #0f0f0f;
      --surface: #161616;
      --border: #222;
      --accent: #00b806;
      --accent-dim: rgba(99, 255, 177, 0.12);
      --accent-glow: rgba(29, 141, 12, 0.35);
      --text: #ffffff;
      --muted: #888888;
      --card-text: #ffffff;
      --card-muted: #888;
      --nav-bg: rgba(15,15,15,0.85);
      --nav-bg-solid: rgba(15,15,15,0.97);
      --font-display: 'Syne', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }

    /* ── LIGHT THEME (system) ── */
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f5f2ed;
        --surface: #ebe7df;
        --border: #d0cbbf;
        --accent: #007e20;
        --accent-dim: rgba(82, 224, 106, 0.1);
        --accent-glow: rgba(82, 224, 106, 0.25);
        --text: #101111;
        --muted: #555046;
        --card-text: #111010;
        --card-muted: #5e5a52;
        --nav-bg: rgba(245,242,237,0.88);
        --nav-bg-solid: rgba(245,242,237,0.98);
      }
    }

    /* ── MANUAL DARK OVERRIDE ── */
    /*      --accent-dim: rgba(108,99,255,0.12);
      --accent-glow: rgba(108,99,255,0.35);
      --text: #ffffff;
      --muted: #888;
      --card-text: #ffffff;
      --card-muted: #888;
      --nav-bg: rgba(15,15,15,0.85);
      --nav-bg-solid: rgba(15,15,15,0.97);
    }

    /* ── MANUAL LIGHT OVERRIDE ── */
    /*[data-theme="light"] {
      --bg: #f0ece3;
      --surface: #040610;
      --border: #c8c2b5;
      --accent: #6c63ff;
      --accent-dim: rgba(108,99,255,0.12);
      --accent-glow: rgba(108,99,255,0.3);
      --text: #1a1a1a;
      --muted: #666;
      --card-text: #e8e8f0;
      --card-muted: #a0a0bc;
      --nav-bg: rgba(240,236,227,0.88);
      --nav-bg-solid: rgba(240,236,227,0.98);
    }

    /* ── THEME TOGGLE BUTTON ── */
   /*   width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem;
      transition: all 0.2s;
      flex-shrink: 0;
    }
    .theme-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
      transform: rotate(20deg);
    } */