/* ==========================================================================
   Информатика ОГЭ — дизайн-система «Frost v2» (Manrope)
   --------------------------------------------------------------------------
   БОЕВОЙ CSS сайта (с 2026-08-15). Подключается из layouts/app.blade.php через
   partials/ui-v2 вместе с palettes.css и палитрой «янтарь» (data-palette="amber"
   на <html>). Старый public/css/app.css оставлен АВАРИЙНЫМ ОТКАТОМ: ?ui=v1.
   Имена классов совместимы с app.css — разметка у обоих одна.

   ВАЖНО: файл отдаётся с Cache-Control на 10 лет. Любая правка здесь требует
   бампа $v в resources/views/partials/ui-v2.blade.php, иначе ученики останутся
   на старой версии.

   Что изменено против v1 (все цифры контраста пересчитаны формулой WCAG,
   таблица — в отчёте и в design-preview):
   1. Разделены токены --accent (фон кнопки) и --accent-text (акцентный текст).
   2. Типошкала: 7 ступеней с шагом ~1.25 вместо 11 почти равных размеров.
   3. Возвращён видимый :focus-visible.
   4. .feat .ic и .tag переработаны (уход от «шаблона ИИ-лендинга»).
   5. Тёмная тема: prefers-color-scheme + html[data-theme] (ручной приоритет).
   6. Utility-слой .u-* — чтобы новые шаблоны писались без style="...".
   7. Мобильное меню-бургер (CSS + checkbox, без JS-фреймворков).
   8. Лесенка теней и радиусов, тап-таргеты 44px, состояния кнопок, бейджи.
   ========================================================================== */

@import url('/fonts/manrope.css');

/* ==========================================================================
   1. ТОКЕНЫ — СВЕТЛАЯ ТЕМА
   ========================================================================== */
