/* ==========================================================================
   Фотосинтез · панель управления — единая тема «Cozy»
   Тёплый минимализм: бумажный фон, волосяные границы, спокойный лес-зелёный.

   Правила и обоснования — в STYLEBOOK.md в корне ozon-dashboard/.
   Не переопределяйте цвета инлайн: всё через переменные ниже.
   ========================================================================== */

/* ── 1. Токены ─────────────────────────────────────────────────────────── */
:root{
  /* Тёплые нейтрали. Ни один серый не является нейтрально-серым — у всех
     есть жёлто-коричневый подмес, это и даёт «домашность» вместо офиса. */
  --bg:#FAF8F5;            /* фон страницы — тёплая бумага */
  --surface:#FFFFFF;       /* карточки, модалки, строки таблиц */
  --surface-2:#F5F2ED;     /* вложенные блоки, hover, поля ввода */
  --surface-3:#EDE8E0;     /* шапки таблиц, disabled, разделительные зоны */
  --border:#E7E2D9;        /* волосяная граница — основная */
  --border-strong:#D6CFC2; /* граница в фокусе/hover, разделители секций */

  --ink:#2A2620;           /* основной текст. Не #000: тёплый near-black */
  --ink-2:#4A443B;         /* вторичный текст, подписи в карточках */
  --muted:#6F6659;         /* приглушённый — проходит AA на мелком кегле */
  --faint:#9A9184;         /* ТОЛЬКО декор и 16px+ — AA не проходит */

  /* Бренд. Глубокий хвойный: тематически «Фотосинтез», по светлоте далеко
     от статусного зелёного, поэтому не путается с ним. */
  --accent:#2F6B45;
  --accent-hover:#255737;
  --accent-ink:#FFFFFF;
  --accent-soft:#E9F1EA;   /* фон бренд-плашек */
  --accent-ring:rgba(47,107,69,.28);

  /* Статусы. Заливка (-soft) + текст (-ink) — всегда парой.
     Чистый цвет (--ok/--warn/--danger) — только точки, полосы, графики.

     «Проблема» и «внимание» разведены прежде всего СВЕТЛОТОЙ: тёмный красный
     L*37 против яркого золота L*77, разница 41. Оттенка недостаточно — на
     точке 9px глаз считывает «тёмное тёплое пятно» и у кирпича, и у мёда.
     ΔE пары = 68; при протанопии 41, при дейтеранопии 35 — то есть работает
     и там, где цвет не различается вовсе. */
  --ok:#3E8E5F;      --ok-soft:#E6F1E9;      --ok-ink:#2A6644;
  --warn:#E8B93A;    --warn-soft:#FCF2D6;    --warn-ink:#7A5A0D;
  --warn-ring:#A87A12;  /* обводка точки: сама заливка даёт 1.84:1, форму держит кольцо */
  --danger:#A82014;  --danger-soft:#FAE8E4;  --danger-ink:#8C1B10;
  --idle:#9A9184;    --idle-soft:#F0ECE5;    --idle-ink:#6F6659;

  /* Границы статусных плашек — на тон темнее своей заливки */
  --ok-border:#CBE2D3; --warn-border:#EEDFAE; --danger-border:#F0D5CE;

  /* Графики. Не светофор: доля дохода — это один ряд, а не четыре независимых
     сигнала. Расходы не ошибка, налоги не предупреждение.

     Пастель одной тёплой семьи: мёд, пшеница, кофе. Прибыль выделяется
     НАСЫЩЕННОСТЬЮ (C*=40 против 15–17 у служебных), а не тёмной заливкой —
     тёмные пятна на бумажном фоне и резали глаз. Минимум L*61.
     Прибыль здесь НЕ бренд-зелёный: краска для мелкой кнопки с белым
     текстом на крупной плашке пробивает бумагу. См. STYLEBOOK.md §8.

     ВАЖНО: контраст заливок с фоном ~1.3–1.5 — ниже порога 3:1. Форму держат
     белые волосяные разделители между сегментами (borderColor в Chart.js),
     без них пастель нечитаема. Убирать разделители нельзя.

     ВАЖНО: порядок в стеке снизу вверх — прибыль, налоги, расходы. Мёд и
     пшеница почти одного тона (89° и 92°), рядом смыкаются, поэтому между
     ними обязана лежать кофейная полоса. Прибыль остаётся у основания:
     только у нижнего сегмента стабильная база для сравнения между днями. */
  --chart-frame:#C6B49B;   /* контур «доходы» — рамка, а не участник */
  --chart-cost:#E2D8C4;    /* расходы — пшеничный. Крупный кусок, светлый, отступает */
  --chart-tax:#A68F7B;     /* налоги — кофейный */
  --chart-profit:#EBCE85;  /* чистая прибыль — медовый, единственный насыщенный */
  --chart-sep:#FFFFFF;     /* разделитель сегментов в стеке */

  /* Скругления. Мягче Vercel, сдержаннее Notion — это и есть «cozy». */
  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* Тени. Почти незаметные — глубина только там, где есть слой. */
  --shadow-card:0 1px 2px rgba(42,38,32,.035);
  --shadow-pop:0 8px 28px rgba(42,38,32,.12), 0 2px 6px rgba(42,38,32,.06);

  /* Типографика. Inter — основной; если файлы не положены в assets/fonts,
     стек молча падает на системный шрифт, вёрстка не ломается. */
  --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --page-max:1320px;
  --tap:40px;              /* минимальная высота интерактивного элемента */
}

