:root {
  --btst-bg: #0f1220;
  --btst-card: #171a2b;
  --btst-text: #e9f0ff;
  --btst-muted: #97a0b9;
  --btst-accent: #7c5cff;
  --btst-good: #28c98b;
  --btst-bad: #ff6b6b;
  --btst-border: rgba(255,255,255,0.08);
  --btst-radius: 14px;
  --btst-fs: 18px;
}

.btst-theme-light {
  --btst-bg: #f7f8fc;
  --btst-card: #ffffff;
  --btst-text: #1b1f33;
  --btst-muted: #5f6b86;
  --btst-accent: #5a67ff;
  --btst-good: #0ea775;
  --btst-bad: #e04646;
  --btst-border: rgba(0,0,0,0.08);
}

.btst-root {
  font-family: "Hind Siliguri", "Noto Sans Bengali", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size: var(--btst-fs);
  color: var(--btst-text);
  background: linear-gradient(180deg, rgba(124,92,255,0.10) 0%, rgba(15,18,32,0) 40%), var(--btst-bg);
  padding: 24px;
  border-radius: var(--btst-radius);
  border: 1px solid var(--btst-border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.btst-header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.btst-title { font-weight:700; font-size: 20px; letter-spacing: .2px; }

.btst-actions { display:flex; align-items:center; gap:10px; }
.btst-actions .btst-theme-toggle {
  background: transparent; border: 1px solid var(--btst-border);
  color: var(--btst-text); border-radius: 10px; padding: 6px 10px; cursor: pointer;
}

.btst-progress {
  position: relative; width: 200px; height: 6px; background: var(--btst-card);
  border-radius: 999px; border: 1px solid var(--btst-border); overflow: hidden;
}
.btst-progress-bar {
  position: absolute; left:0; top:0; bottom:0; width:0%;
  background: linear-gradient(90deg, var(--btst-accent), #00c2ff);
  transition: width .3s ease;
}

.btst-stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 12px; }
.btst-stat {
  background: var(--btst-card);
  border: 1px solid var(--btst-border);
  border-radius: 12px;
  padding: 8px 12px;
  display:flex; align-items:center; gap:8px;
  color: var(--btst-text);
  min-width: 100px; justify-content: center;
}
.btst-stat .label { color: var(--btst-muted); font-size: 12px; }
.btst-stat .value { font-size: 18px; font-weight: 700; }

.btst-board {
  background: var(--btst-card);
  border: 1px solid var(--btst-border);
  border-radius: 14px;
  padding: 16px;
  max-height: 320px;
  overflow: auto;
  position: relative;
}

.btst-text {
  line-height: 1.8;
  word-break: break-word;
  white-space: pre-wrap;
  position: relative; /* caret anchor */
  direction: ltr;
}

.btst-char {
  position: relative;
  transition: background-color .12s ease, color .12s ease, text-decoration-color .12s ease;
}
.btst-char.correct { color: var(--btst-good); }
.btst-char.wrong { color: var(--btst-bad); background: rgba(255,107,107,0.08); border-radius: 4px; }
.btst-char.current { text-decoration: underline dotted var(--btst-accent); text-underline-offset: 4px; }

.btst-caret {
  position: absolute;
  width: 2px;
  background: var(--btst-accent);
  height: 1.4em;
  top: 0; left: 0;
  animation: btstCaret 1s infinite;
  pointer-events: none;
}
@keyframes btstCaret { 0%, 45% { opacity:1 } 55%, 100% { opacity: 0 } }

.btst-input {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 1px; height: 1px; left: 0; bottom: 0;
}

.btst-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  display: grid; place-items: center; border-radius: 12px;
}
.btst-count {
  font-size: 56px; font-weight: 800; color: #fff; text-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.btst-controls {
  display:flex; gap: 8px; align-items:center; justify-content: space-between;
  margin-top: 12px;
}

.btst-btn {
  background: var(--btst-accent);
  color: white; border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform .05s ease, opacity .2s ease;
}
.btst-btn:disabled { opacity: .5; cursor: not-allowed; }
.btst-btn:active { transform: translateY(1px); }

.btst-mode-select, .btst-duration, .btst-words-select, .btst-cursor-select {
  background: var(--btst-card); border: 1px solid var(--btst-border);
  color: var(--btst-text); border-radius: 10px; padding: 8px 10px;
}
.btst-switch { display:inline-flex; align-items:center; gap:6px; margin-left:6px; color: var(--btst-muted); }

.btst-result {
  margin-top: 16px;
  background: var(--btst-card);
  border: 1px solid var(--btst-border);
  border-radius: 14px; padding: 16px;
}
.btst-result-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.btst-save-score { display:flex; gap:8px; align-items:center; margin-top: 12px; flex-wrap: wrap; }
.btst-save-score input {
  flex:1; min-width: 220px; background: transparent; border: 1px solid var(--btst-border);
  border-radius: 10px; color: var(--btst-text); padding: 10px;
}
.btst-save-note { margin-top:6px; color: var(--btst-muted); }

.btst-leaderboard {
  width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 16px;
}
.btst-leaderboard th, .btst-leaderboard td {
  border: 1px solid var(--btst-border);
  padding: 8px; text-align: left;
}
.btst-leaderboard thead { background: var(--btst-card); }

@media (max-width: 680px) {
  .btst-result-grid { grid-template-columns: 1fr 1fr; }
  .btst-root { font-size: 16px; }
}