:root{
  color-scheme: light;

  /* --- поверхности и текст --- */
  --bg:#eaeef6;
  --ink:#1a1d27;              /* 14.46:1 на --bg, 16.81:1 на белом */
  --muted:#596175;            /* 5.32:1 на --bg, 6.19:1 на белом */
  --card:rgba(255,255,255,.72);
  --card-solid:#ffffff;
  --surface-2:#eef1f7;        /* вторичная плашка (disabled, шапки таблиц) */
  --bd:rgba(16,23,42,.09);    /* декоративная линия-волосок */
  --bd-strong:#7e8899;        /* граница интерактивного элемента: 3.58:1 на белом, 3.08:1 на --bg (порог 3) */

  /* --- акцент: ДВА РАЗНЫХ токена, это принципиально --- */
  --accent:#0a63c9;           /* ФОН кнопки. Белый текст сверху = 5.77:1 */
  --accent-ink:#ffffff;       /* текст на --accent */
  --accent-hover:#0a5299;     /* белый сверху = 7.84:1 */
  --accent-active:#08477f;
  --accent-text:#0a5299;      /* акцентный ТЕКСТ на светлом: 7.84:1 на белом, 6.74:1 на --bg */
  --accent-soft:color-mix(in srgb, var(--accent-text) 10%, var(--card-solid));
  --accent-line:color-mix(in srgb, var(--accent-text) 26%, transparent);

  /* --- статусы (те же имена, что в v1; JS-хардкоды #16a34a/#dc2626/#fef3c7 заменяются на них) --- */
  --ok:#177f47;               /* заливка: белый сверху = 5.04:1 */
  --ok-ink:#ffffff;
  --ok-text:#0f6b3a;          /* текст: 6.59:1 на белом */
  --ok-bg:color-mix(in srgb, var(--ok) 12%, var(--card-solid));
  --no:#c4292e;               /* заливка: белый сверху = 5.67:1 */
  --no-ink:#ffffff;
  --no-text:#b3242a;          /* текст: 6.56:1 на белом */
  --no-bg:color-mix(in srgb, var(--no) 8%, var(--card-solid));
  --warn:#c07a00;             /* ЗАЛИВКА (полосы): 3.49:1 на белом, 3.08:1 на треке — порог графики 3 */
  --warn-ink:#ffffff;
  --warn-text:#8a5a00;        /* ТЕКСТ: 5.93:1 на белом, 5.32:1 на --warn-bg */
  --warn-bg:#fdf2d5;

  /* --- фокус --- */
  --focus:var(--accent);      /* 4.96:1 на --bg (порог для нетекста — 3) */
  --focus-ring:3px;

  /* --- типошкала: 7 ступеней, шаг ~1.25 --- */
  --fs-xs:12px;               /* подписи, мета */
  --fs-sm:15px;               /* корпус текста (базовый) */
  --fs-md:19px;               /* лид, h3 */
  --fs-lg:23px;               /* h2 мелкий */
  --fs-xl:29px;               /* h2 */
  --fs-2xl:37px;              /* h1 */
  --fs-3xl:46px;              /* дисплейный (hero) */
  --lh-tight:1.15;
  --lh-snug:1.35;
  --lh-body:1.6;

  /* --- геометрия: шкала радиусов --- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;
  --radius:var(--r-lg);       /* совместимость с v1 */
  --radius-sm:var(--r-sm);    /* в v1 объявлен, но не использовался — теперь живой */

  /* --- лесенка теней по размеру поверхности --- */
  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 4px 10px -6px rgba(20,40,90,.18);
  --shadow-md:0 2px 4px -2px rgba(16,24,40,.06), 0 10px 22px -14px rgba(20,40,90,.28);
  --shadow-lg:0 18px 40px -22px rgba(20,40,90,.35);
  --shadow:var(--shadow-md);  /* совместимость с v1 */

  /* --- прочее --- */
  --hero-bg:radial-gradient(120% 120% at 12% 0%,#dbe4fb 0%,#eaeef6 46%,#f3eefb 100%);
  --topbar:rgba(255,255,255,.72);
  --blur:saturate(180%) blur(18px);
  --maxw:1040px;
  --space:clamp(16px,3.5vw,28px);
}

/* ==========================================================================
   2. ТЁМНАЯ ТЕМА
   Приоритет: html[data-theme] (ручной выбор) > prefers-color-scheme.
   Все токены :root переопределены.
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0f141d;
    --ink:#e9edf5;            /* 15.73:1 на --bg */
    --muted:#a0abbe;          /* 7.96:1 на --bg, 7.22:1 на карточке */
    --card:rgba(23,30,42,.66);
    --card-solid:#171e2a;
    --surface-2:#212a38;
    --bd:rgba(148,163,184,.20);
    --bd-strong:#697690;      /* 3.66:1 на карточке, 4.04:1 на --bg */
    --accent:#3d8bfd;
    --accent-ink:#08121f;     /* тёмный текст на светлой кнопке = 5.65:1 */
    --accent-hover:#5a9dff;
    --accent-active:#2f7ce8;
    --accent-text:#7db4ff;    /* 8.65:1 на --bg, 7.84:1 на карточке */
    --accent-soft:color-mix(in srgb, var(--accent-text) 16%, var(--card-solid));
    --accent-line:color-mix(in srgb, var(--accent-text) 32%, transparent);
    --ok:#3ec27a; --ok-ink:#06210f; --ok-text:#4fd18a;
    --ok-bg:color-mix(in srgb, var(--ok) 16%, var(--card-solid));
    --no:#ff6b6b; --no-ink:#2b0505; --no-text:#ff8080;
    --no-bg:color-mix(in srgb, var(--no) 14%, var(--card-solid));
    --warn:#e0a33c; --warn-ink:#2a1c04; --warn-text:#e0a33c; --warn-bg:#3a2f16;
    --focus:var(--accent-text);
    --hero-bg:radial-gradient(120% 120% at 12% 0%,#16203a 0%,#0f141d 52%,#191231 100%);
    --topbar:rgba(15,20,29,.78);
    --shadow-xs:0 1px 2px rgba(0,0,0,.45);
    --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 4px 10px -6px rgba(0,0,0,.6);
    --shadow-md:0 2px 4px -2px rgba(0,0,0,.5), 0 10px 22px -14px rgba(0,0,0,.75);
    --shadow-lg:0 18px 40px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0f141d;
  --ink:#e9edf5;
  --muted:#a0abbe;
  --card:rgba(23,30,42,.66);
  --card-solid:#171e2a;
  --surface-2:#212a38;
  --bd:rgba(148,163,184,.20);
  --bd-strong:#697690;
  --accent:#3d8bfd;
  --accent-ink:#08121f;
  --accent-hover:#5a9dff;
  --accent-active:#2f7ce8;
  --accent-text:#7db4ff;
  --accent-soft:color-mix(in srgb, var(--accent-text) 16%, var(--card-solid));
  --accent-line:color-mix(in srgb, var(--accent-text) 32%, transparent);
  --ok:#3ec27a; --ok-ink:#06210f; --ok-text:#4fd18a;
  --ok-bg:color-mix(in srgb, var(--ok) 16%, var(--card-solid));
  --no:#ff6b6b; --no-ink:#2b0505; --no-text:#ff8080;
  --no-bg:color-mix(in srgb, var(--no) 14%, var(--card-solid));
  --warn:#e0a33c; --warn-ink:#2a1c04; --warn-text:#e0a33c; --warn-bg:#3a2f16;
  --focus:var(--accent-text);
  --hero-bg:radial-gradient(120% 120% at 12% 0%,#16203a 0%,#0f141d 52%,#191231 100%);
  --topbar:rgba(15,20,29,.78);
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 4px 10px -6px rgba(0,0,0,.6);
  --shadow-md:0 2px 4px -2px rgba(0,0,0,.5), 0 10px 22px -14px rgba(0,0,0,.75);
  --shadow-lg:0 18px 40px -22px rgba(0,0,0,.9);
}

/* ==========================================================================
   3. БАЗА
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;                 /* футер прижат к низу на коротких страницах */
  display:flex; flex-direction:column;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-sm);
  color:var(--ink);
  background:var(--bg);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
code,kbd,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--surface-2);border-radius:6px;padding:.1em .35em}
hr{border:0;border-top:1px solid var(--bd);margin:24px 0}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space);width:100%}

/* ==========================================================================
   4. ФОКУС — WCAG 2.4.7. В v1 последняя строка гасила outline и для
      :focus-visible; здесь кольцо возвращено и усилено.
   ========================================================================== */
