/* «Живое небо» (TASK 695) — стекло ПроУрока и кабинета «Дети с ОВЗ» поверх видео-неба.
   Решения утверждены Питом 27–28.09.2026: Проектирование/Живое_небо/РЕШЕНИЯ.md.
   Значения стекла (плотность, цвет текста, блик) задаёт Код/sky/sky.js: он смотрит, что лежит
   под карточками, и подбирает их так, чтобы текст держал 4,5 : 1.

   Правило ночи: у чего фон светлый и постоянный (янтарная кнопка, белые поля, «бумага»),
   текст всегда тёмный; всё остальное — на стекле, где цвет текста меняется вместе с фоном.

   Всё, кроме @property, — под @supports color-mix: браузер без него (Chrome до 111, например
   последний Chrome на Windows 7) получает прежний вид целиком, а не прозрачные панели с
   нечитаемым текстом. sky.js проверяет то же условие и в таком браузере не запускается.

   Хексы здесь — осознанное исключение из правила «только var(--ds-*)»: у стекла и неба своя
   палитра (мятное стекло, тёмный текст «бумаги»), её нет в дизайн-системе продукта. */

@property --sk-glass-a { syntax: '<number>'; inherits: true; initial-value: .3; }
@property --sk-glass-c { syntax: '<color>';  inherits: true; initial-value: #ffffff; }
@property --sk-ink     { syntax: '<color>';  inherits: true; initial-value: #0f1f1a; }
@property --sk-ink2    { syntax: '<color>';  inherits: true; initial-value: #2f4239; }
@property --sk-ink3    { syntax: '<color>';  inherits: true; initial-value: #4a5d55; }
@property --sk-green   { syntax: '<color>';  inherits: true; initial-value: #1b6b4a; }
@property --sk-accent  { syntax: '<color>';  inherits: true; initial-value: #1f8c63; }
@property --sk-accent-ink { syntax: '<color>'; inherits: true; initial-value: #1b6b4a; }
@property --sk-blur    { syntax: '<length>'; inherits: true; initial-value: 16px; }
@property --sk-glint-angle { syntax: '<angle>'; inherits: true; initial-value: 30deg; }
@property --sk-glint-a { syntax: '<number>'; inherits: true; initial-value: .8; }
@property --sk-hdr-a   { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --sk-logo-a  { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --sk-pick-c  { syntax: '<color>';  inherits: true; initial-value: #aff0d6; }
@property --sk-pick-a  { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --sk-chat-a  { syntax: '<number>'; inherits: true; initial-value: .5; }
@property --sk-me-a    { syntax: '<number>'; inherits: true; initial-value: .8; }

@supports (background: color-mix(in srgb, red 50%, transparent)) {

:root {
  --sk-tint:       color-mix(in srgb, var(--sk-glass-c) calc(var(--sk-glass-a) * 100%), transparent);
  --sk-tint-hi:    color-mix(in srgb, var(--sk-glass-c) calc(min(var(--sk-glass-a) + .12, .95) * 100%), transparent);
  --sk-tint-hover: color-mix(in srgb, var(--sk-glass-c) calc(min(var(--sk-glass-a) + .26, .97) * 100%), transparent);
  --sk-line:       color-mix(in srgb, #ffffff 34%, transparent);
  --sk-hdr-tint:   color-mix(in srgb, var(--sk-glass-c) calc(var(--sk-hdr-a) * 100%), transparent);
  /* Цветное стекло плашек главной: зерно + диагональный блик + сам цвет (--sk-pick-c/-a от sky.js) */
  --sk-block:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%),
                    color-mix(in srgb, var(--sk-pick-c) calc(var(--sk-pick-a) * 100%), transparent);
  --sk-block-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%),
                    color-mix(in srgb, var(--sk-pick-c) calc(min(var(--sk-pick-a) + .14, .97) * 100%), transparent);
  --sk-block-edge:  inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22);
  transition: --sk-glass-a .7s ease, --sk-glass-c .7s ease, --sk-ink .7s ease, --sk-ink2 .7s ease,
              --sk-ink3 .7s ease, --sk-green .7s ease, --sk-accent 1s ease, --sk-accent-ink 1s ease,
              --sk-glint-angle .5s ease, --sk-glint-a .8s ease, --sk-pick-c .6s ease, --sk-pick-a .6s ease, --sk-hdr-a .6s ease, --sk-logo-a .6s ease, --sk-chat-a .6s ease, --sk-me-a .6s ease;
}

/* ---------- сцена ---------- */
body { background: #8cc2ef url(/sky/art/sky_day_poster.jpg) center / cover no-repeat fixed !important; }
#skyScene { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
#skyScene canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- шапка «Островок» (классы sk-hdr-island / sk-side-island стоят на <body> в разметке) ---------- */
/* Шапка — светлое стекло, как у левой панели. Логотип белый — кладём его на зелёный квадратик,
   как иконку приложения; кнопки перекрашиваем под тёмный текст. */
body.sk-hdr-island header {
  background: var(--sk-hdr-tint) !important;
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.5); backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  box-shadow: inset 0 -1px 0 var(--sk-line), 0 10px 30px -18px rgba(6,12,36,.4) !important;
}
/* ✅ «Островок» — выбран Питом 27.09.2026 */
body.sk-hdr-island header {
  margin: 10px 12px 0; border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 14px 34px -18px rgba(6,12,36,.5) !important;
}
body.sk-hdr-island .logo-svg-wrap {
  width: 40px; height: 40px; padding: 5px; box-sizing: border-box;
  border-radius: 11px; background: var(--ds-green-deep, #1b6b4a);
  box-shadow: 0 6px 16px -8px rgba(6,12,36,.6);
}
/* Логотип — на своей стеклянной капсуле: шапку можно держать почти прозрачной, а надпись
   «ПроУрок / Помощник учителя» читается на любом небе. Плотность капсулы подбирает sky.js. */
body.sk-hdr-island header .logo {
  padding: 4px 14px 4px 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--sk-glass-c) calc(var(--sk-logo-a) * 100%), transparent);
  box-shadow: inset 0 0 0 1px var(--sk-line);
}
body.sk-hdr-island .logo-name { color: var(--sk-ink); }
body.sk-hdr-island .logo-name em { color: var(--sk-accent-ink); }
body.sk-hdr-island .logo-tag { color: var(--sk-ink2); }
body.sk-hdr-island .status-pill,
body.sk-hdr-island .user-chip,
body.sk-hdr-island .ws-seg { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }
body.sk-hdr-island .user-name { color: var(--sk-ink); }
body.sk-hdr-island .ws-seg-link { color: var(--sk-ink2); }
body.sk-hdr-island .ws-seg-on { background: var(--ds-green-deep, #1b6b4a); color: #fff; }
body.sk-hdr-island header .replay-tour-btn,
body.sk-hdr-island header .btn-logout {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent);
  border-color: color-mix(in srgb, var(--sk-ink) 16%, transparent); color: var(--sk-ink);
}
body.sk-hdr-island header .replay-tour-btn:hover,
body.sk-hdr-island header .btn-logout:hover { background: color-mix(in srgb, var(--sk-glass-c) 85%, transparent); }
/* «Онлайн» в шапке не нужен (решение Пита 27.09.2026) */
.status-pill { display: none !important; }
/* Элементы шапки, которые появляются по состоянию учителя — перекрашены под светлое стекло */
body.sk-hdr-island .quota-chip { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }
body.sk-hdr-island .quota-chip strong { color: var(--sk-ink); }
/* Пустой счётчик (у подписчика и счётчик, и дни скрыты) не рисуем — иначе висит пустая капсула */
.quota-chip:has(#hdrQuota[style*="none"]):has(#hdrTrial[style*="none"]) { display: none !important; }
body.sk-hdr-island #hdrTrial { color: #a8661a !important; }
body.sk-hdr-island .access-badge { box-shadow: inset 0 0 0 1px color-mix(in srgb, #cf8a2e 35%, transparent); }
body.sk-hdr-island #demoBadge { background: color-mix(in srgb, #e0a64a 30%, transparent) !important; color: #7a4a0e !important; }
body.sk-hdr-island #demoLoginBtn {
  background: var(--ds-green-deep, #1b6b4a); border-color: var(--ds-green-deep, #1b6b4a); color: #fff;
}
body.sk-hdr-island #demoLoginBtn:hover { background: var(--ds-green-deeper, #155a3e); }
/* Полосы под шапкой («доступ закончился», «вы смотрите без регистрации») — тоже островки */
body.sk-side-island .access-bar {
  margin: 8px 12px 0; border-radius: 14px; border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 10px 24px -14px rgba(6,12,36,.45);
}

/* ---------- токены текста внутри стекла ---------- */
.sidebar, .home-v3, .site-footer, body.sk-hdr-island header {
  --ds-ink: var(--sk-ink);  --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink3); --ds-ink-4: var(--sk-ink3);
  --ink: var(--sk-ink);     --ink2: var(--sk-ink2);     --ink3: var(--sk-ink3);     --ink4: var(--sk-ink3);
}
/* На почти прозрачном стекле светло-серые мелкие подписи тонут в небе. В панели и подвале
   их делаем темнее (как второй уровень текста) — стекло может оставаться прозрачным. */
.sidebar, .site-footer {
  --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink2);
}

/* ---------- сайдбар ---------- */
.sidebar {
  background: var(--sk-tint) !important;
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  border-right: 1px solid var(--sk-line) !important;
}
.sidebar .nav-item:hover { background: color-mix(in srgb, var(--sk-glass-c) 38%, transparent); color: var(--sk-ink); }
.sidebar .nav-item.active { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }
.sidebar .nav-item.active .nav-text small { color: var(--sk-ink2); }
.sidebar .nav-icon,
.sidebar .nav-item.active .nav-icon { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent); }
.sidebar .nav-icon i[data-lucide],
.sidebar .nav-item.active .nav-icon i[data-lucide] { stroke: var(--sk-green); }
.sidebar .sb-sep { background: color-mix(in srgb, var(--sk-ink) 16%, transparent); }
.sidebar .nav-ext-arrow { color: var(--sk-ink2); }
.sidebar .btn-new-session {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent);
  border-color: var(--sk-line); color: var(--sk-ink);
}
.sidebar .btn-new-session:hover { background: color-mix(in srgb, var(--sk-glass-c) 80%, transparent); color: var(--sk-ink); }

/* ✅ Левая панель — островком, как шапка (решение Пита 27.09.2026): отдельная плавающая
   плашка с отступами и скруглением вместо полосы во всю высоту. Шапка стоит с отступом
   10/12 px, панель продолжает ту же сетку: 12 px слева, 12 px под шапкой и над подвалом. */
body.sk-side-island .sidebar {
  margin: 12px 0 12px 12px;
  border-radius: 18px;
  border-right: 0 !important;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 14px 34px -18px rgba(6,12,36,.5);
}
/* Подвал — тоже островок: небольшая плашка по центру снизу, а не полоса во всю ширину */
body.sk-side-island .site-footer {
  width: fit-content; max-width: calc(100% - 24px);
  margin: 0 auto 10px;
  padding: 6px 16px;
  border-radius: 12px;
  border-top: 0 !important;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 10px 24px -14px rgba(6,12,36,.5);
}

/* ---------- подвал с юрссылками ---------- */
.site-footer {
  background: var(--sk-tint) !important;
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  border-top: 1px solid var(--sk-line) !important;
  color: var(--sk-ink3);
}
.site-footer a:hover { color: var(--sk-ink); }

/* ---------- центр: главная прозрачная, остальные экраны на плотном стекле ---------- */
.center, .screen, .scroll-area { background: transparent !important; }
body.sky-work .center::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--ds-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}

/* ---------- главная (home-v3, TASK 688/692) ---------- */
/* Подписи прямо на небе — в стеклянных капсулах: голым текстом они не читаются */
.home-v3 .home-head {
  position: relative; width: fit-content; max-width: 100%;
  padding: 16px 24px 18px; border-radius: var(--ds-r-xl);
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
.home-v3 .home-head .home-title { margin-bottom: 0; }
.home-v3 .home-title span { color: var(--sk-accent-ink); }
/* Вторая строка приветствия — по погоде, часу и поводу (sky.js → mood). Пустая — не занимает места. */
.home-v3 .home-mood { margin: 8px 0 0; font-size: var(--ds-text-md); line-height: 1.45; color: var(--sk-ink2); max-width: 46ch; }
.home-v3 .home-mood:empty { display: none; }
.home-v3 .home-h2 {
  position: relative; width: fit-content; padding: 6px 14px; border-radius: var(--ds-r-full);
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge);
}
.home-v3 .home-help .home-h2 { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }

/* Предмет и класс. Стекло блока — отдельным слоем позади него: если повесить размытие
   на сам блок, чипы внутри перестанут видеть фон (браузер считает такой блок границей,
   дальше которой вложенное стекло не заглядывает). */
.home-v3 .home-pick { position: relative; background: transparent; border-color: transparent; }
.home-v3 .home-pick::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--sk-tint);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 1.4)) saturate(1.5); backdrop-filter: blur(calc(var(--sk-blur) * 1.4)) saturate(1.5);
  box-shadow: 0 30px 70px -30px rgba(6,12,36,.55);
}
/* Матовое цветное стекло блока «Ваш предмет»: цвет и прозрачность подбирает sky.js
   (--sk-pick-c / --sk-pick-a). Сверху — диагональный блик и мелкое зерно, как у
   пескоструйного стекла; размытие вдвое сильнее, чем у остальных стёкол. */
body.sk-side-island .home-v3 .home-pick::before {
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 30px 70px -30px rgba(6,12,36,.55);
}
/* Чипы на размытой подложке — своё размытие им не нужно, хватает оттенка */
.home-v3 .s-chip, .home-v3 .c-chip, .home-v3 .hh-quick .chip {
  background: color-mix(in srgb, var(--sk-glass-c) 52%, transparent);
  border-color: color-mix(in srgb, var(--sk-ink) 12%, transparent);
  color: var(--sk-ink2);
}
.home-v3 .s-chip:hover, .home-v3 .c-chip:hover, .home-v3 .hh-quick .chip:hover { background: color-mix(in srgb, var(--sk-glass-c) 82%, transparent); }
.home-v3 .s-chip.sel, .home-v3 .c-chip.sel { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
.home-v3 .home-pick-hint.done { color: var(--sk-accent-ink); }

/* Две двери и плитки — каждая своё стекло, фон проходит сквозь них */
.home-v3 .home-door, .home-v3 .home-tile {
  position: relative;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border-color: transparent;
  box-shadow: var(--sk-block-edge), 0 14px 34px -18px rgba(6,12,36,.55);
}
.home-v3 .home-door:hover, .home-v3 .home-tile:hover { background: var(--sk-block-hover); border-color: transparent; }
.home-v3 .hd-icon { background: color-mix(in srgb, var(--sk-accent) 18%, color-mix(in srgb, var(--sk-glass-c) 70%, transparent)); color: var(--sk-accent-ink); }
/* «Составить…» — главная кнопка: остаётся плотной фирменной, на стекле она должна читаться сразу */
.home-v3 .hd-go { background: var(--sk-accent); }

/* Помощник: стеклянный блок, реплика и поле — светлее */
.home-v3 .home-help { position: relative; background: transparent; border-color: transparent; }
.home-v3 .home-help::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 30px 70px -30px rgba(6,12,36,.55);
}
.home-v3 .hh-bubble p, .home-v3 .hh-ava, .home-v3 .hh-ask .form-input, .home-v3 .hh-ask .btn-tertiary, .home-v3 .home-foot .btn-tertiary {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent);
  border-color: color-mix(in srgb, var(--sk-ink) 14%, transparent);
  color: var(--sk-ink);
}
.home-v3 .hh-ava { color: var(--sk-accent-ink); }
.home-v3 .hh-ask .form-input::placeholder { color: var(--sk-ink3); }

/* Помощник: место для вопроса — сразу под репликой помощника, как ответ в переписке.
   Порядок в блоке (в разметке index.html): заголовок → реплика → ПОЛЕ ВОПРОСА → готовые вопросы. Поле — белое,
   с фирменной рамкой, подписью и иконкой карандаша: видно, что здесь пишут. */
.home-v3 .home-help { display: flex; flex-direction: column; }
.home-v3 .home-help > .hh-bubble { margin-bottom: var(--ds-space-3); }
.home-v3 .home-help > .hh-quick { margin-top: var(--ds-space-4); margin-bottom: 0; }
.home-v3 .hh-ask {
  position: relative; align-items: stretch;
  margin-top: 26px; padding: 6px;
  background: color-mix(in srgb, #ffffff 94%, transparent);
  border: 2px solid var(--sk-accent); border-radius: 16px;
  box-shadow: 0 10px 26px -14px rgba(6,12,36,.45);
  transition: box-shadow .2s ease;
}
.home-v3 .hh-ask:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 28%, transparent), 0 10px 26px -14px rgba(6,12,36,.45); }
.home-v3 .hh-ask::before {
  content: "Ваш вопрос — помощник ответит здесь же";
  position: absolute; left: 4px; top: -24px;
  font-size: var(--ds-text-base); font-weight: 600; color: var(--sk-ink);
}
.home-v3 .hh-ask .form-input {
  border: 0; background-color: transparent; color: #0f1f1a;
  min-height: 48px; padding-left: 40px; font-size: var(--ds-text-md);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b6b4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center;
}
.home-v3 .hh-ask .form-input:focus { outline: none; box-shadow: none; }
.home-v3 .hh-ask .form-input::placeholder { color: #4a5d55; }
.home-v3 .hh-ask .btn-tertiary {
  background: var(--sk-accent); border-color: var(--sk-accent); color: #fff;
  border-radius: 12px; padding: 0 20px; font-weight: 700;
}
.home-v3 .hh-ask .btn-tertiary:hover { background: color-mix(in srgb, var(--sk-accent) 85%, #000); }
.home-v3 .hh-quick::before {
  content: "или нажмите готовый вопрос:";
  flex: 0 0 100%;
  font-size: var(--ds-text-base); color: var(--sk-ink2);
}
/* гостю без модели поле вопроса скрыто (homeRenderAsk) — «или» тогда не к чему */
.home-v3 .hh-ask[hidden] + .hh-quick::before { content: "Нажмите готовый вопрос:"; }

/* Блик по кромке стекла — поворачивается к солнцу (ночью к луне) */
.home-v3 .home-head::after, .home-v3 .home-pick::after, .home-v3 .home-help::after,
.home-v3 .home-door::after, .home-v3 .home-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}

/* ======================================================================================
   Кабинет «Дети с ОВЗ» (/ovz/) — ТЕ ЖЕ утверждённые правила (РЕШЕНИЯ.md), свои классы.
   Шапка кабинета — тоже <header>, поэтому островок, плотность и кнопки шапки берутся из
   правил выше; здесь только то, чем разметка кабинета отличается.
   ====================================================================================== */

/* текст внутри стекла — цветом стекла; мелкие подписи в панели темнее, как у ПроУрока */
.ovz-side, .ovz-main {
  --ds-ink: var(--sk-ink);  --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink3); --ds-ink-4: var(--sk-ink3);
}
.ovz-side { --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink2); }

/* логотип — на своей капсуле. Знак кабинета с TASK 694 белый, как у ПроУрока, — на светлом
   стекле он пропал бы, поэтому тоже лежит на зелёном квадрате 40×40 */
body.sk-hdr-island .ovz-logo-svg {
  width: 40px; height: 40px; padding: 5px; box-sizing: border-box;
  border-radius: 11px; background: var(--ds-green-deep, #1b6b4a);
  box-shadow: 0 6px 16px -8px rgba(6,12,36,.6);
}
body.sk-hdr-island .ovz-logo {
  padding: 4px 14px 4px 4px; border-radius: 14px;
  background: color-mix(in srgb, var(--sk-glass-c) calc(var(--sk-logo-a) * 100%), transparent);
  box-shadow: inset 0 0 0 1px var(--sk-line);
}
body.sk-hdr-island .ovz-logo-name { color: var(--sk-ink); }
body.sk-hdr-island .ovz-logo-name em { color: var(--sk-accent-ink); }
body.sk-hdr-island .ovz-logo-tag { color: var(--sk-ink2); }
body.sk-hdr-island .ovz-user-chip { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); }
body.sk-hdr-island .ovz-user { color: var(--sk-ink); }
body.sk-hdr-island #ovz-quota:not([style*="none"]) { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }

/* левая панель — стекло и островок, как у ПроУрока */
.ovz-side {
  background: var(--sk-tint) !important;
  -webkit-backdrop-filter: blur(var(--sk-blur)) saturate(1.5); backdrop-filter: blur(var(--sk-blur)) saturate(1.5);
  border-right: 1px solid var(--sk-line) !important;
}
body.sk-side-island .ovz-side {
  margin: 12px 0 12px 12px; border-radius: 18px; border-right: 0 !important;
  box-shadow: inset 0 0 0 1px var(--sk-line), 0 14px 34px -18px rgba(6,12,36,.5);
  /* страница кабинета прокручивается целиком — панель едет рядом, не растягиваясь на всю длину */
  align-self: start; position: sticky; top: 12px;
  height: calc(100vh - 104px); overflow-y: auto; box-sizing: border-box;
}
.ovz-nav a:hover, .ovz-nav button:hover { background: color-mix(in srgb, var(--sk-glass-c) 38%, transparent); color: var(--sk-ink); }
.ovz-nav .is-active { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }
.ovz-nav .is-active .ovz-nav-text small { color: var(--sk-ink2); }
.ovz-nav-icon, .ovz-nav .is-active .ovz-nav-icon { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent); }
.ovz-nav-icon svg { stroke: var(--sk-green); }
.ovz-nav .ext { color: var(--sk-ink2); }
.ovz-side .btn-new-session { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
.ovz-side .btn-new-session:hover { background: color-mix(in srgb, var(--sk-glass-c) 80%, transparent); color: var(--sk-ink); }

/* центр прозрачный — сквозь него небо */
.ovz-main, .ovz-shell { background: transparent !important; }

/* главная кабинета — то же мятное стекло, что плашки главной ПроУрока */
.ovz-page-head {
  position: relative; width: fit-content; max-width: 100%;
  padding: 16px 24px 18px; border-radius: var(--ds-r-xl);
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
.ovz-page-head .ovz-greet { color: var(--sk-ink2); }
.ovz-page-head .ovz-h1 { color: var(--sk-ink); }
.ovz-page-head .home-mood { margin: 8px 0 0; font-size: var(--ds-text-md, 16px); line-height: 1.45; color: var(--sk-ink2); max-width: 46ch; }
.ovz-page-head .home-mood:empty { display: none; }
.ovz-faq, .ovz-helper, .ovz-continue {
  position: relative;
  background: var(--sk-block) !important;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border-color: transparent !important;
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
.ovz-continue:hover { background: var(--sk-block-hover) !important; }
.ovz-faq-item { border-top-color: color-mix(in srgb, var(--sk-ink) 14%, transparent); }
.ovz-faq-item summary::marker { color: var(--sk-accent-ink); }
.ovz-faq-title, .ovz-helper summary, .ovz-faq-item summary, .ovz-continue-text strong { color: var(--sk-ink); }
.ovz-decision th, .ovz-decision td { border-color: color-mix(in srgb, var(--sk-ink) 16%, transparent); color: var(--sk-ink); }
.ovz-decision thead th, .ovz-decision tbody th { background: color-mix(in srgb, var(--sk-glass-c) 50%, transparent); }
.ovz-continue-link { color: var(--sk-accent-ink); }
.ovz-page-head::after, .ovz-faq::after, .ovz-helper::after, .ovz-continue::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}

/* Кабинет: приветствие и заголовок — шрифтом и размером главной ПроУрока (Montserrat, не
   Merriweather с засечками), «к уроку?» — фирменным зелёным, имя — полужирным */
.ovz-page-head .ovz-greet { font-size: var(--ds-text-md, 16px); margin: 0 0 var(--ds-space-2, 8px); }
.ovz-page-head .ovz-greet em { font-style: normal; font-weight: 600; color: var(--sk-ink); }
.ovz-page-head .ovz-h1 {
  /* в кабинете своих переменных 3xl/2xl нет — размеры главной ПроУрока запасными значениями */
  font-family: var(--ds-font-sans); font-size: var(--ds-text-3xl, 36px); font-weight: 700;
  line-height: var(--ds-lh-tight, 1.25); letter-spacing: 0;
}
.ovz-page-head .ovz-h1 span { color: var(--sk-accent-ink); }
.ovz-faq-title { font-family: var(--ds-font-sans); font-size: var(--ds-text-lg, 18px); font-weight: 700; }
@media (max-width: 800px) { .ovz-page-head .ovz-h1 { font-size: var(--ds-text-2xl, 28px); } }

/* «Как понять, какая программа нужна ребёнку?» — продолжение «Частых вопросов», одной
   карточкой: без зазора, скругления только снаружи, на стыке тонкая линия, как между вопросами */
.ovz-faq { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.ovz-faq + .ovz-helper {
  margin-top: 0; margin-bottom: var(--ds-space-4);
  border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sk-ink) 14%, transparent), var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
/* блик по кромке — только по внешнему контуру общей карточки, не по стыку */
.ovz-faq::after { -webkit-mask: none; mask: none; background: none; box-shadow: inset 1px 1px 0 0 rgba(255,255,255,.55), inset -1px 0 0 0 rgba(255,255,255,.3); }
.ovz-faq + .ovz-helper::after { -webkit-mask: none; mask: none; background: none; box-shadow: inset 1px -1px 0 0 rgba(255,255,255,.3), inset -1px 0 0 0 rgba(255,255,255,.3); }

/* Шапка кабинета на островке: на 24 px уже, чем полоса во всю ширину, — ужимаем отступы
   между элементами, длинное имя сокращается многоточием (полностью — во всплывающей подсказке) */
body.sk-hdr-island .ovz-hdr { padding: 0 14px; gap: 8px; }
body.sk-hdr-island .ovz-hdr-right { gap: 8px; }
body.sk-hdr-island .ovz-user { max-width: 150px; }
/* склеенная карточка «Частые вопросы» + «Как понять…»: без двойного отступа на стыке */
.ovz-faq { padding-bottom: 6px !important; }
.ovz-faq + .ovz-helper { padding-top: 6px; }


/* ======================================================================================
   ПроУрок — мастер «План урока» (#s-form, он же «Проверка знаний»). Те же правила, что у
   главной: мятное стекло --sk-block и одна плотность с плашками главной. Поля ввода —
   белые: здесь учитель печатает, текст в поле должен читаться идеально.
   ====================================================================================== */
#s-form .form-wrap {
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
  --ink: var(--sk-ink);    --ink2: var(--sk-ink2);     --ink3: var(--sk-ink2);     --ink4: var(--sk-ink3);
}
/* заголовок с кнопкой «←» — капсулой, как «Что подготовим к уроку?» */
#s-form .form-header {
  position: relative; width: fit-content; max-width: 100%;
  padding: 12px 22px 12px 12px; border-radius: 20px;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
#s-form .form-back {
  width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
#s-form .form-back:hover { background: color-mix(in srgb, var(--sk-glass-c) 92%, transparent); }
/* заголовок — Montserrat, как на главной (на проде тут Merriweather с засечками) */
#s-form .form-title-row h2 { font-family: var(--ds-font-sans); font-size: 24px; font-weight: 700; color: var(--sk-ink); line-height: 1.25; }
#s-form .form-title-row p { font-size: 13px; color: var(--sk-ink2); }
#s-form .form-title-row .wz-ctx { color: var(--sk-ink2); }

/* полоса шагов 1–2–3 */
#s-form .wizard-progress {
  position: relative; padding: 12px 20px; border-radius: 999px;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 14px 34px -20px rgba(6,12,36,.45);
}
#s-form .wz-num { background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); border-color: color-mix(in srgb, var(--sk-ink) 18%, transparent); color: var(--sk-ink2); }
#s-form .wz-step.active .wz-num, #s-form .wz-step.done .wz-num { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
#s-form .wz-label { color: var(--sk-ink2); }
#s-form .wz-step.active .wz-label { color: var(--sk-ink); }
#s-form .wz-step.done .wz-label { color: var(--sk-accent-ink); }
#s-form .wz-step:not(:last-child)::after { background: color-mix(in srgb, var(--sk-ink) 20%, transparent); }
#s-form .wz-step.done:not(:last-child)::after { background: var(--sk-accent); }
#s-form .wz-caption { background: var(--sk-block); color: var(--sk-ink); box-shadow: var(--sk-block-edge); }

/* карточки шага — мятное стекло */
#s-form .form-card {
  position: relative;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border-color: transparent;
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
/* Стекло (backdrop-filter) делает каждую карточку отдельным слоем, и выпадающий список «Тематическое
   планирование» / «Тема урока» (#frpRazdelDrop, #frpDrop) уходил ПОД следующие карточки: строки видны
   сквозь них и не нажимаются (снимок Пита 30.09.2026). Карточка с открытым списком — поверх соседей.
   Признак «открыт» — сам список (display: block ставит JS), а не фокус поля: фокус уходит при нажатии
   на строку, и карточка опустилась бы раньше, чем клик дойдёт до строки. */
#s-form .form-card:focus-within,
#s-form .form-card:has(.topic-input-wrap > div[style*="block"]) { z-index: 40; }
#s-form .form-card.field-attention { border-color: var(--ds-error, #c0392b); }
#s-form .fg-label { color: var(--sk-accent-ink); }
#s-form .form-note { color: var(--sk-ink2); }

/* чипы предмета, класса, параметров и типа урока — как на главной */
#s-form .s-chip, #s-form .c-chip, #s-form .o-chip, #s-form .lt-chip {
  background: color-mix(in srgb, var(--sk-glass-c) 52%, transparent);
  border-color: color-mix(in srgb, var(--sk-ink) 12%, transparent);
  color: var(--sk-ink2);
}
#s-form .s-chip:hover, #s-form .c-chip:hover, #s-form .o-chip:hover, #s-form .lt-chip:hover { background: color-mix(in srgb, var(--sk-glass-c) 82%, transparent); }
#s-form .s-chip.sel, #s-form .c-chip.sel, #s-form .o-chip.sel, #s-form .lt-chip.sel { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
#s-form .lt-chip small { color: var(--sk-ink3); }
#s-form .lt-chip.sel small { color: rgba(255,255,255,.88); }

