/* =========================================================
   CHIRCHIQ ALI PLAST — дизайн-система
   Токены → база → раскладка → компоненты → утилиты → печать
   ========================================================= */

/* ---------- Шрифты (локально: fonts.googleapis.com может быть недоступен) ---------- */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('../fonts/manrope-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../fonts/unbounded-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('../fonts/unbounded-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jbmono-cyr.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/jbmono-lat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* ---------- Токены ---------- */
:root {
  --font-display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* бренд */
  --ink-950: #060A14;
  --ink-900: #0B1120;
  --ink-850: #0F1629;
  --ink-800: #141C33;
  --ink-700: #1D2742;
  --ink-600: #2B3657;
  --ink-500: #4A5578;
  --ink-300: #9AA4C0;
  --ink-200: #C9D0E2;

  --brand: #3450F0;
  --brand-600: #2A43D6;
  --brand-700: #2337C2;
  --brand-400: #6E84FF;
  --brand-100: #DFE5FF;
  --brand-50: #F0F3FF;
  --brand-t: #3450F0;      /* бренд как цвет текста/ссылок */
  --teal: #10B3A3;
  --teal-t: #08756B;
  --teal-100: #D4F5F0;
  --sb-group: #7F8AAD;     /* подписи групп в сайдбаре */
  --sb-thumb: rgba(70, 80, 105, .28);
  --sb-thumb-h: rgba(70, 80, 105, .5);

  /* «плёнка»: радужный перелив полиэтилена */
  --iris: linear-gradient(115deg, #7FE7F2 0%, #8FA9FF 34%, #C6A2FF 66%, #FFB4DB 100%);
  --iris-soft: linear-gradient(115deg, rgba(127,231,242,.16), rgba(143,169,255,.16) 34%, rgba(198,162,255,.16) 66%, rgba(255,180,219,.16));

  /* поверхности (светлая тема) */
  --bg: #F2F4F9;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;
  --surface-3: #EEF1F7;
  --border: #E1E6EF;
  --border-strong: #C8D0DE;
  --text: #0E1526;
  --text-2: #465069;
  --text-3: #636C82;
  --focus: 0 0 0 3px rgba(61, 90, 254, .28);

  /* статусы: оттенки подобраны под контраст ≥ 4,5:1 на своих фонах */
  --ok: #127A3D;   --ok-bg: #E6F6EC;
  --warn: #985700; --warn-bg: #FFF3DD;
  --bad: #C4262E;  --bad-bg: #FDEBEC;
  --info: #2157CC; --info-bg: #E7EFFE;
  --violet: #6B3DD1; --violet-bg: #F0EAFE;
  --cyan: #056F8C; --cyan-bg: #E1F5FB;
  --orange: #AE4410; --orange-bg: #FDEDE3;
  --slate: #56627C; --slate-bg: #EDF0F5;

  /* цеха: --w1/--w2 — заливки, --w1-t/--w2-t — текст */
  --w1: #3D5AFE; --w1-t: #3450F0; --w1-bg: #ECEFFF;
  --w2: #10B3A3; --w2-t: #08756B; --w2-bg: #E0F6F3;
  --wh: #985700; --wh-bg: #FFF3DD;

  /* графики: категориальный порядок (проверен валидатором, светлая тема) */
  --s1: #3D5AFE;
  --s2: #10B3A3;
  --s3: #B04CE0;
  --s4: #E2621B;
  /* возраст долга — одна шкала от светлого к тёмному */
  --age-0: #9DB0FF; --age-1: #F2B183; --age-2: #E2621B; --age-3: #A23B0A;

  /* оплата: безнал / наличные / карта */
  --pay-bank: var(--s1);
  --pay-cash: var(--s2);
  --pay-card: var(--s3);

  /* форма */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --sh-xs: 0 1px 2px rgba(14, 21, 38, .05);
  --sh-sm: 0 1px 3px rgba(14, 21, 38, .06), 0 1px 2px rgba(14, 21, 38, .04);
  --sh: 0 6px 20px rgba(14, 21, 38, .07);
  --sh-lg: 0 24px 60px rgba(14, 21, 38, .18);

  --sidebar-w: 268px;
  --topbar-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #080C17;
  --surface: #0F1628;
  --surface-2: #0C1222;
  --surface-3: #151E35;
  --border: #1E2944;
  --border-strong: #2C3958;
  --text: #E7EBF5;
  --text-2: #A9B2CA;
  --text-3: #8791AD;
  --brand-100: #1C2659;
  --brand-50: #141B40;
  --teal-100: #0E3532;
  --teal-t: #3CD3C2;
  /* статусы в тёмной теме — светлее, контраст ≥ 4,5:1 */
  --ok: #45D58F;   --ok-bg: #0D2B1C;
  --warn: #F2B247; --warn-bg: #2D2108;
  --bad: #FF7A7F;  --bad-bg: #331417;
  --info: #86A9FF; --info-bg: #0F1F43;
  --violet: #B9A2FF; --violet-bg: #231A40;
  --cyan: #4CCBEA; --cyan-bg: #0B2A35;
  --orange: #FF9A62; --orange-bg: #321A0D;
  --slate: #AAB4CB; --slate-bg: #1A2236;
  --w1: #6E84FF; --w1-t: #93A5FF; --w1-bg: #161F4D;
  --w2: #2CC4B4; --w2-t: #3CD3C2; --w2-bg: #0D302D;
  --wh: #F2B247; --wh-bg: #2D2108;
  /* графики: тёмная тема — свои шаги, проверены против #0F1628 */
  --s1: #6E84FF; --s2: #109E91; --s3: #B86BE0; --s4: #E0692A;
  --age-0: #5A6FD6; --age-1: #B9784B; --age-2: #E0692A; --age-3: #F2A27A;
  --brand: #3D5AFE; --brand-600: #3450F0; --brand-400: #93A5FF; --brand-t: #93A5FF;
  --sb-thumb: rgba(169, 178, 202, .22);
  --sb-thumb-h: rgba(169, 178, 202, .42);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sh: 0 8px 24px rgba(0, 0, 0, .35);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* без системной голубой подсветки при нажатии на телефоне (свойство наследуется — хватает одного правила) */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* взамен — своё короткое затухание в момент касания, только на сенсорных экранах */
@media (hover: none) {
  :is(a, button, [data-href], .csel-opt, .switch):active { opacity: .6; transition: opacity 0s; }
}
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 500 14px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'tnum' 0;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
h1 { font: 600 24px/1.15 var(--font-display); letter-spacing: -.02em; }
h2 { font: 600 18px/1.2 var(--font-display); letter-spacing: -.015em; }
h3 { font-size: 15px; font-weight: 700; }
h4 { font-size: 13px; font-weight: 700; }
p { margin: 0 0 .6em; }
a { color: var(--brand-t); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(61, 90, 254, .22); }
:focus-visible { outline: none; box-shadow: var(--focus); }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
code, .mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Раскладка приложения ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.main { min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px 28px 48px; max-width: 1560px; width: 100%; }

/* сайдбар */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink-900); color: var(--ink-200);
  display: flex; flex-direction: column; z-index: 40;
  border-right: 1px solid rgba(255, 255, 255, .04);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
/* в приложении прокручивается внутренний слой, а сам сайдбар только обрезает: так фокус клавиатуры не сдвинет его вбок */
.app > .sidebar { overflow: hidden; overflow: clip; }
/* прокручивается только список разделов: логотип, цех и карточка пользователя всегда на месте и не сжимаются */
.sb-in { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; }
.sb-in > .sb-brand, .sb-in > .sb-scope, .sb-in > .sb-user { flex-shrink: 0; }
.sb-in > .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.sb-in > .sb-nav::-webkit-scrollbar { display: none; }
.sb-nav.more-down { -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent); }
.sb-nav.more-up { -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px); }
.sb-nav.more-up.more-down { -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 34px), transparent); }
.sb-scope { position: relative; }
.sb-scope-mini { display: none; }
.sidebar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--iris); opacity: .9; }
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; color: #fff; text-decoration: none !important; }
.sb-brand .logo-mark { width: 38px; height: 38px; flex: none; }
.sb-brand b { display: block; font: 700 15px/1 var(--font-display); letter-spacing: .02em; }
.sb-brand small { display: block; font-size: 10px; letter-spacing: .22em; color: var(--ink-300); margin-top: 5px; text-transform: uppercase; }

