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

    /* ── THEMES ── */
    :root {
      --bg:       #0d1117;
      --surface:  #161b22;
      --card:     #1c2128;
      --border:   #30363d;
      --text:     #e6edf3;
      --muted:    #8b949e;
      --accent:   #f7df1e;
      --radius:   14px;
    }

    /* Light */
    body.theme-light {
      --bg:      #f4f6fb;
      --surface: #ffffff;
      --card:    #ffffff;
      --border:  #e2e8f0;
      --text:    #1a202c;
      --muted:   #718096;
      --accent:  #3b82f6;
    }

    /* Dark (default) */
    body.theme-dark {
      --bg:      #0d1117;
      --surface: #161b22;
      --card:    #1c2128;
      --border:  #30363d;
      --text:    #e6edf3;
      --muted:   #8b949e;
      --accent:  #f7df1e;
    }

    /* Ocean */
    body.theme-ocean {
      --bg:      #0a1628;
      --surface: #0f2044;
      --card:    #132654;
      --border:  #1e3a7a;
      --text:    #e0f0ff;
      --muted:   #7aadda;
      --accent:  #38bdf8;
    }

    /* Sunset */
    body.theme-sunset {
      --bg:      #1a0a0a;
      --surface: #2d1010;
      --card:    #3d1515;
      --border:  #5c2020;
      --text:    #ffe8d6;
      --muted:   #c4927a;
      --accent:  #fb923c;
    }

    /* Forest */
    body.theme-forest {
      --bg:      #0a1a0a;
      --surface: #0f2a0f;
      --card:    #133513;
      --border:  #1e4d1e;
      --text:    #d4f0d4;
      --muted:   #7ab87a;
      --accent:  #4ade80;
    }

    /* ── BASE STYLES ── */
    body {
      font-family: 'Outfit', sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      transition: background 0.4s ease, color 0.4s ease;
    }

    .wrapper {
      width: 100%;
      max-width: 500px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* ── CONTENT CARD ── */
    .content-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 36px 32px;
      transition: background 0.4s, border-color 0.4s;
      position: relative;
      overflow: hidden;
    }

    /* Accent top bar */
    .content-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--accent);
      transition: background 0.4s;
    }

    .content-card .tag {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      color: var(--accent);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 12px;
      transition: color 0.4s;
    }

    .content-card h1 {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
      transition: color 0.4s;
    }

    .content-card p {
      font-size: 0.9rem;
      color: var(--muted);
      line-height: 1.7;
      transition: color 0.4s;
    }

    /* Active theme badge */
    .theme-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 20px;
      font-family: 'Space Mono', monospace;
      font-size: 0.7rem;
      color: var(--accent);
      background: rgba(255,255,255,0.04);
      border: 1px solid var(--border);
      padding: 5px 12px;
      border-radius: 20px;
      transition: all 0.4s;
    }

    .badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--accent);
      transition: background 0.4s;
    }

    /* ── THEME BUTTONS ── */
    .themes-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      transition: background 0.4s, border-color 0.4s;
    }

    .themes-label {
      font-family: 'Space Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      display: block;
      margin-bottom: 14px;
    }

    .themes-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
    }

    .theme-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 6px;
      border-radius: 10px;
      border: 2px solid transparent;
      background: var(--surface);
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }

    .theme-btn:hover { transform: translateY(-2px); border-color: var(--border); }

    .theme-btn.active {
      border-color: var(--accent) !important;
      background: rgba(255,255,255,0.04);
    }

    .theme-btn.active::after {
      content: '✓';
      position: absolute;
      top: 4px; right: 6px;
      font-size: 0.6rem;
      color: var(--accent);
    }

    /* Color swatch */
    .swatch {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.1);
      flex-shrink: 0;
    }

    .swatch-dark   { background: linear-gradient(135deg, #0d1117, #f7df1e); }
    .swatch-light  { background: linear-gradient(135deg, #f4f6fb, #3b82f6); }
    .swatch-ocean  { background: linear-gradient(135deg, #0a1628, #38bdf8); }
    .swatch-sunset { background: linear-gradient(135deg, #1a0a0a, #fb923c); }
    .swatch-forest { background: linear-gradient(135deg, #0a1a0a, #4ade80); }

    .theme-btn span {
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--muted);
      text-align: center;
      transition: color 0.3s;
    }

    .theme-btn.active span { color: var(--text); }