:root{
  --bg:#040a22;
  --bg2:#0a1641;
  --bg3:#091235;
  --card:rgba(10,19,55,.88);
  --card-strong:rgba(8,16,48,.94);
  --soft:rgba(255,255,255,.055);
  --line:rgba(138,160,255,.24);
  --line-strong:rgba(133,161,255,.38);
  --text:#f5f7ff;
  --muted:#aeb9de;
  --blue:#7b8fff;
  --violet:#bc78ff;
  --green:#35e2a1;
  --red:#ff627d;
  --yellow:#ffd96c;
  --cyan:#72d7ff;
  --shadow:0 28px 90px rgba(0,0,0,.38);

  --finger-lp:#ff7bb9;
  --finger-lr:#c98aff;
  --finger-lm:#73a6ff;
  --finger-li:#3ee195;
  --finger-ri:#3ee195;
  --finger-rm:#73a6ff;
  --finger-rr:#c98aff;
  --finger-rp:#ff7bb9;
  --finger-thumb:#ffd96c;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(80,116,255,.30), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(183,92,255,.22), transparent 26rem),
    radial-gradient(circle at 50% 30%, rgba(56,120,255,.10), transparent 40rem),
    linear-gradient(180deg,var(--bg2),var(--bg));
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.35;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 67% 16%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 90% 50%, rgba(255,255,255,.1) 0 1px, transparent 1px);
}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit}

.app-shell{width:min(1380px,calc(100% - 32px));margin:0 auto}
.topbar{
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand-mark{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(110,140,255,.28),rgba(141,94,255,.22));
  border:1px solid var(--line-strong);
  font-size:26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 26px rgba(108,140,255,.18);
}
.brand strong,.brand small{display:block}
.brand strong{font-size:16px}
.brand small{margin-top:3px;color:var(--muted);font-size:13px}
.topbar-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.topbar-note{
  padding:10px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:#d6ddff;font-weight:700;font-size:14px;
}
.ghost-btn,.secondary-btn{
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.035);
  color:var(--text);
  border-radius:14px;
  padding:12px 18px;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.ghost-btn:hover,.secondary-btn:hover{background:rgba(255,255,255,.08)}

