:root{
  --bg:#0b0f14; --panel:#0f172a; --panel-2:#111827; --text:#e5e7eb;
  --muted:#94a3b8; --brand:#60a5fa; --ok:#34d399; --bad:#f87171; --focus:#f59e0b; --bd:#1f2937;
}
html[data-theme="light"]{
  --bg:#f8fafc; --panel:#ffffff; --panel-2:#ffffff; --text:#0f172a;
  --muted:#475569; --brand:#2563eb; --ok:#059669; --bad:#dc2626; --focus:#b45309; --bd:#e2e8f0;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--bg) 85%, black));
  color:var(--text);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
/* Base light/dark */
:root {
  --bg:#f8fafc; --panel:#ffffff; --panel-2:#ffffff; --text:#0f172a;
  --muted:#475569; --brand:#2563eb; --ok:#059669; --bad:#dc2626; --focus:#b45309; --bd:#e2e8f0;
}
html[data-mode="dark"] {
  --bg:#0b0f14; --panel:#0f172a; --panel-2:#111827; --text:#e5e7eb;
  --muted:#94a3b8; --brand:#60a5fa; --ok:#34d399; --bad:#f87171; --focus:#f59e0b; --bd:#1f2937;
}

/* Theme palettes (apply to brand/ok/bad/focus) */
html[data-theme="blue"]  { --brand:#3b82f6; --ok:#22c55e; --bad:#ef4444; --focus:#eab308; }
html[data-theme="green"] { --brand:#10b981; --ok:#84cc16; --bad:#f97316; --focus:#14b8a6; }
html[data-theme="purple"]{ --brand:#8b5cf6; --ok:#22d3ee; --bad:#f43f5e; --focus:#d946ef; }
html[data-theme="orange"]{ --brand:#f97316; --ok:#22c55e; --bad:#ef4444; --focus:#eab308; }

.shell{max-width:980px;margin:0 auto;padding:16px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.brand{margin:0;color:var(--brand);letter-spacing:.3px;font-weight:800}

.controls{
  display:grid;gap:12px;
  grid-template-columns: repeat(12, 1fr);
  background:var(--panel); border:1px solid var(--bd); border-radius:14px; padding:12px;
}
.ctl{grid-column: span 3}
.actions{grid-column: span 6; display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
@media (max-width:800px){ .ctl{grid-column: span 6} .actions{grid-column: span 12; justify-content:flex-start} }

label{display:block; font-size:13px; color:var(--muted); margin:0 0 4px}
select,.btn{
  background:var(--panel-2); color:var(--text); border:1px solid var(--bd);
  border-radius:10px; padding:8px 12px; font-size:15px
}
.btn{cursor:pointer}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.btn.ghost{background:transparent}
.primary{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset}
select:focus,.btn:focus,.editor:focus{outline:2px solid var(--focus); outline-offset:2px}

.stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin:14px 0 12px;
}
.card{
  background:var(--panel); border:1px solid var(--bd); border-radius:14px; padding:14px;
  display:flex; align-items:center; justify-content:space-between;
}
.k{font-size:13px; color:var(--muted)}
.v{font-size:26px; font-weight:800}

.typing{
  background:var(--panel); border:1px solid var(--bd); border-radius:14px; padding:16px;
}
.target{
  min-height:64px; margin:0 0 10px; font-size:18px; line-height:1.6; word-break:break-word
}
.editor{
  width:100%; min-height:160px; resize:vertical;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--bd); border-radius:12px; padding:12px; font-size:18px
}

.hint{color:var(--muted); margin:10px 2px 0}

.countdown{
  position:fixed; inset:0; display:grid; place-items:center; z-index:10;
  background:rgba(0,0,0,.35); font-size:64px; font-weight:900; color:var(--brand)
}
.hidden{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.correct{color:var(--ok)}
.incorrect{color:var(--bad); text-decoration: underline}
.pending{color:var(--muted)}
.target span{transition: color .12s ease, text-decoration-color .12s ease}

/* Tips bar */
.tipsbar{
  margin:12px 0 0; padding:12px;
  background:var(--panel); border:1px solid var(--bd); border-radius:12px; color:var(--muted);
  min-height:24px
}
.tip{display:inline-block; opacity:0; transition: opacity .6s ease}
.fade-in{opacity:1}
.fade-out{opacity:0}

.foot{color:var(--muted); text-align:center; margin-top:12px}