/* ============================================================
   ПЛАТФОРМА · UI-КИТ (слой оформления)
   ============================================================
   ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ. До 06.10.2026 токены, шкала кеглей и примитивы лежали вперемешку
   с оформлением конкретных экранов в styles.css (1720 строк). Правка темы не доходила до экрана:
   рядом с токеном стоял захардкоженный цвет, рядом со шкалой — инлайновый кегль 10px. Теперь
   здесь ТОЛЬКО то, из чего собираются экраны, и ничего про конкретный экран:

     1) токены обеих тем (цвет, границы, тень, шкала кеглей);
     2) утилиты типографики (.t-meta / .t-sm / .t-body / .t-value / .t-h3) — ими заменяются
        инлайновые кегли, которых в app.js было 253 штуки ниже 12px;
     3) примитивы: карточка, полоса вердиктов, строка «условие → значение → состояние», бейдж
        состояния, цитата, число, панель быстрого взгляда.

   ПРАВИЛА КИТА (проверяются deploy/check_ui_contrast.js и глазами в #/dev/ui):
     · кегль ниже 12px не используем нигде; смысловой текст — от 13px;
     · значение КРУПНЕЕ своей подписи (15 против 13);
     · приглушённый цвет — только для «кто и когда» (источник, дата, счётчик); смысловое на нём
       не пишем;
     · состояние несут СЛОВО и плотный бейдж, цвет только усиливает слово;
     · ПЛИТОК И СТРОК С ЦВЕТНОЙ ПОЛОСОЙ СЛЕВА НЕТ (решение владельца 05.10.2026: узнаваемый приём
       «сгенерированного» интерфейса, к тому же полоса съедает левый край и ломает колонку значений);
     · в интерфейсе — факт и состояние, без пояснений процесса («суды запрашиваются на этапе
       решения…» оператору не нужно);
     · кнопок в шапке карточки нет: внешние переходы — ссылки, действия — одним блоком внизу.

   Подключается в index.html ПЕРЕД styles.css: styles.css потребляет эти токены. */

