@font-face {
  font-family: "Orbitron";
  src: url("/assets/fonts/Orbitron[wght].ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Jura";
  src: url("/assets/fonts/jura-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

/* button tokens */


/* =========================================================
   CORE THEME TOKENS
   Default values = current dark Zetwijs theme.
   ========================================================= */
:root{
  /* effects */
  --effect-cyan-soft:rgba(101,217,241,.10);
  --effect-cyan-medium:rgba(101,217,241,.18);
  --effect-cyan-border:rgba(101,217,241,.34);
  --surface-quote:linear-gradient(90deg,rgba(101,217,241,.08),rgba(101,217,241,0));

  /* analysis / warning surfaces */
  --surface-analysis-inset:rgba(9,26,47,.6);
  --surface-analysis-line:rgba(9,26,47,.6);
  --surface-analysis-line-hover:rgba(21,47,75,.87);
  --surface-warning:#102039;

  /* component surfaces / progress */
  --surface-progress-line:rgba(9,26,47,.6);
  --surface-wallet-button:rgba(16,33,63,.78);
  --surface-purchase-block:linear-gradient(135deg,rgba(33,56,95,.75),rgba(16,33,63,.9));
  --progress-track:rgba(130,164,189,.19);
  --progress-fill:#64dce9;
  --progress-fill-gradient:linear-gradient(90deg,#4cbcd5,#91e6f5);

  /* input fields */
  --surface-input:#091c35;
  --text-input:var(--text-input);
  --border-input:rgba(101,217,241,.35);

  /* move status */
  --move-hint:var(--accent-brand);
  --move-correct-glow:rgba(24,185,120,.24);
  --move-error-glow:rgba(255,92,122,.24);

  /* live analysis / Stockfish */
  --surface-live-analysis:linear-gradient(145deg,#1c3354,#111f37);
  --surface-live-analysis-section:#122640;
  --surface-live-analysis-control:#0e2039;
  --surface-live-analysis-tooltip:#071225;
  --surface-live-analysis-close-ring:#142747;
  --border-live-analysis:rgba(101,217,241,.20);
  --border-live-analysis-section:rgba(101,217,241,.15);
  --border-live-analysis-control:#35536b;
  --border-live-analysis-soft:rgba(101,217,241,.14);
  --border-live-analysis-button:rgba(101,217,241,.32);
  --text-live-analysis-score:#73e5f5;
  --text-live-analysis-muted:#9fb5c7;
  --text-live-analysis-label:#b6c8d8;
  --text-live-analysis-icon:#9ab6c9;
  --text-live-analysis-tooltip:#dfedf5;
  --text-live-analysis-row:#d5e7f4;
  --text-live-analysis-status:#a9c7d6;
  --text-live-analysis-soft:#a1c2d5;
  --text-live-analysis-history:#c6d9e8;
  --text-live-analysis-empty:#9db8ce;
  --analysis-move-active-bg:#27667e;
  --analysis-move-active-text:#e9faff;
  --analysis-card-border:rgba(101,217,241,.24);
  --analysis-filter-label:#9dc0d3;
  --analysis-filter-border:rgba(101,217,241,.30);
  --analysis-metric-border:rgba(101,217,241,.14);
  --analysis-line-border:rgba(101,217,241,.17);
  --analysis-hover-text:#77e5ee;
  --analysis-hover-bg:rgba(101,217,241,.13);
  --analysis-selected-ring:rgba(101,217,241,.40);
  --live-status-text:#a3c1d7;
  --live-variations-text:#9db5c8;
  --live-variation-bg:#102039;
  --live-variation-title:#b9e9f1;
  --live-variation-text:#d8e6f2;
  --live-button-border:#355d75;
  --live-button-bg:#142d4b;
  --live-button-text:#a7e8f4;
  --live-button-hover-text:#ffffff;
  --live-move-list-text:#b8cadb;
  --live-move-button-bg:#1b3553;
  --live-move-button-text:#d9e9f2;
  --live-move-current-border:#5dd6ec;
  --live-move-current-text:#90ecff;
  --live-preview-border:rgba(101,217,241,.35);
  --live-preview-bg:#102d46;
  --live-preview-text:#bfeafa;
  --live-control-border:rgba(101,217,241,.25);
  --live-control-bg:#102039;
  --live-control-text:#b2dce8;
  --live-control-hover:var(--trainer-finish-accent);
  --live-footnote:#90aabc;

  /* trainer finish / hover states */
  --trainer-finish-accent:var(--trainer-finish-accent);
  --trainer-finish-ring-strong:rgba(105,231,255,.78);
  --trainer-finish-glow:rgba(105,231,255,.48);
  --trainer-finish-glow-soft:rgba(105,231,255,.20);
  --trainer-button-active-bg:rgba(16,42,70,.92);
  --surface-trainer-tooltip:rgba(7,18,37,.98);
  --text-trainer-tooltip:#cfe4ef;

  /* end-of-line guidance */
  --surface-end-guidance:rgba(18,37,60,.83);
  --border-end-guidance:rgba(101,217,241,.20);
  --text-end-guidance:#cfdfe9;
  --text-end-guidance-muted:#9fb3c4;

  /* tactical signal */
  --tactical-signal-border:rgba(255,197,115,.48);
  --tactical-signal-text:#ffe5b5;
  --tactical-signal-bg:rgba(99,69,28,.22);

  /* trainer finished message */
  --trainer-finished-border:rgba(105,231,255,.40);
  --trainer-finished-text:#d7f9ff;
  --trainer-finished-bg:rgba(105,231,255,.075);

  /* trainer finish pulse */
  --trainer-finish-pulse-ring:rgba(105,231,255,.58);
  --trainer-finish-pulse-glow:rgba(105,231,255,.28);
  --trainer-finish-pulse-soft:rgba(105,231,255,.10);
  --trainer-finish-pulse-ring-peak:rgba(105,231,255,.98);
  --trainer-finish-pulse-glow-peak:rgba(105,231,255,.68);
  --trainer-finish-pulse-soft-peak:rgba(105,231,255,.30);

  /* annotation highlight */
  --annotation-highlight-ring:rgba(101,217,241,.40);
  --annotation-highlight-glow:rgba(101,217,241,.27);
  --annotation-highlight-inset:rgba(101,217,241,.065);

  /* typography */
  --jura-cyan:#65d9f1;
  --jura-muted:#cbd9e6;
  --jura-bright:var(--jura-bright);
  --jura-soft:#9db0c8;
  --jura-success:#18b978;
  --jura-success-muted:#227a5b;
  --jura-danger:#ff5c7a;
  --jura-heading:var(--jura-bright);
  --jura-body:#cbd9e6;
  --jura-small:#9db0c8;
  --jura-bluegray:#8fa8bd;
  --text-orbitron:var(--jura-bright);
  --orbitron-theme-color:var(--jura-cyan);
  --zw-orbitron-spacing:.08em;
  --text-disabled:rgba(157,176,200,.45);

  /* logo */
  --logo-cyan:#02f6f8;
  --logo-dark:#02142f;

  /* chessboard / piece palette (independent from site theme) */
  --board-light:#d7e2e8;
  --board-dark:#5c7d93;
  --board-coordinate-on-light:#49677b;
  --board-coordinate-on-dark:#d5edf5;
  --piece-dark-ink:#11233f;
  --piece-light-surface:#eefaff;
  --piece-light-outline:#18304f;

  /* current dark surfaces */
  --surface-background:#0e1b35;
  --surface-panel:linear-gradient(145deg,rgba(33,56,95,.82),rgba(23,43,80,.86));
  --surface-card:var(--surface-panel);
  --surface-overlay:linear-gradient(145deg,#1a3154,#13243c);
  --surface-trainer-message:linear-gradient(145deg,#1a3154,#13243c);
  --surface-control:#10213f;
  --surface-header:var(--surface-background);

  /* accents / feedback */
  --ice:var(--jura-cyan);
  --line:var(--effect-cyan-border);
  --danger:var(--jura-danger);
  --ok:var(--jura-success);
  --accent-brand:var(--ice);
  --accent-interactive:var(--ice);
  --accent-active:var(--ice);
  --feedback-negative:var(--danger);
  --feedback-positive:var(--ok);
  --move-correct:var(--feedback-positive);
  --move-error:var(--feedback-negative);
  --border-subtle:var(--line);
  --border-default:var(--line);

  /* shared button family */
  --btn-bg:var(--surface-control);
  --btn-bg-hover:#122747;
  --btn-border:rgba(101,217,241,.25);
  --btn-border-hover:var(--accent-brand);
  --btn-icon:var(--accent-brand);

  /* switches */
  --switch-off-bg:var(--surface-control);
  --switch-off-knob:var(--jura-bluegray);
}


.zw-logo-cyan{fill:var(--logo-cyan)}
.zw-logo-dark{fill:var(--logo-dark)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--surface-background);color:var(--jura-muted);font-family:Jura,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.grid{position:fixed;inset:0;pointer-events:none;overflow:hidden;background-image:linear-gradient(color-mix(in srgb,var(--accent-brand) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-brand) 3.5%,transparent) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 88%)}
.spark{position:absolute;display:block;width:88px;height:1px;left:0;top:0;opacity:0;background:linear-gradient(90deg,transparent 0%,var(--effect-cyan-medium) 18%,color-mix(in srgb,var(--accent-brand) 95%,transparent) 70%,color-mix(in srgb,var(--accent-brand) 28%,white) 82%,color-mix(in srgb,var(--accent-brand) 28%,transparent) 88%,transparent 100%);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-brand) 65%,transparent));transform-origin:0 50%;will-change:transform,opacity}
.spark:before,.spark:after{content:"";position:absolute;background:color-mix(in srgb,var(--accent-brand) 35%,white);box-shadow:0 0 5px color-mix(in srgb,var(--accent-brand) 80%,transparent)}
.spark:before{width:1px;height:7px;right:12px;top:-4px;transform:skewX(-18deg)}
.spark:after{width:5px;height:1px;right:7px;top:2px;transform:rotate(-24deg)}
.spark.run-h{animation:sparkH var(--spark-duration,820ms) cubic-bezier(.22,.65,.25,1) forwards}
.spark.run-v{width:82px;animation:sparkV var(--spark-duration,820ms) cubic-bezier(.22,.65,.25,1) forwards}
@keyframes sparkH{0%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) scaleX(.35)}16%{opacity:.9}72%{opacity:.72}100%{opacity:0;transform:translate3d(calc(var(--sx) + var(--travel)),var(--sy),0) scaleX(.7)}}
@keyframes sparkV{0%{opacity:0;transform:translate3d(var(--sx),var(--sy),0) rotate(90deg) scaleX(.35)}16%{opacity:.9}72%{opacity:.72}100%{opacity:0;transform:translate3d(var(--sx),calc(var(--sy) + var(--travel)),0) rotate(90deg) scaleX(.7)}}
.shell{position:relative;width:min(92vw,470px);min-height:100vh;margin:auto;display:flex;flex-direction:column;justify-content:center;padding:42px 0 28px}
.brand{margin:0 0 22px;display:flex;align-items:center;gap:14px}.brand-logo{width:58px;height:auto;flex:0 0 58px;display:block}.brand-copy{min-width:0}.wordmark{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:650;letter-spacing:.19em;font-size:27px;white-space:nowrap}
.tagline{margin-top:6px;color:var(--jura-muted);font-size:11px;font-weight:500;letter-spacing:.14em}
.card{background:var(--surface-panel);border:1px solid var(--border-subtle);border-radius:6px;padding:28px;box-shadow:0 20px 55px rgba(0,0,0,.18)}
/* Fixed auth geometry: switching tabs never changes the card's outer height. */
.auth-card{min-height:500px;background:var(--surface-panel)}
.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid color-mix(in srgb,var(--jura-soft) 16%,transparent);margin:-8px 0 28px}
.tab{appearance:none;border:0;border-bottom:2px solid transparent;background:none;color:var(--jura-muted);padding:13px 5px;font:inherit;font-weight:400;cursor:pointer}.tab.active{color:var(--jura-bright);border-bottom-color:var(--accent-active)}
.intro h1{font-family:Orbitron,Jura,system-ui,sans-serif;font-size:23px;line-height:1.3;margin:0 0 9px;font-weight:400;;letter-spacing:var(--zw-orbitron-spacing)}.intro p{margin:0 0 25px;color:var(--jura-muted);font-size:14px;line-height:1.55}
.form{display:grid;gap:17px}.form.compact{margin-top:4px}label{display:grid;gap:7px;color:var(--jura-bright);font-size:13px;font-weight:500}input{width:100%;border:1px solid color-mix(in srgb,var(--jura-soft) 28%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);padding:13px 14px;font:inherit;outline:none;transition:.16s}input:focus{border-color:var(--accent-brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-brand) 8%,transparent)}small{color:var(--jura-muted);font-size:11px;font-weight:400}

.message{min-height:18px;margin-top:-5px;font-size:12px;color:var(--move-error)}.message.ok{color:var(--move-correct)}.step{color:var(--accent-brand);font-size:10px;font-weight:600;letter-spacing:.16em;margin-bottom:14px}
.status{display:flex;align-items:center;gap:9px;margin:4px 0 24px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--jura-success) 20%,transparent);background:color-mix(in srgb,var(--jura-success) 8%,transparent);border-radius:5px;color:var(--jura-success-muted);font-size:13px}.statusDot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px color-mix(in srgb,var(--jura-success) 50%,transparent)}
footer{text-align:center;color:var(--text-disabled);font-size:11px;letter-spacing:.075em;margin-top:24px}.hidden{display:none!important}
@media(max-width:520px){.shell{width:100%;padding:28px 18px 22px;justify-content:flex-start}.brand{margin-top:5vh;gap:11px}.brand-logo{width:50px;flex-basis:50px}.card{padding:23px 20px}.auth-card{min-height:500px}.wordmark{font-size:24px}.intro h1{font-size:21px;letter-spacing:.012em}}
@media(min-height:800px) and (max-width:520px){.brand{margin-top:10vh}}
@media(prefers-reduced-motion:reduce){.spark{display:none}}


.auth-card .auth-form{
  min-height:378px;
  grid-template-rows:auto auto auto minmax(18px,auto) auto;
  align-content:start;
}

.action-icon{width:22px;height:22px;flex:0 0 22px;display:block}


.password-field{display:grid;gap:8px}
.text-link,.back-link{appearance:none;border:0;background:none;font:inherit;color:var(--jura-muted);cursor:pointer;padding:0}
.text-link:hover,.text-link:focus-visible,.back-link:hover,.back-link:focus-visible{color:var(--accent-brand)}
.forgot-link{justify-self:end;font-size:12px;line-height:1.2;margin-top:-1px}
.back-link{font-size:12px;margin:0 0 20px;text-align:left}
.message.neutral{color:var(--jura-bluegray)}
.icon-submit{
  width:82px;
  height:58px;
  justify-self:center;
  align-self:end;
  display:grid;
  place-items:center;
  appearance:none;
  border:1px solid var(--effect-cyan-border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface-control) 44%,transparent);
  color:var(--accent-brand);
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 18px color-mix(in srgb,var(--accent-brand) 10%,transparent),
    inset 0 0 14px color-mix(in srgb,var(--accent-brand) 4%,transparent);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .12s ease;
}
.icon-submit .action-icon{
  width:26px;
  height:26px;
  display:block;
  filter:drop-shadow(0 0 4px var(--effect-cyan-medium));
  animation:enterIconPulse 2.05s ease-in-out infinite;
}
.icon-submit:hover,.icon-submit:focus-visible{
  outline:none;
  border-color:color-mix(in srgb,var(--accent-brand) 68%,transparent);
  background:color-mix(in srgb,var(--surface-control) 62%,var(--accent-brand) 6%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 22px color-mix(in srgb,var(--accent-brand) 16%,transparent),
    inset 0 0 16px color-mix(in srgb,var(--accent-brand) 5.5%,transparent);
}
.icon-submit:active{transform:translateY(1px)}
.icon-submit:disabled{opacity:.45;cursor:wait}
.icon-submit:disabled .action-icon{animation:none}
@keyframes enterIconPulse{
  0%,100%{opacity:.52;filter:drop-shadow(0 0 0 color-mix(in srgb,var(--accent-brand) 0%,transparent))}
  50%{opacity:1;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-brand) 42%,transparent))}
}
#forgotCard,#resetCard{min-height:410px}
#forgotCard .form,#resetCard .form,#onboardingCard .form{padding-top:2px}
@media(prefers-reduced-motion:reduce){
  .icon-submit .action-icon{animation:none;opacity:.9}
}


.app-shell{position:relative;min-height:100vh}
.site-header{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);background:var(--surface-header);border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent)}
.header-inner{width:min(1100px,calc(100% - 34px));min-height:92px;margin:0 auto;display:flex;align-items:center;gap:28px}
.app-brand{appearance:none;border:0;background:none;color:inherit;padding:0;display:flex;align-items:center;gap:14px;min-width:max-content;cursor:pointer;text-align:left}
.app-brand-logo{width:58px;height:58px;display:block;flex:0 0 58px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent-brand) 14%,transparent))}
.app-brand-copy{display:flex;flex-direction:column;min-width:0}
.app-wordmark{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:650;letter-spacing:.19em;font-size:26px;line-height:1;color:var(--jura-bright);white-space:nowrap}
.app-wordmark>span{background:linear-gradient(90deg,color-mix(in srgb,var(--accent-brand) 28%,white) 0%,color-mix(in srgb,var(--accent-brand) 58%,white) 18%,var(--accent-brand) 48%,color-mix(in srgb,var(--accent-brand) 82%,white) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.app-tagline{margin-top:7px;color:var(--text-disabled);letter-spacing:.17em;font-size:10.5px;font-weight:600}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav-link{position:relative;appearance:none;border:0;background:none;color:var(--jura-muted);font:500 13px Jura,sans-serif;padding:34px 0 31px;cursor:pointer;transition:color .16s ease}
.nav-link:hover{color:var(--accent-brand)}
.nav-link.active{color:var(--jura-bright)}
.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:19px;height:1px;background:var(--accent-active);box-shadow:0 0 8px color-mix(in srgb,var(--accent-brand) 55%,transparent)}

.theme-toggle{
  appearance:none;
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent-brand) 16%,transparent);
  border-radius:5px;
  background:var(--surface-control);
  color:var(--jura-bluegray);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible{
  outline:none;
  color:var(--accent-brand);
  border-color:color-mix(in srgb,var(--accent-brand) 42%,transparent);
  background:var(--btn-bg-hover);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent-brand) 10%,transparent);
}
.theme-toggle .theme-icon{width:18px;height:18px;display:block}
.theme-icon-moon{display:none!important}
[data-theme="reverse"] .theme-icon-sun{display:none!important}
[data-theme="reverse"] .theme-icon-moon{display:block!important}

.user-menu{margin-left:4px;position:relative}
.user-btn{border:1px solid color-mix(in srgb,var(--accent-brand) 16%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bluegray);height:38px;padding:0 11px;display:flex;align-items:center;gap:8px;font:500 13px Jura,sans-serif;cursor:pointer}
.user-btn:hover,.user-btn:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent-brand) 42%,transparent);color:var(--accent-brand)}
.user-btn svg{width:20px;height:20px}.user-btn path{stroke:currentColor}


.mobile-menu-btn{display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--effect-cyan-medium);border-radius:5px;background:var(--surface-control);color:var(--jura-bluegray);cursor:pointer}
.mobile-menu-btn svg{width:21px;height:21px}.mobile-menu-btn path{stroke:currentColor}
.mobile-nav{display:none}

