/* ============================================================
   АДМИНКА — ОДИН ФАЙЛ СТИЛЕЙ.

   ЗАЧЕМ ВЫНЕСЕН ИЗ base.html (13.0). Внутри страницы стили ехали
   заново на КАЖДЫЙ клик — браузеру нечего было запомнить.
   Отдельный файл браузер забирает один раз.

   ЦВЕТА ЗДЕСЬ НЕТ ВООБЩЕ (13.1.2). Раньше в этом файле лежал полный
   набор значений «по умолчанию», а тот же набор — в `themes.py`.
   Два места, описывающих одну палитру, расходятся: поправишь синий
   в теме, забудешь здесь — и одно место на экране останется прежним,
   а заметит это владелец. Теперь цвет приезжает ТОЛЬКО из темы
   (`/theme.css`, подключается в `base.html` всегда, в том числе
   на странице входа). Здесь — размеры, шкала и правила.

   Любой шестнадцатеричный код, написанный ниже мимо `var(--...)`,
   ломает тему молча. Проверяется тестом.
   ============================================================ */

:root {
  /* --- ШКАЛА КЕГЛЕЙ. Семь ступеней, и всё живёт в них --------
     Не «поставил 13, потому что 14 великовато». Размер, не попавший
     в шкалу, — ошибка, а не исключение; проверяется тестом.

     БАЗА 15px, А НЕ 14, КАК В ПРОТОТИПЕ. Инструмент смотрят
     с рабочего расстояния и по восемь часов: мельче — усталость
     к обеду. Прототип рисовался как картинка, а не как рабочее место. */
  --fs-1:  11px;   /* служебный капслок: ярлык плитки, группа меню   */
  --fs-2:  12px;   /* счётчики, даты, подписи в плотных местах       */
  --fs-3:  13px;   /* вторая строка: клиент · заказ, пояснения       */
  --fs-4:  15px;   /* ОСНОВНОЙ ТЕКСТ                                 */
  --fs-5:  17px;   /* заголовок панели                               */
  --fs-6:  21px;   /* заголовок страницы                             */
  --fs-7:  26px;   /* число на плитке                                */

  /* --- ШАГ ОТСТУПОВ. Один на всю систему, все кратны четырём ---
     Отступ в 14 пикселей рядом с отступом в 16 глаз читает как
     «сделано наспех», не умея назвать причину. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;

  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:  12px;
  --sidebar-w: 208px;
  --font: var(--fs-4)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; font: var(--font);
       background: var(--bg); color: var(--text); }

/* Движение в инструменте читается как задержка, а не как плавность.
   Единственное исключение — отклик на то, что человек трогает руками,
   и он ниже 120 мс. Уважение к настройке системы не обсуждается. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   ОБОЛОЧКА: боковое меню слева, содержимое справа.
   ============================================================ */

.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
         min-height: 100vh; }

.side { background: var(--panel); border-right: 1px solid var(--border);
        display: flex; flex-direction: column; gap: var(--s1);
        padding: var(--s4) var(--s3); position: sticky; top: 0;
        height: 100vh; overflow-y: auto; }

.side .brand { font-weight: 700; padding: var(--s1) var(--s2) var(--s4);
               display: flex; align-items: center; gap: var(--s2); }
.side .brand img { max-height: 24px; max-width: 120px; }

/* ЗАГОЛОВОК ГРУППЫ — ТРЕТЬЯ СТУПЕНЬ ТЕКСТА. Он не сообщение, а метка
   раздела списка: читают то, что под ним. Капслок здесь законен —
   ярлык короткий и его опознают, а не читают. */
.side .grp { font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em;
             text-transform: uppercase; color: var(--muted-soft);
             padding: var(--s4) var(--s2) var(--s1); }

.side a { display: flex; align-items: center; gap: var(--s2);
          min-height: 36px; padding: var(--s2);
          border-radius: var(--radius-sm);
          color: var(--text); text-decoration: none; }
.side a:hover { background: var(--row-hover); }
/* АКТИВНЫЙ ПУНКТ ЗАЛИТ АКЦЕНТОМ, а не подкрашен им (13.0).
   Первая сборка красила его акцентным текстом на слабой заливке —
   и это оказалось невыполнимо в тёмной теме: там `accent-soft`
   приглушённый тёмный, `accent` средний тон того же цвета, между
   ними чуть больше двойки, и никакой подбор палитры это не спасает.
   Заливка опирается на пару `accent` / `on-accent`, которая обязана
   проходить 4.5 : 1 в любой теме и проверяется тестом. */
.side a.on { background: var(--accent); color: var(--on-accent);
             font-weight: 600; }
.side a.on .ic { stroke: var(--on-accent); }
.side a span { min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }

/* Иконка без своего цвета: красится тем же, что и текст рядом. Поэтому
   тема заведения перекрашивает иконки сама, и подбирать им цвета
   отдельно не придётся ни разу. */
.ic { width: 18px; height: 18px; flex: 0 0 18px;
      stroke: currentColor; fill: none; stroke-width: 2;
      stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   СВЁРНУТОЕ МЕНЮ: иконка и ПОДПИСЬ ПОД НЕЙ.

   Голые иконки хорошо живут, пока их шесть. Десять превращаются
   в ребус: человек наводит курсор, чтобы прочитать то, что мог бы
   просто прочитать.
   ------------------------------------------------------------ */
html.side-thin .shell { grid-template-columns: 84px minmax(0, 1fr); }
html.side-thin .side { padding: var(--s4) var(--s2); }
html.side-thin .side a { flex-direction: column; gap: var(--s1);
                         padding: var(--s2) var(--s1); text-align: center; }
html.side-thin .side a span { font-size: var(--fs-1); line-height: 1.2;
                              white-space: normal; max-width: 100%; }
html.side-thin .side .grp,
html.side-thin .side .who { display: none; }
html.side-thin .side .brand span,
html.side-thin .collapse { font-size: var(--fs-1); }

/* Подвал панели: администрирование (раз в месяц), имя человека и выход.
   Прижат к низу и отчёркнут. Выход живёт ЗДЕСЬ, а не внутри группы
   «Управление», — иначе он исчезает у того, кому эта группа не видна. */
.side .side-foot { margin-top: auto; padding-top: var(--s3);
                   border-top: 1px solid var(--border); }

.side .who { padding: var(--s3) var(--s2); color: var(--muted);
             font-size: var(--fs-3); }
.side form { margin: 0; }

/* СВЕРНУТЬ. Меню уезжает целиком, содержимое разъезжается на всю
   ширину — это то, ради чего владелец кнопку и просил: на отчёте
   о прибыли лишние двести пикселей видны сразу. */
.collapse { background: transparent; color: var(--muted);
            border: 0; padding: var(--s2); cursor: pointer;
            font: inherit; text-align: left; width: 100%;
            border-radius: var(--radius-sm); }
.collapse:hover { background: var(--row-hover); color: var(--text); }

.content { min-width: 0; }
/* РАБОЧАЯ ОБЛАСТЬ (13.1.3).
   Потолок поднят с 1360 и поля стали плавающими: на широком мониторе
   по краям оставалось по четыреста пустых пикселей, а содержимое жалось
   в середину. Совсем без потолка нельзя — не из-за Главной, ей всё
   равно, а из-за таблиц: строка заказа шириной в две с половиной тысячи
   пикселей теряется, глаз доходит до колонки «Создан» и уже не помнит,
   чья это строка.

   MAIN — КОЛОНКА, И ЭТО НЕ ОФОРМЛЕНИЕ, А ПОРЯДОК. Заголовок каждой
   страницы живёт в её собственном шаблоне, а тревога — одна на все сорок
   экранов, в оболочке. Чтобы тревога встала ПОД заголовком, не вписывая
   её в сорок шаблонов, заголовок и вкладки поднимаются над ней ступенью
   `order`. Порядок на экране: сообщение об удаче, вкладки, заголовок,
   тревога, содержимое. */
main { display: flex; flex-direction: column; align-items: stretch;
       width: 100%; max-width: 1760px; margin: 0 auto;
       padding: var(--s6) clamp(16px, 2.2vw, 48px) var(--s8); }
main > .flash { order: -3; }
main > .tabs  { order: -2; }
main > h1     { order: -1; }
/* Заголовок бывает не голым: в карточке плана он стоит в одной строке
   со значком и ссылкой. Поднимаем всю строку — иначе тревога встанет
   над заголовком именно на этом экране, и никто не поймёт, почему. */
main > .toolbar:has(h1) { order: -1; }

/* Верхняя полоска: только на телефоне, где меню уезжает за край. */
.topbar { display: none; align-items: center; gap: var(--s3);
          background: var(--panel); border-bottom: 1px solid var(--border);
          padding: var(--s2) var(--s4); position: sticky; top: 0; z-index: 5;
          min-height: 52px; }
.topbar .brand { display: flex; align-items: center; gap: var(--s2);
                 min-width: 0; font-weight: 700; }
.topbar .collapse { width: auto; }

/* Логотип 13.6.2a — только фирменный знак рядом с прежним текстом.
   Отдельный namespace не меняет геометрию навигации и других картинок. */
.admin-brand-logo {
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  width: 28px;
  height: 28px;
}
.admin-brand-logo[hidden] { display: none; }
.admin-brand-logo img,
.side .admin-brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
.admin-brand-title {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}
.topbar .admin-brand-logo {
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

/* ФОКУС С КЛАВИАТУРЫ ВИДЕН ВСЕГДА И ВЕЗДЕ. Пол качества, не украшение:
   по табу надо уметь пройти весь экран, а невидимый фокус означает,
   что человек не знает, где он находится. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================================================
   ПОЛОСА ТРЕВОГ. Не на сводке, а на КАЖДОМ экране.

   Реквизиты-заглушка означают, что клиенты переводят деньги
   в никуда. Показывать это только на сводке значит не показывать
   вовсе тому, кто живёт в заказах и на сводку не заходит.
   ============================================================ */

/* ТРЕВОГА — ОГРАНИЧЕННЫЙ БЛОК, А НЕ ПОЛОСА ВО ВСЮ ОБЛАСТЬ (13.1.3).
   Полоса поверх всего читалась как системный баннер браузера — то есть
   как чужой элемент, который можно не читать. Блок в общей сетке, той же
   ширины, что и панели под ним, читается как часть рабочего места. */
.alarms { display: flex; flex-direction: column; gap: var(--s2);
          margin-bottom: var(--s5); }
/* ТРЕВОГА — ОДИН БЛОК НА ВСЮ АДМИНКУ (13.2.3). Рисуется в `base.html`
   и выводится на каждом экране. В 13.2.2 её геометрию переопределили
   локально внутри списка заказов: одна и та же «карта состоит из нулей»
   выглядела на заказах иначе, чем на остальных тридцати девяти экранах.
   Вид, отобранный дизайнером, поднят сюда целиком; локального диалекта
   больше нет. Меняем здесь — меняется везде, как и задумано. */
.alarm { display: flex; gap: 12px; align-items: center; min-height: 0;
         padding: calc(var(--s3) + 1px) var(--s4);
         border-radius: var(--radius-lg);
         border: 1px solid var(--stop-fg);
         background: var(--stop-bg); color: var(--stop-fg);
         font-size: var(--fs-3); }
.alarm.warn { background: var(--warn-bg); color: var(--warn-fg);
              border-color: var(--warn-fg); }
.alarm b { flex: 0 0 auto; }
.alarm .body { flex: 1 1 auto; width: 100%; }
.alarm details { display: flex; align-items: center;
                 gap: calc(var(--s2) - 2px); width: 100%; }
.alarm a { color: inherit; font-weight: 600; }
.alarm summary { cursor: pointer; list-style: none; font-weight: 600;
                 flex: 0 0 auto; margin: 0; }
.alarm summary::-webkit-details-marker { display: none; }
.alarm details[open] summary { margin-bottom: 0; }
@media (max-width: 760px) {
  .alarm details { align-items: flex-start; flex-direction: column; }
  .alarm a { margin-left: 0; }
}

/* ============================================================
   ВКЛАДКИ ВНУТРИ РАЗДЕЛА. Горизонтальные — в отличие от меню.
   ============================================================ */

.tabs { display: flex; gap: var(--s1); flex-wrap: wrap;
        border-bottom: 1px solid var(--border-strong);
        margin-bottom: var(--s5); }
.tabs a { padding: var(--s2) var(--s3); text-decoration: none;
          color: var(--muted); border-bottom: 2px solid transparent;
          margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent);
             font-weight: 600; }

/* ============================================================
   ОБЩИЕ ЭЛЕМЕНТЫ. Имена классов те же, что были, — сорок шаблонов
   опираются на них, и переименование ради красоты стоило бы этапа.
   ============================================================ */

.panel { background: var(--panel); border: 1px solid var(--border);
         border-radius: var(--radius-lg); padding: var(--s5);
         margin-bottom: var(--s5); box-shadow: var(--shadow); }

.flash { background: var(--stop-bg); color: var(--stop-fg);
         border-left: 3px solid currentColor; border-radius: var(--radius-sm);
         padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.flash.ok { background: var(--done-bg); color: var(--done-fg); }

/* КОНТУР ПОЛЯ — НЕ ОБЩАЯ ГРАНИЦА, И ЭТО НЕ ПРИДИРКА.
   `border` — линия между строками таблицы, ей громкость не нужна,
   и она даёт около 1.4 : 1. Поле ввода на такой рамке выглядит как
   пустое место: человек не понимает, куда печатать. У контура свой
   токен со своим порогом 3 : 1, проверяется тестом. */
input[type="password"], input[type="text"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="color"],
input[type="file"], input[type="month"], select {
  padding: var(--s2) var(--s3); border: 1px solid var(--control);
  border-radius: var(--radius-sm); font: inherit;
  background: var(--panel); color: var(--text); }
textarea { width: 100%; padding: var(--s2) var(--s3);
           border: 1px solid var(--control);
           border-radius: var(--radius-sm); font: inherit; resize: vertical;
           background: var(--panel); color: var(--text); }
input:hover, select:hover, textarea:hover { border-color: var(--control-hover); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent);
  outline-offset: 1px; }

button { font: inherit; padding: var(--s2) var(--s5); border: 0;
         border-radius: var(--radius-sm);
         background: var(--accent); color: var(--on-accent); cursor: pointer; }
button:hover { background: var(--accent-hover); }
button.quiet { background: transparent; color: var(--muted);
               padding: var(--s2); }
button.quiet:hover { background: transparent; color: var(--stop-fg); }
button.danger { background: var(--stop-fg); }
button.danger:hover { background: var(--stop-fg); opacity: .88; }

.actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.actions form { margin: 0; }
form.stack label { display: block; font-weight: 600;
                   margin: var(--s3) 0 var(--s2); }

.muted { color: var(--muted); }
h1 { font-size: var(--fs-6); line-height: 1.2; margin: 0 0 var(--s4);
     letter-spacing: -.01em; }
h2 { font-size: var(--fs-5); line-height: 1.3; margin: 0 0 var(--s3); }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: var(--s2) var(--s3);
         border-bottom: 1px solid var(--border); vertical-align: top; }
/* ШАПКА ТАБЛИЦЫ ОТЧЁРКНУТА ЗАМЕТНОЙ ЛИНИЕЙ. Обычная граница между
   строками и граница «здесь кончаются заголовки» — разные по смыслу
   линии, и рисовать их одинаково значит не рисовать вторую. */
th { color: var(--muted); font-weight: 600; white-space: nowrap;
     border-bottom-color: var(--border-strong); }
/* ПОДСВЕТКА СТРОКИ ПОД КУРСОРОМ. На широкой таблице это не украшение:
   строка в тысячу с лишним пикселей читается справа налево с трудом,
   и подсветка — единственное, что держит глаз на своей строке.
   Была слишком тихой, поэтому добавлена рамка слева. */
tbody tr:hover td, table tr:hover td { background: var(--row-hover); }
table tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.nowrap { white-space: nowrap; }
/* ЧИСЛА В КОЛОНКЕ — ТАБЛИЧНЫМИ ЦИФРАМИ. Без этого столбец сумм
   танцует по горизонтали, и это видно даже тому, кто не знает
   слова «моноширинный». */
.num { text-align: right; white-space: nowrap;
       font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: var(--s1) var(--s2); border-radius: 10px;
         font-size: var(--fs-3); background: var(--off-bg);
         color: var(--off-fg); white-space: nowrap; }
.badge.awaiting_payment, .badge.payment_claimed, .badge.pending
  { background: var(--warn-bg); color: var(--warn-fg); }
.badge.paid, .badge.in_work, .badge.booked
  { background: var(--busy-bg); color: var(--busy-fg); }
.badge.done { background: var(--done-bg); color: var(--done-fg); }
.badge.cancelled, .badge.new, .badge.no_show, .badge.missed
  { background: var(--off-bg); color: var(--off-fg); }
.badge.unread { background: var(--stop-bg); color: var(--stop-fg);
                font-weight: 600; }

.toolbar { display: flex; gap: var(--s3); flex-wrap: wrap;
           margin-bottom: var(--s4); align-items: center; }
details > pre { background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--s3); overflow-x: auto;
  font-size: var(--fs-3); }

.cards { display: grid;
         grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
         gap: var(--s3); margin-bottom: var(--s6); }
.card { background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-lg); padding: var(--s4);
        text-decoration: none; color: inherit; display: block;
        box-shadow: var(--shadow); }
a.card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
.card .label { font-size: var(--fs-1); font-weight: 600; letter-spacing: .06em;
               text-transform: uppercase; color: var(--muted);
               margin-bottom: var(--s2); }
.card .value { font-size: var(--fs-6); font-weight: 700; white-space: nowrap;
               font-variant-numeric: tabular-nums; }
.card .value.warn { color: var(--warn-fg); }

/* Плашка-объяснение внутри страницы: три уровня громкости.
   Красный — идут потери прямо сейчас. Жёлтый — разобрать, но не
   сегодня. Без класса — просто факт, серым и тихо. */
.note { border-left: 3px solid var(--border); padding: var(--s3) var(--s4);
        background: var(--panel); border-radius: var(--radius-sm);
        margin-bottom: var(--s4); color: var(--muted); }
.note.stop { border-left-color: var(--stop-fg); background: var(--stop-bg);
             color: var(--stop-fg); }
.note.warn { border-left-color: var(--warn-fg); background: var(--warn-bg);
             color: var(--warn-fg); }

/* ============================================================
   СМЫСЛОВЫЕ КЛАССЫ ВМЕСТО ЦВЕТА В РАЗМЕТКЕ (13.0).

   По шаблонам было раскидано полсотни жёстких цветов. Шестнадцать
   разных кодов — но смыслов за ними всего четыре, и коды между собой
   не совпадали даже там, где смысл был один.

   Каждый такой код — это место, которое НЕ ПЕРЕКРАСИТСЯ вместе
   с темой. На светлой палитре разница незаметна; на тёмной красная
   рамка останется красной на чёрном.
   ============================================================ */

.panel.stop, .card.stop { border-left: 4px solid var(--stop-fg); }
.panel.warn, .card.warn { border-left: 4px solid var(--warn-fg); }
.panel.done, .card.done { border-left: 4px solid var(--done-fg); }
.panel.stop { border-color: var(--stop-fg); }

.fg-stop { color: var(--stop-fg); }
.fg-warn { color: var(--warn-fg); }
.fg-done { color: var(--done-fg); }
.badge.b-stop { background: var(--stop-fg); color: var(--on-accent); }
.badge.b-warn { background: var(--warn-fg); color: var(--on-accent); }
.badge.b-off  { background: var(--off-bg);  color: var(--off-fg); }

/* Прибыль и убыток. Цвет тут несёт смысл, поэтому рядом всегда
   есть знак числа: дальтоник читает минус, а не оттенок. */
.gain { color: var(--done-fg); }
.warn-line { border-left: 4px solid var(--warn-fg); padding-left: var(--s3); }
/* ЦВЕТ КАТЕГОРИИ — ЭТО ДАННЫЕ, а не оформление: владелец выбирает его
   сам в справочнике услуг. Он приезжает из базы в переменную `--tint`,
   а цвет текста поверх остаётся темы. */
.badge.tinted { background: var(--tint); color: var(--on-accent); }
.loss { color: var(--stop-fg); }
/* Просрочено: красным И жирным. Цвет здесь несёт смысл, поэтому рядом
   всегда стоит сама дата — прочитать её можно и не различая оттенка. */
.overdue { color: var(--stop-fg); font-weight: 600; }
/* Подходит к пределу — та же пара «цвет плюс жирность», но жёлтая:
   ещё можно, но уже недолго. Рядом всегда стоит само число, поэтому
   не различающий оттенка прочитает остаток и без цвета. */
.near-limit { color: var(--warn-fg); font-weight: 600; }

/* Черта внутри таблицы: подытог и итог. */
tr.rule > * { border-top: 1px solid var(--border); }
tr.rule-hard > * { border-top: 2px solid var(--text); }
tr.ahead > td { background: var(--warn-bg); }

.bar { height: 10px; border-radius: 5px; background: var(--off-bg);
       margin: var(--s4) 0 var(--s2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }
/* Полоска, у которой заливка НЕСЁТ СМЫСЛ, а не оформление: дошли
   до точки — цветом «готово», не дошли — цветом «внимание». Стояло
   это шестнадцатеричными кодами прямо в шаблоне отчёта о прибыли,
   причём кодами бирюзовой темы: в тёмной палитре полоска оставалась
   салатовой на почти чёрном фоне. */
.bar > i.done  { background: var(--done-fg); }
.bar > i.short { background: var(--warn-fg); }
.tile { flex: 1 1 300px; min-width: 260px; background: var(--panel-soft);
        border: 1px solid var(--border); border-radius: var(--radius);
        padding: var(--s4); }

/* ============================================================
   ТЕПЛОВАЯ КАРТА: ШКАЛА ЗДЕСЬ, ЦВЕТ — В ТЕМЕ.

   Заливка клетки была написана прямо в шаблоне зелёным через
   `rgba(…)`, а белый текст поверх — кодом цвета. Это цвета одной
   палитры, вбитые руками: в тёмной теме карта оставалась салатовой
   на почти чёрном фоне, и увидел бы это владелец, а не мы.

   Клетка приносит с собой ОДНО число — свою силу в процентах
   (`--heat`), ровно как услуга приносит свой цвет в `--tint`.
   Насколько красить, решают данные; чем красить — тема.

   ЗАПАСНОГО ФОНА У ПРАВИЛА НЕТ НАМЕРЕННО. Браузер, не знающий
   `color-mix`, выбросит строку целиком, и таблица останется без
   заливки — числа в ней на месте, читать её можно. Запасной
   ровный фон был бы хуже: все клетки стали бы одинаковыми,
   то есть карта соврала бы, что нагрузка ровная.
   ============================================================ */
td.heat { background: color-mix(in srgb, var(--accent) var(--heat, 0%),
                                transparent); }
/* Клетка настолько тёмная, что текст на ней читается только цветом
   для акцента. Порог считает шаблон — здесь правило, а не число. */
td.heat.strong { color: var(--on-accent); }

/* ============================================================
   ШИРИНЫ КОЛОНОК — В ЕДИНИЦАХ ТЕКСТА, А НЕ В ПИКСЕЛЯХ.

   `em` привязан к размеру текста: колонка под сумму всегда шириной
   в шесть знаков, каким бы крупным ни был шрифт.
   ============================================================ */
.w4  { width: 4em; }
.w6  { width: 6em; }
.w8  { width: 8em; }
.w10 { width: 10em; }
.w14 { width: 14em; }
.wfull { width: 100%; }
.col { flex: 1 1 18em; min-width: 16em; }
.col-wide { max-width: 34em; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
       margin-right: var(--s2); background: var(--tint); }

/* ============================================================
   ОТСТУПЫ. Три сотни `style="margin:0"` по шаблонам — это не вкус,
   это одно и то же желание, записанное три сотни раз.
   ============================================================ */
.m0 { margin: 0; }
.mb0 { margin-bottom: 0; }
.mt6 { margin-top: var(--s2); }
.mt8 { margin-top: var(--s2); }
.mt16 { margin-top: var(--s4); }
.tiny { font-size: var(--fs-3); }
.dim { opacity: .55; }
.inline { display: inline; }
.center { align-self: center; }
.grow { flex: 1; }
.pointer { cursor: pointer; }
.row-between { display: flex; justify-content: space-between;
               align-items: center; gap: var(--s3); }
.ind1 { padding-left: var(--s5); }
.ind2 { padding-left: var(--s7); }

/* --- Календарь недели (расписание) ------------------------- */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2); }
.day { background: var(--panel); border: 1px solid var(--border);
       border-radius: var(--radius); padding: var(--s2); min-height: 120px; }