:focus{outline:none}
:focus-visible{
  outline:var(--focus-ring) solid var(--focus);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
.opt:focus-within{outline:var(--focus-ring) solid var(--focus);outline-offset:2px}
.field input:focus-visible,.ans-input:focus-visible{outline-offset:1px}

/* ==========================================================================
   5. ШАПКА + МОБИЛЬНОЕ МЕНЮ
   ========================================================================== */
.nav{position:sticky;top:0;z-index:20;background:var(--topbar);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--bd)}
.nav-in{display:flex;align-items:center;gap:18px;min-height:64px;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--space)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;
  letter-spacing:-.02em;font-size:var(--fs-sm);text-decoration:none;
  padding:7px 0;margin:-7px 0}                     /* тап-таргет 44px по высоте */
.logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--accent-ink);font-weight:800;font-size:var(--fs-sm);
  background:linear-gradient(135deg,var(--logo-from,var(--accent-text)),var(--accent));
  box-shadow:var(--shadow-xs)}
/* Оба конца градиента проходят AA с --accent-ink:
   светлая — белый на #0a5299 = 7.84 и на #0a63c9 = 5.77;
   тёмная  — #08121f на #7db4ff = 8.82 и на #3d8bfd = 5.65.
   В v1 здесь был жёстко белый на #5aa9ff = 2.46. */
.nav a.link{color:var(--muted);text-decoration:none;font-weight:500;
  font-size:var(--fs-sm);padding:11px 4px;margin:-11px 0;border-radius:var(--r-xs)}
.nav a.link:hover{color:var(--ink)}
.nav .sp{flex:1}
.nav .user-name{padding:11px 4px;margin:-11px 0}

/* ссылка «к содержимому»: видна только с клавиатуры, первым Tab со страницы */
.skip{position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--card-solid);color:var(--ink);border:1px solid var(--bd-strong);
  border-radius:var(--r-sm);padding:12px 16px;font-weight:700;text-decoration:none}
.skip:focus{left:12px;top:12px}

/* бургер: чекбокс-хак, без JS-фреймворков */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;margin-left:8px;cursor:pointer;
  border:1px solid var(--bd-strong);border-radius:var(--r-sm);
  color:var(--ink);background:transparent;order:1}
.nav-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.nav-burger .i-close{display:none}
.nav-toggle:checked ~ .nav-burger .i-open{display:none}
.nav-toggle:checked ~ .nav-burger .i-close{display:block}
.nav-toggle:focus-visible ~ .nav-burger{outline:var(--focus-ring) solid var(--focus);outline-offset:2px}

/* переключатель темы */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;cursor:pointer;font:inherit;
  border:1px solid var(--bd-strong);border-radius:var(--r-sm);
  color:var(--ink);background:transparent;transition:.15s}
.theme-btn:hover{background:var(--surface-2)}
.theme-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.theme-btn .i-dark{display:none}
:root[data-theme="dark"] .theme-btn .i-dark{display:block}
:root[data-theme="dark"] .theme-btn .i-light{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .i-dark{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-light{display:none}
}

/* ==========================================================================
   6. КНОПКИ — полный набор состояний
   ========================================================================== */
.btn{
  appearance:none;border:1px solid transparent;cursor:pointer;font:inherit;
  font-weight:600;font-size:var(--fs-sm);line-height:1.25;
  padding:11px 18px;min-height:44px;               /* тап-таргет */
  border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-ink);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;transition:background .16s,transform .16s,box-shadow .16s;
  box-shadow:var(--shadow-sm);
}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 auto}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{background:var(--accent-active);transform:translateY(0);box-shadow:var(--shadow-xs)}
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{
  background:var(--surface-2);color:var(--muted);border-color:var(--bd);
  box-shadow:none;transform:none;cursor:not-allowed;opacity:1}
.btn:disabled:hover,.btn[disabled]:hover,.btn.is-disabled:hover{
  background:var(--surface-2);transform:none;box-shadow:none}

/* вторичная — чтобы не было экрана из 12 одинаковых синих кнопок */
.btn.secondary{background:var(--accent-soft);color:var(--accent-text);
  border-color:var(--accent-line);box-shadow:none}
.btn.secondary:hover{background:color-mix(in srgb,var(--accent-text) 18%,var(--card-solid));
  box-shadow:var(--shadow-xs)}
.btn.secondary:active{background:color-mix(in srgb,var(--accent-text) 26%,var(--card-solid))}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--bd-strong);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--bd-strong)}
.btn.ghost:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}