/* ── ДИЗАЙН-ТОКЕНЫ (светлая тема) ───────────────────── */
:root {
  /* нейтральная шкала.
     ЗАМЕР 05.10.2026 (жалоба «не контрастно, зрение напрягается»): чернила на карточке были
     в порядке (14.8:1), а вот ГРАНИЦЫ ЗОН — нет: карточка отличалась от полотна на 1.16:1,
     шапка карточки от тела — на 1.09, граница от фона — на 1.28. Экран выглядел одним светлым
     листом, глаз искал края там, где их не было. Отсюда: карточка чисто белая, полотно на ступень
     темнее, границы различимы. */
  --canvas: #eeeae2;
  --surface: #ffffff;
  --surface-2: #f5f2ec;
  --surface-3: #eae5dc;
  --border: #ded8cb;
  --border-strong: #c6bcab;
  --overlay: rgba(42, 38, 32, .42);

  --text: #2a2620;
  --text-2: #5e5040;
  /* Приглушённый текст ТЕМНЕЕ прежнего #877966 (жалоба операторов 05.08.2026 — «глаза устают»).
     Замер: #877966 давал 4.17 на белой карточке и 3.83 на сером фоне при минимуме 4.5 по WCAG AA.
     Стало 6.23 и 5.57. ВАЖНО: приглушённый — только для «кто и когда» (источник, дата, счётчик),
     смысловое (значения, условия, цитаты) на нём не пишем. */
  --text-muted: #6b5f4e;
  --on-accent: #fffaf4;

  /* акцент — терракота */
  --accent: #b0532e;
  --accent-hover: #9a4526;
  --accent-active: #853b1f;
  --accent-soft: #faf1e2;
  --accent-soft-border: #eddcc2;
  --accent-ring: rgba(176, 83, 46, .28);
  --accent-text: #9a4526;

  /* семантика.
     --success затемнён (#4f7d5f → #3f6b4e): на своей подложке он давал 4.13:1 — ниже минимума AA,
     а на нём набраны плашки состояний (замер 05.10.2026). Стало 5.30:1. */
  --success: #3f6b4e; --success-soft: #e7f1e9; --success-border: #c6ddcb; --success-text: #3d6b4c;
  --warning: #8a5a12; --warning-soft: #f9f0d8; --warning-border: #eeddb8; --warning-text: #8a5a12;
  --danger: #b53226;  --danger-soft: #fbe9e6;  --danger-border: #eec7c1;  --danger-text: #a33227;
  --info: #4d5f7d;    --info-soft: #eef1f6;    --info-border: #d3dae6;    --info-text: #4a5a75;
  --neutral-soft: #f0eadf; --neutral-border: #ded4c2; --neutral-text: #6a6255;

  /* ШКАЛА КЕГЛЕЙ. Ниже 12px не опускаемся нигде: почти весь служебный текст проекта был набран
     10–12.5px (замер 05.10.2026: 329 объявлений мельче 12px в styles.css и app.js), и именно это,
     а не цвет, заставляло напрягать зрение. Замер браузером после правки: лента ЕИС 770 → 0,
     карточка закупки 99 → 0, заявки 56 → 0, дашборд 31 → 0.
       12 — метки (верхний регистр, разрядка), счётчики, даты: «кто и когда»;
       13 — подписи значений и служебный текст;
       14 — основной текст и цитаты;
       15 — значения в сводке (значение КРУПНЕЕ своей подписи);
       16-17 — заголовки карточек, 20-22 — заголовки экранов. */
  --fs-meta: 12px; --fs-sm: 13px; --fs-body: 14px; --fs-value: 15px; --fs-h3: 17px; --fs-h2: 20px; --fs-h1: 22px;

  /* радиусы, тени, сетка */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;
  --sh-1: 0 1px 2px rgba(60, 50, 35, .06);
  --sh-2: 0 1px 3px rgba(60, 50, 35, .08), 0 4px 12px rgba(60, 50, 35, .05);
  --sh-3: 0 4px 12px rgba(60, 50, 35, .10), 0 16px 40px rgba(60, 50, 35, .10);
  --sh-pop: 0 6px 20px rgba(60, 50, 35, .14);
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;

  /* типографика */
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Unbounded', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-ui: var(--font-body);

  /* легаси-алиасы (постепенно уходят вместе с инлайновыми стилями экранов) */
  --bg: var(--canvas);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --muted: var(--text-muted);
  --line: var(--border);
  --radius: var(--r-lg);
  --radius-sm: var(--r-sm);
  --accent-dark: var(--accent-hover);
  --green: var(--success);
  --green-soft: var(--success-soft);
  --red: var(--danger);
  --red-soft: var(--danger-soft);
  --amber: var(--warning);
  --amber-soft: var(--warning-soft);
  --blue: var(--info);
  --blue-soft: var(--info-soft);
}

