/* ============================================================
   style.css — TypeFree Stylesheet
   Full visual styling for the TypeFree typing app.
   Covers: CSS custom properties (design tokens), layout,
   header, stats bar, mode tabs, typing area, word display,
   caret glow, hint overlay, bottom bar, WPM graph section,
   results overlay, whitelist panel, settings drawer,
   theme preset grid, color inputs, font controls, sound
   controls, toggle switches, and responsive breakpoints.
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES (Design Tokens) ─── */
:root {
  --bg:        #0e0e10;   /* page background */
  --surface:   #16161a;   /* card / input surfaces */
  --border:    #252530;   /* subtle borders */
  --muted:     #3a3a4a;   /* muted UI elements */
  --sub:       #5a5a72;   /* subdued text / labels */
  --text:      #cccce0;   /* primary body text */
  --bright:    #eeeef8;   /* high-contrast text */
  --accent:    #F76F8E;   /* primary accent (pink) */
  --accent2:   #e05070;   /* darker accent variant */
  --error:     #f43f5e;   /* invalid / error state */
  --ok:        #34d399;   /* valid / success state */
  --caret:     #F76F8E;   /* textarea caret color */
  --mono:      'JetBrains Mono', monospace;  /* monospace font stack */
  --sans:      'Syne', sans-serif;           /* sans-serif display font */
}

/* ─── GLOBAL RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

/* ─── BODY ─── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* ─── NOISE OVERLAY ─── */
/* Subtle grain texture layered over the background via SVG feTurbulence */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
}

/* ─── HEADER ─── */
header {
  position: relative; z-index: 10;
  width: 100%; max-width: 900px;
  padding: 28px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── LOGO ─── */
.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--bright);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Pulsing dot beside the logo wordmark */
.logo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Pulse keyframes for the logo dot */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}

/* ─── NAV ─── */
nav {
  display: flex;
  gap: 4px;
}

nav button {
  background: none;
  border: none;
  color: var(--sub);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  letter-spacing: 0.04em;
}

nav button:hover, nav button.active {
  color: var(--text);
  background: var(--surface);
}

/* ─── MAIN WRAPPER ─── */
main {
  position: relative; z-index: 10;
  width: 100%; max-width: 900px;
  padding: 0 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 60px;
  padding-bottom: 80px;
}

/* ─── STATS BAR ─── */
/* Live WPM, accuracy, time, and word count indicators above the typing area */
.stats-bar {
  display: flex;
  gap: 32px;
  margin-bottom: 36px;
  height: 52px;
  align-items: flex-end;
}

/* Individual stat block — starts hidden, revealed via JS on session start */
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}

.stat.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-label {
  font-size: 0.65rem;
  color: var(--sub);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums; /* prevent layout shift on number updates */
  transition: color 0.3s;
}

/* Semantic color modifiers for stat values */
.stat-value.neutral { color: var(--text); }
.stat-value.good    { color: var(--ok); }
.stat-value.bad     { color: var(--error); }

/* ─── MODE TABS ─── */
/* Timer mode selector: ∞ free / 30s / 60s / 120s */
.mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  margin-left: 2px;
}

.mode-tab {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.06em;
}

.mode-tab:hover { color: var(--sub); }
.mode-tab.active {
  color: var(--accent);
  background: rgba(247,111,142,0.08);
}

