/* ===== UNIFIED STYLE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --surface: #111318;
  --surface-dim: #111318;
  --surface-bright: #37393e;
  --surface-container-lowest: #0c0e12;
  --surface-container-low: #1a1c20;
  --surface-container: #1e2024;
  --surface-container-high: #282a2e;
  --surface-container-highest: #333539;
  --on-surface: #e2e2e8;
  --on-surface-variant: #b9cacb;
  --primary: #dbfcff;
  --primary-container: #00f0ff;
  --on-primary-container: #006970;
  --secondary: #ecffe3;
  --secondary-container: #13ff43;
  --tertiary: #fff4e8;
  --error: #ffb4ab;
  --background: #111318;
  --glass-bg: rgba(30, 32, 36, 0.6);
}
html:not(.dark) {
  --surface: #f8fafc;
  --surface-dim: #f1f5f9;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f8fafc;
  --surface-container: #f1f5f9;
  --surface-container-high: #e2e8f0;
  --surface-container-highest: #cbd5e1;
  --on-surface: #0f172a;
  --on-surface-variant: #475569;
  --primary: #0284c7;
  --primary-container: #bae6fd;
  --on-primary-container: #00363a;
  --secondary: #16a34a;
  --secondary-container: #bbf7d0;
  --tertiary: #d97706;
  --error: #dc2626;
  --background: #f8fafc;
  --glass-bg: rgba(255, 255, 255, 0.7);
}

body {
  background-color: var(--background);
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

.glass-card, .glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.neon-text-glow {
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

.text-gradient {
  background: linear-gradient(135deg, #dbfcff 0%, #ecffe3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes pulse-neon {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 40px rgba(219, 252, 255, 0.6); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
}
.pulse-animation { animation: pulse-neon 3s infinite ease-in-out; }

/* Page sections */
.page-section { display: none; }
.page-section.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar active */
.nav-btn.active-nav { color: var(--primary) !important; background: rgba(0, 240, 255, 0.1) !important; }
.nav-btn.active-nav::after {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--primary);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 10px var(--primary);
}

/* Bottom nav active */
.bottom-nav-btn.active-nav { color: var(--primary) !important; }

/* Typing */
.char-correct { color: var(--tertiary); }
.char-incorrect { color: var(--error); text-decoration: underline; }
.char-pending { color: rgba(185, 202, 203, 0.3); }
.char-current { color: var(--primary); text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }

/* Speed gauge */
.speed-gauge { stroke-dasharray: 440; stroke-dashoffset: 440; transition: stroke-dashoffset 0.5s ease-in-out; }

/* Circular gauge for results */
.circular-gauge { background: conic-gradient(from 0deg, #00f0ff 82%, transparent 82%); position: relative; }
.circular-gauge::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #111318; }
@keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4)); } 50% { filter: drop-shadow(0 0 25px rgba(0, 240, 255, 0.7)); } }
.animate-glow { animation: pulse-glow 3s ease-in-out infinite; }

/* Leaderboard podium gradients */
.podium-1-bg { background: linear-gradient(180deg, #FFD700 0%, transparent 100%); opacity: 0.15; }
.podium-2-bg { background: linear-gradient(180deg, #C0C0C0 0%, transparent 100%); opacity: 0.1; }
.podium-3-bg { background: linear-gradient(180deg, #CD7F32 0%, transparent 100%); opacity: 0.1; }

/* Material icons */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(133, 147, 153, 0.2); border-radius: 10px; }