.day.today { border-color: var(--accent); }
.day .head { font-size: var(--fs-2); color: var(--muted);
             margin-bottom: var(--s2); font-weight: 600; }
.slot { display: block; border-radius: var(--radius-sm);
        padding: var(--s1) var(--s2); margin-bottom: var(--s1);
        font-size: var(--fs-3); text-decoration: none;
        background: var(--busy-bg); color: var(--busy-fg); }
.slot.full { background: var(--warn-bg); color: var(--warn-fg); }
.slot.done { background: var(--done-bg); color: var(--done-fg); }
.slot.cancelled { background: var(--off-bg); color: var(--off-fg);
                  text-decoration: line-through; }
.slot:hover { outline: 2px solid var(--accent); }

/* --- Чат --------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: var(--s2);
        max-width: 720px; }
.msg { max-width: 75%; padding: var(--s2) var(--s3); border-radius: var(--s3);
       white-space: pre-wrap; word-break: break-word; }
.msg.in { align-self: flex-start; background: var(--panel-soft);
          border: 1px solid var(--border); border-bottom-left-radius: var(--s1); }
.msg.out { align-self: flex-end; background: var(--accent-soft);
           border-bottom-right-radius: var(--s1); }
.msg.out.auto { background: var(--off-bg); color: var(--off-fg);
                font-size: var(--fs-3); }
/* НЕ ДОШЛО. Красная рамка, а не удаление: пропавшая строка хуже
   помеченной — по ней не поймёшь, писали мы вообще или нет. */
.msg.undelivered { border: 1px solid var(--stop-fg);
                   background: var(--stop-bg); }
.msg .fail { display: block; font-size: var(--fs-1); color: var(--stop-fg);
             font-weight: 600; margin-top: var(--s1); }
/* Плашка двери: клиент ушёл или вернулся. Во всю ширину и по центру —
   это не чья-то реплика, а событие между ними. */
.plate { align-self: center; font-size: var(--fs-2); padding: var(--s1) var(--s3);
         border-radius: 10px; margin: var(--s1) 0; }
.plate.gone { background: var(--stop-bg); color: var(--stop-fg); }
.plate.back { background: var(--done-bg); color: var(--done-fg); }
.msg .meta { display: block; font-size: var(--fs-1); color: var(--muted);
             margin-top: var(--s1); text-align: right; }

/* ############################################################
   ГЛАВНАЯ (13.1.2, оформление от дизайнера).
   ############################################################ */

/* ------------------------------------------------------------
   РЯД ПЛИТОК — ОДНА ПАНЕЛЬ С ПЕРЕГОРОДКАМИ, А НЕ ЧЕТЫРЕ КАРТОЧКИ.

   Четыре отдельные карточки — это первая строка описания дефолтного
   дашборда, и они же врут по смыслу: плитки отвечают на ОДИН вопрос
   («что горит»), а разнесённые карточки читаются как четыре разных
   разговора. Одна панель с перегородками говорит «это один ряд».

   ЯРЛЫК И ЧИСЛО В СТРОКУ, А НЕ КАПСЛОКОМ НАД ЦИФРОЙ. Вторая строка
   описания дефолта — оттуда же. В строку читается как предложение:
   «Просрочено 5».
   ------------------------------------------------------------ */
/* ФЛЕКС, А НЕ СЕТКА В ЧЕТЫРЕ КОЛОНКИ, И ЭТО ПОЧИНКА.
   Плиток не всегда четыре: у преподавателя она одна — «Занятий
   сегодня», — и в сетке эта одна растягивалась на всю ширину экрана.
   Получалась подпись слева, число у правого края и тысяча пикселей
   пустоты между ними: два конца одного предложения, которые глаз
   уже не связывает. Теперь у плитки своя ширина, а полоса — по числу
   плиток. */
/* ПОЛОСА ПЛИТОК — ВО ВСЮ ШИРИНУ СЕТКИ, равными колонками (13.1.3).
   Была шириной по содержимому, и справа от неё зияло пустое место,
   пока панели под ней шли на всю ширину: верх страницы переставал
   быть связан с низом.

   ОДИНОКАЯ ПЛИТКА — ИСКЛЮЧЕНИЕ, И ОНО ЛЕЧИТСЯ ЗДЕСЬ, а не сужением
   всей полосы. У преподавателя плитка ровно одна, и на всю ширину
   она давала подпись слева, число у правого края и тысячу пикселей
   между ними — два конца одного предложения, которые глаз уже
   не связывает. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        margin-bottom: var(--s5); background: var(--panel);
        border: 1px solid var(--border); border-radius: var(--radius-lg);
        box-shadow: var(--shadow); overflow: hidden; }
.kpis:has(.kpi:only-child) { width: fit-content; }
.kpi { min-width: 0; min-height: 82px;
       display: flex; align-items: center; gap: var(--s3);
       padding: var(--s4) var(--s5);
       text-decoration: none; color: var(--text); }
.kpi:only-child { min-width: 320px; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi:hover { background: var(--row-hover); color: var(--text); }
.kpi .round { flex: 0 0 auto; display: grid; place-items: center;
              width: 40px; height: 40px; border-radius: 50%;
              background: var(--panel-soft); color: var(--muted); }
.kpi .round .ic { width: 20px; height: 20px; flex: 0 0 20px;
                  stroke-width: 1.8; }
.kpi .label { min-width: 0; font-size: var(--fs-4); font-weight: 600;
              white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.kpi .value { margin-left: auto; font-size: var(--fs-7); line-height: 1;
              font-weight: 700; font-variant-numeric: tabular-nums; }

/* ОДИН ЭЛЕМЕНТ — ОДИН УРОВЕНЬ ГРОМКОСТИ.
   До 13.1.2 на плитке «Просрочено» стояли красная рамка И янтарное
   число: два утверждения про одну вещь, которые спорят. Читающий
   не знает, какому верить, и перестаёт верить обоим.
   Теперь уровень задаёт подложку иконки и цвет числа — и всё.
   Ноль всегда нейтрален: тревожиться не о чем, но плитка остаётся
   на месте, иначе завтра придётся вспоминать, была она вчера. */
.kpi.stop .round { background: var(--stop-bg); color: var(--stop-fg); }
.kpi.stop .value { color: var(--stop-fg); }
.kpi.warn .round { background: var(--warn-bg); color: var(--warn-fg); }
.kpi.warn .value { color: var(--warn-fg); }

/* ------------------------------------------------------------
   ПАНЕЛЬ С ШАПКОЙ. Отдельный класс, а не переопределение `.panel`:
   на `.panel` опираются тридцать девять других экранов, и сделать
   её флекс-колонкой с обрезкой значило бы разложить админку целиком
   ради одного экрана.
   ------------------------------------------------------------ */
.board { padding: 0; overflow: hidden; display: flex;
         flex-direction: column; }
.board-head { display: flex; align-items: baseline;
              justify-content: space-between; gap: var(--s3);
              padding: var(--s4) var(--s5);
              background: var(--panel-soft);
              border-bottom: 1px solid var(--border); }
.board-head h2 { margin: 0; }
.board-body { flex: 1; display: flex; flex-direction: column;
              padding: var(--s1) var(--s5) var(--s4); }
.board-body > p { color: var(--muted); }

/* Две колонки, а на узком экране одна. Ширины в минимумах,
   а не в процентах: колонка «что сделать сегодня» содержит строки
   переменной длины, и жёсткая доля превращала бы короткий список
   в полупустое поле. */
/* ПАНЕЛИ ОДНОГО РОСТА (13.1.3). До этого правая росла вслед за числом
   сроков, а левая оставалась короткой — одна колонка страницы
   оказывалась втрое длиннее второй, и под короткой зияла пустота.
   Рост выравнивает сетка, а бесконечно расти обеим не даёт листалка. */
.two { display: grid;
       grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
       gap: var(--s4); align-items: stretch; }
.two > .board { margin-bottom: 0; }

/* ------------------------------------------------------------
   СПИСОК ДЕЛ.

   СТРОКА ПОКАЗЫВАЕТ ТО, ЧЕМ ОНА ОТЛИЧАЕТСЯ ОТ СОСЕДНЕЙ. Раньше
   в каждой строке стояло слово «просрочено» — восемь одинаковых слов
   подряд не сообщают ничего: если бы что-то не было просрочено, оно
   не попало бы в эту группу. Теперь там «9 дн.» — это разные
   разговоры с клиентом, и по ним решают, кому звонить первым.
   ------------------------------------------------------------ */
.deeds { list-style: none; margin: 0; padding: 0; }
/* СЕТКА, А НЕ ФЛЕКС, И ЭТО ПОЧИНКА. На флексе длинное имя клиента
   раздвигало ссылку, та наезжала на название вехи, и строка
   превращалась в кашу — на узком экране целиком. В сетке у каждой
   колонки своя доля, а `minmax(0, ...)` разрешает содержимому
   сжиматься вместо того, чтобы вылезать за край. */
.deeds li { display: grid;
            grid-template-columns: 22px minmax(0, .9fr) minmax(0, 1.1fr) 5em;
            gap: var(--s3); align-items: center; min-height: 48px;
            padding: var(--s2) 0; border-top: 1px solid var(--border); }
.deeds li:first-child { border-top: 0; }
.deeds form { margin: 0; display: flex; }
.deeds .what { min-width: 0; font-weight: 600; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.deeds .where { min-width: 0; color: var(--muted); overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.deeds .when { justify-self: end; text-align: right; font-size: var(--fs-2);
               white-space: nowrap; font-variant-numeric: tabular-nums;
               color: var(--muted); }
.deeds .when.overdue { color: var(--stop-fg); font-weight: 600; }

/* ЗАГОЛОВОК ГРУППЫ СО СЧЁТЧИКОМ. Число берётся из того же расчёта,
   что и плитка над ним, — это не второе утверждение про ту же
   реальность, а то же самое число. */
.grouphead { display: flex; align-items: center; gap: var(--s2);
             padding: var(--s4) 0 var(--s2); font-size: var(--fs-2);
             font-weight: 700; letter-spacing: .02em; }
.grouphead.stop { color: var(--stop-fg); }
.counter { display: inline-grid; place-items: center; min-width: 22px;
           height: 20px; padding: 0 var(--s2); border-radius: 999px;
           background: var(--off-bg); color: var(--off-fg);
           font-size: var(--fs-1); font-weight: 700;
           font-variant-numeric: tabular-nums; }
.grouphead.stop .counter { background: var(--stop-bg); color: var(--stop-fg); }

/* ДВЕСТИ СТРОК, ОБРЕЗАННЫЕ МОЛЧА, — ЭТО ЛОЖЬ. Если показано не всё,
   об этом сказано словами и числом. */
.cutoff { padding: var(--s3) 0 0; color: var(--muted);
          font-size: var(--fs-2); }

/* ГАЛОЧКА. Кружок, а не кнопка со словом: слово «Сделано» рядом
   с семью строками превращает список в стену текста. Размер
   намеренно крупнее шрифта — по нему попадают пальцем. */
.deeds .tick { background: transparent; border: 1.5px solid var(--control);
               color: var(--muted); border-radius: 50%; width: 22px;
               height: 22px; line-height: 1; padding: 0; font-size: 0;
               cursor: pointer; flex: 0 0 auto;
               transition: background .1s ease, border-color .1s ease; }
.deeds .tick:hover { border-color: var(--done-fg); background: var(--done-bg); }

/* ЛИСТАЛКА. Ссылками, без скрипта: страница живёт в адресе, её можно
   послать, обновить и вернуться на неё «назад». Прижата к низу панели
   (`margin-top: auto`), поэтому у соседних панелей она стоит на одной
   высоте даже когда строк в них разное число. */
.pager { display: flex; align-items: center; justify-content: space-between;
         gap: var(--s3); margin-top: auto; padding-top: var(--s4);
         border-top: 1px solid var(--border); font-size: var(--fs-2); }
.pager a { text-decoration: none; font-weight: 600; padding: var(--s1) var(--s2);
           border-radius: var(--radius-sm); }
.pager a:hover { background: var(--row-hover); }
/* Край списка виден, но не притворяется кнопкой: серое и не нажимается. */
.pager .off { color: var(--muted-soft); padding: var(--s1) var(--s2); }
.pager-at { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ГЛАЗ «ВЫПОЛНЕННЫЕ». Отметка вехи необратима, и это единственное место,
   где можно посмотреть, что закрыто за сутки. Тихий, пока не нажат:
   основная работа экрана — несделанное. */
.eye { display: inline-flex; align-items: center; gap: var(--s2);
       padding: var(--s1) var(--s2); border-radius: var(--radius-sm);
       color: var(--muted); text-decoration: none; font-size: var(--fs-2);
       font-weight: 600; white-space: nowrap; }
.eye:hover { background: var(--row-hover); color: var(--text); }
.eye.on { background: var(--accent-soft); color: var(--accent); }
.eye .ic { width: 16px; height: 16px; flex: 0 0 16px; }

/* Выполненное показано тише сделанного: это справка, а не работа. */
.done-list .what { font-weight: 400; }
.done-list .tick { display: grid; place-items: center; width: 22px;
                   height: 22px; border-radius: 50%; font-size: var(--fs-2);
                   background: var(--done-bg); color: var(--done-fg); }
.done-list .when { text-align: right; line-height: 1.3; }

/* ------------------------------------------------------------
   БЛИЖАЙШИЕ ДЕДЛАЙНЫ: что и когда, дата отдельной колонкой справа.
   ------------------------------------------------------------ */
.dl { display: grid; grid-template-columns: minmax(0, 1fr) 5.5em;
      gap: var(--s4); align-items: center; min-height: 56px;
      padding: var(--s2) 0; border-top: 1px solid var(--border); }
.dl:first-of-type { border-top: 0; }
.dl-copy { min-width: 0; }
.dl-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
            white-space: nowrap; }
.dl-meta { display: flex; gap: var(--s2); min-width: 0; color: var(--muted);
           font-size: var(--fs-3); }
.dl-meta .who { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
.datebox { justify-self: end; width: 100%; padding: var(--s2) var(--s1);
           border: 1px solid var(--border-strong);
           border-radius: var(--radius); background: var(--panel-soft);
           text-align: center; font-size: var(--fs-2); font-weight: 600;
           line-height: 1.2; white-space: nowrap; }
.datebox.soon { border-color: var(--warn-fg); background: var(--warn-bg);
                color: var(--warn-fg); }
/* Пустая коробка ДЕРЖИТ КОЛОНКУ, но ничего не утверждает: строка идёт
   тем же днём, что и предыдущая, и повторять его незачем. */
.datebox.empty { border-color: transparent; background: transparent; }

/* ------------------------------------------------------------
   КАЛЕНДАРЬ НА ДВЕ НЕДЕЛИ.

   ЗАЧЕМ ОН РЯДОМ СО СПИСКОМ СРОКОВ, ЕСЛИ ДАННЫЕ ТЕ ЖЕ. Список идёт
   по порядку, и один тяжёлый день съедает его целиком: под «14 авг · 9»
   не видно, что дальше три пустых дня и завал в понедельник.
   Календарь показывает ФОРМУ двух недель, список — ближайшую очередь.

   СЕТКА ПН–ВС ОТ ПОНЕДЕЛЬНИКА ТЕКУЩЕЙ НЕДЕЛИ, включая прошедшие дни:
   там висит несделанное, и видеть его полезно.
   ------------------------------------------------------------ */
.cal { overflow: visible; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
            border-top: 1px solid var(--border-strong);
            border-left: 1px solid var(--border-strong); }
.cal-day { position: relative; min-width: 0; min-height: 118px;
           padding: 0 var(--s2) var(--s3); background: var(--panel);
           border-right: 1px solid var(--border-strong);
           border-bottom: 1px solid var(--border-strong); }
/* ПРОШЕДШИЕ ДНИ ПРИГЛУШЕНЫ, А НЕ СПРЯТАНЫ. Убери их — и сетка
   перестанет быть неделей: понедельник окажется в среду. */
.cal-day.past { background: var(--panel-soft); }
.cal-head { display: flex; align-items: baseline; justify-content: center;
            gap: var(--s2); min-height: 30px; margin: 0 calc(-1 * var(--s2));
            padding: var(--s2); background: var(--panel-soft);
            border-bottom: 1px solid var(--border);
            font-size: var(--fs-2); }
.cal-wd { color: var(--muted-soft); text-transform: uppercase;
          letter-spacing: .04em; font-weight: 600; }
.cal-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-day.on .cal-head { background: var(--accent); color: var(--on-accent); }
.cal-day.on .cal-wd { color: var(--on-accent); }

.cal-item { position: relative; display: block; width: 100%; min-width: 0;
            margin-top: var(--s2); padding: var(--s2);
            border: 1px solid var(--border);
            border-left: 3px solid var(--accent);
            border-radius: var(--radius-sm); background: var(--accent-soft);
            color: var(--text); font-size: var(--fs-2); line-height: 1.25;
            text-align: left; cursor: pointer; }
.cal-item:hover, .cal-item:focus-visible { background: var(--row-hover);
                                           border-color: var(--accent); }
/* ДВЕ СТРОКИ, А НЕ МНОГОТОЧИЕ. В одну строку клетка обрезала названия
   до «Согласовать ...» и «Уточнить дет...» — а в соседних клетках
   стояли «Согласовать план» и «Уточнить детали», то есть многоточие
   съедало ровно то, чем клетки различаются. Две строки читаются,
   третья уже не нужна: подробности лежат во всплывашке. */
.cal-name { display: -webkit-box; -webkit-line-clamp: 2;
            -webkit-box-orient: vertical; overflow: hidden;
            white-space: normal; font-weight: 600;
            padding-right: var(--s5); }
.cal-n { position: absolute; top: var(--s2); right: var(--s2);
         display: inline-grid; place-items: center; min-width: 20px;
         height: 18px; padding: 0 var(--s1); border-radius: 999px;
         background: var(--panel); color: var(--accent);
         font-size: var(--fs-1); font-weight: 700;
         font-variant-numeric: tabular-nums; }
.cal-empty { padding-top: var(--s1); color: var(--muted-soft);
             font-size: var(--fs-1); }

/* ВСПЛЫВАШКА БЕЗ ЕДИНОЙ СТРОКИ СКРИПТА. Держится на `:hover`
   и на фокусе самой кнопки: с клавиатуры открывается табом,
   пальцем — касанием. Скрипт здесь был бы четвёртым в админке,
   и чинить его пришлось бы отдельно на каждом устройстве. */
.pop { position: absolute; left: 50%; bottom: calc(100% + var(--s2));
       width: 260px; transform: translateX(-50%); padding: var(--s3);
       border: 1px solid var(--border-strong); border-radius: var(--radius);
       background: var(--panel); color: var(--text);
       box-shadow: var(--shadow-hover); text-align: left;
       opacity: 0; visibility: hidden; pointer-events: none; z-index: 40; }
.cal-item:hover .pop,
.cal-item:focus-visible .pop { opacity: 1; visibility: visible; }
.pop-line { display: block; padding: var(--s2) 0;
            border-top: 1px solid var(--border); font-size: var(--fs-2); }
.pop-line:first-child { border-top: 0; padding-top: 0; }
.pop-line b { display: block; font-weight: 600; }
.pop-line span { color: var(--muted); }

/* ============================================================
   ТРИ ШИРИНЫ.

   Рисуем под первую. Вторая и третья обязаны не РАЗВАЛИВАТЬСЯ —
   это не «мобильная версия», а обещание, что открывший админку
   с телефона увидит рабочий экран, а не кашу.
   ============================================================ */

@media (max-width: 1240px) {
  .two { grid-template-columns: minmax(0, 1fr); }
  .cal-grid { grid-template-columns: repeat(7, minmax(104px, 1fr));
              overflow-x: auto; }
}

/* Ноутбук и планшет: боковое меню уже, поля тоньше. */
@media (max-width: 1100px) {
  :root { --sidebar-w: 184px; }
  main { padding: var(--s5) var(--s4) var(--s7); }
}

/* Телефон: меню уезжает за край и открывается кнопкой.
   Всё остальное встаёт друг под друга — страница растёт в длину,
   а не сжимается в нечитаемое. */
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .topbar { display: flex; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 10;
          width: 260px; max-width: 86vw; height: 100dvh;
          transform: translateX(-102%); transition: transform .12s ease; }
  html.side-open .side { transform: translateX(0); }
  html.side-open .scrim { position: fixed; inset: 0; z-index: 9;
                          background: var(--scrim); }
  /* На телефоне узкий режим не работает: там меню либо открыто
     поверх содержимого, либо его нет совсем. */
  html.side-thin .shell { grid-template-columns: minmax(0, 1fr); }
  html.side-thin .side { padding: var(--s4) var(--s3); }
  html.side-thin .side a { flex-direction: row; text-align: left;
                           padding: var(--s2); gap: var(--s2); }
  html.side-thin .side a span { font-size: var(--fs-4); }
  html.side-thin .side .grp, html.side-thin .side .who { display: block; }

  .week { grid-template-columns: minmax(0, 1fr); }
  .day { min-height: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg { max-width: 92%; }
  main { padding: var(--s4) var(--s3) var(--s7); }
  .panel { padding: var(--s4); }
  .board-head { padding: var(--s3) var(--s4); }
  .board-body { padding: var(--s1) var(--s4) var(--s3); }

  /* СТРОКА СТАНОВИТСЯ КАРТОЧКОЙ. Четыре колонки в 390 пикселей
     не помещаются: имя вехи и ссылка на заказ вставали друг на друга,
     и список превращался в кашу. Здесь дело и заказ идут в столбик,
     а срок остаётся справа — он и есть то, по чему сканируют. */
  .deeds li { grid-template-columns: 22px minmax(0, 1fr) auto;
              gap: var(--s1) var(--s3); align-items: start;
              padding: var(--s3) 0; }
  .deeds .what { white-space: normal; }
  .deeds .where { grid-column: 2; white-space: normal; }
  .deeds .when { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

  .dl { grid-template-columns: minmax(0, 1fr) 5em; gap: var(--s3); }
  .dl-title, .dl-meta .who { white-space: normal; }

  /* КАЛЕНДАРЬ НА ТЕЛЕФОНЕ — ДВЕ КОЛОНКИ ОТДЕЛЬНЫМИ КЛЕТКАМИ.
     Семь колонок в 390 пикселей дают полосу по три буквы: это
     не «сжалось», это перестало работать. */
  .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
              border: 0; gap: var(--s2); padding: var(--s2) 0;
              overflow-x: visible; }
  .cal-day { border: 1px solid var(--border); border-radius: var(--radius);
             min-height: 96px; }
  .pop { width: 200px; }

  /* ТАБЛИЦЫ НА УЗКОМ ЭКРАНЕ. Семь колонок в 390 пикселей не влезают
     никак, и сжимать их — значит получить столбик по букве. Пока
     не разобраны поэкранно, таблица ЕДЕТ ВБОК внутри своей рамки. */
  .panel > table, .panel > form > table { display: block;
    overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 760px) {
  /* На телефоне плитки идут столбиком, и перегородка между ними
     становится горизонтальной: вертикальная линия между строками
     не разделяет ничего. */
  .kpis { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 460px) {
  .cal-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   ГЛАВНАЯ 13.3 — ГЕОМЕТРИЯ АКТУАЛЬНОГО ПРОТОТИПА.

   Корневой namespace обязателен: общие `.panel`, `.board`, `.two`,
   `.deeds` и `.dl` используются как контракт старых экранов. Главная
   уточняет только собственную композицию, не меняя потолок общего `main`.
   ============================================================ */
.dashboard-page {
  --dashboard-calendar-inline: calc(var(--s3) - (var(--s1) / 2));
  --dashboard-calendar-bottom: calc(var(--s3) - 1px);
  --dashboard-calendar-tight: calc(var(--s2) - 1px);
  --dashboard-calendar-row-gap: calc(var(--s2) + 1px);
  --dashboard-event-block: calc(var(--s2) - (var(--s1) / 2));
  --dashboard-kpi-block-pad: calc(var(--s4) - 1px);
  --dashboard-kpi-value-gap: calc(var(--s1) / 2);
  width: 100%;
  max-width: none;
  min-width: 0;
}

.dashboard-page .kpi {
  justify-content: flex-start;
  gap: var(--s3);
  padding: var(--dashboard-kpi-block-pad) var(--s5);
}

.dashboard-page .kpi .round .ic {
  width: 21px;
  height: 21px;
  flex-basis: 21px;
}

.dashboard-page .kpi .label {
  font-weight: 650;
}

.dashboard-page .kpi .value {
  margin-left: var(--dashboard-kpi-value-gap);
  font-size: calc(var(--fs-7) - 1px);
  font-weight: 780;
}

.dashboard-page .kpi.busy .round {
  background: var(--busy-bg);
  color: var(--busy-fg);
}

.dashboard-page .kpi.busy .value {
  color: var(--busy-fg);
}

.dashboard-page .kpi.done .round {
  background: var(--done-bg);
  color: var(--done-fg);
}

.dashboard-page .kpi.done .value {
  color: var(--done-fg);
}

.dashboard-page .dashboard-workspace {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: stretch;
}

.dashboard-page .deeds li {
  min-height: 52px;
}

.dashboard-page .deeds .what,
.dashboard-page .deeds .where {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.dashboard-page .deeds li:hover,
.dashboard-page .deeds li:focus-within,
.dashboard-page .dl:hover,
.dashboard-page .dl:focus-within {
  background: var(--row-hover);
}

.dashboard-page .dl {
  min-height: 64px;
}

.dashboard-page .dl-meta {
  flex-wrap: wrap;
}

.dashboard-page .dl-title,
.dashboard-page .dl-meta .who {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page .dashboard-calendar {
  margin-top: var(--s4);
}

.dashboard-page .dashboard-calendar-head {
  align-items: flex-start;
}

.dashboard-page .dashboard-calendar-heading {
  min-width: 0;
}

.dashboard-page .dashboard-calendar-subtitle {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.3;
}

.dashboard-page .cal-day {
  min-height: 126px;
  padding: 0 var(--dashboard-calendar-inline) var(--dashboard-calendar-bottom);
}

.dashboard-page .cal-head {
  min-height: 34px;
  align-items: center;
  gap: var(--dashboard-calendar-tight);
  margin: 0 calc(-1 * var(--dashboard-calendar-inline)) var(--dashboard-calendar-row-gap);
  padding: var(--dashboard-calendar-tight) var(--s2);
  border-bottom-color: var(--accent-hover);
  background: var(--accent);
  color: var(--on-accent);
}

.dashboard-page .cal-wd {
  color: inherit;
}

.dashboard-page .cal-day.on .cal-head {
  background: var(--accent-hover);
  color: var(--on-accent);
  box-shadow: inset 0 0 0 2px var(--on-accent);
}

.dashboard-page .cal-item {
  margin-top: var(--dashboard-event-block);
  padding: var(--dashboard-event-block) var(--s2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
}

.dashboard-page .cal-n {
  border-radius: 999px;
  background: var(--panel);
  color: var(--accent);
}

@media (max-width: 920px) {
  .dashboard-page .dashboard-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .dashboard-page .cal-day {
    min-height: 96px;
  }
}

/* ============================================================
   ЗАКАЗЫ 13.2 — ОБОЛОЧКА HTML-ПРОТОТИПА.
   Геометрия перенесена из «Заказы и хранилище.html»; палитра связана
   только с действующими токенами пяти тем. Все правила route-specific.
   ============================================================ */

main:has(.orders-prototype),
main:has(.storage-page) {
  max-width: none;
  margin: 0;
  padding: calc(var(--s6) + 2px) var(--s6) calc(var(--s8) + var(--s1));
}

/* ЗАГОЛОВОК ЗДЕСЬ БЕЗ СВОЕГО КЕГЛЯ (13.2.3). В прототипе он 28px, и перенос
   был буквальным. Но в 13.2.1 владелец уже принял обратное решение: кегль
   заголовка — общий для всех сорока экранов, и меняется он один раз для
   всей админки, а не по экрану за раз. Здесь остаётся только порядок блоков
   и отступ; размер и начертание берутся из общего `h1`. */
main:has(.orders-prototype) > h1,
main:has(.storage-page) > h1 {
  order: -4;
  margin: 0 0 calc(var(--s4) - 2px);
}

main:has(.orders-prototype) > .alarms,
main:has(.storage-page) > .alarms {
  order: -3;
  margin: 0 0 calc(var(--s5) - 2px);
}

main:has(.orders-prototype) > .orders-primary-tabs,
main:has(.storage-page) > .orders-primary-tabs {
  order: -2;
  display: flex;
  gap: 28px;
  margin: calc(var(--s1) - 2px) 0 calc(var(--s5) - 2px);
  padding-left: calc(var(--s1) - 2px);
  border-bottom: 1px solid var(--border);
}

main:has(.orders-prototype) > .orders-primary-tabs a,
main:has(.storage-page) > .orders-primary-tabs a {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(var(--fs-4) - 1px);
  font-weight: 650;
  text-decoration: none;
}

main:has(.orders-prototype) > .orders-primary-tabs .on,
main:has(.storage-page) > .orders-primary-tabs .on {
  color: var(--text);
}

main:has(.orders-prototype) > .orders-primary-tabs .on::after,
main:has(.storage-page) > .orders-primary-tabs .on::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.orders-prototype {
  --orders-control-height: 40px;
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--fs-4) - 1px);
  line-height: 1.4;
}

.orders-prototype .orders-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.orders-prototype button,
.orders-prototype input,
.orders-prototype select {
  color: inherit;
  font: inherit;
}

.orders-prototype .orders-filter-anchor {
  position: static;
}

.orders-prototype .orders-filters {
  position: relative;
}

.orders-prototype .orders-filter-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 calc(var(--s2) - 2px);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 800;
}

.orders-prototype .orders-sort-form {
  display: flex;
  margin: 0;
}

.orders-prototype .orders-filter-panel[hidden] {
  display: none;
}

.orders-prototype .orders-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: auto;
  right: 0;
  z-index: 40;
  width: 760px;
  max-width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}

.orders-prototype .orders-filter-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 calc(var(--s4) - 2px);
}

.orders-prototype .orders-filter-panel-head h2 {
  margin: 0;
  font-size: var(--fs-4);
}

.orders-prototype .orders-filter-panel-head button {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: calc(var(--fs-6) - 1px);
}

.orders-prototype .orders-filter-panel-head button:hover {
  background: var(--row-hover);
  color: var(--text);
}

.orders-prototype .orders-advanced-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.orders-prototype .orders-advanced-form > label {
  position: relative;
  display: grid;
  gap: calc(var(--s1) + 1px);
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-advanced-form select,
.orders-prototype .orders-advanced-form input {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 calc(var(--s3) - 2px);
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--panel);
}

.orders-prototype .orders-advanced-form select:hover,
.orders-prototype .orders-advanced-form select:focus,
.orders-prototype .orders-advanced-form input:hover,
.orders-prototype .orders-advanced-form input:focus {
  border-color: var(--control-hover);
}

.orders-prototype .orders-demo-label {
  position: absolute;
  top: 0;
  right: 0;
  padding: calc(var(--s1) - 3px) calc(var(--s1) + 1px);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: calc(var(--fs-1) - 1px);
  font-weight: 700;
}

.orders-prototype .orders-demo-field select {
  border-style: dashed;
  color: var(--muted);
}

.orders-prototype .orders-filter-actions {
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 8px;
  margin-top: calc(var(--s1) - 2px);
  padding-top: calc(var(--s4) - 2px);
  border-top: 1px solid var(--border);
}

.orders-prototype .orders-clear-button {
  height: 36px;
}

.orders-prototype .orders-demo-sort-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.orders-prototype .orders-meta {
  margin: 0 0 calc(var(--s3) - 2px);
  color: var(--muted);
  font-size: var(--fs-3);
}

.orders-prototype .orders-table-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.orders-prototype .orders-table-wrap {
  overflow: auto;
}

.orders-prototype .orders-table {
  width: 100%;
  min-width: 1320px;
  border-collapse: collapse;
}

.orders-prototype .orders-table thead tr {
  height: 48px;
}

.orders-prototype .orders-table th {
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 18px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.orders-prototype .orders-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  vertical-align: middle;
}

.orders-prototype .orders-table th:first-child,
.orders-prototype .orders-table td:first-child {
  background: var(--accent-soft);
}

.orders-prototype .orders-table tbody tr {
  cursor: pointer;
}

.orders-prototype .orders-table tbody tr:last-child td {
  border-bottom: 0;
}

.orders-prototype .orders-table tbody tr:hover td,
.orders-prototype .orders-table tbody tr:focus-visible td,
.orders-prototype .orders-table tbody tr:has(:focus-visible) td {
  background: var(--row-hover);
}

.orders-prototype .orders-table tbody tr:hover td:first-child,
.orders-prototype .orders-table tbody tr:focus-visible td:first-child,
.orders-prototype .orders-table tbody tr:has(:focus-visible) td:first-child {
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--accent));
}

.orders-prototype .orders-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}

.orders-prototype .orders-table tbody tr.is-selected td:first-child {
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--accent));
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent);
}

