/* ── DARK THEME ── */
  :root, [data-theme="dark"] {
    --red:#D43F2E; --red-light:#FF5246; --red-glow:rgba(212,63,46,0.3);
    --blue:#2080CB; --blue-light:#4FA8E8; --blue-glow:rgba(32,128,203,0.3);
    --gold:#E0BC5C; --gold-light:#FFD478;
    --green:#2CB766; --green-light:#52E08A;
    --purple:#A557C7; --purple-light:#C580E0;
    --bg:#0D0D0F;
    --surface:#1A1A1F;
    --surface2:#252530;
    --border:rgba(255,255,255,0.12);
    --border-bright:rgba(255,255,255,0.25);
    --text:#F5F1E8;
    --text-muted:#B8B2A4;
    --text-dim:#7E7868;
    --shadow-color: rgba(0,0,0,0.6);
    --grid-line: rgba(255,255,255,0.08);
    --grid-text: rgba(255,255,255,0.5);
    --canvas-bg: #0D0D0F;
    --bg-radial-1: rgba(212,63,46,0.08);
    --bg-radial-2: rgba(32,128,203,0.06);
  }

  /* ── LIGHT THEME (improved contrast) ── */
  [data-theme="light"] {
    --red:#962818; --red-light:#B8321F; --red-glow:rgba(150,40,24,0.18);
    --blue:#0F4A77; --blue-light:#175C90; --blue-glow:rgba(15,74,119,0.15);
    --gold:#7A5E14; --gold-light:#8E6E18;
    --green:#0E5C32; --green-light:#127140;
    --purple:#4E2562; --purple-light:#5C2C73;
    --bg:#F8F4EA;
    --surface:#FFFFFF;
    --surface2:#EFE8D7;
    --border:rgba(20,15,5,0.18);
    --border-bright:rgba(20,15,5,0.35);
    --text:#0F0A04;
    --text-muted:#3A342A;
    --text-dim:#6B6557;
    --shadow-color: rgba(20,15,5,0.18);
    --grid-line: rgba(20,15,5,0.12);
    --grid-text: rgba(20,15,5,0.65);
    --canvas-bg: #FFFFFF;
    --bg-radial-1: rgba(150,40,24,0.05);
    --bg-radial-2: rgba(15,74,119,0.04);
  }

  /* ── HIGH CONTRAST THEME ── */
  [data-theme="contrast"] {
    --red:#FF4040; --red-light:#FF6060; --red-glow:rgba(255,64,64,0.4);
    --blue:#00BFFF; --blue-light:#33CFFF; --blue-glow:rgba(0,191,255,0.4);
    --gold:#FFE000; --gold-light:#FFEC33;
    --green:#00FF7F; --green-light:#33FF99;
    --purple:#FF66FF; --purple-light:#FF99FF;
    --bg:#000000;
    --surface:#0A0A0A;
    --surface2:#1A1A1A;
    --border:rgba(255,255,255,0.5);
    --border-bright:rgba(255,255,255,0.85);
    --text:#FFFFFF;
    --text-muted:#E0E0E0;
    --text-dim:#B0B0B0;
    --shadow-color: rgba(255,255,255,0.15);
    --grid-line: rgba(255,255,255,0.25);
    --grid-text: rgba(255,255,255,0.95);
    --canvas-bg: #000000;
    --bg-radial-1: rgba(255,64,64,0);
    --bg-radial-2: rgba(0,191,255,0);
  }

  html, body { height: 100%; }
  body {
    font-family:'Rajdhani',sans-serif; background:var(--bg); color:var(--text);
    display:flex; flex-direction:column; overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    padding-bottom: var(--safe-bottom);
    transition: background 0.3s, color 0.3s;
    font-weight: 400;
  }
  body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; transition: background 0.3s;
    background: radial-gradient(ellipse 80% 50% at 50% -10%, var(--bg-radial-1) 0%, transparent 60%),
                radial-gradient(ellipse 60% 40% at 20% 110%, var(--bg-radial-2) 0%, transparent 50%); }

  input, button, select { font-family: inherit; font-size: 16px; }
  button { cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; touch-action:manipulation; }