.btn.danger{background:var(--no);color:var(--no-ink)}
.btn.danger:hover{background:color-mix(in srgb,var(--no) 84%,#000)}

.btn.lg{padding:14px 24px;min-height:52px;font-size:var(--fs-sm);border-radius:var(--r-md);font-weight:700}
.btn.sm{padding:7px 12px;min-height:36px;font-size:var(--fs-xs);border-radius:var(--r-xs)}
.btn.block{width:100%}
.btn.is-loading{pointer-events:none;color:transparent;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;
  border:2px solid color-mix(in srgb,var(--accent-ink) 40%,transparent);
  border-top-color:var(--accent-ink);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   7. ПОВЕРХНОСТИ
   ========================================================================== */
.glass{background:var(--card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.card{background:var(--card-solid);border:1px solid var(--bd);
  border-radius:var(--radius);box-shadow:var(--shadow-md)}
.section{padding-block:clamp(38px,5.5vw,64px)}
.section-h{text-align:center;margin-bottom:32px}
.section-h h2{font-size:clamp(var(--fs-lg),3.2vw,var(--fs-xl));font-weight:800;
  letter-spacing:-.022em;line-height:var(--lh-tight);margin:0 0 8px;text-wrap:balance}
.section-h p{color:var(--muted);margin:0;font-size:var(--fs-sm);max-width:60ch;
  margin-inline:auto}

/* ==========================================================================
   8. HERO
   .tag — БЫЛО: скруглённый чип-«ушко» над заголовком (детектор
   hero-eyebrow-chip, «шаблон ИИ-лендинга»). СТАЛО: редакторский надзаголовок
   с акцентной линейкой слева, без плашки и без скруглений.
   ========================================================================== */
.hero{background:var(--hero-bg);padding:clamp(38px,5.5vw,72px) 0 clamp(34px,4.5vw,56px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,3.5vw,44px);align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);                       /* 6.74:1 на --bg */
  background:none;border:0;border-radius:0;padding:1px 0;margin-bottom:18px}
/* Маркер — точка, а не цветная линия слева: 3-пиксельная полоса сбоку —
   узнаваемый штамп ИИ-вёрстки (находка детектора side-tab). */
.tag::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 7px;
  background:var(--accent-graphic,var(--accent-text))}
.hero h1{font-size:clamp(var(--fs-xl),4.8vw,var(--fs-3xl));font-weight:800;
  letter-spacing:-.03em;line-height:1.04;margin:0 0 14px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent-text)}
.hero p.lead{font-size:clamp(var(--fs-sm),1.7vw,var(--fs-md));color:var(--muted);
  margin:0 0 26px;max-width:46ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.stat b{display:block;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;
  line-height:var(--lh-tight)}
.stat span{font-size:var(--fs-xs);color:var(--muted)}

/* ==========================================================================
   9. БЛОК «ВОЗМОЖНОСТИ»
   .feat .ic — БЫЛО: скруглённая плитка 46×46 с глифом НАД заголовком
   (детектор icon-tile-stack). СТАЛО: иконка в одну строку с заголовком,
   без плашки; текст — во второй строке на всю ширину.
   ========================================================================== */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat .card{
  padding:22px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"ic title" "txt txt";
  column-gap:10px;row-gap:9px;align-items:center;
}
.feat .ic{
  grid-area:ic;width:auto;height:auto;margin:0;padding:0;
  background:none;border:0;border-radius:0;box-shadow:none;
  color:var(--accent-text);font-size:var(--fs-md);line-height:1;
  display:inline-flex;align-items:center;
}
.feat .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.feat h3{grid-area:title;font-size:var(--fs-md);font-weight:700;margin:0;
  letter-spacing:-.015em;line-height:var(--lh-snug)}
.feat p{grid-area:txt;font-size:var(--fs-sm);color:var(--muted);margin:0;max-width:44ch}

/* ==========================================================================
   10. КАРТОЧКА КУРСА, ПИЛЮЛИ, БЕЙДЖИ
   ========================================================================== */
.course-card{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  padding:clamp(22px,3vw,32px)}
.course-card .k{font-size:var(--fs-xs);color:var(--accent-text);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.course-card h3{font-size:clamp(var(--fs-md),2.5vw,var(--fs-lg));font-weight:800;
  letter-spacing:-.02em;margin:8px 0;line-height:var(--lh-tight)}
.course-card p{color:var(--muted);margin:0;font-size:var(--fs-sm);max-width:60ch}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.pill{font-size:var(--fs-xs);font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-line)}

/* ==========================================================================
   БЕЙДЖИ. Разметку даёт ОДИН компонент <x-badge state="…"/>, справочник
   состояний — App\Support\LessonBadges. Руками класс .badge не писать.

   ДВА ВИДА, И ОНИ ОБЯЗАНЫ РАЗЛИЧАТЬСЯ БЕЗ ЦВЕТА (просьба владельца):
     .badge--auto    система вычислила сама → ЗАЛИТАЯ ТАБЛЕТКА (radius 999px)
     .badge--manual  поставил педагог       → КОНТУРНЫЙ ПРЯМОУГОЛЬНИК (radius 8px)

   Различие несут ДВЕ независимые оси — форма (круглая/угловатая) и вес
   (заливка/контур), поэтому оно выживает в чёрно-белой печати, при
   дальтонизме и на плохом мониторе. Педагог видит: залито и кругло — факт,
   менять нечего; контур и угол — моя пометка, её я ставлю и снимаю.

   ЦВЕТ — ЭТО «ТЕМПЕРАТУРА», А НЕ СОСТОЯНИЕ. Тонов пять (neutral/info/warn/
   ok/danger), состояний двенадцать: тона намеренно повторяются. Изобретать
   двенадцать различимых оттенков — это ложная точность: их не различает
   никто, а дальтоник не различает и половину нынешних. Что именно случилось,
   говорят ТЕКСТ и своя иконка у каждого состояния.

   Контраст каждой пары «текст/фон» посчитан формулой WCAG в четырёх
   комбинациях (палитры «янтарь» и базовая × светлая и тёмная): минимум
   4.90:1 при пороге 4.5. Таблица — docs/research/shell-badges-2026-08.md.
   Граница авто-бейджа декоративна (≈2.3:1 в светлой теме): смысл несёт
   текст, а не рамка, поэтому порог 3:1 к ней не применяется.
   ========================================================================== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:.02em;line-height:1.35;white-space:nowrap;
  --badge-fg:var(--muted); --badge-bg:var(--surface-2);
  color:var(--badge-fg);
  /* по умолчанию — вид авто: он же старое поведение .badge */
  padding:4px 10px;border-radius:var(--r-pill);background:var(--badge-bg);
  border:1px solid color-mix(in srgb,var(--badge-fg) 45%,var(--badge-bg))}
.badge svg{width:13px;height:13px;flex:0 0 13px;stroke:currentColor;fill:none;stroke-width:2.2}

/* --- тона: пара «текст + заливка», всегда РАЗНЫЕ токены --- */
.badge--neutral{--badge-fg:var(--muted);       --badge-bg:var(--surface-2)}
.badge--info   {--badge-fg:var(--accent-text); --badge-bg:var(--accent-soft)}
.badge--warn   {--badge-fg:var(--warn-text);   --badge-bg:var(--warn-bg)}
.badge--ok     {--badge-fg:var(--ok-text);     --badge-bg:var(--ok-bg)}
.badge--danger {--badge-fg:var(--no-text);     --badge-bg:var(--no-bg)}

/* --- РУЧНОЙ: контур без заливки, угловатый. Рамка полной силы (≥4.9:1) —
       это единственная граница, которую тут вообще видно, и именно ручные
       пометки педагог должен находить взглядом быстрее всего. --- */
.badge--manual{padding:3px 9px;border-radius:var(--r-xs);
  background:transparent;border:1.5px solid var(--badge-fg)}

/* --- ЛЕГАСИ-ИМЕНА. Оставлены, чтобы шаблоны, ещё не переведённые на
       <x-badge/>, не облетели разом. Новый код их не использует. --- */
.badge.new     {--badge-fg:var(--accent-text); --badge-bg:var(--accent-soft)}
.badge.progress{--badge-fg:var(--warn-text);   --badge-bg:var(--warn-bg)}
.badge.done    {--badge-fg:var(--ok-text);     --badge-bg:var(--ok-bg)}
.badge.fail    {--badge-fg:var(--no-text);     --badge-bg:var(--no-bg)}

/* ==========================================================================
   11. ПОДВАЛ
   ========================================================================== */
.footer{border-top:1px solid var(--bd);padding:26px 0;color:var(--muted);
  font-size:var(--fs-xs);margin-top:auto}
.footer-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--space)}