.orders-prototype .orders-table tbody tr.is-selected td:last-child {
  box-shadow: inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent);
}

.orders-prototype .orders-order {
  white-space: nowrap;
}

.orders-prototype .orders-order-link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--s2) - 2px);
  color: var(--accent);
  font-size: calc(var(--fs-4) + 1px);
  font-weight: 850;
  text-decoration: none;
  text-underline-offset: 3px;
}

.orders-prototype .orders-order-link:hover,
.orders-prototype .orders-order-link:focus-visible {
  color: var(--accent-hover);
  text-decoration: underline;
}

.orders-prototype .orders-preview-button {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: 900;
  line-height: 1;
}

.orders-prototype .orders-preview-button:hover,
.orders-prototype .orders-preview-button:focus-visible {
  background: var(--panel);
}

.orders-prototype .orders-client a {
  color: var(--text);
  font-weight: 650;
  text-decoration: none;
}

.orders-prototype .orders-client a:hover,
.orders-prototype .orders-client a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.orders-prototype .orders-work-title,
.orders-prototype .orders-stage {
  color: var(--text);
  font-weight: 400;
}

.orders-prototype .orders-topic {
  display: block;
  margin-top: calc(var(--s1) - 1px);
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-more-work,
.orders-prototype .orders-authors details {
  margin-top: calc(var(--s1) - 1px);
}

.orders-prototype .orders-more-work summary,
.orders-prototype .orders-authors summary {
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 700;
}

.orders-prototype .orders-more-work ul,
.orders-prototype .orders-authors ul {
  margin: 4px 0 0;
  padding-left: calc(var(--s5) - 2px);
  color: var(--muted);
}

.orders-prototype .orders-client-now-content {
  display: grid;
  gap: 4px;
}

.orders-prototype .orders-turn {
  display: inline-flex;
  width: fit-content;
  min-height: 25px;
  align-items: center;
  padding: calc(var(--s1) - 1px) var(--s2);
  border-radius: 6px;
  background: var(--off-bg);
  color: var(--off-fg);
  font-size: var(--fs-2);
  white-space: nowrap;
}

.orders-prototype .orders-turn.is-client {
  background: var(--warn-bg);
  color: var(--warn-fg);
}

.orders-prototype .orders-turn.is-us {
  background: var(--busy-bg);
  color: var(--busy-fg);
}

.orders-prototype .orders-waiting {
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-next-action-line {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--s1) + 1px);
  white-space: nowrap;
}

.orders-prototype .orders-next-action-line > span {
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-next-action-line.overdue > span {
  color: var(--stop-fg);
  font-weight: 700;
}

.orders-prototype .orders-next-action-line.today > span {
  color: var(--warn-fg);
  font-weight: 700;
}

.orders-prototype .orders-next-action-line > i {
  color: var(--muted);
  font-style: normal;
}

.orders-prototype .orders-next-action-line > strong {
  color: var(--text);
  font-weight: 600;
}

.orders-prototype .orders-deadline-details {
  position: relative;
}

.orders-prototype .orders-deadline-details > summary {
  display: flex;
  align-items: baseline;
  gap: calc(var(--s1) + 1px);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.orders-prototype .orders-deadline-details > summary::-webkit-details-marker {
  display: none;
}

.orders-prototype .orders-deadline-details > summary span {
  color: var(--muted);
  font-size: var(--fs-2);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.orders-prototype .orders-deadline-details.overdue > summary span {
  color: var(--stop-fg);
  font-weight: 700;
}

.orders-prototype .orders-deadline-details.today > summary span {
  color: var(--warn-fg);
  font-weight: 700;
}

.orders-prototype .orders-deadline-details > summary i {
  color: var(--muted);
  font-style: normal;
}

.orders-prototype .orders-deadline-details > summary strong {
  color: var(--text);
  font-weight: 600;
}

.orders-prototype .orders-deadline-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  display: grid;
  width: 270px;
  gap: calc(var(--s1) + 1px);
  padding: calc(var(--s3) + 1px) calc(var(--s4) - 2px);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow-hover);
  color: var(--muted);
  font-size: var(--fs-3);
  white-space: normal;
}

.orders-prototype .orders-deadline-popover > strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: calc(var(--fs-4) - 1px);
}

.orders-prototype .orders-overdue {
  color: var(--stop-fg);
}

.orders-prototype .orders-money {
  font-weight: 400;
  white-space: nowrap;
}

.orders-prototype .orders-paid {
  display: inline-flex;
  padding: calc(var(--s1) - 1px) var(--s2);
  border-radius: 6px;
  background: var(--done-bg);
  color: var(--done-fg);
  font-size: var(--fs-2);
}

.orders-prototype .orders-pagination {
  display: flex;
  min-height: 57px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--s3) + 1px) calc(var(--s4) - 2px);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-3);
}

.orders-prototype .orders-pages {
  display: flex;
  align-items: center;
  gap: calc(var(--s1) + 1px);
}

.orders-prototype .orders-pages a,
.orders-prototype .orders-pages > span {
  display: inline-grid;
  min-width: 31px;
  height: 31px;
  place-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}

.orders-prototype .orders-pages a:hover,
.orders-prototype .orders-pages a:focus-visible {
  background: var(--row-hover);
  color: var(--text);
}

.orders-prototype .orders-pages a.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.orders-prototype .orders-pages .is-disabled {
  opacity: .35;
}

.orders-prototype .orders-empty {
  display: grid;
  justify-items: center;
  gap: calc(var(--s2) - 2px);
  min-height: 260px;
  align-content: center;
  padding: 36px 20px;
  text-align: center;
}

.orders-prototype .orders-empty p {
  margin: 0;
  color: var(--muted);
}

.orders-prototype .orders-empty a {
  margin-top: 8px;
  color: var(--accent);
  font-weight: 700;
}

.orders-prototype .orders-empty-mark {
  width: 28px;
  height: 28px;
  color: var(--muted);
}

/* Demo surfaces remain isolated from real forms and queries. */
.orders-prototype .orders-demo-dialog,
.orders-prototype .orders-demo-drawer {
  width: min(520px, 94vw);
  max-height: 90vh;
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow-hover);
}

.orders-prototype .orders-demo-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(370px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: -16px 0 36px color-mix(in srgb, var(--text) 14%, transparent);
}

.orders-prototype .orders-demo-drawer[open] {
  display: flex;
  flex-direction: column;
}

.orders-prototype .orders-demo-drawer:not([open]) {
  display: none;
}

.orders-prototype .orders-demo-dialog::backdrop,
.orders-prototype .orders-demo-drawer::backdrop {
  background: var(--scrim);
}

.orders-prototype .orders-demo-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--s5) - 2px) var(--s5) calc(var(--s4) - 2px);
  border-bottom: 1px solid var(--border);
}

.orders-prototype .orders-demo-drawer .orders-demo-dialog-head {
  flex: 0 0 auto;
  padding: calc(var(--s6) - 2px) calc(var(--s6) - 2px) calc(var(--s4) + 1px);
}

.orders-prototype .orders-demo-drawer .orders-demo-dialog-head p {
  margin: 4px 36px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.orders-prototype .orders-demo-dialog-head h2 {
  margin: 4px 0 0;
  font-size: calc(var(--fs-6) - 1px);
}

.orders-prototype .orders-demo-kicker {
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.orders-prototype .orders-demo-close {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: calc(var(--fs-6) + 1px);
}

.orders-prototype .orders-demo-close:hover {
  background: var(--row-hover);
  color: var(--text);
}

/* Создание клиента поверх незавершённого заказа. */
.orders-prototype .orders-client-picker { display: flex; gap: var(--s2); align-items: stretch; }
.orders-prototype .orders-client-picker input { flex: 1; min-width: 0; }
.orders-prototype .orders-client-add { flex: 0 0 40px; font-size: var(--fs-6); }
.orders-prototype .orders-form-error { color: var(--stop-fg); background: var(--stop-bg);
  border: 1px solid currentColor; border-radius: var(--radius); padding: var(--s3); }
.orders-prototype .orders-client-picker + datalist + .muted { margin: var(--s2) 0 0; font-size: var(--fs-2); }

.orders-prototype .orders-demo-dialog-body {
  display: grid;
  gap: 16px;
  padding: calc(var(--s4) + 1px) var(--s5);
}

.orders-prototype .orders-demo-drawer .orders-demo-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: calc(var(--s5) - 2px) calc(var(--s6) - 2px) calc(var(--s4) - 2px);
}

.orders-prototype .orders-demo-banner {
  margin: 0;
  padding: calc(var(--s3) - 2px) calc(var(--s3) - 1px);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--accent-soft);
  font-size: var(--fs-2);
  font-weight: 700;
}

.orders-prototype .orders-demo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.orders-prototype .orders-demo-form-grid label,
.orders-prototype .orders-demo-subpanel label,
.orders-prototype .orders-demo-storage-toolbar label,
.orders-prototype .orders-demo-storage-manager label,
.orders-prototype .orders-demo-storage-actions label {
  display: grid;
  gap: calc(var(--s1) + 1px);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
}

.orders-prototype .orders-demo-form-grid input,
.orders-prototype .orders-demo-form-grid select,
.orders-prototype .orders-demo-subpanel input,
.orders-prototype .orders-demo-subpanel select,
.orders-prototype .orders-demo-storage-toolbar input,
.orders-prototype .orders-demo-storage-actions select,
.orders-prototype .orders-demo-storage-manager input {
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 calc(var(--s3) - 2px);
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}

.orders-prototype .orders-demo-wide {
  grid-column: 1 / -1;
}

.orders-prototype .orders-demo-message {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-demo-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel-soft);
}

.orders-prototype .orders-demo-drawer .orders-demo-dialog-foot {
  flex: 0 0 auto;
  padding: calc(var(--s4) - 2px) calc(var(--s6) - 2px) calc(var(--s5) - 2px);
  background: var(--panel);
}

.orders-prototype .orders-demo-drawer .orders-demo-primary {
  width: 100%;
}

.orders-prototype .orders-demo-primary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  text-decoration: none;
}

.orders-prototype .orders-demo-properties dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.orders-prototype .orders-demo-properties dl > div {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.orders-prototype .orders-demo-properties dl > .orders-preview-action {
  padding-top: calc(var(--s3) - 2px);
  padding-bottom: calc(var(--s3) - 2px);
}

.orders-prototype .orders-demo-properties dl > .orders-preview-action dd {
  font-weight: 750;
}

.orders-prototype .orders-demo-properties dl > .orders-preview-divider {
  display: block;
  height: 1px;
  margin: calc(var(--s2) - 1px) 0;
  padding: 0;
  border: 0;
  background: var(--border);
}

.orders-prototype .orders-demo-properties dt {
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-demo-properties dd {
  margin: 0;
  font-weight: 600;
}

.orders-prototype .orders-demo-properties [data-preview-client-now] {
  white-space: pre-line;
}

.orders-prototype .orders-storage-preview {
  width: min(900px, 96vw);
}

.orders-prototype .orders-demo-storage-toolbar,
.orders-prototype .orders-demo-storage-actions,
.orders-prototype .orders-demo-storage-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.orders-prototype .orders-demo-storage-search {
  flex: 1 1 360px;
}

.orders-prototype .orders-demo-storage-actions > button,
.orders-prototype .orders-demo-storage-footer button {
  min-height: 36px;
  margin: 0;
  padding-inline: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.orders-prototype .orders-demo-storage-actions > button.is-active,
.orders-prototype .orders-demo-storage-footer button.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}

.orders-prototype .orders-demo-storage-actions details {
  margin-left: auto;
}

.orders-prototype .orders-demo-storage-actions details > summary {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
  font-size: var(--fs-2);
  font-weight: 800;
}

.orders-prototype .orders-demo-storage-actions details > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft);
}

.orders-prototype .orders-demo-storage-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.orders-prototype .orders-demo-storage-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.orders-prototype .orders-demo-storage-table th,
.orders-prototype .orders-demo-storage-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2);
  text-align: left;
}

.orders-prototype .orders-demo-storage-table th {
  background: var(--panel-soft);
  color: var(--muted);
}

.orders-prototype .orders-demo-storage-footer {
  padding-top: 8px;
  color: var(--muted);
  font-size: var(--fs-2);
}

.orders-prototype .orders-demo-storage-footer > div {
  display: flex;
  gap: 4px;
}

.orders-prototype .orders-demo-subpanel,
.orders-prototype .orders-demo-storage-manager {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--panel-soft);
}

.orders-prototype .orders-demo-subpanel h3,
.orders-prototype .orders-demo-storage-manager p {
  margin: 0;
}

.orders-prototype .orders-demo-storage-manager > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .orders-prototype .orders-filter-panel {
    width: 620px;
  }
  .orders-prototype .orders-advanced-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  main:has(.orders-prototype),
  main:has(.storage-page) {
    padding: 20px;
  }
}

@media (max-width: 760px) {
  main:has(.orders-prototype),
  main:has(.storage-page) {
    padding: 16px 12px 32px;
  }
  .orders-prototype .orders-filter-panel {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    max-height: min(78vh, 680px);
    overflow-y: auto;
    border-radius: 12px;
  }
  .orders-prototype .orders-advanced-form {
    grid-template-columns: minmax(0, 1fr);
  }
  .orders-prototype .orders-table-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .orders-prototype .orders-table-wrap {
    overflow: visible;
  }
  .orders-prototype .orders-table,
  .orders-prototype .orders-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .orders-prototype .orders-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .orders-prototype .orders-table tbody {
    display: grid;
    gap: 12px;
  }
  .orders-prototype .orders-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  .orders-prototype .orders-table td {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    white-space: normal;
  }
  .orders-prototype .orders-table td::before {
    color: var(--muted-soft);
    content: attr(data-label);
    font-size: var(--fs-1);
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .orders-prototype .orders-table td:first-child {
    background: var(--accent-soft);
  }
  .orders-prototype .orders-table td:nth-child(1),
  .orders-prototype .orders-table td:nth-child(2),
  .orders-prototype .orders-table td:nth-child(3),
  .orders-prototype .orders-table td:nth-child(6),
  .orders-prototype .orders-table td:nth-child(7) {
    grid-column: 1 / -1;
  }
  .orders-prototype .orders-table td:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .orders-prototype .orders-deadline-popover {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
  }
  .orders-prototype .orders-pagination {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--panel);
  }
  .orders-prototype .orders-pages {
    width: 100%;
    justify-content: space-between;
  }
  .orders-prototype .orders-demo-form-grid,
  .orders-prototype .orders-demo-storage-actions details > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .orders-prototype .orders-demo-dialog {
    width: 96vw;
    max-height: 92vh;
    margin: auto;
    border-radius: 11px;
  }
  .orders-prototype .orders-demo-drawer {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .orders-prototype .orders-demo-properties dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 460px) {
  .orders-prototype .orders-quick,
  .orders-prototype .orders-table tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }
  .orders-prototype .orders-table td {
    grid-column: 1 / -1;
  }
}

/* === КОНЕЦ БЛОКА «ЗАКАЗЫ» =============================================== */

/* ============================================================
   ГРАФИКИ. РАЗМЕТКА НЕСЁТ ГЕОМЕТРИЮ, СТИЛИ — ПРАВИЛА,
   ТЕМА — ЦВЕТ. Ни один тон не написан внутри SVG: там только
   номер ряда классом (`s1` … `s7`), а чем этот номер красить,
   решает палитра заведения.
   ============================================================ */
