/* ППкафе · учёт — ОБЩИЙ СЛОЙ КОМПОНЕНТОВ (дизайн «Б + В», 04.10.2026).
   Основа вида — школа Б «Тёплая витрина» (белые мягкие карточки на полотне ПП, одна тёмная
   плитка на экран, круглые фото, степпер), смысл и жизнь — школа В «Лента смены» (стопка
   «Требует внимания», живые числа, лента, цепочка шагов, полоса дней).
   Как применять — docs/dizain-sistema.md. Значения — ТОЛЬКО из tokens.css; экранный css
   ДОПОЛНЯЕТ этот файл (раскладка экрана), а не переписывает компоненты.
   Движение: только transform/opacity, ease-out без перелёта, ≤ 600 мс, один раз; на телефоне
   без размытия; prefers-reduced-motion — без движения (в конце файла). */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.errbar{position:fixed;top:0;left:0;right:0;z-index:var(--z-err);background:var(--orange);color:#3a1606;padding:var(--s-3) var(--s-4);font-weight:600;font-size:var(--fs-sm)}

/* Переход между страницами (View Transitions API, без JS). Только прозрачность: у чистого
   fade нет слоёв, которым есть с чем разъехаться (scale + translateY дрожали). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:uchet-fade-out .12s linear both}
  ::view-transition-new(root){animation:uchet-fade-in .18s linear both}
  @keyframes uchet-fade-out{to{opacity:0}}
  @keyframes uchet-fade-in{from{opacity:0}}
  /* Рабочая колонка ждёт window.revealMain() (auth.js + конец init() экрана) и показывается
     один раз, уже с данными. Только прозрачность. */
  .main{opacity:0}
  .main.is-ready{opacity:1;transition:opacity var(--t-base) linear}
}

.shell{display:flex;min-height:100vh;background:var(--bg)}

/* =============================== МЕНЮ ===============================
   ПК — тёмно-зелёная плашка (школа Б, образец 14), отстоит от краёв окна; рабочая область
   светлая. Телефон — СВЕТЛАЯ верхняя полоса (план dizain-bv, п. 1: тёмная полоса сверху
   читалась тёмной темой). Группы — капитель, счётчики живые (UI.menu, школа В, 05 + 24). */
:root{
  --side-w:232px;
  --side-bg:var(--plate); --side-line:rgba(255,255,255,.12); --side-ink:#fff;
  --side-muted:rgba(255,255,255,.80); --side-hover:rgba(255,255,255,.08); --side-active:rgba(255,255,255,.15);
  --side-cap:rgba(255,255,255,.66);
}
.side{width:var(--side-w);flex-shrink:0;background:var(--side-bg);color:var(--side-ink);
  margin:var(--s-3) 0 var(--s-3) var(--s-3);border-radius:var(--r-xl);padding:var(--s-4) var(--s-3) var(--s-3);
  display:flex;flex-direction:column;gap:2px;position:sticky;top:var(--s-3);height:calc(100vh - 2 * var(--s-3));
  overflow-y:auto;scrollbar-width:none;
  /* тонкая диагональная штриховка в углу — тот же приём, что у тёмной плитки */
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px);
  background-size:100% 150px;background-repeat:no-repeat}
.side::-webkit-scrollbar{display:none}
.brand{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-1) var(--s-2) var(--s-4);text-decoration:none;border-radius:var(--r-md)}
.brand-dot{width:36px;height:36px;border-radius:var(--r-md);background:var(--bar);color:var(--plate);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-cap);flex-shrink:0}
.brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.brand-name{font-weight:700;font-size:var(--fs-body);color:var(--side-ink);letter-spacing:-.01em}
.brand-sub{font-size:var(--fs-cap);color:var(--side-cap)}
.nav-cap,.nav-group{display:block;padding:var(--s-4) var(--s-3) var(--s-2);font-size:var(--fs-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--side-cap)}
.brand + .nav-cap{padding-top:var(--s-1)}
.nav-item{display:flex;align-items:center;gap:var(--s-3);min-height:40px;padding:var(--s-2) var(--s-3);border-radius:var(--r-nav);
  color:var(--side-muted);font-size:var(--fs-sm);font-weight:500;text-decoration:none;
  transition:background-color var(--t-fast),color var(--t-fast)}