.app-main{width:min(1100px,calc(100% - 34px));margin:0 auto;padding:34px 0 0px}
.app-view h1{font:400 24px/1.2 Orbitron,sans-serif;margin:0;letter-spacing:var(--zw-orbitron-spacing)}
.library-heading-row{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.library-heading-row p{color:var(--jura-muted);margin:8px 0 0;font-size:14px}
.library-filter{height:38px;padding:0 42px 0 13px;border:1px solid var(--border-default);border-radius:5px;background-color:var(--surface-control);font:500 13px Jura,sans-serif;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23a8c4d5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 15px) center;background-size:18px 18px;outline:none}
.library-filter:focus{border-color:color-mix(in srgb,var(--accent-brand) 52%,transparent)}
.library-status{min-height:20px;margin:0 0 12px;color:var(--jura-small);font-size:12px}
.library-status.error{color:var(--move-error)}
.library-status:empty{display:none}
.training-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.training-card{min-height:208px;display:grid;grid-template-columns:118px minmax(0,1fr);position:relative;overflow:hidden;border:1px solid var(--border-default);border-radius:6px;background:var(--surface-panel);transition:border-color .18s ease,transform .18s ease}
.training-card:hover{border-color:color-mix(in srgb,var(--accent-brand) 46%,transparent);transform:translateY(-1px)}
.training-visual{min-height:208px;padding:10px;border-right:1px solid color-mix(in srgb,var(--accent-brand) 16%,transparent);background:linear-gradient(color-mix(in srgb,var(--accent-brand) 5.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-brand) 5.5%,transparent) 1px,transparent 1px),radial-gradient(circle at 40% 30%,var(--effect-cyan-soft),transparent 45%),var(--surface-control);background-size:22px 22px,22px 22px,auto,auto}
.training-cover{width:98px;height:188px;padding:2px;border:1px solid color-mix(in srgb,var(--accent-brand) 38%,transparent);border-radius:4px;background:color-mix(in srgb,var(--surface-background) 82%,black 18%);box-shadow:0 0 14px color-mix(in srgb,var(--accent-brand) 8%,transparent);overflow:hidden}
.training-cover img{width:100%;height:100%;display:block;object-fit:cover;border-radius:2px}
.training-cover.placeholder{display:grid;place-items:center;color:var(--jura-soft);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.training-content{padding:13px 13px 12px;display:flex;flex-direction:column;min-width:0}
.training-category{color:var(--jura-bluegray);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.training-title{font:400 16px/1.25 Orbitron,sans-serif;margin:22px 0 7px;color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing)}
.training-description{color:var(--jura-muted);font-size:12.5px;line-height:1.5;margin:0;max-width:34em}
.training-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px}
.training-commerce{display:flex;align-items:center;gap:8px;min-width:0}
.training-price{color:var(--jura-heading);font-size:12px;font-weight:600;white-space:nowrap}
.wallet-button{width:32px;height:32px;border:1px solid color-mix(in srgb,var(--accent-brand) 20%,transparent);border-radius:5px;display:grid;place-items:center;background:var(--surface-wallet-button);padding:0;cursor:pointer}
.wallet-button svg{width:20px;height:20px}.wallet-button path{stroke:var(--jura-soft)}
.wallet-button.owned svg{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent-brand) 78%,transparent))}.wallet-button.owned path{stroke:var(--ice)}
.wallet-button.unavailable{cursor:default;opacity:.74}
.side-state{position:absolute;right:13px;top:12px;width:30px;height:30px;padding:5px;border:1px solid var(--accent-brand);border-radius:5px;background:var(--accent-brand);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 10px color-mix(in srgb,var(--accent-brand) 9%,transparent)}
.side-state img{width:18px!important;height:18px!important;display:block;object-fit:contain;object-position:center}
.detail-button{width:32px;height:32px;border:1px solid var(--btn-border);border-radius:5px;background:var(--btn-bg);display:grid;place-items:center;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.detail-button:hover,.detail-button:focus-visible{outline:none;border-color:var(--btn-border-hover);box-shadow:0 0 12px var(--effect-cyan-soft);background:var(--btn-bg-hover)}
.detail-button svg{width:19px;height:19px}.detail-button path{stroke:var(--jura-bluegray)}.detail-button:hover path,.detail-button:focus-visible path{stroke:var(--btn-icon)}
.empty-library{grid-column:1/-1;padding:34px;border:1px dashed var(--effect-cyan-medium);border-radius:6px;color:var(--jura-muted);text-align:center}


.content-kicker{color:var(--accent-brand);font-size:10px;font-weight:600;letter-spacing:.16em;margin-bottom:14px}


.modal-backdrop{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--surface-background) 76%,black 24%);display:grid;place-items:center;padding:20px}


.modal-close{position:absolute;right:14px;top:13px;width:32px;height:32px;border:1px solid var(--btn-border);border-radius:5px;background:var(--btn-bg);display:grid;place-items:center;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.modal-close:hover,.modal-close:focus-visible{outline:none;border-color:var(--btn-border-hover);box-shadow:0 0 12px var(--effect-cyan-soft);background:var(--btn-bg-hover)}
.modal-close svg{width:19px;height:19px}.modal-close path{stroke:var(--jura-bluegray)}.modal-close:hover path,.modal-close:focus-visible path{stroke:var(--btn-icon)}


@media(max-width:980px){.training-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.main-nav{gap:16px}.nav-link{font-size:12px}}
@media(max-width:760px){
  .header-inner{min-height:78px}.app-brand-logo{width:58px;height:58px;display:block;flex:0 0 58px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent-brand) 14%,transparent))}.app-wordmark{font-size:22px}.app-tagline{font-size:9px}
  .main-nav,.user-menu{display:none}.theme-toggle{margin-left:auto}.mobile-menu-btn{display:grid;place-items:center;margin-left:6px}
  .mobile-nav{display:none;width:min(100% - 34px,1100px);margin:0 auto 12px;padding:8px;border:1px solid color-mix(in srgb,var(--accent-brand) 14%,transparent);border-radius:5px;background:var(--surface-control)}
  .mobile-nav.open{display:block}
  .mobile-nav button{width:100%;display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border:0;border-radius:4px;background:transparent;color:var(--jura-soft);text-decoration:none;font:500 13px Jura,sans-serif;cursor:pointer}
  .mobile-nav button.active,.mobile-nav button:hover{background:color-mix(in srgb,var(--accent-brand) 6%,transparent);color:var(--accent-brand)}
  .mobile-account-link svg{width:18px;height:18px}.mobile-account-link path{stroke:currentColor}
  .training-grid{grid-template-columns:1fr}.library-heading-row{align-items:flex-start;flex-direction:column}
}
@media(max-width:430px){
  .app-main,.header-inner{width:min(100% - 20px,1100px)}.mobile-nav{width:min(100% - 20px,1100px)}
  .training-card{grid-template-columns:118px minmax(0,1fr)}.training-visual{padding:10px}.training-cover{width:98px;height:188px}.training-content{padding:13px 11px 11px}.training-title{font-size:15px;margin-top:20px;margin-right:0}.training-description{font-size:12px}
}


/* ==================================================
   WAAROM ZETWIJS — PUBLICATIEVERSIE
================================================== */

.why-page{max-width:1100px;margin:0 auto}
.why-kicker,.why-section-kicker{color:var(--accent-brand);font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}
.why-hero{
  min-height:430px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);
  gap:48px;align-items:center;padding:28px 0 52px;border-bottom:1px solid var(--effect-cyan-soft)
}
.why-hero h1{
  margin:14px 0 0;font:400 clamp(32px,5vw,54px)/1.06 Orbitron,sans-serif;
  letter-spacing:.015em;max-width:780px
}
.why-hero h1 span{color:var(--accent-brand)}
.why-intro{margin:23px 0 0;max-width:720px;color:var(--jura-muted);font-size:17px;line-height:1.7}
.why-intro strong{color:var(--jura-bright);font-weight:600}
.why-hero-quote{
  margin-top:24px;padding:15px 17px;border-left:2px solid var(--ice);
  background:var(--surface-quote);
  color:var(--jura-bright);font-size:15px;line-height:1.6
}

/* Hero: DATA / SELECTIE / TRAINBAAR — compact themeable version */
.why-flow{
  position:relative;
  overflow:hidden;
  padding:28px;
  border:1px solid var(--why-flow-border);
  border-radius:10px;
  background:
    radial-gradient(circle at 78% 28%,var(--why-flow-glow),transparent 33%),
    linear-gradient(145deg,var(--why-flow-panel-a),var(--why-flow-panel-b));
}
.why-flow-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(var(--why-flow-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--why-flow-grid-line) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.why-flow-row{
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.why-flow-row>*{min-width:0;max-width:100%}
.why-flow-node{
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:122px;
  padding:13px 14px 12px;
  border:1px solid var(--why-flow-node-border);
  border-radius:8px;
  background:var(--why-flow-node-background);
  display:flex;
  flex-direction:column;
}
.why-flow-label{
  color:var(--why-flow-label-color);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:10px;
  white-space:nowrap;
}

/* DATA */
.why-data-board{
  width:auto;
  display:grid;
  grid-template-columns:repeat(4,12px);
  grid-auto-rows:12px;
  gap:4px;
  justify-content:center;
  margin:3px auto 0;
}
.why-data-board span{
  width:12px;
  height:12px;
  border-radius:2px;
  background:var(--why-data-cell);
}
.why-data-board span:nth-child(odd){
  background:var(--why-data-cell-alt);
}
/* Oude .hot-classes uit de bestaande HTML mogen de nieuwe visual niet sturen. */
.why-data-board .hot{
  background:var(--why-data-cell);
  box-shadow:none;
}

/* Nieuwe vaste accenten: één felle cel + één zachtere variatiecel. */
.why-data-board span:nth-child(10){
  background:var(--why-data-hot);
  box-shadow:0 0 10px var(--why-data-hot-shadow);
}
.why-data-board span:nth-child(6){
  background:var(--why-data-warm);
  box-shadow:0 0 6px var(--why-data-warm-shadow);
}

/* oude micrografiek onder DATA niet meer nodig */
.why-tiny-bars{display:none}

/* SELECTIE */
.why-filter-icon{
  width:54px;
  height:54px;
  color:var(--accent-brand);
  display:block;
  margin:6px auto 0;
}
.why-filter-icon path{stroke-width:.62}

/* oude selectiedots niet meer nodig */
.why-select-dots{display:none}

/* TRAINBAAR */
.why-line-stack{
  display:grid;
  gap:9px;
  margin:4px 2px 0;
}
.why-line-stack span{
  height:10px;
  border:0;
  border-radius:999px;
  background:var(--why-line-background);
  overflow:hidden;
}
.why-line-stack i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--why-line-fill-a),var(--why-line-fill-b));
}
.why-line-stack span:nth-child(1) i{width:86%}
.why-line-stack span:nth-child(2) i{width:63%}
.why-line-stack span:nth-child(3) i{width:48%}

/* oude extra tekst en verbindingspijlen niet meer nodig */
.why-compact-tag,
.why-flow-connector{display:none}

/* logo en caption vormen samen de rustige footer */
.why-flow-logo{
  position:relative;
  z-index:1;
  display:block;
  width:48px;
  height:48px;
  
  margin:24px auto 0;
  opacity:.78;
  filter:drop-shadow(0 0 8px var(--why-flow-logo-glow));
}
.why-flow-caption{
  position:relative;
  z-index:1;
  margin-top:18px;
  text-align:center;
  color:var(--why-flow-label-color);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* Samenvattende kaarten */
.why-summary{padding:42px 0 24px}
.why-summary h2{margin:10px 0 22px;font:400 24px/1.25 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.why-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.why-pillar{
  min-height:222px;padding:19px 18px 17px;border:1px solid var(--effect-cyan-border);border-radius:6px;
  background:var(--surface-panel);
  display:flex;flex-direction:column;position:relative;overflow:hidden
}
.why-pillar:before{content:"";position:absolute;left:0;top:0;width:42px;height:1px;background:var(--accent-active);box-shadow:0 0 7px color-mix(in srgb,var(--accent-brand) 45%,transparent)}
.why-pillar-icon{
  width:33px;height:33px;border:1px solid var(--effect-cyan-border);border-radius:5px;
  display:grid;place-items:center;background:var(--surface-control);margin-bottom:18px
}
.why-pillar-icon svg{width:19px;height:19px}
.why-pillar h3{margin:0 0 10px;font:400 15px/1.35 Orbitron,sans-serif;color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing)}
.why-pillar p{margin:0;color:var(--jura-muted);font-size:12.8px;line-height:1.55}
.why-micro{
  margin-top:auto;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);
  color:var(--jura-muted);font-size:12.2px;font-weight:500;line-height:1.5
}

/* Uitgebreide secties */
.why-content-section{
  padding:54px 0;border-top:1px solid var(--effect-cyan-soft);
  display:grid;grid-template-columns:minmax(230px,.36fr) minmax(0,.64fr);gap:48px
}
.why-section-head h2{margin:8px 0 0;font:400 24px/1.25 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.why-anchor{margin-top:10px;color:var(--accent-brand);font-size:13px;line-height:1.55}
.why-body{color:var(--jura-muted);font-size:15px;line-height:1.75}
.why-body p{margin:0 0 18px}
.why-body strong{color:var(--jura-bright);font-weight:600}
.why-quote{
  margin:24px 0;padding:17px 18px;border-left:2px solid var(--ice);
  background:var(--surface-quote);
  color:var(--jura-bright);font-size:15px;line-height:1.65
}
.why-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.why-mini-card{padding:17px;border:1px solid var(--effect-cyan-soft);border-radius:6px;}
.why-mini-title{font:400 13px Orbitron,sans-serif;color:var(--text-orbitron);margin-bottom:8px;letter-spacing:var(--zw-orbitron-spacing)}
.why-mini-card p{margin:0;color:var(--jura-muted);font-size:12.6px;line-height:1.55}

/* Repertoire afstellen */
.why-custom-demo{margin-top:25px;border:1px solid var(--effect-cyan-border);border-radius:7px;background:var(--surface-control);overflow:hidden}
.why-custom-head{padding:14px 16px;border-bottom:1px solid var(--effect-cyan-soft);display:flex;justify-content:space-between;gap:12px;color:var(--jura-bright);font-size:12.5px}
.why-custom-head span:last-child{color:var(--jura-small);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.why-line-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 7%,transparent)}
.why-line-row:last-child{border-bottom:0}
.why-line-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-active);box-shadow:0 0 8px color-mix(in srgb,var(--accent-brand) 35%,transparent)}
.why-line-row.off .why-line-name,.why-line-row.off .why-line-sub{opacity:.42}.why-line-row.off .why-line-dot{opacity:.42;background:var(--jura-bluegray);box-shadow:none}
.why-line-name{color:var(--jura-muted);font-size:12.5px}.why-line-sub{color:var(--jura-soft);font-size:10.5px;margin-top:3px}
.why-switch{width:34px;height:18px;border-radius:999px;background:var(--switch-off-bg);position:relative;border:1px solid var(--effect-cyan-soft)}
.why-switch:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;top:2px;left:3px;background:var(--switch-off-knob)}
.why-switch.on{background:color-mix(in srgb,var(--accent-brand) 20%,transparent)}.why-switch.on:after{left:17px;background:var(--accent-active);box-shadow:0 0 7px color-mix(in srgb,var(--accent-brand) 50%,transparent)}

/* Aankoopmodel */
.why-buy-block{
  margin-top:8px;padding:28px;border:1px solid var(--effect-cyan-border);border-radius:7px;
  background:var(--surface-purchase-block);
  display:flex;align-items:center;justify-content:space-between;gap:28px
}
.why-buy-block h3{font:400 18px Orbitron,sans-serif;margin:0 0 8px;letter-spacing:var(--zw-orbitron-spacing)}
.why-buy-block p{margin:0;color:var(--jura-soft);font-size:13.5px;line-height:1.55;max-width:690px}
.why-lifetime{
  min-width:180px;text-align:center;padding:17px 18px;border:1px solid var(--jura-success-muted);border-radius:6px;
  background:color-mix(in srgb,var(--jura-success) 8%,transparent)
}
.why-lifetime b{display:block;font:400 14px Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.why-lifetime span{display:block;color:var(--jura-success-muted);font-size:10.5px;margin-top:6px;letter-spacing:.08em}

/* CTA */
.why-cta{padding:58px 0 10px;border-top:1px solid var(--effect-cyan-soft);text-align:center}
.why-cta h2{font:400 27px Orbitron,sans-serif;margin:10px 0 0;letter-spacing:var(--zw-orbitron-spacing)}
.why-cta p{color:var(--jura-muted);max-width:610px;margin:13px auto 22px;line-height:1.6}
.why-cta-btn{
  display:inline-flex;align-items:center;gap:12px;height:42px;padding:0 16px;
  border:1px solid color-mix(in srgb,var(--accent-brand) 28%,transparent);border-radius:5px;background:var(--btn-bg);color:var(--jura-bright);
  font:500 13px Jura,sans-serif;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease
}
.why-cta-btn:hover,.why-cta-btn:focus-visible{outline:none;border-color:var(--btn-border-hover);box-shadow:0 0 14px var(--effect-cyan-soft);background:var(--btn-bg-hover);color:var(--accent-brand)}
.why-cta-btn svg{width:19px;height:19px}.why-cta-btn path{stroke:currentColor}
.why-footer-mark{text-align:center;color:var(--jura-bluegray);font-size:9px;letter-spacing:.18em;margin-top:34px}
.why-footer-logo{
  display:block;
  width:46px;
  height:46px;
  
  margin:18px auto 0;
  opacity:.72;
  filter:drop-shadow(0 0 7px var(--effect-cyan-medium));
}

@media(max-width:920px){
  .why-hero{grid-template-columns:1fr;min-height:0}.why-flow{min-height:0}
  .why-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .why-content-section{grid-template-columns:1fr;gap:20px;padding:44px 0}
  .why-buy-block{align-items:flex-start;flex-direction:column}.why-lifetime{width:100%}
}
@media(max-width:520px){
  .why-hero{padding:18px 0 40px;gap:30px}.why-hero h1{font-size:34px}.why-intro{font-size:15px}
  .why-pillars{grid-template-columns:1fr}.why-pillar{min-height:0}
  .why-mini-grid{grid-template-columns:1fr}
  .why-flow{padding:18px}
  .why-flow-row{grid-template-columns:1fr;gap:10px}
  .why-flow-node{min-height:112px;padding:12px}
  .why-flow-logo{width:42px;height:42px;margin-top:18px}
  .why-flow-caption{margin-top:14px;font-size:8px;letter-spacing:.08em}
}


.setdetail-page{width:100%;padding:0 0 12px}
.setdetail-back{appearance:none;border:0;background:none;color:var(--jura-bluegray);font:500 12px Jura,sans-serif;display:inline-flex;align-items:center;gap:7px;padding:0;margin:0 0 18px;cursor:pointer}.setdetail-back:hover{color:var(--accent-brand)}.setdetail-back svg{width:17px;height:17px}.setdetail-back path{stroke:currentColor}
.setdetail-hero{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;padding:24px;border:1px solid var(--effect-cyan-border);border-radius:7px;background:var(--surface-panel)}
.setdetail-cover-zone{padding:14px;border-right:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);background:linear-gradient(color-mix(in srgb,var(--accent-brand) 4.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-brand) 4.5%,transparent) 1px,transparent 1px),var(--surface-control);background-size:22px 22px;border-radius:5px}
.setdetail-cover-frame{width:100%;aspect-ratio:1/1.92;padding:2px;border:1px solid color-mix(in srgb,var(--accent-brand) 38%,transparent);border-radius:4px;background:color-mix(in srgb,var(--surface-background) 82%,black 18%);overflow:hidden}.setdetail-cover-frame img{width:100%;height:100%;display:block;object-fit:cover;border-radius:2px}.setdetail-cover-frame.placeholder:after{content:"Zetwijs";height:100%;display:grid;place-items:center;color:var(--jura-soft);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.setdetail-cover-frame.placeholder img{display:none}
.setdetail-cover-meta{display:flex;justify-content:space-between;gap:10px;margin-top:12px;color:var(--jura-bluegray);font-size:10.5px}
.setdetail-hero-main{display:flex;flex-direction:column;min-width:0}.setdetail-eyebrow{color:var(--jura-bluegray);font-size:11px;letter-spacing:.13em;text-transform:uppercase}.setdetail-title-row{display:flex;align-items:flex-start;gap:12px;margin-top:8px}.setdetail-title-row h1{margin:0;font:400 32px/1.15 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing);color:var(--orbitron-theme-color)}
.setdetail-side-chip{width:38px;height:34px;margin-top:2px;padding:6px 7px;border:1px solid var(--accent-brand);border-radius:5px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-brand)}.setdetail-side-chip.white{background:var(--accent-brand)}.setdetail-side-chip.black{background:var(--accent-brand)}.setdetail-side-chip.mixed{background:var(--accent-brand)}.setdetail-side-chip img{width:100%!important;height:100%!important;display:block;object-fit:contain;object-position:center}
.setdetail-description{margin-top:18px;max-width:760px}.setdetail-description p{margin:0 0 14px;color:var(--jura-muted);font-size:14px;line-height:1.72}.setdetail-description p:last-child{margin-bottom:0}.setdetail-description strong{color:var(--jura-bright);font-weight:600}
.setdetail-moves{margin-top:16px;padding:11px 13px;border-left:2px solid var(--jura-cyan);background:linear-gradient(90deg,color-mix(in srgb,var(--accent-brand) 5.5%,transparent),color-mix(in srgb,var(--accent-brand) 1.5%,transparent));font-size:13px;line-height:1.5;color:var(--jura-muted)}.setdetail-moves span{color:var(--jura-small);margin-right:10px}.setdetail-moves strong{color:var(--jura-bright);font-weight:600}
.setdetail-hero-bottom{margin-top:auto;padding-top:22px;display:flex;align-items:end;justify-content:space-between;gap:18px}.setdetail-pricebox .status{display:block;margin:0;padding:0;border:0;background:none;border-radius:0;color:var(--jura-success);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.setdetail-pricebox .status.muted{color:var(--jura-bluegray)}.setdetail-pricebox .price{margin-top:4px;font:400 22px Orbitron,sans-serif;color:var(--orbitron-theme-color);letter-spacing:var(--zw-orbitron-spacing)}.setdetail-pricebox .sub{margin-top:5px;color:var(--jura-success);font-size:11px}
.setdetail-primary{height:42px;padding:0 16px;border:1px solid color-mix(in srgb,var(--accent-brand) 55%,transparent);border-radius:5px;background:var(--btn-bg);color:var(--jura-heading);font:500 13px Jura,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:10px;box-shadow:0 0 12px color-mix(in srgb,var(--accent-brand) 8%,transparent)}.setdetail-primary:hover:not(:disabled){border-color:var(--btn-border-hover);color:var(--accent-brand);box-shadow:0 0 14px color-mix(in srgb,var(--accent-brand) 14%,transparent)}.setdetail-primary:disabled{opacity:.42;cursor:not-allowed}.setdetail-primary svg{width:19px;height:19px}.setdetail-primary path{stroke:currentColor}
.setdetail-panel{border:1px solid var(--effect-cyan-soft);border-radius:7px;background:var(--surface-panel);padding:20px}.setdetail-panel h2{margin:0 0 14px;font:600 18px Jura,sans-serif;letter-spacing:.035em}.setdetail-info-panel,.setdetail-progress-panel{margin-top:18px;background:var(--surface-panel)}
.setdetail-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.setdetail-fact{padding:13px;border:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);border-radius:5px;background:var(--surface-control)}.setdetail-fact span{display:block;color:var(--jura-bluegray);font-size:10px;letter-spacing:.11em;text-transform:uppercase}.setdetail-fact b{display:block;margin-top:6px;color:var(--jura-bright);font-size:13px;font-weight:600}.setdetail-practice-copy{margin:15px 0 0;color:var(--jura-bluegray);font-size:12px;line-height:1.55}
.setdetail-textlink{appearance:none;border:0;background:none;display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:0;color:var(--jura-soft);font:500 12px Jura,sans-serif;cursor:pointer}.setdetail-textlink:hover{color:var(--accent-brand)}.setdetail-textlink svg{width:17px;height:17px}.setdetail-textlink path{stroke:currentColor}
.setdetail-progress-grid{display:grid;}.setdetail-stat{padding:14px;border:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);border-radius:5px;background:var(--surface-control)}.setdetail-stat span{display:block;color:var(--jura-bluegray);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.setdetail-stat b{display:block;margin-top:7px;color:var(--orbitron-theme-color);font:400 15px Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}.setdetail-progressbar{height:7px;margin-top:18px;border-radius:99px;background:var(--surface-background);overflow:hidden}.setdetail-progressbar i{display:block;width:0;height:100%;background:var(--progress-fill-gradient);transition:width .25s ease}.setdetail-note{margin-top:25px;color:var(--jura-bluegray);font-size:11px}
.setdetail-actioncard{padding:15px 58px 15px 15px;border:1px solid var(--effect-cyan-soft);border-radius:6px;background:var(--surface-control);}.setdetail-actioncard h3{margin:0;font:600 14px Jura,sans-serif;letter-spacing:.025em}.setdetail-actioncard p{margin:8px 0 12px;color:var(--jura-body);font-size:12px;line-height:1.5}
.setdetail-shop{margin-top:18px}.setdetail-purchasebox{padding:20px;border:1px solid color-mix(in srgb,var(--accent-brand) 16%,transparent);border-radius:7px;background:var(--surface-control)}.setdetail-purchasebox h3{margin:0 0 8px;font:400 16px Orbitron,sans-serif;color:var(--orbitron-theme-color);letter-spacing:var(--zw-orbitron-spacing)}.setdetail-purchasebox p{color:var(--jura-soft);font-size:13px;line-height:1.6;margin:0}.setdetail-purchasebox ul{margin:14px 0 0;padding-left:18px;color:var(--jura-soft);font-size:13px;line-height:1.7}.setdetail-pricebig{margin-top:18px;font:400 27px Orbitron,sans-serif;color:var(--orbitron-theme-color);letter-spacing:var(--zw-orbitron-spacing)}.setdetail-life{margin-top:6px;color:var(--jura-success);font-size:11px}.setdetail-buybtn{margin-top:16px;width:100%;justify-content:center}
.setdetail-footer{margin-top:42px;text-align:center}.setdetail-footer-mark{color:var(--jura-bluegray);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}.setdetail-footer-logo{display:block;width:46px;height:46px;margin:18px auto 0;opacity:.72;filter:drop-shadow(0 0 7px var(--effect-cyan-medium))}
@media(max-width:850px){.setdetail-hero{grid-template-columns:180px minmax(0,1fr)}.setdetail-progress-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.setdetail-hero{grid-template-columns:1fr;padding:14px}.setdetail-cover-zone{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent)}.setdetail-cover-frame{width:132px;margin:auto}.setdetail-cover-meta{max-width:190px;margin:10px auto 0}.setdetail-title-row h1{font-size:25px}.setdetail-hero-bottom{align-items:stretch;flex-direction:column}.setdetail-primary{width:100%;justify-content:center}.setdetail-facts{grid-template-columns:1fr}.setdetail-progress-grid{grid-template-columns:1fr 1fr}}