.chart { width: 100%; height: auto; display: block; }
/* Сетка и оси — теми же линиями, что и границы таблиц: график
   не должен выглядеть чужой вставкой на странице. */
.chart .grid { stroke: var(--border); stroke-width: 1; fill: none; }
.chart .axis { fill: var(--muted); font-size: var(--fs-3); }
/* ГРАНИЦА МЕСЯЦА И ГОДА. Пунктиром и цветом рамки, а не акцентом:
   это разделитель, а не данные. Сплошная линия читалась бы как ещё
   один ряд. */
.chart .edge { stroke: var(--border-strong); stroke-width: 1;
               stroke-dasharray: 3 4; }
.chart .edge.year { stroke-width: 2; stroke-dasharray: none; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round;
               stroke-linecap: round; }
.chart .dot { stroke: var(--panel); stroke-width: 1.5; }
.chart .bar { stroke: none; }
/* ВЫКЛЮЧЕННЫЙ РЯД НЕ УДАЛЯЕТСЯ ИЗ РАЗМЕТКИ, А ГАСНЕТ. Тогда его можно
   вернуть, не спрашивая сервер, и человек не ждёт перезагрузки ради
   того, чтобы посмотреть на линию под линией. */
.chart .series[hidden] { display: none; }
/* Столбик или точка под курсором. Обводка, а не смена заливки:
   заливка — это ряд, и менять её значило бы соврать про цвет. */
.chart .hit { fill: transparent; }
.chart .band { fill: var(--row-hover); opacity: 0; }
.chart .band.on { opacity: 1; }

.s1 { color: var(--series-1); }
.s2 { color: var(--series-2); }
.s3 { color: var(--series-3); }
.s4 { color: var(--series-4); }
.s5 { color: var(--series-5); }
.s6 { color: var(--series-6); }
.s7 { color: var(--series-7); }
/* Один класс красит и линию, и заливку, и точку в легенде: `color`
   объявлен выше, `currentColor` его подхватывает. Иначе на каждый ряд
   пришлось бы по три правила, и однажды одно из трёх забыли бы. */
.chart .line, .chart .bar, .chart .dot { stroke: currentColor; }
.chart .bar, .chart .dot { fill: currentColor; }
.chart .line { fill: none; }
/* Точка ряда в легенде и в подписи под курсором. */
.seriesdot { display: inline-block; width: 9px; height: 9px;
             border-radius: 50%; background: currentColor;
             margin-right: var(--s2); vertical-align: baseline; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s3);
          margin-top: var(--s3); font-size: var(--fs-3); }
.readout { min-height: 1.4em; }
/* НОЛЬ НА ОСИ ПРИБЫЛИ — ГРАНИЦА СМЫСЛА, А НЕ ОЧЕРЕДНОЕ ДЕЛЕНИЕ:
   выше заработали, ниже потеряли. Сольётся с сеткой — и убыточный
   месяц придётся вычислять по подписям слева вместо того, чтобы
   увидеть. */
.chart .grid.zero { stroke: var(--border-strong); stroke-width: 1.5; }
/* Погашенный ряд в легенде. Гаснет подпись, а не исчезает: кнопку
   надо чем-то нажать обратно. */
.legend button.dim { opacity: .45; }
/* ============================================================
   ХРАНИЛИЩЕ ФАЙЛОВ — ПРЯМОЙ SHELL-PORT V8 (13.3)
   ============================================================ */

.storage-page { --storage-control-h: 40px; min-width: 0; }
.storage-page .storage-sr-only { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0; }
.storage-page .storage-button:not(.screen-control):not(.screen-primary-action),
.storage-page .storage-chip:not(.screen-control),
.storage-page .storage-sort:not(.screen-control) { min-height: 36px; display: inline-flex;
  align-items: center; justify-content: center; gap: var(--s2); padding: 0 var(--s3);
  border: 1px solid var(--control); border-radius: var(--radius);
  background: var(--panel); color: var(--text); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.storage-page .storage-button:not(.screen-control):not(.screen-primary-action):hover:not(:disabled),
.storage-page .storage-chip:not(.screen-control):hover { background: var(--row-hover); }
.storage-page .storage-button:not(.screen-control):not(.screen-primary-action):focus-visible,
.storage-page .storage-chip:not(.screen-control):focus-visible,
.storage-page .storage-sort:not(.screen-control):focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.storage-page .storage-button:disabled { opacity: .52; cursor: not-allowed; }
.storage-page .storage-button-primary:not(.screen-primary-action) { min-height: var(--storage-control-h);
  padding-inline: var(--s4); color: var(--on-accent); background: var(--accent);
  border-color: var(--accent); }
.storage-page .storage-button-primary:not(.screen-primary-action):hover:not(:disabled) {
  background: var(--accent-hover); }

/* Единая двухрядная панель управления только для Orders и Storage. */
.orders-prototype .screen-control-row,
.storage-page .screen-control-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  color: var(--text);
  font-family: inherit;
  font-size: calc(var(--fs-4) - 1px);
  font-weight: 400;
  line-height: 1.4;
}
.orders-prototype .screen-control-row-primary,
.storage-page .screen-control-row-primary { padding: 0 0 var(--s1); }
.orders-prototype .screen-control-row-secondary,
.storage-page .screen-control-row-secondary { padding: var(--s5) 0 var(--s4); }
.orders-prototype .screen-control-left,
.storage-page .screen-control-left,
.orders-prototype .screen-control-right,
.storage-page .screen-control-right,
.orders-prototype .orders-quick,
.storage-page .storage-quick {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.orders-prototype .screen-control-left,
.storage-page .screen-control-left { flex: 1 1 auto; min-width: 0; }
.orders-prototype .screen-control-right,
.storage-page .screen-control-right { flex: 0 0 auto; justify-content: flex-end; }
.orders-prototype .screen-control-row-primary .screen-control-left > form,
.storage-page .screen-control-row-primary .screen-control-left > form {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.orders-prototype .screen-search,
.storage-page .screen-search {
  position: relative;
  display: flex;
  width: min(420px, 38vw);
  height: 40px;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  box-sizing: border-box;
}
.orders-prototype .screen-search:focus-within,
.storage-page .screen-search:focus-within {
  border-color: var(--control-hover);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.orders-prototype .screen-search input,
.storage-page .screen-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.orders-prototype .orders-search-icon,
.storage-page .storage-search-icon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: calc(var(--fs-4) + 1px);
  line-height: 1;
}
.orders-prototype .orders-search-submit,
.storage-page .storage-search-submit { display: none; }
.orders-prototype .screen-control,
.storage-page .screen-control {
  display: inline-flex;
  height: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: 0;
  background: var(--panel);
  color: var(--text);
  box-sizing: border-box;
  font: inherit;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}
.orders-prototype .screen-control:hover:not(:disabled),
.storage-page .screen-control:hover:not(:disabled) {
  border-color: var(--control-hover);
  background: var(--panel-soft);
}
.orders-prototype .screen-control:focus-visible,
.storage-page .screen-control:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.orders-prototype .screen-control.is-active,
.storage-page .screen-control.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.orders-prototype .screen-primary-action,
.storage-page .screen-primary-action {
  display: inline-flex;
  height: 40px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin: 0;
  padding: 0 calc(var(--s4) + 1px);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  box-sizing: border-box;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.orders-prototype .screen-primary-action:hover,
.orders-prototype .screen-primary-action:focus-visible,
.storage-page .screen-primary-action:hover,
.storage-page .screen-primary-action:focus-visible {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}
.orders-prototype .orders-sort-form,
.storage-page .storage-sort-form { display: flex; margin: 0; }
.orders-prototype .orders-sort-form .screen-control { min-width: 260px; }
.storage-page .storage-sort-form .screen-control { min-width: 220px; padding-right: var(--s4); }
.storage-page .storage-filter-wrap { position: relative; }
.storage-page .storage-filter-badge { display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 var(--s1); border-radius: 999px;
  color: var(--accent); background: var(--accent-soft); font-size: var(--fs-1);
  font-weight: 800; }
.storage-page .storage-filter-panel { position: absolute; top: calc(100% + var(--s2));
  left: 0; z-index: 45; width: 340px; padding: var(--s4); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); }
.storage-page .storage-filter-panel[hidden] { display: none; }
.storage-page .storage-filter-panel form { display: grid; gap: var(--s3); }
.storage-page .storage-field { display: grid; gap: var(--s1); color: var(--muted);
  font-size: var(--fs-2); }
.storage-page .storage-field input, .storage-page .storage-field select,
.storage-page .storage-demo-field select { width: 100%; min-height: 38px;
  padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius);
  background: var(--panel); color: var(--text); font: var(--font); }
.storage-page .storage-filter-actions { display: flex; justify-content: flex-end;
  padding-top: var(--s3); border-top: 1px solid var(--border); }
.storage-page .storage-demo-field { display: grid; gap: var(--s1); padding: var(--s3);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--panel-soft); color: var(--muted); }
.storage-page .storage-demo-field > div { display: flex; align-items: center;
  justify-content: space-between; gap: var(--s2); font-size: var(--fs-2); }
.storage-page .storage-demo-field small { font-size: var(--fs-1); }
.storage-page .storage-demo-tag { display: inline-flex; align-items: center;
  min-height: 19px; padding: 0 var(--s2); border-radius: 999px;
  background: var(--off-bg); color: var(--off-fg); font-size: var(--fs-1);
  font-weight: 700; }
.storage-page .storage-meta { margin: 0 0 var(--s2); color: var(--muted);
  font-size: var(--fs-3); }
.storage-page .storage-table-card { overflow: hidden; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); }
.storage-page .storage-table-wrap { overflow: auto; }
.storage-page .storage-files-table { display: table; width: 100%; min-width: 1040px;
  border-collapse: collapse; table-layout: auto; }
.storage-page .storage-files-table thead { display: table-header-group; }
.storage-page .storage-files-table tbody { display: table-row-group; }
.storage-page .storage-files-table tr { display: table-row; }
.storage-page .storage-files-table th, .storage-page .storage-files-table td {
  display: table-cell; margin: 0; border: 0; }
.storage-page .storage-files-table th { height: 46px; padding: 0 var(--s3);
  vertical-align: middle; text-align: left; white-space: nowrap;
  color: var(--muted); background: var(--panel-soft); font-size: var(--fs-2);
  font-weight: 700; border-bottom: 1px solid var(--border-strong); }
.storage-page .storage-files-table td { padding: calc(var(--s3) - (var(--s1) / 2)) var(--s3); vertical-align: middle;
  background: var(--panel); border-bottom: 1px solid var(--border); }
.storage-page .storage-files-table tbody tr:last-child td { border-bottom: 0; }
.storage-page .storage-files-table tbody tr:hover > td { background: var(--row-hover); }
.storage-page .storage-files-table tbody tr.is-selected > td { background: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent); }
.storage-page .storage-files-table tbody tr.is-selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 var(--accent),
    inset 0 -1px 0 var(--accent); }
.storage-page .storage-files-table tbody tr.is-selected > td:last-child {
  box-shadow: inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent),
    inset 0 -1px 0 var(--accent); }
.storage-page .storage-check-column { width: 42px; text-align: center !important; }
.storage-page .storage-actions-column { width: 52px; text-align: center !important; }
.storage-page .storage-file-cell { min-width: 240px; }
.storage-page .storage-file-icon { display: inline-grid; place-items: center;
  width: auto; min-width: 28px; height: 28px; padding: 0 var(--s1);
  box-sizing: border-box; flex: 0 0 auto; margin-right: var(--s2);
  white-space: nowrap; text-align: center; vertical-align: middle;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1);
  font-weight: 800; }
.storage-page .storage-file-primary { display: inline-flex; max-width: 280px;
  flex-direction: column; vertical-align: middle; }
.storage-page .storage-file-link, .storage-page .storage-file-name {
  color: var(--accent); font-weight: 650; overflow-wrap: anywhere; }
.storage-page .storage-file-link { text-underline-offset: 3px; }
.storage-page .storage-file-primary small, .storage-page .storage-order-status {
  display: block; color: var(--muted); font-size: var(--fs-1); font-weight: 400; }
.storage-page .storage-direction { white-space: nowrap; }
.storage-page .storage-direction.is-in { color: var(--busy-fg); }
.storage-page .storage-direction.is-out { color: var(--accent); }
.storage-page .storage-client-link { color: var(--text); font-weight: 650;
  text-decoration: none; }
.storage-page .storage-client-link:hover { text-decoration: underline;
  text-underline-offset: 3px; }
.storage-page .storage-order-link { color: var(--accent); font-weight: 750;
  text-underline-offset: 3px; }
.storage-page .storage-type-tag { display: inline-flex; min-height: 25px;
  max-width: 100%; box-sizing: border-box; align-items: center;
  padding: 0 var(--s2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border-radius: var(--radius-sm); background: var(--off-bg); color: var(--off-fg);
  font-size: var(--fs-2); }
.storage-page .storage-type-tag.is-image { background: var(--busy-bg); color: var(--busy-fg); }
.storage-page .storage-type-tag.is-document { background: var(--done-bg); color: var(--done-fg); }
.storage-page .storage-type-tag.is-archive { background: var(--warn-bg); color: var(--warn-fg); }
.storage-page .storage-muted { color: var(--muted); }
.storage-page .storage-nowrap { white-space: nowrap; }
.storage-page .storage-file-actions { position: relative; display: inline-block; }
.storage-page .storage-file-actions summary { display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--radius); cursor: pointer;
  list-style: none; font-size: var(--fs-5); }
.storage-page .storage-file-actions summary::-webkit-details-marker { display: none; }
.storage-page .storage-file-actions summary:hover { background: var(--row-hover); }
.storage-page .storage-file-menu { position: fixed; top: 0; left: 0;
  z-index: 55; width: 210px; padding: var(--s1); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); text-align: left; }
.storage-page .storage-file-menu a, .storage-page .storage-file-menu button {
  display: flex; width: 100%; min-height: 36px; align-items: center;
  justify-content: space-between; gap: var(--s2); padding: var(--s2);
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); font: inherit; text-decoration: none; }
.storage-page .storage-file-menu a:hover, .storage-page .storage-file-menu button:hover:not(:disabled) { background: var(--row-hover); }
.storage-page .storage-file-menu button:disabled { opacity: .65; }
.storage-page .storage-file-menu .is-danger { color: var(--stop-fg); }
.storage-page .storage-file-menu small { display: block; padding: 0 var(--s2) var(--s1);
  color: var(--muted); font-size: var(--fs-1); }
.storage-page .storage-files-table tbody tr.is-menu-open > td { background: var(--row-hover); }
.storage-page .storage-table-footer { display: flex; justify-content: space-between;
  align-items: center; gap: var(--s3); min-height: 58px; padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border); color: var(--muted); }
.storage-page .storage-selection, .storage-page .storage-pages { display: flex;
  align-items: center; gap: var(--s2); flex-wrap: wrap; }
.storage-page .storage-pages a, .storage-page .storage-pages > span { display: grid;
  place-items: center; min-width: 32px; height: 32px; padding: 0 var(--s2);
  border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; }
.storage-page .storage-pages a:hover { background: var(--row-hover); }
.storage-page .storage-pages a.is-active { background: var(--accent-soft);
  color: var(--accent); font-weight: 800; }
.storage-page .storage-pages .is-disabled { opacity: .36; }
.storage-page .storage-danger-button { color: var(--stop-fg); background: var(--stop-bg);
  border-color: var(--stop-fg); }
.storage-page .storage-danger-button:hover:not(:disabled) { background: var(--stop-bg); }
.storage-page .storage-note { margin: var(--s2) var(--s1) 0; color: var(--muted);
  font-size: var(--fs-2); }
.storage-page .storage-empty { padding: var(--s8) var(--s5); text-align: center; }
.storage-page .storage-empty h2 { margin: var(--s2) 0 var(--s1); font-size: var(--fs-5); }
.storage-page .storage-empty p { margin: 0 0 var(--s4); color: var(--muted); }
.storage-page .storage-empty-icon { width: 44px; height: 44px; display: grid;
  place-items: center; margin: 0 auto; border-radius: var(--radius-lg);
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-6); }

.storage-page .storage-upload-dialog, .storage-page .storage-confirm-dialog {
  padding: 0; color: var(--text); background: var(--panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover); }
.storage-page .storage-upload-dialog { width: min(470px, calc(100vw - var(--s8))); }
.storage-page .storage-upload-dialog::backdrop,
.storage-page .storage-confirm-dialog::backdrop { background: var(--scrim); }
.storage-page .storage-upload-dialog header, .storage-page .storage-upload-dialog footer {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  gap: var(--s2); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.storage-page .storage-upload-dialog header { justify-content: flex-start; }
.storage-page .storage-upload-dialog header h2 { margin: 0; font-size: var(--fs-5); }
.storage-page .storage-upload-dialog footer { border-top: 1px solid var(--border);
  border-bottom: 0; }
.storage-page .storage-upload-body { display: grid; gap: var(--s3);
  padding: var(--s4) var(--s5); }
.storage-page .storage-linked-client { color: var(--muted); font-size: var(--fs-3); }
.storage-page .storage-close { position: absolute; top: var(--s3); right: var(--s3);
  width: 34px; height: 34px; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted); font-size: var(--fs-6); cursor: pointer; }
.storage-page .storage-close:hover { background: var(--row-hover); }
.storage-page .storage-confirm-dialog { width: min(420px, calc(100vw - var(--s8)));
  padding: var(--s5); }
.storage-page .storage-confirm-dialog h2 { margin: 0 0 var(--s2); font-size: var(--fs-5); }
.storage-page .storage-confirm-dialog p { color: var(--muted); }
.storage-page .storage-confirm-dialog form > div { display: flex; justify-content: flex-end;
  gap: var(--s2); margin-top: var(--s4); }

.storage-page .storage-manager-backdrop { position: fixed; inset: 0; z-index: 94;
  background: var(--scrim); }
.storage-page .storage-manager-backdrop[hidden] { display: none; }
.storage-page .storage-manager { position: fixed; z-index: 95; top: 0; right: 0;
  bottom: 0; width: min(620px, 94vw); height: 100dvh; display: flex;
  flex-direction: column; background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-hover); transform: translateX(100%);
  transition: transform 110ms ease; visibility: hidden; }
.storage-page .storage-manager.is-open { transform: translateX(0); visibility: visible; }
.storage-page .storage-manager > header { position: relative; padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--border); }
.storage-page .storage-manager > header h2 { margin: 0 var(--s8) var(--s1) 0;
  font-size: var(--fs-6); }
.storage-page .storage-manager > header p { margin: 0; color: var(--muted); }
.storage-page .storage-manager-body { flex: 1 1 auto; min-height: 0;
  overflow: auto; display: grid; align-content: start; gap: var(--s4);
  padding: var(--s5) var(--s6); }
.storage-page .storage-manager > footer { display: flex; justify-content: flex-end;
  padding: var(--s3) var(--s6) var(--s4); border-top: 1px solid var(--border); }
.storage-page .storage-stats { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s2); }
.storage-page .storage-stats > div { display: grid; gap: var(--s1); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-soft); }
.storage-page .storage-stats span { color: var(--muted); font-size: var(--fs-2); }
.storage-page .storage-stats strong { font-size: var(--fs-5); }
.storage-page .storage-backup-state { display: grid; gap: var(--s1); padding: var(--s3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--off-bg);
  color: var(--off-fg); }
.storage-page .storage-backup-state.is-on { background: var(--done-bg); color: var(--done-fg); }
.storage-page .storage-backup-state span { font-size: var(--fs-2); }
.storage-page .storage-purge-form, .storage-page .storage-demo-candidates {
  display: grid; gap: var(--s3); padding: var(--s4); border: 1px solid var(--border);
  border-radius: var(--radius-lg); }
.storage-page .storage-purge-form h3, .storage-page .storage-demo-candidates h3 {
  margin: 0; font-size: var(--fs-5); }
.storage-page .storage-purge-form p, .storage-page .storage-demo-candidates p {
  margin: 0; color: var(--muted); }
.storage-page .storage-demo-candidates { border-style: dashed; background: var(--panel-soft); }
.storage-page .storage-demo-candidates > div { display: flex; align-items: center;
  justify-content: space-between; gap: var(--s2); }

@media (max-width: 980px) {
  .orders-prototype .screen-control-row,
  .storage-page .screen-control-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .orders-prototype .screen-control-left,
  .orders-prototype .screen-control-right,
  .storage-page .screen-control-left,
  .storage-page .screen-control-right,
  .orders-prototype .screen-control-row-primary .screen-control-left > form,
  .storage-page .screen-control-row-primary .screen-control-left > form,
  .orders-prototype .screen-search,
  .storage-page .screen-search {
    width: 100%;
    max-width: none;
  }
  .orders-prototype .orders-quick,
  .storage-page .storage-quick { width: 100%; }
  .orders-prototype .screen-control-right,
  .storage-page .screen-control-right { justify-content: flex-end; }
  .orders-prototype .orders-sort-form,
  .orders-prototype .orders-sort-form label,
  .orders-prototype .orders-sort-form select,
  .storage-page .storage-sort-form,
  .storage-page .storage-sort {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .orders-prototype .screen-control-left,
  .orders-prototype .screen-control-right,
  .storage-page .screen-control-left,
  .storage-page .screen-control-right {
    align-items: stretch;
    flex-direction: column;
  }
  .orders-prototype .screen-primary-action,
  .storage-page .screen-primary-action { width: 100%; }
  .orders-prototype .orders-quick,
  .storage-page .storage-quick {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .orders-prototype .orders-chip,
  .storage-page .storage-chip { justify-content: center; }
  .orders-prototype .orders-filter-anchor,
  .orders-prototype .orders-filter-button,
  .orders-prototype .orders-sort-form,
  .orders-prototype .orders-sort-form label,
  .orders-prototype .orders-sort-form select,
  .storage-page .storage-filter-wrap,
  .storage-page .storage-sort-form,
  .storage-page .storage-sort,
  .storage-page .storage-manage-button { width: 100%; }
}

@media (max-width: 900px) {
  .storage-page .storage-chip { flex: 1 1 auto; }
  .storage-page .storage-filter-panel { position: fixed; z-index: 96;
    top: auto; right: var(--s3); bottom: var(--s3); left: var(--s3);
    width: auto; max-height: 82dvh; overflow: auto; }
  .storage-page .storage-table-wrap { overflow: visible; }
  .storage-page .storage-files-table { display: block; min-width: 0; }
  .storage-page .storage-files-table thead { position: absolute; width: 1px;
    height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .storage-page .storage-files-table tbody { display: grid; gap: var(--s3);
    padding: var(--s3); }
  .storage-page .storage-files-table tr { display: grid; grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .storage-page .storage-files-table td { display: grid; grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--s2); align-items: center; min-width: 0; padding: var(--s2) var(--s3);
    background: var(--panel); border-bottom: 1px solid var(--border); }
  .storage-page .storage-files-table td::before { content: attr(data-label);
    color: var(--muted); font-size: var(--fs-2); font-weight: 600; }
  .storage-page .storage-files-table .storage-file-cell { grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .storage-page .storage-files-table .storage-file-cell::before { display: none; }
  .storage-page .storage-files-table .storage-check-column,
  .storage-page .storage-files-table .storage-actions-column { width: auto;
    text-align: left !important; }
  .storage-page .storage-files-table tbody tr.is-selected > td:first-child {
    box-shadow: inset 0 3px 0 var(--accent); }
  .storage-page .storage-table-footer { align-items: stretch; flex-direction: column; }
  .storage-page .storage-pages { justify-content: center; }
  .storage-page .storage-manager { width: 100vw; }
}

@media (max-width: 560px) {
  .storage-page .storage-files-table tr { grid-template-columns: 1fr; }
  .storage-page .storage-files-table td { grid-template-columns: 104px minmax(0, 1fr); }
  .storage-page .storage-selection { align-items: stretch; flex-direction: column; }
  .storage-page .storage-upload-dialog { width: 100vw; max-width: none;
    height: 100dvh; max-height: none; border: 0; border-radius: 0; }
  .storage-page .storage-upload-dialog form { min-height: 100%; display: flex;
    flex-direction: column; }
  .storage-page .storage-upload-body { flex: 1 1 auto; }
  .storage-page .storage-stats { grid-template-columns: 1fr; }
}

/* КОНЕЦ БЛОКА «ХРАНИЛИЩЕ ФАЙЛОВ» */

/* ============================================================
   КЛИЕНТЫ 13.4.2 — DOM/CSS вкладки V32 на production-данных.
   Ни одно правило блока не действует вне `.clients-page`.
   ============================================================ */

main:has(.clients-page) > h1 {
  order: -4;
  margin: 0 0 calc(var(--s4) - 2px);
}
main:has(.clients-page) > .alarms {
  order: -3;
  margin: 0 0 calc(var(--s5) - 2px);
}
main:has(.clients-page) > .clients-primary-tabs {
  order: -2;
  display: flex;
  gap: 28px;
  margin: calc(var(--s1) - 2px) 0 calc(var(--s5) - 2px);
  padding-left: calc(var(--s1) - 2px);
  border-bottom: 1px solid var(--border);
}
main:has(.clients-page) > .clients-primary-tabs a {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 0 var(--s3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(var(--fs-4) - 1px);
  font-weight: 650;
  text-decoration: none;
}
main:has(.clients-page) > .clients-primary-tabs .on { color: var(--text); }
main:has(.clients-page) > .clients-primary-tabs .on::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.clients-page {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--fs-4) - 1px);
  line-height: 1.4;
}
.clients-page .clients-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.clients-page .clients-viewbar,
.clients-page .clients-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--s3) + 2px);
}
.clients-page .clients-viewbar { padding: 0 0 var(--s1); }
.clients-page .clients-controls {
  position: relative;
  padding: calc(var(--s4) + 2px) 0 calc(var(--s3) + 2px);
}
.clients-page .clients-search-form { flex: 1 1 auto; min-width: 0; }
.clients-page .clients-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: min(440px, 38vw);
  height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
}
.clients-page .clients-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.clients-page .clients-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.clients-page .clients-button,
.clients-page .clients-chip,
.clients-page .clients-sort-form select {
  min-height: 36px;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}