/* поля ввода — белые, зелёная рамка при фокусе (как поле вопроса помощнику) */
#s-form .form-input, #s-form .form-textarea {
  background: color-mix(in srgb, #ffffff 94%, transparent);
  border: 1.5px solid color-mix(in srgb, #0f1f1a 18%, transparent);
  color: #0f1f1a; font-size: 15px;
}
#s-form .form-input:focus, #s-form .form-textarea:focus {
  background: #fff; border-color: var(--sk-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 26%, transparent);
}
#s-form .form-input::placeholder, #s-form .form-textarea::placeholder { color: #4a5d55; }
#s-form .form-input:disabled { background: color-mix(in srgb, #ffffff 70%, transparent); }

/* кнопки мастера: «Далее» — плотная фирменная, «Назад» — светлое стекло */
#s-form .wz-btn { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
#s-form .wz-btn:hover { background: color-mix(in srgb, var(--sk-glass-c) 85%, transparent); border-color: var(--sk-accent); }
#s-form .wz-btn.primary { background: var(--ds-green-deep, #1b6b4a); border-color: var(--ds-green-deep, #1b6b4a); color: #fff; }
#s-form .wz-btn.primary:hover { background: var(--ds-green-deeper, #155a3e); }

/* блик по кромке — как у плашек главной */
#s-form .form-header::after, #s-form .wizard-progress::after, #s-form .form-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}


