/* academy-player-r3 — Netflix-style lesson player chrome. Applies only after JS adds
   #apOverlay.apr1 / [data-apr1]. If the script never runs, nothing on the page changes.
   Fonts: self-hosted academy-premium-r1 faces only. No remote/CDN assets. */
@font-face{font-family:"Plus Jakarta Sans";src:url("/assets/academy-premium-r1/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Arabic";src:url("/assets/academy-premium-r1/fonts/noto-sans-arabic-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

#apOverlay.apr1{
  --ease:cubic-bezier(.22,1,.36,1);
  --r-sm:16px; --r-md:22px; --r-lg:28px; --r-pill:999px;
  --bg:#0B1020; --bg-deep:#070A14; --ink:#F4F0E8; --muted:#B7B1C4;
  --line:rgba(244,240,232,.10); --glass:rgba(16,20,36,.72); --glass-2:rgba(12,16,32,.88);
  --paper:#14182A; --accent:#C8962E; --accent-ink:#1A1630; --accent-bright:#E8C56B;
  --tint:color-mix(in srgb,var(--accent) 20%, var(--paper));
  --shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 28px rgba(0,0,0,.4), 0 0 40px color-mix(in srgb,var(--accent) 18%, transparent);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --rail-h:0px; --side-w:272px; --stage-w:780px;
  color-scheme:dark;
  color:var(--ink);
  background:var(--bg-deep);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#apOverlay.apr1[dir="rtl"],#apOverlay.apr1[dir="rtl"] button,#apOverlay.apr1[dir="rtl"] input,#apOverlay.apr1[dir="rtl"] select{
  font-family:"Noto Sans Arabic","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif}
#apOverlay.apr1:focus-visible,
#apOverlay.apr1 button:focus-visible,
#apOverlay.apr1 a:focus-visible,
#apOverlay.apr1 select:focus-visible{
  outline:2px solid var(--accent-bright);outline-offset:3px}

/* Light: metallic white nacre. */
@property --nacre-angle{syntax:"<angle>";inherits:false;initial-value:228deg}
#apOverlay.apr1[data-apr1-theme="light"]{
  color-scheme:light;
  --bg:#F6F2EC; --bg-deep:#F3EFE8; --ink:#1A1630; --muted:#5C5668;
  --line:rgba(26,22,48,.10); --glass:rgba(255,252,249,.78); --glass-2:rgba(255,253,250,.92);
  --paper:#FFFCF8; --accent:#A67C1C; --accent-ink:#1A1630; --accent-bright:#8A5A12;
  --tint:color-mix(in srgb,var(--accent) 16%, var(--paper));
  --shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(140,148,165,.16),
           0 0 0 1px rgba(168,176,190,.4), 0 8px 28px rgba(26,22,48,.08);
  background:var(--bg-deep);color:var(--ink);
}

#apOverlay.apr1 .apr1-sheen{display:none}
#apOverlay.apr1[data-apr1-theme="light"] .apr1-sheen{
  display:block;position:absolute;inset:-10%;pointer-events:none;z-index:1;
  background:
    radial-gradient(42% 38% at 18% 28%, rgba(255,196,214,.18), transparent 62%),
    radial-gradient(40% 42% at 82% 34%, rgba(168,220,214,.16), transparent 64%),
    radial-gradient(50% 42% at 58% 80%, rgba(208,194,236,.15), transparent 66%),
    conic-gradient(from var(--nacre-angle) at 50% 46%,
      rgba(255,255,255,0) 0deg,
      rgba(255,206,220,.13) 70deg,
      rgba(176,224,216,.12) 150deg,
      rgba(210,198,236,.13) 230deg,
      rgba(255,255,255,0) 310deg,
      rgba(255,206,220,.08) 360deg);
  animation:apr1-nacre-shift 36s ease-in-out infinite;
}
@keyframes apr1-nacre-shift{
  0%{--nacre-angle:200deg}
  50%{--nacre-angle:292deg}
  100%{--nacre-angle:200deg}
}

/* 1. Top bar: one clean row, ~52px */
#apOverlay.apr1 .ap-top{
  position:relative;z-index:6;
  display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:8px;
  min-height:52px;height:52px;max-height:52px;box-sizing:border-box;
  padding:0 14px;padding-top:var(--safe-t);
  height:calc(52px + var(--safe-t));max-height:calc(52px + var(--safe-t));min-height:calc(52px + var(--safe-t));
  background:var(--glass) !important;border-bottom:1px solid var(--line) !important;
  box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
#apOverlay.apr1[data-apr1-theme="light"] .ap-top,
#apOverlay.apr1[data-apr1-theme="light"] .apr1-rail,
#apOverlay.apr1[data-apr1-theme="light"] .apr1-next{
  background-color:var(--glass);
  border-color:rgba(164,172,186,.48);
  box-shadow:var(--shadow);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 36%),
    repeating-linear-gradient(90deg, rgba(170,178,192,.03) 0 1px, transparent 1px 5px);
}
#apOverlay.apr1 .ap-ttl{flex:1 1 auto;min-width:0;overflow:hidden}
#apOverlay.apr1 .ap-brand{display:block;margin:0;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-bright);font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#apOverlay.apr1 .ap-course,#apOverlay.apr1 #apCourse{
  margin:0;font-size:.95rem;letter-spacing:-.02em;font-weight:700;line-height:1.25;color:var(--ink) !important;
  white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;display:block;-webkit-line-clamp:unset}
#apOverlay.apr1 .ap-exit,#apOverlay.apr1 #apTheme,#apOverlay.apr1 #apFs,#apOverlay.apr1 #apSb{
  min-width:44px;min-height:44px;height:44px;flex:0 0 auto;
  border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(244,240,232,.08) !important;color:var(--ink) !important;border:1px solid var(--line) !important;cursor:pointer;
  padding:0 10px;white-space:nowrap;box-sizing:border-box;font:inherit;font-weight:600;
}
#apOverlay.apr1 #apTheme,#apOverlay.apr1 #apFs,#apOverlay.apr1 #apSb,#apOverlay.apr1 #apTop{
  width:44px;flex:0 0 44px;padding:0;overflow:hidden
}
#apOverlay.apr1 #apExit{width:auto;flex:0 0 auto;padding:0 12px}
#apOverlay.apr1 #apExit .ap-exit-l{display:inline;font-size:.85rem;font-weight:650}
#apOverlay.apr1 #apTop{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(244,240,232,.08) !important;color:var(--ink) !important;border:1px solid var(--line) !important;cursor:pointer;
}
#apOverlay.apr1[data-apr1-theme="light"] .ap-exit,
#apOverlay.apr1[data-apr1-theme="light"] #apTheme,
#apOverlay.apr1[data-apr1-theme="light"] #apFs,
#apOverlay.apr1[data-apr1-theme="light"] #apSb,
#apOverlay.apr1[data-apr1-theme="light"] #apTop{background:rgba(26,22,48,.05) !important}
#apOverlay.apr1 #apTop .ap-top-label,
#apOverlay.apr1 #apTop .ap-top-short{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#apOverlay.apr1 #apTheme .apr1-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#apOverlay.apr1 #apTheme .apr1-icon-sun{display:block}
#apOverlay.apr1 #apTheme .apr1-icon-moon{display:none}
#apOverlay.apr1[data-apr1-theme="light"] #apTheme .apr1-icon-sun{display:none}
#apOverlay.apr1[data-apr1-theme="light"] #apTheme .apr1-icon-moon{display:block}
#apOverlay.apr1 .ap-links{display:flex;gap:4px;flex:0 0 auto}
#apOverlay.apr1 .ap-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-pill);
  color:var(--ink) !important;font-weight:600;text-decoration:none;white-space:nowrap}