.clients-page .clients-button,
.clients-page .clients-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  text-decoration: none;
  cursor: pointer;
}
.clients-page .clients-viewbar > .clients-button {
  min-height: 40px;
  padding-inline: calc(var(--s4) + 1px);
}
.clients-page .clients-button:hover,
.clients-page .clients-chip:hover { background: var(--row-hover); }
.clients-page .clients-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.clients-page .clients-primary:hover { background: var(--accent-hover); }
.clients-page .clients-controls-left,
.clients-page .clients-quick {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.clients-page .clients-controls-left { flex: 1 1 auto; min-width: 0; }
.clients-page .clients-sort-form { flex: 0 0 auto; margin: 0; }
.clients-page .clients-sort-form select {
  min-width: 280px;
  height: 36px;
  padding: 0 var(--s3);
}
.clients-page .clients-chip { white-space: nowrap; }
.clients-page .clients-chip-dot {
  position: relative;
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted-soft);
  border-radius: 50%;
  background: var(--panel);
}
.clients-page .clients-chip-dot::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  content: "";
}
.clients-page .clients-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.clients-page .clients-chip.is-active .clients-chip-dot { border-color: var(--accent); }
.clients-page .clients-chip.is-active .clients-chip-dot::after { background: var(--accent); }
.clients-page .clients-filter-anchor { display: flex; }
.clients-page .clients-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s2);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 700;
}
.clients-page .clients-filter-panel {
  position: absolute;
  z-index: 45;
  top: 62px;
  left: 0;
  width: 700px;
  max-width: calc(100vw - var(--sidebar-w) - var(--s8));
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}
.clients-page .clients-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: calc(var(--s3) + 2px);
}
.clients-page .clients-filter-head h2 { margin: 0; font-size: var(--fs-4); }
.clients-page .clients-filter-head a {
  display: grid;
  place-items: center;
  width: var(--s7);
  height: var(--s7);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--fs-5);
  text-decoration: none;
}
.clients-page .clients-filter-head a:hover { background: var(--row-hover); }
.clients-page .clients-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.clients-page .clients-filter-grid label,
.clients-page .clients-form-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--s1);
  color: var(--muted);
  font-size: var(--fs-2);
}
.clients-page .clients-filter-grid input,
.clients-page .clients-filter-grid select,
.clients-page .clients-form-grid input {
  width: 100%;
  height: 38px;
  min-width: 0;
  border-color: var(--control);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: var(--font);
}
.clients-page .clients-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: calc(var(--s3) + 2px);
  padding-top: calc(var(--s3) + 2px);
  border-top: 1px solid var(--border);
}
.clients-page .clients-meta {
  margin: 0 0 calc(var(--s2) + 2px);
  color: var(--muted);
  font-size: var(--fs-3);
}
.clients-page .clients-table-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 3px);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.clients-page .clients-table-wrap { overflow: auto; }
.clients-page .clients-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  table-layout: fixed;
}
.clients-page .clients-col-id { width: 6%; }
.clients-page .clients-col-client { width: 23%; }
.clients-page .clients-col-contact { width: 15%; }
.clients-page .clients-col-orders { width: 10%; }
.clients-page .clients-col-active { width: 9%; }
.clients-page .clients-col-paid { width: 11%; }
.clients-page .clients-col-registered { width: 13%; }
.clients-page .clients-col-source { width: 13%; }
.clients-page .clients-table th {
  height: 50px;
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.clients-page .clients-table th:nth-child(4),
.clients-page .clients-table td:nth-child(4),
.clients-page .clients-table th:nth-child(5),
.clients-page .clients-table td:nth-child(5),
.clients-page .clients-table th:nth-child(6),
.clients-page .clients-table td:nth-child(6) { text-align: center; }
.clients-page .clients-table td {
  padding: calc(var(--s3) + 2px) var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: calc(var(--fs-4) - 1px);
  line-height: 1.45;
  vertical-align: middle;
}
.clients-page .clients-table tbody tr { cursor: pointer; }
.clients-page .clients-table tbody tr:last-child td { border-bottom: 0; }
.clients-page .clients-table tbody tr:hover > td { background: var(--row-hover); }
.clients-page .clients-table tbody tr.is-selected > td {
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.clients-page .clients-table tbody tr.is-selected > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent);
}
.clients-page .clients-table tbody tr.is-selected > td:last-child {
  box-shadow: inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent),
              inset 0 -1px 0 var(--accent);
}
.clients-page .clients-client-id { color: var(--accent); font-weight: 800; }
.clients-page .clients-client-main {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}
.clients-page .clients-client-name {
  max-width: 100%;
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-4);
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.clients-page .clients-client-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.clients-page .clients-tags,
.clients-page .clients-drawer-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1);
  width: 100%;
  min-width: 0;
}
.clients-page .clients-tag,
.clients-page .clients-unread,
.clients-page .clients-blocked {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 19px;
  padding: var(--s1) var(--s2);
  border-radius: 5px;
  font-size: var(--fs-1);
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}
.clients-page .clients-tag-1 { background: var(--done-bg); color: var(--done-fg); }
.clients-page .clients-tag-2 { background: var(--warn-bg); color: var(--warn-fg); }
.clients-page .clients-tag-3 { background: var(--busy-bg); color: var(--busy-fg); }
.clients-page .clients-tag-4 { background: var(--stop-bg); color: var(--stop-fg); }
.clients-page .clients-tag-5 { background: var(--accent-soft); color: var(--accent); }
.clients-page .clients-unread { background: var(--busy-bg); color: var(--busy-fg); }
.clients-page .clients-blocked { background: var(--stop-bg); color: var(--stop-fg); }
.clients-page .clients-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 27px;
  padding: 0 var(--s2);
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.clients-page .clients-zero,
.clients-page .clients-date { color: var(--muted); }
.clients-page .clients-money { font-weight: 700; }
.clients-page .clients-source {
  display: inline-flex;
  max-width: 100%;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm);
  background: var(--off-bg);
  color: var(--off-fg);
  font-size: var(--fs-2);
  overflow-wrap: anywhere;
}
.clients-page .clients-empty { padding: var(--s8); text-align: center; }
.clients-page .clients-empty p { margin: var(--s1) 0 var(--s3); color: var(--muted); }
.clients-page .clients-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 58px;
  padding: var(--s3) calc(var(--s3) + 2px);
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.clients-page .clients-pages { display: flex; align-items: center; gap: var(--s1); }
.clients-page .clients-pages a,
.clients-page .clients-pages span {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 var(--s2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
}
.clients-page .clients-pages a:hover { background: var(--row-hover); color: var(--text); }
.clients-page .clients-pages .is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
}
.clients-page .clients-pages .is-disabled { opacity: .45; }
.clients-page .clients-mini-analytics {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: calc(var(--s3) + 2px);
  padding: calc(var(--s3) + 2px) var(--s4);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: calc(var(--radius) + 2px);
  background: var(--accent-soft);
  color: var(--muted);
  box-shadow: var(--shadow);
  font-size: var(--fs-3);
}
.clients-page .clients-mini-analytics strong { color: var(--text); font-size: var(--fs-4); }
.clients-page .clients-mini-analytics i { color: var(--muted-soft); font-style: normal; }
.clients-page .clients-mini-scope { flex-basis: 100%; font-weight: 600; }

.clients-page .clients-overlay,
.clients-page .clients-modal-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: var(--scrim);
}
.clients-page .clients-filter-panel[hidden],
.clients-page .clients-overlay[hidden],
.clients-page .clients-drawer[hidden],
.clients-page .clients-modal-overlay[hidden] { display: none; }
/* ОДИН ВИЗУАЛЬНЫЙ ЯЗЫК — ОДНО ПОВЕДЕНИЕ. У партнёров страница под
   выехавшим ящиком стоит, у клиентов до 13.5 продолжала прокручиваться
   вместе с ним: две соседние вкладки, нарисованные по одному прототипу,
   вели себя по-разному. Модалка создания — то же самое. */
body:has(.clients-page.has-open-drawer) { overflow: hidden; }
.clients-page .clients-drawer {
  position: fixed;
  z-index: 95;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 430px;
  height: 100dvh;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}
.clients-page .clients-drawer-head,
.clients-page .clients-modal-head { position: relative; border-bottom: 1px solid var(--border); }
.clients-page .clients-drawer-head { padding: var(--s6) var(--s6) var(--s4); }
.clients-page .clients-drawer-kicker {
  display: block;
  margin-bottom: var(--s1);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.clients-page .clients-drawer-head h2 { margin: 0 36px 0 0; font-size: var(--fs-6); }
.clients-page .clients-close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  place-items: center;
  width: var(--s7);
  height: var(--s7);
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-6);
  cursor: pointer;
}
.clients-page .clients-close:hover { background: var(--row-hover); }
.clients-page .clients-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s5) var(--s6) var(--s4);
  overflow: auto;
}
.clients-page .clients-drawer-section h3 {
  margin: 0 0 var(--s2);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 500;
}
.clients-page .clients-contact-list { display: flex; flex-direction: column; gap: var(--s2); }
.clients-page .clients-contact-item { display: flex; align-items: flex-start; gap: var(--s2); }
.clients-page .clients-contact-kind { min-width: 74px; color: var(--muted); font-weight: 500; }
.clients-page .clients-contact-blocked { color: var(--stop-fg); font-size: var(--fs-2); }
.clients-page .clients-properties { margin: var(--s4) 0 0; }
.clients-page .clients-properties > div:not(.clients-properties-divider) {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding: var(--s2) 0;
}
.clients-page .clients-properties dt { color: var(--muted); font-size: var(--fs-2); }
.clients-page .clients-properties dd { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.clients-page .clients-properties-divider { height: 1px; margin: var(--s2) 0 var(--s2); background: var(--border); }
.clients-page .clients-active-orders-section { margin-top: var(--s5); }
.clients-page .clients-active-order {
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
}
.clients-page .clients-active-order:first-child { border-top: 0; }
.clients-page .clients-active-order-head { display: flex; justify-content: space-between; gap: var(--s2); }
.clients-page .clients-active-order-head a { color: var(--accent); font-weight: 800; }
.clients-page .clients-order-work { margin-top: var(--s1); font-weight: 600; overflow-wrap: anywhere; }
.clients-page .clients-order-topic,
.clients-page .clients-order-deadline { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-3); }
.clients-page .clients-order-more summary { color: var(--accent); cursor: pointer; font-size: var(--fs-2); }
.clients-page .clients-order-more ul { margin: var(--s1) 0 0; padding-left: var(--s5); }
.clients-page .clients-drawer-foot {
  flex: 0 0 auto;
  padding: var(--s4) var(--s6) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.clients-page .clients-drawer-foot .clients-button { width: 100%; min-height: 40px; }

.clients-page .clients-modal-overlay {
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s5);
}
.clients-page .clients-modal {
  width: min(560px, 96vw);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}
.clients-page .clients-modal-head { padding: var(--s5) var(--s5) var(--s4); }
.clients-page .clients-modal-head h2 { margin: 0; font-size: var(--fs-5); }
.clients-page .clients-modal-head p { margin: var(--s1) var(--s7) 0 0; color: var(--muted); font-size: var(--fs-3); }
.clients-page .clients-modal-body { padding: var(--s4) var(--s5); }
.clients-page .clients-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.clients-page .clients-form-wide { grid-column: 1 / -1; }
.clients-page .clients-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s4);
  border-top: 1px solid var(--border);
}

@media (max-width: 980px) {
  .clients-page .clients-viewbar,
  .clients-page .clients-controls { flex-direction: column; }
  .clients-page .clients-search-form,
  .clients-page .clients-search,
  .clients-page .clients-controls-left,
  .clients-page .clients-sort-form,
  .clients-page .clients-sort-form label,
  .clients-page .clients-sort-form select { width: 100%; max-width: none; }
  .clients-page .clients-filter-panel {
    position: fixed;
    z-index: 96;
    top: auto;
    right: var(--s3);
    bottom: var(--s3);
    left: var(--s3);
    width: auto;
    max-width: none;
    max-height: 82dvh;
    overflow: auto;
  }
  .clients-page .clients-filter-grid { grid-template-columns: 1fr; }
  .clients-page .clients-drawer { width: min(430px, 94vw); }
}

@media (max-width: 760px) {
  .clients-page .clients-viewbar > .clients-button { width: 100%; }
  .clients-page .clients-controls-left,
  .clients-page .clients-quick { width: 100%; }
  .clients-page .clients-quick { display: grid; grid-template-columns: 1fr; }
  .clients-page .clients-chip,
  .clients-page .clients-filter-anchor,
  .clients-page .clients-filter-anchor > .clients-button { width: 100%; }
  .clients-page .clients-table-wrap { overflow: visible; }
  .clients-page .clients-table { display: block; min-width: 0; }
  .clients-page .clients-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .clients-page .clients-table tbody { display: grid; gap: var(--s3); padding: var(--s3); }
  .clients-page .clients-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .clients-page .clients-table td,
  .clients-page .clients-table td:nth-child(4),
  .clients-page .clients-table td:nth-child(5),
  .clients-page .clients-table td:nth-child(6) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s2);
    align-items: center;
    min-width: 0;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    text-align: left;
  }
  .clients-page .clients-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-2);
    font-weight: 600;
  }
  .clients-page .clients-table td:nth-child(1),
  .clients-page .clients-table td:nth-child(2) { grid-column: 1 / -1; }
  .clients-page .clients-table tbody tr.is-selected > td:first-child {
    box-shadow: inset 0 3px 0 var(--accent);
  }
  .clients-page .clients-pagination { align-items: stretch; flex-direction: column; }
  .clients-page .clients-pages { justify-content: center; }
  .clients-page .clients-mini-analytics { align-items: flex-start; flex-direction: column; }
  .clients-page .clients-mini-analytics i { display: none; }
}

@media (max-width: 560px) {
  .clients-page .clients-table tr { grid-template-columns: 1fr; }
  .clients-page .clients-table td,
  .clients-page .clients-table td:nth-child(4),
  .clients-page .clients-table td:nth-child(5),
  .clients-page .clients-table td:nth-child(6) {
    grid-column: 1;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .clients-page .clients-drawer { left: 0; width: auto; }
  .clients-page .clients-properties > div:not(.clients-properties-divider) {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--s3);
  }
  .clients-page .clients-modal-overlay { padding: 0; }
  .clients-page .clients-modal {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .clients-page .clients-modal form { display: flex; min-height: calc(100dvh - 91px); flex-direction: column; }
  .clients-page .clients-modal-body { flex: 1 1 auto; overflow: auto; }
  .clients-page .clients-form-grid { grid-template-columns: 1fr; }
  .clients-page .clients-form-wide { grid-column: 1; }
}

/* КОНЕЦ БЛОКА «КЛИЕНТЫ» */

/* ============================================================
   ПАРТНЁРЫ 13.4.3 — V32-shell на production-данных.
   Ни одно правило блока не действует вне `.partners-page`.
   ============================================================ */

main:has(.partners-page) > h1 {
  order: -4;
  margin: 0 0 calc(var(--s4) - 2px);
}
main:has(.partners-page) > .alarms {
  order: -3;
  margin: 0 0 calc(var(--s5) - 2px);
}
main:has(.partners-page) > .partners-primary-tabs {
  order: -2;
  display: flex;
  gap: 28px;
  margin: calc(var(--s1) - 2px) 0 calc(var(--s5) - 2px);
  padding-left: calc(var(--s1) - 2px);
  border-bottom: 1px solid var(--border);
}
main:has(.partners-page) > .partners-primary-tabs a {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 0 var(--s3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(var(--fs-4) - 1px);
  font-weight: 650;
  text-decoration: none;
}
main:has(.partners-page) > .partners-primary-tabs .on { color: var(--text); }
main:has(.partners-page) > .partners-primary-tabs .on::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.partners-page {
  width: 100%;
  min-width: 0;
  color: var(--text);
  font-size: calc(var(--fs-4) - 1px);
  line-height: 1.4;
}
.partners-page .partners-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.partners-page .partners-viewbar,
.partners-page .partners-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--s3) + 2px);
}
.partners-page .partners-viewbar { padding: 0 0 var(--s1); }
.partners-page .partners-controls {
  position: relative;
  padding: calc(var(--s4) + 2px) 0 calc(var(--s3) + 2px);
}
.partners-page .partners-search-form { flex: 1 1 auto; min-width: 0; }
.partners-page .partners-search {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: min(440px, 38vw);
  height: 40px;
  padding: 0 var(--s3);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
}
.partners-page .partners-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.partners-page .partners-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.partners-page .partners-button,
.partners-page .partners-chip,
.partners-page .partners-sort-form select {
  min-height: 36px;
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 600;
}
.partners-page .partners-button,
.partners-page .partners-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  text-decoration: none;
  cursor: pointer;
}
.partners-page .partners-button:hover,
.partners-page .partners-chip:not(:disabled):hover { background: var(--row-hover); }
.partners-page .partners-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.partners-page .partners-primary:hover { background: var(--accent-hover); }
.partners-page .partners-button:focus-visible,
.partners-page .partners-chip:focus-visible,
.partners-page .partners-sort-form select:focus-visible,
.partners-page .partners-table tr:focus-visible,
.partners-page .partners-close:focus-visible,
.partners-page .partners-referrals summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.partners-page .partners-controls-left,
.partners-page .partners-quick {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.partners-page .partners-controls-left { flex: 1 1 auto; min-width: 0; }
.partners-page .partners-sort-form { flex: 0 0 auto; margin: 0; }
.partners-page .partners-sort-form select {
  min-width: 280px;
  height: 36px;
  padding: 0 var(--s3);
}
.partners-page .partners-chip { white-space: nowrap; }
.partners-page .partners-chip-dot {
  position: relative;
  display: inline-block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--muted-soft);
  border-radius: 50%;
  background: var(--panel);
}
.partners-page .partners-chip-dot::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: transparent;
  content: "";
}
.partners-page .partners-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.partners-page .partners-chip.is-active .partners-chip-dot { border-color: var(--accent); }
.partners-page .partners-chip.is-active .partners-chip-dot::after { background: var(--accent); }
.partners-page .partners-demo-chip { opacity: .62; cursor: not-allowed; }
.partners-page .partners-demo-tag {
  padding: 0 var(--s1);
  border-radius: 5px;
  background: var(--off-bg);
  color: var(--off-fg);
  font-size: var(--fs-1);
  font-weight: 700;
}
.partners-page .partners-filter-anchor { display: flex; }
.partners-page .partners-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s2);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 700;
}
.partners-page .partners-filter-panel {
  position: absolute;
  z-index: 45;
  top: 62px;
  left: 0;
  width: 700px;
  max-width: calc(100vw - var(--sidebar-w) - var(--s8));
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}
.partners-page .partners-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: calc(var(--s3) + 2px);
}
.partners-page .partners-filter-head h2 { margin: 0; font-size: var(--fs-4); }
.partners-page .partners-filter-head a {
  display: grid;
  place-items: center;
  width: var(--s7);
  height: var(--s7);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--fs-5);
  text-decoration: none;
}
.partners-page .partners-filter-head a:hover { background: var(--row-hover); }
.partners-page .partners-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.partners-page .partners-filter-grid label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--s1);
  color: var(--muted);
  font-size: var(--fs-2);
}
.partners-page .partners-filter-grid input {
  width: 100%;
  height: 38px;
  min-width: 0;
  border-color: var(--control);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: var(--font);
}
.partners-page .partners-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: calc(var(--s3) + 2px);
  padding-top: calc(var(--s3) + 2px);
  border-top: 1px solid var(--border);
}
.partners-page .partners-meta {
  margin: 0 0 calc(var(--s2) + 2px);
  color: var(--muted);
  font-size: var(--fs-3);
}
.partners-page .partners-table-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 3px);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.partners-page .partners-table-wrap { overflow: auto; }
.partners-page .partners-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}
.partners-page .partners-col-id { width: 9%; }
.partners-page .partners-col-name { width: 18%; }
.partners-page .partners-col-total { width: 12%; }
.partners-page .partners-col-l1 { width: 9%; }
.partners-page .partners-col-l2 { width: 9%; }
.partners-page .partners-col-earned { width: 15%; }
.partners-page .partners-col-pending { width: 13%; }
.partners-page .partners-col-available { width: 15%; }
.partners-page .partners-table th {
  height: 50px;
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.partners-page .partners-table th:nth-child(n+3),
.partners-page .partners-table td:nth-child(n+3) { text-align: center; }
.partners-page .partners-table td {
  padding: calc(var(--s3) + 2px) var(--s3);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: calc(var(--fs-4) - 1px);
  line-height: 1.45;
  vertical-align: middle;
}
.partners-page .partners-table tbody tr { cursor: pointer; }
.partners-page .partners-table tbody tr:last-child td { border-bottom: 0; }
.partners-page .partners-table tbody tr:hover > td { background: var(--row-hover); }
.partners-page .partners-table tbody tr.is-selected > td {
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.partners-page .partners-table tbody tr.is-selected > td:first-child {
  box-shadow: inset 2px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.partners-page .partners-table tbody tr.is-selected > td:last-child {
  box-shadow: inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);
}
.partners-page .partners-record-id { color: var(--accent); font-weight: 800; }
.partners-page .partners-name {
  display: inline-block;
  max-width: 100%;
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.partners-page .partners-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.partners-page .partners-money { white-space: nowrap; }
.partners-page .partners-money.is-pending { color: var(--warn-fg); }
.partners-page .partners-money.is-available { color: var(--done-fg); font-weight: 700; }
.partners-page .partners-empty { padding: var(--s8); text-align: center; }
.partners-page .partners-empty p { margin: var(--s1) 0 var(--s3); color: var(--muted); }
.partners-page .partners-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 58px;
  padding: var(--s3) calc(var(--s3) + 2px);
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.partners-page .partners-pages { display: flex; align-items: center; gap: var(--s1); }
.partners-page .partners-pages a,
.partners-page .partners-pages span {
  display: inline-grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 var(--s2);
  border-radius: var(--radius-sm);
  color: var(--muted);
  text-decoration: none;
}
.partners-page .partners-pages a:hover { background: var(--row-hover); color: var(--text); }
.partners-page .partners-pages .is-current { background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.partners-page .partners-pages .is-disabled { opacity: .45; }
.partners-page .partners-mini-analytics {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: calc(var(--s3) + 2px);
  padding: calc(var(--s3) + 2px) var(--s4);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  border-radius: calc(var(--radius) + 2px);
  background: var(--accent-soft);
  color: var(--muted);
  box-shadow: var(--shadow);
  font-size: var(--fs-3);
}
.partners-page .partners-mini-analytics strong { color: var(--text); font-size: var(--fs-4); }
.partners-page .partners-mini-analytics i { color: var(--muted-soft); font-style: normal; }
.partners-page .partners-mini-scope { flex-basis: 100%; font-weight: 600; }

.partners-page .partners-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  background: var(--scrim);
}
.partners-page .partners-filter-panel[hidden],
.partners-page .partners-overlay[hidden],
.partners-page .partners-drawer[hidden] { display: none; }
body:has(.partners-page.has-open-drawer) { overflow: hidden; }
.partners-page .partners-drawer {
  position: fixed;
  z-index: 95;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 430px;
  height: 100dvh;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}
.partners-page .partners-drawer-head {
  position: relative;
  padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--border);
}
.partners-page .partners-drawer-kicker {
  display: block;
  margin-bottom: var(--s1);
  color: var(--accent);
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.partners-page .partners-drawer-head h2 { margin: 0 36px 0 0; font-size: var(--fs-6); overflow-wrap: anywhere; }
.partners-page .partners-close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  place-items: center;
  width: var(--s7);
  height: var(--s7);
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-6);
  cursor: pointer;
}
.partners-page .partners-close:hover { background: var(--row-hover); }
.partners-page .partners-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s5) var(--s6) var(--s4);
  overflow: auto;
}
.partners-page .partners-properties { margin: 0; }
.partners-page .partners-properties > div:not(.partners-properties-divider) {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding: var(--s2) 0;
}
.partners-page .partners-properties dt { color: var(--muted); font-size: var(--fs-2); }
.partners-page .partners-properties dd { min-width: 0; margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.partners-page .partners-properties-divider { height: 1px; margin: var(--s2) 0 var(--s2); background: var(--border); }
.partners-page .partners-referrals {
  margin-top: var(--s5);
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}
.partners-page .partners-referrals summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
  list-style: none;
}
.partners-page .partners-referrals summary::-webkit-details-marker { display: none; }
.partners-page .partners-referrals summary span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 var(--s2);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.partners-page .partners-referral-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}
.partners-page .partners-referral-item:last-child { border-bottom: 0; }
.partners-page .partners-referral-level {
  display: inline-grid;
  place-items: center;
  height: 26px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: 800;
}
.partners-page .partners-referral-item div { display: flex; min-width: 0; flex-direction: column; gap: var(--s1); }
.partners-page .partners-referral-item strong { overflow-wrap: anywhere; }
.partners-page .partners-referral-item div span { color: var(--muted); font-size: var(--fs-2); }
.partners-page .partners-zero { color: var(--muted); }
.partners-page .partners-drawer-foot {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s4) var(--s6) var(--s5);
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.partners-page .partners-drawer-foot .partners-button { width: 100%; min-height: 40px; }
.partners-page .partners-drawer-foot [hidden] { display: none; }