body.trainer-mode{overflow:hidden}
body.trainer-mode .header-inner,body.trainer-mode .app-main{width:min(1540px,calc(100% - 24px))}
body.trainer-mode .app-main{height:calc(100vh - 92px);padding:10px 0 14px;overflow:hidden}
#trainerView{height:100%}
.trainer-workspace{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px}
.trainer-toolbar{min-height:30px;display:flex;align-items:center;padding:0 2px}
.trainer-toolbar-copy{min-width:0;display:flex;align-items:baseline;gap:9px;overflow:hidden}
.trainer-kicker,.trainer-panel-label{color:var(--jura-muted);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.trainer-toolbar-copy strong{font:400 15px Orbitron,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:var(--zw-orbitron-spacing)}
.trainer-toolbar-copy>span:last-child{color:var(--jura-small);font-size:10.5px;white-space:nowrap}

.trainer-layout{min-height:0;display:grid;grid-template-columns:42px minmax(460px,.98fr) minmax(520px,.92fr);gap:13px;align-items:stretch}
.trainer-board-column{grid-column:2;min-width:0;min-height:0;display:grid;}
.trainer-board-stack{width:min(100%,calc(90vh - 168px));max-width:738px;display:grid;gap:7px;}
.trainer-board-shell{width:100%;display:grid;place-items:center}
.km-board-wrap{position:relative;width:100%;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent-brand) 36%,transparent);border-radius:6px;overflow:hidden;background:var(--surface-control);box-shadow:0 15px 40px rgba(0,0,0,.22),0 0 20px color-mix(in srgb,var(--accent-brand) 7%,transparent);transition:box-shadow .2s,border-color .2s}
.km-board{width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:0}
.km-square{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;outline:0;appearance:none;background-clip:border-box;user-select:none;touch-action:manipulation;cursor:pointer}
.km-square.light{background:var(--board-light)}.km-square.dark{background:var(--board-dark)}
.km-square.answer-start,.km-square.answer-end{box-shadow:none}
.km-piece{width:91%;height:91%;display:block;pointer-events:none;position:relative;z-index:1}
.km-coordinate{position:absolute;z-index:3;font:700 10px/1 Jura,sans-serif;pointer-events:none;opacity:.82}.km-rank-coordinate{left:4px;top:4px}.km-file-coordinate{right:4px;bottom:3px}
.km-square.light .km-coordinate{color:var(--board-coordinate-on-light)}.km-square.dark .km-coordinate{color:var(--board-coordinate-on-dark)}
.km-arrow-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}#answer-arrow{display:none}
.km-answer-arrow{stroke:var(--trainer-finish-accent);stroke-width:7;stroke-linecap:round;fill:none;opacity:1;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--trainer-finish-accent) 68%,transparent))}#arrowhead polygon{fill:var(--trainer-finish-accent)}
.km-board-wrap.km-line-finished{border-color:var(--trainer-finish-accent);box-shadow:0 15px 40px rgba(0,0,0,.22),0 0 0 2px var(--trainer-finish-ring-strong),0 0 28px var(--trainer-finish-glow),0 0 58px var(--trainer-finish-glow-soft);animation:trainerBoardFinishPulse 1.85s ease-in-out 2}
.trainer-message{width:100%;padding:7px 11px;border:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);border-radius:5px;background:var(--surface-trainer-message);color:var(--jura-soft);font-size:12px;line-height:1.35;display:flex;align-items:center;justify-content:center;text-align:center}
.trainer-message.error{border-color:color-mix(in srgb,var(--move-error) 42%,transparent);color:var(--jura-danger);background:color-mix(in srgb,var(--move-error) 6.5%,transparent)}
.trainer-message.hint{border-color:color-mix(in srgb,var(--trainer-finish-accent) 32%,transparent);color:var(--jura-bright);background:color-mix(in srgb,var(--trainer-finish-accent) 6%,transparent)}
.trainer-message.correct{border-color:color-mix(in srgb,var(--trainer-finish-accent) 78%,transparent);color:var(--jura-bright);background:color-mix(in srgb,var(--trainer-finish-accent) 13%,transparent);animation:trainerNoticePulse .8s ease-out}
.trainer-message.finished{border-color:var(--trainer-finished-border);color:var(--trainer-finished-text);background:var(--trainer-finished-bg)}
@keyframes trainerNoticePulse{0%{box-shadow:0 0 0 color-mix(in srgb,var(--trainer-finish-accent) 0%,transparent)}35%{box-shadow:0 0 22px color-mix(in srgb,var(--trainer-finish-accent) 32%,transparent)}100%{box-shadow:0 0 0 color-mix(in srgb,var(--trainer-finish-accent) 0%,transparent)}}
.trainer-feedback{width:100%;padding:6px 9px;border:1px solid var(--effect-cyan-soft);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);font-size:11px;line-height:1.3;text-align:center}

.trainer-side{grid-column:3;min-height:0;height:min(100%,calc(90vh - 168px));display:grid;gap:14px;}
.trainer-session-panel,.trainer-content-panel{min-height:0;border:1px solid color-mix(in srgb,var(--accent-brand) 14%,transparent);border-radius:6px;background:var(--surface-panel)}
.trainer-loader{min-height:0;border:1px solid color-mix(in srgb,var(--accent-brand) 14%,transparent);border-radius:6px;background:var(--surface-gradient-panel)}
.trainer-session-panel{padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.trainer-control-row,.trainer-session-tools{display:flex;align-items:center;gap:6px}
.trainer-control-row{justify-content:flex-start;min-width:0}
.trainer-session-tools{justify-content:flex-end;flex:0 0 auto}
.trainer-tool-btn,.trainer-square-action{position:relative;appearance:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--effect-cyan-medium);border-radius:6px;background:var(--surface-control);color:var(--jura-small);cursor:pointer;transition:border-color .16s,color .16s,box-shadow .16s,background .16s,transform .16s}
.trainer-tool-btn svg,.trainer-square-action svg{width:16px;height:16px;display:block}
.trainer-tool-btn:hover:not(:disabled),.trainer-square-action:hover:not(:disabled){color:var(--accent-brand);border-color:var(--accent-brand);box-shadow:0 0 13px color-mix(in srgb,var(--accent-brand) 15%,transparent),inset 0 0 8px color-mix(in srgb,var(--accent-brand) 4%,transparent);transform:translateY(-1px)}
.trainer-tool-btn.active{color:var(--accent-brand);border-color:color-mix(in srgb,var(--accent-brand) 48%,transparent);background:var(--trainer-button-active-bg)}
.trainer-tool-btn.trainer-run-control:not(:disabled){color:var(--jura-danger);border-color:color-mix(in srgb,var(--move-error) 46%,transparent);background:color-mix(in srgb,var(--jura-danger) 14%,var(--surface-control))}
.trainer-tool-btn.trainer-run-control:hover:not(:disabled){color:var(--jura-danger);border-color:var(--jura-danger);background:color-mix(in srgb,var(--jura-danger) 18%,var(--surface-control));box-shadow:0 0 14px color-mix(in srgb,var(--move-error) 22%,transparent),inset 0 0 8px color-mix(in srgb,var(--move-error) 5%,transparent)}
.trainer-tool-btn.is-off{opacity:.52}
.trainer-tool-btn.is-off:hover:not(:disabled){opacity:1}
.trainer-tool-btn:disabled,.trainer-square-action:disabled{opacity:.30;cursor:default;transform:none;box-shadow:none}
.trainer-tool-btn::after,.trainer-square-action::after,.trainer-error-box::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:50%;z-index:50;transform:translate(-50%,-4px);padding:6px 8px;border:1px solid var(--effect-cyan-medium);border-radius:5px;background:var(--surface-trainer-tooltip);color:var(--text-trainer-tooltip);font:500 10px Jura,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s .42s,transform .14s .42s,visibility 0s .56s;box-shadow:0 8px 24px rgba(0,0,0,.26)}
.trainer-tool-btn:hover:not(:disabled)::after,.trainer-square-action:hover:not(:disabled)::after,.trainer-error-box:hover::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.42s,.42s,0s}
.trainer-error-box{position:relative;height:36px;min-width:60px;padding:0 9px;border:1px solid color-mix(in srgb,var(--accent-brand) 14%,transparent);border-radius:6px;background:var(--surface-control);color:var(--jura-bluegray);display:flex;align-items:center;justify-content:center;gap:7px}
.trainer-error-box svg{width:18px;height:18px}.trainer-error-box strong{font:400 15px Orbitron,sans-serif;color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing)}

.trainer-loader{padding:10px 11px}.trainer-loader h2{margin:5px 0 4px;font:600 13px Jura,sans-serif}.trainer-loader>p{margin:0 0 8px;color:var(--jura-bluegray);font-size:10.3px;line-height:1.35}

.trainer-file-message{min-height:13px;margin-top:6px;color:var(--jura-small);font-size:10px}.trainer-file-message.ok{color:var(--move-correct)}.trainer-file-message.error{color:var(--move-error)}.trainer-loaded-card{display:none!important}

.trainer-line-panel{padding:10px 12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;background:var(--surface-panel)}
.km-progress-dots{display:flex;align-items:center;gap:5px;min-height:24px;margin:0;overflow:auto hidden;white-space:nowrap;scrollbar-width:thin}
.km-progress-pair{position:relative;flex:0 0 11px;width:11px;display:flex;flex-direction:column;gap:2px;padding:1px;border-radius:3px}
.km-progress-square{width:11px;height:11px;display:block;border:1px solid color-mix(in srgb,var(--jura-bright) 36%,transparent);border-radius:2px;box-sizing:border-box;transition:background .14s,border-color .14s,box-shadow .14s}
.km-progress-white,.km-progress-black{background:color-mix(in srgb,var(--surface-control) 82%,transparent);border-color:color-mix(in srgb,var(--jura-soft) 48%,transparent)}
.km-progress-square.km-status-correct{background:var(--move-correct);border-color:var(--move-correct);box-shadow:0 0 6px var(--move-correct-glow)}.km-progress-square.km-status-hint{background:var(--move-hint);border-color:var(--move-hint);box-shadow:0 0 6px var(--effect-cyan-medium)}
.km-progress-square.km-status-error{background:var(--move-error);border-color:var(--move-error);box-shadow:0 0 6px var(--move-error-glow)}
.km-progress-square.km-status-unused,.km-progress-square.km-status-pending{opacity:1}
.km-progress-pair.km-current-pair{box-shadow:none}
.trainer-move-line,.trainer-annotation-text{color:var(--jura-bright);font-size:11.5px;line-height:1.48;overflow:auto;scrollbar-width:thin}.trainer-move-line{min-height:20px}.trainer-annotation-text{margin-top:8px;color:var(--jura-bright)}

.trainer-annotation-grid{min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px}
.trainer-content-panel{padding:11px 12px;overflow:hidden;display:flex;flex-direction:column}
.trainer-annotation-panel,.trainer-note-panel{min-height:0;height:100%;background:var(--surface-panel)}
.trainer-note-grid{margin-top:8px;grid-template-rows:1fr 1fr;}
.trainer-note-grid>div{min-height:0;padding:10px 11px;border:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);border-radius:5px;background:var(--surface-card);overflow:auto}
.trainer-note-grid span{display:block;color:var(--jura-soft);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.trainer-note-grid p{margin:5px 0 0;}


.trainer-line-heading{display:flex;align-items:center;gap:10px}
.trainer-line-actions{display:flex;align-items:center;flex:0 0 auto}
.trainer-line-action{position:relative;appearance:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent-brand) 14%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-small);cursor:pointer;transition:border-color .16s,color .16s,box-shadow .16s,transform .16s}
.trainer-line-action svg{width:16px;height:16px}
.trainer-line-action:hover{color:var(--accent-brand);border-color:color-mix(in srgb,var(--accent-brand) 65%,transparent);box-shadow:0 0 10px var(--effect-cyan-soft);transform:translateY(-1px)}
.trainer-line-action::after{content:attr(data-tooltip);position:absolute;right:0;top:calc(100% + 7px);z-index:60;padding:6px 8px;border:1px solid var(--effect-cyan-medium);border-radius:5px;background:var(--surface-trainer-tooltip);color:var(--text-trainer-tooltip);font:500 10px Jura,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-3px);transition:opacity .14s .42s,transform .14s .42s,visibility 0s .56s}
.trainer-line-action:hover::after{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.42s,.42s,0s}
@keyframes trainerBoardFinishPulse{0%,100%{box-shadow:0 15px 40px rgba(0,0,0,.22),0 0 0 2px var(--trainer-finish-pulse-ring),0 0 18px var(--trainer-finish-pulse-glow),0 0 40px var(--trainer-finish-pulse-soft)}50%{box-shadow:0 15px 40px rgba(0,0,0,.22),0 0 0 3px var(--trainer-finish-pulse-ring-peak),0 0 36px var(--trainer-finish-pulse-glow-peak),0 0 72px var(--trainer-finish-pulse-soft-peak)}}

@media(max-width:1250px){body.trainer-mode{overflow:auto}body.trainer-mode .app-main{height:auto;overflow:visible;padding-top:12px}.trainer-layout{grid-template-columns:40px minmax(0,1fr) minmax(460px,.9fr)}.trainer-board-column{grid-column:2}.trainer-board-stack{width:min(100%,calc(90vh - 162px))}.trainer-side{grid-column:3;height:auto;min-height:620px}}
@media(max-width:980px){.trainer-layout{grid-template-columns:minmax(0,1fr)}.trainer-board-column{grid-column:1}.trainer-board-stack{width:min(100%,612px);margin-inline:auto}.trainer-side{grid-column:1/-1;height:auto;min-height:700px}.trainer-annotation-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 620px) {
  .trainer-side {
    min-height: 0;
    grid-template-rows: 52px auto auto;
  }

  .trainer-annotation-grid {
    height: 350px;
    grid-template-rows: minmax(0, 1fr);
  }
}


#board-wrap .km-square.light{background:var(--trainer-light,var(--board-light))}
#board-wrap .km-square.dark{background:var(--trainer-dark,var(--board-dark))}
.trainer-settings-card{position:relative;border:1px solid color-mix(in srgb,var(--accent-brand) 32%,transparent);border-radius:9px;background:var(--surface-overlay);box-shadow:0 24px 80px rgba(0,0,0,.45);color:var(--jura-bright)}
.trainer-settings-card h2{font:400 23px/1.35 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.trainer-settings-intro{color:var(--jura-soft);font-size:13px;line-height:1.5;margin:0 0 18px}
.trainer-settings-section{background:color-mix(in srgb,var(--surface-control) 44%,transparent);border:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);border-radius:6px;margin:12px 0}
.trainer-settings-section h3{font:500 14px Orbitron,sans-serif;margin:0 0 16px;letter-spacing:var(--zw-orbitron-spacing)}
.trainer-settings-label{display:block;color:var(--jura-muted);font-size:12px;font-weight:600;}
.trainer-settings-select{width:100%;height:40px;background:var(--surface-control);color:var(--jura-bright);border:1px solid var(--border-default);border-radius:5px;padding:0 10px;font:500 13px Jura,sans-serif}
.trainer-settings-select:focus-visible,.trainer-settings-toggle input:focus-visible{outline:2px solid var(--accent-interactive);outline-offset:2px}
.trainer-settings-note{font-size:11px;line-height:1.5;color:var(--jura-bluegray);}
.trainer-license-note{display:grid;background:var(--surface-warning);border:1px solid var(--effect-cyan-soft);border-radius:5px;color:var(--jura-muted);font-size:11px;line-height:1.5}
.trainer-license-note span:last-child{color:var(--jura-bluegray)}
.trainer-theme-row{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:12px;align-items:center}
.trainer-theme-preview{width:42px;height:42px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border:1px solid var(--border-default);border-radius:3px;overflow:hidden}
.trainer-theme-preview i:nth-child(1),.trainer-theme-preview i:nth-child(4){background:var(--trainer-light,var(--board-light))}
.trainer-theme-preview i:nth-child(2),.trainer-theme-preview i:nth-child(3){background:var(--trainer-dark,var(--board-dark))}
.trainer-settings-toggle{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);cursor:pointer}
.trainer-settings-toggle:last-child{border-bottom:0;padding-bottom:0}
.trainer-settings-toggle span{display:grid;gap:4px}.trainer-settings-toggle strong{font-size:13px;color:var(--jura-heading)}.trainer-settings-toggle small{font-size:11px;color:var(--jura-soft);line-height:1.4}
.trainer-settings-toggle input{flex:none;accent-color:var(--accent-brand);}
@media(max-width:620px){#trainerSettingsOverlay{padding:10px}.trainer-settings-card{padding:19px;max-height:94vh}}


.trainer-settings-card{width:min(980px,calc(100vw - 40px));}
.trainer-settings-columns{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(245px,.9fr);align-items:start}
.trainer-settings-columns .trainer-settings-section{margin:0;min-width:0}
.trainer-piece-preview{display:flex;align-items:center;justify-content:center;border:1px solid var(--border-default);border-radius:5px;background:var(--board-light)}
.trainer-piece-preview img{display:block;object-fit:contain}
.trainer-settings-toggle{position:relative}
.trainer-settings-toggle input{position:absolute;right:0;width:36px;height:32px;opacity:0;cursor:pointer;z-index:1}
.trainer-settings-toggle input:focus-visible+.zw-toggle-visual{outline:2px solid var(--accent-interactive);outline-offset:3px}
.zw-toggle-visual{flex:none;display:grid;place-items:center;width:38px;height:32px;color:var(--jura-bluegray);pointer-events:none}
.zw-toggle-icon{width:34px;height:34px;grid-area:1/1}
.zw-toggle-on{display:none}
.trainer-settings-toggle input:checked+.zw-toggle-visual{color:var(--accent-brand);}
.trainer-settings-toggle input:checked+.zw-toggle-visual .zw-toggle-on{display:block}
.trainer-settings-toggle input:checked+.zw-toggle-visual .zw-toggle-off{display:none}
@media(max-width:700px){.trainer-settings-card{width:100%;}.trainer-settings-columns{grid-template-columns:1fr}}
.trainer-settings-card h2{margin:6px 48px 12px 0}
.trainer-settings-columns{gap:14px}
.trainer-settings-section{padding:14px}
.trainer-settings-section h3{margin-bottom:11px}
.trainer-settings-label{margin:10px 0 6px}
.trainer-piece-preview{min-height:66px;padding:6px 10px;margin:8px 0 6px;gap:clamp(3px,.8vw,10px)}
.trainer-piece-preview img{width:min(14%,48px);height:51px}
.trainer-settings-note{margin:5px 0 7px}
.trainer-license-note{padding:9px;gap:3px}
.trainer-settings-toggle{padding:10px 0}
.trainer-settings-storage{margin-top:8px}
@media(max-width:700px){.trainer-piece-preview img{height:44px}}


.trainer-settings-toggle input:checked+.zw-toggle-visual{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent-brand) 27%,transparent))}
.trainer-license-link{color:var(--accent-brand);font-size:11px;text-decoration:underline;text-underline-offset:2px}
.trainer-license-link:hover{color:color-mix(in srgb,var(--accent-brand) 72%,white)}