/* ==========================================================================
   12. АВТОРИЗАЦИЯ И ПОЛЯ
   ========================================================================== */
.auth-wrap{flex:1;min-height:calc(100dvh - 64px);display:grid;place-items:center;
  padding:40px 16px;background:var(--hero-bg)}
.auth-card{width:100%;max-width:420px;padding:clamp(26px,4vw,38px)}
.auth-card h1,.auth-card h2{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.02em;
  margin:0 0 6px;line-height:var(--lh-tight)}
.auth-card .sub{color:var(--muted);font-size:var(--fs-sm);margin:0 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:var(--fs-xs);font-weight:700;margin-bottom:6px;
  letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.field input,.field select,.field textarea,.ans-input{
  width:100%;font:inherit;font-size:16px;      /* 16px — iOS не зумит форму */
  padding:11px 14px;border-radius:var(--r-sm);
  border:1px solid var(--bd-strong);background:var(--card-solid);color:var(--ink)}
.field input::placeholder,.ans-input::placeholder{color:var(--muted);opacity:1}
.field input:hover,.ans-input:hover{border-color:var(--ink)}
.field input:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.field.has-error input{border-color:var(--no);background:var(--no-bg)}
.err{color:var(--no-text);font-size:var(--fs-xs);margin-top:5px;font-weight:600}
.auth-alt{text-align:center;margin-top:18px;font-size:var(--fs-sm);color:var(--muted)}
.auth-alt a{color:var(--accent-text);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;display:inline-block;padding:13px 6px;margin:-13px 0} /* тап-таргет 44px */
.auth-alt a:hover{text-decoration-thickness:2px}

/* ==========================================================================
   13. ЗАГОЛОВКИ СТРАНИЦ, СЕТКИ
   ========================================================================== */
.page-head{padding-block:clamp(28px,4vw,44px) 8px}
.page-head h1{font-size:clamp(var(--fs-xl),3.4vw,var(--fs-2xl));font-weight:800;
  letter-spacing:-.025em;line-height:var(--lh-tight);margin:0 0 6px;text-wrap:balance}
.page-head p{color:var(--muted);margin:0;font-size:var(--fs-sm);max-width:70ch}
.grid-2{display:grid;grid-template-columns:1.4fr .6fr;gap:20px;align-items:start}
.grid-2>*:last-child{position:sticky;top:84px}       /* сайдбар «Ваш прогресс» */

/* ==========================================================================
   14. СПИСОК ТЕСТОВ
   ========================================================================== */
.test-row{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:10px;
  box-shadow:var(--shadow-sm)}                        /* мелкая тень — не наезжает на соседа */
.test-row:hover{border-color:var(--accent-line);box-shadow:var(--shadow-md)}
.test-row .meta{flex:1;min-width:0}
.test-row :is(h2,h3){margin:0 0 3px;font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;
  line-height:var(--lh-snug)}
.test-row .meta span{font-size:var(--fs-xs);color:var(--muted)}

/* ==========================================================================
   15. ПАНЕЛЬ ПРОГРЕССА
   ========================================================================== */
.statpanel{padding:22px}
.statpanel h3{margin:0 0 16px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ring{--p:0;width:132px;height:132px;border-radius:50%;margin:0 auto 8px;
  display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),
    color-mix(in srgb,var(--accent) 14%,var(--surface-2)) 0)}