@media (max-width: 980px) {
  .partners-page .partners-viewbar,
  .partners-page .partners-controls { flex-direction: column; }
  .partners-page .partners-search-form,
  .partners-page .partners-search,
  .partners-page .partners-controls-left,
  .partners-page .partners-sort-form,
  .partners-page .partners-sort-form label,
  .partners-page .partners-sort-form select { width: 100%; max-width: none; }
  .partners-page .partners-filter-panel {
    position: fixed;
    z-index: 96;
    top: auto;
    right: var(--s3);
    bottom: var(--s3);
    left: var(--s3);
    width: auto;
    max-width: none;
    max-height: 82dvh;
    overflow: auto;
  }
  .partners-page .partners-drawer { width: min(430px, 94vw); }
}

@media (max-width: 760px) {
  .partners-page .partners-controls-left,
  .partners-page .partners-quick { width: 100%; }
  .partners-page .partners-quick { display: grid; grid-template-columns: 1fr; }
  .partners-page .partners-chip,
  .partners-page .partners-filter-anchor,
  .partners-page .partners-filter-anchor > .partners-button { width: 100%; }
  .partners-page .partners-filter-grid { grid-template-columns: 1fr; }
  .partners-page .partners-table-wrap { overflow: visible; }
  .partners-page .partners-table { display: block; min-width: 0; }
  .partners-page .partners-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .partners-page .partners-table tbody { display: grid; gap: var(--s3); padding: var(--s3); }
  .partners-page .partners-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .partners-page .partners-table td,
  .partners-page .partners-table td:nth-child(n+3) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--s2);
    align-items: center;
    min-width: 0;
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    text-align: left;
  }
  .partners-page .partners-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--fs-2);
    font-weight: 600;
  }
  .partners-page .partners-table td:nth-child(1),
  .partners-page .partners-table td:nth-child(2) { grid-column: 1 / -1; }
  .partners-page .partners-table tbody tr.is-selected > td:first-child { box-shadow: inset 0 3px 0 var(--accent); }
  .partners-page .partners-pagination { align-items: stretch; flex-direction: column; }
  .partners-page .partners-pages { justify-content: center; }
  .partners-page .partners-mini-analytics { align-items: flex-start; flex-direction: column; }
  .partners-page .partners-mini-analytics i { display: none; }
}

@media (max-width: 560px) {
  .partners-page .partners-table tr { grid-template-columns: 1fr; }
  .partners-page .partners-table td,
  .partners-page .partners-table td:nth-child(n+3) {
    grid-column: 1;
    grid-template-columns: 112px minmax(0, 1fr);
  }
  .partners-page .partners-drawer { left: 0; width: auto; }
  .partners-page .partners-properties > div:not(.partners-properties-divider) {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: var(--s3);
  }
}

/* КОНЕЦ БЛОКА «ПАРТНЁРЫ» */

/* ============================================================
   НАСТРОЙКИ V6.3 (13.6.2). Весь блок изолирован маршрутом.
   ============================================================ */
.settings-page {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-bottom: calc(64px + var(--s8));
}

.settings-page .settings-errors {
  margin-bottom: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--stop-fg);
  border-radius: var(--radius);
  background: var(--stop-bg);
  color: var(--stop-fg);
}

.settings-page .settings-errors ul { margin: var(--s2) 0 0; }

.settings-page .settings-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 50px;
  margin-bottom: var(--s5);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.settings-page .settings-tab {
  min-width: 0;
  min-height: 50px;
  padding: var(--s3) var(--s4);
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.settings-page .settings-tab:last-child { border-right: 0; }

.settings-page .settings-tab:hover {
  background: var(--panel-soft);
  color: var(--text);
}

.settings-page .settings-tab.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.settings-page .settings-tab:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.settings-page .settings-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.settings-page .settings-panel[hidden] { display: none; }

.settings-page .settings-panel-header {
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.settings-page .settings-panel-header h2,
.settings-page .settings-panel-header p,
.settings-page .settings-zone-header h3,
.settings-page .settings-savebar p { margin: 0; }

.settings-page .settings-panel-header h2 {
  font-size: var(--fs-6);
  line-height: 1.2;
}

.settings-page .settings-panel-header p {
  margin-top: var(--s1);
  color: var(--muted);
  font-size: var(--fs-3);
}

.settings-page .settings-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s5);
  padding: var(--s4) var(--s6) var(--s6);
}

.settings-page .settings-span-4 { grid-column: span 4; }
.settings-page .settings-span-5 { grid-column: span 5; }
.settings-page .settings-span-6 { grid-column: span 6; }
.settings-page .settings-span-7 { grid-column: span 7; }
.settings-page .settings-span-8 { grid-column: span 8; }
.settings-page .settings-span-12 { grid-column: span 12; }

.settings-page .settings-zone {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-page .settings-zone-header {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 50px;
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}

.settings-page .settings-zone-marker {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.settings-page .settings-zone-header h3 {
  font-size: var(--fs-5);
  line-height: 1.25;
}

.settings-page .settings-zone-body {
  min-width: 0;
  padding: var(--s5);
}

.settings-page .settings-zone-body-compact {
  padding-bottom: var(--s4);
}

.settings-page .settings-columns {
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.settings-page .settings-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-page .settings-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-page .settings-columns-4 { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }

.settings-page .settings-field {
  min-width: 0;
  margin-bottom: var(--s3);
}

.settings-page .settings-field:last-child { margin-bottom: 0; }

.settings-page .settings-field > label,
.settings-page .settings-stars legend,
.settings-page .settings-radio-stack legend,
.settings-page .settings-theme-options legend {
  display: block;
  margin-bottom: var(--s2);
  color: var(--text);
  font-size: var(--fs-3);
  font-weight: 600;
}

.settings-page .settings-field input,
.settings-page .settings-field select,
.settings-page .settings-field textarea {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.settings-page .settings-field textarea { min-height: 88px; resize: vertical; }

.settings-page .settings-field input:hover,
.settings-page .settings-field select:hover,
.settings-page .settings-field textarea:hover { border-color: var(--control-hover); }

.settings-page .settings-field input:focus,
.settings-page .settings-field select:focus,
.settings-page .settings-field textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.settings-page .settings-help {
  margin: var(--s1) 0 0;
  color: var(--muted);
  font-size: var(--fs-3);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.settings-page .settings-number-control {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

.settings-page .settings-number-control input { min-width: 0; }

.settings-page .settings-number-control span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-3);
  white-space: nowrap;
}

.settings-page .settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-width: 0;
  margin-bottom: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}

.settings-page .settings-toggle-row > div { min-width: 0; }
.settings-page .settings-toggle-row label { font-weight: 600; }

.settings-page .settings-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid var(--control);
  border-radius: var(--s4);
  background: var(--panel-soft);
  cursor: pointer;
}

.settings-page .settings-toggle::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
}

.settings-page .settings-toggle:checked {
  border-color: var(--accent);
  background: var(--accent);
}

.settings-page .settings-toggle:checked::after {
  left: 23px;
  background: var(--on-accent);
}

.settings-page .settings-toggle[aria-disabled="true"] {
  border-color: var(--border-strong);
  cursor: not-allowed;
  opacity: .72;
}

.settings-page .settings-locked-control {
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.settings-page .settings-theme-options,
.settings-page .settings-radio-stack,
.settings-page .settings-stars {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-page .settings-theme-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s2);
}

.settings-page .settings-theme-options legend { grid-column: 1 / -1; }

.settings-page .settings-theme-options label,
.settings-page .settings-radio-stack label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  cursor: pointer;
}

.settings-page .settings-theme-options label:has(input:checked),
.settings-page .settings-radio-stack label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.settings-page .settings-radio-stack {
  display: grid;
  gap: var(--s2);
  margin-bottom: 0;
}

.settings-page .settings-stars > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.settings-page .settings-stars label {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--muted-soft);
  cursor: pointer;
}

.settings-page .settings-stars input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.settings-page .settings-stars label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.settings-page .settings-stars label:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.settings-page .settings-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.settings-page .settings-provider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3);
  border-bottom: 1px solid var(--border);
}

.settings-page .settings-provider-row strong {
  color: var(--muted);
  font-size: var(--fs-3);
  font-weight: 500;
}

.settings-page .settings-logo-block {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.settings-page .settings-logo-preview {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: 1.3;
  text-align: center;
}

.settings-page .settings-logo-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.settings-page .settings-logo-preview [hidden] { display: none; }

.settings-page .settings-logo-controls {
  display: grid;
  min-width: 0;
  gap: var(--s2);
}

.settings-page .settings-logo-controls > label { font-weight: 600; }
.settings-page .settings-logo-controls input[type="file"] { min-width: 0; width: 100%; }
.settings-page .settings-logo-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.settings-page .settings-logo-actions button { min-height: 44px; }
.settings-page .settings-logo-message { min-height: 20px; margin: 0; font-size: var(--fs-3); }
.settings-page .settings-logo-message[data-state="error"] { color: var(--stop-fg); }
.settings-page .settings-logo-message[data-state="ok"] { color: var(--accent); }

.settings-page .settings-legal-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--s4);
}

.settings-page .settings-legal-links .settings-field,
.settings-page .settings-legal-links input { min-width: 0; }

.settings-page .is-disabled {
  color: var(--muted);
  opacity: .62;
}

.settings-page .is-disabled input,
.settings-page .is-disabled select,
.settings-page .is-disabled textarea {
  border-color: var(--border);
  background: var(--panel-soft);
  cursor: not-allowed;
}

.settings-page .settings-reminders-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.settings-page .settings-secondary-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--control);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.settings-page .settings-secondary-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.settings-page .settings-inline-submit {
  padding: 0 var(--s6) var(--s6);
}

.settings-page.is-enhanced .settings-inline-submit { display: none; }

.settings-page .settings-savebar {
  position: fixed;
  z-index: 40;
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 64px;
  margin: 0;
  padding: var(--s2) var(--s5);
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: var(--panel);
  box-shadow: var(--shadow-hover);
}

.settings-page .settings-savebar[hidden] { display: none; }
.settings-page .settings-savebar p { display: grid; gap: var(--s1); min-width: 0; }
.settings-page .settings-savebar p span { color: var(--muted); font-size: var(--fs-3); }
.settings-page .settings-savebar > div { display: flex; gap: var(--s2); }
.settings-page .settings-savebar button { min-height: 44px; padding: var(--s2) var(--s5); }

@media (max-width: 1180px) {
  .settings-page .settings-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
  }
  .settings-page .settings-span-4,
  .settings-page .settings-span-5,
  .settings-page .settings-span-7,
  .settings-page .settings-span-8 { grid-column: span 6; }
  .settings-page .settings-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-page .settings-theme-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-page .settings-legal-links { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .settings-page .settings-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-page .settings-grid { padding: var(--s4); }
  .settings-page .settings-panel-header { padding: var(--s4); }
  .settings-page .settings-span-4,
  .settings-page .settings-span-5,
  .settings-page .settings-span-6,
  .settings-page .settings-span-7,
  .settings-page .settings-span-8 { grid-column: span 12; }
  .settings-page .settings-columns-3,
  .settings-page .settings-columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .settings-page .settings-savebar { left: 0; }
}