/* Раскомментируйте, положив Inter в public/assets/fonts/ (см. STYLEBOOK.md §2).
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("fonts/Inter-roman.var.woff2") format("woff2");}
*/

/* ── 2. База ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}
a.link{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a.link:hover{color:var(--accent-hover)}

h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:20px} h2{font-size:16px} h3{font-size:14px} h4{font-size:13px}

/* Все цифры — табличные. Колонки денег обязаны выравниваться по разряду. */
.num,td.num,th.num,.kpi .v,.money{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Иконки — только Icon::svg(). Контурные, 24×24, currentColor.
   Эмодзи в интерфейсе запрещены: рисуются системным шрифтом, поэтому на
   каждой ОС свои и тянут чужую палитру. */
.ic{display:inline-block;vertical-align:-.15em;flex:0 0 auto}

.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-family:var(--font-mono);font-size:.92em}

/* Единое кольцо фокуса — доступность, не украшение. Никогда не outline:none. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-xs);
}

.wrap{max-width:var(--page-max);margin:0 auto;padding:22px 28px 56px}
.section-title{
  color:var(--muted);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;margin:30px 2px 12px;
}

/* ── 3. Шапка приложения ───────────────────────────────────────────────── */
.gt-appbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;
}
.gt-appbar-in{
  max-width:var(--page-max);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:18px;height:56px;
}
.gt-brand{display:flex;align-items:center;gap:9px;font-weight:680;font-size:14.5px;flex:0 0 auto}
/* Полоса «схема прода отстала от кода» под шапкой. Печатает её Layout::schemaBanner();
   до 2026-08-25 её правило жило в Layout::chromeCss() — единственном <style> внутри <body>
   во всём приложении. Стили только здесь (STYLEBOOK, §11), в разметке их нет. */
.gt-schema-banner{
  display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 16px;
  background:var(--danger-soft);border-bottom:1px solid var(--danger-border);color:var(--danger-ink);
  font-size:13px;line-height:1.4;text-align:center;
}
.gt-mark{
  width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}

/* Вкладки отделов. Горизонтальные, а не сайдбар: таблицы закупок
   и себестоимости широкие, ширину экрана отдавать нельзя. */
.gt-nav{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.gt-nav::-webkit-scrollbar{display:none}
.gt-nav a{
  padding:7px 11px;font-size:13px;border-radius:var(--r-sm);
  color:var(--muted);white-space:nowrap;position:relative;
  transition:background .12s,color .12s;
}
.gt-nav a:hover{background:var(--surface-2);color:var(--ink)}
.gt-nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:620}
/* Точка тревоги на вкладке — отдел требует внимания */
.gt-nav a .nd{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%}
.gt-nav a .nd.red{background:var(--danger)}
.gt-nav a .nd.amber{background:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-ring)}

.gt-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.gt-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:34px;height:34px;padding:0 10px;font-size:13px;
  border-radius:var(--r-sm);color:var(--muted);position:relative;white-space:nowrap;
}
.gt-icon:hover{background:var(--surface-2);color:var(--ink)}
.gt-icon .badge{
  position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;
  background:var(--danger);box-shadow:0 0 0 2px var(--surface);
}

/* Заголовок страницы — под шапкой, отдельным блоком */
.gt-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.gt-topbar .gt-title{flex:1 1 320px;min-width:0}
.gt-topbar h1{font-size:20px}
/* <em> в заголовке — смысловой акцент, а не курсив */
.gt-topbar h1 em{font-style:normal;color:var(--accent)}
.gt-topbar .gt-sub{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5;max-width:78ch}
.gt-topbar .gt-sub a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.crumbs{color:var(--muted);font-size:12.5px;margin-bottom:14px}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--faint);margin:0 6px}

/* ── 4. Карточки ───────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 20px;
  margin-bottom:16px;
  box-shadow:var(--shadow-card);
}
.card.flat{box-shadow:none}
.card.inset{background:var(--surface-2);box-shadow:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h3{font-size:14px}
.card-foot{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);color:var(--muted);font-size:12.5px}
/* .card.list сама без внутренних отступов (padding:0) — сноска под её таблицей
   иначе прилипает к краям карточки. 16px по горизонтали = паддинг ячеек таблицы
   в карточке (см. §15), сноска встаёт по одной вертикали с первой колонкой. */