.ring i{width:104px;height:104px;border-radius:50%;background:var(--card-solid);
  display:grid;place-items:center;font-size:var(--fs-xl);font-weight:800;
  letter-spacing:-.02em;font-style:normal}
.stat-line{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-sm);
  padding:8px 0;border-bottom:1px dashed var(--bd)}
.stat-line:last-child{border-bottom:0}
.stat-line span{color:var(--muted)}
.stat-line b{font-weight:700;font-variant-numeric:tabular-nums}

/* ==========================================================================
   16. ВОПРОС ТЕСТА
   ========================================================================== */
.q-card{padding:clamp(20px,3vw,28px);margin-bottom:16px}
.q-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.q-num{font-size:var(--fs-xs);font-weight:700;color:var(--accent-text);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:4px 10px;border-radius:var(--r-xs);letter-spacing:.02em}
.q-type{font-size:var(--fs-xs);color:var(--muted)}
.q-text{font-size:var(--fs-sm);line-height:var(--lh-body);margin:0 0 16px;
  max-width:72ch;overflow-x:auto}                     /* было ~110 символов в строке */
.q-text img{max-width:100%;height:auto}
.q-text p{margin:0 0 10px}
.q-text table{border-collapse:collapse;margin:8px 0}
.q-text td,.q-text th{border:1px solid var(--bd-strong);padding:5px 10px}
.q-text th{background:var(--surface-2)}
.opt{display:flex;align-items:center;gap:11px;padding:12px 15px;
  border:1px solid var(--bd-strong);border-radius:var(--r-sm);margin-bottom:9px;
  cursor:pointer;transition:.15s;background:var(--card-solid);min-height:48px}
.opt:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card-solid))}
.opt input{accent-color:var(--accent);width:20px;height:20px;flex:0 0 auto}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);border-width:2px;padding:11px 14px}
.opt.wrong{border-color:var(--no);background:var(--no-bg);border-width:2px;padding:11px 14px}
.ans-input{max-width:280px}
/* Развёрнутый ответ (type='open'): многострочное поле шире короткого ответа */
textarea.ans-input{max-width:72ch;min-height:120px;resize:vertical;font-weight:400}
.verdict{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);
  font-weight:700;margin-top:12px}
.verdict.ok{color:var(--ok-text)}                     /* 6.59:1 (было 3.45:1) */
.verdict.no{color:var(--no-text)}                     /* 6.56:1 (было 3.91:1) */
.verdict .mk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-xs);flex:0 0 auto}
.verdict.ok .mk{background:var(--ok);color:var(--ok-ink)}    /* 5.04:1 */
.verdict.no .mk{background:var(--no);color:var(--no-ink)}    /* 5.67:1 */
.verdict .mk svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6}
.correct-note{margin-top:10px;font-size:var(--fs-sm);color:var(--muted)}
.correct-note b{color:var(--ink)}
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:16px;
  font-size:var(--fs-sm);font-weight:600;border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok-text);
  border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.flash.no{background:var(--no-bg);color:var(--no-text);
  border-color:color-mix(in srgb,var(--no) 30%,transparent)}
.flash.warn{background:var(--warn-bg);color:var(--warn-text);
  border-color:color-mix(in srgb,var(--warn) 34%,transparent)}

/* ==========================================================================
   17. АНАЛИТИКА
   ========================================================================== */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.metric{padding:18px 20px;box-shadow:var(--shadow-sm)}
.metric .v{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums}
.metric .l{font-size:var(--fs-xs);color:var(--muted);margin-top:8px}
.metric.accent .v{color:var(--accent-text)}
.panel{padding:clamp(20px,3vw,26px);margin-bottom:20px}
.panel h2{font-size:var(--fs-md);font-weight:800;letter-spacing:-.015em;margin:0 0 4px;
  line-height:var(--lh-snug)}
.panel .hint{font-size:var(--fs-xs);color:var(--muted);margin:0 0 18px;max-width:64ch}
.bar-row{display:grid;grid-template-columns:180px 1fr 44px;align-items:center;gap:12px;
  margin-bottom:11px}
