/* ═══════════════════════════════════════════════════════════════════════
   ОСНОВАТЕЛИ · ФУНДАМЕНТ ДИЗАЙН-СИСТЕМЫ (мини-апп телеграм-бота)

   Перенос с кабинета курса: /lms/site/system.css + токены /lms/site/cabinet.css.
   Язык системы — «Apple в облаках»: холодная голубая бумага, волосяные линии
   вместо рамок, стекло вместо заливок, один акцент на экран.

   Здесь ТОЛЬКО общее: шрифты, токены обеих тем, сброс, фон страницы, фокус.
   Всё остальное (компоненты кабинета) живёт в cabinet.css, который обязан
   подключаться ВТОРЫМ — он опирается на эти переменные.

   ⚠️ Тёмная тема объявлена ДВАЖДЫ дословно: по [data-theme="dark"] и под
   медиа-гардом. Иначе тумблер темы перестаёт перебивать систему в одну из
   сторон. Правишь одну копию — правь вторую. В исходнике LMS эти копии уже
   успели разъехаться, повторять эту историю не надо.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Шрифты ──────────────────────────────────────────────────────────
   Заголовки — Montserrat, текст — системный (San Francisco на Apple,
   Segoe UI на Windows, Roboto на Android).

   Montserrat лежит у нас (webapp/fonts, раздаётся из webapp.js по /fonts/),
   а не тянется из Google: страница не зависит от чужого домена и одинаково
   быстро грузится изнутри телеграма. Взяты только кириллица и латиница,
   веса 600 и 700 — в заголовках других не бывает.
   swap: пока файл едет, заголовок рисуется системным, а не пустотой.
   ────────────────────────────────────────────────────────────────────── */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/montserrat-600-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/montserrat-700-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}

/* ── Токены · светлая тема ─────────────────────────────────────────────
   Полная палитра живёт на голом :root. Ни один цвет не имеет права быть
   объявлен только внутри @media или только внутри [data-theme] — тумблер
   умеет снимать атрибут вовсе, и тогда работает вот этот блок.
   ────────────────────────────────────────────────────────────────────── */