a.nav-item:hover{background:var(--side-hover);color:#fff}
.nav-item.is-active,.nav-item.is-active:hover{background:var(--side-active);color:#fff;font-weight:600}
.nav-item.is-active .ico{opacity:1;color:var(--lime)}
.nav-item.is-soon{color:var(--side-cap);cursor:default}
.nav-item:focus-visible,.brand:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.ico{width:18px;height:18px;flex-shrink:0;fill:currentColor;opacity:.85}
.ico .ico-line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico .ico-hole{fill:var(--side-bg)}
a.nav-item:hover .ico .ico-hole{fill:#1d462a}
.nav-item.is-active .ico .ico-hole{fill:#2f5a3c}
/* счётчик: нейтральный — светлая пилюля на плашке; «внимание» — тёплый, тёмный текст (6:1) */
.badge{position:relative;isolation:isolate;margin-left:auto;min-width:24px;height:24px;padding:0 var(--s-2);border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.16);color:#fff}
.badge[hidden]{display:none}
.badge-orange{background:rgba(255,255,255,.16);color:#fff}
.badge.is-warm,#badge-stock{background:var(--orange);color:#3a1606}
.badge number-flow{--number-flow-mask-height:.1em}
/* «живые числа · 12:40» внизу плашки: когда меню последний раз сверялось с сервером */
.side-live{display:flex;align-items:center;gap:var(--s-2);margin:auto var(--s-3) var(--s-2);padding-top:var(--s-3);font-size:var(--fs-cap);color:var(--side-cap)}
.side-live[hidden]{display:none}
.side-live i{width:8px;height:8px;border-radius:50%;background:var(--lime);flex-shrink:0}
.side-live + .user-box{margin-top:0}
html[data-role="production"] .nav-cap,html[data-role="production"] .side-live{display:none}

/* =============================== КОЛОНКА =============================== */
.main{flex:1;min-width:0;padding:var(--s-6) var(--s-8) var(--s-8);display:flex;flex-direction:column;gap:var(--gap)}
.head{display:flex;align-items:flex-end;gap:var(--s-3) var(--s-4);flex-wrap:wrap}
.head h1{margin:0;font-size:var(--fs-h1);font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.head-sub{font-size:var(--fs-cap);color:var(--muted)}
.demo-mark{color:var(--orange-ink)}
.head-pills{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}

/* полоса сводки (старые экраны): вместо плиток с нулями */
.summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-6);font-size:var(--fs-cap);color:var(--muted);
  padding:0 0 2px;border-bottom:1px solid var(--line-2)}
.sum{display:inline-flex;align-items:baseline;gap:var(--s-2);padding:var(--s-2) 0}
.sum b{font-size:var(--fs-h3);font-weight:600;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum.is-alert b{color:var(--orange-ink)}
button.sum{border:0;background:0;font:inherit;color:var(--muted);cursor:pointer;border-radius:var(--r-sm)}
button.sum:hover b{text-decoration:underline}
button.sum:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}

/* =============================== КАРТОЧКА ===============================
   .card — белая мягкая карточка (новое имя); .panel — она же у старых экранов (таблица
   внутри, поле — в .panel-head/.panel-body). Заголовок карточки — .card-h: слева h2 (.card-t)
   и мета (.card-m), справа инструменты (.card-tools). */
.card,.panel{background:var(--card);border:0;box-shadow:var(--sh-card);border-radius:var(--r-lg);min-width:0}
.card{padding:var(--pad-card);display:flex;flex-direction:column;gap:var(--s-4)}
.panel{display:flex;flex-direction:column;overflow:hidden}
.card-h{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;min-height:32px}
.card-h h2,.card-t{margin:0;font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--ink);line-height:var(--lh-tight)}
.card-m{font-size:var(--fs-cap);color:var(--muted)}
.card-tools{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.card-foot{font-size:var(--fs-cap);color:var(--muted)}
.panel-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--line-2)}
.panel-title{font-weight:600;font-size:var(--fs-h3);color:var(--ink);letter-spacing:-.015em}
.panel-meta{font-size:var(--fs-cap);color:var(--muted)}
.panel-tools{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
.panel-foot{padding:var(--s-3) var(--s-4);border-top:1px solid var(--line-2);font-size:var(--fs-cap);color:var(--muted);display:flex;gap:var(--s-4);flex-wrap:wrap}
.panel-foot span{display:inline-flex;align-items:center;gap:var(--s-2)}

/* ============================ ПЕРЕКЛЮЧАТЕЛЬ ============================
   .seg — дорожка с белой подложкой, которая ПЕРЕЕЗЖАЕТ к выбранному (UI.seg, образец 02).
   Выбор — атрибутом aria-pressed (или aria-selected у вкладок). Счётчик — <small> в кнопке. */
.seg{position:relative;display:inline-flex;background:var(--bar);border:0;border-radius:var(--r-pill);padding:var(--s-1);isolation:isolate}
.seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 var(--s-4);border:0;background:0;border-radius:var(--r-pill);
  font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:color var(--t-fast)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--sh-knob)}
.seg.has-pill button[aria-pressed="true"],.seg.has-pill button[aria-selected="true"]{background:transparent;box-shadow:none}
.seg button small{font-size:var(--fs-cap);font-weight:500;color:var(--muted-2);font-variant-numeric:tabular-nums}
.seg button:focus-visible{outline:2px solid var(--green-2);outline-offset:1px}
.seg-pill{position:absolute;z-index:0;top:var(--s-1);bottom:var(--s-1);left:0;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--sh-knob);pointer-events:none}
.seg-pill.is-hidden{opacity:0}

.search{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill)}
.search input{border:0;background:0;font:inherit;font-size:var(--fs-sm);color:var(--ink);width:150px;padding:6px 0}
.search input:focus{outline:0}
.search:focus-within{border-color:var(--green-2)}

.pill{display:inline-flex;align-items:center;min-height:36px;padding:0;border:1px solid var(--line-3);border-radius:var(--r-pill);background:var(--card);font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.pill-select{position:relative;cursor:pointer}
.pill-select select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink);padding:var(--s-2) 30px var(--s-2) var(--s-4);border-radius:var(--r-pill);cursor:pointer;max-width:240px}
.pill-select select:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.pill-caret{position:absolute;right:var(--s-3);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted);font-size:var(--fs-cap)}

