/* Keyboard colours, 3D key effects and the Navy-Blue dark palette (light palette is in base.css) */
:root {
  --kbn: #ffffff;
  --kbb: #cbd5e1;
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --card: #111c33;
  --ink: #e8eefc;
  --mute: #9fb0d0;
  --line: #243553;
  --mint: rgba(59, 130, 246, 0.18);
  --peach: rgba(14, 165, 233, 0.16);
  --sky: rgba(99, 102, 241, 0.20);
  --lilac: rgba(255, 255, 255, 0.07);
  --ok: #34d399;
  --bad: #f87171;
  --badbg: rgba(248, 113, 113, 0.2);

  --accent: #3b82f6;
  --accent2: #60a5fa;
  --ring: rgba(96, 165, 250, 0.35);
  --glow: rgba(96, 165, 250, 0.6);

  --glass: rgba(17, 28, 51, 0.92);
  --glassb: rgba(255, 255, 255, 0.10);
  --field: #0d1830;
  --fieldb: #2f4470;
  --panel: #0a1326;
  --subtle: rgba(255, 255, 255, 0.05);
  --shadow: rgba(0, 0, 0, 0.45);
  --overlay: rgba(3, 8, 20, 0.72);
  --popup: rgba(17, 28, 51, 0.96);

  --btn-bg: #1b2a4a;
  --btn-bd: #2f4470;
  --btn-hover: #243a63;
  --ripple: rgba(255, 255, 255, 0.3);

  --cur: rgba(96, 165, 250, 0.30);
  --curline: #60a5fa;
  --pillfg: #93c5fd;
  --topfg: #bfdbfe;
  --statb: rgba(96, 165, 250, 0.35);
  --h1glow: 0 2px 18px rgba(96, 165, 250, 0.45);

  --kbn: #1a2a48;
  --kbb: #0b1220;
}

/* --- Dark Mode background --- */
[data-theme="dark"] body {
  background-color: #0b1220;
  background-image:
    radial-gradient(900px 520px at 8% -8%, rgba(59, 130, 246, 0.16) 0%, transparent 62%),
    radial-gradient(820px 520px at 100% 108%, rgba(14, 165, 233, 0.12) 0%, transparent 62%),
    linear-gradient(rgba(96, 165, 250, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, 0.04) 1px, transparent 1px);
  background-size: auto, auto, 32px 32px, 32px 32px;
  background-attachment: fixed;
}
[data-theme="dark"] button.lang.on { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; border-color: #60a5fa; }

#hs { height: clamp(110px, 22vh, 210px) !important; }

/* --- 3D Keyboard Base Design --- */
.kb .k {
  background: var(--kbn);
  border: 1px solid var(--kbb);
  box-shadow: 0 4px 0 var(--kbb), 0 5px 5px rgba(0,0,0,0.03);
  color: var(--ink);
  transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.1s ease;
}
.kb .k.hit {
  transform: translateY(4px);
  box-shadow: 0 0 0 transparent !important;
}
.kb .k.next { outline: none; }
.kb .k.next .s, .kb .k.next .e { color: inherit; }

/* --- Light Theme: Next Key Pastel Highlights --- */
:root:not([data-theme="dark"]) .kb .k.next.f0 { background: #fee2e2; border-color: #fca5a5; box-shadow: 0 4px 0 #fca5a5; color: #7f1d1d; }
:root:not([data-theme="dark"]) .kb .k.next.f1 { background: #ffedd5; border-color: #fdba74; box-shadow: 0 4px 0 #fdba74; color: #7c2d12; }
:root:not([data-theme="dark"]) .kb .k.next.f2 { background: #fef9c3; border-color: #fde047; box-shadow: 0 4px 0 #fde047; color: #713f12; }
:root:not([data-theme="dark"]) .kb .k.next.f3 { background: #dcfce7; border-color: #86efac; box-shadow: 0 4px 0 #86efac; color: #14532d; }
:root:not([data-theme="dark"]) .kb .k.next.f4 { background: #e0f2fe; border-color: #7dd3fc; box-shadow: 0 4px 0 #7dd3fc; color: #0c4a6e; }
:root:not([data-theme="dark"]) .kb .k.next.f5 { background: #f3e8ff; border-color: #d8b4fe; box-shadow: 0 4px 0 #d8b4fe; color: #4c1d95; }
:root:not([data-theme="dark"]) .kb .k.next.f6 { background: #fae8ff; border-color: #f0abfc; box-shadow: 0 4px 0 #f0abfc; color: #701a75; }
:root:not([data-theme="dark"]) .kb .k.next.f7 { background: #ecfccb; border-color: #bef264; box-shadow: 0 4px 0 #bef264; color: #3f6212; }
:root:not([data-theme="dark"]) .kb .k.next.f8 { background: #f1f5f9; border-color: #cbd5e1; box-shadow: 0 4px 0 #cbd5e1; color: #0f172a; }

/* --- Dark Theme: Next Key Neon Highlights --- */
[data-theme="dark"] .kb .k.next.f0 { background: rgba(239, 68, 68, 0.2); border-color: #ef4444; box-shadow: 0 4px 0 #ef4444; color: #fca5a5; }
[data-theme="dark"] .kb .k.next.f1 { background: rgba(249, 115, 22, 0.2); border-color: #f97316; box-shadow: 0 4px 0 #f97316; color: #fdba74; }
[data-theme="dark"] .kb .k.next.f2 { background: rgba(234, 179, 8, 0.2); border-color: #eab308; box-shadow: 0 4px 0 #eab308; color: #fde047; }
[data-theme="dark"] .kb .k.next.f3 { background: rgba(34, 197, 94, 0.2); border-color: #22c55e; box-shadow: 0 4px 0 #22c55e; color: #86efac; }
[data-theme="dark"] .kb .k.next.f4 { background: rgba(59, 130, 246, 0.2); border-color: #3b82f6; box-shadow: 0 4px 0 #3b82f6; color: #93c5fd; }
[data-theme="dark"] .kb .k.next.f5 { background: rgba(168, 85, 247, 0.2); border-color: #a855f7; box-shadow: 0 4px 0 #a855f7; color: #d8b4fe; }
[data-theme="dark"] .kb .k.next.f6 { background: rgba(236, 72, 153, 0.2); border-color: #ec4899; box-shadow: 0 4px 0 #ec4899; color: #f9a8d4; }
[data-theme="dark"] .kb .k.next.f7 { background: rgba(132, 204, 22, 0.2); border-color: #84cc16; box-shadow: 0 4px 0 #84cc16; color: #bef264; }
[data-theme="dark"] .kb .k.next.f8 { background: rgba(100, 116, 139, 0.2); border-color: #64748b; box-shadow: 0 4px 0 #64748b; color: #cbd5e1; }