/* ================================================================
   TypeMaster PRO — Premium Styling
   ================================================================ */

/* ── CSS Variables ──────────────────────────────────────────────── */
:root {
  --bg:            #080b14;
  --bg2:           #0d1120;
  --glass:         rgba(255,255,255,0.045);
  --glass-border:  rgba(255,255,255,0.09);
  --glass-blur:    22px;

  --p:             #8b5cf6;   /* violet */
  --p2:            #6d28d9;
  --c:             #06b6d4;   /* cyan */
  --p-glow:        rgba(139,92,246,0.35);
  --c-glow:        rgba(6,182,212,0.25);

  --txt:           #f1f5f9;
  --txt2:          #94a3b8;
  --txt3:          #475569;

  --ok:            #34d399;
  --err:           #f87171;
  --warn:          #fbbf24;

  --r:             20px;
  --r2:            14px;
  --r3:            8px;

  --shadow:        0 8px 32px rgba(0,0,0,0.45);
  --t:             0.2s cubic-bezier(.4,0,.2,1);
  --ts:            0.4s cubic-bezier(.4,0,.2,1);
}

[data-theme="light"] {
  --bg:            #eef2ff;
  --bg2:           #e0e7ff;
  --glass:         rgba(255,255,255,0.65);
  --glass-border:  rgba(100,100,200,0.15);
  --txt:           #1e293b;
  --txt2:          #475569;
  --txt3:          #94a3b8;
  --shadow:        0 8px 32px rgba(0,0,0,0.12);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--txt);
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--ts),color var(--ts);
}

