:root {
  --bg:#0f1115; --surface:#171a21; --surface-2:#1f232c; --border:#2a2f3a;
  --text:#e8eaf0; --muted:#98a1b3; --primary:#7c8cff; --primary-ink:#0f1115;
  --accent:#ffb454; --ok:#4ade80; --bad:#f87171;
  --syl-a:rgba(124,140,255,.18); --syl-b:rgba(255,180,84,.16); --radius:14px;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--text); font-size:17px; line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-text-size-adjust:100%;
}
.topbar {
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:5;
}
.topbar h1 { font-size:1.15rem; margin:0; flex:1; }
.badge {
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:.2rem .7rem; font-size:.85rem; color:var(--muted); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
main { max-width:720px; margin:0 auto; padding:1rem 1rem 4rem; }
h2 {
  font-size:.95rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin:1.5rem 0 .6rem;
}
h2:first-child { margin-top:0; }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem;
}
.grid { display:grid; gap:.75rem; }
.set-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.set-label { font-size:1.4rem; font-weight:650; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 1.1rem; border-radius:12px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); font:inherit; font-size:1.05rem; text-decoration:none; cursor:pointer;
}
.button.primary { background:var(--primary); border-color:var(--primary); color:var(--primary-ink); font-weight:600; }
.button.accent { background:var(--accent); border-color:var(--accent); color:var(--primary-ink); font-weight:600; }
.button.ghost { background:transparent; }
.button.wide { width:100%; margin-top:1.5rem; }
.button.small { min-height:36px; padding:0 .7rem; font-size:.95rem; }
.button.big { min-height:76px; font-size:1.3rem; }
.button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--primary); outline-offset:2px;
}
.muted { color:var(--muted); }
.error { color:var(--bad); }
.word { font-size:clamp(2rem,7vw,3.25rem); font-weight:650; letter-spacing:.01em; line-height:1.2; }
.trap { background:transparent; color:var(--accent); border-bottom:3px solid var(--accent); border-radius:2px; }
.syllables { display:inline-flex; gap:3px; flex-wrap:wrap; font-size:1.4rem; }
.syl { padding:.1rem .45rem; border-radius:8px; }
.syl-a { background:var(--syl-a); }
.syl-b { background:var(--syl-b); }
.ok { color:var(--ok); }
.bad { color:var(--bad); }
input[type=text], input[type=number], select, textarea {
  width:100%; min-height:48px; padding:.6rem .8rem; font:inherit; font-size:1.1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; color:var(--text);
}
textarea { min-height:8rem; resize:vertical; font-size:1rem; }
.login { display:flex; flex-direction:column; gap:.75rem; max-width:22rem; margin:3rem auto 0; }
.login h2 { margin:0; }
input[type=password] {
  width:100%; min-height:48px; padding:.6rem .8rem; font:inherit; font-size:1.1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; color:var(--text);
}
.word-card { display:flex; flex-direction:column; gap:.5rem; align-items:flex-start; }
.word-meta { font-size:.92rem; }
.admin-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:end; }
.field { display:flex; flex-direction:column; gap:.25rem; flex:1 1 8rem; }
.field label { font-size:.8rem; color:var(--muted); }
.row-actions { display:flex; align-items:center; gap:.75rem; flex:1 1 100%; flex-wrap:wrap; }
.pill {
  background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:.25rem .7rem; font-size:.85rem; color:var(--accent);
}
.exercise { display:flex; flex-direction:column; gap:1rem; align-items:flex-start; width:100%; }
.choices { display:flex; flex-wrap:wrap; gap:.6rem; }
.choice { min-width:6rem; }
.feedback { min-height:1.9rem; font-size:1.1rem; font-weight:600; }
.split-word {
  display:flex; align-items:center; flex-wrap:wrap;
  font-size:clamp(1.8rem,6vw,2.75rem); font-weight:650;
}
.split-gap {
  width:18px; height:2.6rem; padding:0; border:none; background:transparent; cursor:pointer;
  border-left:3px dashed var(--border); border-radius:0;
}
.split-gap.on { border-left:3px solid var(--accent); background:rgba(255,180,84,.12); }
.answer-input { max-width:24rem; }
.sentence-input { max-width:100%; font-size:1.15rem; }
.sentence { font-size:1.15rem; font-weight:600; line-height:1.4; }
.dictation { display:flex; flex-direction:column; gap:1rem; }
.result-row { display:flex; flex-direction:column; gap:.35rem; font-size:1.05rem; }
.diff { font-size:1.6rem; font-weight:650; letter-spacing:.02em; }
.diff-insert { color:var(--ok); border-bottom:3px solid var(--ok); }
.diff-replace { color:var(--accent); border-bottom:3px solid var(--accent); }
.diff-delete { color:var(--bad); text-decoration:line-through; }
.hint { color:var(--accent); font-size:.95rem; }
.progress { font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
@media print {
  .topbar, .button, .actions { display:none !important; }
  body { background:#fff; color:#000; }
  main { max-width:none; }
  .card { border:1px solid #ccc; break-inside:avoid; margin-bottom:.4rem; }
  .trap { color:#000; border-bottom:2px solid #000; }
  .syl-a, .syl-b { background:#eee; }
  .muted { color:#333; }
}