/* Zetwijs: drag-and-drop chess pieces, with click-to-move preserved. */
#board .km-square{touch-action:none}
#board .km-piece{user-select:none;-webkit-user-drag:none}
#board .km-drag-source{opacity:.24}
.km-drag-ghost{position:fixed!important;z-index:99999!important;pointer-events:none!important;user-select:none!important;filter:drop-shadow(0 5px 6px rgba(0,0,0,.35))}


.trainer-settings-help{display:block;color:var(--jura-soft);font-size:11px;line-height:1.4;margin:0 0 8px}
@keyframes zwHintDestinationPulse{
  0%,100%{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--trainer-finish-accent) 58%,transparent),inset 0 0 6px color-mix(in srgb,var(--trainer-finish-accent) 9%,transparent)}
  50%{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--trainer-finish-accent) 100%,transparent),inset 0 0 21px color-mix(in srgb,var(--trainer-finish-accent) 30%,transparent)}
}
/* Hide the empty message box without taking space in the board stack. */
#training-message[hidden]{display:none!important}
.trainer-board-stack{grid-template-rows:auto auto auto}
/* Remove the old empty loader's layout footprint. */
#trainerLoader{display:none!important}
.trainer-side{grid-template-rows:52px auto minmax(0,1fr)}


.trainer-settings-move-title{display:block;margin:13px 0 5px;color:var(--jura-heading);font-size:13px;font-weight:700;line-height:1.4}
#trainerMoveMode{margin-bottom:0}
.trainer-settings-move-divider{border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 10%,transparent);margin-top:14px}
.trainer-settings-storage-error{color:var(--jura-danger)}
@keyframes zwHintDestinationPulseStrong{
  0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-brand) 35%,black),inset 0 0 0 4px var(--accent-brand),inset 0 0 13px color-mix(in srgb,var(--accent-brand) 22%,transparent)}
  50%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-brand) 35%,black),inset 0 0 0 6px color-mix(in srgb,var(--accent-brand) 72%,white),inset 0 0 27px color-mix(in srgb,var(--accent-brand) 62%,transparent)}
}


.trainer-board-column{place-items:start center}
.trainer-board-stack{align-self:start}
.trainer-side{align-self:start}
.trainer-message{min-height:46px}
.trainer-feedback{min-height:38px}
.trainer-settings-storage[hidden]{display:none!important}
.trainer-settings-storage{color:var(--jura-danger);font-size:11px;line-height:1.5;margin:12px 0 0}
#board .km-square.answer-end{z-index:2;animation:zwHintDestinationPulseThemed 2.95s ease-in-out infinite!important}
@keyframes zwHintDestinationPulseThemed{
  0%,100%{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 4px var(--trainer-accent,var(--accent-brand)),inset 0 0 12px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 24%,transparent))}
  50%{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 6px color-mix(in srgb,var(--trainer-accent,var(--accent-brand)) 72%, white 28%),inset 0 0 26px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 46%,transparent))}
}


.trainer-line-actions{gap:0}
.trainer-line-actions-group{display:flex;align-items:center;gap:5px}
.trainer-line-subset{margin-left:18px}
.trainer-line-action:disabled{opacity:.38;cursor:default;pointer-events:none}
.trainer-line-action:disabled:hover{transform:none;box-shadow:none}
.trainer-excluded-card{width:min(620px,calc(100vw - 28px));max-height:min(85vh,780px);overflow:auto;position:relative;border:1px solid color-mix(in srgb,var(--accent-brand) 32%,transparent);border-radius:9px;background:var(--surface-overlay);box-shadow:0 24px 80px rgba(0,0,0,.45);padding:24px;color:var(--jura-bright)}
.trainer-excluded-card h2{font:400 22px/1.35 Orbitron,sans-serif;margin:10px 42px 17px 0;letter-spacing:var(--zw-orbitron-spacing)}
.trainer-excluded-list{display:grid;gap:8px;max-height:48vh;overflow:auto;}
.trainer-excluded-row{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent-brand) 16%,transparent);border-radius:5px;background:color-mix(in srgb,var(--surface-control) 54%,transparent);color:var(--jura-bright);cursor:pointer;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.trainer-excluded-row input{flex:0 0 auto;width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent-brand);cursor:pointer}
.trainer-excluded-empty{color:var(--jura-soft);font-size:12px;line-height:1.5;margin:8px 0 16px}
.trainer-excluded-error{color:var(--jura-danger);font-size:12px;margin:13px 0}
.trainer-excluded-error[hidden],.trainer-restore-btn[hidden]{display:none!important}
.trainer-restore-btn{display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--accent-brand) 45%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);font:600 12px Jura,sans-serif;cursor:pointer}
.trainer-restore-btn svg{stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trainer-restore-btn:disabled{opacity:.45;cursor:default}
.trainer-restore-btn:hover:not(:disabled){border-color:var(--trainer-finish-accent);color:var(--trainer-finish-accent)}
@media(max-width:700px){.trainer-excluded-card{padding:18px}.trainer-line-subset{margin-left:13px}}


.trainer-restore-btn{margin-top:18px;width:28px;min-height:28px;padding:0;justify-self:center;align-self:center;justify-content:center;gap:0}
.trainer-restore-btn svg{width:16px;height:16px}
.trainer-restore-btn::after{right:50%;left:auto;transform:translate(50%,-3px)}
.trainer-restore-btn:hover::after{transform:translate(50%,0)}
.km-square.selected{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 4px var(--trainer-accent,var(--accent-brand)),inset 0 0 14px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 34%,transparent))!important;z-index:2}
#board .km-square.answer-start{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 4px var(--trainer-accent,var(--accent-brand)),inset 0 0 18px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 34%,transparent))!important;z-index:2}
@keyframes zwHintDestinationPulseThemed{
  0%,100%{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 3px var(--trainer-accent,var(--accent-brand)),inset 0 0 10px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 22%,transparent))}
  50%{box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 5px color-mix(in srgb,var(--trainer-accent,var(--accent-brand)) 72%, white 28%),inset 0 0 20px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 40%,transparent))}
}
@media(prefers-reduced-motion:reduce){#board .km-square.answer-end{animation:none!important;box-shadow:inset 0 0 0 1px var(--trainer-accent-deep,color-mix(in srgb,var(--accent-brand) 35%,black)),inset 0 0 0 4px var(--trainer-accent,var(--accent-brand)),inset 0 0 16px var(--trainer-accent-glow,color-mix(in srgb,var(--accent-brand) 34%,transparent))!important}}


.user-btn.profile-active{color:var(--accent-brand);border-color:color-mix(in srgb,var(--accent-brand) 58%,transparent)}
.zw-profile-page{max-width:1050px;margin:0 auto;padding:10px 0 22px}
.zw-profile-intro{margin:0 0 26px}
.zw-profile-intro .content-kicker{display:block;margin:0 0 12px}
.zw-profile-intro h1{font:400 26px/1.3 Orbitron,sans-serif;margin:0;color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing)}
.zw-profile-intro p{margin:10px 0 0;color:var(--jura-muted);font-size:14px;line-height:1.6}
.zw-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.zw-profile-card{min-width:0;min-height:225px;padding:23px 24px;border:1px solid color-mix(in srgb,var(--accent-brand) 21%,transparent);border-radius:7px;background:var(--surface-panel);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.zw-profile-card-heading{display:flex;align-items:center;gap:12px;margin:0 0 13px}
.zw-profile-card-heading svg{width:27px;height:27px;flex:0 0 27px;color:var(--jura-cyan)}
.zw-profile-card h2{font:400 16px/1.35 Orbitron,sans-serif;color:var(--text-orbitron);margin:0;letter-spacing:var(--zw-orbitron-spacing)}
.zw-profile-card>p{margin:0 0 16px;color:var(--jura-muted);font-size:13px;line-height:1.6}
.zw-profile-repertoires{display:grid;gap:7px;max-height:150px;overflow:auto;scrollbar-width:none;color:var(--jura-muted);font-size:12px}
.zw-profile-repertoires::-webkit-scrollbar{display:none}
.zw-profile-repertoire-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:10px 12px;appearance:none;border:1px solid var(--effect-cyan-medium);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);font:600 13px Jura,sans-serif;cursor:pointer}
.zw-profile-repertoire-link span:last-child{color:var(--jura-cyan);font-size:16px}
.zw-profile-repertoire-link:hover,.zw-profile-repertoire-link:focus-visible{outline:none;border-color:var(--accent-brand);color:var(--jura-cyan)}
.zw-profile-empty{margin:0;color:var(--jura-body);line-height:1.6}
.zw-profile-future{display:block;padding:12px 13px;border:1px dashed color-mix(in srgb,var(--accent-brand) 20%,transparent);border-radius:5px;color:var(--jura-body);font-size:12px;line-height:1.6}
.zw-profile-link{appearance:none;border:1px solid var(--border-live-analysis-button);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);padding:9px 12px;font:600 12px Jura,sans-serif;cursor:pointer}
.zw-profile-link:hover,.zw-profile-link:focus-visible{outline:none;color:var(--jura-cyan);border-color:var(--accent-brand)}
.zw-profile-account-data{display:grid;gap:11px;margin:5px 0 20px}
.zw-profile-account-data div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline}
.zw-profile-account-data dt{font-size:12px;color:var(--jura-muted)}
.zw-profile-account-data dd{margin:0;color:var(--jura-bright);font-size:13px;overflow-wrap:anywhere}
.zw-profile-logout{display:inline-flex;align-items:center;gap:9px;margin-top:4px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--jura-danger) 36%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-danger);font:600 12px Jura,sans-serif;cursor:pointer}
.zw-profile-logout svg{width:16px;height:16px}
.zw-profile-logout:hover,.zw-profile-logout:focus-visible{outline:none;border-color:var(--jura-danger);background:color-mix(in srgb,var(--jura-danger) 7%,transparent)}
/* Lijnbeheer: selectie moet ook het icoon cyaan kleuren; lange lijst zonder zichtbare scrollbar. */
.trainer-excluded-list{scrollbar-width:none;-ms-overflow-style:none}
.trainer-excluded-list::-webkit-scrollbar{width:0;height:0;display:none}
.trainer-excluded-card{scrollbar-width:none;-ms-overflow-style:none}
.trainer-excluded-card::-webkit-scrollbar{width:0;height:0;display:none}
.trainer-restore-btn:not(:disabled){color:var(--accent-brand);border-color:var(--accent-brand)}
.trainer-restore-btn:not(:disabled) svg{stroke:var(--ice)}
@media(max-width:720px){.zw-profile-grid{grid-template-columns:1fr}.zw-profile-page{padding-top:4px}.zw-profile-card{min-height:0;padding:19px}.zw-profile-account-data div{grid-template-columns:1fr;gap:4px}}


html:has(#profileView:not(.hidden)){scrollbar-width:none;-ms-overflow-style:none}
html:has(#profileView:not(.hidden))::-webkit-scrollbar{display:none;width:0;height:0}
body:has(#profileView:not(.hidden)){scrollbar-width:none;-ms-overflow-style:none}
body:has(#profileView:not(.hidden))::-webkit-scrollbar{display:none;width:0;height:0}
#profileView{scrollbar-width:none;-ms-overflow-style:none}
#profileView::-webkit-scrollbar{display:none;width:0;height:0}


.zw-custom-sets{display:grid;gap:8px;margin-bottom:14px;max-height:150px;overflow:auto;scrollbar-width:none}
.zw-custom-sets::-webkit-scrollbar,.zw-custom-options::-webkit-scrollbar,.zw-custom-manage-lines::-webkit-scrollbar{display:none}
.zw-custom-set-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--surface-control);border:1px solid color-mix(in srgb,var(--accent-brand) 23%,transparent);border-radius:5px;color:var(--text-orbitron);padding:11px 12px;text-align:left;cursor:pointer;font:500 13px Jura,sans-serif}
.zw-custom-set-item:hover{border-color:var(--accent-brand)}.zw-custom-set-item small{font-size:11px;color:var(--jura-soft);white-space:nowrap}
.zw-custom-modal{width:min(540px,calc(100vw - 28px));max-height:min(85vh,790px);position:relative;display:flex;flex-direction:column;gap:12px;border:1px solid var(--effect-cyan-border);border-radius:8px;background:var(--surface-overlay);box-shadow:0 24px 80px rgba(0,0,0,.46);padding:24px;color:var(--jura-bright)}
.zw-custom-modal h2{font:400 19px/1.4 Orbitron,sans-serif;margin:2px 40px 0 0;letter-spacing:var(--zw-orbitron-spacing)}
.zw-custom-current-line{font-size:12px;line-height:1.6;color:var(--jura-muted);margin:0;overflow-wrap:anywhere}
.zw-custom-options,.zw-custom-manage-lines{min-height:0;display:grid;gap:8px;overflow:auto;scrollbar-width:none}
.zw-custom-option,.zw-custom-line{padding:10px 11px;border:1px solid var(--effect-cyan-medium);border-radius:5px;background:var(--surface-control);font:500 12px/1.5 Jura,sans-serif}
.zw-custom-option{display:flex;gap:10px;align-items:center;cursor:pointer}.zw-custom-option input{accent-color:var(--accent-brand);width:16px;height:16px}
.zw-custom-option small{color:var(--jura-bluegray);margin-left:auto}.zw-custom-inline{display:flex;gap:8px}
.zw-custom-inline input{width:100%;min-width:0;border:1px solid color-mix(in srgb,var(--accent-brand) 35%,transparent);border-radius:5px;background:var(--surface-analysis-inset);padding:10px;color:var(--text-input);font:500 12px Jura,sans-serif}
.zw-custom-modal button:not(.modal-close){border:1px solid color-mix(in srgb,var(--accent-brand) 40%,transparent);border-radius:5px;background:var(--btn-bg);color:var(--jura-bright);padding:9px 11px;font:600 12px Jura,sans-serif;cursor:pointer}
.zw-custom-modal button:not(.modal-close):hover:not(:disabled){border-color:var(--btn-border-hover);color:var(--accent-brand)}
.zw-custom-modal button:disabled{opacity:.45;cursor:default}.zw-custom-modal .zw-custom-primary{width:100%;background:color-mix(in srgb,var(--surface-control) 72%,var(--accent-brand) 28%)}
.zw-custom-feedback{font-size:12px;line-height:1.5;color:var(--jura-danger);margin:0}.zw-custom-feedback[hidden]{display:none}
.zw-custom-confirm{border:1px solid color-mix(in srgb,var(--accent-brand) 40%,transparent);padding:12px;border-radius:5px;background:var(--surface-analysis-inset)}
.zw-custom-confirm p{font-size:12px;line-height:1.5;margin:0 0 10px}.zw-custom-confirm-actions,.zw-custom-manage-actions{display:flex;flex-wrap:wrap;gap:8px}
.zw-custom-manage-lines h3{font:500 13px Orbitron,sans-serif;margin:12px 0 0;color:var(--accent-brand);letter-spacing:var(--zw-orbitron-spacing)}
.zw-custom-line{display:flex;align-items:center;justify-content:space-between;gap:12px;overflow-wrap:anywhere}
.zw-custom-line>span{min-width:0}.zw-custom-line-actions{flex:0 0 auto;display:flex;align-items:center;}
.zw-custom-line-actions button{padding:5px 8px!important}.zw-custom-count{color:var(--jura-cyan);white-space:nowrap;font-weight:700}
.zw-custom-manage-actions{border-top:1px solid color-mix(in srgb,var(--accent-brand) 20%,transparent);padding-top:14px}
@media(max-width:580px){.zw-custom-modal{padding:18px}.zw-custom-line{align-items:flex-start;flex-direction:column}.zw-custom-inline{flex-wrap:wrap}}


/* Alleen tekst in Orbitron krijgt extra ruimte. */
.intro h1, .app-view h1, .training-title, .why-summary h2, .why-pillar h3, .why-section-head h2, 
.why-mini-title, .why-buy-block h3, .why-lifetime b, .why-cta h2, .setdetail-title-row h1, 
.setdetail-pricebox .price, .setdetail-stat b, .setdetail-purchasebox h3, .setdetail-pricebig, 
.trainer-toolbar-copy strong, .trainer-error-box strong, .trainer-settings-card h2, 
.trainer-settings-section h3, .trainer-excluded-card h2, .zw-profile-intro h1, 
.zw-profile-card h2, .zw-custom-modal h2, .zw-custom-manage-lines h3{letter-spacing:var(--zw-orbitron-spacing)}
/* De bestaande icoonknop is alleen klikbaar na selectie. */
#customSetAddSelected:not(:disabled){color:var(--accent-brand);border-color:var(--accent-brand)}
#customSetAddSelected:disabled,#customSetCreateAdd:disabled{opacity:.43;cursor:default}
/* Compacte checkboxes met subtiel cyaan randje en 1px ademruimte. */
.zw-custom-option input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;margin:0 2px 0 1px;padding:0;border:2px solid var(--surface-background);border-radius:3px;outline:1px solid color-mix(in srgb,var(--accent-brand) 85%,transparent);outline-offset:1px;background:var(--surface-control);cursor:pointer;position:relative}
.zw-custom-option input[type=checkbox]:checked{background:var(--accent-active);border-color:var(--surface-background)}
.zw-custom-option input[type=checkbox]:checked::after{content:"";position:absolute;left:3px;top:0px;width:4px;height:7px;border:solid var(--surface-background);border-width:0 2px 2px 0;transform:rotate(45deg)}
.zw-custom-option input[type=checkbox]:focus-visible{outline:2px solid var(--jura-bright);outline-offset:2px}
.zw-custom-edit{width:min(430px,calc(100vw - 28px))}
.zw-custom-edit-label{font:500 12px Jura,sans-serif;color:var(--jura-soft)}
.zw-custom-edit-input{width:100%;min-width:0;border:1px solid var(--border-input);border-radius:5px;background:var(--surface-input);padding:10px;color:var(--text-input);font:500 13px Jura,sans-serif}
.zw-custom-edit-actions{justify-content:flex-end;margin-top:7px}
.zw-custom-edit .zw-custom-delete-action{color:var(--jura-danger)!important;border-color:color-mix(in srgb,var(--jura-danger) 50%,transparent)!important}
.zw-custom-edit .zw-custom-delete-action:hover:not(:disabled){border-color:var(--jura-danger)!important}


.trainer-subset-line-context{margin-left:auto;min-width:0;max-width:74%;color:var(--accent-brand);font:600 11px/1.4 Jura,sans-serif;text-align:right;overflow-wrap:anywhere}
/* De hersteltooltip verschijnt rechts naast zijn knop, binnen het beheervenster. */
#trainerRestoreLines::after{left:calc(100% + 9px);right:auto;top:50%;transform:translate(-3px,-50%);transition:opacity .14s .42s,transform .14s .42s,visibility 0s .56s}
#trainerRestoreLines:hover::after,#trainerRestoreLines:focus-visible::after{opacity:1;visibility:visible;transform:translate(0,-50%);transition-delay:.42s,.42s,0s}
/* De ruimere letterafstand geldt uitsluitend voor de bestaande Orbitron-koppen. */


.zw-custom-manage-lines .zw-custom-line{transition:border-color .22s,box-shadow .22s;position:relative}
.zw-custom-manage-lines .zw-custom-line.zw-viewing-line{border-color:var(--accent-brand);animation:zwViewerLinePulse 2.4s ease-in-out infinite}
@keyframes zwViewerLinePulse{0%,100%{box-shadow:0 0 0 1px var(--effect-cyan-soft),0 0 5px color-mix(in srgb,var(--accent-brand) 15%,transparent)}50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-brand) 56%,transparent),0 0 15px color-mix(in srgb,var(--accent-brand) 28%,transparent)}}
@media(prefers-reduced-motion:reduce){.zw-custom-manage-lines .zw-custom-line.zw-viewing-line{animation:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-brand) 38%,transparent)}}
.zw-custom-line-notation{display:block;flex:1;min-width:0;line-height:1.7}
.zw-custom-modal .zw-custom-line-notation .zw-custom-san-move{display:inline;color:inherit;background:transparent;border:0;border-radius:3px;padding:0 2px;margin:0 -1px;font:inherit;text-align:inherit;cursor:pointer}
.zw-custom-modal .zw-custom-line-notation .zw-custom-san-move:hover{background:color-mix(in srgb,var(--accent-brand) 14%,transparent);color:var(--accent-brand)}
.zw-custom-modal .zw-custom-line-notation .zw-custom-san-move.zw-current-move{background:var(--analysis-move-active-bg);color:var(--analysis-move-active-text);box-shadow:0 0 0 1px var(--effect-cyan-border)}
.zw-custom-line-actions .zw-custom-line-icon{display:grid;place-items:center;flex:0 0 34px;color:var(--jura-bluegray)!important;background:var(--surface-control);border:1px solid color-mix(in srgb,var(--accent-brand) 38%,transparent)!important;border-radius:5px;cursor:pointer;font:500 13px Jura,sans-serif;transition:border-color .15s,color .15s,box-shadow .15s}
.zw-custom-line-actions .zw-custom-line-icon svg{display:block}
.zw-custom-line-actions .zw-custom-line-icon:hover,.zw-custom-line-actions .zw-custom-line-icon:focus-visible,.zw-custom-line-actions .zw-custom-line-eye[aria-pressed=true]{color:var(--accent-brand)!important;border-color:var(--accent-brand)!important;box-shadow:0 0 9px color-mix(in srgb,var(--accent-brand) 10%,transparent)}
.zw-custom-line-actions .zw-custom-line-icon:focus-visible{outline:1px solid var(--ice);outline-offset:2px}
.zw-custom-line-actions .zw-custom-line-icon[disabled]{opacity:.45}
#customSetManageClose svg{width:20px;height:20px}
/* Viewer is a separate floating card; the management dialog never changes width. */
.zw-line-viewer{position:fixed;z-index:3;max-width:calc(100vw - 16px);padding:42px 15px 15px;border:1px solid color-mix(in srgb,var(--accent-brand) 42%,transparent);border-radius:8px;background:var(--surface-overlay);box-shadow:0 24px 80px rgba(0,0,0,.46);color:var(--jura-bright);display:flex;flex-direction:column;gap:12px}
.zw-line-viewer.hidden{display:none!important}
.zw-line-viewer .zw-viewer-close{top:7px;right:8px;width:29px;height:29px}
.zw-line-viewer .zw-viewer-close svg{width:19px;height:19px}
.zw-viewer-board{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));overflow:hidden;border:1px solid color-mix(in srgb,var(--accent-brand) 30%,transparent);background:var(--surface-panel)}
.zw-viewer-square{min-width:0;min-height:0;display:grid;place-items:center}
.zw-viewer-square img{width:95%;height:95%;pointer-events:none;user-select:none}
.zw-viewer-controls{display:flex;align-items:center;justify-content:space-between;gap:3px}
.zw-viewer-controls button{position:relative;display:grid;place-items:center;flex:1 1 0;min-width:0;height:29px;padding:0;border:1px solid color-mix(in srgb,var(--accent-brand) 30%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-soft);cursor:pointer}
.zw-viewer-controls button:hover:not(:disabled),.zw-viewer-controls button:focus-visible{color:var(--accent-brand);border-color:var(--accent-brand);outline:0}
.zw-viewer-controls button:disabled{opacity:.35;cursor:default}
.zw-viewer-controls svg{width:18px;height:18px;display:block}
.zw-viewer-error{font:500 11px/1.5 Jura,sans-serif;color:var(--jura-danger);margin:0}
.zw-viewer-error[hidden]{display:none}
.zw-line-viewer.zw-viewer-below{z-index:4}
@media(max-width:780px){.zw-custom-line{flex-wrap:wrap}.zw-line-viewer{padding:40px 10px 10px}}


