/* ============================================================
   Мост на дизайн-систему 2027.
   Значения приходят из design-tokens.css (источник истины, тема через
   [data-theme]). Здесь — только алиасы старых имён на новые токены, чтобы
   существующие компоненты работали без переписывания разметки.
   Токены (--bg, --surface, --surface-2, --surface-3, --line, --line-strong,
   --text/-2/-3, --accent*, сигналы, радиусы, --font) НЕ переопределяем.
   ============================================================ */
:root {
  font-family: var(--font);

  /* — текст / поверхности (старые имена → токены) — */
  --brand-font: var(--font);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  /* старый --line (видимые бордеры) и --line-2 (тонкие делители) → токены */
  --line-2: var(--line);
  /* --surface, --surface-2, --bg, --line приходят из токенов как есть */

  /* — светофор статусов → семантические токены — */
  --ok-bg: var(--ok-soft);     --ok-ink: var(--ok);       --ok-line: var(--ok-soft);
  --wait-bg: var(--warn-soft); --wait-ink: var(--warn);   --wait-line: var(--warn-soft);
  --no-bg: var(--alert-soft);  --no-ink: var(--alert);    --no-line: var(--alert-soft);
  --mute-bg: var(--surface-3); --mute-ink: var(--text-2); --mute-line: var(--line);
  --info-bg: var(--info-soft); --info-ink: var(--info);   --info-line: var(--info-soft);

  /* — глубина / анимации (вне токенов) — */
  --shadow-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.22);
  --shadow-2: 0 2px 6px rgba(0,0,0,.30), 0 10px 28px rgba(0,0,0,.34);
  --press: transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease;
}

* { -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
#app { max-width: 480px; margin: 0 auto; padding: 16px; }

.card { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-1); border: 1px solid var(--line-2); }

h1 { font-family: var(--brand-font); font-weight: 700; font-size: 21px; margin: 0 0 16px; letter-spacing: -0.3px; }
h2 { font-family: var(--brand-font); font-weight: 600; font-size: 16px; margin: 16px 0 8px; }

/* --- Фирменная шапка с логотипом --- */
/* Логотип-марка в белом контейнере --accent (gap P2 1.5 — контраст на тёмном) */
.brandbar { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.brand-mark { display: flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 4px 6px; border-radius: var(--r-sm); background: #ffffff; border: 1px solid var(--line-strong); flex: none; }
.brand-logo { height: 20px; width: auto; display: block; }
.brand-word { font-family: var(--font); font-weight: 800; font-size: 18px; letter-spacing: 0.5px; color: var(--text); text-transform: uppercase; }
.block { margin-top: 12px; }

input { display: block; width: 100%; box-sizing: border-box; padding: 14px; margin: 6px 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(120,124,132,.14); }

/* --- Единая система кнопок (Шаг 3): primary / secondary / ghost(link) / danger --- */
button { display: block; width: 100%; padding: 15px; margin: 6px 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-3); color: var(--text); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; transition: var(--press); }
button:hover { filter: brightness(1.06); }
button:active { transform: scale(.98); }
/* primary — единственная на экран, максимальный акцент */
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--shadow-1); }
button.primary:hover { filter: brightness(1.08); }
/* secondary — нейтральная поверхность с бордером */
button.secondary { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); box-shadow: none; }
button.secondary:hover { filter: brightness(1.06); }
/* ghost и старый link — действие без заливки, но с аффордансом (тап-зона + hover) */
button.ghost, button.link { background: transparent; border-color: transparent; color: var(--text-2); font-weight: 700; box-shadow: none; }
button.ghost:hover, button.link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; filter: none; }
button.ghost:active, button.link:active { transform: scale(.98); }
/* danger — мягкий алерт-фон */
button.danger { background: var(--alert-soft); color: var(--alert); border-color: var(--alert-soft); box-shadow: none; }
button.danger:hover { filter: brightness(1.06); }
/* компактная кнопка (sm) */
button.sm { padding: 9px 14px; min-height: 40px; font-size: 14px; }

.msg { background: var(--info-bg); color: var(--info-ink); padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 8px; border: 1px solid var(--info-line); }
.msg.error { background: var(--no-bg); color: var(--no-ink); border-color: var(--no-line); }
/* уведомления — тот же Row-паттерн (нижний делитель, последний без бордера) */
.notif { display: flex; align-items: center; gap: 12px; padding: 12px 8px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.notif:last-child { border-bottom: 0; }
.notif.read { opacity: .6; }
/* Поставщики: имя во всю ширину, переключатели и «Сохранить» — строкой ниже. */
.supp-row { flex-wrap: wrap; }
.supp-row > input { flex: 1 1 100%; min-width: 0; }
.supp-row > button.link { width: auto; margin: 0; min-height: 40px; padding: 6px 10px; }
.inv-photos { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-photo { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); cursor: pointer; background: var(--surface-2); transition: var(--press); }
.inv-photo:active { transform: scale(.96); }
.photo-missing { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 40px; max-width: 220px; padding: 8px 10px; text-align: center; font-size: 12px; line-height: 1.3; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); background: var(--surface-2); }
.inv-photo-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.task-ref { margin-top: 8px; }
.task-ref-cell { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.task-ref-cell .inv-photo { width: 180px; height: 180px; }
/* Маркеры «где проблема» поверх фото (координаты в долях) */
.mark-wrap { position: relative; display: inline-block; }
.mark-dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 3px solid #ff5252; border-radius: 50%;
  background: rgba(255, 82, 82, 0.25); pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.mark-dot-live { pointer-events: auto; cursor: pointer; }
/* Подсветка статуса фото: зелёная рамка+галочка (принято), красная+крест
   (отклонено/пересъёмка); ожидание — без рамки. Работает и у управляющего
   в проверке, и у продавца на «прошлом кадре» зоны. */
.mark-wrap.ph-ok, .mark-wrap.ph-bad { border-radius: var(--r-sm); }
.mark-wrap.ph-ok { box-shadow: 0 0 0 3px var(--ok); }
.mark-wrap.ph-bad { box-shadow: 0 0 0 3px var(--alert); }
.mark-wrap.ph-ok::after, .mark-wrap.ph-bad::after {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.mark-wrap.ph-ok::after { content: "✓"; background: var(--ok); }
.mark-wrap.ph-bad::after { content: "✕"; background: var(--alert); }
.reject-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.reject-panel input, .reject-panel select { width: 100%; max-width: 420px; }
.rej-row { cursor: pointer; }
.zone-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.zone-ord { display: flex; gap: 6px; }
.zone-ord-btn { min-height: 36px; padding: 4px 12px; font-size: 14px; }
.zone-ord-btn:disabled { opacity: 0.35; }
.inv-photo-cell .link { font-size: 12px; color: var(--text-3); min-height: 28px; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; }
.lightbox img { max-width: 95%; max-height: 95%; border-radius: var(--r-sm); }
.lightbox .lb-big { max-width: 84%; max-height: 92%; }
.lb-nav { color: #fff; font-size: 52px; line-height: 1; padding: 0 12px; cursor: pointer; user-select: none; opacity: .8; }
.lb-nav:hover { opacity: 1; }
.lb-bar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 1001; }
.lb-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; line-height: 46px; text-align: center; cursor: pointer; user-select: none; }
.lb-btn:hover { background: rgba(255,255,255,.30); }

/* Экран успеха открытия смены на киоске */
.kiosk-done { text-align: center; }
.kiosk-check { width: 88px; height: 88px; margin: 10px auto 6px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 50px; line-height: 88px; }
.kiosk-done-title { text-align: center; margin: 4px 0; }
.kiosk-done-name { text-align: center; font-size: 19px; font-weight: 800; margin: 2px 0; }
.kiosk-done-meta { text-align: center; margin: 2px 0; }
.kiosk-selfie { display: block; max-width: 140px; border-radius: 14px; margin: 12px auto 2px; }
.kiosk-next { text-align: center; font-size: 16px; font-weight: 700; margin: 16px 0 8px; }
label { display: block; margin: 4px 0; }
label input[type="checkbox"] { display: inline; width: auto; margin-right: 6px; }
select {
  display: block; width: 100%; box-sizing: border-box; padding: 14px 36px 14px 12px;
  margin: 6px 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--surface-2);
  font: inherit; font-size: 15px; line-height: 1.3; color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a8d93' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
select:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(120,124,132,.14); }

