/* ═══════════════════════════════════════════════════════════════════════
   КАБИНЕТ МИНИ-АППА · КОМПОНЕНТЫ

   Опирается на /system.css — он обязан подключаться ПЕРВЫМ: там шрифты,
   токены обеих тем, фон-небо и канон фокуса. Здесь только компоненты.

   Язык тот же, что у кабинета курса: холодная голубая бумага, стекло
   вместо плотных заливок, волосяные линии вместо рамок, ОДИН плотный
   объект на экран (герой) и один акцент (синий).

   Правила, которые легко нарушить и потом долго искать:
   · стекло в стекле = грязь. Если стеклянная карточка лежит на стеклянной
     панели, у внутренней backdrop-filter убираем (см. .rec-c, .mat, .chapters);
   · display в классе СИЛЬНЕЕ браузерного [hidden]. Всё, что JS прячет
     атрибутом, обязано иметь парное [hidden]{display:none} — блок ниже;
   · иконки только SVG currentColor, эмодзи в интерфейсе нет;
   · на input/textarea обводки НЕТ НИКОГДА — светится рамка короба.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Мост со старой кремово-чёрной палитрой ───────────────────────────
   Имена, которые ещё читают локальные стили plan.html и разметка бота.
   Значения теперь берутся из системы, а не задаются заново: --cream,
   --black, --soft, --card, --line, --track, --green, --ink, --ink2,
   --taupe объявлены в system.css. Здесь остаётся только то, чего там нет. */
:root{
  /* «плотнее track» — роль ушла в рамки контролов и заливки чипов */
  --chtrack:var(--chip-line);
  /* Высота нижней навигации БЕЗ safe-area — её каждый прибавляет сам. От неё
     считают отступ страницы, тост и круглая кнопка: три места, где раньше
     стояли свои числа и панель легла бы поверх. Меняешь высоту — здесь. */
  --nzh:60px;
}

/* каркас скрыт, пока не знаем, есть ли сессия (см. booting в скрипте) */
:root.booting .wrap,:root.booting .toast,:root.booting .nzbar{visibility:hidden}

/* ── ⚠️ [hidden] · парные правила ─────────────────────────────────────
   JS прячет эти узлы атрибутом hidden. У каждого из них есть класс с
   display, а display в авторском правиле сильнее браузерного [hidden] —
   без блока ниже «скрытое» остаётся на экране. Добавляешь новому узлу
   display — добавляй сюда строку. */
.sub[hidden],h1[hidden],#nextMeet[hidden],
#list[hidden],#prog[hidden],.prog[hidden],#macrow[hidden],#allready[hidden],
#freerow[hidden],#msstage[hidden],#msurok[hidden],#freescreen[hidden],
#rail[hidden],.rec-err[hidden],.tc[hidden],.fab[hidden],.chip[hidden],
.nzbar[hidden],.nzpage[hidden],.nztab[hidden]{display:none}

/* ═══ КАРКАС ═══════════════════════════════════════════════════════════ */
html,body{margin:0;padding:0}
/* Содержимое над световым слоем body::after — иначе пятна лягут поверх.
   Снизу отведено место под нижнюю навигацию: без него последняя карточка
   каждого экрана уезжает под панель. */
/* Сверху телеграм рисует свою панель («Close · mini app»), и наши 16px
   упирались прямо в неё. Даём запас и уважаем вырез экрана. */
.wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;
  padding:calc(20px + env(safe-area-inset-top,0px)) 15px
          calc(var(--nzh) + 24px + env(safe-area-inset-bottom,0px))}

/* ── Шапка: знак, тумблер темы, профиль ─────────────────────────────── */
/* Шапке нужен воздух: знак, заголовок и подпись стояли вплотную и читались
   одной кучей. Верхний отступ — под вырез телеграма, нижний — до заголовка. */
.logo{position:relative;display:flex;align-items:center;gap:var(--s2);
  margin:var(--s1) 0 var(--s6)}