/* ── Aurora ─────────────────────────────────────────────────────── */
.aurora {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.28;
  animation:orbFloat ease-in-out infinite;
}
.orb1 {
  width:700px; height:700px;
  background:radial-gradient(circle,#7c3aed,transparent 65%);
  top:-200px; left:-150px;
  animation-duration:28s;
}
.orb2 {
  width:550px; height:550px;
  background:radial-gradient(circle,#06b6d4,transparent 65%);
  top:40%; right:-200px;
  animation-duration:22s; animation-delay:-8s;
}
.orb3 {
  width:450px; height:450px;
  background:radial-gradient(circle,#f59e0b,transparent 65%);
  bottom:-100px; left:35%;
  animation-duration:18s; animation-delay:-14s;
}
@keyframes orbFloat {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%    { transform:translate(40px,-60px) scale(1.08); }
  66%    { transform:translate(-30px,40px) scale(0.94); }
}
[data-theme="light"] .orb { opacity:0.14; }

/* ── Glass Panel ────────────────────────────────────────────────── */
.glass {
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}

/* ── Caps Lock ──────────────────────────────────────────────────── */
.caps-warning {
  position:fixed; top:72px; left:50%; transform:translateX(-50%);
  z-index:200; padding:.45rem 1.2rem;
  background:rgba(251,191,36,0.18); border:1px solid rgba(251,191,36,0.4);
  border-radius:50px; color:var(--warn); font-size:.8rem; font-weight:600;
  pointer-events:none; opacity:0; transition:opacity var(--t);
}
.caps-warning.show { opacity:1; }

/* ── Confetti ───────────────────────────────────────────────────── */
.confetti-canvas {
  position:fixed; inset:0; z-index:300; pointer-events:none;
  display:none;
}

/* ── Header ─────────────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:1.5rem; padding:.85rem 2rem;
  background:rgba(8,11,20,0.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
}
[data-theme="light"] .header { background:rgba(238,242,255,0.85); }

.logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.logo-icon {
  font-size:1.6rem;
  animation:keyPulse 3s ease-in-out infinite;
}
@keyframes keyPulse {
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.1) rotate(-3deg)}
}
.logo-name {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.25rem; font-weight:800;
  background:linear-gradient(135deg,var(--p),var(--c));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.logo-tag {
  font-size:.6rem; font-weight:700; letter-spacing:.12em;
  color:var(--p); opacity:.8;
}

.nav-tabs { display:flex; gap:.35rem; margin:0 auto; }
.nav-btn {
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem 1.1rem;
  border:1px solid var(--glass-border); border-radius:50px;
  background:transparent; color:var(--txt2);
  font-family:'Inter',sans-serif; font-size:.85rem; font-weight:500;
  cursor:pointer; transition:all var(--t);
}
.nav-btn:hover { border-color:var(--p); color:var(--txt); }
.nav-btn.active {
  background:linear-gradient(135deg,var(--p),var(--p2));
  border-color:transparent; color:#fff;
  box-shadow:0 0 20px var(--p-glow);
}

.header-tools { display:flex; gap:.5rem; }
.tool-btn {
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border); border-radius:10px;
  background:var(--glass); color:var(--txt2);
  font-size:1rem; cursor:pointer; transition:all var(--t);
}
.tool-btn:hover { border-color:var(--p); color:var(--txt); transform:scale(1.08); }
.tool-btn.on { border-color:var(--p); background:rgba(139,92,246,0.15); color:var(--p); }

/* ── Main ───────────────────────────────────────────────────────── */
.main {
  position:relative; z-index:1;
  max-width:1020px; margin:0 auto;
  padding:1.8rem 1.5rem 5rem;
}

.section { display:none; animation:fadeUp .35s ease; }
.section.active { display:block; }
@keyframes fadeUp {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ── Controls Bar ───────────────────────────────────────────────── */
.controls {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.8rem 1.2rem; margin-bottom:1.2rem;
}
.ctrl-group { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.ctrl-label {
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt3); white-space:nowrap;
}
.ctrl-divider { width:1px; height:24px; background:var(--glass-border); }
/* Lang cluster wraps on multiple lines */
.lang-cluster { flex-wrap:wrap; gap:.3rem; }

/* Word-mode badge */
.word-mode-badge {
  position:absolute; top:.6rem; right:.8rem;
  font-size:.68rem; font-weight:600; color:var(--p);
  background:rgba(139,92,246,.1); border:1px solid rgba(139,92,246,.25);
  border-radius:50px; padding:.2rem .6rem; z-index:5; pointer-events:none;
  opacity:.7;
}

/* Fetch loading spinner */
.fetch-loading {
  position:absolute; inset:0; border-radius:var(--r);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--glass); backdrop-filter:blur(8px); z-index:20;
}
.fetch-loading span {
  width:10px; height:10px; border-radius:50%;
  background:var(--p); opacity:.3;
  animation:dotBounce 1.2s ease-in-out infinite;
}
.fetch-loading span:nth-child(2) { animation-delay:.2s; }
.fetch-loading span:nth-child(3) { animation-delay:.4s; }
@keyframes dotBounce {
  0%,100%{ opacity:.15; transform:translateY(0);    }
  50%    { opacity:1;   transform:translateY(-6px); }
}
.fetch-loading em {
  font-style:normal; font-size:.82rem; color:var(--txt2);
  margin-left:.4rem;
}

/* Current word highlight (untyped chars of current word) */
.char.in-word { color:var(--txt2); }

/* Overshoot - typed past end of word */
.char.overshoot {
  color:var(--err) !important;
  text-decoration:underline wavy var(--err);
}
.btn-cluster { display:flex; gap:.3rem; flex-wrap:wrap; }

.chip {
  padding:.35rem .9rem;
  border:1px solid var(--glass-border); border-radius:50px;
  background:transparent; color:var(--txt2);
  font-family:'Inter',sans-serif; font-size:.82rem; cursor:pointer;
  transition:all var(--t);
}
.chip:hover { border-color:var(--c); color:var(--txt); }
.chip.active {
  background:linear-gradient(135deg,var(--p),var(--p2));
  border-color:transparent; color:#fff;
  box-shadow:0 0 12px var(--p-glow);
}

/* ── Live Stats ─────────────────────────────────────────────────── */
.live-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
  margin-bottom:.8rem;
}
.stat-card {
  position:relative; overflow:hidden;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r2); padding:1rem;
  text-align:center; transition:all var(--t);
}
.stat-card::after {
  content:''; position:absolute; top:0;left:0;right:0; height:2px;
  background:linear-gradient(90deg,var(--p),var(--c));
  opacity:0; transition:opacity var(--t);
}
.stat-card:hover::after { opacity:1; }

.stat-val {
  font-family:'Space Grotesk',sans-serif;
  font-size:2.1rem; font-weight:700;
  background:linear-gradient(135deg,var(--txt),var(--txt2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1;
}
.stat-lbl {
  font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt3); margin-top:.3rem;
}

/* Sparkline in WPM card */
.sparkline {
  position:absolute; top:6px; left:0; right:0; width:100%;
  opacity:.5; pointer-events:none;
}

/* Accuracy gauge arc */
.acc-gauge {
  position:absolute; top:4px; left:50%; transform:translateX(-50%);
  width:70px; opacity:.45; pointer-events:none;
}
.gauge-bg   { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:4; stroke-linecap:round; }
.gauge-fill { fill:none; stroke:var(--ok);  stroke-width:4; stroke-linecap:round; transition:stroke-dashoffset .4s; }

/* Timer ring */
.timer-card { overflow:visible; }
.timer-ring {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; pointer-events:none; opacity:.3;
}
.ring-bg { fill:none; stroke:rgba(255,255,255,0.07); stroke-width:2.5; }
.ring-fg {
  fill:none; stroke:var(--p); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:113; stroke-dashoffset:0;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset 1s linear, stroke .4s;
}

/* Error bar */
.err-val { color:var(--err) !important; -webkit-text-fill-color:var(--err) !important; }
.err-strip { height:3px; background:rgba(248,113,113,.12); border-radius:2px; margin-top:.5rem; overflow:hidden; }
.err-fill   { height:100%; background:var(--err); border-radius:2px; transition:width .3s; width:0%; }

/* ── Progress Bar ───────────────────────────────────────────────── */
.prog-track {
  position:relative; height:4px; border-radius:3px;
  background:rgba(255,255,255,0.06); margin-bottom:.9rem; overflow:visible;
}
.prog-fill {
  height:100%; border-radius:3px; width:0%;
  background:linear-gradient(90deg,var(--p),var(--c));
  transition:width .2s; box-shadow:0 0 8px var(--p-glow);
}
.prog-pct {
  position:absolute; right:0; top:-18px;
  font-size:.65rem; color:var(--txt3);
}

/* ── Typing Box ─────────────────────────────────────────────────── */
.typing-box {
  position:relative; cursor:text;
  padding:1.6rem 1.8rem;
  margin-bottom:1rem;
  min-height:160px;
  transition:border-color var(--t), box-shadow var(--t);
  overflow:hidden;
}
.typing-box.focused {
  border-color:rgba(139,92,246,0.4);
  box-shadow:0 0 30px rgba(139,92,246,0.12), var(--shadow);
}

.typing-scroll { height:135px; overflow:hidden; position:relative; z-index:1; }
.typing-words {
  font-family:'Fira Code',monospace;
  font-size:1.2rem; line-height:2.15;
  color:var(--txt3);
  word-break:break-word; word-spacing:.1em;
  position:relative;
  transition:transform .12s ease;
  will-change:transform; user-select:none;
}

.word { display:inline; }
.char { display:inline; transition:color .06s; }
.char.correct { color:var(--ok); }
.char.incorrect { color:var(--err); background:rgba(248,113,113,.12); border-radius:2px; }

/* Smooth caret */
.caret {
  position:absolute; width:2px;
  background:var(--p);
  border-radius:2px;
  pointer-events:none; z-index:10;
  box-shadow:0 0 8px var(--p), 0 0 18px rgba(139,92,246,.5);
  transition:left .05s ease, top .1s ease;
  animation:caretBlink 1s step-end infinite;
}
@keyframes caretBlink {
  0%,100%{ opacity:1; } 50%{ opacity:0; }
}
.typing-box.focused .caret { animation:caretBlink 1s step-end infinite; }
.typing-box.focused .caret.typing { animation:none; opacity:1; }

/* Active character styling (the one currently being typed) */
.char.active-char {
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 0 12px var(--p);
  border-bottom: 2px solid var(--p);
}

/* Current word highlighted - much brighter than unvisited text */
.char.in-word {
  color: var(--txt) !important;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Glass-styled Dropdown select element */
.glass-select {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r3);
  color: var(--txt);
  padding: 0.35rem 1.6rem 0.35rem 0.65rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  transition: all var(--t);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 0.85rem;
}
.glass-select:hover, .glass-select:focus {
  border-color: var(--p);
  box-shadow: 0 0 10px var(--p-glow);
}
.glass-select option {
  background: var(--bg2);
  color: var(--txt);
}
[data-theme="light"] .glass-select option {
  background: #ffffff;
  color: #000000;
}

/* Spotify Widget Styling */
.spotify-panel {
  max-width: 1020px;
  margin: 0 auto 1rem;
  padding: 0.8rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  animation: slideDown 0.3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--txt2);
}
.panel-close {
  background: transparent;
  border: none;
  color: var(--txt3);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color var(--t);
}
.panel-close:hover {
  color: var(--err);
}
.panel-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.music-select {
  min-width: 200px;
}
.spotify-iframe-container {
  flex: 1;
  min-width: 280px;
}
.spotify-iframe-container iframe {
  border-radius: 8px;
}


/* Ghost input */
.ghost-input {
  position:absolute; opacity:0;
  width:1px; height:1px; top:0; left:0;
  resize:none; border:none; outline:none; pointer-events:auto;
  font-size:16px; /* prevent iOS zoom */
}

/* Start overlay */
.start-overlay {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  padding:.8rem;
  background:linear-gradient(to top, rgba(8,11,20,0.9) 0%, rgba(8,11,20,0.3) 60%, transparent 100%);
  border-radius:0 0 var(--r) var(--r);
  font-size:.82rem; color:var(--txt2);
  transition:opacity var(--t); z-index:5;
}
[data-theme="light"] .start-overlay { background:linear-gradient(to top, rgba(238,242,255,0.9) 0%, rgba(238,242,255,0.3) 60%, transparent 100%); }
.start-overlay kbd {
  padding:.1rem .38rem;
  background:var(--bg2); border:1px solid var(--glass-border);
  border-radius:4px; font-size:.76rem;
}
.start-overlay.hidden { opacity:0; pointer-events:none; }

/* ── Buttons ────────────────────────────────────────────────────── */
.actions { display:flex; gap:.8rem; justify-content:center; margin:.8rem 0; }

.btn-primary {
  padding:.65rem 1.8rem; border-radius:50px; border:none;
  background:linear-gradient(135deg,var(--p),var(--p2));
  color:#fff; font-family:'Inter',sans-serif; font-size:.9rem; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:0 4px 16px var(--p-glow);
  transition:all var(--t);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--p-glow); }