.card.list .card-foot{margin-top:0;padding:13px 16px 14px;display:flex;gap:8px;align-items:flex-start}
.card.list .card-foot .i{color:var(--accent);flex:0 0 auto}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Ячейка грид-раскладки по умолчанию не ужимается уже своего min-content (min-width:auto), и
   одна нерасширяемая строка внутри карточки растягивает ВСЮ колонку, а с ней и страницу. Замер
   2026-08-25 на marketing.php при вьюпорте 360: строка «Целевой ДРР, % · поле · Сохранить»
   (flex без переноса) держала карточку на 370px, documentElement.scrollWidth=386 — горизонтальная
   прокрутка всей страницы там, где ни одной широкой таблицы нет. */
.grid2>*,.grid3>*{min-width:0}

/* ── 5. KPI ────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.kpi{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-card);
}
/* .l — исторический псевдоним .k из quality/content */
.kpi .k,.kpi .l{color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:23px;font-weight:680;margin-top:5px;letter-spacing:-.02em;line-height:1.15}
.kpi .d{color:var(--muted);font-size:12px;margin-top:4px}
.kpi.ok .v,.kpi.green .v{color:var(--ok-ink)}
.kpi.warn .v,.kpi.amber .v{color:var(--warn-ink)}
.kpi.danger .v,.kpi.red .v{color:var(--danger-ink)}
.kpi.idle .v{color:var(--idle-ink)}

/* ── 6. Кнопки ─────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 16px;
  font-family:inherit;font-size:13.5px;font-weight:560;line-height:1;
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--surface);color:var(--ink);
  cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn:active{background:var(--surface-3)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}

.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(.93)}

.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}

.btn.sm{min-height:32px;padding:0 11px;font-size:12.5px;border-radius:var(--r-sm)}

/* Чип — второстепенная ссылка-действие в углу карточки */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;font-family:inherit;padding:6px 11px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;
}
.chip:hover{border-color:var(--border-strong);color:var(--ink);background:var(--surface)}

/* Сегментированный переключатель (периоды) */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:3px;gap:2px}
.seg a,.seg button{
  padding:6px 12px;font-size:12.5px;font-family:inherit;border:none;background:none;
  border-radius:var(--r-sm);color:var(--muted);cursor:pointer;white-space:nowrap;
}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg a.on,.seg button.on{background:var(--surface);color:var(--ink);font-weight:620;box-shadow:var(--shadow-card)}

/* ── 7. Поля ввода ─────────────────────────────────────────────────────── */
.inp,input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],select,textarea{
  width:100%;min-height:var(--tap);
  padding:9px 12px;
  font-family:inherit;font-size:13.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  transition:border-color .12s,box-shadow .12s;
}
textarea{min-height:88px;line-height:1.55;resize:vertical}
.inp:hover,input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
.inp:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);
}
.inp::placeholder,input::placeholder,textarea::placeholder{color:var(--faint)}
.inp:disabled,input:disabled,select:disabled,textarea:disabled{background:var(--surface-3);color:var(--muted);cursor:not-allowed}
.inp.err,input.err{border-color:var(--danger)}

.fld{margin-bottom:14px}
.fld label,.fld .lbl{display:block;font-size:12.5px;font-weight:560;color:var(--ink-2);margin-bottom:5px}
.fld .hint{font-size:12px;color:var(--muted);margin-top:5px}
.fld .hint.err{color:var(--danger-ink)}

/* ── 8. Статусы: точки и пилюли ────────────────────────────────────────── */
/* Точка = сигнал (форма 1). Пилюля = подпись (форма 2).
   Разные формы + разная светлота — поэтому зелёный бренда и зелёный
   «всё ок» не сливаются, хотя оба зелёные. */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;flex:0 0 auto;vertical-align:middle}
.dot.red{background:var(--danger)}
.dot.green{background:var(--ok)}
.dot.grey{background:var(--idle)}
/* «Внимание» — такой же круг, как остальные. Различие несёт светлота
   (L*77 против L*37 у «проблемы»), форму менять не нужно.
   Кольцо — не декор: яркое золото даёт 1.84:1 на белом, обводка
   #A87A12 даёт 3.85:1 и обеспечивает видимость границы. */
.dot.amber{background:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-ring)}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:560;padding:4px 9px;border-radius:var(--r-sm);
  background:var(--idle-soft);color:var(--idle-ink);
}
.pill.red{background:var(--danger-soft);color:var(--danger-ink)}
.pill.amber{background:var(--warn-soft);color:var(--warn-ink)}
.pill.green{background:var(--ok-soft);color:var(--ok-ink)}
.pill.grey{background:var(--idle-soft);color:var(--idle-ink)}
.pill.brand{background:var(--accent-soft);color:var(--accent)}

.pos{color:var(--ok-ink);font-variant-numeric:tabular-nums}
.neg{color:var(--danger-ink);font-variant-numeric:tabular-nums}