/* ─── TYPING AREA WRAPPER ─── */
.typing-wrapper {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* Glow border on focus */
.typing-wrapper:focus-within {
  border-color: rgba(247,111,142,0.25);
  box-shadow: 0 0 0 1px rgba(247,111,142,0.08), 0 8px 40px rgba(0,0,0,0.3);
}

.typing-inner {
  position: relative;
  min-height: 180px;
  padding: 28px 32px;
}

/* ─── WORD DISPLAY OVERLAY ─── */
/* Rendered word-by-word color highlighting; sits on top of the invisible textarea */
.word-display {
  font-size: 1.35rem;
  line-height: 2;
  font-weight: 400;
  color: var(--sub);
  letter-spacing: 0.01em;
  pointer-events: none; /* let clicks pass through to textarea */
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 3em;
}

/* Word state classes applied dynamically by JS */
.word-display .word {
  display: inline;
  transition: color 0.15s;
}

.word-display .word.valid   { color: var(--text); }                                           /* confirmed valid English word */
.word-display .word.invalid { color: var(--error); text-decoration: underline;
                               text-decoration-color: rgba(244,63,94,0.4); }                   /* not in dictionary */
.word-display .word.current { color: var(--bright); }                                         /* word currently being typed */

/* ─── TEXTAREA (invisible input layer) ─── */
/* The actual input element is transparent; the word display renders the visual text */
#typeInput {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 28px 32px;
  font-size: 1.35rem;
  line-height: 2;
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.01em;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: transparent;        /* text invisible; display handled by .word-display */
  caret-color: var(--caret); /* only the caret is visible */
  z-index: 2;
  word-break: break-word;
  overflow: hidden;
}

#typeInput::selection { background: rgba(247,111,142,0.15); }

/* ─── CARET GLOW ─── */
#typeInput:focus { caret-color: var(--caret); }

/* Custom glowing caret element (positioned by JS) */
.caret-glow {
  position: absolute;
  width: 2px;
  background: var(--caret);
  border-radius: 2px;
  box-shadow: 0 0 6px var(--caret), 0 0 12px rgba(247,111,142,0.3);
  pointer-events: none;
  animation: blink 1.1s step-end infinite;
  z-index: 3;
  transition: top 0.06s, left 0.06s;
}

/* Blinking animation for the caret */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── HINT (start typing prompt) ─── */
/* Centered placeholder shown before the first keystroke */
.hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s;
}

.hint-text {
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-style: italic;
}

.hint.hidden { opacity: 0; }

/* ─── BOTTOM BAR ─── */
/* Shows valid/invalid/char counts and session action buttons */
.bottom-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.meta-info {
  display: flex;
  gap: 20px;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.meta-info span { display: flex; align-items: center; gap: 6px; }
.meta-info strong { color: var(--sub); font-weight: 400; }

.actions {
  display: flex;
  gap: 8px;
}

/* ─── BUTTONS ─── */
.btn {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 7px;
}

/* Ghost (secondary) button */
.btn-ghost {
  background: none;
  color: var(--sub);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--muted);
  background: rgba(255,255,255,0.03);
}

/* Primary (accent-filled) button */
.btn-primary {
  background: var(--accent);
  color: #0e0e10;
  border-color: var(--accent);
  font-weight: 500;
}

.btn-primary:hover {
  background: #e85878;
  box-shadow: 0 0 16px rgba(247,111,142,0.3);
}

/* ─── WPM GRAPH SECTION ─── */
/* Animated fade-in after session ends */
.graph-section {
  margin-top: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}

.graph-section.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.graph-title {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sub);
}

/* Canvas element for the WPM-over-time line chart */
#wpmCanvas {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  display: block;
}

/* ─── RESULTS OVERLAY ─── */
/* Full-screen modal shown after a timed session completes */
.results-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14,14,16,0.92);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.results-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* Card inside the results overlay */
.results-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 48px 60px;
  width: min(560px, 90vw);
  text-align: center;
  transform: scale(0.94) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); /* spring pop */
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.results-overlay.show .results-card {
  transform: scale(1) translateY(0);
}

.results-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 32px;
}

/* 3-column grid of final session stats */
.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.result-item {}

.result-label {
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 4px;
}

