.page-trainer{
  position:relative;
  isolation:isolate;
  --trainer-theme-surface:rgba(28,28,27,0.52);
  --trainer-theme-border:rgba(255,255,255,.14);
  --trainer-theme-border-hover:rgba(255,255,255,.2);
  --trainer-theme-text:#E5E7EB;
  --trainer-theme-muted:#B8C0D4;
  --trainer-theme-accent:#60a5fa;
  --trainer-theme-accent-soft:rgba(59,130,246,.12);
  --trainer-theme-accent-border:rgba(59,130,246,.45);
  --trainer-theme-dropdown-bg:rgba(28,28,27,0.95);
  --trainer-theme-word:#E5E7EB;
  --trainer-theme-pending:#9CA3AF;
  --trainer-theme-correct:#B9E6B4;
  --trainer-theme-wrong:#F08B8B;
  --trainer-theme-caret:#8B5CF6;
  --trainer-theme-bg-radial1:rgba(94,160,255,0.18);
  --trainer-theme-bg-radial2:rgba(7,12,24,0.92);
  --trainer-theme-bg-radial3:rgba(6,8,16,0.98);
  --trainer-theme-words-bg:rgba(28,28,27,0.72);
  --trainer-theme-words-border:rgba(255,255,255,.14);
  --trainer-theme-words-shadow:0 18px 48px rgba(2,8,23,0.32);
  --t-kb-wrap-bg:rgba(28,28,27,0.58);
  --t-kb-wrap-border:rgba(255,255,255,.18);
  --t-kb-key-bg:rgba(255,255,255,.05);
  --t-kb-key-border:rgba(203,213,225,.22);
  --t-kb-key-color:#e5e7eb;
  --t-kb-grey-bg:rgba(148,163,184,.12);
  --t-kb-grey-border:rgba(148,163,184,.3);
  --t-kb-grey-color:rgba(226,232,240,.65);
  --t-surface:var(--trainer-theme-surface);
  --t-surface-solid:var(--trainer-theme-dropdown-bg);
  --t-surface-hover:var(--trainer-theme-accent-soft);
  --t-border:var(--trainer-theme-border);
  --t-border-hover:var(--trainer-theme-border-hover);
  --t-border-strong:var(--trainer-theme-border-hover);
  --t-text-primary:var(--trainer-theme-word);
  --t-text-secondary:var(--trainer-theme-text);
  --t-text-muted:var(--trainer-theme-muted);
  --t-accent-blue:var(--trainer-theme-accent);
  --t-accent-blue-text:var(--trainer-theme-accent);
  --t-accent-blue-light:var(--trainer-theme-text);
  --t-accent-blue-soft:var(--trainer-theme-accent-soft);
  --t-accent-blue-border:var(--trainer-theme-accent-border);
  --t-progress-track:var(--trainer-theme-border);
  --t-success-bar:var(--trainer-theme-correct);
  --t-error-bar:var(--trainer-theme-wrong);
  --t-shadow-sm:0 8px 24px rgba(2,8,23,0.2);
  --t-shadow-md:0 16px 40px rgba(2,8,23,0.24);
  --t-shadow-xl:var(--trainer-theme-words-shadow);
  --t-chart-grid:var(--trainer-theme-border);
  --t-chart-axis:var(--trainer-theme-muted);
  --t-chart-line:var(--trainer-theme-accent);
  --t-chart-dot:var(--trainer-theme-accent);
}
.page-trainer::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  background:
    radial-gradient(circle at 50% 28%, var(--trainer-theme-bg-radial1), transparent 55%),
    radial-gradient(circle at 50% 65%, var(--trainer-theme-bg-radial2), var(--trainer-theme-bg-radial3));
}
.page-trainer[class*="trainer-color-theme-"]::before{
  opacity:1;
}

[data-theme="light"] .page-trainer:not([class*="trainer-color-theme-"]){
  --trainer-theme-surface:#ffffff;
  --trainer-theme-border:rgba(148,163,184,0.65);
  --trainer-theme-border-hover:rgba(100,116,139,0.55);
  --trainer-theme-text:#334155;
  --trainer-theme-muted:#64748b;
  --trainer-theme-accent:#2563eb;
  --trainer-theme-accent-soft:rgba(37,99,235,0.14);
  --trainer-theme-accent-border:rgba(37,99,235,0.4);
  --trainer-theme-dropdown-bg:#ffffff;
  --trainer-theme-word:#334155;
  --trainer-theme-pending:#9ca3af;
  --trainer-theme-correct:#15803d;
  --trainer-theme-wrong:#dc2626;
  --trainer-theme-caret:#2563eb;
  --trainer-theme-bg-radial1:transparent;
  --trainer-theme-bg-radial2:#ffffff;
  --trainer-theme-bg-radial3:#ffffff;
  --trainer-theme-words-bg:transparent;
  --trainer-theme-words-border:transparent;
  --trainer-theme-words-shadow:none;
  --t-kb-wrap-bg:#ffffff;
  --t-kb-wrap-border:rgba(148,163,184,0.45);
  --t-kb-key-bg:#ffffff;
  --t-kb-key-border:rgba(148,163,184,0.42);
  --t-kb-key-color:#334155;
  --t-kb-grey-bg:#ffffff;
  --t-kb-grey-border:rgba(148,163,184,0.48);
  --t-kb-grey-color:#64748b;
}
.page-trainer:not(.trainer-started) .trainer-countdown,
.page-trainer:not(.trainer-started) .focus-counter,
.page-trainer:not(.trainer-started) .trainer-shell,
.page-trainer:not(.trainer-started) .trainer-results-page{
  display:none;
}

[data-theme="light"] .page-trainer{
  --t-toggle-bg:rgba(255,255,255,0.92);
  --t-toggle-border:rgba(148,163,184,0.4);
  --t-toggle-hover:#f8fafc;
}