.bar-row .name{font-size:var(--fs-sm);font-weight:600}
/* display:block обязателен. Раньше правило полагалось на то, что трек всегда
   лежит внутри .bar-row (grid — дети блокируются сами). В карточке
   «Продолжить» родитель обычный, и <span class="bar-track"> схлопывался в
   вертикальную чёрточку шириной в ноль: полоса прогресса просто исчезала. */
.bar-track{display:block;height:12px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--bd);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.bar-fill.ok{background:var(--ok)}
.bar-fill.mid{background:var(--warn)}
.bar-fill.low{background:var(--no)}
.bar-row .pct{font-size:var(--fs-xs);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}
.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.task-cell{border:1px solid var(--bd);border-radius:var(--r-sm);padding:12px 14px;
  background:var(--card-solid)}
.task-cell .t{font-size:var(--fs-xs);color:var(--muted);font-weight:600}
.task-cell .p{font-size:var(--fs-md);font-weight:800;letter-spacing:-.02em;margin-top:2px;
  font-variant-numeric:tabular-nums}
.task-cell .mini{height:6px;border-radius:var(--r-pill);background:var(--surface-2);
  margin-top:8px;overflow:hidden}
.task-cell .mini i{display:block;height:100%;border-radius:var(--r-pill)}
.timeline{display:flex;align-items:flex-end;gap:10px;height:160px;padding-top:22px}
.tl-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;
  justify-content:flex-end}
.tl-bar{width:100%;max-width:46px;border-radius:var(--r-xs) var(--r-xs) 4px 4px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 64%,var(--card-solid)));
  min-height:4px;position:relative}
.tl-bar .v{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums}
.tl-col .d{font-size:var(--fs-xs);color:var(--muted)}
.advice{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;
  border-radius:var(--r-md);background:var(--accent-soft);border:1px solid var(--accent-line)}
.advice .ic{color:var(--accent-text);flex:0 0 auto;display:inline-flex}
.advice .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.advice b{font-weight:700}

/* ==========================================================================
   18. ТАБЛИЦА И ПУСТОЕ СОСТОЯНИЕ (новые компоненты)
   ========================================================================== */
.table-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--r-md);
  background:var(--card-solid)}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.table th{text-align:left;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2);
  padding:11px 14px;border-bottom:1px solid var(--bd);white-space:nowrap}
.table td{padding:12px 14px;border-bottom:1px solid var(--bd);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

.empty{display:grid;justify-items:center;text-align:center;gap:10px;
  padding:clamp(28px,5vw,48px) 24px}
.empty .ic{color:var(--muted);display:inline-flex}
.empty .ic svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.3}
.empty h3{margin:0;font-size:var(--fs-md);font-weight:700;line-height:var(--lh-snug)}
.empty p{margin:0;color:var(--muted);font-size:var(--fs-sm);max-width:46ch}
.empty .btn{margin-top:6px}

/* ==========================================================================
   19. UTILITY-СЛОЙ — чтобы новые шаблоны писались без style="..."
   (в v1 в шаблонах 80 инлайновых атрибутов, 34 из них в roadmap.blade.php)
   ========================================================================== */
/* раскладка */
.u-flex{display:flex}
.u-flex-col{display:flex;flex-direction:column}
.u-wrap{flex-wrap:wrap}
.u-center{align-items:center}
.u-between{justify-content:space-between}
.u-jcenter{justify-content:center}
.u-grow{flex:1;min-width:0}
.u-grid{display:grid}
.u-cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.u-cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.u-cols-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* интервалы (шаг 4px, шкала 1..5) */
.u-gap-1{gap:4px} .u-gap-2{gap:8px} .u-gap-3{gap:14px} .u-gap-4{gap:20px} .u-gap-5{gap:28px}
.u-mt-0{margin-top:0} .u-mt-2{margin-top:8px} .u-mt-3{margin-top:14px} .u-mt-4{margin-top:22px}
.u-mb-0{margin-bottom:0} .u-mb-2{margin-bottom:8px} .u-mb-3{margin-bottom:14px} .u-mb-4{margin-bottom:22px}
.u-pt-0{padding-top:0} .u-pt-3{padding-top:14px} .u-p-3{padding:14px} .u-p-4{padding:22px}
/* типографика — только ступени шкалы, произвольных размеров быть не должно */
.u-xs{font-size:var(--fs-xs)} .u-sm{font-size:var(--fs-sm)} .u-md{font-size:var(--fs-md)}
.u-lg{font-size:var(--fs-lg)} .u-xl{font-size:var(--fs-xl)} .u-2xl{font-size:var(--fs-2xl)}
.u-bold{font-weight:700} .u-black{font-weight:800;letter-spacing:-.02em}
.u-muted{color:var(--muted)} .u-accent{color:var(--accent-text)}
.u-ok{color:var(--ok-text)} .u-no{color:var(--no-text)} .u-warn{color:var(--warn-text)}
.u-tc{text-align:center} .u-tr{text-align:right}
.u-num{font-variant-numeric:tabular-nums}
.u-measure{max-width:65ch}
.u-loose{line-height:1.75}
/* иконки (heroicons: fill=none, stroke=currentColor уже в самом SVG) */
.u-ico{width:20px;height:20px;flex:0 0 auto;vertical-align:-4px}
.u-ico-sm{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}
.u-ico-lg{width:28px;height:28px;flex:0 0 auto}
/* прочее */
.u-full{width:100%}
.u-round{border-radius:var(--r-md)}
.u-soft{background:var(--surface-2)}
.u-hide-sm{display:initial}
.u-only-sm{display:none}
.u-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   20. СОСТОЯНИЯ ТРЕНИРОВКИ И «ПУТЬ ЗАДАНИЯ»
   Раньше здесь стоял временный мост по атрибуту style: боевые шаблоны
   хардкодили цвета, и в тёмной теме получался светлый текст на светлой
   плашке. Мост снят — шаблоны переведены на токены (roadmap.blade.php,
   test/show.blade.php), а состояния описаны классами.
   ========================================================================== */