.result-val {
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-unit {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Semantic color overrides for result values */
.result-val.ok  { color: var(--ok); }
.result-val.err { color: var(--error); }

.results-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ─── WHITELIST PANEL ─── */
/* Collapsible panel below the typing area for custom word entries */
.whitelist-panel {
  margin-top: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.3s;
}

.whitelist-panel.open {
  max-height: 200px;
  border-color: var(--muted);
}

.whitelist-inner {
  padding: 16px 20px;
}

.whitelist-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 10px;
}

.whitelist-input-row {
  display: flex;
  gap: 8px;
}

/* Text field for entering custom whitelist words */
#whitelistInput {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

#whitelistInput:focus { border-color: var(--muted); }

/* Tag container for whitelisted words */
.whitelist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Individual whitelist tag pill */
.tag {
  background: rgba(247,111,142,0.1);
  color: var(--accent);
  border: 1px solid rgba(247,111,142,0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  display: flex; align-items: center; gap: 5px;
  cursor: default;
}

/* × remove button inside each tag */
.tag-remove {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  font-style: normal;
  line-height: 1;
  font-size: 0.9rem;
}

.tag-remove:hover { opacity: 1; }

/* ─── FOOTER ─── */
footer {
  position: relative; z-index: 10;
  padding: 20px 32px;
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ─── ELITE SETTINGS NAV BUTTON ─── */
/* Special styling for the ⚙ elite nav button in the header */
#settingsNavBtn {
  color: var(--accent) !important;
  border: 1px solid rgba(247,111,142,0.25);
  border-radius: 6px;
  transition: background 0.2s, box-shadow 0.2s !important;
}
#settingsNavBtn:hover {
  background: rgba(247,111,142,0.08) !important;
  box-shadow: 0 0 12px rgba(247,111,142,0.15);
}

/* ─── SETTINGS BACKDROP (unused / reserved) ─── */
.settings-backdrop { display: none; }

/* ─── SETTINGS FULLSCREEN DRAWER ─── */
/* Covers entire viewport when Elite Settings are open */
.settings-drawer {
  position: fixed;
  inset: 0;
  z-index: 201;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.settings-drawer.open {
  opacity: 1;
  pointer-events: auto;
}

/* Settings drawer top header bar */
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.settings-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bright);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.settings-crown { color: var(--accent); font-size: 0.9rem; } /* ✦ decorative icon */
.settings-close {
  background: none; border: 1px solid var(--border);
  color: var(--sub); font-size: 0.85rem;
  cursor: pointer; padding: 7px 16px;
  border-radius: 8px;
  font-family: var(--mono);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  letter-spacing: 0.04em;
}
.settings-close:hover { color: var(--text); background: var(--surface); border-color: var(--muted); }

/* ─── SETTINGS LAYOUT: side tabs + content area ─── */
.settings-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* Left vertical tab navigation */
.settings-tabs {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-tab {
  background: none; border: none;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--sub);
  padding: 10px 24px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 0.2s, background 0.2s;
  border-left: 2px solid transparent; /* active indicator line */
  position: relative;
}
.settings-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.settings-tab.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(247,111,142,0.06);
}
.settings-tab-icon { margin-right: 8px; opacity: 0.7; }

/* Right scrollable content pane */
.settings-content {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px 60px;
}
.settings-content::-webkit-scrollbar { width: 3px; }
.settings-content::-webkit-scrollbar-thumb { background: var(--border); }

/* Individual tab content panels — only active is shown */
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* Section grouping within a panel */
.settings-section {
  margin-bottom: 40px;
}
.settings-section-title {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.settings-grid { display: flex; flex-direction: column; gap: 14px; }

/* Row layout for a label + control pair */
.setting-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.setting-row label {
  font-size: 0.8rem;
  color: var(--text);
  flex-shrink: 0;
  min-width: 110px;
}
.label-hint { color: var(--sub); font-size: 0.7rem; } /* secondary description text */

/* ─── COLOR PICKER INPUTS ─── */
.color-input-wrap {
  display: flex; align-items: center; gap: 8px;
}
.color-input-wrap input[type="color"] {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  padding: 3px;
  cursor: pointer;
  background: var(--surface);
  flex-shrink: 0;
}
.color-input-wrap input[type="text"] {
  width: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.color-input-wrap input[type="text"]:focus { border-color: var(--accent); }

/* Two-column grid layout for the custom colors panel */
.color-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

/* ─── THEME PRESET GRID ─── */
/* Label above a group of preset buttons */
.preset-section-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
  margin: 24px 0 10px;
}
.preset-section-label:first-child { margin-top: 0; }

/* Auto-fill grid of theme preset cards */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

/* Individual preset theme card button */
.preset-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--sub);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.18s;
  text-align: left;
}
.preset-btn:hover { border-color: var(--muted); color: var(--text); transform: translateY(-1px); }
.preset-btn.active {
  border-color: var(--accent);
  color: var(--bright);
  background: rgba(247,111,142,0.08);
  box-shadow: 0 0 0 1px rgba(247,111,142,0.15);
}

