/*
 * Дизайн-система Bliss & Epil.
 *
 * Структура и имена токенов взяты из проекта Pradex Reports — там она
 * обкатана на живых отчётах, и совпадение имён позволяет переносить
 * готовые компоненты без правок. Палитра, шрифт и форма кнопок — свои,
 * с сайта клиники bliss-epil.ru:
 *   фон #F6F6F3 · текст #333 · акцент #AF8578 · золото логотипа #FFBA24
 *   Montserrat 400/500 · кнопки-пилюли, радиус 40px
 *
 * Шрифт локальный: не зависим от Google Fonts и не платим лишний запрос.
 */
@import url('/assets/fonts/montserrat.css');

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { overflow-x: hidden; max-width: 100%; }
/* Ощущение приложения на iOS: без двойного тап-зума и авто-ресайза текста */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* В режиме приложения экран не должен разъезжаться от случайного жеста.
   В браузере щипок остаётся: это средство доступности. */
@media (display-mode: standalone) {
  html, body { touch-action: pan-x pan-y; overscroll-behavior: none; }
  /* Длинное нажатие не должно выделять текст интерфейса — в приложениях
     так не бывает. Поля ввода и текст отчётов исключены: там выделять нужно. */
  body { -webkit-user-select: none; user-select: none; }
  .input, textarea, pre.tg, .tbl td { -webkit-user-select: text; user-select: text; }
}

:root, [data-theme="light"] {
  --bg:        #F6F6F3;
  --bg2:       #FFFFFF;
  --bg3:       #EFEFE9;
  --txt:       #333333;   /* сайт */
  --txt2:      #6B6259;
  --muted:     #8A8A8A;   /* дата и должность в макетах SMM */
  --title-soft:#919191;   /* крупные заголовки в макетах SMM */
  --accent:    #AF8578;
  --acc-h:     #9A7266;
  --acc-s:     #F3EAE6;
  --gold:      #FFBA24;   /* логотип */
  --accent-2:  #B29A80;   /* вторая плашка, chipColor из SMM */
  --success:   #6B8E4E;
  --danger:    #E74C3C;
  --border:    #E4E1DA;
  --shadow:    rgba(51,51,51,.10);
  --font:      'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:    14px;
  --radius-s:  10px;
  --radius-pill: 40px;
  --active-bg: var(--accent);
  --active-fg: #fff;
  --active-sh: 0 4px 14px rgba(175,133,120,.30);
}

[data-theme="dark"] {
  --bg:      #1C1A18;
  --bg2:     #262320;
  --bg3:     #302C28;
  --txt:     #F0EDE8;
  --txt2:    #C4BAB2;
  --muted:   #7E756C;
  --accent:  #C79A8C;
  --acc-h:   #AF8578;
  --acc-s:   #2E2320;
  --border:  #3A342F;
  --shadow:  rgba(0,0,0,.35);
  --active-sh: 0 4px 14px rgba(199,154,140,.28);
}

/* ── Стеклянные темы ────────────────────────────────────────
 * Перенесено из Pradex Reports: матовые поверхности поверх мягкого
 * градиента. Там это обкатано, поэтому взята механика — blur + saturate
 * + внутренняя световая кромка. Цвета свои: пудра, песок и тёплый белый
 * из фирменной палитры, вместо охры Прадекса.
 *
 * Полупрозрачность работает только если под ней есть что размывать,
 * поэтому фон — три мягких пятна, а не заливка.
 */