/* --- Единый компонент строки списка Row (Шаг 4): накладные, акции, сотрудники, справочник --- */
.inv-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; min-height: 48px; box-sizing: border-box; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; }
.inv-row:last-child { border-bottom: 0; }
.inv-row:hover { background: var(--surface-2); }
.inv-row:active { background: var(--surface-3); }
.inv-date { color: var(--text-3); min-width: 40px; font-variant-numeric: tabular-nums; font-size: 12px; flex: none; }
.inv-mid { flex: 1; min-width: 0; }
.inv-row .chev { color: var(--text-3); font-size: 22px; line-height: 1; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line-2); padding: 6px 10px; border-radius: 16px; font-variant-numeric: tabular-nums; }
/* M4: тогл-кнопка магазина — ясное вкл/выкл (как .seg-btn.on), не бледный чип-текст. */
.store-chip { cursor: pointer; border-color: var(--line); font-weight: 600; }
.store-chip.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip-x { cursor: pointer; color: var(--no-ink); font-weight: 700; }
.add-row { display: flex; gap: 8px; align-items: center; }
.add-row input { margin: 0; }
.add-row button { width: auto; white-space: nowrap; margin: 0; }
.muted { color: var(--ink-3); }
textarea { display: block; width: 100%; box-sizing: border-box; padding: 14px; margin: 6px 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; resize: vertical; }
textarea:focus { outline: none; border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(120,124,132,.14); }
.ta-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; margin: 10px 0; background: var(--surface-2); }
.ta-sub { border-top: 1px solid var(--line-2); padding: 8px 0; }
.ta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-row .inv-mid { flex: 1 1 100%; min-width: 0; }
.ta-row > button.link { width: auto; margin: 0; min-height: 40px; padding: 6px 10px; }
.ta-card .add-row input[type="radio"] { width: auto; margin: 0; }
.ta-card .add-row button { width: auto; margin: 0; }
.ta-view { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; margin: 6px 0; }

/* --- Бейджи статусов (светофор) --- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; }
.badge-success { background: var(--ok-bg);   color: var(--ok-ink);   border-color: var(--ok-line); }
.badge-warning { background: var(--wait-bg); color: var(--wait-ink); border-color: var(--wait-line); }
.badge-danger  { background: var(--no-bg);   color: var(--no-ink);   border-color: var(--no-line); }
.badge-neutral { background: var(--mute-bg); color: var(--mute-ink); border-color: var(--mute-line); }
.badge-info    { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.badge-count   { background: var(--no-ink); color: #fff; border-color: transparent; font-variant-numeric: tabular-nums; }

/* статусная точка-индикатор (дублирует смысл цвета) */
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; flex: none; }
.badge-count::before, .badge-info::before { display: none; }

/* строка списка: вторая строка-подпись и хвост с бейджем */
.inv-mid strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.inv-sub { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.row-tail { display: flex; align-items: center; gap: 8px; flex: none; }

/* пустое состояние */
/* Empty state (gap P2): иконка в мягком контейнере + заголовок + подпись + опц. действие */
.empty { text-align: center; color: var(--text-3); padding: 26px 8px; }
.empty .empty-ic { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface-3); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.empty .empty-ic .empty-ico { width: 24px; height: 24px; background-color: var(--text-3); -webkit-mask: var(--icn) center / 24px no-repeat; mask: var(--icn) center / 24px no-repeat; }
.empty .big { font-size: 15px; color: var(--text-2); margin-bottom: 4px; font-weight: 700; }
.empty .empty-sub { font-size: 13px; color: var(--text-3); }

/* --- Дашборд: bento-плитки --- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 12px; }
/* KPI-tile (Шаг 6b): нейтральный фон + сигнальная левая полоса 3px + число 26/800 */
.metric { border-radius: var(--r-md); padding: 14px 14px 14px 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; transition: var(--press); position: relative; overflow: hidden; }
.metric:active { transform: scale(.97); }
.metric::after { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--text-3); }
.metric .m-label { font-size: 12px; line-height: 1.25; color: var(--text-2); }
.metric .m-value { font-size: 26px; font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.metric.m-warning::after { background: var(--warn); }
.metric.m-warning .m-value { color: var(--warn); }
.metric.m-danger::after  { background: var(--alert); }
.metric.m-danger  .m-value { color: var(--alert); }
.metric.m-success::after { background: var(--ok); }
.metric.m-success .m-value { color: var(--ok); }
.dash-sec { font-size: 13px; color: var(--ink-3); margin: 12px 0 4px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; }
.dash-head h1 { margin: 0; }
.dash-head button.link { width: auto; margin: 0; }

/* --- Плитки-разделы на сводке (редкие операции вне нижнего меню) --- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.tile { display: flex; align-items: center; gap: 8px; padding: 13px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; transition: var(--press); }
.tile:hover { background: var(--line-2); }
.tile:active { transform: scale(.97); }
/* иконка плитки — вектор в квадрате --surface-3 (gap P1.1) */
.tile .t-ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-3); display: flex; align-items: center; justify-content: center; flex: none; }
.tile .t-ic .t-ico { width: 20px; height: 20px; background-color: var(--text-2); -webkit-mask: var(--icn) center / 20px no-repeat; mask: var(--icn) center / 20px no-repeat; }
.tile .t-lb { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.tile .t-badge { margin-left: auto; background: var(--no-ink); color: #fff; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 9px; font-variant-numeric: tabular-nums; flex: none; }

/* кнопка-«заблокирована» (шаги не пройдены) */
button:disabled, button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
button:disabled:active, button[disabled]:active { transform: none; }

/* чек-лист закрытия смены */
.checklist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.check-row.done { border-color: var(--ok-line); background: var(--ok-bg); }
.check-row .check-ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex: none; }
.check-row.done .check-ic { border-color: var(--ok-ink); background: var(--ok-ink); }
.check-row .check-lb { flex: 1; font-weight: 600; }
.check-row.done .check-lb { color: var(--ok-ink); }
.check-row.clickable { cursor: pointer; transition: var(--press); }
.check-row.clickable:hover { background: var(--surface-2); }
.check-row.clickable:active { transform: scale(.98); }
.check-row .chev { color: var(--ink-3); font-size: 22px; line-height: 1; margin-left: 2px; }
.close-hint { margin-top: 6px; }

/* карточка статуса смены (кокпит продавца) */
.shift-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin: 10px 0; background: var(--surface); box-shadow: var(--shadow-1); }
.shift-card.open { border-color: var(--ok-line); background: var(--ok-bg); }
.shift-card.open strong { color: var(--ok-ink); }
.shift-card.done { opacity: .72; }
.dir-done { color: var(--ok-ink); font-weight: 700; }
.shift-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.shift-row strong { font-size: 16px; }
.logout-bottom { margin-top: 18px; color: var(--ink-3); }