/* =============================== ТАБЛИЦА =============================== */
.tbl-wrap{overflow:auto;max-height:min(62vh,620px)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-sm)}
.tbl th{position:sticky;top:0;z-index:2;background:var(--card-tint);text-align:right;font-size:var(--fs-cap);font-weight:500;
  color:var(--muted);padding:var(--s-2) var(--s-3);white-space:nowrap;border-bottom:1px solid var(--line-3)}
.tbl th.th-dish{text-align:left;left:0;z-index:3;min-width:230px;max-width:280px;padding-left:var(--s-4);border-right:1px solid var(--line-2)}
.tbl tbody td{height:var(--row-h,32px);padding:0 var(--s-3);text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-2);
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tbl tbody tr:hover td{background:var(--green-soft)}
.tbl td.td-dish{position:sticky;left:0;z-index:1;background:var(--card);text-align:left;font-weight:500;color:var(--ink);border-right:1px solid var(--line-2);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;padding-left:var(--s-4)}
.tbl tbody tr:hover td.td-dish{background:var(--green-soft)}
.tbl td.td-empty{text-align:left;color:var(--muted);height:auto;padding:var(--s-4);white-space:normal}
.tbl td.q-low{color:var(--orange-ink);font-weight:700}
.tbl td.q-mid{color:var(--amber);font-weight:600}
.tbl td.q-zero{color:var(--ghost)}
.tbl td.q-neg{color:var(--orange-ink);font-weight:700}
.tbl tfoot td{position:sticky;bottom:0;z-index:2;background:var(--card);height:36px;padding:0 var(--s-3);text-align:right;
  font-weight:700;color:var(--ink);border-top:1px solid var(--line-3);font-variant-numeric:tabular-nums}
.tbl tfoot td.tf-label{text-align:left;left:0;z-index:3;padding-left:var(--s-4);border-right:1px solid var(--line-2);color:var(--muted);font-weight:600;font-size:var(--fs-cap)}
.tbl th.th-sum{color:var(--ink-2)}
.tbl th.th-vending{color:var(--muted-2)}
.tbl td.td-sum{font-weight:700;color:var(--ink)}
.tbl td.td-left,.tbl th.th-left{text-align:left}
/* действие строки — одно, по наведению; с клавиатуры достижимо (opacity, а не visibility) */
.tbl th.th-act,.tbl td.td-act,.tbl tfoot td.tf-act{position:sticky;right:0;width:96px;background:var(--card);text-align:right;padding-right:var(--s-3)}
.tbl th.th-act{background:var(--card-tint)}
.tbl tbody tr:hover td.td-act{background:var(--green-soft)}
.tbl td.td-act .btn-row{opacity:0;pointer-events:none}
.tbl tbody tr:hover td.td-act .btn-row,.tbl td.td-act .btn-row:focus-visible{opacity:1;pointer-events:auto}

/* =============================== КНОПКИ =============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:40px;padding:var(--s-2) var(--s-4);border:1px solid var(--line-3);border-radius:var(--r-btn);background:var(--card);
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);cursor:pointer;text-decoration:none;
  transition:background-color var(--t-fast),border-color var(--t-fast)}
.btn:hover{background:var(--bg)}
/* главная кнопка ПП: #1e7a3c (5,4:1 с белым), наведение — тёмно-зелёная */
.btn-primary{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 1px 2px rgba(18,60,30,.18)}
.btn-primary:hover{background-color:var(--green-2);border-color:var(--green-2)}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
/* тихая кнопка в карточке («Развернуть», «Показать все события») */
.btn-ghost{min-height:36px;padding:0 var(--s-3);border:1px solid var(--line-3);border-radius:var(--r-sm);background:var(--card);
  font:inherit;font-size:var(--fs-sm);font-weight:500;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  transition:background-color var(--t-fast),border-color var(--t-fast)}
.btn-ghost:hover{border-color:var(--bar-mid);background:var(--green-soft)}
.btn-ghost:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.btn-ghost[hidden]{display:none}
/* действие в строке («Продано», «Передать») */
.btn-row{min-height:32px;padding:var(--s-1) var(--s-3);border:1px solid var(--line-3);border-radius:var(--r-pill);background:var(--card);
  color:var(--green);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast);
  -webkit-tap-highlight-color:transparent}
.btn-row:active{background:var(--bar)}
.btn-row:hover{background:var(--green-soft);border-color:var(--bar-mid)}
.btn-row:disabled{color:var(--muted-2);border-color:var(--line);cursor:default;background:var(--card)}
.btn-row:focus-visible{outline:2px solid var(--green-2);outline-offset:1px}
.btn-row + .btn-row{margin-left:6px}
.row-err{margin-top:2px;font-size:var(--fs-cap);color:var(--orange-ink)}
/* комментарий клиента к заказу (кухня, точка, «Заказы» — план бота, блок D): тёплая подложка —
   прочитать до сборки; подпись «Комментарий:» — <b>, текст клиента — только textContent */
.cmt{display:block;margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--orange-soft);color:var(--ink);
  font-size:var(--fs-sm);line-height:var(--lh);overflow-wrap:anywhere;white-space:pre-line}
.cmt b{font-weight:600;color:var(--orange-ink)}