.btn-primary:active { transform:translateY(0); }

.btn-ghost {
  padding:.65rem 1.5rem; border-radius:50px;
  border:1px solid var(--glass-border); background:var(--glass);
  color:var(--txt2); font-family:'Inter',sans-serif; font-size:.9rem; font-weight:500;
  cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  transition:all var(--t);
}
.btn-ghost:hover { border-color:var(--c); color:var(--txt); transform:translateY(-2px); }

.btn-danger {
  padding:.45rem 1rem; border-radius:50px;
  border:1px solid rgba(248,113,113,.3); background:rgba(248,113,113,.08);
  color:var(--err); font-family:'Inter',sans-serif; font-size:.82rem; cursor:pointer;
  transition:all var(--t);
}
.btn-danger:hover { background:rgba(248,113,113,.15); }

/* ── Result Panel ───────────────────────────────────────────────── */
.result {
  padding:2rem;
  animation:slideUp .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUp {
  from{ opacity:0; transform:translateY(30px); }
  to  { opacity:1; transform:none; }
}

.result-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem;
}
.result-title {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.5rem; font-weight:700;
}
.result-msg { font-size:.9rem; color:var(--txt2); margin-top:.2rem; }

.grade-badge {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:1.4rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--p),var(--c));
  box-shadow:0 0 25px var(--p-glow), 0 0 50px rgba(6,182,212,.2);
  animation:gradePop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gradePop {
  from{ transform:scale(0) rotate(-20deg); }
  to  { transform:scale(1) rotate(0); }
}