/* ── ТЁМНАЯ ТЕМА ───────────────────────────────────── */
[data-theme="dark"] {
  --canvas: #141210;
  --surface: #1e1a16;
  --surface-2: #262219;
  --surface-3: #2f2a22;
  --border: #3a342b;
  --border-strong: #4e4638;
  --overlay: rgba(0, 0, 0, .6);

  --text: #ece7df;
  --text-2: #b8af9e;
  --text-muted: #b3a795;
  /* Кнопка с белым текстом на акценте (#fff7f0 на #d4794f) давала 2.98:1 — грубее всего в проекте
     (замер 05.10.2026). Вместо затемнения самого акцента (это бренд) на тёмной теме берём тёмные
     чернила: 5.69:1. Так делает и тёмная тема Material: на ярком тоне читается тёмный текст. */
  --on-accent: #1d1512;

  --accent: #d4794f;
  --accent-hover: #e08c63;
  --accent-active: #c26b43;
  --accent-soft: #2f2018;
  --accent-soft-border: #4a2f20;
  --accent-ring: rgba(212, 121, 79, .38);
  --accent-text: #e79267;

  --success: #7bab8a; --success-soft: #1c2a20; --success-border: #2f4436; --success-text: #8fc09d;
  --warning: #d9a441; --warning-soft: #2c2413; --warning-border: #463a1d; --warning-text: #e0b45f;
  --danger: #e07a6f;  --danger-soft: #2e1a18;  --danger-border: #4a2b28;  --danger-text: #eb9086;
  --info: #8b9bb8;    --info-soft: #1b2029;    --info-border: #2d3542;    --info-text: #a3b2cc;
  --neutral-soft: #26221b; --neutral-border: #3a3329; --neutral-text: #a89f90;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .4);
  --sh-3: 0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .55);
  --sh-pop: 0 6px 20px rgba(0, 0, 0, .55);
}

/* ============================================================
   УТИЛИТЫ ТИПОГРАФИКИ
   ============================================================
   Ими заменяются инлайновые кегли в разметке экранов. В app.js было 253 объявления мельче 12px
   (`style="font-size:11px"` и подобные) — именно они делали интерфейс «серым по серому». */
.t-meta  { font-size: var(--fs-meta); }
.t-sm    { font-size: var(--fs-sm); }
.t-body  { font-size: var(--fs-body); }
.t-value { font-size: var(--fs-value); font-weight: 600; }
.t-h3    { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.t-h2    { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.01em; }
/* метка: верхний регистр и разрядка — так подпись не спорит со значением */
.t-label { font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }

/* ============================================================
   ПРИМИТИВЫ
   ============================================================ */

/* КАРТОЧКА. Шапка на своей подложке: раньше она отличалась от тела только линией 1.28:1,
   и на длинном экране карточки сливались в один лист. */
.ui-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.ui-card + .ui-card { margin-top: 12px; }
.ui-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ui-card-head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.01em; }
.ui-card-body { padding: 14px 16px; }

/* БЕЙДЖ СОСТОЯНИЯ. Состояние несёт слово; цвет только усиливает. Без цветной полосы слева. */
.ui-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2); white-space: nowrap; }
.ui-badge.ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.ui-badge.warn { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.ui-badge.stop { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.ui-badge.info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); }
.ui-badge.mini { font-size: var(--fs-meta); font-weight: 700; padding: 2px 7px; }

/* ПОЛОСА ВЕРДИКТОВ: три-четыре ответа на «идём или нет», одной строкой. Ячейки разделены линиями. */
.ui-verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ui-verdicts > div { background: var(--surface); padding: 10px 14px; }
.ui-v-k { font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ui-v-v { font-size: var(--fs-value); font-weight: 700; margin-top: 2px; }
.ui-v-v.ok { color: var(--success); } .ui-v-v.warn { color: var(--warning); }
.ui-v-v.stop { color: var(--danger); } .ui-v-v.none { color: var(--text-muted); font-weight: 500; }
.ui-v-note { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }

/* СТРОКА «УСЛОВИЕ → ЗНАЧЕНИЕ → СОСТОЯНИЕ». Подпись 13, значение 15 (значение крупнее подписи),
   состояние — словом справа, источник — под ним. */
.ui-facts { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden; }
.ui-fact { display: grid; grid-template-columns: 190px minmax(0, 1fr) 124px; gap: 12px;
  align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--border); }
.ui-fact:first-child { border-top: 0; }
.ui-fact-k { color: var(--text-2); font-size: var(--fs-sm); }
.ui-fact-v { font-size: var(--fs-value); font-weight: 600; }
.ui-fact-v small { display: block; font-weight: 500; color: var(--text-muted); font-size: var(--fs-meta); margin-top: 2px; }
/* Адреса доставки: их бывает пять и восемь, каждый — своей строкой. В одну строку через «;» они
   не читаются, а «ещё 3» вместо адресов оператор считает потерей условия (владелец, 06.10.2026). */