/* аватар продавца */
/* Аватар-инициалы (gap P3 1.6): круг --surface-3 + бордер + инициалы, фото поверх если есть */
.ava { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ava .ava-ini { font-weight: 800; color: var(--text-2); font-size: 20px; letter-spacing: .5px; }
.ava.ava-sm .ava-ini { font-size: 14px; }
.ava .ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava-empty { background: var(--surface-2); }
.ava-sm { width: 40px; height: 40px; cursor: pointer; }
.ava-row { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.ava-row button.link { width: auto; margin: 0; }

/* сегмент выбора (тип смены в киоске) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.seg.dir-tabs { flex-wrap: nowrap; }
.seg-btn { flex: 1; width: auto; margin: 0; padding: 11px 0; min-height: 44px; box-sizing: border-box; text-align: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm); font-weight: 600; }
.seg-btn.on { border-color: var(--ink); background: var(--ink); color: var(--surface); }
/* Верхние вкладки хаба сообщений: не переносить подписи, скроллить по горизонтали на узком экране. */
.dir-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dir-tabs::-webkit-scrollbar { display: none; }
.dir-tabs .seg-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
/* График смен: месяц-календарь */
.sch-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.sch-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 2px 0; }
.sch-cell { min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 4px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.sch-cell:active { background: var(--line-2); }
.sch-cell.sch-filled { border-color: var(--ok-line); background: var(--ok-bg); }
.sch-cell.sch-empty { border: 0; background: transparent; cursor: default; }
.sch-day { font-size: 12px; font-weight: 700; }
.sch-dots { display: flex; gap: 3px; margin-top: auto; }
.sch-dot { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 6px; }
.sch-dot.on { background: var(--ink); color: var(--surface); }
.sch-dot.off { background: var(--line-2); color: var(--ink-3); }

/* код привязки устройства */
.pair-code { font-family: ui-monospace, "SF Mono", monospace; font-size: 32px; font-weight: 700; letter-spacing: 6px; text-align: center; background: var(--surface-2); border: 1px dashed var(--ink-3); border-radius: var(--r-md); padding: 16px; margin: 6px 0; color: var(--ink); }

/* --- Стеклянный плавающий bottom nav + safe-area (Шаг 6) --- */
#app.has-nav { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0)); }
.tabbar { position: fixed; left: 11px; right: 11px; z-index: 900; bottom: calc(11px + env(safe-area-inset-bottom, 0)); display: flex; gap: 4px; max-width: 458px; margin: 0 auto; padding: 8px; border-radius: var(--r-lg); background: var(--glass); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.tabbar .tab { flex: 1; border: 0; background: transparent; padding: 8px 2px; cursor: pointer; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; border-radius: var(--r-md); position: relative; transition: color .15s ease, background .15s ease, transform .12s ease; box-shadow: none; }
.tabbar .tab:hover { background: transparent; }
.tabbar .tab:active { transform: scale(.94); background: transparent; }
.tabbar .tab .lb { font-size: 11px; font-weight: 700; }
/* активный пункт — заливка-пилюля --accent-soft + цвет --accent (иконка красится currentColor) */
.tabbar .tab.active { color: var(--accent); background: var(--accent-soft); }
.tabbar .tab.active:active { background: var(--accent-soft); }
.tabbar .tab .tab-badge { position: absolute; top: 2px; left: 50%; margin-left: 6px; background: var(--alert); color: #fff; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 9px; font-variant-numeric: tabular-nums; }

/* --- Сворачиваемые фильтры --- */
.filterbar { margin: 8px 0; }
.filter-toggle { display: flex; align-items: center; justify-content: space-between; }
.filter-toggle button { width: auto; margin: 0; }
.filter-panel { margin-top: 8px; }
.filter-panel.hidden { display: none; }

/* прогресс-бар обучения */
.pbar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 4px 0 10px; }
.pbar-fill { height: 100%; border-radius: 999px; background: var(--ink-3); transition: width .3s ease; }
.pbar-fill.part { background: var(--wait-ink); }
.pbar-fill.full { background: var(--ok-ink); }
.pbar-cap { font-size: 13px; margin-top: 4px; }

/* читалка статьи обучения — комфортная типографика */
.article-body { white-space: pre-wrap; font-size: 16px; line-height: 1.65; color: var(--ink); letter-spacing: .1px; word-break: break-word; }
.article-body p { margin: 0 0 14px; }
.reading-meta { color: var(--ink-3); font-size: 13px; margin: 0 0 12px; }

/* картинки статьи обучения */
.article-img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line-2); margin: 10px 0; background: var(--surface-2); cursor: zoom-in; }
.article-img.page { border-radius: var(--r-md); box-shadow: var(--shadow-1); }

/* листалка страниц документа */
.pager { display: flex; gap: 8px; margin: 8px 0 2px; }
.pager .seg-btn { flex: 1; }

/* уважение к reduce-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  button:active, .metric:active, .inv-photo:active, .tabbar .tab:active { transform: none; }
}

/* ===================== АУДИТ: экран проведения ===================== */
.au-head-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.au-head-top strong { font-size: 16px; }
.au-score-wrap { text-align: right; flex: none; }
.au-score { font-size: 30px; font-weight: 900; line-height: 1; }
.au-score-cap { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.au-prog { margin-top: 12px; }
.au-prog-lb { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; }
.au-prog-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.au-prog-fill { height: 100%; background: var(--ink); border-radius: 999px; }
.au-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 14px; }
.au-dir-l { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-2); margin-bottom: 3px; }
.au-dir-b { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.au-dir-f { height: 100%; border-radius: 999px; }
.au-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 4px 0 10px; }
.au-tab { flex: none; width: auto; margin: 0; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: 13px; text-align: center; }
.au-tab.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.au-tab-c { font-size: 11px; opacity: .8; margin-top: 2px; }
.au-tab-w { color: var(--no-ink); font-weight: 700; }
.au-tab.on .au-tab-w { color: var(--no-line); }
.au-pills { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.au-pill { flex: none; width: auto; margin: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.au-pill.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.au-sec-title { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 6px 2px 8px; }
.au-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; background: var(--surface); }
.au-item.crit { border-color: var(--no-line); background: linear-gradient(0deg, var(--no-bg), transparent 60%); }
.au-item.minor { border-color: var(--wait-line); background: linear-gradient(0deg, var(--wait-bg), transparent 60%); }
.au-item.ok { border-color: var(--ok-line); }
.au-it-top { display: flex; align-items: flex-start; gap: 10px; }
.au-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line); }
.au-num.crit { background: var(--no-bg); color: var(--no-ink); border-color: var(--no-line); }
.au-num.minor { background: var(--wait-bg); color: var(--wait-ink); border-color: var(--wait-line); }
.au-num.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.au-it-name-wrap { flex: 1; min-width: 0; }
.au-it-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.au-it-meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.au-tag { flex: none; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: var(--wait-bg); color: var(--wait-ink); border: 1px solid var(--wait-line); }
.au-crit { margin-top: 12px; background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--r-sm); padding: 10px; }
.au-crit-l { font-size: 11px; font-weight: 700; color: var(--info-ink); margin-bottom: 4px; }
.au-crit-t { font-size: 12px; color: var(--info-ink); white-space: pre-line; line-height: 1.5; }
.au-scores { display: flex; gap: 8px; margin-top: 12px; }
.au-sc { flex: 1; width: auto; margin: 0; padding: 10px 0; border-radius: var(--r-sm); border: 2px solid; background: var(--surface); font-weight: 800; font-size: 15px; text-align: center; line-height: 1; }
.au-sc-l { display: block; font-size: 11px; font-weight: 500; opacity: .8; margin-top: 3px; }
.au-sc-no { border-color: var(--no-line); color: var(--no-ink); }
.au-sc-no.on { background: var(--no-ink); border-color: var(--no-ink); color: #fff; }
.au-sc-wa { border-color: var(--wait-line); color: var(--wait-ink); }
.au-sc-wa.on { background: var(--wait-ink); border-color: var(--wait-ink); color: #fff; }
.au-sc-ok { border-color: var(--ok-line); color: var(--ok-ink); }
.au-sc-ok.on { background: var(--ok-ink); border-color: var(--ok-ink); color: #fff; }
.au-words { margin-top: 10px; display: grid; gap: 6px; }
.au-w { font-size: 12px; padding: 7px 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-3); display: flex; gap: 6px; }
.au-w b { flex: none; }
.au-w.on.au-w-no { background: var(--no-bg); color: var(--no-ink); }
.au-w.on.au-w-wa { background: var(--wait-bg); color: var(--wait-ink); }
.au-w.on.au-w-ok { background: var(--ok-bg); color: var(--ok-ink); }
.au-finish { position: sticky; bottom: 10px; margin-top: 12px; }
.au-nav { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 4px; }
.au-nav-btn { width: auto; margin: 0; padding: 11px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--r-sm); font-weight: 600; font-size: 13px; }
.au-nav-next { margin-left: auto; background: var(--ink); color: var(--surface); border-color: var(--ink); }
.au-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 2px 0 8px; cursor: pointer; }
.au-check input { width: auto; margin: 0; }
.dash-subsec { font-size: 12px; color: var(--ink-3); margin: 8px 2px 4px; }