#apOverlay.apr1 .ap-links a:hover{background:rgba(244,240,232,.08)}
#apOverlay.apr1[data-apr1-theme="light"] .ap-links a:hover{background:rgba(26,22,48,.06)}
#apOverlay.apr1 .ap-hprog,#apOverlay.apr1 #apHprog{
  flex:0 0 auto;min-width:72px;width:88px;height:8px;border-radius:var(--r-pill);
  background:rgba(244,240,232,.16) !important;overflow:hidden;position:relative;margin:0 !important}
#apOverlay.apr1[data-apr1-theme="light"] .ap-hprog,
#apOverlay.apr1[data-apr1-theme="light"] #apHprog{background:rgba(26,22,48,.16) !important}
#apOverlay.apr1 .ap-hprog i,#apOverlay.apr1 #apHprog i{
  display:block;height:100%;background:var(--accent) !important;border-radius:inherit}
#apOverlay.apr1 .ap-hprog b,#apOverlay.apr1 #apHprog b{display:none}

/* 2. Listen row */
#apOverlay.apr1 .ap-ls{
  position:relative;z-index:5;
  display:flex !important;flex-wrap:nowrap !important;align-items:center;gap:8px;
  min-height:48px;padding:4px 14px;
  background:var(--glass) !important;border-bottom:1px solid var(--line) !important;color:var(--ink) !important;
}
#apOverlay.apr1 .ap-ls-l{font-weight:700;white-space:nowrap;color:var(--ink)}
#apOverlay.apr1 .ap-ls-b{
  min-width:44px;min-height:44px;height:44px;border-radius:var(--r-pill);
  border:1px solid var(--line) !important;background:rgba(244,240,232,.08) !important;color:var(--ink) !important;
  font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
#apOverlay.apr1 .ap-ls-p,#apOverlay.apr1 .ap-ls-b.ap-ls-p{
  background:var(--accent) !important;color:var(--accent-ink) !important;border-color:var(--accent) !important}
#apOverlay.apr1[data-apr1-theme="light"] .ap-ls-b{background:rgba(26,22,48,.05) !important}
#apOverlay.apr1 .ap-ls-r{display:inline-flex;align-items:center;gap:6px;color:var(--ink);white-space:nowrap;font-weight:600}
#apOverlay.apr1 .ap-ls-r select,#apOverlay.apr1 #apLsRate{
  -webkit-appearance:none;appearance:none;
  height:36px;min-height:36px;min-width:4.2em;padding:.2em 1.8em .2em .7em;
  border-radius:var(--r-pill);border:1px solid var(--line) !important;
  background-color:var(--paper) !important;color:var(--ink) !important;
  font:inherit;font-weight:650;line-height:1.2;cursor:pointer;
  color-scheme:dark;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23F4F0E8' stroke-width='1.6' stroke-linecap='round' d='M1.5 1.5L6 6 10.5 1.5'/></svg>");
  background-repeat:no-repeat;background-position:inset-inline-end 10px center;background-position:right 10px center;
}
#apOverlay.apr1[dir="rtl"] .ap-ls-r select,#apOverlay.apr1[dir="rtl"] #apLsRate{background-position:left 10px center}
#apOverlay.apr1[data-apr1-theme="light"] .ap-ls-r select,
#apOverlay.apr1[data-apr1-theme="light"] #apLsRate{
  color-scheme:light;background-color:var(--paper) !important;color:var(--ink) !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231A1630' stroke-width='1.6' stroke-linecap='round' d='M1.5 1.5L6 6 10.5 1.5'/></svg>");
}
#apOverlay.apr1 .ap-ls-n{color:var(--muted);font-size:.85rem}
#apOverlay.apr1 .ap-streak{margin-inline-start:auto;color:var(--accent-bright);font-weight:600;white-space:nowrap}

#apOverlay.apr1 .ap-scroll,#apOverlay.apr1 #apScroll{
  position:relative;z-index:2;min-height:0;
  padding-bottom:calc(var(--rail-h) + var(--safe-b) + 16px);
  color:var(--ink);
  background:transparent;
}
#apOverlay.apr1 .ap-scroll #trainingApp,
#apOverlay.apr1 .ap-scroll #trainingApp[data-stage=learn]{
  max-width:none !important;width:100%;padding:0;color:var(--ink);background:transparent}

/* 3. Sidebar: compact rows, 28px topic icons, thin scrollbar, no arrow buttons */
#apOverlay.apr1 .ap-body{
  display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100%;align-items:start}
#apOverlay.apr1.ap-nosb .ap-body{grid-template-columns:minmax(0,1fr)}
#apOverlay.apr1 .ap-outline{
  width:var(--side-w);max-width:var(--side-w);box-sizing:border-box;
  border-inline-end:1px solid var(--line);background:var(--bg) !important;color:var(--ink) !important;
  padding:12px 8px;overflow:auto;position:sticky;top:0;
  max-height:calc(100dvh - 52px - var(--safe-t) - 48px);
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%, transparent) transparent;
}
#apOverlay.apr1 .ap-outline::-webkit-scrollbar{width:6px;height:6px}
#apOverlay.apr1 .ap-outline::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 28%, transparent);border-radius:99px}
#apOverlay.apr1 .ap-outline::-webkit-scrollbar-track{background:transparent}
#apOverlay.apr1 .ap-outline::-webkit-scrollbar-button{display:none !important;width:0 !important;height:0 !important}
#apOverlay.apr1 .ap-outline::-webkit-scrollbar-corner{display:none;background:transparent}
#apOverlay.apr1 .ap-outline ol{list-style:none;margin:0;padding:0}
#apOverlay.apr1 .ap-omod{
  display:flex !important;align-items:center;gap:8px;width:100%;
  min-height:44px;padding:6px 8px;border:0;border-radius:10px;
  background:transparent !important;color:var(--ink) !important;text-align:start;cursor:pointer;font:inherit;
}
#apOverlay.apr1 .ap-omod:hover,#apOverlay.apr1 .ap-omod:focus-visible{background:color-mix(in srgb,var(--accent) 12%, transparent) !important}
#apOverlay.apr1 .ap-omod.is-on{
  background:color-mix(in srgb,var(--accent) 16%, var(--paper)) !important;
  box-shadow:inset 3px 0 0 var(--accent)}
#apOverlay.apr1[dir="rtl"] .ap-omod.is-on{box-shadow:inset -3px 0 0 var(--accent)}
#apOverlay.apr1 .ap-omod .n{
  flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted);background:transparent}
#apOverlay.apr1 .ap-omod.is-on .n{color:var(--accent-bright);border-color:var(--accent)}
#apOverlay.apr1 .ap-omod .t{
  flex:1 1 auto;min-width:0;font-size:.8rem;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#apOverlay.apr1 .ap-omod.is-on .t{color:var(--ink);font-weight:650}

