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

    :root {
      --bg: #07090d;
      --text-primary: #e6edf3;
      --text-muted: #7d8794;
      --purple: #7c8cff;
      --input-bg: #0d1117;
      --input-border: #273142;
      --btn-bg: #7c8cff;
      --btn-hover: #6573dd;
      --glow-color: rgba(124,140,255,0.07);
      --nav-height: 62px;
    }

    body.theme-classic {
      --bg: #090909;
      --text-primary: #ffffff;
      --text-muted: #606060;
      --purple: #ffffff;
      --input-bg: #121212;
      --input-border: #222222;
      --btn-bg: #ffffff;
      --btn-hover: #151515;
      --glow-color: rgba(255, 255, 255, 0.05);
    }

    body.theme-slate {
      --bg: #0e0f11;
      --text-primary: #c9d1d9;
      --text-muted: #5a6470;
      --purple: #6ea8d6;
      --input-bg: #161b22;
      --input-border: #21262d;
      --btn-bg: #6ea8d6;
      --btn-hover: #5592c0;
      --glow-color: rgba(110,168,214,0.05);
    }

    body.theme-aether {
      --bg: #07090d;
      --text-primary: #e6edf3;
      --text-muted: #7d8794;
      --purple: #7c8cff;
      --input-bg: #0d1117;
      --input-border: #273142;
      --btn-bg: #7c8cff;
      --btn-hover: #6573dd;
      --glow-color: rgba(124,140,255,0.07);
    }

    body.theme-bloom {
      --bg: #121018;
      --text-primary: #f7e4e7;
      --text-muted: #a9919f;
      --purple: #faacbf;
      --input-bg: #1b1723;
      --input-border: #3d2d3a;
      --btn-bg: #e987ad;
      --btn-hover: #f6c3c1;
      --glow-color: rgba(250,172,191,0.08);
    }

    body.theme-cotton {
      --bg: #141724;
      --text-primary: #f7f8ff;
      --text-muted: #a9b0c2;
      --purple: #8ed9ff;
      --input-bg: #1d2435;
      --input-border: #4f6680;
      --btn-bg: #8ed9ff;
      --btn-hover: #ffd1ed;
      --glow-color: rgba(142,217,255,0.16);
      --theme-site-bg:
        radial-gradient(circle at 18% 18%, rgba(255, 209, 237, 0.20), transparent 25rem),
        radial-gradient(circle at 82% 12%, rgba(142, 217, 255, 0.27), transparent 28rem),
        radial-gradient(circle at 68% 78%, rgba(255, 255, 255, 0.10), transparent 30rem),
        linear-gradient(145deg, #10131f 0%, #1a2030 38%, #132737 72%, #211a2b 100%);
    }

    body.theme-nebula {
      --bg: #06020f;
      --text-primary: #f2efff;
      --text-muted: #8f86b0;
      --purple: #8f78ff;
      --input-bg: #0c0718;
      --input-border: #352071;
      --btn-bg: #8f78ff;
      --btn-hover: #b29cff;
      --glow-color: rgba(143,120,255,0.18);
      --theme-site-bg:
        radial-gradient(circle at 78% 12%, rgba(126, 87, 255, 0.26), transparent 26rem),
        radial-gradient(circle at 16% 72%, rgba(94, 38, 158, 0.26), transparent 28rem),
        linear-gradient(180deg, #03000a 0%, #09041a 48%, #120724 100%);
    }

    /* Keep Mocha as a named theme */
    body.theme-mocha {
      --bg: #1E1E2E;
      --text-primary: #CDD6F4;
      --text-muted: #6c7086;
      --purple: #CBA6F7;
      --input-bg: #181825;
      --input-border: #313244;
      --btn-bg: #CBA6F7;
      --btn-hover: #b48eed;
      --glow-color: rgba(203,166,247,0.06);
    }

    body.theme-noir {
      --bg: #0a0a0a;
      --text-primary: #f0ece4;
      --text-muted: #555550;
      --purple: #e8c97a;
      --input-bg: #111110;
      --input-border: #252420;
      --btn-bg: #e8c97a;
      --btn-hover: #d4b55c;
      --glow-color: rgba(232,201,122,0.05);
    }

    body.theme-rust {
      --bg: #1e2020;
      --text-primary: #f6eae0;
      --text-muted: #9f9690;
      --purple: #ce422b;
      --input-bg: #242727;
      --input-border: #3b3532;
      --btn-bg: #ce422b;
      --btn-hover: #e15c42;
      --glow-color: rgba(206,66,43,0.08);
    }

    body.theme-monokai {
      --bg: #272822;
      --text-primary: #f8f8f2;
      --text-muted: #75715e;
      --purple: #a6e22e;
      --input-bg: #1e1f1c;
      --input-border: #383830;
      --btn-bg: #a6e22e;
      --btn-hover: #8abf24;
      --glow-color: rgba(166,226,46,0.07);
    }


    html, body { height: 100%; overflow: hidden; }

    html {
      background: var(--theme-site-bg, var(--bg));
    }

    body {
      background: var(--theme-site-bg, var(--bg));
      background-attachment: fixed;
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      padding-bottom: 2rem; /* clear fixed footer */
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      color: inherit;
      background: var(--input-bg);
      border: 1px solid var(--input-border);
    }

    input,
    textarea,
    select {
      color: var(--text-primary);
      background: var(--input-bg);
      border: 1px solid var(--input-border);
    }