/* Bestaande viewer: 240px breed (208px bord); nu 288px (250px bord). */
.zw-line-viewer{width:288px;padding-left:18px;padding-right:18px}
@media(max-width:780px){.zw-line-viewer{width:276px;padding-left:12px;padding-right:12px}}
/* Zelfde donkere achtergrond en cijane V voor alle aanvinkvakjes in lijnbeheer. */
.zw-custom-option input[type=checkbox],
.trainer-excluded-row input[type=checkbox]{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  flex:0 0 15px;width:15px;height:15px;
  margin:0 3px 0 1px;padding:0;position:relative;
  border:1px solid color-mix(in srgb,var(--accent-brand) 90%,transparent);border-radius:3px;
  outline:0;background:var(--surface-control);cursor:pointer;vertical-align:middle;margin-top:2px}
.zw-custom-option input[type=checkbox]:checked,
.trainer-excluded-row input[type=checkbox]:checked{
  background:var(--surface-control);border-color:var(--accent-brand);
}
.zw-custom-option input[type=checkbox]:checked::after,
.trainer-excluded-row input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--jura-cyan);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.zw-custom-option input[type=checkbox]:focus-visible,
.trainer-excluded-row input[type=checkbox]:focus-visible{
  outline:2px solid var(--jura-bright);outline-offset:2px;
}


.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]::after,
.zw-viewer-controls button[data-tooltip]::after,
.zw-custom-modal .zw-custom-san-move[data-tooltip]::after{
  content:attr(data-tooltip);position:absolute;z-index:110;left:50%;bottom:calc(100% + 7px);
  transform:translate(-50%,4px);width:max-content;max-width:min(240px,calc(100vw - 24px));
  padding:6px 8px;border:1px solid var(--effect-cyan-border);border-radius:5px;
  background:var(--surface-trainer-tooltip);color:var(--text-trainer-tooltip);font:500 10px/1.4 Jura,sans-serif;
  white-space:normal;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .14s .35s,transform .14s .35s,visibility 0s .49s;
}
.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]:hover::after,
.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]:focus-visible::after,
.zw-viewer-controls button[data-tooltip]:hover:not(:disabled)::after,
.zw-viewer-controls button[data-tooltip]:focus-visible::after,
.zw-custom-modal .zw-custom-san-move[data-tooltip]:hover::after,
.zw-custom-modal .zw-custom-san-move[data-tooltip]:focus-visible::after{
  opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.35s,.35s,0s;
}
.zw-custom-line-actions .zw-custom-line-icon,
.zw-custom-modal .zw-custom-san-move{position:relative}
.zw-custom-manage-lines .zw-custom-line:hover,
.zw-custom-manage-lines .zw-custom-line:focus-within{z-index:3}


.zw-custom-line-actions .zw-custom-line-icon{padding:0!important;}
.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]::after{left:auto;right:0;transform:translateY(4px);text-align:right}
.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]:hover::after,
.zw-custom-line-actions .zw-custom-line-icon[data-tooltip]:focus-visible::after{transform:translateY(0)}
/* De notities delen hun ruimte, ook bij een langere tekst. */
.trainer-note-panel{display:flex;flex-direction:column;min-height:0}
.trainer-note-grid{height:auto;min-height:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;overflow:hidden}
.trainer-note-grid>.trainer-note-cell{flex:0 1 auto;max-height:calc(50% - 5px);min-height:49px;scrollbar-width:none;overscroll-behavior:contain}
.trainer-note-grid>.trainer-note-cell::-webkit-scrollbar,.trainer-note-modal textarea::-webkit-scrollbar{display:none}
.trainer-note-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}
.trainer-note-heading span{line-height:1.3}
.trainer-note-grid p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.5}
.trainer-note-eye{appearance:none;display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;padding:0;border:1px solid color-mix(in srgb,var(--accent-brand) 24%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bluegray);cursor:pointer;position:relative}
.trainer-note-eye svg{width:15px;height:15px}
.trainer-note-eye:hover:not(:disabled),.trainer-note-eye:focus-visible{border-color:var(--accent-brand);color:var(--accent-brand)}
.trainer-note-eye:disabled{opacity:.4;cursor:default}
.trainer-note-eye[data-tooltip]::after{position:absolute;right:0;bottom:calc(100% + 5px);z-index:30;width:max-content;padding:6px 8px;border:1px solid var(--effect-cyan-border);border-radius:5px;background:var(--surface-trainer-tooltip);color:var(--text-trainer-tooltip);font:500 10px Jura,sans-serif;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s .3s}
.trainer-note-eye:hover::after,.trainer-note-eye:focus-visible::after{opacity:1;visibility:visible}
.trainer-note-modal{width:min(670px,calc(100vw - 28px));height:min(560px,calc(100dvh - 40px));display:flex;flex-direction:column;gap:14px;position:relative;border:1px solid color-mix(in srgb,var(--accent-brand) 40%,transparent);border-radius:8px;background:var(--surface-panel);box-shadow:0 24px 80px rgba(0,0,0,.46);padding:24px;color:var(--jura-bright)}
.trainer-note-modal h2{font:400 20px/1.35 Orbitron,sans-serif;margin:0 40px 0 0;letter-spacing:var(--zw-orbitron-spacing)}
.trainer-note-modal textarea{display:block;width:100%;min-height:0;flex:1;resize:none;overflow:auto;scrollbar-width:none;border:1px solid var(--analysis-filter-border);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);padding:14px;font:500 13px/1.6 Jura,sans-serif;outline:0}
.trainer-note-modal textarea:focus{border-color:var(--accent-brand)}
.trainer-note-modal textarea:disabled{opacity:.55}
.trainer-note-modal #trainerNoteStatus{min-height:16px;margin:0;color:var(--jura-soft);font:500 11px Jura,sans-serif}
.trainer-note-modal #trainerNoteStatus.zw-note-error{color:var(--jura-danger)}
@media(max-width:580px){.trainer-note-modal{padding:18px;height:min(520px,calc(100dvh - 24px))}}
/* Oogje: tooltip buiten de overflow van het beheervenster, maar rechts op de knop uitgelijnd. */
.zw-custom-line-actions .zw-custom-line-eye[data-tooltip]::after{content:none!important;display:none!important}
.zw-custom-floating-tooltip{position:fixed;z-index:99999;max-width:min(240px,calc(100vw - 16px));width:max-content;padding:6px 8px;border:1px solid var(--effect-cyan-border);border-radius:5px;background:var(--surface-trainer-tooltip);color:var(--text-trainer-tooltip);font:500 10px/1.4 Jura,sans-serif;white-space:normal;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.zw-custom-floating-tooltip[hidden]{display:none!important}


.zw-custom-line-actions .zw-custom-line-icon{width:21px;height:21px;flex-basis:21px;font-size:10px;line-height:1}
.zw-custom-line-actions .zw-custom-line-icon svg{width:12px;height:12px}
.zw-custom-line-actions{gap:4px}
.zw-custom-line-eye{position:relative}
.zw-custom-note-dot{display:none;position:absolute;border-radius:50%;pointer-events:none}
.zw-custom-line-eye.zw-has-personal-notes .zw-custom-note-dot{display:block}
.zw-set-annotations{position:fixed;z-index:3;width:310px;max-width:calc(100vw - 16px);min-height:0;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px;padding:14px;border:1px solid color-mix(in srgb,var(--accent-brand) 42%,transparent);border-radius:8px;background:var(--surface-overlay);box-shadow:0 24px 80px rgba(0,0,0,.46);color:var(--jura-bright);overflow:hidden;box-sizing:border-box}
.zw-set-annotations.hidden{display:none!important}
.zw-set-annotation-cell{min-height:0;min-width:0;display:flex;flex-direction:column;gap:7px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--accent-brand) 20%,transparent);border-radius:5px;background:var(--surface-control);overflow:hidden}
.zw-set-annotation-cell>span{flex:0 0 auto;color:var(--jura-soft);font:600 11px/1.4 Jura,sans-serif}
.zw-set-annotation-cell p{flex:1 1 auto;min-height:0;margin:0;color:var(--jura-bright);font:500 11px/1.55 Jura,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.zw-set-annotation-cell p::-webkit-scrollbar{display:none;width:0;height:0}
.zw-set-annotation-cell p.zw-set-note-empty{color:var(--jura-bluegray)}
@media(max-width:780px){.zw-set-annotations{width:276px;gap:7px;padding:10px}}


.zw-progress-page{max-width:1130px;padding-bottom:32px}
.zw-progress-card{margin:0 0 18px;padding:23px 24px;border:1px solid color-mix(in srgb,var(--accent-brand) 23%,transparent);border-radius:8px;background:var(--surface-panel);color:var(--jura-bright)}
.zw-progress-card h2{margin:0 0 9px;font:400 17px/1.4 Orbitron,sans-serif;;letter-spacing:var(--zw-orbitron-spacing)}
.zw-progress-card>p{margin:0 0 17px;color:var(--jura-muted);font:500 12px/1.6 Jura,sans-serif}
.zw-progress-card p.zw-progress-note{margin:14px 0 0;font-size:11px}
.zw-progress-table-wrap{overflow:auto;max-width:100%;scrollbar-width:none}
.zw-progress-table-wrap::-webkit-scrollbar{display:none}
.zw-progress-table{width:100%;font:500 12px/1.55 Jura,sans-serif;}
.zw-progress-table th{text-align:left;font-weight:700;border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 27%,transparent)}
.zw-progress-table td{color:var(--jura-soft);}
.zw-progress-table th:not(:first-child){text-align:right}.zw-progress-table .zw-number{text-align:right;font-variant-numeric:tabular-nums}
.zw-progress-navigation{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:18px 0 8px}
#progressPageStatus{color:var(--jura-soft);font:500 12px Jura,sans-serif}
.zw-progress-error{padding:9px 12px;margin:8px 0;color:var(--jura-danger);background:color-mix(in srgb,var(--jura-danger) 18%,transparent);border:1px solid color-mix(in srgb,var(--jura-danger) 40%,transparent);border-radius:5px;font:500 12px Jura,sans-serif}
.zw-progress-error[hidden]{display:none!important}
@media(max-width:700px){.zw-progress-card{padding:15px 13px}}

/* Persoonlijke-notitiehoofden blijven staan; enkel tekst scrolt. */
.trainer-note-grid>.trainer-note-cell{display:flex;flex-direction:column;overflow:hidden!important}
.trainer-note-grid>.trainer-note-cell>.trainer-note-heading{flex:0 0 auto}
.trainer-note-grid>.trainer-note-cell>p{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.trainer-note-grid>.trainer-note-cell>p::-webkit-scrollbar{display:none}
/* De zwevende tooltip bevindt zich buiten de clip van het rechterpaneel. */
.trainer-note-eye[data-tooltip]::after{content:none!important;display:none!important}
/* Kleiner persoonlijk-notitiebolletje: gedempt tot aanwijzen/toetsenbordfocus. */
.zw-custom-note-dot{top:-3px;right:-3px;width:4px;height:4px;border:0;background:var(--jura-bluegray);box-shadow:none;transition:background .15s,box-shadow .15s}
.zw-custom-line-eye:hover .zw-custom-note-dot,.zw-custom-line-eye:focus-visible .zw-custom-note-dot{background:var(--accent-brand);box-shadow:0 0 5px 2px color-mix(in srgb,var(--accent-brand) 52%,transparent)}
.zw-note-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:27px}
.zw-note-delete{appearance:none;flex:0 0 auto;padding:6px 10px;border:1px solid color-mix(in srgb,var(--accent-brand) 27%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-muted);font:600 11px Jura,sans-serif;cursor:pointer}
.zw-note-delete:hover,.zw-note-delete:focus-visible{color:var(--jura-cyan);border-color:var(--accent-brand)}
.zw-note-delete[hidden]{display:none!important}
#trainerNoteDeleteOverlay{z-index:82}
.zw-note-confirm-card{width:min(440px,calc(100vw - 28px));padding:24px;border:1px solid color-mix(in srgb,var(--accent-brand) 39%,transparent);border-radius:8px;background:var(--surface-panel);color:var(--jura-bright);box-shadow:0 24px 80px rgba(0,0,0,.46)}
.zw-note-confirm-card h2{margin:0 0 12px;font:400 18px/1.4 Orbitron,sans-serif;;letter-spacing:var(--zw-orbitron-spacing)}
.zw-note-confirm-card p{font:500 13px/1.6 Jura,sans-serif;color:var(--jura-soft);margin:0 0 23px}
.zw-note-confirm-card .zw-custom-confirm-actions{justify-content:flex-end}