[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .trainer-title{
  color:var(--trainer-theme-word) !important;
}

[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .trainer-subtitle{
  color:var(--trainer-theme-text) !important;
}

[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .trainer-keywords,
[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .stats,
[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .counts,
[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .left-timer,
[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .language-name,
[data-theme="light"] .page-trainer[class*="trainer-color-theme-"] .result-stats{
  color:var(--trainer-theme-text);
}

.page-trainer.results-open .trainer-intro-modal{ display:none; }

.trainer-intro-modal{
  position:relative;
  background:transparent;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding:0;
  pointer-events:auto;
  min-height:60vh;
}

.trainer-intro-modal.hidden{ display:none; }

.trainer-intro-card{
  background:transparent;
  border-radius:0;
  padding:0;
  max-width:760px;
  width:100%;
  text-align:center;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

.trainer-intro-modal::before{
  content:'';
  position:fixed;
  inset:0;
  background:var(--t-bg-body, #1c1c1b);
  z-index:0;
}

.trainer-lock-title{
  margin:0 0 10px;
  font-size:clamp(2.2rem,4.5vw,3.2rem);
  font-weight:900;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f8fafc;
}
.trainer-lock-subtitle{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.24em;
  color:rgba(94,160,255,0.75);
  margin-bottom:16px;
}
.trainer-lock-copy{
  color:rgba(210,220,245,0.7);
  margin:0 auto 26px;
  line-height:1.6;
  font-size:15px;
  max-width:560px;
}
.trainer-lock-card{
  display:flex;
  justify-content:center;
  margin:8px 0 26px;
}
.trainer-lock-card-inner{
  width:320px;
  aspect-ratio:1.6/1;
  border-radius:16px;
  background:var(--t-bg-body, #1c1c1b);
  border:1px solid var(--t-border, rgba(255,255,255,.08));
  box-shadow:none;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.trainer-card-sample{
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:0.24;
  pointer-events:none;
  z-index:1;
}

.trainer-card-words{
  display:flex;
  gap:18px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
  justify-content:center;
}

.trainer-card-word{
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(225,230,255,0.92);
  font-family: var(--typing-font, ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace);
  font-size:18px;
  letter-spacing:0.06em;
  text-transform:lowercase;
  filter: blur(0.2px);
  position:relative;
}

.trainer-card-word.active{
  background:rgba(139,92,246,0.12);
  border-color:rgba(139,92,246,0.22);
}

.trainer-card-word.active::after{ content:none; }

.trainer-card-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(210,220,245,0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  letter-spacing:0.08em;
}

.trainer-card-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  font-size:13px;
  font-weight:700;
}

.trainer-card-pill.active{
  background:rgba(139,92,246,0.14);
  border-color:rgba(139,92,246,0.22);
  color:rgba(225,230,255,0.86);
}

.trainer-card-sep{
  opacity:0.5;
}
.trainer-lock-card-brand{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:0.5;
  font-size:10px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#fff;
}
.trainer-lock-card-icon{ font-size:14px; }
.trainer-lock-card-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity:0.5;
  position:relative;
  z-index:2;
  color:#fff;
}
.trainer-lock-card-line{
  display:block;
  width:32px;
  height:1px;
  background:rgba(94,160,255,0.4);
}
.trainer-lock-card-label{
  font-size:8px;
  letter-spacing:0.3em;
  text-transform:uppercase;
}
.trainer-lock-card-name{
  font-size:12px;
  font-weight:300;
}
.trainer-lock-card-mark{
  position:absolute;
  inset:auto 14px 14px auto;
  font-size:56px;
  opacity:0.06;
}

.trainer-intro-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}
.trainer-intro-actions .intro-skip-wrap{
  width:100%;
  display:flex;
  justify-content:center;
}
.trainer-intro-actions .intro-skip-btn{
  background:none;
  border:none;
  padding:0;
  font-size:11px;
  color:var(--t-text-muted, rgba(210,220,245,0.6));
  cursor:pointer;
  opacity:0.75;
}
.trainer-intro-actions .intro-skip-btn:hover{ opacity:1; text-decoration:underline; }

.trainer-intro-btn{
  border:none;
  background:#5ea0ff;
  color:#ffffff;
  font-weight:700;
  padding:12px 30px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  transition:transform .12s ease, filter .2s ease;
  box-shadow:none;
}
.trainer-intro-btn:hover{ filter:brightness(1.05); }
.trainer-intro-btn:active{ transform:scale(0.98); }
.page-trainer .focus-counter{
  display:none;
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:32px;
  font-weight:700;
  color:#E5E7EB;
  letter-spacing:0.02em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;
}
.page-trainer .trainer-controls-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:12px;
  flex-wrap:wrap;
}
.page-trainer .theme-selector{
  position:relative;
  display:inline-block;
}

.page-trainer .language-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 9px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--t-text-secondary, #e5e7eb);
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.page-trainer .theme-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  background:transparent;
  border:1px solid rgba(31,41,55,0.9);
  border-radius:10px;
  color:#E5E7EB;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.page-trainer .language-btn:hover{
  background:var(--t-surface-hover, rgba(255,255,255,.08));
}
.page-trainer .theme-btn:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}

.page-trainer .language-btn:active{
  transform:scale(0.98);
}
.page-trainer .theme-btn:active{
  transform:scale(0.98);
}

.page-trainer .language-icon{
  display:none;
}

.page-trainer .language-text{
  line-height:1;
}
.page-trainer .theme-text{
  line-height:1;
}

.page-trainer .language-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:200px;
  max-height:min(70vh, 520px);
  overflow-y:auto;
  background:rgba(28,28,27,0.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  z-index:100;
}
.page-trainer .theme-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  width:min(560px, calc(100vw - 40px));
  background:rgba(28,28,27,0.95);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  z-index:100;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
  max-height:min(62vh, 520px);
  overflow:auto;
}

.page-trainer .language-dropdown.hidden{
  display:none;
}
.page-trainer .theme-dropdown.hidden{
  display:none;
}

.page-trainer .language-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.15s ease;
}
.page-trainer .theme-option{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:9px 11px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.15s ease;
  color:#E5E7EB;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
}
.page-trainer .theme-option-preview{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:28px;
}
.page-trainer .theme-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.page-trainer .theme-dot-bg{background:var(--theme-preview-bg, #1f2937)}
.page-trainer .theme-dot-text{background:var(--theme-preview-text, #e5e7eb)}
.page-trainer .theme-option-label{line-height:1}

@media (max-width:760px){
  .page-trainer .theme-dropdown{
    width:min(420px, calc(100vw - 24px));
    grid-template-columns:1fr;
    max-height:min(60vh, 460px);
  }
}

.page-trainer .language-option:hover{
  background:rgba(255,255,255,0.08);
}
.page-trainer .theme-option:hover{
  background:rgba(255,255,255,0.08);
}

.page-trainer .language-option.selected{
  background:rgba(59,130,246,0.15);
}
.page-trainer .theme-option.selected{
  background:rgba(59,130,246,0.15);
}

.page-trainer .theme-dropdown-note{
  grid-column:1 / -1;
  margin-top:2px;
  padding:10px 12px 0;
  border-top:1px solid rgba(255,255,255,.12);
  color:var(--trainer-theme-muted, #9ca3af);
  font-size:11px;
  line-height:1.4;
}

.page-trainer .language-flag{
  display:none;
}

.page-trainer .language-name{
  font-size:12px;
  color:#E5E7EB;
  font-weight:600;
}
.page-trainer .theme-option[data-theme="default"]{
  color:#dbeafe;
  --theme-preview-bg:#0f172a;
  --theme-preview-text:#e5e7eb;
}
.page-trainer .theme-option[data-theme="olive"]{
  color:#ccd5ae;
  --theme-preview-bg:#2f3f2b;
  --theme-preview-text:#e8f0d0;
}
.page-trainer .theme-option[data-theme="olive-soft"]{
  color:#d8dfc2;
  --theme-preview-bg:#4a5a45;
  --theme-preview-text:#f3f8e5;
}
.page-trainer .theme-option[data-theme="olive-deep"]{
  color:#b9c89d;
  --theme-preview-bg:#22301f;
  --theme-preview-text:#dceac0;
}
.page-trainer .theme-option[data-theme="sunset"]{
  color:#ffd6a5;
  --theme-preview-bg:#582b2c;
  --theme-preview-text:#ffe4d6;
}
.page-trainer .theme-option[data-theme="sunset-soft"]{
  color:#ffdcbc;
  --theme-preview-bg:#744241;
  --theme-preview-text:#ffefe4;
}
.page-trainer .theme-option[data-theme="sunset-deep"]{
  color:#ffc996;
  --theme-preview-bg:#442122;
  --theme-preview-text:#ffd8c4;
}
.page-trainer .theme-option[data-theme="ocean"]{
  color:#8ecae6;
  --theme-preview-bg:#082f49;
  --theme-preview-text:#e6f7ff;
}
.page-trainer .theme-option[data-theme="ocean-soft"]{
  color:#a7dbef;
  --theme-preview-bg:#1f4f66;
  --theme-preview-text:#eefbff;
}
.page-trainer .theme-option[data-theme="ocean-deep"]{
  color:#7fc2df;
  --theme-preview-bg:#052236;
  --theme-preview-text:#d9f1fb;
}
.page-trainer .theme-option[data-theme="neon"]{
  color:#4ade80;
  --theme-preview-bg:#122016;
  --theme-preview-text:#defce9;
}
.page-trainer .theme-option[data-theme="neon-soft"]{
  color:#86efac;
  --theme-preview-bg:#274330;
  --theme-preview-text:#ecfdf3;
}
.page-trainer .theme-option[data-theme="neon-deep"]{
  color:#34d67a;
  --theme-preview-bg:#0a160d;
  --theme-preview-text:#d6f8e3;
}
.page-trainer .theme-option[data-theme="sakura"]{
  color:#f9a8d4;
  --theme-preview-bg:#4a1f3d;
  --theme-preview-text:#ffe9f4;
}
.page-trainer .theme-option[data-theme="sakura-soft"]{
  color:#fbc7e4;
  --theme-preview-bg:#6a3a5d;
  --theme-preview-text:#fff2f9;
}
.page-trainer .theme-option[data-theme="sakura-deep"]{
  color:#f392c5;
  --theme-preview-bg:#35142d;
  --theme-preview-text:#ffdceb;
}
.page-trainer .theme-option[data-theme="dusk"]{
  color:#c8b6ff;
  --theme-preview-bg:#2b2347;
  --theme-preview-text:#efe9ff;
}
.page-trainer .theme-option[data-theme="mocha"]{
  color:#d6bfa7;
  --theme-preview-bg:#3a2a24;
  --theme-preview-text:#f7e9df;
}
.page-trainer .theme-option[data-theme="nord"]{
  color:#88c0d0;
  --theme-preview-bg:#2e3440;
  --theme-preview-text:#e5edf5;
}
.page-trainer .theme-option[data-theme="paper"]{
  color:#64748b;
  --theme-preview-bg:#f8fafc;
  --theme-preview-text:#334155;
}
.page-trainer .theme-option[data-theme="mist"]{
  color:#7b8ca3;
  --theme-preview-bg:#eef2ff;
  --theme-preview-text:#4b5563;
}
.page-trainer .theme-option[data-theme="peach"]{
  color:#d97757;
  --theme-preview-bg:#fff3ed;
  --theme-preview-text:#7c2d12;
}

.page-trainer .focus-toggle-wrap{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:0}
.page-trainer .focus-toggle-input{position:absolute;opacity:0;pointer-events:none}
.page-trainer .focus-toggle-switch{justify-content:center}

.page-trainer.focus-mode{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-trainer.focus-mode .stats,
.page-trainer.focus-mode .typing-keyboard,
.page-trainer.focus-mode .kb-visual,
.page-trainer.focus-mode .trainer-countdown,
.page-trainer.focus-mode .left-timer,
.page-trainer.focus-mode .language-selector{
  display:none;
}
.page-trainer.focus-mode .trainer-header,
.page-trainer.focus-mode-2 .trainer-header,
.page-trainer.focus-mode-3 .trainer-header{
  display:flex;
  position:fixed;
  top:calc(var(--topbar-offset, 0px) + 16px);
  left:24px;
  right:24px;
  justify-content:flex-end;
  pointer-events:none;
  z-index:25;
}
.page-trainer.focus-mode .trainer-header-copy,
.page-trainer.focus-mode-2 .trainer-header-copy,
.page-trainer.focus-mode-3 .trainer-header-copy{
  display:none;
}
.page-trainer.focus-mode .trainer-header-main,
.page-trainer.focus-mode-2 .trainer-header-main,
.page-trainer.focus-mode-3 .trainer-header-main{
  padding-right:0;
}
.page-trainer.focus-mode .trainer-source-meta,
.page-trainer.focus-mode-2 .trainer-source-meta,
.page-trainer.focus-mode-3 .trainer-source-meta{
  position:static;
  max-width:min(360px, 70vw);
  align-items:flex-end;
  text-align:right;
}
.page-trainer.trainer-started.focus-mode .focus-counter{display:block}
.page-trainer.focus-mode .mode{display:none}
.page-trainer.focus-mode .counts > *:not(.mode-select){display:none}
.page-trainer.focus-mode .mode-select{display:flex}
.page-trainer.focus-mode .mode-select > *:not(.focus-toggle-wrap){display:none}
.page-trainer.trainer-started.focus-mode .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-trainer.focus-mode .words-area{
  padding-top:24px;
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
}
.page-trainer.focus-mode .text-viewport.words-mode{
  height:var(--line-h);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
}
.page-trainer.focus-mode .text-viewport.words-mode .words{
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:flex-start;
  gap:0;
}
.page-trainer.focus-mode .text-viewport.words-mode .text-line{
  display:inline-flex;
  transition:none;
}
.page-trainer.focus-mode .text-line{padding-inline:0}

.page-trainer.focus-mode-2{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-trainer.focus-mode-2 .stats,
.page-trainer.focus-mode-2 .typing-keyboard,
.page-trainer.focus-mode-2 .kb-visual,
.page-trainer.focus-mode-2 .trainer-countdown,
.page-trainer.focus-mode-2 .left-timer,
.page-trainer.focus-mode-2 .language-selector{
  display:none;
}
.page-trainer.trainer-started.focus-mode-2 .focus-counter{display:block}
.page-trainer.focus-mode-2 .mode{display:none}
.page-trainer.focus-mode-2 .counts > *:not(.mode-select){display:none}
.page-trainer.focus-mode-2 .mode-select{display:flex}
.page-trainer.focus-mode-2 .mode-select > *:not(.focus-toggle-wrap){display:none}
.page-trainer.trainer-started.focus-mode-2 .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-trainer.focus-mode-2 .words-area{
  padding-top:24px;
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
}
.page-trainer.focus-mode-2 .text-viewport.words-mode{
  height:calc(var(--line-h) * 3 + var(--row-gap) * 2 + var(--lines-viewport-extra));
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
  overflow:hidden;
}
.page-trainer.focus-mode-2 .text-viewport.words-mode .words{
  flex-wrap:wrap;
  white-space:normal;
  justify-content:flex-start;
  gap:var(--row-gap);
}
.page-trainer.focus-mode-2 .text-viewport.words-mode .text-line{
  display:block;
  width:100%;
  transition:none;
  padding-inline:clamp(12px, 4vw, 60px);
}

.page-trainer.focus-mode-3{
  background:transparent;
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
}
.page-trainer.focus-mode-3 .trainer-header,
.page-trainer.focus-mode-3 .stats,
.page-trainer.focus-mode-3 .typing-keyboard,
.page-trainer.focus-mode-3 .kb-visual,
.page-trainer.focus-mode-3 .trainer-countdown,
.page-trainer.focus-mode-3 .left-timer,
.page-trainer.focus-mode-3 .language-selector{
  display:none;
}
.page-trainer.trainer-started.focus-mode-3 .focus-counter{display:block}
.page-trainer.focus-mode-3 .mode{display:none}
.page-trainer.focus-mode-3 .counts > *:not(.mode-select){display:none}
.page-trainer.focus-mode-3 .mode-select{display:flex}
.page-trainer.focus-mode-3 .mode-select > *:not(.focus-toggle-wrap){display:none}
.page-trainer.trainer-started.focus-mode-3 .focus-toggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  z-index:30;
  pointer-events:auto;
}
.page-trainer.trainer-started.focus-mode .focus-toggle-wrap,
.page-trainer.trainer-started.focus-mode-2 .focus-toggle-wrap,
.page-trainer.trainer-started.focus-mode-3 .focus-toggle-wrap{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.page-trainer.trainer-started.focus-mode.focus-controls-visible .focus-toggle-wrap,
.page-trainer.trainer-started.focus-mode-2.focus-controls-visible .focus-toggle-wrap,
.page-trainer.trainer-started.focus-mode-3.focus-controls-visible .focus-toggle-wrap{
  opacity:1;
  pointer-events:auto;
}
@media (hover:none),(pointer:coarse){
  .page-trainer.trainer-started.focus-mode .focus-toggle-wrap,
  .page-trainer.trainer-started.focus-mode-2 .focus-toggle-wrap,
  .page-trainer.trainer-started.focus-mode-3 .focus-toggle-wrap{
    opacity:1;
    pointer-events:auto;
  }
}
.page-trainer.focus-mode-3 .words-area{
  padding-top:24px;
  background:transparent;
  box-shadow:none;
  border:none;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-trainer.focus-mode-3 .text-viewport.words-mode{
  height:clamp(120px, 20vh, 190px);
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
  overflow:visible;
}
.page-trainer.focus-mode-3 .text-viewport.words-mode .text-line{
  display:block;
  width:100%;
  transition:none;
  transform:none !important;
  padding-inline:clamp(12px, 4vw, 60px);
}
.page-trainer.focus-mode-3 .text-viewport.words-mode .words{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:0;
  min-height:100%;
}
.page-trainer.focus-mode-3 .text-viewport.words-mode .word{
  display:none;
  font-size:clamp(56px, 7vw, 96px);
  line-height:1.25;
}
.page-trainer.focus-mode-3 .text-viewport.words-mode .word.active{
  display:inline-flex;
  align-items:center;
}
.page-trainer.focus-mode-3 .text-viewport.words-mode .words:not(:has(.word.active)) .word.pending:first-of-type,
.page-trainer.focus-mode-3 .text-viewport.words-mode .words:not(:has(.word.active)) .word.wrong:first-of-type{
  display:inline-flex;
  align-items:center;
}
.page-trainer .trainer-results-page{display:none}
.page-trainer.results-open .trainer-shell,
.page-trainer.results-open .focus-toggle-wrap,
.page-trainer.results-open .trainer-countdown,
.page-trainer.results-open .focus-counter{
  display:none !important;
}
.page-trainer.results-open{
  max-width:none;
  width:100%;
}
.page-trainer.results-open .trainer-results-page{display:block}
.page-trainer .trainer-results-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:calc(32px + var(--topbar-offset)) 0 32px;
}
.page-trainer .trainer-results-container{
  width:min(1200px, 92vw);
  max-width:1200px;
  padding:48px 56px 40px;
  display:flex;
  flex-direction:column;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  max-height:min(90vh, 1100px);
  overflow:auto;
}
.page-trainer .trainer-results-title{
  text-align:center;
  margin:0 0 40px;
  color:#E5E7EB;
  font-size:30px;
  font-weight:800;
  letter-spacing:.01em;
}
.page-trainer .trainer-results-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.page-trainer .trainer-results-chart{
  width:100%;
  height:300px;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  overflow:visible;
}
.page-trainer .trainer-results-chart canvas{
  width:100%;
  height:100%;
  display:block;
}
.page-trainer .trainer-results-stats{display:block}
.page-trainer .trainer-stats-top{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  column-gap:40px;
  row-gap:20px;
  margin-bottom:24px;
}
.page-trainer .trainer-stats-bottom{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
  margin-bottom:16px;
}
.page-trainer .trainer-extra-info{
  margin-top:8px;
  text-align:left;
}
.page-trainer .trainer-stat{display:flex;flex-direction:column;gap:6px}
.page-trainer .trainer-stat-label{margin:0}
.page-trainer .trainer-stat-value{margin:0}
.page-trainer .trainer-stat-sub{margin:0}
.page-trainer .trainer-stat-label{
  color:#E5E7EB;
  font-size:22px;
  font-weight:700;
}
.page-trainer .trainer-stat-value{
  color:#C4B5FD;
  font-size:44px;
  font-weight:800;
  line-height:1.05;
}
.page-trainer .trainer-stat-sub{
  color:var(--muted);
  font-size:13px;
}
.page-trainer .trainer-extra-info{
  color:#E5E7EB;
  font-size:14px;
}
.page-trainer .trainer-extra-info #finalChars{color:#C4B5FD;font-weight:700}
.page-trainer .trainer-extra-info #finalCharsBreakdown{color:#C4B5FD}
.page-trainer .trainer-results-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  margin-top:40px;
  flex-wrap:wrap;
}
.page-trainer .trainer-results-btn{
  padding:8px 14px;
  border-radius:16px;
  border:none;
  background:#0f1320;
  color:#E5E7EB;
  cursor:pointer;
}

.page-trainer .trainer-replay-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.page-trainer .trainer-replay-controls.hidden{
  display:none;
}

.page-trainer .trainer-replay-speed-label{
  font-size:12px;
  font-weight:700;
  color:rgba(148,163,184,.92);
  margin-left:4px;
}

.page-trainer .trainer-replay-speed-select{
  min-height:34px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.58);
  color:#e2e8f0;
  font-size:13px;
  font-weight:700;
}

.page-trainer .trainer-replay-exit{
  margin-left:auto;
}

.page-trainer .trainer-replay-finish{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:color-mix(in srgb, var(--t-surface-solid) 72%, transparent);
}

.page-trainer .trainer-replay-finish.hidden{
  display:none;
}

.page-trainer .trainer-replay-finish-card{
  width:min(430px, 90vw);
  border-radius:14px;
  border:1px solid var(--t-border);
  background:var(--t-surface-solid);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  text-align:center;
}

.page-trainer .trainer-replay-finish-title{
  margin:0;
  color:var(--t-text-primary);
  font-size:20px;
  font-weight:800;
  text-align:center;
}

.page-trainer .trainer-replay-finish-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}

.page-trainer .trainer-replay-finish-actions .trainer-results-btn{
  padding:8px 12px;
  border-radius:10px;
}

@media (max-width:900px){
  .page-trainer .trainer-replay-exit{
    margin-left:0;
  }

  .page-trainer .trainer-replay-finish-card{
    width:min(390px, 92vw);
  }
}

.page-trainer .yt-replay-panel{
  margin-top:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.page-trainer .yt-replay-screen{
  position:relative;
  min-height:110px;
  max-height:180px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(15,23,42,.58);
  line-height:1.85;
  font-size:18px;
  font-weight:600;
  letter-spacing:.01em;
}

.page-trainer .yt-replay-char{
  white-space:pre;
  color:rgba(148,163,184,.58);
}

.page-trainer .yt-replay-char.correct{
  color:#e2e8f0;
}

.page-trainer .yt-replay-char.wrong{
  color:#f87171;
  background:rgba(248,113,113,.12);
  border-radius:4px;
}

.page-trainer .yt-replay-cursor{
  position:absolute;
  top:14px;
  left:14px;
  width:2px;
  height:1.45em;
  border-radius:999px;
  background:#60a5fa;
  pointer-events:none;
  animation:blink 1s ease-in-out infinite;
}

.page-trainer .yt-replay-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.page-trainer .yt-replay-btn{
  padding:8px 12px;
}

.page-trainer .yt-replay-speed-wrap{
  font-size:12px;
  color:rgba(148,163,184,.92);
  font-weight:700;
  margin-left:8px;
}

.page-trainer .yt-replay-speed{
  min-height:34px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.6);
  color:#e2e8f0;
  font-size:13px;
  font-weight:700;
}

.page-trainer .yt-replay-keyboard{
  overflow-x:auto;
  padding-bottom:4px;
}

.page-trainer .yt-replay-keyboard .kb-hand-wrap,
.page-trainer .yt-replay-keyboard .kb-finger-hint{
  display:none;
}

@media (max-width:900px){
  .page-trainer .yt-replay-screen{
    font-size:16px;
  }
}
@media (max-width:900px){
  .page-trainer .trainer-results-grid{grid-template-columns:1fr;gap:40px}
  .page-trainer .trainer-stats-top{grid-template-columns:repeat(2, 1fr)}
  .page-trainer .trainer-stats-bottom{grid-template-columns:1fr}
}
@media (max-height:860px){
  .page-trainer .trainer-results-overlay{
    padding:calc(16px + var(--topbar-offset)) 0 16px;
  }
  .page-trainer .trainer-results-container{
    padding:28px 32px 24px;
    max-height:92vh;
  }
  .page-trainer .trainer-results-grid{gap:32px}
  .page-trainer .trainer-results-chart{height:220px}
  .page-trainer .trainer-stats-top{
    column-gap:24px;
    row-gap:14px;
    margin-bottom:16px;
  }
  .page-trainer .trainer-stats-bottom{
    gap:24px;
    margin-bottom:10px;
  }
  .page-trainer .trainer-stat-label{font-size:18px}
  .page-trainer .trainer-stat-value{font-size:36px}
  .page-trainer .trainer-results-actions{
    margin-top:20px;
    gap:12px;
  }
  .page-trainer .trainer-results-btn{padding:8px 14px}
}
@media (max-height:760px){
  .page-trainer .trainer-results-overlay{
    padding:calc(12px + var(--topbar-offset)) 0 12px;
  }
  .page-trainer .trainer-results-container{
    padding:22px 24px 18px;
    max-height:94vh;
  }
  .page-trainer .trainer-results-grid{gap:24px}
  .page-trainer .trainer-results-chart{height:200px}
  .page-trainer .trainer-stats-top{
    column-gap:20px;
    row-gap:10px;
    margin-bottom:12px;
  }
  .page-trainer .trainer-stats-bottom{
    gap:20px;
    margin-bottom:8px;
  }
  .page-trainer .trainer-stat-label{font-size:16px}
  .page-trainer .trainer-stat-value{font-size:32px}
  .page-trainer .trainer-results-actions{margin-top:16px}
  .page-trainer .trainer-results-btn{padding:7px 12px}
}
.page-trainer.focus-mode .word{font-size:44px}
.page-trainer.focus-mode .text-line{display:inline-flex}
.page-trainer .trainer-shell{display:flex;flex-direction:column;gap:14px}
.page-trainer .trainer-polish-hint{
  align-self:center;
  max-width:min(860px, 100%);
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(96,165,250,0.22);
  background:rgba(59,130,246,0.08);
  color:rgba(219,234,254,0.96);
  font-size:13px;
  line-height:1.45;
  letter-spacing:0.01em;
  text-align:center;
}
.page-trainer .trainer-polish-hint.hidden{display:none}
.page-trainer .trainer-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:center;
  align-items:center;
  padding-inline:0;
}
.page-trainer .trainer-header-main{
  position:relative;
  width:100%;
  display:block;
}
.page-trainer .trainer-header-copy{
  width:100%;
  text-align:center;
}
.page-trainer .trainer-title{
  margin:0;
  font-size:28px;
  font-weight:800;
  color:#E5E7EB;
  letter-spacing:.01em;
}
.page-trainer .trainer-subtitle{margin:0;color:var(--muted);font-size:13px;letter-spacing:.01em}
.page-trainer .trainer-source-meta{
  position:absolute;
  top:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  max-width:min(320px, 42vw);
  text-align:right;
  color:var(--t-text-secondary, #E5E7EB);
}
.page-trainer .trainer-source-meta.hidden{
  display:none;
}
.page-trainer .trainer-source-meta-line{
  margin:0;
  line-height:1.2;
}
.page-trainer .trainer-source-meta-title{
  font-size:15px;
  font-weight:500;
}
.page-trainer .trainer-source-meta-author{
  font-size:14px;
  color:var(--t-text-muted, #B8C0D4);
}
.page-trainer .trainer-keywords{margin:0;color:rgba(255,255,255,0.7);font-size:0.85rem;letter-spacing:0.15em;text-transform:uppercase;margin-top:4px;}
.page-trainer .trainer-actions{display:flex;justify-content:center;margin-top:6px}
.page-trainer .sound-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.12);background:transparent;color:#bdbdbd;border-radius:999px;padding:4px 10px;font-size:11px;cursor:pointer}
.page-trainer .sound-toggle[data-on="1"]{border-color:var(--accent);color:var(--accent)}
.page-trainer .sound-icon{width:14px;height:14px;display:inline-flex}
.page-trainer .sound-icon svg{width:14px;height:14px;display:block}

/* Large countdown for Sentences + Time mode (same style as Testing) */
.page-trainer .trainer-countdown{
  position:absolute;
  left:18px;
  top:28px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  text-align:left;
}
.page-trainer .trainer-countdown-time{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;
  font-size:34px;
  font-weight:500;
  color:#8B5CF6;
  letter-spacing:.02em;
}

/* Words / Sentences switch (Uiverse checkbox style, adapted to palette) */
.page-trainer .checkbox-wrapper-4 *{box-sizing:border-box}
.page-trainer .checkbox-wrapper-4{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.page-trainer .checkbox-wrapper-4 .cbx-btn{
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
  padding:6px 10px;
  border-radius:10px;
  overflow:hidden;
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid rgba(31,41,55,0.9);
  color:#E5E7EB;
}
.page-trainer .checkbox-wrapper-4 .cbx-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.page-trainer .checkbox-wrapper-4 .cbx-btn:active{transform:scale(0.98)}
.page-trainer .checkbox-wrapper-4 .cbx-box{
  position:relative;
  width:18px;
  height:18px;
  border-radius:6px;
  transform:scale(1);
  border:1px solid rgba(229,231,235,0.45);
  transition:background-color 0.2s ease, border-color 0.2s ease;
  box-shadow:0 1px 1px rgba(0,0,0,0.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.page-trainer .checkbox-wrapper-4 .cbx-box svg{display:block}
.page-trainer .checkbox-wrapper-4 .cbx-box polyline{
  fill:none;
  stroke:#E5E7EB;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:16px;
  stroke-dashoffset:16px;
  transition:stroke-dashoffset 0.25s ease;
}
.page-trainer .checkbox-wrapper-4 .cbx-text{line-height:18px;font-size:12px;letter-spacing:.02em;font-weight:600}

.page-trainer .checkbox-wrapper-4 .cbx-btn.selected .cbx-box{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.45);
  animation:wave-4 0.4s ease;
}
.page-trainer .checkbox-wrapper-4 .cbx-btn.selected .cbx-box polyline{stroke-dashoffset:0}
.page-trainer .controls{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.page-trainer .mode{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap}
.page-trainer .mode-btn,.page-trainer .count-mode{
  background:transparent;
  color:#E5E7EB;
  border:1px solid rgba(31,41,55,0.9);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:12px;
  letter-spacing:.02em;
  font-weight:600;
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.page-trainer .mode-btn:hover,.page-trainer .count-mode:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.page-trainer .mode-btn:active,.page-trainer .count-mode:active{transform:scale(0.98)}
.page-trainer .mode-btn.selected,.page-trainer .count-mode.selected{
  border-color:rgba(59,130,246,.45);
  background:rgba(59,130,246,.12);
  color:#E5E7EB;
}
.page-trainer .counts{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
.page-trainer .counts > span{display:none}
.page-trainer .mode-select{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.page-trainer .mode-group{display:flex;align-items:center;gap:10px}
.page-trainer .mode-group.hidden{display:none}
.page-trainer .count-area,.page-trainer .time-area{display:flex;align-items:center}
.page-trainer .count-area.hidden,.page-trainer .time-area.hidden{display:none}
.page-trainer .count-buttons,.page-trainer .time-buttons{display:flex;gap:6px;flex-wrap:nowrap;justify-content:center}
.page-trainer .count-btn,.page-trainer .time-btn{
  background:transparent;
  color:#E5E7EB;
  border:1px solid rgba(31,41,55,0.9);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.page-trainer .count-btn:hover,.page-trainer .time-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.page-trainer .count-btn:active,.page-trainer .time-btn:active{transform:scale(0.98)}
.page-trainer .count-btn.selected,.page-trainer .time-btn.selected{
  border-color:rgba(59,130,246,.45);
  background:rgba(59,130,246,.12);
  color:#E5E7EB;
}

/* Unified capsule button style for top Trainer controls */
.page-trainer .language-selector{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  justify-content:flex-end;
  flex-shrink:0;
  padding:2px;
  border-radius:12px;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:transparent;
}
.page-trainer .trainer-layout-divider{
  display:none;
  width:1px;
  height:18px;
  background:rgba(255,255,255,.16);
  flex-shrink:0;
}
.page-trainer .language-selector.with-os-switch .trainer-layout-divider{display:block}
.page-trainer .trainer-os-switch-group{display:flex;align-items:center}
.page-trainer .testing-os-switch{display:flex;gap:4px;flex-shrink:0;padding:0;border-radius:0;border:none;background:transparent}
.page-trainer .testing-os-switch.hidden{display:none}
.page-trainer .testing-os-btn{
  width:34px;
  height:24px;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--t-text-secondary, #E5E7EB);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.page-trainer .testing-os-btn:hover{background:var(--t-surface-hover, rgba(255,255,255,.06));border-color:rgba(255,255,255,.08)}
.page-trainer .testing-os-btn.selected{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.15));
  border-color:var(--t-accent-blue, rgba(59,130,246,.4));
  color:var(--t-accent-blue, #60a5fa);
}
.page-trainer .testing-os-logo{
  width:15px;
  height:15px;
  display:block;
  background-color:currentColor;
  opacity:.92;
}
.page-trainer .testing-os-logo-win{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 3.4 11.2 2v9.5H2V3.4Zm10.8-1.55L22 0.5v11h-9.2V1.85ZM2 12.5h9.2V22L2 20.6v-8.1Zm10.8 0H22v11.05L12.8 22V12.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-trainer .testing-os-logo-mac{
  width:18px;
  height:18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.65 12.53c.02 2.53 2.2 3.38 2.22 3.39-.02.06-.35 1.2-1.14 2.38-.68 1.01-1.39 2.01-2.49 2.03-1.08.02-1.43-.64-2.67-.64-1.24 0-1.63.62-2.64.66-1.05.04-1.84-1.05-2.53-2.06-1.42-2.05-2.5-5.79-1.05-8.31.72-1.25 2-2.04 3.4-2.06 1.06-.02 2.07.72 2.67.72.6 0 1.73-.89 2.92-.76.5.02 1.89.2 2.79 1.53-.07.04-1.67.98-1.65 2.92Zm-2.17-6.08c.57-.69.95-1.65.84-2.6-.82.03-1.82.55-2.4 1.24-.53.61-.99 1.59-.87 2.52.91.07 1.85-.46 2.43-1.16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.page-trainer .controls :is(
  .count-mode,
  .count-btn,
  .time-btn,
  .checkbox-wrapper-4 .cbx-btn,
  .theme-btn,
  .trainer-toggle-romaji-btn,
  .trainer-hint-btn
){
  background:var(--t-surface, rgba(255,255,255,.04));
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  border-radius:10px;
  color:var(--t-text-secondary, #E5E7EB);
  box-shadow:none;
  letter-spacing:.02em;
}
.page-trainer .controls :is(
  .count-mode,
  .count-btn,
  .time-btn,
  .checkbox-wrapper-4 .cbx-btn,
  .theme-btn,
  .trainer-toggle-romaji-btn,
  .trainer-hint-btn
):hover{
  background:var(--t-surface-hover, rgba(59,130,246,.12));
  border-color:var(--t-border-hover, rgba(255,255,255,.2));
}
.page-trainer .controls :is(
  .count-mode,
  .count-btn,
  .time-btn,
  .checkbox-wrapper-4 .cbx-btn,
  .theme-btn,
  .trainer-toggle-romaji-btn,
  .trainer-hint-btn
):active{
  transform:scale(0.98);
}
.page-trainer .controls :is(
  .count-mode.selected,
  .count-btn.selected,
  .time-btn.selected,
  .checkbox-wrapper-4 .cbx-btn.selected,
  .trainer-toggle-romaji-btn.active,
  .trainer-hint-btn.active
){
  border-color:var(--t-accent-blue-border, rgba(59,130,246,.45));
  background:var(--t-accent-blue-soft, rgba(59,130,246,.12));
  color:var(--t-accent-blue-light, #E5E7EB);
}
.page-trainer .checkbox-wrapper-4 .cbx-box{
  display:none;
}
.page-trainer .checkbox-wrapper-4 .cbx-text{
  line-height:1;
}

/* Top controls: unified segmented groups (without double outer border) */
.page-trainer .controls :is(
  .mode-switch,
  .mode-group,
  .language-selector,
  .theme-selector,
  .focus-toggle-wrap
){
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
  padding:2px;
  border-radius:12px;
  border:1px solid var(--t-border, rgba(255,255,255,.12));
  background:transparent;
}

.page-trainer .mode{gap:10px}
.page-trainer .mode-select{gap:8px}
.page-trainer .mode-group{gap:6px}
.page-trainer .count-buttons,
.page-trainer .time-buttons{gap:4px}

.page-trainer .controls .language-selector .language-btn,
.page-trainer .controls .theme-selector .theme-btn,
.page-trainer .controls .mode-switch .cbx-btn,
.page-trainer .controls .mode-group .count-mode,
.page-trainer .controls .mode-group .count-btn,
.page-trainer .controls .mode-group .time-btn,
.page-trainer .controls .focus-toggle-wrap .checkbox-wrapper-4 .cbx-btn{
  min-height:24px;
  padding:5px 9px;
  border-radius:8px;
  border:none !important;
  background:transparent !important;
  box-shadow:none;
}

.page-trainer .controls .mode-group .count-btn,
.page-trainer .controls .mode-group .time-btn{
  min-width:34px;
  justify-content:center;
}

.page-trainer .controls .language-selector .language-btn:hover,
.page-trainer .controls .theme-selector .theme-btn:hover,
.page-trainer .controls .mode-switch .cbx-btn:hover,
.page-trainer .controls .mode-group .count-mode:hover,
.page-trainer .controls .mode-group .count-btn:hover,
.page-trainer .controls .mode-group .time-btn:hover,
.page-trainer .controls .focus-toggle-wrap .checkbox-wrapper-4 .cbx-btn:hover{
  background:transparent !important;
  border:none !important;
}

.page-trainer .controls .theme-selector .theme-btn.selected,
.page-trainer .controls .mode-switch .cbx-btn.selected,
.page-trainer .controls .mode-group .count-mode.selected,
.page-trainer .controls .mode-group .count-btn.selected,
.page-trainer .controls .mode-group .time-btn.selected,
.page-trainer .controls .focus-toggle-wrap .checkbox-wrapper-4 .cbx-btn.selected{
  background:var(--t-accent-blue-soft, rgba(59,130,246,.15));
  border:none !important;
  color:var(--t-accent-blue, #60a5fa);
}

.page-trainer .controls .language-selector .testing-os-btn{
  border:none !important;
  background:transparent !important;
}

.page-trainer .controls .language-selector .testing-os-btn:hover{
  border:none !important;
  background:transparent !important;
}

.page-trainer .controls .language-selector .testing-os-btn.selected{
  border:none !important;
}

[data-theme="light"] .page-trainer .controls :is(
  .mode-switch,
  .mode-group,
  .language-selector,
  .theme-selector,
  .focus-toggle-wrap
){
  background:transparent;
  border-color:rgba(148,163,184,.5);
}

@media (max-width: 720px){
  .page-trainer .count-buttons,
  .page-trainer .time-buttons{
    flex-wrap:wrap;
  }
}

.page-trainer .words-area{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:transparent;border-radius:0;box-shadow:none;padding:8px 0;position:relative;user-select:none}
.page-trainer .text-viewport{width:100%;padding:0 0;box-sizing:border-box}
.page-trainer:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .text-viewport{
  text-align:center;
}
.page-trainer:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .words{
  width:fit-content;
  max-width:100%;
  display:inline-flex;
}
.page-trainer .text-viewport.words-mode{overflow:hidden;white-space:normal;height:calc(var(--line-h) * 3 + var(--row-gap) * 2 + var(--lines-viewport-extra))}
.page-trainer .text-line{display:inline-block;padding-inline:clamp(8px,4vw,60px);transition:transform 160ms ease;will-change:transform}
.page-trainer .left-timer{position:absolute;left:-220px;top:40px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;font-size:28px;color:var(--muted)}
.page-trainer .words{width:100%;max-width:none;display:flex;flex-wrap:wrap;gap:var(--row-gap);justify-content:center;position:relative;margin:0 auto;text-align:center;overflow-x:visible;border:none;outline:none;user-select:none}
.page-trainer .text-viewport.words-mode .words{display:flex;flex-wrap:wrap;text-align:center}
.page-trainer .word.pending{color:var(--muted)}
.page-trainer .word.active{background:transparent}
.page-trainer .word.correct{color:#b9e6b4;background:transparent}
.page-trainer .word.wrong{color:#f08b8b;background:transparent}
.page-trainer .row-hidden{display:none}
.page-trainer .word{display:inline-block;padding:4px 4px;background:transparent;border-radius:6px;color:var(--text);font-family:var(--typing-font);font-size:48px;letter-spacing:0.04em;line-height:var(--line-h);max-width:100%;word-break:break-word;overflow-wrap:anywhere}
.page-trainer .word.current{color:#fff}
.page-trainer .char{display:inline;transition:color 120ms linear;position:relative}
.page-trainer .char.correct{color:#b9e6b4}
.page-trainer .char.wrong{color:#f08b8b}
.page-trainer .char.active::after{content:'';position:absolute;left:-1px;top:0;width:2px;height:100%;background:#8B5CF6;animation:blink 1s ease-in-out infinite}
.page-trainer .char.active-end::after{content:'';position:absolute;right:-1px;top:0;width:2px;height:100%;background:#8B5CF6;animation:blink 1s ease-in-out infinite}
.page-trainer .caret{position:absolute;width:2px;background:#8B5CF6;animation:blink 1s ease-in-out infinite;pointer-events:none}
.page-trainer .text-viewport.words-mode .caret{display:none}
.page-trainer.focus-mode .text-viewport.words-mode{height:var(--line-h);white-space:nowrap}
.page-trainer.focus-mode .words{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:0}
.page-trainer.focus-mode .text-viewport.words-mode .words{flex-wrap:nowrap;white-space:nowrap;justify-content:flex-start;gap:0}
.page-trainer.focus-mode .text-viewport.words-mode .text-line{display:inline-flex;transition:none}
@keyframes blink{50%{opacity:0}}
.page-trainer .typed{opacity:0;position:fixed;left:-9999px}

.page-trainer .stats{margin-top:6px;color:var(--muted);display:flex;gap:18px;justify-content:center;font-size:11px}
.page-trainer .stats div{font-family:monospace}

.page-trainer .stats,
.page-trainer .counts,
.page-trainer .trainer-countdown,
.page-trainer .left-timer{
  background:transparent !important;
  box-shadow:none !important;
}

[data-theme="light"] .page-trainer .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"] .page-trainer .settings-row-label{
  color:#334155;
}
[data-theme="light"] .page-trainer .settings-toggle-track{
  background:rgba(0,0,0,0.12);
}
[data-theme="light"] .page-trainer .settings-toggle-track::after{
  background:#6366f1;
}
[data-theme="light"] .page-trainer .settings-toggle-input:checked + .settings-toggle-track{
  background:rgba(99,102,241,0.25);
}
[data-theme="light"] .page-trainer .settings-cycle-btn{
  background:rgba(0,0,0,0.04);
  border-color:rgba(0,0,0,0.1);
  color:#334155;
}

@keyframes wave-4{50%{transform:scale(0.9)}}

.page-trainer .result-stats{display:flex;gap:18px;justify-content:center;color:var(--muted);font-family:monospace;margin-bottom:12px}
.page-trainer .result-chart{position:relative;width:100%;max-width:720px;margin:0 auto;overflow:hidden}
.page-trainer .result-chart canvas{width:100%;height:200px;display:block}
.page-trainer .result-chart-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;pointer-events:none}
.page-trainer .result-chart-diag{font-size:11px;color:var(--muted);text-align:center;margin-top:6px}
.page-trainer .result-title{
  margin:0 0 4px;
  font-size:28px;
  font-weight:800;
  color:#E5E7EB;
  letter-spacing:.01em;
  text-align:center;
}
.page-trainer .result-subtitle{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.01em;
  text-align:center;
}
.page-trainer .result-stats .stat-label{color:#8B5CF6;font-weight:600}
.page-trainer .chart-tooltip{
  position:fixed;
  transform:translate(-50%, -100%);
  background:var(--t-surface-solid);
  border:1px solid var(--t-border);
  color:var(--t-text-secondary);
  font-size:11px;
  padding:6px 8px;
  border-radius:8px;
  pointer-events:none;
  box-shadow:var(--t-shadow-sm);
  z-index:60;
  white-space:nowrap;
}

.page-trainer .yt-results-shell{
  background:var(--t-surface-solid);
  border:none;
  border-radius:28px;
  box-shadow:none;
}

.page-trainer .yt-results-title span{
  color:var(--t-accent-blue);
}

.page-trainer .trainer-results-btn{
  border-color:var(--t-border);
  background:var(--t-surface);
  color:var(--t-text-secondary);
}

.page-trainer .trainer-results-btn:hover:not(:disabled){
  border-color:var(--t-border-hover);
  background:var(--t-surface-hover);
  color:var(--t-text-primary);
}

.page-trainer .trainer-results-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

.page-trainer .yt-replay-screen{
  border-color:var(--t-border);
  background:var(--t-surface);
  color:var(--t-text-primary);
}

.page-trainer .yt-replay-char{color:var(--t-text-muted)}
.page-trainer .yt-replay-char.correct{color:var(--t-text-primary)}
.page-trainer .yt-replay-char.wrong{
  color:var(--t-error-bar);
  background:var(--t-accent-blue-soft);
}

.page-trainer .yt-replay-cursor{background:var(--t-accent-blue)}

.page-trainer .yt-replay-speed-wrap{color:var(--t-text-muted)}

.page-trainer .yt-replay-speed,
.page-trainer .trainer-replay-speed-select{
  border-color:var(--t-border);
  background:var(--t-surface);
  color:var(--t-text-secondary);
}

.page-trainer .trainer-replay-speed-label{color:var(--t-text-muted)}

.page-trainer[class*="trainer-color-theme-"] .yt-results-shell,
.page-trainer[class*="trainer-color-theme-"] .yt-card,
.page-trainer[class*="trainer-color-theme-"] .yt-panel{
  border-color:var(--t-border);
  background:var(--t-surface);
}

.page-trainer .modal-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.page-trainer .action-btn{
  border:1px solid #22D3EE;
  background-color:#22D3EE;
  border-radius:12px;
  cursor:pointer;
  padding:10px 16px 10px 12px;
  transition:background-color .2s ease, border-color .2s ease, transform .12s ease;
  font-size:14px;
  color:#0B0F1A;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
}
.page-trainer .action-btn span{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-weight:700;
}
.page-trainer .action-btn:hover{background-color:#0EA5E9;border-color:#0EA5E9}
.page-trainer .action-btn:active{transform:scale(0.98)}
.page-trainer .action-btn-ghost{
  background:transparent;
  border-color:#1F2937;
  color:#E5E7EB;
}
.page-trainer .action-btn-ghost:hover{
  background:rgba(139,92,246,0.12);
  border-color:#8B5CF6;
}

.page-trainer .trainer-title,
.page-trainer .trainer-subtitle,
.page-trainer .focus-counter,
.page-trainer .stats,
.page-trainer .word,
.page-trainer .mode-btn,
.page-trainer .count-mode,
.page-trainer .count-btn,
.page-trainer .time-btn,
.page-trainer .checkbox-wrapper-4 .cbx-btn,
.page-trainer .language-btn,
.page-trainer .theme-btn,
.page-trainer .language-name,
.page-trainer .theme-option{
  color:var(--trainer-theme-text);
}

.page-trainer[class*="trainer-color-theme-"] .trainer-title,
.page-trainer[class*="trainer-color-theme-"] .trainer-subtitle,
.page-trainer[class*="trainer-color-theme-"] .controls,
.page-trainer[class*="trainer-color-theme-"] .controls .cbx-text,
.page-trainer[class*="trainer-color-theme-"] .controls .count-mode,
.page-trainer[class*="trainer-color-theme-"] .controls .count-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .time-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .language-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .language-name,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-option-label,
.page-trainer[class*="trainer-color-theme-"] .controls .focus-toggle{
  color:var(--trainer-theme-text) !important;
}

.page-trainer[class*="trainer-color-theme-"] .controls .language-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .count-mode,
.page-trainer[class*="trainer-color-theme-"] .controls .count-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .time-btn,
.page-trainer[class*="trainer-color-theme-"] .controls .cbx-btn{
  background:var(--trainer-theme-surface) !important;
  border-color:var(--trainer-theme-border) !important;
}

.page-trainer[class*="trainer-color-theme-"] .controls .language-dropdown,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-dropdown{
  background:var(--trainer-theme-dropdown-bg) !important;
  border-color:var(--trainer-theme-border-hover) !important;
}

.page-trainer[class*="trainer-color-theme-"] .controls .language-option,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-option{
  color:var(--trainer-theme-text) !important;
}

.page-trainer[class*="trainer-color-theme-"] .controls .language-option:hover,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-option:hover{
  background:var(--trainer-theme-accent-soft) !important;
}

.page-trainer[class*="trainer-color-theme-"] .controls .language-option.selected,
.page-trainer[class*="trainer-color-theme-"] .controls .theme-option.selected{
  background:var(--trainer-theme-accent-soft) !important;
  border-color:var(--trainer-theme-accent-border) !important;
}

.page-trainer .words .word,
.page-trainer .words .word.active,
.page-trainer .words .word.current,
.page-trainer .words .char{
  color:var(--trainer-theme-word) !important;
}
.page-trainer .words .word.pending{
  color:var(--trainer-theme-pending) !important;
}
.page-trainer .words .word.correct,
.page-trainer .words .char.correct{
  color:var(--trainer-theme-correct) !important;
}
.page-trainer .words .word.wrong,
.page-trainer .words .char.wrong{
  color:var(--trainer-theme-wrong) !important;
}
.page-trainer .char.active::after,
.page-trainer .char.active-end::after,
.page-trainer .caret{background:var(--trainer-theme-caret)}
.page-trainer .trainer-countdown-time{color:#60a5fa}

.page-trainer .language-btn,
.page-trainer .theme-btn,
.page-trainer .mode-btn,
.page-trainer .count-mode,
.page-trainer .count-btn,
.page-trainer .time-btn,
.page-trainer .checkbox-wrapper-4 .cbx-btn{
  background:var(--trainer-theme-surface);
  border-color:var(--trainer-theme-border);
}

.page-trainer .language-btn:hover,
.page-trainer .theme-btn:hover,
.page-trainer .mode-btn:hover,
.page-trainer .count-mode:hover,
.page-trainer .count-btn:hover,
.page-trainer .time-btn:hover,
.page-trainer .checkbox-wrapper-4 .cbx-btn:hover{
  border-color:var(--trainer-theme-border-hover);
}

.page-trainer .mode-btn.selected,
.page-trainer .count-mode.selected,
.page-trainer .count-btn.selected,
.page-trainer .time-btn.selected,
.page-trainer .checkbox-wrapper-4 .cbx-btn.selected,
.page-trainer .language-option.selected,
.page-trainer .theme-option.selected{
  border-color:var(--trainer-theme-accent-border);
  background:var(--trainer-theme-accent-soft);
}

.page-trainer .language-dropdown,
.page-trainer .theme-dropdown{
  background:var(--trainer-theme-dropdown-bg);
  border-color:var(--trainer-theme-border-hover);
}

.page-trainer:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .words-area{
  background:transparent !important;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:8px 0;
}

.page-trainer:not(.focus-mode):not(.focus-mode-2):not(.focus-mode-3) .text-viewport{
  background:transparent;
}

.page-trainer .typing-keyboard,
.page-trainer .keyboard-key,
.page-trainer .keyboard-key.grey,
.page-trainer .keyboard-space,
.page-trainer .keyboard-backspace,
.page-trainer .keyboard-enter,
.page-trainer .keyboard-tab,
.page-trainer .keyboard-shift,
.page-trainer .keyboard-caps,
.page-trainer .keyboard-ctrl,
.page-trainer .keyboard-alt,
.page-trainer .keyboard-win{
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}

.page-trainer.trainer-color-theme-olive{
  --trainer-theme-surface:rgba(56,69,51,0.5);
  --trainer-theme-border:rgba(121,135,119,0.85);
  --trainer-theme-border-hover:rgba(204,213,174,0.65);
  --trainer-theme-text:#dde5c2;
  --trainer-theme-word:#e8f0d0;
  --trainer-theme-pending:#a3b18a;
  --trainer-theme-accent:#fefae0;
  --trainer-theme-accent-soft:rgba(204,213,174,0.18);
  --trainer-theme-accent-border:rgba(204,213,174,0.62);
  --trainer-theme-dropdown-bg:rgba(40,54,37,0.96);
  --trainer-theme-correct:#b7e4c7;
  --trainer-theme-wrong:#f7a399;
  --trainer-theme-caret:#ccd5ae;
  --trainer-theme-bg-radial1:rgba(204,213,174,0.22);
  --trainer-theme-bg-radial2:rgba(41,54,38,0.95);
  --trainer-theme-bg-radial3:rgba(29,39,27,0.99);
  --trainer-theme-words-bg:rgba(38,52,35,0.82);
  --trainer-theme-words-border:rgba(204,213,174,0.35);
  --trainer-theme-words-shadow:0 20px 52px rgba(17,28,15,0.45);
  --t-kb-wrap-bg:rgba(36,51,34,0.72);
  --t-kb-wrap-border:rgba(204,213,174,0.32);
  --t-kb-key-bg:rgba(205,213,174,0.12);
  --t-kb-key-border:rgba(205,213,174,0.3);
  --t-kb-key-color:#e9f0d1;
  --t-kb-grey-bg:rgba(163,177,138,0.2);
  --t-kb-grey-border:rgba(163,177,138,0.35);
  --t-kb-grey-color:rgba(227,239,199,0.72);
}

.page-trainer.trainer-color-theme-sunset{
  --trainer-theme-surface:rgba(88,43,44,0.5);
  --trainer-theme-border:rgba(249,115,22,0.55);
  --trainer-theme-border-hover:rgba(255,214,165,0.7);
  --trainer-theme-text:#ffddd2;
  --trainer-theme-word:#ffe4d6;
  --trainer-theme-pending:#f2b8a0;
  --trainer-theme-accent:#ffb703;
  --trainer-theme-accent-soft:rgba(251,146,60,0.2);
  --trainer-theme-accent-border:rgba(251,146,60,0.65);
  --trainer-theme-dropdown-bg:rgba(73,33,35,0.96);
  --trainer-theme-correct:#d9f99d;
  --trainer-theme-wrong:#fecaca;
  --trainer-theme-caret:#fb923c;
  --trainer-theme-bg-radial1:rgba(251,146,60,0.24);
  --trainer-theme-bg-radial2:rgba(86,33,37,0.95);
  --trainer-theme-bg-radial3:rgba(54,23,28,0.99);
  --trainer-theme-words-bg:rgba(74,31,35,0.84);
  --trainer-theme-words-border:rgba(255,214,165,0.36);
  --trainer-theme-words-shadow:0 20px 52px rgba(44,13,14,0.45);
  --t-kb-wrap-bg:rgba(70,30,34,0.74);
  --t-kb-wrap-border:rgba(255,214,165,0.3);
  --t-kb-key-bg:rgba(255,214,165,0.11);
  --t-kb-key-border:rgba(255,214,165,0.28);
  --t-kb-key-color:#ffe7d7;
  --t-kb-grey-bg:rgba(251,146,60,0.18);
  --t-kb-grey-border:rgba(251,146,60,0.34);
  --t-kb-grey-color:rgba(255,224,198,0.75);
}

.page-trainer.trainer-color-theme-ocean{
  --trainer-theme-surface:rgba(10,41,66,0.5);
  --trainer-theme-border:rgba(56,189,248,0.55);
  --trainer-theme-border-hover:rgba(125,211,252,0.68);
  --trainer-theme-text:#dff5ff;
  --trainer-theme-word:#e6f7ff;
  --trainer-theme-pending:#8ecae6;
  --trainer-theme-accent:#22d3ee;
  --trainer-theme-accent-soft:rgba(34,211,238,0.17);
  --trainer-theme-accent-border:rgba(34,211,238,0.58);
  --trainer-theme-dropdown-bg:rgba(7,34,56,0.96);
  --trainer-theme-correct:#86efac;
  --trainer-theme-wrong:#fda4af;
  --trainer-theme-caret:#38bdf8;
  --trainer-theme-bg-radial1:rgba(56,189,248,0.24);
  --trainer-theme-bg-radial2:rgba(8,33,53,0.95);
  --trainer-theme-bg-radial3:rgba(4,22,39,0.99);
  --trainer-theme-words-bg:rgba(7,34,56,0.84);
  --trainer-theme-words-border:rgba(125,211,252,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(2,19,34,0.45);
  --t-kb-wrap-bg:rgba(8,33,53,0.75);
  --t-kb-wrap-border:rgba(125,211,252,0.32);
  --t-kb-key-bg:rgba(125,211,252,0.12);
  --t-kb-key-border:rgba(125,211,252,0.28);
  --t-kb-key-color:#e5f7ff;
  --t-kb-grey-bg:rgba(56,189,248,0.18);
  --t-kb-grey-border:rgba(56,189,248,0.34);
  --t-kb-grey-color:rgba(200,236,252,0.74);
}

.page-trainer.trainer-color-theme-neon{
  --trainer-theme-surface:rgba(15,24,17,0.55);
  --trainer-theme-border:rgba(74,222,128,0.55);
  --trainer-theme-border-hover:rgba(134,239,172,0.75);
  --trainer-theme-text:#d1fae5;
  --trainer-theme-word:#defce9;
  --trainer-theme-pending:#86efac;
  --trainer-theme-accent:#4ade80;
  --trainer-theme-accent-soft:rgba(74,222,128,0.2);
  --trainer-theme-accent-border:rgba(74,222,128,0.62);
  --trainer-theme-dropdown-bg:rgba(13,22,15,0.96);
  --trainer-theme-correct:#bbf7d0;
  --trainer-theme-wrong:#fda4af;
  --trainer-theme-caret:#4ade80;
  --trainer-theme-bg-radial1:rgba(74,222,128,0.2);
  --trainer-theme-bg-radial2:rgba(14,24,16,0.95);
  --trainer-theme-bg-radial3:rgba(8,14,9,0.99);
  --trainer-theme-words-bg:rgba(12,22,14,0.84);
  --trainer-theme-words-border:rgba(134,239,172,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(5,13,7,0.46);
  --t-kb-wrap-bg:rgba(12,22,14,0.75);
  --t-kb-wrap-border:rgba(134,239,172,0.3);
  --t-kb-key-bg:rgba(134,239,172,0.12);
  --t-kb-key-border:rgba(134,239,172,0.28);
  --t-kb-key-color:#e4fbe9;
  --t-kb-grey-bg:rgba(74,222,128,0.17);
  --t-kb-grey-border:rgba(74,222,128,0.34);
  --t-kb-grey-color:rgba(210,250,223,0.75);
}

.page-trainer.trainer-color-theme-sakura{
  --trainer-theme-surface:rgba(77,31,63,0.5);
  --trainer-theme-border:rgba(244,114,182,0.5);
  --trainer-theme-border-hover:rgba(251,207,232,0.72);
  --trainer-theme-text:#ffe4f1;
  --trainer-theme-word:#ffe9f4;
  --trainer-theme-pending:#f9a8d4;
  --trainer-theme-accent:#f472b6;
  --trainer-theme-accent-soft:rgba(244,114,182,0.22);
  --trainer-theme-accent-border:rgba(244,114,182,0.65);
  --trainer-theme-dropdown-bg:rgba(58,25,49,0.96);
  --trainer-theme-correct:#bbf7d0;
  --trainer-theme-wrong:#fecdd3;
  --trainer-theme-caret:#f472b6;
  --trainer-theme-bg-radial1:rgba(244,114,182,0.2);
  --trainer-theme-bg-radial2:rgba(58,25,49,0.95);
  --trainer-theme-bg-radial3:rgba(38,17,33,0.99);
  --trainer-theme-words-bg:rgba(56,23,47,0.84);
  --trainer-theme-words-border:rgba(251,207,232,0.36);
  --trainer-theme-words-shadow:0 20px 52px rgba(30,10,25,0.46);
  --t-kb-wrap-bg:rgba(54,22,46,0.75);
  --t-kb-wrap-border:rgba(251,207,232,0.3);
  --t-kb-key-bg:rgba(251,207,232,0.12);
  --t-kb-key-border:rgba(251,207,232,0.3);
  --t-kb-key-color:#ffeaf5;
  --t-kb-grey-bg:rgba(244,114,182,0.17);
  --t-kb-grey-border:rgba(244,114,182,0.34);
  --t-kb-grey-color:rgba(255,225,242,0.76);
}

.page-trainer.trainer-color-theme-olive-soft{
  --trainer-theme-surface:rgba(74,90,69,0.5);
  --trainer-theme-border:rgba(214,223,194,0.54);
  --trainer-theme-border-hover:rgba(230,239,206,0.74);
  --trainer-theme-text:#edf4d9;
  --trainer-theme-word:#f3f8e5;
  --trainer-theme-pending:#c7d4aa;
  --trainer-theme-accent:#d8dfc2;
  --trainer-theme-accent-soft:rgba(216,223,194,0.24);
  --trainer-theme-accent-border:rgba(216,223,194,0.64);
  --trainer-theme-dropdown-bg:rgba(65,81,60,0.96);
  --trainer-theme-correct:#d9f5d0;
  --trainer-theme-wrong:#ffd2cc;
  --trainer-theme-caret:#dbe5c4;
  --trainer-theme-bg-radial1:rgba(216,223,194,0.2);
  --trainer-theme-bg-radial2:rgba(65,81,60,0.95);
  --trainer-theme-bg-radial3:rgba(45,59,41,0.99);
  --trainer-theme-words-bg:rgba(65,81,60,0.84);
  --trainer-theme-words-border:rgba(230,239,206,0.36);
  --trainer-theme-words-shadow:0 20px 52px rgba(26,35,23,0.42);
  --t-kb-wrap-bg:rgba(63,79,58,0.74);
  --t-kb-wrap-border:rgba(230,239,206,0.32);
  --t-kb-key-bg:rgba(230,239,206,0.12);
  --t-kb-key-border:rgba(230,239,206,0.3);
  --t-kb-key-color:#f3f8e5;
  --t-kb-grey-bg:rgba(182,199,157,0.2);
  --t-kb-grey-border:rgba(182,199,157,0.35);
  --t-kb-grey-color:rgba(237,244,217,0.74);
}

.page-trainer.trainer-color-theme-olive-deep{
  --trainer-theme-surface:rgba(36,52,33,0.54);
  --trainer-theme-border:rgba(185,200,157,0.48);
  --trainer-theme-border-hover:rgba(205,220,176,0.7);
  --trainer-theme-text:#dceac0;
  --trainer-theme-word:#e6f0cf;
  --trainer-theme-pending:#96ab79;
  --trainer-theme-accent:#b9c89d;
  --trainer-theme-accent-soft:rgba(185,200,157,0.2);
  --trainer-theme-accent-border:rgba(185,200,157,0.56);
  --trainer-theme-dropdown-bg:rgba(34,48,31,0.97);
  --trainer-theme-correct:#c9edbe;
  --trainer-theme-wrong:#f7c5be;
  --trainer-theme-caret:#c7d7aa;
  --trainer-theme-bg-radial1:rgba(185,200,157,0.18);
  --trainer-theme-bg-radial2:rgba(33,47,30,0.96);
  --trainer-theme-bg-radial3:rgba(21,31,20,0.99);
  --trainer-theme-words-bg:rgba(33,47,30,0.86);
  --trainer-theme-words-border:rgba(205,220,176,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(12,20,11,0.46);
  --t-kb-wrap-bg:rgba(31,45,29,0.76);
  --t-kb-wrap-border:rgba(205,220,176,0.3);
  --t-kb-key-bg:rgba(205,220,176,0.11);
  --t-kb-key-border:rgba(205,220,176,0.28);
  --t-kb-key-color:#e6f0cf;
  --t-kb-grey-bg:rgba(150,171,121,0.18);
  --t-kb-grey-border:rgba(150,171,121,0.34);
  --t-kb-grey-color:rgba(220,234,192,0.72);
}

.page-trainer.trainer-color-theme-sunset-soft{
  --trainer-theme-surface:rgba(116,66,65,0.5);
  --trainer-theme-border:rgba(255,220,188,0.52);
  --trainer-theme-border-hover:rgba(255,235,214,0.72);
  --trainer-theme-text:#ffe8da;
  --trainer-theme-word:#ffefe4;
  --trainer-theme-pending:#f0c4a7;
  --trainer-theme-accent:#ffdcbc;
  --trainer-theme-accent-soft:rgba(255,220,188,0.24);
  --trainer-theme-accent-border:rgba(255,220,188,0.62);
  --trainer-theme-dropdown-bg:rgba(108,61,60,0.96);
  --trainer-theme-correct:#daf2d2;
  --trainer-theme-wrong:#ffcfc6;
  --trainer-theme-caret:#ffd9b8;
  --trainer-theme-bg-radial1:rgba(255,220,188,0.22);
  --trainer-theme-bg-radial2:rgba(107,60,59,0.95);
  --trainer-theme-bg-radial3:rgba(77,40,41,0.99);
  --trainer-theme-words-bg:rgba(104,58,58,0.84);
  --trainer-theme-words-border:rgba(255,235,214,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(43,21,21,0.42);
  --t-kb-wrap-bg:rgba(101,56,56,0.74);
  --t-kb-wrap-border:rgba(255,235,214,0.3);
  --t-kb-key-bg:rgba(255,235,214,0.12);
  --t-kb-key-border:rgba(255,235,214,0.28);
  --t-kb-key-color:#ffefe4;
  --t-kb-grey-bg:rgba(245,173,132,0.18);
  --t-kb-grey-border:rgba(245,173,132,0.34);
  --t-kb-grey-color:rgba(255,229,208,0.74);
}

.page-trainer.trainer-color-theme-sunset-deep{
  --trainer-theme-surface:rgba(69,33,34,0.54);
  --trainer-theme-border:rgba(255,201,150,0.48);
  --trainer-theme-border-hover:rgba(255,217,176,0.68);
  --trainer-theme-text:#ffd8c4;
  --trainer-theme-word:#ffe3d1;
  --trainer-theme-pending:#e3a87c;
  --trainer-theme-accent:#ffc996;
  --trainer-theme-accent-soft:rgba(255,201,150,0.2);
  --trainer-theme-accent-border:rgba(255,201,150,0.56);
  --trainer-theme-dropdown-bg:rgba(68,33,34,0.97);
  --trainer-theme-correct:#cfeccc;
  --trainer-theme-wrong:#fbbeb5;
  --trainer-theme-caret:#ffcd9f;
  --trainer-theme-bg-radial1:rgba(255,201,150,0.2);
  --trainer-theme-bg-radial2:rgba(67,32,33,0.96);
  --trainer-theme-bg-radial3:rgba(44,20,21,0.99);
  --trainer-theme-words-bg:rgba(65,31,32,0.86);
  --trainer-theme-words-border:rgba(255,217,176,0.32);
  --trainer-theme-words-shadow:0 20px 52px rgba(29,13,13,0.46);
  --t-kb-wrap-bg:rgba(63,30,31,0.76);
  --t-kb-wrap-border:rgba(255,217,176,0.3);
  --t-kb-key-bg:rgba(255,217,176,0.11);
  --t-kb-key-border:rgba(255,217,176,0.27);
  --t-kb-key-color:#ffe3d1;
  --t-kb-grey-bg:rgba(225,131,84,0.18);
  --t-kb-grey-border:rgba(225,131,84,0.34);
  --t-kb-grey-color:rgba(255,214,186,0.72);
}

.page-trainer.trainer-color-theme-ocean-soft{
  --trainer-theme-surface:rgba(33,83,104,0.5);
  --trainer-theme-border:rgba(167,219,239,0.5);
  --trainer-theme-border-hover:rgba(205,236,247,0.72);
  --trainer-theme-text:#dcf4fb;
  --trainer-theme-word:#eefbff;
  --trainer-theme-pending:#95c8dd;
  --trainer-theme-accent:#a7dbef;
  --trainer-theme-accent-soft:rgba(167,219,239,0.22);
  --trainer-theme-accent-border:rgba(167,219,239,0.6);
  --trainer-theme-dropdown-bg:rgba(31,79,102,0.96);
  --trainer-theme-correct:#cdeedc;
  --trainer-theme-wrong:#f5ccd0;
  --trainer-theme-caret:#b4deee;
  --trainer-theme-bg-radial1:rgba(167,219,239,0.2);
  --trainer-theme-bg-radial2:rgba(30,78,100,0.95);
  --trainer-theme-bg-radial3:rgba(19,53,69,0.99);
  --trainer-theme-words-bg:rgba(30,77,99,0.84);
  --trainer-theme-words-border:rgba(205,236,247,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(10,31,41,0.42);
  --t-kb-wrap-bg:rgba(29,75,97,0.74);
  --t-kb-wrap-border:rgba(205,236,247,0.3);
  --t-kb-key-bg:rgba(205,236,247,0.12);
  --t-kb-key-border:rgba(205,236,247,0.28);
  --t-kb-key-color:#eefbff;
  --t-kb-grey-bg:rgba(120,194,221,0.18);
  --t-kb-grey-border:rgba(120,194,221,0.34);
  --t-kb-grey-color:rgba(218,242,250,0.74);
}

.page-trainer.trainer-color-theme-ocean-deep{
  --trainer-theme-surface:rgba(8,34,52,0.54);
  --trainer-theme-border:rgba(127,194,223,0.48);
  --trainer-theme-border-hover:rgba(157,215,236,0.68);
  --trainer-theme-text:#d9eef8;
  --trainer-theme-word:#e6f6fc;
  --trainer-theme-pending:#6ea8c0;
  --trainer-theme-accent:#7fc2df;
  --trainer-theme-accent-soft:rgba(127,194,223,0.2);
  --trainer-theme-accent-border:rgba(127,194,223,0.56);
  --trainer-theme-dropdown-bg:rgba(6,34,52,0.97);
  --trainer-theme-correct:#bfe7d4;
  --trainer-theme-wrong:#efc0c8;
  --trainer-theme-caret:#8ec9e3;
  --trainer-theme-bg-radial1:rgba(127,194,223,0.18);
  --trainer-theme-bg-radial2:rgba(6,33,51,0.96);
  --trainer-theme-bg-radial3:rgba(3,20,31,0.99);
  --trainer-theme-words-bg:rgba(6,32,49,0.86);
  --trainer-theme-words-border:rgba(157,215,236,0.32);
  --trainer-theme-words-shadow:0 20px 52px rgba(2,14,22,0.46);
  --t-kb-wrap-bg:rgba(6,31,47,0.76);
  --t-kb-wrap-border:rgba(157,215,236,0.3);
  --t-kb-key-bg:rgba(157,215,236,0.11);
  --t-kb-key-border:rgba(157,215,236,0.27);
  --t-kb-key-color:#e6f6fc;
  --t-kb-grey-bg:rgba(66,163,200,0.18);
  --t-kb-grey-border:rgba(66,163,200,0.34);
  --t-kb-grey-color:rgba(201,234,246,0.72);
}

.page-trainer.trainer-color-theme-neon-soft{
  --trainer-theme-surface:rgba(41,68,49,0.5);
  --trainer-theme-border:rgba(134,239,172,0.5);
  --trainer-theme-border-hover:rgba(187,247,208,0.7);
  --trainer-theme-text:#ecfdf3;
  --trainer-theme-word:#f4fff8;
  --trainer-theme-pending:#a8e2b9;
  --trainer-theme-accent:#86efac;
  --trainer-theme-accent-soft:rgba(134,239,172,0.22);
  --trainer-theme-accent-border:rgba(134,239,172,0.58);
  --trainer-theme-dropdown-bg:rgba(39,67,48,0.96);
  --trainer-theme-correct:#d4f5d8;
  --trainer-theme-wrong:#ffd1d6;
  --trainer-theme-caret:#98f0ba;
  --trainer-theme-bg-radial1:rgba(134,239,172,0.2);
  --trainer-theme-bg-radial2:rgba(38,66,47,0.95);
  --trainer-theme-bg-radial3:rgba(24,45,31,0.99);
  --trainer-theme-words-bg:rgba(38,65,47,0.84);
  --trainer-theme-words-border:rgba(187,247,208,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(11,24,15,0.42);
  --t-kb-wrap-bg:rgba(37,63,45,0.74);
  --t-kb-wrap-border:rgba(187,247,208,0.3);
  --t-kb-key-bg:rgba(187,247,208,0.12);
  --t-kb-key-border:rgba(187,247,208,0.28);
  --t-kb-key-color:#f4fff8;
  --t-kb-grey-bg:rgba(99,225,142,0.18);
  --t-kb-grey-border:rgba(99,225,142,0.34);
  --t-kb-grey-color:rgba(222,252,231,0.74);
}

.page-trainer.trainer-color-theme-neon-deep{
  --trainer-theme-surface:rgba(11,24,14,0.56);
  --trainer-theme-border:rgba(52,214,122,0.48);
  --trainer-theme-border-hover:rgba(110,236,162,0.66);
  --trainer-theme-text:#d7f5e3;
  --trainer-theme-word:#e8fbef;
  --trainer-theme-pending:#68bf8f;
  --trainer-theme-accent:#34d67a;
  --trainer-theme-accent-soft:rgba(52,214,122,0.2);
  --trainer-theme-accent-border:rgba(52,214,122,0.54);
  --trainer-theme-dropdown-bg:rgba(10,22,13,0.97);
  --trainer-theme-correct:#bcecc9;
  --trainer-theme-wrong:#f4bdc7;
  --trainer-theme-caret:#56de91;
  --trainer-theme-bg-radial1:rgba(52,214,122,0.18);
  --trainer-theme-bg-radial2:rgba(10,21,13,0.96);
  --trainer-theme-bg-radial3:rgba(5,14,8,0.99);
  --trainer-theme-words-bg:rgba(10,21,13,0.86);
  --trainer-theme-words-border:rgba(110,236,162,0.32);
  --trainer-theme-words-shadow:0 20px 52px rgba(4,9,5,0.48);
  --t-kb-wrap-bg:rgba(10,20,12,0.77);
  --t-kb-wrap-border:rgba(110,236,162,0.3);
  --t-kb-key-bg:rgba(110,236,162,0.11);
  --t-kb-key-border:rgba(110,236,162,0.27);
  --t-kb-key-color:#e8fbef;
  --t-kb-grey-bg:rgba(52,214,122,0.18);
  --t-kb-grey-border:rgba(52,214,122,0.34);
  --t-kb-grey-color:rgba(204,248,222,0.72);
}

.page-trainer.trainer-color-theme-sakura-soft{
  --trainer-theme-surface:rgba(108,58,93,0.5);
  --trainer-theme-border:rgba(251,199,228,0.52);
  --trainer-theme-border-hover:rgba(254,227,242,0.72);
  --trainer-theme-text:#ffeaf5;
  --trainer-theme-word:#fff2f9;
  --trainer-theme-pending:#f5b8db;
  --trainer-theme-accent:#fbc7e4;
  --trainer-theme-accent-soft:rgba(251,199,228,0.24);
  --trainer-theme-accent-border:rgba(251,199,228,0.62);
  --trainer-theme-dropdown-bg:rgba(105,57,90,0.96);
  --trainer-theme-correct:#d6f0dc;
  --trainer-theme-wrong:#ffd0db;
  --trainer-theme-caret:#f9c6e3;
  --trainer-theme-bg-radial1:rgba(251,199,228,0.22);
  --trainer-theme-bg-radial2:rgba(104,56,89,0.95);
  --trainer-theme-bg-radial3:rgba(74,36,63,0.99);
  --trainer-theme-words-bg:rgba(101,54,86,0.84);
  --trainer-theme-words-border:rgba(254,227,242,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(39,17,33,0.42);
  --t-kb-wrap-bg:rgba(99,53,84,0.74);
  --t-kb-wrap-border:rgba(254,227,242,0.3);
  --t-kb-key-bg:rgba(254,227,242,0.12);
  --t-kb-key-border:rgba(254,227,242,0.28);
  --t-kb-key-color:#fff2f9;
  --t-kb-grey-bg:rgba(245,153,204,0.18);
  --t-kb-grey-border:rgba(245,153,204,0.34);
  --t-kb-grey-color:rgba(255,234,245,0.74);
}

.page-trainer.trainer-color-theme-sakura-deep{
  --trainer-theme-surface:rgba(54,21,45,0.56);
  --trainer-theme-border:rgba(243,146,197,0.48);
  --trainer-theme-border-hover:rgba(250,183,220,0.68);
  --trainer-theme-text:#ffdceb;
  --trainer-theme-word:#ffe7f2;
  --trainer-theme-pending:#d989b7;
  --trainer-theme-accent:#f392c5;
  --trainer-theme-accent-soft:rgba(243,146,197,0.2);
  --trainer-theme-accent-border:rgba(243,146,197,0.56);
  --trainer-theme-dropdown-bg:rgba(53,20,44,0.97);
  --trainer-theme-correct:#cdebd6;
  --trainer-theme-wrong:#f8bccd;
  --trainer-theme-caret:#f3abd0;
  --trainer-theme-bg-radial1:rgba(243,146,197,0.2);
  --trainer-theme-bg-radial2:rgba(52,20,43,0.96);
  --trainer-theme-bg-radial3:rgba(33,12,27,0.99);
  --trainer-theme-words-bg:rgba(50,19,41,0.86);
  --trainer-theme-words-border:rgba(250,183,220,0.32);
  --trainer-theme-words-shadow:0 20px 52px rgba(20,7,16,0.47);
  --t-kb-wrap-bg:rgba(49,18,40,0.77);
  --t-kb-wrap-border:rgba(250,183,220,0.3);
  --t-kb-key-bg:rgba(250,183,220,0.11);
  --t-kb-key-border:rgba(250,183,220,0.27);
  --t-kb-key-color:#ffe7f2;
  --t-kb-grey-bg:rgba(234,112,170,0.18);
  --t-kb-grey-border:rgba(234,112,170,0.34);
  --t-kb-grey-color:rgba(255,219,237,0.72);
}

.page-trainer.trainer-color-theme-dusk{
  --trainer-theme-surface:rgba(50,38,82,0.5);
  --trainer-theme-border:rgba(167,139,250,0.5);
  --trainer-theme-border-hover:rgba(216,180,254,0.72);
  --trainer-theme-text:#efe9ff;
  --trainer-theme-word:#f5f0ff;
  --trainer-theme-pending:#c4b5fd;
  --trainer-theme-accent:#a78bfa;
  --trainer-theme-accent-soft:rgba(167,139,250,0.22);
  --trainer-theme-accent-border:rgba(167,139,250,0.62);
  --trainer-theme-dropdown-bg:rgba(43,35,71,0.96);
  --trainer-theme-correct:#bbf7d0;
  --trainer-theme-wrong:#fecdd3;
  --trainer-theme-caret:#c4b5fd;
  --trainer-theme-bg-radial1:rgba(167,139,250,0.2);
  --trainer-theme-bg-radial2:rgba(42,33,69,0.95);
  --trainer-theme-bg-radial3:rgba(27,21,46,0.99);
  --trainer-theme-words-bg:rgba(42,34,69,0.84);
  --trainer-theme-words-border:rgba(216,180,254,0.36);
  --trainer-theme-words-shadow:0 20px 52px rgba(19,14,33,0.46);
  --t-kb-wrap-bg:rgba(42,34,69,0.75);
  --t-kb-wrap-border:rgba(216,180,254,0.3);
  --t-kb-key-bg:rgba(216,180,254,0.12);
  --t-kb-key-border:rgba(216,180,254,0.3);
  --t-kb-key-color:#f2ecff;
  --t-kb-grey-bg:rgba(167,139,250,0.17);
  --t-kb-grey-border:rgba(167,139,250,0.34);
  --t-kb-grey-color:rgba(233,223,255,0.76);
}

.page-trainer.trainer-color-theme-mocha{
  --trainer-theme-surface:rgba(63,45,39,0.52);
  --trainer-theme-border:rgba(191,143,112,0.5);
  --trainer-theme-border-hover:rgba(236,196,167,0.72);
  --trainer-theme-text:#f4e6dc;
  --trainer-theme-word:#f7e9df;
  --trainer-theme-pending:#d6bfa7;
  --trainer-theme-accent:#d6bfa7;
  --trainer-theme-accent-soft:rgba(214,191,167,0.22);
  --trainer-theme-accent-border:rgba(214,191,167,0.62);
  --trainer-theme-dropdown-bg:rgba(58,42,36,0.96);
  --trainer-theme-correct:#cdeccf;
  --trainer-theme-wrong:#ffd0c5;
  --trainer-theme-caret:#e7c7ae;
  --trainer-theme-bg-radial1:rgba(214,191,167,0.22);
  --trainer-theme-bg-radial2:rgba(57,41,35,0.95);
  --trainer-theme-bg-radial3:rgba(37,27,23,0.99);
  --trainer-theme-words-bg:rgba(56,40,34,0.84);
  --trainer-theme-words-border:rgba(236,196,167,0.36);
  --trainer-theme-words-shadow:0 20px 52px rgba(24,16,13,0.46);
  --t-kb-wrap-bg:rgba(56,40,34,0.75);
  --t-kb-wrap-border:rgba(236,196,167,0.3);
  --t-kb-key-bg:rgba(236,196,167,0.12);
  --t-kb-key-border:rgba(236,196,167,0.3);
  --t-kb-key-color:#f7e9df;
  --t-kb-grey-bg:rgba(191,143,112,0.17);
  --t-kb-grey-border:rgba(191,143,112,0.34);
  --t-kb-grey-color:rgba(244,222,205,0.76);
}

.page-trainer.trainer-color-theme-nord{
  --trainer-theme-surface:rgba(53,64,83,0.5);
  --trainer-theme-border:rgba(136,192,208,0.5);
  --trainer-theme-border-hover:rgba(163,204,219,0.72);
  --trainer-theme-text:#e5edf5;
  --trainer-theme-word:#edf3f9;
  --trainer-theme-pending:#a3becc;
  --trainer-theme-accent:#88c0d0;
  --trainer-theme-accent-soft:rgba(136,192,208,0.2);
  --trainer-theme-accent-border:rgba(136,192,208,0.6);
  --trainer-theme-dropdown-bg:rgba(46,52,64,0.96);
  --trainer-theme-correct:#bde6d5;
  --trainer-theme-wrong:#f1c9cc;
  --trainer-theme-caret:#88c0d0;
  --trainer-theme-bg-radial1:rgba(136,192,208,0.2);
  --trainer-theme-bg-radial2:rgba(45,52,63,0.95);
  --trainer-theme-bg-radial3:rgba(30,35,44,0.99);
  --trainer-theme-words-bg:rgba(45,52,63,0.84);
  --trainer-theme-words-border:rgba(163,204,219,0.34);
  --trainer-theme-words-shadow:0 20px 52px rgba(18,21,28,0.45);
  --t-kb-wrap-bg:rgba(45,52,63,0.75);
  --t-kb-wrap-border:rgba(163,204,219,0.3);
  --t-kb-key-bg:rgba(163,204,219,0.11);
  --t-kb-key-border:rgba(163,204,219,0.28);
  --t-kb-key-color:#edf3f9;
  --t-kb-grey-bg:rgba(136,192,208,0.17);
  --t-kb-grey-border:rgba(136,192,208,0.34);
  --t-kb-grey-color:rgba(217,231,240,0.74);
}

.page-trainer.trainer-color-theme-paper{
  --trainer-theme-surface:rgba(255,255,255,0.92);
  --trainer-theme-border:rgba(148,163,184,0.55);
  --trainer-theme-border-hover:rgba(100,116,139,0.45);
  --trainer-theme-text:#334155;
  --trainer-theme-word:#1f2937;
  --trainer-theme-pending:#94a3b8;
  --trainer-theme-accent:#64748b;
  --trainer-theme-accent-soft:rgba(148,163,184,0.2);
  --trainer-theme-accent-border:rgba(100,116,139,0.48);
  --trainer-theme-dropdown-bg:rgba(255,255,255,0.98);
  --trainer-theme-correct:#15803d;
  --trainer-theme-wrong:#dc2626;
  --trainer-theme-caret:#334155;
  --trainer-theme-bg-radial1:transparent;
  --trainer-theme-bg-radial2:#f8fafc;
  --trainer-theme-bg-radial3:#eef2f7;
  --trainer-theme-words-bg:transparent;
  --trainer-theme-words-border:transparent;
  --trainer-theme-words-shadow:none;
  --t-kb-wrap-bg:#ffffff;
  --t-kb-wrap-border:rgba(148,163,184,0.42);
  --t-kb-key-bg:#ffffff;
  --t-kb-key-border:rgba(148,163,184,0.38);
  --t-kb-key-color:#334155;
  --t-kb-grey-bg:#ffffff;
  --t-kb-grey-border:rgba(148,163,184,0.46);
  --t-kb-grey-color:#64748b;
}

.page-trainer.trainer-color-theme-mist{
  --trainer-theme-surface:rgba(238,242,255,0.86);
  --trainer-theme-border:rgba(148,163,184,0.58);
  --trainer-theme-border-hover:rgba(124,140,159,0.48);
  --trainer-theme-text:#475569;
  --trainer-theme-word:#334155;
  --trainer-theme-pending:#94a3b8;
  --trainer-theme-accent:#7b8ca3;
  --trainer-theme-accent-soft:rgba(148,163,184,0.2);
  --trainer-theme-accent-border:rgba(124,140,159,0.5);
  --trainer-theme-dropdown-bg:rgba(245,247,255,0.98);
  --trainer-theme-correct:#15803d;
  --trainer-theme-wrong:#dc2626;
  --trainer-theme-caret:#64748b;
  --trainer-theme-bg-radial1:rgba(191,201,222,0.25);
  --trainer-theme-bg-radial2:#f5f7ff;
  --trainer-theme-bg-radial3:#edf2fb;
  --trainer-theme-words-bg:transparent;
  --trainer-theme-words-border:transparent;
  --trainer-theme-words-shadow:none;
  --t-kb-wrap-bg:#f8fbff;
  --t-kb-wrap-border:rgba(148,163,184,0.42);
  --t-kb-key-bg:#ffffff;
  --t-kb-key-border:rgba(148,163,184,0.36);
  --t-kb-key-color:#475569;
  --t-kb-grey-bg:#ffffff;
  --t-kb-grey-border:rgba(148,163,184,0.44);
  --t-kb-grey-color:#64748b;
}

.page-trainer.trainer-color-theme-peach{
  --trainer-theme-surface:rgba(255,245,238,0.9);
  --trainer-theme-border:rgba(245,177,136,0.56);
  --trainer-theme-border-hover:rgba(231,146,96,0.48);
  --trainer-theme-text:#7c2d12;
  --trainer-theme-word:#9a3412;
  --trainer-theme-pending:#c27050;
  --trainer-theme-accent:#d97757;
  --trainer-theme-accent-soft:rgba(245,177,136,0.24);
  --trainer-theme-accent-border:rgba(217,119,87,0.5);
  --trainer-theme-dropdown-bg:rgba(255,248,243,0.98);
  --trainer-theme-correct:#16a34a;
  --trainer-theme-wrong:#dc2626;
  --trainer-theme-caret:#c2410c;
  --trainer-theme-bg-radial1:rgba(245,177,136,0.28);
  --trainer-theme-bg-radial2:#fff8f3;
  --trainer-theme-bg-radial3:#fff1e7;
  --trainer-theme-words-bg:transparent;
  --trainer-theme-words-border:transparent;
  --trainer-theme-words-shadow:none;
  --t-kb-wrap-bg:#fff8f3;
  --t-kb-wrap-border:rgba(245,177,136,0.44);
  --t-kb-key-bg:#ffffff;
  --t-kb-key-border:rgba(245,177,136,0.4);
  --t-kb-key-color:#9a3412;
  --t-kb-grey-bg:#ffffff;
  --t-kb-grey-border:rgba(217,119,87,0.44);
  --t-kb-grey-color:#b45309;
}

@media (max-width:900px){
  .page-trainer .left-timer{position:static;margin-bottom:8px}
  .page-trainer .stats{flex-wrap:wrap}
  .page-trainer .trainer-title{font-size:24px}
  .page-trainer .trainer-header-main{display:flex;flex-direction:column;align-items:center;padding-right:0}
  .page-trainer .trainer-source-meta{position:static;max-width:100%;align-items:center;text-align:center}
}

@media (max-width:900px), (pointer: coarse){
  .page-trainer .kb-row,
  .page-trainer .typing-keyboard,
  .page-trainer .kb-visual,
  .page-trainer .kb-hand-wrap,
  .page-trainer .kb-finger-hint{
    display:none !important;
  }

  .page-trainer .trainer-header{
    padding-inline:8px;
  }

  .page-trainer .words-area{
    min-height:220px;
    align-items:stretch;
    justify-content:flex-start;
    padding:10px 0 calc(88px + env(safe-area-inset-bottom));
  }

  .page-trainer.trainer-started .words-area:focus-within{
    padding-bottom:calc(32vh + env(safe-area-inset-bottom));
  }

  .page-trainer .text-line{
    padding-inline:12px;
  }

  .page-trainer .words,
  .page-trainer .text-viewport.words-mode .words{
    justify-content:flex-start;
  }

  .page-trainer .word{
    font-size:clamp(34px, 9vw, 42px);
    letter-spacing:0.02em;
  }
}

@media (max-width:760px){
  .page-trainer .trainer-countdown{
    position:static;
    margin:0 auto 10px;
    text-align:center;
  }
}

/* ── Japanese Word Styling ── */
.page-trainer .word.japanese-word{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  vertical-align:top;
  margin-right:16px;
  margin-bottom:8px;
}

.page-trainer .word.japanese-word .kana-display{
  font-size:28px;
  font-weight:700;
  color:#f472b6;
  line-height:1.2;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  margin-bottom:4px;
}

.page-trainer .word.japanese-word .romaji-chars{
  font-size:18px;
  font-weight:500;
  letter-spacing:0.05em;
  color:#9ca3af;
  line-height:1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
}

.page-trainer .word.japanese-word .romaji-chars .char{
  display:inline-block;
  transition:color 0.15s ease;
}

.page-trainer .word.japanese-word .romaji-chars .char.correct{
  color:#60a5fa;
  font-weight:700;
}

.page-trainer .word.japanese-word .romaji-chars .char.wrong{
  color:#ef4444;
  text-decoration:underline;
}

.page-trainer .word.japanese-word .romaji-chars .char.active{
  color:#fff;
  background:rgba(59,130,246,0.3);
  border-radius:3px;
}

.page-trainer .word.japanese-word.active .kana-display{
  color:#ec4899;
  text-shadow:0 0 10px rgba(236,72,153,0.3);
}

.page-trainer .word.japanese-word.correct .kana-display{
  color:#b9e6b4;
  text-shadow:0 0 10px rgba(185,230,180,0.4);
}

.page-trainer .word.japanese-word.wrong .kana-display{
  color:#ef4444;
  text-shadow:0 0 10px rgba(239,68,68,0.4);
}

.page-trainer .word.japanese-word.correct .romaji-chars{
  color:#b9e6b4;
}

.page-trainer .word.japanese-word.correct .romaji-chars .char{
  color:#b9e6b4;
}

.page-trainer .word.japanese-word.wrong .romaji-chars{
  color:#f08b8b;
}

.page-trainer .word.japanese-word.wrong .romaji-chars .char{
  color:#f08b8b;
}

.page-trainer .word.japanese-word.wrong .romaji-chars .char.wrong{
  color:#ef4444;
  text-decoration:underline;
}

/* Hide romaji characters completely */
.page-trainer .word.japanese-word .romaji-chars.hidden{
  display:none;
}

/* Show romaji as hint - with semi-transparent styling */
.page-trainer .word.japanese-word .romaji-chars.hint{
  display:flex;
  opacity:0.5;
  background:rgba(59,130,246,0.1);
  border-radius:4px;
  padding:2px 4px;
  border:1px dashed rgba(59,130,246,0.3);
}

/* Japanese controls inherit language button styles */
.page-trainer .trainer-hint-btn,
.page-trainer .trainer-toggle-romaji-btn{
  height:36px;
  padding:6px 12px;
}

.page-trainer .trainer-hint-btn.active,
.page-trainer .trainer-toggle-romaji-btn.hidden-mode{
  background:rgba(59,130,246,.12);
  border-color:rgba(59,130,246,.45);
}

/* ── Mobile Enhanced ── */
@media (max-width:900px),(pointer:coarse){
  .page-trainer .trainer-shell{
    display:flex;
    flex-direction:column;
  }
  .page-trainer .words-area{
    order:1;
  }
  .page-trainer .controls{
    order:2;
  }
  .page-trainer .stats{
    order:3;
  }
  .page-trainer .trainer-header{
    display:none;
  }
  .page-trainer .focus-toggle-wrap{
    display:none;
  }
  .page-trainer .count-mode,
  .page-trainer .count-btn,
  .page-trainer .time-btn{
    min-height:40px;
    padding:8px 14px;
    font-size:13px;
  }
  .page-trainer .cbx-btn{
    min-height:38px;
    padding:8px 12px;
  }
  .page-trainer .language-btn{
    min-height:38px;
    padding:7px 12px;
  }
  .page-trainer .theme-btn{
    min-height:38px;
    padding:7px 12px;
  }
  .page-trainer .controls{
    gap:10px;
    padding:0 8px;
  }
  .page-trainer.trainer-started .words-area:focus-within{
    padding-bottom:calc(44vh + env(safe-area-inset-bottom));
  }
  .page-trainer .words-area{
    min-height:180px;
  }
}

@media (max-width:760px){
  .trainer-lock-card{
    display:none;
  }
  .trainer-lock-title{
    font-size:clamp(1.6rem,6vw,2.4rem);
    margin-bottom:8px;
  }
  .trainer-lock-subtitle{
    font-size:10px;
    margin-bottom:10px;
  }
  .trainer-lock-copy{
    font-size:13px;
    margin-bottom:16px;
  }
  .trainer-intro-btn{
    width:100%;
    max-width:340px;
    padding:14px 24px;
    font-size:13px;
  }
  .trainer-intro-modal{
    min-height:auto;
    padding:0 0 24px;
  }
  .trainer-intro-actions{
    margin-top:12px;
  }
  .page-trainer .mode-select{
    gap:8px;
    flex-wrap:wrap;
  }
  .page-trainer .word{
    font-size:clamp(26px,7.5vw,36px);
  }
  .page-trainer .stats{
    font-size:10px;
    gap:10px;
    margin-top:4px;
  }
  .page-trainer .trainer-results-overlay{
    padding-top:calc(14px + var(--topbar-offset,64px));
    padding-bottom:20px;
  }
  .page-trainer .trainer-results-container{
    padding:20px 14px 24px;
    width:min(100% - 16px,1200px);
  }
  .page-trainer .trainer-results-title{
    font-size:20px;
    margin-bottom:18px;
  }
  .page-trainer .trainer-results-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .page-trainer .trainer-results-chart{
    height:180px;
  }
  .page-trainer .trainer-stats-top{
    column-gap:12px;
    row-gap:12px;
  }
  .page-trainer .trainer-stat-value{
    font-size:30px;
  }
  .page-trainer .trainer-stat-label{
    font-size:14px;
  }
  .page-trainer .trainer-stats-bottom{
    gap:20px;
  }
  .page-trainer .trainer-results-actions{
    margin-top:20px;
    gap:10px;
  }
  .page-trainer .trainer-results-btn{
    width:100%;
    padding:12px 16px;
    text-align:center;
  }
}

@media (max-width:480px){
  .page-trainer .word{
    font-size:clamp(22px,6.5vw,30px);
    padding:2px 3px;
  }
  .page-trainer .count-mode,
  .page-trainer .count-btn,
  .page-trainer .time-btn{
    padding:8px 10px;
    font-size:12px;
  }
  .page-trainer .trainer-stat-value{
    font-size:26px;
  }
  .page-trainer .trainer-stat-label{
    font-size:12px;
  }
  .page-trainer .trainer-stats-top{
    grid-template-columns:repeat(3,1fr);
    column-gap:8px;
  }
}