[data-theme="glass-light"] {
  --bg: radial-gradient(120% 85% at 0% 0%,   #F3E6E1 0%, rgba(243,230,225,0) 55%),
        radial-gradient(120% 90% at 100% 8%, #EFE7DE 0%, rgba(239,231,222,0) 52%),
        radial-gradient(110% 100% at 50% 120%, #F1EFE8 0%, rgba(241,239,232,0) 55%),
        #F6F6F3;
  --bg2:      rgba(255,255,255,.55);
  --bg3:      rgba(255,255,255,.40);
  --txt:      #2A2320;
  --txt2:     #5C5049;
  --muted:    #8A8A8A;
  --accent:   #AF8578;
  --acc-h:    #9A7266;
  --acc-s:    rgba(175,133,120,.14);
  --border:   rgba(255,255,255,.65);
  --shadow:   rgba(90,66,58,.14);
  --blur:     22px;
  --sat:      180%;
  --s-hi:     rgba(255,255,255,.80);
  --divider:  rgba(90,66,58,.18);
  --active-bg: rgba(175,133,120,.50);
  --active-sh: 0 6px 18px rgba(175,133,120,.28);
}

[data-theme="glass-dark"] {
  --bg: radial-gradient(120% 85% at 0% 0%,   #2A211D 0%, rgba(42,33,29,0) 55%),
        radial-gradient(120% 90% at 100% 8%, #241E1B 0%, rgba(36,30,27,0) 52%),
        #171412;
  --bg2:      rgba(42,36,32,.74);
  --bg3:      rgba(36,30,27,.66);
  --txt:      #F4EFEA;
  --txt2:     #D6CCC5;
  --muted:    #9A918A;
  --accent:   #C79A8C;
  --acc-h:    #AF8578;
  --acc-s:    rgba(199,154,140,.18);
  --border:   rgba(255,255,255,.14);
  --shadow:   rgba(0,0,0,.45);
  --blur:     18px;
  --sat:      150%;
  --s-hi:     rgba(255,255,255,.14);
  --divider:  rgba(255,255,255,.16);
  --active-bg: rgba(199,154,140,.42);
  --active-sh: 0 6px 18px rgba(0,0,0,.42);
}

/* Матовость — только поверхностям, не тексту и не мелким элементам:
   blur стоит дорого, а на подписях он ничего не даёт. */
[data-theme^="glass"] :is(.card, .stat, .nav, .table-wrap, .btn-quiet, .btn-ghost) {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}
[data-theme^="glass"] :is(.card, .stat, .table-wrap) {
  box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 var(--s-hi);
}
[data-theme^="glass"] .nav { box-shadow: inset -1px 0 0 var(--s-hi); }
[data-theme^="glass"] :is(.tbl th, .tbl td) { border-bottom-color: var(--divider); }
[data-theme^="glass"] .nav-item.active { box-shadow: var(--active-sh); }
@media (hover: hover) { [data-theme^="glass"] .tbl tr:hover td { background: rgba(255,255,255,.28); } }

/* Устройства без backdrop-filter (старые Android) получат плотный фон,
   иначе текст ляжет на градиент и станет нечитаемым. */
@supports not (backdrop-filter: blur(1px)) {
  [data-theme="glass-light"] { --bg2: rgba(255,255,255,.92); --bg3: rgba(255,255,255,.86); }
  [data-theme="glass-dark"]  { --bg2: rgba(42,36,32,.96);   --bg3: rgba(36,30,27,.94); }
}

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a.btn { text-decoration: none; }

/* ── Типографика ───────────────────────────────────────────── */
h1, h2, h3 { font-weight: 500; line-height: 1.25; }
h1 { font-size: clamp(22px, 4vw, 28px); }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.page-title { font-size: 22px; font-weight: 500; margin-bottom: 2px; }
.page-sub   { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.brand {
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
}
.brand .amp { color: var(--accent); }
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .34em;
  text-transform: uppercase; color: var(--accent);
}

/* ── Каркас ────────────────────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.nav {
  width: 236px; flex-shrink: 0; background: var(--bg2);
  border-right: 1px solid var(--border); padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  overscroll-behavior: contain;
}
.main { flex: 1; min-width: 0; }
.content { max-width: 1360px; margin: 0 auto; padding: 24px 24px 120px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-s);
  font-size: 14px; cursor: pointer; margin-bottom: 2px;
  user-select: none; color: var(--txt2);
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover  { background: var(--bg3); color: var(--txt); }
.nav-item:active { transform: scale(.99); }
.nav-item.active {
  background: var(--acc-s); color: var(--accent); font-weight: 500;
}
.nav-item .ic   { width: 18px; text-align: center; }
.nav-item .soon {
  margin-left: auto; font-size: 10px; color: var(--muted);
  background: var(--bg3); padding: 2px 7px; border-radius: 8px;
}

/* ── Карточки и метрики ────────────────────────────────────── */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.card h3 { margin-bottom: 10px; }

.stats { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 120px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.stat .num { font-size: 24px; font-weight: 500; }
.stat .lbl {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.stat.sel .num { color: var(--accent); }

.kv {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-size: 13px; }
.kv .v { font-weight: 500; }

/* ── Кнопки: пилюли, как на сайте ──────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font); font-size: 14px; font-weight: 500;
  cursor: pointer; background: var(--accent); color: #fff;
  transition: background .12s ease, transform .08s ease;
}
/* Отклик на нажатие, а не на отпускание — так интерфейс кажется живым */
.btn:hover  { background: var(--acc-h); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn-ghost {
  background: transparent; color: var(--accent);
  border-color: var(--accent);
}
.btn-ghost:hover { background: var(--acc-s); }

.btn-quiet {
  background: var(--bg3); color: var(--txt2); border-color: var(--border);
}
.btn-quiet:hover { background: var(--border); }

.btn-mini { padding: 7px 16px; font-size: 13px; }

/* ── Поля ──────────────────────────────────────────────────── */
.field { display: block; margin-bottom: 14px; }
.field > .lbl {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px;
}
.input, select.input, textarea.input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--bg2); color: var(--txt);
  font-family: var(--font); font-size: 14px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-s);
}

/* ── Ярлыки и статусы ──────────────────────────────────────── */
.badge {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--bg3); color: var(--txt2);
}
.badge.ok     { background: rgba(107,142,78,.14);  color: var(--success); }
.badge.warn   { background: rgba(255,186,36,.18);  color: #A8781A; }
.badge.err    { background: rgba(231,76,60,.12);   color: var(--danger); }
.badge.accent { background: var(--acc-s);          color: var(--accent); }

/* ── Таблицы ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; font-weight: 500; font-size: 12px;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: 0; }
/* Подсветка строки только там, где есть указатель: на телефоне это
   выглядит как «залипшее» серое выделение после каждого касания. */
@media (hover: hover) { .tbl tr:hover td { background: var(--bg); } }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Скрытый телефон: не пустая клетка, а явный знак «нет доступа» */
.phone-hidden { color: var(--muted); }
.phone-hidden::after { content: 'нет доступа'; font-size: 12px; }

/* ── Мелочи ────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.right { text-align: right; }
.row   { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer{ flex: 1; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

/* ── Адаптив: до 768 меню уезжает в выдвижную панель ───────── */
.burger { display: none; }

/* Затемнение под меню: и видно, что оно поверх страницы, и закрыть
   можно тапом мимо — на телефоне это привычнее кнопки «закрыть». */
.nav-veil {
  display: none; position: fixed; inset: 0; z-index: 29;
  background: rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .22s ease;
}
.nav-veil.on { display: block; opacity: 1; }
@media (max-width: 768px) {
  .nav {
    position: fixed; left: 0; top: 0; z-index: 30;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 0 40px var(--shadow);
  }
  .nav.open { transform: none; }
  .nav-item { padding: 13px 14px; font-size: 15px; }
  .burger { display: inline-flex; }
  .content { padding: 16px 16px 100px; }
  .stat { min-width: calc(50% - 5px); }
}

/* Кнопка меню. Квадрат 44×44 — минимальная цель для пальца
   по рекомендациям Apple; меньше — люди промахиваются. */
.burger {
  align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 44px;
  margin-right: 10px; border-radius: var(--radius-s);
  background: var(--bg2); border: 1px solid var(--border);
  font-size: 18px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger:active { transform: scale(.96); }

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

/* ── Мобильное: ведёт себя как приложение ──────────────────
 * Правила подобраны так, чтобы страницу НЕ приходилось увеличивать:
 *   • поля ввода 16px — иначе iOS сам зумит экран при фокусе
 *     и обратно не отъезжает;
 *   • touch-action: manipulation убирает зум по двойному тапу
 *     (стоит выше, в html) — щипком увеличить всё ещё можно,
 *     это нужно людям со слабым зрением;
 *   • safe-area — чтобы контент не лез под «чёлку» и полосу жестов;
 *   • меню внизу: до верха экрана большим пальцем не дотянуться.
 */
.input, select.input, textarea.input { font-size: 16px; }

.tabbar { display: none; }

@media (max-width: 768px) {
  .app { flex-direction: column; }

  /* Меню на телефоне не прячется совсем, а выезжает по кнопке.
     Раньше его тут просто выключали, и на телефоне были доступны
     только пять разделов из нижней панели — остальные найти было
     нельзя вовсе. */
  .nav {
    display: block; width: 82vw; max-width: 300px;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  .content {
    padding: calc(12px + env(safe-area-inset-top)) 14px
             calc(84px + env(safe-area-inset-bottom));
  }

  /* Нижнее меню — как в приложении */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter: blur(14px);
  }
  .tabbar .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px; border-radius: var(--radius-s);
    font-size: 11px; color: var(--muted); cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tab .ic { font-size: 18px; line-height: 1; }
  .tabbar .tab.active { color: var(--accent); }
  .tabbar .tab:active { background: var(--bg3); }

  /* Пальцем: цели не меньше 44px, как в рекомендациях Apple */
  .btn { padding: 13px 22px; min-height: 44px; }
  .btn-mini { padding: 10px 16px; min-height: 40px; }
  .card { padding: 14px; border-radius: 12px; }
  .stat { min-width: calc(50% - 5px); }

  /* Таблицы на телефоне превращаются в карточки: горизонтальная
     прокрутка в списке людей — это всегда промах пальцем */
  .tbl.cards, .tbl.cards thead { display: block; }
  .tbl.cards thead { display: none; }
  .tbl.cards tbody, .tbl.cards tr { display: block; }
  .tbl.cards tr {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px; background: var(--bg2);
  }
  .tbl.cards td { display: flex; justify-content: space-between; gap: 12px;
                  padding: 6px 0; border: 0; }
  .tbl.cards td::before { content: attr(data-l); color: var(--muted); font-size: 12px; }
  .tbl.cards td:first-child { font-weight: 500; font-size: 16px; }
  .tbl.cards td:first-child::before { content: none; }
}

/* Список переключателей функций */
.feat { display: flex; align-items: center; gap: 12px; padding: 11px 0;
        border-bottom: 1px solid var(--border); }
.feat:last-child { border-bottom: 0; }
.feat .t { flex: 1; min-width: 0; }
.feat .t b { display: block; font-weight: 500; font-size: 14px; }
.feat .t small { color: var(--muted); font-size: 12px; }
.feat.off .t b { color: var(--muted); }

/* Переключатель.
   Выключенное состояние должно быть ВИДНО: на светлом фоне и в стеклянной
   теме полупрозрачная дорожка сливалась со страницей, и было непонятно,
   выключатель это или просто украшение. Поэтому дорожка залита плотным
   цветом, с внутренней тенью и заметной рамкой. */
.sw { position: relative; width: 50px; height: 30px; flex-shrink: 0; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw i {
  position: absolute; inset: 0; border-radius: 999px;
  background: #DCD6CE;
  border: 1px solid rgba(0,0,0,.16);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.16);
  transition: background .15s ease, border-color .15s ease;
}
.sw i::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.sw input:checked + i {
  background: var(--accent);
  border-color: rgba(0,0,0,.12);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw input:disabled + i { opacity: .45; cursor: not-allowed; }

[data-theme="dark"] .sw i, [data-theme="glass-dark"] .sw i {
  background: #4A423B; border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
[data-theme="dark"] .sw i::after, [data-theme="glass-dark"] .sw i::after { background: #EDE7E0; }

/* Полоска состояния сохранения */
.toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 60;
  background: var(--txt); color: var(--bg2); padding: 11px 20px;
  border-radius: 999px; font-size: 14px; opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.22,1,.36,1); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 769px) { .toast { bottom: 28px; } }

/* Полоса сохранения: настройки не сохраняются молча — случайный тап
   не должен менять чьи-то права. */
.savebar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 8px 8px 18px;
  box-shadow: 0 10px 30px var(--shadow);
  font-size: 13px; color: var(--txt2);
  backdrop-filter: blur(14px);
  max-width: calc(100vw - 24px);
}
.savebar[hidden] { display: none; }
.savebar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 769px) { .savebar { bottom: 24px; } }
@media (max-width: 420px) { .savebar span { display: none; } }

/* Свёрнутые настройки в меню — как в старой панели */
.nav-sep { height: 1px; background: var(--border); margin: 12px 6px 10px; }
.nav-toggle {
  display: flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  padding: 7px 12px; margin-bottom: 2px; border-radius: var(--radius-s);
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.nav-toggle:hover { background: var(--bg3); color: var(--txt); }
.nav-arrow { display: inline-block; font-size: 9px; transition: transform .18s ease; }
.nav-toggle.open .nav-arrow { transform: rotate(90deg); }
.nav-fold { display: none; }
.nav-fold.open { display: block; }

/* Функция с выбором ролей: кому она доступна */
.featbox { padding: 12px 0; border-bottom: 1px solid var(--border); }
.featbox:last-child { border-bottom: 0; }
.featbox.off .t b { color: var(--muted); }

.roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 2px; }
.chip {
  display: inline-flex; align-items: center; cursor: pointer; user-select: none;
  padding: 6px 12px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--muted);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  min-height: 32px;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:active { transform: scale(.97); }
.chip.on { background: var(--acc-s); border-color: var(--accent); color: var(--accent); font-weight: 500; }
.chip-note { font-size: 12px; color: var(--muted); align-self: center; }

/* Правка времени прямо в таблице прихода */
.cell-edit {
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 1px dashed var(--border);
  border-radius: 8px; padding: 4px 10px; min-height: 32px;
}
.cell-edit:hover { border-color: var(--accent); color: var(--accent); }
.cell-edit:active { transform: scale(.97); }
.cell-edit.manual { border-style: solid; border-color: var(--accent); color: var(--accent); }

/* Текст сообщения бота как он придёт в Telegram */
pre.tg {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font); font-size: 13px; line-height: 1.5;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 12px 14px; margin: 0;
}

/* Предложение установить приложение — снизу, не поверх работы */
.a2hs {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(14px);
}
.a2hs[hidden] { display: none; }
.a2hs .t { flex: 1; min-width: 180px; }
.a2hs .t b { display: block; font-weight: 500; font-size: 14px; }
.a2hs .t small { color: var(--muted); font-size: 12px; }
@media (min-width: 769px) { .a2hs { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }

/* Плотная таблица прихода: смысл раздела — увидеть смену целиком,
   а не любоваться воздухом. Строки ниже, шрифт мельче, лишние колонки
   свёрнуты в подписи. */
.card.compact { padding: 10px 12px; }
.tbl.dense th { padding: 6px 8px; font-size: 11px; }
.tbl.dense td { padding: 6px 8px; font-size: 13px; }
.tbl.dense td b { font-weight: 500; }
.tbl.dense .cell-edit { padding: 2px 8px; min-height: 26px; font-size: 13px; }
.tbl.dense .badge { padding: 2px 8px; font-size: 11px; }
.tbl.dense small { font-size: 11px; }

@media (max-width: 768px) {
  /* На телефоне карточка тоже плотнее: пять строк вместо восьми */
  .tbl.dense.cards tr { padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; }
  .tbl.dense.cards td { padding: 3px 0; font-size: 14px; }
  .tbl.dense.cards td:first-child { font-size: 15px; }
  .tbl.dense.cards td::before { font-size: 11px; }
}

/* ── Компактный режим: больше данных на экран ──────────────
 * Панель — рабочий инструмент, а не витрина. Отступы и кегль урезаны
 * так, чтобы смена целиком помещалась без прокрутки, но текст остался
 * читаемым: ниже 13px на телефоне уже щуришься. */
.content { padding: 16px 18px 100px; }
.card { padding: 12px 14px; margin-bottom: 10px; }
.card h3 { font-size: 14px; margin-bottom: 8px; }
.page-title { font-size: 19px; }
.page-sub { font-size: 12px; margin-bottom: 12px; }
.stats { gap: 8px; margin-bottom: 12px; }
.stat { padding: 10px 12px; }
.stat .num { font-size: 20px; }
.stat .lbl { font-size: 10px; }
.kv { padding: 7px 0; }
.feat { padding: 9px 0; }
.feat .t b { font-size: 13px; }
.feat .t small { font-size: 11px; }
.nav-item { padding: 8px 12px; font-size: 13px; }
.eyebrow { font-size: 10px; }

@media (max-width: 768px) {
  .content { padding: calc(10px + env(safe-area-inset-top)) 12px
             calc(78px + env(safe-area-inset-bottom)); }
  .card { padding: 11px 12px; margin-bottom: 8px; }
  .stat { min-width: calc(33% - 6px); padding: 8px 10px; }
  .stat .num { font-size: 18px; }
  .stat .lbl { font-size: 9px; letter-spacing: .04em; }

  /* Карточка строки таблицы: подпись и значение в одну строку,
     без лишних полей. Пять человек влезают на экран целиком. */
  .tbl.dense.cards tr { padding: 7px 10px; margin-bottom: 5px; }
  .tbl.dense.cards td { padding: 2px 0; font-size: 13px; }
  .tbl.dense.cards td:first-child { font-size: 14px; padding-bottom: 4px; }
  .tbl.dense.cards td::before { font-size: 11px; }
  .tabbar { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .tabbar .tab { padding: 6px 2px; font-size: 10px; }
  .tabbar .tab .ic { font-size: 16px; }
}

/* ── Темы Apple ─────────────────────────────────────────────
 * Перенос из Pradex Reports: системные цвета iOS, материалы с размытием,
 * шрифт SF, радиус 18. Акцент — наш пудрово-коричневый вместо охры.
 *
 * Смысл материала: карточка не «белый прямоугольник», а полупрозрачный
 * слой над фоном, поэтому у неё есть светлая верхняя кромка (--s-hi)
 * и размытие. На плотном фоне это незаметно, на цветном — оживает.
 */
[data-theme="apple-light"] {
  --bg:      #F2F2F7;                    /* systemGroupedBackground */
  --bg2:     rgba(255,255,255,.72);      /* приподнятый материал карточки */
  --bg3:     rgba(255,255,255,.55);
  --txt:     #1C1C1E;                    /* label */
  --txt2:    #3C3C43;                    /* secondaryLabel */
  --muted:   #8A8A8E;                    /* tertiaryLabel */
  --accent:  #AF8578;
  --acc-h:   #9A7266;
  --acc-s:   rgba(175,133,120,.12);
  --gold:    #FFBA24;
  --accent-2:#B29A80;
  --success: #34C759;                    /* systemGreen */
  --danger:  #FF3B30;                    /* systemRed */
  --border:  rgba(60,60,67,.14);         /* separator */
  --shadow:  rgba(0,0,0,.10);
  --font:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --radius:  18px;
  --radius-s:12px;
  --radius-pill: 40px;
  --blur:    20px;
  --sat:     180%;
  --s-hi:    rgba(255,255,255,.90);
  --divider: rgba(60,60,67,.14);
  --active-bg: var(--accent);
  --active-fg: #fff;
  --active-sh: 0 4px 14px rgba(175,133,120,.26);
  color-scheme: light;
}

[data-theme="apple-dark"] {
  --bg:      #000000;                    /* истинно чёрный, экономит OLED */
  --bg2:     rgba(28,28,30,.72);         /* systemGray6, приподнятый */
  --bg3:     rgba(44,44,46,.60);
  --txt:     #FFFFFF;
  --txt2:    rgba(235,235,245,.78);
  --muted:   rgba(235,235,245,.45);
  --accent:  #C79A8C;                    /* светлее: на чёрном пудра темнеет */
  --acc-h:   #AF8578;
  --acc-s:   rgba(199,154,140,.18);
  --gold:    #FFC94D;
  --accent-2:#C0A88E;
  --success: #30D158;
  --danger:  #FF453A;
  --border:  rgba(84,84,88,.50);
  --shadow:  rgba(0,0,0,.50);
  --font:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --radius:  18px;
  --radius-s:12px;
  --radius-pill: 40px;
  --blur:    22px;
  --sat:     170%;
  --s-hi:    rgba(255,255,255,.10);
  --divider: rgba(84,84,88,.42);
  --active-bg: var(--accent);
  --active-fg: #1C1C1E;
  --active-sh: 0 6px 18px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* Материалы: размытие только поверхностям, не тексту */
[data-theme^="apple"] :is(.card, .stat, .nav, .tabbar, .table-wrap, .savebar, .a2hs) {
  -webkit-backdrop-filter: blur(var(--blur)) saturate(var(--sat));
  backdrop-filter: blur(var(--blur)) saturate(var(--sat));
}
[data-theme^="apple"] :is(.card, .stat) {
  box-shadow: 0 1px 3px var(--shadow), inset 0 1px 0 var(--s-hi);
  border-color: var(--divider);
}
[data-theme^="apple"] .nav { border-right-color: var(--divider); }
[data-theme^="apple"] :is(.tbl th, .tbl td, .kv, .feat) { border-bottom-color: var(--divider); }

/* Типографика Apple: у крупных заголовков плотнее трекинг и леадинг */
[data-theme^="apple"] :is(h1, h2, .page-title) { letter-spacing: -.021em; line-height: 1.12; }
[data-theme^="apple"] :is(.lbl, .eyebrow, .stat .lbl) { letter-spacing: .01em; }
[data-theme^="apple"] .brand { letter-spacing: .12em; }

/* Отклик на нажатие мгновенный, как в iOS: реагируем на press, не на release */
[data-theme^="apple"] :is(.btn, .nav-item, .tab, .chip, .cell-edit) {
  transition: transform .12s ease-out, background .15s, border-color .15s, box-shadow .15s;
}
[data-theme^="apple"] :is(.btn, .nav-item, .chip, .cell-edit):active { transform: scale(.97); }

/* Пользователь просил меньше прозрачности — делаем материалы плотными */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="apple-light"] { --bg2: #FFFFFF; --bg3: #F2F2F7; --blur: 0px; }
  [data-theme="apple-dark"]  { --bg2: #1C1C1E; --bg3: #2C2C2E; --blur: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme^="apple"] :is(.btn, .nav-item, .chip, .cell-edit):active { transform: none; }
}

/* Меню под именем в шапке */
.usermenu { position: relative; }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 80;
  min-width: 210px; padding: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 34px var(--shadow);
  backdrop-filter: blur(16px);
}
.usermenu-pop[hidden] { display: none; }
.upop-item {
  padding: 10px 12px; border-radius: var(--radius-s);
  font-size: 14px; cursor: pointer; user-select: none;
}
.upop-item:hover { background: var(--bg3); }
.upop-item:active { transform: scale(.99); }
.upop-item.danger { color: var(--danger); }
.upop-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ── Таблица прихода: как в старой панели ───────────────────
 * Десять колонок не помещаются на телефон, поэтому таблица прокручивается
 * вбок, а колонка с именем закреплена: без неё на четвёртой колонке уже
 * непонятно, чья это строка.
 */
.wt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.wt { min-width: 720px; }
table.wt .stick {
  position: sticky; left: 0; z-index: 2;
  background: var(--bg2);
  box-shadow: 1px 0 0 var(--border);
}
table.wt thead .stick { z-index: 3; }
table.wt tr:hover .stick { background: var(--bg3); }
.th-sub { font-weight: 400; text-transform: none; font-size: 10px; color: var(--muted); }
table.wt td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dev-plus { color: var(--danger); }

/* Поля правки прямо в таблице */
.wt-edit {
  width: 66px; padding: 4px 8px; text-align: center;
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--txt);
}
.wt-edit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--acc-s); }
.wt-edit.manual { border-color: var(--accent); }
.wt-edit.dirty { border-color: var(--gold); background: rgba(255,186,36,.10); }
.wt-man { font-size: 10px; color: var(--accent); text-align: center; margin-top: 2px; }
.savebar.wt-savebar { max-width: min(560px, calc(100vw - 24px)); }
.savebar.wt-savebar .input { flex: 1; min-width: 120px; padding: 7px 12px; font-size: 13px; }

/* ── Больше стекла ──────────────────────────────────────────
 * Поверхности полупрозрачны во всех темах, а не только в «стеклянных»:
 * так интерфейс перестаёт выглядеть набором белых прямоугольников
 * и получает глубину, как в iOS и Telegram.
 *
 * Размытие вешаем только на крупные поверхности. На мелких элементах
 * оно стоит дорого и не читается.
 */
:root { --glass: rgba(255,255,255,.72); --glass-2: rgba(255,255,255,.55); }
[data-theme="dark"] { --glass: rgba(38,35,32,.72); --glass-2: rgba(48,44,40,.6); }

:is(:root, [data-theme="light"], [data-theme="dark"]) :is(.card, .stat, .nav, .savebar, .a2hs, .usermenu-pop) {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* Нижнее меню — стеклянная панель, как в iOS: контент под ней
   просвечивает, сверху тонкая линия-разделитель вместо жирной рамки. */
.tabbar {
  background: color-mix(in srgb, var(--bg2) 72%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: .5px solid var(--divider, var(--border));
  box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset;
}
[data-theme$="dark"] .tabbar { box-shadow: 0 -1px 0 rgba(255,255,255,.06) inset; }

/* Активная вкладка: подложка вместо одного лишь цвета текста —
   палец закрывает подпись, и цвет не виден. */
.tabbar .tab.active {
  background: var(--acc-s);
  border-radius: 12px;
}

/* Закреплённая колонка тоже должна быть матовой, иначе под ней
   просвечивают уезжающие столбцы. */
table.wt .stick {
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Убираем серый след от касания: он остаётся после тапа и выглядит
   как выделенная строка, хотя ничего не выделено. */
* { -webkit-tap-highlight-color: transparent; }
:is(.card, .feat, .tbl tr, .nav-item, .tab, .upop-item) { -webkit-touch-callout: none; }

/* Устройства без color-mix и backdrop-filter получают плотный фон */
@supports not (backdrop-filter: blur(1px)) {
  .tabbar, table.wt .stick { background: var(--bg2); }
}

/* ── Панель даты: стрелки не должны наезжать на поле ────────
 * Сетка вместо flex-обёрток: у стрелок фиксированная ширина, поле даты
 * забирает остаток. Раньше поле было внутри .field с flex:1 и на iOS
 * распухало, наезжая на соседей.
 */
.datebar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.daynav {
  flex: 0 0 36px; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; color: var(--txt2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer;
}
.daynav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.daynav:active:not(:disabled) { transform: scale(.94); }
.daynav:disabled { opacity: .35; cursor: not-allowed; }

.daybox { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.daybox input[type="date"] {
  width: 100%; border: 0; background: transparent; padding: 0;
  font: 500 15px/1.2 var(--font); color: var(--txt);
  font-variant-numeric: tabular-nums;
}
.daybox input[type="date"]::-webkit-calendar-picker-indicator { opacity: .4; }
.daylabel { font-size: 11px; color: var(--muted); }

/* Свёрнутая подсказка вместо абзаца на треть экрана */
details.hint { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
details.hint summary { cursor: pointer; color: var(--accent); }
details.hint[open] summary { margin-bottom: 6px; }

/* ── Таблица прихода плотнее ────────────────────────────────
 * Было видно четыре колонки из десяти. Мельче шрифт, у́же поля,
 * имя в одну строку — теперь помещается вся смена.
 */
table.wt { min-width: 660px; font-size: 12px; }
table.wt th { padding: 5px 7px; font-size: 10px; letter-spacing: .03em; }
table.wt td { padding: 3px 7px; font-size: 12px; line-height: 1.3; height: 30px; }
table.wt td.stick { max-width: 132px; }
table.wt td.stick b { font-size: 13px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.wt .wt-edit { width: 54px; padding: 2px 6px; font-size: 12px; line-height: 1.2; }
table.wt .badge { padding: 1px 7px; font-size: 10px; }
table.wt .th-sub { font-size: 9px; }
table.wt .wt-man { font-size: 9px; }

@media (max-width: 768px) {
  table.wt { min-width: 600px; }
  table.wt td.stick { max-width: 104px; }
}

/* ── Дерево выбора: категория → элементы ────────────────────
 * Плоский список из сотен строк листать невозможно, а решения
 * принимают категориями: «весь диодный лазер», «вся косметология».
 */
.tree { max-height: 420px; overflow: auto; border: 1px solid var(--border);
        border-radius: var(--radius-s); padding: 4px; }
.tree-grp { border-bottom: 1px solid var(--border); }
.tree-grp:last-child { border-bottom: 0; }
.tree-grp > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 500;
}
.tree-grp > summary::-webkit-details-marker { display: none; }
.tree-grp > summary::before { content: '▸'; font-size: 10px; color: var(--muted);
  transition: transform .15s ease; }
.tree-grp[open] > summary::before { transform: rotate(90deg); }
.tree-grp > summary:hover { background: var(--bg3); border-radius: 8px; }
.tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tree-count.on { color: var(--accent); font-weight: 500; }
.tree-all { flex: 0 0 auto; font-size: 11px; padding: 4px 10px; min-height: 28px; }

.tree-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 26px; font-size: 13px; cursor: pointer;
  border-radius: 8px;
}
.tree-item:hover { background: var(--bg3); }
.tree-item input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.tree-item span { flex: 1; min-width: 0; }

/* Состояние агентов Wi-Fi: зелёная точка — снимки идут, красная — молчит */
.agents { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
       background: var(--muted); }
.dot.ok  { background: #34c759; box-shadow: 0 0 0 3px rgba(52,199,89,.18); }
.dot.bad { background: #ff3b30; box-shadow: 0 0 0 3px rgba(255,59,48,.18); }

/* Персональное наблюдение: строка есть, но это не контроль дисциплины */
.tag-watch { opacity: .55; font-size: 11px; }

/* Инвентаризация.
   Расхождение — единственное, ради чего открывают таблицу, поэтому
   излишек и недостача различаются цветом, а не только знаком: глазами
   по столбцу «+3 / −2» скользишь, по красному и зелёному — нет. */
.inv-plus  { color: var(--success); font-weight: 600; }
.inv-minus { color: var(--danger);  font-weight: 600; }
.inv-unknown > td { background: rgba(231,76,60,.06); }
.inv-fact  { text-align: right; }

/* Панель сканирования липнет к верху: пересчёт — это длинный список,
   по которому крутят, и поле ввода не должно уезжать вместе с ним. */
.inv-scan {
  position: sticky; top: 0; z-index: 6; margin-top: 14px;
  padding-top: 12px; padding-bottom: 12px;
}
/* 17px — не про красоту: Safari на iPhone приближает страницу, когда
   фокус попадает в поле мельче 16px, и вернуть масштаб человек уже
   не может. Это касается всех полей, в которые тыкают на телефоне. */
.inv-scan .input, .inv-fact { font-size: 17px; }
.inv-code { flex: 1; min-width: 150px; }
.inv-scan .chip { padding: 8px 14px; }

.inv-video { position: relative; max-width: 420px; }
.inv-video video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; background: #000; display: block;
}
/* Прицел: без него непонятно, куда подносить штрихкод, и его держат
   у края кадра, где он не читается. */
.inv-video i {
  position: absolute; inset: 22% 8%; border: 2px solid rgba(255,255,255,.85);
  border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.25);
  pointer-events: none;
}

/* Последний скан. Крупно и одним блоком: человек смотрит на полку,
   на экран — вполглаза, и должен считывать результат мельком. */
.inv-last {
  padding: 12px 14px; border-radius: 12px; line-height: 1.45;
  background: rgba(107,142,78,.12); border: 1px solid rgba(107,142,78,.35);
}
.inv-last.bad { background: rgba(231,76,60,.10); border-color: rgba(231,76,60,.4); }
.inv-last b { font-size: 15px; }

/* Телефон: строки-карточки и без того узкие, поэтому поле «Факт»
   разворачиваем во всю ширину карточки — попасть в него пальцем
   с первого раза важнее, чем сэкономить место. */
@media (max-width: 720px) {
  .inv-fact { width: 100% !important; min-height: 40px; }
  .inv-scan { top: -1px; }
  .inv-last b { font-size: 16px; }
}

/* ── Инвентаризация: лента сканов ────────────────────────────
   Отвечает на вопрос «я это уже сканировал?» на месте, у полки,
   не открывая журнал: номер по порядку, время, что и сколько. */
.inv-feed { margin-top: 10px; display: grid; gap: 2px; }
.inv-feed-row {
  display: grid; grid-template-columns: 28px 62px 1fr auto;
  gap: 8px; align-items: baseline;
  padding: 4px 8px; border-radius: 8px; background: var(--bg3);
  font-size: 12px; color: var(--txt2);
}
.inv-feed-row b { color: var(--muted); font-weight: 500; }
.inv-feed-row .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.inv-feed-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-feed-row .q { font-weight: 600; color: var(--accent); }
.inv-feed-row.bad { background: rgba(231,76,60,.10); }

/* ── Инвентаризация: компактная карточка позиции ─────────────
   Обычная карточка раскладывает каждый столбец в свою строку — семь
   строк на позицию, три позиции на экран. Здесь всё в две строки:
   сверху название и расхождение, снизу коды, остаток и поле факта.
   На экране телефона помещается восемь позиций вместо трёх. */
@media (max-width: 768px) {
  .tbl.cards.inv-table tr {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    grid-template-areas:
      "name name diff btns"
      "art  bc   stock fact";
    gap: 2px 8px; padding: 7px 10px; margin-bottom: 6px; align-items: center;
  }
  .tbl.cards.inv-table td { padding: 0; display: block; font-size: 12px; }
  .tbl.cards.inv-table td::before { content: none; }
  .tbl.cards.inv-table td:nth-child(1) { grid-area: art;  color: var(--muted); }
  .tbl.cards.inv-table td:nth-child(2) { grid-area: bc;   color: var(--muted); }
  .tbl.cards.inv-table td:nth-child(3) { grid-area: name; font-size: 14px; font-weight: 500;
                                         overflow: hidden; }
  .tbl.cards.inv-table td:nth-child(4) { grid-area: stock; }
  .tbl.cards.inv-table td:nth-child(5) { grid-area: fact; }
  .tbl.cards.inv-table td:nth-child(6) { grid-area: diff; font-size: 13px; text-align: right; }
  .tbl.cards.inv-table td:nth-child(7) { grid-area: btns; }
  /* Категория и склад на телефоне не нужны: они одинаковые у всей
     выборки, а место занимают у каждой позиции. */
  .tbl.cards.inv-table .where { display: none; }
  .tbl.cards.inv-table .inv-fact { width: 74px !important; min-height: 34px; padding: 4px 6px; }
  .tbl.cards.inv-table td:nth-child(4)::before { content: "ост. "; color: var(--muted); }
}