/* ── 9. Баннеры ────────────────────────────────────────────────────────── */
.banner{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--warn-soft);border:1px solid var(--warn-border);color:var(--warn-ink);
  padding:11px 14px;border-radius:var(--r-md);margin-bottom:16px;font-size:13px;line-height:1.5;
}
.banner.err{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}
.banner.ok{background:var(--ok-soft);border-color:var(--ok-border);color:var(--ok-ink)}
.banner.info{background:var(--surface-2);border-color:var(--border);color:var(--ink-2)}
/* То же самое для баннера: он flex, и его блок-ребёнок с min-width:auto не ужимается.
   Замер 2026-08-25 на channels.php: список «горизонт данных» держал страницу на 491px при
   вьюпорте 360, 375 И 414 — то есть на любом телефоне. */
.banner>*{min-width:0}
.banner code{background:rgba(42,38,32,.07);padding:1px 6px;border-radius:var(--r-xs);font-family:var(--font-mono);font-size:.92em}

/* ── 10. Таблицы ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  position:sticky;top:0;z-index:1;
  background:var(--surface-3);color:var(--muted);
  font-size:11.5px;font-weight:620;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:9px 13px;white-space:nowrap;
  border-bottom:1px solid var(--border);
}
table.tbl td{padding:9px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:var(--surface-2)}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl td.wrap-cell{white-space:normal;min-width:200px}
table.tbl .sub{color:var(--muted);font-size:12px}
/* Строка, требующая внимания — тонкая полоса слева, не заливка всей строки */
table.tbl tr.flag td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
table.tbl tr.flag-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

.empty{color:var(--muted);font-size:13px;padding:36px 20px;text-align:center}

