:root{
  --bg:#f4f7fb; --card:#fff; --accent:#0ea5a4; --muted:#6b7280; --border:#e6eefb; --danger:#ef4444; --ok:#10b981;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:#0b1220}
.header{display:flex;align-items:center;gap:12px;padding:18px 24px;background:linear-gradient(90deg,#fff,#f0fbf9);box-shadow:0 2px 6px rgba(10,20,40,.04)}
.logo{font-weight:800;color:var(--accent)}
.container{max-width:1200px;margin:22px auto;padding:0 16px;display:grid;grid-template-columns:280px 1fr 320px;gap:18px}
.panel{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 8px 30px rgba(12,20,40,.04)}
.select,input[type="number"]{padding:8px;border-radius:8px;border:1px solid var(--border);background:white}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.controls-row{display:flex;gap:8px;margin-top:8px}
.btn{padding:8px 12px;border-radius:9px;border:none;cursor:pointer;font-weight:600}
.btn-primary{background:var(--accent);color:white}
.btn-ghost{background:transparent;border:1px solid var(--border)}
.lessons-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lesson-item{padding:10px;border-radius:8px;border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.lesson-item.selected{background:linear-gradient(90deg,#f0fffb,#f8fcff);border-color:var(--accent)}
.typing-area{display:flex;flex-direction:column;gap:12px}
.stage{padding:18px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#fbffff,#fff);min-height:120px}
.prompt{font-size:18px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}
.typed-view{min-height:40px;padding:8px;border-radius:8px;border:1px dashed var(--border);background:#fff;font-family:monospace;white-space:pre-wrap}
.small{font-size:13px;color:var(--muted)}
.stats{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.stat{background:#f7fffe;padding:8px;border-radius:10px;border:1px solid var(--border)}
.stat .label{font-size:12px;color:var(--muted)}
.stat .value{font-weight:700;font-size:18px;color:var(--accent)}
.kbd-visual{margin-top:12px;padding:12px;border-radius:10px;border:1px dashed #e8f6f4;background:#fcfffe;display:flex;flex-direction:column;gap:8px;align-items:center}
.krow{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.k{min-width:44px;height:48px;border-radius:6px;background:linear-gradient(180deg,#fff,#f7f9fb);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.k.space{min-width:420px}
.k.active{background:#cff7ef;border-color:var(--accent);box-shadow:0 0 8px rgba(14,165,164,.12);transform:translateY(2px)}
.char-correct{color:var(--ok)}
.char-wrong{color:var(--danger);text-decoration:underline}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;background:var(--card);padding:18px;border-radius:12px;box-shadow:0 16px 40px rgba(12,20,40,.16);min-width:320px;display:none}
.modal.show{display:block}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.leader{display:flex;flex-direction:column;gap:8px}
.history-item{padding:8px;border-radius:8px;background:#fbfffe;border:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.footer{max-width:1200px;margin:10px auto;text-align:center;color:var(--muted);font-size:13px}
@media (max-width:1000px){.container{grid-template-columns:1fr;padding:0 12px}}