/* Topic icons — 28px tinted rounded square */
#apOverlay.apr1 .apr1-thumb{
  position:relative;flex:0 0 28px;width:28px !important;height:28px !important;aspect-ratio:1 / 1 !important;
  border-radius:8px !important;display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint) !important;color:var(--accent-bright);border:1px solid color-mix(in srgb,var(--accent) 30%, transparent);
  overflow:visible;box-shadow:none;
}
#apOverlay.apr1 .apr1-thumb img{display:none !important}
#apOverlay.apr1 .apr1-mod-icon{width:16px;height:16px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#apOverlay.apr1 .ap-omod.is-on .apr1-thumb,
#apOverlay.apr1 .ap-mod.is-on .apr1-thumb{
  background:color-mix(in srgb,var(--accent) 28%, var(--paper)) !important;
  box-shadow:0 0 0 2px var(--accent);
  color:var(--accent-bright);
}
#apOverlay.apr1 .apr1-thumb-check{
  display:none;position:absolute;inset-inline-end:-4px;bottom:-4px;
  width:13px;height:13px;border-radius:50%;
  background:#1B7A45;color:#fff;border:1.5px solid var(--bg-deep);
  box-sizing:border-box;align-items:center;justify-content:center;
}
#apOverlay.apr1 .apr1-thumb-check svg{width:8px;height:8px;display:block;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#apOverlay.apr1 .is-done .apr1-thumb-check{display:flex}

/* 6. Lesson card + chips + progress */
#apOverlay.apr1 .ap-body .ap-player{
  min-width:0;width:100%;max-width:none !important;
  display:flex;flex-direction:column;align-items:center;
  padding:22px clamp(14px,3vw,32px) 28px;gap:14px;box-sizing:border-box;
}
#apOverlay.apr1 .ap-meta,
#apOverlay.apr1 .ap-prog,
#apOverlay.apr1 .ap-stage,
#apOverlay.apr1 .ap-nav,
#apOverlay.apr1 .tr-paidsum,
#apOverlay.apr1 .card.tr-paidcert,
#apOverlay.apr1 .tr-card.tr-paidsum{
  width:100%;max-width:var(--stage-w);margin-inline:auto;box-sizing:border-box;
}
#apOverlay.apr1 .ap-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#apOverlay.apr1 .ap-kicker{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted) !important}
#apOverlay.apr1 .ap-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
#apOverlay.apr1 .ap-chip{
  padding:4px 12px;border-radius:var(--r-pill);background:var(--paper) !important;
  border:1px solid var(--line) !important;font-size:.85rem;font-weight:600;color:var(--muted) !important;
  -webkit-text-fill-color:var(--muted)}
#apOverlay.apr1 .ap-chip.is-on{
  background:var(--accent) !important;border-color:var(--accent) !important;
  color:var(--accent-ink) !important;-webkit-text-fill-color:var(--accent-ink) !important}
#apOverlay.apr1 .ap-lights{margin-inline-start:auto;font-weight:700;color:var(--accent-bright) !important}
#apOverlay.apr1 .ap-prog{height:6px;border-radius:6px;background:var(--line) !important;overflow:hidden}
#apOverlay.apr1 .ap-prog i{display:block;height:100%;background:var(--accent) !important;border-radius:6px}
#apOverlay.apr1 .ap-stage{
  background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:22px;
  box-shadow:var(--shadow);padding:28px clamp(18px,3vw,36px);color:var(--ink);
}
#apOverlay.apr1 .ap-mtitle,#apOverlay.apr1 .ap-lead,#apOverlay.apr1 .ap-q legend,#apOverlay.apr1 .ap-fb{color:var(--ink) !important}
#apOverlay.apr1 .ap-note,#apOverlay.apr1 .ap-why{color:var(--muted) !important}

/* 7. Previous / Next — single row, no grey panel */
#apOverlay.apr1 .ap-nav{
  display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;
  align-items:center !important;justify-content:space-between !important;gap:12px;
  position:static !important;z-index:3;
  min-height:0 !important;height:auto !important;
  padding:8px 0 4px !important;
  background:transparent !important;background-image:none !important;
  border:0 !important;border-top:0 !important;box-shadow:none !important;
}
#apOverlay.apr1 .ap-nav > span:empty{display:none}
#apOverlay.apr1 .ap-nav .ap-mods{display:none !important}
#apOverlay.apr1 #trPrev,#apOverlay.apr1 .ap-nav .ap-btn.ap-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;height:44px;padding:0 18px;border-radius:var(--r-pill);
  background:transparent !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;font-weight:650;cursor:pointer;margin-inline-end:auto;
}
#apOverlay.apr1 #trNext,#apOverlay.apr1 .ap-nav .ap-btn:not(.ap-ghost){
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;height:44px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--accent) !important;color:var(--accent-ink) !important;
  border:0 !important;font-weight:650;cursor:pointer;margin-inline-start:auto;
}

/* 8. Revision / training summary upsell */
#apOverlay.apr1 .tr-paidsum,
#apOverlay.apr1 .card.tr-paidcert.tr-paidsum,
#apOverlay.apr1 .tr-card.tr-paidsum,
#apOverlay.apr1 .ap-scroll #trainingApp .tr-paidsum,
#apOverlay.apr1 .ap-scroll #trainingApp .card.tr-paidsum{
  background:var(--paper) !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;border-radius:16px !important;
  border-inline-start:4px solid var(--accent) !important;
  padding:20px 22px !important;margin-top:16px;margin-bottom:8px;
  box-shadow:none !important;transform:none !important;
}
#apOverlay.apr1 .tr-paidsum h3,
#apOverlay.apr1 .tr-paidsum h2{color:var(--ink) !important;margin-top:0}
#apOverlay.apr1 .tr-paidsum p,
#apOverlay.apr1 .tr-paidsum .tr-sum-promo,
#apOverlay.apr1 .tr-paidsum s{color:var(--muted) !important}
#apOverlay.apr1 .tr-paidsum s{opacity:.8}
#apOverlay.apr1 #trPaidSummary,
#apOverlay.apr1 .tr-paidsum .btn,
#apOverlay.apr1 .tr-paidsum a.btn-lg{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--accent) !important;color:var(--accent-ink) !important;
  border:0 !important;font-weight:700;text-decoration:none !important;
}