/* ── 11. Модалки ───────────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(42,38,32,.34);backdrop-filter:blur(2px);
}
.modal.on{display:flex}
/* .box — исторический псевдоним .m-box из production/purchases */
.modal .box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop);width:100%;max-width:560px;max-height:90vh;overflow:auto;padding:22px;
}
.modal .box.wide{max-width:720px}
.modal .m-sub{color:var(--muted);font-size:13px;margin-bottom:16px;line-height:1.5}
.modal .m-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-pop);width:100%;max-width:560px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.modal .m-head{padding:17px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal .m-body{padding:20px;overflow-y:auto}
.modal .m-actions{padding:15px 20px;border-top:1px solid var(--border);background:var(--surface-2);display:flex;gap:10px;justify-content:flex-end}

/* ── 12. Тосты ─────────────────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:var(--r-md);font-size:13px;
  box-shadow:var(--shadow-pop);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:200;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger-ink)}

/* Нижняя панель действий у длинных форм */
.foot-bar{
  position:sticky;bottom:0;
  background:var(--surface);border-top:1px solid var(--border);
  padding:12px 20px;margin:20px -20px -18px;
  display:flex;gap:10px;justify-content:flex-end;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* ── 13. Отметка отдела ────────────────────────────────────────────────── */
/* Сетка плиток отделов на главной (.depts) и всё внутреннее оформление плитки
   (:hover, .ic, .st, .who, .dt, .dnote, .pill) удалены 2026-08-23 вместе с самими
   плитками — решение владельца, предложение 1 согласованного списка ревизии.
   .dept ЖИВ и мёртвым правилом не является: его носят подписи отделов в шапках
   карточек «Настроек» (settings.php: «ZenMoney — источник оплат · Закупки»,
   «Период учёта · Закупки»). Трогать это правило — значит менять вёрстку
   «Настроек», а не убирать наследие плиток. */
.dept{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:15px 17px;position:relative;display:block;
  box-shadow:var(--shadow-card);
  transition:border-color .14s,box-shadow .14s,transform .14s;
}

/* ── 14. Блок ИИ-напарника ─────────────────────────────────────────────── */
.ask{
  background:linear-gradient(168deg,var(--accent-soft) 0%,var(--surface) 62%);
  border:1px solid #D3E3D7;border-radius:var(--r-xl);
  padding:20px 22px;margin-top:16px;box-shadow:var(--shadow-card);
}
.ask .head{display:flex;align-items:center;gap:12px}
.ask .avatar{
  width:34px;height:34px;border-radius:var(--r-md);flex:0 0 auto;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:650;font-size:15px;
}
.ask h3{font-size:15px}
.ask .who{color:var(--muted);font-size:12px;margin-top:1px}
.ask .status{margin-left:auto;font-size:12px;color:var(--ok-ink);display:flex;align-items:center}
.ask .desc{color:var(--ink-2);font-size:13px;margin:12px 0 14px;line-height:1.55}
.ask .row{display:flex;gap:10px}
.ask input.q{flex:1;min-height:44px}
.ask .chips{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}
.ask .answer{
  margin-top:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;font-size:13.5px;line-height:1.62;
  white-space:pre-wrap;display:none;
}
.ask .answer.err{border-color:var(--danger-border);background:var(--danger-soft);color:var(--danger-ink)}
.ask .history{margin-top:18px;border-top:1px solid var(--border);padding-top:14px}
.ask .history-title{color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.ask .h-item{border-bottom:1px solid var(--border)}
.ask .h-item:last-child{border-bottom:none}
.ask .h-item summary{list-style:none;cursor:pointer;padding:9px 0;display:flex;align-items:baseline;gap:10px}
.ask .h-item summary::-webkit-details-marker{display:none}
/* Шеврон нарисован границами, а не глифом ▸: глиф берётся из системного
   шрифта и по весу не совпадает с контурными иконками. */
.ask .h-item summary::before{
  content:'';width:5px;height:5px;flex:0 0 auto;align-self:center;margin-right:3px;
  border-right:1.4px solid var(--faint);border-bottom:1.4px solid var(--faint);
  transform:rotate(-45deg);transition:transform .15s;
}
.ask .h-item[open] summary::before{transform:rotate(45deg)}
.ask .h-q-text{font-size:13.5px;font-weight:580;flex:1}
.ask .h-dt{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.ask .h-a{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;padding:0 0 12px 21px}
.ask .h-empty{color:var(--muted);font-size:13px}

/* ── 15. Карточка-список и утилиты ─────────────────────────────────────── */
/* Паттерн «шапка + таблица во всю ширину карточки» — им живут alerts,
   costs, production, purchases, settings. Раньше он был скопирован
   в каждую страницу отдельно. */
.card.list{padding:0;overflow:hidden}
.card.list > h2{
  font-size:11.5px;margin:0;padding:13px 16px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:620;
  border-bottom:1px solid var(--border);background:var(--surface-2);
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
/* flex-wrap + min-width:0 — не косметика, а починка обрезки (владелец, 2026-08-20: «поехала
   вёрстка у уведомлений»). Без них .h-act — нерасширяемая строка из пилюли и кнопки: сам h2
   переносит её на вторую строку, дальше .h-act ужимается до ширины карточки, пилюля ломает
   свой текст пополам, а кнопка (у .btn white-space:nowrap, ужаться не может) вылезает за край
   и молча срезается .card.list{overflow:hidden}. Замер на alerts.php при вьюпорте 360:
   button.btn.sm right=355.1 против правого края карточки 344.0 — 11px кнопки было не видно.
   Перенос внутри .h-act ставит пилюлю и кнопку в две строки, обе целиком в границах карточки. */
.card.list > h2 .h-act{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.card.list .pad{padding:14px 16px}
.card.list table{margin:0}

/* Таблица в .card.list лежит во всю ширину карточки, впритык к её рамке, поэтому обёртка
   .tbl-wrap здесь работает ТОЛЬКО как горизонтальная прокрутка: собственные рамку, скругление
   и фон она отдаёт карточке. Иначе внутри карточки рисуется вторая рамка со скруглением —
   ровно то, из-за чего обёртку однажды сняли с «Свежести данных» на index.php (см. коммент
   там же). Без обёртки же широкая таблица молча срезается .card.list{overflow:hidden}:
   на 2026-08-25 так жили 32 таблицы на семи страницах — столбцы справа не было видно
   и прокрутить их было нечем. */
.card.list .tbl-wrap{border:0;border-radius:0;background:transparent}
/* .foot-bar тянет себя за края карточки отрицательными полями (margin:20px -20px -18px) —
   это рассчитано на .card с padding:20px. В .card.list padding:0, поэтому те же -20px вылезают
   за карточку и молча срезаются её overflow:hidden (замер на production.php: right=363 при
   вьюпорте 360). Внутри .card.list полосу держим по краям карточки. */
.card.list .foot-bar{margin-left:0;margin-right:0;margin-bottom:0}

/* Таблица без класса внутри карточки получает те же правила, что .tbl */
.card table,table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.card table th,table.tbl th{
  background:var(--surface-3);color:var(--muted);
  font-size:11.5px;font-weight:620;text-transform:uppercase;letter-spacing:.04em;
  text-align:left;padding:9px 16px;white-space:nowrap;border-bottom:1px solid var(--border);
}
.card table td,table.tbl td{padding:10px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.card table tbody tr:last-child td,table.tbl tbody tr:last-child td{border-bottom:none}
.card table tbody tr:hover td{background:var(--surface-2)}
.card table th.num,.card table td.num{text-align:right}
.card table td.wrap-cell{white-space:normal;min-width:200px}

.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* Ссылка «← назад». Стрелка — иконка, не глиф. */
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.back:hover{color:var(--ink)}

/* Крупное значение — остаток на счёте, итог, баланс */
.val{font-size:30px;font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.val.red{color:var(--danger-ink)}
.val.green{color:var(--ok-ink)}
.val.amber{color:var(--warn-ink)}

/* Полоса прогресса — покрытие себестоимостью, заполненность рецепта */
.prog{flex:1;min-width:200px;height:7px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden}
.prog > i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .3s}
.prog.warn > i{background:var(--warn)}
.prog.danger > i{background:var(--danger)}
.stat{color:var(--muted);font-size:13px}
.stat b{color:var(--ink);font-weight:620}

/* Сноска под карточкой с поясняющей иконкой */
.foot{color:var(--muted);font-size:12px;margin-top:12px;line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.foot .i{color:var(--accent);flex:0 0 auto}

/* Ответ ИИ-напарника (marketing, finance, quality) */
.answer{
  margin-top:16px;background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--r-md);
  padding:15px 17px;font-size:13.5px;line-height:1.62;white-space:pre-wrap;display:none;
}
.answer.on{display:block}
.answer.err{border-left-color:var(--danger);background:var(--danger-soft);color:var(--danger-ink)}

/* Опция-переключатель в форме: чекбокс/радио со своей рамкой */
.opt{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 13px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;margin-bottom:8px;
}
.opt:hover{border-color:var(--border-strong);background:var(--surface-2)}
.opt.on,.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.chk{width:16px;height:16px;min-height:0;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.opt input{width:auto;min-height:0;margin:2px 0 0}
.opt .t{font-size:13.5px;font-weight:560}
.opt .d{font-size:12.5px;color:var(--muted);margin-top:2px}

/* Шаги мастера (new_purchase) */
.steps{display:flex;gap:8px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.step .n{
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:var(--surface-3);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:620;
}
.step.on{color:var(--ink)}
.step.on .n{background:var(--accent);color:var(--accent-ink)}
.step.done .n{background:var(--ok-soft);color:var(--ok-ink)}

.pad{padding:14px 16px}
.wide{width:100%}

/* ── 15б. Лента уведомлений ────────────────────────────────────────────── */
/* Живёт здесь, а не в <style> страницы: одну и ту же ленту рисуют ДВЕ страницы —
   public/alerts.php (раздел «Уведомления») и public/mobile.php (мобильная панель).
   Инлайн-раскладка в каждой из них была бы второй копией одного определения. */
.ntf{padding:12px 16px;border-bottom:1px solid var(--border)}
.ntf:last-child{border-bottom:none}
/* Непрочитанное отличается полосой слева + чуть тёплым фоном, а не заливкой строки
   статусным цветом: «не прочитано» — это не «проблема» (STYLEBOOK §5, tr.flag). */
.ntf.unread{border-left:3px solid var(--accent);padding-left:13px;background:var(--surface-2)}
.ntf-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px}
/* overflow-wrap:anywhere — заголовок уведомления приходит из данных и может не иметь ни одного
   пробела (заголовок типа «схема базы» — это перечень имён миграций). Без него один такой
   токен уезжает за правый край плитки. У .ntf-body это правило уже было, у заголовка не было. */
.ntf-head .t{font-size:13.5px;font-weight:620;color:var(--ink);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ntf.read .ntf-head .t{font-weight:400;color:var(--ink-2)}
/* margin-left:auto — дата держится правого края СВОЕЙ строки и когда шапка перенеслась.
   Раньше при переносе (узкий экран + длинный заголовок) дата вставала слева, первой строкой
   над телом, и читалась как часть текста уведомления, а не как отметка времени строки. */
.ntf-dt{font-size:11.5px;color:var(--muted);white-space:nowrap;flex:0 0 auto;margin-left:auto}
/* Висячий отступ для перечня «· источник — возраст» здесь СОЗНАТЕЛЬНО не делается: пара
   padding-left + отрицательный text-indent даёт его только первой строке БЛОКА, а тело
   уведомления — один блок с \n внутри (white-space:pre-wrap), поэтому переносы внутри пунктов
   она не отбивает, зато сдвигает вправо весь текст, кроме самой первой строки — проверено
   на ленте 2026-08-20. Правильный для этого случая `text-indent:… each-line` живого
   браузерного покрытия не имеет. Разбиение тела на строки-элементы — это уже переработка
   ленты по существу, а она вынесена из записи («Вне области»). */
.ntf-body{font-size:13px;color:var(--ink-2);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.ntf-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--muted)}

/* Статус доставки push — галочки по числу устройств (BACKLOG.md «Лента уведомлений: один
   рендер на две страницы, галочки доставки, порция по 10», критерий 3). Зелёная галочка —
   --ok (СТАТУС «доставлено»), не --accent: бренд заливает кнопки и активную вкладку, статус
   зелёным говорит «в порядке» (STYLEBOOK §0, «зелёный означает две разные вещи»).
   Состояние «устройств нет» имеет СВОЙ видимый элемент (.ntf-tick.off, перечёркнутый значок)
   и текст: ноль галочек и «доставлено всем» обязаны выглядеть по-разному — если push сломан,
   push-уведомлением об этом никого не известить. Недоставленные устройства — тоже
   перечёркнутый значок (.ntf-tick.fail), а не серая галочка. */
/* Подпись «push» — --muted, а не --faint: строка .ntf-foot набрана 11.5px, а --faint даёт
   3.11:1 и AA для мелкого текста не проходит (STYLEBOOK §3, «--faint — только декор и 16px+»).
   Правило перестало быть только прозой: bin/check_ui.php считает контраст механически. */
.ntf-push{display:inline-flex;align-items:center;gap:3px;flex-wrap:wrap}
.ntf-push-l{color:var(--muted);margin-right:2px}
.ntf-push-t{margin-left:3px}
.ntf-tick{display:inline-flex;color:var(--idle)}
.ntf-tick.on{color:var(--ok)}
/* .off — «подписанных устройств нет» (значок один), .fail — «попытка была, не дошла»
   (значков столько же, сколько попыток). Оба перечёркнуты и оба красные: серая галочка на
   недоставленном читается как «доставлено», а цвет — единственное, что их различало бы
   (решение владельца 2026-08-24). Различает их не оттенок, а число значков и подпись. */
.ntf-tick.off,
.ntf-tick.fail{color:var(--danger-ink)}
.ntf-tick-rest{color:var(--muted);margin-left:2px}
.ntf-push.no_devices .ntf-push-t,
.ntf-push.failed .ntf-push-t{color:var(--danger-ink)}

/* Порция ленты — 10 строк, дальше кнопка. Отдельная строка под карточкой, а не «липкий»
   элемент: она нажимается один раз и должна прокручиваться вместе со списком. */
.ntf-more{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}
.ntf-more.hidden{display:none}
.ntf-more-msg{font-size:11.5px;color:var(--muted)}

/* Отметка прочтения — два поштучных пути и один массовый (BACKLOG.md «Лента уведомлений:
   понятие „прочитано“ и фильтр», критерий 2). Формы-обёртки внутри строки и внутри шапки
   карточки существуют только затем, чтобы действие работало без JS; собственного вида у них
   нет, и браузерный отступ формы не должен разъезжать ни подвал строки, ни шапку. */
/* flex:0 0 auto обязателен: .h-act — это flex-контейнер, и без запрета сжатия он ужимает
   форму фильтра до ширины, при которой от подписи «прочитанные» остаётся одна буква (поймано
   живым прогоном 2026-08-24, а не глазами по коду). Переносить .h-act умеет сам — там
   flex-wrap:wrap, — и перенос целой формы на вторую строку читается, а обрубок подписи нет. */
.ntf-act,
.ntf-readall,
.ntf-filter{margin:0;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
/* Непрочитанная строка нажимается целиком — курсор об этом и говорит. У прочитанной нажимать
   нечего: обратного действия («отметить непрочитанным») владелец не просил. */
.ntf.unread{cursor:pointer}
/* Отказ отметки — на месте кнопки, а не в консоли: «нажал и ничего» читается как «отметилось». */
.ntf-err{color:var(--danger-ink);font-size:11.5px}

/* Подпись рядом с чекбоксом. Сам чекбокс — УЖЕ существующий компонент .chk выше (16×16,
   accent-color), он же стоит в таблице цеха (public/production.php); второго определения
   заводить нельзя — первая попытка это сделать дала ровно ту поломку, ради которой правило и
   существует: класс с тем же именем наложил на <label> width:16px, и от подписи «прочитанные»
   на экране осталась одна буква (поймано живым прогоном 2026-08-24, `php -l` и тесты молчали).
   flex:0 0 auto — .h-act flex-контейнер и иначе ужимает подпись; перенос целой формы на вторую
   строку он умеет сам (flex-wrap:wrap), и перенос читается, а обрубок подписи нет. */
.chk-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap;flex:0 0 auto}
/* Общее правило полей (.inp,input…:focus) снимает у input обводку — чекбоксу её надо вернуть,
   иначе с клавиатуры не видно, где ты. Правило про сам компонент .chk, а не про ленту: те же
   чекбоксы в таблице цеха теряли фокус ровно так же. */
.chk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* «Вы пришли сюда из уведомления» — карточка, на которую увела кнопка «Открыть»
   (BACKLOG.md «Кнопка „Открыть“ в уведомлении», критерий 1). Признак ВИДИМЫЙ и постоянный на
   всё время визита, а не вспышка на две секунды: подсветка, которая гаснет сама, не отвечает
   на вопрос «куда меня привели» тому, кто в этот момент смотрел на телефон, а не в экран.
   Обводка, а не заливка: заливка карточки статусным цветом читалась бы как тревога
   (STYLEBOOK §5, «заливать весь KPI цветом нельзя»). */
.card.landed{outline:2px solid var(--accent);outline-offset:-1px}
.card.landed:focus{outline:2px solid var(--accent)}
.landed-mark{color:var(--accent)}

/* ── 15в. Сворачиваемая секция (<details>) ─────────────────────────────── */
/* Мобильная панель складывает сюда разовые настройки устройства. Шеврон нарисован
   границами, а не глифом: глиф берётся из системного шрифта и по весу не совпадает
   с контурными иконками (тот же приём, что у .ask .h-item summary::before). */
.fold{padding:0;overflow:hidden}
.fold > summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;align-items:center;gap:10px;min-height:var(--tap);
}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::before{
  content:'';width:6px;height:6px;flex:0 0 auto;
  border-right:1.5px solid var(--faint);border-bottom:1.5px solid var(--faint);
  transform:rotate(-45deg);transition:transform .15s;
}
.fold[open] > summary::before{transform:rotate(45deg)}
.fold > summary h3{font-size:14px;margin:0}
.fold > summary .hint{font-size:12px;color:var(--muted);flex:1 1 auto;min-width:0}
.fold-sec{padding:14px 16px 16px;border-top:1px solid var(--border)}
.fold-sec h4{font-size:13px;font-weight:620;color:var(--ink);margin:0 0 10px}

/* ── 15г. Свежесть данных на главной: компактный вид в два столбца ─────── */
/* Владелец, 2026-08-20: на главной таблицу смотрят боковым зрением, а не изучают, поэтому
   «Возраст», «Порог» и «Статус» отдельными колонками убраны — возраст и порог ушли в подсказку
   на дате, статус выражен цветом самой даты. Разметка — public/index.php.
   Обёртка .tbl-wrap у этой таблицы снова есть (2026-08-25): в 360px два столбца больше не
   помещаются (замер: right=412), и без обёртки правый столбец молча срезался overflow:hidden.
   Скругление у заголовков при этом не вернулось — внутри .card.list обёртка рисуется без
   собственных рамки, скругления и фона (см. правило выше). */
.freshness{margin-top:30px}                         /* отбивка от блока выше — «между секциями 30px» */
/* Строка-заголовок группы (Ozon / Wildberries / …) внутри тела таблицы. Не uppercase и темнее
   шапки столбцов — иначе две одинаковые полосы читались бы как повтор шапки, а не как разделы. */
.freshness .grp th{
  background:var(--surface-2);color:var(--ink);
  text-transform:none;letter-spacing:0;font-size:12px;font-weight:650;
  padding:8px 16px;border-top:1px solid var(--border);
}
.freshness tbody tr.grp:first-child th{border-top:none}
/* Подпись источника обязана уметь переноситься ВНУТРИ слова: в реестре есть технические
   хвосты без пробелов («(product_catalog.wb_nmid)», «(open_question_state)»), и без этого
   минимальная ширина столбца задаётся длиной такого хвоста — при 360px таблица требовала
   344px против 328px доступных и обрезалась карточкой (замер до правки). */
.freshness td{overflow-wrap:anywhere}
/* Дата держится одной строкой и одной шириной (табличные цифры) — столбик сравнивают глазом. */
.freshness td.dt,.freshness th.dt{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
/* Статус цветом даты. Пара -ink на светлом фоне карточки — это текстовые токены статусов
   (STYLEBOOK §3): голые --ok/--danger текстом не используются. Цвет здесь ВТОРОЙ признак,
   а не единственный: слово живёт в title/aria-label ячейки, а на бумаге дописывается ниже. */
.freshness td.dt.ok{color:var(--ok-ink)}
.freshness td.dt.bad{color:var(--danger-ink)}
.freshness td.dt.none{color:var(--muted)}
@media print{
  /* В печати цвета нет (а если и есть — чёрно-белый принтер его съест), поэтому слово-статус
     выводится прямо в ячейку. Берётся из data-state самой строки (public/index.php), а не
     пишется здесь второй раз словами: иначе «протухли» и «нет ни одной строки» слиплись бы в
     одно приблизительное слово, а стили разошлись бы со страницей при первой же правке.
     Экрана это правило не касается. */
  .freshness td.dt[data-state]::after{content:' · ' attr(data-state)}
  .freshness td.dt.none[data-state]::after{content:''}   /* у «не измеряется» тире и так говорит всё */
}

/* ── 16. Адаптив ───────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .wrap{padding:18px 16px 48px}
  .gt-appbar-in{padding:0 16px;gap:12px}
  .gt-brand span{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .ask .row{flex-direction:column}
  .ask .row .btn{width:100%}
  .modal{padding:0;align-items:flex-end}
  .modal .m-box{max-width:none;max-height:92vh;border-radius:var(--r-xl) var(--r-xl) 0 0}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr 1fr}
  /* Сегментированный переключатель периода в одну строку на телефоне не влезает: четыре
     кнопки («Месяц/Квартал/Полгода/Весь период») дают ~334px против ~292px внутренней
     ширины карточки при вьюпорте 360. Кнопки внутри с white-space:nowrap, поэтому блок не
     ужимался и на 8px вытягивал горизонтальную прокрутку ВСЕЙ страницы (замер до правки:
     documentElement.scrollWidth=368 при вьюпорте 360). Разрешаем перенос: min-content блока
     становится шириной самой длинной кнопки, и он помещается на любом узком экране. Правило
     общее для компонента — тот же переключатель стоит на unit_economics.php. */
  .seg{flex-wrap:wrap}
}

@media print{
  .gt-appbar,.gt-actions,.foot-bar,.toast,.seg,.chip{display:none!important}
  body{background:#fff}
  .card,.kpi,.dept{box-shadow:none;break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}