/* ======================================================================================
   ПроУрок — экран готового плана (#s-result). Полоса с кнопками и панель «Улучшить с ИИ» —
   мятное стекло, как в мастере. Сам план — плотная «бумага»: его читают и печатают,
   сквозь документ небо не просвечивает, цвета текста в нём всегда тёмные.
   ====================================================================================== */
#s-result .result-wrap {
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
  --ink: var(--sk-ink);    --ink2: var(--sk-ink2);     --ink3: var(--sk-ink2);     --ink4: var(--sk-ink3);
}
/* полоса «← План урока · статистика · кнопки» */
#s-result .result-topbar {
  position: relative; flex-wrap: wrap; row-gap: 8px;
  padding: 10px 14px 10px 10px; border-radius: 20px;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
#s-result .form-back {
  width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
#s-result .form-back:hover { background: color-mix(in srgb, var(--sk-glass-c) 92%, transparent); }
#s-result #resultTitle { font-family: var(--ds-font-sans); font-size: 22px; font-weight: 700; color: var(--sk-ink); }
#s-result .result-stats { color: var(--sk-ink2); font-size: 13px; }
#s-result .result-actions { margin-left: auto; flex-wrap: wrap; }
#s-result .btn-action {
  min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent);
  border-color: var(--sk-line); color: var(--sk-ink);
}
#s-result .btn-action:hover:not(:disabled) { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); border-color: var(--sk-accent); }
#s-result .btn-action.save { background: var(--ds-green-deep, #1b6b4a); border-color: var(--ds-green-deep, #1b6b4a); color: #fff; }
#s-result .btn-action.save:hover { background: var(--ds-green-deeper, #155a3e); }
#s-result #techCardBtn { background: color-mix(in srgb, var(--sk-accent) 16%, color-mix(in srgb, var(--sk-glass-c) 70%, transparent)) !important; border-color: var(--sk-accent) !important; color: var(--sk-ink); }

/* сам план — «бумага» */
#s-result .result-box {
  --ink: #111c18; --ink2: #3a4f46; --ink3: #6b8278; --ink4: #a8bdb6;
  --ds-ink: #0f1f1a; --ds-ink-2: #3a4f46; --ds-ink-3: #6b7e76; --ds-ink-4: #9aa9a3;
  background: color-mix(in srgb, #ffffff 97%, transparent);
  border: 0; border-radius: 18px; color: #111c18;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 26px 60px -28px rgba(6,12,36,.55);
}

/* «Улучшить с ИИ» — мятное стекло */
#s-result .result-fix-chat {
  position: sticky;
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border-color: transparent; border-radius: 18px;
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
#s-result .result-fix-label { color: var(--sk-accent-ink); font-size: 12px; }
#s-result .fix-qbtn { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink); font-size: 12px; }
#s-result .fix-qbtn:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); border-color: var(--sk-accent); }
#s-result .result-fix-input {
  background: color-mix(in srgb, #ffffff 94%, transparent); color: #0f1f1a;
  border: 1.5px solid color-mix(in srgb, #0f1f1a 18%, transparent); font-size: 14px;
}
#s-result .result-fix-input:focus { background: #fff; border-color: var(--sk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 26%, transparent); }
#s-result .result-fix-input::placeholder { color: #4a5d55; }
#s-result .result-fix-btn { background: var(--ds-green-deep, #1b6b4a); }

/* «Что-то не так в результате? Сообщить →» — строка на небе, в капсуле */
#s-result .result-feedback {
  width: fit-content; padding: 8px 16px !important; margin-top: 14px !important;
  border-top: 0 !important; border-radius: 999px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge);
  color: var(--sk-ink2) !important;
}
#s-result .result-feedback a { color: var(--sk-accent-ink) !important; }

/* блик по кромке */
#s-result .result-topbar::after, #s-result .result-fix-chat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}

/* БАГ ПРОДА (найден 28.09.2026): на телефоне план с таблицей хода урока шире экрана и
   обрезается справа. .result-wrap стоит с margin: 0 auto — с ним он берёт ширину по самой
   широкой вещи внутри (5-колоночная таблица ≈ 600 px). Лечение: обёртка по ширине экрана,
   широкая таблица листается сама внутри листа. При реализации — перенести в index.html. */
#s-result .result-wrap { width: 100%; min-width: 0; }
@media (max-width: 860px) { #s-result .result-box .r-table { display: block; max-width: 100%; overflow-x: auto; } }


/* ======================================================================================
   «Проверка знаний» — тот же мастер (#s-form), свои блоки. Правило ночи: всё, у чего фон
   СВЕТЛЫЙ И ПОСТОЯННЫЙ (янтарная кнопка, белое поле), держит тёмный текст постоянным;
   всё остальное — на стекле, где цвет текста меняется вместе с фоном.
   ====================================================================================== */
/* «✨ Создать…» — янтарная кнопка ПроУрока, текст всегда тёмный (иначе ночью пропадёт) */
#s-form #btnFormCreate { color: #0f1f1a; }
/* описание выбранного вида работы — на стекле (в проде это белый блок с инлайн-стилем) */
#s-form #extraFields .form-card > div[style*="pre-line"] {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent) !important;
  border-color: var(--sk-line) !important; color: var(--sk-ink2) !important;
}
/* «Отмена», «Обычный / Под ОВЗ» — стекло, выбранный — фирменный зелёный */
#s-form .btn-secondary, #s-form .ovz-seg-btn {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
#s-form .btn-secondary:hover, #s-form .ovz-seg-btn:hover { background: color-mix(in srgb, var(--sk-glass-c) 85%, transparent); }
#s-form .ovz-seg-btn.sel { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
#s-form .soon-tag { background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); color: var(--sk-ink2); }

/* готовая работа: «Перейти к оформлению» — главная кнопка, плотная фирменная */
#s-result #proceedToDesignBtn { background: var(--ds-green-deep, #1b6b4a); border-color: var(--ds-green-deep, #1b6b4a); color: #fff; }

/* Шапка ПроУрока на островке: отступы как у кабинета. При ширине окна до 1180 px левая
   (логотип, «ПроУрок | Дети с ОВЗ», подписка) и правая (чип, «Поддержка», «Инструкция»,
   «Выйти») группы в одну строку не помещаются — на проде при ≈1000 px тоже, «Выйти» уходит
   за край. Островок переносит правую группу на вторую строку, как на телефоне. */