.sb-scope { margin: 2px 14px 10px; padding: 4px; background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: 12px; display: flex; gap: 4px; }
.sb-scope button { flex: 1; border: 0; background: transparent; color: var(--ink-300); font-size: 12px; font-weight: 700; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.sb-scope button:hover { color: #fff; }
.sb-scope button.on { background: var(--ink-700); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.sb-scope .lock { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12px; color: #fff; font-weight: 700; }
.sb-scope .lock i { width: 8px; height: 8px; border-radius: 50%; }

.sb-nav { padding: 6px 12px 16px; flex: 1; }
.sb-group { margin-top: 14px; }
.sb-group > span { display: block; padding: 0 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-group); }
.sb-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; margin: 1px 0; border-radius: 10px;
  color: var(--ink-300); font-weight: 600; font-size: 13.5px; text-decoration: none !important;
  transition: background .15s, color .15s;
}
.sb-link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.sb-link:hover { background: rgba(255, 255, 255, .045); color: #fff; }
.sb-link.active { background: rgba(255, 255, 255, .07); color: #fff; }
.sb-link.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--iris); }
.sb-link.active svg { opacity: 1; color: #9FB0FF; }
.sb-link .sb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ink-700); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sb-link .sb-count.bad { background: var(--bad); }
.sb-link .sb-lock { margin-left: auto; width: 14px; height: 14px; opacity: .5; }

.sb-user { margin: 0 12px 14px; padding: 12px; border-radius: 14px; background: var(--ink-850); border: 1px solid var(--ink-700); display: flex; align-items: center; gap: 10px; }
.sb-user .who { min-width: 0; flex: 1; }
.sb-user b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user small { display: block; color: var(--ink-300); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user .btn-icon { color: var(--ink-300); }
.sb-user .btn-icon:hover { color: #fff; background: var(--ink-700); }

/* верхняя панель */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.topbar .crumbs { min-width: 0; }
.topbar .crumbs small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.topbar .crumbs b { display: block; font: 600 17px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .spacer { flex: 1; }
.topbar .burger { display: none; }
.tb-search { position: relative; width: min(360px, 32vw); }
.tb-search input { padding-left: 38px; background: var(--surface); }
.tb-search svg { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.tb-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-2); padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.conn.off i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.bell { position: relative; }
/* счётчик уведомлений: свой класс, а не .dot — у .dot ширина 8px, и цифры вылезали из круга */
/* левый край привязан к правому краю колокольчика: длинное «50+» растёт вправо и не закрывает иконку */
.bell-n { position: absolute; top: -1px; left: 22px; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; border: 2px solid var(--bg);
  background: #E5383B; color: #fff; font: 800 10.5px/1 var(--font-sans); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(229, 56, 59, .35); pointer-events: none; }
.bell-wide { margin-right: 10px; }

/* заголовок страницы */
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .ph-text { flex: 1; min-width: 240px; }
.page-head p { color: var(--text-2); margin: 6px 0 0; max-width: 760px; }
.page-head .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* сетки */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.span-2 { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
/* в строке без переноса блоков текст внутри всё равно переносится и сжимается */
.row.nowrap > div, .row.nowrap > span:not(.badge):not(.chip):not(.delta):not(.avatar) { min-width: 0; white-space: normal; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ---------- Карточки ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; flex-wrap: wrap; }
.card-h h3 { flex: 1; min-width: 0; }
.card-h .sub { font-size: 12px; color: var(--text-3); font-weight: 600; }
.card-b { padding: 16px 18px 18px; }
.card-b.flush { padding: 8px 0 0; }
.card-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card.tint { background: var(--surface-2); }
.card.iris { position: relative; overflow: hidden; }
.card.iris::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--iris); }

/* KPI */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.kpi .k-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.kpi .k-label svg { width: 16px; height: 16px; color: var(--text-3); }
.kpi .k-value { font: 800 26px/1.1 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .k-value small { font-size: 13px; font-weight: 700; color: var(--text-3); margin-left: 4px; letter-spacing: 0; }
.kpi .k-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); font-weight: 600; flex-wrap: wrap; }
.kpi .k-spark { position: absolute; right: 14px; top: 42px; width: 84px; height: 32px; opacity: .9; pointer-events: none; }
.kpi.has-spark .k-value { padding-right: 92px; }
.kpi.clickable { cursor: pointer; transition: border-color .15s, transform .15s; }
.kpi.clickable:hover { border-color: var(--brand-400); }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.delta.up { color: var(--ok); background: var(--ok-bg); }
.delta.down { color: var(--bad); background: var(--bad-bg); }
.delta.flat { color: var(--slate); background: var(--slate-bg); }

/* ---------- Кнопки ---------- */
.btn {
  --b-bg: var(--surface); --b-fg: var(--text); --b-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--b-bd);
  background: var(--b-bg); color: var(--b-fg); font-weight: 700; font-size: 13.5px; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none !important; user-select: none;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btn-primary { --b-bg: var(--brand); --b-fg: #fff; --b-bd: var(--brand); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(61, 90, 254, .28); }
.btn-primary:hover { --b-bg: var(--brand-600); border-color: var(--brand-600); }
.btn-secondary { --b-bg: var(--surface); }
.btn-soft { --b-bg: var(--brand-50); --b-fg: var(--brand-t); --b-bd: transparent; }
.btn-soft:hover { --b-bg: var(--brand-100); border-color: transparent; }
.btn-ghost { --b-bg: transparent; --b-bd: transparent; --b-fg: var(--text-2); }
.btn-ghost:hover { --b-bg: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-danger { --b-bg: var(--bad); --b-fg: #fff; --b-bd: var(--bad); }
.btn-danger:hover { filter: brightness(.95); border-color: var(--bad); }
.btn-success { --b-bg: var(--ok); --b-fg: #fff; --b-bd: var(--ok); }
.btn-success:hover { filter: brightness(.95); border-color: var(--ok); }
.btn-iris { --b-bg: var(--iris); --b-fg: var(--ink-900); --b-bd: transparent; background: var(--iris); background-size: 160% 100%; transition: background-position .5s var(--ease), transform .08s, box-shadow .2s; box-shadow: 0 10px 30px rgba(143, 169, 255, .35); }
.btn-iris:hover { background-position: 100% 0; border-color: transparent; }
.btn-dark { --b-bg: var(--ink-900); --b-fg: #fff; --b-bd: var(--ink-900); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; gap: 6px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 7px; gap: 5px; }
.btn-xs svg { width: 14px; height: 14px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.btn-xl { height: 64px; padding: 0 26px; font-size: 18px; border-radius: 16px; gap: 12px; }
.btn-xl svg { width: 24px; height: 24px; }
.btn-block { width: 100%; }
.btn-icon { width: 38px; padding: 0; --b-bd: transparent; --b-bg: transparent; color: var(--text-2); }
.btn-icon:hover { --b-bg: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-xs { width: 26px; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 10px 10px 0; }

/* ---------- Формы ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.field > label .req { color: var(--bad); }
.hint { font-size: 12px; color: var(--text-3); font-weight: 500; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--bad); }
.field.is-invalid .hint { color: var(--bad); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-weight: 600; font-size: 14px; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); font-weight: 500; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.input[readonly] { background: var(--surface-2); }
.input:disabled, .select:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8399' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }
.input-sm, .select.input-sm { height: 32px; font-size: 13px; border-radius: 8px; }
.input-lg { height: 52px; font-size: 18px; border-radius: 12px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 10px 0 0 10px; }
.input-group .addon { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-left: 0; border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--text-2); font-weight: 700; font-size: 13px; white-space: nowrap; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-3); pointer-events: none; }
.input-icon .input { padding-left: 38px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-section { font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; user-select: none; }
.check input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1.5px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; transition: .15s; flex: none; }
.check input[type=radio] { border-radius: 50%; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { content: ''; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type=radio]:checked::after { width: 7px; height: 7px; border: 0; border-radius: 50%; background: #fff; transform: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; user-select: none; }
.switch input { appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s var(--ease); }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:disabled { opacity: .5; cursor: not-allowed; }

.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-3); border: 1px solid var(--border); }
.seg button, .seg a { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg .on { background: var(--surface); color: var(--text); box-shadow: var(--sh-sm); }

kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface-2); font: 700 11px var(--font-mono); color: var(--text-3); }

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 10px 14px 12px; font-weight: 700; color: var(--text-3); text-decoration: none !important; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; border: 0; background: none; font-size: 13.5px; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); }
.tab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.tab .pill { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.tab.on .pill { background: var(--brand-50); color: var(--brand-t); }

/* ---------- Бейджи / чипы ---------- */
.badge { --bd-c: var(--slate); --bd-bg: var(--slate-bg); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bd-bg); color: var(--bd-c); font-weight: 700; font-size: 12px; white-space: nowrap; line-height: 1; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.plain::before { display: none; }
.badge.sm { height: 20px; padding: 0 7px; font-size: 11px; }
.b-ok { --bd-c: var(--ok); --bd-bg: var(--ok-bg); }
.b-warn { --bd-c: var(--warn); --bd-bg: var(--warn-bg); }
.b-bad { --bd-c: var(--bad); --bd-bg: var(--bad-bg); }
.b-info { --bd-c: var(--info); --bd-bg: var(--info-bg); }
.b-violet { --bd-c: var(--violet); --bd-bg: var(--violet-bg); }
.b-cyan { --bd-c: var(--cyan); --bd-bg: var(--cyan-bg); }
.b-orange { --bd-c: var(--orange); --bd-bg: var(--orange-bg); }
.b-teal { --bd-c: var(--teal-t); --bd-bg: var(--teal-100); }
.b-dark { --bd-c: #fff; --bd-bg: var(--ink-700); }
.b-brand { --bd-c: var(--brand-t); --bd-bg: var(--brand-50); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-weight: 800; font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
.chip.w1 { color: var(--w1-t); background: var(--w1-bg); }
.chip.w2 { color: var(--w2-t); background: var(--w2-bg); }
.chip.wh { color: var(--wh); background: var(--wh-bg); }
.chip.ghost { color: var(--text-2); background: var(--surface-3); }
.chip.urgent { color: #fff; background: var(--bad); }
.chip svg { width: 13px; height: 13px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.click { cursor: pointer; }
.table .r, .table th.r { text-align: right; }
.table .c, .table th.c { text-align: center; }
.table td.r, .table td.num { font-variant-numeric: tabular-nums; }
.table .muted { color: var(--text-3); }
.table .strong { font-weight: 800; }
.table tfoot td { font-weight: 800; background: var(--surface-2); border-top: 1px solid var(--border); }
.table.compact td { padding: 8px 12px; }
.table.compact th { padding: 8px 12px; }
.cell-title { font-weight: 700; color: var(--text); }
.cell-sub { display: block; font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 1px; }
.table tr.row-bad td { background: color-mix(in srgb, var(--bad-bg) 55%, transparent); }
.table tr.row-warn td { background: color-mix(in srgb, var(--warn-bg) 55%, transparent); }

/* ---------- Прогресс ---------- */
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; display: flex; }
.progress > i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.progress.sm { height: 5px; }
.progress.lg { height: 12px; }
.progress > i.ok { background: var(--ok); } .progress > i.warn { background: var(--warn); } .progress > i.bad { background: var(--bad); } .progress > i.teal { background: var(--teal); }
.progress.stacked > i { border-radius: 0; }

/* ---------- Список / описание ---------- */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.dl dt { color: var(--text-3); font-weight: 600; font-size: 13px; }
.dl dd { margin: 0; font-weight: 700; min-width: 0; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border); }
.list > li:first-child { border-top: 0; }
.list > li.click { cursor: pointer; }
.list > li.click:hover { background: var(--surface-2); }

/* ---------- Уведомления ---------- */
.alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid; font-weight: 600; align-items: flex-start; }
.alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.alert b { display: block; }
.alert .grow small { display: block; font-weight: 500; opacity: .85; margin-top: 2px; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert-ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.alert-bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.alert .alert-text { color: var(--text); }

.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; min-width: 280px; max-width: 400px; padding: 13px 15px; border-radius: 14px; background: var(--ink-900); color: #fff; box-shadow: var(--sh-lg); animation: toastIn .35s var(--ease); font-weight: 600; }
.toast svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.toast.ok svg { color: #4ADE80; } .toast.warn svg { color: #FBBF24; } .toast.bad svg { color: #F87171; } .toast.info svg { color: #93A5FF; }
.toast small { display: block; color: var(--ink-300); font-weight: 500; margin-top: 2px; }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(20px); } }

/* ---------- Модальные окна / панели ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(6, 10, 20, .55); display: flex; animation: fadeIn .2s ease; }
.overlay.center { align-items: center; justify-content: center; padding: 20px; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: var(--sh-lg); animation: popIn .28s var(--ease); border: 1px solid var(--border); }
.modal.lg { width: min(820px, 100%); }
.modal-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 6px; }
.modal-h h2 { flex: 1; }
.modal-h p { color: var(--text-2); margin: 6px 0 0; font-size: 13.5px; }
.modal-b { padding: 14px 22px 18px; overflow-y: auto; }
.modal-f { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.drawer { margin-left: auto; width: min(760px, 100%); height: 100%; background: var(--bg); display: flex; flex-direction: column; box-shadow: var(--sh-lg); animation: slideIn .32s var(--ease); }
.drawer.sm { width: min(520px, 100%); }
.drawer-h { display: flex; align-items: center; gap: 12px; padding: 16px 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.drawer-h .grow b { font: 600 18px/1.2 var(--font-display); display: block; }
.drawer-h .grow small { color: var(--text-3); font-weight: 600; }
.drawer-b { flex: 1; overflow-y: auto; padding: 20px 22px 30px; }
.drawer-f { padding: 12px 22px; background: var(--surface); border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* выпадающее меню / поповер */
.pop { position: absolute; z-index: 60; min-width: 300px; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-lg); overflow: hidden; animation: popIn .2s var(--ease); }
.pop-h { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.pop-b { max-height: 420px; overflow-y: auto; }
.tip { position: fixed; z-index: 300; pointer-events: none; padding: 7px 11px; border-radius: 10px; background: var(--ink-850); color: #fff; font: 600 12.5px/1.4 var(--font-sans); box-shadow: 0 10px 28px rgba(6, 10, 20, .28); border: 1px solid rgba(255, 255, 255, .08); white-space: pre-line; max-width: 280px; opacity: 0; transform: translateY(3px); transition: opacity .14s ease, transform .14s ease; }
.tip.on { opacity: 1; transform: none; }
.tip::after { content: ''; position: absolute; width: 8px; height: 8px; background: inherit; border: inherit; border-width: 0 1px 1px 0; display: none; }
.tip.at-top::after { display: block; left: calc(50% - 4px); bottom: -5px; transform: rotate(45deg); }
.tip.at-right::after { display: block; left: -5px; top: calc(50% - 4px); transform: rotate(135deg); }
[data-theme="dark"] .tip { background: #1D2742; border-color: #2C3958; }

/* ---------- Пустые состояния / заглушки ---------- */
.empty { padding: 38px 20px; text-align: center; color: var(--text-3); }
.empty svg { width: 40px; height: 40px; margin: 0 auto 10px; opacity: .55; }
.empty b { display: block; color: var(--text-2); font-size: 15px; margin-bottom: 4px; }
.locked { display: grid; place-items: center; min-height: 60vh; text-align: center; }
.locked .ic { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 16px; background: var(--surface); border: 1px solid var(--border); }
.locked .ic svg { width: 32px; height: 32px; color: var(--text-3); }
.locked p { color: var(--text-2); max-width: 420px; margin: 8px auto 0; }

/* аватар */
.avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 12.5px; color: #fff; background: var(--brand); letter-spacing: .02em; }
.avatar.sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; }
.avatar.lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }

/* таймлайн */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 28px; }
.timeline li::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline li i { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--surface); background: var(--border-strong); box-shadow: 0 0 0 1px var(--border); }
.timeline li.done i { background: var(--ok); }
.timeline li.now i { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-100); }
.timeline li b { display: block; font-size: 13.5px; }
.timeline li small { color: var(--text-3); font-weight: 600; }

/* конвейер статусов */
.pipeline { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pipe { padding: 10px 10px 9px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; text-align: left; transition: .15s; min-width: 0; }
.pipe:hover { border-color: var(--brand-400); }
.pipe.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.pipe b { display: block; font: 800 20px/1 var(--font-sans); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.pipe span { font-size: 11.5px; font-weight: 700; color: var(--text-2); display: flex; align-items: flex-start; gap: 6px; line-height: 1.25; min-height: 1.25em; }
.pipe span .dot { margin-top: 4px; }

/* станки */
.machine { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); align-items: center; }
.machine .m-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.machine .m-ic svg { width: 20px; height: 20px; }
.machine.run .m-ic { background: var(--ok-bg); color: var(--ok); }
.machine.idle .m-ic { background: var(--slate-bg); color: var(--slate); }
.machine.down .m-ic { background: var(--bad-bg); color: var(--bad); }
.machine.setup .m-ic { background: var(--warn-bg); color: var(--warn); }
.pulse { position: relative; }
.pulse::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid currentColor; opacity: 0; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { opacity: .5; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.anim-off .pulse::after, .anim-off .spin { animation-play-state: paused; }

/* весы */
.scale-display { position: relative; border-radius: 22px; padding: 22px 26px; background: radial-gradient(120% 140% at 10% 0%, #17224A 0%, var(--ink-900) 55%); color: #fff; overflow: hidden; border: 1px solid var(--ink-700); }
.scale-display::before { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--iris); }
.scale-display .sd-top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-300); font-weight: 700; flex-wrap: wrap; }
.scale-display .sd-val { font: 600 clamp(54px, 8vw, 96px)/1 var(--font-mono); letter-spacing: -.03em; margin: 18px 0 8px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 12px; }
.scale-display .sd-val small { font-size: .32em; color: var(--ink-300); letter-spacing: 0; }
.scale-display .sd-state { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 12.5px; letter-spacing: .06em; }
.sd-state.unstable { background: rgba(251, 191, 36, .14); color: #FBBF24; }
.sd-state.stable { background: rgba(74, 222, 128, .14); color: #4ADE80; }
.sd-state.zero { background: rgba(255, 255, 255, .08); color: var(--ink-300); }
.sd-state.offline { background: rgba(248, 113, 113, .14); color: #F87171; }
.scale-display .sd-bars { display: flex; gap: 3px; height: 34px; align-items: flex-end; margin-top: 14px; }
.scale-display .sd-bars i { flex: 1; background: rgba(159, 176, 255, .35); border-radius: 2px; min-height: 2px; transition: height .1s; }

/* этикетка (превью) */
.label-prev { width: 100%; max-width: 420px; aspect-ratio: 100 / 50; background: #fff; color: #000; border-radius: 10px; border: 1px solid var(--border-strong); padding: 2.2%; display: flex; gap: 2.2%; font-family: Arial, var(--font-sans); box-shadow: var(--sh); overflow: hidden; }
.label-prev .lp-qr { width: 38%; flex: none; text-align: center; }
.label-prev .lp-qr svg { width: 100%; height: auto; }
.label-prev .lp-no { font: 700 11px Arial, sans-serif; margin-top: 2px; }
.label-prev .lp-txt { flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.32; font-weight: 700; }
.label-prev .lp-p { font-weight: 800; font-size: 13px; line-height: 1.15; margin-bottom: 4px; }

/* сканер */
.scan-box { position: relative; border: 2px dashed var(--border-strong); border-radius: 18px; padding: 18px; background: var(--surface); display: flex; gap: 14px; align-items: center; }
.scan-box.ok { border-color: var(--ok); background: var(--ok-bg); }
.scan-box.bad { border-color: var(--bad); background: var(--bad-bg); }
.scan-box .scan-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; }
.scan-box .scan-ic svg { width: 26px; height: 26px; }

/* графики */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font: 600 11px var(--font-sans); fill: var(--text-3); }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-line { stroke: var(--border-strong); }
.chart .hover-col { fill: transparent; }
.chart .hover-col:hover { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut-wrap svg { width: 150px; height: 150px; flex: none; }
.donut-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 10px; }
.donut-legend .row { justify-content: space-between; flex-wrap: nowrap; }
.donut-legend b { font-variant-numeric: tabular-nums; }

/* матрица прав */
.perm-table td, .perm-table th { padding: 8px 10px; }
.perm-table select { height: 30px; font-size: 12.5px; padding: 0 28px 0 9px; border-radius: 8px; background-position: right 7px center; }
.lvl-0 { color: var(--text-3); } .lvl-1 { color: var(--info); } .lvl-2 { color: var(--ok); } .lvl-3 { color: var(--violet); }

/* канбан-очередь */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.lane { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; min-height: 200px; }
.lane-h { padding: 12px 14px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--border); }
.lane-b { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.task { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.task:hover { border-color: var(--brand-400); box-shadow: var(--sh-sm); }
.task.now { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.task .t-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.task .t-title { font-weight: 700; font-size: 13px; line-height: 1.35; }
.task .t-meta { font-size: 12px; color: var(--text-3); font-weight: 600; margin-top: 4px; }

/* большие плитки для цехового экрана */
.big-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.big-act { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; transition: .15s; color: var(--text); text-decoration: none !important; }
.big-act:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh); }
.big-act .ba-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
.big-act .ba-ic svg { width: 24px; height: 24px; }
.big-act b { font-size: 16px; }
.big-act small { color: var(--text-3); font-weight: 600; }

/* ---------- Утилиты ---------- */
.muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.ok-t { color: var(--ok); } .bad-t { color: var(--bad); } .warn-t { color: var(--warn); } .brand-t { color: var(--brand-t); }
.fw-8 { font-weight: 800; } .fw-7 { font-weight: 700; }
.fs-12 { font-size: 12px; } .fs-13 { font-size: 13px; } .fs-16 { font-size: 16px; } .fs-20 { font-size: 20px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hide { display: none !important; }
.right { margin-left: auto; }
.w-100 { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.icon-16 { width: 16px; height: 16px; } .icon-20 { width: 20px; height: 20px; }

/* логотип */
.logo-mark { display: block; }
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; }

/* ---------- Прокрутка в стиле сайта ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-h); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner, ::-webkit-scrollbar-button { display: none; background: transparent; }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } .sidebar, .sb-in, .sb-nav { scrollbar-width: none; } }

/* ---------- Переход между разделами ---------- */
.page.enter > * { animation: pageIn .46s var(--ease) both; }
.page.enter > *:nth-child(2) { animation-delay: .035s; }
.page.enter > *:nth-child(3) { animation-delay: .07s; }
.page.enter > *:nth-child(4) { animation-delay: .105s; }
.page.enter > *:nth-child(5) { animation-delay: .14s; }
.page.enter > *:nth-child(n+6) { animation-delay: .17s; }
@keyframes pageIn { from { opacity: 0; transform: translateY(12px); } }
.page.fade { animation: fadeIn .22s ease both; }
#routebar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150; background: var(--iris); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; }
#routebar.go { animation: routeGo .7s var(--ease) forwards; }
@keyframes routeGo { 0% { opacity: 1; transform: scaleX(.05); } 55% { opacity: 1; transform: scaleX(.8); } 100% { opacity: 0; transform: scaleX(1); } }
.sb-link { transition: background .2s, color .2s, padding .2s; }

/* ---------- Плавная смена темы ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after { transition: background-color .6s ease, border-color .6s ease, color .6s ease, fill .6s ease, stroke .6s ease, box-shadow .6s ease !important; }

/* ---------- Выпадающий список в стиле сайта ---------- */
.csel { position: relative; display: block; width: 100%; min-width: 0; }
.csel > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.csel-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: 600 14px/1 var(--font-sans);
  text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.csel-btn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-btn::after { content: ''; width: 16px; height: 16px; flex: none; background: var(--text-3); transition: transform .2s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.csel-btn:hover { border-color: var(--text-3); }
.csel-btn:focus-visible, .csel.open .csel-btn { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.csel.open .csel-btn::after { transform: rotate(180deg); background: var(--brand-t); }
.csel.sm .csel-btn { height: 32px; font-size: 13px; border-radius: 8px; padding: 0 10px; }
.csel.lg .csel-btn { height: 52px; font-size: 18px; border-radius: 12px; padding: 0 14px; }
.csel.disabled .csel-btn { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.csel-btn.lvl-0 > span { color: var(--text-3); } .csel-btn.lvl-1 > span { color: var(--info); } .csel-btn.lvl-2 > span { color: var(--ok); } .csel-btn.lvl-3 > span { color: var(--violet); }
.perm-table .csel-btn { height: 32px; font-size: 12.5px; border-radius: 8px; padding: 0 9px; }
.csel-menu { position: fixed; z-index: 260; min-width: 200px; max-width: min(460px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--sh-lg); animation: popIn .16s var(--ease); }
.csel-menu.up { animation-name: popUp; }
@keyframes popUp { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.csel-search { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 6px; padding: 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.csel-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.csel-opt > span { flex: 1; min-width: 0; }
.csel-opt svg { width: 16px; height: 16px; flex: none; color: var(--brand-t); opacity: 0; }
.csel-opt:hover, .csel-opt.act { background: var(--surface-3); }
.csel-opt.sel { color: var(--brand-t); background: var(--brand-50); }
.csel-opt.sel svg { opacity: 1; }
.csel-opt.off { opacity: .45; pointer-events: none; }
.csel-empty { padding: 14px 10px; color: var(--text-3); font-weight: 600; font-size: 13px; }
/* точка статуса и счётчик в пунктах (data-dot / data-count у <option>) */
.csel-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bd-c, var(--slate)); }
.csel-dot.b-dark { --bd-c: var(--text-2); }
.csel-n { font: 700 12px/20px var(--font-sans); font-style: normal; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 999px; text-align: center; flex: none;
  background: var(--surface-3); color: var(--text-2); font-variant-numeric: tabular-nums; }
.csel-opt.sel .csel-n { background: var(--surface); color: var(--brand-t); }
.csel-opt.zero > span, .csel-opt.zero .csel-n { color: var(--text-3); }
.csel-btn .csel-n { margin-right: -2px; }
.csel-sep { height: 1px; margin: 5px 4px; background: var(--border); }
.csel-sheet-h { display: none; }
.csel-scrim { position: fixed; inset: 0; z-index: 255; background: rgba(6, 10, 20, .5); animation: fadeIn .2s ease; }
@keyframes sheetIn { from { transform: translateY(100%); } }

/* ---------- Деньги: приход и расход ---------- */
.amt-in { color: var(--ok); font-weight: 800; white-space: nowrap; }
.amt-out { color: var(--bad); font-weight: 800; white-space: nowrap; }
.amt-zero { color: var(--text-3); }

/* ---------- Нижняя навигация (телефон) и поиск ---------- */
.bnav { display: none; }
.topbar .tb-find { display: none; }
.grid { align-content: start; }
.bell { z-index: 1; }
.sb-scope .short { display: none; }

/* ---------- Адаптив: ноутбук ---------- */
@media (max-width: 1280px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .g-21, .g-12, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .tb-search { display: none; }
  .topbar .tb-find { display: inline-flex; }
  .content { padding: 20px 20px 48px; }
}

/* ---------- Адаптив: сенсорный планшет — неподвижный «рельс» с иконками (наведения нет) ---------- */
@media (min-width: 721px) and (max-width: 1080px) and (hover: none) {
  :root { --sidebar-w: 76px; }
  .app { grid-template-columns: var(--sidebar-w) 1fr; }
  .sb-brand { justify-content: center; padding: 18px 0 14px; }
  .sb-brand > span, .sb-group > span, .sb-link > span:not(.sb-count), .sb-link .sb-lock, .sb-user .who { display: none; }
  .sb-nav { padding: 4px 10px 16px; }
  .sb-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .05); }
  .sb-group:first-child { border-top: 0; padding-top: 0; }
  .sb-link { justify-content: center; padding: 11px 0; }
  .sb-link svg { width: 20px; height: 20px; }
  .sb-link.active::before { left: -10px; }
  .sb-link .sb-count { position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; margin: 0; }
  .sb-scope { flex-direction: column; margin: 0 10px 6px; }
  .sb-scope button { padding: 6px 0; font-size: 11px; }
  .sb-scope .full { display: none; } .sb-scope .short { display: inline; }
  .sb-scope .lock { justify-content: center; padding: 7px 0; }
  .sb-scope .lock span { display: none; }
  .sb-user { flex-direction: column; gap: 6px; padding: 8px 0; margin: 0 10px 12px; }
}
@media (min-width: 721px) and (max-width: 1080px) { .topbar { padding: 0 20px; } }

/* ---------- Компьютер с мышью: сайдбар свёрнут в «рельс» и раскрывается при наведении ПОВЕРХ страницы ----------
   Колонка под сайдбар всегда 76px, поэтому раскрытие не двигает данные. Внутренний слой всегда шириной 268px —
   при сворачивании он просто обрезается, строки не переносятся и не прыгают по вертикали.
   Задержки: открытие через 0,07 с (не мигать, когда мышь просто пересекает край), закрытие через 0,16 с. */
@media (min-width: 721px) and (hover: hover) {
  :root { --sidebar-w: 76px; --sb-open: 268px; }
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .sb-auto { width: var(--sidebar-w); z-index: 70; transition: width .26s var(--ease) .16s, box-shadow .26s ease .16s; }
  .sb-auto:hover, .sb-auto:has(:focus-visible) { width: var(--sb-open); box-shadow: 16px 0 44px rgba(6, 10, 20, .32); transition-delay: .07s, .07s; }
  .sb-auto .sb-in { width: var(--sb-open); }

  /* то, что видно только в раскрытом виде: подписи, переключатель цеха, имя и «Выйти» */
  .sb-auto .sb-brand > span, .sb-auto .sb-group > span, .sb-auto .sb-link > span:not(.sb-count), .sb-auto .sb-link > .sb-lock,
  .sb-auto .sb-user .who, .sb-auto .sb-user .btn-icon, .sb-auto .sb-scope > :not(.sb-scope-mini) {
    opacity: 0; visibility: hidden; transition: opacity .12s ease .16s, visibility 0s linear .28s;
  }
  .sb-auto:hover :is(.sb-brand > span, .sb-group > span, .sb-link > span:not(.sb-count), .sb-link > .sb-lock, .sb-user .who, .sb-user .btn-icon, .sb-scope > :not(.sb-scope-mini)),
  .sb-auto:has(:focus-visible) :is(.sb-brand > span, .sb-group > span, .sb-link > span:not(.sb-count), .sb-link > .sb-lock, .sb-user .who, .sb-user .btn-icon, .sb-scope > :not(.sb-scope-mini)) {
    /* кликабельно только когда уже видно: быстрый клик по свёрнутому рельсу не сменит цех и не разлогинит */
    opacity: 1; visibility: visible; transition: opacity .2s ease .16s, visibility 0s linear .16s;
  }
  .sb-auto .sb-link > span:not(.sb-count), .sb-auto .sb-brand > span { white-space: nowrap; }

  /* логотип и иконки стоят по центру рельса (38px) в обоих состояниях */
  .sb-auto .sb-brand { padding: 22px 19px 18px; }
  .sb-auto .sb-link { width: 52px; padding: 9px 0 9px 17px; white-space: nowrap; transition: width .26s var(--ease) .16s, background .15s, color .15s; }
  .sb-auto:hover .sb-link, .sb-auto:has(:focus-visible) .sb-link { width: 100%; transition-delay: .07s, 0s, 0s; }
  .sb-auto .sb-link .sb-count { position: absolute; right: 3px; top: 3px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; margin: 0; transition: right .26s var(--ease) .16s, top .26s var(--ease) .16s; }
  .sb-auto:hover .sb-link .sb-count, .sb-auto:has(:focus-visible) .sb-link .sb-count { right: 10px; top: calc(50% - 9px); transition-delay: .07s; }
  .sb-auto .sb-link > .sb-lock { position: absolute; right: 12px; top: calc(50% - 7px); margin: 0; }

  /* названия групп в рельсе заменяет короткая черта — высота строк не меняется */
  .sb-auto .sb-group { position: relative; }
  .sb-auto .sb-group::before { content: ''; position: absolute; left: 28px; top: 7px; width: 20px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .09); transition: opacity .12s ease .2s; }
  .sb-auto:hover .sb-group::before, .sb-auto:has(:focus-visible) .sb-group::before { opacity: 0; transition-delay: .07s; }

  /* цех: в рельсе — значок текущего цеха, в раскрытом — полный переключатель */
  .sb-auto .sb-scope { transition: background-color .2s ease .16s, border-color .2s ease .16s; background-color: transparent; border-color: transparent; }
  .sb-auto:hover .sb-scope, .sb-auto:has(:focus-visible) .sb-scope { background-color: var(--ink-850); border-color: var(--ink-700); transition-delay: .1s; }
  .sb-auto .sb-scope-mini { display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 48px;
    background: var(--ink-850); border: 1px solid var(--ink-700); border-radius: 12px; color: #fff; font-size: 11.5px; font-weight: 800; pointer-events: none; transition: opacity .15s ease .2s; }
  .sb-auto .sb-scope-mini i { width: 7px; height: 7px; border-radius: 50%; }
  .sb-auto:hover .sb-scope-mini, .sb-auto:has(:focus-visible) .sb-scope-mini { opacity: 0; transition-delay: .07s; }

  /* карточка пользователя: в рельсе — только аватар */
  /* margin-bottom 30px: внизу слева браузер показывает адрес ссылки под курсором — он не должен закрывать карточку */
  .sb-auto .sb-user { width: 52px; padding: 8px 8px 8px 9px; margin-bottom: 30px; overflow: hidden; transition: width .26s var(--ease) .16s; }
  .sb-auto:hover .sb-user, .sb-auto:has(:focus-visible) .sb-user { width: calc(var(--sb-open) - 24px); transition-delay: .07s; }
}
@media (min-width: 721px) and (hover: hover) and (prefers-reduced-motion: reduce) {
  .sb-auto, .sb-auto * { transition-duration: 0s !important; }
}

/* ---------- Адаптив: телефон ---------- */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-104%); transition: transform .3s var(--ease); box-shadow: var(--sh-lg); z-index: 90; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-scrim { position: fixed; inset: 0; background: rgba(6, 10, 20, .5); z-index: 85; animation: fadeIn .2s ease; }
  .topbar { height: 56px; padding: 0 8px 0 14px; gap: 4px; }
  .topbar .crumbs small { display: none; }
  .topbar .crumbs b { font-size: 16px; }
  .topbar .conn { padding: 6px; border-radius: 50%; }
  .topbar .conn span { display: none; }
  .content { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); }
  .page-head { gap: 12px; margin-bottom: 16px; }
  .page-head .ph-text { min-width: 0; flex-basis: 100%; }
  .page-head p { font-size: 13.5px; }
  .page-head .ph-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .page-head .ph-actions::-webkit-scrollbar { display: none; }
  .page-head .ph-actions .btn { flex: none; }
  .g-2, .g-4, .g-5, .form-grid, .form-grid.g3 { grid-template-columns: minmax(0, 1fr); }
  .g-4.keep-2, .g-5.keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stack > *, .grid > * { min-width: 0; }
  .row > .btn-xl, .row > .btn-xl.right { flex: 1 1 100%; margin-left: 0; }
  .scale-display .sd-top .right { margin-left: 0; }
  .g-5.keep-2 > :last-child:nth-child(odd), .g-4.keep-2 > :last-child:nth-child(odd) { grid-column: span 2; }
  h1 { font-size: 21px; }
  .kpi { padding: 14px; }
  .kpi .k-value { font-size: 21px; }
  .kpi .k-spark { display: none; }
  .kpi.has-spark .k-value { padding-right: 0; }
  .card-h { padding: 14px 14px 0; }
  .card-b { padding: 14px; }
  .card-f { padding: 12px 14px; }
  /* статусы — горизонтальная лента, чтобы не занимать пол-экрана */
  .pipeline { display: flex; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -14px 14px; padding: 0 14px 4px; scrollbar-width: none; }
  .pipeline::-webkit-scrollbar { display: none; }
  .pipe { flex: 0 0 auto; min-width: 104px; padding: 9px 12px; scroll-snap-align: start; }
  .pipe b { font-size: 18px; margin-top: 4px; }
  .pipe span { white-space: nowrap; }
  /* фильтры над таблицей — каждый во всю ширину */
  .card-h > .input-icon, .card-h > .csel, .card-h > .select { flex: 1 1 100%; max-width: none !important; }
  .card-h > .seg, .seg.right { margin-left: 0; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .row > .seg.right { margin-left: 0; }
  .tabs { margin-left: -14px; margin-right: -14px; padding: 0 8px; }
  .input, .select, .textarea, .csel-btn { font-size: 16px; }
  .input, .select, .csel-btn { height: 44px; }
  .csel.sm .csel-btn, .input-sm { height: 38px; font-size: 15px; }
  .btn { height: 42px; }
  .btn-sm { height: 36px; }
  .btn-xl { height: 56px; font-size: 16px; }
  .big-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .big-act { padding: 14px; gap: 10px; }
  .big-act b { font-size: 14.5px; }
  .dl { grid-template-columns: minmax(92px, 34%) minmax(0, 1fr); gap: 8px 12px; }
  .dl dd { margin-bottom: 0; }
  .board { grid-auto-columns: 86vw; scroll-snap-type: x mandatory; margin: 0 -14px; padding: 0 14px 8px; }
  .lane { scroll-snap-align: start; }
  .scale-display { padding: 18px; border-radius: 18px; }
  .scale-display .sd-val { font-size: 56px; }
  /* окна — снизу, как «лист» */
  .overlay.center { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; animation: sheetIn .3s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  .modal-h { padding: 18px 16px 4px; }
  .modal-b { padding: 12px 16px 16px; }
  .modal-f { padding: 12px 16px; }
  .modal-f .btn { flex: 1 1 auto; }
  .drawer { width: 100%; animation: sheetIn .32s var(--ease); }
  .drawer-h { padding: 12px 14px; }
  .drawer-h .avatar.lg { display: none; }
  .drawer-h .grow b { font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .drawer-b { padding: 14px; }
  /* кнопки карточки — одной строкой с прокруткой, главная первой */
  .drawer-f { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .drawer-f::-webkit-scrollbar { display: none; }
  .drawer-f .btn { flex: none; }
  .pop { left: 8px !important; right: 8px !important; min-width: 0; max-width: none; }
  .toasts { left: 14px; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .toast { min-width: 0; max-width: none; }
  /* выпадающий список — снизу на весь экран */
  .csel-menu.sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: auto !important; max-width: none; max-height: 72vh !important;
    border-radius: 22px 22px 0 0; padding: 0 10px calc(14px + env(safe-area-inset-bottom)); animation: sheetIn .28s var(--ease); }
  .csel-menu.sheet .csel-sheet-h { display: block; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 10px 6px 10px; text-align: center; }
  .csel-sheet-h i { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 0 auto 10px; }
  .csel-sheet-h b { font-size: 15px; }
  .csel-menu.sheet .csel-search { top: 52px; margin: 0 -10px 6px; padding: 6px 10px 8px; }
  .csel-menu.sheet .csel-opt { padding: 13px 12px; font-size: 15.5px; }
  /* таблицы превращаются в карточки */
  .table-wrap { overflow: visible; }
  .table.stackable thead { display: none; }
  .table.stackable, .table.stackable tbody, .table.stackable tfoot, .table.stackable tr, .table.stackable td { display: block; width: 100%; }
  .table.stackable tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .table.stackable tbody tr:last-child { border-bottom: 0; }
  .table.stackable td { border: 0; padding: 3px 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 8px; text-align: right; min-height: 0; }
  .table.stackable td::before { content: attr(data-label); flex: none; max-width: 46%; margin-right: auto; padding-right: 10px; text-align: left; color: var(--text-3); font-size: 12px; font-weight: 700; }
  .table.stackable td .cell-sub { flex-basis: 100%; }
  .table.stackable td:first-child { display: block; text-align: left; padding-bottom: 6px; }
  .table.stackable td:first-child::before { display: none; }
  .table.stackable td:empty, .table.stackable td[data-label=""]::before { display: none; }
  .table.stackable td > .progress { flex: 1; max-width: 50%; margin-top: 6px; }
  .table.stackable td .cell-sub { margin-top: 0; }
  .table.stackable tfoot tr { background: var(--surface-2); }
  .table.stackable tr.row-bad { background: color-mix(in srgb, var(--bad-bg) 60%, transparent); }
  .table.stackable tr.row-warn { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
  .table.stackable tr.row-bad td, .table.stackable tr.row-warn td { background: none; }
  .table.stackable tfoot td { background: none; border: 0; }
  .table.no-stack { min-width: 560px; }
  .table-wrap:has(.no-stack) { overflow-x: auto; }
  /* нижняя навигация */
  .bnav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(14, 21, 38, .08); }
  .bnav a, .bnav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; border: 0; background: none; border-radius: 12px;
    color: var(--text-3); font: 700 10.5px/1.1 var(--font-sans); text-decoration: none !important; cursor: pointer; }
  .bnav svg { width: 22px; height: 22px; }
  .bnav .on { color: var(--brand-t); background: var(--brand-50); }
  .bnav .cnt { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #E5383B; color: #fff; font-size: 10px; display: grid; place-items: center; border: 2px solid var(--surface); }
}
@media (max-width: 380px) {
  .g-4.keep-2, .g-5.keep-2 { grid-template-columns: minmax(0, 1fr); }
  .g-5.keep-2 > :last-child:nth-child(odd), .g-4.keep-2 > :last-child:nth-child(odd) { grid-column: auto; }
  .big-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ---------- Печать ---------- */
@media print {
  .sidebar, .topbar, .ph-actions, .no-print, .toasts, .tabs, .btn, .bnav, #routebar, .tip { display: none !important; }
  .app { display: block; }
  body { background: #fff; color: #000; }
  .content { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .table th { position: static; }
  .overlay { position: static; background: none; }
  .drawer { box-shadow: none; width: 100%; }
}