.logo .mark{width:26px;height:26px;border-radius:9px;display:block;object-fit:cover;flex:0 0 26px}
.logo span{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe)}
/* на узких экранах шапке хватает значка: текст логотипа уступает место теме и профилю */
@media (max-width:430px){
  /* Имя курса длиннее прежнего «ОСНОВАТЕЛИ»: чуть мельче трекинг и кегль,
     чтобы оно целиком помещалось рядом с тумблером темы и профилем. */
  .logo span:not(.mark){font-size:9.5px;letter-spacing:.10em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:52vw}
}
/* Тумблер темы. Стеклянный кружок — тот же материал, что у профиля рядом. */
.theme{display:none;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:50%;padding:0;cursor:pointer;color:var(--ink2);
  border:1px solid var(--glass-line);background:var(--glass-2);box-shadow:var(--inset-1);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.theme.on{display:inline-flex}
.theme:hover{color:var(--ink);transform:translateY(-1px)}
.theme svg{display:block}

/* профиль в шапке — только для веба, в Mini App шапку рисует Telegram */
/* Только кружок: капсула с именем рядом с аватаркой повторяла одно и то же
   дважды и весила больше самого знака курса. Имя человека — в меню и во
   вкладке «Профиль», в шапке достаточно лица. */
.me{margin-left:auto;display:none;align-items:center;cursor:pointer;font:inherit;color:var(--ink);
  border:0;border-radius:50%;padding:0;background:none;box-shadow:none;
  transition:transform var(--dur) var(--ease)}
.me.on{display:inline-flex}
.me:hover{transform:translateY(-1px)}
.me .ava{width:34px;height:34px;border-radius:50%;flex:0 0 34px;display:grid;place-items:center;
  overflow:hidden;font-size:13px;font-weight:700;letter-spacing:0;color:#fff;
  border:1px solid var(--glass-line);box-shadow:0 6px 16px -10px rgba(24,68,124,.45);
  background:linear-gradient(145deg,#0a82f7,#0755c9)}
.me .ava img{width:100%;height:100%;object-fit:cover}
.me .nm{display:none}   /* имя живёт в меню профиля, в шапке его дублировать незачем */

.memenu{position:absolute;right:0;top:42px;z-index:40;min-width:232px;padding:var(--s2);display:none;
  border:1px solid var(--glass-line);border-radius:var(--r-m);background:var(--glass-1);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 26px 56px -30px rgba(24,68,124,.55)}
.memenu.on{display:block}
.memenu .hd{padding:11px 12px 9px;border-bottom:1px solid var(--hair);margin-bottom:5px}
.memenu .hd b{display:block;font-size:14px;font-weight:650;color:var(--ink);letter-spacing:0}
.memenu .hd i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:0}
.memenu a,.memenu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  letter-spacing:0;font-size:13.5px;font-weight:540;color:var(--ink2);padding:10px 12px;
  border-radius:10px;cursor:pointer;text-decoration:none;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.memenu a:hover,.memenu button:hover{background:var(--blue-soft);color:var(--ink)}
.memenu .out{color:var(--alarm-ink)}

/* ── Заголовок экрана ───────────────────────────────────────────────── */
h1{font-family:var(--font-head);font-size:24px;font-weight:700;letter-spacing:-.02em;
  line-height:1.18;margin:0 0 2px}
/* Подпись и плашка — на одной строке, пока помещаются; тесниться не должны:
   при длинной подписи плашка уходит на свою строку целиком. */
/* Снизу отступ обязателен: плашка переносится на свою строку и упиралась
   прямо в первую карточку — визуально они слипались в один блок. */
.sub{display:flex;align-items:center;gap:10px var(--s3);
  margin:var(--s3) 0 var(--s5);flex-wrap:wrap}
.sub .t{font-size:12.5px;color:var(--muted);line-height:1.45;flex:1 1 auto;min-width:12em}
/* Метка «до первого дня» — инверсная плашка: переворачивается сама по теме. */
.pill{flex:none;font-size:11px;font-weight:600;color:var(--cream);background:var(--black);
  border-radius:999px;padding:6px 12px;white-space:nowrap}
.foot{text-align:center;font-size:12px;color:var(--muted);margin-top:var(--s4)}
/* Между подписью экрана и первой карточкой — свой воздух, иначе плашка
   «до первого дня» и карточка потока сливаются в одну полосу. */
#nextMeet{margin-top:var(--s5)}
#nextMeet:empty{margin-top:0}

/* ── Тост ───────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(var(--nzh) + 18px + env(safe-area-inset-bottom,0px));z-index:80;
  transform:translateX(-50%) translateY(10px);max-width:86%;text-align:center;
  padding:11px 16px;border-radius:var(--r-s);background:var(--black);color:var(--cream);
  font-size:13px;font-weight:560;line-height:1.35;box-shadow:var(--shadow-hero);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ ПРОГРЕСС ═════════════════════════════════════════════════════════ */
.prog{border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);padding:14px 16px;margin:15px 0 14px;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.prog-top .l{font-size:12.5px;font-weight:650;color:var(--head)}
.prog-top .n{font-size:16px;font-weight:700;font-family:var(--mono)}
.prog-top .n small{color:var(--dim);font-weight:500}
/* Полоса: стеклянная дорожка = заливка + кромка, заполнение синее.
   ⚠️ ОБА стопа градиента — в токене --bar-fill (system.css). Раньше
   тут был наполовину хардкод: первый стоп брался из var(--blue), второй
   оставался дневным #51adff — и в ночи градиент схлопывался в одну краску. */
.bar{height:6px;border-radius:99px;overflow:hidden;background:var(--track-bg);border:1px solid var(--track-line)}
.bar i{display:block;height:100%;border-radius:99px;
  background:var(--bar-fill);transition:width .5s var(--ease)}

/* ═══ ЧЕК-ЛИСТ ═════════════════════════════════════════════════════════ */
.list{display:flex;flex-direction:column;gap:var(--s2)}
.step{display:flex;gap:var(--s3);align-items:center;padding:12px 14px;
  border:1px solid var(--glass-line);border-radius:var(--r-m);background:var(--glass-3);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
/* Текущий шаг — единственная открытая поверхность в списке. */
.step.cur{border-color:var(--open-line);background:var(--open-bg)}
.cbx{flex:none;width:27px;height:27px;border-radius:50%;cursor:pointer;
  border:1.8px solid var(--tick-line);background:var(--tick-bg);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.cbx:active{transform:scale(.92)}
.cbx.done{background:var(--green);border-color:transparent}
.cbx svg{width:15px;height:15px;fill:none;stroke:var(--on-solid);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.cbx.done svg{opacity:1}
.mid{flex:1;min-width:0;cursor:pointer;padding:2px 0}
.mid b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mid i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.step.done .mid b{color:var(--taupe);text-decoration:line-through;text-decoration-color:var(--dim)}
.step.pending .mid b{color:var(--ink2)}
/* Шеврон — управляющий элемент, а не декор: --dim даёт 2.74:1 на светлом фоне
   (порог 3:1). Берём --taupe, он проходит в обеих темах. */
.go{flex:none;color:var(--taupe)}
/* Отметка «сейчас» — та же инверсная плашка, что у .pill. */
.now{flex:none;font-size:10.5px;font-weight:600;color:var(--cream);background:var(--black);
  border-radius:999px;padding:4px 9px}
/* заблокированные шаги (до проверки Mac / до VPN) */
.step.locked{opacity:.5}
.step.locked .cbx{border-color:var(--tick-line);background:transparent}
.step.locked .cbx svg{opacity:1;stroke:var(--dim);stroke-width:2;width:12px;height:13px}
.step.locked .mid b{color:var(--taupe);font-weight:600;text-decoration:none}
.step.locked .go{color:var(--dim)}

/* ── Mac — первый шаг (карточка сверху) ─────────────────────────────── */
#macrow{margin-bottom:var(--s2)}
.macrow.done{border-color:var(--open-line)}
.macrow.weak{border-color:var(--alarm-line);background:var(--alarm-bg)}
.macbx{border-color:var(--tick-line);color:var(--ink2);cursor:pointer}
.macbx svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.macbx.done{background:var(--green);border-color:transparent;color:var(--on-solid)}
.macbx.bad{background:var(--live);border-color:transparent;color:var(--on-solid)}
.macrow .mid i .tag{font-weight:650;color:var(--ink2)}

/* ═══ ШТОРКА ДЕТАЛЕЙ / СТРАНИЦА ШАГА ═══════════════════════════════════ */
.ov{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.ov.on{opacity:1;pointer-events:auto}
/* ⚠️ Лист НЕПРОЗРАЧНЫЙ (--cream, не стекло): под ним лежит текст страницы,
   и даже на 6% просвета он читается сквозь пункты как каша из двух слоёв.
   Стеклянность здесь проигрывает читаемости — проверено в LMS на .pod-nav. */
.sheet{width:100%;max-width:460px;max-height:90dvh;overflow-y:auto;
  border-radius:26px 26px 0 0;border-top:1px solid var(--glass-line);
  padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--cream);color:var(--ink);box-shadow:0 -30px 70px -30px rgba(4,12,24,.55);
  transform:translateY(20px);transition:transform .24s var(--ease)}
.ov.on .sheet{transform:translateY(0)}
.grip{width:38px;height:4px;border-radius:3px;background:var(--tick-line);margin:6px auto 12px}
/* Веб-переопределения шторки ОБЯЗАНЫ стоять ПОСЛЕ базовых правил: специфичность
   одинаковая, побеждает позднее в файле. Раньше они лежали в начале — и мобильный
   лист показывался на десктопе всегда. */
@media (min-width:900px){
  .ov{align-items:center;padding:32px 24px}
  .sheet{max-width:640px;max-height:82vh;padding:22px 28px 26px;
   border:1px solid var(--open-line);border-radius:var(--r-l);background:var(--pane);
   -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
   box-shadow:0 30px 70px -30px rgba(4,12,24,.7);transform:translateY(8px) scale(.98)}
  .ov.on .sheet{transform:none}
  .grip{display:none}
}

/* ── Шаг как отдельная страница (веб) ────────────────────────────────────
   Рельса этапов на ней скрыта: это именно другой экран, а не вкладка. Сверху
   панель: слева выход, справа отметка о выполнении — обе всегда на виду. */
.steptop{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding:8px 12px;margin-bottom:var(--s2);border-radius:var(--r-m);
  border:1px solid var(--glass-line);background:var(--glass-1);
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.backbtn{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  padding:0 var(--s4);border-radius:var(--r-m);cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--ink2);background:transparent;border:1px solid var(--line);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.backbtn:hover{background:var(--hover-bg);color:var(--ink)}
.steptop-act .sh-btn{margin:0;width:auto;min-width:220px}
.steppage{max-width:1180px;margin:0 auto;padding-top:var(--s5)}
/* Текст держим читаемой длиной строки и центрируем — иначе на широком мониторе
   он либо тянется через весь экран, либо липнет к левому краю с дырой справа. */
#p-step .sh-body{max-width:74ch}
/* У проверки Mac есть чем занять правую колонку: инструкция слева, зона для
   скриншота справа. У обычных шагов подвал пуст (кнопка ушла наверх) — колонка
   не появляется, и страница остаётся статьёй по центру. */
@media (min-width:1200px){
  #p-step #detailCard.has-side{display:grid;grid-template-columns:minmax(0,1fr) 400px;
   gap:36px;align-items:start}
  #p-step #detailCard.has-side .sh-head{grid-column:1/-1}
  #p-step #detailCard.has-side .sh-body{max-width:none}
  #p-step #detailCard.has-side #shFoot{position:sticky;top:96px}
  #p-step #detailCard.has-side .macup{margin-top:0}
}
#p-step .sh-x{display:none}
#p-step .sh-head{gap:13px;margin-bottom:var(--s4)}
#p-step .sh-num{width:34px;height:34px;font-size:15px}
#p-step .sh-title{font-size:26px;line-height:1.15;padding-top:3px}
#p-step .sh-body{font-size:15px;line-height:1.65}
#p-step .sh-body p{margin:0 0 14px}
#p-step .sh-body li{margin-bottom:var(--s2)}

.sh-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
/* Цифра — на инверсной плашке: --black в тёмной теме светлеет, --cream
   инвертируется в паре, поэтому цифра остаётся читаемой в обеих темах. */
.sh-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent-bg);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:650;font-family:var(--mono)}
/* чип-иконка вместо номера в шторке Mac */
.sh-num.chip{width:28px;height:28px;min-height:0;padding:0;border-radius:50%;
  color:var(--chip-ink);background:var(--chip-bg);border:1px solid var(--chip-line)}
.sh-num.chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh-title{flex:1;min-width:0;font-family:var(--font-head);font-size:18px;font-weight:700;
  letter-spacing:-.015em;line-height:1.2;padding-top:2px}
.sh-x{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;
  background:none;color:var(--dim);cursor:pointer;font-size:15px;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.sh-x:hover{background:var(--hover-bg);color:var(--ink)}
.sh-x svg{width:16px;height:16px}

.sh-body{font-size:14px;line-height:1.55;color:var(--ink2)}
.sh-body p{margin:0 0 10px}
.sh-body ul{margin:0 0 10px;padding-left:20px;list-style:disc}
.sh-body li{margin-bottom:5px}
.sh-body b{font-weight:650;color:var(--ink)}
/* Ссылка — синим: синий и есть акцент продукта. */
.sh-body a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--open-line)}
.sh-body a:active{background:var(--blue-soft)}
/* Ветка инструкции. Плоская карточка, а не стекло: она лежит внутри шторки. */
.sh-body .branch{border:1px solid var(--hair);border-radius:var(--r-s);overflow:hidden;margin:0 0 var(--s2);
  background:var(--card)}
.sh-body .branch .bh{padding:9px 12px;font-size:13px;font-weight:650;line-height:1.3}
.sh-body .branch.ok .bh{background:var(--ok-bg);color:var(--ok-ink)}
.sh-body .branch.warn .bh{background:var(--alarm-bg);color:var(--alarm-ink)}
.sh-body .branch .bb{padding:9px 12px;font-size:13.5px;line-height:1.5}
.sh-body .branch .bb ol{margin:0;padding-left:18px;list-style:decimal}
.sh-body .branch .bb li{margin-bottom:4px}
.sh-body .branch .bb ol li::marker{color:var(--taupe);font-weight:650}
.sh-body code{background:var(--chip-bg);border:1px solid var(--chip-line);border-radius:6px;
  padding:1px 5px;font-size:12.5px;font-family:var(--mono)}
/* Блок команды — карточка в тоне приложения: инверсная плашка в тёмной
   теме вспыхивала белым и выбивалась из стиля. */
.sh-body pre{background:var(--card);color:var(--ink);border:1px solid var(--hair);border-radius:var(--r-s);
  padding:12px 13px;font-size:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0 0 10px;
  font-family:var(--mono)}
.codewrap{margin:0 0 10px}
.codewrap pre{margin:0}
.copybtn{display:inline-flex;align-items:center;gap:6px;margin-top:7px;min-height:38px;
  padding:0 15px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--btn-ink);background:var(--btn-bg);border:1px solid var(--btn-line);box-shadow:var(--inset-1);
  transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.copybtn:active{transform:translateY(1px)}
.copybtn.ok{color:var(--ok-ink);background:var(--chip-on);border-color:transparent;box-shadow:none}
.copybtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Кнопка отметки шага. Основная — инверсная плашка, снятие отметки — тихая. */
.sh-btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;margin-top:var(--s2);min-height:48px;padding:0 var(--s5);
  border:1px solid transparent;border-radius:var(--r-m);font:inherit;font-size:14.5px;font-weight:650;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.sh-btn:active{transform:translateY(1px)}
.sh-btn.mark{background:var(--black);color:var(--cream)}
.sh-btn.mark:hover{background:var(--ink2);color:var(--cream)}
.sh-btn.unmark{background:transparent;border-color:var(--line);color:var(--ink2)}
.sh-btn.unmark:hover{background:var(--hover-bg);color:var(--ink)}

/* ── Проверка Mac: язык, загрузка снимка, вердикт ───────────────────── */
.lang-h{font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sub);margin:2px 0 7px}
.langtog{display:flex;gap:4px;padding:4px;margin:0 0 var(--s3);border-radius:999px;
  border:1px solid var(--chip-line);background:var(--chip-bg)}
.lt{flex:1;min-height:36px;border:0;border-radius:999px;background:transparent;font-family:inherit;
  font-size:13px;font-weight:620;color:var(--muted);cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.lt:hover{color:var(--ink)}
.lt.on{background:var(--seg-on);color:var(--ink)}

.macup{margin-top:6px}
.macup-h{font-size:14px;font-weight:650;color:var(--ink)}
.macup-s{font-size:13px;color:var(--muted);margin:3px 0 11px;line-height:1.45}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;
  border:1.5px dashed var(--soon-line);border-radius:var(--r-m);background:var(--soon-bg);
  padding:22px 14px;cursor:pointer;text-align:center;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.dropzone.drag{border-color:var(--open-line);background:var(--blue-soft)}
.dropzone.busy{opacity:.6;pointer-events:none}
.dz-ic{color:var(--dim);line-height:0;margin-bottom:2px}
.dz-ic svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dz-t{font-size:14.5px;font-weight:650;color:var(--ink)}
.dz-s{font-size:12.5px;color:var(--muted);line-height:1.4}
/* Загрузить снимок — акцентное действие экрана, единственное синее. */
.upbtn2{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;margin-top:9px;
  min-height:48px;padding:0 var(--s5);border:0;border-radius:var(--r-m);cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:650;color:var(--accent-ink);
  background:var(--accent-bg);
  box-shadow:0 16px 34px -18px var(--accent-glow),inset 0 1px var(--accent-sheen);
  transition:transform var(--dur) var(--ease)}
.upbtn2:hover{transform:translateY(-1px)}
.upbtn2:active{transform:translateY(1px)}
.upbtn2 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.verdict{display:none;margin-top:11px;border-radius:var(--r-s);padding:12px 13px;font-size:13.5px;line-height:1.5}
.verdict.on{display:block}
.verdict b{font-weight:700}
.verdict.ok{background:var(--ok-bg);color:var(--ok-ink)}
.verdict.bad{background:var(--alarm-bg);color:var(--alarm-ink);border:1px solid var(--alarm-line)}
.verdict.wait{background:var(--chip-bg);border:1px solid var(--chip-line);color:var(--ink2)}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:-2px;margin-right:6px;
  border:2px solid var(--chip-line);border-top-color:var(--blue);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.err{text-align:center;color:var(--alarm-ink);font-size:13px;padding:30px 10px}

/* ═══ СТУПЕНЬ, УРОКИ, ПОКУПКИ ══════════════════════════════════════════ */
.msplan{display:flex;flex-direction:column;gap:7px;padding:15px 16px;margin-bottom:11px;
  border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.msplan b{font-family:var(--font-head);font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.msplan span{font-size:13px;color:var(--ink2);line-height:1.55}
.msplan ol{margin:2px 0 0;padding-left:20px;list-style:decimal;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.msplan .msnote{font-size:11.5px;color:var(--muted)}

/* Кнопка урока: инверсная плашка во всю ширину ряда. */
.msplan .stepgo,.allready .stepgo{display:flex;align-items:center;gap:var(--s2)}
.msplan .stepgo{text-align:left;background:var(--black);color:var(--cream);border:0;border-radius:var(--r-m);
  min-height:46px;padding:12px 15px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;margin-top:4px;
  transition:background-color var(--dur) var(--ease)}
.msplan .stepgo:hover{background:var(--ink2)}
.msplan .stepgo:disabled{background:var(--dim);cursor:default}
/* Ряд урока: имя открывает урок здесь, самолётик шлёт его в чат. */
.msurow{display:flex;gap:7px;align-items:stretch}
.msurow .stepgo{flex:1;min-width:0}
.msuchat{flex:none;width:46px;margin-top:4px;border-radius:var(--r-m);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--btn-ink);
  border:1px solid var(--btn-line);background:var(--btn-bg);box-shadow:var(--inset-1);
  transition:transform var(--dur) var(--ease)}
.msuchat:hover{transform:translateY(-1px)}
.msuchat svg{width:17px;height:17px}
.msuchat:disabled{opacity:.55;transform:none}
/* Название урока живёт в span — общие правила подписи (.msplan span, .allready span)
   красили его в блёклый мелкий текст. Кнопка сама знает свой цвет и размер. */
.stepgo .mst{flex:1;min-width:0;font-size:inherit;color:inherit;line-height:1.35;opacity:1}
.stepgo .msv{flex:none;width:20px;height:20px;border-radius:50%;background:var(--green);
  display:none;align-items:center;justify-content:center}
.stepgo .msv svg{width:12px;height:12px;fill:none;stroke:var(--on-solid);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.stepgo.passed .msv{display:flex}

/* Возврат на ступень: тихая текстовая кнопка с воздухом. */
.msuback{display:block;background:none;border:0;color:var(--taupe);font:inherit;font-size:13px;
  cursor:pointer;padding:4px 0;text-align:left;
  transition:color var(--dur) var(--ease)}
.msuback:hover{color:var(--ink)}
.msuback.backstage{margin:14px 0 4px;padding:8px 0;font-size:14px}
/* Возврат «наружу» — пунктиром: это будущее/побочное направление, не действие экрана. */
.msback{width:100%;min-height:44px;padding:11px;margin-top:2px;cursor:pointer;font:inherit;font-size:12.5px;
  border:1px dashed var(--soon-line);border-radius:var(--r-m);background:var(--soon-bg);color:var(--muted);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.msback:hover{color:var(--ink);border-color:var(--open-line)}
.msback.backstage{margin-top:10px}

/* Экран бесплатных уроков: список тем же языком, что уроки ступени. */
#freescreen{display:flex;flex-direction:column;gap:var(--s2);margin-top:4px}
/* Экран урока: свой, в мини-аппе — заголовок, материал, «в чат». */
#msurok{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.ukick{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--taupe)}
.utitle{font-family:var(--font-head);font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.22;margin:0}
.uabout{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.uvideo{width:100%;max-width:100%;border-radius:var(--r-m);background:#000;display:block}
.udoc{display:flex;flex-direction:column;gap:6px;padding:15px 16px;
  border:1px solid var(--glass-line);border-radius:var(--r-m);background:var(--glass-3)}
.udoc b{font-size:14px;font-weight:650}
.udoc i{font-style:normal;font-size:12px;color:var(--muted)}
.uopen{display:inline-flex;align-items:center;justify-content:center;margin-top:4px;min-height:46px;
  padding:0 var(--s5);border-radius:var(--r-m);background:var(--black);color:var(--cream);
  font-size:14px;font-weight:650;text-decoration:none;text-align:center;
  transition:background-color var(--dur) var(--ease)}
.uopen:hover{background:var(--ink2);color:var(--cream)}
/* Прошедший интенсив — спокойнее живого: материал тот же, но не зовёт. */
.next.meet.pozadi .when{color:var(--taupe)}

/* Файлы к уроку: шаблоны и структуры из панели. */
.ufiles{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.ufiles>b{font-size:13px;font-weight:650;color:var(--head)}
.ufile{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:inherit;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-3);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ufile:hover{background:var(--glass-2);transform:translateX(2px)}
.ufile .fn{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ufile i{font-style:normal;font-size:11.5px;color:var(--muted);flex:none}
/* Кнопки экрана урока: крупные, во всю ширину. */
.ubtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;
  padding:0 var(--s5);border-radius:var(--r-m);font:inherit;font-size:15px;font-weight:650;cursor:pointer;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ubtn:active{transform:translateY(1px)}
.ubtn.uchat{background:var(--black);color:var(--cream);border:0}
.ubtn.uchat:hover{background:var(--ink2);color:var(--cream)}
/* «Пройден» — уже не действие, а отметка. */
.ubtn.udone{background:transparent;border:1px solid var(--line);color:var(--ink2);margin-top:6px}
.ubtn.udone svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.ubtn.udone.on{background:var(--ok-bg);border-color:transparent;color:var(--ok-ink);cursor:default}
.ubtn.udone.on svg{opacity:1}
.ubtn.udone.on:active{transform:none}
.ubtn:disabled{opacity:.55;transform:none}

/* Покупки: строка-чекбокс, галочка та же зелёная, что в подготовке. */
.buyrow{display:flex;align-items:flex-start;gap:11px;padding:11px 0;cursor:pointer;
  border-bottom:1px solid var(--hair);
  transition:color var(--dur) var(--ease)}
.buyrow:last-of-type{border-bottom:0}
.buyrow .bx{flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
  border:1.8px solid var(--tick-line);background:var(--tick-bg);
  display:flex;align-items:center;justify-content:center}
.buyrow .bx svg{width:13px;height:13px;fill:none;stroke:var(--on-solid);stroke-width:2.6;stroke-linecap:round;
  stroke-linejoin:round;opacity:0}
.buyrow.on .bx{background:var(--green);border-color:transparent}
.buyrow.on .bx svg{opacity:1}
.buyrow .tx b{display:block;font-size:14px;font-weight:650}
.buyrow.on .tx b{text-decoration:line-through;color:var(--taupe)}
.buyrow .tx i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}

/* ── Чек-лист пройден: пересадка дальше по ступени, а не тишина. ──────
   ГЕРОЙ: единственный плотный объект на экране. Стекло на него не вешаем. */
.allready{display:flex;flex-direction:column;gap:6px;padding:16px 18px;margin-bottom:var(--s3);
  border:1px solid var(--hero-line);border-radius:var(--r-l);
  background:var(--hero-bg);color:var(--hero-ink);box-shadow:var(--hero-edge)}
.allready b{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:-.015em}
.allready span{font-size:13px;color:var(--hero-sub);line-height:1.5}
.allready button{margin-top:var(--s2);align-self:flex-start;min-height:44px;padding:0 var(--s5);
  border:0;border-radius:var(--r-m);background:var(--hero-ink);color:var(--hero-on-ink);
  font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.allready .stepgo{text-align:left;margin-top:6px;min-height:46px;padding:11px 15px;
  background:rgba(255,255,255,.12);color:var(--hero-ink);border:1px solid var(--hero-hair);border-radius:var(--r-m);
  font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.allready .stepgo:hover{background:rgba(255,255,255,.18)}
.allready .stepgo:disabled{opacity:.55;cursor:default}
.allready .msurow{align-self:stretch}
.allready .msuchat{margin-top:6px;color:var(--hero-ink);border-color:var(--hero-hair);
  background:rgba(255,255,255,.12);box-shadow:none}
.allready .allready-note{margin-top:var(--s2);font-size:11.5px;color:var(--hero-sub)}

/* ═══ МОЙ КУРС: занятия потока, записи и материалы ═════════════════════ */
.course{margin:var(--s5) 0 26px}
.prep-h{display:flex;align-items:center;gap:var(--s2);width:100%;background:none;border:0;padding:0 2px;
  cursor:pointer;text-align:left}
.prep-h .prep-n{color:var(--head);font-weight:700;letter-spacing:0}
.prep-h .chev{margin-left:auto;color:var(--taupe);transition:transform .2s var(--ease)}
.prep-h.off .chev{transform:rotate(-90deg)}
#prep{overflow:hidden}
#prep.off{display:none}
.sec-h{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;margin:0 2px 10px}
.course-h{display:flex;align-items:baseline;gap:9px;margin-bottom:3px}
.course-h b{font-family:var(--font-head);font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.course-h span{font-size:12.5px;color:var(--muted)}
.course-sub{font-size:12.5px;color:var(--muted);margin-bottom:var(--s3)}
.course-note{font-size:12px;color:var(--muted);margin-top:4px}

/* ── Ближайшая встреча — ГЕРОЙ. Плотный объект, стекла на нём нет. ──── */
.next,.mnext{border:1px solid var(--hero-line);border-radius:var(--r-l);padding:16px 18px;margin-bottom:10px;
  background:var(--hero-bg);color:var(--hero-ink);box-shadow:var(--hero-edge)}
.next .when{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:500;color:var(--hero-kick)}
.next .tt{font-family:var(--font-head);font-size:16.5px;font-weight:700;letter-spacing:-.015em;margin:6px 0 2px}
.next a,.mnext .mbtn.light{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;
  padding:0 var(--s5);border-radius:var(--r-m);margin-top:var(--s3);
  background:var(--hero-ink);color:var(--hero-on-ink);text-decoration:none;font-size:14px;font-weight:700}
.next.meet{margin-bottom:14px}
.next .hint{font-size:12.5px;color:var(--hero-sub);margin-top:9px}
.next .meet-go{display:block;margin-top:var(--s2);padding:8px 0;min-height:34px;background:none;border:0;
  font:inherit;font-size:13px;color:var(--hero-sub);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;text-align:left;transition:color var(--dur) var(--ease)}
.next .meet-go:hover{color:var(--hero-ink)}

/* ── Карточка занятия ───────────────────────────────────────────────── */
.les{padding:14px 16px;margin-bottom:9px;
  border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.les .lh{display:flex;align-items:center;gap:11px}
.les .ic{flex:0 0 34px;height:34px;border-radius:var(--r-s);display:grid;place-items:center;color:var(--blue);
  background:var(--fi-bg);border:1px solid var(--fi-line)}
.les .lt{flex:1;min-width:0}
.les .lt b{display:block;font-family:var(--font-head);font-size:15px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink)}
.les .lt i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}

/* Плеер. Внутри стеклянной карточки — БЕЗ своего backdrop-filter: стекло
   в стекле мутит картинку вдвое и читается как грязь. */
.rec{position:relative;margin-top:11px;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:#000;max-width:760px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.rec video{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#000;-webkit-user-drag:none}
/* Водяной знак: маленькая приглушённая подпись поверх кадра, переезжает по площади. */
.rec .wm{position:absolute;left:6%;top:8%;z-index:2;pointer-events:none;
  font-size:10.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  color:rgba(255,255,255,.3);text-shadow:0 1px 2px rgba(0,0,0,.6);
  transition:left 1.4s var(--ease),top 1.4s var(--ease)}
.rec .wait{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;
  font-size:12.5px;color:rgba(255,255,255,.6)}
.rec.on .wait,.rec.dead .wait{display:none}
.rec-err{padding:12px 14px;font-size:12.5px;color:var(--ink2);background:var(--soft)}
/* Разворот на весь экран отдаём контейнеру: иначе подпись остаётся за кадром. */
.rec:fullscreen{max-width:none;border:0;border-radius:0;display:grid;place-items:center;background:#000}
.rec:fullscreen video{width:auto;max-width:100vw;max-height:100vh;aspect-ratio:auto}
.rec:fullscreen .chapters,.rec:fullscreen .chlabel,.rec:fullscreen .rec-c{display:none}
.rec-c{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--soft)}
.rec-c span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--ink)}
.rec-c i{font-style:normal;font-size:11.5px;color:var(--muted)}
/* Видеоплеер в тёмной теме остаётся чёрным — чёрный здесь осознанный. */
:root[data-theme="dark"] .rec{background:#000}

/* Материалы занятия — строки внутри стеклянной карточки, без своего стекла. */
.les .mats{margin-top:11px;display:flex;flex-direction:column;gap:7px}
.mat{display:flex;align-items:center;gap:10px;padding:11px 13px;text-decoration:none;color:var(--ink2);
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--glass-3);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.mat:hover{background:var(--glass-2);color:var(--ink);transform:translateX(2px)}
.mat:active{background:var(--hover-bg)}
.mat .mi{flex:0 0 18px;color:var(--blue)}
.mat .mt{flex:1;min-width:0;font-size:13.5px}
.mat .ms{font-size:11.5px;color:var(--muted)}

/* Курс закрыт — будущая поверхность, пунктиром. */
.closed{padding:20px 18px;text-align:center;
  border:1px dashed var(--soon-line);border-radius:var(--r-l);background:var(--soon-bg)}
.closed b{display:block;font-family:var(--font-head);font-size:15.5px;font-weight:700;
  color:var(--ink);margin-bottom:5px}
.closed span{font-size:13px;color:var(--muted);line-height:1.5}

/* ═══ ПУТЬ ИЗ ЭТАПОВ: рельса сверху, панель этапа снизу ════════════════ */
.rail{margin:var(--s5) 0 22px;position:relative}
.rail-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
  margin-inline:-15px;padding-inline:15px}
.rail-scroll::-webkit-scrollbar{display:none}
/* Каждый этап — стеклянная плитка. Без поверхности приглушённые читались
   как подписи, а не как кнопки: было непонятно, что по ним можно тыкать. */
.stage{position:relative;min-width:150px;scroll-snap-align:start;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  padding:11px 14px 12px;font:inherit;text-align:left;cursor:pointer;color:var(--ink2);
  border:1px solid var(--soon-line);border-radius:var(--r-m);background:var(--soon-bg);
  opacity:.7;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),
   border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.stage:hover{opacity:.92;border-color:var(--open-line);background:var(--glass-3);transform:translateY(-1px)}
.stage .srow{display:flex;align-items:center;height:20px}
.stage .snm{font-size:14px;font-weight:560;color:inherit;white-space:nowrap;line-height:1.2}
.stage .sdt{font-size:11.5px;color:var(--muted);line-height:1.2}
/* Текущий этап — единственный в полную силу: открытая поверхность + синяя кромка. */
.stage[aria-selected="true"]{opacity:1;color:var(--ink);border-color:var(--open-line);
  background:var(--open-bg);box-shadow:var(--inset-1)}
.stage[aria-selected="true"] .snm{font-weight:700}
.stage[aria-selected="true"] .sdt{color:var(--ink2)}
/* Отметка этапа: точка для пройденного, кольцо прогресса для текущего. */
.dot{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.8px solid var(--tick-line);background:var(--tick-bg);position:relative;z-index:1}
.dot svg{width:11px;height:11px;stroke:var(--on-solid);stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.stage.done .dot{background:var(--green);border-color:transparent}
.stage.done .dot svg{opacity:1}
.ring{flex:0 0 20px;width:20px;height:20px;position:relative;z-index:1}
.ring svg{width:20px;height:20px;display:block;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3}
.ring .rbg{stroke:var(--track)}
.ring .rfg{stroke:var(--blue);stroke-linecap:round}

.panel{display:none}
.panel.on{display:block}

/* ═══ ЗАНЯТИЕ: заголовок, таймкоды, выжимка ════════════════════════════ */
.lesson-h{margin-bottom:var(--s4)}
.lesson-h h2{font-family:var(--font-head);font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 4px}
.lesson-h .lmeta{font-size:12.5px;color:var(--muted)}
.grid{display:grid;gap:var(--s4)}

.tcs{margin-top:14px}
/* Дорожка глав под видео: блок на раздел, ширина пропорциональна длительности,
   заполнение — сколько этого раздела уже просмотрено.
   Плоская подложка, а не стекло: дорожка лежит внутри стеклянной карточки. */
.chapters{display:flex;gap:3px;padding:11px 12px 5px;background:var(--soft)}
.chapters button{flex:1 1 0;height:8px;min-width:6px;padding:0;border:0;border-radius:4px;
  background:var(--track);cursor:pointer;overflow:hidden;position:relative;transition:height .12s var(--ease)}
.chapters button:hover,.chapters button:focus-visible{height:12px;margin-top:-2px}
.chapters button i{display:block;height:100%;width:0;background:var(--blue);border-radius:4px}
/* Текущий раздел выделяем кольцом, а не цветом: цвет уже занят заполнением. */
.chapters button[aria-current="true"]{box-shadow:0 0 0 2px var(--blue-soft),0 0 0 1.5px var(--blue)}
.chlabel{padding:3px 12px 9px;font-size:12px;color:var(--ink2);min-height:18px;background:var(--soft)}

/* Без внутреннего скролла: список растёт, страница скроллится сама. Вложенная
   прокрутка на телефоне отбирает жест у страницы и путает. */
.tclist{display:flex;flex-direction:column;gap:2px}
/* hidden обязан быть СИЛЬНЕЕ display:flex ниже, иначе «скрытые» метки видны,
   а кнопка «Ещё N» щёлкает без всякого эффекта. */
.tc[hidden]{display:none}
.tc{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-s);border:0;
  background:transparent;font:inherit;text-align:left;color:var(--ink2);cursor:pointer;min-height:44px;
  border-left:2px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tc:hover{background:var(--hover-bg);color:var(--ink)}
.tc .tt{flex:0 0 58px;font-family:var(--mono);font-size:12.5px;text-align:center;padding:3px 6px;
  border-radius:7px;color:var(--chip-ink);background:var(--chip-bg);border:1px solid var(--chip-line)}
.tc .tl{font-size:13.5px;min-width:0}
.tc[aria-current="true"]{background:var(--blue-soft);border-left-color:var(--blue);color:var(--ink)}
.tc[aria-current="true"] .tt{background:var(--black);color:var(--cream);border-color:transparent}
.more{width:100%;min-height:44px;margin-top:6px;padding:10px 12px;cursor:pointer;font:inherit;font-size:12.5px;
  color:var(--btn-ink);background:var(--btn-bg);border:1px solid var(--btn-line);border-radius:var(--r-m);
  box-shadow:var(--inset-1);transition:transform var(--dur) var(--ease)}
.more:hover{transform:translateY(-1px)}

.sum{margin-top:var(--s5);max-width:75ch}
.sum p{font-size:14px;line-height:1.6;margin:0 0 14px;color:var(--ink2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s4)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 11px;border-radius:999px;
  font-size:11.5px;font-weight:650;white-space:nowrap;
  color:var(--chip-ink);background:var(--chip-bg);border:1px solid var(--chip-line)}
.chip svg{width:13px;height:13px}
.chip:empty{display:none}
.sum ul{margin:0 0 var(--s4);padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.sum li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:var(--ink2)}
.sum li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--blue);margin-top:8px}
.pit{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin-bottom:9px}
.pit .pt{flex:0 0 58px;font-family:var(--mono);font-size:12.5px;padding:3px 6px;cursor:pointer;font-weight:500;
  border-radius:7px;color:var(--chip-ink);background:var(--chip-bg);border:1px solid var(--chip-line);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pit .pt:hover{color:var(--blue);border-color:var(--open-line)}
.pit i{font-style:normal;color:var(--ink2)}
.gl{font-size:14px;line-height:1.5;margin-bottom:var(--s2);color:var(--ink2)}
.gl b{font-weight:650;color:var(--ink)}
/* Ожидание выжимки. ⚠️ Слоту нужна высота: без неё ответ приезжает после
   отрисовки и сдвигает список вниз. */
.skel{display:flex;flex-direction:column;gap:9px;min-height:66px}
.skel i{display:block;height:11px;border-radius:6px;background:var(--track);animation:skelp 1.6s infinite}
.skel i:nth-child(2){width:88%;animation-delay:.15s}
.skel i:nth-child(3){width:64%;animation-delay:.3s}
@keyframes skelp{0%,100%{opacity:.55}50%{opacity:1}}
.skel-note{font-size:12.5px;color:var(--muted);margin-top:var(--s3);display:flex;align-items:center;gap:7px}

/* ═══ ЧАТ ПО ЗАПИСИ ════════════════════════════════════════════════════ */
.chat{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--glass-line);border-radius:var(--r-l);background:var(--pane);
  box-shadow:var(--pane-edge);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.chat-h{padding:13px 16px;border-bottom:1px solid var(--hair)}
.chat-h b{display:block;font-size:14px;font-weight:650;color:var(--ink)}
.chat-h i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.feed{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px;min-height:200px}
.msg{max-width:85%;font-size:13.5px;line-height:1.5;white-space:pre-wrap;color:var(--ink2)}
/* ⚠️ display обязателен: чип профиля в шапке (.me) объявлен display:none, и
   своё сообщение в чате по записи наследовало это — человек писал вопрос и не
   видел его вовсе. */
.msg.me{display:block;align-self:flex-end;padding:9px 13px;border-radius:16px 16px 6px 16px;
  color:var(--ink);background:var(--chip-bg);border:1px solid var(--chip-line)}
.msg.ai{align-self:flex-start;border-radius:16px 16px 16px 6px}
.cut{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted);margin:2px 0}
.cut::before,.cut::after{content:"";flex:1;height:1px;background:var(--hair)}
.cempty{color:var(--ink2);font-size:13.5px;line-height:1.5}
.cempty b{display:block;color:var(--ink);font-size:14px;font-weight:650;margin-bottom:10px}
.sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.sug button{font:inherit;font-size:12.5px;min-height:38px;padding:0 14px;cursor:pointer;text-align:left;
  color:var(--btn-ink);background:var(--btn-bg);border:1px solid var(--btn-line);border-radius:999px;
  box-shadow:var(--inset-1);transition:transform var(--dur) var(--ease)}
.sug button:hover{transform:translateY(-1px)}
.think{display:flex;gap:4px;align-items:center;padding:2px 0}
.think i{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:think 1.2s infinite}
.think i:nth-child(2){animation-delay:.2s}
.think i:nth-child(3){animation-delay:.4s}
@keyframes think{0%,100%{opacity:.3}50%{opacity:1}}
.compose{border-top:1px solid var(--hair);padding:11px 12px}
.compose .crow{display:flex;gap:var(--s2);align-items:flex-end}
/* ⚠️ 15px, не мельче: на iOS Safari зумит страницу при фокусе в поле.
   Обводки нет — светится рамка самого поля (канон проекта). */
.compose textarea{flex:1;min-height:46px;max-height:120px;resize:none;font:inherit;font-size:15px;
  padding:12px 14px;color:var(--ink);border:1px solid var(--chip-line);border-radius:var(--r-s);
  background:var(--chip-bg);transition:border-color var(--dur) var(--ease)}
.compose textarea::placeholder{color:var(--dim)}
.compose textarea:focus{border-color:var(--open-line)}
.send{flex:0 0 46px;width:46px;height:46px;border-radius:var(--r-s);border:0;cursor:pointer;
  background:var(--black);color:var(--cream);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.send:hover{background:var(--ink2)}
.send:active{transform:translateY(1px)}
.send:disabled{background:var(--dim);cursor:default;transform:none}
.memo{font-size:11.5px;color:var(--muted);margin-top:var(--s2)}

/* ═══ БУДУЩЕЕ ЗАНЯТИЕ: рассказ и вопрос куратору ══════════════════════ */
.about{margin-top:18px;max-width:75ch}
.about p{font-size:14px;line-height:1.6;margin:0 0 var(--s3);color:var(--ink2)}
.ask{margin-top:var(--s4);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ask a{display:inline-flex;align-items:center;min-height:46px;padding:0 var(--s5);text-decoration:none;
  font-size:14px;font-weight:650;color:var(--btn-ink);background:var(--btn-bg);
  border:1px solid var(--btn-line);border-radius:var(--r-m);box-shadow:var(--inset-1);
  transition:transform var(--dur) var(--ease)}
.ask a:hover{transform:translateY(-1px)}
.ask span{font-size:12px;color:var(--muted)}

/* ── Круглая кнопка «спросить по записи» ─────────────────────────────────
   Висит поверх страницы, чтобы вопрос можно было задать в любой момент
   просмотра. От 1120px не нужна — там чат стоит колонкой справа. */
.fab{position:fixed;right:16px;bottom:calc(var(--nzh) + 14px + env(safe-area-inset-bottom,0px));z-index:55;
  width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--accent-ink);
  background:var(--accent-bg);
  box-shadow:0 18px 38px -16px var(--accent-glow),inset 0 1px var(--accent-sheen);
  transition:transform var(--dur) var(--ease)}
.fab:active{transform:scale(.94)}
/* Пока открыта шторка (чат или детали шага) — кнопка не должна светиться сквозь
   затемнение: она ниже оверлея, но полупрозрачный фон её не скрывает. */
body:has(.ov.on) .fab{display:none}
/* Кнопка принадлежит панели прошедшего занятия, а та живёт во вкладке
   «Сейчас». Сама кнопка висит ВНЕ .wrap, поэтому прячем её по вкладке с
   <body>, а не общим правилом .nznow. */
body:not([data-nz="now"]) .fab{display:none}

/* ═══ НИЖНЯЯ НАВИГАЦИЯ: Сейчас · Курсы · Записи · Профиль ════════════════
   Четыре вкладки — единственный вход в записи занятий, уроки и профиль.
   Переключение живёт в cabinet/tabs.js, здесь только вид и место.

   Правила, которые легко нарушить:
   · панель не имеет права перекрывать содержимое — снизу у .wrap отведено
     ровно var(--nzh) + safe-area, и тост с круглой кнопкой подняты туда же;
   · панель НЕ внутри .wrap и НЕ внутри шторки: .sheet перезаписывают целиком;
   · при открытой шторке и при поднятой клавиатуре панели нет — см. ниже;
   · чужая вкладка прячется display:none, а не выгрузкой: экраны «Сейчас»
     держат состояние (открытый урок, выбранный этап) и должны его пережить.
   ────────────────────────────────────────────────────────────────────── */
/* Узлы вкладки «Сейчас» — существующая разметка главного экрана.
   Три класса в селекторе бьют .panel.on{display:block}, иначе панель
   подготовки светилась бы сквозь остальные вкладки. */
.wrap:not([data-nz="now"]) .nznow{display:none}
/* Корни трёх остальных вкладок. Показываем по id — он бьёт любой класс,
   который наполнение потом принесёт с собой. */
.nzpage{display:none}
.wrap[data-nz="courses"] #nz-courses,
.wrap[data-nz="recs"] #nz-recs,
.wrap[data-nz="me"] #nz-me{display:block}
/* Заголовок вкладки живёт ВНУТРИ её корня, а не в общей шапке: у общего h1
   уже трое хозяев (courseMode, экранСтупени, шапкаСтупени) — четвёртый
   превратил бы шапку в кашу из двух экранов. */
.nzpage>h1{margin-bottom:var(--s5)}

.nzbar{position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--glass-line);background:var(--glass-1);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 -20px 44px -32px rgba(24,68,124,.5)}
.nzrow{display:flex;align-items:stretch;max-width:460px;margin:0 auto}
.nztab{flex:1 1 0;min-width:0;height:48px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:inherit;letter-spacing:0;color:var(--taupe);
  transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}
/* Подложка под значком — тот же «мягкий синий», что у чипов: активная вкладка
   читается и без цвета, одним пятном. Плотной заливки здесь нет: единственный
   плотный объект на экране — герой. */
.nztab .ni{display:grid;place-items:center;width:46px;height:26px;border-radius:999px;
  transition:background-color var(--dur) var(--ease)}
.nztab .ni svg{display:block;width:21px;height:21px}
.nztab .nl{font-size:11px;font-weight:650;line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Акцент нижней панели — свой, темнее общего --blue: на белом фоне панели
   системный синий давал 4.26:1, а подпись активной вкладки читалась хуже
   соседних неактивных. Тёмная тема берёт светлый конец шкалы. */
.nztab.on{color:#0B63C4}
:root[data-theme="dark"] .nztab.on{color:#7FB6F5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nztab.on{color:#7FB6F5}}
.nztab.on .ni{background:var(--blue-soft)}
.nztab:hover{color:var(--ink2)}
.nztab.on:hover{color:var(--blue)}
.nztab:active{transform:scale(.94)}
/* Шторка чата и деталей шага затемняет страницу, но полупрозрачный фон не
   скрывает панель под собой — гасим её тем же приёмом, что и круглую кнопку. */
body:has(.ov.on) .nzbar{display:none}
/* Клавиатура в вебвью телеграма поднимается ПОВЕРХ страницы, и fixed-панель
   считает низ по старому экрану: либо прыжок, либо панель на поле ввода.
   Пока человек печатает, навигация не нужна — класс ставит tabs.js. */
@media (max-width:899px){
  body.nz-kb .nzbar{display:none}
}

/* ═══ ВЕБ-ВЕРСИЯ: во всю ширину экрана, занятия и шаги в колонки ═══════ */
@media (min-width:900px){
  .wrap{max-width:1320px;padding:34px 40px calc(var(--nzh) + 44px)}
  .nzrow{max-width:640px}
  h1{font-size:30px}
  #list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:start}
  .step{margin-bottom:0;padding:15px 16px}
  .step:hover{border-color:var(--open-line);background:var(--glass-2);transform:translateY(-1px)}
  /* Занятия — плиткой: одно занятие с записью занимает колонку, а не всю строку,
     иначе на широком экране видео разъезжается на полтора метра. */
  .course{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:var(--s3);align-items:start}
  .course-h,.course-sub,.next,.course-note,.closed{grid-column:1/-1}
  .course-sub{margin-bottom:0}
  .next{margin-bottom:0}
  .les{margin-bottom:0}
  .rail-scroll{margin-inline:0;padding-inline:0;overflow:visible}
  .stage{flex:1}
}
@media (min-width:1250px){
  #list{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:1120px){
  .grid{grid-template-columns:minmax(560px,1fr) 400px;gap:var(--s6);align-items:start}
  .chat{position:sticky;top:var(--s6);height:min(620px,calc(100dvh - 140px))}
  .fab{display:none}
}
@media (max-width:1119px){ .side-chat{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
   transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Переключатель платформы над чек-листом. Не вкладка и не фильтр списка —
   заявление «вот мой компьютер», от которого зависят сами шаги. */
.platrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
         margin:0 0 10px;padding:10px 14px;border-radius:14px;
         border:1px solid var(--line);background:var(--pane)}
.platrow .pl-l{font-size:13.5px;color:var(--muted)}
.platrow .pl-sw{display:flex;gap:4px;padding:3px;border-radius:99px;background:var(--btn-bg);
                border:1px solid var(--btn-line)}
.platrow .pl-b{appearance:none;border:0;background:transparent;color:var(--btn-ink);cursor:pointer;
               padding:7px 16px;border-radius:99px;font:600 13px/1 Montserrat,sans-serif;
               transition:background .18s ease,color .18s ease}
.platrow .pl-b.on{background:var(--accent-bg);color:var(--accent-ink)}
@media (max-width:420px){
  .platrow{padding:9px 11px}
  .platrow .pl-b{padding:7px 12px}
}

/* Переключатель платформы внутри блока подготовки: компактнее общего. */
.nzk-plsw{margin:10px 0 4px;padding:8px 12px}

/* Пункт подготовки в интенсиве — кнопка: вся строка открывает шаг шторкой. */
.nzk-preps .nzk-prep-i{appearance:none;width:100%;border:0;background:transparent;cursor:pointer;
  font:inherit;color:inherit;text-align:left}
.nzk-preps .nzk-prep-i:hover{background:var(--hover-bg);border-radius:10px}
.nzk-preps .nzk-prep-t{flex:1;min-width:0}
.nzk-preps .nzk-prep-i > svg{flex:none;width:14px;height:14px;color:var(--dim);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Листание шагов в шапке шторки: стрелки и счёт. */
.sh-nav{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.sh-nav i{font-style:normal;font-size:12px;color:var(--muted);min-width:44px;text-align:center}
.sh-nb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--btn-line);
  background:var(--btn-bg);color:var(--btn-ink);cursor:pointer}
.sh-nb svg{width:15px;height:15px}
.sh-nb[disabled]{opacity:.35;cursor:default}
/* Заголовок в шапке больше не тянется на всю ширину — навигация справа. */
.sh-head .sh-title{flex:1}

/* Плашка «шаг подготовки» в карточке занятия: приоткрыть инструкцию на месте. */
.ns-podg,.pl-podg{display:flex;flex-direction:column;gap:3px;width:100%;margin:0 0 12px;
  padding:12px 14px;border-radius:12px;border:1px dashed var(--open-line);background:var(--open-bg);
  cursor:pointer;text-align:left;font:inherit;color:inherit}
.ns-podg .ns-podg-k,.pl-podg .k{font:600 10.5px/1.4 var(--mono,monospace);letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue)}
.ns-podg b,.pl-podg b{font-size:14.5px;font-weight:700;color:var(--ink)}
.ns-podg i,.pl-podg i{font-style:normal;font-size:12px;color:var(--muted)}

/* Строка «Подготовка и уроки» на идущем занятии: карточка с иконкой, чтобы не
   терялась среди крупных блоков и не липла к соседям. */
.ns-more{display:flex;align-items:center;gap:10px;width:100%;margin:14px 0 10px;padding:14px 16px;
  border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:600 14px/1.3 Montserrat,sans-serif;cursor:pointer;text-align:left}
.ns-more:hover{border-color:var(--open-line)}
.ns-more .ns-more-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--open-bg);color:var(--blue)}
.ns-more .ns-more-ic svg{width:17px;height:17px}
.ns-more .ns-more-t{flex:1;min-width:0}
.ns-more > svg{flex:none;width:15px;height:15px;color:var(--dim);transition:transform .18s ease}
.ns-more.on > svg{transform:rotate(180deg)}

/* ── Плашка «вступите в чат интенсива» (вкладка «Сейчас», самый верх) ─────── */
.ns-chat{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:14px 16px;
  border-radius:14px;border:1px solid var(--open-line);background:var(--pane);
  cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);
  transition:border-color .2s}
.ns-chat:hover{border-color:var(--accent-ink,var(--ink))}
.ns-chat .ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--accent-bg);color:var(--accent-ink)}
.ns-chat .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ns-chat .t b{font-size:14.5px;font-weight:700;line-height:1.25}
.ns-chat .t i{font-style:normal;font-size:12px;color:var(--muted);line-height:1.35}
.ns-chat .arr{flex:none;color:var(--muted)}

/* ── Полоска шагов на карточке занятия (экран «идёт») ─────────────────────
   Сегмент — кнопка своего шага, как на странице плана: полоска рисуется
   внутри кнопки повыше, иначе в 5 точек пальцем не попасть. */
.ns-seg{display:flex;gap:4px;margin:10px 0 0}
.ns-seg button{flex:1;min-width:3px;height:24px;padding:0;border:0;background:transparent;
  cursor:pointer;display:flex;align-items:center}
.ns-seg button::before{content:'';flex:1;height:5px;border-radius:999px;background:var(--track)}
.ns-seg button.pass::before{background:var(--green)}
.ns-seg button.on::before{background:var(--blue)}

/* Урок в шторке: правило «ссылки шторки — голубые с подчёркиванием» не должно
   перекрашивать кнопку «Читать целиком» и карточки файлов — у них свои цвета,
   согласованные с парой --black/--cream в обеих темах. */
.sh-body .uopen{background:var(--black);color:var(--cream);border-bottom:0}
.sh-body .uopen:active{background:var(--ink2);color:var(--cream)}
.sh-body .ufile{color:inherit;border-bottom:0;font-weight:inherit}

/* ── Экран бесплатного урока: переключатель «Урок | Чат» и чат по уроку ──── */
.usw{display:flex;gap:6px;margin:2px 0 14px;padding:4px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);width:fit-content}
.usw-b{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;
  padding:8px 16px;border-radius:9px;font:600 13.5px/1 Montserrat,sans-serif}
.usw-b.on{background:var(--accent-bg);color:var(--accent-ink)}
.uchat-pane{display:flex;flex-direction:column;gap:12px}
.uchat-lenta{display:flex;flex-direction:column;gap:8px;min-height:120px;max-height:52vh;
  overflow-y:auto;padding:2px}
.uchat-pusto{font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0}
.uc{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.uc-q{align-self:flex-end;background:var(--accent-bg);color:var(--accent-ink);border-bottom-right-radius:5px}
.uc-a{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink);
  border-bottom-left-radius:5px}
.uc-a.wait{color:var(--muted)}
.uchat-row{display:flex;gap:8px}
.uchat-in{flex:1;min-width:0;height:46px;padding:0 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:14.5px;outline:none}
.uchat-in::placeholder{color:var(--muted)}
.uchat-row:focus-within .uchat-in{border-color:var(--open-line)}
.uchat-go{flex:none;appearance:none;border:0;border-radius:12px;padding:0 18px;cursor:pointer;
  background:var(--black);color:var(--cream);font:650 14px/1 Montserrat,sans-serif}
.uchat-go[disabled]{opacity:.5;cursor:default}

/* ── Встроенный просмотр PDF-урока в кабинете (как на /uroki) ────────────── */
.udoc-view{margin:0 0 6px}
.udoc-view canvas{width:100%;height:auto;display:block;border-radius:12px;margin:0 0 8px;background:#fff}
.udoc-view .uwait,.uwait{color:var(--muted);font-size:13px;padding:14px 0}
.udoc-alt{margin:0 0 10px;font-size:12.5px}
.udoc-alt a{color:var(--muted)}

/* Панель «Урок»: обёртка вкладки повторяет колонку экрана урока — без этого
   кнопки и блоки внутри слипались (gap жил на #msurok, а не тут). */
[data-usw-pane="urok"]{display:flex;flex-direction:column;gap:10px}
/* ⚠️ hidden слабее display:flex — прячем явно, уже наступали (.gotovo). */
.uchat-pane[hidden],[data-usw-pane="urok"][hidden]{display:none}
:root{--blue-hover:var(--blue)}

/* Письменная версия урока под плеером. */
.updf{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.updf-h{font-size:14.5px;font-weight:700;color:var(--ink)}