main{padding:8px 0 34px}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr) minmax(260px,.8fr);
  gap:20px;
  align-items:stretch;
  padding:20px 24px;
  border:1px solid var(--line-strong);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(17,31,88,.92),rgba(8,15,44,.92));
  box-shadow:var(--shadow);
}
.hero-copy,.hero-center,.hero-stats{min-width:0}
.hero-copy{padding:10px 6px 10px 2px}
.eyebrow{
  display:inline-flex;
  color:#b9c7ff;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  font-weight:800;
}
.hero h1{font-size:clamp(38px,4.8vw,70px);line-height:.98;margin:12px 0 14px;letter-spacing:-.05em}
.hero h1 span{background:linear-gradient(90deg,#91a7ff,#d69cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{max-width:640px;margin:0;color:var(--muted);font-size:18px;line-height:1.62}
.hero-center{
  position:relative;
  padding:20px 20px 12px;
  border-radius:24px;
  border:1px solid rgba(122,146,255,.18);
  background:radial-gradient(circle at 50% 60%, rgba(144,80,255,.18), transparent 10rem);
  overflow:hidden;
}
.hero-bubble{
  display:inline-block;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(66,122,255,.4);
  background:rgba(7,13,36,.72);
  color:#f4f7ff;
  font-weight:800;
  line-height:1.35;
  box-shadow:0 0 28px rgba(60,94,255,.16);
}
.hero-rocket{
  display:grid;
  place-items:center;
  font-size:118px;
  line-height:1;
  height:170px;
  filter:drop-shadow(0 18px 26px rgba(111,100,255,.35));
}
.hero-stars span{
  position:absolute;
  color:#ffdc84;
  font-size:22px;
  opacity:.92;
}
.hero-stars span:nth-child(1){top:24px;right:42px}
.hero-stars span:nth-child(2){top:84px;right:10px;font-size:18px}
.hero-stars span:nth-child(3){bottom:38px;left:34px;font-size:20px}
.hero-stars span:nth-child(4){bottom:24px;right:58px;font-size:16px}
.hero-stats{
  display:grid;grid-template-columns:repeat(1,1fr);gap:12px;align-self:center;
}
.hero-stats div{
  padding:20px 16px;border-radius:20px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);text-align:center;
  min-height:104px;display:grid;place-items:center;
}
.hero-stats strong{display:block;font-size:34px;line-height:1;letter-spacing:-.03em}
.hero-stats span{display:block;color:var(--muted);font-size:14px;margin-top:6px}

.lesson-panel{margin-top:28px}
.lesson-nav{display:flex;justify-content:space-between;gap:22px;align-items:end;margin-bottom:14px}
.section-title h2{margin:5px 0 0;font-size:24px}
.lesson-buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.lesson-btn{
  min-width:48px;height:44px;padding:0 14px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:#d6dcf5;font-weight:800;font-size:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.lesson-btn:hover{color:var(--text);background:rgba(255,255,255,.07)}
.lesson-btn.active{
  color:white;border-color:rgba(115,145,255,.75);
  background:linear-gradient(180deg,rgba(91,117,255,.75),rgba(99,70,255,.52));
  box-shadow:0 0 22px rgba(109,118,255,.35);
}
.lesson-btn.done::after{content:" ✓";color:var(--green)}

.trainer-card{
  border:1px solid var(--line);border-radius:28px;padding:26px;
  background:linear-gradient(160deg,rgba(10,18,51,.94),rgba(6,12,36,.97));
  box-shadow:var(--shadow)
}
.trainer-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;
}
.lesson-number{font-size:13px;color:#b7c3ff;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.trainer-head h2{margin:5px 0 6px;font-size:27px;letter-spacing:-.03em}
.trainer-head p{margin:0;color:var(--muted);font-size:18px}
.trainer-actions{display:flex;align-items:stretch;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.next-key-card{
  min-width:320px;display:flex;gap:12px;align-items:center;padding:14px 16px;
  border-radius:18px;border:1px solid rgba(113,140,255,.3);background:rgba(255,255,255,.03);
}
.next-key-icon{font-size:36px;line-height:1;filter:drop-shadow(0 0 12px rgba(114,156,255,.25))}
.next-key-content{min-width:0}
.next-key-label{display:block;color:#d6dcff;font-size:14px;font-weight:700;margin-bottom:6px}
.next-key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted)}
.next-key-row kbd{
  min-width:52px;padding:8px 12px;border-radius:12px;border:1px solid rgba(130,154,255,.32);
  background:rgba(255,255,255,.07);color:#fff;text-align:center;font-size:18px;font-weight:800;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}
.next-key-row kbd[data-finger="lp"], .key.finger-lp{background:rgba(255,123,185,.18);border-color:rgba(255,123,185,.42)}
.next-key-row kbd[data-finger="lr"], .key.finger-lr{background:rgba(201,138,255,.18);border-color:rgba(201,138,255,.42)}
.next-key-row kbd[data-finger="lm"], .key.finger-lm{background:rgba(115,166,255,.18);border-color:rgba(115,166,255,.42)}
.next-key-row kbd[data-finger="li"], .key.finger-li{background:rgba(62,225,149,.17);border-color:rgba(62,225,149,.42)}
.next-key-row kbd[data-finger="ri"], .key.finger-ri{background:rgba(62,225,149,.17);border-color:rgba(62,225,149,.42)}
.next-key-row kbd[data-finger="rm"], .key.finger-rm{background:rgba(115,166,255,.18);border-color:rgba(115,166,255,.42)}
.next-key-row kbd[data-finger="rr"], .key.finger-rr{background:rgba(201,138,255,.18);border-color:rgba(201,138,255,.42)}
.next-key-row kbd[data-finger="rp"], .key.finger-rp{background:rgba(255,123,185,.18);border-color:rgba(255,123,185,.42)}
.next-key-row kbd[data-finger="thumb"], .key.finger-thumb{background:rgba(255,217,108,.18);border-color:rgba(255,217,108,.45)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}
.stat{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.stat span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.stat strong{font-size:20px}

.target-wrap{
  padding:24px;border-radius:22px;border:1px solid rgba(108,140,255,.24);
  background:rgba(7,11,27,.56)
}
.target-text{
  min-height:96px;font:600 28px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.015em;overflow-wrap:anywhere
}
.char{color:#7c85b8;border-bottom:2px solid transparent;transition:color .15s ease,background .15s ease,border-color .15s ease}
.char.correct{color:var(--green)}
.char.current{color:white;border-bottom-color:#54f0ae;background:rgba(84,240,174,.12);border-radius:8px;box-shadow:0 0 0 1px rgba(84,240,174,.24) inset}

.typing-field-wrap{display:block;margin-top:16px}
.typing-field-wrap>span{display:block;color:var(--muted);font-size:12px;margin:0 0 7px 4px}
.typing-field{
  width:100%;height:58px;padding:0 18px;border-radius:17px;
  border:1px solid rgba(171,110,255,.48);outline:none;background:#080d21;color:#fff;
  font-size:28px;letter-spacing:.03em;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 0 22px rgba(157,108,255,.14);
}
.typing-field:focus{border-color:var(--violet);box-shadow:0 0 0 4px rgba(156,108,255,.10),0 0 26px rgba(156,108,255,.22)}
.typing-field.error{animation:shake .18s linear 2;border-color:var(--red)}
@keyframes shake{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

.keyboard-stage{
  margin-top:18px;
  display:grid;
  grid-template-columns:240px minmax(0,1fr) 240px;
  gap:10px;
  align-items:stretch;
}
.hand-card, .keyboard-zone{
  border:1px solid rgba(124,149,255,.24);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(9,17,49,.82),rgba(7,12,35,.94));
}
.hand-card{padding:14px 14px 18px}
.hand-card-title{font-size:14px;font-weight:800;color:#dbe2ff;margin-bottom:10px;text-align:center}
.keyboard-zone{padding:12px 12px 14px}
.keyboard-wrap{overflow-x:auto;padding-bottom:4px}
.keyboard{min-width:720px;display:grid;gap:6px}
.key-row{display:flex;gap:6px}
.key{
  flex:1 1 0;height:54px;border-radius:12px;border:1px solid var(--line);
  display:grid;place-items:center;background:rgba(255,255,255,.035);color:#ecf1ff;
  font-weight:800;text-transform:none;transition:.12s ease;min-width:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset;
}
.key.key-neutral{background:rgba(117,132,191,.18);border-color:rgba(138,160,255,.20);color:#d7ddf9}
.key.wide{flex:1.55 1 0}
.key.xwide{flex:2.15 1 0}
.key.space{flex:4.4 1 0}
.key.target{
  color:#fff;transform:translateY(-2px);
  box-shadow:0 0 0 3px rgba(84,240,174,.16), 0 0 22px rgba(84,240,174,.26);
  border-color:#54f0ae;background:rgba(84,240,174,.20)
}
.key.pressed{background:rgba(66,214,154,.22);border-color:rgba(66,214,154,.65)}
.key.bad{background:rgba(255,107,122,.22);border-color:rgba(255,107,122,.72)}
.keyboard-note{margin:12px 2px 0;color:var(--muted);font-size:13px;line-height:1.55}

.hand-figure{position:relative;height:214px}
.hand-shape{position:absolute;inset:8px 0 0}
.palm{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:110px;height:96px;border-radius:44px 44px 38px 38px;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.95), rgba(222,228,255,.92) 42%, rgba(174,184,255,.88) 100%);
  box-shadow:0 0 28px rgba(117,143,255,.26);
}
.digit{
  position:absolute;bottom:78px;width:22px;border-radius:999px;
  box-shadow:0 0 18px currentColor;
}
.digit::before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:.95}
.digit.lp{left:38px;height:94px;color:var(--finger-lp);transform:rotate(-12deg)}
.digit.lr{left:68px;height:118px;color:var(--finger-lr);transform:rotate(-5deg)}
.digit.lm{left:98px;height:132px;color:var(--finger-lm)}
.digit.li{left:132px;height:112px;color:var(--finger-li);transform:rotate(10deg)}
.digit.rp{right:38px;height:94px;color:var(--finger-rp);transform:rotate(12deg)}
.digit.rr{right:68px;height:118px;color:var(--finger-rr);transform:rotate(5deg)}
.digit.rm{right:98px;height:132px;color:var(--finger-rm)}
.digit.ri{right:132px;height:112px;color:var(--finger-ri);transform:rotate(-10deg)}
.digit.thumb-left{left:136px;bottom:26px;width:22px;height:86px;color:var(--finger-thumb);transform:rotate(54deg)}
.digit.thumb-right{right:136px;bottom:26px;width:22px;height:86px;color:var(--finger-thumb);transform:rotate(-54deg)}
.hand-badge{
  position:absolute;padding:8px 10px;border-radius:999px;border:1px solid currentColor;
  background:rgba(10,15,44,.88);font-size:12px;font-weight:700;color:#fff;line-height:1;
  box-shadow:0 0 18px rgba(0,0,0,.12),0 0 16px currentColor;
}
.hand-badge.lp{left:0;top:74px;color:var(--finger-lp)}
.hand-badge.lr{left:96px;top:26px;color:var(--finger-lr)}
.hand-badge.lm{left:110px;top:0;color:var(--finger-lm)}
.hand-badge.li{left:10px;top:20px;color:var(--finger-li)}
.hand-badge.thumb{right:2px;bottom:42px;color:var(--finger-thumb)}
.hand-right .hand-badge.rp{right:0;top:74px;color:var(--finger-rp)}
.hand-right .hand-badge.rr{right:96px;top:26px;color:var(--finger-rr)}
.hand-right .hand-badge.rm{right:110px;top:0;color:var(--finger-rm)}
.hand-right .hand-badge.ri{right:10px;top:20px;color:var(--finger-ri)}
.hand-right .hand-badge.thumb{left:2px;right:auto;bottom:42px;color:var(--finger-thumb)}
.hand-figure .digit.active,
.hand-figure .hand-badge.active,
.finger.active{
  filter:brightness(1.14);
  transform:scale(1.04);
}
.hand-figure .digit.active::before{box-shadow:0 0 24px currentColor, 0 0 30px currentColor}
.hand-figure .hand-badge.active{background:rgba(255,255,255,.10)}

.result-panel{
  margin-top:22px;padding:20px;border-radius:20px;border:1px solid rgba(66,214,154,.26);
  background:rgba(66,214,154,.07);
  display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center
}
.result-panel[hidden]{display:none}
.result-panel h3{margin:5px 0 3px;font-size:23px}
.result-panel p{margin:0;color:var(--muted)}
.result-metrics{display:flex;gap:9px}
.result-metrics div{min-width:90px;text-align:center;padding:10px;border-radius:12px;background:rgba(0,0,0,.14)}
.result-metrics strong,.result-metrics span{display:block}
.result-metrics strong{font-size:18px}
.result-metrics span{font-size:10px;color:var(--muted);margin-top:2px}
.primary-btn{
  border:0;border-radius:14px;padding:13px 18px;color:white;font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  box-shadow:0 0 28px rgba(121,123,255,.22)
}

.tip-card{
  margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 20px;
  border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)
}
.tip-main{display:flex;gap:14px;align-items:flex-start}
.tip-icon{font-size:24px}
.tip-card strong{display:block;margin-bottom:3px}
.tip-card p{margin:0;color:var(--muted);line-height:1.5}
.tip-side{min-width:220px;padding-left:18px;border-left:1px solid rgba(138,160,255,.22)}

footer{
  display:flex;justify-content:space-between;gap:20px;padding:18px 2px 28px;
  color:#8190bb;font-size:11px
}

@media(max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);}
  .hero-stats{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}
  .hero-stats div{min-height:88px}
  .keyboard-stage{grid-template-columns:1fr}
  .hand-card{display:none}
}
@media(max-width:900px){
  .topbar{align-items:flex-start;padding-top:12px}
  .topbar-side{width:100%;justify-content:space-between}
  .lesson-nav{display:block}
  .lesson-buttons{justify-content:flex-start;margin-top:12px}
  .trainer-head{grid-template-columns:1fr}
  .trainer-actions{justify-content:flex-start}
  .next-key-card{min-width:0;width:100%}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .result-panel{grid-template-columns:1fr}
  .result-metrics{flex-wrap:wrap}
  .tip-card{grid-template-columns:1fr}
  .tip-side{border-left:0;border-top:1px solid rgba(138,160,255,.22);padding-left:0;padding-top:12px;min-width:0}
}
@media(max-width:640px){
  .app-shell{width:min(100% - 16px,1380px)}
  .topbar{min-height:auto}
  .topbar-note{display:none}
  .ghost-btn{font-size:12px;padding:9px 12px}
  .hero{padding:18px;border-radius:24px;grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .hero-center{padding:16px}
  .hero-rocket{font-size:84px;height:120px}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .hero-stats strong{font-size:24px}
  .hero-stats span{font-size:12px}
  .trainer-card{padding:18px;border-radius:22px}
  .trainer-head h2{font-size:22px}
  .trainer-head p{font-size:15px}
  .target-wrap{padding:16px}
  .target-text{font-size:22px;min-height:86px}
  .typing-field{font-size:22px;height:52px}
  .keyboard-zone{padding:10px}
  .keyboard{min-width:680px}
  .key{height:50px;font-size:14px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  footer{display:block}
  footer span{display:block;margin-top:5px}
}


/* SAK_HIDE_HANDS_NO_SCROLL_V1 */
.keyboard-stage{
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.hand-card{
  display: none !important;
}

.keyboard-zone{
  width: 100% !important;
  padding: 12px !important;
}

.keyboard-wrap{
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
}

.keyboard{
  width: 100% !important;
  min-width: 0 !important;
  gap: 4px !important;
}

.key-row{
  gap: 4px !important;
  width: 100% !important;
}

.key{
  height: 46px !important;
  font-size: 13px !important;
  min-width: 0 !important;
}

.key.wide{ flex: 1.35 1 0 !important; }
.key.xwide{ flex: 1.70 1 0 !important; }
.key.space{ flex: 3.30 1 0 !important; }

@media (max-width: 640px){
  .keyboard-zone{
    padding: 8px !important;
  }

  .keyboard{
    gap: 3px !important;
  }

  .key-row{
    gap: 3px !important;
  }

  .key{
    height: 34px !important;
    font-size: 11px !important;
    border-radius: 8px !important;
  }

  .keyboard-note{
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}
/* /SAK_HIDE_HANDS_NO_SCROLL_V1 */


/* SAK_FINGER_LEGEND_SIDE_V1 */
.keyboard-stage{
  grid-template-columns: 200px minmax(0,1fr) 200px !important;
  gap: 12px !important;
  align-items: stretch !important;
}

.hand-card{
  display: block !important;
  padding: 14px !important;
}

.hand-figure,
.hand-shape,
.hand-badge,
.palm,
.digit{
  display: none !important;
}

.finger-legend-side{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finger-legend-item{
  --legend-color: #8ea0ff;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(138,160,255,.18);
  background: rgba(255,255,255,.04);
}

.finger-legend-item span{
  color: #eef2ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.legend-dot{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex: 0 0 16px;
  background: var(--legend-color);
  box-shadow: 0 0 0 2px rgba(255,255,255,.05), 0 0 16px var(--legend-color);
}

.finger-legend-item.lp{ --legend-color: var(--finger-lp); }
.finger-legend-item.lr{ --legend-color: var(--finger-lr); }
.finger-legend-item.lm{ --legend-color: var(--finger-lm); }
.finger-legend-item.li{ --legend-color: var(--finger-li); }
.finger-legend-item.ri{ --legend-color: var(--finger-ri); }
.finger-legend-item.rm{ --legend-color: var(--finger-rm); }
.finger-legend-item.rr{ --legend-color: var(--finger-rr); }
.finger-legend-item.rp{ --legend-color: var(--finger-rp); }
.finger-legend-item.thumb{ --legend-color: var(--finger-thumb); }

.keyboard-zone{
  width: 100% !important;
  padding: 12px !important;
}

.keyboard-wrap{
  overflow-x: hidden !important;
  padding-bottom: 0 !important;
}

.keyboard{
  width: 100% !important;
  min-width: 0 !important;
  gap: 5px !important;
}

.key-row{
  width: 100% !important;
  gap: 5px !important;
}

.key{
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  font-size: 13px !important;
}

.key.wide{ flex: 1.35 1 0 !important; }
.key.xwide{ flex: 1.7 1 0 !important; }
.key.space{ flex: 3.4 1 0 !important; }

@media (max-width: 1100px){
  .keyboard-stage{
    grid-template-columns: 1fr !important;
  }

  .hand-card{
    padding: 12px !important;
  }

  .finger-legend-side{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px){
  .finger-legend-side{
    grid-template-columns: 1fr;
  }

  .keyboard-zone{
    padding: 8px !important;
  }

  .keyboard{
    gap: 3px !important;
  }

  .key-row{
    gap: 3px !important;
  }

  .key{
    height: 34px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }

  .finger-legend-item{
    min-height: 40px;
    padding: 8px 10px;
  }

  .finger-legend-item span{
    font-size: 13px;
  }
}
/* /SAK_FINGER_LEGEND_SIDE_V1 */




/* =========================================================
   TYPING TRAINER V2 — STAGE 1B
   ========================================================= */

.course-overview{
  margin:28px 0 24px;
  padding:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:
    linear-gradient(
      135deg,
      rgba(111,93,255,.11),
      rgba(60,203,255,.055)
    );
}

.course-overview-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.course-overview-head h2{
  margin:5px 0 0;
}

.course-progress-value{
  text-align:right;
  flex:0 0 auto;
}

.course-progress-value strong{
  display:block;
  font-size:30px;
  line-height:1;
}

.course-progress-value span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}

.course-progress-track{
  position:relative;
  height:12px;
  margin-top:18px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

.course-progress-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      var(--violet),
      #69d5ff
    );
  transition:width .35s ease;
}

.stage-buttons{
  display:grid;
  grid-template-columns:
    repeat(7,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}

.stage-btn{
  min-width:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:11px 8px;
  color:var(--muted);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:.18s ease;
}

.stage-btn span,
.stage-btn small{
  display:block;
}

.stage-btn span{
  color:inherit;
  font-weight:800;
  font-size:12px;
}

.stage-btn small{
  margin-top:4px;
  opacity:.75;
  font-size:11px;
}

.stage-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
}

.stage-btn.active{
  color:#fff;
  border-color:rgba(155,111,255,.55);
  background:rgba(155,111,255,.18);
}

.stage-btn.done{
  border-color:rgba(78,220,152,.35);
}

.stage-btn.done small{
  color:var(--green);
}

.lesson-buttons{
  max-width:740px;
}

.lesson-btn{
  min-width:64px;
  min-height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.lesson-btn > span{
  font-size:14px;
  font-weight:900;
}

.lesson-btn > small{
  max-width:62px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:9px;
  letter-spacing:.02em;
}

.lesson-btn.locked{
  cursor:not-allowed;
  opacity:.42;
  filter:saturate(.5);
}

.lesson-btn.locked:hover{
  background:transparent;
}

.lesson-goals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.lesson-goals span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:12px;
}

.lesson-goals strong{
  color:var(--text);
}

.result-stars{
  margin:8px 0 5px;
  font-size:27px;
  line-height:1;
  letter-spacing:3px;
  color:#ffd65a;
}

@media (max-width:1050px){
  .stage-buttons{
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .course-overview-head{
    display:block;
  }

  .course-progress-value{
    margin-top:14px;
    text-align:left;
  }

  .stage-buttons{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   TYPING TRAINER V2 — XP / LEVEL / STREAK / ACHIEVEMENTS
   ========================================================= */

.motivation-panel{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:16px;
  margin:0 0 24px;
}

.motivation-main,
.achievement-area{
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(255,255,255,.025);
}

.motivation-main{
  display:grid;
  grid-template-columns:auto minmax(180px,1fr) auto auto;
  align-items:center;
  gap:20px;
  padding:18px 20px;
}

.motivation-level strong{
  display:block;
  margin-top:4px;
  font-size:20px;
}

.motivation-xp-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
}

.motivation-xp-head strong{
  color:var(--text);
}

.motivation-xp-track{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
}

.motivation-xp-bar{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    #865cff,
    #cf6cff
  );
  transition:width .4s ease;
}

.motivation-stat{
  min-width:82px;
  text-align:center;
}

.motivation-stat span{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.motivation-stat strong{
  display:block;
  margin-top:4px;
  font-size:16px;
}

.motivation-panel.guest{
  opacity:.78;
}

.achievement-area{
  padding:16px;
}

.achievement-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:11px;
}

.achievement-head strong{
  display:block;
  margin-top:3px;
  font-size:14px;
}

.achievement-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.achievement-chip{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:8px 10px;
  border:1px solid rgba(255,214,90,.16);
  border-radius:12px;
  background:rgba(255,214,90,.045);
}

.achievement-icon{
  flex:0 0 auto;
  font-size:20px;
}

.achievement-copy{
  min-width:0;
}

.achievement-copy strong,
.achievement-copy small{
  display:block;
}

.achievement-copy strong{
  font-size:11px;
}

.achievement-copy small{
  margin-top:2px;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:9px;
}

.achievement-empty{
  color:var(--muted);
  font-size:11px;
}

.achievement-toast{
  position:fixed;
  z-index:9999;
  right:22px;
  bottom:22px;

  display:flex;
  align-items:center;
  gap:12px;

  width:min(360px,calc(100vw - 32px));
  padding:15px 17px;

  border:1px solid rgba(255,214,90,.25);
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(24,31,67,.98),
      rgba(47,33,83,.98)
    );

  box-shadow:
    0 18px 50px rgba(0,0,0,.42);

  opacity:0;
  transform:translateY(16px);
  transition:.25s ease;
}

.achievement-toast.show{
  opacity:1;
  transform:translateY(0);
}

.achievement-toast-icon{
  font-size:32px;
}

.achievement-toast span,
.achievement-toast strong,
.achievement-toast small{
  display:block;
}

.achievement-toast span{
  color:#ffd65a;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.achievement-toast strong{
  margin-top:2px;
  font-size:15px;
}

.achievement-toast small{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

@media (max-width:950px){
  .motivation-panel{
    grid-template-columns:1fr;
  }

  .motivation-main{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:600px){
  .motivation-main{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .motivation-xp{
    grid-column:1 / -1;
    grid-row:2;
  }
}


/* =========================================================
   PRACTICE MODE SWITCHER
   ========================================================= */

.mode-switcher{
  display:flex;
  gap:8px;
  margin:0 0 18px;
}

.mode-btn{
  flex:0 1 auto;
  padding:10px 15px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;

  background:rgba(255,255,255,.035);
  color:var(--muted);

  font-size:12px;
  font-weight:800;

  cursor:pointer;
  transition:.18s ease;
}

.mode-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
}

.mode-btn.active{
  color:#fff;
  border-color:rgba(155,111,255,.55);
  background:rgba(155,111,255,.18);
}

.practice-panel{
  margin:0 0 20px;
  padding:19px 20px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      rgba(155,111,255,.08),
      rgba(255,255,255,.018)
    );
}

.practice-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.practice-head h2{
  margin:4px 0 4px;
}

.practice-head p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.practice-bonus{
  flex:0 0 auto;

  padding:8px 12px;

  border:1px solid rgba(255,214,90,.2);
  border-radius:999px;

  background:rgba(255,214,90,.07);
  color:#ffd65a;

  font-size:12px;
  font-weight:900;
}

.practice-goals{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.practice-goals span{
  padding:7px 10px;

  border-radius:999px;

  background:rgba(255,255,255,.05);
  color:var(--muted);

  font-size:11px;
}

.practice-goals strong{
  color:var(--text);
}

@media (max-width:650px){
  .mode-switcher{
    display:grid;
    grid-template-columns:1fr;
  }

  .practice-head{
    display:block;
  }

  .practice-bonus{
    display:inline-block;
    margin-top:10px;
  }
}


/* =========================================================
   TOURNAMENTS V1
   ========================================================= */

.tournament-panel{
  margin:0 0 22px;
  padding:20px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      rgba(255,193,77,.055),
      rgba(155,111,255,.06)
    );
}

.tournament-head,
.tournament-leaderboard-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.tournament-head h2,
.tournament-leaderboard-head h3{
  margin:4px 0;
}

.tournament-head p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.tournament-refresh-btn,
.tournament-back-btn{
  flex:0 0 auto;
  padding:9px 12px;

  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;

  color:var(--text);
  background:rgba(255,255,255,.04);

  cursor:pointer;
}

.tournament-list{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
  margin-top:18px;
}

.tournament-card{
  padding:16px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;

  background:rgba(255,255,255,.025);
}

.tournament-card.state-active{
  border-color:rgba(72,226,157,.3);
}

.tournament-card.state-upcoming{
  border-color:rgba(104,170,255,.22);
}

.tournament-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.tournament-card h3{
  margin:5px 0 5px;
  font-size:16px;
}

.tournament-card p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.tournament-state{
  display:inline-block;
  font-size:10px;
  font-weight:800;
}

.tournament-action-btn{
  flex:0 0 auto;

  padding:9px 12px;

  border:1px solid rgba(155,111,255,.45);
  border-radius:12px;

  background:rgba(155,111,255,.15);
  color:#fff;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

.tournament-action-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.tournament-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin-top:13px;
}

.tournament-meta span{
  padding:6px 8px;

  border-radius:999px;

  background:rgba(255,255,255,.04);
  color:var(--muted);

  font-size:9px;
}

.tournament-ranking-link{
  margin-top:12px;
  padding:0;

  border:0;
  background:none;

  color:#a997ff;

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}

.tournament-empty{
  grid-column:1 / -1;

  padding:28px;

  border:1px dashed rgba(255,255,255,.1);
  border-radius:16px;

  color:var(--muted);
  text-align:center;
  font-size:12px;
}

.tournament-leaderboard-panel{
  margin-top:20px;
}

.tournament-leaderboard{
  margin-top:14px;
}

.leaderboard-row{
  display:grid;

  grid-template-columns:
    44px
    minmax(130px,1fr)
    110px
    80px
    90px;

  align-items:center;
  gap:10px;

  padding:11px 12px;

  border-bottom:
    1px solid rgba(255,255,255,.06);

  font-size:11px;
}

.leaderboard-position{
  font-size:16px;
  color:#ffd65a;
}

.leaderboard-name{
  font-weight:800;
}

@media (max-width:800px){
  .tournament-list{
    grid-template-columns:1fr;
  }

  .leaderboard-row{
    grid-template-columns:
      34px
      1fr
      90px;
  }

  .leaderboard-row > :nth-child(4),
  .leaderboard-row > :nth-child(5){
    display:none;
  }
}

@media (max-width:600px){
  .tournament-head,
  .tournament-leaderboard-head,
  .tournament-card-top{
    display:block;
  }

  .tournament-action-btn,
  .tournament-refresh-btn,
  .tournament-back-btn{
    margin-top:10px;
  }
}


/* =========================================================
   TOURNAMENT ADMIN
   ========================================================= */

.tournament-admin-panel{
  margin-top:18px;
  padding:18px;

  border:1px solid rgba(255,196,82,.18);
  border-radius:18px;

  background:rgba(255,196,82,.035);
}

.tournament-admin-head h3{
  margin:4px 0;
}

.tournament-admin-head p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.tournament-admin-form{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:12px;
  margin-top:16px;
}

.tournament-admin-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tournament-admin-form label > span{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}

.tournament-admin-form input,
.tournament-admin-form textarea{
  width:100%;

  padding:10px 11px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;

  background:rgba(3,9,34,.55);
  color:var(--text);

  font:inherit;
  font-size:11px;

  box-sizing:border-box;
}

.tournament-admin-form textarea{
  resize:vertical;
  min-height:110px;
}

.admin-field-wide{
  grid-column:1 / -1;
}

.admin-publish-field{
  flex-direction:row !important;
  align-items:center;
}

.admin-publish-field input{
  width:auto;
}

.tournament-admin-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.tournament-admin-actions button,
.tournament-admin-existing button,
.admin-tournament-card-actions button,
.admin-attempts-head button{
  padding:8px 11px;

  border:1px solid rgba(155,111,255,.35);
  border-radius:10px;

  background:rgba(155,111,255,.12);
  color:#fff;

  font-size:10px;
  font-weight:800;

  cursor:pointer;
}

#adminTournamentMessage{
  color:var(--muted);
  font-size:10px;
}

.tournament-admin-existing{
  margin-top:20px;
}

.tournament-admin-existing-head,
.admin-attempts-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.admin-tournament-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.admin-tournament-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;

  padding:11px 12px;

  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;

  background:rgba(255,255,255,.025);
}

.admin-tournament-card strong,
.admin-tournament-card small{
  display:block;
}

.admin-tournament-card small{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
}

.admin-tournament-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.admin-attempts-panel{
  margin-top:18px;
  padding-top:16px;

  border-top:
    1px solid rgba(255,255,255,.07);
}

.admin-attempts-list{
  display:grid;
  gap:7px;
  margin-top:10px;
}

.admin-attempt-row{
  display:grid;

  grid-template-columns:
    minmax(130px,1fr)
    minmax(150px,1fr)
    minmax(120px,1fr);

  gap:10px;
  align-items:center;

  padding:9px 10px;

  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;

  font-size:10px;
}

.admin-attempt-row.suspicious{
  border-color:rgba(255,95,110,.38);
  background:rgba(255,95,110,.05);
}

@media (max-width:700px){
  .tournament-admin-form{
    grid-template-columns:1fr;
  }

  .admin-field-wide{
    grid-column:auto;
  }

  .admin-tournament-card{
    display:block;
  }

  .admin-tournament-card-actions{
    margin-top:9px;
  }

  .admin-attempt-row{
    grid-template-columns:1fr;
  }
}