/* ===================== Векторные line-иконки навигации (Шаг 2) =====================
   Эмодзи заменены на маску-иконки: красятся currentColor, активное состояние
   (.tab.active — цвет --text) подсвечивает иконку автоматически. */
.tabbar .tab .ic { width: 26px; height: 26px; font-size: 0; }
.ic[class*="ic-"] { display: inline-block; width: 26px; height: 26px; background-color: currentColor;
  -webkit-mask: var(--icn) center / 24px no-repeat; mask: var(--icn) center / 24px no-repeat; }
.ic-home { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2011l8-7%208%207%27%2F%3E%3Cpath%20d%3D%27M6%209.5V19h12V9.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-box { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207l9-4%209%204v10l-9%204-9-4z%27%2F%3E%3Cpath%20d%3D%27M3%207l9%204%209-4%27%2F%3E%3Cpath%20d%3D%27M12%2011v10%27%2F%3E%3C%2Fsvg%3E"); }
.ic-chat { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%205h16v11h-8l-5%204v-4H4z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-pay { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%207h15a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a1%201%200%200%201%201-1h13%27%2F%3E%3Cpath%20d%3D%27M16%2012h2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-star { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l2.6%206.1%206.4.5-4.9%204.3%201.5%206.1L12%2017l-5.6%203%201.5-6.1L3%209.6l6.4-.5z%27%2F%3E%3C%2Fsvg%3E"); }
.ic-book { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%204h11a1%201%200%200%201%201%201v15H8a2%202%200%200%201-2-2z%27%2F%3E%3Cpath%20d%3D%27M6%2018a2%202%200%200%201%202-2h10%27%2F%3E%3C%2Fsvg%3E"); }
.ic-summary { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%274%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%274%27%20y%3D%2714%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%2714%27%20width%3D%276%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E"); }
.ic-control { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%205h12v15H6z%27%2F%3E%3Cpath%20d%3D%27M9%203h6v3H9z%27%2F%3E%3Cpath%20d%3D%27M8.5%2013l2%202%204-4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-inbox { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2013l2.5-8h11L20%2013%27%2F%3E%3Cpath%20d%3D%27M4%2013v6h16v-6%27%2F%3E%3Cpath%20d%3D%27M4%2013h5l1.5%202h3L15%2013h5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-store { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%209l1-4h14l1%204%27%2F%3E%3Cpath%20d%3D%27M4%209a2%202%200%200%200%204%200%202%202%200%200%200%204%200%202%202%200%200%200%204%200%202%202%200%200%200%204%200%27%2F%3E%3Cpath%20d%3D%27M5%2010v9h14v-9%27%2F%3E%3Cpath%20d%3D%27M9%2019v-5h4v5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-clock { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207v5l3.5%202%27%2F%3E%3C%2Fsvg%3E"); }
.ic-more { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%275%27%20cy%3D%2712%27%20r%3D%271.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%2712%27%20r%3D%271.6%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }

/* доп. line-иконки для плиток/строк/кнопок (gap P1.1) */
.ic-receipt { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%203h12v18l-3-2-3%202-3-2-3%202z%27%2F%3E%3Cpath%20d%3D%27M9%208h6%27%2F%3E%3Cpath%20d%3D%27M9%2012h6%27%2F%3E%3C%2Fsvg%3E"); }
.ic-shuffle { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%203l4%204-4%204%27%2F%3E%3Cpath%20d%3D%27M20%207H9a5%205%200%200%200-5%205%27%2F%3E%3Cpath%20d%3D%27M8%2021l-4-4%204-4%27%2F%3E%3Cpath%20d%3D%27M4%2017h11a5%205%200%200%200%205-5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-tag { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%204h7l9%209-7%207-9-9z%27%2F%3E%3Ccircle%20cx%3D%278.5%27%20cy%3D%278.5%27%20r%3D%271.4%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.ic-key { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%278%27%20cy%3D%278%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M11%2011l9%209%27%2F%3E%3Cpath%20d%3D%27M17%2017l2-2%27%2F%3E%3Cpath%20d%3D%27M14%2020l2-2%27%2F%3E%3C%2Fsvg%3E"); }
.ic-calendar { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M4%209h16%27%2F%3E%3Cpath%20d%3D%27M8%203v4%27%2F%3E%3Cpath%20d%3D%27M16%203v4%27%2F%3E%3C%2Fsvg%3E"); }
.ic-people { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M3.5%2020a5.5%205.5%200%200%201%2011%200%27%2F%3E%3Cpath%20d%3D%27M16%205.5a3%203%200%200%201%200%205%27%2F%3E%3Cpath%20d%3D%27M17%2014a5.5%205.5%200%200%201%203.5%206%27%2F%3E%3C%2Fsvg%3E"); }
.ic-skip { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%205l8%207-8%207z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M14%205l6%207-6%207z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.ic-tasks { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%206h11%27%2F%3E%3Cpath%20d%3D%27M9%2012h11%27%2F%3E%3Cpath%20d%3D%27M9%2018h11%27%2F%3E%3Cpath%20d%3D%27M4%206l1.2%201.2L7.5%205%27%2F%3E%3Cpath%20d%3D%27M4%2012l1.2%201.2L7.5%2011%27%2F%3E%3Cpath%20d%3D%27M4%2018l1.2%201.2L7.5%2017%27%2F%3E%3C%2Fsvg%3E"); }
.ic-search { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M21%2021l-4.3-4.3%27%2F%3E%3C%2Fsvg%3E"); }
.ic-gear { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M12%202.5v3M12%2018.5v3M2.5%2012h3M18.5%2012h3M5.1%205.1l2.1%202.1M16.8%2016.8l2.1%202.1M18.9%205.1l-2.1%202.1M7.2%2016.8l-2.1%202.1%27%2F%3E%3C%2Fsvg%3E"); }
.ic-camera { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%208h3l2-2h6l2%202h3v11H4z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2713%27%20r%3D%273.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-bell { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%209a6%206%200%200%201%2012%200c0%205%202%206%202%206H4s2-1%202-6z%27%2F%3E%3Cpath%20d%3D%27M10%2020a2%202%200%200%200%204%200%27%2F%3E%3C%2Fsvg%3E"); }
.ic-doc { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h7l4%204v14H7z%27%2F%3E%3Cpath%20d%3D%27M14%203v4h4%27%2F%3E%3Cpath%20d%3D%27M10%2013h5%27%2F%3E%3Cpath%20d%3D%27M10%2016h5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-spark { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l2%206%206%202-6%202-2%206-2-6-6-2%206-2z%27%2F%3E%3C%2Fsvg%3E"); }

/* инлайн-иконка в кнопке (gap P1.1) */
.btn-ic { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background-color: currentColor; -webkit-mask: var(--icn) center / 18px no-repeat; mask: var(--icn) center / 18px no-repeat; }

/* предупреждающий вариант инфо-баннера (gap P1.4) */
.msg.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-soft); }

/* Смена: «Что сделать сейчас» + быстрые действия (gap P1) */
.now { display: flex; gap: 11px; align-items: flex-start; background: var(--surface-2); }
.now .now-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--bg); display: flex; align-items: center; justify-content: center; flex: none; }
.now .now-ic > span { width: 18px; height: 18px; background-color: var(--text-2); -webkit-mask: var(--icn) center / 18px no-repeat; mask: var(--icn) center / 18px no-repeat; }
.now b { font-size: 13.5px; display: block; }
.inv-row .rw-ic { width: 22px; height: 22px; background-color: var(--text-2); -webkit-mask: var(--icn) center / 22px no-repeat; mask: var(--icn) center / 22px no-repeat; flex: none; }

/* подпись-подсказка плитки (gap P1, Товар) */
.tile .t-lbwrap { display: flex; flex-direction: column; min-width: 0; }
.tile .t-cnt { font-size: 11.5px; color: var(--text-3); line-height: 1.2; margin-top: 1px; }

/* плейсхолдер полей (gap P2 формы) */
input::placeholder, textarea::placeholder { color: var(--text-3); }
.ic-percent { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M19%205L5%2019%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%272.5%27%2F%3E%3Ccircle%20cx%3D%2716.5%27%20cy%3D%2716.5%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E"); }
.ic-play { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%205l12%207-12%207z%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.ic-warning { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l10%2017H2z%27%2F%3E%3Cpath%20d%3D%27M12%209v5%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717.3%27%20r%3D%27.7%27%20fill%3D%27black%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.ic-trash { --icn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%207h16%27%2F%3E%3Cpath%20d%3D%27M9%207V4h6v3%27%2F%3E%3Cpath%20d%3D%27M6%207l1%2014h10l1-14%27%2F%3E%3Cpath%20d%3D%27M10%2011v6M14%2011v6%27%2F%3E%3C%2Fsvg%3E"); }

/* subtabs — два равных переключателя в ряд (gap2, Контроль Очередь/Архив) */
.subtabs { display: flex; gap: 6px; margin: 8px 0; }
.subtabs button { flex: 1; width: auto; margin: 0; min-height: 40px; padding: 9px 0; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: var(--r-md); font-weight: 700; font-size: 13px; }
.subtabs button.on { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }

/* back-контрол «‹ Назад» слева (gap2 P2) */
.link.back { width: auto; margin: 0 0 8px; padding: 8px 10px 8px 4px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; color: var(--text-2); font-weight: 700; }
.link.back::before { content: "\2039"; font-size: 20px; margin-right: 5px; line-height: 1; }
.link.back:hover { background: transparent; color: var(--text); text-decoration: none; }

/* плейсхолдер битого фото листа (gap2 P3) */
.inv-photo.inv-photo-empty { object-fit: contain; padding: 22px; background: var(--surface-2); border: 1px dashed var(--line-strong); }

/* Карточка зоны фотоотчёта (редактор управляющего) — вертикальный стек, не flex-строка */
.zone-card { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.zone-card:last-child { border-bottom: 0; }
.zone-card > strong { font-size: 15px; }
.zone-card input:not([type]), .zone-card input[type="text"], .zone-card textarea { width: 100%; box-sizing: border-box; }
.zone-card .zone-checks { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.zone-card .zone-checks label { display: inline-flex; align-items: center; gap: 6px; }
.zone-card .inv-photo { max-width: 160px; border-radius: 8px; cursor: pointer; }

/* Проверка фото отчёта у управляющего — вертикальная карточка, кнопки отдельным рядом */
.zphoto-review { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.zphoto-review:last-child { border-bottom: 0; }
.zphoto-review .zphoto-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zphoto-review .inv-photo { max-width: 200px; border-radius: 8px; cursor: pointer; }
.zphoto-review .zphoto-acts { display: flex; gap: 10px; }
.zphoto-review .zphoto-acts button { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }

/* Фотоотчёт — пошаговый мастер (одна зона на экран) */
.pw-prog { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; }
.pw-prog .pw-step { font-weight: 700; color: var(--text-2); font-size: 13px; }
.pw-bar { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.pw-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .25s ease; }
.pw-instr { margin: 2px 0 10px; }
.pw-ref { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; transition: var(--press); }
.pw-ref:active { transform: scale(.99); }
.pw-ref-cap { font-size: 12px; color: var(--text-3); margin: 4px 0 12px; }
.pw-done-check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; margin: 10px auto 6px; }

/* Живая камера + ghost-оверлей эталона */
.cam-wrap { position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden; background: #000; margin: 6px 0; }
.cam-wrap video { width: 100%; display: block; }
.cam-overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; pointer-events: none; }
.cam-hint { position: absolute; top: 8px; left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 1px 3px #000; font-size: 13px; padding: 0 12px; pointer-events: none; }
.cam-shoot { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: rgba(255,255,255,.35); padding: 0; margin: 0; }
.cam-shoot:active { transform: translateX(-50%) scale(.96); }

/* Селфи — модальный оверлей с живой фронт-камерой */
.selfie-ov { position: fixed; inset: 0; z-index: 1200; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; box-sizing: border-box; }
.selfie-wrap { width: 100%; max-width: 420px; }
.selfie-wrap video { width: 100%; display: block; }
.selfie-ov .selfie-cancel { color: #fff; width: auto; }

/* Селфи открытия смены — миниатюра в списке «кто на смене» */
.shift-selfie { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--surface-2); flex: none; cursor: pointer; }
.shift-selfie-emg { outline: 2px solid var(--alert); outline-offset: 1px; }

/* ============================================================
   РЕДИЗАЙН v2 — экран «Сейчас» продавца (герой-машина состояний,
   полка быстрых действий, «Требует действия», таймлайн, награда,
   3 вкладки, стартовый экран, микро-отклик). Разметка — vanilla JS
   (app.js), классы с префиксом v2-. Токены — из design-tokens.css.
   ============================================================ */

/* --- шапка «Сейчас»: марка + магазин·смена + аватар --- */
.v2-hdr { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 14px; gap: 10px; }
.v2-hdr .v2-mark { display: flex; align-items: center; gap: 9px; min-width: 0; }
.v2-hi { font-size: 12.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-ava { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--text-2); flex: none; cursor: pointer; padding: 0; margin: 0; }

/* --- ГЕРОЙ: одна команда (машина состояний) --- */
.v2-hero { border-radius: var(--r-lg); padding: 18px 18px 16px; position: relative; overflow: hidden; }
.v2-hero .ey { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; opacity: .78; display: flex; align-items: center; gap: 6px; }
.v2-hero h1 { font-size: 24px; font-weight: 800; margin: 7px 0 3px; line-height: 1.15; letter-spacing: -.3px; display: flex; align-items: center; gap: 10px; }
.v2-hero .m { font-size: 13px; font-weight: 600; opacity: .82; }
/* состояние «дело» / «предзакрытие» — янтарный */
.v2-hero.amber { background: linear-gradient(135deg, var(--hero1), var(--hero2)); color: var(--hero-ink); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.v2-hero.amber .ey { opacity: .75; }
/* состояние «готово» — зелёный */
.v2-hero.green { background: linear-gradient(135deg, var(--ok1), var(--ok2)); color: var(--hero-ok-ink); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.v2-hero.green .ey { opacity: .7; }
/* состояние «покой» / «смены нет» — спокойная поверхность */
.v2-hero.alert { background: linear-gradient(135deg, var(--alert), #b3241a); color: #fff; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.v2-hero.alert .ey { opacity: .9; }
.v2-hero.alert .go { background: rgba(0,0,0,.30); color: #fff; }
.v2-hero.calm, .v2-hero.neutral { background: var(--surface); border: 1px solid var(--line); }
.v2-hero.calm .ey, .v2-hero.neutral .ey { color: var(--text-3); opacity: 1; }
.v2-hero.calm .m, .v2-hero.neutral .m { color: var(--text-3); opacity: 1; }
.v2-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); flex: none; }
/* командная кнопка внутри героя */
.v2-hero .go { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; border-radius: 14px; padding: 14px 16px; font-weight: 800; font-size: 15px; cursor: pointer; gap: 10px; -webkit-tap-highlight-color: transparent; transition: transform .12s cubic-bezier(.2,.8,.3,1); }
.v2-hero .go:active { transform: scale(.98); }
.v2-hero.amber .go { background: rgba(20,14,3,.85); color: #ffe9bd; }
.v2-hero.green .go { background: rgba(4,26,13,.85); color: #c9f5db; }
.v2-hero.neutral .go, .v2-hero.calm .go { background: var(--cta); color: var(--cta-ink); }
.v2-hero .go .cam { width: 22px; height: 22px; border-radius: 6px; border: 2px solid currentColor; position: relative; flex: none; }
.v2-hero .go .cam::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid currentColor; }
.v2-hero .go .arr { font-size: 18px; font-weight: 800; flex: none; }
/* прогресс-бар фотоотчёта в герое */
.v2-hero .pr { margin-top: 12px; height: 7px; border-radius: 99px; background: rgba(20,14,3,.20); overflow: hidden; }
.v2-hero.green .pr { background: rgba(4,26,13,.20); }
.v2-hero .pr i { display: block; height: 100%; border-radius: 99px; background: rgba(20,14,3,.85); transition: width .4s cubic-bezier(.2,.8,.3,1); }
.v2-hero.green .pr i { background: rgba(4,26,13,.85); }
.v2-hero .prc { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; opacity: .78; margin-top: 5px; }
/* чек-строка «готово» */
.v2-hero .chk { display: flex; gap: 14px; margin-top: 12px; font-size: 12px; font-weight: 700; opacity: .9; flex-wrap: wrap; }

/* --- спина смены (strip) --- */
.v2-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin-top: 12px; }
.v2-strip b { font-size: 13.5px; }

/* --- чипы v2 --- */
.v2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); flex: none; }
.v2-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.v2-c-ok { background: var(--ok-soft); color: var(--ok); }
.v2-c-warn { background: var(--warn-soft); color: var(--warn); }
.v2-c-alert { background: var(--alert-soft); color: var(--alert); }
.v2-c-info { background: var(--info-soft); color: var(--info); }

/* --- полка быстрых действий --- */
.v2-qa { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-top: 12px; }
.v2-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 10px 12px; text-align: center; cursor: pointer; transition: transform .12s cubic-bezier(.2,.8,.3,1), background .15s ease; }
.v2-q:active { transform: scale(.96); background: var(--surface-2); }
.v2-qi { width: 38px; height: 38px; margin: 0 auto 7px; border-radius: 12px; background: var(--surface-3); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.v2-qi .ic { width: 20px; height: 20px; background-color: currentColor; }
.v2-q.main .v2-qi { background: linear-gradient(135deg, var(--hero1), var(--hero2)); color: var(--hero-ink); }
.v2-q b { font-size: 12px; font-weight: 800; display: block; }
.v2-q span { font-size: 10.5px; color: var(--text-3); font-weight: 600; display: block; margin-top: 1px; }

/* --- секции + строки v2 --- */
.v2-sec { font-size: 12px; font-weight: 700; color: var(--text-3); margin: 18px 4px 8px; letter-spacing: .3px; }
.v2-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.v2-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s ease; min-height: 48px; box-sizing: border-box; }
.v2-row:last-child { border-bottom: 0; }
.v2-row:active { background: var(--surface-2); }
.v2-ric { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-3); flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.v2-ric .ic { width: 20px; height: 20px; background-color: currentColor; }
.v2-rb { flex: 1; min-width: 0; }
.v2-rb b { display: block; font-size: 14px; font-weight: 800; }
.v2-rb span { font-size: 12px; color: var(--text-3); display: block; }
.v2-chev { color: var(--text-3); font-size: 20px; flex: none; line-height: 1; }
.v2-pbar { height: 6px; border-radius: 99px; background: var(--surface-3); margin-top: 6px; width: 120px; max-width: 100%; overflow: hidden; }
.v2-pbar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width .4s ease; }

/* --- таймлайн «После этого» --- */
.v2-tl { margin-top: 12px; padding: 4px 2px; }
.v2-tl-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.v2-tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; position: relative; }
.v2-tl-row:not(:last-child) .v2-tl-dot::after { content: ""; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 2px; height: 16px; background: var(--line-strong); }
.v2-tl-txt { font-size: 12.5px; color: var(--text-2); font-weight: 600; flex: 1; min-width: 0; }
.v2-tl-time { font-size: 11.5px; color: var(--text-3); font-weight: 700; flex: none; }

/* --- награда --- */
.v2-win { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 15px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-weight: 800; font-size: 13.5px; cursor: pointer; transition: transform .12s cubic-bezier(.2,.8,.3,1); }
.v2-win:active { transform: scale(.99); }
.v2-win .st { width: 18px; height: 18px; flex: none; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); background: currentColor; }
.v2-win small { color: var(--text-3); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* --- стартовый экран: карточки ролей --- */
.v2-roles { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.v2-role { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%; margin: 0; transition: transform .12s cubic-bezier(.2,.8,.3,1), background .15s ease; }
.v2-role:active { transform: scale(.98); background: var(--surface-2); }
.v2-role.primary { background: linear-gradient(135deg, var(--hero1), var(--hero2)); border-color: transparent; }
.v2-role .v2-ric { width: 44px; height: 44px; }
.v2-role.primary .v2-ric { background: rgba(20,14,3,.16); color: var(--hero-ink); }
.v2-role .v2-role-b { flex: 1; min-width: 0; }
.v2-role .v2-role-b b { display: block; font-size: 16px; font-weight: 800; }
.v2-role .v2-role-b span { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.v2-role.primary .v2-role-b b { color: var(--hero-ink); }
.v2-role.primary .v2-role-b span { color: rgba(35,26,8,.7); }
.v2-role.primary .v2-chev { color: var(--hero-ink); }

/* --- вход продавца: «с возвращением» --- */
.v2-welcome { margin-top: 6px; }
.v2-welcome .v2-hero { margin-bottom: 4px; }

/* --- нижняя навигация v2 (3 вкладки, янтарный активный) --- */
.tabbar.v2 .tab.active { background: linear-gradient(135deg, var(--hero1), var(--hero2)); color: var(--hero-ink); }
.tabbar.v2 .tab.active:active { background: linear-gradient(135deg, var(--hero1), var(--hero2)); }
.tabbar.v2 .tab.active .ic { background-color: var(--hero-ink); }

/* --- микро-отклик: success-анимация + спиннер + всплытие --- */
@keyframes v2-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes v2-check { to { stroke-dashoffset: 0; } }
@keyframes v2-spin { to { transform: rotate(360deg); } }
@keyframes v2-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.v2-anim-in { animation: v2-fade .28s cubic-bezier(.2,.8,.3,1) both; }
.v2-success { position: fixed; inset: 0; z-index: 1300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.v2-success .ring { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--ok1), var(--ok2)); display: flex; align-items: center; justify-content: center; animation: v2-pop .38s cubic-bezier(.2,.8,.3,1) both; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.v2-success .ring svg { width: 46px; height: 46px; }
.v2-success .ring svg path { stroke: var(--hero-ok-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 30; stroke-dashoffset: 30; animation: v2-check .34s .18s ease forwards; }
.v2-success .lbl { font-size: 15px; font-weight: 800; color: var(--text); }
.v2-spin { display: inline-block; width: 18px; height: 18px; border: 2.5px solid var(--line-strong); border-top-color: var(--text); border-radius: 50%; animation: v2-spin .7s linear infinite; vertical-align: -3px; }
.v2-btn-busy { position: relative; pointer-events: none; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .v2-anim-in, .v2-success .ring, .v2-success .ring svg path, .v2-spin { animation: none; }
  .v2-hero .pr i, .v2-pbar i, .v2-role, .v2-q, .v2-win, .v2-hero .go { transition: none; }
}

/* v2: выравнивание марки в шапке «Сейчас» + заголовок страницы «Ещё» */
.v2-hdr .brandbar { margin: 0; }
h1.pg { font-size: 24px; font-weight: 800; margin: 4px 0 14px; letter-spacing: -.3px; }

/* --- нижний лист «Что ещё?» (bottom-sheet) --- */
@keyframes v2-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.v2-sheet-ov { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.v2-sheet { width: 100%; max-width: 480px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 8px 14px calc(20px + env(safe-area-inset-bottom, 0)); max-height: 82vh; overflow-y: auto; box-shadow: 0 -12px 34px rgba(0,0,0,.4); animation: v2-sheet-up .26s cubic-bezier(.2,.8,.3,1) both; }
.v2-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 6px auto 10px; }
.v2-sheet-h { font-size: 18px; font-weight: 800; margin: 2px 4px 12px; letter-spacing: -.2px; }
@media (prefers-reduced-motion: reduce) { .v2-sheet { animation: none; } }

/* --- микро-флеш «Открываю камеру…» (переживает смену экрана) --- */
.v2-flash { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0)); z-index: 1000; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line-strong); box-shadow: var(--shadow); color: var(--text); font-size: 13.5px; font-weight: 700; animation: v2-fade .2s ease both; }
@media (prefers-reduced-motion: reduce) { .v2-flash { animation: none; } }

/* ============================================================
   ФАЗА B — инбокс управляющего «Разобрать» (очередь решений сети)
   ============================================================ */
.ibx-seg { display: flex; gap: 6px; margin: 6px 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.ibx-seg .seg-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 700; }
.ibx-seg .seg-btn.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.ibx-seg-n { font-size: 11px; font-weight: 800; background: var(--surface-3); color: var(--text-2); border-radius: var(--r-pill); padding: 1px 6px; min-width: 16px; text-align: center; }
.ibx-seg .seg-btn.on .ibx-seg-n { background: rgba(0,0,0,.18); color: inherit; }

.ibx-list { display: flex; flex-direction: column; gap: 10px; }
.ibx-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); padding: 13px 14px; }
.ibx-urgent { border-left-color: var(--alert); }
.ibx-today { border-left-color: var(--warn); }
.ibx-planned { border-left-color: var(--info); }
.ibx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ibx-sla { font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.ibx-title { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.ibx-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-top: 2px; }
.ibx-act { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ibx-act button { width: auto; flex: 1; margin: 0; }
.ibx-act button.link { flex: 0 0 auto; padding: 9px 12px; }
.ibx-photos { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ibx-photos img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); cursor: zoom-in; }

/* --- инбокс: десктоп master-detail (≥900px), без переключателя --- */
.ibx-detail:empty { display: none; }
.ibx-detailcard { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); padding: 16px; }
.ibx-detailcard.ibx-urgent { border-left-color: var(--alert); }
.ibx-detailcard.ibx-today { border-left-color: var(--warn); }
.ibx-detailcard.ibx-planned { border-left-color: var(--info); }
.ibx-dtitle { font-size: 19px; font-weight: 800; letter-spacing: -.3px; margin-top: 4px; }
@media (min-width: 900px) {
  #app:has(.ibx-page) { max-width: 1040px; }
  .ibx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
  .ibx-detail { position: sticky; top: 8px; }
  .ibx-card.ibx-click { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
  .ibx-card.ibx-click:hover { border-color: var(--line-strong); }
  .ibx-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
}

/* --- «Магазины» — светофор сети --- */
.st-grid { display: flex; flex-direction: column; gap: 10px; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--r-md); padding: 13px 14px; cursor: pointer; transition: border-color .15s ease; }
.st-card:hover { border-color: var(--line-strong); }
.st-red { border-left-color: var(--alert); }
.st-amber { border-left-color: #e2872f; }
.st-yellow { border-left-color: var(--warn); }
.st-green { border-left-color: var(--ok); }
.st-grey { border-left-color: var(--line-strong); }
.st-top { display: flex; align-items: center; gap: 9px; }
.st-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-dot-red { background: var(--alert); box-shadow: 0 0 8px var(--alert); }
.st-dot-amber { background: #e2872f; box-shadow: 0 0 8px #e2872f; }
.st-dot-yellow { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.st-dot-green { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.st-dot-grey { background: var(--text-3); }
.st-name { font-size: 15px; font-weight: 800; letter-spacing: -.2px; flex: 1; min-width: 0; }
.st-badge-txt { font-size: 11.5px; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.st-sub { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin: 4px 0 0 18px; }
.st-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 11px 0 0 18px; }
.st-metric { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.st-m-lb { font-size: 10.5px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.st-m-v { font-size: 14px; font-weight: 800; color: var(--text); }
.st-m-ok .st-m-v { color: var(--ok); }
.st-m-warn .st-m-v { color: var(--warn); }
.st-m-alert .st-m-v { color: var(--alert); }
@media (min-width: 900px) {
  #app:has(.st-page), #app:has(.pg-wide) { max-width: 1040px; }
  .st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  #app:has(.st-page) .dash-grid, #app:has(.pg-wide) .dash-grid { grid-template-columns: repeat(4, 1fr); }
  #app:has(.pg-wide) .tiles { grid-template-columns: repeat(3, 1fr); }
  /* Формы внутри широких экранов не растягиваем на километр */
  #app:has(.pg-wide) input, #app:has(.pg-wide) select, #app:has(.pg-wide) textarea { max-width: 560px; }

  /* Ширина-база десктопа для ВСЕХ экранов управляющего (фаза A адаптива):
     раньше ширину получали только помеченные экраны, остальное оставалось
     колонкой 480px — отсюда «гибрид». Продавец без mgr-mode остаётся узким. */
  #app.mgr-mode { max-width: 1040px; }
  #app.mgr-mode input, #app.mgr-mode select, #app.mgr-mode textarea { max-width: 560px; }
}

/* Архив V1 — вкладки, фильтры, сетка фото, лайтбокс. */
.seg-on { border-color: var(--ink); background: var(--ink); color: var(--surface); border-radius: var(--r-sm); font-weight: 600; }
.fld { display: inline-flex; flex-direction: column; gap: 4px; margin: 0 10px 10px 0; vertical-align: top; }
.fld select, .fld input { min-width: 0; }
.v1-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.v1-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; }
.v1-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.v1-meta { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.v1-date { font-size: 11.5px; color: var(--text-3); }
.v1-who { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.v1-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; box-sizing: border-box; z-index: 1000; cursor: zoom-out; }
.v1-lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r-sm); }
.v1-cap { color: var(--surface); text-align: center; font-size: 13px; max-width: 640px; }
.v1-cap .muted { color: rgba(255,255,255,.62); }
/* Архив V1 — вкладка «Накладные»: карточка без фото-превью, заметка о расхождении, листание в лайтбоксе. */
.v1-inv-card { cursor: pointer; }
.v1-inv-card .v1-meta { padding: 10px; }
.v1-disc-note { margin: 0; font-size: 12.5px; color: var(--no-ink); }
.v1-nav { display: flex; align-items: center; gap: 14px; }
.v1-nav-btn { min-height: 36px; padding: 4px 14px; border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--surface); font-size: 16px; font-weight: 700; cursor: pointer; }
.v1-nav .muted { color: rgba(255,255,255,.62); font-size: 12.5px; }