.result-body {
  display:flex; gap:1.5rem; align-items:center; margin-bottom:1.5rem;
}
.result-big { text-align:center; min-width:100px; }
.big-val {
  font-family:'Space Grotesk',sans-serif; font-size:3.5rem; font-weight:800;
  background:linear-gradient(135deg,var(--p),var(--c));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1;
}
.big-lbl { font-size:.75rem; font-weight:600; color:var(--txt3); letter-spacing:.1em; text-transform:uppercase; margin-top:.3rem; }
.result-chart { flex:1; height:100px; }

.result-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;
  margin-bottom:1.5rem;
}
.ritem {
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  border-radius:var(--r3); padding:.9rem; text-align:center;
}
.ritem.accent { border-color:rgba(139,92,246,.3); background:rgba(139,92,246,.06); }
.rval { font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; color:var(--p); }
.rlbl { font-size:.68rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.08em; margin-top:.2rem; }

/* ═══ PRACTICE MODE ══════════════════════════════════════════════ */
.practice-layout {
  display:grid; grid-template-columns:260px 1fr; gap:1.2rem; align-items:start;
}
.prac-left { display:flex; flex-direction:column; gap:.9rem; }

.target-card {
  padding:2rem 1rem; text-align:center;
}
.target-char {
  font-family:'Space Grotesk',sans-serif;
  font-size:5.5rem; font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--p),var(--c));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:charPop .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes charPop {
  from{ transform:scale(.6); opacity:0; }
  to  { transform:scale(1);  opacity:1; }
}
.target-hint { font-size:.88rem; color:var(--txt2); margin:.5rem 0 .3rem; }
.target-finger { font-size:.82rem; color:var(--txt3); }