/* тренировка: результат проверки одной задачи */
.q-card.is-ok{border-color:var(--ok);border-width:2px}
.q-card.is-no{border-color:var(--no);border-width:2px}
.check-status{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.check-status svg{width:20px;height:20px;flex:0 0 auto}
.check-status.is-ok{color:var(--ok-text)}
.check-status.is-no{color:var(--no-text)}
.check-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.check-feedback{font-size:var(--fs-sm);line-height:var(--lh-body);margin-top:10px;padding:14px 16px;
  background:var(--warn-bg);color:var(--ink);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:var(--r-sm)}
.form-actions{display:flex;justify-content:center;margin-top:26px}
.mode-note{color:var(--muted);font-size:var(--fs-xs)}

/* заголовок раздела с иконкой (heroicons вместо эмодзи в интерфейсе) */
.sec-h{display:flex;align-items:center;gap:10px;margin-top:0}
.sec-h svg{flex:0 0 auto;color:var(--accent-text)}
/* подзаголовок внутри колонки кабинета: разделы «Уроки», «Варианты ОГЭ»… */
.sub-h{font-size:var(--fs-md);margin:26px 0 4px}
.sub-h:first-of-type{margin-top:0}
.course-h{font-size:var(--fs-lg);margin:26px 0 14px}
.course-h:first-child{margin-top:0}
.sec-note{color:var(--muted);font-size:var(--fs-xs);margin:0 0 12px}
/* честное пустое состояние: почему раздел пуст и что делать вместо него */
.sec-empty{color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-body);
  margin:0 0 8px;padding:14px 16px;background:var(--surface-2);
  border:1px dashed var(--bd-strong);border-radius:var(--r-sm);max-width:65ch}
.quick-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ring-note{text-align:center;color:var(--muted);font-size:var(--fs-xs);margin-bottom:14px}

/* «путь задания» на /roadmap: ступени одного акцента, последняя — «принято» */
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;margin:10px 0}
.flow-step{background:var(--accent-soft);color:var(--ink);
  border:1px solid var(--accent-line);border-radius:var(--r-xs);padding:8px 14px}
.flow-step.is-done{background:var(--ok-bg);
  border-color:color-mix(in srgb,var(--ok) 38%,transparent)}
.flow-arrow{color:var(--muted)}

/* ==========================================================================
   21. АДАПТИВ
   ========================================================================== */
@media (max-width:800px){
  .hero-grid,.grid-2,.course-card{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .grid-2>*:last-child{position:static;order:-1}     /* прогресс — наверх, а не на 1900px вниз */
  .metrics{grid-template-columns:repeat(2,1fr)}
  .bar-row{grid-template-columns:110px 1fr 40px}
  .course-card>a.btn,.course-card>.btn{width:100%}

  /* шапка: бургер вместо расползающегося flex-wrap */
  /* Порядок в первой строке фиксируется через order: развёрнутые пункты меню
     занимают всю ширину, и без order кнопки уехали бы под них. */
  .nav-in{flex-wrap:wrap;min-height:58px;padding-block:7px;column-gap:10px;row-gap:0}
  .nav-in>.brand{margin-right:auto;order:0}
  .nav-in>.theme-btn{order:1}
  .nav-burger{display:inline-flex;order:2;margin-left:0}
  .nav-in>a.link,.nav-in>form,.nav-in>a.btn,
  .nav-in>.sp,.nav-in>.user-name{display:none}
  .nav-toggle:checked~a.link,
  .nav-toggle:checked~.user-name{display:block;width:100%;margin:0;order:3;
    padding:12px 2px;border-top:1px solid var(--bd)}
  .nav-toggle:checked~form{display:block;width:100%;margin:10px 0 6px;order:3}
  .nav-toggle:checked~a.btn{display:flex;width:100%;margin:10px 0 6px;order:3}
  .nav-toggle:checked~form .btn{width:100%}

  /* список тестов: заголовок больше не ломается в 4 строки */
  .test-row{flex-direction:column;align-items:stretch;gap:12px;padding:16px}
  .test-row .btn{width:100%}

  .u-hide-sm{display:none}
  .u-only-sm{display:initial}
  .u-cols-3,.u-cols-2{grid-template-columns:1fr}
}
@media (max-width:420px){
  .stats{gap:18px}
  .tasks{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  .nav,.theme-btn,.nav-burger{display:none}
  .card,.glass{box-shadow:none;border:1px solid #ccc}
}