/* ================================================================
   Typing Speed Trainer — Frontend CSS v1.2
   Light theme with CSS-variable color system.
   All selectors use .class (never #id) for multi-widget safety.
   ================================================================ */

/* ── Base font import hint (loaded via WP enqueue) ─────────── */

/* ================================================================
   COLOR THEMES
   Applied via data-tst-theme="blue|purple|green|orange|dark"
   on .tst-widget, or via body class .tst-theme-*
   ================================================================ */

/* ── Theme: Blue (default — matches screenshot) ─────────────── */
.tst-widget,
.tst-widget[data-tst-theme="blue"] {
  --c-primary:       #3b5bdb;
  --c-primary-dark:  #2f4ac7;
  --c-primary-light: #4c6ef5;
  --c-primary-faint: #eef1ff;
  --c-primary-rgb:   59, 91, 219;

  --c-stat-1: #3b5bdb;   /* WPM card */
  --c-stat-2: #2f9e44;   /* Accuracy card */
  --c-stat-3: #e03131;   /* Errors card */
  --c-stat-4: #1971c2;   /* Time card */

  --c-bg:        #eef1ff;
  --c-surface:   #ffffff;
  --c-border:    #d0d9f0;
  --c-shadow:    rgba(59, 91, 219, 0.12);

  --c-text:      #1a1f36;
  --c-text-sub:  #4b5280;
  --c-text-muted:#8891b0;
  --c-pending:   #a0aac8;

  --c-correct:   #1a1f36;
  --c-incorrect: #e03131;
  --c-cursor:    #3b5bdb;
}

/* ── Theme: Purple ──────────────────────────────────────────── */
.tst-widget[data-tst-theme="purple"] {
  --c-primary:       #7048e8;
  --c-primary-dark:  #5f3dc4;
  --c-primary-light: #845ef7;
  --c-primary-faint: #f3f0ff;
  --c-primary-rgb:   112, 72, 232;

  --c-stat-1: #7048e8;
  --c-stat-2: #2f9e44;
  --c-stat-3: #e03131;
  --c-stat-4: #5f3dc4;

  --c-bg:        #f3f0ff;
  --c-surface:   #ffffff;
  --c-border:    #d8d0f5;
  --c-shadow:    rgba(112, 72, 232, 0.12);

  --c-text:      #1a1030;
  --c-text-sub:  #4a3580;
  --c-text-muted:#8878c0;
  --c-pending:   #b0a8d8;

  --c-correct:   #1a1030;
  --c-incorrect: #e03131;
  --c-cursor:    #7048e8;
}

/* ── Theme: Green ───────────────────────────────────────────── */
.tst-widget[data-tst-theme="green"] {
  --c-primary:       #2f9e44;
  --c-primary-dark:  #237032;
  --c-primary-light: #40c057;
  --c-primary-faint: #ebfbee;
  --c-primary-rgb:   47, 158, 68;

  --c-stat-1: #2f9e44;
  --c-stat-2: #1971c2;
  --c-stat-3: #e03131;
  --c-stat-4: #0c8599;

  --c-bg:        #ebfbee;
  --c-surface:   #ffffff;
  --c-border:    #c8efd0;
  --c-shadow:    rgba(47, 158, 68, 0.12);

  --c-text:      #0d1f14;
  --c-text-sub:  #2b5c38;
  --c-text-muted:#6aaa7a;
  --c-pending:   #a0c8a8;

  --c-correct:   #0d1f14;
  --c-incorrect: #e03131;
  --c-cursor:    #2f9e44;
}

/* ── Theme: Orange ──────────────────────────────────────────── */
.tst-widget[data-tst-theme="orange"] {
  --c-primary:       #e8590c;
  --c-primary-dark:  #d04a05;
  --c-primary-light: #f76707;
  --c-primary-faint: #fff4e6;
  --c-primary-rgb:   232, 89, 12;

  --c-stat-1: #e8590c;
  --c-stat-2: #2f9e44;
  --c-stat-3: #c92a2a;
  --c-stat-4: #f08c00;

  --c-bg:        #fff4e6;
  --c-surface:   #ffffff;
  --c-border:    #ffe0b8;
  --c-shadow:    rgba(232, 89, 12, 0.12);

  --c-text:      #1f0f00;
  --c-text-sub:  #6e3010;
  --c-text-muted:#b07050;
  --c-pending:   #c8a080;

  --c-correct:   #1f0f00;
  --c-incorrect: #c92a2a;
  --c-cursor:    #e8590c;
}

/* ── Theme: Dark ────────────────────────────────────────────── */
.tst-widget[data-tst-theme="dark"] {
  --c-primary:       #4c6ef5;
  --c-primary-dark:  #3b5bdb;
  --c-primary-light: #748ffc;
  --c-primary-faint: #1a1f36;
  --c-primary-rgb:   76, 110, 245;

  --c-stat-1: #364fc7;
  --c-stat-2: #2f9e44;
  --c-stat-3: #c92a2a;
  --c-stat-4: #1864ab;

  --c-bg:        #0d0f1a;
  --c-surface:   #151826;
  --c-border:    rgba(255,255,255,0.08);
  --c-shadow:    rgba(0, 0, 0, 0.35);

  --c-text:      #e8eaf6;
  --c-text-sub:  #8892b0;
  --c-text-muted:#5a6080;
  --c-pending:   #5a6280;

  --c-correct:   #cdd5ff;
  --c-incorrect: #ff6b6b;
  --c-cursor:    #748ffc;
}