.zw-profile-progress-summary{display:grid;gap:11px;margin:0 0 17px}
.zw-profile-progress-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--accent-brand) 11%,transparent);border-radius:5px;background:var(--surface-analysis-inset)}
.zw-profile-progress-label{color:var(--jura-muted);font:700 12px/1.4 Jura,sans-serif}
.zw-profile-progress-value{color:var(--jura-bright);font:600 12px/1.5 Jura,sans-serif;font-variant-numeric:tabular-nums}
.zw-progress-page .zw-profile-intro{margin-bottom:22px}
.zw-progress-card{border-color:color-mix(in srgb,var(--accent-brand) 26%,transparent);box-shadow:0 9px 28px rgba(0,0,0,.09)}
.zw-progress-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}
.zw-progress-section-title h2{margin:0}
.zw-progress-section-title>svg{flex:none;width:21px;height:21px;color:var(--jura-cyan)}
.zw-progress-table{border-collapse:separate;border-spacing:0 7px;white-space:normal}
.zw-progress-table th{background:transparent;border:0;color:var(--jura-muted);padding:4px 12px 6px}
.zw-progress-table td{background:var(--surface-progress-line);border-top:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);padding:12px;vertical-align:middle}
.zw-progress-table td:first-child{border-left:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);border-radius:5px 0 0 5px}
.zw-progress-table td:last-child{border-right:1px solid color-mix(in srgb,var(--accent-brand) 13%,transparent);border-radius:0 5px 5px 0}
.zw-progress-table tbody tr:hover td{background:var(--surface-analysis-line-hover)}
.zw-progress-table .zw-progress-name{font-weight:700;min-width:165px;color:var(--jura-bright)}
.zw-progress-type{display:inline-block;margin-left:8px;color:var(--jura-cyan);font:600 9px/1.3 Jura,sans-serif;letter-spacing:var(--zw-orbitron-spacing);vertical-align:middle}
.zw-progress-table .zw-progress-date{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.zw-progress-table th.zw-progress-date,.zw-progress-recent th:nth-child(2){text-align:center}
.zw-progress-table .zw-progress-emphasis{color:var(--jura-cyan);font-weight:700}
.zw-progress-table .zw-progress-unseen{color:var(--jura-muted)}
.zw-progress-table .zw-progress-size{color:var(--jura-muted)}
.zw-progress-table .zw-progress-eye-head{text-align:right}
.zw-progress-eye-head svg{width:16px;height:16px;vertical-align:middle;stroke:currentColor}
.zw-progress-track{width:100%;max-width:170px;height:3px;margin-top:8px;border-radius:9px;background:var(--progress-track);overflow:hidden}
.zw-progress-track>span{display:block;height:100%;border-radius:inherit;background:var(--progress-fill);transition:width .2s ease}
.zw-progress-recent td:nth-child(3) .zw-progress-track{margin-left:auto;max-width:102px}
@media(max-width:700px){.zw-progress-table{min-width:610px}.zw-progress-table th,.zw-progress-table td{padding:9px 8px}.zw-profile-progress-line{display:grid;gap:3px}}


#profileStatsButton,#progressProfileButton,#progressStatsButton{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#profileStatsButton svg,#progressProfileButton svg,#progressStatsButton svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor}


.zw-profile-repertoire-link svg{width:16px;height:16px;flex:none;vertical-align:middle}
.zw-analysis-card{border:1px solid var(--analysis-card-border);border-radius:8px;background:var(--surface-panel);color:var(--jura-bright)}
.zw-analysis-card h2{font:400 17px/1.4 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.zw-analysis-filters{display:flex;flex-wrap:wrap;}
.zw-analysis-filters label{display:flex;flex-direction:column;gap:7px;color:var(--analysis-filter-label);font:600 12px Jura,sans-serif;}
.zw-analysis-filters select{min-height:36px;padding:7px 10px;background:var(--surface-control);border:1px solid var(--analysis-filter-border);border-radius:5px;color:var(--jura-bright);font:600 12px Jura,sans-serif;cursor:pointer}
.zw-analysis-metrics{display:grid;}
.zw-analysis-metric{display:flex;flex-direction:column;background:var(--surface-analysis-inset);border:1px solid var(--analysis-metric-border);border-radius:6px;}
.zw-analysis-metric-name{font:600 11px/1.4 Jura,sans-serif;color:var(--jura-muted)}
.zw-analysis-metric strong{font:600 19px/1.3 Orbitron,sans-serif;color:var(--orbitron-theme-color);font-variant-numeric:tabular-nums;letter-spacing:var(--zw-orbitron-spacing)}
.zw-analysis-table{min-width:730px}
.zw-analysis-table td:nth-child(n/**/+4),.zw-analysis-table th:nth-child(n/**/+4){text-align:right}
.zw-analysis-lines{display:grid;gap:9px;max-height:450px;overflow:auto;scrollbar-width:none}
.zw-analysis-lines::-webkit-scrollbar{display:none}
.zw-analysis-line{border:1px solid var(--analysis-line-border);border-radius:6px;background:var(--surface-analysis-line);}
.zw-analysis-line summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;padding:11px 13px;font:600 12px/1.5 Jura,sans-serif;color:var(--jura-bright)}
.zw-analysis-line[open] summary{border-bottom:1px solid var(--effect-cyan-medium)}.zw-analysis-line-name small{display:block;font:500 11px/1.5 Jura,sans-serif;color:var(--jura-muted);overflow-wrap:anywhere}
.zw-analysis-line-numbers{flex:0 0 auto;color:var(--orbitron-theme-color);font:600 11px/1.5 Orbitron,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.zw-analysis-history{overflow:auto;scrollbar-width:none}.zw-analysis-history::-webkit-scrollbar{display:none}
.zw-analysis-history-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px 16px;border-bottom:1px solid var(--effect-cyan-soft);font:500 11px Jura,sans-serif;color:var(--text-live-analysis-history)}
.zw-analysis-history-row:last-child{border-bottom:0}.zw-analysis-move-status{flex-basis:100%;color:var(--text-live-analysis-soft);overflow-wrap:anywhere}
.zw-analysis-empty{padding:10px 0;color:var(--text-live-analysis-empty);font:500 12px Jura,sans-serif}
#analysisStatus{color:var(--text-live-analysis-status);font:500 12px Jura,sans-serif}
#analysisStatus[hidden],#analysisLimitNotice[hidden]{display:none!important}
@media(max-width:700px){.zw-analysis-card{padding:15px 12px}.zw-analysis-line summary{align-items:flex-start;flex-direction:column}.zw-analysis-filters label{flex:1 1 160px}}


.zw-analysis-page{max-width:1290px;padding-bottom:35px}
.zw-analysis-intro{position:sticky;top:0;z-index:12;background:none;padding:20px 0 13px;margin:-10px 0 14px;border-bottom:0}
.zw-analysis-intro .content-kicker{margin-bottom:12px}
.zw-analysis-intro h1{font-size:22px}
.zw-analysis-card{padding:17px 19px;margin-bottom:13px}
.zw-analysis-card h2{font-size:15px;margin:0 0 11px}
.zw-analysis-filters{padding:12px 17px;gap:12px 18px}
.zw-analysis-filters label{min-width:180px}
.zw-analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:stretch}
.zw-analysis-grid>.zw-analysis-card{min-width:0}
.zw-analysis-top-grid .zw-analysis-card{min-height:155px}
.zw-analysis-compare-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.zw-analysis-compare-item{display:flex;flex-direction:column;gap:5px;min-width:0;background:var(--surface-analysis-inset);border:1px solid var(--effect-cyan-soft);border-radius:5px;padding:11px}
.zw-analysis-compare-item>span,.zw-analysis-compare-item>small{color:var(--jura-muted);font:500 11px/1.35 Jura,sans-serif}
.zw-analysis-compare-item strong{color:var(--orbitron-theme-color);font:600 22px/1.2 Orbitron,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:var(--zw-orbitron-spacing)}
.zw-analysis-compare-footer{display:flex;justify-content:space-between;gap:8px;margin-top:12px;font:500 12px Jura,sans-serif;color:var(--jura-muted)}
.zw-analysis-compare-footer strong{color:var(--jura-bright);font-variant-numeric:tabular-nums}
.zw-analysis-difference{color:var(--jura-cyan);font:500 11px Jura,sans-serif;margin:8px 0 0}
.zw-analysis-metrics{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.zw-analysis-metric{min-height:61px;padding:10px;gap:6px}
.zw-analysis-metric strong{font-size:17px}
.zw-analysis-detail-grid>.zw-analysis-card{height:520px;min-height:0;display:flex;flex-direction:column}
.zw-analysis-recent,.zw-analysis-lines{flex:1;min-height:0;max-height:none;overflow-y:auto;scrollbar-width:none}
.zw-analysis-recent::-webkit-scrollbar,.zw-analysis-lines::-webkit-scrollbar{display:none}
.zw-analysis-recent{display:flex;flex-direction:column;gap:8px}
.zw-analysis-recent-item{padding:10px 12px;border:1px solid var(--border-live-analysis-soft);border-radius:5px;background:var(--surface-analysis-inset);font:500 12px/1.4 Jura,sans-serif;color:var(--text-live-analysis-row)}
.zw-analysis-recent-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.zw-analysis-recent-top strong{font-weight:600;color:var(--jura-cyan)}
.zw-analysis-recent-top time,.zw-analysis-recent-item small{color:var(--jura-soft);font-size:11px}
.zw-analysis-recent-item small{display:block;margin-top:4px}
.zw-analysis-recent-numbers{display:flex;flex-wrap:wrap;gap:5px 15px;color:var(--jura-muted);font-size:11px;margin-top:6px}
.zw-analysis-line{padding:11px 12px;overflow:visible}
.zw-analysis-line.zw-analysis-selected{border-color:var(--accent-brand);animation:zwViewerLinePulse 2.4s ease-in-out infinite}
.zw-analysis-line-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.zw-analysis-line-name{flex:1;min-width:0;color:var(--jura-bright);font:500 11px/1.5 Jura,sans-serif}
.zw-analysis-line-name strong{display:block;margin-bottom:3px;color:var(--jura-cyan);font-size:12px}
.zw-analysis-notation{overflow-wrap:anywhere;line-height:1.7;color:var(--jura-muted)}
.zw-analysis-san-move{position:relative;appearance:none;color:inherit;background:transparent;padding:0 2px;margin:0 -1px;border:0;border-radius:3px;font:inherit;cursor:pointer}
.zw-analysis-san-move:hover,.zw-analysis-san-move:focus-visible{color:var(--analysis-hover-text);background:var(--analysis-hover-bg);outline:0}
.zw-analysis-san-move.zw-current-move{background:var(--analysis-move-active-bg);color:var(--analysis-move-active-text);box-shadow:0 0 0 1px var(--effect-cyan-border)}
.zw-analysis-eye,.zw-analysis-viewer-close{position:relative;display:grid;place-items:center;appearance:none;flex:none;width:25px;height:25px;padding:0;border:1px solid var(--border-live-analysis-button);border-radius:5px;background:var(--surface-control);color:var(--text-live-analysis-icon);cursor:pointer}
.zw-analysis-eye svg,.zw-analysis-viewer-close svg{width:15px;height:15px}
.zw-analysis-eye:hover,.zw-analysis-eye:focus-visible,.zw-analysis-eye[aria-pressed=true],.zw-analysis-viewer-close:hover{border-color:var(--accent-brand);color:var(--accent-brand);outline:0}
.zw-analysis-eye::after,.zw-analysis-viewer-close::after{content:attr(data-tooltip);position:absolute;right:0;top:calc(100% + 6px);z-index:40;white-space:nowrap;padding:5px 7px;border:1px solid var(--border-live-analysis);border-radius:4px;color:var(--text-live-analysis-tooltip);background:var(--surface-live-analysis-tooltip);font:500 10px Jura,sans-serif;opacity:0;visibility:hidden;pointer-events:none}
.zw-analysis-eye:hover::after,.zw-analysis-eye:focus-visible::after,.zw-analysis-viewer-close:hover::after{opacity:1;visibility:visible}
.zw-analysis-eye:disabled{opacity:.35;cursor:default}
.zw-analysis-line-numbers{font-size:10px;margin:6px 0 0;white-space:normal}
.zw-analysis-line-history{margin-top:6px;border-top:1px solid var(--effect-cyan-soft);padding-top:5px}
.zw-analysis-line-history summary{display:list-item;width:max-content;max-width:100%;color:var(--jura-muted);font:500 11px Jura,sans-serif;cursor:pointer;padding:4px 0}
.zw-analysis-history{padding:0 2px;max-height:165px}
.zw-analysis-history-row{padding:6px 0;font-size:10px}
.zw-analysis-board-card{position:relative;justify-content:center;align-items:center;gap:12px;background:var(--surface-panel)}
.zw-analysis-recent-card{background:var(--surface-panel)}
.zw-analysis-board-card.hidden,.zw-analysis-recent-card.hidden{display:none!important}
.zw-analysis-viewer-close{position:absolute;top:12px;right:13px;z-index:2}
.zw-analysis-board-wrap{width:min(100%,365px);margin:auto auto 0}
.zw-analysis-viewer-controls{width:min(100%,365px);margin:0 auto auto}
.zw-analysis-viewer-controls button{height:33px}
.zw-analysis-navigation{justify-content:flex-end}
.zw-analysis-navigation .zw-profile-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:36px}
.zw-analysis-navigation .zw-profile-link svg{display:block;width:16px;height:16px;flex:none}
@media(prefers-reduced-motion:reduce){.zw-analysis-line.zw-analysis-selected{animation:none;box-shadow:0 0 0 1px var(--analysis-selected-ring)}}
@media(max-width:820px){.zw-analysis-grid{grid-template-columns:1fr}.zw-analysis-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.zw-analysis-detail-grid>.zw-analysis-card{height:auto;min-height:230px;max-height:520px}.zw-analysis-board-card{min-height:405px!important}.zw-analysis-intro{top:0}.zw-analysis-filters label{min-width:145px;flex:1 1 145px}}


#trainerCopyMoves{font:700 9px Jura,sans-serif;letter-spacing:.02em}
.zw-evaluation-help,.zw-end-guidance{padding:8px 10px;border-radius:5px;background:var(--surface-end-guidance);border:1px solid var(--border-end-guidance);color:var(--text-end-guidance);font-size:11px;line-height:1.45}
.zw-evaluation-help{border-color:color-mix(in srgb,var(--accent-brand) 42%,transparent)}
.zw-end-guidance{display:flex;flex-direction:column;gap:8px}
.zw-end-guidance[hidden],.zw-evaluation-help[hidden],.zw-tactical-signal[hidden]{display:none!important}
.zw-eval-delta{margin-left:3px;white-space:nowrap}
.zw-move-group{display:inline-block;margin-right:8px;white-space:nowrap}
.zw-move-entry{display:inline-block;white-space:nowrap;margin-right:5px}
.zw-tactical-signal{margin-top:8px;display:flex;flex-direction:column;gap:3px;padding:7px 8px;border:1px solid var(--tactical-signal-border);border-radius:5px;color:var(--tactical-signal-text);background:var(--tactical-signal-bg);font-size:10px}
.zw-end-options{display:flex;flex-wrap:wrap;gap:5px}
.zw-end-options button{padding:5px 8px;background:var(--surface-control);color:var(--jura-bright);border:1px solid color-mix(in srgb,var(--accent-brand) 38%,transparent);border-radius:4px;cursor:pointer}
.zw-end-options button:hover{border-color:var(--accent-brand)}
.zw-end-guidance small{color:var(--text-end-guidance-muted)}


.trainer-settings-card{padding:0;overflow:visible;max-height:min(92vh,850px);display:flex;flex-direction:column}
.trainer-settings-scroll{min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px;overscroll-behavior:containbackground:var(--surface-overlay);}
.trainer-settings-card>.modal-close{z-index:20;top:12px;right:12px;background:var(--surface-control);box-shadow:0 0 0 3px var(--surface-live-analysis-close-ring)}
.zw-eval-delta{color:var(--jura-bright);font-weight:600;font-size:10px}
@media(max-width:700px){.trainer-settings-card{padding:0}.trainer-settings-scroll{padding:16px}}


#trainerSettingsOverlay .trainer-settings-card>.modal-close{z-index:100;pointer-events:auto;cursor:pointer;}
.trainer-learning-disabled{opacity:.4;cursor:not-allowed;}
.trainer-learning-disabled input{cursor:not-allowed;}
.trainer-learning-disabled .zw-toggle-visual{filter:none!important;}
.trainer-move-toggle{margin-top:5px;}
.trainer-move-off-label{font-size:10px;color:var(--jura-soft);}


.trainer-piece-preview-row{display:flex;align-items:center;gap:12px;margin:12px 0 12px;flex-wrap:wrap}
#trainerPiecePreview.trainer-piece-preview{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;justify-content:initial;gap:0;width:min(100%,348px);min-height:0;margin:0;padding:0;overflow:hidden;flex:0 1 348px;aspect-ratio:6/1}
.trainer-piece-square{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;aspect-ratio:1/1;background:var(--trainer-light,var(--board-light))}
.trainer-piece-square:nth-child(even){background:var(--trainer-dark,var(--board-dark))}
#trainerPiecePreview .trainer-piece-square img{display:block;width:84%;height:84%;max-width:100%;object-fit:contain}
.trainer-piece-color-toggle{display:flex;align-items:center;gap:3px;cursor:pointer;flex:none;position:relative}
.trainer-piece-color-name{font:600 10px Jura,sans-serif;color:var(--jura-muted)}
.trainer-piece-color-toggle input{position:absolute;left:calc(50% - 19px);width:38px;height:32px;opacity:0;cursor:pointer;z-index:1}
.trainer-piece-color-toggle input:focus-visible+.zw-toggle-visual{outline:2px solid var(--accent-interactive);outline-offset:3px}
.trainer-piece-color-toggle input:checked+.zw-toggle-visual{color:var(--accent-brand);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent-brand) 27%,transparent))}
.trainer-piece-color-toggle input:checked+.zw-toggle-visual .zw-toggle-on{display:block}
.trainer-piece-color-toggle input:checked+.zw-toggle-visual .zw-toggle-off{display:none}
.trainer-move-mode-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 3px}
.trainer-move-mode-heading{font-size:13px;color:var(--jura-heading);flex:none}
.trainer-move-mode-control{display:flex;align-items:center;gap:5px;cursor:pointer;position:relative;min-width:0}
.trainer-mode-caption{font:600 11px/1.35 Jura,sans-serif;color:var(--jura-soft);text-align:center}
.trainer-move-mode-control input{position:absolute;right:calc(50% - 18px);width:36px;height:32px;opacity:0;cursor:pointer;z-index:1}
.trainer-move-mode-control input:checked+.zw-toggle-visual{color:var(--accent-brand);filter:drop-shadow(0 0 2px color-mix(in srgb,var(--accent-brand) 27%,transparent))}
.trainer-move-mode-control input:checked+.zw-toggle-visual .zw-toggle-on{display:block}
.trainer-move-mode-control input:checked+.zw-toggle-visual .zw-toggle-off{display:none}
.trainer-settings-toggle.trainer-settings-independent{border-top:2px solid color-mix(in srgb,var(--accent-brand) 27%,transparent);margin-top:11px;padding-top:18px}
@media(max-width:720px){#trainerPiecePreview.trainer-piece-preview{width:min(100%,300px);flex-basis:300px}.trainer-move-mode-row{align-items:flex-start;flex-wrap:wrap}.trainer-move-mode-control{margin-left:auto}}


.trainer-move-mode-control input+.zw-toggle-visual,
.trainer-move-mode-control input:checked+.zw-toggle-visual{
  color:var(--accent-brand);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-brand) 48%,transparent));
}
.trainer-move-mode-control input:focus-visible+.zw-toggle-visual{outline:2px solid var(--accent-interactive);outline-offset:3px}
/* The pre-existing line below the tactical signal is the only category separator. */
.trainer-settings-toggle[for="trainerSettingsTactics"]{border-bottom:2px solid color-mix(in srgb,var(--accent-brand) 27%,transparent)}
.trainer-settings-toggle[for="trainerSettingsSound"]{border-top:0;margin-top:0;padding-top:10px}
/* Paint the entire strip in one checker pattern: no dark parent gutters between tiles. */
#trainerPiecePreview.trainer-piece-preview{
  border:0;border-radius:5px;box-sizing:border-box;
  background:linear-gradient(90deg,
    var(--trainer-light,var(--board-light)) 0 16.6666667%,
    var(--trainer-dark,var(--board-dark)) 16.6666667% 33.3333333%,
    var(--trainer-light,var(--board-light)) 33.3333333% 50%,
    var(--trainer-dark,var(--board-dark)) 50% 66.6666667%,
    var(--trainer-light,var(--board-light)) 66.6666667% 83.3333333%,
    var(--trainer-dark,var(--board-dark)) 83.3333333% 100%);
}
#trainerPiecePreview .trainer-piece-square,
#trainerPiecePreview .trainer-piece-square:nth-child(even){
  border:0;box-shadow:none;background:transparent;aspect-ratio:auto;
  width:100%;height:100%;padding:0;margin:0;min-width:0;
}
/* Only a real displayed comment illuminates the Zetwijs panel. */
.trainer-annotation-panel.trainer-annotation-highlight{
  border-color:var(--accent-brand);
  box-shadow:0 0 0 1px var(--annotation-highlight-ring),0 0 17px var(--annotation-highlight-glow),inset 0 0 12px var(--annotation-highlight-inset);
}
.trainer-annotation-panel.trainer-annotation-highlight .trainer-panel-label{color:var(--jura-small)}
.trainer-annotation-panel.trainer-annotation-highlight .trainer-annotation-text{color:var(--jura-bright)}


.zw-end-options button{font:600 12px/1.25 Jura,sans-serif;letter-spacing:.01em;}
.zw-end-guidance .zw-return-end{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--accent-brand) 42%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);font:600 11px/1.35 Jura,sans-serif;cursor:pointer;box-shadow:0 0 8px color-mix(in srgb,var(--accent-brand) 7%,transparent)}
.zw-end-guidance .zw-return-end:hover{border-color:var(--accent-brand);color:color-mix(in srgb,var(--accent-brand) 68%,white);box-shadow:0 0 11px color-mix(in srgb,var(--accent-brand) 17%,transparent)}
.zw-end-guidance .zw-return-end svg{width:17px;height:17px;flex:none}
.zw-end-guidance .zw-return-end path{stroke:currentColor}
.zw-move-entry.zw-move-history-link{appearance:none;background:transparent;border:1px solid transparent;border-radius:4px;padding:2px 3px;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer}
.zw-move-entry.zw-move-history-link:hover,.zw-move-entry.zw-move-history-link:focus-visible{color:color-mix(in srgb,var(--accent-brand) 58%,white);border-color:color-mix(in srgb,var(--accent-brand) 47%,transparent);background:color-mix(in srgb,var(--accent-brand) 7%,transparent);outline:none}
.zw-move-entry.zw-move-history-link.zw-move-history-selected{color:color-mix(in srgb,var(--accent-brand) 64%,white);border-color:var(--accent-brand);background:color-mix(in srgb,var(--accent-brand) 13%,transparent)}
.zw-move-history-bar{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;padding:5px 7px;border:1px solid var(--analysis-filter-border);border-radius:5px;color:var(--jura-muted);font:500 11px Jura,sans-serif}
.zw-move-history-bar button{appearance:none;border:1px solid color-mix(in srgb,var(--accent-brand) 40%,transparent);border-radius:5px;background:var(--surface-control);color:var(--jura-bright);padding:4px 8px;font:600 11px Jura,sans-serif;cursor:pointer}
.zw-move-history-bar button:hover{border-color:var(--accent-brand);color:color-mix(in srgb,var(--accent-brand) 72%,white)}


.trainer-piece-color-toggle input+.zw-toggle-visual,
.trainer-piece-color-toggle input:checked+.zw-toggle-visual{
  color:var(--accent-brand);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent-brand) 48%,transparent));
}
.trainer-piece-color-toggle .zw-toggle-icon{width:34px;height:34px;}
#trainerCopyMoves{display:grid;place-items:center;padding:0;}
#trainerCopyMoves svg{display:block;width:17px;height:17px;margin:0;transform:translateX(-.3px);}
.trainer-line-top{display:flex;align-items:flex-start;gap:7px;min-width:0;}
.trainer-line-top .trainer-repeat-line{flex:none;margin-left:3px;}
.trainer-line-top .trainer-line-actions{margin-left:auto;align-self:flex-start;}
.trainer-line-heading{justify-content:flex-start;flex-wrap:wrap;}
@media(max-width:610px){.trainer-line-top{flex-wrap:wrap}.trainer-line-top .trainer-line-actions{margin-left:auto}}


.km-progress-square.km-progress-empty{visibility:hidden;border:0;box-shadow:none;pointer-events:none}

/* Hovertekst van de herhaalknop rechts naast de knop, niet onder de voortgangsvakjes. */
.trainer-line-top .trainer-repeat-line{z-index:3}
.trainer-line-top .trainer-repeat-line::after{
  left:calc(100% + 9px);right:auto;top:50%;bottom:auto;
  transform:translate(-3px,-50%);
  text-align:left;
}
.trainer-line-top .trainer-repeat-line:hover::after,
.trainer-line-top .trainer-repeat-line:focus-visible::after{
  transform:translate(0,-50%);
  opacity:1;visibility:visible;
  transition-delay:.42s,.42s,0s;
}