/* ========================== ЧИПЫ И ТОЧКИ СТАТУСА ========================== */
.chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 var(--s-2);border-radius:var(--r-pill);font-size:var(--fs-cap);font-weight:500;line-height:1.5}
.chip[hidden]{display:none}
.chip-amber{background:var(--amber-soft);color:var(--amber-ink)}
.chip-green{background:var(--ok-soft);color:var(--ok)}
.chip-grey{background:var(--grey-soft);color:var(--ink)}
.chip-orange,.chip-warm{background:var(--orange-soft);color:var(--orange-ink)}
.chip-red{background:var(--red-soft);color:var(--red)}
/* точка статуса: зелёная — в порядке/сделано, тёплая — внимание, тёплое кольцо — ждёт,
   красная — сбой, серая — нет данных/ноль */
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--hi)}
.dot-ok{background:var(--hi)}
.dot-orange,.dot-warm,.dot.is-vnimanie{background:var(--orange)}
.dot-wait,.dot.is-zhdet{background:var(--card);box-shadow:inset 0 0 0 2.5px var(--orange)}
.dot-red,.dot.is-oshibka{background:var(--red)}
.dot-amber{background:var(--amber)}
.dot-grey,.dot.is-pusto{background:var(--ghost)}

/* строка-якорь: действие ниже длинного списка («Заказы на сборку: 1 ↓», «Заявки по точкам») */
.jump{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:44px;padding:0 var(--s-4);
  border:0;box-shadow:var(--sh-card);border-radius:var(--r-lg);background:var(--card);
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.jump[hidden]{display:none}
.jump b{font-weight:600}
.jump-go{margin-left:auto;font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.jump:active{background:var(--line-2)}
.jump:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
@keyframes pt-jump{from{background-color:var(--green-soft)}}
.jump.is-flash{animation:pt-jump 1.4s ease-out}
.panel-title[tabindex]:focus{outline:0}
.panel-title[tabindex]:focus-visible{outline:2px solid var(--green-2);outline-offset:2px;border-radius:4px}

/* пустое состояние — словами: что произошло и что делать (не пустой прямоугольник) */
.empty{padding:var(--s-6) var(--s-4);text-align:left;display:flex;flex-direction:column;gap:var(--s-1);align-items:flex-start}
.empty-title{font-weight:600;font-size:var(--fs-body);color:var(--ink)}
.empty-sub{font-size:var(--fs-sm);color:var(--muted);max-width:52ch}

/* ============================ ФОТО БЛЮД ============================
   Круглые (школа Б). Нет фото — плитка с буквой, не серый квадрат; «похожее фото» — title. */
.th{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--line-2);
  box-shadow:var(--sh-line);display:inline-flex;align-items:center;justify-content:center}
.th img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
.th img.is-in{opacity:1}
.th-none{background:var(--grey-soft);color:var(--ink-2);font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.dish-mini{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;vertical-align:middle;margin-right:var(--s-2);background:var(--grey-soft)}
.td-dish .dish-mini{margin-top:-2px}
.mg-mini{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-right:var(--s-3)}
.alert-mini{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;margin-right:var(--s-2)}

/* шапка с полосой-сценой (кухня; у точки — свой полный .hero в point.css) */
.hero{position:relative;display:flex;align-items:center;gap:var(--s-3);min-height:104px;padding:var(--s-4);
  background:var(--bg);overflow:hidden;isolation:isolate}
.hero-img{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:64%;background-repeat:no-repeat;
  background-size:contain;background-position:right center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}
.hero-text{position:relative;display:flex;flex-direction:column;gap:var(--s-1);max-width:58%;min-width:0}
.hero h1{margin:0;font-size:var(--fs-num);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.hero-sub{font-size:var(--fs-cap);color:var(--muted);line-height:1.35}
/* строка, которую только что тронули: мягкая вспышка, гаснет сама */
@keyframes v6-flash{from{background-color:var(--orange-soft)}}

/* =============================== ДИАЛОГ =============================== */
.dlg{border:0;border-radius:var(--r-lg);box-shadow:var(--sh-pop);background:var(--card);color:var(--ink);padding:0;width:min(420px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(18,60,30,.32)}
.dlg-form{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6) var(--s-6) var(--s-4)}
.dlg-title{margin:0;font-size:var(--fs-h3);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.dlg-sub{margin:-6px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.dlg-field{display:flex;flex-direction:column;gap:var(--s-1)}
.dlg-label{font-size:var(--fs-cap);font-weight:600;color:var(--ink-2)}
.dlg-field .pill{display:flex;min-height:44px}
.dlg-field .pill-select select{flex:1;max-width:none;width:100%;padding:var(--s-3) 28px var(--s-3) var(--s-3)}
.dlg-input{font:inherit;font-size:var(--fs-body);font-weight:600;color:var(--ink);width:100%;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--line-3);border-radius:var(--r-sm);background:var(--card)}
.dlg-input:focus-visible{outline:2px solid var(--green-2);outline-offset:1px}
.dlg-hint{font-size:var(--fs-cap);color:var(--muted)}
.dlg-err{margin:0;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);background:var(--orange-soft);color:var(--orange-ink);font-size:var(--fs-sm)}
.dlg-err[hidden]{display:none}
.dlg-actions{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-1)}

/* ======================== ПЛИТКИ (школа Б, образец 15) ========================
   .tile-dark — ОДНА на экран: главная цифра. .tile — светлая плитка-число:
   .tile-l подпись капителью, .tile-v число, .tile-s пояснение. */
.tile-dark{position:relative;overflow:hidden;isolation:isolate;background:var(--plate);color:var(--on-plate);border-radius:var(--r-xl);box-shadow:var(--sh-raised)}
.tile-dark::before{content:"";position:absolute;inset:0 0 auto auto;width:62%;height:70%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 10px);
  -webkit-mask-image:linear-gradient(225deg,#000 10%,transparent 70%);mask-image:linear-gradient(225deg,#000 10%,transparent 70%)}
.tile-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 var(--s-3);border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);color:var(--on-plate-2);font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.tile{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.tile-l{font-size:var(--fs-cap);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tile-v{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.03em;color:var(--ink);line-height:var(--lh-tight);font-variant-numeric:tabular-nums}
.tile-s{font-size:var(--fs-cap);color:var(--muted)}
/* штриховка «прошлый период» (образец 16) */
.dots{background-color:#f4faf1;background-image:radial-gradient(rgba(46,158,79,.55) 1px,transparent 1.3px);background-size:5px 5px;box-shadow:inset 0 0 0 1px rgba(46,158,79,.45)}

/* ===================== ЖИВЫЕ ЧИСЛА (образцы 01 и 24) =====================
   number-flow (MIT, static/vendor) — цифры прокручиваются по разрядам, ширина не дёргается.
   .live — число, которое меняется само (опрос): при изменении фон коротко вспыхивает
   (зелёным — выросло, тёплым — упало) и рядом мелькает ▲/▼ (UI.flash). */
number-flow{font-variant-numeric:tabular-nums;--number-flow-mask-height:.18em}
.live{position:relative;isolation:isolate}
.live::after{content:"";position:absolute;inset:-3px -8px;border-radius:var(--r-sm);z-index:-1;background:rgba(46,158,79,.2);opacity:0;pointer-events:none}
.live.is-down::after{background:rgba(242,121,59,.2)}
.live-arrow{display:inline-block;margin-left:6px;font-size:.5em;vertical-align:.45em;color:var(--hi);opacity:0}
.live.is-down .live-arrow{color:var(--orange-ink)}

/* ================ СТОПКА «ТРЕБУЕТ ВНИМАНИЯ» (школа В, образец 22) ================
   UI.stack. Пункт: точка уровня (сбой — красная, внимание — тёплая, ждёт — кольцо),
   заголовок, пояснение, переход. От 3 пунктов свёрнута: виден верхний и края остальных. */
.stack{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.stack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2);position:relative}
.stack-it{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4);
  background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 1px var(--line-3),0 1px 2px rgba(18,60,30,.05);position:relative;z-index:2}
.stack-it[hidden]{display:none}
.stack-it.has-foto{grid-template-columns:10px 40px minmax(0,1fr) auto}
.stack-it.is-oshibka{box-shadow:0 0 0 1px #ecc9be,0 1px 2px rgba(18,60,30,.05)}
.stack-f{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bar);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--muted)}
.stack-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.stack-t b{font-weight:600;font-size:var(--fs-body);color:var(--ink);line-height:1.3}
.stack-t span{font-size:var(--fs-sm);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.stack-go{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none}
.stack-go:hover{background:var(--green-soft);color:var(--green-2)}
.stack-go:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.stack-go svg{width:18px;height:18px}
.stack-it .btn-row{margin-right:var(--s-2)}
.stack-edges{position:relative;height:16px;margin-top:-20px;z-index:1}
.stack-edges i{position:absolute;left:var(--s-3);right:var(--s-3);top:0;height:16px;border-radius:0 0 var(--r-md) var(--r-md);background:var(--card);box-shadow:0 0 0 1px var(--line-3)}
.stack-edges i + i{left:var(--s-6);right:var(--s-6);top:6px;z-index:-1;background:var(--card-tint)}
.stack-edges.has-2{height:22px}
.stack[data-open="true"] .stack-edges{display:none}
.stack-more{align-self:flex-start}
.card-h .stack-more{margin-left:auto}
.stack-ok{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 1px var(--line-3);font-size:var(--fs-sm);color:var(--muted)}
.stack-ok b{color:var(--ink);font-weight:600}

/* ======================== ЛЕНТА (школа В, образец 23) ========================
   UI.feed: события новыми сверху, день — разделителем, новое после открытия — точкой. */
.feed{list-style:none;margin:0;padding:0;position:relative}
.feed-day{padding:var(--s-4) 0 var(--s-2);font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.feed-day:first-child{padding-top:var(--s-1)}
.feed-ev{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s-3);align-items:start;padding:var(--s-2) 0;position:relative}
.feed-ev + .feed-ev::before{content:"";position:absolute;left:15.5px;top:-8px;height:16px;width:1px;background:var(--line-3)}
.feed-i{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bar);color:var(--green);position:relative;z-index:1}
.feed-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feed-i.is-kuhnya{background:#eef1f6;color:#3d5170}
.feed-i.is-tochki{background:var(--grey-soft);color:var(--ink-2)}
.feed-i.is-warm{background:var(--orange-soft);color:var(--orange-ink)}
.feed-t{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:1px}
.feed-t b{font-size:var(--fs-sm);font-weight:600;color:var(--ink);line-height:1.3}
.feed-t span{font-size:var(--fs-cap);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.feed-r{display:flex;align-items:center;gap:6px;padding-top:2px;font-size:var(--fs-cap);color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.feed-new{width:8px;height:8px;border-radius:50%;background:var(--hi)}
.feed-empty{padding:var(--s-4) 0 var(--s-1);color:var(--muted);font-size:var(--fs-sm)}

/* ===================== ЦЕПОЧКА ШАГОВ (школа В, образец 21) =====================
   UI.chain: «подана → отгружена → принята». Сделано — зелёный круг с галочкой, ждёт —
   тёплое кольцо, впереди — серое, с расхождением — тёплый круг. .is-row — в строку (кухня),
   .is-tight — шаг одной строкой (экран точки). */
.chain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.chain-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--s-3);position:relative;padding-bottom:var(--s-4)}
.chain-step:last-child{padding-bottom:0}
.chain-step::before,.chain-step::after{content:"";position:absolute;left:10px;top:24px;bottom:2px;width:2px;border-radius:1px;background:var(--line-3)}
.chain-step::after{background:var(--hi);transform-origin:top;transform:scaleY(0)}
.chain-step.is-line::after{transform:scaleY(1)}
.chain-step:last-child::before,.chain-step:last-child::after{display:none}
.chain-o{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px var(--ghost);background:var(--card);position:relative;z-index:1}
.chain-o svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.chain-step.is-done .chain-o{background:var(--hi);box-shadow:none}
.chain-step.is-done .chain-o svg{opacity:1}
.chain-step.is-cur .chain-o{box-shadow:inset 0 0 0 2.5px var(--orange)}
.chain-step.is-cur .chain-o::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.chain-step.is-cur .chain-o svg,.chain-step.is-next .chain-o svg{display:none}
.chain-step.is-warn .chain-o{background:var(--orange);box-shadow:none}
.chain-step.is-warn .chain-o svg{opacity:1}
.chain-t{display:flex;flex-direction:column;gap:1px;min-width:0;padding-top:1px}
.chain-t b{font-size:var(--fs-body);font-weight:600;color:var(--ink);line-height:1.3}
.chain-step.is-next .chain-t b{color:var(--muted-2);font-weight:500}
.chain-t span{font-size:var(--fs-cap);color:var(--muted)}
.chain-step.is-cur .chain-t span{color:var(--orange-ink)}
.chain.is-tight .chain-step{padding-bottom:var(--s-3)}
.chain.is-tight .chain-t{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:var(--s-2)}
.chain.is-row{flex-direction:row;align-items:flex-start;gap:0}
.chain.is-row .chain-step{grid-template-columns:auto;justify-items:center;text-align:center;flex:1;padding:0 var(--s-1);gap:var(--s-1)}
.chain.is-row .chain-step::before,.chain.is-row .chain-step::after{left:calc(50% + 13px);right:calc(-50% + 13px);top:10px;bottom:auto;width:auto;height:2px}
.chain.is-row .chain-step::after{transform-origin:left;transform:scaleX(0)}
.chain.is-row .chain-step.is-line::after{transform:scaleX(1)}
.chain.is-row .chain-t b{font-size:var(--fs-cap)}
.chain.is-row .chain-t span{white-space:pre-line;line-height:1.35}

/* ================== ПОЛОСА ДНЕЙ (идея образца 25, код не брали — AGPL) ==================
   UI.strip: квадрат на день, цвет — итог сверки (dengi.sverka_kod). Подсказка — .tip. */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;height:28px;align-items:stretch}
.strip i{display:block;border-radius:4px;background:var(--hi);position:relative;cursor:default}
.strip i.is-dobor::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;border-radius:4px 4px 0 0;background:var(--orange)}
.strip i.is-raznica{background:var(--orange)}
.strip i.is-oshibka{background:var(--red)}
.strip i.is-net{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--orange)}
.strip i.is-pusto{background:var(--grey-soft);box-shadow:inset 0 0 0 1.5px var(--ghost)}
.strip i.is-do{background:var(--line-2)}
.strip i.is-zhdem{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--ghost)}
.strip i:hover,.strip i.is-sel{opacity:.82}
.strip i:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);font-size:var(--fs-cap);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--hi);position:relative;overflow:hidden}
.legend i.is-dobor::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--orange)}
.legend i.is-net{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--orange)}
.legend i.is-pusto{background:var(--grey-soft);box-shadow:inset 0 0 0 1.5px var(--ghost)}
.legend i.is-do{background:var(--line-2)}
.legend i.is-raznica{background:var(--orange)}
.legend i.is-oshibka{background:var(--red)}
.tip{position:fixed;z-index:var(--z-tip);pointer-events:none;background:var(--plate);color:#fff;border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font-size:var(--fs-cap);line-height:1.35;max-width:260px;box-shadow:var(--sh-pop)}
.tip b{display:block;font-weight:600}
.tip-l{display:block}
.tip[hidden]{display:none}

/* ======================= ПИЛЮЛЯ-ОТКЛИК (образец 04) =======================
   UI.toast(text) — «Привоз №15 принят · 34 из 34». С действием (.toast-act) и кольцом
   отсчёта (.toast-ring) — «Продано · Отменить» на экране точки: отмена настоящая
   (/api/sale/otmena), кольцо — оставшееся время из 60 секунд. */
.toast{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--s-4) + env(safe-area-inset-bottom));z-index:var(--z-toast);
  display:flex;align-items:center;gap:var(--s-3);max-width:calc(100vw - 32px);min-height:48px;padding:var(--s-2) var(--s-4) var(--s-2) var(--s-3);border-radius:var(--r-pill);
  background:var(--plate);color:#fff;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--sh-pop)}