/* 9. Video facades */
#apOverlay.apr1 .ap-video-privacy,
#apOverlay.apr1 p.tr-note.ap-video-privacy,
#apOverlay.apr1 .tr-res .ap-video-privacy{
  display:block;width:auto;max-width:var(--stage-w);
  margin:0 0 12px;padding:0 !important;
  background:transparent !important;border:0 !important;border-radius:0 !important;
  box-shadow:none !important;color:var(--muted) !important;
  font-size:.8rem;line-height:1.4;font-weight:500;
}
#apOverlay.apr1 .tr-res-vids{
  display:grid !important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:12px;align-items:stretch;
}
#apOverlay.apr1 .tr-res-vid{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper) !important;border:1px solid var(--line) !important;
  border-radius:12px !important;overflow:hidden;color:var(--ink);
  box-shadow:none;
}
#apOverlay.apr1 .apr1-vid-play,
#apOverlay.apr1 .tr-res-play,
#apOverlay.apr1 .tr-res-vid .tr-res-frame,
#apOverlay.apr1 .tr-res-vid .ap-video-frame,
#apOverlay.apr1 .tr-res-vid iframe{
  position:relative;display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;
  background:#0a0d16;padding:0;cursor:pointer;
}
#apOverlay.apr1 .apr1-vid-play img,
#apOverlay.apr1 .tr-res-play img{
  width:100%;height:100%;object-fit:cover;display:block;border:0;
}
#apOverlay.apr1 .apr1-vid-pbtn,
#apOverlay.apr1 .tr-res-pbtn{
  position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 92%, #000);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;font-size:0;line-height:0;
}
#apOverlay.apr1 .apr1-vid-pbtn::before,
#apOverlay.apr1 .tr-res-pbtn::before{
  content:"";width:0;height:0;
  border-block:9px solid transparent;
  border-inline-start:16px solid currentColor;
  margin-inline-start:3px;
}
#apOverlay.apr1 .tr-res-cap,
#apOverlay.apr1 .apr1-vid-cap{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:10px 12px 12px;background:transparent;
}
#apOverlay.apr1 .tr-res-cap b{flex:1 0 100%;color:var(--ink) !important;font-size:.92rem;line-height:1.3}
#apOverlay.apr1 .tr-res-cap small{flex:1 0 100%;color:var(--muted) !important;font-size:.78rem}
#apOverlay.apr1 .tr-res-lang,
#apOverlay.apr1 .ap-video-lang{
  display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:6px;
  background:var(--tint);color:var(--accent-bright);font-size:.72rem;font-weight:700;
}
#apOverlay.apr1 .ap-video-source{
  display:inline-flex;align-items:center;min-height:24px;color:var(--ink) !important;
  font-size:.78rem;font-weight:600;text-decoration:underline;
}

/* 4. Bottom filmstrip — hidden on wide screens when the sidebar is visible */
#apOverlay.apr1 .apr1-rail{
  position:absolute;z-index:7;inset-inline:0;bottom:0;left:0;right:0;
  padding:8px 12px calc(10px + var(--safe-b));
  background:var(--glass-2);border-top:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#apOverlay.apr1 .apr1-rail h2{
  margin:0 0 6px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);font-weight:700}
#apOverlay.apr1 .apr1-rail .ap-mods,
#apOverlay.apr1 .apr1-rail .ap-mods.ap-mods{
  display:flex !important;flex-wrap:nowrap !important;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:4px 2px 6px;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 28%, transparent) transparent;
}
#apOverlay.apr1 .apr1-rail .ap-mods::-webkit-scrollbar{height:6px}
#apOverlay.apr1 .apr1-rail .ap-mods::-webkit-scrollbar-button{display:none !important;width:0;height:0}
#apOverlay.apr1 .apr1-rail .ap-mod{
  flex:0 0 auto;width:auto;max-width:200px;min-width:148px;min-height:44px;
  display:flex;flex-direction:row;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-pill);
  background:var(--paper) !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;cursor:pointer;text-align:start;
  scroll-snap-align:start;
}
#apOverlay.apr1 .apr1-rail .ap-mod > span:not(.apr1-thumb):not(.apr1-mod-title){
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#apOverlay.apr1 .apr1-mod-title{
  display:block;font-size:.75rem;line-height:1.25;color:var(--ink);
  max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-line-clamp:unset}
#apOverlay.apr1 .ap-mod.is-on .apr1-mod-title{color:var(--accent-bright);font-weight:650}

@media (min-width:900px){
  #apOverlay.apr1:not(.ap-nosb){--rail-h:0px}
  #apOverlay.apr1:not(.ap-nosb) .apr1-rail{display:none !important}
  #apOverlay.apr1.ap-nosb{--rail-h:88px}
}
@media (max-width:899px){
  #apOverlay.apr1{--rail-h:96px;--side-w:min(86vw,280px)}
  #apOverlay.apr1 .ap-body{grid-template-columns:minmax(0,1fr)}
  #apOverlay.apr1 .ap-scroll{padding-bottom:calc(var(--rail-h) + var(--safe-b) + 20px)}
  #apOverlay.apr1 .apr1-next{bottom:calc(var(--rail-h) + 8px)}
}

/* Next-lesson countdown */
#apOverlay.apr1 .apr1-next{
  display:none;position:absolute;z-index:9;inset-inline-end:20px;bottom:calc(var(--rail-h) + 16px);
  width:min(360px,86vw);padding:12px;border-radius:var(--r-md);
  background:var(--glass-2);border:1px solid var(--line);box-shadow:var(--shadow);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  align-items:center;gap:12px;
}
#apOverlay.apr1 .apr1-next.on{display:flex}
#apOverlay.apr1 .apr1-next-thumb{
  flex:0 0 40px;width:40px;height:40px;aspect-ratio:1/1;border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--tint);color:var(--accent-bright);
  overflow:hidden}
#apOverlay.apr1 .apr1-next-thumb img{display:none}
#apOverlay.apr1 .apr1-next-thumb .apr1-mod-icon{width:20px;height:20px}
#apOverlay.apr1 .apr1-next-body{min-width:0;flex:1}
#apOverlay.apr1 .apr1-next-body .lbl{
  margin:0 0 2px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);font-weight:700}
#apOverlay.apr1 .apr1-next-body h3{margin:0 0 10px;font-size:.95rem;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
#apOverlay.apr1 .apr1-next-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#apOverlay.apr1 .apr1-next-go{
  min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-weight:650;border:0;cursor:pointer}
#apOverlay.apr1 .apr1-next-cancel{
  min-height:40px;padding:0 14px;border-radius:var(--r-pill);
  background:transparent;color:var(--ink);border:1px solid var(--line);cursor:pointer;font-weight:600}

#apOverlay.apr1 .ap-status{margin:0;padding:0 16px;color:var(--muted);font-size:13px;background:transparent}
#apOverlay.apr1 .ap-status:empty{display:none}

@media (prefers-reduced-motion:reduce){
  #apOverlay.apr1, #apOverlay.apr1 *{transition:none !important;animation:none !important}
  #apOverlay.apr1[data-apr1-theme="light"] .apr1-sheen{animation:none}
}
@media (max-width:720px){
  #apOverlay.apr1 .ap-top,
  #apOverlay.apr1 .apr1-rail,
  #apOverlay.apr1 .apr1-next{
    backdrop-filter:none;-webkit-backdrop-filter:none}
  #apOverlay.apr1[data-apr1-theme="light"] .ap-top,
  #apOverlay.apr1[data-apr1-theme="light"] .apr1-rail,
  #apOverlay.apr1[data-apr1-theme="light"] .apr1-next{background-color:rgba(255,252,249,.96)}
  #apOverlay.apr1 .ap-links{display:none}
  #apOverlay.apr1 .ap-exit-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  #apOverlay.apr1 #apExit{padding:0;width:44px;flex:0 0 44px}
  #apOverlay.apr1 .ap-course,#apOverlay.apr1 #apCourse{font-size:.88rem}
  #apOverlay.apr1 .ap-ls{flex-wrap:wrap;min-height:0;row-gap:6px}
  #apOverlay.apr1 .ap-ls-l{display:none}
  #apOverlay.apr1 .ap-hprog,#apOverlay.apr1 #apHprog{min-width:56px;width:64px}
}
@media (max-width:390px){
  #apOverlay.apr1{--rail-h:100px}
}