.trainer-line-top .km-progress-dots {
  
  min-width: 0;
  
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 5px;
  row-gap: 5px;
  min-height: 28px;
  overflow: visible;
  white-space: normal;flex: 0 1 auto;
  width: max-content;
  max-width: calc(100% - 156px);
}
@media(max-width:610px){
  .trainer-line-top .km-progress-dots{max-width:calc(100% - 45px)}
}


.trainer-line-top .trainer-progress-controls {
  display:flex;
  align-items:flex-start;
  gap:7px;
  flex:0 1 auto;
  min-width:0;
  max-width:calc(100% - 105px);
}
.trainer-line-top .trainer-progress-controls .km-progress-dots {
  flex:0 1 auto;
  width:max-content;
  min-width:0;
  max-width:calc(100% - 35px);
  overflow:visible;
  flex-wrap:wrap;
  white-space:normal;
}
.trainer-line-top .trainer-progress-controls .trainer-repeat-line {
  flex:0 0 28px;
  margin:0;
}
@media(max-width:610px) {
  .trainer-line-top .trainer-progress-controls { max-width:100%; }
}


.zw-viewer-board{border-radius:4px}
.zw-viewer-light{background:var(--trainer-light,var(--board-light))}
.zw-viewer-dark{background:var(--trainer-dark,var(--board-dark))}


.trainer-annotation-panel .zw-annotation-continue{flex:0 0 auto;align-self:flex-end;margin-top:auto;width:28px;height:28px;color:var(--ice,var(--trainer-finish-accent));border-color:color-mix(in srgb,var(--accent-brand) 62%,transparent)}
.trainer-annotation-panel .zw-annotation-continue svg{display:block;width:18px;height:18px;stroke:currentColor}
.trainer-annotation-panel .zw-annotation-continue path{stroke:currentColor}
.trainer-annotation-panel .zw-annotation-continue[hidden]{display:none!important}
.trainer-annotation-panel .zw-annotation-continue:focus-visible{outline:2px solid var(--ice,var(--trainer-finish-accent));outline-offset:2px}


.zw-live-analysis{grid-column:3;min-width:0;min-height:0;height:min(100%,calc(90vh - 168px));overflow-y:auto;overscroll-behavior:contain;align-self:start;border:1px solid var(--border-live-analysis);border-radius:7px;background:var(--surface-live-analysis);padding:17px;display:flex;flex-direction:column;gap:14px;color:var(--jura-heading);font-family:Jura,sans-serif}
.zw-live-analysis[aria-hidden="true"]{display:none!important}
.zw-live-header,.zw-live-engine-top,.zw-live-labelrow,.zw-live-controls,.zw-live-preview{display:flex;align-items:center;justify-content:space-between;gap:12px}
.zw-live-header h2{font-size:22px;font-weight:600;margin:5px 0 0}
.zw-live-header .trainer-tool-btn{flex:none}
.zw-live-status{margin:0;min-height:32px;font-size:12px;line-height:1.45;color:var(--live-status-text)}
.zw-live-engine,.zw-live-moves{display:grid;gap:12px;border:1px solid var(--border-live-analysis-section);background:var(--surface-live-analysis-section);border-radius:6px;padding:14px;min-width:0}
.zw-live-engine-top strong{display:block;font-size:24px;color:var(--text-live-analysis-score);margin:4px 0;line-height:1.2}
.zw-live-engine-top small{display:block;font-size:11px;color:var(--text-live-analysis-muted)}
.zw-live-engine-top label{display:grid;gap:4px;color:var(--text-live-analysis-label);font-size:12px}
.zw-live-engine-top select{width:75px;color:var(--jura-heading);background:var(--surface-live-analysis-control);border:1px solid var(--border-live-analysis-control);border-radius:4px;padding:5px;font:inherit}
.zw-live-variations{display:grid;gap:7px;min-height:62px;font-size:12px;color:var(--live-variations-text)}
.zw-live-variation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--effect-cyan-soft);border-radius:5px;background:var(--live-variation-bg);padding:9px;min-width:0}
.zw-live-variation strong{color:var(--live-variation-title);display:block;font-size:12px}
.zw-live-variation span{display:block;line-height:1.5;margin-top:4px;overflow-wrap:anywhere;color:var(--live-variation-text)}
.zw-live-variation button,.zw-live-preview button,.zw-live-text-btn{border:1px solid var(--live-button-border);background:var(--live-button-bg);color:var(--live-button-text);border-radius:5px;padding:6px 9px;font:600 12px Jura,sans-serif;cursor:pointer}
.zw-live-variation button:hover,.zw-live-preview button:hover,.zw-live-text-btn:hover{border-color:var(--accent-brand);color:var(--live-button-hover-text)}
.zw-live-text-btn{font-size:11px}
.zw-live-move-list{display:flex;flex-wrap:wrap;gap:5px;max-height:115px;overflow-y:auto;font-size:12px;color:var(--live-move-list-text)}
.zw-live-move-list button{border:1px solid transparent;background:var(--live-move-button-bg);color:var(--live-move-button-text);border-radius:4px;padding:4px 7px;cursor:pointer;font:inherit}
.zw-live-move-list button.current{border-color:var(--live-move-current-border);color:var(--live-move-current-text)}
.zw-live-preview{padding:9px;border:1px solid var(--live-preview-border);background:var(--live-preview-bg);border-radius:6px;color:var(--live-preview-text);font-size:12px;line-height:1.4}
.zw-live-controls{justify-content:center;flex-wrap:wrap;gap:7px}
.zw-live-controls button{width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--live-control-border);border-radius:5px;background:var(--live-control-bg);color:var(--live-control-text);cursor:pointer}
.zw-live-controls button svg{width:19px;height:19px}
.zw-live-controls button:not(:disabled):hover{color:var(--live-control-hover);border-color:var(--live-control-hover)}
.zw-live-controls button:disabled{opacity:.3;cursor:default}
.zw-live-footnote{font-size:11px;line-height:1.5;color:var(--live-footnote); margin:12px 0 0;}
#board-wrap.zw-live-board{cursor:default}
@media(max-width:1250px){.zw-live-analysis{height:auto;min-height:590px}}
@media(max-width:980px){.zw-live-analysis{grid-column:1/-1;min-height:0;height:auto;max-height:none;padding:15px}}


#trainerView .zw-live-analysis{
  box-sizing:border-box;
  height:100%;min-height:0;max-height:none;
  align-self:start;overflow:hidden;overscroll-behavior:none;
  padding:13px 15px 12px;gap:9px;
  display:flex;flex-direction:column;
}
#trainerView .zw-live-analysis .zw-live-header{flex:0 0 auto;min-height:39px;gap:9px}
#trainerView .zw-live-analysis .zw-live-header h2{font-size:19px;line-height:1.25;margin:2px 0 0}
#trainerView .zw-live-analysis .zw-live-status{flex:0 0 auto;min-height:0;font-size:11.5px;line-height:1.35}
#trainerView .zw-live-analysis .zw-live-moves{
  flex:0 0 auto;min-height:0;min-width:0;max-height:146px;
  display:flex;flex-direction:column;gap:7px;padding:10px 12px;
  overflow:hidden;
}
#trainerView .zw-live-analysis .zw-live-labelrow{flex:0 0 auto;gap:8px}
#trainerView .zw-live-analysis .zw-live-text-btn{font-size:10.5px;padding:5px 8px}
#trainerView .zw-live-analysis .zw-live-move-list{
  flex:0 1 auto;min-height:0;max-height:88px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  align-content:start;
}
#trainerView .zw-live-analysis .zw-live-engine{
  flex:1 1 auto;min-height:0;min-width:0;
  display:flex;flex-direction:column;gap:9px;padding:11px 12px;
  overflow:hidden;
}
#trainerView .zw-live-analysis .zw-live-engine-top{flex:0 0 auto;gap:10px}
#trainerView .zw-live-analysis .zw-live-engine-top strong{font-size:21px;margin:2px 0}
#trainerView .zw-live-analysis .zw-live-variations{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:7px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
#trainerView .zw-live-analysis .zw-live-variation{
  flex:0 0 auto;min-width:0;
  position:relative;overflow:visible;
  padding:8px 10px;
}
#trainerView .zw-live-analysis .zw-live-variation-active{
  border-color:var(--accent-brand);
  animation:zwViewerLinePulse 2.4s ease-in-out infinite;
}
#trainerView .zw-live-analysis .zw-live-variation-eye{
  position:relative;display:grid;place-items:center;
  width:27px;height:27px;min-width:27px;padding:0;
  border:1px solid var(--border-live-analysis-button);
  border-radius:5px;background:var(--surface-control);color:var(--text-live-analysis-icon);
}
#trainerView .zw-live-analysis .zw-live-variation-eye svg{display:block;width:16px;height:16px}
#trainerView .zw-live-analysis .zw-live-variation-eye:hover,
#trainerView .zw-live-analysis .zw-live-variation-eye:focus-visible,
#trainerView .zw-live-analysis .zw-live-variation-eye[aria-pressed=true]{
  border-color:var(--ice,var(--jura-cyan));color:var(--ice,var(--jura-cyan));
}
#trainerView .zw-live-analysis .zw-live-variation-eye:focus-visible{outline:2px solid var(--ice,var(--jura-cyan));outline-offset:2px}
#trainerView .zw-live-analysis .zw-live-variation-eye::after{
  content:attr(data-tooltip);position:absolute;
  z-index:10;white-space:nowrap;padding:5px 7px;
  border:1px solid var(--border-live-analysis);border-radius:4px;
  background:var(--surface-live-analysis-tooltip);color:var(--text-live-analysis-tooltip);font:500 10px Jura,sans-serif;
  opacity:0;visibility:hidden;pointer-events:none;
}
#trainerView .zw-live-analysis .zw-live-variation-eye:hover::after,
#trainerView .zw-live-analysis .zw-live-variation-eye:focus-visible::after{opacity:1;visibility:visible}
#trainerView .zw-live-analysis .zw-live-preview{flex:0 0 auto;min-height:0;padding:7px 9px;gap:8px;font-size:11px}
#trainerView .zw-live-analysis .zw-live-controls{
  flex:0 0 auto;position:relative;z-index:1;
  margin-top:auto;padding-top:8px;
  border-top:1px solid var(--border-live-analysis-soft);
  justify-content:center;gap:5px;
}
#trainerView .zw-live-analysis .zw-live-controls button{width:30px;height:30px}
#trainerView .zw-live-analysis .zw-live-controls button svg{width:16px;height:16px}
#trainerView .zw-live-analysis .zw-live-footnote{display:none!important}
#trainerView .zw-live-analysis .zw-live-variations::-webkit-scrollbar,
#trainerView .zw-live-analysis .zw-live-move-list::-webkit-scrollbar{width:0;height:0;display:none}
@media (prefers-reduced-motion:reduce){
  #trainerView .zw-live-analysis .zw-live-variation-active{
    animation:none;box-shadow:0 0 0 1px var(--effect-cyan-border);
  }
}
@media(max-width:980px){
  #trainerView .zw-live-analysis{grid-column:1/-1;max-height:none;min-height:0}
}


#trainerView .zw-live-analysis .zw-live-engine-label{
  display:inline-flex;align-items:center;gap:6px;
}
#trainerView .zw-live-analysis .zw-live-engine-icon{
  display:block;flex:none;width:15px;height:15px;color:var(--jura-success);
}
#trainerView .zw-live-analysis .zw-live-variation-eye::after{
  right:calc(100% + 8px);top:50%;bottom:auto;
  transform:translateY(-50%);text-align:right;
}

/* Zetwijs analyseknop: actief na voltooide lijn */
.trainer-tool-btn.analysis-ready {
  color: var(--jura-success) !important;
  border-color: var(--jura-success) !important;
  box-shadow: 0 0 12px color-mix(in srgb,var(--jura-success) 45%,transparent) !important;
  opacity: 1 !important;
}
.trainer-tool-btn.analysis-ready svg {
  color: var(--jura-success) !important;
  stroke: currentColor;
}
.trainer-tool-btn.analysis-ready:disabled {
  color: var(--jura-success) !important;
  border-color: var(--jura-success) !important;
  opacity: 1 !important;
}


/* Bibliotheekkaart trainer tweekolommen */


.setdetail-actioncard{
  position:relative;
  min-height:120px;
}


.setdetail-owned-layout{
  display:grid;
  
  gap:16px;
  margin-top:18px;
}
.setdetail-owned-layout .setdetail-progress-panel,
.setdetail-owned-layout .setdetail-trainer-settings{
  margin-top:0;
}
.setdetail-trainer-settings .setdetail-actioncard{
  margin-top:10px;
}
@media(max-width:800px){
 .setdetail-owned-layout{grid-template-columns:1fr}
}
.setdetail-last-trained b{line-height:1.35}
.setdetail-trainer-settings{padding:20px}
.setdetail-trainer-settings .setdetail-actioncard p{margin:7px 0 0}
.setdetail-trainer-settings .setdetail-primary{justify-content:center;}
.setdetail-progress-panel,.setdetail-trainer-settings{height:auto}


.setdetail-owned-layout{
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  
}

.setdetail-progress-grid{
  
  gap:10px;
}

.setdetail-trainer-settings{
  display:flex;
  flex-direction:column;
}

.setdetail-trainer-settings .setdetail-actioncard{
  min-height:0;
  padding:12px 14px;
}


.setdetail-owned-layout{
  align-items:stretch;
}
.setdetail-progress-panel,
.setdetail-trainer-settings{
  height:auto;
  min-height:0;
}
.setdetail-progress-panel{
  display:flex;
  flex-direction:column;
}
.setdetail-progress-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.setdetail-last-trained{
  min-width:260px;
}
.setdetail-last-trained b{
  white-space:nowrap;
}
.setdetail-trainer-settings{
  justify-content:flex-start;
}
.setdetail-trainer-settings .setdetail-actioncard:first-of-type{
  margin-top:0;
}
.setdetail-trainer-settings .setdetail-primary{
  margin-top:18px;
  margin-bottom:4px;
  align-self:flex-end;
  width:auto;
  min-width:160px;
}