:root{
  /* поверхности и чернила */
  --cream:#EFF5FE; --soft:#E4EEFC; --card:#FFFFFF; --shade:#EFF5FE;
  --ink:#071A35; --ink2:#3F5B79; --taupe:#60728B; --muted:#60728b; --dim:#7d97b8;
  --head:#2e5074; --head-dim:#2c4f74; --sub:#6f88a5;
  /* инверсная плашка: меняется ролями с --cream при смене темы, поэтому
     тост, «следующая встреча» и основная кнопка переворачиваются сами */
  --black:#071A35;
  /* линии: система различает волосяной разделитель, кромку стекла и рамку контрола */
  --line:rgba(126,166,219,.26); --hair:rgba(126,166,219,.26); --ring:#CFE0F5;
  /* акцент — синий, единственный на экран */
  --blue:#0878EE; --blue-soft:rgba(8,120,238,.11); --focus:#0A63D8;
  /* состояния */
  --green:#1E9A5C; --ok-bg:rgba(30,154,92,.12); --ok-ink:#0A5C2E;
  --alarm-ink:#8d3a3f; --alarm-bg:rgba(255,241,242,.86); --alarm-line:rgba(226,140,140,.4);
  --live:#E5484D; --live-ring:rgba(229,72,77,.55);
  /* ── Акцент: ЕДИНСТВЕННАЯ синяя кнопка экрана ───────────────────────
     Рецепт один на весь мини-апп. Раньше он был переписан руками в шести
     местах, причём наполовину: второй стоп брался из var(--blue), а первый
     оставался дневным хардкодом. В ночи --blue светлеет — и белая надпись
     на кнопке падала до 2.7:1. Меняешь акцент — меняешь здесь, один раз. */
  --accent-bg:linear-gradient(160deg,#2E90FF,#0878EE); --accent-ink:#fff;
  --accent-glow:rgba(8,120,238,.8); --accent-sheen:rgba(255,255,255,.34);
  /* Перо на СПЛОШНОЙ заливке статуса (зелёной, красной) и на светлой
     кнопке героя. В ночи заливки светлеют, и белая галочка на них слепнет
     (2.05:1 на зелёной) — поэтому в тёмной теме перо тёмное. */
  --on-solid:#fff;
  --hero-on-ink:#0b1e38;
  --bar-fill:linear-gradient(90deg,#0878EE,#51adff);
  /* стекло: три плотности одного материала, иерархию держат они,
     а не тёмная заливка */
  --glass-line:rgba(255,255,255,.84);
  --glass-1:linear-gradient(148deg,rgba(255,255,255,.90),rgba(226,239,255,.74));
  --glass-2:linear-gradient(148deg,rgba(255,255,255,.72),rgba(228,240,255,.50));
  --glass-3:linear-gradient(148deg,rgba(255,255,255,.52),rgba(228,240,255,.34));
  --pane:linear-gradient(148deg,rgba(255,255,255,.72),rgba(228,240,255,.5));
  --pane-edge:inset 0 1px #fff,inset -1px -1px rgba(111,153,220,.12),0 22px 52px -40px rgba(24,68,124,.5);
  --inset-1:inset 0 1px #fff;
  --hover-bg:rgba(255,255,255,.55);
  --seg-on:rgba(255,255,255,.88);
  /* чипы и поля */
  --chip-ink:#5c718c; --chip-line:rgba(255,255,255,.8);
  --chip-bg:linear-gradient(145deg,rgba(255,255,255,.62),rgba(220,232,246,.5));
  --chip-on:linear-gradient(145deg,rgba(214,244,225,.92),rgba(186,232,203,.7));
  /* тихая кнопка */
  --btn-ink:#0a4a9e; --btn-line:rgba(255,255,255,.82);
  --btn-bg:linear-gradient(145deg,rgba(255,255,255,.82),rgba(210,232,255,.62));
  /* активная / будущая поверхность */
  --open-line:rgba(8,120,238,.28);
  --open-bg:linear-gradient(148deg,rgba(255,255,255,.86),rgba(215,235,255,.62));
  --soon-line:rgba(120,163,218,.42);
  --soon-bg:linear-gradient(145deg,rgba(255,255,255,.42),rgba(226,238,253,.28));
  /* дорожки прогресса и отметки */
  --track:#DDE8F7; --track-bg:rgba(255,255,255,.6); --track-line:rgba(255,255,255,.8);
  --tick-line:rgba(120,163,218,.45); --tick-bg:rgba(255,255,255,.6);
  --fi-bg:rgba(255,255,255,.74); --fi-line:rgba(255,255,255,.86);
  /* герой: единственный плотный объект на экране */
  --hero-bg:linear-gradient(158deg,#123056,#0b1e38);
  --hero-ink:#fff; --hero-sub:rgba(206,226,248,.76); --hero-kick:#84b6f2;
  --hero-line:rgba(255,255,255,.9);
  --hero-edge:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(24,68,124,.12),0 40px 80px -46px rgba(24,68,124,.62),0 12px 28px -22px rgba(24,68,124,.4);
  --hero-track:rgba(255,255,255,.15); --hero-fill:#4b96e8; --hero-hair:rgba(255,255,255,.13);
  /* тени */
  --shadow:0 22px 52px -40px rgba(24,68,124,.5);
  --shadow-hero:0 40px 80px -46px rgba(24,68,124,.62),0 12px 28px -22px rgba(24,68,124,.4);
  --scrim:rgba(6,14,26,.5);
  /* фон страницы: небо, а не ровная заливка */
  --page:radial-gradient(circle at 77% 6%,rgba(255,255,255,.95) 0 8%,transparent 30%),
         linear-gradient(150deg,#F7FBFF 2%,#E3F0FE 46%,#BFDBFC 100%);
  --sky:.5;
  /* типографика */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,Roboto,sans-serif;
  --font-head:'Montserrat',var(--font);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* геометрия */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;
  --r-s:12px; --r-m:18px; --r-l:26px;
  --ease:cubic-bezier(.2,.7,.3,1); --dur:.18s;
}

/* ── Токены · тёмная тема ──────────────────────────────────────────────
   Не инверсия, а та же бумага при другом свете. Панели темнее неба, свет
   держат кромки и синие акценты — не заливка.
   ⚠️ Герой в ночи СВЕТЛЕЕ фона (#27497a против #071223) — это не опечатка:
   днём плотный объект тёмный, ночью светлый, полярность переворачивается.
   ────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"]{
  --cream:#0B1420; --soft:#111C2C; --card:#152234; --shade:#0B1420;
  --ink:#E8EEF7; --ink2:#B9C8DC; --taupe:#8598B1; --muted:#8FA6C2; --dim:#64809f;
  --head:#DEE9F8; --head-dim:#A8BFDC; --sub:#7E96B6;
  --black:#E8EEF7;
  --line:rgba(126,166,219,.20); --hair:rgba(126,166,219,.20); --ring:#2A3D57;
  --blue:#4EA1FF; --blue-soft:rgba(78,161,255,.16); --focus:#7CC0FF;
  --green:#5FC98C; --ok-bg:rgba(95,201,140,.14); --ok-ink:#7FD3A2;
  --alarm-ink:#F0A8AC; --alarm-bg:rgba(112,30,38,.3); --alarm-line:rgba(226,140,140,.22);
  --live:#FF6369; --live-ring:rgba(255,99,105,.5);
  --accent-bg:linear-gradient(160deg,#2673D2,#1A63C6); --accent-ink:#fff;
  --accent-glow:rgba(0,0,0,.7); --accent-sheen:rgba(255,255,255,.22);
  --on-solid:#071223;
  --hero-on-ink:#0b1e38;
  --bar-fill:linear-gradient(90deg,#4EA1FF,#8FC6FF);
  --glass-line:rgba(255,255,255,.10);
  --glass-1:linear-gradient(148deg,rgba(32,52,80,.92),rgba(18,32,52,.78));
  --glass-2:linear-gradient(148deg,rgba(26,44,68,.72),rgba(16,28,46,.56));
  --glass-3:linear-gradient(148deg,rgba(22,38,60,.52),rgba(14,26,42,.40));
  --pane:linear-gradient(165deg,rgba(17,32,56,.6),rgba(6,13,26,.44));
  --pane-edge:inset 0 1px rgba(255,255,255,.06),0 30px 70px -45px rgba(0,0,0,.85);
  --inset-1:inset 0 1px rgba(255,255,255,.08);
  --hover-bg:rgba(255,255,255,.07);
  --seg-on:rgba(255,255,255,.12);
  --chip-ink:#A8BFDC; --chip-line:rgba(255,255,255,.12);
  --chip-bg:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  --chip-on:linear-gradient(145deg,rgba(52,140,92,.28),rgba(28,84,55,.24));
  --btn-ink:#BFDCFF; --btn-line:rgba(122,180,255,.3);
  --btn-bg:linear-gradient(145deg,rgba(78,161,255,.2),rgba(32,74,136,.18));
  --open-line:rgba(96,170,255,.36);
  --open-bg:linear-gradient(165deg,rgba(22,42,74,.66),rgba(8,17,32,.5));
  --soon-line:rgba(126,166,219,.22);
  --soon-bg:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  --track:#1B2B40; --track-bg:rgba(255,255,255,.08); --track-line:rgba(255,255,255,.07);
  --tick-line:rgba(126,166,219,.36); --tick-bg:rgba(255,255,255,.06);
  --fi-bg:rgba(78,161,255,.12); --fi-line:rgba(122,180,255,.24);
  --hero-bg:linear-gradient(158deg,#27497a,#1a3357);
  --hero-ink:#eef4fd; --hero-sub:rgba(190,212,238,.74); --hero-kick:#8fc3ff;
  --hero-line:rgba(122,180,255,.24);
  --hero-edge:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.3),0 44px 90px -50px rgba(0,0,0,.9);
  --hero-track:rgba(255,255,255,.16); --hero-fill:#5aa6f2; --hero-hair:rgba(255,255,255,.1);
  --shadow:0 22px 52px -40px rgba(0,0,0,.7);
  --shadow-hero:0 40px 80px -46px rgba(0,0,0,.8),0 12px 28px -22px rgba(0,0,0,.55);
  --scrim:rgba(2,6,14,.62);
  --page:linear-gradient(168deg,#04070D 0%,#071223 48%,#0A1B33 100%);
  --sky:.2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cream:#0B1420; --soft:#111C2C; --card:#152234; --shade:#0B1420;
    --ink:#E8EEF7; --ink2:#B9C8DC; --taupe:#8598B1; --muted:#8FA6C2; --dim:#64809f;
    --head:#DEE9F8; --head-dim:#A8BFDC; --sub:#7E96B6;
    --black:#E8EEF7;
    --line:rgba(126,166,219,.20); --hair:rgba(126,166,219,.20); --ring:#2A3D57;
    --blue:#4EA1FF; --blue-soft:rgba(78,161,255,.16); --focus:#7CC0FF;
    --green:#5FC98C; --ok-bg:rgba(95,201,140,.14); --ok-ink:#7FD3A2;
    --alarm-ink:#F0A8AC; --alarm-bg:rgba(112,30,38,.3); --alarm-line:rgba(226,140,140,.22);
    --live:#FF6369; --live-ring:rgba(255,99,105,.5);
    --accent-bg:linear-gradient(160deg,#2673D2,#1A63C6); --accent-ink:#fff;
    --accent-glow:rgba(0,0,0,.7); --accent-sheen:rgba(255,255,255,.22);
    --on-solid:#071223;
    --hero-on-ink:#0b1e38;
    --bar-fill:linear-gradient(90deg,#4EA1FF,#8FC6FF);
    --glass-line:rgba(255,255,255,.10);
    --glass-1:linear-gradient(148deg,rgba(32,52,80,.92),rgba(18,32,52,.78));
    --glass-2:linear-gradient(148deg,rgba(26,44,68,.72),rgba(16,28,46,.56));
    --glass-3:linear-gradient(148deg,rgba(22,38,60,.52),rgba(14,26,42,.40));
    --pane:linear-gradient(165deg,rgba(17,32,56,.6),rgba(6,13,26,.44));
    --pane-edge:inset 0 1px rgba(255,255,255,.06),0 30px 70px -45px rgba(0,0,0,.85);
    --inset-1:inset 0 1px rgba(255,255,255,.08);
    --hover-bg:rgba(255,255,255,.07);
    --seg-on:rgba(255,255,255,.12);
    --chip-ink:#A8BFDC; --chip-line:rgba(255,255,255,.12);
    --chip-bg:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    --chip-on:linear-gradient(145deg,rgba(52,140,92,.28),rgba(28,84,55,.24));
    --btn-ink:#BFDCFF; --btn-line:rgba(122,180,255,.3);
    --btn-bg:linear-gradient(145deg,rgba(78,161,255,.2),rgba(32,74,136,.18));
    --open-line:rgba(96,170,255,.36);
    --open-bg:linear-gradient(165deg,rgba(22,42,74,.66),rgba(8,17,32,.5));
    --soon-line:rgba(126,166,219,.22);
    --soon-bg:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    --track:#1B2B40; --track-bg:rgba(255,255,255,.08); --track-line:rgba(255,255,255,.07);
    --tick-line:rgba(126,166,219,.36); --tick-bg:rgba(255,255,255,.06);
    --fi-bg:rgba(78,161,255,.12); --fi-line:rgba(122,180,255,.24);
    --hero-bg:linear-gradient(158deg,#27497a,#1a3357);
    --hero-ink:#eef4fd; --hero-sub:rgba(190,212,238,.74); --hero-kick:#8fc3ff;
    --hero-line:rgba(122,180,255,.24);
    --hero-edge:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.3),0 44px 90px -50px rgba(0,0,0,.9);
    --hero-track:rgba(255,255,255,.16); --hero-fill:#5aa6f2; --hero-hair:rgba(255,255,255,.1);
    --shadow:0 22px 52px -40px rgba(0,0,0,.7);
    --shadow-hero:0 40px 80px -46px rgba(0,0,0,.8),0 12px 28px -22px rgba(0,0,0,.55);
    --scrim:rgba(2,6,14,.62);
    --page:linear-gradient(168deg,#04070D 0%,#071223 48%,#0A1B33 100%);
    --sky:.2;
  }
}

/* ── Сброс и основа ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:clip}
body{margin:0;min-height:100svh;color:var(--ink);font-family:var(--font);line-height:1.5;
  /* Фон обязан быть явным токеном: прозрачное тело внутри телеграма
     подхватит чужую подложку и стекло поедет. */
  background:var(--page);background-attachment:fixed;-webkit-font-smoothing:antialiased}

/* ⚠️ ОБЯЗАТЕЛЬНО, а не украшение. Стеклу нужен неоднородный фон: на ровной
   заливке преломление не увидеть — смещать нечего, и «стекло» выглядит
   серой плёнкой. Несколько мягких цветных пятен под содержимым дают небу
   глубину и кромкам панелей что ломать. */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34vw 26vw at 6% -4%,rgba(56,132,232,.55),transparent 60%),
    radial-gradient(26vw 20vw at 34% 4%,rgba(126,196,255,.5),transparent 62%),
    radial-gradient(30vw 22vw at 68% -6%,rgba(24,68,124,.3),transparent 58%),
    radial-gradient(22vw 18vw at 92% 10%,rgba(140,205,255,.5),transparent 62%),
    radial-gradient(40vw 26vw at 52% 34%,rgba(255,255,255,.55),transparent 66%),
    radial-gradient(58% 40% at 12% 100%,rgba(255,255,255,.8),transparent 62%)}
/* Ночь. Прожектор сверху, слабый ответный свет из угла и виньетка,
   собирающая взгляд к центру: не цвет, а свет. */
:root[data-theme="dark"] body::after{
  background:
    radial-gradient(64vw 46vh at 50% 4%,rgba(56,130,225,.33),transparent 64%),
    radial-gradient(50vw 38vh at 86% 94%,rgba(26,80,160,.22),transparent 62%),
    radial-gradient(150% 130% at 50% 42%,transparent 52%,rgba(1,3,8,.62) 100%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{
    background:
      radial-gradient(64vw 46vh at 50% 4%,rgba(56,130,225,.33),transparent 64%),
      radial-gradient(50vw 38vh at 86% 94%,rgba(26,80,160,.22),transparent 62%),
      radial-gradient(150% 130% at 50% 42%,transparent 52%,rgba(1,3,8,.62) 100%)}
}

h1,h2,h3{margin:0;font-family:var(--font-head);font-weight:650;letter-spacing:-.02em;
  line-height:1.16;overflow-wrap:anywhere;min-width:0}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
svg{display:block;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ── Микро-метка раздела ────────────────────────────────────────────── */
.kick{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--taupe)}

/* ── Служебное ──────────────────────────────────────────────────────── */
.hide{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── ФОКУС · канон проекта ─────────────────────────────────────────────
   Ссылки, кнопки — кольцо есть, иначе клавиатурой не пройти.
   Поля ввода — кольца НЕТ НИКОГДА: светится рамка короба вокруг поля.
   Правило продублировано в трёх файлах LMS не случайно — это канон.
   ────────────────────────────────────────────────────────────────────── */
:is(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
input:focus,textarea:focus,select:focus,
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:none}

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