/* 5. Donate / PWYW heart — bottom corner, 44px, never over the lesson card */
html[data-apr1] .apr1-dock-donate,
html[data-apr1] .amaador-support-trigger,
html[data-apr1] .amaador-support-rail,
html[data-apr1] .amaador-support-controls,
html[data-apr1] [class*="donate-float"],
html[data-apr1] [class*="donate-fab"],
html[data-apr1] .dfab-donate,
html[data-apr1] a.mp-donate:not(.mp-donate--bar):not(.mp-donate--foot),
html[data-apr1] .sc-float{
  position:fixed !important;
  inset-inline-end:16px !important;inset-inline-start:auto !important;
  top:auto !important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--ap-donate-lift, 0px)) !important;
  width:44px !important;height:44px !important;min-width:44px !important;min-height:44px !important;
  max-width:44px !important;max-height:44px !important;
  padding:0 !important;border-radius:14px !important;
  z-index:2147483100 !important;
  box-sizing:border-box !important;
}
html[data-apr1] #apOverlay.apr1{--ap-donate-lift:0px}
@media (max-width:899px){
  html[data-apr1] #apOverlay.apr1,
  html[data-apr1]{--ap-donate-lift:96px}
}


/* 11. Premium player polish */
#apOverlay.apr1{--space:8px}
#apOverlay.apr1::after{
  content:"";pointer-events:none;position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0,0,0,.35) 100%);
}
#apOverlay.apr1[data-apr1-theme="light"]::after{
  background:radial-gradient(120% 80% at 50% 0%, transparent 45%, rgba(26,22,48,.08) 100%);
}
#apOverlay.apr1 .ap-top{
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
}
#apOverlay.apr1 .ap-prog i,#apOverlay.apr1 .ap-hprog i,#apOverlay.apr1 #apHprog i{
  background:linear-gradient(90deg, var(--accent-bright), var(--accent), #E8C56B) !important;
}
#apOverlay.apr1[data-apr1-theme="light"] .ap-prog i,
#apOverlay.apr1[data-apr1-theme="light"] .ap-hprog i,
#apOverlay.apr1[data-apr1-theme="light"] #apHprog i{
  background:linear-gradient(90deg, var(--accent-bright), var(--accent)) !important;
}
#apOverlay.apr1 .ap-stage{animation:apr1-stage-in .2s var(--ease) both;border-radius:16px}
@keyframes apr1-stage-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  #apOverlay.apr1 .ap-stage{animation:none}
}
#apOverlay.apr1 .ap-choice,
#apOverlay.apr1 .ap-q label,
#apOverlay.apr1 fieldset.ap-q label{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 80%, transparent);color:var(--ink);
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
  cursor:pointer;
}
#apOverlay.apr1 .ap-choice:hover,
#apOverlay.apr1 .ap-q label:hover,
#apOverlay.apr1 fieldset.ap-q label:hover{
  border-color:color-mix(in srgb,var(--accent) 55%, var(--line));
  background:color-mix(in srgb,var(--accent) 10%, var(--paper));
}
#apOverlay.apr1 .ap-q label:has(input:checked):not(.is-right):not(.is-wrong),
#apOverlay.apr1 .ap-choice:has(input:checked):not(.is-right):not(.is-wrong){
  border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%, transparent);
}
#apOverlay.apr1 .ap-choice.is-right,
#apOverlay.apr1 .ap-q label.is-right{
  background:color-mix(in srgb,#1B7A45 18%, var(--paper)) !important;
  border-color:#1B7A45 !important;color:var(--ink) !important;
}
#apOverlay.apr1 .ap-choice.is-wrong,
#apOverlay.apr1 .ap-q label.is-wrong{
  background:color-mix(in srgb,#C4453C 16%, var(--paper)) !important;
  border-color:#C4453C !important;color:var(--ink) !important;
}
#apOverlay.apr1 .ap-choice.is-right::after,
#apOverlay.apr1 .ap-q label.is-right::after{
  content:"";flex:0 0 18px;width:18px;height:18px;margin-inline-start:auto;align-self:center;
  background:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B7A45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.2l3.2 3.2L13 4.6'/></svg>");
}
#apOverlay.apr1 .ap-choice.is-wrong::after,
#apOverlay.apr1 .ap-q label.is-wrong::after{
  content:"";flex:0 0 18px;width:18px;height:18px;margin-inline-start:auto;align-self:center;
  background:no-repeat center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C4453C' stroke-width='1.8' stroke-linecap='round'><path d='M4 4l8 8M12 4L4 12'/></svg>");
}
#apOverlay.apr1 .apr1-keys{
  margin:0;padding:0 var(--space);font-size:.68rem;letter-spacing:.04em;color:var(--muted);
  white-space:nowrap;flex:0 0 auto;
}
@media (max-width:720px){
  #apOverlay.apr1 .apr1-keys{display:none}
}

/* 10. Course overview — Netflix-style title page */
#trainingApp.apr1-gate{
  --ease:cubic-bezier(.22,1,.36,1);
  --bg:#0B1020; --bg-deep:#070A14; --ink:#F4F0E8; --muted:#B7B1C4;
  --line:rgba(244,240,232,.10); --paper:#14182A; --accent:#C8962E;
  --accent-ink:#1A1630; --accent-bright:#E8C56B;
  --tint:color-mix(in srgb,var(--accent) 20%, var(--paper));
  color-scheme:dark;color:var(--ink);background:transparent;
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  display:block;max-width:none;width:100%;padding:0;margin:0;
}
#trainingApp.apr1-gate[data-apr1-theme="light"]{
  color-scheme:light;
  --bg:#F6F2EC; --bg-deep:#F3EFE8; --ink:#1A1630; --muted:#5C5668;
  --line:rgba(26,22,48,.10); --paper:#FFFCF8; --accent:#A67C1C;
  --accent-ink:#1A1630; --accent-bright:#8A5A12;
  --tint:color-mix(in srgb,var(--accent) 16%, var(--paper));
}
html[data-apr1-overview] .wrap.tr-stage,
html[data-apr1-overview] #trainingApp.apr1-gate{max-width:none}
html[data-apr1-overview] body{background:var(--bg,#0B1020)}
#trainingApp.apr1-gate .apr1-hero{
  position:relative;min-height:70vh;display:flex;align-items:flex-end;
  padding:48px 28px 40px;padding-top:max(48px, env(safe-area-inset-top));
  overflow:hidden;border-radius:0;color:var(--ink);
}
#trainingApp.apr1-gate .apr1-hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--bg-deep);
}
#trainingApp.apr1-gate .apr1-hero-bg img{
  position:absolute;inset-inline-end:-8%;top:-10%;width:min(72vw,920px);height:120%;
  object-fit:contain;object-position:center right;opacity:.42;filter:saturate(.9);
}
#trainingApp.apr1-gate[dir="rtl"] .apr1-hero-bg img,
#trainingApp.apr1-gate[dir="rtl"] .apr1-hero-bg{ } /* logical end already */
#trainingApp.apr1-gate[dir="rtl"] .apr1-hero-bg img{inset-inline-end:-8%;object-position:center left}
#trainingApp.apr1-gate .apr1-hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--bg-deep) 0%, color-mix(in srgb,var(--bg-deep) 82%, transparent) 42%, color-mix(in srgb,var(--bg-deep) 35%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg-deep) 20%, transparent) 0%, var(--bg-deep) 100%);
}
#trainingApp.apr1-gate[dir="rtl"] .apr1-hero-shade{
  background:
    linear-gradient(270deg, var(--bg-deep) 0%, color-mix(in srgb,var(--bg-deep) 82%, transparent) 42%, color-mix(in srgb,var(--bg-deep) 35%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb,var(--bg-deep) 20%, transparent) 0%, var(--bg-deep) 100%);
}
#trainingApp.apr1-gate[data-apr1-theme="light"] .apr1-hero-bg img{opacity:.28}
#trainingApp.apr1-gate .apr1-hero-copy{
  position:relative;z-index:1;max-width:720px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