@media (max-width: 800px) {
  .setdetail-owned-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .setdetail-owned-layout > .setdetail-panel,
  .setdetail-progress-grid > .setdetail-stat {
    min-width: 0;
  }

  .setdetail-last-trained b {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .setdetail-progress-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .setdetail-trainer-settings .setdetail-primary {
    width: 100%;
    min-width: 0;
    align-self: stretch;
  }
}

@media (max-width: 620px) {
  .setdetail-cover-meta {
    width: 132px;
    max-width: 100%;
    margin: 10px auto 0;
    gap: 8px;
  }
}

/* Zetwijs chip contrast patch only
   Alleen evaluatiechips aangepast.
   Geen zetten, tekst, iconen of knoppen.
*/
.zw-eval-chip{
    display:inline-block;
    white-space:nowrap;
    font:600 10px/1.3 Jura,sans-serif;
    padding:3px 5px;
    border-radius:5px;
    margin-left:3px;
    border:1px solid color-mix(in srgb,var(--jura-soft) 35%,transparent);
    color:var(--jura-bright);
    background:color-mix(in srgb,var(--surface-control) 85%,transparent);
}

.zw-eval-red{
    background:color-mix(in srgb,var(--jura-danger) 10%,transparent);
    color:var(--jura-bright);
    border-color:color-mix(in srgb,var(--jura-danger) 45%,transparent);
}

.zw-eval-blue{
    background:color-mix(in srgb,var(--accent-brand) 10%,transparent);
    color:var(--jura-bright);
    border-color:color-mix(in srgb,var(--accent-brand) 45%,transparent);
}

.zw-eval-green{
    background:color-mix(in srgb,var(--jura-success) 10%,transparent);
    color:var(--jura-bright);
    border-color:color-mix(in srgb,var(--jura-success) 45%,transparent);
}


/*
Grote UI-migratie uitgevoerd:
- algemene surfaces
- tekstrollen
- borders

Volgende controle:
- resterende vaste kleuren
- component-specifieke uitzonderingen
*/


/*
Accentlagen:
- --accent-brand       : merkidentiteit
- --accent-interactive : acties/focus
- --accent-active      : geselecteerde toestand

Niet elke cyanwaarde hoort nog automatisch bij dezelfde rol.
*/


/*
Interactieve componenten:
- normale controls gebruiken surface tokens
- actieve toestanden gebruiken accent-active
- merkaccent blijft gescheiden van interactie

Volgende blok:
trainer- en schaakspecifieke styling.
*/


/*
Laatste controlecategorieën voor theme-ready:

1. Bewuste vaste waarden:
   - logo / branding
   - schaakbordkleuren
   - illustraties en SVG

2. Theme-afhankelijke waarden:
   - surfaces
   - tekst
   - borders
   - interactie
   - feedback
   - effecten

3. Niet automatisch vervangen:
   - unieke merkstijl
   - specifieke schaakvisualisatie
*/


/*
Controlelijst na toevoegen tweede theme:

Nog controleren:
- vaste hexkleuren buiten theme-lagen
- rgba effecten
- gradients
- SVG/branding
- schaak-specifieke kleuren

Deze waarden worden niet automatisch vervangen omdat hun betekenis eerst
bevestigd moet worden.
*/


/*
Laatste migratieronde:

Groep A - vermoedelijk theme-afhankelijk:
- oppervlakken
- tekst
- borders
- controls

Groep B - vermoedelijk merkgebonden:
- logo
- SVG
- illustratieve accenten

Groep C - schaakspecifiek:
- bord
- analyse
- zettenmarkering

Groep D - effecten:
- glow
- gradients
- shadows

Volgende stap:
alleen Groep A wordt nog automatisch verder gemigreerd.
*/


/*
Laatste algemene UI-opkuis:

Prioriteit:
1. vaste achtergronden van gewone componenten
2. vaste tekstkleuren
3. vaste borders

Niet aanpakken:
- branding
- SVG
- schaakvisualisaties
- unieke effecten

Doel:
alle gewone interface-elementen moeten uitsluitend via theme tokens
hun kleur bepalen.
*/


/*
Eindstructuur:

1. Theme values
   - dark
   - light

2. Semantic tokens
   - surfaces
   - text
   - borders
   - accents
   - feedback
   - effects

3. Components
   - gebruiken uitsluitend semantische tokens

4. Exceptions
   - branding
   - SVG
   - schaakvisualisatie
*/


/* gradient theme tokens */
:root[data-theme="dark"]{
  --surface-gradient-panel:linear-gradient(145deg,rgba(23,43,80,.92),rgba(16,33,63,.94));
}


/* WHY PAGE semantic tokens */
:root{
  /* WHY hero */
  --why-flow-panel-a:rgba(23,43,80,.96);
  --why-flow-panel-b:rgba(28,52,88,.92);
  --why-flow-glow:rgba(101,217,241,.09);
  --why-flow-border:rgba(101,217,241,.45);
  --why-flow-grid-line:rgba(101,217,241,.035);

  --why-flow-node-background:rgba(9,26,47,.72);
  --why-flow-node-border:rgba(101,217,241,.22);
  --why-flow-label-color:var(--jura-bluegray);

  --why-data-cell:rgba(137,164,192,.32);
  --why-data-cell-alt:rgba(101,217,241,.12);
  --why-data-hot:var(--accent-brand);
  --why-data-hot-shadow:rgba(101,217,241,.28);
  --why-data-warm:rgba(101,217,241,.45);
  --why-data-warm-shadow:rgba(101,217,241,.12);

  --why-line-background:rgba(101,217,241,.24);
  --why-line-fill-a:var(--accent-brand);
  --why-line-fill-b:var(--accent-brand);

  --why-flow-logo-glow:rgba(101,217,241,.20);
}
.trainer-note-grid > .trainer-note-cell{
    background:var(--surface-overlay);
}

.trainer-note-grid p{
    color:var(--jura-bright);
}

.trainer-note-grid p.zw-note-empty{
    color:var(--jura-bright);
}


.why-mini-card {
    background:var(--surface-panel);
}


/* Typography refinement
   Orbitron = identity headings
   Jura = interface/body/navigation
*/

.zw-title,
.hero-title,
.page-title,
.training-title,
h1,
h2,
h3{
  font-family:Orbitron,Jura,system-ui,sans-serif;;letter-spacing:var(--zw-orbitron-spacing)}

.nav-link,
.menu-item,
.kicker,
.label,
.meta,
body{
  font-family:Jura,ui-sans-serif,system-ui,sans-serif;
}


/* Zetwijs wordmark gradient refinement */

.wordmark .zet{
  color:var(--jura-bright);
}

.wordmark .wijs{
  background:linear-gradient(
    90deg,
    color-mix(in srgb,var(--accent-brand) 28%,white) 0%,
    color-mix(in srgb,var(--accent-brand) 58%,white) 28%,
    var(--accent-brand) 60%,
    color-mix(in srgb,var(--accent-brand) 82%,white) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* Hero DATA visual */

.hero-data-grid{
  display:grid;
  grid-template-columns:repeat(5,6px);
  gap:5px;
}

.hero-data-grid span{
  width:6px;
  height:6px;
  background:var(--accent-brand,var(--jura-cyan));
  opacity:.25;
}

.hero-data-grid span:nth-child(2),
.hero-data-grid span:nth-child(4){
  opacity:.55;
}

.hero-data-grid span:nth-child(3){
  opacity:1;
}


/* Hero SELECTIE visual */

.hero-selection-blocks{
  display:flex;
  justify-content:center;
  gap:5px;
}

.hero-selection-blocks span{
  width:6px;
  height:6px;
  background:var(--accent-brand,var(--jura-cyan));
}

.hero-selection-blocks span:nth-child(1),
.hero-selection-blocks span:nth-child(5){
  opacity:.25;
}

.hero-selection-blocks span:nth-child(2),
.hero-selection-blocks span:nth-child(4){
  opacity:.55;
}

.hero-selection-blocks span:nth-child(3){
  opacity:1;
}


.training-title, 
.library-heading-row h1, 
.why-summary h2, 
.why-section-head h2, 
.setdetail-title-row h1{
  font-family:Orbitron,sans-serif;;letter-spacing:var(--zw-orbitron-spacing)}


.library-heading-row p, 
.why-intro, 
.why-anchor, 
.why-body, 
.training-card p{
  font-family:Jura,sans-serif;
}


/* ==================================================
   Orbitron text role
   All regular Orbitron headings use one theme token.
   Green status/lifetime text keeps its own semantic token.
================================================== */

.zw-title, 
.hero-title, 
.page-title, 
.training-title, 
.app-view h1, 
.why-summary h2, 
.why-pillar h3, 
.why-section-head h2, 
.why-mini-title, 
.why-buy-block h3, 
.why-cta h2, 
.setdetail-title-row h1, 
.setdetail-purchasebox h3, 
.setdetail-pricebig, 
.trainer-toolbar-copy strong, 
.trainer-error-box strong, 
.trainer-settings-card h2, 
.trainer-settings-section h3, 
.trainer-excluded-card h2, 
.zw-profile-intro h1, 
.zw-profile-card h2, 
.zw-custom-modal h2, 
.zw-progress-card h2, 
.intro h1,
.why-hero h1,
.zw-note-confirm-card h2, 
.zw-analysis-card h2,
.setdetail-pricebox .price,
.setdetail-stat b,
.zw-analysis-metric strong,
.zw-analysis-line-numbers,
.zw-analysis-compare-item strong{
  color:var(--text-orbitron);letter-spacing:var(--zw-orbitron-spacing)}

/* semantic exception */
.why-lifetime b{
  color:var(--jura-success-muted);
}


/* ==================================================
   JURA TEXT LINKING PATCH V5
   resterende vaste Jura-teksten gekoppeld aan rollen
   ================================================== */

/* profiel / account */
.user-btn,
.mobile-menu-btn{
  color:var(--jura-bluegray);
}


/* trainingsanalyse */
.training-card,
.training-card *{
  --jura-current:var(--jura-body);
}

.training-category, 
.trainer-panel-label, 
.trainer-kicker{
  color:var(--jura-small);
}

.training-description, 
.library-heading-row p{
  color:var(--jura-muted);
}



/* resultaat- en analysekaarten */
.stat-label,
.result-label,
.metric-label,
.analysis-label{
  color:var(--jura-soft);
}

.stat-value,
.metric-value,
.result-value{
  color:var(--jura-cyan);
}

/* why pagina vaste accentblokken */
.why-pillar-icon{
  color:var(--jura-bluegray);
}

.why-body,
.why-mini-card p,
.why-buy-block p{
  color:var(--jura-muted);
}

/* knoppen en links die nog Jura-wit gebruikten */

.setdetail-primary, 
.setdetail-actioncard{
  color:var(--jura-body);
}


.setdetail-primary:hover{
  color:var(--jura-cyan);
}

/* aankoopblok */
.why-lifetime b,
.why-lifetime span{
  color:var(--jura-success);
}


/* ==================================================
   FINAL JURA OVERRIDES - library filter
   ================================================== */

.library-filter{
  color:var(--jura-bright);
}

.library-filter option{
  color:var(--jura-bright);
  background:var(--surface-control);
}

/* ================================================================
   THEME: REVERSE / LIGHT
   Default theme remains :root. Apply with data-theme="reverse"
   on <html> or <body>.
   ================================================================ */
[data-theme="reverse"]{
  --effect-cyan-soft:rgba(10,159,189,.09);
  --effect-cyan-medium:rgba(10,159,189,.17);
  --effect-cyan-border:rgba(10,159,189,.30);
  --surface-quote:linear-gradient(90deg,rgba(10,159,189,.10),rgba(10,159,189,0));
  --surface-analysis-inset:rgba(219,225,231,.82);
  --surface-analysis-line:rgba(219,225,231,.82);
  --surface-analysis-line-hover:rgba(197,208,217,.92);
  --surface-warning:#dde3e8;
  --surface-progress-line:rgba(214,221,227,.80);
  --surface-wallet-button:var(--btn-bg);
  --surface-purchase-block:linear-gradient(135deg,#f4f7f8,#dbe4e7);
  --progress-track:rgba(64,85,106,.16);
  --progress-fill:#16aeca;
  --progress-fill-gradient:linear-gradient(90deg,#078aa5,#20b7d1);
  --surface-input:#f6f8fa;
  --text-input:#213b52;
  --border-input:rgba(10,159,189,.30);
  --move-correct-glow:rgba(24,185,120,.24);
  --surface-live-analysis:linear-gradient(145deg,#f7f9fa,#dde4e9);
  --surface-live-analysis-section:#eef2f5;
  --surface-live-analysis-control:#e2e8ed;
  --surface-live-analysis-tooltip:#263846;
  --surface-live-analysis-close-ring:#d2dae1;
  --border-live-analysis:rgba(22,127,150,.24);
  --border-live-analysis-section:rgba(22,127,150,.18);
  --border-live-analysis-control:#aebdc9;
  --border-live-analysis-soft:rgba(22,127,150,.13);
  --border-live-analysis-button:rgba(22,127,150,.30);
  --text-live-analysis-score:#167f96;
  --text-live-analysis-muted:#60788c;
  --text-live-analysis-label:#40556a;
  --text-live-analysis-icon:#667b8e;
  --text-live-analysis-tooltip:#f1f5f7;
  --text-live-analysis-row:#29465e;
  --text-live-analysis-status:#526a7d;
  --text-live-analysis-soft:#667b8e;
  --text-live-analysis-history:#40556a;
  --text-live-analysis-empty:#75889a;
  --analysis-move-active-bg:#c9dbe1;
  --analysis-move-active-text:#17384a;
  --analysis-card-border:rgba(22,127,150,.22);
  --analysis-filter-label:#60788c;
  --analysis-filter-border:rgba(22,127,150,.28);
  --analysis-metric-border:rgba(22,127,150,.14);
  --analysis-line-border:rgba(22,127,150,.16);
  --analysis-hover-text:#167f96;
  --analysis-hover-bg:rgba(22,127,150,.09);
  --analysis-selected-ring:rgba(22,127,150,.34);
  --live-status-text:#60788c;
  --live-variations-text:#667b8e;
  --live-variation-bg:#e7edf1;
  --live-variation-title:#29465e;
  --live-variation-text:#40556a;
  --live-button-border:#9eb2c0;
  --live-button-bg:#dfe6eb;
  --live-button-text:#315f75;
  --live-button-hover-text:#17384a;
  --live-move-list-text:#526a7d;
  --live-move-button-bg:#d7e0e6;
  --live-move-button-text:#29465e;
  --live-move-current-border:#167f96;
  --live-move-current-text:#167f96;
  --live-preview-border:rgba(22,127,150,.28);
  --live-preview-bg:#e4ebef;
  --live-preview-text:#315f75;
  --live-control-border:rgba(22,127,150,.24);
  --live-control-bg:#e2e8ed;
  --live-control-text:#40556a;
  --live-control-hover:#167f96;
  --live-footnote:#75889a;
  --trainer-finish-accent:#0a9fbd;
  --trainer-finish-ring-strong:rgba(10,159,189,.74);
  --trainer-finish-glow:rgba(10,159,189,.38);
  --trainer-finish-glow-soft:rgba(10,159,189,.17);
  --trainer-button-active-bg:rgba(22,127,150,.10);
  --surface-trainer-tooltip:rgba(38,56,70,.97);
  --text-trainer-tooltip:#f2f5f7;
  --border-end-guidance:rgba(10,159,189,.22);
  --trainer-finished-border:rgba(10,159,189,.40);
  --trainer-finished-text:#315f75;
  --trainer-finished-bg:rgba(10,159,189,.075);
  --trainer-finish-pulse-ring:rgba(10,159,189,.54);
  --trainer-finish-pulse-glow:rgba(10,159,189,.26);
  --trainer-finish-pulse-soft:rgba(10,159,189,.09);
  --trainer-finish-pulse-ring-peak:rgba(10,159,189,.90);
  --trainer-finish-pulse-glow-peak:rgba(10,159,189,.48);
  --trainer-finish-pulse-soft-peak:rgba(10,159,189,.20);
  --annotation-highlight-ring:rgba(10,159,189,.36);
  --annotation-highlight-glow:rgba(10,159,189,.22);
  --annotation-highlight-inset:rgba(10,159,189,.055);
  --jura-cyan:#0a9fbd;
  --jura-muted:#40556a;
  --jura-bright:#183149;
  --jura-soft:#667b8e;
  --jura-success:#18b978;
  --jura-success-muted:#227a5b;
  --jura-heading:#183149;
  --jura-body:#40556a;
  --jura-small:#667b8e;
  --jura-bluegray:#4f6578;
  --text-orbitron:#172d42;
  --orbitron-theme-color:#0a9fbd;
  --text-disabled:rgba(64,85,106,.42);
  --logo-cyan:var(--accent-brand);
  --logo-dark:#17384a;
  --surface-background:#e7eaee;
  --surface-panel:linear-gradient(145deg,#f7f8fa,#dfe4e9);
  --surface-overlay:linear-gradient(145deg,#f3f5f7,#d9e0e6);
  --surface-trainer-message:linear-gradient(145deg,#dde3e8,#edf1f4);
  --surface-control:#d7dde3;
  --surface-header:#eef1f4;
  --line:rgba(10,159,189,.30);
  --btn-bg:#d9dfe5;
  --btn-bg-hover:#cdd6dd;
  --btn-border:rgba(10,159,189,.27);
  --switch-off-bg:#c4ced7;
  --switch-off-knob:#8da0b1;
  --jura-danger:#f43f4f;
  --move-error-glow:rgba(244,63,79,.24);
  --surface-end-guidance:#d9e2e8;
  --text-end-guidance:#29465e;
  --text-end-guidance-muted:#667b8e;
  --why-flow-panel-a:#edf2f5;
  --why-flow-panel-b:#dbe4e9;
  --why-flow-glow:rgba(10,159,189,.08);
  --why-flow-border:rgba(10,159,189,.30);
  --why-flow-grid-line:rgba(10,159,189,.045);
  --why-flow-node-background:rgba(247,249,250,.90);
  --why-flow-node-border:rgba(10,159,189,.20);
  --why-flow-label-color:var(--jura-bluegray);
  --why-data-cell:rgba(79,101,120,.22);
  --why-data-cell-alt:rgba(10,159,189,.10);
  --why-data-hot:var(--accent-brand);
  --why-data-hot-shadow:rgba(10,159,189,.22);
  --why-data-warm:rgba(10,159,189,.42);
  --why-data-warm-shadow:rgba(10,159,189,.10);
  --why-line-background:rgba(79,101,120,.18);
  --why-line-fill-a:var(--accent-brand);
  --why-line-fill-b:var(--accent-brand);
  --why-flow-logo-glow:rgba(10,159,189,.16);
}
[data-theme="reverse"] .trainer-tool-btn.engine-ready,
[data-theme="reverse"] .trainer-tool-btn.engine-active,
[data-theme="reverse"] .trainer-square-action.engine-ready,
[data-theme="reverse"] .trainer-square-action.engine-active{
  color:var(--jura-success);
  border-color:color-mix(in srgb,var(--jura-success) 58%,transparent);
  background:color-mix(in srgb,var(--jura-success) 12%,var(--btn-bg));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--jura-success) 10%,transparent),
             0 0 12px color-mix(in srgb,var(--jura-success) 18%,transparent);
}

[data-theme="reverse"] .why-switch{
  border-color:color-mix(in srgb,var(--jura-bluegray) 22%,transparent);
}


/* =========================================================
   Mijn Zetwijs · analysekaarten
   ========================================================= */
.zw-profile-analysis-card{display:flex;flex-direction:column}
.zw-profile-analysis-card .zw-profile-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.zw-profile-analysis-card .zw-profile-link svg{width:16px;height:16px}


/* =========================================================
   JURIDISCHE FOOTER & PUBLIEKE JURIDISCHE PAGINA'S
   ========================================================= */
.zw-site-footer{
  width:min(1180px,calc(100% - 32px));
  margin:34px auto 20px;
  padding:18px 0 8px;
  border-top:1px solid color-mix(in srgb,var(--text-muted, #8ea0b8) 24%,transparent);
  text-align:center;
  font-family:"Jura",sans-serif;
}
.zw-auth-footer{width:100%;margin-top:24px}
.zw-app-footer{margin-top:10px;margin-bottom:18px;border-top:none}
.zw-footer-mark{color:var(--text-disabled,#69778d);font-size:11px;letter-spacing:.075em;text-transform:uppercase;margin-bottom:20px}
/* =========================================================
   LEGAL PAGINA'S VERWIJDERD UIT HOOFDSTYLESHEET
   Deze stijlen zitten nu in assets/legal.css
   ========================================================= */

/* =========================================================
   AUTH FOOTER LINKS
   ========================================================= */

.zw-auth-footer .zw-legal-links a,
.zw-auth-footer .zw-legal-links a:visited{
    color:var(--jura-muted);
    text-decoration:none;
}

.zw-auth-footer .zw-legal-links a:hover,
.zw-auth-footer .zw-legal-links a:focus-visible{
    color:var(--accent-brand);
    text-decoration:none;
}

/* =========================================================
   APP FOOTER LINKS
   ========================================================= */

.zw-app-footer .zw-legal-links a,
.zw-app-footer .zw-legal-links a:visited{
    color:var(--jura-muted);
    text-decoration:none;
}

.zw-app-footer .zw-legal-links a:hover,
.zw-app-footer .zw-legal-links a:focus-visible{
    color:var(--accent-brand);
    text-decoration:none;
}


.zw-tactical-signal strong{display:flex;align-items:center;gap:6px}
.zw-tactical-signal strong svg{width:18px;height:18px;flex:0 0 18px}

.why-purchase-row{display:flex;align-items:center;gap:28px}
.why-purchase-row>p{flex:1;min-width:0;margin:0}
@media(max-width:760px){.why-purchase-row{flex-direction:column;align-items:stretch}.why-purchase-row .why-lifetime{width:100%;box-sizing:border-box}}

.why-cta{padding-bottom:64px}

body:has(#profileView:not(.hidden)) #appFooter .zw-footer-mark{display:none}

#gameCompareView .zw-game-compare>.setdetail-back{appearance:none;display:inline-flex;align-items:center;gap:7px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--jura-bluegray);font:500 12px Jura,sans-serif;padding:0;margin:0 0 18px;min-height:0;width:auto}
#gameCompareView .zw-game-compare>.setdetail-back:hover:not(:disabled),#gameCompareView .zw-game-compare>.setdetail-back:focus-visible:not(:disabled){background:none;border:0;box-shadow:none;color:var(--accent-brand)}

#authShell .auth-home-link{text-decoration:none;align-self:flex-start;margin-bottom:18px}
#authShell .card a,#authShell .card a:visited{color:var(--jura-cyan);text-decoration:underline;text-underline-offset:3px}
#authShell .card a:hover,#authShell .card a:focus-visible{color:var(--jura-body)}

#authShell .zw-auth-footer{border-top:none}

#authShell .zw-register-legal{font:400 12px/1.6 Jura,sans-serif;color:var(--jura-bluegray)}
#authShell .card .zw-register-legal a,#authShell .card .zw-register-legal a:visited{color:var(--jura-bluegray)}
#authShell .card .zw-register-legal a:hover,#authShell .card .zw-register-legal a:focus-visible{color:var(--jura-body)}

#registerForm .intro p{margin-bottom:0}
#authShell .zw-register-legal{margin-top:0}

/* Gelijke voetruimte en scheidingslijnen in de vier Waarom-kaarten. */
.why-pillars .why-micro{position:relative;border-top:0;padding-top:30px;min-height:calc(3em + 30px);box-sizing:border-box}
.why-pillars .why-micro::before{content:'';position:absolute;left:0;right:0;top:15px;height:1px;background:color-mix(in srgb,var(--accent-brand) 10%,transparent)}


/* Repertoireaanvragen blijven zichtbaar boven de bibliotheekfilters. */
.library-request{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin:0 0 20px;border:1px solid var(--effect-cyan-border);border-radius:8px;background:var(--surface-panel)}
.library-request h2{margin:0 0 8px;font:400 16px/1.4 Orbitron,sans-serif;color:var(--text-orbitron)}
.library-request p{margin:0;color:var(--jura-muted);line-height:1.6;max-width:760px}
.library-request-link{flex-shrink:0;color:var(--accent-brand);font-weight:600;text-decoration:none}
.library-request-link:hover{text-decoration:underline}
.library-filter-row{display:flex;justify-content:flex-end;margin-bottom:20px}
@media(max-width:700px){.library-request{flex-direction:column;align-items:flex-start;gap:14px;padding:18px}.library-request-link{flex-shrink:1}}

/* Subtiele aanvraagstrook in de bibliotheek. */
.library-request{padding:14px 18px;gap:18px}
.library-request h2{font-size:13px;margin-bottom:5px}
.library-request p{font-size:12.5px;line-height:1.5}
.library-request-link{font-size:12.5px}


/* Herkenbaar kader voor blijvende toegang bij een set in bezit. */
.setdetail-pricebox.is-owned{min-width:136px;padding:11px 13px;text-align:center;border:1px solid var(--jura-success-muted);border-radius:6px;background:color-mix(in srgb,var(--jura-success) 8%,transparent)}
.setdetail-pricebox.is-owned .status,.setdetail-pricebox.is-owned .sub{display:none}
.setdetail-pricebox.is-owned .price{margin:0;font:400 14px/1.5 Orbitron,sans-serif;color:var(--jura-success)}

.setdetail-pricebox.is-owned .price{display:flex;align-items:center;justify-content:center;gap:9px}
.setdetail-pricebox.is-owned .price svg{flex:0 0 24px;width:24px;height:24px}

/* Bevestigingsknoppen voor lijn- en zetnotities. */
.zw-note-confirm-card .zw-custom-confirm-actions button{
  appearance:none;min-height:38px;padding:9px 14px;
  border:1px solid var(--btn-border);border-radius:5px;
  background:var(--btn-bg);color:var(--jura-body);
  font:500 14px/1.4 Jura,sans-serif;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.zw-note-confirm-card .zw-custom-confirm-actions button:hover:not(:disabled),
.zw-note-confirm-card .zw-custom-confirm-actions button:focus-visible{
  border-color:var(--btn-border-hover);background:var(--btn-bg-hover);color:var(--accent-brand);
}
.zw-note-confirm-card .zw-custom-confirm-actions button:focus-visible{outline:2px solid var(--accent-brand);outline-offset:3px}
.zw-note-confirm-card .zw-custom-confirm-actions button:disabled{opacity:.45;cursor:default}

/* Zetwijs-uitleg en persoonlijke notities delen dezelfde tekststijl en ondergrond. */
.trainer-annotation-text,
.trainer-note-grid p,
.trainer-note-grid p.zw-note-empty{
  color:var(--jura-bright);
  font-family:Jura,ui-sans-serif,system-ui,sans-serif;
  font-size:11.5px;
  font-weight:400;
  line-height:1.48;
}
.trainer-note-grid>.trainer-note-cell{background:var(--surface-panel)}

/* Geen zichtbare paginascrollbar; muis, touch en toetsenbord blijven scrollen. */
html:has(:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView):not(.hidden)),
body:has(:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView):not(.hidden)),
:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView){
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html:has(:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView):not(.hidden))::-webkit-scrollbar,
body:has(:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView):not(.hidden))::-webkit-scrollbar,
:is(#statsView,#faqView,#libraryView,#whyView,#progressView,#gameCompareView)::-webkit-scrollbar{display:none}



/* Blijvende ademruimte na de laatste rij bibliotheeksets. */
#libraryView {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Compact toegangsembleem, goedgekeurd lokaal ontwerp. */
.setdetail-pricebox.is-owned{min-width:0;padding:0;border:0;background:none;text-align:left}
.setdetail-pricebox.is-owned .price{display:flex;align-items:center;justify-content:flex-start;gap:12px;color:var(--jura-success-muted)}
.setdetail-pricebox.is-owned .price .zw-access-emblem{flex:0 0 44px;width:44px;height:50px;filter:drop-shadow(0 3px 3px rgba(23,56,74,.09))}
.setdetail-pricebox.is-owned .zw-access-label{font:400 12px/1.7 Orbitron,system-ui,sans-serif;letter-spacing:var(--zw-orbitron-spacing)}
.setdetail-pricebox.is-owned .zw-access-label small{display:block;margin-top:3px;font:500 11px/1.4 Jura,system-ui,sans-serif;letter-spacing:.02em;color:var(--jura-bluegray)}
html:not([data-theme="reverse"]) body:not([data-theme="reverse"]) .setdetail-pricebox.is-owned .price{color:#64cba0}