*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --bg:#fafafa;
  --surface:#fff;
  --border:#e5e7eb;
  --text:#1f2937;
  --text2:#6b7280;
  --accent:#6366f1;
  --accent-light:#eef2ff;
  --green:#10b981;
  --red:#ef4444;
  --radius:10px;
  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;
}

html{font-size:16px;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;}

/* Nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.5rem;border-bottom:1px solid var(--border);background:var(--surface);}
.nav-back{color:var(--text2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;}
.nav-back:hover{color:var(--accent);}
.nav-stats-btn{background:none;border:1px solid var(--border);border-radius:8px;padding:.4rem .5rem;cursor:pointer;color:var(--text2);transition:all .15s;display:flex;align-items:center;}
.nav-stats-btn:hover{border-color:var(--accent);color:var(--accent);}

/* App */
.app{max-width:820px;margin:0 auto;padding:1.5rem 1rem 3rem;}

/* Lesson picker */
.lesson-picker{margin-bottom:1.5rem;}
.lesson-select{width:100%;padding:.65rem .75rem;font-family:var(--font);font-size:.9rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);appearance:none;cursor:pointer;outline:none;transition:border-color .15s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;}
.lesson-select:focus{border-color:var(--accent);}
.lesson-meta{font-size:.8rem;color:var(--text2);margin-top:.35rem;min-height:1.2em;}

/* Typing zone: сверху буквы, под ними полоса прогресса */
.typing-zone{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;cursor:text;transition:border-color .15s;}
.typing-zone.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}

/* Блок с буквами — только внутри белого прямоугольника, остальное скрыто */
.text-display{font-family:var(--mono);font-size:1.15rem;line-height:2;letter-spacing:.02em;min-height:4em;user-select:none;margin-bottom:1rem;overflow:hidden;max-width:100%;}
.text-display .typing-placeholder{color:var(--text2);font-family:var(--font);font-size:.95rem;text-align:center;margin:0;padding:1rem 0;}
.text-char{display:inline;transition:color .05s;}
.text-char.correct{color:var(--green);}
.text-char.error{color:var(--red);text-decoration:underline wavy var(--red);}
.text-char.current{background:var(--accent);color:#fff;border-radius:2px;padding:0 1px;}

/* Полоса прогресса — под буквами, не перекрывает */
.progress-track{height:10px;background:var(--border);border-radius:999px;overflow:hidden;}
.typing-zone:not(.has-lesson) .progress-track{opacity:.4;}
.progress-slider{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .15s ease-out;}

/* Live stats */
.live-stats{display:flex;gap:1.25rem;padding-top:.75rem;border-top:1px solid var(--border);margin-top:.75rem;}
.live-stat{font-size:.8rem;color:var(--text2);}
.live-stat strong{color:var(--text);font-weight:600;}

/* Keyboard */
.keyboard-wrap{margin-bottom:1rem;}
.keyboard{display:flex;flex-direction:column;gap:5px;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.kb-row{display:flex;justify-content:center;gap:4px;}
.key{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--text);transition:all .1s;user-select:none;}
.key.wide{min-width:72px;font-size:.7rem;}
.key.space{min-width:240px;font-size:.7rem;color:var(--text2);}
.key.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light);}
.key.pressed{background:var(--accent);color:#fff;transform:scale(.95);}
.key.error{background:var(--red);color:#fff;border-color:var(--red);}

/* Actions */
.actions{display:flex;gap:.75rem;justify-content:center;}
.btn{padding:.6rem 1.5rem;border:none;border-radius:8px;font-family:var(--font);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s;}
.btn:disabled{opacity:.4;cursor:default;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:#4f46e5;transform:translateY(-1px);}
.btn-ghost{background:none;color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){border-color:var(--text2);color:var(--text);}
.btn-danger{background:none;color:var(--red);border:1px solid var(--red);opacity:.7;}
.btn-danger:hover{opacity:1;}
.btn-sm{padding:.4rem 1rem;font-size:.8rem;}

/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;}

.result-card,.stats-card{background:var(--surface);border-radius:14px;padding:2rem;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:pop .2s ease-out;}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.result-card h2,.stats-card h2{font-size:1.25rem;font-weight:600;margin-bottom:1.25rem;text-align:center;}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;}
.result-item{text-align:center;padding:.75rem;background:var(--bg);border-radius:var(--radius);}
.result-value{display:block;font-size:1.5rem;font-weight:700;color:var(--accent);}
.result-label{font-size:.75rem;color:var(--text2);}
.result-actions{display:flex;gap:.75rem;justify-content:center;}

/* Stats overlay */
.stats-card{max-width:520px;max-height:80vh;display:flex;flex-direction:column;}
.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.stats-header h2{margin:0;}
.close-btn{background:none;border:none;font-size:1.5rem;color:var(--text2);cursor:pointer;padding:.25rem .5rem;border-radius:6px;}
.close-btn:hover{background:var(--bg);}
.stats-summary{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.stat-pill{padding:.35rem .75rem;background:var(--accent-light);color:var(--accent);border-radius:20px;font-size:.8rem;}
.stat-pill strong{font-weight:700;}
.history-list{flex:1;overflow-y:auto;margin-bottom:1rem;}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.85rem;}
.history-item:last-child{border:none;}
.history-name{font-weight:500;color:var(--text);}
.history-date{font-size:.75rem;color:var(--text2);}
.history-vals{display:flex;gap:1rem;color:var(--text2);}
.history-vals strong{color:var(--text);}

/* Responsive */
@media(max-width:640px){
  .app{padding:1rem .75rem 2rem;}
  .key{min-width:28px;height:34px;font-size:.65rem;}
  .key.wide{min-width:50px;}
  .key.space{min-width:140px;}
  .result-card,.stats-card{padding:1.5rem;}
  .keyboard{padding:.5rem;}
}