/* Светлый режим «Кинотеатра». Включается <html data-theme="light" data-light="N"> поверх уровня цвета 3.
   1 — «Днём в кинотеатре»: страница светлая, экран-плеер и шапка над ним остаются тёмными
   2 — «Сиреневый день»: всё светлое, фон и экран в светлой сирени
   3 — «Белая бумага»: всё светлое и нейтральное, сирень только акцентом
   Правило лайма на светлом: лайм — только заливка (кнопка, плашка, маркер под цифрой) с тёмным текстом.
   Лаймовый текст и тонкие лаймовые линии на светлом не читаются — там вместо них глубокая сирень. */

/* ── общие светлые цвета ── */
html[data-theme="light"][data-mix]{
  color-scheme:light;
  --t:#16131F; --t2:rgba(22,19,31,.74); --t3:rgba(22,19,31,.6);
  --ln:rgba(22,19,31,.1); --ln2:rgba(22,19,31,.18);
  --svet:#5F47CF; --svet-gl:#B9A7FF; --svet-10:rgba(95,71,207,.07); --svet-20:rgba(95,71,207,.13);
  --mot:#7A62E4; --mot-ink:#FFFFFF; --mot-glow:rgba(122,98,228,.28);
  --akt:#D6FA55; --akt-ink:#101208; --akt-hover:#CCF23E;
  --kadr-pust:rgba(95,71,207,.16);
  --kap-ink:#4A35B5;
}
html[data-theme="light"][data-light="1"][data-mix]{--zal:#F4F2EE; --zal-gl:#ECE9E3; --s1:#FFFFFF; --s2:#F3F0F8; --s3:#E6E1F2}
html[data-theme="light"][data-light="2"][data-mix]{--zal:#EEEAF9; --zal-gl:#E5DFF6; --s1:#FFFFFF; --s2:#F7F4FE; --s3:#E5DEF8}
html[data-theme="light"][data-light="3"][data-mix]{--zal:#FAF9F6; --zal-gl:#F1EEE8; --s1:#FFFFFF; --s2:#F5F2EC; --s3:#E9E5DD}

/* ── 1: экран и шапка над ним остаются тёмными (значения тёмного уровня 3) ── */
html[data-theme="light"][data-light="1"] :is(.ekran,.gl .verh,.tel .verh-t){
  --zal:#0F0B1C; --zal-gl:#0A0714; --s1:#1A1430; --s2:#241C42; --s3:#302658;
  --t:#EDE8E0; --t2:rgba(237,232,224,.72); --t3:rgba(237,232,224,.6);
  --ln:rgba(185,167,255,.15); --ln2:rgba(185,167,255,.28);
  --svet:#B9A7FF; --svet-gl:#6E5AD8; --svet-10:rgba(185,167,255,.1); --svet-20:rgba(185,167,255,.2);
  --mot:#B9A7FF; --mot-ink:#140F26; --mot-glow:rgba(185,167,255,.34);
  --kadr-pust:rgba(185,167,255,.3); --kap-ink:#E6DEFF;
  color:var(--t);
}
html[data-theme="light"][data-light="1"] .urok .ekran{box-shadow:0 40px 70px -34px rgba(22,19,31,.55),inset 0 0 0 1px rgba(185,167,255,.35)}
html[data-theme="light"][data-light="1"] .otsvet{opacity:.5}

/* ── 2 и 3: светлый экран ── */
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .kadr{background:
  radial-gradient(60% 95% at 84% 100%,rgba(185,167,255,.55),rgba(185,167,255,0) 62%),
  radial-gradient(45% 60% at 60% 0%,rgba(185,167,255,.22),rgba(185,167,255,0) 70%),var(--zal-gl)}
html[data-theme="light"][data-light="3"] .kadr{background:
  radial-gradient(55% 90% at 86% 100%,rgba(185,167,255,.38),rgba(185,167,255,0) 62%),var(--zal-gl)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .ekran::after{background:
  linear-gradient(90deg,var(--zal-gl) 0%,color-mix(in srgb,var(--zal-gl) 70%,transparent) 30%,transparent 52%),
  linear-gradient(0deg,color-mix(in srgb,var(--zal-gl) 85%,transparent) 0%,transparent 24%)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .tel .ekran::after{background:linear-gradient(0deg,var(--zal-gl) 0%,color-mix(in srgb,var(--zal-gl) 82%,transparent) 42%,transparent 66%)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .ekran{box-shadow:inset 0 0 0 1px rgba(95,71,207,.18)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .urok .ekran{box-shadow:0 30px 60px -36px rgba(60,40,140,.35),inset 0 0 0 1px rgba(95,71,207,.18)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .otsvet{opacity:.35}
/* шкала на светлом экране: досмотренное — глубокая сирень, бегунок лаймовый с тёмным кантом */
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .shkala span{background:rgba(22,19,31,.13)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .shkala span.vse,
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .shkala span.chast::before{background:var(--svet)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .shkala .golova{background:var(--akt);box-shadow:0 0 0 3px #FFFFFF,0 3px 10px rgba(60,40,140,.28)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .pult .kn-vt{background:rgba(22,19,31,.07);color:var(--t);box-shadow:inset 0 0 0 1px var(--ln2)}
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .gl .pult .glava,
html[data-theme="light"]:is([data-light="2"],[data-light="3"]) .glava-sey{box-shadow:0 4px 14px -6px rgba(60,40,140,.35)}

/* ── шапка, капсулы, кнопки ── */
html[data-theme="light"] .kapsula{background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px var(--ln2)}
html[data-theme="light"] .kapsula a:hover{background:var(--svet-10)}
html[data-theme="light"][data-mix] .kapsula a[aria-current],
html[data-theme="light"][data-mix] .tab-kapsula a[aria-current]{background:var(--svet-20);color:var(--kap-ink)}
html[data-theme="light"][data-light="1"] :is(.gl .verh) .kapsula{background:rgba(0,0,0,.22)}
html[data-theme="light"] .tab-kapsula{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px var(--ln2),0 14px 30px -14px rgba(22,19,31,.35)}
html[data-theme="light"] .kn-tiho{color:var(--t2)}
html[data-theme="light"] .kn-akt{box-shadow:0 8px 22px -12px rgba(120,150,0,.7)}
html[data-theme="light"] .ava{background:var(--s3);color:var(--t)}
html[data-theme="light"] .svet-tumbler .rychag{background:var(--s3)}

/* ── поверхности ── */
html[data-theme="light"] .shtorka{box-shadow:0 -18px 40px -26px rgba(22,19,31,.28),inset 0 1px 0 var(--ln)}
html[data-theme="light"] :is(.blok,.chasti,.mini-zad,.zad-uroka,.sled-mini,.sled){box-shadow:inset 0 0 0 1px var(--ln)}
html[data-theme="light"] .blok{background:var(--s1)}
html[data-theme="light"] .poster{background:linear-gradient(180deg,var(--s2),var(--s1) 70%)}
html[data-theme="light"] .poster:hover{box-shadow:inset 0 0 0 1px var(--ln2),0 18px 40px -22px rgba(22,19,31,.35)}
html[data-theme="light"] .chasti li a:hover{background:var(--svet-10)}
html[data-theme="light"][data-mix] .chasti li.sey a{background:var(--svet-10);box-shadow:inset 3px 0 0 var(--svet)}
html[data-theme="light"][data-mix] .chasti li.sey .eq i{background:var(--svet)}
html[data-theme="light"] .materialy .ik{background:var(--svet-10)}
html[data-theme="light"] .vopros{background:var(--s1)}
html[data-theme="light"][data-mix] :is(.chtenie h2,.razdel-sh .h2){color:#3E2C9E}

/* ── лайм на светлом: только заливкой ── */
html[data-theme="light"][data-mix] :is(.yach .glavnoe .cifra,.zadanie .schet .cifra,.mini-zad .verhstr b,.okup .cifra,.poster.sey .n){
  color:var(--akt-ink);background:var(--akt);border-radius:.22em;padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
html[data-theme="light"][data-mix] .etapy i.sey{background:var(--akt);box-shadow:none}
html[data-theme="light"][data-mix] .galki i.razbor{background:var(--akt);box-shadow:none}
html[data-theme="light"] .poster.sey{box-shadow:inset 0 0 0 2px var(--svet)}
html[data-theme="light"] .poster.sey .pr::before{background:var(--svet)}
html[data-theme="light"] .etap li.sey b{color:var(--svet);font-weight:600}

/* переключатель «Свет погашен» на уроке — это и есть переключатель режима: в светлом он включён */
html[data-theme="light"] .svet-tumbler{font-size:0;gap:10px}
html[data-theme="light"] .svet-tumbler::before{content:"Свет включён";font-size:14px;order:1}
html[data-theme="light"] .svet-tumbler .i{order:0}
html[data-theme="light"] .svet-tumbler .rychag{order:2;background:var(--svet)}
html[data-theme="light"] .svet-tumbler .rychag::after{left:auto;right:3px;background:var(--akt)}
/* лаймовый маркер под номером текущего урока — по ширине цифр */
html[data-theme="light"][data-mix] .poster.sey .n{display:inline-block;align-self:flex-start}