/* «Светлая обложка» (22.10, Алина), ключ svetlyj: светлая основа, надпись сверху в светлом баннере:
   синяя плашка, мягкое синее свечение, 3D-ракета справа. */
/* Основа светлых стилей (22.10, дизайн Алины): то же, что «Графит», только светлое. Своей кнопки в переключателе нет:
   её подключают «Светлая обложка» (tema-svetlyj.css) и остальные tema-svetlyj-<вариант>.css. Светло-серый фон в точку с тонкой сеткой линий,
   белые плашки с тонкой рамкой и мягкой тенью, синий акцент, широкий шрифт с обложек уроков Михаила.
   Вся раскладка берётся из tema-grafit.css, здесь только цвета и тени. Правила через [class*=tema-svetlyj], чтобы их брали все светлые варианты. */
/* Стиль «Графит» (22.10, дизайн Алины): чёрный фон в точку с тонкой сеткой линий, графитовые плашки с тонкой рамкой,
   синий акцент и широкий шрифт с обложек уроков Михаила. Ориентиры: панель AI Room Club и обложка «Урок 08».
   Ложится поверх vid.css только на страницах ученика (html.uch.tema-grafit). Своей кнопки в переключателе у него нет (22.10 Алина выбрала светлые): его подключает светлая основа
   tema-svetlyj-baza.css, а её светлые варианты, и меняют своё: поэтому правила написаны через :is([class*=tema-grafit],[class*=tema-svetlyj]). Разметка та же, меняется вид.
   Шрифты свои, в static/fonts: Inter (OFL) для текста, Unbounded (OFL) для больших надписей.
   Баннер с фото здесь не показан: вместо него большая надпись из заголовка страницы (h1.sr, текст баннера из настроек). */

@font-face{font-family:"Inter";src:url(../fonts/inter-cyrillic-wght-normal.woff2?v=76a42fc0d029) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-wght-normal.woff2?v=dbb5776d6b90) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