body.sk-hdr-island header:not(.ovz-hdr) { padding: 0 14px; }
body.sk-hdr-island .hdr-left { gap: 8px; }
body.sk-hdr-island .hdr-right { gap: 8px; }
@media (min-width: 769px) and (max-width: 860px) {
  body.sk-hdr-island header:not(.ovz-hdr) { height: auto; min-height: 58px; flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
  body.sk-hdr-island .hdr-right { margin-left: auto; }
}

/* Длинные названия результата («Интерактивный тест: Тестирование — Климатические пояса
   Земли») на телефоне не должны занимать четыре строки крупным шрифтом */
@media (max-width: 860px) {
  #s-result #resultTitle { font-size: 18px; line-height: 1.3; }
  #s-form .form-title-row h2 { font-size: 20px; }
}


/* ======================================================================================
   Экран раздачи интерактивного теста (QR и ссылка). Это не документ для чтения, а панель
   действий — «бумаги» нет, все блоки — мятное стекло (плотность плашек ими управляет).
   ====================================================================================== */
body.sky-handout #s-result .result-box {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
  --green: var(--sk-accent-ink); --green-dark: var(--sk-accent-ink);
  background: transparent; box-shadow: none; padding: 0; color: var(--sk-ink);
}
body.sky-handout .html-test-result .success-banner,
body.sky-handout .html-test-result .form-card {
  position: relative;
  background: var(--sk-block) !important;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border: 0 !important; border-radius: 18px;
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
  color: var(--sk-ink);
}
body.sky-handout .html-test-result .success-banner { padding: 14px 18px; font-weight: 700; color: var(--sk-accent-ink); }
body.sky-handout .html-test-result > div[style*="font-size:13px"] { color: var(--sk-ink2) !important; }
body.sky-handout .html-test-result .fg-label { color: var(--sk-accent-ink); }
body.sky-handout .html-test-result a { color: var(--sk-accent-ink) !important; }
/* правила раздачи (в проде светло-зелёный блок с инлайн-стилем) — светлое стекло */
body.sky-handout .html-test-result div[style*="green-xl"] {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent) !important; color: var(--sk-ink2) !important;
}
body.sky-handout .html-test-result .form-input {
  background: color-mix(in srgb, #ffffff 94%, transparent); color: #0f1f1a;
  border: 1.5px solid color-mix(in srgb, #0f1f1a 18%, transparent);
}
body.sky-handout .html-test-result .btn-primary { color: #0f1f1a; }
body.sky-handout .html-test-result .btn-secondary {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
body.sky-handout .html-test-result .o-chip {
  background: color-mix(in srgb, var(--sk-glass-c) 52%, transparent); border-color: color-mix(in srgb, var(--sk-ink) 12%, transparent); color: var(--sk-ink2);
}
body.sky-handout .html-test-result .o-chip.sel { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }

/* QR и ссылка — одна плашка, два столбца */
.sk-share-cols { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.sk-share .sk-share-qr, .sk-share .sk-share-link {
  background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0;
}
.sk-share .sk-share-qr::after, .sk-share .sk-share-link::after { display: none; }
.sk-share .sk-share-qr .fg-label, .sk-share .sk-share-link .fg-label { font-size: 12px; margin-bottom: 8px; }
.sk-share .qr-canvas-wrap { display: inline-block; padding: 10px; background: #fff; border-radius: 14px; box-shadow: 0 8px 22px -14px rgba(6,12,36,.5); }
.sk-share #qrCanvas { display: block; width: 150px !important; height: 150px !important; }
.sk-share .qr-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sk-share .qr-actions button { width: 100% !important; padding: 8px 12px !important; font-size: 13px; }
.sk-share .sk-share-qr > div[style*="font-size:12px"] { max-width: 170px; }
.sk-share .sk-share-link .form-input { min-width: 0 !important; }
@media (max-width: 640px) {
  .sk-share-cols { grid-template-columns: 1fr; }
  .sk-share .sk-share-qr { text-align: center; }
  .sk-share .qr-actions { flex-direction: row; justify-content: center; }
  .sk-share .qr-actions button { width: auto !important; }
  .sk-share .sk-share-qr > div[style*="font-size:12px"] { max-width: none; }
}

body.sky-handout .html-test-result .success-banner::after,
body.sky-handout .html-test-result .form-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
/* экран раздачи — не документ: шрифт интерфейса, а не «бумажный» Times */
body.sky-handout #s-result .result-box { font-family: var(--ds-font-sans); font-size: 15px; line-height: 1.55; }
body.sky-handout #s-result .result-box b, body.sky-handout #s-result .result-box strong { font-family: inherit; }
/* «Ссылка действительна, пока вы её не закроете…» — на небе голым текстом не читается: в капсулу */
body.sky-handout .html-test-result > div[style*="font-size:13px"] {
  width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 8px 14px; border-radius: 999px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge);
}
/* «Скопировать» — по ширине своего текста (в проде у .btn-primary flex:1, и кнопка съедала полстроки) */
.sk-share .sk-share-link .btn-primary { flex: none; }


/* ======================================================================================
   ПроУрок — Методическая копилка (#s-kopilka). Заголовок, вкладки, фильтры и карточки —
   мятное стекло (плотность плашек). Таблица «Результаты учеников» — плотная «бумага»:
   это данные, их сравнивают по строкам, сквозь них небо не просвечивает.
   ====================================================================================== */
#s-kopilka .kopilka-wrap {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
}
/* заголовок — капсулой, как «← План урока», шрифт интерфейса */
#s-kopilka .kopilka-header {
  position: relative; width: fit-content; max-width: 100%;
  padding: 12px 22px; border-radius: 20px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
#s-kopilka .kopilka-header h2 { font-family: var(--ds-font-sans); font-size: 24px; color: var(--sk-ink); }

/* вкладки — сегментом в стеклянной капсуле; выбранная — фирменный зелёный */
#s-kopilka .kop-tabs {
  position: relative; width: fit-content; max-width: 100%; flex-wrap: wrap;
  padding: 5px; gap: 4px; border-radius: 26px; border-bottom: 0;   /* не 999: на телефоне вкладки в две строки */
  background: var(--sk-block); box-shadow: var(--sk-block-edge);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
#s-kopilka .kop-tab { border: 0; border-radius: 999px; padding: 9px 16px; color: var(--sk-ink2); background: transparent; margin: 0; }
#s-kopilka .kop-tab:hover { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); color: var(--sk-ink); }
#s-kopilka .kop-tab.active { background: var(--sk-accent); color: #fff; }

/* фильтры «Заданий» — стеклянные чипы; «📊 Результаты учеников» остаётся янтарным (главный вход),
   текст на нём всегда тёмный — по «правилу ночи» */
#s-kopilka .kf-chip {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
  -webkit-backdrop-filter: blur(var(--sk-blur)); backdrop-filter: blur(var(--sk-blur));
}
#s-kopilka .kf-chip:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }
#s-kopilka .kf-chip.active { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
#s-kopilka .kf-chip-results, #s-kopilka .kf-chip-results:hover, #s-kopilka .kf-chip-results.active { color: #0f1f1a; }
#s-kopilka .kf-chip-results { background: #fde7b8; border-color: #d97706; }
#s-kopilka .kf-chip-results.active { background: #f59e0b; }
#s-kopilka #kopAssignedHint {
  width: fit-content; max-width: 100%; box-sizing: border-box; padding: 8px 16px; margin: 0 0 16px !important;
  border-radius: 999px; background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2) !important;
}

/* карточки — мятное стекло */
#s-kopilka .kop-card {
  background: var(--sk-block);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  border: 0; border-radius: 18px; color: var(--sk-ink);
  box-shadow: var(--sk-block-edge), 0 14px 34px -18px rgba(6,12,36,.55);
}
#s-kopilka .kop-card:hover { background: var(--sk-block-hover); box-shadow: var(--sk-block-edge), 0 20px 44px -18px rgba(6,12,36,.6); }
#s-kopilka .kop-title, #s-kopilka .kop-item-title { font-size: 15px; color: var(--sk-ink); }
#s-kopilka .kop-meta, #s-kopilka .kop-item-meta, #s-kopilka .kop-date { font-size: 12.5px; color: var(--sk-ink2); }
#s-kopilka .kop-type-tag, #s-kopilka .kop-type-tag.plan, #s-kopilka .kop-type-tag.test {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); color: var(--sk-accent-ink);
}
#s-kopilka .kop-actions { border-top-color: color-mix(in srgb, var(--sk-ink) 14%, transparent); }
#s-kopilka .kop-btn, #s-kopilka .btn-icon-danger {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
#s-kopilka .kop-btn.danger:hover, #s-kopilka .btn-icon-danger:hover { background: #fde2e2; border-color: #c0392b; color: #8e1f15; }
#s-kopilka .kop-card.is-picked { outline-color: var(--sk-accent); }

/* пусто — капсулой */
#s-kopilka .kopilka-empty {
  border-radius: 18px; background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2);
}
#s-kopilka .kopilka-empty h3 { color: var(--sk-ink); }
#s-kopilka .kopilka-empty p { color: var(--sk-ink2); }

/* «Результаты учеников» — таблица на «бумаге», цвета текста в ней всегда тёмные */
#s-kopilka .mytests-wrap {
  --ink: #111c18; --ink2: #3a4f46; --ink3: #6b8278; --ink4: #a8bdb6;
  --ds-ink: #0f1f1a; --ds-ink-2: #3a4f46; --ds-ink-3: #6b7e76; --ds-ink-4: #9aa9a3;
  background: color-mix(in srgb, #ffffff 97%, transparent); border: 0; border-radius: 18px; color: #111c18;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 26px 60px -28px rgba(6,12,36,.55);
}

/* блик по кромке */
#s-kopilka .kopilka-header::after, #s-kopilka .kop-tabs::after, #s-kopilka .kop-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
@media (max-width: 640px) {
  #s-kopilka .kopilka-header { padding: 10px 16px; }
  #s-kopilka .kopilka-header h2 { font-size: 19px; }
}


/* ======================================================================================
   ПроУрок — чат с ИИ (#s-chat). Переписка прямо на небе: ответы помощника — мятное
   стекло (плотность плашек), свои сообщения — зелёные, как в мессенджере. Поле ввода —
   то же, что у помощника на главной: белое, с зелёной рамкой и карандашом.
   ====================================================================================== */
body.sky-chat #s-chat {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
}
body.sky-chat .chat-messages { padding: 18px 4px; gap: 18px; scrollbar-color: color-mix(in srgb, var(--sk-ink) 25%, transparent) transparent; }

/* ответ помощника — стекло; текст крупнее прода (13 → 15 px): учителю 45+ читать абзацы */
body.sky-chat .msg.assistant .msg-bubble {
  position: relative; max-width: min(78%, 720px);
  /* рецепт --sk-block, но плотность своя — плотность диалога (--sk-chat-a) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%),
              color-mix(in srgb, var(--sk-pick-c) calc(var(--sk-chat-a) * 100%), transparent);
  border: 0; color: var(--sk-ink);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 14px 34px -20px rgba(6,12,36,.55);
  border-radius: 6px 20px 20px 20px; padding: 14px 18px;
  font-size: 15px; line-height: 1.6;
}
body.sky-chat .msg.assistant .msg-bubble strong, body.sky-chat .msg.assistant .msg-bubble b { color: var(--sk-ink); }
body.sky-chat .msg.assistant .msg-bubble ol, body.sky-chat .msg.assistant .msg-bubble ul { margin: 6px 0; padding-left: 22px; }
body.sky-chat .msg.assistant .msg-bubble li { margin: 4px 0; }
body.sky-chat .msg.assistant .msg-bubble p { margin: 0 0 8px; }
body.sky-chat .msg.assistant .msg-bubble p:last-child { margin-bottom: 0; }
body.sky-chat .chat-action-link { color: var(--sk-accent-ink); }
body.sky-chat .dots span { background: var(--sk-ink2); }

/* своё сообщение — сплошной фирменный зелёный, белый текст (фон не просвечивает — контраст постоянный) */
/* Зелёный чуть темнее фирменного (сплошной фирменный с белым текстом — только 4,2 : 1).
   Плотность — плотность диалога; страховка не даёт опуститься ниже 4,5 : 1. */
body.sky-chat .msg.user .msg-bubble {
  max-width: min(70%, 620px);
  background: color-mix(in srgb, var(--sk-me-c) calc(var(--sk-me-a) * 100%), transparent); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 20px 6px 20px 20px; padding: 12px 18px;
  font-size: 15px; line-height: 1.55;
  box-shadow: 0 12px 28px -16px rgba(6,12,36,.55);
}
/* аватарки — на белой подложке, чтобы не терялись на облаках */
body.sky-chat .msg-avatar { width: 36px; height: 36px; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 6px 14px -8px rgba(6,12,36,.5); }
body.sky-chat .msg.user .msg-avatar { background: var(--sk-accent); }

/* примеры вопросов под приветствием — стеклянные чипы, как «готовые вопросы» на главной */
body.sky-chat .chat-messages .vn-quick { padding: 10px 0 0; gap: 8px; }
body.sky-chat .chat-messages .vn-quick .chip {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent);
  border: 1px solid var(--sk-line); color: var(--sk-ink);
  -webkit-backdrop-filter: blur(var(--sk-blur)); backdrop-filter: blur(var(--sk-blur));
  font-size: 14px; padding: 8px 14px; border-radius: 999px; text-align: left;
}
body.sky-chat .chat-messages .vn-quick .chip:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }

