@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Mono:wght@400;500;600&family=Montserrat:wght@400;500;600;700;800&family=Rubik+Mono+One&family=Space+Mono:wght@400;700&family=Ubuntu+Mono:wght@400;700&family=VT323&display=swap");
@import url("./theme.css");
@import url("./components/Navbar/styles.css");
@import url("./components/Card/styles.css");
@import url("./components/Modal/styles.css");
@import url("./components/LanguageSwitcher/styles.css");
@import url("./components/ThemeToggle/styles.css");

@font-face{
  font-family:"Comfortaa";
  src:url("/assets/fonts/Comfortaa-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Merriweather";
  src:url("/assets/fonts/Merriweather-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Noto Sans";
  src:url("/assets/fonts/NotoSans-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Play";
  src:url("/assets/fonts/Play-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"SN Pro";
  src:url("/assets/fonts/SNPro-Variable.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:var(--t-bg);
  --panel:var(--t-surface-alt);
  --panel-alt:var(--t-surface-alt2);
  --text:var(--t-text);
  --muted:var(--t-text-muted);
  --accent:var(--t-accent);
  --accent-2:var(--t-accent-2);
  --accent-soft:var(--t-accent-soft);
  --danger:var(--t-danger);
  --line-h:56px;
  --row-gap:10px;
  --lines-viewport-extra:20px;
  --typing-font:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  --topbar-offset:86px;
}

@keyframes page-intro-fade{
  from{ opacity:0; transform:translateY(14px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.trainer-intro-card,
.testing-intro-card,
.analysis-intro-card,
.shooter-intro-card,
.race-intro-card,
.course-info-inner{
  animation:page-intro-fade .45s ease-out both;
}

@media (prefers-reduced-motion: reduce){
  .trainer-intro-card,
  .testing-intro-card,
  .analysis-intro-card,
  .shooter-intro-card,
  .race-intro-card,
  .course-info-inner{
    animation:none;
  }
}
*{box-sizing:border-box}
*{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
*::-webkit-scrollbar{
  display:none;
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:var(--t-bg-body, #1c1c1b);
  color:var(--text);
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background: var(--t-bg-body);
  z-index:-2;
  pointer-events:none;
}
body.page-loading .page{
  opacity:0;
  pointer-events:none;
}
body.page-loading .page-shooter{
  opacity:0;
  pointer-events:none;
}
main#app{min-height:100vh}
.page{
  max-width:1200px;
  margin:0 auto;
  padding:28px 18px 48px;
}
body.page-loading .page-profile .profile-menu-btn{
  background-color:transparent;
  color:#E5E7EB;
  border:1px solid transparent;
  appearance:none;
  -webkit-appearance:none;
}
body.page-loading .page-trainer .cbx-btn,
body.page-loading .page-trainer .count-btn,
body.page-loading .page-trainer .count-mode,
body.page-loading .page-trainer .time-btn{
  background:transparent;
  color:#E5E7EB;
  border:1px solid transparent;
  appearance:none;
  -webkit-appearance:none;
}
body.page-loading .page-records .filter-btn{
  background:rgba(255,255,255,.03);
  color:var(--t-text-primary, #E5E7EB);
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  border-radius:12px;
  padding:8px 16px;
  font-weight:600;
  appearance:none;
  -webkit-appearance:none;
}
.btn{
  --btn-accent: var(--t-btn-border, #bba6ff);
  border-radius:0.6em;
  font-size:0.95rem;
  padding:0.75em 2.4em;
  letter-spacing:0.04em;
  position:relative;
  font-family:inherit;
  overflow:hidden;
  line-height:1.4;
  border:2px solid var(--btn-accent);
  background:var(--t-btn-bg);
  color:var(--t-btn-color, var(--btn-accent));
  box-shadow:var(--t-btn-shadow, inset 0 0 10px rgba(124,107,255,0.35), 0 0 10px 3px rgba(124,107,255,0.15));
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  transition:color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.btn:hover{
  color:var(--t-btn-hover-color, #f0f5ff);
  box-shadow:var(--t-btn-hover-shadow, inset 0 0 12px rgba(124,107,255,0.55), 0 0 11px 3px rgba(124,107,255,0.3));
}
.btn::before{
  content:"";
  position:absolute;
  left:-5em;
  width:4em;
  height:100%;
  top:0;
  transition:transform .4s ease-in-out;
  background:var(--t-btn-sweep);
}
.btn:hover::before{
  transform:translateX(18em);
}
.btn.ok{
  border-color:var(--accent-2);
  color:var(--accent-2);
}
.btn.warn{
  border-color:var(--danger);
  color:var(--danger);
}
.input{
  background:var(--t-input-bg, #1f1f1f);
  color:var(--text);
  border:1px solid var(--t-input-border, rgba(255,255,255,0.05));
  border-radius:8px;
  padding:8px;
}
.hidden{display:none}

.layout-notice{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1200;
  width:fit-content;
  max-width:calc(100vw - 24px);
  padding:14px 16px;
  border-radius:20px;
  border:1px solid var(--t-notice-border, rgba(255,255,255,.08));
  background:var(--t-notice-bg, rgba(255,255,255,.03));
  color:var(--t-text-secondary, #e8eefc);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  box-shadow:var(--t-shadow-lg, 0 20px 60px rgba(2,8,23,.28));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  animation:layoutNoticeIn 180ms ease-out;
}

.layout-notice::before{
  content:'⚠';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-right:8px;
  border-radius:999px;
  background:rgba(245,199,122,0.16);
  color:#f8d38f;
  font-size:12px;
  font-weight:700;
  vertical-align:middle;
}

.layout-notice.hidden{
  display:none;
}

.cookie-consent-panel{
  position:fixed;
  left:auto;
  right:18px;
  bottom:18px;
  transform:none;
  z-index:1300;
  margin:0;
  width:auto;
  max-width:min(560px, calc(100vw - 36px));
  padding:6px 8px 5px;
  border-radius:10px;
  border:1px solid var(--t-cookie-border, rgba(148,163,184,.2));
  background:var(--t-cookie-bg);
  box-shadow:var(--t-shadow-lg, 0 16px 42px rgba(2,6,23,.35));
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
}
.cookie-consent-panel.cookie-consent-expanded{
  width:min(560px, calc(100vw - 36px));
}

.cookie-consent-title{
  margin:0;
  font-size:12px;
  color:var(--t-text-primary, #f8fafc);
}

.cookie-consent-text{
  margin:5px 0 6px;
  color:var(--t-text-muted, rgba(226,232,240,.84));
  font-size:10px;
  line-height:1.35;
}
.cookie-consent-collapsible{
  display:none;
}
.cookie-consent-expanded .cookie-consent-collapsible{
  display:flex;
}

.cookie-consent-details{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin-bottom:6px;
}
.cookie-consent-details.hidden{
  display:none;
}

.cookie-consent-row{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:flex-start;
  padding:6px;
  border-radius:8px;
  border:1px solid var(--t-cookie-border, rgba(148,163,184,.2));
  background:var(--t-surface, rgba(15,23,42,.38));
}

.cookie-consent-row-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.cookie-consent-row-copy strong{
  color:var(--t-text-secondary, #e2e8f0);
  font-size:10px;
}

.cookie-consent-row-copy small{
  color:var(--t-text-muted, rgba(148,163,184,.9));
  font-size:9px;
  line-height:1.2;
}

.cookie-consent-row input{
  margin-top:1px;
  width:13px;
  height:13px;
}

.cookie-consent-link{
  color:var(--t-accent-blue-light, #93c5fd);
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:10px;
}

.cookie-consent-links{
  display:flex;
  gap:10px;
  align-items:center;
}

.cookie-consent-actions{
  margin-top:4px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  overflow-x:visible;
  gap:4px;
}
.cookie-consent-expanded .cookie-consent-actions{
  margin-top:6px;
}

.cookie-btn{
  flex:0 0 auto;
  white-space:nowrap;
  border-radius:6px;
  border:1px solid var(--t-cookie-btn-border, rgba(148,163,184,.32));
  background:var(--t-cookie-btn-bg, rgba(15,23,42,.56));
  color:var(--t-text-secondary, #dbeafe);
  font-size:9px;
  font-weight:600;
  padding:5px 7px;
  line-height:1.1;
  cursor:pointer;
  box-shadow:none;
  min-height:24px;
}

.cookie-btn:hover{
  border-color:var(--t-border-hover, rgba(191,219,254,.52));
  background:var(--t-surface-hover, rgba(30,41,59,.72));
}

.cookie-btn-primary{
  border-color:var(--t-accent-blue-border, rgba(96,165,250,.52));
  background:var(--t-accent-blue-soft, rgba(30,64,175,.34));
}

.cookie-btn-ghost{
  background:var(--t-surface, rgba(15,23,42,.36));
}
.cookie-btn-chevron{
  background:var(--t-surface, rgba(15,23,42,.36));
  padding:4px 5px;
  min-height:22px;
  transition:transform .2s ease;
}
.cookie-btn-chevron.cookie-chevron-open svg{
  transform:rotate(180deg);
}

.cookie-consent-manage{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:1290;
  border-radius:999px;
  border:1px solid var(--t-accent-blue-border, rgba(147,197,253,.34));
  background:var(--t-surface, rgba(15,23,42,.68));
  color:var(--t-text-secondary, #dbeafe);
  font-size:9px;
  font-weight:700;
  padding:5px 8px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

@keyframes layoutNoticeIn{
  from{opacity:0;transform:translate3d(0,-10px,0) scale(0.98)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media (max-width:640px){
  .layout-notice{
    top:12px;
    right:12px;
    left:12px;
    max-width:none;
  }

  .cookie-consent-panel{
    left:auto;
    right:12px;
    bottom:12px;
    width:min(560px, calc(100vw - 24px));
    padding:7px;
    border-radius:9px;
  }

  .cookie-consent-details{
    grid-template-columns:1fr;
  }

  .cookie-btn{
    min-width:72px;
  }

  .cookie-consent-manage{
    right:12px;
    bottom:12px;
  }
}

/* Typing font override */
.word,
.sentence,
.words,
.page-testing .word,
.page-testing .sentence,
.page-trainer .word,
.page-trainer .sentence,
.page-analysis .word,
.page-analysis .sentence{
  font-family:var(--typing-font) !important;
}

/* On-screen keyboard */
.typing-keyboard{
  display:flex;
  flex-direction:column;
  gap:5px;
  background:var(--t-kb-wrap-bg, rgba(255,255,255,.02));
  padding:14px;
  border-radius:22px;
  border:1px solid var(--t-kb-wrap-border, rgba(255,255,255,.06));
  width:min(860px, 100%);
}
.typing-keyboard.keyboard-hidden{display:none}
.keyboard-row{display:flex;justify-content:center;gap:5px}
.typing-keyboard[data-layout="ridna"] .keyboard-row{
  justify-content:flex-start;
  max-width:787px;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]){
  width:fit-content;
  max-width:100%;
  padding:6px 8px;
  gap:3px;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-row{
  justify-content:flex-start;
  gap:3px;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-key{
  position:relative;
  z-index:1;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-row:last-child{
  justify-content:flex-start;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-key[data-key="Enter"]{
  height:87px!important;
  margin-top:-45px;
  align-self:flex-end;
  z-index:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-bottom:0;
  border:none;
  background:transparent;
  box-shadow:none;
  color:var(--t-kb-key-color, #e5e7eb);
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-key[data-key="Enter"]::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:39px;
  height:42px;
  box-sizing:border-box;
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-bottom-left-radius:8px;
  border-bottom-right-radius:0;
  z-index:-1;
  pointer-events:none;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"]) .keyboard-key[data-key="Enter"]::after{
  content:"";
  position:absolute;
  right:0;
  top:41px;
  width:100%;
  height:46px;
  box-sizing:border-box;
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  border-top:none;
  border-top-left-radius:0;
  border-top-right-radius:0;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  z-index:-1;
  pointer-events:none;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"]) .keyboard-key.key-grey{
  background:transparent!important;
  border-color:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"]) .keyboard-key.key-grey.active{
  background:transparent!important;
  border-color:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.typing-keyboard[data-layout="ridna"]{
  position:relative;
}
.typing-keyboard[data-layout="ridna"] .keyboard-row-space{
  justify-content:center;
}
.keyboard-key{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  width:48px;
  height:48px;
  border-radius:10px;
  border:1px solid var(--t-kb-key-border, rgba(255,255,255,.12));
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  font-size:16px;
  font-weight:600;
  line-height:1.1;
  color:var(--t-kb-key-color, #e5e7eb);
  transition:all .12s;
  text-transform:lowercase;
}
.keyboard-key-shift-label{
  position:absolute;
  top:5px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  line-height:1;
  font-weight:800;
  opacity:.72;
}
.keyboard-key-main-label{
  display:block;
  transform:translateY(5px);
}

/* ── Home keys ── */
.keyboard-key.key-home{
  border-bottom:2px solid rgba(255,255,255,.22);
}
.keyboard-key.key-bump::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:9px;
  height:1.5px;
  border-radius:2px;
  transform:translateX(-50%);
  background:currentColor;
  opacity:.35;
}
.keyboard-key.key-home-guide{
  transform:translateY(-1px);
  color:#f8fafc;
  box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(255,255,255,.12);
}
.keyboard-key.finger-lp.key-home-guide{background:rgba(197,202,233,.58)!important;border-color:rgba(210,215,245,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(197,202,233,.42);}
.keyboard-key.finger-lr.key-home-guide{background:rgba(144,202,249,.58)!important;border-color:rgba(170,218,255,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(144,202,249,.42);}
.keyboard-key.finger-lm.key-home-guide{background:rgba(244,143,177,.58)!important;border-color:rgba(255,170,200,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(244,143,177,.42);}
.keyboard-key.finger-li.key-home-guide{background:rgba(128,203,196,.58)!important;border-color:rgba(160,225,218,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(128,203,196,.42);}
.keyboard-key.finger-ri.key-home-guide{background:rgba(255,245,157,.58)!important;border-color:rgba(255,250,180,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(255,245,157,.42);}
.keyboard-key.finger-rm.key-home-guide{background:rgba(255,171,145,.58)!important;border-color:rgba(255,195,175,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(255,171,145,.42);}
.keyboard-key.finger-rr.key-home-guide{background:rgba(255,204,128,.58)!important;border-color:rgba(255,220,160,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(255,204,128,.42);}
.keyboard-key.finger-rp.key-home-guide{background:rgba(165,214,167,.58)!important;border-color:rgba(190,230,192,.95)!important;box-shadow:0 0 0 1px rgba(255,255,255,.28) inset, 0 0 18px rgba(165,214,167,.42);}

/* ── Grey utility keys ── */
.keyboard-key.key-grey{
  background:var(--t-kb-grey-bg, rgba(207,216,220,0.08));
  border-color:var(--t-kb-grey-border, rgba(207,216,220,0.18));
  color:var(--t-kb-grey-color, rgba(207,216,220,0.5));
  font-size:10px;
  font-weight:500;
  text-transform:none;
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-key.key-grey{
  background:var(--t-kb-key-bg, rgba(255,255,255,.04));
  border-color:var(--t-kb-key-border, rgba(255,255,255,.12));
  color:var(--t-kb-key-color, #e5e7eb);
  font-size:16px;
  font-weight:600;
}
.keyboard-key.key-w1{width:58px;}
.keyboard-key.key-w2{width:68px;}
.keyboard-key.key-w3{width:84px;}

/* ── Two Enter keys for Ridna (one per row) ── */
.typing-keyboard[data-layout="ridna"] .ridna-enter{
  position:absolute;
  right:14px;
  height:48px!important;
  z-index:10;
}
.typing-keyboard[data-layout="ridna"] .ridna-enter-top{
  top:67px;
  width:68px!important;
  height:48px!important;
  border-bottom-color:transparent!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
}
.typing-keyboard[data-layout="ridna"] .ridna-enter-bottom{
  top:115px;
  width:57px!important;
  height:53px!important;
  border-top-color:transparent!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}

.typing-keyboard[data-layout="ridna"] .keyboard-row:nth-child(4) .keyboard-key[data-key="Shift"]:last-child{
  flex-grow:1!important;
  min-width:48px;
  width:auto!important;
}

/* ── Windows layouts: stretch right-side Enter and Shift to align with Backspace ── */
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]){
  width:fit-content;
  max-width:min(860px,100%);
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-row{
  justify-content:flex-start;
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-row:nth-child(3) .keyboard-key[data-key="Enter"]:last-child{
  flex-grow:1!important;
  min-width:68px;
  width:auto!important;
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-row:nth-child(4) .keyboard-key[data-key="Shift"]:last-child{
  flex-grow:1!important;
  min-width:84px;
  width:auto!important;
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-row-space{
  justify-content:flex-start;
  padding-left:195px;
}
.typing-keyboard:is([data-layout="uk"],[data-layout="en"],[data-layout="colemak"],[data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="tr"],[data-layout="sk"],[data-layout="sv"],[data-layout="nl"],[data-layout="ridna"],[data-layout="jp"]) .keyboard-space{
  width:260px;
}

/* ── Finger colors (pastel palette) ── */
.keyboard-key.finger-lp{border-color:rgba(197,202,233,0.5);background:rgba(197,202,233,0.18);}
.keyboard-key.finger-lr{border-color:rgba(144,202,249,0.5);background:rgba(144,202,249,0.18);}
.keyboard-key.finger-lm{border-color:rgba(244,143,177,0.5);background:rgba(244,143,177,0.18);}
.keyboard-key.finger-li{border-color:rgba(128,203,196,0.5);background:rgba(128,203,196,0.18);}
.keyboard-key.finger-ri{border-color:rgba(255,245,157,0.5);background:rgba(255,245,157,0.18);}
.keyboard-key.finger-rm{border-color:rgba(255,171,145,0.5);background:rgba(255,171,145,0.18);}
.keyboard-key.finger-rr{border-color:rgba(255,204,128,0.5);background:rgba(255,204,128,0.18);}
.keyboard-key.finger-rp{border-color:rgba(165,214,167,0.5);background:rgba(165,214,167,0.18);}
.keyboard-key.finger-lthumb{border-color:rgba(207,216,220,0.4);background:rgba(207,216,220,0.1);}
.keyboard-key.finger-rthumb{border-color:rgba(202,166,104,0.45);background:rgba(202,166,104,0.16);}
.keyboard-key.finger-thumb{border-color:rgba(207,216,220,0.4);background:rgba(207,216,220,0.1);}

/* ── Expected key highlight (bright finger color) ── */
.keyboard-key.active{transform:scale(1.1);color:#1a1a2e;font-weight:800;}
.keyboard-key.key-grey.active,
.keyboard-key[data-key="Shift"].active{
  background:rgb(197,202,233)!important;
  border-color:rgb(210,215,245)!important;
  color:#1a1a2e!important;
  box-shadow:0 0 20px rgba(197,202,233,0.55);
}
.keyboard-key.finger-lp.active{background:rgb(197,202,233)!important;border-color:rgb(210,215,245)!important;box-shadow:0 0 20px rgba(197,202,233,0.55);}
.keyboard-key.finger-lr.active{background:rgb(144,202,249)!important;border-color:rgb(170,218,255)!important;box-shadow:0 0 20px rgba(144,202,249,0.55);}
.keyboard-key.finger-lm.active{background:rgb(244,143,177)!important;border-color:rgb(255,170,200)!important;box-shadow:0 0 20px rgba(244,143,177,0.55);}
.keyboard-key.finger-li.active{background:rgb(128,203,196)!important;border-color:rgb(160,225,218)!important;box-shadow:0 0 20px rgba(128,203,196,0.55);}
.keyboard-key.finger-ri.active{background:rgb(255,245,157)!important;border-color:rgb(255,250,180)!important;box-shadow:0 0 20px rgba(255,245,157,0.55);}
.keyboard-key.finger-rm.active{background:rgb(255,171,145)!important;border-color:rgb(255,195,175)!important;box-shadow:0 0 20px rgba(255,171,145,0.55);}
.keyboard-key.finger-rr.active{background:rgb(255,204,128)!important;border-color:rgb(255,220,160)!important;box-shadow:0 0 20px rgba(255,204,128,0.55);}
.keyboard-key.finger-rp.active{background:rgb(165,214,167)!important;border-color:rgb(190,230,192)!important;box-shadow:0 0 20px rgba(165,214,167,0.55);}
.keyboard-key.finger-lthumb.active{background:rgb(207,216,220)!important;border-color:rgb(225,230,235)!important;box-shadow:0 0 20px rgba(207,216,220,0.55);}
.keyboard-key.finger-rthumb.active{background:rgb(202,166,104)!important;border-color:rgb(222,188,128)!important;box-shadow:0 0 20px rgba(202,166,104,0.55);}
.keyboard-key.finger-thumb.active{background:rgb(207,216,220)!important;border-color:rgb(225,230,235)!important;box-shadow:0 0 20px rgba(207,216,220,0.55);}
.keyboard-space.active,
.keyboard-key.keyboard-space.active,
.keyboard-key[data-key=" "].active{
  transform:none!important;
  box-shadow:none!important;
}

/* ── Correct / Wrong flash ── */
.keyboard-key.key-correct{
  background:rgba(74, 222, 128, 0.34)!important;
  color:#d1fae5!important;
  border-color:rgba(74, 222, 128, 0.55)!important;
  box-shadow:0 0 0 1px rgba(74, 222, 128, 0.2) inset, 0 0 12px rgba(74, 222, 128, 0.2);
}
.keyboard-key.key-wrong{
  background:rgba(248, 113, 113, 0.30)!important;
  color:#fee2e2!important;
  border-color:rgba(248, 113, 113, 0.55)!important;
  box-shadow:0 0 0 1px rgba(248, 113, 113, 0.18) inset, 0 0 10px rgba(248, 113, 113, 0.18);
}

.keyboard-key.key-heat{
  background:hsl(2 92% calc(96% - var(--key-heat, 0) * 44%))!important;
  border-color:hsl(1 90% calc(84% - var(--key-heat, 0) * 32%))!important;
  color:hsl(0 100% calc(26% + (1 - var(--key-heat, 0)) * 18%))!important;
  box-shadow:
    0 0 0 1px hsl(0 86% calc(72% - var(--key-heat, 0) * 26%) / .48) inset,
    0 0 calc(6px + var(--key-heat, 0) * 14px) hsl(1 88% calc(66% - var(--key-heat, 0) * 24%) / calc(.16 + var(--key-heat, 0) * .28));
}
.keyboard-key:active{transform:translateY(1px)}

/* ── Space bar ── */
.keyboard-space{
  --kb-space-height:38px;
  width:340px;
  height:var(--kb-space-height);
  font-size:11px;
  color:var(--t-kb-space-color, rgba(255,255,255,.35));
}
.keyboard-row-space{margin-top:4px}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"], [data-layout="jp_mac"]) .keyboard-row-space{justify-content:flex-start;padding-left:190px}
.typing-keyboard:is([data-layout="uk_mac"], [data-layout="de_mac"], [data-layout="en_mac"], [data-layout="pl_mac"], [data-layout="fr_mac"], [data-layout="it_mac"], [data-layout="es_mac"], [data-layout="pt_mac"], [data-layout="tr_mac"], [data-layout="sv_mac"], [data-layout="nl_mac"], [data-layout="sk_mac"], [data-layout="jp_mac"]) .keyboard-space{width:222px}

/* ── AltGr key (layouts with diacriticBase) ── */
.keyboard-alt-right{display:none}
.typing-keyboard:is([data-layout="pl"],[data-layout="pl_mac"],[data-layout="de"],[data-layout="de_mac"],[data-layout="fr"],[data-layout="fr_mac"],[data-layout="it"],[data-layout="it_mac"],[data-layout="pt"],[data-layout="pt_mac"],[data-layout="es"],[data-layout="es_mac"],[data-layout="sv"],[data-layout="sv_mac"],[data-layout="tr"],[data-layout="tr_mac"],[data-layout="sk"],[data-layout="sk_mac"]) .keyboard-alt-right{
  display:flex;
  width:64px;
  height:var(--kb-space-height, 38px);
  font-size:12px;
  font-weight:600;
}
.typing-keyboard:is([data-layout="pl"],[data-layout="de"],[data-layout="fr"],[data-layout="it"],[data-layout="pt"],[data-layout="es"],[data-layout="sv"],[data-layout="tr"],[data-layout="sk"]) .keyboard-alt-right{
  width:var(--kb-space-height, 38px);
  min-width:var(--kb-space-height, 38px);
  padding:0;
}

/* ── Keyboard + Hands visual wrapper ── */
.kb-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:16px auto 0;
}
.kb-visual.keyboard-hidden{display:none}
.kb-visual .typing-keyboard{margin:0;}

/* Horizontal row: [left hand] [keyboard] [right hand] */
.kb-row{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
}
.kb-hand-wrap{
  display:flex;
  align-items:flex-end;
  flex-shrink:0;
}
.kb-hand{
  display:block;
  width:150px;
  height:auto;
}

/* Finger fill colors */
.hand-finger[data-finger="lp"]{fill:rgb(197,202,233);}
.hand-finger[data-finger="lr"]{fill:rgb(144,202,249);}
.hand-finger[data-finger="lm"]{fill:rgb(244,143,177);}
.hand-finger[data-finger="li"]{fill:rgb(128,203,196);}
.hand-finger[data-finger="ri"]{fill:rgb(255,245,157);}
.hand-finger[data-finger="rm"]{fill:rgb(255,171,145);}
.hand-finger[data-finger="rr"]{fill:rgb(255,204,128);}
.hand-finger[data-finger="rp"]{fill:rgb(165,214,167);}
.hand-finger[data-finger="lthumb"]{fill:rgb(207,216,220);}
.hand-finger[data-finger="rthumb"]{fill:rgb(202,166,104);}
.hand-finger[data-finger="thumb"]{fill:rgb(202,166,104);}

/* Default: dim all fingers */
.kb-hand .hand-finger{
  opacity:0.18;
  transition:opacity .2s, filter .2s;
  filter:brightness(.6);
}
/* Active finger: bright glow */
.kb-hand .hand-finger.finger-active{
  opacity:1;
  filter:brightness(1.15);
}

.kb-finger-hint{
  display:none;
  margin-top:-2px;
}

@media (max-width:1100px){
  .kb-hand{width:120px;}
  .kb-row{gap:12px;}
}
@media (max-width:900px){
  .kb-hand-wrap{display:none;}
}
@media (max-width:720px){
  .typing-keyboard{padding:10px;gap:4px}
  .keyboard-key{width:36px;height:36px;font-size:13px}
  .keyboard-space{width:240px}
}

/* Sound toggle styles — now inside settings panel */
.sound-switch-input{display:none}
.sound-switch-input:focus-visible + .toggleSwitch{
  outline:0;
  box-shadow:0 0 0 3px rgba(139,92,246,0.28), 0 10px 24px rgba(0,0,0,0.35);
}
.toggleSwitch{
  width:48px;
  height:48px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--t-toggle-bg, #151A2E);
  border:1px solid var(--t-toggle-border, #1F2937);
  border-radius:50%;
  cursor:pointer;
  transition:transform .12s ease, background-color .18s ease, border-color .18s ease;
  box-shadow:var(--t-shadow-md, 0 10px 24px rgba(0,0,0,0.35));
  overflow:hidden;
  color:var(--t-text-secondary, #E5E7EB);
}
.toggleSwitch:hover{background-color:var(--t-toggle-hover, #1E223A)}
.sound-switch-input:active + .toggleSwitch{transform:scale(0.88)}
.sound-switch-input:checked + .toggleSwitch{border-color:rgba(34,211,238,0.55)}

.speaker,
.mute-speaker{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .18s ease;
}
.speaker svg,
.mute-speaker svg{width:18px;height:18px;display:block}
.mute-speaker{position:absolute;inset:0;opacity:0}
.sound-switch-input:checked + .toggleSwitch .speaker{opacity:0}
.sound-switch-input:checked + .toggleSwitch .mute-speaker{opacity:1}

/* Settings panel (used in Trainer + Testing controls row) */
.settings-toggle-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.settings-icon-btn{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(31,41,55,0.9);
  border-radius:8px;
  color:#E5E7EB;
  cursor:pointer;
  transition:background .15s ease, transform .2s ease;
  padding:0;
}
.settings-icon-btn:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.settings-icon-btn:active{
  transform:scale(0.92);
}
.settings-gear-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.settings-icon-btn.is-open .settings-gear-icon,
.settings-icon-btn:active .settings-gear-icon{
  transform:rotate(30deg);
  transition:transform .25s ease;
}
.settings-panel{
  position:absolute;
  top:100%;
  right:0;
  margin-top:6px;
  width:220px;
  background:rgba(30,30,40,0.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:10px 12px;
  display:none;
  flex-direction:column;
  gap:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  z-index:100;
}
.settings-panel.is-open{
  display:flex;
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.settings-row-label{
  font-size:0.72rem;
  font-weight:600;
  color:rgba(225,230,255,0.85);
  letter-spacing:0.01em;
  white-space:nowrap;
}
.settings-toggle{
  position:relative;
  display:inline-block;
  width:36px;
  height:20px;
  flex-shrink:0;
  cursor:pointer;
}
.settings-toggle-input{
  opacity:0;
  width:0;
  height:0;
  position:absolute;
}
.settings-toggle-track{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.12);
  border-radius:10px;
  transition:background .2s ease;
}
.settings-toggle-track::after{
  content:'';
  position:absolute;
  left:2px;
  top:2px;
  width:16px;
  height:16px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s ease;
}
.settings-toggle-input:checked + .settings-toggle-track{
  background:rgba(99,102,241,0.7);
}
.settings-toggle-input:checked + .settings-toggle-track::after{
  transform:translateX(16px);
}
.settings-cycle-btn{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  color:rgba(225,230,255,0.9);
  font-size:0.68rem;
  font-weight:600;
  padding:4px 10px;
  cursor:pointer;
  transition:background .15s ease;
  white-space:nowrap;
}
.settings-cycle-btn:hover{
  background:rgba(255,255,255,0.15);
}

[data-theme="light"] .settings-panel{
  background:rgba(255,255,255,0.96);
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .settings-row-label{
  color:#334155;
}
[data-theme="light"] .settings-toggle-track{
  background:rgba(0,0,0,0.12);
}
[data-theme="light"] .settings-toggle-track::after{
  background:#6366f1;
}
[data-theme="light"] .settings-toggle-input:checked + .settings-toggle-track{
  background:rgba(99,102,241,0.25);
}
[data-theme="light"] .settings-cycle-btn{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
  color:#334155;
}
[data-theme="light"] .settings-cycle-btn:hover{
  background:rgba(0,0,0,0.08);
}
[data-theme="light"] .settings-icon-btn{
  border-color:var(--t-toggle-border, rgba(148,163,184,0.4));
  color:#334155;
  background:rgba(255,255,255,0.92);
}
[data-theme="light"] .settings-icon-btn:hover{
  background:var(--t-toggle-hover, #f8fafc);
}

@media (max-width:520px){
  .toggleSwitch{width:44px;height:44px}
  .settings-panel{width:190px}
  :root{--topbar-offset:76px}
}

/* Unified results window (Trainer + Testing) */
.yt-results-shell{
  width:min(1360px, 96vw);
  max-width:1360px;
  padding:40px 42px 30px;
  display:flex;
  flex-direction:column;
  gap:20px;
  border:none;
  box-shadow:none;
  transform:scale(0.94);
  transform-origin:top center;
}
.yt-results-head{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  gap:26px;
  flex-wrap:nowrap;
  text-align:left;
}
.yt-results-head > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.yt-results-kicker{
  color:var(--t-accent-blue-light, #60A5FA);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.yt-results-title{
  margin:6px 0 8px;
  font-size:64px;
  line-height:.95;
  font-weight:900;
  color:var(--t-text-primary, #E5E7EB);
}
.yt-results-title span{color:#3B82F6}
.yt-results-sub{margin:0;color:var(--t-text-muted, #94A3B8);font-size:30px}
.yt-share-btn{
  border:1px solid var(--t-border, rgba(148,163,184,0.35));
  background:var(--t-surface, rgba(15,23,42,0.5));
  color:var(--t-text-secondary, #E5E7EB);
  border-radius:16px;
  padding:12px 20px;
  font-size:24px;
  font-weight:700;
  cursor:pointer;
}
.yt-top-cards{
  display:grid;
  grid-template-columns:repeat(4, max-content);
  justify-content:flex-start;
  width:auto;
  margin-left:auto;
  gap:14px;
}
.yt-card{
  border:none;
  border-radius:18px;
  padding:10px 16px;
  background:var(--t-surface, rgba(15,23,42,0.3));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:fit-content;
}
.yt-card-label{
  color:var(--t-text-muted, #94A3B8);
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.yt-card-main{
  margin-top:2px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.yt-card-main span{
  color:var(--t-text-primary, #E5E7EB);
  font-size:56px;
  font-weight:800;
  line-height:1;
}
.yt-card-main small{
  color:var(--t-success-bar, #34D399);
  font-size:28px;
  font-weight:700;
}
.yt-card-main small.neg{color:var(--t-error-bar, #FB7185)}
.yt-card-sub{
  margin-top:4px;
  color:var(--t-text-muted, #94A3B8);
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
}
.yt-extra-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  padding:14px 0 4px;
}
.yt-metric{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.yt-metric-label{
  color:var(--t-text-muted, #94A3B8);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.yt-metric-val{
  color:var(--t-text-primary, #E5E7EB);
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.yt-metric-val span{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}
.yt-metric-val small{
  color:var(--t-success-bar, #34D399);
  font-size:13px;
  font-weight:600;
}
.yt-metric-sub{
  color:var(--t-text-muted, #94A3B8);
  font-size:12px;
  font-weight:400;
}
#finalLongestPauseChars{
  display:block;
  text-align:center;
}
.yt-chart-settings{
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
}
.yt-chart-settings-btn{
  background:none;
  border:none;
  color:var(--t-text-muted, #94A3B8);
  font-size:16px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:6px;
  line-height:1;
  opacity:.55;
  transition:opacity .15s;
}
.yt-chart-settings-btn:hover{opacity:1}
.yt-chart-settings-drop{
  position:absolute;
  top:26px;
  right:0;
  background:var(--t-surface, rgba(15,23,42,0.92));
  border:1px solid var(--t-border, rgba(255,255,255,0.08));
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
.yt-chart-settings-drop.hidden{display:none}
.yt-chart-settings-row{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:12px;
  color:var(--t-text-primary, #E5E7EB);
  white-space:nowrap;
}
.yt-chart-settings-row input[type=checkbox]{
  accent-color:var(--t-success-bar, #34D399);
  width:14px;
  height:14px;
}
.yt-main-grid{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);
  gap:14px;
}
.yt-panel{
  border:none;
  border-radius:18px;
  background:var(--t-surface, rgba(15,23,42,0.26));
  padding:18px;
}
.yt-panel-title{
  color:var(--t-text-primary, #E5E7EB);
  font-size:34px;
  font-weight:800;
  margin-bottom:12px;
}
.yt-chart-panel{padding-bottom:6px}
.yt-chart-panel .trainer-results-chart,
.yt-chart-panel .testing-results-chart{height:260px;position:relative}
.yt-bars{display:flex;flex-direction:column;gap:16px}
.yt-bar-row>div{display:flex;justify-content:space-between;color:var(--t-text-muted, #94A3B8);font-size:24px;margin-bottom:6px}
.yt-bar-row>div b{color:var(--t-text-primary, #E5E7EB);font-size:28px}
.yt-bar-row i{display:block;height:8px;background:var(--t-progress-track, rgba(148,163,184,0.15));border-radius:999px;overflow:hidden}
.yt-bar-row em{display:block;height:100%;width:0;transition:width .4s ease}
.yt-bar-row em.ok{background:var(--t-success-bar, #34D399)}
.yt-bar-row em.bad{background:var(--t-error-bar, #FB7185)}
.yt-bar-row em.fix{background:var(--t-accent-blue, #3B82F6)}
.yt-stability-note{margin:20px 0 0;color:var(--t-text-muted, #94A3B8);font-size:22px;line-height:1.4}
#resultSpeedAccuracyNote,
#resultSafeZoneNote{display:none}
.yt-weak-panel{display:flex;justify-content:space-between;align-items:center;gap:14px}
.yt-weak-sub{margin:0;color:var(--t-text-muted, #94A3B8);font-size:22px}
.yt-weak-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.yt-weak-chip{
  min-width:78px;
  padding:10px 12px;
  border-radius:14px;
  border:none;
  background:var(--t-accent-blue-soft, rgba(30,64,175,0.18));
  display:flex;
  flex-direction:column;
  align-items:center;
}
.yt-weak-char{color:var(--t-text-primary, #E5E7EB);font-size:24px;font-weight:800}
.yt-weak-time{color:var(--t-accent-blue-light, #93C5FD);font-size:16px;font-weight:700}
.yt-weak-empty{color:var(--t-text-muted, #64748B);font-size:18px}
.yt-actions{margin-top:8px}
.yt-actions .trainer-results-btn,
.yt-actions .testing-results-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:none;
  padding:8px 14px;
  border-radius:10px;
  font-size:13px;
}
.yt-actions #restartBtn,
.yt-actions #restartTest{
  background:#3B82F6;
  border-color:#3B82F6;
  color:#f8fafc;
  font-weight:700;
}
.yt-action-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.yt-actions #restartBtn:hover,
.yt-actions #restartTest:hover{
  filter:brightness(1.05);
}
.yt-action-wrap .yt-shortcut{
  margin-left:0;
  margin-top:0;
}
.yt-rehabo-panel{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:none;
  box-shadow:none;
}
.yt-rehabo-close{
  position:absolute;
  top:12px;
  right:14px;
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--t-text-muted, #94A3B8);
  font-size:26px;
  line-height:1;
  cursor:pointer;
  opacity:.8;
}
.yt-rehabo-close:hover{opacity:1;color:var(--t-text-primary, #E5E7EB)}
.yt-rehabo-main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:1 1 auto;
}
.yt-rehabo-figure{
  width:64px;
  height:64px;
  border-radius:50%;
  flex:0 0 64px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:transparent;
  border:none;
}
.yt-rehabo-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.yt-rehabo-copy{min-width:0}
.yt-rehabo-title{
  margin:0;
  color:var(--t-text-primary, #E5E7EB);
  font-size:14px;
  line-height:1.25;
  font-weight:800;
}
.yt-rehabo-title span{color:#38BDF8}
.yt-rehabo-text{
  margin:6px 0 0;
  color:var(--t-text-muted, #94A3B8);
  font-size:13px;
  line-height:1.3;
}
.yt-rehabo-links{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.yt-rehabo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  border:none;
  background:#3B82F6;
  color:#f8fafc;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.yt-rehabo-btn:hover{filter:brightness(1.08)}
.yt-rehabo-link{
  color:var(--t-text-muted, #94A3B8);
  font-size:12px;
  text-decoration:none;
}
.yt-rehabo-link:hover{color:var(--t-text-primary, #E5E7EB)}
.yt-rehabo-benefits{
  flex:0 0 auto;
  display:flex;
  align-items:stretch;
  gap:10px;
  padding-left:12px;
  border-left:none;
}
.yt-rehabo-benefit{
  min-width:64px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  text-align:center;
}
.yt-rehabo-benefit strong{
  font-size:18px;
  line-height:1;
}
.yt-rehabo-benefit span{
  color:var(--t-text-secondary, #CBD5E1);
  font-size:11px;
  line-height:1.25;
}
.yt-rehabo-icon{
  display:inline-block;
  width:30px;
  height:30px;
  background:#38BDF8;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
}
.yt-rehabo-icon-figure{
  width:40px;
  height:40px;
  background:#60A5FA;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5ZM10 9h4a2 2 0 0 1 2 2v3h-1.8v7h-2.2v-4h-1v4H8.8v-7H7v-3a2 2 0 0 1 2-2h1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5ZM10 9h4a2 2 0 0 1 2 2v3h-1.8v7h-2.2v-4h-1v4H8.8v-7H7v-3a2 2 0 0 1 2-2h1Z'/%3E%3C/svg%3E");
}
.yt-rehabo-icon-stretch{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.5a2.2 2.2 0 1 1 0 4.4a2.2 2.2 0 0 1 0-4.4ZM6.2 10.2l2.7-1.8l1.2 1.7l-2.2 1.5v3.2H5.7v-2.7a2.3 2.3 0 0 1 .5-1.9Zm11.6 0a2.3 2.3 0 0 1 .5 1.9v2.7h-2.2v-3.2l-2.2-1.5l1.2-1.7l2.7 1.8ZM10.2 9.8h3.6v4.1l2 2.2l-1.6 1.5l-1.5-1.6v5h-2.4v-5l-1.5 1.6l-1.6-1.5l2-2.2V9.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2.5a2.2 2.2 0 1 1 0 4.4a2.2 2.2 0 0 1 0-4.4ZM6.2 10.2l2.7-1.8l1.2 1.7l-2.2 1.5v3.2H5.7v-2.7a2.3 2.3 0 0 1 .5-1.9Zm11.6 0a2.3 2.3 0 0 1 .5 1.9v2.7h-2.2v-3.2l-2.2-1.5l1.2-1.7l2.7 1.8ZM10.2 9.8h3.6v4.1l2 2.2l-1.6 1.5l-1.5-1.6v5h-2.4v-5l-1.5 1.6l-1.6-1.5l2-2.2V9.8Z'/%3E%3C/svg%3E");
}
.yt-rehabo-icon-posture{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h-2V2Zm-1 4h4v2h-1v2.2l2.6 2.6a1 1 0 0 1 0 1.4l-1.2 1.2l-2-2V22h-2v-8.6l-2 2l-1.2-1.2a1 1 0 0 1 0-1.4L11 10.2V8h-1V6Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v3h-2V2Zm-1 4h4v2h-1v2.2l2.6 2.6a1 1 0 0 1 0 1.4l-1.2 1.2l-2-2V22h-2v-8.6l-2 2l-1.2-1.2a1 1 0 0 1 0-1.4L11 10.2V8h-1V6Z'/%3E%3C/svg%3E");
}
.yt-rehabo-icon-break{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 1 0 18a9 9 0 0 1 0-18Zm1 4h-2v6h5v-2h-3V7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 1 0 18a9 9 0 0 1 0-18Zm1 4h-2v6h5v-2h-3V7Z'/%3E%3C/svg%3E");
}
.yt-shortcut{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:2px;
}
.yt-shortcut kbd{
  min-width:34px;
  height:24px;
  padding:0 8px;
  border-radius:8px;
  border:none;
  background:var(--t-surface);
  color:var(--t-text-secondary, #dbeafe);
  font-size:11px;
  font-weight:700;
  line-height:22px;
  text-align:center;
  letter-spacing:.04em;
  box-shadow:none;
}
.yt-shortcut-plus{
  color:var(--t-text-muted, rgba(148,163,184,0.9));
  font-size:12px;
  font-weight:700;
}
.page-trainer .trainer-results-btn-primary,
.page-testing .testing-results-btn-primary{
  background:var(--t-accent-blue, #3B82F6);
  border-color:var(--t-accent-blue, #3B82F6);
  color:#F8FAFC;
  font-weight:800;
}

@media (max-width:980px){
  .yt-results-title{font-size:46px}
  .yt-results-sub{font-size:24px}
  .yt-card-main span{font-size:42px}
  .yt-main-grid{grid-template-columns:1fr}
  .yt-results-head{flex-wrap:wrap}
  .yt-top-cards{width:100%;justify-content:flex-start}
  .yt-rehabo-panel{flex-direction:column;align-items:flex-start;gap:16px}
  .yt-rehabo-benefits{padding-left:0;border-left:none;padding-top:8px;border-top:1px solid var(--t-border, rgba(148,163,184,0.2));width:100%;justify-content:space-between}
}

@media (max-height:860px){
  .yt-results-shell{
    padding:28px 32px 24px;
    gap:14px;
    transform:scale(0.92);
  }
  .yt-results-title{font-size:50px}
  .yt-results-sub{font-size:22px}
  .yt-share-btn{padding:10px 16px;font-size:20px}
  .yt-card{padding:14px}
  .yt-card-main span{font-size:46px}
  .yt-card-main small{font-size:22px}
  .yt-panel-title{font-size:28px}
  .yt-chart-panel .trainer-results-chart,
  .yt-chart-panel .testing-results-chart{height:220px}
  .yt-bar-row>div{font-size:20px}
  .yt-bar-row>div b{font-size:24px}
  .yt-stability-note{margin-top:12px;font-size:18px}
  .yt-weak-sub{font-size:18px}
  .yt-weak-chip{min-width:64px;padding:8px 10px}
  .yt-weak-char{font-size:20px}
  .yt-weak-time{font-size:14px}
  .yt-rehabo-title{font-size:13px}
  .yt-rehabo-text{font-size:11px}
  .yt-actions{margin-top:4px}
}

@media (max-height:760px){
  .yt-results-shell{
    padding:22px 24px 18px;
    gap:12px;
    transform:scale(0.9);
  }
  .yt-results-head{gap:12px}
  .yt-results-title{
    font-size:42px;
    margin:4px 0 6px;
  }
  .yt-results-sub{font-size:20px}
  .yt-share-btn{padding:8px 14px;font-size:18px}
  .yt-card{padding:12px;border-radius:14px}
  .yt-card-main span{font-size:40px}
  .yt-card-main small{font-size:20px}
  .yt-panel{padding:14px}
  .yt-panel-title{font-size:24px;margin-bottom:10px}
  .yt-chart-panel .trainer-results-chart,
  .yt-chart-panel .testing-results-chart{height:200px}
  .yt-bar-row>div{font-size:18px}
  .yt-bar-row>div b{font-size:22px}
  .yt-bar-row i{height:6px}
  .yt-stability-note{margin-top:10px;font-size:16px}
  .yt-weak-sub{font-size:16px}
  .yt-weak-chip{min-width:58px;padding:6px 8px}
  .yt-weak-char{font-size:18px}
  .yt-weak-time{font-size:13px}
  .yt-rehabo-title{font-size:12px}
  .yt-rehabo-text{font-size:10px}
}

@media (max-width:760px){
  .yt-results-shell{padding:26px 16px 20px}
  .yt-results-head{flex-direction:column}
  .yt-top-cards{grid-template-columns:1fr}
  .yt-panel-title{font-size:28px}
  .yt-bar-row>div{font-size:20px}
  .yt-bar-row>div b{font-size:22px}
  .yt-stability-note,
  .yt-weak-sub{font-size:18px}
  .yt-weak-panel{flex-direction:column;align-items:flex-start}
  .yt-rehabo-main{flex-direction:column;align-items:flex-start}
  .yt-rehabo-figure{width:56px;height:56px;flex-basis:56px;font-size:22px}
  .yt-rehabo-title{font-size:13px}
  .yt-rehabo-text{font-size:11px}
  .yt-rehabo-benefits{gap:8px}
  .yt-rehabo-benefit{min-width:0;flex:1}
  .yt-rehabo-benefit span{font-size:10px}
  .yt-share-btn{font-size:20px}
  .yt-results-shell{transform:none}
  .yt-actions .trainer-results-btn,
  .yt-actions .testing-results-btn{
    width:100%;
  }
  .yt-shortcut{
    margin-left:auto;
  }
  .yt-shortcut kbd{
    min-width:32px;
    height:22px;
    font-size:10px;
    line-height:20px;
    padding:0 7px;
  }
}

/* Global Race Invite Toast Notifications */
.race-toast-container{
  position:fixed;
  top:20px;
  right:20px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:360px;
  pointer-events:none;
}
.race-toast-container>*{pointer-events:auto}
.race-toast{
  background:var(--t-card-bg);
  border:1px solid rgba(59,130,246,.4);
  border-radius:14px;
  padding:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.15);
  animation:toastSlideIn .35s ease-out;
  overflow:hidden;
  position:relative;
}
@keyframes toastSlideIn{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}
.race-toast-title{font-size:15px;font-weight:800;color:#f8fafc;margin-bottom:6px}
.race-toast-text{font-size:13px;color:#94a3b8;line-height:1.4;margin-bottom:12px}
.race-toast-actions{display:flex;gap:8px}
.race-toast-btn{flex:1;min-height:36px;padding:0 14px;border-radius:10px;border:none;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s ease}
.race-toast-accept{background:#22c55e;color:#fff}
.race-toast-accept:hover{background:#16a34a}
.race-toast-decline,.race-toast-cancel{background:rgba(148,163,184,.2);color:#cbd5e1}
.race-toast-decline:hover,.race-toast-cancel:hover{background:rgba(148,163,184,.3)}
.race-toast-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.1)}
.race-toast-progress-bar{height:100%;background:#3b82f6;width:100%}
[data-theme="light"] .race-toast{background:var(--t-card-bg);border-color:rgba(59,130,246,.35);box-shadow:0 20px 40px rgba(0,0,0,.15),0 0 0 1px rgba(59,130,246,.1)}
[data-theme="light"] .race-toast-title{color:#0f172a}
[data-theme="light"] .race-toast-text{color:#475569}
[data-theme="light"] .race-toast-decline,[data-theme="light"] .race-toast-cancel{background:rgba(148,163,184,.18);color:#334155}
[data-theme="light"] .race-toast-decline:hover,[data-theme="light"] .race-toast-cancel:hover{background:rgba(148,163,184,.28)}
@media(max-width:480px){.race-toast-container{top:10px;right:10px;left:10px;max-width:none}}

.posture-reminder-overlay{
  position:fixed;
  top:14px;
  right:14px;
  z-index:1300;
  display:block;
  pointer-events:none;
}
.posture-reminder-overlay.hidden{display:none}
.posture-reminder-modal{
  width:min(360px, calc(100vw - 24px));
  border-radius:14px;
  border:1px solid var(--t-border, rgba(148,163,184,.3));
  background:var(--t-surface-solid, rgba(15,23,42,.96));
  color:var(--t-text-primary, #e2e8f0);
  box-shadow:0 10px 28px rgba(15,23,42,.28);
  padding:14px 14px;
  pointer-events:auto;
}
.posture-reminder-title{margin:0;font-size:1.02rem;font-weight:800;line-height:1.2}
.posture-reminder-text{margin:8px 0 0;font-size:.85rem;line-height:1.4;color:var(--t-text-secondary, #cbd5e1)}
.posture-reminder-actions{margin-top:12px;display:flex;gap:8px;justify-content:flex-end}
.posture-reminder-settings{
  margin-right:auto;
  position:relative;
}
.posture-reminder-settings-btn{
  width:26px;
  height:26px;
  min-height:26px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:var(--t-text-muted, #94a3b8);
  font-size:16px;
  font-weight:700;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  line-height:1;
  text-align:center;
  text-decoration:none;
}
.posture-reminder-settings-btn:hover{
  color:var(--t-text-secondary, #cbd5e1);
  background:rgba(148,163,184,.14);
}
.posture-reminder-settings-icon{
  display:inline-flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}
.posture-reminder-settings-menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  min-width:220px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  border-radius:10px;
  border:1px solid var(--t-border, rgba(148,163,184,.3));
  background:var(--t-surface-solid, rgba(15,23,42,.98));
  box-shadow:0 10px 26px rgba(15,23,42,.28);
  z-index:2;
}
.posture-reminder-settings-menu.hidden{display:none}
.posture-reminder-settings-item{
  min-height:32px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--t-text-primary, #e2e8f0);
  text-align:left;
  font-size:.82rem;
  font-weight:600;
  padding:0 10px;
  cursor:pointer;
}
.posture-reminder-settings-item:hover{
  background:rgba(59,130,246,.18);
}
.posture-reminder-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:var(--t-surface, rgba(15,23,42,.72));
  color:var(--t-text-primary, #e2e8f0);
  font-weight:700;
  font-size:.82rem;
  line-height:1;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
  white-space:nowrap;
}
.posture-reminder-btn-primary{border-color:rgba(59,130,246,.55);background:#2563eb;color:#eff6ff}
[data-theme="light"] .posture-reminder-modal{background:var(--t-surface-solid, #ffffff);color:var(--t-text-primary, #0f172a)}
[data-theme="light"] .posture-reminder-text{color:var(--t-text-secondary, #475569)}
[data-theme="light"] .posture-reminder-btn{background:#ffffff;border-color:rgba(148,163,184,.4);color:#0f172a}
[data-theme="light"] .posture-reminder-btn-primary{background:#3b82f6;color:#eff6ff;border-color:#3b82f6}
[data-theme="light"] .posture-reminder-settings-btn{background:transparent;border:none;color:#64748b}
[data-theme="light"] .posture-reminder-settings-btn:hover{background:rgba(148,163,184,.18)}
[data-theme="light"] .posture-reminder-settings-menu{background:#ffffff;border-color:rgba(148,163,184,.4)}
[data-theme="light"] .posture-reminder-settings-item{color:#0f172a}
[data-theme="light"] .posture-reminder-settings-item:hover{background:rgba(59,130,246,.12)}

@media (max-width:560px){
  .posture-reminder-overlay{
    top:8px;
    right:8px;
  }
  .posture-reminder-modal{
    width:min(100vw - 16px, 340px);
    padding:12px 12px;
  }
}

@keyframes nick-gradient-flow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.nick-gradient{
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:nick-gradient-flow 3s ease infinite;
  font-weight:700;
}