/* Typing Tutor — free-calculators.net */

.tt-layout{display:grid;grid-template-columns:260px 1fr;gap:18px;}
@media (max-width:840px){.tt-layout{grid-template-columns:1fr;}}

/* Sidebar — chapter list */
.tt-side{background:var(--surface,#fff);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;}
.tt-side h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 10px;font-weight:600;}
.tt-chapters{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.tt-chapter{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#F8FAFC;transition:background .12s,border-color .12s;font-size:13px;color:var(--ink);}
.tt-chapter:hover{background:#EEF2F7;border-color:var(--brand);}
.tt-chapter.active{background:var(--brand-light);border-color:var(--brand);color:var(--brand);font-weight:600;}
.tt-chapter .lock{opacity:.4;font-size:11px;}
.tt-chapter .stars{color:#F5A623;font-size:11px;letter-spacing:1px;}
.tt-chapter .num{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--ink-3);min-width:22px;text-align:right;}

.tt-progress-card{margin-top:14px;padding:14px;background:linear-gradient(135deg,#1F4E79 0%,#3A6FA0 100%);color:#fff;border-radius:var(--r-md);}
.tt-progress-card .lvl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8;}
.tt-progress-card .lvl-num{font-size:28px;font-weight:600;line-height:1;margin:4px 0;font-family:'JetBrains Mono',ui-monospace,monospace;}
.tt-progress-card .pts{font-size:12px;opacity:.9;margin-bottom:8px;}
.tt-bar{height:6px;background:rgba(255,255,255,.2);border-radius:99px;overflow:hidden;}
.tt-bar > div{height:100%;background:#FFC857;transition:width .4s;}
.tt-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;}
.tt-badge{font-size:18px;line-height:1;background:rgba(255,255,255,.15);width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.tt-badge.locked{filter:grayscale(1);opacity:.4;}

/* Main panel */
.tt-main{display:flex;flex-direction:column;gap:14px;}
.tt-stage{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:18px;}
.tt-lesson-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;flex-wrap:wrap;gap:8px;}
.tt-lesson-title{font-size:18px;font-weight:600;color:var(--ink);margin:0;}
.tt-lesson-meta{font-size:12px;color:var(--ink-3);}

/* Stats bar */
.tt-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.tt-stat{padding:10px;background:#F8FAFC;border:1px solid var(--line);border-radius:var(--r-sm,6px);text-align:center;}
.tt-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;}
.tt-stat-value{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:20px;font-weight:600;color:var(--brand);margin-top:2px;}
.tt-stat.combo{background:linear-gradient(135deg,#FFC857 0%,#F5A623 100%);}
.tt-stat.combo .tt-stat-label{color:#fff;opacity:.95;}
.tt-stat.combo .tt-stat-value{color:#fff;}

/* Difficulty selector */
.tt-diff-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.tt-diff-row .label{font-size:13px;color:var(--ink-2);}
.tt-diff{display:flex;gap:4px;}
.tt-diff button{height:30px;padding:0 14px;border:1px solid var(--line);background:#fff;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;border-radius:6px;transition:all .12s;}
.tt-diff button.on{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600;}

/* Text display */
.tt-text-wrap{margin-top:14px;padding:24px 22px;background:#F8FAFC;border:1px solid var(--line);border-radius:var(--r-md);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:20px;line-height:1.7;letter-spacing:.02em;min-height:140px;white-space:pre-wrap;word-wrap:break-word;color:var(--ink-3);position:relative;}
.tt-text-wrap.focused{box-shadow:0 0 0 3px rgba(31,78,121,.15);}
.tt-char{transition:background .08s;}
.tt-char.correct{color:var(--ink);background:transparent;}
.tt-char.incorrect{color:#fff;background:#D32F2F;border-radius:2px;}
.tt-char.cursor{background:#FFE082;color:var(--ink);border-radius:2px;animation:tt-blink 1s infinite;}
.tt-char.space-incorrect{background:#FFB4B4;color:#D32F2F;}
@keyframes tt-blink{0%,50%{background:#FFE082;}51%,100%{background:transparent;}}

.tt-hidden-input{position:absolute;left:-9999px;top:0;opacity:0;pointer-events:none;}

/* Visual keyboard */
.tt-kbd-wrap{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.tt-kbd-row{display:flex;gap:6px;}
.tt-kbd-key{min-width:36px;height:42px;padding:0 8px;background:#F8FAFC;border:1px solid var(--line);border-bottom:3px solid #C5CCD3;border-radius:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:500;transition:transform .08s,background .12s,border-color .12s;position:relative;}
.tt-kbd-key.wide{min-width:64px;font-size:11px;}
.tt-kbd-key.wider{min-width:84px;}
.tt-kbd-key.space{flex:1;min-width:140px;}
.tt-kbd-key.next{background:#FFE082;border-color:#F5A623;color:#5D4037;font-weight:600;animation:tt-pulse 1.4s infinite;}
.tt-kbd-key.pressed{transform:translateY(2px);border-bottom-width:1px;background:var(--brand);color:#fff;border-color:var(--brand);}
.tt-kbd-key.miss{background:#FFCDD2;border-color:#D32F2F;color:#B71C1C;}
.tt-kbd-key .finger{position:absolute;top:2px;right:3px;font-size:8px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;opacity:.6;}
.tt-kbd-key.next .finger{opacity:.9;color:#5D4037;}
@keyframes tt-pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.5);}50%{box-shadow:0 0 0 6px rgba(245,166,35,0);}}

/* Lessons in current chapter */
.tt-lesson-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:14px;}
.tt-lesson-pill{padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:12px;cursor:pointer;text-align:center;transition:all .12s;}
.tt-lesson-pill:hover{border-color:var(--brand);background:var(--brand-light);}
.tt-lesson-pill.active{background:var(--brand);color:#fff;border-color:var(--brand);}
.tt-lesson-pill .ttp-num{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;}
.tt-lesson-pill .ttp-stars{margin-top:4px;color:#F5A623;font-size:10px;letter-spacing:1px;}
.tt-lesson-pill.active .ttp-stars{color:#FFE082;}

/* Result modal */
.tt-result{margin-top:14px;padding:18px;background:linear-gradient(135deg,#43A047 0%,#2E7D32 100%);color:#fff;border-radius:var(--r-md);text-align:center;display:none;}
.tt-result.show{display:block;animation:tt-pop .3s ease;}
.tt-result h3{font-size:24px;margin:0 0 6px;}
.tt-result .tt-r-stats{display:flex;gap:24px;justify-content:center;margin:14px 0;flex-wrap:wrap;}
.tt-result .tt-r-stat{display:flex;flex-direction:column;}
.tt-result .tt-r-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8;}
.tt-result .tt-r-value{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:28px;font-weight:600;}
.tt-result .tt-r-stars{font-size:36px;letter-spacing:6px;color:#FFE082;margin:8px 0;}
.tt-result .tt-r-best{font-size:12px;opacity:.9;margin-top:6px;}
.tt-result .tt-r-actions{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap;}
.tt-result button{padding:8px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;font:inherit;font-size:13px;cursor:pointer;transition:background .12s;}
.tt-result button:hover{background:rgba(255,255,255,.25);}
.tt-result button.primary{background:#fff;color:#2E7D32;font-weight:600;}
@keyframes tt-pop{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* Combo flash */
.tt-combo-flash{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);font-size:48px;font-weight:600;color:#F5A623;text-shadow:0 2px 4px rgba(0,0,0,.2);pointer-events:none;animation:tt-combo .8s ease;font-family:'JetBrains Mono',ui-monospace,monospace;z-index:1000;}
@keyframes tt-combo{0%{opacity:0;transform:translate(-50%,-30%) scale(.8);}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-70%) scale(1);}}

@media (max-width:600px){
  .tt-text-wrap{font-size:16px;padding:18px 14px;}
  .tt-stats{grid-template-columns:repeat(2,1fr);}
  .tt-kbd-key{min-width:26px;height:36px;font-size:11px;padding:0 4px;}
  .tt-kbd-key.wide{min-width:46px;}
  .tt-kbd-key.wider{min-width:60px;}
  .tt-kbd-key.space{min-width:100px;}
  .tt-kbd-row{gap:4px;}
}