/* «Новый чат» и «История бесед» — одна стеклянная капсула справа */
body.sky-chat .chat-threads-bar { padding: 12px 0 4px; }
body.sky-chat .chat-threads-bar > .btn-sm {
  background: var(--sk-block); border: 0; color: var(--sk-ink);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: 14px; min-height: 38px;
}
body.sky-chat .chat-threads-bar > .btn-sm:hover { background: var(--sk-block-hover); }
/* выпадающий список бесед — это меню поверх переписки: плотный, на «бумаге» */
body.sky-chat .chat-threads-list {
  --ink: #111c18; --ink3: #6b8278;
  background: color-mix(in srgb, #ffffff 97%, transparent); border: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 22px 50px -20px rgba(6,12,36,.6);
  margin-top: 6px; overflow: hidden auto;
}

/* поле ввода — как у помощника на главной */
body.sky-chat .chat-footer { border-top: 0; padding: 10px 0 16px; }
body.sky-chat .chat-input-row {
  align-items: stretch; padding: 6px;
  background: color-mix(in srgb, #ffffff 94%, transparent);
  border: 2px solid var(--sk-accent); border-radius: 18px;
  box-shadow: 0 14px 32px -16px rgba(6,12,36,.5);
  transition: box-shadow .2s ease;
}
body.sky-chat .chat-input-row:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 28%, transparent), 0 14px 32px -16px rgba(6,12,36,.5); }
body.sky-chat .chat-textarea {
  border: 0; background-color: transparent; color: #0f1f1a; box-shadow: none !important;
  font-size: 15px; min-height: 48px; padding: 13px 14px 13px 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b6b4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 14px;
}
body.sky-chat .chat-textarea::placeholder { color: #4a5d55; }
body.sky-chat .btn-send { width: 48px; height: auto; min-height: 48px; background: var(--sk-accent); border-radius: 13px; font-weight: 700; }
body.sky-chat .btn-send:hover { background: color-mix(in srgb, var(--sk-accent) 85%, #000); transform: none; }
body.sky-chat .chat-footer .guest-form-note-legal {
  width: fit-content; max-width: 100%; box-sizing: border-box; margin-top: 10px; padding: 8px 14px;
  border-radius: 14px; background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2);
}

/* блик по кромке */
body.sky-chat .msg.assistant .msg-bubble::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
@media (max-width: 640px) {
  body.sky-chat .msg.assistant .msg-bubble { max-width: calc(100% - 46px); font-size: 14.5px; padding: 12px 14px; }
  body.sky-chat .msg.user .msg-bubble { max-width: 82%; font-size: 14.5px; }
  /* «Новый чат» и «История бесед» не уезжают при прокрутке — одна капсула, прилипает к верху */
  body.sky-chat .chat-threads-bar {
    position: sticky; top: 8px; z-index: 6;
    width: fit-content; margin: 0 auto; padding: 5px; gap: 4px; border-radius: 999px;
    background: color-mix(in srgb, var(--sk-glass-c) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: var(--sk-block-edge), 0 10px 26px -14px rgba(6,12,36,.5);
  }
  body.sky-chat .chat-threads-bar > .btn-sm { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.sky-chat .chat-threads-bar > .btn-sm:hover { background: color-mix(in srgb, var(--sk-ink) 8%, transparent); }
  body.sky-chat .chat-threads-list { right: 50%; transform: translateX(50%); }
  /* На телефоне страница прокручивается целиком (на проде тоже): после длинной беседы поле
     ввода уезжало вниз, под переписку. Закрепляем его над нижним меню (74 px). */
  body.sky-chat #s-chat, body.sky-chat #s-chat .scroll-area { overflow: visible; }   /* иначе sticky «прилипает» к блоку, который не прокручивается */
  body.sky-chat .chat-footer { position: sticky; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 5; padding: 8px 0; }
  /* поверх переписки поле должно быть сплошным — сквозь 94 % белого читались строки ответа */
  body.sky-chat .chat-input-row { background: #fff; }
  body.sky-chat .chat-textarea { padding: 13px 8px 13px 38px; background-position: 10px 14px; }
}


/* ======================================================================================
   Телефон: имя и подписка — не в шапке, а в «Ещё» (решение Пита 28.09, экономия места).
   В шапке остаются логотип и «ПроУрок | ОВЗ». Кнопка «Оплатить» (только у пробного
   и закончившегося доступа) тоже остаётся — это главный путь к оплате.
   ====================================================================================== */
@media (max-width: 768px) {
  header .user-chip, header #accessBadge, header .quota-chip { display: none !important; }
}
.sk-prof { position: relative; margin-bottom: 6px; padding: 14px 12px !important;
  background: color-mix(in srgb, #1f8c63 8%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, #1f8c63 18%, transparent); }
.sk-prof-ava { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #1f8c63; color: #fff; font-weight: 800; font-size: 18px; }
.sk-prof > div { flex: 1; min-width: 0; }
.sk-prof .sk-prof-name { font-size: 16px; }
.sk-prof-badge { display: inline-block; margin: 4px 0 2px; padding: 2px 10px; border-radius: 999px;
  background: #fff4dc; color: #8a5a12; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px #f0c77a; }
.sk-prof-badge[hidden] { display: none; }
.sk-prof .sk-prof-quota { color: #3a4f46 !important; }
.sk-prof-go { font-size: 26px; line-height: 1; color: #1f8c63; flex: none; }


/* ======================================================================================
   ПроУрок — подготовка к экзаменам (#s-fipi, банк ФИПИ). Шапка, выбор ЕГЭ/ОГЭ, фильтры
   и карточки заданий — мятное стекло (плотность плашек). Подборка — белый островок внизу,
   как поле ввода помощника. Окно задания — «бумага»: это текст задания, его читают.
   ====================================================================================== */
body.sky-fipi #s-fipi {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
}
body.sky-fipi .fipi-header, body.sky-fipi .fipi-step1, body.sky-fipi .fipi-side, body.sky-fipi .fipi-toolbar, body.sky-fipi .fipi-card {
  position: relative;
  background: var(--sk-block); border: 0;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5);
}
/* шапка — капсулой по ширине текста, шрифт интерфейса */
body.sky-fipi .fipi-header { width: fit-content; max-width: 100%; box-sizing: border-box; align-items: center;
  padding: 12px 22px 12px 12px; border-radius: 20px; margin-bottom: var(--ds-space-5); }
body.sky-fipi .fipi-header h2 { font-family: var(--ds-font-sans); font-size: 24px; color: var(--sk-ink); }
body.sky-fipi .fipi-header p { color: var(--sk-ink2) !important; font-size: 14px !important; }
body.sky-fipi .fipi-header .form-back { background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); color: var(--sk-ink); border: 0; }

/* ЕГЭ / ОГЭ — сегмент, выбранный — зелёный; предмет — белое поле */
body.sky-fipi .fipi-step1 { border-radius: 20px; }
body.sky-fipi .fipi-level-toggle { border: 0; padding: 4px; gap: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); }
body.sky-fipi .fipi-lvl { background: transparent; color: var(--sk-ink2); border-radius: 999px; font-weight: 700; padding: 8px 22px; }
body.sky-fipi .fipi-lvl.sel { background: var(--sk-accent); color: #fff; }
body.sky-fipi .fipi-subj-select, body.sky-fipi .fipi-input {
  background-color: color-mix(in srgb, #ffffff 94%, transparent); color: #0f1f1a;
  border: 1.5px solid color-mix(in srgb, #0f1f1a 16%, transparent); border-radius: 12px;
}
body.sky-fipi .fipi-subj-select:focus, body.sky-fipi .fipi-input:focus { outline: none; border-color: var(--sk-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 25%, transparent); }
body.sky-fipi .fipi-input::placeholder { color: #4a5d55; }

/* фильтры слева */
body.sky-fipi .fipi-side { border-radius: 20px; }
body.sky-fipi .fipi-lbl { color: var(--sk-ink); font-size: 14px; }
body.sky-fipi .fipi-checkbox { color: var(--sk-ink); }
body.sky-fipi .fipi-tchip {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border: 1px solid var(--sk-line);
  color: var(--sk-ink); font-size: 13px; min-height: 36px; padding: 6px 12px;
}
body.sky-fipi .fipi-tchip:hover { background: color-mix(in srgb, var(--sk-glass-c) 85%, transparent); }
body.sky-fipi .fipi-tchip .fipi-tchip-n { color: var(--sk-ink2); }
body.sky-fipi .fipi-tchip.sel { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
body.sky-fipi .fipi-tchip.sel .fipi-tchip-n { color: rgba(255,255,255,.85); }
body.sky-fipi .fipi-topics { background: color-mix(in srgb, var(--sk-glass-c) 45%, transparent); border: 1px solid var(--sk-line); border-radius: 14px; }
body.sky-fipi .fipi-topic { color: var(--sk-ink); border-radius: 10px; font-size: 13px; }
body.sky-fipi .fipi-topic:hover { background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); }
body.sky-fipi .fipi-topic .fipi-topic-code, body.sky-fipi .fipi-topic .fipi-topic-n { color: var(--sk-ink2); }
body.sky-fipi .fipi-topic.lvl-3 { color: var(--sk-ink2); }
/* выбранная тема — янтарная, как в проде; текст тёмный всегда («правило ночи») */
body.sky-fipi .fipi-topic.sel, body.sky-fipi .fipi-topic.sel .fipi-topic-code, body.sky-fipi .fipi-topic.sel .fipi-topic-n { background: #f6c75c; color: #0f1f1a; }
body.sky-fipi .fipi-topic-reset { color: var(--sk-accent-ink); font-weight: 600; }

/* счётчик и страницы — капсула */
body.sky-fipi .fipi-toolbar { padding: 8px 8px 8px 18px; border-radius: 18px; margin-bottom: var(--ds-space-3); flex-wrap: wrap; gap: 8px; }
body.sky-fipi .fipi-count { color: var(--sk-ink); font-weight: 700; font-size: 14px; }
body.sky-fipi .fipi-pager { color: var(--sk-ink2); }
body.sky-fipi .fipi-pager .btn-tertiary {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border: 1px solid var(--sk-line); color: var(--sk-ink); border-radius: 999px;
}
body.sky-fipi .fipi-pager .btn-tertiary:disabled { opacity: .45; }

/* карточки заданий — стекло; текст задания основным цветом и крупнее прода (13 → 14,5 px) */
body.sky-fipi .fipi-card { border-radius: 18px; padding: 14px 18px; }
body.sky-fipi .fipi-card:hover { background: var(--sk-block-hover); box-shadow: var(--sk-block-edge), 0 22px 48px -22px rgba(6,12,36,.6); }
body.sky-fipi .fipi-card-num { color: var(--sk-ink); font-size: 14px; }
body.sky-fipi .fipi-badge { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); color: var(--sk-accent-ink); }
body.sky-fipi .fipi-badge.media { background: #fde7b8; color: #6b4f00; }
body.sky-fipi .fipi-card-preview { color: var(--sk-ink); font-size: 14.5px; line-height: 1.55; }
body.sky-fipi .fipi-card-topics { color: var(--sk-ink2); font-size: 12.5px; }
body.sky-fipi .fipi-card-btn {
  background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); border: 1.5px solid var(--sk-accent); color: var(--sk-accent-ink);
  font-size: 13px; min-height: 36px; padding: 6px 14px; white-space: nowrap; flex: none;
}
body.sky-fipi .fipi-card-btn.added { background: var(--sk-accent); color: #fff; }
body.sky-fipi .fipi-empty { color: var(--sk-ink2); }
body.sky-fipi #fipiCards > .fipi-empty { border-radius: 18px; background: var(--sk-block); box-shadow: var(--sk-block-edge); }

/* подборка — белый островок внизу (а не полоса во всю ширину под боковой панелью) */
body.sky-fipi .fipi-basket {
  left: 50%; right: auto; bottom: 18px; transform: translateX(-50%);
  width: min(760px, calc(100% - 32px)); box-sizing: border-box;
  padding: 10px 10px 10px 20px; border: 2px solid var(--sk-accent); border-radius: 18px;
  background: color-mix(in srgb, #ffffff 96%, transparent);
  box-shadow: 0 18px 44px -18px rgba(6,12,36,.55);
  --ds-ink-2: #3a4f46; color: #0f1f1a;
}
body.sky-fipi .fipi-basket-info { color: #3a4f46; }
body.sky-fipi .fipi-basket-info strong { color: #1b6b4a; }
body.sky-fipi .fipi-basket .btn-primary { color: #0f1f1a; border-radius: 12px; width: auto; flex: none; padding: 0 26px; min-height: 46px; }

/* окно задания — «бумага», подложка с размытием неба */
body.sky-fipi .fipi-modal { z-index: 1300; background: rgba(6,12,36,.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.sky-fipi .fipi-modal-box {
  --ink: #111c18; --ink2: #3a4f46; --ink3: #6b8278;
  --ds-ink: #0f1f1a; --ds-ink-2: #3a4f46; --ds-ink-3: #6b7e76; --ds-ink-4: #9aa9a3;
  border-radius: 20px; color: #0f1f1a; box-shadow: 0 30px 80px -30px rgba(6,12,36,.7);
}

/* блик по кромке */
body.sky-fipi .fipi-header::after, body.sky-fipi .fipi-step1::after, body.sky-fipi .fipi-side::after,
body.sky-fipi .fipi-toolbar::after, body.sky-fipi .fipi-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
@media (min-width: 861px) {
  /* Темы — полным списком, без своей прокрутки: панель фильтров вытягивается вниз на столько,
     сколько тем (решение Пита 28.09). Прилипать такой панели нельзя — она выше экрана. */
  body.sky-fipi .fipi-side { position: relative; top: auto; max-height: none; overflow: visible; }
  body.sky-fipi .fipi-topics { max-height: none; overflow: visible; }
}
@media (max-width: 860px) {
  /* в один столбец фильтры идут над карточками — прилипать им нельзя, иначе закрывают список */
  body.sky-fipi .fipi-side { position: relative; top: auto; max-height: none; }
}
@media (max-width: 768px) {
  body.sky-fipi .fipi-wrap { padding-left: 0; padding-right: 0; }   /* поля экрана уже даёт .scroll-area */
  body.sky-fipi .fipi-basket { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); padding: 8px 8px 8px 14px; gap: 10px; }
  body.sky-fipi .fipi-basket-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; text-align: left; font-size: 14px; }
  body.sky-fipi .fipi-basket-clear { margin-left: 0; }
  body.sky-fipi .fipi-basket .btn-primary { padding: 0 16px; font-size: 15px; min-height: 44px; }
  body.sky-fipi .fipi-header { padding: 10px 16px 10px 10px; }
  body.sky-fipi .fipi-header h2 { font-size: 19px; }
  body.sky-fipi .fipi-toolbar { border-radius: 18px; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
}


/* ======================================================================================
   ПроУрок — внеурочная деятельность (#s-vneurok). Раздел рисует всё сам в #vn-main.
   Шапки страниц, развилка «Программа / План занятия / Классный час», карточки программ,
   списки занятий и диалог — мятное стекло (плотность плашек). Таблица тематического
   планирования — «бумага»: это документ, его правят по строкам.
   ====================================================================================== */
body.sky-vn #s-vneurok {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
}
body.sky-vn .vn-main { padding-top: var(--ds-space-5); }
/* подсказки, которые раздел кладёт прямо в #vn-main («Выберите занятие…», «Загружаю…») — в капсуле:
   голым текстом на небе они не читаются */
body.sky-vn #vn-main > p.vn-muted { width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 8px 16px; border-radius: 14px; background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2); }
/* тема занятия — самая длинная колонка планирования: форме проведения хватает 200 px */
body.sky-vn .vn-plan td:last-child { width: 200px; min-width: 170px; }
body.sky-vn .vn-toolbar, body.sky-vn .vn-choice-btn, body.sky-vn .vn-card,
body.sky-vn .vn-lesson, body.sky-vn .vn-empty, body.sky-vn .vn-chat, body.sky-vn .vn-side-card {
  position: relative;
  background: var(--sk-block); border: 0;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5);
  color: var(--sk-ink);
}
/* заголовки — шрифт интерфейса, как по всему «Живому небу» (в проде Merriweather) */
body.sky-vn .vn-h1, body.sky-vn .vn-h2, body.sky-vn .vn-choice-name, body.sky-vn .vn-side-card h2 { font-family: var(--ds-font-sans); color: var(--sk-ink); }
body.sky-vn .vn-h1 { font-size: 28px; }
body.sky-vn .vn-muted { color: var(--sk-ink2); }
body.sky-vn .vn-legal { color: var(--sk-ink2); font-size: 12.5px; }

/* шапка главной раздела и шапки экранов — плашки */
/* Шапка раздела — не кнопка (замечание Пита 28.09: «описание, а выглядит как кнопка»).
   Название — капсулой, как «Методическая копилка». Описание и основание — плоская справка:
   то же стекло, но без тени, блика и скруглённой «карточки», с зелёной чертой слева.
   Кнопки развилки ниже остаются объёмными — так видно, что жать надо их. */
body.sky-vn .vn-page-head { margin-bottom: var(--ds-space-5); }
body.sky-vn .vn-page-head .vn-h1 {
  position: relative; width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 12px 22px; border-radius: 20px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
body.sky-vn .vn-page-head .vn-muted, body.sky-vn .vn-page-head .vn-legal {
  width: min(100%, 860px); box-sizing: border-box; margin: 0;
  background: var(--sk-block); border-left: 4px solid var(--sk-accent);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
body.sky-vn .vn-page-head .vn-muted { margin-top: 14px; padding: 12px 18px 4px; border-radius: 0 12px 0 0; font-size: 15px; color: var(--sk-ink); }
body.sky-vn .vn-page-head .vn-legal { padding: 4px 18px 12px; border-radius: 0 0 12px 0; font-style: italic; }
body.sky-vn .vn-toolbar { padding: 14px 16px 14px 22px; border-radius: 20px; }
/* подзаголовок «Тематическое планирование» — капсулой, иначе голый текст на небе */
body.sky-vn .vn-h2 { display: inline-block; padding: 8px 18px; border-radius: 999px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge); font-size: 18px; }

/* развилка — три большие стеклянные кнопки, как двери на главной */
body.sky-vn .vn-choice-btn { border-radius: 20px; padding: 22px; transition: background .2s ease, box-shadow .2s ease; }
body.sky-vn .vn-choice-btn:hover { background: var(--sk-block-hover); box-shadow: var(--sk-block-edge), 0 24px 50px -22px rgba(6,12,36,.6); }
body.sky-vn .vn-choice-btn[disabled]:hover { background: var(--sk-block); box-shadow: var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5); }
body.sky-vn .vn-choice-icon { background: rgba(255,255,255,.85); box-shadow: 0 6px 14px -8px rgba(6,12,36,.45); }
body.sky-vn .vn-choice-icon svg { stroke: #1b6b4a; }
body.sky-vn .vn-choice-name { font-size: 19px; }
body.sky-vn .vn-choice-sub { color: var(--sk-ink2); font-size: 14.5px; }

/* пометка «закрытая обкатка» — янтарная, текст всегда тёмный */
body.sky-vn .vn-beta { background: #fff1d6; color: #5a3d00; border-radius: 14px; border-left-width: 4px;
  box-shadow: 0 10px 24px -16px rgba(6,12,36,.45); }
body.sky-vn .vn-locked { background: #fff1d6; color: #5a3d00; border-radius: 14px; padding: 10px 14px; margin-top: 12px; }

/* карточки программ и строки занятий */
body.sky-vn .vn-card { border-radius: 18px; }
body.sky-vn .vn-card-dir { color: var(--sk-accent-ink); }
body.sky-vn .vn-card-title { color: var(--sk-ink); }
body.sky-vn .vn-card-sub { color: var(--sk-ink2); }
body.sky-vn .vn-lesson { border-radius: 14px; }
body.sky-vn .vn-lesson:hover { background: var(--sk-block-hover); }
body.sky-vn .vn-lesson-n, body.sky-vn .vn-lesson-sub { color: var(--sk-ink2); }
/* «план готов» / «устарел» — цветная полоса слева, как в проде, поверх стекла */
body.sky-vn .vn-lesson.is-ready { box-shadow: inset 5px 0 0 var(--sk-accent), var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5); }
body.sky-vn .vn-lesson.is-stale { box-shadow: inset 5px 0 0 #e0a13a, var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5); }
body.sky-vn .vn-lesson.is-ready .vn-lesson-n { color: var(--sk-accent-ink); }
body.sky-vn .vn-tag { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); color: var(--sk-ink2); }
body.sky-vn .vn-tag.is-done { background: var(--sk-accent); color: #fff; }
body.sky-vn .vn-tag.is-stale { background: #f6c75c; color: #0f1f1a; }
body.sky-vn .vn-empty { border-radius: 18px; }

/* кнопки второго ряда на стекле */
body.sky-vn .vn-main .btn-tertiary, body.sky-vn .vn-main .btn-secondary {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border: 1px solid var(--sk-line); color: var(--sk-ink);
}
body.sky-vn .vn-main .btn-tertiary:hover, body.sky-vn .vn-main .btn-secondary:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }
body.sky-vn .vn-main .btn-primary { color: #0f1f1a; }
body.sky-vn .vn-danger { color: #a3261b !important; }

/* тематическое планирование — «бумага» */
body.sky-vn .vn-plan-wrap, body.sky-vn .vn-add, body.sky-vn .vn-notes {
  --ink: #111c18; --ink2: #3a4f46; --ink3: #6b8278; --ink4: #a8bdb6;
  --ds-ink: #0f1f1a; --ds-ink-2: #3a4f46; --ds-ink-3: #6b7e76; --ds-ink-4: #9aa9a3;
  background: color-mix(in srgb, #ffffff 97%, transparent); color: #111c18; border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 26px 60px -28px rgba(6,12,36,.55);
}
body.sky-vn .vn-plan-wrap { padding: 6px; margin-top: 14px; }
body.sky-vn .vn-add { padding: 16px 18px; margin-top: 14px; border: 0; }
body.sky-vn .vn-notes { padding: 14px 18px; margin-top: 14px; }
body.sky-vn .vn-plan thead th { background: #eef5f1; }
body.sky-vn .vn-plan-total { display: inline-block; padding: 8px 16px; border-radius: 999px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink); }

/* диалог сборки программы — как чат с ИИ */
body.sky-vn .vn-chat { border-radius: 20px; overflow: hidden; }
body.sky-vn .vn-msg.is-ai { background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); color: var(--sk-ink); }
body.sky-vn .vn-msg.is-me { background: color-mix(in srgb, var(--sk-me-c, #1b6b4a) calc(var(--sk-me-a, .8) * 100%), transparent); color: #fff; }
body.sky-vn .vn-chat-form { border-top-color: var(--sk-line); }
body.sky-vn .vn-chat-form textarea { background: #fff; color: #0f1f1a; border-radius: 12px; }
body.sky-vn .vn-quick .chip, body.sky-vn .vn-group {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink);
}
body.sky-vn .vn-group.is-open { background: color-mix(in srgb, var(--sk-accent) 22%, var(--sk-glass-c)); border-color: var(--sk-accent); }
body.sky-vn .vn-quick-cap { background: transparent; color: var(--sk-ink); }
body.sky-vn .vn-side-card { border-radius: 18px; }
body.sky-vn .vn-side-key { color: var(--sk-ink2); }
body.sky-vn .vn-side-row { border-top-color: var(--sk-line); }

/* блик по кромке */
body.sky-vn .vn-page-head .vn-h1::after, body.sky-vn .vn-toolbar::after, body.sky-vn .vn-choice-btn::after, body.sky-vn .vn-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
@media (max-width: 768px) {
  body.sky-vn .vn-h1 { font-size: 22px; }
  body.sky-vn .vn-page-head .vn-h1 { padding: 10px 16px; }
  body.sky-vn .vn-page-head .vn-muted { padding: 10px 14px 4px; }
  body.sky-vn .vn-page-head .vn-legal { padding: 4px 14px 10px; }
  body.sky-vn .vn-toolbar { padding: 14px 16px; }
}


/* ======================================================================================
   ПроУрок — проекты (#s-project-chat): чат с ИИ + живая карточка проекта справа.
   Переписка — как «Чат с ИИ» (тот же плотность диалога). Шапка — как у внеурочки:
   название капсулой, пояснение плоской справкой. Карточка проекта — мятное стекло
   (плотность плашек), поля в ней белые. Ввод — как у помощника на главной.
   ====================================================================================== */
body.sky-project #s-project-chat {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
}
body.sky-project .page-head { align-items: center; padding: 12px 0 4px; }
body.sky-project .page-title {
  position: relative; width: fit-content; padding: 12px 22px; border-radius: 20px;
  font-family: var(--ds-font-sans); font-size: 24px; color: var(--sk-ink);
  background: var(--sk-block); box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
body.sky-project .page-hint {
  margin-top: 12px; max-width: 640px; padding: 10px 16px; border-left: 4px solid var(--sk-accent); border-radius: 0 12px 12px 0;
  background: var(--sk-block); color: var(--sk-ink); font-size: 14.5px;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
body.sky-project .page-head-actions .btn-secondary {
  background: var(--sk-block) !important; border: 0; color: var(--sk-ink); border-radius: 999px !important;
  box-shadow: var(--sk-block-edge); font-weight: 600;
}

/* переписка */
body.sky-project .project-chat-messages { padding: 8px 4px; gap: 16px; scrollbar-color: color-mix(in srgb, var(--sk-ink) 25%, transparent) transparent; }
body.sky-project .pchat-msg-assistant, body.sky-project .pchat-typing {
  position: relative; border: 0; color: var(--sk-ink); border-radius: 6px 20px 20px 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 55%),
              color-mix(in srgb, var(--sk-pick-c) calc(var(--sk-chat-a) * 100%), transparent);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 14px 34px -20px rgba(6,12,36,.55);
}
body.sky-project .pchat-typing { color: var(--sk-ink2); }
body.sky-project .pchat-msg-user {
  background: color-mix(in srgb, var(--sk-me-c) calc(var(--sk-me-a) * 100%), transparent); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  border-radius: 20px 6px 20px 20px; box-shadow: 0 12px 28px -16px rgba(6,12,36,.55);
}
body.sky-project .pchat-note { color: var(--sk-ink2); background: var(--sk-block); border-radius: 999px; }
/* кнопки-ответы — белые с зелёной рамкой, как в проде: это главный орган управления диалогом */
body.sky-project .pchat-quick-btn { background: rgba(255,255,255,.92); color: #1b6b4a; border-color: var(--sk-accent); }
body.sky-project .pchat-quick-btn:hover { background: var(--sk-accent); color: #fff; }
body.sky-project .pchat-ready-panel { border-top-color: color-mix(in srgb, var(--sk-ink) 14%, transparent); }
body.sky-project .pchat-ready-title { color: var(--sk-ink); }
body.sky-project .pchat-ready-btns .btn-primary { color: #0f1f1a; }
body.sky-project .pchat-ready-btns .btn-secondary { background: rgba(255,255,255,.92); color: #0f1f1a; border-color: rgba(15,31,26,.2); }

/* ввод — как у помощника на главной */
body.sky-project .project-chat-input-bar {
  align-items: stretch; padding: 6px; margin: 4px 0 12px;
  background: color-mix(in srgb, #ffffff 94%, transparent);
  border: 2px solid var(--sk-accent); border-top: 2px solid var(--sk-accent); border-radius: 18px;
  box-shadow: 0 14px 32px -16px rgba(6,12,36,.5);
}
body.sky-project .project-chat-input-bar:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 28%, transparent), 0 14px 32px -16px rgba(6,12,36,.5); }
body.sky-project .project-chat-input-bar textarea {
  border: 0; background-color: transparent; color: #0f1f1a; box-shadow: none !important; font-size: 15px; padding-left: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231b6b4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px 14px;
}
body.sky-project .project-chat-input-bar textarea::placeholder { color: #4a5d55; }
/* в проде .btn-primary { flex: 1 } — «Отправить» растягивалась на полстроки ввода */
body.sky-project #projectChatSendBtn { background: var(--sk-accent) !important; color: #fff; border-radius: 12px; flex: none; }

/* живая карточка проекта справа */
body.sky-project .project-chat-cta {
  width: 280px; border: 0; border-radius: 20px; padding: 16px;
  background: var(--sk-block); color: var(--sk-ink);
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 20px 50px -26px rgba(6,12,36,.5);
}
body.sky-project .pcard-progress-label { color: var(--sk-ink); font-size: 13px; }
body.sky-project .pcard-progress-bar { background: color-mix(in srgb, var(--sk-ink) 12%, transparent); }
body.sky-project .pcard-progress-fill { background: var(--sk-accent); }
body.sky-project .pcard-field-label { color: var(--sk-ink2); font-size: 12px; font-weight: 600; }
body.sky-project .pcard-field-input, body.sky-project .pfmt-select {
  background: rgba(255,255,255,.94); color: #0f1f1a; border: 1.5px solid rgba(15,31,26,.14); border-radius: 10px; font-size: 13.5px;
}
body.sky-project .pcard-field-input:focus, body.sky-project .pfmt-select:focus { border-color: var(--sk-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 25%, transparent); }
body.sky-project .pfmt-label { color: var(--sk-ink2); }
body.sky-project .pfmt-hint, body.sky-project .project-chat-cta .hint-text { color: var(--sk-ink2) !important; font-size: 12px !important; }
body.sky-project .project-chat-cta .ovz-basis-bar { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border-color: var(--sk-line); color: var(--sk-ink2); }
body.sky-project .pcard-gate-hint { color: var(--sk-ink2); }
body.sky-project .pcard-gate-hint.is-ready { color: var(--sk-accent-ink); }
body.sky-project .project-chat-cta-buttons .btn-primary { color: #0f1f1a; font-size: 14px; padding: 11px 12px; border-radius: 12px; }
body.sky-project .pcard-forward { border-bottom-color: color-mix(in srgb, var(--sk-ink) 14%, transparent); }

/* блик по кромке */
body.sky-project .page-title::after, body.sky-project .project-chat-cta::after, body.sky-project .pchat-msg-assistant::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
body.sky-project .project-chat-cta { position: sticky; }
@media (max-width: 860px) {
  body.sky-project .project-chat-cta { width: 100%; position: relative; top: auto; box-sizing: border-box; }
  /* Ошибка прода: в один столбец колонка переписки подгонялась по самому длинному содержимому
     (align-items: flex-start) и вылезала за экран — свои сообщения обрезались справа. */
  body.sky-project .project-chat-main { align-self: stretch; width: 100%; }
}
@media (max-width: 768px) {
  body.sky-project .page-title { font-size: 19px; padding: 10px 16px; }
  body.sky-project .pchat-msg { max-width: 88%; font-size: 14.5px; }
}


/* Проекты, телефон: карточка — отдельным шагом (решение Пита 28.09) */
.sk-pcard-bar, .sk-pcard-head { display: none; }
@media (max-width: 860px) {
  /* шаг 1 — диалог: карточки под перепиской нет, вместо неё строка над полем ввода */
  body.sky-project:not(.sk-pcard-open) .project-chat-cta,
  body.sky-project:not(.sk-pcard-open) #projectMaterialsCard { display: none !important; }
  body.sky-project .sk-pcard-bar:not([hidden]) {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 10px 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit;
    background: var(--sk-block); color: var(--sk-ink);
    -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
    box-shadow: var(--sk-block-edge), 0 12px 28px -18px rgba(6,12,36,.55);
  }
  .sk-pcard-bar-ico { font-size: 22px; flex: none; }
  .sk-pcard-bar-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .sk-pcard-bar-txt b { font-size: 15px; }
  .sk-pcard-bar-txt small { font-size: 13px; color: var(--sk-ink2); }
  .sk-pcard-bar-go { flex: none; font-weight: 700; font-size: 14px; color: var(--sk-accent-ink); }
  /* карточка заполнена — строка янтарная, как кнопка каркаса: пора туда */
  body.sky-project .sk-pcard-bar.is-done { background: #fde7b8; box-shadow: inset 0 0 0 2px #e0a13a, 0 12px 28px -18px rgba(6,12,36,.55); }
  body.sky-project .sk-pcard-bar.is-done, body.sky-project .sk-pcard-bar.is-done small, body.sky-project .sk-pcard-bar.is-done .sk-pcard-bar-go { color: #3d2a00; }

  /* шаг 2 — карточка: переписка и шапка экрана скрыты, карточка на всю ширину */
  body.sky-project.sk-pcard-open .project-chat-main,
  body.sky-project.sk-pcard-open #s-project-chat .page-head { display: none; }
  body.sky-project.sk-pcard-open .sk-pcard-head {
    display: flex; align-items: center; gap: 12px; margin: 8px 0 4px;
  }
  .sk-pcard-head > span {
    white-space: nowrap; padding: 10px 16px; border-radius: 16px; font-weight: 700; font-size: 17px; color: var(--sk-ink);
    background: var(--sk-block); box-shadow: var(--sk-block-edge);
  }
  .sk-pcard-back {
    white-space: nowrap; flex: none; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer;
    background: rgba(255,255,255,.92); color: #0f1f1a; box-shadow: 0 8px 20px -14px rgba(6,12,36,.5);
  }
  body.sky-project.sk-pcard-open .project-chat-cta { display: flex !important; margin-bottom: 16px; }
  body.sky-project.sk-pcard-open .pcard-field-input { font-size: 16px; padding: 10px 12px; }   /* 16 px — без увеличения на iPhone */
}
@media (max-width: 640px) {
  body.sky-project .project-chat-input-bar textarea { min-height: 48px; padding: 13px 8px 13px 38px; background-position: 10px 14px; }
  /* кнопка — стрелкой, как в чате с ИИ; слово «Отправить» остаётся в разметке для экранного чтеца */
  body.sky-project #projectChatSendBtn { width: 48px !important; min-width: 48px; padding: 0 !important; font-size: 0; flex: none; }
  body.sky-project #projectChatSendBtn::after { content: "↑"; font-size: 20px; font-weight: 700; }
}


/* ======================================================================================
   ПроУрок — каркас проекта (#s-result с .project-skeleton). Это экран правки: полтора
   десятка полей, план глав с инструментами, источники. Не документ для чтения — поэтому,
   как у раздачи теста, «бумаги» нет: каждый блок — мятное стекло (плотность плашек),
   поля белые, шрифт интерфейсный (на бумаге был Times вперемешку с Montserrat).
   ====================================================================================== */
body.sky-skeleton #s-result .result-box {
  --ink: var(--sk-ink); --ink2: var(--sk-ink2); --ink3: var(--sk-ink2); --ink4: var(--sk-ink3);
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
  --green: var(--sk-accent-ink); --green-dark: var(--sk-accent-ink);
  background: transparent; box-shadow: none; padding: 0; color: var(--sk-ink);
  font-family: var(--ds-font-sans);
}
body.sky-skeleton #s-result .result-box::before, body.sky-skeleton #s-result .result-box::after { display: none; }
/* невидимые кнопки прода (visibility:hidden) раздували шапку — у каркаса свои кнопки внизу */
body.sky-skeleton #s-result .result-actions { display: none; }
body.sky-skeleton .project-skeleton .success-banner,
body.sky-skeleton .project-skeleton > .form-card {
  position: relative;
  background: var(--sk-block) !important; border: 0 !important; border-radius: 18px;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 18px 44px -24px rgba(6,12,36,.5);
  color: var(--sk-ink); font-family: var(--ds-font-sans);
}
body.sky-skeleton .project-skeleton .success-banner { padding: 14px 18px; font-weight: 700; color: var(--sk-accent-ink); }
/* подпись под баннером — капсулой, голым текстом на небе она не читается */
body.sky-skeleton .project-skeleton > div[style*="font-size:13px"] {
  width: fit-content; max-width: 100%; box-sizing: border-box; padding: 8px 16px; border-radius: 14px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2) !important; font-size: 14px !important;
}
body.sky-skeleton .project-skeleton .fg-label { color: var(--sk-accent-ink); }
body.sky-skeleton .project-skeleton .form-input, body.sky-skeleton .project-skeleton .form-textarea, body.sky-skeleton .project-skeleton .pfmt-select {
  background: rgba(255,255,255,.94); color: #0f1f1a; border: 1.5px solid rgba(15,31,26,.14); border-radius: 12px;
  font-family: var(--ds-font-sans); font-size: 15px; line-height: 1.5;
}
body.sky-skeleton .project-skeleton .form-input:focus, body.sky-skeleton .project-skeleton .form-textarea:focus, body.sky-skeleton .project-skeleton .pfmt-select:focus {
  outline: none; border-color: var(--sk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 25%, transparent);
}
body.sky-skeleton .project-skeleton .pfmt-label { color: var(--sk-ink2); }
body.sky-skeleton .project-skeleton .pfmt-hint, body.sky-skeleton .project-skeleton .chapter-limit-hint { color: var(--sk-ink2); }
body.sky-skeleton .project-skeleton .btn-link { color: var(--sk-accent-ink); font-weight: 600; }
body.sky-skeleton .project-skeleton .btn-primary { color: #0f1f1a; flex: none; }
body.sky-skeleton .project-skeleton .btn-secondary {
  background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border: 1px solid var(--sk-line); color: var(--sk-ink);
}
body.sky-skeleton .project-skeleton .btn-secondary:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }

/* главы — карточки внутри стеклянного блока: светлее и с тонкой рамкой, чтобы читались как «вложенные» */
body.sky-skeleton .project-skeleton .chapter-card {
  background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border: 1px solid var(--sk-line); border-radius: 14px;
}
body.sky-skeleton .project-skeleton .chapter-num { color: var(--sk-accent-ink); }
body.sky-skeleton .project-skeleton .ch-tool {
  background: rgba(255,255,255,.85); color: #0f1f1a; border: 1px solid rgba(15,31,26,.12);
}
body.sky-skeleton .project-skeleton .ch-tool-del:hover { background: #fde2e2; color: #8e1f15; }
body.sky-skeleton .project-skeleton .chapter-zones { background: #fff4dc; color: #3d2a00; border-radius: 12px; }
body.sky-skeleton .project-skeleton .chapter-zones-title { color: #6b4f00; }
body.sky-skeleton .project-skeleton .zone-has-sample { color: #8a5a12; }
body.sky-skeleton .project-skeleton .q-btn-x { background: rgba(255,255,255,.85); color: #0f1f1a; }
/* строка «Оформление документа» и кнопки внизу — на своей капсуле */
body.sky-skeleton .project-skeleton > .pfmt-row {
  padding: 14px 18px; border-radius: 18px; background: var(--sk-block); box-shadow: var(--sk-block-edge);
}
body.sky-skeleton .project-skeleton .ovz-basis-bar { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border-color: var(--sk-line); color: var(--sk-ink2); }

body.sky-skeleton .project-skeleton .success-banner::after, body.sky-skeleton .project-skeleton > .form-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}


/* ======================================================================================
   Кабинет «Дети с ОВЗ» — внутренние экраны (программы, картотека, рабочий стол ребёнка,
   анкета, план урока, задания, копилка). Кремовая подложка снята: те же правила, что в
   ПроУроке. Карточки и списки — мятное стекло (плотность плашек кабинета). Готовые
   документы (план урока, программа) и таблица результатов — «бумага». Заголовки — капсулой,
   пояснения — плоской справкой с зелёной чертой, как у внеурочки.
   ====================================================================================== */
body.sky-ovzwork .ovz-main {
  --ds-ink: var(--sk-ink); --ds-ink-2: var(--sk-ink2); --ds-ink-3: var(--sk-ink2); --ds-ink-4: var(--sk-ink3);
  color: var(--sk-ink);
}
/* стекло */
body.sky-ovzwork :is(.ovz-fork, .ovz-case, .ovz-desk, .ovz-form, .ovz-empty, .ovz-kid-panel, .ovz-kid,
  .ovz-course, .ovz-handout, .ovz-center, .ovz-gen, .ovz-lesson, .ovz-work-card) {
  position: relative;
  background: var(--sk-block) !important; border-color: transparent !important;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
  box-shadow: var(--sk-block-edge), 0 16px 40px -24px rgba(6,12,36,.5) !important;
  color: var(--sk-ink);
}
body.sky-ovzwork :is(.ovz-fork, .ovz-case, .ovz-kid, .ovz-course):hover { background: var(--sk-block-hover) !important; }
/* цветная кромка трека (зелёная — адаптация, бирюзовая — СИПР) остаётся: по ней узнают трек */
body.sky-ovzwork .ovz-fork { border-top: 4px solid var(--sk-accent) !important; }
body.sky-ovzwork .ovz-fork.theme-teal { border-top-color: #1f8f9a !important; }
body.sky-ovzwork :is(.ovz-case, .ovz-desk) { border-left: 6px solid var(--sk-accent) !important; }
body.sky-ovzwork :is(.ovz-case, .ovz-desk).theme-teal { border-left-color: #1f8f9a !important; }
body.sky-ovzwork .ovz-empty { border: 1.5px dashed var(--sk-line) !important; }

/* шрифт интерфейса вместо Merriweather в заголовках экранов и карточек (документы — ниже) */
body.sky-ovzwork :is(.ovz-h1, .ovz-h2, .ovz-fork-name) { font-family: var(--ds-font-sans); color: var(--sk-ink); }
/* заголовок экрана — капсулой (голым на небе не читается) */
body.sky-ovzwork :is(.ovz-list-head, .ovz-toolbar, .ovz-backbar) > .ovz-h1,
body.sky-ovzwork .ovz-list-head > div > .ovz-h1,
body.sky-ovzwork .ovz-main > .ovz-h1 {
  width: fit-content; max-width: 100%; box-sizing: border-box; padding: 10px 20px; border-radius: 18px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge), 0 16px 40px -26px rgba(6,12,36,.5);
  font-size: 26px;
}
body.sky-ovzwork .ovz-h2 { display: inline-block; padding: 8px 18px; border-radius: 999px; background: var(--sk-block); box-shadow: var(--sk-block-edge); font-size: 19px; }
/* пояснения под заголовком и «Данные ребёнка не уходят…» — плоская справка */
body.sky-ovzwork :is(.ovz-page-desc, .ovz-privacy) {
  background: var(--sk-block) !important; border: 0 !important; border-left: 4px solid var(--sk-accent) !important;
  border-radius: 0 12px 12px 0 !important; padding: 10px 16px !important; color: var(--sk-ink) !important;
  -webkit-backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35); backdrop-filter: blur(calc(var(--sk-blur) * 2)) saturate(1.35);
}
/* подписи, которые экраны кладут прямо на небо */
body.sky-ovzwork :is(.ovz-main, .ovz-programs, .ovz-programs .ovz-mt) > :is(p.ovz-muted, .ovz-muted, .ovz-busy, .ovz-section-title) {
  width: fit-content; max-width: 100%; box-sizing: border-box; padding: 8px 16px; border-radius: 14px;
  background: var(--sk-block); box-shadow: var(--sk-block-edge); color: var(--sk-ink2);
}
body.sky-ovzwork .ovz-muted { color: var(--sk-ink2); }

/* мелочи на стекле */
body.sky-ovzwork :is(.ovz-fork-for, .ovz-case-pill) { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent) !important; border-color: var(--sk-line) !important; color: var(--sk-ink) !important; }
body.sky-ovzwork .ovz-fork-tagline { color: var(--sk-accent-ink); }
body.sky-ovzwork .ovz-fork.theme-teal .ovz-fork-tagline { color: #136a73; }
body.sky-ovzwork :is(.ovz-fork-desc, .ovz-fork-count, .ovz-case-date, .ovz-case-flag, .ovz-desk-facts) { color: var(--sk-ink2); }
body.sky-ovzwork :is(.ovz-case-avatar, .ovz-desk-avatar, .ovz-kid-ava) { background: rgba(255,255,255,.88); box-shadow: 0 4px 12px -8px rgba(6,12,36,.5); }
body.sky-ovzwork .ovz-case-open:hover { background: color-mix(in srgb, var(--sk-glass-c) 45%, transparent); }
body.sky-ovzwork .ovz-subj-chip { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
body.sky-ovzwork .ovz-subj-chip.is-done { background: color-mix(in srgb, var(--sk-accent) 18%, #ffffff); border-color: var(--sk-accent); color: #0f3d2b; }
body.sky-ovzwork .ovz-subj-chip.is-draft { background: #fde7b8; border-color: #e0a13a; color: #3d2a00; }
body.sky-ovzwork .ovz-desk-mark { background: color-mix(in srgb, var(--sk-glass-c) 55%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
body.sky-ovzwork .ovz-desk-mark.is-ok { background: color-mix(in srgb, var(--sk-accent) 18%, #ffffff); border-color: var(--sk-accent); color: #0f3d2b; }
body.sky-ovzwork .ovz-desk-mark.is-warn { background: #fde7b8; border-color: #e0a13a; color: #3d2a00; }
body.sky-ovzwork .ovz-chip { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
body.sky-ovzwork .ovz-chip:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }
body.sky-ovzwork .ovz-chip.is-active { background: var(--sk-accent); border-color: var(--sk-accent); color: #fff; }
body.sky-ovzwork .ovz-status { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent); color: var(--sk-ink2); }
body.sky-ovzwork :is(.ovz-status.is-has, .ovz-status.is-ready) { background: color-mix(in srgb, var(--sk-accent) 18%, #ffffff); color: #0f3d2b; }
body.sky-ovzwork :is(.ovz-status.is-draft, .ovz-status.is-stale) { background: #fde7b8; color: #5a3d00; }
body.sky-ovzwork .ovz-track-badge { background: rgba(255,255,255,.88); color: #1b6b4a; }
body.sky-ovzwork .ovz-flag { background: color-mix(in srgb, var(--sk-glass-c) 60%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
body.sky-ovzwork .ovz-flag.is-off { background: transparent; color: var(--sk-ink2); }
/* янтарные пометки — текст всегда тёмный («правило ночи») */
body.sky-ovzwork :is(.ovz-warn, .ovz-beta, .ovz-consent) { background: #fff1d6 !important; color: #3d2a00 !important; }
body.sky-ovzwork .ovz-gen-clock { color: var(--sk-accent-ink); }

/* поля — белые; внутренние рамки групп — тонкие светлые */
body.sky-ovzwork .ovz-input { background: rgba(255,255,255,.94); color: #0f1f1a; border-color: rgba(15,31,26,.16); border-radius: 12px; }
body.sky-ovzwork .ovz-input:focus { outline: none; border-color: var(--sk-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-accent) 22%, transparent); }
body.sky-ovzwork :is(.ovz-filebox, .ovz-group, .ovz-course-topics) { border-color: var(--sk-line); background: color-mix(in srgb, var(--sk-glass-c) 35%, transparent); }
body.sky-ovzwork .ovz-field label, body.sky-ovzwork .ovz-field-label { color: var(--sk-ink); }

/* кнопки второго ряда на стекле; зелёная «вторичная» и янтарная — как в проде */
body.sky-ovzwork .ovz-main .btn-tertiary { background: color-mix(in srgb, var(--sk-glass-c) 62%, transparent); border-color: var(--sk-line); color: var(--sk-ink); }
body.sky-ovzwork .ovz-main .btn-tertiary:hover { background: color-mix(in srgb, var(--sk-glass-c) 88%, transparent); }

/* «бумага»: документы и таблица результатов */
body.sky-ovzwork :is(.ovz-doc, .ovz-plan-doc, .ovz-mytests-wrap, .ovz-prog-section, .ovz-due-card) {
  --ds-ink: #0f1f1a; --ds-ink-2: #3a4f46; --ds-ink-3: #6b7e76; --ds-ink-4: #9aa9a3;
  background: color-mix(in srgb, #ffffff 97%, transparent) !important; color: #111c18;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 26px 60px -28px rgba(6,12,36,.55);
}
body.sky-ovzwork .ovz-doc { border-radius: 18px; }

/* блик по кромке */
body.sky-ovzwork :is(.ovz-fork, .ovz-desk, .ovz-form, .ovz-kid-panel)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--sk-glint-angle), rgba(255,255,255,.06), rgba(255,255,255,.18) 52%, rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--sk-glint-a);
}
@media (max-width: 768px) {
  body.sky-ovzwork :is(.ovz-list-head, .ovz-toolbar, .ovz-backbar) > .ovz-h1,
  body.sky-ovzwork .ovz-list-head > div > .ovz-h1, body.sky-ovzwork .ovz-main > .ovz-h1 { font-size: 21px; padding: 8px 16px; }
}


/* Кабинет ОВЗ, телефон: имя и подписка — в «Ещё» (решение Пита 28.09, как в ПроУроке).
   «Оплатить» у пробного и закончившегося доступа остаётся в шапке. */
@media (max-width: 768px) {
  .ovz-hdr .ovz-user-chip, .ovz-hdr #ovz-access-badge, .ovz-hdr #ovz-quota { display: none !important; }
}
.sk-prof-ovz { font: inherit; color: inherit; text-align: left; }
.sk-prof-ovz strong { display: block; }
.sk-prof-ovz small { display: block; font-size: 12.5px; }


/* ======================================================================================
   Выбор фона (TASK 695 §2): «по времени суток» / «всегда светлый» / «всегда тёмный».
   Компьютер — круглая кнопка справа внизу, телефон — строка в шторке «Ещё». Список —
   на «бумаге»: фон светлый и постоянный, поэтому текст тёмный всегда («правило ночи»).
   ====================================================================================== */
.sk-mode { position: fixed; right: 18px; bottom: 18px; z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sk-mode-btn {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sk-glass-c) 70%, transparent); color: var(--sk-ink);
  border: 1px solid var(--sk-line);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 10px 26px -12px rgba(6,12,36,.55);
}
.sk-mode-btn:hover { background: color-mix(in srgb, var(--sk-glass-c) 90%, transparent); }
.sk-mode-btn:focus-visible, .sk-mode-opt:focus-visible { outline: 3px solid var(--sk-accent); outline-offset: 2px; }
.sk-mode-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sk-mode-pop {
  width: 280px; padding: 12px; border-radius: 16px;
  background: #fff; color: #0f1f1a;
  box-shadow: inset 0 0 0 1px rgba(15,31,26,.08), 0 22px 50px -20px rgba(6,12,36,.6);
}
.sk-mode-pop[hidden] { display: none; }
.sk-mode-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #3a4f46; margin: 0 4px 8px; }
.sk-mode-opts { display: flex; flex-direction: column; gap: 4px; }
.sk-mode-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: #0f1f1a;
  font: inherit; text-align: left; cursor: pointer;
}
.sk-mode-opt:hover { background: #eef5f1; }
.sk-mode-opt[aria-pressed="true"] { background: #e3f3eb; border-color: #1b6b4a; }
.sk-mode-opt svg { width: 22px; height: 22px; flex: none; stroke: #1b6b4a; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; color: #1b6b4a; }
.sk-mode-opt span { display: flex; flex-direction: column; line-height: 1.3; }
.sk-mode-opt strong { font-size: 15px; font-weight: 600; }
.sk-mode-opt small { font-size: 13px; color: #3a4f46; }
/* строка в шторке «Ещё» (телефон): шторка белая */
.sk-mode-row { margin: 6px 0 10px; padding: 12px 8px 4px; border-top: 1px solid rgba(15,31,26,.1); }
@media (max-width: 768px) {
  .sk-mode { display: none; }
}




/* ======================================================================================
   Адаптация под экран (04.10.2026, просьба Пита: «сколько воздуха… при сворачивании экрана,
   другого монитора нужна адаптация»). Живой замер на семи размерах окна дал три дефекта:
   (1) левое меню занимает ~895 px и на ноутбуке «Канал в Максе», «Поддержка» и «Начать заново»
       уезжали за нижний край — теперь список прокручивается сам, а нижняя группа закреплена;
       на невысоком окне (≤ 940 px) подписи-подсказки под названиями скрываются;
   (2) ширина содержимого была зашита числами (960–1320 px) — на 1920 пустых полей 540–680 px,
       на 2560 — до 1300 px; от 1600 px содержимое растёт вместе с окном (решение Пита 04.10:
       «расширяй», а не масштабируй — размер текста прежний, места под таблицы больше);
   (3) на 861–1180 px шапка переносилась на второй ряд и съедала ~60 px высоты — теперь
       «Поддержка» и «Инструкция» превращаются в значки, имя прячется только на ≤ 960 px.
   Все числа — в этом блоке, а не в десятке мест: поменять потолок = одна правка.
   ====================================================================================== */

/* ---- (1) левое меню: прокручивается список, а не вся панель ---- */
.sidebar { overflow: hidden; }
.sidebar .sb-section { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sk-ink) 28%, transparent) transparent; margin-bottom: 0; }
.sidebar .sb-bottom { flex: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sk-ink) 12%, transparent); }
.ovz-side { overflow: hidden !important; }
.ovz-side .ovz-nav { min-height: 0; flex: 1 1 auto; }
.ovz-side .ovz-nav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sk-ink) 28%, transparent) transparent; }
.ovz-side .ovz-sb-bottom { flex: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--sk-ink) 12%, transparent); }
@media (max-height: 1010px) {
  /* 861–1010 px: подпись в одну строку с многоточием — пункт остаётся понятным и занимает меньше места */
  .sidebar .nav-text small, .ovz-side .ovz-nav-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sidebar .nav-text, .ovz-side .ovz-nav-text { min-width: 0; }
  .sidebar .nav-item, .ovz-side .ovz-nav a, .ovz-side .ovz-nav button { min-height: var(--ds-tap-target, 44px); padding-top: 4px; padding-bottom: 4px; }
  .ovz-side .ovz-nav-title { padding-top: 6px; padding-bottom: 2px; }
}
@media (max-height: 860px) {
  .sidebar .nav-text small, .ovz-side .ovz-nav-text small { display: none; }
}

/* ---- (3) шапка: от 861 до 1180 px — в один ряд, подписи кнопок скрыты (значок + подсказка) ---- */
@media (min-width: 769px) and (max-width: 1180px) {
  .hdr-lbl, .hb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 960px) {
  body.sk-hdr-island header .user-name, body.sk-hdr-island .ovz-hdr .ovz-user { display: none; }
}

/* ---- (2) ширина содержимого на больших мониторах ---- */
@media (min-width: 1300px) and (max-width: 1599px) {
  html body .form-wrap, html body .chat-wrap { max-width: 1076px; }
}
@media (min-width: 1600px) {
  html body .welcome-wrap, html body .home-v3 { max-width: 1400px; }
  html body .form-wrap { max-width: 1240px; }
  html body .chat-wrap { max-width: 1300px; }
  html body .kopilka-wrap { max-width: 1500px; }
  html body .project-chat-container { max-width: 1500px; }
  html body .fipi-wrap { max-width: 1560px; }
  html body .vn-main { max-width: 1560px; }
  html body .result-wrap { max-width: 1640px; }
  html body .ovz-main, html body .pv-main { max-width: 1440px; }
  body.sky-chat .msg.assistant .msg-bubble, body.sky-chat .msg.user .msg-bubble { max-width: min(78%, 880px); }
}
@media (min-width: 2200px) {
  html body .welcome-wrap, html body .home-v3 { max-width: 1700px; }
  html body .form-wrap { max-width: 1500px; }
  html body .chat-wrap { max-width: 1560px; }
  html body .kopilka-wrap { max-width: 1900px; }
  html body .project-chat-container { max-width: 1900px; }
  html body .fipi-wrap { max-width: 1960px; }
  html body .vn-main { max-width: 1960px; }
  html body .result-wrap { max-width: 2000px; }
  html body .ovz-main, html body .pv-main { max-width: 1760px; }
}
}   /* @supports color-mix */