@media (max-width: 560px) {
  .settings-page { padding-bottom: calc(132px + var(--s4)); }
  .settings-page .settings-tab { min-height: 52px; padding: var(--s2); }
  .settings-page .settings-grid { gap: var(--s3); padding: var(--s3); }
  .settings-page .settings-zone-body { padding: var(--s4); }
  .settings-page .settings-columns-2,
  .settings-page .settings-columns-3,
  .settings-page .settings-columns-4,
  .settings-page .settings-theme-options { grid-template-columns: minmax(0, 1fr); }
  .settings-page .settings-reminders-link,
  .settings-page .settings-savebar { align-items: stretch; flex-direction: column; }
  .settings-page .settings-secondary-action { width: 100%; text-align: center; }
  .settings-page .settings-savebar { left: 0; bottom: 0; min-height: 0; margin: 0; }
  .settings-page .settings-savebar > div { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-page .settings-savebar button { width: 100%; }
  .settings-page .settings-logo-block { grid-template-columns: minmax(0, 1fr); }
  .settings-page .settings-logo-preview { width: 96px; height: 96px; }
  .settings-page .settings-logo-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .settings-page .settings-logo-actions button { width: 100%; }
}

/* КОНЕЦ БЛОКА «НАСТРОЙКИ V6.3» */

/* -------------------------------------------------------------------------
   КАРТОЧКИ КЛИЕНТА И ПАРТНЁРА
   Общая production-оболочка V18/V12. Селекторы намеренно замкнуты на
   страницу: другие карточки и таблицы CRM от этого блока не меняются.
   ------------------------------------------------------------------------- */
:is(.client-card-page, .partner-card-page) {
  display: grid;
  gap: var(--s4);
  max-width: 1540px;
  min-width: 0;
  padding-bottom: var(--s8);
}
:is(.client-card-page, .partner-card-page) .card-page-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-breadcrumb {
  width: max-content; max-width: 100%; color: var(--accent); font-weight: 700;
  overflow-wrap: anywhere;
}
:is(.client-card-page, .partner-card-page) .card-page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4);
}
:is(.client-card-page, .partner-card-page) .card-page-header h1 {
  margin: 0; font-size: var(--fs-7); line-height: 1.15; overflow-wrap: anywhere;
}
:is(.client-card-page, .partner-card-page) .card-page-kicker {
  margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-3); font-weight: 700;
}
:is(.client-card-page, .partner-card-page) .card-page-alert {
  border: 1px solid var(--border); border-left: 4px solid var(--warn-fg);
  border-radius: var(--radius-lg); background: var(--warn-bg); color: var(--text);
  padding: var(--s3) var(--s4);
}
:is(.client-card-page, .partner-card-page) .card-page-alert.stop {
  border-left-color: var(--stop-fg); background: var(--stop-bg);
}
:is(.client-card-page, .partner-card-page) .card-page-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow);
}
:is(.client-card-page, .partner-card-page) .card-page-kpi {
  display: grid; min-height: 84px; place-content: center; gap: var(--s1);
  border: 0; border-left: 1px solid var(--border); background: var(--panel);
  color: var(--text); padding: var(--s3) var(--s4); text-align: center;
}
:is(.client-card-page, .partner-card-page) .card-page-kpi:first-child { border-left: 0; }
:is(.client-card-page, .partner-card-page) button.card-page-kpi { cursor: pointer; }
:is(.client-card-page, .partner-card-page) button.card-page-kpi:hover { background: var(--row-hover); }
:is(.client-card-page, .partner-card-page) .card-page-kpi strong {
  font-size: var(--fs-6); line-height: 1.1; overflow-wrap: anywhere;
}
:is(.client-card-page, .partner-card-page) .card-page-kpi span {
  color: var(--muted); font-size: var(--fs-3); font-weight: 600;
}
:is(.client-card-page, .partner-card-page) .card-page-tabs {
  display: flex; align-items: center; gap: var(--s2); min-width: 0; overflow-x: auto;
  overflow-y: hidden; scrollbar-width: none;
  border-bottom: 1px solid var(--border); padding: 0 var(--s1);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs::-webkit-scrollbar { display: none; }
:is(.client-card-page, .partner-card-page) .card-page-tabs-row {
  display: flex; align-items: flex-end; gap: var(--s3);
  border-bottom: 1px solid var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs-row .card-page-tabs {
  flex: 1 1 auto; border-bottom: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-panel { min-width: 0; }
:is(.client-card-page, .partner-card-page) .card-page-tabs button {
  position: relative; flex: 0 0 auto; border: 0; border-bottom: 0; border-radius: 0;
  background: transparent; color: var(--muted); cursor: pointer;
  font-weight: 700; padding: var(--s2) var(--s2) var(--s3);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs button[aria-selected="true"] {
  color: var(--text);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs button[aria-selected="true"]::after {
  position: absolute; right: 0; bottom: -1px; left: 0; height: 2px;
  border-radius: 0; background: var(--accent); content: "";
}
:is(.client-card-page, .partner-card-page) .card-page-tabs button:hover { color: var(--text); }
:is(.client-card-page, .partner-card-page) .card-page-related-link {
  flex: 0 0 auto; color: var(--accent); font-weight: 700;
  padding: var(--s2) var(--s2) var(--s3); text-decoration: none;
}
:is(.client-card-page, .partner-card-page) .card-page-related-link:hover { text-decoration: underline; }
:is(.client-card-page, .partner-card-page) .card-page-zone {
  min-width: 0; overflow: hidden; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow);
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header {
  display: flex; align-items: center; min-height: 48px; padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header::before {
  content: ""; width: var(--s2); height: var(--s2); flex: 0 0 auto;
  margin-right: var(--s2); border-radius: 50%; background: var(--accent);
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header h2 {
  margin: 0; font-size: var(--fs-4);
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header p {
  margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) [hidden] { display: none !important; }
:is(.client-card-page, .partner-card-page) .card-page-zone-body { padding: var(--s4); }
:is(.client-card-page, .partner-card-page) .card-page-stack { display: grid; gap: var(--s4); min-width: 0; }
.client-card-page .client-card-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: var(--s4); align-items: start;
}
.partner-card-page .partner-card-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4); align-items: start;
}
:is(.client-card-page, .partner-card-page) .card-page-properties { display: grid; margin: 0; }
:is(.client-card-page, .partner-card-page) .card-page-properties > div,
:is(.client-card-page, .partner-card-page) .card-page-edit-field {
  display: grid; grid-template-columns: minmax(132px, .7fr) minmax(0, 1.3fr);
  gap: var(--s3); align-items: center; padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-properties > div:last-child { border-bottom: 0; }
:is(.client-card-page, .partner-card-page) .card-page-properties dt,
:is(.client-card-page, .partner-card-page) .card-page-edit-field > span {
  color: var(--muted); font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-properties dd { min-width: 0; margin: 0; font-weight: 650; overflow-wrap: anywhere; }
:is(.client-card-page, .partner-card-page) .card-page-editable-value,
:is(.client-card-page, .partner-card-page) .card-page-inline-display {
  display: flex; min-width: 0; align-items: center; gap: var(--s2);
}
:is(.client-card-page, .partner-card-page) .card-page-inline-display > span { min-width: 0; overflow-wrap: anywhere; }
:is(.client-card-page, .partner-card-page) .card-page-inline-editor { width: 100%; flex-wrap: nowrap; }
:is(.client-card-page, .partner-card-page) .card-page-inline-form,
:is(.client-card-page, .partner-card-page) .card-page-action-form,
:is(.client-card-page, .partner-card-page) .card-page-grant {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-inline-form input,
:is(.client-card-page, .partner-card-page) .card-page-inline-form select,
:is(.client-card-page, .partner-card-page) .card-page-action-form input,
:is(.client-card-page, .partner-card-page) .card-page-grant input,
:is(.client-card-page, .partner-card-page) .card-page-grant select,
:is(.client-card-page, .partner-card-page) .card-page-form-stack input,
:is(.client-card-page, .partner-card-page) .card-page-form-stack textarea,
:is(.client-card-page, .partner-card-page) .card-page-compose textarea {
  max-width: 100%; border-color: var(--border-strong); background: var(--panel);
}
:is(.client-card-page, .partner-card-page) .card-page-inline-form input[type="text"] {
  box-sizing: border-box; height: 36px; min-height: 36px; min-width: 0; flex: 1 1 144px;
  border: 1px solid var(--control); border-radius: var(--radius); padding: 0 var(--s3);
  background: var(--panel); color: var(--text); font: inherit; line-height: 1.2;
}
:is(.client-card-page, .partner-card-page) .card-page-inline-form button,
:is(.client-card-page, .partner-card-page) .card-page-action-form button,
:is(.client-card-page, .partner-card-page) .card-page-grant button,
:is(.client-card-page, .partner-card-page) .card-page-compose button {
  min-height: 36px; border-color: var(--accent); background: var(--accent);
  color: var(--on-accent);
}
:is(.client-card-page, .partner-card-page) .card-page-secondary,
:is(.client-card-page, .partner-card-page) .card-page-copy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  color: var(--accent); padding: var(--s1) var(--s3); font-weight: 700; text-decoration: none;
}
:is(.client-card-page, .partner-card-page) .card-page-secondary:hover,
:is(.client-card-page, .partner-card-page) .card-page-copy:hover { background: var(--row-hover); }
:is(.client-card-page, .partner-card-page) .card-page-action-row { margin: var(--s3) 0 0; }
:is(.client-card-page, .partner-card-page) .card-page-icon-action {
  display: inline-grid; width: 32px; min-width: 32px; height: 32px; min-height: 32px;
  flex: 0 0 32px; place-items: center; border: 1px solid transparent;
  border-radius: var(--radius); padding: 0; background: transparent; color: var(--accent);
  font-size: var(--fs-4); font-weight: 800; line-height: 1; cursor: pointer;
}
:is(.client-card-page, .partner-card-page) .card-page-icon-action:hover { border-color: var(--border); background: var(--row-hover); }
:is(.client-card-page, .partner-card-page) .card-page-icon-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:is(.client-card-page, .partner-card-page) .card-page-icon-action:active { transform: translateY(1px); }
:is(.client-card-page, .partner-card-page) .card-page-icon-action:disabled { opacity: .5; cursor: default; }
:is(.client-card-page, .partner-card-page) .card-page-header-action { margin-left: auto; }
:is(.client-card-page, .partner-card-page) .card-page-action-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
:is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action {
  width: 36px; min-width: 36px; height: 36px; min-height: 36px; flex-basis: 36px;
  border-color: var(--border); border-radius: var(--radius); padding: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action.is-confirm { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
:is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action.is-cancel { background: var(--panel); color: var(--muted); }
:is(.client-card-page, .partner-card-page) .card-page-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }
:is(.client-card-page, .partner-card-page) .card-page-help {
  margin: 0 0 var(--s3); color: var(--muted); font-size: var(--fs-3); overflow-wrap: anywhere;
}
:is(.client-card-page, .partner-card-page) .card-page-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
:is(.client-card-page, .partner-card-page) .card-page-tag {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 28px;
  border: 0; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent);
  padding: var(--s1) var(--s2); font-size: var(--fs-3); font-weight: 700;
}
:is(.client-card-page, .partner-card-page) .card-page-tag button {
  border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-tag-remove {
  display: inline-grid; width: 22px; height: 22px; place-items: center;
  margin: -4px -4px -4px 0; border-radius: 50%; opacity: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-tag:hover .card-page-tag-remove,
:is(.client-card-page, .partner-card-page) .card-page-tag:focus-within .card-page-tag-remove,
:is(.client-card-page, .partner-card-page) .card-page-tag-remove:focus-visible { opacity: 1; }
:is(.client-card-page, .partner-card-page) .card-page-tag-remove:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
:is(.client-card-page, .partner-card-page) .card-page-tag-editor { margin-top: var(--s3); }
:is(.client-card-page, .partner-card-page) .card-page-contacts { display: grid; }
:is(.client-card-page, .partner-card-page) .card-page-contact {
  display: grid; grid-template-columns: minmax(80px, .55fr) minmax(0, 1fr) auto;
  gap: var(--s2); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-contact:last-child { border-bottom: 0; }
:is(.client-card-page, .partner-card-page) .card-page-contact > span { color: var(--muted); font-size: var(--fs-3); }
:is(.client-card-page, .partner-card-page) .card-page-contact strong { min-width: 0; overflow-wrap: anywhere; }
:is(.client-card-page, .partner-card-page) .card-page-contact > div { display: flex; align-items: center; gap: var(--s1); }
:is(.client-card-page, .partner-card-page) .card-page-state {
  display: inline-flex; align-items: center; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent); padding: var(--s1) var(--s2);
  font-size: var(--fs-2); font-weight: 700; white-space: nowrap;
}
:is(.client-card-page, .partner-card-page) .card-page-state.stop { background: var(--stop-bg); color: var(--stop-fg); }
:is(.client-card-page, .partner-card-page) .card-page-form-stack { display: grid; gap: var(--s3); }
:is(.client-card-page, .partner-card-page) .card-page-form-stack label,
:is(.client-card-page, .partner-card-page) .card-page-action-form label,
:is(.client-card-page, .partner-card-page) .card-page-grant label {
  display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-3); font-weight: 650;
}
:is(.client-card-page, .partner-card-page) .card-page-form-stack textarea,
:is(.client-card-page, .partner-card-page) .card-page-compose textarea { width: 100%; resize: vertical; }
:is(.client-card-page, .partner-card-page) .card-page-table-wrap { overflow: auto; }
:is(.client-card-page, .partner-card-page) .card-page-table { width: 100%; min-width: 720px; border-collapse: collapse; }
:is(.client-card-page, .partner-card-page) .card-page-table th {
  background: var(--panel-soft); color: var(--muted); font-size: var(--fs-3);
  padding: var(--s3); text-align: left; white-space: nowrap;
}
:is(.client-card-page, .partner-card-page) .card-page-table td {
  padding: var(--s3); border-top: 1px solid var(--border); vertical-align: middle;
}
:is(.client-card-page, .partner-card-page) .card-page-table tbody tr:hover td { background: var(--row-hover); }
:is(.client-card-page, .partner-card-page) .card-page-table .num { text-align: right; white-space: nowrap; }
:is(.client-card-page, .partner-card-page) .card-page-orders-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s3); color: var(--muted); font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-order-filters {
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
:is(.client-card-page, .partner-card-page) .card-page-order-filters button {
  min-height: 34px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--muted); padding: var(--s1) var(--s3);
}
:is(.client-card-page, .partner-card-page) .card-page-order-filters button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}
:is(.client-card-page, .partner-card-page) .card-page-empty { padding: var(--s5); margin: 0; color: var(--muted); text-align: center; }
:is(.client-card-page, .partner-card-page) .card-page-chat { display: grid; gap: var(--s2); max-height: 600px; overflow: auto; padding: var(--s4); background: var(--panel-soft); }
:is(.client-card-page, .partner-card-page) .card-page-message {
  width: fit-content; max-width: min(76%, 760px); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--panel); padding: var(--s3);
  overflow-wrap: anywhere;
}
:is(.client-card-page, .partner-card-page) .card-page-message.out {
  justify-self: end; background: var(--accent-soft); border-color: var(--border-strong);
}
:is(.client-card-page, .partner-card-page) .card-page-message small,
:is(.client-card-page, .partner-card-page) .card-page-message-fail { display: block; margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-2); }
:is(.client-card-page, .partner-card-page) .card-page-message-fail { color: var(--stop-fg); }
:is(.client-card-page, .partner-card-page) .card-page-chat-plate { justify-self: center; color: var(--muted); font-size: var(--fs-3); text-align: center; }
:is(.client-card-page, .partner-card-page) .card-page-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); padding: var(--s3) var(--s4); border-top: 1px solid var(--border); }
:is(.client-card-page, .partner-card-page) .card-page-timeline { padding: var(--s4); }
:is(.client-card-page, .partner-card-page) .card-page-event {
  display: grid; grid-template-columns: minmax(132px, .45fr) minmax(0, 1fr);
  gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-event:last-child { border-bottom: 0; }
:is(.client-card-page, .partner-card-page) .card-page-event time { color: var(--muted); font-size: var(--fs-3); }
:is(.client-card-page, .partner-card-page) .card-page-event p { margin: var(--s1) 0 0; color: var(--muted); overflow-wrap: anywhere; }
:is(.client-card-page, .partner-card-page) .card-page-details summary { color: var(--accent); cursor: pointer; font-weight: 700; }
:is(.client-card-page, .partner-card-page) .card-page-details form { margin-top: var(--s3); }
:is(.client-card-page, .partner-card-page) .card-page-grant { padding: var(--s4); border-top: 1px solid var(--border); }
:is(.client-card-page, .partner-card-page) .card-page-danger-zone { border-left: 4px solid var(--stop-fg); }
:is(.client-card-page, .partner-card-page) .card-page-link-value { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--s2); }
:is(.client-card-page, .partner-card-page) .card-page-link-value a { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .client-card-page .client-card-grid,
  .partner-card-page .partner-card-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-top: 1px solid var(--border); }
  :is(.client-card-page, .partner-card-page) .card-page-header { align-items: stretch; flex-direction: column; }
  :is(.client-card-page, .partner-card-page) .card-page-header .card-page-secondary { width: 100%; }
  :is(.client-card-page, .partner-card-page) .card-page-tabs-row { align-items: stretch; flex-direction: column; gap: 0; }
  :is(.client-card-page, .partner-card-page) .card-page-related-link { align-self: flex-start; }
  :is(.client-card-page, .partner-card-page) .card-page-orders-toolbar { align-items: flex-start; flex-direction: column; }
  :is(.client-card-page, .partner-card-page) .card-page-properties > div,
  :is(.client-card-page, .partner-card-page) .card-page-edit-field,
  :is(.client-card-page, .partner-card-page) .card-page-event { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  :is(.client-card-page, .partner-card-page) .card-page-contact { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  :is(.client-card-page, .partner-card-page) .card-page-contact > div { justify-content: space-between; }
  :is(.client-card-page, .partner-card-page) .card-page-compose { grid-template-columns: minmax(0, 1fr); }
  :is(.client-card-page, .partner-card-page) .card-page-compose button { width: 100%; }
}
@media (max-width: 420px) {
  :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: minmax(0, 1fr); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi,
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3),
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-left: 0; border-top: 1px solid var(--border); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:first-child { border-top: 0; }
  :is(.client-card-page, .partner-card-page) .card-page-zone-body,
  :is(.client-card-page, .partner-card-page) .card-page-timeline { padding: var(--s3); }
}

/* 13.6.4a — точная геометрия V18/V12 поверх production tokens. */
:is(.client-card-page, .partner-card-page) {
  display: block;
  width: 100%;
  max-width: 1540px;
  padding-bottom: var(--s8);
}
:is(.client-card-page, .partner-card-page) .card-page-breadcrumb {
  display: inline-flex;
  margin-bottom: var(--s2);
  text-decoration: none;
}
:is(.client-card-page, .partner-card-page) .card-page-breadcrumb:hover { text-decoration: underline; }
:is(.client-card-page, .partner-card-page) .card-page-header {
  position: relative;
  align-items: center;
  min-height: 36px;
  margin-bottom: var(--s4);
}
:is(.client-card-page, .partner-card-page) .card-page-header h1 {
  min-width: 0;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
:is(.client-card-page, .partner-card-page) .card-page-head-menu { position: relative; flex: 0 0 auto; }
:is(.client-card-page, .partner-card-page) .card-page-head-menu > summary {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  font-size: var(--fs-6);
  line-height: 1;
  list-style: none;
}
:is(.client-card-page, .partner-card-page) .card-page-head-menu > summary::-webkit-details-marker { display: none; }
:is(.client-card-page, .partner-card-page) .card-page-head-menu > summary:hover { background: var(--panel-soft); }
:is(.client-card-page, .partner-card-page) .card-page-menu {
  position: absolute;
  z-index: 6;
  top: calc(100% + var(--s2));
  right: 0;
  width: min(320px, calc(100vw - var(--s8)));
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}
:is(.client-card-page, .partner-card-page) .card-page-menu > p {
  margin: var(--s2) 0 var(--s3);
  color: var(--muted);
  font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: var(--s2) !important;
}
:is(.client-card-page, .partner-card-page) .card-page-check input { flex: 0 0 auto; }
:is(.client-card-page, .partner-card-page) .card-page-alert { margin-bottom: var(--s4); }
:is(.client-card-page, .partner-card-page) .card-page-kpis {
  margin-bottom: var(--s5);
  border-radius: var(--radius-lg);
}
:is(.client-card-page, .partner-card-page) .card-page-kpi {
  min-height: 82px;
  padding: var(--s4) var(--s5);
}
:is(.client-card-page, .partner-card-page) .card-page-kpi strong {
  font-size: var(--fs-7);
  font-variant-numeric: tabular-nums;
}
:is(.client-card-page, .partner-card-page) .card-page-kpi span { font-size: var(--fs-2); }
:is(.client-card-page, .partner-card-page) .card-page-tabs-row {
  align-items: flex-start;
  gap: calc(var(--s7) - var(--s1));
  margin-bottom: var(--s4);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs {
  gap: 28px;
  padding: 0 var(--s1);
}
:is(.client-card-page, .partner-card-page) .card-page-tabs button,
:is(.client-card-page, .partner-card-page) .card-page-related-link {
  min-height: 40px;
  padding: 0 0 12px;
  white-space: nowrap;
}
:is(.client-card-page, .partner-card-page) .card-page-related-link { padding-top: var(--s1); }
:is(.client-card-page, .partner-card-page) .card-page-zone {
  border-radius: var(--radius-lg);
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header {
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--panel);
}
:is(.client-card-page, .partner-card-page) .card-page-zone > header::before { display: none; }
:is(.client-card-page, .partner-card-page) .card-page-zone > header h2 { font-size: var(--fs-4); }
:is(.client-card-page, .partner-card-page) .card-page-zone-body { padding: var(--s4); }
:is(.client-card-page, .partner-card-page) .card-page-stack { gap: var(--s4); }
.client-card-page .client-card-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: var(--s4);
}
.partner-card-page .partner-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
:is(.client-card-page, .partner-card-page) .card-page-properties > div,
:is(.client-card-page, .partner-card-page) .card-page-edit-field {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s2) 0;
}
:is(.client-card-page, .partner-card-page) .card-page-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-disclosure { min-width: 0; }
:is(.client-card-page, .partner-card-page) .card-page-disclosure > summary {
  width: max-content;
  max-width: 100%;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
:is(.client-card-page, .partner-card-page) .card-page-disclosure[open] {
  flex: 1 1 100%;
  padding: var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
:is(.client-card-page, .partner-card-page) .card-page-disclosure form { margin-top: var(--s3); }
:is(.client-card-page, .partner-card-page) .card-page-note-text {
  min-height: 64px;
  margin: 0 0 var(--s3);
  line-height: 1.6;
  white-space: pre-line;
}
:is(.client-card-page, .partner-card-page) .card-page-contact {
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: var(--s3);
  padding: var(--s3) 0;
}
:is(.client-card-page, .partner-card-page) .card-page-action-form {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.2fr) auto;
  align-items: end;
  gap: var(--s3);
}
:is(.client-card-page, .partner-card-page) .card-page-action-form button { min-height: 38px; }
.partner-card-page .card-page-action-form.payout-request-form {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.partner-card-page .payout-request-form button.card-page-secondary {
  background: var(--panel); color: var(--accent); border-color: var(--border-strong);
}
@media (max-width: 720px) {
  .partner-card-page .card-page-action-form.payout-request-form { grid-template-columns: minmax(0, 1fr); }
}
:is(.client-card-page, .partner-card-page) .card-page-money-properties dd { font-variant-numeric: tabular-nums; }
:is(.client-card-page, .partner-card-page) .card-page-data-zone > header { min-height: 44px; }
:is(.client-card-page, .partner-card-page) .card-page-table { min-width: 900px; }
.client-card-page .card-page-orders-table { min-width: 1080px; }
.partner-card-page .card-page-referred-table { min-width: 760px; }
.partner-card-page .card-page-accruals-table { min-width: 1080px; }
.partner-card-page .card-page-money-table { min-width: 980px; table-layout: fixed; }
:is(.client-card-page, .partner-card-page) .card-page-table th {
  height: 44px;
  padding: 0 var(--s3);
  font-size: var(--fs-2);
  vertical-align: middle;
}
:is(.client-card-page, .partner-card-page) .card-page-table td {
  height: 48px;
  padding: var(--s2) var(--s3);
}
:is(.client-card-page, .partner-card-page) .card-page-row-link { color: var(--accent); font-weight: 750; }
:is(.client-card-page, .partner-card-page) .card-page-state.active { background: var(--busy-bg); color: var(--busy-fg); }
:is(.client-card-page, .partner-card-page) .card-page-state.complete,
:is(.client-card-page, .partner-card-page) .card-page-state.available { background: var(--done-bg); color: var(--done-fg); }
:is(.client-card-page, .partner-card-page) .card-page-state.transit { background: var(--warn-bg); color: var(--warn-fg); }
:is(.client-card-page, .partner-card-page) .card-page-orders-toolbar,
:is(.client-card-page, .partner-card-page) .card-page-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
  color: var(--muted);
  font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-filter-bar-stacked { align-items: flex-start; }
:is(.client-card-page, .partner-card-page) .card-page-filter-groups { display: flex; flex-wrap: wrap; gap: var(--s3); }
:is(.client-card-page, .partner-card-page) .card-page-filter-group { display: flex; flex-wrap: wrap; gap: var(--s2); }
:is(.client-card-page, .partner-card-page) .card-page-filter-group button {
  min-height: 34px;
  padding: 0 var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-weight: 650;
}
:is(.client-card-page, .partner-card-page) .card-page-filter-group button[aria-pressed="true"] {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
}
:is(.client-card-page, .partner-card-page) .card-page-date-filter { display: flex; align-items: end; gap: var(--s2); margin-left: auto; }
:is(.client-card-page, .partner-card-page) .card-page-date-filter label { display: grid; gap: var(--s1); color: var(--muted); font-size: var(--fs-2); }
:is(.client-card-page, .partner-card-page) .card-page-date-filter input { height: 34px; border-color: var(--border); background: var(--panel); }
:is(.client-card-page, .partner-card-page) .card-page-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
:is(.client-card-page, .partner-card-page) .card-page-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  min-height: 32px;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
:is(.client-card-page, .partner-card-page) .card-page-table-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.35em;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--fs-3);
}
:is(.client-card-page, .partner-card-page) .card-page-chat-zone {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 620px;
}
:is(.client-card-page, .partner-card-page) .card-page-chat-zone > header { justify-content: space-between; }
:is(.client-card-page, .partner-card-page) .card-page-channel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: 700;
}
:is(.client-card-page, .partner-card-page) .card-page-chat {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 480px;
  max-height: 540px;
  padding: var(--s5);
}
:is(.client-card-page, .partner-card-page) .card-page-chat-day {
  align-self: center;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border);
  border-radius: var(--s5);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--fs-1);
}
:is(.client-card-page, .partner-card-page) .card-page-message {
  max-width: min(68%, 760px);
  border-radius: 10px;
  padding: var(--s2) var(--s3);
}
:is(.client-card-page, .partner-card-page) .card-page-message.in { align-self: flex-start; border-top-left-radius: var(--s1); }
:is(.client-card-page, .partner-card-page) .card-page-message.out { align-self: flex-end; border-top-right-radius: var(--s1); }
:is(.client-card-page, .partner-card-page) .card-page-message-author { display: block; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-1); }
:is(.client-card-page, .partner-card-page) .card-page-chat-plate { align-self: center; }
:is(.client-card-page, .partner-card-page) .card-page-compose { min-height: 104px; }
:is(.client-card-page, .partner-card-page) .card-page-compose-unavailable { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--border); color: var(--muted); }
:is(.client-card-page, .partner-card-page) .card-page-timeline { width: 100%; min-width: 0; padding: var(--s4) var(--s5); }
:is(.client-card-page, .partner-card-page) .card-page-timeline-day { margin: var(--s1) 0 var(--s3); font-size: var(--fs-2); }
:is(.client-card-page, .partner-card-page) .card-page-event {
  position: relative;
  width: 100%; min-width: 0;
  grid-template-columns: 74px 16px minmax(0, 1fr);
  gap: var(--s2);
  padding: 0 0 var(--s4);
  border-bottom: 0;
}
:is(.client-card-page, .partner-card-page) .card-page-event::before {
  content: "";
  position: absolute;
  top: var(--s3);
  bottom: 0;
  left: 81px;
  width: 1px;
  background: var(--border);
}
:is(.client-card-page, .partner-card-page) .card-page-event-dot {
  z-index: 1;
  width: 9px; min-width: 9px; max-width: 9px;
  height: 9px; min-height: 9px; max-height: 9px;
  margin-top: var(--s1);
  border: 0; border-radius: 50%; padding: 0;
  background: var(--accent);
}
:is(.client-card-page, .partner-card-page) .card-page-event-content { min-width: 0; overflow-wrap: anywhere; }
:is(.client-card-page, .partner-card-page) .card-page-event-dot.is-money { background: var(--done-fg); }
:is(.client-card-page, .partner-card-page) .card-page-event-dot.is-note { background: var(--warn-fg); }
:is(.client-card-page, .partner-card-page) .card-page-event-dot.is-system { background: var(--muted); }
:is(.client-card-page, .partner-card-page) .card-page-money-kind {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: var(--s1) var(--s2);
  border-radius: var(--radius);
  background: var(--panel-soft);
  font-size: var(--fs-2);
  font-weight: 700;
  white-space: nowrap;
}
:is(.client-card-page, .partner-card-page) .card-page-money-kind.accrual { background: var(--done-bg); color: var(--done-fg); }
:is(.client-card-page, .partner-card-page) .card-page-money-kind.spend { background: var(--stop-bg); color: var(--stop-fg); }
:is(.client-card-page, .partner-card-page) .card-page-money-kind.payout { background: var(--busy-bg); color: var(--busy-fg); }
:is(.client-card-page, .partner-card-page) .card-page-money-kind.adjust { background: var(--accent-soft); color: var(--accent); }
:is(.client-card-page, .partner-card-page) .card-page-money-amount { font-weight: 780; }
:is(.client-card-page, .partner-card-page) .card-page-money-amount.plus { color: var(--done-fg); }
:is(.client-card-page, .partner-card-page) .card-page-money-amount.minus { color: var(--stop-fg); }

@media (max-width: 1000px) {
  .client-card-page .client-card-grid,
  .partner-card-page .partner-card-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.client-card-page, .partner-card-page) .card-page-action-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :is(.client-card-page, .partner-card-page) .card-page-header { flex-direction: row; align-items: flex-start; }
  :is(.client-card-page, .partner-card-page) .card-page-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi,
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(3),
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(4) { border-top: 1px solid var(--border); }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(-n+2) { border-top: 0; }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(odd) { border-left: 0; }
  :is(.client-card-page, .partner-card-page) .card-page-kpi:nth-child(even) { border-left: 1px solid var(--border); }
  :is(.client-card-page, .partner-card-page) .card-page-tabs-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s1);
    overflow: visible;
  }
  :is(.client-card-page, .partner-card-page) .card-page-tabs {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  :is(.client-card-page, .partner-card-page) .card-page-related-link {
    align-self: flex-end;
    min-height: 32px;
    padding-bottom: var(--s2);
  }
  :is(.client-card-page, .partner-card-page) .card-page-properties > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  :is(.client-card-page, .partner-card-page) .card-page-contact { grid-template-columns: minmax(0, 1fr) auto; }
  :is(.client-card-page, .partner-card-page) .card-page-contact > span { grid-column: 1 / -1; }
  :is(.client-card-page, .partner-card-page) .card-page-message { max-width: 88%; }
  :is(.client-card-page, .partner-card-page) .card-page-event { width: 100%; min-width: 0; grid-template-columns: 58px 14px minmax(0, 1fr); }
  :is(.client-card-page, .partner-card-page) .card-page-event::before { left: 65px; }
  :is(.client-card-page, .partner-card-page) .card-page-date-filter { width: 100%; margin-left: 0; }
  :is(.client-card-page, .partner-card-page) .card-page-icon-action { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; }
  :is(.client-card-page, .partner-card-page) .card-page-inline-form input[type="text"] { height: 40px; min-height: 40px; }
  :is(.client-card-page, .partner-card-page) .card-page-inline-form .card-page-icon-action { width: 40px; min-width: 40px; height: 40px; min-height: 40px; flex-basis: 40px; }
  :is(.client-card-page, .partner-card-page) .card-page-tag-remove { width: 32px; min-width: 32px; height: 32px; min-height: 32px; opacity: 1; }
}

@media (hover: none) {
  :is(.client-card-page, .partner-card-page) .card-page-tag-remove { opacity: 1; }
}

/* -------------------------------------------------------------------------
   КАРТОЧКА ЗАКАЗА V18 — только production tokens, без влияния на другие routes.
   Геометрия источника: content 1540, head 1fr/420, gaps 16/18, chat 600/520.
   ------------------------------------------------------------------------- */























































































@media (max-width: 1180px) {
  
  
}
@media (max-width: 820px) {
  
  
  
  
  
}
@media (max-width: 460px) {
  
  
  
  
  
  
  
  
  
  
}

/* 13.6.5a — финальная композиция V18. Селектор main только снимает
   глобальное центрирование на route карточки заказа. */



















































































@media (max-width: 1180px) {
  
  
  
}
@media (max-width: 820px) {
  
  
  
  
}
@media (max-width: 460px) {
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}

/* 13.6.5b — единая интерактивная модель V18: modal / mode switch / compact rows. */




































































@media (max-width: 1120px) {
  
}
@media (max-width: 620px) {
  
  
  
  
  
  
  
  
  
  
}

body.order-card-modal-open { overflow: hidden; }

.side .nav-entry { display: flex; align-items: center; position: relative; }
.side .nav-entry > a:first-child { flex: 1; min-width: 0; }
.side .nav-count, .side .nav-badge { font-size: var(--fs-2); font-weight: 700; border-radius: 999px; background: var(--row-hover); color: var(--accent); padding: 4px 8px; min-width: 24px; text-align: center; }
.side .nav-count { flex: 0; margin-left: 4px; }
.side .nav-badge { margin-left: auto; }
html.side-thin .side .nav-count { position: absolute; right: 0; top: 0; }
.questions-filters { display: flex; align-items: end; flex-wrap: wrap; gap: var(--s3); }
.questions-filters label { display: grid; gap: var(--s2); }

/* ============================================================
   КАРТОЧКА ЗАКАЗА V18 — HTML-derived presentation shell.
   Геометрия повторяет DESIGN_HTML/Карточка_заказа_V18.html;
   палитра поступает только из production theme tokens.
   ============================================================ */