#trainingApp.apr1-gate .apr1-kicker{
  margin:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent-bright);
}
#trainingApp.apr1-gate .tr-hero-h,
#trainingApp.apr1-gate .apr1-hero-copy h1{
  margin:0;font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.12;letter-spacing:-.03em;font-weight:800;color:var(--ink) !important;
  max-width:18ch;
}
#trainingApp.apr1-gate .apr1-meta,
#trainingApp.apr1-gate .tr-course-facts{
  display:flex;flex-wrap:wrap;gap:8px 14px;margin:0;padding:0;background:none;border:0;box-shadow:none;
}
#trainingApp.apr1-gate .tr-course-facts span,
#trainingApp.apr1-gate .apr1-meta span{
  display:inline-flex;flex-direction:row;align-items:baseline;gap:6px;
  color:var(--ink);font-size:.9rem;font-weight:650;
}
#trainingApp.apr1-gate .tr-course-facts small{
  color:var(--muted);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
}
#trainingApp.apr1-gate .tr-hero-sub,
#trainingApp.apr1-gate .apr1-syn{
  margin:0;max-width:42rem;font-size:1.05rem;line-height:1.5;color:var(--muted) !important;
}
#trainingApp.apr1-gate .apr1-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px}
#trainingApp.apr1-gate .apr1-cta #trStart,
#trainingApp.apr1-gate .apr1-cta #acStart,
#trainingApp.apr1-gate .apr1-cta .btn-lg,
#trainingApp.apr1-gate .apr1-cta .btn.btn-lg{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 22px;border-radius:999px;border:0 !important;
  background:var(--accent) !important;color:var(--accent-ink) !important;
  font-weight:750;font-size:1.05rem;text-decoration:none !important;cursor:pointer;
}
#trainingApp.apr1-gate .apr1-cta #trChallenge,
#trainingApp.apr1-gate .apr1-cta #acChallenge,
#trainingApp.apr1-gate .apr1-cta #trSummaryBtn,
#trainingApp.apr1-gate .apr1-cta #trHeroSummaryBtn,
#trainingApp.apr1-gate .apr1-cta .btn.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:999px;
  background:transparent !important;color:var(--ink) !important;
  border:1px solid var(--line) !important;font-weight:650;cursor:pointer;
}
#trainingApp.apr1-gate .tr-gatecard,
#trainingApp.apr1-gate .apr1-hero .tr-gate{
  background:color-mix(in srgb,var(--paper) 86%, transparent);border:1px solid var(--line);
  border-radius:16px;padding:16px;color:var(--ink);max-width:520px;
}
#trainingApp.apr1-gate .tr-gatecard h3,
#trainingApp.apr1-gate .tr-gatecard .tr-note,
#trainingApp.apr1-gate .tr-gatecard label{color:var(--ink)}
#trainingApp.apr1-gate .tr-gatecard .tr-note{color:var(--muted)}
#trainingApp.apr1-gate .apr1-below{
  padding:8px 28px 64px;display:flex;flex-direction:column;gap:28px;background:var(--bg-deep);color:var(--ink);
}
#trainingApp.apr1-gate .apr1-below h2,
#trainingApp.apr1-gate .apr1-rail-h,
#trainingApp.apr1-gate .tr-obj h3,
#trainingApp.apr1-gate .tr-res h3,
#trainingApp.apr1-gate .tr-res h4{
  margin:0 0 12px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright);font-weight:700;
}
#trainingApp.apr1-gate .apr1-ep-rail{
  display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 2px 8px;
  scroll-snap-type:x mandatory;scrollbar-width:thin;
}
#trainingApp.apr1-gate .apr1-ep{
  flex:0 0 auto;width:220px;min-height:88px;scroll-snap-align:start;
  display:flex;align-items:center;gap:10px;padding:12px;text-align:start;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);cursor:pointer;font:inherit;
}
#trainingApp.apr1-gate .apr1-ep:hover,#trainingApp.apr1-gate .apr1-ep:focus-visible{
  border-color:var(--accent);
}
#trainingApp.apr1-gate .apr1-ep .n{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--accent-bright);
}
#trainingApp.apr1-gate .apr1-ep .t{
  flex:1;min-width:0;font-size:.85rem;line-height:1.3;font-weight:650;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#trainingApp.apr1-gate .tr-obj,
#trainingApp.apr1-gate .apr1-learn{
  background:transparent;border:0;padding:0;box-shadow:none;color:var(--ink);
}
#trainingApp.apr1-gate .tr-obj ul,
#trainingApp.apr1-gate .apr1-learn ul,
#trainingApp.apr1-gate .tr-obj{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;
}
#trainingApp.apr1-gate .tr-obj h3{grid-column:1/-1}
#trainingApp.apr1-gate .tr-obj li,
#trainingApp.apr1-gate .apr1-learn li,
#trainingApp.apr1-gate .tr-obj p{
  margin:0;padding-inline-start:1.4em;position:relative;color:var(--ink);
  list-style:none;line-height:1.45;
}
#trainingApp.apr1-gate .tr-obj li::before,
#trainingApp.apr1-gate .apr1-learn li::before{
  content:"";position:absolute;inset-inline-start:0;top:.35em;width:12px;height:12px;
  background:no-repeat center/12px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23C8962E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.2l3.2 3.2L13 4.6'/></svg>");
}
#trainingApp.apr1-gate[data-apr1-theme="light"] .tr-obj li::before,
#trainingApp.apr1-gate[data-apr1-theme="light"] .apr1-learn li::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A5A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8.2l3.2 3.2L13 4.6'/></svg>");
}
#trainingApp.apr1-gate .tr-grid2{display:block;grid-template-columns:none}
#trainingApp.apr1-gate .tr-card,
#trainingApp.apr1-gate .card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;color:var(--ink);
  box-shadow:none;transform:none;
}
#trainingApp.apr1-gate .tr-squares{display:none} /* facts already in the hero meta */
#trainingApp.apr1-gate .tr-hero{display:none} /* original art moved */
#trainingApp.apr1-gate .tr-video{display:none} /* replaced by video row / not in hero */
#trainingApp.apr1-gate .tr-res-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
#trainingApp.apr1-gate .tr-res-vid{
  background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--ink);
}
#trainingApp.apr1-gate .ap-video-privacy,
#trainingApp.apr1-gate p.tr-note.ap-video-privacy{
  background:transparent !important;border:0 !important;color:var(--muted) !important;
  font-size:.8rem;padding:0 !important;box-shadow:none !important;
}
#trainingApp.apr1-gate .apr1-vid-play,
#trainingApp.apr1-gate .tr-res-play,
#trainingApp.apr1-gate .tr-res-vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#0a0d16;padding:0;position:relative}
#trainingApp.apr1-gate .apr1-vid-play img,#trainingApp.apr1-gate .tr-res-play img{width:100%;height:100%;object-fit:cover}
#trainingApp.apr1-gate .governance,
#trainingApp.apr1-gate .tr-governance{color:var(--muted);font-size:.85rem}
@media (max-width:720px){
  #trainingApp.apr1-gate .apr1-hero{min-height:auto;padding:28px 16px 28px}
  #trainingApp.apr1-gate .apr1-hero-bg img{width:120%;inset-inline-end:-20%;opacity:.28}
  #trainingApp.apr1-gate .apr1-below{padding:8px 16px 48px}
  #trainingApp.apr1-gate .tr-obj ul,
  #trainingApp.apr1-gate .apr1-learn ul,
  #trainingApp.apr1-gate .tr-obj{grid-template-columns:1fr}
  #trainingApp.apr1-gate .apr1-ep{width:180px}
}
@media (prefers-reduced-motion:reduce){
  #trainingApp.apr1-gate *{transition:none !important;animation:none !important}
}
#trainingApp.apr1-gate:focus-visible,
#trainingApp.apr1-gate a:focus-visible,
#trainingApp.apr1-gate button:focus-visible{
  outline:2px solid var(--accent-bright);outline-offset:3px;
}