.ui-addr { display: block; }
.ui-addr + .ui-addr { margin-top: 7px; }   /* строки одного значения (пени, штрафы, адреса) не слипаются */
.ui-fact-st { text-align: right; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.ui-fact-st small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--fs-meta); }
.ui-fact-st.stop { color: var(--danger); }
.ui-fact-st.warn { color: var(--warning); }
.ui-fact-st.ok { color: var(--success); }
.ui-fact-st.none { color: var(--text-muted); font-weight: 400; }
/* Узкий экран: подпись, значение и состояние в одну колонку. Фиксированные 190px подписи на
   телефоне выдавливают значение в столбик по два слова (видно было на #/ui). */
@media (max-width: 720px) {
  .ui-fact { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ui-fact-st { text-align: left; }
  .ui-fact-st small { display: inline; margin-left: 6px; }
}

/* ЦИТАТА: дословно, с документом. Показывается по клику — иначе два десятка цитат по 260 знаков
   и дают «простыню». */
.ui-quote { margin: 8px 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: var(--fs-body); line-height: 1.5; color: var(--text); }
.ui-quote .src { display: block; margin-top: 6px; font-size: var(--fs-meta); color: var(--text-muted); }
.ui-disclosure > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent-text); font-weight: 600; list-style: none; }
.ui-disclosure > summary::-webkit-details-marker { display: none; }
/* ГЛАВНОЕ РАСКРЫТИЕ В ОКНЕ — видимая строка-кнопка со стрелкой. Без неё клик по «Подробности…»
   выглядел как «ничего не произошло»: менялась только полоса прокрутки, и это замечал не каждый
   (замечание владельца 06.10.2026). Стрелка показывает и что это нажимается, и что раскрылось;
   содержимое дополнительно подкручивается в вид (см. обработчик toggle в app.js). */
.ui-modal-body > details.ui-disclosure > summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--fs-h3); font-weight: 700; color: var(--text); }
.ui-modal-body > details.ui-disclosure > summary::before {
  content: '▸'; color: var(--accent-text); font-size: 13px; line-height: 1; transition: transform .15s ease; }
.ui-modal-body > details.ui-disclosure[open] > summary::before { transform: rotate(90deg); }
.ui-modal-body > details.ui-disclosure > summary:hover { border-color: var(--accent); background: var(--accent-soft); }
.ui-modal-body > details.ui-disclosure[open] > summary { margin-bottom: 10px; }

/* ЧИСЛО: выручка, недоимка, дела. Значение крупное, подпись меткой. */
.ui-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.ui-num { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; }
.ui-num .k { font-size: var(--fs-meta); color: var(--text-muted); }
.ui-num .v { font-size: var(--fs-value); font-weight: 700; }

/* СТРОКА СОСТОЯНИЯ: «Суды: не проверялись» + действие, меняющее ответ. */
.ui-line { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 12px;
  padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: var(--fs-sm); }

/* СПИСКИ ССЫЛОК: карточки судебных дел (КАД), сообщения Федресурса, источники.
   Оператор должен уметь открыть первоисточник, а не читать «23 дела» без подробностей. */
.eis-cases { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.eis-case { font-size: var(--fs-sm); color: var(--accent-text); text-decoration: none;
  padding: 5px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  word-break: break-word; }
.eis-case:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }

/* ЗНАЧЕНИЕ, КОТОРОЕ КОПИРУЕТСЯ ПО КЛИКУ (ИНН, ОГРН): пунктир подчёркивает, что оно живое. */
.copyable { cursor: pointer; border-bottom: 1px dashed var(--border-strong); }
.copyable:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