main:has(> .order-v18-page) {
  --order-v18-px-1: 1px;
  --order-v18-px-2: 2px;
  --order-v18-px-3: 3px;
  --order-v18-px-5: 5px;
  --order-v18-px-6: 6px;
  --order-v18-px-7: 7px;
  --order-v18-px-9: 9px;
  --order-v18-px-10: 10px;
  --order-v18-px-11: 11px;
  --order-v18-px-13: 13px;
  --order-v18-px-14: 14px;
  --order-v18-px-15: 15px;
  --order-v18-px-17: 17px;
  --order-v18-px-18: 18px;
  --order-v18-px-22: 22px;
  --order-v18-px-26: 26px;
  --order-v18-title-size: 28px;
  --order-v18-control-size: 11.5px;
  --order-v18-close-size: 22px;
  width: 100%;
  max-width: none;
  padding: var(--order-v18-px-18) var(--order-v18-px-26) 44px;
}
main:has(> .order-v18-page) > .alarms { max-width: 1540px; margin-bottom: var(--order-v18-px-14); }
.order-v18-page { width: 100%; max-width: 1488px; min-width: 0; color: var(--text); }
.order-v18-page [hidden] { display: none !important; }
.order-v18-page button, .order-v18-page input, .order-v18-page select, .order-v18-page textarea { font: inherit; color: inherit; }
.order-v18-page a { color: var(--accent); text-underline-offset: 3px; }
.order-v18-page button { cursor: pointer; }
.order-v18-back { display: inline-flex; align-items: center; gap: var(--order-v18-px-6); margin-bottom: var(--order-v18-px-11); color: var(--accent); font-weight: 700; text-decoration: none; }
.order-v18-back:hover { text-decoration: underline; }
.order-v18-head { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--order-v18-px-18); align-items: center; margin-bottom: var(--order-v18-px-13); }
.order-v18-title-wrap { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--order-v18-px-10); }
.order-v18-title { min-width: 0; margin: 0; font-size: var(--order-v18-title-size); line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; }
.order-v18-client-mini { display: grid; position: relative; grid-template-columns: 38px minmax(0, 1fr); gap: var(--order-v18-px-10); align-items: center; min-width: 0; padding: var(--order-v18-px-11) var(--order-v18-px-13); border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); }
.order-v18-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.order-v18-client-copy { min-width: 0; }
.order-v18-client-label { margin-bottom: var(--order-v18-px-1); color: var(--muted); font-size: var(--fs-1); }
.order-v18-client-name { display: inline-flex; max-width: 100%; align-items: center; gap: 4px; font-size: var(--fs-4); font-weight: 800; overflow-wrap: anywhere; }
.order-v18-quick-contacts { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--order-v18-px-7); margin-top: 4px; color: var(--muted); font-size: var(--fs-1); }
.order-v18-quick-contacts > span { min-width: 0; overflow-wrap: anywhere; }
.order-v18-more-contacts { display: inline-flex; min-height: 22px; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0 var(--order-v18-px-7); background: var(--panel-soft); color: var(--accent); font-size: var(--fs-1); font-weight: 800; }
.order-v18-alert { display: flex; align-items: center; gap: var(--order-v18-px-11); margin-bottom: var(--order-v18-px-14); padding: var(--order-v18-px-11) var(--order-v18-px-14); border: 1px solid var(--stop-fg); border-radius: var(--radius-lg); background: var(--stop-bg); }
.order-v18-alert-mark { color: var(--stop-fg); font-weight: 900; }
.order-v18-alert .order-v18-text-link { margin-left: auto; }
.order-v18-state-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); box-shadow: var(--shadow); }
.order-v18-state-cell { min-width: 0; padding: var(--order-v18-px-11) var(--order-v18-px-14); border-right: 1px solid var(--border); }
.order-v18-state-cell:last-child { border-right: 0; }
.order-v18-state-label { margin-bottom: 4px; color: var(--muted); font-size: var(--fs-1); }
.order-v18-state-value { font-weight: 760; line-height: 1.3; overflow-wrap: anywhere; }
.order-v18-state-value.is-warn { color: var(--warn-fg); }
.order-v18-state-value.is-money { font-variant-numeric: tabular-nums; }
.order-v18-state-cell small { color: var(--muted); font-size: var(--fs-1); }
.order-v18-tabs { display: flex; gap: 28px; overflow-x: auto; overflow-y: hidden; margin: 0 0 16px; border-bottom: 1px solid var(--border); padding-left: var(--order-v18-px-2); scrollbar-width: none; }
.order-v18-tabs::-webkit-scrollbar { display: none; }
.order-v18-tab { position: relative; flex: 0 0 auto; border: 0; border-radius: 0; padding: 0 0 var(--order-v18-px-11); background: transparent; color: var(--muted); font-weight: 650; white-space: nowrap; }
.order-v18-tab:hover, .order-v18-tab:focus, .order-v18-tab.is-active { background: transparent; color: var(--text); }
.order-v18-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 0; background: var(--accent); content: ""; }
.order-v18-panel { min-width: 0; }
.order-v18-overview-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr); gap: 16px; align-items: start; }
.order-v18-stack, .order-v18-service-stack { display: grid; min-width: 0; gap: 16px; }
.order-v18-zone, .order-v18-card, .order-v18-full-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow); }
.order-v18-zone { border-radius: 14px; }
.order-v18-card, .order-v18-full-card { border-radius: 11px; }
.order-v18-zone-head { display: flex; min-height: 48px; align-items: center; gap: var(--order-v18-px-9); padding: var(--order-v18-px-13) 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.order-v18-zone-head h2, .order-v18-card-head h2, .order-v18-section-top h2 { margin: 0; line-height: 1.25; }
.order-v18-zone-head h2, .order-v18-section-top h2 { font-size: var(--fs-5); }
.order-v18-zone-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--accent); }
.order-v18-zone-head .order-v18-text-link, .order-v18-zone-head .order-v18-btn { margin-left: auto; }
.order-v18-zone-body { min-width: 0; padding: 16px; }
.order-v18-work-type { margin-bottom: var(--order-v18-px-5); color: var(--accent); font-size: var(--fs-2); font-weight: 800; }
.order-v18-topic { margin-bottom: var(--order-v18-px-14); font-size: var(--fs-5); line-height: 1.34; font-weight: 760; }
.order-v18-info-table, .order-v18-kv { width: 100%; border-collapse: collapse; }
.order-v18-info-table td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: top; }
.order-v18-info-table tr:first-child td { border-top: 0; }
.order-v18-info-table td:first-child { width: 116px; color: var(--muted); font-size: var(--fs-2); }
.order-v18-info-table td:last-child { font-weight: 650; }
.order-v18-page .order-v18-info-table tr:hover td { background: transparent; box-shadow: none; }
.order-v18-card-head { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: var(--order-v18-px-10); padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel-soft); }
.order-v18-card-head h2 { font-size: var(--fs-4); }
.order-v18-text-link { border: 0; padding: 0; background: none; color: var(--accent); font-weight: 700; }
.order-v18-text-link:hover { text-decoration: underline; }
.order-v18-text-link, .order-v18-btn, .order-v18-icon-btn { user-select: none; }
.order-v18-table-wrap { max-width: 100%; overflow-x: auto; padding: 0 16px var(--order-v18-px-10); }
.order-v18-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.order-v18-table th { padding: var(--order-v18-px-10) 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: var(--fs-2); font-weight: 650; text-align: left; white-space: nowrap; }
.order-v18-table td { padding: var(--order-v18-px-11) 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-3); vertical-align: middle; }
.order-v18-table tr:last-child td { border-bottom: 0; }
.order-v18-table tbody tr:hover td { background: var(--panel-soft); }
.order-v18-task-name, .order-v18-file-name { font-weight: 650; }
.order-v18-task-origin { display: inline-flex; margin-left: var(--order-v18-px-6); color: var(--accent); font-size: var(--fs-1); font-weight: 700; vertical-align: middle; }
.order-v18-status { display: inline-flex; align-items: center; border-radius: 6px; padding: var(--order-v18-px-3) 8px; background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
.order-v18-status.is-in_progress { background: var(--busy-bg); color: var(--busy-fg); }
.order-v18-status.is-review { background: var(--warn-bg); color: var(--warn-fg); }
.order-v18-status.is-done { background: var(--done-bg); color: var(--done-fg); }
.order-v18-status.is-missed { background: var(--stop-bg); color: var(--stop-fg); }
.order-v18-status-form { display: inline-flex; margin: 0; }
.order-v18-task-status-select { width: auto; min-width: 118px; height: 30px; border: 0; border-radius: 7px; padding: 0 28px 0 var(--order-v18-px-9); background: var(--panel-soft); color: var(--muted); font-size: var(--order-v18-control-size); font-weight: 700; cursor: pointer; }
.order-v18-task-status-select.is-in_progress { background: var(--busy-bg); color: var(--busy-fg); }
.order-v18-task-status-select.is-review { background: var(--warn-bg); color: var(--warn-fg); }
.order-v18-task-status-select.is-done { background: var(--done-bg); color: var(--done-fg); }
.order-v18-file-name { min-width: 220px; }
.order-v18-file-icon { display: inline-grid; width: 24px; height: 24px; place-items: center; margin-right: var(--order-v18-px-7); border-radius: 5px; background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); font-weight: 800; }
.order-v18-note-body { display: grid; gap: 12px; padding: 16px; }
.order-v18-note-text { font-size: var(--fs-4); line-height: 1.5; white-space: pre-wrap; }
.order-v18-note-actions { display: flex; justify-content: flex-end; }
.order-v18-plan-body { padding: 12px 16px var(--order-v18-px-14); }
.order-v18-plan-list { display: grid; }
.order-v18-plan-item { display: grid; position: relative; grid-template-columns: 22px minmax(0, 1fr); gap: var(--order-v18-px-9); padding: var(--order-v18-px-7) 0; }
.order-v18-plan-item::before { position: absolute; bottom: -8px; left: 9px; top: 25px; width: 1px; background: var(--border-strong); content: ""; }
.order-v18-plan-item:last-child::before { display: none; }
.order-v18-plan-dot { display: grid; position: relative; z-index: 1; width: 19px; height: 19px; place-items: center; margin-top: var(--order-v18-px-1); border: 2px solid var(--border-strong); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: var(--fs-1); font-weight: 900; }
.order-v18-plan-item.is-done .order-v18-plan-dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.order-v18-plan-item.is-done::before { background: var(--accent); }
.order-v18-plan-item.is-current { margin: var(--order-v18-px-2) -8px; border-radius: 9px; padding: 8px; background: transparent; }
.order-v18-plan-item.is-current::before { left: 17px; }
.order-v18-plan-item.is-current::after { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 31px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); content: ""; }
.order-v18-plan-item.is-current > * { position: relative; z-index: 1; }
.order-v18-plan-item.is-current .order-v18-plan-dot { border: 3px solid var(--accent); background: var(--panel); }
.order-v18-plan-name { font-size: var(--fs-4); font-weight: 700; line-height: 1.25; }
.order-v18-plan-item.is-current .order-v18-plan-name { color: var(--accent); font-weight: 800; }
.order-v18-plan-meta { margin-top: var(--order-v18-px-2); color: var(--muted); font-size: var(--fs-2); }
.order-v18-plan-item.is-current .order-v18-plan-meta { color: var(--accent); font-weight: 650; }
.order-v18-full-card { border-radius: 11px; }
.order-v18-section-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--order-v18-px-14) 16px; border-bottom: 1px solid var(--border); background: var(--panel-soft); }
.order-v18-muted { color: var(--muted); }
.order-v18-small { font-size: var(--fs-2); }
.order-v18-service-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 16px; align-items: start; }
.order-v18-service-plan { position: sticky; top: 16px; }
.order-v18-action-grid, .order-v18-inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.order-v18-btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: var(--order-v18-px-7); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--order-v18-px-13); background: var(--panel); font-weight: 650; }
.order-v18-btn:hover { background: var(--panel-soft); }
.order-v18-btn.is-primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.order-v18-btn.is-danger { border-color: var(--stop-fg); background: var(--stop-bg); color: var(--stop-fg); }
.order-v18-btn.is-small { min-height: 32px; padding-inline: var(--order-v18-px-10); font-size: var(--fs-2); }
.order-v18-input, .order-v18-select, .order-v18-textarea { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.order-v18-input, .order-v18-select { height: 38px; padding: 0 var(--order-v18-px-10); }
.order-v18-textarea { width: 100%; min-height: 88px; padding: var(--order-v18-px-10); resize: vertical; }
.order-v18-people { display: grid; margin-bottom: var(--order-v18-px-10); }
.order-v18-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.order-v18-inline-form .order-v18-select { min-width: 220px; }
.order-v18-kv td { padding: var(--order-v18-px-10) 0; border-bottom: 1px solid var(--border); }
.order-v18-kv tr:last-child td { border-bottom: 0; }
.order-v18-kv td:first-child { color: var(--muted); }
.order-v18-kv td:last-child { text-align: right; font-weight: 700; }
.order-v18-table-wrap-nested { padding: 0; }
.order-v18-table-wrap-nested .order-v18-table { min-width: 0; }
.order-v18-table-wrap-nested small { display: block; margin-top: var(--order-v18-px-2); color: var(--muted); font-size: var(--fs-1); }
.order-v18-card-actions { display: flex; padding: 0; border-top: 1px solid var(--border); background: var(--panel); box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease; }
.order-v18-card-actions:hover, .order-v18-card-actions:focus-within { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); }
.order-v18-card-actions .order-v18-text-link { display: flex; width: 100%; min-height: 46px; align-items: center; padding: 0 16px; color: var(--text); text-align: left; text-decoration: none; }
.order-v18-card-actions .order-v18-text-link:hover, .order-v18-card-actions .order-v18-text-link:focus-visible { background: transparent; color: var(--accent); text-decoration: none; }
.order-v18-icon-btn { display: grid; width: 32px; height: 34px; place-items: center; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); }
.order-v18-plan-editor-wrap { border-top: 1px solid var(--border); background: var(--panel-soft); }
.order-v18-editor-note { margin: 0; padding: 12px 12px 0; color: var(--muted); font-size: var(--fs-1); }
.order-v18-plan-editor { display: grid; gap: var(--order-v18-px-9); padding: 12px; }
.order-v18-plan-edit-card { display: grid; grid-template-columns: 24px minmax(120px, 1fr) 168px 104px minmax(88px, auto) 32px; gap: var(--order-v18-px-6); align-items: center; padding: var(--order-v18-px-9) var(--order-v18-px-10); border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.order-v18-plan-edit-card[data-plan-row] { cursor: grab; }
.order-v18-plan-edit-card[data-plan-row]:active { cursor: grabbing; }
.order-v18-plan-edit-card.is-dragging { opacity: .45; }
.order-v18-plan-edit-card.is-drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); }
.order-v18-plan-editor.is-sorting { user-select: none; }
.order-v18-drag-handle { display: grid; width: 24px; height: 34px; place-items: center; color: var(--muted); font-size: var(--fs-5); cursor: grab; }
.order-v18-plan-fixed-mark { display: grid; width: 24px; height: 34px; place-items: center; color: var(--muted); font-size: var(--fs-5); cursor: default; }
.order-v18-plan-edit-card .order-v18-input, .order-v18-plan-edit-card .order-v18-select { width: 100%; }
.order-v18-plan-title { height: auto; min-height: 38px; max-height: 96px; padding: var(--order-v18-px-9) var(--order-v18-px-10); line-height: 1.25; resize: none; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.order-v18-plan-task { display: inline-flex; align-items: center; gap: var(--order-v18-px-6); color: var(--muted); font-size: var(--fs-2); font-weight: 650; white-space: nowrap; }
.order-v18-plan-task-slot { display: flex; min-width: 0; min-height: 38px; align-items: center; }
.order-v18-plan-task input { margin: 0; accent-color: var(--accent); }
.order-v18-plan-owner { grid-column: 2 / 5; }
.order-v18-plan-row-actions { display: flex; grid-column: 5 / 7; align-items: center; justify-content: flex-end; gap: var(--order-v18-px-6); }
.order-v18-system-badge { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border-radius: 6px; padding: 4px var(--order-v18-px-7); background: var(--panel-soft); color: var(--muted); font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
.order-v18-plan-move-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-v18-icon-btn:hover:not(:disabled) { background: var(--panel-soft); color: var(--text); }
.order-v18-plan-editor-actions { display: flex; justify-content: space-between; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); }
.order-v18-empty { margin: 0; padding: 16px; color: var(--muted); text-align: center; }
.order-v18-timeline { max-width: 900px; padding: var(--order-v18-px-14) var(--order-v18-px-18) var(--order-v18-px-18); }
.order-v18-day { margin: 8px 0 var(--order-v18-px-9); font-size: var(--fs-2); font-weight: 800; }
.order-v18-event { display: grid; position: relative; grid-template-columns: 16px 78px minmax(0, 1fr); gap: 8px; padding: 0 0 16px; }
.order-v18-event::before { position: absolute; bottom: -3px; left: 6px; top: 13px; width: 1px; background: var(--border-strong); content: ""; }
.order-v18-event:last-child::before { display: none; }
.order-v18-event-dot { width: 10px; height: 10px; margin-top: var(--order-v18-px-5); border-radius: 50%; background: var(--accent); }
.order-v18-event time, .order-v18-event-text small { color: var(--muted); font-size: var(--fs-2); }
.order-v18-event-text small { display: block; margin-top: var(--order-v18-px-2); }
.order-v18-event-text p { margin: var(--order-v18-px-2) 0 0; }
.order-v18-chat-wrap { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 600px; }
.order-v18-chat-list { display: flex; max-height: 520px; min-height: 360px; flex-direction: column; gap: var(--order-v18-px-10); overflow-y: auto; padding: var(--order-v18-px-18) var(--order-v18-px-22); background: var(--panel-soft); }
.order-v18-chat-day { display: flex; align-items: center; gap: 12px; margin: 4px 0; color: var(--muted); font-size: var(--fs-1); }
.order-v18-chat-day::before, .order-v18-chat-day::after { height: 1px; flex: 1; background: var(--border); content: ""; }
.order-v18-bubble { max-width: 66%; padding: var(--order-v18-px-10) 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow-wrap: anywhere; }
.order-v18-bubble.is-mine { margin-left: auto; border-color: var(--border-strong); background: var(--accent-soft); }
.order-v18-order-context { margin-bottom: 4px; color: var(--accent); font-size: var(--fs-1); font-weight: 800; }
.order-v18-time { margin-top: var(--order-v18-px-5); color: var(--muted); font-size: var(--fs-1); text-align: right; }
.order-v18-chat-system { align-self: center; color: var(--muted); font-size: var(--fs-2); }
.order-v18-chat-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel); }
.order-v18-chat-input textarea { height: 48px; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--order-v18-px-10); resize: none; }
.order-v18-chat-actions { display: flex; align-items: center; gap: 8px; }
.order-v18-chat-input .order-v18-btn { min-height: 48px; }
.order-v18-attach { display: inline-flex; min-height: 38px; align-items: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--order-v18-px-10); cursor: pointer; }
.order-v18-chat-actions small { color: var(--muted); font-size: var(--fs-1); }
/* ПЕРЕДАЧА РАБОТЫ (15.6). Третья строка формы переписки: она занимает
   обе колонки сетки, потому что это не «ещё одна кнопка рядом», а другое
   действие — отправка работы, а не реплика в чате. */
.order-v18-handoff { grid-column: 1 / -1; margin-top: var(--s2); border-top: 1px solid var(--border); padding-top: var(--s3); }
.order-v18-handoff-head { margin-bottom: var(--s2); color: var(--muted); font-size: var(--fs-1); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.order-v18-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s3); }
.order-v18-handoff p { margin: var(--s2) 0 0; }
.order-v18-plan-item.is-sent .order-v18-plan-dot { border-color: var(--accent); color: var(--accent); }
.order-v18-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.order-v18-modal-bg[hidden] { display: none; }
.order-v18-modal-bg { display: none; position: fixed; z-index: 100; inset: 0; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.order-v18-modal-bg.is-open { display: flex; }
.order-v18-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: hidden auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.order-v18-modal-head { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: var(--order-v18-px-15) var(--order-v18-px-17); border-bottom: 1px solid var(--border); }
.order-v18-modal-head h3 { margin: 0; font-size: var(--fs-5); }
.order-v18-modal-close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; padding: 0; background: none; color: var(--muted); font-size: var(--order-v18-close-size); line-height: 1; }
.order-v18-modal-body { padding: 16px var(--order-v18-px-17); }
.order-v18-field { margin-bottom: 12px; }
.order-v18-field:last-child { margin-bottom: 0; }
.order-v18-field label { display: block; margin-bottom: var(--order-v18-px-5); color: var(--muted); font-size: var(--fs-2); }
.order-v18-field .order-v18-input, .order-v18-field .order-v18-select, .order-v18-field .order-v18-textarea { width: 100%; }
.order-v18-input.is-file { height: auto; padding: 8px; }
.order-v18-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px var(--order-v18-px-17); border-top: 1px solid var(--border); }
.order-v18-modal-foot.has-danger { display: grid; grid-template-columns: auto 1fr auto auto; }
.order-v18-action-list { display: grid; gap: 12px; }
.order-v18-action-list form { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }

@media (max-width: 1180px) {
  .order-v18-head, .order-v18-overview-layout, .order-v18-service-main-grid { grid-template-columns: minmax(0, 1fr); }
  .order-v18-client-mini { max-width: 520px; }
  .order-v18-service-plan { position: static; }
  .order-v18-plan-edit-card { grid-template-columns: 24px minmax(120px, 1fr) 168px 104px minmax(88px, auto) 32px; }
}
@media (max-width: 820px) {
  main:has(> .order-v18-page) { padding: 16px; }
  .order-v18-state-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-v18-state-cell:nth-child(2) { border-right: 0; }
  .order-v18-state-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .order-v18-bubble { max-width: 84%; }
  .order-v18-plan-edit-card { grid-template-columns: 24px minmax(0, 1fr) 32px; align-items: start; }
  .order-v18-plan-edit-card .order-v18-plan-date, .order-v18-plan-edit-card .order-v18-plan-status, .order-v18-plan-edit-card .order-v18-plan-task-slot, .order-v18-plan-edit-card .order-v18-plan-owner, .order-v18-plan-edit-card .order-v18-system-badge { grid-column: 2 / 3; }
  .order-v18-plan-row-actions { grid-column: 2 / 4; justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 520px) {
  main:has(> .order-v18-page) { padding: 12px; }
  .order-v18-head { gap: 12px; }
  .order-v18-title { font-size: var(--fs-6); }
  .order-v18-client-mini { grid-template-columns: 34px minmax(0, 1fr); padding: var(--order-v18-px-10); }
  .order-v18-avatar { width: 34px; height: 34px; }
  .order-v18-state-strip { grid-template-columns: minmax(0, 1fr); }
  .order-v18-state-cell { border-top: 1px solid var(--border); border-right: 0; }
  .order-v18-state-cell:first-child { border-top: 0; }
  .order-v18-tabs { gap: var(--order-v18-px-22); }
  .order-v18-zone-body { padding: var(--order-v18-px-14); }
  .order-v18-section-top { align-items: flex-start; flex-direction: column; }
  .order-v18-section-top .order-v18-btn { width: 100%; }
  .order-v18-table { min-width: 620px; }
  .order-v18-info-table td:first-child { width: 104px; }
  .order-v18-action-grid, .order-v18-action-grid form, .order-v18-action-grid .order-v18-btn { width: 100%; }
  .order-v18-inline-form, .order-v18-inline-form .order-v18-select, .order-v18-inline-form .order-v18-btn { width: 100%; }
  .order-v18-chat-list { min-height: 320px; padding: 12px; }
  .order-v18-bubble { max-width: 92%; }
  .order-v18-chat-input { grid-template-columns: minmax(0, 1fr); }
  .order-v18-chat-actions { flex-wrap: wrap; }
  .order-v18-chat-actions .order-v18-btn { margin-left: auto; }
  .order-v18-modal-bg { align-items: flex-end; padding: 8px; }
  .order-v18-modal { width: 100%; max-height: calc(100vh - 16px); }
  .order-v18-modal-foot.has-danger { grid-template-columns: auto 1fr auto; }
  .order-v18-modal-foot.has-danger > span { display: none; }
}

/* Счётчики очередей и фильтры вопросов, 14.9. */