#trainingApp.apr1-gate .apr1-ov-theme{
  position:absolute;z-index:2;inset-block-start:16px;inset-inline-end:16px;
  width:44px;height:44px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--paper) 70%, transparent);color:var(--ink);
  border:1px solid var(--line);cursor:pointer;
}
#trainingApp.apr1-gate .apr1-ov-theme .apr1-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#trainingApp.apr1-gate .apr1-ov-theme .apr1-icon-sun{display:block}
#trainingApp.apr1-gate .apr1-ov-theme .apr1-icon-moon{display:none}
#trainingApp.apr1-gate[data-apr1-theme="light"] .apr1-ov-theme .apr1-icon-sun{display:none}
#trainingApp.apr1-gate[data-apr1-theme="light"] .apr1-ov-theme .apr1-icon-moon{display:block}

#trainingApp.apr1-gate .apr1-ep .apr1-thumb{
  position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 18%, var(--paper));
  color:var(--accent-bright);overflow:hidden;
}
#trainingApp.apr1-gate .apr1-ep .apr1-thumb svg{
  width:16px;height:16px;display:block;stroke:currentColor;fill:none;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
#trainingApp.apr1-gate .apr1-ep .apr1-thumb-check{display:none}

/* ---- r4 (kn4): overview gate card ("Before you start" / "Ready to learn") ---- */
#trainingApp.apr1-gate .apr1-hero-copy > .tr-gatecard{order:99 !important;position:static !important;margin:8px 0 0 !important;width:100%;max-width:560px !important}
#trainingApp.apr1-gate .tr-gatecard,
#trainingApp.apr1-gate .tr-gatecard .tr-gate{
  background:color-mix(in srgb,var(--paper) 92%, transparent) !important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line) !important;border-radius:16px !important;box-shadow:0 18px 40px -24px rgba(0,0,0,.55) !important;
  color:var(--ink) !important;
}
#trainingApp.apr1-gate .tr-gatecard .tr-gate{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;-webkit-backdrop-filter:none;backdrop-filter:none}
#trainingApp.apr1-gate .tr-gatecard{padding:18px !important;display:flex !important;flex-direction:column;gap:12px}
#trainingApp.apr1-gate .tr-gatecard h3{margin:0 !important;font-size:1rem !important;font-weight:750;color:var(--ink) !important}
#trainingApp.apr1-gate .tr-gatecard .tr-note,
#trainingApp.apr1-gate .tr-gatecard p,
#trainingApp.apr1-gate .tr-gatecard .tr-gate > div{
  background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
  padding:0 !important;margin:0 !important;color:var(--muted) !important;font-size:.92rem;line-height:1.5;
}
#trainingApp.apr1-gate .tr-gatecard .tr-note b,
#trainingApp.apr1-gate .tr-gatecard .tr-note strong{color:var(--ink) !important}
#trainingApp.apr1-gate .tr-gatecard [style*="border-left"],
#trainingApp.apr1-gate .tr-gatecard .tr-privacy{border:0 !important;border-inline-start:3px solid var(--accent) !important;padding-inline-start:12px !important}
#trainingApp.apr1-gate .tr-gatecard a{color:var(--accent-bright) !important;text-underline-offset:3px}
#trainingApp.apr1-gate .tr-gatecard label{color:var(--ink) !important;font-weight:650;font-size:.85rem}
#trainingApp.apr1-gate .tr-gatecard input[type="text"],
#trainingApp.apr1-gate .tr-gatecard input:not([type]),
#trainingApp.apr1-gate .tr-gatecard input[type="email"],
#trainingApp.apr1-gate .tr-gatecard select{
  background:color-mix(in srgb,var(--ink) 6%, var(--paper)) !important;color:var(--ink) !important;
  border:1px solid color-mix(in srgb,var(--ink) 18%, transparent) !important;border-radius:12px !important;min-height:46px;padding:0 14px !important;box-shadow:none !important;
}
#trainingApp.apr1-gate .tr-gatecard input::placeholder{color:var(--muted);opacity:.8}
#trainingApp.apr1-gate .tr-gatecard input:focus-visible,
#trainingApp.apr1-gate .tr-gatecard select:focus-visible{outline:2px solid var(--accent-bright) !important;outline-offset:2px}
/* learning-mode segmented control */
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode{
  border:0 !important;margin:0 !important;padding:0 !important;min-width:0;display:flex;flex-wrap:wrap;gap:8px;background:transparent !important
}
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode legend{
  float:none;width:100%;padding:0 !important;margin:0 0 6px !important;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-bright) !important
}
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode label.tr-note{
  display:inline-flex !important;align-items:center;gap:8px;min-height:44px;margin:0 !important;padding:0 16px !important;
  border-radius:999px !important;border:1px solid var(--line) !important;background:color-mix(in srgb,var(--ink) 5%, transparent) !important;
  color:var(--ink) !important;font-size:.9rem;font-weight:650;cursor:pointer
}
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode label.tr-note:has(input:checked){
  background:color-mix(in srgb,var(--accent) 22%, transparent) !important;border-color:var(--accent) !important
}
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode input[type="radio"]{accent-color:var(--accent);width:16px !important;height:16px;margin:0}
#trainingApp.apr1-gate .tr-gatecard fieldset.tr-mode #apModeInfo{flex-basis:100%;margin-top:4px !important}
#trainingApp.apr1-gate .tr-gatecard .mt2{display:flex;flex-wrap:wrap;gap:10px;margin:0 !important}
#trainingApp.apr1-gate .tr-gatecard .btn,
#trainingApp.apr1-gate .tr-gatecard button:not(.theme-toggle){border-radius:999px !important;min-height:44px}
/* hero title readable in both themes */
#trainingApp.apr1-gate .apr1-hero-copy .tr-hero-h{color:var(--ink) !important;opacity:1 !important;text-shadow:0 2px 24px color-mix(in srgb,var(--bg-deep) 60%, transparent)}
@media (min-width:1100px){
  #trainingApp.apr1-gate .apr1-hero{align-items:center}
  #trainingApp.apr1-gate .apr1-hero-copy{max-width:1180px;width:100%;display:grid !important;grid-template-columns:minmax(0,1fr) minmax(340px,440px);column-gap:40px;align-items:start}
  #trainingApp.apr1-gate .apr1-hero-copy > *{grid-column:1}
  #trainingApp.apr1-gate .apr1-hero-copy > .tr-gatecard{grid-column:2;grid-row:1 / span 6;margin:0 !important;align-self:center}
}
html body #trainingApp.apr1-gate .apr1-hero-copy > .tr-gatecard.card{background:color-mix(in srgb,var(--paper) 92%, transparent) !important}
html body #trainingApp.apr1-gate .tr-gatecard .tr-gate{display:flex !important;flex-direction:column;gap:12px}
#trainingApp.apr1-gate .tr-course-facts > *,
#trainingApp.apr1-gate .apr1-meta > *{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;min-height:0 !important;border-radius:0 !important}
#trainingApp.apr1-gate .tr-course-facts{gap:6px 18px !important}
#trainingApp.apr1-gate .tr-course-facts > * + *{padding-inline-start:18px !important;border-inline-start:1px solid var(--line) !important}
/* re-assert palette on descendants: legacy sheets redefine --ink/--paper/--muted on inner nodes */
#trainingApp.apr1-gate :is(.apr1-hero,.apr1-hero *,.apr1-below,.apr1-below *){
  --bg:#0B1020; --bg-deep:#070A14; --ink:#F4F0E8; --muted:#B7B1C4;
  --line:rgba(244,240,232,.12); --paper:#14182A; --accent:#C8962E; --accent-ink:#1A1630; --accent-bright:#E8C56B;
}
#trainingApp.apr1-gate[data-apr1-theme="light"] :is(.apr1-hero,.apr1-hero *,.apr1-below,.apr1-below *){
  --bg:#F6F2EC; --bg-deep:#F3EFE8; --ink:#1A1630; --muted:#5C5668;
  --line:rgba(26,22,48,.12); --paper:#FFFCF8; --accent:#A67C1C; --accent-ink:#1A1630; --accent-bright:#8A5A12;
}
#trainingApp.apr1-gate .apr1-hero-copy :is(.tr-course-facts,.apr1-meta) *{color:var(--ink) !important}
#trainingApp.apr1-gate .apr1-hero-copy :is(.tr-course-facts,.apr1-meta) small{color:var(--muted) !important}
/* beat mp-shell's :root:not(#mp0):not(#mp1) body … (2 IDs) */
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .apr1-hero-copy .tr-hero-h,
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .apr1-hero-copy h1,
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .tr-gatecard h3{color:var(--ink) !important;-webkit-text-fill-color:currentColor}
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .apr1-hero-copy > .tr-gatecard{
  background:color-mix(in srgb,var(--paper) 92%, transparent) !important;background-color:color-mix(in srgb,var(--paper) 92%, transparent) !important;color:var(--ink) !important}
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .tr-gatecard .tr-gate{background:transparent !important;background-color:transparent !important}
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .apr1-below :is(.card,.tr-card){background:var(--paper) !important;background-color:var(--paper) !important;color:var(--ink) !important;border:1px solid var(--line) !important}
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .apr1-below :is(h2,h3,h4){color:var(--accent-bright) !important}
:root:not(#apr4a):not(#apr4b) body #trainingApp.apr1-gate .tr-gatecard :is(input:not([type="radio"]):not([type="checkbox"]),select,textarea){
  background:color-mix(in srgb,var(--ink) 7%, var(--paper)) !important;background-color:color-mix(in srgb,var(--ink) 7%, var(--paper)) !important;
  color:var(--ink) !important;border:1px solid color-mix(in srgb,var(--ink) 20%, transparent) !important;border-radius:12px !important}