/* ============================================================
   МОДАЛЬНОЕ ОКНО (центр экрана)
   ============================================================
   Раскрытие закупки из ленты — здесь: широкое окно по центру, важное сразу, детализация внутри
   по раскрытию. Что НЕ подошло и почему (чтобы не пробовать снова):
     · панель справа на 780px — узкая колонка не даёт места сводке, лента перекрыта, и у окна
       не было своего скроллера, поэтому колесо уходило на ленту (владелец, 06.10.2026);
     · раскрытие прямо в строке ленты — «ужас разворачивать прямо в ленте» (владелец, 06.10.2026):
       список теряет форму, длинная строка рвёт чтение таблицы.
   Размер: min(1180px, 100%) — сводка условий и заказчик встают в две колонки, как им и надо. */
.ui-modal-ov { position: fixed; inset: 0; z-index: 70; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.ui-modal { width: min(1180px, 100%); max-height: min(92vh, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3);
  display: flex; flex-direction: column; overflow: hidden; }
.ui-modal-head { flex: none; padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.ui-modal-head h2 { margin: 0 0 6px; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.ui-modal-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; font-size: var(--fs-sm); color: var(--text-2); }
.ui-modal-meta b { color: var(--text); }
/* min-height: 0 и overflow: auto — НЕ косметика: без них флекс-элемент не сжимается ниже своего
   содержимого, тело вырастает за пределы окна, и прокручивать становится НЕЧЕМ (ровно этот
   дефект и был у первой панели: 2014px содержимого при 900px окна, колесо уходило на ленту). */
.ui-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: 16px 20px 20px; }
.ui-modal-foot { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 20px; background: var(--surface-2); border-top: 1px solid var(--border); }
/* Две колонки: слева сводка условий (её больше), справа заказчик */
.ui-modal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .ui-modal-grid { grid-template-columns: minmax(0, 1fr); } }
/* В окне подпись строки короче, состояние у́же: значение и так длинное, ему нужно место */
.ui-modal .ui-fact { grid-template-columns: 150px minmax(0, 1fr) 108px; }
/* Правая колонка растянута на всю высоту строки, а её содержимое «липнет» к верху: пока оператор
   прокручивает условия, вердикт заказчика и его числа остаются на виду (иначе справа была бы
   пустота — сводка втрое длиннее блока заказчика). */
.ui-modal-grid > div { align-self: stretch; }
.ui-sticky { position: sticky; top: 0; }
/* Пока окно открыто, страница за ним не прокручивается (класс ставит app.js) */
html.ui-lock, html.ui-lock body { overflow: hidden; }

/* СТРАНИЦА-СПРАВОЧНИК КИТА (#/dev/ui) */
.ui-kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ui-kit-grid .ui-card-body > * + * { margin-top: 10px; }
.ui-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-sw > div { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; width: 104px; font-size: var(--fs-meta); }
.ui-sw i { display: block; height: 34px; }
.ui-sw span { display: block; padding: 4px 6px; color: var(--text-muted); }
.ui-type-row { display: flex; align-items: baseline; gap: 12px; }
.ui-type-row .s { color: var(--text-muted); font-size: var(--fs-meta); width: 84px; }
.ui-rule { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--fs-sm); align-items: baseline; }
.ui-rule b { color: var(--text); }

/* ГРУППА В СВОДКЕ: «ДЕНЬГИ», «СРОКИ И ДОСТАВКА», «ДОПУСК К ЗАКУПКЕ» */
.ui-group { font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 16px 0 6px; }

/* СТРОКА ПРИЧИНЫ: бейдж важности + заголовок + объяснение. Без цветной полосы слева. */
.ui-rsn { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--border); }
.ui-rsn b { font-weight: 600; font-size: var(--fs-body); }
.ui-rsn .exp { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }

/* КОРОБКА: часть карточки, которую надо отделить (блок заказчика в панели) */
.ui-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 14px; margin-top: 12px; }