.toast[hidden]{display:none}
.toast > svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--bar-mid);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.toast-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.toast-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-t small{font-size:var(--fs-cap);color:var(--on-plate-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast-act{flex-shrink:0;min-height:40px;min-width:44px;padding:0 var(--s-4);border:0;border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:#fff;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.26)}
.toast-act:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.toast-act:disabled{opacity:.6;cursor:default}
.toast-x{flex-shrink:0;width:40px;height:40px;margin-right:-8px;border:0;border-radius:50%;background:transparent;color:var(--on-plate-3);font-size:20px;line-height:1;cursor:pointer}
.toast-x:hover{color:#fff;background:rgba(255,255,255,.1)}
.toast-x:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.toast-ring{width:22px;height:22px;flex-shrink:0;transform:rotate(-90deg)}
.toast-ring circle{fill:none;stroke-width:2.6}
.toast-ring .bg{stroke:rgba(255,255,255,.18)}
.toast-ring .fg{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:56.55;stroke-dashoffset:0}

/* ========================= СТЕППЕР (образец 20) =========================
   − [поле] + : кнопки 44×44 круглые светло-зелёные, цифра уезжает в сторону изменения
   (.stp-roll), ниже нуля нельзя (поле коротко теплеет — .is-edge). Логика — point.js
   (stepper/roll/stepBy); поле внутри — обычный input .qty в .qty-w. */
.stp{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:2px;min-width:0}
.stp-b{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--bar);color:var(--green-2);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color var(--t-fast),color var(--t-fast)}
.stp-b:hover{background:var(--bar-soft)}
.stp-b:active{background:var(--bar-mid)}
.stp-b.is-min{background:var(--line-2);color:var(--muted-2)}
.stp-b:focus-visible{outline:2px solid var(--green-2);outline-offset:2px}
.stp .qty-w{overflow:hidden;border-radius:var(--r-md)}
.stp-roll{position:absolute;inset:0;pointer-events:none;overflow:hidden;font-size:var(--fs-h3);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.qty-w--u .stp-roll{right:14px}
.stp-was,.stp-now{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.qty-w.is-rolling .qty{color:transparent}

/* =============== ЗАГОТОВКИ (образец 03): та же форма, что у будущего блока =============== */
.sk{display:block;border-radius:var(--r-sm);background:var(--line-2)}
.sk-line{height:12px;width:70%;margin:6px 0}
.sk-short{width:40%}
.sk-mid{height:28px;width:55%;margin-top:var(--s-3)}
.sk-card{height:64px;border-radius:var(--r-md)}
.sk-dark{background:rgba(255,255,255,.12)}

/* ================================ ДВИЖЕНИЕ ================================ */
@media (prefers-reduced-motion:no-preference){
  /* каскад: дети проявляются по очереди — только прозрачность (UI.cascade ставит --i) */
  .cascade>*{animation:ui-fade var(--t-appear) var(--ease-out) backwards;animation-delay:calc(60ms + var(--i,0) * var(--stagger))}
  .cascade-one{animation:ui-fade var(--t-appear) var(--ease-out) backwards;animation-delay:calc(60ms + var(--i,0) * var(--stagger))}
  /* появление блока, когда заготовка сменилась данными; сдвиг 8 px — только на ПК */
  .appear{animation:ui-rise var(--t-appear) var(--ease-out) both}
  .appear-x{animation:ui-drop 240ms var(--ease-out) both}
  .seg-pill{transition:transform var(--t-base) var(--ease-out)}
  .live.is-flash::after,.live.is-flash .live-arrow{animation:ui-flash .6s var(--ease-out) both}
  .chain-step::after{transition:transform var(--t-appear) var(--ease-out)}
  .chain-o svg{transition:opacity var(--t-base) linear 120ms}
  .toast.is-in{animation:ui-fade var(--t-base) var(--ease-out) both}
  .strip.is-in i{animation:ui-fade 280ms linear both}
  .toast-ring .fg{animation:ui-ring var(--srok,60s) linear forwards}
  .stp-roll.is-up .stp-was{animation:stp-up-out 220ms var(--ease-out) forwards}
  .stp-roll.is-up .stp-now{animation:stp-up-in 220ms var(--ease-out) both}
  .stp-roll.is-down .stp-was{animation:stp-down-out 220ms var(--ease-out) forwards}
  .stp-roll.is-down .stp-now{animation:stp-down-in 220ms var(--ease-out) both}
  .stp.is-edge .qty{animation:stp-edge .5s ease-out}
  .sk{animation:ui-sk 1.2s ease-in-out infinite alternate}
  tr.appear-x td{animation:ui-row 1.6s ease-out}
}
@keyframes ui-fade{from{opacity:0}}
@keyframes ui-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ui-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes ui-flash{0%{opacity:1}35%{opacity:1}100%{opacity:0}}
@keyframes ui-sk{from{opacity:.55}to{opacity:1}}
@keyframes ui-row{from{background-color:var(--ok-soft)}}
@keyframes ui-ring{to{stroke-dashoffset:56.55}}
@keyframes stp-up-out{to{transform:translateY(-70%);opacity:0}}
@keyframes stp-up-in{from{transform:translateY(70%);opacity:0}}
@keyframes stp-down-out{to{transform:translateY(70%);opacity:0}}
@keyframes stp-down-in{from{transform:translateY(-70%);opacity:0}}
@keyframes stp-edge{from{background-color:var(--orange-soft);border-color:var(--orange)}}
@media (prefers-reduced-motion:reduce){
  .th img{opacity:1;transition:none}
  .jump.is-flash{animation:none}
}

/* ================================ ТЕЛЕФОН ================================ */
@media (max-width:860px){
  :root{--gap:12px;--pad-card:16px}
  .shell{flex-direction:column}
  /* СВЕТЛАЯ верхняя полоса (план dizain-bv, п. 1): белая, линия снизу, активный — светло-зелёный */
  .side{width:auto;height:auto;position:sticky;top:0;z-index:var(--z-menu);margin:0;border-radius:0;
    flex-direction:row;gap:var(--s-1);padding:var(--s-2) var(--s-3);overflow-x:auto;overflow-y:hidden;align-items:center;
    background:var(--card);background-image:none;color:var(--ink);box-shadow:0 1px 0 var(--line-3),0 6px 16px -14px rgba(18,60,30,.35)}
  .side::-webkit-scrollbar{display:none}
  .brand{padding:0 var(--s-2) 0 2px;flex-shrink:0;min-height:44px;align-items:center}
  .brand-dot{background:var(--green);color:#fff}
  .side .brand-txt,.side .nav-cap,.side .nav-group,.side-live{display:none}
  .nav-item{min-height:44px;padding:var(--s-2) var(--s-3);font-size:var(--fs-sm);white-space:nowrap;flex-shrink:0;border-radius:var(--r-pill);color:var(--ink-2)}
  a.nav-item:hover{background:var(--green-soft);color:var(--ink)}
  .nav-item.is-active,.nav-item.is-active:hover{background:var(--bar);color:var(--green-2)}
  .nav-item.is-active .ico{color:var(--green)}
  .ico .ico-hole{fill:var(--card)}
  a.nav-item:hover .ico .ico-hole{fill:var(--green-soft)}
  .nav-item.is-active .ico .ico-hole{fill:var(--bar)}
  .badge,.badge-orange{background:var(--grey-soft);color:var(--ink-2)}
  .badge.is-warm,#badge-stock{background:var(--orange-soft);color:var(--orange-ink)}
  .nav-item.is-active .badge{background:var(--card)}
  /* плашка пользователя от auth.js: в полосе — только «Выйти» */
  .side .user-box{width:auto;margin:0 0 0 auto;padding:0 2px;border-top:0;flex-shrink:0}
  .side .user-box-avatar,.side .user-box-name{display:none}
  .side .user-box-exit{width:44px;height:44px;color:var(--muted)}
  .side .user-box-exit:hover{background:var(--green-soft);color:var(--ink)}
  .side .user-box-exit:focus-visible{outline-color:var(--green-2)}
  .main{padding:var(--s-4) var(--s-3) var(--s-6);gap:var(--gap)}
  .head h1{font-size:var(--fs-h2)}
  .head-pills{margin-left:0;width:100%}
  .head-pills .pill-select{flex:1}
  .head-pills .pill-select select{max-width:none;width:100%;padding:var(--s-3) 28px var(--s-3) var(--s-3);min-height:44px}
  .head-pills .pill{min-height:44px}
  .summary{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-3);padding-bottom:6px}
  .sum{flex-direction:column;align-items:flex-start;gap:0;padding:6px 0}
  .sum b{font-size:var(--fs-body)}
  .sum span{font-size:var(--fs-cap)}
  button.sum{min-height:44px;align-items:flex-start;justify-content:center;text-align:left}
  .panel-tools{width:100%;margin-left:0;flex-wrap:wrap}
  .panel-tools .seg{flex:1 1 100%;justify-content:space-between}
  .search{flex:1 1 100%;min-height:44px}
  .search input{width:100%;padding:var(--s-3) 0;min-height:44px}
  .seg button{min-height:44px;padding:0 var(--s-2);flex:1}
  .btn-ghost{min-height:44px}
  .btn-row{min-height:44px;padding:var(--s-2) var(--s-4)}
  .tbl td.td-act .btn-row{opacity:1;pointer-events:auto}
  .dlg-actions{flex-direction:column-reverse}
  .dlg-actions .btn{justify-content:center;width:100%}
  .stack-it{grid-template-columns:10px minmax(0,1fr) auto;gap:var(--s-3);padding:var(--s-3) var(--s-1) var(--s-3) var(--s-3)}
  .stack-it.has-foto{grid-template-columns:10px 40px minmax(0,1fr) auto}
  .tile{padding:var(--s-3) var(--s-4)}
  .appear{animation-name:ui-fade}       /* на телефоне — без сдвига, только проявление */
  .toast-act{min-height:44px}           /* «Продано · Отменить» — цель пальцем ≥ 44 px */
  .toast-x{width:44px;height:44px}
}