/* ===== r4b (1031ky): full-screen lesson + legacy-proof overlay ===== */
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1{--apr4-fg:#F4F0E8;--apr4-mut:#B7B1C4;--apr4-card:#14182A;--apr4-line:rgba(244,240,232,.12);--apr4-acc:#C8962E;--apr4-accb:#E8C56B}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1[data-apr1-theme="light"]{--apr4-fg:#1A1630;--apr4-mut:#5C5668;--apr4-card:#FFFCF8;--apr4-line:rgba(26,22,48,.12);--apr4-acc:#A67C1C;--apr4-accb:#8A5A12}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-body{grid-template-columns:clamp(240px,20vw,320px) minmax(0,1fr) !important;min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px)}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-outline{position:sticky;top:0;align-self:start;max-height:calc(100dvh - 80px);overflow:auto;width:auto !important;max-width:none !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-player{padding:clamp(14px,2vw,28px) clamp(14px,2.4vw,40px) !important;align-items:stretch !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-player > *{max-width:none !important;width:100% !important;margin-inline:0 !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage{max-width:none !important;width:100% !important;min-height:calc(100dvh - 210px);padding:clamp(20px,2.6vw,44px) clamp(20px,3vw,56px) !important;
  background:var(--apr4-card) !important;color:var(--apr4-fg) !important;border:1px solid var(--apr4-line) !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(p,li,td,span:not([class*="icon"])){font-size:clamp(16px,1.05vw,19px)}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(h1,h2,h3,h4){color:var(--apr4-fg) !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(p,li){color:var(--apr4-fg) !important;max-width:none}
/* card grids scale with the width */
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .tr-pictos{grid-template-columns:repeat(auto-fit,minmax(min(170px,44%),1fr)) !important;gap:14px !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .tr-squares{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;gap:14px !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is([class*="grid"],[class*="cards"],[class*="steps"],[class*="pdca"]):not(.tr-pictos):not(.tr-squares){max-width:none !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(.tr-pictos > *,.tr-sq,.card,[class*="-card"]:not([class*="-card-"]),.tr-step,.tr-pdca > *){
  background:color-mix(in srgb,var(--apr4-fg) 6%, var(--apr4-card)) !important;color:var(--apr4-fg) !important;border:1px solid var(--apr4-line) !important;border-radius:14px !important;box-shadow:none !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(.tr-sq b,.tr-sq strong){color:var(--apr4-accb) !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage :is(.tr-sq span,.tr-pictos small){color:var(--apr4-mut) !important}
/* speed select readable */
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 :is(#apLsRate,.ap-ls-r select){background-color:color-mix(in srgb,var(--apr4-fg) 8%, transparent) !important;color:var(--apr4-fg) !important;border:1px solid var(--apr4-line) !important;border-radius:10px !important;min-width:72px;height:36px;padding:0 28px 0 10px !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 :is(#apLsRate,.ap-ls-r select) option{background:var(--apr4-card);color:var(--apr4-fg)}
/* real fullscreen: overlay fills the screen */
#apOverlay.apr1:fullscreen{width:100vw;height:100vh;overflow:auto;background:var(--apr4-card,#0B1020)}
#apOverlay.apr1:fullscreen .ap-body{min-height:calc(100vh - 80px)}
@media (max-width:860px){:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-body{grid-template-columns:minmax(0,1fr) !important}
 :root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-outline{position:static;max-height:none}
 :root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage{min-height:0}}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-stage .tr-pictos > * *{color:var(--apr4-fg) !important;opacity:1 !important}
:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-outline{min-height:calc(100dvh - 80px)}
@media (max-width:860px){:root:not(#apr4a):not(#apr4b) body #apOverlay.apr1 .ap-outline{min-height:0}}