/* 5-dot color swatch inside each preset card */
.preset-swatch {
  display: flex; gap: 3px; flex-shrink: 0;
}
.preset-swatch span {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: block;
}

.preset-name { font-size: 0.78rem; }
.preset-sub  { font-size: 0.65rem; color: var(--muted); margin-top: 1px; } /* e.g. "Mocha" */

/* ─── FONT CONTROLS ─── */
/* Row containing the font name text input and Apply button */
.font-input-row {
  display: flex; gap: 8px; flex: 1;
}
.font-input-row input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.font-input-row input:focus { border-color: var(--accent); }

/* Live preview of the selected font */
.font-preview {
  margin-top: 14px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.05rem;
  color: var(--sub);
  letter-spacing: 0.01em;
  font-family: var(--mono);
  line-height: 1.6;
}

/* Quick-select font suggestion pills */
.font-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.font-suggestion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.72rem;
  color: var(--sub);
  cursor: pointer;
  transition: all 0.2s;
}
.font-suggestion:hover { color: var(--accent); border-color: var(--accent); background: rgba(247,111,142,0.05); }

/* ─── RANGE SLIDER ─── */
/* Used for font size, volume, and pitch variation controls */
.slider-row {
  display: flex; align-items: center; gap: 12px; flex: 1;
}
.slider-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(247,111,142,0.4);
  cursor: pointer;
}
/* Dynamic display of the current slider value */
.slider-val {
  font-size: 0.72rem;
  color: var(--sub);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── SOUND PRESET BUTTONS ─── */
.sound-preset-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sound-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 18px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--sub);
  cursor: pointer;
  transition: all 0.2s;
}
.sound-btn:hover { color: var(--text); border-color: var(--muted); }
.sound-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(247,111,142,0.07); }

/* ─── CUSTOM SOUND FILE UPLOAD ─── */
.upload-row { display: flex; gap: 8px; align-items: center; flex: 1; }
.upload-btn {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--sub);
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-btn:hover { color: var(--text); border-color: var(--muted); }
#soundFileInput { display: none; } /* hidden; triggered by the styled label */

/* ─── TOGGLE SWITCH ─── */
/* On/off pill toggle used in the UI settings panel */
.toggle-row { gap: 14px; }
.toggle {
  width: 40px; height: 22px;
  background: var(--border);
  border-radius: 20px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.toggle.on { background: var(--accent); }
.toggle-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.toggle.on .toggle-thumb { transform: translateX(18px); }

/* ─── SETTINGS FOOTER (save / reset bar) ─── */
.settings-footer {
  padding: 20px 48px;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ─── RESPONSIVE BREAKPOINTS ─── */
@media (max-width: 600px) {
  /* Tighten spacing on small screens */
  main { padding: 40px 16px 60px; }
  header { padding: 20px 16px 0; }
  .typing-inner { padding: 20px 18px; }
  #typeInput { padding: 20px 18px; }
  .word-display { font-size: 1.1rem; }
  #typeInput { font-size: 1.1rem; }
  .results-card { padding: 32px 24px; }
  .results-grid { grid-template-columns: repeat(3,1fr); gap: 12px; }
  .result-val { font-size: 2rem; }
  .stats-bar { gap: 20px; }
  .stat-value { font-size: 1.3rem; }
}

@media (max-width: 700px) {
  /* Collapse settings sidebar to icon-only mode */
  .settings-tabs { width: 48px; }
  .settings-tab { padding: 12px; text-align: center; font-size: 0; border-left: none; border-bottom: 2px solid transparent; }
  .settings-tab.active { border-bottom-color: var(--accent); background: none; }
  .settings-tab-icon { margin-right: 0; font-size: 1rem; opacity: 1; }
  .settings-header, .settings-footer { padding: 16px 20px; }
  .settings-content { padding: 20px 20px 40px; }
  .color-settings-grid { grid-template-columns: 1fr; }
  .preset-grid { grid-template-columns: 1fr 1fr; }
}