html.uch:is([class*=tema-grafit],[class*=tema-svetlyj]){
  --bg:#0A0A0A; --card:#171717; --card-2:#121212; --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.13);
  --ink:#F5F5F5; --soft:#C9C9C9; --muted:#8F8F8F; --dim:#6E6E6E;
  --acc:#5B8CFF; --acc-hi:#7DA4FF; --acc-ink:#050A1C; --acc-text:#8DAEFF; --acc-wash:rgb(var(--acc-rgb) / .12); --acc-line:rgb(var(--acc-rgb) / .4);
  --acc-rgb:91 140 255; --hi-rgb:125 164 255; --glow-rgb:70 110 255;
  --sq-grad:linear-gradient(145deg,#D6E1FF 0%,#8FB0FF 45%,#5B8CFF 100%); --fill-grad:linear-gradient(180deg,#5786FA,#3762DC); --fill-ink:#fff;
  --btn-grad:linear-gradient(180deg,#B9CCFF 0%,#7DA4FF 50%,#5B8CFF 100%); --btn-grad-hi:linear-gradient(180deg,#C9D8FF 0%,#8FB0FF 50%,#6B97FF 100%);
  --set:url(../img/vid/set-grafit.svg?v=fccebde908d3);
  --blue:var(--acc); --blue-2:var(--acc-text); --blue-line:var(--acc-line); --blue-ink:var(--acc-ink); --blue-wash:var(--acc-wash);
  --sky:var(--acc); --sky-hi:var(--acc-hi); --sky-lo:var(--acc); --sky-edge:var(--acc); --sky-ink:var(--acc-ink);
  --green:#5BD69A; --green-wash:rgba(91,214,154,.1); --amber:#F2BA60; --amber-wash:rgba(242,186,96,.1);
  --red:#FF8A84; --red-wash:rgba(255,138,132,.09); --black:#0A0A0A;
  --f-t:"Inter",-apple-system,"SF Pro Text",system-ui,sans-serif;
  --f-d:"Unbounded","Inter",system-ui,sans-serif;
  --f-body:var(--f-t);
  --r-card:24px;
  color-scheme:dark;
  background:#0A0A0A;
}
html.uch:is([class*=tema-grafit],[class*=tema-svetlyj]) body{background:transparent;color:var(--ink);font-family:var(--f-t)}
/* фон: синее свечение слева сверху (как на обложках), точки и тонкая сетка линий справа; стоит на месте */
html.uch:is([class*=tema-grafit],[class*=tema-svetlyj]) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 520px at 8% -12%,rgb(var(--glow-rgb) / .24),transparent 68%),
    radial-gradient(600px 420px at 100% 0%,rgb(var(--glow-rgb) / .07),transparent 70%),
    #0A0A0A}
html.uch:is([class*=tema-grafit],[class*=tema-svetlyj]) body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--set) right -60px top 40px/min(1200px,90vw) auto no-repeat,
    radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1.5px) 0 0/24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.3) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.3) 100%)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) ::selection{background:rgb(var(--acc-rgb) / .35);color:#fff}
:is([class*=tema-grafit],[class*=tema-svetlyj]) :focus-visible{outline-color:var(--acc)}

/* ---------- текст: заголовки широким шрифтом строчными (как «Обзор школы» у Ковальской), подписи разрядкой ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) h1,:is([class*=tema-grafit],[class*=tema-svetlyj]) h2,:is([class*=tema-grafit],[class*=tema-svetlyj]) .display{font-family:var(--f-d);font-weight:600;text-transform:none;letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) h1{font-size:clamp(28px,3vw,42px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) h2{font-size:clamp(22px,2.2vw,30px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) h3{font-family:var(--f-d);font-weight:600;letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose h2,:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose h3{font-family:var(--f-d);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .auth-box h1{font-size:clamp(28px,5vw,38px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-head h1{font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.025em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-h1{font-size:clamp(28px,3.4vw,40px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-group-h h2{font-size:clamp(20px,2vw,26px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .stat-big{font-family:var(--f-d);font-weight:600;font-size:44px;letter-spacing:-.04em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .stat-of{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .eyebrow,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-eb{display:flex;align-items:center;gap:12px;font:500 10.5px/1.3 var(--f-d);letter-spacing:.18em;text-transform:uppercase}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .eyebrow::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-eb::before{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .eyebrow{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .eyebrow.blue,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-eb{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mats h3{display:flex;align-items:center;gap:12px;margin-bottom:14px;font:500 10.5px/1.3 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mats h3::before{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lead{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lead b{color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .muted{color:var(--muted)}

/* синяя плашка, как «Урок 08» на обложке: над заголовком модуля и урока */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .eyebrow.blue{display:inline-flex;margin:0 0 18px;padding:10px 16px 9px;border-radius:12px;
  font:700 14px/1.15 var(--f-d);letter-spacing:0;text-transform:none;color:var(--acc-ink);background:var(--acc);
  box-shadow:0 0 0 1px rgb(var(--hi-rgb) / .5),0 14px 50px -12px rgb(var(--acc-rgb) / .7)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .eyebrow.blue::before{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head h1{font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}

/* ---------- кнопки: синие таблетки, как «Вступить» на референсе ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn{font:600 15px/1 var(--f-t);letter-spacing:0;text-transform:none;color:var(--acc-ink);border-radius:999px;padding-inline:24px;
  background:var(--acc);box-shadow:none;transition:background .2s,transform .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn:hover{background:var(--acc-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn:active{transform:scale(.98)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn.small{font-size:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn.ghost{background:transparent;color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn.ghost:hover{background:rgba(255,255,255,.06)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn.done{background:var(--green-wash);color:var(--green);border:0;box-shadow:inset 0 0 0 1px rgba(91,214,154,.32)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .btn.danger{background:var(--red-wash);color:var(--red);border:0;box-shadow:inset 0 0 0 1px rgba(255,138,132,.32)}

/* ---------- общие плашки: графит и тонкая рамка, без стекла и свечений ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .card,:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row,:is([class*=tema-grafit],[class*=tema-svetlyj]) .mat,:is([class*=tema-grafit],[class*=tema-svetlyj]) .pn a,:is([class*=tema-grafit],[class*=tema-svetlyj]) .result,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-quality,
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-tile,:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-links a{background:var(--card);border-color:var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .card{border-radius:var(--r-card)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .card.hi{border-color:var(--acc-line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.mod:hover,:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row:hover,:is([class*=tema-grafit],[class*=tema-svetlyj]) .mat:hover,:is([class*=tema-grafit],[class*=tema-svetlyj]) .pn a:hover{background:#1D1D1D;border-color:rgba(255,255,255,.16)}
/* уроки модуля: строки-плашки с номером в квадратике, как «01» у Ковальской */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row{grid-template-columns:44px minmax(0,1fr) auto;gap:18px;padding:16px 20px 16px 16px;border-radius:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-title,:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-meta{display:block}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-title{font:600 16px/1.35 var(--f-d);letter-spacing:-.025em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-meta{margin-top:4px;font-size:13.5px;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-num{width:44px;height:44px;border:0;border-radius:13px;font:600 14px/1 var(--f-d);color:var(--acc-text);background:var(--acc-wash);
  box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .22)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-num svg{width:20px;height:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-num.done{background:var(--green-wash);color:var(--green);box-shadow:inset 0 0 0 1px rgba(91,214,154,.3)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .l-num.started{color:var(--acc-ink);background:var(--sq-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-right{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:.2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row:hover .l-right{color:var(--acc-ink);background:var(--acc);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-right svg{width:16px;height:16px}
/* «Пройдено» на странице модуля: карточка-цифра со значком */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card{display:flex;align-items:center;gap:18px;min-width:240px;padding:20px 26px 20px 20px;
  --sq-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050A1C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card .eyebrow{margin-bottom:8px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card .eyebrow::before{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card .stat-big{font-size:38px;line-height:1}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .result{border-radius:16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose{color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose a{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose code{background:rgba(255,255,255,.06);border-color:var(--line-2);color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .prose .note{border-left-color:var(--acc);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player{border:0;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -50px rgba(0,0,0,.9)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty{background:radial-gradient(520px 320px at 20% 10%,rgb(var(--acc-rgb) / .18),transparent 70%),#111;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty b{font-family:var(--f-t);text-transform:none;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chip{border-color:var(--line-2);color:var(--soft);background:rgba(255,255,255,.03)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chip.blue{border-color:transparent;color:var(--acc-text);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chip.green{border-color:transparent;color:var(--green);background:var(--green-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chip.amber{border-color:transparent;color:var(--amber);background:var(--amber-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chip.red{border-color:transparent;color:var(--red);background:var(--red-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mat-ico{background:var(--acc-wash);color:var(--acc-text);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .result b{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .crumbs{font-size:14px;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .crumbs a:hover{color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .crumbs span:last-child{color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .dot{border-color:var(--line-2);font-weight:600}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .dot.done{background:var(--green);border-color:var(--green);color:#04220F}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .input,:is([class*=tema-grafit],[class*=tema-svetlyj]) textarea.input,:is([class*=tema-grafit],[class*=tema-svetlyj]) select.input{background:#101010;border-color:var(--line-2);color:var(--ink);border-radius:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .input::placeholder{color:#5E5E5E}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .input:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgb(var(--acc-rgb) / .16)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) input[type=file]{color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) input[type=file]::file-selector-button{margin-right:12px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;font:600 13px/1.2 var(--f-t);
  color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) input[type=file]::-webkit-file-upload-button{margin-right:12px;padding:8px 16px;border:0;border-radius:999px;cursor:pointer;font:600 13px/1.2 var(--f-t);
  color:var(--ink);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-tile.on{border-color:var(--acc-line);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-tile.on .z-tile-n{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-tile.on .z-tile-c{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-tile:hover{border-color:rgba(255,255,255,.18)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-ring .fg,:is([class*=tema-grafit],[class*=tema-svetlyj]) .ring .fg{stroke:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-ring .bg,:is([class*=tema-grafit],[class*=tema-svetlyj]) .ring .bg{stroke:#2E2E2E}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-ring b,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-team-big,:is([class*=tema-grafit],[class*=tema-svetlyj]) .ring-t b{font-family:var(--f-t);font-weight:700;letter-spacing:-.02em;text-transform:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-opt{background:rgba(255,255,255,.025);border-color:var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-opt:hover{border-color:var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-opt:has(input:checked){border-color:var(--acc-line);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-opt input,:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-check input,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-check input{accent-color:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-answer{border-left-color:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-krit{border-radius:14px;border-color:transparent;background:var(--card-2)}
/* в строках заданий и базы знаний справа не стрелка, а статус: кружка нет, ширина по тексту */
:is([class*=tema-grafit],[class*=tema-svetlyj]) :is(.z-mgroup,.g-matl) .lesson-row .l-right,:is([class*=tema-grafit],[class*=tema-svetlyj]) :is(.z-mgroup,.g-matl) .lesson-row:hover .l-right{display:block;width:auto;height:auto;border-radius:0;background:none;box-shadow:none;color:inherit}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-matl .lesson-row .l-right:empty{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-matl .lesson-row .l-right .lock{white-space:nowrap}
/* одинаковый отступ под малой подписью: «Домашнее задание», «Тест после урока», «Телеграм», как у «Пароль» */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-sec:not(.z-qs) > .z-sec-h,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-sec > .eyebrow,:is([class*=tema-grafit],[class*=tema-svetlyj]) .tg-head .eyebrow{margin-bottom:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-who.blue,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-link,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-qa.mine .z-who b{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-result b{font-family:var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-home-ico,:is([class*=tema-grafit],[class*=tema-svetlyj]) .mail-ico{background:var(--acc-wash);border-color:var(--acc-line);color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .mail-ico svg{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .continue{background:var(--acc-wash);border-color:var(--acc-line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .play{background:var(--acc);color:var(--acc-ink);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .logo{font-family:var(--f-d);font-weight:700;font-size:15px;letter-spacing:-.01em;text-transform:none}
/* значок на странице входа тот же, что в полосе слева: завод в синем квадратике, виден и на телефоне */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .logo{gap:12px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .logo-mark{width:40px;height:40px;border-radius:0;background:url(../img/vid/logo-zavod.svg?v=a859a4e294a0) center/contain no-repeat;box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .logo-mark svg{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .big-ico{background:var(--card);border-color:var(--line-2);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .big-ico svg{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .msg{background:var(--card);border-color:var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .msg.mine{background:var(--acc-wash);border-color:var(--acc-line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .msg.author{border-color:rgba(242,186,96,.35)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .msg-src{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chat-form{background:rgba(0,0,0,.25)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .chat-note{background:var(--card);border-color:var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-check{background:rgba(255,255,255,.03);border-color:var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-check:has(input:checked){border-color:var(--acc-line);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-links a:hover{border-color:var(--acc-line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .d-links svg{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-bar{background:#101010;border-bottom:1px solid var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-bar .in{max-width:1320px;margin:0 auto;padding:8px 32px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-bar button,:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-tema a{background:transparent;border-color:var(--line-2);color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-bar button.on,:is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-tema a.on{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .foot{max-width:1320px;margin:0 auto;padding:28px 32px 44px;color:var(--dim);border-top-color:var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .foot-links a{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .foot-links a:hover{color:var(--ink)}

/* ---------- меню слева, как у школы Ковальской: название, «Меню», пункты, активный цветной таблеткой, кружок ученика внизу.
   Обычно свёрнуто в узкую полосу значков и раскрывается с подписями, когда на него наводят. Телефон: нижняя панель ---------- */
/* сплошное длинное слово в названии переносится и не раздвигает страницу; подпись в строке профиля не сжимается длинной почтой */
:is([class*=tema-grafit],[class*=tema-svetlyj]) main{max-width:1320px;margin:0 auto;padding:28px 32px 80px;overflow-wrap:anywhere}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rows .row > .muted{flex:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .page.has-rail{margin-left:92px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail{left:12px;top:12px;bottom:12px;width:68px;align-items:stretch;gap:0;padding:20px 12px 14px;border-radius:22px;overflow:hidden;
  background:#121212;box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.95);transition:width .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within{width:244px;box-shadow:inset 0 0 0 1px var(--line-2),0 40px 90px -20px rgba(0,0,0,.98)}
/* логотип: завод в синем квадратике (img/vid/logo-zavod.svg), справа название и «Обучение». Сам он рисуется стилем, поэтому нажимается прозрачная ссылка поверх, она ведёт на главную */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-logo{position:absolute;z-index:1;left:0;right:0;top:0;height:84px;border-radius:22px 22px 0 0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-logo:focus-visible{outline:2px solid var(--acc);outline-offset:-6px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail::before{content:"Контент-завод";order:0;flex:none;height:40px;padding:1px 0 0 54px;white-space:nowrap;
  font:700 15.5px/22px var(--f-d);letter-spacing:-.01em;color:transparent;
  background:url(../img/vid/logo-zavod.svg?v=a859a4e294a0) 2px 0/40px 40px no-repeat;transition:color .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail::after{content:"Обучение";order:1;margin-top:-15px;padding-left:54px;white-space:nowrap;font:500 10px/1 var(--f-d);letter-spacing:.2em;
  text-transform:uppercase;color:transparent;transition:color .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within::before{color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover::after,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within::after{color:var(--dim)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-new{order:2;display:flex;align-items:center;gap:12px;align-self:stretch;min-width:0;height:44px;margin:22px 0 0;padding:0 10px;
  border-radius:14px;background:var(--red-wash);box-shadow:inset 0 0 0 1px rgba(255,138,132,.22);color:var(--ink);white-space:nowrap}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-new > span:first-child{flex:none;min-width:24px;height:20px;padding:0 7px;border-radius:999px;background:#E5484D;color:#fff;font:600 12px/20px var(--f-t);text-align:center}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-list{order:3;gap:4px;margin-top:26px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-list::before{content:"Меню";height:10px;padding:0 0 12px 12px;white-space:nowrap;font:500 10px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;
  color:transparent;transition:color .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover .rail-list::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within .rail-list::before{color:var(--dim)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-i{display:flex;align-items:center;gap:14px;height:46px;padding:0 0 0 2px;border-radius:14px;white-space:nowrap;color:var(--muted);
  transition:background .2s,color .2s,box-shadow .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-sq,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-i:hover .rail-sq,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-i.on .rail-sq{flex:none;width:40px;height:40px;background:none;box-shadow:none;color:inherit}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-sq svg{width:20px;height:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-tip,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-new .rail-tip{position:static;transform:translateX(-6px);opacity:0;padding:0;background:none;box-shadow:none;border-radius:0;
  pointer-events:none;font:500 15px/1 var(--f-t);color:inherit;transition:opacity .2s,transform .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-new .rail-tip{font-size:13.5px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover .rail-tip,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within .rail-tip{opacity:1;transform:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-i:hover{color:var(--ink);background:rgba(255,255,255,.05)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-i.on{color:var(--fill-ink);background:var(--fill-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 34px -14px rgb(var(--acc-rgb) / .75)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail{overflow:hidden auto;scrollbar-width:none}
/* кружок наверху не нужен: ученик показан внизу, в блоке аккаунта */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-me{display:none}
/* «Полезное»: база знаний, канал, поддержка */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-extra{order:4;display:flex;flex-direction:column;gap:4px;margin-top:22px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-extra::before{content:"Полезное";height:10px;padding:0 0 12px 12px;white-space:nowrap;font:500 10px/1 var(--f-d);
  letter-spacing:.2em;text-transform:uppercase;color:transparent;transition:color .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover .rail-extra::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within .rail-extra::before{color:var(--dim)}
/* аккаунт внизу, как у Ковальской: кружок с буквами, имя, «Профиль и настройки», «Выйти» */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc{order:9;display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:14px;box-shadow:inset 0 1px 0 var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-me{display:flex;align-items:center;gap:12px;padding:4px 0 4px 2px;border-radius:14px;white-space:nowrap;
  text-decoration:none;color:var(--ink);transition:background .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-me:hover{background:rgba(255,255,255,.05)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font:700 13px/1 var(--f-d);color:#0D1430;background:var(--sq-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-t{display:flex;flex-direction:column;gap:3px;min-width:0;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-t b{max-width:150px;overflow:hidden;text-overflow:ellipsis;font:600 14px/1.2 var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc-t small{font:400 12px/1.2 var(--f-t);color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:hover .rail-acc-t,:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail:focus-within .rail-acc-t{opacity:1;transform:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-acc form{margin:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-out{width:100%;border:0;background:none;cursor:pointer;font:inherit;text-align:left}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rail-out:hover{color:var(--red)}

/* ---------- главная ---------- */
/* вместо баннера с фото: большая надпись, как заголовок на обложке урока */
:is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> h1.sr){position:relative;display:flex;flex-direction:column}
:is([class*=tema-grafit],[class*=tema-svetlyj]) main > h1.sr,:is([class*=tema-grafit],[class*=tema-svetlyj]) main > p.sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
:is([class*=tema-grafit],[class*=tema-svetlyj]) main > p.sr{order:0;align-self:flex-start;margin:4px 0 14px;padding:8px 13px 7px;border-radius:10px;
  font:700 11px/1.15 var(--f-d);letter-spacing:.03em;color:var(--acc-ink);background:var(--acc);
  box-shadow:0 0 0 1px rgb(var(--hi-rgb) / .5),0 14px 50px -12px rgb(var(--acc-rgb) / .7)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) main > h1.sr{order:1;max-width:100%;margin:0 0 30px;
  font:900 clamp(34px,4.6vw,72px)/.95 var(--f-d);letter-spacing:-.025em;text-transform:uppercase;color:#F4F5F7}
:is([class*=tema-grafit],[class*=tema-svetlyj]) main > .g-news{order:2}
:is([class*=tema-grafit],[class*=tema-svetlyj]) main > .g-wrap{order:3}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .bn{display:none}

:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-wrap{grid-template-columns:minmax(0,1fr) clamp(300px,24vw,350px);gap:20px 24px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-main,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-side,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-verh{gap:20px}

/* продолжить: главная плашка с синей кромкой и синей кнопкой */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip{color:var(--ink);border-radius:var(--r-card);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
/* значок в квадратике, как у карточек-цифр Ковальской: синий градиент, тёмный рисунок */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay::before{content:"";flex:none;width:52px;height:52px;border-radius:15px;
  background:var(--sq-ico) center/24px 24px no-repeat,var(--sq-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 14px 30px -14px rgb(var(--acc-rgb) / .8)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go{grid-template-columns:auto minmax(0,1fr) auto;padding:24px 26px 24px 24px;gap:22px;
  background:radial-gradient(70% 140% at 0% 0%,rgb(var(--acc-rgb) / .14),transparent 60%),var(--card);
  box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .3);
  --sq-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050A1C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.6L18.5 9.5l-4.6 1.9L12 16l-1.9-4.6L5.5 9.5l4.6-1.9z'/%3E%3Cpath d='M19 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.g-go:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .55)}
/* до старта потока: самый заметный блок главной. Дата из настроек потока, рядом что сделать сейчас */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start{display:flex;align-items:flex-start;gap:22px;padding:28px 28px 26px 24px;border-radius:var(--r-card);color:var(--ink);
  background:radial-gradient(70% 140% at 0% 0%,rgb(var(--acc-rgb) / .14),transparent 60%),var(--card);box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .3),var(--shadow,0 0 0 transparent);
  --sq-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050A1C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10.5h16M8.5 3v4M15.5 3v4'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-t{min-width:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-h{margin:10px 0;font:600 clamp(28px,3.2vw,42px)/1.08 var(--f-d);letter-spacing:-.035em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-s{margin:0;font-size:16px;line-height:1.5;color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-do{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-do li{position:relative;margin:0;padding-left:18px;font-size:15.5px;line-height:1.45;color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-do li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-do a{font-weight:600;color:var(--acc-text);text-decoration:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start-do a:hover{text-decoration:underline}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go-t{gap:8px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go-h{font:600 19px/1.3 var(--f-d);letter-spacing:-.025em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go-s{font-size:14px;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go-mesto{font:600 16px/1.3 var(--f-t);font-variant-numeric:tabular-nums;color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-play{width:60px;height:60px;color:var(--acc-ink);background:var(--acc);box-shadow:0 12px 40px -12px rgb(var(--acc-rgb) / .8);transition:transform .2s,background .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.g-go:hover .g-play{transform:scale(1.06);background:var(--acc-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay{justify-content:flex-start;padding:24px 28px 24px 24px;
  --sq-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050A1C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='3'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay > div:first-of-type{flex:1;min-width:240px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay h3{font:600 19px/1.3 var(--f-d);letter-spacing:-.025em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay p{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay-note{color:var(--soft)!important}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-lost{padding:22px 28px 14px;border-radius:var(--r-card)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-lost-h{font:600 19px/1.3 var(--f-d);letter-spacing:-.025em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-lost-s{color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-lost-go{color:var(--acc-text)}

/* карточки разделов: графит, метка недели таблеткой, 3D-предмет в углу */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px;margin-top:14px}
/* подпись «Программа» фиксированной высоты: календарь спущен ровно на неё, поэтому его верх вровень с первой карточкой */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards::before{content:"Программа";grid-column:1/-1;display:flex;align-items:center;gap:12px;height:14px;margin-bottom:-4px;
  font:500 10.5px/1.3 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding-left:2px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc{min-height:268px;padding:26px 26px 24px 28px;border-radius:var(--r-card);color:var(--ink);
  background:radial-gradient(55% 60% at 88% 88%,rgba(255,255,255,.055),transparent 70%),var(--card);
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s ease,box-shadow .25s ease}
/* карточек нечётное число: последняя на всю ширину, чтобы рядом не оставалось пустоты */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc:last-child:nth-child(odd){grid-column:1/-1}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.gc:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17),0 30px 60px -36px rgba(0,0,0,.95)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-eb{align-self:flex-start;max-width:none;margin:0 0 20px;padding:7px 12px;border-radius:999px;
  font:500 12.5px/1.2 var(--f-t);letter-spacing:0;text-transform:none;color:var(--acc-text);background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-t{max-width:64%;font:600 clamp(19px,1.5vw,23px)/1.2 var(--f-d);letter-spacing:-.035em;text-transform:none;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-tail{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-sub{max-width:58%;margin-top:10px;font-size:14.5px;line-height:1.45;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-sub.gc-flag{color:#FFB1AB}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-foot{max-width:60%;gap:14px;padding-top:22px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-prog{width:min(200px,100%);font:500 12.5px/1 var(--f-t);color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-prog .bar{height:6px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-prog .bar rect.bg{fill:#2E2E2E}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-prog .bar rect.fg{fill:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-ico{right:-3%;bottom:-6%;width:42%;max-width:220px;filter:drop-shadow(0 24px 30px rgba(0,0,0,.75))}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off{background:var(--card-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off .gc-t{color:#8A8A8A}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off .gc-tail{color:#7A7A7A}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off .gc-eb{color:#7A7A7A;background:rgba(255,255,255,.05)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off .gc-sub{color:#707070}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off .gc-ico{opacity:.3;filter:grayscale(1)}

/* «Перейти»: тонкая таблетка, на наведении синяя; закрытая: серая с замком */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pill{min-width:0;height:40px;padding:0 16px 0 18px;border-radius:999px;font:600 14px/1 var(--f-t);letter-spacing:0;text-transform:none;
  color:var(--ink);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s,color .2s,box-shadow .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pill:not(.off)::after{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.gc:hover .pill{filter:none;color:var(--acc-ink);background:var(--acc);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) a.gc:hover .pill::after{transform:translateX(3px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pill.off{min-height:36px;height:auto;padding:9px 14px;gap:8px;color:#9A9A9A;font:500 13px/1.2 var(--f-t);letter-spacing:0;
  background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pill.off svg{color:#7A7A7A}

/* правая колонка */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-btns{gap:12px}
@media (min-width:1021px){:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-side{margin-top:42px}}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:999px;
  font:600 16px/1 var(--f-t);letter-spacing:0;text-transform:none;box-shadow:none;transition:background .2s,transform .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat{color:var(--acc-ink);background:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat:hover{background:var(--acc-hi);filter:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal:hover{background:rgba(255,255,255,.06);filter:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal::before{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat::before{
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a7.5 7.5 0 0 1-11 6.6L4 20l1.4-4.5A7.5 7.5 0 1 1 20 12z'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal::before{
  --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4L3 11l6 2.5M21 4l-3 16-9-6.5M21 4L9 13.5V19l3-3'/%3E%3C/svg%3E")}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza{display:grid;grid-template-columns:minmax(0,1fr) 120px;grid-template-rows:auto 1fr auto;align-items:start;gap:6px 12px;
  min-height:190px;padding:24px 22px 22px 26px;border-radius:var(--r-card);text-align:left;color:var(--ink);
  background:radial-gradient(60% 70% at 90% 60%,rgba(255,255,255,.05),transparent 70%),var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s,box-shadow .25s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza-h{grid-column:1;grid-row:1;font:600 18px/1.2 var(--f-d);letter-spacing:-.03em;text-transform:none;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza img{grid-column:2;grid-row:1/4;align-self:center;width:130px;max-width:none;margin:0;filter:drop-shadow(0 20px 24px rgba(0,0,0,.7))}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza-s{grid-column:1;grid-row:2;font:400 14px/1.45 var(--f-t);letter-spacing:0;text-transform:none;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza-go{grid-column:1;grid-row:3;margin-top:8px;font:600 14px/1 var(--f-t);letter-spacing:0;text-transform:none;color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza-go svg{width:18px;height:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza:hover .g-baza-go{color:var(--acc-hi)}

/* календарь */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kal{border-radius:var(--r-card);padding:24px 22px 22px;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-n{font-family:var(--f-d)!important;font-weight:600!important;font-size:16px;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-a{color:var(--soft);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-a.off{opacity:.3}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-wd{font:500 11px/1 var(--f-t);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d{font:500 13.5px/1 var(--f-t);color:#DADADA}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.today{color:var(--acc-ink);font-weight:700;background:var(--acc);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.ev-open:not(.today){box-shadow:inset 0 0 0 1px var(--acc-line);color:#fff}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.ev-open::after{background:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.ev-razbor::before{background:#fff}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.today.ev-open::after,:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-d.today.ev-razbor::before{background:var(--acc-ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-ev.on .kal-d{box-shadow:0 0 0 2px var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-pop{border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 22px 50px -18px rgba(13,20,48,.5)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-pop > b{font:600 14px/1.25 var(--f-d);letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-pop li::before{background:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kal-pop li.razbor::before{background:var(--ink)}

/* полосы внизу */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-home{gap:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip{min-height:84px;padding:18px 24px 18px 30px;transition:transform .25s,box-shadow .25s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.17)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-h{font:600 clamp(17px,1.5vw,20px)/1.2 var(--f-d);letter-spacing:-.03em;text-transform:none;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-a{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-stars span{width:32px;height:32px;margin-left:-8px;color:var(--acc);background:#202020;box-shadow:0 0 0 2px var(--card)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-stars svg{width:14px;height:14px;fill:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-s{color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-go{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--soft);
  box-shadow:inset 0 0 0 1px var(--line-2);transition:color .2s,background .2s,box-shadow .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-go svg{width:18px;height:18px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip:hover .g-strip-go{color:var(--acc-ink);background:var(--acc);box-shadow:none}

/* ---------- подсказка «Установить на телефон»: только на телефоне, показывает prilozhenie.js ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint{position:relative;order:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 44px 18px 20px;border-radius:20px;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow,none)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint[hidden],:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint [hidden]{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint h3{margin:0 0 6px;font:600 16px/1.3 var(--f-d);letter-spacing:-.02em;color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint p{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint a{color:var(--acc-text);text-decoration:underline}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:none;cursor:pointer;font:400 22px/1 var(--f-t);color:var(--muted)}
@media (min-width:641px){:is([class*=tema-grafit],[class*=tema-svetlyj]) .pwa-hint{display:none}}

/* ---------- кружок «Спросить куратора»: кнопка как «Урок пройден», панель как плашка. Положение и раскрытие в vid.css ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-btn{color:var(--fill-ink);background:var(--btn-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 34px -14px rgb(var(--acc-rgb) / .75);transition:background .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-btn:hover{background:var(--btn-grad-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-panel{padding:16px 12px 12px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line-2),0 30px 60px -24px rgba(13,20,48,.5)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-h{margin:0 0 10px 10px;font:600 15px/1.25 var(--f-d);letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-i{font:500 14.5px/1.3 var(--f-t);transition:background .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-i:hover{background:var(--acc-wash)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .kur-sq{color:var(--acc-text);background:var(--acc-wash);box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .22)}

/* ---------- поиск: поле и кнопка в строку, найденное плашкой без полоски снизу (полоски Алина убрала) ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-f .input{border-radius:999px;padding-inline:22px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-pusto-h{font:600 18px/1.25 var(--f-d);letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-pusto a{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) mark{color:inherit;background:rgb(var(--acc-rgb) / .16)}
/* места в расшифровке под найденным уроком: время и отрывок, нажатие ведёт на эту секунду */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesta{display:grid;gap:2px;margin:6px 0 10px 62px;padding:0;list-style:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesto{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:baseline;min-height:44px;padding:10px 12px;border-radius:12px;
  text-decoration:none;color:var(--soft);font-size:14px;line-height:1.45;overflow-wrap:anywhere;touch-action:manipulation;transition:background .15s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesto:hover{color:var(--ink);background:rgb(var(--acc-rgb) / .06)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesto:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-vremya{font-weight:600;font-variant-numeric:tabular-nums;color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-otryvok b{font-weight:600;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-esche{padding:2px 12px 4px 86px;font-size:13px;color:var(--muted)}

/* ---------- раздел с записями: ближайший разбор и пустой раздел ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-live{padding:20px 22px;border-radius:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-live-t{font:600 18px/1.25 var(--f-d);letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-live .btn{display:inline-flex;align-items:center;gap:8px;color:var(--fill-ink);background:var(--btn-grad)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-live .btn:hover{background:var(--btn-grad-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-live .btn svg{width:16px;height:16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-pusto{padding:20px 22px;border-radius:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-pusto p{font-size:16px}

/* список уроков модуля: номер, название, строка описания, статус. Закрытый урок без ссылки */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-lock{margin-bottom:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row{grid-template-columns:44px minmax(0,1fr) auto 36px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-t{display:block;min-width:0}
/* обложка урока в списке модуля: номер или галочка в углу обложки */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.s-ob{grid-template-columns:176px minmax(0,1fr) auto 36px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-ob{position:relative;display:block}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-ob img{display:block;width:100%;height:auto;border-radius:12px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-ob .l-num{position:absolute;left:8px;bottom:8px}
@media (max-width:640px){:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.s-ob{grid-template-columns:104px minmax(0,1fr) 36px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.s-ob .ur-row-st{grid-column:2}}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-s{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--muted)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-mesto{display:block;margin-top:4px;font:600 15px/1.35 var(--f-t);font-variant-numeric:tabular-nums;color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st .chip{white-space:nowrap}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st .chip svg{width:13px;height:13px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st .l-meta{margin:0;font-size:13px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.off{grid-template-columns:44px minmax(0,1fr) auto;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.off .l-num{color:var(--muted);background:rgb(var(--acc-rgb) / .05);box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.off .l-title{color:var(--muted)}

/* ---------- страница «Расписание» ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-h1 em{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-dw{font:500 10.5px/1.3 var(--f-d);letter-spacing:.14em;color:var(--dim)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-wl b{font:600 14px/1.2 var(--f-d);letter-spacing:-.01em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c{border-radius:16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c b{font:600 22px/1 var(--f-d);letter-spacing:-.03em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c small{font:600 10.5px/1.1 var(--f-t);letter-spacing:.03em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c.op{color:var(--acc-ink);background:var(--fill-grad)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c.ef{color:var(--ink);background:rgb(var(--acc-rgb) / .08);box-shadow:inset 0 0 0 2px rgb(var(--acc-rgb) / .55)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c.ef small{color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c.today{outline-color:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-lg i{background:var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-lg i.ef{background:rgb(var(--acc-rgb) / .08);box-shadow:inset 0 0 0 2px rgb(var(--acc-rgb) / .55)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-lg i.dd{background:var(--ink)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-week{margin-top:30px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-week-eb{font:500 10.5px/1.3 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-week-eb .chip{font:600 12px/1 var(--f-t);letter-spacing:0;text-transform:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-week-t{margin-top:8px;font:600 clamp(17px,1.5vw,20px)/1.25 var(--f-d);letter-spacing:-.02em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row{border:0;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-d b{font:600 26px/1.1 var(--f-d);letter-spacing:-.03em}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-kogda .chip{font-size:12px;padding:3px 9px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row .rp-t{font:600 16px/1.3 var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-go .btn{color:var(--fill-ink);background:var(--btn-grad)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-go .btn:hover{background:var(--btn-grad-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row.next{box-shadow:inset 0 0 0 2px var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row:target{box-shadow:inset 0 0 0 2px var(--acc)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row.past{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row.past .rp-d b{font-weight:500}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row.past .rp-t{font-weight:500}

/* ---------- адаптив ---------- */
}
@media (max-width:1020px){
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kanal,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-chat{height:56px;font-size:15px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza{min-height:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kal{max-width:none}
}
@media (max-width:640px){
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .page.has-rail{margin-left:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main{padding:20px 16px 56px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .preview-bar .in{padding:8px 16px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .foot{padding:22px 16px 28px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-list .l-right,:is([class*=tema-grafit],[class*=tema-svetlyj]) .razdel-list .l-right{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .tabbar-uch{left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));padding:6px;border-radius:24px;
    background:#141414;box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -16px rgba(0,0,0,.9)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .tabbar-uch a,:is([class*=tema-grafit],[class*=tema-svetlyj]) .tabbar-uch summary{color:#9A9A9A;border-radius:18px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .tabbar-uch a.on,:is([class*=tema-grafit],[class*=tema-svetlyj]) .tabbar-uch summary.on,:is([class*=tema-grafit],[class*=tema-svetlyj]) .tab-esche[open] summary{color:var(--ink);background:rgba(255,255,255,.08)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .tab-new{background:#E5484D}
  html.uch:is([class*=tema-grafit],[class*=tema-svetlyj]) body::after{background-size:900px auto,20px 20px;background-position:right -280px top 20px,0 0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main > p.sr{margin:0 0 12px;font-size:10px;padding:7px 11px 6px;border-radius:9px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main > h1.sr{width:min-content;margin-bottom:22px;font-size:clamp(34px,10.6vw,46px)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-news{background:var(--red-wash);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,138,132,.25)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go{grid-template-columns:minmax(0,1fr) auto;padding:18px 16px 18px 20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start::before,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-pay::before{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-start{padding:20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go .g-eb::before{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .card{min-width:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-go-h{font-size:18px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-lost{padding:16px 16px 8px 20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-play{width:50px;height:50px}
  /* главная: сначала то, что можно нажать сейчас, база знаний и календарь рядом, закрытые модули внизу короткими строками */
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-wrap{gap:14px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards{display:contents}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards::before{order:5;margin:6px 0 -2px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards:has(.gc.off)::after{content:"Дальше по программе";order:10;margin:6px 0 -2px;padding-left:2px;font:500 10.5px/1.3 var(--f-d);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza{order:7;grid-template-columns:minmax(0,1fr) 92px;padding:18px 14px 16px 20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-baza img{width:96px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kal{order:8}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .z-home{order:9;margin-top:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc{order:6;min-height:176px;padding:20px 20px 18px 22px;border-radius:20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-eb{margin-bottom:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-foot{padding-top:14px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc.off{order:11;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:0;padding:14px 16px;border-radius:18px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off .gc-t{flex:0 0 100%;order:-1;max-width:none;font-size:15.5px;line-height:1.25}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off .gc-eb{max-width:none;margin:0;padding:0;background:none;font-size:12.5px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off :is(.gc-sub,.gc-ico){display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off .gc-foot{max-width:none;margin:0;padding:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off .pill.off{min-height:0;padding:0;gap:5px;background:none;box-shadow:none;font-size:12.5px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-cards .gc.off .pill.off svg{width:12px;height:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-t{font-size:22px;max-width:66%}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .gc-ico{width:44%;right:-6%;bottom:-8%}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip{padding:16px 16px 16px 20px;min-height:72px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-h{font-size:20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-strip-go{width:36px;height:36px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .g-kal{padding:20px 14px 16px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .mod-head .eyebrow.blue{font-size:12.5px;padding:8px 12px 7px;border-radius:10px}
  /* чат: поле ввода на первом экране. Заголовок короче, список по высоте экрана, пояснения под чатом */
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat){display:flex;flex-direction:column}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > .eyebrow{margin-bottom:8px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > h1{font-size:26px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > :is(.chat,#niz){order:1}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > .chat{margin-top:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > .lead{order:2;font-size:15px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) main:has(> .chat) > .chat-note{order:3;margin-top:12px;font-size:14px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .chat-list{min-height:200px;max-height:none;height:calc(100vh - 318px - env(safe-area-inset-bottom));height:calc(100dvh - 318px - env(safe-area-inset-bottom))}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .chat:has(> .chat-empty:not([hidden])) .chat-list{height:auto;min-height:0;padding:0}
  /* кнопки формы на телефоне во всю ширину */
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .z-row .btn,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-ask .btn,:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-self .btn{width:100%;justify-content:center}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesta{margin-left:0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-mesto{grid-template-columns:56px minmax(0,1fr);padding:10px 8px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .poisk-esche{padding-left:74px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-row{border-radius:18px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-d b{font-size:22px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c{border-radius:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .rp-c b{font-size:15px}
  /* строки-плашки: значок, название, статус под названием. Стрелка не нужна, вся плашка нажимается */
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row,:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row,:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row.off{grid-template-columns:36px minmax(0,1fr);gap:8px 12px;padding:14px;align-items:start}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-num{width:36px;height:36px;border-radius:11px;font-size:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-num svg{width:18px;height:18px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-title{font-size:15px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row .l-right{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .lesson-row .l-right .chip,:is([class*=tema-grafit],[class*=tema-svetlyj]) .g-matl .lesson-row .l-right .lock{white-space:normal}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st:empty{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-row-st .chip{white-space:normal}
}

/* ---------- страница урока: спокойно и только основное. Заголовок, видео, справа тайм-коды, под видео описание,
   что сделать, материалы, «Урок пройден», соседние уроки. Без карточек: разделы отделяет тонкая линия. Текст от 17 точек ---------- */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok{--u-t:#14171F;--u-m:#4A4F5C;--u-l:rgba(13,20,48,.13);--u-s:#2850D2;--u-z:#E3E9FF;--u-g:#0B7A4B;--u-a:#8F5400;--u-r:#B3261E;
  --u-k:linear-gradient(180deg,#3D6BF5,#2848CF);--u-k-hi:linear-gradient(180deg,#4A76FA,#2F55DA);color:var(--u-t);font:400 18px/1.55 var(--f-t)}
.tema-svetlyj-mono .urok{--u-s:#0D0F14;--u-z:#ECEEF1;--u-k:var(--btn-grad);--u-k-hi:var(--btn-grad-hi)}
html.uch:has(.urok) .foot{font-size:17px;color:#4A4F5C}
html.uch:has(.urok) .foot-links a{color:#4A4F5C}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-nazad{display:inline-flex;align-items:flex-start;gap:10px;min-height:44px;margin:0 0 6px;padding:8px 0;font:500 18px/1.4 var(--f-t);color:var(--u-s);text-decoration:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-nazad svg{flex:none;width:18px;height:18px;margin-top:3px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-nazad:hover span{text-decoration:underline;text-underline-offset:3px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-chernovik{margin:0 0 10px;font-size:17px;color:var(--u-a)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-head{display:block;margin:0 0 22px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-head h1{margin:0;font:600 32px/1.18 var(--f-d);letter-spacing:-.03em;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-podzag{margin:6px 0 0;font-size:18px;line-height:1.4;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .ur-h{margin:0 0 18px;font:600 20px/1.3 var(--f-d);letter-spacing:-.025em;text-transform:none;color:var(--u-t)}

/* сетка: в левом столбце строка над видео, видео с описанием и всё остальное. Справа тайм-коды рядом с видео */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-setka{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:44px;align-items:start}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-nad{grid-column:1;grid-row:1}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-video{grid-column:1;grid-row:2;min-width:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody{grid-column:2;grid-row:2 / span 2;min-width:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-niz{grid-column:1;grid-row:3;min-width:0}

/* где остановился: одна заметная строка прямо над видео. Найденное место: подпись там же */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-resume{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin:0 0 16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-resume[hidden]{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-resume p{margin:0;font:600 22px/1.25 var(--f-t);font-variant-numeric:tabular-nums;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .ur-resume .btn{min-height:52px;padding:0 28px;border-radius:26px;font:600 18px/1 var(--f-t);color:#fff;background:var(--u-k);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .ur-resume .btn:hover{background:var(--u-k-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) :is(.ur-nashli,.ur-zapusk){margin:0 0 14px;font-size:17px;line-height:1.45;font-variant-numeric:tabular-nums;color:var(--u-m)}

/* видео и обложка, пока видео нет */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .player{border-radius:20px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .player-empty{font-size:17px;line-height:1.4}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .player-empty b{margin-bottom:4px;font:600 18px/1.3 var(--f-t);text-transform:none;color:#fff}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player:has(> .player-empty){aspect-ratio:auto;height:clamp(170px,18vw,220px)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player:has(> .player-empty.s-ob){aspect-ratio:16/9;height:auto}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .player-empty.s-ob{place-items:end start;padding:0;text-align:left}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty.s-ob img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty.s-ob > div{position:relative;margin:14px;padding:10px 16px;border-radius:12px;background:rgb(10 13 24/.82);color:#fff}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty > div > span{display:block}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-summary{margin:26px 0 0;font-size:18px;line-height:1.5;color:var(--u-t)}

/* тайм-коды столбцом: время синее, тонкая линия между строками */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody ol{margin:0;padding:0;list-style:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody li + li{border-top:1px solid var(--u-l)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kod{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px;align-items:baseline;width:100%;min-height:44px;padding:9px 0;border:0;background:none;color:var(--u-t);text-align:left;font:400 18px/1.5 var(--f-t);touch-action:manipulation;overflow-wrap:anywhere}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody li:first-child .ur-kod{padding-top:2px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) button.ur-kod{cursor:pointer;transition:color .15s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) button.ur-kod:hover{color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) button.ur-kod:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kod-t{font-weight:600;font-variant-numeric:tabular-nums;color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) div.ur-kod .ur-kod-t{color:var(--u-m)}

/* переход из поиска: расшифровка с найденным местом */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-det{margin:28px 0 0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-rash{display:grid;gap:2px;max-height:min(60vh,540px);margin:0;padding:0;list-style:none;overflow-y:auto}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-rash:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:12px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-rash .ur-kod{padding:8px 10px;border-radius:10px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-rash li.on .ur-kod{background:var(--u-z)}

/* разделы под видео: тонкая линия сверху */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-niz > section,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-niz > :is(section,details),:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kon{margin:40px 0 0;padding:36px 0 0;border:0;border-top:1px solid var(--u-l);border-radius:0;background:none;box-shadow:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-niz{display:block;max-width:none;margin:0}

/* что сделать после урока: номера */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-cheklist ol{display:grid;gap:12px;margin:0;padding:0;list-style:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-cheklist li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;align-items:start}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-cheklist i{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--u-z);font:600 17px/1 var(--f-t);color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-cheklist span{padding-top:2px}

/* текст из кабинета и вводные слова к заготовкам */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok :is(.ur-tekst,.ur-vvod) .prose,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose.ur-vvod{max-width:none;margin:0;font-size:18px;line-height:1.55;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose.ur-vvod{margin:0 0 12px;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose > :first-child{margin-top:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose > :last-child{margin-bottom:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose h3{font-size:18px;line-height:1.35}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prose h4{font:600 17px/1.35 var(--f-t)}

/* материалы списком: значок, название, кнопка. Заготовка ещё и тихо копируется */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .mats{max-width:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl{margin:0;padding:0;list-style:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl li{display:flex;align-items:center;gap:16px;padding:12px 0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl li + li{border-top:1px solid var(--u-l)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl-i{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--u-z);color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl-i svg{width:21px;height:21px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl-n{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl-n small{margin-left:8px;font-size:17px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl-k{flex:none;display:flex;align-items:center;gap:6px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sk{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1.5px rgb(var(--acc-rgb) / .5);font:600 17px/1 var(--f-t);color:var(--u-s);text-decoration:none;touch-action:manipulation}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sk:hover{background:#F4F6FF}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl .copy{min-height:48px;padding:0 14px;border:0;border-radius:24px;background:none;font:600 17px/1 var(--f-t);letter-spacing:0;color:var(--u-s);cursor:pointer;touch-action:manipulation}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl .copy:hover{text-decoration:underline;text-underline-offset:3px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl .copy.ok{color:var(--u-g)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl pre[hidden]{display:none}

/* «Урок пройден» и тихая ссылка на куратора */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kon{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions{display:block;margin:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions .btn{height:56px;padding:0 30px;border-radius:28px;font:600 18px/1 var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions .btn:not(.done){color:#fff;background:var(--u-k);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 30px -14px rgb(var(--acc-rgb) / .85)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions .btn:not(.done):hover{background:var(--u-k-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions .btn.done{color:var(--u-g);box-shadow:inset 0 0 0 1.5px rgb(11 122 75 / .45)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kurator{display:inline-flex;align-items:center;min-height:44px;font-size:18px;color:var(--u-s);text-decoration:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kurator:hover{text-decoration:underline;text-underline-offset:3px}

/* соседние уроки простыми ссылками */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:none;margin:36px 0 0;padding:28px 0 0;border-top:1px solid var(--u-l)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed{display:block;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--u-t);text-decoration:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn a.ur-sosed:hover{border:0;background:none;box-shadow:none;color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed small{display:flex;align-items:center;gap:7px;margin:0 0 5px;font:500 17px/1.3 var(--f-t);letter-spacing:0;text-transform:none;color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sosed small svg{flex:none;width:15px;height:15px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sosed b{display:block;font:500 18px/1.4 var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.next{text-align:right}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.next small{justify-content:flex-end}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.off,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.off small{color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sosed-why{display:block;margin-top:4px;font-size:17px;line-height:1.35;color:var(--u-m)}

/* задание и тест: простые блоки, форма и статус те же */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin:0 0 10px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec h3{margin:0;font:600 18px/1.4 var(--f-t);letter-spacing:0;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip{padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:600 17px/1.4 var(--f-t);letter-spacing:0;white-space:normal;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip svg{width:16px;height:16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip.green{color:var(--u-g)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip.amber{color:var(--u-a)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip.red{color:var(--u-r)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .chip.blue{color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec :is(.small,small,.z-sub,.z-who,.z-text,.z-krit,.field label,.z-file-err,.z-draft-when){font-size:17px;line-height:1.45}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec :is(.muted,.z-who,.field label){color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .z-who b,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-text{color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sub{margin:6px 0 16px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-krit + .z-sub{margin-top:14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-prose{margin:10px 0 0;max-width:none;font-size:18px;line-height:1.55;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-krit{margin:14px 0 0;padding:0;border:0;border-radius:0;background:none;color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-note{font-size:17px;line-height:1.45}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-note.ok{color:var(--u-g)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-note.err{color:var(--u-r)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sent{margin:18px 0;padding:0 0 0 16px;border:0;border-left:3px solid var(--u-l);border-radius:0;background:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-answer{margin-top:14px;padding:0 0 0 16px;border-radius:0;background:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-form .input{font-size:18px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-file::file-selector-button{min-height:44px;margin-right:14px;padding:0 16px;border:1px solid var(--u-l);border-radius:22px;background:#fff;font:600 17px/1 var(--f-t);color:var(--u-t);cursor:pointer}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-area{min-height:120px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-result{margin:4px 0 14px;padding:0;border:0;border-radius:0;background:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-result b{font-size:18px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li{padding:10px 0;border:0;border-radius:0;background:none;font-size:17px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li + li{border-top:1px solid var(--u-l)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li.ok,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li.bad{color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks .z-mark-a{color:var(--u-g)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-marks li.bad .z-mark-a{color:var(--u-r)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-result.pass b{color:var(--u-g)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-result.fail b{color:var(--u-a)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-q legend{font-size:18px;font-weight:500}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-qn{min-width:32px;height:32px;font-size:17px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-opt input{width:20px;height:20px;margin-top:3px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-quiz > .btn{align-self:flex-start}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-opt{font-size:18px;line-height:1.45}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .btn{min-height:52px;padding:0 26px;font:600 17px/1.2 var(--f-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .btn:not(.ghost,.done,.danger){color:#fff;background:var(--u-k)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .btn:not(.ghost,.done,.danger):hover{background:var(--u-k-hi)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec .btn.ghost{color:var(--u-t)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prompt figcaption{font-size:17px;letter-spacing:0;text-transform:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prompt pre{font-size:17px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prompt .copy{min-height:44px;padding:0 12px;font:600 17px/1 var(--f-t);color:var(--u-s);background:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .prompt .copy.ok{color:var(--u-g)}
/* галочка одной строкой */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec.z-galka{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 14px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-sec-h{display:contents}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-sec-h .chip{grid-column:2;grid-row:1}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-sec-h .chip:not(.green){display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec.z-galka h3{grid-column:1;grid-row:1;font-weight:500}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-self{grid-column:3;grid-row:1;margin:0}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-galka > :is(.z-prose,.z-krit,.z-note){grid-column:1/-1;margin:2px 0 6px}
/* вопросы к уроку, если они на платформе: сворачиваются сами, это отдельная настройка */
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str > summary{display:flex;align-items:center;gap:8px;min-height:50px;margin:0;padding:8px 0;cursor:pointer;list-style:none;font:500 18px/1.35 var(--f-t);letter-spacing:0;color:var(--u-t);touch-action:manipulation}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str > summary:hover{color:var(--u-s)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str > summary::-webkit-details-marker{display:none}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str > summary::after{content:"";flex:none;width:8px;height:8px;margin:-3px 4px 0 auto;border:solid var(--u-m);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str[open] > summary::after{margin-top:3px;transform:rotate(-135deg)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str > summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str-n{font-size:17px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str-b{padding:2px 0 20px;font-size:18px;line-height:1.5;color:var(--u-m)}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-str-b.z-qs{gap:10px}
:is([class*=tema-grafit],[class*=tema-svetlyj]) .z-qs .z-ask{margin:4px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}

@media (max-width:1280px){
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty.s-ob .ur-esche{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-setka{grid-template-columns:minmax(0,1fr) 320px;column-gap:32px}
}
@media (max-width:1020px){
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-setka{display:block}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody{margin:22px 0 0}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kody li:first-child .ur-kod{padding-top:9px}
}
@media (max-width:640px){
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-nazad-n{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-head{margin-bottom:16px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-head h1{font-size:27px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .ur-h{font-size:19px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .player{border-radius:14px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .ur-resume .btn{width:100%}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .player-empty.s-ob > div{margin:8px;padding:8px 12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-summary{margin-top:20px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kod{grid-template-columns:68px minmax(0,1fr)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-niz > section,:is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-niz > :is(section,details),:is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kon{margin-top:32px;padding-top:28px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-fl li{gap:12px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-sk{padding:0 16px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-zag{flex-wrap:wrap}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-zag .ur-fl-n{flex:1 1 calc(100% - 54px)}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-zag .ur-fl-k{flex:1 1 100%;justify-content:flex-start;margin-top:-4px;padding-left:40px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kon{display:block}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .l-actions .btn{width:100%;height:58px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .ur-kurator{display:flex;justify-content:center;margin-top:10px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:32px;padding-top:26px}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn > span:empty{display:none}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.next{text-align:left}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .pn .ur-sosed.next small{justify-content:flex-start}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .urok .z-sec.z-galka{grid-template-columns:minmax(0,1fr) auto}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-sec-h .chip{grid-column:1;grid-row:2}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-self{grid-column:2}
  :is([class*=tema-grafit],[class*=tema-svetlyj]) .z-galka .z-self .btn{width:auto}
}


html.uch[class*=tema-svetlyj]{
  --bg:#F2F3F6; --card:#FFFFFF; --card-2:#F7F8FA; --line:rgba(13,20,48,.08); --line-2:rgba(13,20,48,.14);
  --ink:#0D0F14; --soft:#3A3F4A; --muted:#6B7180; --dim:#9AA0AB;
  --acc:#3D6BF5; --acc-hi:#2F5BE0; --acc-ink:#FFFFFF; --acc-text:#2F5BE0;
  --acc-rgb:61 107 245; --hi-rgb:90 132 255; --glow-rgb:110 145 255;
  --sq-grad:linear-gradient(145deg,#EEF2FF 0%,#B9CCFF 45%,#6F95FF 100%); --fill-grad:linear-gradient(180deg,#4B78FA,#2F5BE0); --fill-ink:#FFFFFF;
  --btn-grad:linear-gradient(180deg,#6F95FF 0%,#4B78FA 50%,#3D6BF5 100%); --btn-grad-hi:linear-gradient(180deg,#7DA0FF 0%,#5682FB 50%,#456FF2 100%);
  --set:url(../img/vid/set-svetlyj.svg?v=ed729ae391d9);
  --shadow:0 1px 2px rgba(13,20,48,.04),0 14px 34px -22px rgba(13,20,48,.22);
  --green:#12A266; --green-wash:rgba(18,162,102,.09); --amber:#B7700E; --amber-wash:rgba(232,160,40,.12);
  --red:#D23B36; --red-wash:rgba(210,59,54,.07);
  color-scheme:light;
  background:#F2F3F6;
}
html.uch[class*=tema-svetlyj] body::before{background:
    radial-gradient(820px 520px at 8% -12%,rgb(var(--glow-rgb) / .2),transparent 68%),
    radial-gradient(600px 420px at 100% 0%,rgb(var(--glow-rgb) / .08),transparent 70%),
    #F2F3F6}
html.uch[class*=tema-svetlyj] body::after{background:
    var(--set) right -60px top 40px/min(1200px,90vw) auto no-repeat,
    radial-gradient(circle,rgba(13,20,48,.11) 1px,transparent 1.5px) 0 0/24px 24px}
[class*=tema-svetlyj] ::selection{color:var(--ink)}

/* плашки: белые, тонкая рамка и мягкая тень */
[class*=tema-svetlyj] .card,[class*=tema-svetlyj] .lesson-row,[class*=tema-svetlyj] .mat,[class*=tema-svetlyj] .pn a,[class*=tema-svetlyj] .result,[class*=tema-svetlyj] .z-quality,
[class*=tema-svetlyj] .z-tile,[class*=tema-svetlyj] .d-links a,[class*=tema-svetlyj] .msg,[class*=tema-svetlyj] .chat-note{box-shadow:var(--shadow)}
[class*=tema-svetlyj] a.mod:hover,[class*=tema-svetlyj] .lesson-row:hover,[class*=tema-svetlyj] .mat:hover,[class*=tema-svetlyj] .pn a:hover{background:#FFFFFF;border-color:rgba(13,20,48,.18)}
/* кнопка с рамкой непрозрачная: иначе сквозь неё видны точки и узлы фоновой сетки */
[class*=tema-svetlyj] .btn.ghost,[class*=tema-svetlyj] .g-kanal{background:var(--card)}
[class*=tema-svetlyj] .btn.ghost:hover,[class*=tema-svetlyj] .g-kanal:hover{background:#F3F4F7}
[class*=tema-svetlyj] .kal-a:hover{background:rgba(13,20,48,.04)}
[class*=tema-svetlyj] .prose code{background:#F3F4F7}
[class*=tema-svetlyj] .player{box-shadow:inset 0 0 0 1px var(--line),0 30px 70px -44px rgba(13,20,48,.45)}
[class*=tema-svetlyj] .chip{background:#fff}
[class*=tema-svetlyj] .side-list .dot{border-color:#C4C8D0}
[class*=tema-svetlyj] .l-num.started{color:#0D1430}
[class*=tema-svetlyj] .input,[class*=tema-svetlyj] textarea.input,[class*=tema-svetlyj] select.input{background:#fff}
[class*=tema-svetlyj] .input::placeholder{color:#9AA0AB}
[class*=tema-svetlyj] input[type=file]::file-selector-button{background:#F3F4F7}
[class*=tema-svetlyj] input[type=file]::-webkit-file-upload-button{background:#F3F4F7}
[class*=tema-svetlyj] .z-tile:hover{border-color:rgba(13,20,48,.2)}
[class*=tema-svetlyj] .z-ring .bg,[class*=tema-svetlyj] .ring .bg{stroke:#E5E7EC}
[class*=tema-svetlyj] .z-opt,[class*=tema-svetlyj] .d-check{background:#fff}
[class*=tema-svetlyj] .chat-form{background:rgba(13,20,48,.03)}
[class*=tema-svetlyj] .player-empty{background:radial-gradient(520px 320px at 20% 10%,rgb(var(--acc-rgb) / .25),transparent 70%),#10131C;color:#9AA0AB}
[class*=tema-svetlyj] .player-empty b{color:#fff}
[class*=tema-svetlyj] .preview-bar{background:#FFFFFF}

/* меню слева: белое */
[class*=tema-svetlyj] .rail{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -30px rgba(13,20,48,.35)}
[class*=tema-svetlyj] .rail:hover,[class*=tema-svetlyj] .rail:focus-within{box-shadow:inset 0 0 0 1px var(--line-2),0 40px 90px -30px rgba(13,20,48,.45)}
[class*=tema-svetlyj] .rail-i{color:#7A8090}
[class*=tema-svetlyj] .rail-i:hover{background:rgba(13,20,48,.045)}
[class*=tema-svetlyj] .rail-me{color:#0D1430}

/* главная */
[class*=tema-svetlyj] main > h1.sr{color:var(--ink)}
[class*=tema-svetlyj] .g-go,[class*=tema-svetlyj] .g-pay,[class*=tema-svetlyj] .g-strip,[class*=tema-svetlyj] .g-baza,[class*=tema-svetlyj] .g-kal{box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
[class*=tema-svetlyj] .g-go{box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .3),var(--shadow)}
[class*=tema-svetlyj] a.g-go:hover{box-shadow:inset 0 0 0 1px rgb(var(--acc-rgb) / .55),var(--shadow)}
[class*=tema-svetlyj] .gc{background:radial-gradient(55% 60% at 88% 88%,rgba(13,20,48,.035),transparent 70%),var(--card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
[class*=tema-svetlyj] a.gc:hover,[class*=tema-svetlyj] .g-strip:hover,[class*=tema-svetlyj] .g-baza:hover{box-shadow:inset 0 0 0 1px rgba(13,20,48,.16),0 30px 60px -34px rgba(13,20,48,.4)}
[class*=tema-svetlyj] .gc-prog .bar rect.bg{fill:#E6E8ED}
[class*=tema-svetlyj] .gc-ico,[class*=tema-svetlyj] .g-baza img{filter:drop-shadow(0 20px 22px rgba(13,20,48,.28))}
/* REC-табло широкое и низкое: на общей ширине выглядит мельче соседей. Микрофон высокий и без запаса в файле: своё место
   и предел ширины, иначе на широкой низкой карточке срезаются верх или подставка. */
[class*=tema-svetlyj] .ik-rec-tablo > .gc-ico{width:50%;max-width:262px}
[class*=tema-svetlyj] .ik-mic > .gc-ico{width:34%;max-width:148px;right:3%;bottom:3%}
@media (max-width:1020px){
  [class*=tema-svetlyj] .ik-mic > .gc-ico{max-width:124px}
}
@media (max-width:640px){
  [class*=tema-svetlyj] .ik-rec-tablo > .gc-ico{width:48%}
  [class*=tema-svetlyj] .ik-mic > .gc-ico{width:36%;max-width:130px;right:2%}
  /* запас в файле в долях ширины значка, а обычные отступы в долях карточки: на высокой или широкой карточке край уходил за неё */
  [class*=tema-svetlyj] :is(.ik-robot-head,.ik-clapperboard,.ik-shield-check,.ik-people,.ik-certificate) > .gc-ico{max-width:170px;right:-16px;bottom:-16px}
}
[class*=tema-svetlyj] .gc.off{box-shadow:inset 0 0 0 1px rgba(13,20,48,.06)}
[class*=tema-svetlyj] .gc.off .gc-t{color:#5C6371}
[class*=tema-svetlyj] .gc.off .gc-eb{color:#5C6371;background:rgba(13,20,48,.04)}
[class*=tema-svetlyj] .gc.off .gc-sub{color:#5C6371}
[class*=tema-svetlyj] .gc.off .gc-ico{opacity:.35}
[class*=tema-svetlyj] .pill{background:#F3F4F7;box-shadow:inset 0 0 0 1px var(--line)}
[class*=tema-svetlyj] .pill.off{color:#7A8090;background:#F3F4F7;box-shadow:none}
[class*=tema-svetlyj] .g-baza{background:radial-gradient(60% 70% at 90% 60%,rgba(13,20,48,.03),transparent 70%),var(--card)}
[class*=tema-svetlyj] .kal-d{color:var(--ink)}
[class*=tema-svetlyj] .kal-d.ev-open:not(.today){color:var(--ink)}
[class*=tema-svetlyj] .kal-d.ev-razbor::before{background:var(--ink)}
[class*=tema-svetlyj] .rp-row:not(.past,.next,:target),[class*=tema-svetlyj] .rp-c:not(.op,.ef,.dd){box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
[class*=tema-svetlyj] .kal-pop{box-shadow:inset 0 0 0 1px var(--line-2),0 22px 50px -18px rgba(13,20,48,.35)}
[class*=tema-svetlyj] .rp-row.next,[class*=tema-svetlyj] .rp-row:target{box-shadow:inset 0 0 0 2px var(--acc),var(--shadow)}
[class*=tema-svetlyj] .g-stars span{background:#EEF2FF;box-shadow:0 0 0 2px var(--card)}
[class*=tema-svetlyj] .g-stars svg{fill:var(--acc)}

@media (max-width:640px){
  [class*=tema-svetlyj] .tabbar-uch{background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -16px rgba(13,20,48,.35)}
  [class*=tema-svetlyj] .tabbar-uch a,[class*=tema-svetlyj] .tabbar-uch summary{color:#555C6B}
  [class*=tema-svetlyj] .tabbar-uch a.on,[class*=tema-svetlyj] .tabbar-uch summary.on,[class*=tema-svetlyj] .tab-esche[open] summary{color:var(--ink);background:rgba(13,20,48,.05)}
  html.uch[class*=tema-svetlyj] body::after{background-size:900px auto,20px 20px;background-position:right -280px top 20px,0 0}
}
[class*=tema-svetlyj] .rail-acc-me:hover{background:rgba(13,20,48,.045)}

/* Ученики 50+: самые мелкие подписи крупнее, контраст не ниже 4,5. Раскладка та же. */
html.uch[class*=tema-svetlyj]{--muted:#5C6371}
html.uch[class*=tema-svetlyj] :is(.g-eb,.eyebrow,.rp-week-eb,.rp-dw){font-size:13px;letter-spacing:.08em;color:var(--muted)}
html.uch[class*=tema-svetlyj] :is(.g-eb,.eyebrow.blue){color:var(--acc-text)}
html.uch[class*=tema-svetlyj] :is(.kal-wd,.rp-d span,.z-tile-n){font-size:13px;color:var(--muted)}
html.uch[class*=tema-svetlyj] .kal-d{font-size:15px}
html.uch[class*=tema-svetlyj] :is(.chip,.gc-eb,.gc-prog span,.rp-wl span,.rp-wl b){font-size:14px}
html.uch[class*=tema-svetlyj] .chip.green{color:#176B3A}
html.uch[class*=tema-svetlyj] .chip.blue{color:#2746C0}
html.uch[class*=tema-svetlyj] :is(.foot,.foot-links a,.foot span,.g-go-s,.g-strip-s,.gc-foot .pill,.g-baza-s,.g-baza-go,.rp-lg li,.rp-kogda,.rp-zhdem,.rp-sub,.l-meta){font-size:15px}
html.uch[class*=tema-svetlyj] .foot span{color:var(--muted)}
html.uch[class*=tema-svetlyj] :is(.gc-sub,.z-tile-t,.rp-c > b){font-size:16px}
html.uch[class*=tema-svetlyj] :is(.l-title,.g-go-mesto,.lead,.rp-t,.mt-l .muted){font-size:17px}
html.uch[class*=tema-svetlyj] .foot-links a{display:inline-block;padding:10px 0}
html.uch[class*=tema-svetlyj] .foot{align-items:center}
html.uch[class*=tema-svetlyj] .crumbs a{display:inline-block;padding:8px 0}
/* вход: первая страница, которую видит ученик */
html.uch[class*=tema-svetlyj] .auth-box :is(.field label,.auth-note){font-size:16px;color:var(--muted)}
html.uch[class*=tema-svetlyj] .auth-box :is(.btn,.input){min-height:52px;font-size:17px}
/* узкая колонка справа на небольшом ноутбуке: длинное слово в карточке базы знаний не должно ломаться посередине */
@media (min-width:981px) and (max-width:1300px){
  html.uch[class*=tema-svetlyj] .g-baza-s{font-size:14px;hyphens:auto}
}
html.uch[class*=tema-svetlyj] .chip.amber{color:#7A4900}
html.uch[class*=tema-svetlyj] .g-cards .gc.off .pill.off{font-size:14px;color:var(--soft)}
html.uch[class*=tema-svetlyj] .auth-note a:only-child{display:inline-block;padding:10px 0}
.ur-nevideo{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--muted)}
.ur-nevideo a{color:inherit}
.z-chat{margin:12px 0 0}
.z-chat a{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--acc-text);font-weight:600;text-decoration:none}
.z-chat svg{width:16px;height:16px}
@media (max-width:640px){
  html.uch[class*=tema-svetlyj] .pwa-hint{order:3}
  /* клавиатура открыта: нижнее меню не закрывает кнопки формы */
  html.uch body:has(input:focus,textarea:focus) .tabbar-uch{display:none}
}
body:has(.tab-esche[open]) .kur{display:none}

/* планшет и повёрнутый телефон: наведения нет, подписи полосы слева не появятся. Вместо неё то же нижнее меню, что на телефоне */
@media (hover:none) and (min-width:641px) and (max-width:1180px){
  [class*=tema-svetlyj] .rail{display:none}
  [class*=tema-svetlyj] .page.has-rail{margin-left:0}
  html.uch[class*=tema-svetlyj] body{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  [class*=tema-svetlyj] .tabbar-uch{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:50%;right:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:30;width:min(560px,calc(100% - 20px));padding:6px;
    border-radius:24px;background:#FFFFFF;box-shadow:inset 0 0 0 1px var(--line),0 20px 40px -16px rgba(13,20,48,.35);transform:translateX(-50%)}
  [class*=tema-svetlyj] .tabbar-uch a,[class*=tema-svetlyj] .tabbar-uch summary{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:62px;padding:8px 2px 6px;
    color:#555C6B;font-size:14px;line-height:1.1;font-weight:600;text-decoration:none;border-radius:18px;list-style:none;cursor:pointer}
  [class*=tema-svetlyj] .tabbar-uch summary::-webkit-details-marker{display:none}
  [class*=tema-svetlyj] .tabbar-uch svg{width:26px;height:26px}
  [class*=tema-svetlyj] .tabbar-uch a.on,[class*=tema-svetlyj] .tabbar-uch summary.on,[class*=tema-svetlyj] .tab-esche[open] summary{color:var(--ink);background:rgba(13,20,48,.05)}
  [class*=tema-svetlyj] .tab-esche:not([open]) .tab-esche-p{display:none}
  [class*=tema-svetlyj] .tab-esche-p{position:absolute;left:0;right:0;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -16px rgba(0,0,0,.45)}
  [class*=tema-svetlyj] .tabbar-uch .tab-esche-p a{flex-direction:row;justify-content:flex-start;gap:14px;min-height:56px;padding:6px 16px;font-size:18px;color:var(--ink)}
}


/* Шапка-фото (31.10, вариант 1): готовая картинка, буквы в ней контурами, поэтому Safari ничего не обрезает.
   Ширина по колонке, высота по пропорции файла: шапка не растягивается и на широком экране не режет слово.
   Ниже прежняя текстовая шапка: она нужна, только если в настройках другие слова (vid.SHAPKA_SLOVA). */
.sv-shapka{position:relative;isolation:isolate;margin:0 0 24px;border-radius:28px;overflow:hidden;background:#070D22;box-shadow:0 34px 60px -44px rgba(8,16,48,.75)}
.sv-shapka img{display:block;width:100%;height:auto;aspect-ratio:1254/452}
@media (max-width:640px){
  .sv-shapka{margin:0 0 18px;border-radius:22px}
  .sv-shapka img{aspect-ratio:358/376}
}

.tema-svetlyj main > p.sr{position:absolute;z-index:1;top:56px;left:76px;margin:0}
.tema-svetlyj main > h1.sr{position:relative;isolation:isolate;margin:0 0 24px;padding:84px clamp(200px,24vw,340px) 80px 44px;border-radius:28px;color:var(--ink);
  font:900 clamp(40px,5vw,80px)/.92 var(--f-d);letter-spacing:-.03em;
  background:radial-gradient(640px 320px at 8% -20%,rgb(var(--acc-rgb) / .2),transparent 70%),
    radial-gradient(480px 320px at 90% 70%,rgb(var(--acc-rgb) / .12),transparent 70%),
    linear-gradient(180deg,#FFFFFF,#EEF2FB);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
/* Ракета своим слоем: качается через transform силами видеокарты. Прежняя анимация фона перерисовывала баннер 60 раз
   в секунду и занимала браузер телефона, даже когда ученик просто смотрит на страницу. */
.tema-svetlyj main > h1.sr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../img/vid/3d/rocket.webp?v=e7dfe756ab91) right 6% top 50%/clamp(140px,15vw,220px) no-repeat;
  /* та же ракета, что на первой карточке: один файл на оба места. Старый браузер этой строки не поймёт и возьмёт webp выше */
  background:image-set(url(../img/vid/3d/rocket.avif?v=a87f705f4381) type("image/avif")) right 6% top 50%/clamp(140px,15vw,220px) no-repeat;
  animation:sv-oblozhka-raketa 6s ease-in-out infinite;will-change:transform}
@keyframes sv-oblozhka-raketa{
  0%,100%{transform:none}
  50%{transform:translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.tema-svetlyj main > h1.sr::after{animation:none}}

@media (max-width:640px){
  .tema-svetlyj main > p.sr{top:40px;left:36px}
  .tema-svetlyj main > h1.sr{width:auto;padding:62px 96px 56px 20px;border-radius:22px;font-size:clamp(30px,9vw,42px)}
  .tema-svetlyj main > h1.sr::after{background-position:right 4% top 50%;background-size:84px auto}
  @keyframes sv-oblozhka-raketa{
    0%,100%{transform:none}
    50%{transform:translateY(-8px)}}
}