/* ================================================================
   WIDGET WRAPPER
   ================================================================ */
.tst-widget {
  font-family:   "Roboto Mono", monospace;
  background:    var(--c-bg);
  color:         var(--c-text);
  border-radius: 16px;
  padding:       2rem;
  position:      relative;
  transition:    background 0.3s, color 0.3s;
}

.tst-inner {
  max-width: 940px;
  margin:    0 auto;
}

/* ================================================================
   THEME SWITCHER (header widget / shortcode)
   ================================================================ */
.tst-theme-switcher {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  padding:     6px 12px;
  background:  var(--c-surface, #fff);
  border:      1px solid var(--c-border, #dde1f0);
  border-radius: 50px;
  box-shadow:  0 2px 8px rgba(0,0,0,0.08);
}

.tst-theme-switcher-label {
  font-size:   0.72rem;
  font-weight: 600;
  color:       #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.tst-theme-dot {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  border:        2px solid transparent;
  cursor:        pointer;
  transition:    transform 0.15s, border-color 0.15s;
  outline:       none;
  padding:       0;
}

.tst-theme-dot:hover   { transform: scale(1.15); }
.tst-theme-dot.active  { border-color: #fff; box-shadow: 0 0 0 2px currentColor; }

.tst-theme-dot[data-theme="blue"]   { background: #3b5bdb; color: #3b5bdb; }
.tst-theme-dot[data-theme="purple"] { background: #7048e8; color: #7048e8; }
.tst-theme-dot[data-theme="green"]  { background: #2f9e44; color: #2f9e44; }
.tst-theme-dot[data-theme="orange"] { background: #e8590c; color: #e8590c; }
.tst-theme-dot[data-theme="dark"]   { background: #1a1f36; color: #1a1f36; }

/* ================================================================
   CONFIG PANEL
   ================================================================ */
.tst-config-panel {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: 12px;
  padding:       1rem 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow:    0 1px 8px var(--c-shadow);
}

.tst-config-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         1.5rem;
  align-items: flex-start;
}

.tst-config-group > label {
  display:        block;
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--c-text-muted);
  font-weight:    700;
  margin-bottom:  0.45rem;
  font-family:    system-ui, sans-serif;
}

/* ── Button Groups ────────────────────────────────────────── */
.tst-btn-group {
  display:  flex;
  gap:      5px;
  flex-wrap: wrap;
}

.tst-btn {
  background:    var(--c-surface);
  border:        1.5px solid var(--c-border);
  color:         var(--c-text-sub);
  padding:       0.36rem 0.82rem;
  border-radius: 6px;
  cursor:        pointer;
  font-family:   system-ui, sans-serif;
  font-size:     0.82rem;
  font-weight:   500;
  transition:    all 0.13s ease;
  line-height:   1;
}

.tst-btn:hover {
  border-color: var(--c-primary);
  color:        var(--c-primary);
  background:   var(--c-primary-faint);
}

.tst-btn.active,
.tst-btn[aria-pressed="true"] {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        #fff;
  font-weight:  700;
}

.tst-btn-primary {
  background:    var(--c-primary);
  border-color:  var(--c-primary);
  color:         #fff;
  font-weight:   700;
  padding:       0.6rem 1.8rem;
  font-size:     0.9rem;
  border-radius: 8px;
  font-family:   system-ui, sans-serif;
  cursor:        pointer;
  transition:    all 0.13s ease;
}

.tst-btn-primary:hover {
  background:   var(--c-primary-dark);
  border-color: var(--c-primary-dark);
}

/* ================================================================
   STAT CARDS — 4-column blue card row (matches screenshot)
   ================================================================ */
.tst-stats-bar {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.tst-stat {
  border-radius: 12px;
  padding:       1.1rem 1rem;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           0.3rem;
  box-shadow:    0 4px 16px rgba(0,0,0,0.15);
  transition:    transform 0.2s;
}

.tst-stat:hover { transform: translateY(-2px); }

.tst-stat-wpm      { background: var(--c-stat-1); }
.tst-stat-accuracy { background: var(--c-stat-2); }
.tst-stat-errors   { background: var(--c-stat-3); }
.tst-stat-timer    { background: var(--c-stat-4); }

.tst-stat-value {
  font-size:    2rem;
  font-weight:  800;
  color:        #fff;
  line-height:  1;
  font-family:  system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.tst-stat-label {
  font-size:      0.7rem;
  color:          rgba(255,255,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family:    system-ui, sans-serif;
  font-weight:    500;
}

.tst-timer-warning { animation: tst-card-pulse 0.9s ease infinite; }

@keyframes tst-card-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* ================================================================
   TEXT / TEST AREA
   ================================================================ */
.tst-test-panel {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: 12px;
  padding:       1.75rem 2rem;
  box-shadow:    0 1px 8px var(--c-shadow);
  margin-bottom: 1.25rem;
}

.tst-test-area {
  position:      relative;
  height:        10rem;
  overflow:      hidden;
  cursor:        text;
  outline:       none;
  margin-bottom: 1.25rem;
  border-radius: 6px;
  transition:    box-shadow 0.15s;
}

.tst-test-area:focus {
  box-shadow: 0 0 0 2px var(--c-primary);
}

.tst-words {
  font-family:   "Roboto Mono", monospace;
  font-size:     18px;
  line-height:   2;
  color:         var(--c-pending);
  user-select:   none;
  -webkit-user-select: none;
  position:      relative;
  z-index:       1;
  word-break:    break-all;
  pointer-events: none;
}

/* Font overrides from widget setting */
.tst-widget[data-font="source-code-pro"] .tst-words { font-family: "Source Code Pro", monospace; }
.tst-widget[data-font="fira-code"]       .tst-words { font-family: "Fira Code", monospace; }
.tst-widget[data-font="jetbrains-mono"]  .tst-words { font-family: "JetBrains Mono", monospace; }
.tst-widget[data-font="space-mono"]      .tst-words { font-family: "Space Mono", monospace; }
.tst-widget[data-font="inconsolata"]     .tst-words { font-family: "Inconsolata", monospace; }
.tst-widget[data-font="ubuntu-mono"]     .tst-words { font-family: "Ubuntu Mono", monospace; }

.tst-char { display: inline; transition: color 0.05s; }

.tst-char-correct {
  color: var(--c-correct);
}

.tst-char-incorrect {
  color:           var(--c-incorrect);
  text-decoration: underline wavy var(--c-incorrect);
  text-decoration-skip-ink: none;
}

/* ── Cursor ───────────────────────────────────────────────── */
.tst-cursor {
  position:      absolute;
  width:         2px;
  background:    var(--c-cursor);
  border-radius: 2px;
  z-index:       10;
  animation:     tst-blink 1s step-end infinite;
  transition:    left 0.05s linear, top 0.1s ease;
  pointer-events: none;
  top:  0; left: 0;
}

@keyframes tst-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Input Row (text box at bottom of panel — matches screenshot) */
.tst-input-row {
  display: flex;
  gap:     0.75rem;
  align-items: stretch;
}

.tst-typing-input {
  flex:          1;
  background:    var(--c-bg);
  border:        1.5px solid var(--c-border);
  border-radius: 8px;
  padding:       0.75rem 1rem;
  font-family:   "Roboto Mono", monospace;
  font-size:     0.92rem;
  color:         var(--c-text);
  outline:       none;
  transition:    border-color 0.15s, background 0.15s;
  caret-color:   var(--c-primary);
}

.tst-typing-input::placeholder {
  color:      var(--c-text-muted);
  font-style: italic;
}

.tst-typing-input:focus {
  border-color: var(--c-primary);
  background:   var(--c-surface);
}

/* ── Start Hint ───────────────────────────────────────────── */
.tst-start-hint {
  font-size:   0.82rem;
  color:       var(--c-text-muted);
  font-family: system-ui, sans-serif;
  text-align:  center;
  margin:      0.25rem 0 0;
}

/* ── Manual Start ─────────────────────────────────────────── */
.tst-manual-start-wrap {
  text-align: center;
  margin-top: 0.75rem;
}

/* ── Actions ──────────────────────────────────────────────── */
.tst-actions {
  display:         flex;
  justify-content: center;
  gap:             0.75rem;
  margin-top:      0.75rem;
}

.tst-action-btn {
  display:       flex;
  align-items:   center;
  gap:           0.4rem;
  background:    var(--c-primary-faint);
  border:        1.5px solid var(--c-border);
  color:         var(--c-primary);
  padding:       0.45rem 1rem;
  border-radius: 8px;
  cursor:        pointer;
  font-family:   system-ui, sans-serif;
  font-size:     0.82rem;
  font-weight:   600;
  transition:    all 0.13s;
}

.tst-action-btn:hover {
  background:   var(--c-primary);
  border-color: var(--c-primary);
  color:        #fff;
}

/* ================================================================
   RESULTS PANEL
   ================================================================ */
.tst-results {
  animation: tst-fadein 0.4s ease both;
}

@keyframes tst-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.tst-results-header {
  text-align:    center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.tst-results-header h3 {
  font-size:   1.6rem;
  font-weight: 800;
  color:       var(--c-primary);
  margin:      0 0 0.25rem;
  font-family: system-ui, sans-serif;
}

.tst-results-hint {
  font-size:   0.78rem;
  color:       var(--c-text-muted);
  margin:      0;
  font-family: system-ui, sans-serif;
}

/* Result metric cards — same blue-card style as stats bar */
.tst-results-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:                   1rem;
  margin-bottom:         1.5rem;
}

.tst-result-card {
  border-radius: 12px;
  padding:       1.1rem 0.75rem;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  gap:           0.3rem;
  box-shadow:    0 4px 16px rgba(0,0,0,0.12);
  transition:    transform 0.2s;
}

.tst-result-card:hover { transform: translateY(-2px); }

.tst-result-card:nth-child(1) { background: var(--c-stat-1); }
.tst-result-card:nth-child(2) { background: var(--c-stat-2); }
.tst-result-card:nth-child(3) { background: var(--c-stat-2); }
.tst-result-card:nth-child(4) { background: var(--c-stat-3); }
.tst-result-card:nth-child(5) { background: var(--c-stat-4); }
.tst-result-card:nth-child(6) { background: var(--c-stat-4); }

.tst-result-value {
  font-size:    1.75rem;
  font-weight:  800;
  color:        #fff;
  line-height:  1;
  font-family:  system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.tst-result-card:first-child .tst-result-value {
  font-size: 2.5rem;
}

.tst-result-label {
  font-size:      0.65rem;
  color:          rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family:    system-ui, sans-serif;
  font-weight:    600;
}

.tst-results-actions {
  display:         flex;
  justify-content: center;
  gap:             0.75rem;
  margin-top:      1.25rem;
}

/* ================================================================
   KEYBOARD HEATMAP (shown only in results)
   ================================================================ */
.tst-heatmap-section {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: 12px;
  padding:       1.25rem 1.5rem;
  margin-top:    1rem;
  box-shadow:    0 1px 8px var(--c-shadow);
}

.tst-heatmap-section > h4 {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--c-text-muted);
  font-weight:    700;
  margin:         0 0 1rem;
  font-family:    system-ui, sans-serif;
}

.tst-heatmap {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  overflow-x:     auto;
  padding-bottom: 4px;
}

.tst-kb-row {
  display:         flex;
  gap:             5px;
  justify-content: center;
}

.tst-key {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-radius: 5px;
  color:         var(--c-text-sub);
  font-family:   system-ui, sans-serif;
  font-size:     0.6rem;
  min-width:     30px;
  height:        30px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background 0.25s, color 0.25s;
  white-space:   nowrap;
  user-select:   none;
  cursor:        default;
  font-weight:   500;
}

.tst-key-special   { min-width: 46px; }
.tst-key-backspace { min-width: 60px; font-size: 0.7rem; }
.tst-key-tab,
.tst-key-caps      { min-width: 46px; }
.tst-key-enter     { min-width: 60px; }
.tst-key-shift     { min-width: 76px; }
.tst-key-space     { min-width: 190px; }

.tst-heatmap-legend {
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
  margin-top:      0.75rem;
  font-size:       0.65rem;
  color:           var(--c-text-muted);
  justify-content: flex-end;
  font-family:     system-ui, sans-serif;
}

.tst-legend-bar {
  width:         80px;
  height:        8px;
  border-radius: 4px;
  background:    linear-gradient(to right, hsl(120,55%,50%), hsl(60,75%,50%), hsl(0,75%,55%));
}

/* Heatmap weak keys callout */
.tst-weak-keys {
  margin-top:  0.75rem;
  padding:     0.6rem 0.85rem;
  background:  #fff8e1;
  border:      1px solid #ffe082;
  border-radius: 8px;
  font-size:   0.8rem;
  color:       #795548;
  font-family: system-ui, sans-serif;
}

.tst-weak-keys strong { color: #e65100; }

/* ================================================================
   DASHBOARD
   ================================================================ */
.tst-dashboard {
  font-family: system-ui, sans-serif;
}

/* Summary stat row */
.tst-db-summary {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   1rem;
  margin-bottom:         2rem;
}

.tst-db-stat {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  padding:       1.25rem 1rem;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           0.3rem;
  box-shadow:    0 1px 8px rgba(59,91,219,0.08);
  transition:    transform 0.2s;
}

.tst-db-stat:hover { transform: translateY(-2px); }

.tst-db-stat-icon {
  font-size:   1.4rem;
  margin-bottom: 0.25rem;
}

.tst-db-val {
  font-size:   2rem;
  font-weight: 800;
  color:       var(--c-primary, #3b5bdb);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tst-db-lbl {
  font-size:      0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    600;
}

/* Charts */
.tst-chart-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         2rem;
}

.tst-chart-card {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  padding:       1.25rem;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
}

.tst-chart-card > h4 {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    700;
  margin:         0 0 0.85rem;
}

/* History table */
.tst-history-card {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
  margin-bottom: 2rem;
}

.tst-history-head {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         1rem 1.25rem;
  border-bottom:   1px solid var(--c-border, #d0d9f0);
}

.tst-history-head h4 {
  font-size:   0.85rem;
  font-weight: 700;
  color:       var(--c-text, #1a1f36);
  margin:      0;
  letter-spacing: 0.01em;
}

.tst-history-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.875rem;
}

.tst-history-table th {
  padding:        0.65rem 1rem;
  text-align:     left;
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    700;
  background:     var(--c-bg, #eef1ff);
  border-bottom:  1px solid var(--c-border, #d0d9f0);
}

.tst-history-table td {
  padding:       0.65rem 1rem;
  border-bottom: 1px solid var(--c-border, #d0d9f0);
  color:         var(--c-text, #1a1f36);
}

.tst-history-table tr:last-child td { border-bottom: none; }

.tst-history-table tr:hover td {
  background: var(--c-primary-faint, #eef1ff);
}

.tst-wpm-badge {
  display:       inline-block;
  background:    var(--c-primary, #3b5bdb);
  color:         #fff;
  font-weight:   700;
  padding:       0.15rem 0.55rem;
  border-radius: 20px;
  font-size:     0.82rem;
  min-width:     48px;
  text-align:    center;
}

.tst-acc-badge {
  display:       inline-block;
  color:         var(--c-primary, #3b5bdb);
  font-weight:   700;
  font-size:     0.875rem;
}

.tst-diff-badge {
  display:       inline-block;
  padding:       0.1rem 0.5rem;
  border-radius: 20px;
  font-size:     0.72rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tst-diff-easy   { background: #e9fbe9; color: #2f9e44; }
.tst-diff-medium { background: #fff3cd; color: #d97706; }
.tst-diff-hard   { background: #ffe4e4; color: #e03131; }

/* Dashboard heatmap card */
.tst-db-heatmap-card {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  padding:       1.25rem 1.5rem;
  margin-bottom: 2rem;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
}

.tst-db-heatmap-card > h4 {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    700;
  margin:         0 0 1rem;
}

/* Empty state */
.tst-empty-state {
  text-align:  center;
  padding:     3rem 1rem;
  color:       var(--c-text-muted, #8891b0);
}

.tst-empty-state .tst-empty-icon {
  font-size:     3rem;
  margin-bottom: 0.75rem;
  display:       block;
}

.tst-empty-state p {
  font-size: 0.92rem;
  margin:    0 0 1rem;
}

/* Guest progress panel */
.tst-guest-progress {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  padding:       1.5rem;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
  margin-bottom: 1.5rem;
}

.tst-guest-progress h4 {
  font-size:   0.85rem;
  font-weight: 700;
  margin:      0 0 1rem;
  color:       var(--c-text, #1a1f36);
}

/* Notice boxes */
.tst-notice {
  padding:       1rem 1.25rem;
  border-radius: 10px;
  font-size:     0.88rem;
  border:        1px solid var(--c-border, #d0d9f0);
  background:    var(--c-surface, #fff);
  color:         var(--c-text-sub, #4b5280);
  font-family:   system-ui, sans-serif;
}

.tst-notice-info {
  background:   #eef1ff;
  border-color: #c5cff5;
  color:        #3b5bdb;
}

.tst-error { color: #e03131; font-family: system-ui, sans-serif; font-size: 0.88rem; }

/* ================================================================
   LEADERBOARD
   ================================================================ */
.tst-leaderboard {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  overflow:      hidden;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
}

.tst-leaderboard-head {
  padding:       1rem 1.25rem;
  border-bottom: 1px solid var(--c-border, #d0d9f0);
  font-weight:   700;
  font-size:     0.9rem;
  color:         var(--c-text, #1a1f36);
}

.tst-leaderboard-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.875rem;
  font-family:     system-ui, sans-serif;
}

.tst-leaderboard-table th,
.tst-leaderboard-table td {
  padding:       0.6rem 1rem;
  border-bottom: 1px solid var(--c-border, #d0d9f0);
  text-align:    left;
}

.tst-leaderboard-table th {
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    700;
  background:     var(--c-bg, #eef1ff);
}

.tst-rank-1 td { font-weight: 700; color: #d4a017; }
.tst-rank-2 td { font-weight: 700; color: #6c757d; }
.tst-rank-3 td { font-weight: 700; color: #a0522d; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 680px) {
  .tst-widget { padding: 1rem 0.75rem; }

  .tst-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .tst-stat-value { font-size: 1.5rem; }

  .tst-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tst-chart-grid {
    grid-template-columns: 1fr;
  }

  .tst-db-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .tst-config-row    { flex-direction: column; gap: 0.75rem; }
  .tst-test-area     { height: 11rem; }

  .tst-key           { min-width: 22px; height: 22px; font-size: 0.5rem; }
  .tst-key-special   { min-width: 34px; }
  .tst-key-backspace,
  .tst-key-enter     { min-width: 42px; }
  .tst-key-shift     { min-width: 56px; }
  .tst-key-space     { min-width: 110px; }

  .tst-history-table th:nth-child(n+5),
  .tst-history-table td:nth-child(n+5) { display: none; }
}

@media (max-width: 420px) {
  .tst-stats-bar { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .tst-result-card:first-child .tst-result-value { font-size: 2rem; }
}

/* ================================================================
   CONTROL BAR  — two toggle buttons: Start/Stop  +  Pause/Resume
   ================================================================ */
.tst-control-bar {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             0.75rem;
  padding:         0.9rem 0 0.2rem;
}

/* ── Base toggle button ── */
.tst-ctrl-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.45rem;
  border:        2px solid var(--c-border, #d0d9f0);
  border-radius: 50px;
  padding:       0.55rem 1.6rem;
  font-family:   system-ui, sans-serif;
  font-size:     0.88rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    all 0.15s ease;
  line-height:   1;
  white-space:   nowrap;
  background:    var(--c-surface, #fff);
  color:         var(--c-text-sub, #4b5280);
  min-width:     120px;
  justify-content: center;
}

.tst-ctrl-btn:hover:not(:disabled) {
  border-color: var(--c-primary, #3b5bdb);
  color:        var(--c-primary, #3b5bdb);
  background:   var(--c-primary-faint, #eef1ff);
}

/* Start state → solid green-ish primary */
.tst-ctrl-toggle-start {
  background:   var(--c-primary, #3b5bdb);
  border-color: var(--c-primary, #3b5bdb);
  color:        #fff;
  box-shadow:   0 3px 14px rgba(var(--c-primary-rgb, 59,91,219), 0.32);
}
.tst-ctrl-toggle-start:hover:not(:disabled) {
  background:   var(--c-primary-dark, #2f4ac7);
  border-color: var(--c-primary-dark, #2f4ac7);
  color:        #fff;
  transform:    translateY(-1px);
  box-shadow:   0 5px 18px rgba(var(--c-primary-rgb, 59,91,219), 0.42);
}

/* Stop state → red */
.tst-ctrl-toggle-start.tst-ctrl-is-stop {
  background:   #e03131;
  border-color: #e03131;
  color:        #fff;
  box-shadow:   0 3px 14px rgba(224,49,49,0.32);
}
.tst-ctrl-toggle-start.tst-ctrl-is-stop:hover {
  background:   #c92a2a;
  border-color: #c92a2a;
  transform:    translateY(-1px);
}

/* Pause state → outlined primary */
.tst-ctrl-toggle-pause {
  background:   var(--c-surface, #fff);
  border-color: var(--c-primary, #3b5bdb);
  color:        var(--c-primary, #3b5bdb);
}
.tst-ctrl-toggle-pause:hover:not(:disabled) {
  background: var(--c-primary, #3b5bdb);
  color:      #fff;
}

/* Resume state → solid primary */
.tst-ctrl-toggle-pause.tst-ctrl-is-resume {
  background:   var(--c-primary, #3b5bdb);
  border-color: var(--c-primary, #3b5bdb);
  color:        #fff;
  box-shadow:   0 3px 14px rgba(var(--c-primary-rgb, 59,91,219), 0.32);
}
.tst-ctrl-toggle-pause.tst-ctrl-is-resume:hover {
  background:   var(--c-primary-dark, #2f4ac7);
  border-color: var(--c-primary-dark, #2f4ac7);
  transform:    translateY(-1px);
}

/* Disabled (pause button before test starts) */
.tst-ctrl-btn:disabled {
  opacity:        0.38;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ================================================================
   PAUSED OVERLAY
   ================================================================ */
.tst-paused-overlay {
  position:      absolute;
  inset:         0;
  background:    rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(3px);
  border-radius: 6px;
  z-index:       20;
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
}

.tst-widget[data-tst-theme="dark"] .tst-paused-overlay {
  background: rgba(13, 15, 26, 0.88);
}

.tst-paused-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.4rem;
  pointer-events: none;
}

.tst-paused-icon {
  font-size:     2.8rem;
  line-height:   1;
  animation:     tst-blink 1.6s ease-in-out infinite;
}

.tst-paused-label {
  font-size:      1.1rem;
  font-weight:    800;
  color:          var(--c-primary, #3b5bdb);
  font-family:    system-ui, sans-serif;
  letter-spacing: 0.04em;
}

.tst-paused-hint {
  font-size:   0.73rem;
  color:       var(--c-text-muted, #8891b0);
  font-family: system-ui, sans-serif;
}

/* ================================================================
   BADGE TOAST  (slide-in from bottom-right)
   ================================================================ */
.tst-badge-toast {
  position:      fixed;
  bottom:        1.5rem;
  right:         1.5rem;
  z-index:       999999;
  display:       flex;
  align-items:   center;
  gap:           0.85rem;
  background:    #fff;
  border:        2px solid var(--toast-clr, #3b5bdb);
  border-radius: 16px;
  padding:       0.85rem 1.25rem;
  box-shadow:    0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  min-width:     260px;
  max-width:     340px;
  transform:     translateX(120%);
  opacity:       0;
  transition:    transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
  font-family:   system-ui, sans-serif;
}

.tst-badge-toast.tst-bt-visible {
  transform: translateX(0);
  opacity:   1;
}

.tst-bt-icon {
  font-size:    2rem;
  line-height:  1;
  flex-shrink:  0;
}

.tst-bt-text {
  display:        flex;
  flex-direction: column;
  gap:            0.15rem;
}

.tst-bt-text strong {
  font-size:   0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:       var(--toast-clr, #3b5bdb);
  font-weight: 800;
}

.tst-bt-text span {
  font-size:   0.92rem;
  font-weight: 700;
  color:       #1a1f36;
}

/* ================================================================
   NEW BADGES IN RESULTS
   ================================================================ */
.tst-result-new-badges {
  margin:        0 0 1.5rem;
  padding:       1rem 1.25rem;
  background:    var(--c-primary-faint, #eef1ff);
  border:        1.5px solid var(--c-border, #d0d9f0);
  border-radius: 14px;
}

.tst-new-badges-label {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight:    800;
  color:          var(--c-primary, #3b5bdb);
  margin-bottom:  0.75rem;
  font-family:    system-ui, sans-serif;
}

.tst-new-badges-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.65rem;
}

.tst-new-badge {
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
  background:     #fff;
  border:         2px solid var(--badge-clr, #3b5bdb);
  border-radius:  50px;
  padding:        0.35rem 0.85rem 0.35rem 0.55rem;
  animation:      tst-badge-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

.tst-new-badge .tst-badge-icon { font-size: 1.1rem; }
.tst-new-badge .tst-badge-name { font-size: 0.8rem; font-weight: 700; color: var(--badge-clr, #3b5bdb); font-family: system-ui; }

@keyframes tst-badge-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ================================================================
   BADGE GRID  (dashboard / achievements page)
   ================================================================ */
.tst-badges-wrap {
  display:       flex;
  flex-direction: column;
  gap:           1.5rem;
}

.tst-badge-category {}

.tst-badge-cat-title {
  font-size:      0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight:    800;
  color:          var(--c-text-muted, #8891b0);
  margin:         0 0 0.75rem;
  font-family:    system-ui, sans-serif;
}

.tst-badge-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.75rem;
}

.tst-badge {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.35rem;
  width:          108px;
  padding:        1rem 0.5rem 0.85rem;
  border-radius:  14px;
  border:         2px solid;
  cursor:         default;
  transition:     transform 0.2s, box-shadow 0.2s;
  text-align:     center;
  font-family:    system-ui, sans-serif;
  position:       relative;
}

.tst-badge-earned {
  background:   #fff;
  border-color: var(--badge-clr, #3b5bdb);
  box-shadow:   0 3px 12px color-mix(in srgb, var(--badge-clr, #3b5bdb) 25%, transparent);
}

.tst-badge-earned:hover {
  transform:  translateY(-3px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--badge-clr, #3b5bdb) 35%, transparent);
}

.tst-badge-locked {
  background:   var(--c-bg, #eef1ff);
  border-color: var(--c-border, #d0d9f0);
  opacity:      0.55;
  filter:       grayscale(0.6);
}

.tst-badge .tst-badge-icon {
  font-size:   1.8rem;
  line-height: 1;
}

.tst-badge .tst-badge-name {
  font-size:   0.72rem;
  font-weight: 700;
  color:       var(--c-text, #1a1f36);
  line-height: 1.2;
}

.tst-badge-earned .tst-badge-name {
  color: var(--badge-clr, #3b5bdb);
}

.tst-badge .tst-badge-desc {
  font-size:   0.62rem;
  color:       var(--c-text-muted, #8891b0);
  line-height: 1.3;
  display:     none;
}

.tst-badge:hover .tst-badge-desc { display: block; }

/* Dashboard badges card */
.tst-db-badges-card {
  background:    var(--c-surface, #fff);
  border:        1px solid var(--c-border, #d0d9f0);
  border-radius: 12px;
  padding:       1.5rem;
  margin-bottom: 2rem;
  box-shadow:    0 1px 8px rgba(59,91,219,0.07);
}

.tst-db-badges-card > h4 {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color:          var(--c-text-muted, #8891b0);
  font-weight:    700;
  margin:         0 0 1.25rem;
}


/* ================================================================
   v2.0 NEW STYLES
   ================================================================ */

/* ── Mode selector buttons ── */
.tst-mode-btn { text-transform: none; letter-spacing: 0; }

/* ── Options bar ── */
.tst-options-bar {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  flex-wrap:   wrap;
}

.tst-option-btn {
  padding:     0.35rem 0.9rem;
  font-size:   0.8rem;
  font-weight: 600;
  border:      2px solid var(--c-border, #d0d9f0);
  border-radius: 50px;
  background:  transparent;
  color:       var(--c-text-sub, #4b5280);
  cursor:      pointer;
  transition:  all 0.15s;
}
.tst-option-btn:hover     { border-color: var(--c-primary, #3b5bdb); color: var(--c-primary, #3b5bdb); }
.tst-option-btn.active    { background: var(--c-primary, #3b5bdb); border-color: var(--c-primary, #3b5bdb); color: #fff; }

/* ── Font size control ── */
.tst-font-size-group {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  margin-left: 0.25rem;
}
.tst-font-size-icon { font-size: 1rem; opacity: 0.7; }
.tst-font-size-slider {
  -webkit-appearance: none;
  width:         90px;
  height:        4px;
  border-radius: 4px;
  background:    var(--c-border, #d0d9f0);
  outline:       none;
  cursor:        pointer;
  accent-color:  var(--c-primary, #3b5bdb);
}
.tst-font-size-val {
  font-size:   0.75rem;
  color:       var(--c-text-sub, #4b5280);
  min-width:   32px;
  font-family: monospace;
}

/* ── Custom text area ── */
.tst-config-group-full { width: 100%; }
.tst-custom-textarea {
  width:         100%;
  border:        2px solid var(--c-border, #d0d9f0);
  border-radius: 10px;
  padding:       0.75rem;
  font-size:     0.88rem;
  font-family:   system-ui, sans-serif;
  color:         var(--c-text, #1a1f36);
  background:    var(--c-surface, #fff);
  resize:        vertical;
  transition:    border-color 0.2s;
  box-sizing:    border-box;
  margin-bottom: 0.5rem;
}
.tst-custom-textarea:focus { outline: none; border-color: var(--c-primary, #3b5bdb); }
.tst-btn-sm {
  padding:   0.35rem 1rem;
  font-size: 0.8rem;
}
.tst-use-custom-btn {
  background:   var(--c-primary, #3b5bdb);
  border-color: var(--c-primary, #3b5bdb);
  color:        #fff;
}

/* ── Blind mode indicator ── */
.tst-blind-indicator {
  text-align:    center;
  font-size:     0.82rem;
  font-weight:   600;
  color:         #7048e8;
  background:    rgba(112,72,232,0.08);
  border:        1.5px solid rgba(112,72,232,0.25);
  border-radius: 8px;
  padding:       0.45rem 1rem;
  margin-bottom: 0.5rem;
}

/* ── Blind mode char state ── */
.tst-char-blind {
  color:      var(--c-primary, #3b5bdb) !important;
  background: rgba(59,91,219,0.08);
  border-radius: 2px;
}

/* ── Word progress bar ── */
.tst-word-progress-wrap {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  margin-bottom: 0.55rem;
}
.tst-word-progress-track {
  flex:          1;
  height:        6px;
  background:    var(--c-border, #d0d9f0);
  border-radius: 50px;
  overflow:      hidden;
}
.tst-word-progress-bar {
  height:        100%;
  background:    var(--c-primary, #3b5bdb);
  border-radius: 50px;
  transition:    width 0.3s ease;
  width:         0%;
}
.tst-word-progress-label {
  font-size:   0.78rem;
  color:       var(--c-text-sub, #4b5280);
  white-space: nowrap;
  font-weight: 600;
  min-width:   90px;
  text-align:  right;
}

/* ── Quote attribution ── */
.tst-quote-attr {
  text-align:  right;
  font-style:  italic;
  font-size:   0.82rem;
  color:       var(--c-text-muted, #8891b0);
  padding-top: 0.35rem;
  padding-right: 0.25rem;
}

/* ── Personal Record banner ── */
.tst-personal-record {
  text-align:    center;
  font-size:     1rem;
  font-weight:   700;
  color:         #d4a017;
  background:    rgba(212,160,23,0.1);
  border:        2px solid rgba(212,160,23,0.35);
  border-radius: 12px;
  padding:       0.65rem 1.25rem;
  margin-bottom: 0.85rem;
  animation:     tst-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.tst-personal-record span { opacity: 0.6; font-weight: 400; font-size: 0.85rem; margin-left: 0.4rem; }

/* ── Streak banner ── */
.tst-streak-banner {
  text-align:    center;
  font-size:     0.9rem;
  font-weight:   600;
  color:         #e8590c;
  background:    rgba(232,89,12,0.08);
  border:        1.5px solid rgba(232,89,12,0.25);
  border-radius: 10px;
  padding:       0.5rem 1rem;
  margin-bottom: 0.75rem;
}

/* ── Pop animation ── */
@keyframes tst-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Streak badge in dashboard stats ── */
.tst-db-stat .tst-db-stat-icon { font-size: 1.4rem; }

/* ── New Streak badge category ── */
.tst-badge-category:has(.tst-badge[style*="--badge-clr:#e8590c"]) .tst-badge-cat-title { color: #e8590c; }

/* ── Dark theme tweaks for new elements ── */
[data-tst-theme="dark"] .tst-custom-textarea {
  background: var(--c-surface, #1e2340);
  color:      var(--c-text, #e8ecf8);
}
[data-tst-theme="dark"] .tst-blind-indicator { background: rgba(112,72,232,0.15); }
[data-tst-theme="dark"] .tst-personal-record { background: rgba(212,160,23,0.15); }
[data-tst-theme="dark"] .tst-streak-banner   { background: rgba(232,89,12,0.12); }


/* ── Standalone sound + font-size toolbar ── */
.tst-tools-bar {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             0.6rem;
  padding:         0.35rem 0 0.6rem;
  flex-wrap:       wrap;
}
/* When config panel is also visible, add a separator */
.tst-config-panel + .tst-tools-bar {
  border-top:  1px solid var(--c-border, #d0d9f0);
  margin-top:  -0.25rem;
  padding-top: 0.6rem;
}

/* ── Hindi / Devanagari typing ─────────────────────────── */
.tst-hindi-indicator {
  background: linear-gradient(90deg, #ff6b35 0%, #f7931e 50%, #138808 100%);
  color: #fff;
  border-radius: 6px;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: .75rem;
  letter-spacing: .02em;
}

/* Devanagari word-wrap fix — break on Unicode syllable boundaries */
[data-lang="hindi"] .tst-words,
.tst-words[data-hindi="1"] {
  word-break: break-word;
  line-height: 2.3;   /* Devanagari needs more line height for ascenders */
  font-family: "Noto Sans Devanagari", "Mangal", sans-serif !important;
}

/* ── Certificate section ───────────────────────────────── */
.tst-certificate-section {
  border-top: 1px solid var(--c-border, #d0d9f0);
  padding: 1.25rem 0 .5rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.tst-cert-name-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.tst-cert-name-row label {
  font-size: .85rem;
  color: var(--c-text-light, #6c757d);
  white-space: nowrap;
}

.tst-cert-name-input {
  border: 1.5px solid var(--c-primary, #3b5bdb);
  border-radius: 6px;
  padding: .4rem .8rem;
  font-size: .9rem;
  background: var(--c-surface, #f8f9ff);
  color: var(--c-text, #1a1f36);
  min-width: 200px;
  transition: box-shadow .15s;
}
.tst-cert-name-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,91,219,.2);
}

.tst-btn-certificate {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  color: #2c2000;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  border-radius: 8px;
  padding: .65rem 2rem;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255,140,0,.3);
  transition: transform .15s, box-shadow .15s;
  letter-spacing: .03em;
}
.tst-btn-certificate:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,140,0,.4);
}
.tst-btn-certificate:active { transform: translateY(0); }

/* Dark theme overrides for certificate */
[data-tst-theme="dark"] .tst-cert-name-input {
  background: #1e2040;
  border-color: #4c5adb;
  color: #e8eaf6;
}

/* ── Performance: composited cursor animation ──────────── */
.tst-cursor {
  will-change: transform;
}

/* ── Language row button active state ─────────────────── */
.tst-lang-btn.active {
  background: var(--c-primary, #3b5bdb);
  color: #fff;
  border-color: var(--c-primary, #3b5bdb);
}