/* Шрифты стилей кабинета (проба, 03.10.2026) — лежат в кабинете, а не на чужом CDN: CSP разрешает только свой домен.
   IBM Plex Sans/Mono, Golos Text, JetBrains Mono, Onest — лицензия SIL Open Font License 1.1. Только кириллица и латиница. */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/golos-text-400-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/golos-text-400-600-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-400-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-500-latin.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/ibm-plex-sans-600-latin.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: 400 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-600-cyrillic.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: 400 600;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-400-600-latin.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: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-400-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-400-700-latin.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;
}

/* Стили кабинета на пробу (03.10.2026): выбирает только админ в «Настройки → Оформление», действуют только у него.
   Включение — атрибут data-skin на <html> (web/app.js, applySkin). Без атрибута — обычный кабинет, этот файл ничего
   не меняет. :root[data-skin] сильнее :root из тёмной темы app.css — у каждого стиля своя палитра в любой теме ОС. */

/* ===================== 1 · Склад — плотная таблица, тёмная шапка, прямые углы ===================== */
:root[data-skin="sklad"] {
  color-scheme: light;
  --bg: #F4F3EF; --surface: #FFFFFF; --border: #D9D6CD; --text: #1F1F1C; --muted: #6B6960;
  --accent: #C2410C; --accent-soft: #FBE7DC; --danger: #B42318; --ok: #2F6B3A; --warn: #8A5A00; --warn-soft: #F7EBD3;
  --teal: #0F766E; --violet: #6D3FC0;
  --cond-amber: #9a5b00; --cond-orange: #c2410c; --cond-brown: #8a5a2b; --cond-cyan: #0e7490; --cond-purple: #7e22ce;
  --cond-blue: #1d4ed8; --cond-indigo: #4338ca; --cond-slate: #475569; --cond-red: #c8342b; --cond-pink: #be185d;
  --cond-sky: #0369a1; --cond-crimson: #c4003c;
  --radius: 0px; --shadow: none;
}
[data-skin="sklad"] body { font-family: 'IBM Plex Sans', -apple-system, sans-serif; font-size: 14px; line-height: 1.45; }
[data-skin="sklad"] .head { background: #1F1F1C; color: #F4F3EF; border-bottom: 0; padding-top: 0; padding-bottom: 0; min-height: 52px; }
[data-skin="sklad"] .brand { text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 600; }
[data-skin="sklad"] .brand span { color: #F97316; }
[data-skin="sklad"] .head .nav button { color: #B5B3AC; background: none; border-radius: 0; padding-top: 15px; padding-bottom: 15px; }
[data-skin="sklad"] .head .nav button:hover { color: #FFFFFF; background: none; }
[data-skin="sklad"] .head .nav button.on { color: #FFFFFF; background: none; box-shadow: inset 0 -2px 0 #F97316; }
[data-skin="sklad"] .head .navmenu { border-radius: 0; }
[data-skin="sklad"] .head .navmenu button { color: var(--text); padding-top: 9px; padding-bottom: 9px; box-shadow: none; }
[data-skin="sklad"] .head .navmenu button:hover { background: var(--bg); color: var(--text); }
[data-skin="sklad"] .head .who { color: #B5B3AC; }
[data-skin="sklad"] .head .who b { color: #F4F3EF; }
[data-skin="sklad"] .head .btn.ghost { background: transparent; color: #F4F3EF; border-color: #4A4944; }
[data-skin="sklad"] .btn, [data-skin="sklad"] .chip, [data-skin="sklad"] .badge,
[data-skin="sklad"] input, [data-skin="sklad"] select, [data-skin="sklad"] textarea { border-radius: 0; }
[data-skin="sklad"] .btn { background: #1F1F1C; }
[data-skin="sklad"] .btn.ghost { background: var(--surface); }
[data-skin="sklad"] .btn.link { background: none; }
[data-skin="sklad"] .btn.danger { background: var(--danger); }
[data-skin="sklad"] .chip { border-color: #1F1F1C; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
[data-skin="sklad"] .chip.on { background: #1F1F1C; border-color: #1F1F1C; }
[data-skin="sklad"] .item { padding-top: 8px; padding-bottom: 8px; }
[data-skin="sklad"] .item .sku, [data-skin="sklad"] .item .price, [data-skin="sklad"] td.num { font-family: 'IBM Plex Mono', monospace; }
[data-skin="sklad"] th, [data-skin="sklad"] td { padding: 8px 12px; }
[data-skin="sklad"] th { font-size: 11px; letter-spacing: .08em; }
[data-skin="sklad"] h1, [data-skin="sklad"] h2 { letter-spacing: 0; font-weight: 600; }
[data-skin="sklad"] .head button.who.balance { background: transparent; color: #B5B3AC; border: 1px solid #4A4944; border-radius: 0; }
[data-skin="sklad"] .head button.who.balance b { color: #F97316; }
[data-skin="sklad"] .seg { border-radius: 0; border-color: #1F1F1C; padding: 0; background: transparent; }
[data-skin="sklad"] .seg button { border-radius: 0; padding: 6px 14px; color: #1F1F1C; }
[data-skin="sklad"] .seg button.on { background: #1F1F1C; color: #F4F3EF; box-shadow: none; }

/* ===================== 3 · Терминал — тёмный рабочий стол, янтарный акцент, моноширинные цифры ===================== */
:root[data-skin="terminal"] {
  color-scheme: dark;
  --bg: #0E1116; --surface: #151A21; --border: #262E39; --text: #E6E8EB; --muted: #8B93A1;
  --accent: #F5A524; --accent-soft: #2A2213; --danger: #FF7B72; --ok: #56D364; --warn: #E3B341; --warn-soft: #2B2410;
  --teal: #3FC9B4; --violet: #B69CF5;
  --cond-amber: #e3b341; --cond-orange: #fb923c; --cond-brown: #d6a26d; --cond-cyan: #22d3ee; --cond-purple: #c084fc;
  --cond-blue: #60a5fa; --cond-indigo: #a5b4fc; --cond-slate: #a3afc2; --cond-red: #ff7b72; --cond-pink: #f472b6;
  --cond-sky: #7dd3fc; --cond-crimson: #ff3d7f;
  --radius: 10px; --shadow: none;
}
[data-skin="terminal"] body { font-family: 'Golos Text', -apple-system, sans-serif; font-size: 14px; }
[data-skin="terminal"] .head { background: #11151B; border-bottom-color: #222934; }
[data-skin="terminal"] .brand { font-family: 'JetBrains Mono', monospace; color: #F5A524; letter-spacing: .04em; }
[data-skin="terminal"] .brand span { color: #8B93A1; }
[data-skin="terminal"] .nav button { border-radius: 6px; }
[data-skin="terminal"] .nav button.on { background: #1B222C; color: #E6E8EB; }
/* Янтарь светлый — текст на нём тёмный, иначе не читается */
[data-skin="terminal"] .btn, [data-skin="terminal"] .chip.on, [data-skin="terminal"] .nav .count { color: #0E1116; }
[data-skin="terminal"] .btn.ghost, [data-skin="terminal"] .btn.link { color: var(--text); }
[data-skin="terminal"] .btn.link { color: var(--accent); }
[data-skin="terminal"] .item .sku, [data-skin="terminal"] .item .price, [data-skin="terminal"] td.num,
[data-skin="terminal"] .who b, [data-skin="terminal"] .chip { font-family: 'JetBrains Mono', monospace; }
[data-skin="terminal"] .chip { font-size: 12.5px; }
[data-skin="terminal"] th { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
[data-skin="terminal"] .card { background: #11151B; }
[data-skin="terminal"] .head button.who.balance { background: #1B222C; border: 1px solid #2A323E; }
[data-skin="terminal"] .seg { border-radius: 8px; background: transparent; border-color: #2A323E; }
[data-skin="terminal"] .seg button { border-radius: 6px; }
[data-skin="terminal"] .seg button.on { background: #F5A524; color: #0E1116; box-shadow: none; }

/* ===================== 5 · Панель — боковое меню, мягкие карточки, бирюзовый акцент ===================== */
:root[data-skin="panel"] {
  color-scheme: light;
  --bg: #EEF1F4; --surface: #FFFFFF; --border: #E1E6EB; --text: #17212B; --muted: #6A7785;
  --accent: #0F766E; --accent-soft: #E2F1EF; --danger: #C2342B; --ok: #17803D; --warn: #8A5A00; --warn-soft: #F7EBD3;
  --teal: #0F766E; --violet: #6D3FC0;
  --cond-amber: #9a5b00; --cond-orange: #c2410c; --cond-brown: #8a5a2b; --cond-cyan: #0e7490; --cond-purple: #7e22ce;
  --cond-blue: #1d4ed8; --cond-indigo: #4338ca; --cond-slate: #475569; --cond-red: #c8342b; --cond-pink: #be185d;
  --cond-sky: #0369a1; --cond-crimson: #c4003c;
  --radius: 16px; --shadow: 0 1px 2px rgba(23, 33, 43, .06);
}
[data-skin="panel"] body { font-family: 'Onest', -apple-system, sans-serif; }
[data-skin="panel"] .card { border-color: transparent; }
[data-skin="panel"] .btn { border-radius: 10px; }
[data-skin="panel"] .chip { border-radius: 10px; }
[data-skin="panel"] .chip.on { background: var(--accent-soft); border-color: var(--accent); color: #0F5F59; }
[data-skin="panel"] input, [data-skin="panel"] select, [data-skin="panel"] textarea { border-radius: 10px; }
[data-skin="panel"] .head { background: #17212B; color: #DDE3E9; border-bottom: 0; }
[data-skin="panel"] .head .nav button { color: #DDE3E9; border-radius: 10px; }
[data-skin="panel"] .head .nav button:hover { background: #24303D; color: #FFFFFF; }
[data-skin="panel"] .head .nav button.on { background: #24303D; color: #FFFFFF; }
[data-skin="panel"] .head .navmenu button { color: var(--text); }
[data-skin="panel"] .head .navmenu button:hover { background: var(--bg); color: var(--text); }
[data-skin="panel"] .head .who { color: #8C99A6; }
[data-skin="panel"] .head .who b { color: #FFFFFF; }
[data-skin="panel"] .head .btn.ghost { background: transparent; color: #DDE3E9; border-color: #2B3744; }
[data-skin="panel"] .brand { color: #FFFFFF; font-weight: 700; font-size: 18px; }
[data-skin="panel"] .brand span { color: #5EEAD4; }
[data-skin="panel"] .head button.who.balance { background: #24303D; color: #DDE3E9; border-color: transparent; border-radius: 12px; }
[data-skin="panel"] .head button.who.balance b { color: #5EEAD4; }
[data-skin="panel"] .seg { border-radius: 12px; border-color: transparent; background: #E4E9EE; }
[data-skin="panel"] .seg button { border-radius: 9px; }
/* На широком экране шапка — боковое меню: вкладки столбиком, всё видно, без «⋯» (OverflowNav это учитывает) */
@media (min-width: 901px) {
  [data-skin="panel"] .app { display: grid; grid-template-columns: 232px minmax(0, 1fr); align-content: start; }
  [data-skin="panel"] .app > * { grid-column: 2; }
  [data-skin="panel"] .app > .head {
    grid-column: 1; grid-row: 1 / span 99; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 22px 14px;
  }
  [data-skin="panel"] .head .nav { flex-direction: column; flex: 1 1 auto; gap: 2px; }
  [data-skin="panel"] .head .nav button { text-align: left; width: 100%; padding: 10px 12px; }
  [data-skin="panel"] .head .who { text-align: left; }
  [data-skin="panel"] .head .spacer { display: none; }
  [data-skin="panel"] .main { padding-top: 24px; }
}