.prac-stats { padding:1.2rem; }
.streak-row {
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.streak-icon { font-size:1.2rem; }
.streak-bar {
  flex:1; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden;
}
.streak-fill {
  height:100%;
  background:linear-gradient(90deg,#f59e0b,#ef4444);
  border-radius:3px; transition:width .3s;
}
.streak-num {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.2rem; font-weight:700; color:var(--warn); min-width:28px; text-align:right;
}
.pstat-row { display:flex; gap:1rem; justify-content:space-around; }
.pstat { text-align:center; }
.pv { display:block; font-family:'Space Grotesk',sans-serif; font-size:1.4rem; font-weight:700; color:var(--p); }
.pl { font-size:.65rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.08em; }

.prac-right { display:flex; flex-direction:column; gap:.9rem; }

/* Keyboard */
.keyboard-wrap { padding:1.2rem; overflow-x:auto; }
.kb-rows { display:flex; flex-direction:column; gap:.4rem; align-items:center; }
.kb-row  { display:flex; gap:.35rem; }

.key {
  min-width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.1);
  border-bottom:3px solid transparent;
  border-radius:7px;
  font-family:'Fira Code',monospace; font-size:.78rem; font-weight:600;
  color:var(--txt3); cursor:default; user-select:none;
  transition:all .12s; padding:0 .4rem;
  background:var(--glass);
  --kc: rgba(255,255,255,0.12);
  border-bottom-color: var(--kc);
}
.key.w2 { min-width:65px; }
.key.w3 { min-width:88px; }
.key.spc { min-width:280px; }

/* Finger zone colors */
.key[data-f="lp"] { --kc:#9333ea44; color:#c084fc; }
.key[data-f="lr"] { --kc:#3b82f644; color:#93c5fd; }
.key[data-f="lm"] { --kc:#06b6d444; color:#67e8f9; }
.key[data-f="li"] { --kc:#10b98144; color:#6ee7b7; }
.key[data-f="tb"] { --kc:#6b728044; color:#9ca3af; }
.key[data-f="ri"] { --kc:#d9770644; color:#fcd34d; }
.key[data-f="rm"] { --kc:#ea580c44; color:#fdba74; }
.key[data-f="rr"] { --kc:#dc262644; color:#fca5a5; }
.key[data-f="rp"] { --kc:#db277744; color:#f9a8d4; }

.key.target-key {
  background:var(--p) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 0 20px var(--p-glow), 0 0 40px rgba(139,92,246,.3);
  animation:targetPulse .8s ease-in-out infinite;
}
@keyframes targetPulse {
  0%,100%{ box-shadow:0 0 20px var(--p-glow); }
  50%    { box-shadow:0 0 35px var(--p-glow), 0 0 60px rgba(139,92,246,.4); }
}
.key.hit-ok  { background:var(--ok) !important;  color:#fff !important; border-color:transparent !important; transform:translateY(2px); }
.key.hit-err { background:var(--err) !important; color:#fff !important; border-color:transparent !important; transform:translateY(2px); }

.pmode-btns { display:flex; gap:.4rem; flex-wrap:wrap; }

/* ═══ STATS MODE ═════════════════════════════════════════════════ */
.stats-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.5rem;
}
.stats-hdr h2 {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.6rem; font-weight:700;
}

.ov-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-bottom:1.2rem; }
.ov-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r2); padding:1.2rem; text-align:center;
  transition:all var(--t);
}
.ov-card:hover { transform:translateY(-4px); }
.ov-ico { font-size:1.6rem; margin-bottom:.4rem; }
.ov-v {
  font-family:'Space Grotesk',sans-serif;
  font-size:1.9rem; font-weight:700; margin-bottom:.2rem;
}
.ov-l { font-size:.68rem; color:var(--txt3); text-transform:uppercase; letter-spacing:.08em; }

.ov-gold   { border-color:rgba(251,191,36,.25); }  .ov-gold .ov-v  { color:#fbbf24; }
.ov-blue   { border-color:rgba(59,130,246,.25); }   .ov-blue .ov-v  { color:#60a5fa; }
.ov-green  { border-color:rgba(52,211,153,.25); }   .ov-green .ov-v { color:var(--ok); }
.ov-purple { border-color:rgba(139,92,246,.25); }   .ov-purple .ov-v{ color:var(--p); }
.ov-cyan   { border-color:rgba(6,182,212,.25); }    .ov-cyan .ov-v  { color:var(--c); }
.ov-orange { border-color:rgba(245,158,11,.25); }   .ov-orange .ov-v{ color:#f97316; }

.chart-box { padding:1.5rem; margin-bottom:1.2rem; }
.chart-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.chart-title { font-size:.9rem; font-weight:600; color:var(--txt2); }
.chart-legend { display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--txt2); }
.leg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
#wpmChart { width:100%; }
.chart-empty { text-align:center; color:var(--txt3); padding:2rem; font-size:.88rem; }

.hist-hdr { font-size:.9rem; font-weight:600; color:var(--txt2); margin-bottom:.7rem; }
.hist-list { display:flex; flex-direction:column; gap:.5rem; }
.hist-item {
  display:grid; grid-template-columns:28px 1fr 80px 80px 80px auto;
  gap:.8rem; align-items:center;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--r3); padding:.7rem 1.1rem;
  transition:all var(--t);
}
.hist-item:hover { border-color:var(--p); }
.hist-rank {
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); font-size:.72rem; font-weight:700; color:var(--txt3);
}
.hist-wpm  { font-family:'Space Grotesk',sans-serif; font-size:1.05rem; font-weight:700; color:var(--p); }
.hist-sub  { font-size:.75rem; color:var(--txt3); }
.hist-empty { text-align:center; color:var(--txt3); padding:2rem; font-size:.88rem; }

/* ── Shortcut bar ───────────────────────────────────────────────── */
.shortcut-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  display:flex; justify-content:center; gap:2rem;
  padding:.5rem; font-size:.78rem; color:var(--txt3);
  background:rgba(8,11,20,0.88);
  backdrop-filter:blur(12px); border-top:1px solid var(--glass-border);
}
[data-theme="light"] .shortcut-bar { background:rgba(238,242,255,0.9); }

kbd {
  padding:.1rem .4rem; background:rgba(255,255,255,.07);
  border:1px solid var(--glass-border); border-radius:4px;
  font-size:.72rem; font-family:'Fira Code',monospace;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-backdrop {
  position:fixed; inset:0; z-index:400;
  background:rgba(0,0,0,.6); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  animation:fadeIn .2s;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  width:min(520px,94vw); padding:1.8rem;
  animation:slideUp .3s cubic-bezier(.34,1.2,.64,1);
}
.modal-hdr {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1rem; font-size:1rem; font-weight:600;
}
.modal-x {
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--glass-border); background:transparent;
  color:var(--txt2); cursor:pointer; font-size:.9rem; transition:all var(--t);
}
.modal-x:hover { background:rgba(248,113,113,.15); color:var(--err); border-color:var(--err); }
.modal-ta {
  width:100%; resize:vertical; min-height:120px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  border-radius:var(--r3); padding:.8rem 1rem;
  color:var(--txt); font-family:'Fira Code',monospace; font-size:.9rem;
  outline:none; transition:border-color var(--t);
}
.modal-ta:focus { border-color:var(--p); }
.modal-ftr {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:.8rem;
}
.modal-count { font-size:.8rem; color:var(--txt3); }

/* ── Focus Mode ─────────────────────────────────────────────────── */
body.focus-mode .header,
body.focus-mode #controlsBar,
body.focus-mode .shortcut-bar {
  opacity:.12; pointer-events:none; transition:opacity var(--ts);
}
body.focus-mode .live-stats,
body.focus-mode .actions,
body.focus-mode .prog-track {
  opacity:.3; transition:opacity var(--ts);
}
body.focus-mode .typing-box { opacity:1; }
body.focus-mode:hover .header,
body.focus-mode:hover #controlsBar,
body.focus-mode:hover .live-stats,
body.focus-mode:hover .actions,
body.focus-mode:hover .prog-track,
body.focus-mode:hover .shortcut-bar {
  opacity:1; pointer-events:auto;
}

/* ── Animations / Utilities ─────────────────────────────────────── */
.shake { animation:shake .3s ease; }
@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  60%{transform:translateX(7px)}
}
.pop { animation:pop .18s ease; }
@keyframes pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

/* ── Responsive ─────────────────────────────────────────────────── */
@media(max-width:800px){
  .live-stats { grid-template-columns:repeat(2,1fr); }
  .practice-layout { grid-template-columns:1fr; }
  .ov-grid { grid-template-columns:repeat(2,1fr); }
  .result-grid { grid-template-columns:repeat(2,1fr); }
  .result-body { flex-direction:column; }
}
@media(max-width:540px){
  .header { padding:.7rem 1rem; gap:.8rem; }
  .nav-btn { padding:.35rem .7rem; font-size:.78rem; }
  .logo-name { font-size:1rem; }
  .live-stats { gap:.6rem; }
  .stat-val { font-size:1.6rem; }
  .key { min-width:32px; height:36px; font-size:.68rem; }
  .key.spc { min-width:200px; }
  .hist-item { grid-template-columns:24px 1fr 64px 64px; }
  .hist-item > *:last-child { display:none; }
}