/* WB Аналитика — дизайн-система v2 (docs/DESIGN.md). Радиус 0, структура линейками, тени только у всплывающего. */

/* ---------- Шрифты: локальные копии (OFL, лицензии в public/fonts) ---------- */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fonts/jost-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fonts/jost-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; }

/* ---------- Токены (DESIGN.md 2.2) ---------- */
:root {
  color-scheme: light dark;
  /* Слои (v2.2): меню chrome → страница bg → панели surface */
  --chrome:#DCE1DA; --chrome-hover:#E6E9E4; --chrome-line:#C9D0C7;
  --bg:#F4F6F2; --surface:#FFFFFF; --line-soft:#DDE2DA; --hover:#F1F4EF; --skeleton:#DCE1DA;
  --line:#C2C9C1; --control:#7A877F; --ink:#163328; --muted:#55635B; --accent:#0C6B4A;
  --inv-bg:#163328; --inv-hover:#0F271E; --inv-ink:#EEF2ED; --inv-muted:#A3B5AB;
  --inv-line:#2A4A3D; --inv-accent:#7BE0A8; --inv-bad:#FF9586;
  --ok:#2B9A57; --ok-ink:#1A6B3D; --warn:#D9931A; --warn-ink:#80520A; --bad:#B23B30; --info:#2E5B8A;
  --bad-hover:#962F25; --on-bad:#FFFFFF; --on-accent:#FFFFFF;
  --scrim:rgba(13,23,20,.48);
  --shadow-overlay:0 24px 48px -16px rgba(22,51,40,.32), 0 2px 6px rgba(22,51,40,.08);

  --font-sans:'Jost', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-14:56px; --space-20:80px;

  --control-h:40px; --header-h:64px;
  --pad:32px;
}
/* Тёмные значения (DESIGN.md 2.2): при «Тёмная» (data-theme="dark") и при «Как в системе» + тёмная система.
   При «Светлая» (data-theme="light") не применяются никогда. Наборы ниже должны совпадать. */
:root[data-theme="dark"] {
  color-scheme: dark;
    --chrome:#08100D; --chrome-hover:#0D1714; --chrome-line:#17221E;
    --bg:#111C18; --surface:#172521; --line-soft:#22312B; --hover:#1E2D28; --skeleton:#1D2C27;
    --line:#22312B; --control:#6D7D74; --ink:#E3EAE5; --muted:#8C9C93; --accent:#6BE3A4;
    --inv-bg:#1F3B31; --inv-hover:#27493D; --inv-ink:#EAF2EC; --inv-muted:#A3B5AB;
    --inv-line:#2E5446; --inv-accent:#6BE3A4; --inv-bad:#FF8A7A;
    --ok:#48D88A; --ok-ink:#5FD996; --warn:#FFB43A; --warn-ink:#FFC45E; --bad:#FF7A6B; --info:#8DB8E8; --on-accent:#0D1714;
    --scrim:rgba(0,0,0,.60);
    --shadow-overlay:0 24px 48px -16px rgba(0,0,0,.6), 0 0 0 1px #22312B;
    --bad-hover:#FF9586; --on-bad:#0D1714;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --chrome:#08100D; --chrome-hover:#0D1714; --chrome-line:#17221E;
    --bg:#111C18; --surface:#172521; --line-soft:#22312B; --hover:#1E2D28; --skeleton:#1D2C27;
    --line:#22312B; --control:#6D7D74; --ink:#E3EAE5; --muted:#8C9C93; --accent:#6BE3A4;
    --inv-bg:#1F3B31; --inv-hover:#27493D; --inv-ink:#EAF2EC; --inv-muted:#A3B5AB;
    --inv-line:#2E5446; --inv-accent:#6BE3A4; --inv-bad:#FF8A7A;
    --ok:#48D88A; --ok-ink:#5FD996; --warn:#FFB43A; --warn-ink:#FFC45E; --bad:#FF7A6B; --info:#8DB8E8; --on-accent:#0D1714;
    --scrim:rgba(0,0,0,.60);
    --shadow-overlay:0 24px 48px -16px rgba(0,0,0,.6), 0 0 0 1px #22312B;
    --bad-hover:#FF9586; --on-bad:#0D1714;
  }
}
:root[data-theme="light"] { color-scheme: light; }
@media (max-width: 1279px) { :root { --pad:24px; } }
@media (max-width: 767px) { :root { --pad:16px; } }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/20px var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
svg { flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.label { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.meta { font: 400 11px/16px var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.section-title { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.h1 { font-size: 30px; line-height: 36px; font-weight: 300; letter-spacing: .01em; }

/* Точка-индикатор */
.led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ok); }
.led.warn { background: var(--warn); }
.led.bad { background: var(--bad); }
.led.ink { background: var(--ink); }
.led.hollow { background: transparent; border: 1px solid var(--muted); }
.led.sm { width: 5px; height: 5px; }
.pulse { animation: wbPulse 1s ease-in-out infinite; }
@keyframes wbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Skeleton */
.skeleton { background: var(--skeleton); animation: wbShimmer 1.2s ease-in-out infinite; }
@keyframes wbShimmer { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .pulse, .skeleton { animation: none; }
  .drawer-scrim, .sb, .toast { transition: none !important; }
}

/* ---------- Логотип ---------- */
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 28px; height: 28px; flex: none; background: var(--inv-bg); display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding-bottom: 7px; }
.logo-mark i { width: 3px; background: var(--inv-ink); }
.logo-mark i:last-child { background: var(--inv-accent); }
.logo-word { font-size: 12px; font-weight: 500; letter-spacing: .32em; white-space: nowrap; }

/* ---------- Кнопки (7.1) ---------- */
.btn {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn:disabled { border-color: var(--line); color: var(--muted); background: transparent; cursor: default; }
.btn-primary { background: var(--inv-bg); color: var(--inv-ink); border-color: var(--inv-bg); }
.btn-primary:hover { background: var(--inv-hover); border-color: var(--inv-hover); }
.btn-primary:disabled { background: var(--skeleton); border-color: var(--skeleton); color: var(--muted); }
.btn-primary.busy:disabled { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); cursor: progress; }
.btn-sm { height: 32px; padding: 0 12px; }
.btn-44 { height: 44px; padding: 0 18px; }
.btn-danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad); }
.btn-danger:hover { background: var(--bad-hover); border-color: var(--bad-hover); }
.btn-danger:disabled { background: var(--skeleton); border-color: var(--skeleton); color: var(--muted); }
.btn-danger.busy:disabled { background: var(--bad); border-color: var(--bad); color: var(--on-bad); cursor: progress; }
.btn-danger .led { background: var(--on-bad); }
/* «Удалить в строке» (7.1): тихая иконка 40 × 40 */
.del-b { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); }
.tbl tbody tr:hover .del-b { color: var(--ink); }
.del-b:hover { color: var(--bad) !important; background: var(--hover); }
.del-text { height: 44px; padding: 0 4px 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--bad); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.btn-go { height: 48px; padding: 0 18px; justify-content: space-between; letter-spacing: .2em; }
.btn-go .btn-text { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); flex: none; }
.icon-btn:disabled { color: var(--muted); cursor: default; }

/* ---------- Бейджи (7.7) и чипы (7.8) ---------- */
.badge {
  height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink);
  font: 400 11px/14px var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.badge .led { width: 6px; height: 6px; }
.badge-bad { border-color: var(--bad); color: var(--bad); }
.badge-bad .led { background: var(--bad); }
.badge-demo { border: 1px dashed var(--warn); }
.badge-demo .led { background: transparent; border: 1px solid var(--warn); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border: 1px solid var(--line); font-size: 13px; line-height: 18px;
}
.chip.req { border-color: var(--ink); }
.chip-req { font: 400 9px/12px var(--font-mono); letter-spacing: .06em; color: var(--muted); margin-left: 2px; }
.chip.missing { border-color: var(--bad); color: var(--bad); }
.chip.off { border-color: var(--line); color: var(--muted); }

/* ---------- Первый запуск (8.1) ---------- */
.ob-page { min-height: 100vh; min-height: 100dvh; }
.ob-head { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 48px; border-bottom: 1px solid var(--line); }
.ob { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 96px; padding: 88px 48px 80px; align-items: start; }
.ob-title { margin-top: 14px; font-size: 44px; line-height: 52px; font-weight: 300; letter-spacing: .01em; max-width: 520px; }
.ob-lead { margin-top: 18px; font-size: 16px; line-height: 24px; color: var(--muted); max-width: 480px; }
.ob-steps { margin-top: 40px; border-top: 1px solid var(--ink); max-width: 520px; }
.ob-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 22px; }
.ob-steps li > span:first-child { font: 400 12px/20px var(--font-mono); color: var(--muted); padding-top: 1px; }
.ob-steps b { font-weight: 500; }
.ob-form { background: var(--surface); border: 1px solid var(--line-soft); padding: 32px 32px 28px; }
@media (max-width: 1279px) { .ob { gap: 56px; padding: 64px 32px; } .ob-head { padding: 0 32px; } }
@media (max-width: 1023px) { .ob { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 48px 24px; } .ob-head { padding: 0 24px; } }
@media (max-width: 767px) {
  .ob { padding: 28px 16px 48px; gap: 28px; } .ob-head { padding: 0 16px; }
  .ob-form { padding: 20px 16px; } .ob-title { font-size: 30px; line-height: 36px; }
  .ob-head .logo-word { display: none; }
}

/* ---------- Форма подключения (8.4) ---------- */
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-input {
  width: 100%; min-height: 112px; padding: 12px; resize: vertical; display: block;
  background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: 0;
  font: 400 13px/1.55 var(--font-mono); word-break: break-all; outline: none;
}
.cf-input::placeholder { color: var(--muted); opacity: 1; }
.cf-input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-input[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.cf-input[readonly] { background: transparent; color: var(--muted); }
.cf-field-error { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--bad); }

.cf-banner { display: flex; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--bad); font-size: 14px; line-height: 20px; }
.cf-banner svg { color: var(--bad); margin-top: 1px; }
.cf-banner b { font-weight: 500; color: var(--bad); }
.cf-banner.warn { border-color: var(--warn); }
.cf-banner.warn svg { color: var(--warn); }
.cf-banner.warn b { color: var(--warn-ink); }

.cf-reqs { margin-top: 20px; border-top: 1px solid var(--ink); }
.cf-reqs-head { display: flex; justify-content: space-between; align-items: center; height: 36px; font-size: 10px; font-weight: 500; letter-spacing: .24em; color: var(--muted); }
.cf-reqs-head .mono { letter-spacing: .06em; }
.cf-req { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.cf-req-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cf-req.ok .cf-req-ic { color: var(--ok-ink); }
.cf-req.fail .cf-req-ic { color: var(--bad); }
.cf-req.error .cf-req-ic { color: var(--warn); }
.cf-req-text { display: block; font-size: 14px; line-height: 20px; }
.cf-req.skip .cf-req-text { color: var(--muted); }
.cf-req-hint { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--bad); }
.cf-req.error .cf-req-hint { color: var(--warn-ink); }
.cf-req-st { padding-top: 4px; font: 400 10px/14px var(--font-mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; text-transform: uppercase; }
.cf-req.fail .cf-req-st { color: var(--bad); }
.cf-req.error .cf-req-st { color: var(--warn-ink); }

.cf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cf-actions .btn-go { flex: 1; min-width: 220px; }
.cf-actions .btn-cancel { height: 48px; padding: 0 18px; }
.cf-note { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 18px; color: var(--muted); }

.cf-ok { border-top: 1px solid var(--ink); }
.cf-ok-head { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; }
.cf-ok-ic { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ok); color: var(--ok-ink); }
.cf-ok-title { display: block; font-size: 17px; line-height: 22px; font-weight: 500; }
.cf-ok-meta { display: block; margin-top: 2px; font: 400 11px/16px var(--font-mono); color: var(--muted); }
.cf-dl { display: grid; grid-template-columns: 132px minmax(0, 1fr); border-top: 1px solid var(--line); }
.cf-dl dt { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .16em; color: var(--muted); }
.cf-dl dd { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; font: 400 13px/20px var(--font-mono); }
.cf-dl dt:last-of-type, .cf-dl dd:last-of-type { border-bottom: 0; }
.cf-dl dd.cf-cab { padding: 10px 0; font-family: var(--font-sans); }
.cf-dl dd.cf-cats { padding: 10px 0; font-family: var(--font-sans); }
.cf-cab-name { display: block; font-size: 15px; line-height: 20px; font-weight: 500; }
.tm { display: block; font: 400 10px/12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 767px) {
  .cf-input { font-size: 16px; }
  .cf-dl { grid-template-columns: 104px minmax(0, 1fr); }
}

/* ---------- Каркас (8.0) ---------- */
/* Каркас v2.4 (DESIGN.md 8.0): шапка на всё окно (☰ + логотип + путь + кабинет), под ней полоса иконок 64 px;
   по ☰ — полное меню 248 px под шапкой поверх страницы с затемнением (страница не сдвигается). */
.shell { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.shell-body { position: relative; flex: 1; min-height: 0; display: flex; }
.sb {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; width: 248px;
  display: flex; flex-direction: column; background: var(--chrome); box-shadow: var(--shadow-overlay);
  transform: translateX(-100%); visibility: hidden; transition: transform .15s ease-out, visibility 0s linear .15s;
}
.shell.drawer-open .sb { transform: none; visibility: visible; transition: transform .15s ease-out; }
.drawer-scrim { position: absolute; inset: 0; z-index: 39; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity .15s ease-out, visibility 0s linear .15s; }
.shell.drawer-open .drawer-scrim { opacity: 1; visibility: visible; transition: opacity .15s ease-out; }
.rail { width: 64px; flex: none; display: flex; flex-direction: column; background: var(--chrome); }
.rail-nav { flex: 1; padding: 16px 12px 12px; overflow-y: auto; }
.rail-foot { padding: 8px 12px 12px; border-top: 1px solid var(--chrome-line); }
.sb-nav { flex: 1; padding: 16px 12px 12px; overflow-y: auto; }
.nav-sec { margin-bottom: 4px; }
.nav-i {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 8px; border: 0; background: transparent;
  color: var(--ink); text-decoration: none; text-align: left; font-size: 14px; line-height: 20px;
}
.nav-i:hover { background: var(--chrome-hover); }
.nav-sec-btn { height: 40px; }
.nav-sec-btn .nav-label { flex: 1; }
.nav-sec-btn .nav-chev { color: var(--muted); }
.nav-sec.has-active .nav-sec-btn { font-weight: 500; }
.nav-sub { padding: 0 0 6px; }
.nav-sub .nav-i { height: 36px; padding: 0 8px 0 14px; gap: 14px; color: var(--muted); }
.nav-dot { width: 18px; display: flex; justify-content: center; flex: none; }
.nav-i[aria-current="page"] { background: var(--bg); color: var(--accent); font-weight: 500; }
.nav-i .led { visibility: hidden; background: var(--accent); }
.nav-i[aria-current="page"] .led { visibility: visible; }
.sb-foot { padding: 8px 12px 16px; border-top: 1px solid var(--chrome-line); }
.sb-foot .nav-i { height: 40px; }
.sb-foot .nav-label { flex: 1; }

.topbar { position: relative; z-index: 30; height: 64px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 var(--pad) 0 12px; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.burger { width: 40px; height: 40px; }
.burger:hover { background: var(--hover); }
.top-logo { display: flex; flex: none; }
.top-sep { width: 1px; height: 24px; flex: none; margin: 0 8px; background: var(--line-soft); }
.crumb { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; color: var(--muted); }
.crumb .label { letter-spacing: .2em; }
.crumb-cur { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-only { display: none; }
.top-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-spacer { flex: 1; }
.demo-strip { display: none; }
.content { flex: 1; min-width: 0; overflow-y: auto; }
.page { max-width: 1240px; padding: 32px var(--pad) 64px; }
@media (max-width: 1279px) { .page { padding-top: 28px; padding-bottom: 56px; } }


/* Переключатель кабинета (7.5 / 8.0) */
.sw { position: relative; flex: 0 1 280px; min-width: 0; }
.sw-btn {
  width: 100%; height: 44px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left;
}
.sw-btn:hover, .sw-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--hover); }
.sw-text { flex: 1; min-width: 0; }
.sw-name { display: block; font-size: 14px; line-height: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-empty { border-style: dashed; cursor: default; }
.sw-empty:hover { border-color: var(--line); background: transparent; }
.sw-empty .sw-name { font-weight: 400; color: var(--muted); }
.sw-menu {
  position: absolute; right: 0; top: calc(100% + 4px); width: 340px; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay);
}
.sw-menu-label { padding: 12px 14px 8px; font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .26em; color: var(--muted); }
.sw-search { padding: 0 14px 10px; position: relative; }
.sw-search svg { position: absolute; left: 26px; top: 12px; color: var(--muted); pointer-events: none; }
.sw-search input { width: 100%; height: 40px; padding: 0 12px 0 38px; background: var(--surface); border: 1px solid var(--control); border-radius: 0; outline: none; font-size: 14px; }
.sw-search input:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sw-list { max-height: min(60vh, 448px); overflow-y: auto; }
.sw-item {
  width: 100%; min-height: 56px; padding: 8px 14px; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink);
}
.sw-item:hover, .sw-item:focus-visible { background: var(--hover); }
.sw-item:focus-visible { outline-offset: -2px; }
.sw-item .sw-name { font-size: 15px; font-weight: 400; }
.sw-item[aria-checked="true"] .sw-name { font-weight: 500; }
.sw-item .tm { margin-top: 2px; }
.sw-add {
  width: 100%; height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 12px;
  border: 0; border-top: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
}
.sw-add:hover, .sw-add:focus-visible { background: var(--hover); }
.sw-add:focus-visible { outline-offset: -2px; }
.sw-nothing { padding: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (max-width: 767px) {
  .d-only { display: none !important; }
  .m-only { display: flex; }
  .topbar { padding: 0 8px; gap: 8px; }
  .burger { width: 44px; height: 44px; }
  .sb { width: 300px; padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
  .top-title.m-only { display: block; flex: 1 1 auto; }
  .top-spacer { display: none; }
  .sw { flex: 0 1 auto; max-width: 56%; }
  .sw .tm { display: none; }
  .sw-btn { height: 44px; }
  .sw-menu { position: fixed; left: 8px; right: 8px; top: 60px; width: auto; }
  .sw-item, .sw-add { min-height: 56px; }
  .demo-strip { display: flex; padding: 8px 16px; border-bottom: 1px solid var(--line); }
  .page { padding: 20px 16px 48px; }
}

/* ---------- Токены и доступ (8.2) ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.page-head > div { min-width: 0; max-width: 640px; }
.page-lead { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Блок главных цифр (7.12): инверсия, акценты inv-accent / inv-bad */
.st3 { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 28px; background: var(--inv-bg); color: var(--inv-ink); }
.st3 > div { padding: 18px 20px 18px 0; margin-right: 20px; box-shadow: inset -1px 0 0 var(--inv-line); min-width: 0; }
.st3 > div:last-child { padding-right: 0; margin-right: 0; box-shadow: none; }
.st3 .label, .st3 .meta { color: var(--inv-muted); }
.st3 .meta { margin-top: 6px; }
.st3 .skeleton { background: var(--inv-line); }
.st-state { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 24px; line-height: 38px; font-weight: 300; color: var(--inv-accent); }
.st-state .led { width: 10px; height: 10px; background: var(--inv-accent); }
.st-state.bad { color: var(--inv-bad); }
.st-state.bad .led { background: var(--inv-bad); }
.st-num { margin-top: 8px; font: 500 32px/38px var(--font-mono); letter-spacing: -.01em; }
.st-num.muted { color: var(--inv-muted); }
.st3 .st-missing { color: var(--inv-bad); }

/* Панель данных (7.20) */
.panel { margin-top: 32px; background: var(--surface); border: 1px solid var(--line-soft); padding: 20px 24px 8px; }
.panel .sec-head { margin-top: 0; }
.panel > .state-block { margin: 10px 0 16px; }

.sec-head { margin-top: 36px; display: flex; align-items: baseline; gap: 12px; }

.tbl-wrap { margin-top: 10px; }
.tbl { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  height: 40px; padding: 0 12px; text-align: left; white-space: nowrap;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: .14em; color: var(--muted);
}
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td.cats { padding-top: 12px; padding-bottom: 12px; }
.tbl th.del-col { width: 40px; padding: 0; }
.tbl td.del-col { width: 40px; padding: 6px 0 6px 12px; text-align: right; }
.tk-item-del { display: flex; justify-content: flex-end; margin-top: 8px; }
.tbl tbody tr:hover { background: var(--hover); }
.tk-mask { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 400 13px/20px var(--font-mono); }
.tk-type { display: block; margin: 4px 0 0 17px; font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.tk-date { font: 400 13px/20px var(--font-mono); white-space: nowrap; }
.tk-left { display: block; margin-top: 4px; white-space: nowrap; }
.tk-added { font: 400 13px/20px var(--font-mono); color: var(--muted); white-space: nowrap; }
@media (max-width: 1023px) { .tbl-wrap { overflow-x: auto; } }

.tk-list { margin-top: 10px; border-top: 1px solid var(--ink); }
.tk-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.tk-item-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tk-item .tk-mask { font-size: 14px; }
.tk-item .tk-type { white-space: normal; }
.tk-item .chips { margin: 10px 0 0 17px; }
.tk-exp-bad { color: var(--bad); }

.note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--muted); }

.m-list { display: none; }
@media (max-width: 767px) {
  .st3 { grid-template-columns: minmax(0, 1fr); }
  .st3 { padding: 8px 16px; }
  .st3 > div { padding-right: 0; margin-right: 0; box-shadow: none; border-bottom: 1px solid var(--inv-line); }
  .panel { padding: 20px 16px 8px; }
  .st3 > div:last-child { border-bottom: 0; }
  .d-table { display: none; }
  .m-list { display: block; }
}

/* ---------- Блоки состояний (7.17) и «Раздел в разработке» (8.5) ---------- */
.state-block { min-height: 280px; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px dashed var(--line); }
.state-block.bad { border: 1px solid var(--bad); }
.state-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--muted); }
.state-block.bad .state-ic { color: var(--bad); border-color: var(--bad); }
.state-title { margin-top: 20px; font-size: 20px; line-height: 26px; font-weight: 300; }
.state-text { margin-top: 8px; max-width: 460px; font-size: 13px; line-height: 18px; color: var(--muted); }
.state-block .btn { margin-top: 20px; }
.state-mark { margin-top: 20px; font: 400 10px/14px var(--font-mono); letter-spacing: .06em; color: var(--muted); }
.soon { margin-top: 28px; max-width: 720px; min-height: 320px; padding: 40px 32px; }
.soon .state-text { font-size: 14px; line-height: 20px; }
.page-kicker { font: 400 11px/16px var(--font-mono); letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.page-kicker + .h1 { margin-top: 10px; }
.page-center { padding: 80px var(--pad); max-width: 720px; }

/* ---------- Модальное окно (7.6 / 8.3) ---------- */
.modal {
  padding: 0; border: 0; border-radius: 0;
  width: 600px; max-width: calc(100vw - 32px); max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px);
  margin: 56px auto auto; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay);
}
.modal::backdrop { background: var(--scrim); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 16px 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 22px; line-height: 28px; font-weight: 300; }
.modal-body { padding: 20px 28px 24px; }
@media (max-width: 767px) {
  .modal { width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; margin: auto 0 0; }
  .modal-head { padding: 12px 8px 12px 16px; }
  .modal-body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .modal .cf-actions { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom)); z-index: 1; margin: 20px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .modal .cf-actions .btn-go { min-width: 0; padding: 0 14px; letter-spacing: .12em; }
  .modal .cf-actions .btn-go svg { display: none; }
  .modal .cf-actions .btn-cancel { padding: 0 14px; letter-spacing: .12em; }
}

/* ---------- Переключатель темы (7.18) ---------- */
.thm { margin-top: 12px; padding: 0 8px; }
.thm .thm-seg { margin-top: 0; }
.thm-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--line); }
.thm-b { height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); }
.thm-b:first-child { border-left: 0; }
.thm-b { gap: 6px; }
.thm-b:hover { background: var(--chrome-hover); }
.thm-b[aria-checked="true"] { background: var(--inv-bg); color: var(--inv-ink); }
.thm-dot { display: none; width: 5px; height: 5px; border-radius: 50%; background: var(--inv-accent); }
.thm-b[aria-checked="true"] .thm-dot { display: block; }
.thm-b:focus-visible { outline-offset: -2px; }
.thm.compact { margin: 0; padding: 0; }
.thm.compact .thm-seg { margin: 0; grid-template-columns: repeat(2, 44px); }
.thm.compact .thm-b { height: 42px; }
.ob-head-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
@media (max-width: 767px) { .thm-b { height: 44px; } .ob-head .badge-demo { display: none; } }

/* ---------- Полоса иконок (8.0) ---------- */
.nav-ico {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink); text-decoration: none;
}
.nav-ico:hover { background: var(--chrome-hover); }
.nav-ico.active, .nav-ico[aria-current="page"] { background: var(--bg); color: var(--accent); }
.nav-ico[aria-expanded="true"] { background: var(--chrome-hover); }
.nav-sec.mini { margin-bottom: 4px; }
.thm.mini { margin-top: 12px; padding: 0; }
.thm.mini .thm-seg { margin: 0; width: 40px; grid-template-columns: 38px; }
.thm.mini .thm-b { height: 36px; border-left: 0; border-top: 1px solid var(--line); }
.thm.mini .thm-b:first-child { border-top: 0; }
/* Всплывающий список подразделов (как 7.4) и подсказка (7.9) */
.fly { position: fixed; z-index: 45; width: 232px; padding-bottom: 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); color: var(--ink); }
.fly-label { padding: 12px 14px 8px; font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .26em; color: var(--muted); }
.fly-i { height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 14px; }
.fly-i:hover, .fly-i:focus-visible { background: var(--hover); }
.fly-i:focus-visible { outline-offset: -2px; }
.fly-i .led { background: var(--accent); visibility: hidden; }
.fly-i[aria-current="page"] { color: var(--accent); font-weight: 500; }
.fly-i[aria-current="page"] .led { visibility: visible; }
.tip { position: fixed; z-index: 80; max-width: 280px; padding: 8px 10px; background: var(--inv-bg); color: var(--inv-ink); font-size: 13px; line-height: 18px; white-space: nowrap; pointer-events: none; }

/* ---------- Окно подтверждения (7.19 / 8.6) ---------- */
.modal.modal-sm { width: 480px; margin-top: 120px; }
.cfm-body { padding: 20px 28px 4px; }
.cfm-text { font-size: 14px; line-height: 21px; }
.cfm-text .mono { font-size: 13px; font-weight: 500; white-space: nowrap; }
.cfm-plate { display: flex; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--warn); font-size: 14px; line-height: 20px; }
.cfm-plate .led { margin-top: 7px; }
.cfm-plate.bad { border-color: var(--bad); }
.cfm-plate.bad svg { color: var(--bad); margin-top: 2px; }
.cfm-plate.bad b { font-weight: 500; color: var(--bad); }
.cfm-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 24px 28px; }
@media (max-width: 767px) {
  .modal.modal-sm { width: 100%; margin: auto 0 0; }
  .cfm-body { padding: 16px 16px 4px; }
  .cfm-foot { flex-direction: column-reverse; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cfm-foot .btn { width: 100%; }
}

/* ---------- Всплывающее уведомление (7.10) ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: 400px; max-width: calc(100vw - 16px); }
.toast { display: grid; grid-template-columns: 10px minmax(0, 1fr) 40px; gap: 12px; align-items: start; padding: 14px 4px 14px 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.toast .led { margin-top: 6px; }
.toast-title { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.toast-text.mono { font-size: 13px; }
.toast-text { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); overflow-wrap: anywhere; }
.toast .icon-btn { width: 40px; height: 32px; margin-top: -6px; color: var(--muted); }
@media (max-width: 767px) { .toasts { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; } }

/* ================= Финансы → Кэш-флоу (DESIGN.md 8.7) ================= */
.cf-page { max-width: none; } /* края — вровень с шапкой, как у остальных разделов (решение владельца 10.11) */
/* Шапка — одна строка 40 (v2.9): «Кэш-флоу» + период слева, кнопки справа; подписи над заголовком нет */
.cf-page { padding-top: 24px !important; }
.cf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 40px; }
.cf-head-l { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; min-width: 0; }
.cf-head .h1 { line-height: 36px; white-space: nowrap; }
.cf-head .cf-period { margin-top: 0; }
.cf-text-btn { border-color: transparent; padding: 0 8px; }
.cf-text-btn:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.cf-fresh { display: flex; align-items: center; gap: 8px; flex: none; font: 400 11px/16px var(--font-mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.cf-fresh.warn { color: var(--warn-ink); }
.cf-fresh.bad { color: var(--bad); }
.cf-fresh .led.info { background: var(--info); }
.cf-fresh .led.bad.hollow { background: transparent; border: 1px solid var(--bad); }

/* Период */
.cf-period { position: relative; margin-top: 24px; display: flex; }
.cf-pgroup { display: flex; border: 1px solid var(--line); background: var(--bg); }
.cf-pnav { width: 40px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); }
.cf-pnav:hover { background: var(--hover); }
.cf-pnav:disabled { color: var(--muted); cursor: default; }
.cf-pbtn { min-width: 208px; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.cf-pbtn:hover, .cf-pbtn[aria-expanded="true"] { background: var(--hover); }
.cf-pname { flex: 1; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cf-pdates { font-size: 11px; white-space: nowrap; }
.cf-pm { position: absolute; left: 41px; top: 46px; z-index: 20; width: 280px; padding: 4px 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.cf-pm-i { width: 100%; height: 40px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.cf-pm-i > span:first-child { flex: 1; }
.cf-pm-i .mono { font-size: 11px; }
.cf-pm-i[aria-checked="true"] { font-weight: 500; }
.cf-pm-i:hover, .cf-pm-i:focus-visible { background: var(--hover); outline-offset: -2px; }
.cf-pm-ck { width: 16px; display: flex; justify-content: center; }
.cf-pm-sep { border-top: 1px solid var(--line); }

/* Плашки 7.10 */
.cf-plaque { margin-top: 20px; min-height: 52px; padding: 12px 12px 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; border: 1px solid var(--warn); background: var(--surface); }
.cf-plaque.info { border-color: var(--info); }
.cf-pl-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--warn); border: 1px solid var(--warn); }
.cf-plaque.info .cf-pl-dot { background: var(--info); border-color: var(--info); }
.cf-pl-dot.hollow { background: transparent; }
.cf-pl-text { flex: 1; min-width: 220px; font-size: 14px; line-height: 20px; }
.cf-pl-text b { font-weight: 500; }

/* Блок главных цифр — 4 ячейки на инверсии */
.cf-kpis { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 clamp(16px, 2.2vw, 28px); background: var(--inv-bg); color: var(--inv-ink); }
.cf-kpis > div { padding: 12px 20px 12px 0; margin-right: 20px; box-shadow: inset -1px 0 0 var(--inv-line); min-width: 0; }
/* Компактная сводная (v2.9): подпись + info → число 24/28 → одна строка */
.cf-kl { height: 16px; display: flex; align-items: center; gap: 6px; }
.cf-info { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--inv-muted); cursor: help; }
.cf-info:hover, .cf-info:focus-visible { color: var(--inv-ink); }
.cf-kpis .cf-k1 { margin-top: 4px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-kpis > div:last-child { margin-right: 0; padding-right: 0; box-shadow: none; }
.cf-kpis .label, .cf-kpis .meta { color: var(--inv-muted); }

.cf-kpis .meta.bad { color: var(--inv-bad); }
.cf-num { margin-top: 4px; font: 500 24px/28px var(--font-mono); letter-spacing: -.01em; white-space: nowrap; } /* деньги не обрезаем многоточием */
.cf-num.acc { color: var(--inv-accent); }
.cf-num.neg { color: var(--inv-bad); }
.cf-kpi-btn { height: 28px; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--inv-accent); font-size: 11px; font-weight: 500; letter-spacing: .16em; }
.cf-kpi-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.cf-kpis .skeleton { background: var(--inv-line); }
.cf-sk-num { height: 24px; width: 70%; margin-top: 6px; }
.cf-sk-sub { height: 12px; width: 50%; margin-top: 8px; }

/* Панели */
.cf-panel { margin-top: 28px; padding: 20px 24px; }
.cf-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cf-ph .sec-head { margin: 0; }
.cf-ph-r { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 400 11px/16px var(--font-mono); color: var(--muted); }
.cf-legend > span { display: flex; align-items: center; gap: 6px; }
.cf-legend i { width: 10px; height: 10px; display: inline-block; }
.cf-legend svg { color: var(--ink); }
.sw-in { background: var(--chart-1, var(--accent)); }
.sw-out { background: var(--chart-2, #4F7FB3); }
.sw-plan { border: 1px dashed var(--ink); }
.cf-lg { padding: 1px 5px; color: var(--ink); }
.cf-lg.fact { border: 1px solid var(--ink); }
.cf-lg.plan { border: 1px dashed var(--ink); }
.cf-lg.missed { text-decoration: line-through; color: var(--muted); }
.cf-segs { display: flex; border: 1px solid var(--line); }
.cf-seg { height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .16em; }
.cf-seg:first-child { border-left: 0; }
.cf-seg:hover { background: var(--hover); }
.cf-seg[aria-selected="true"] { background: var(--inv-bg); color: var(--inv-ink); }
.cf-seg .led { background: var(--inv-accent); }
.cf-seg-n { font: 400 10px/12px var(--font-mono); opacity: .75; }
.cf-empty { margin-top: 28px; padding: 20px 24px; }
.cf-empty .state-block { min-height: 240px; }
.cf-empty-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.cf-empty-btns .btn { margin-top: 0; }

/* График */
:root { --chart-1: #0C6B4A; --chart-2: #4F7FB3; --cf-cur: rgba(12, 107, 74, .05); --cf-cur-solid: #F3F8F5; }
:root[data-theme="dark"] { --chart-1: #6BE3A4; --chart-2: #6FA0D8; --cf-cur: rgba(107, 227, 164, .06); --cf-cur-solid: #1B2C26; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart-1: #6BE3A4; --chart-2: #6FA0D8; --cf-cur: rgba(107, 227, 164, .06); --cf-cur-solid: #1B2C26; } }
.cf-chart { display: flex; margin-top: 20px; }
/* Панель графика первого экрана (v2.9): отступ 16 от сводной, поля 16 / 24 / 12, график через 12 под заголовком */
.cf-chartp { margin-top: 16px; padding: 16px 24px 12px; }
.cf-chartp .cf-chart { margin-top: 12px; }
.cf-yax { width: 72px; flex: none; position: relative; }
.cf-yax > span { position: absolute; right: 10px; transform: translateY(-50%); font: 400 11px/14px var(--font-mono); color: var(--muted); white-space: nowrap; }
.cf-plot { flex: 1; min-width: 0; }
.cf-area { position: relative; }
.cf-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cf-grid.zero { border-top-color: var(--ink); }
.cf-cols { position: absolute; inset: 0; display: grid; }
.cf-col { position: relative; }
.cf-col.cur, .cf-xl.cur { background: var(--cf-cur); }
.cf-bar { position: absolute; left: 24%; right: 24%; }
.cf-bar.in { background: var(--chart-1); }
.cf-bar.out { background: var(--chart-2); }
.cf-bar.in-plan { border: 1px dashed var(--chart-1); border-bottom: 0; }
.cf-bar.out-plan { border: 1px dashed var(--chart-2); border-top: 0; }
.cf-line { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.cf-line path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cf-line path.fc { stroke-dasharray: 4 4; }
.cf-line path.neg { stroke: var(--bad); } /* остаток ниже нуля — красный */
.cf-pt.neg { background: var(--bad); border-color: var(--bad); }
.cf-pt.fc.neg { background: var(--surface); }
.cf-pt-l.neg { color: var(--bad); }
.cf-pt { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--ink); }
.cf-pt.fc { background: var(--surface); }
.cf-pt-l { position: absolute; transform: translate(10px, -22px); padding: 0 2px; background: var(--surface); font: 400 11px/14px var(--font-mono); color: var(--ink); white-space: nowrap; pointer-events: none; }
.cf-xls { display: grid; border-top: 1px solid var(--ink); }
.cf-xl { padding-top: 8px; text-align: center; min-width: 0; }
.cf-xl-n, .cf-xl-d { white-space: nowrap; overflow: hidden; } /* одна строка: высота подписей не зависит от числа недель */
.cf-xl-n { font: 500 11px/14px var(--font-mono); }
.cf-xl.cur .cf-xl-n { color: var(--accent); }
.cf-xl-d { margin-top: 2px; padding-bottom: 6px; font: 400 11px/14px var(--font-mono); color: var(--muted); }

/* Таблица динамики (8.7 п. 6, v2.6): последний блок, высота по экрану; части таблицы — отдельные прокрутки */
.cf-page { padding-bottom: 24px !important; }
.cf-dsec { --c1: 232px; --cf-shd: rgba(22, 51, 40, .14); margin-top: 24px; display: flex; flex-direction: column; padding: 16px 24px 0;
  /* Не выше экрана под верхней панелью (длинная таблица прокручивается внутри); короткая — по содержимому, итоги сразу под строками. */
  max-height: max(480px, calc(100vh - 64px - 48px)); max-height: max(480px, calc(100dvh - 64px - 48px)); }
:root[data-theme="dark"] .cf-dsec { --cf-shd: rgba(0, 0, 0, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf-dsec { --cf-shd: rgba(0, 0, 0, .45); } }
.cf-dsec-h { flex: none; min-height: 32px; }
.cf-dsk { flex: none; height: 420px; margin: 12px 0 16px; }
.cf-dt { flex: 0 1 auto; min-height: 0; margin-top: 12px; display: flex; flex-direction: column; font-size: 14px; }
.cf-x { flex: none; overflow-x: auto; overflow-y: hidden; padding-right: 6px; } /* 6 px — под полосу прокрутки областей, чтобы столбцы совпадали */
/* Пальцем вбок части таблицы двигает cashflow.js (все сразу); браузеру — только вверх-вниз и масштаб; без «пружины» у краёв. */
.cf-dt .cf-x { touch-action: pan-y; touch-action: pan-y pinch-zoom; overscroll-behavior-x: none; }
/* iPhone: серая подсветка нажатия рисуется поверх ячейки и не едет вместе с таблицей при медленном движении пальцем — «второй слой». */
.cf-dt { -webkit-tap-highlight-color: transparent; }
.cf-nsb { scrollbar-width: none; }
.cf-nsb::-webkit-scrollbar { display: none; }
.cf-scr { padding-right: 0; overflow-y: scroll; }
/* Тени 10 px внутрь у краёв, за которыми есть ещё строки (8.7 п. 6); накладка поверх строк, классы ставит shadeEdges. */
.cf-sw { position: relative; display: flex; flex-direction: column; min-height: 0; }
.cf-sw-in { flex: none; }
.cf-sw-out { flex: 0 1 auto; }
.cf-sw-out > .cf-area-out { flex: 0 1 auto; }
.cf-sw::before, .cf-sw::after { content: ''; position: absolute; left: 0; right: 6px; height: 10px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .12s; }
.cf-sw::before { top: 0; background: linear-gradient(var(--cf-shd), transparent); }
.cf-sw::after { bottom: 0; background: linear-gradient(transparent, var(--cf-shd)); }
.cf-sw.sh-top::before, .cf-sw.sh-bot::after { opacity: 1; }
.cf-scr::-webkit-scrollbar { width: 6px; height: 6px; }
.cf-scr::-webkit-scrollbar-thumb { background: var(--line); }
.cf-scr::-webkit-scrollbar-track, .cf-scr::-webkit-scrollbar-corner { background: transparent; }
.cf-area-in, .cf-area-out { overflow-x: auto; }
.cf-area-in::-webkit-scrollbar:horizontal, .cf-area-out::-webkit-scrollbar:horizontal { height: 0; } /* видимая горизонтальная полоса — одна, у итогов */
.cf-area-out { min-height: 0; }
.cf-tots { border-top: 1px solid var(--ink); background: var(--surface); }
/* Firefox: ::-webkit-scrollbar нет — тонкие полосы стандартными свойствами. В Chrome/Safari их не задаём:
   при scrollbar-width Chrome игнорирует ::-webkit-scrollbar и полосы становятся «плавающими» (столбцы съезжают). */
@supports not selector(::-webkit-scrollbar) { .cf-scr, .cf-tots { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } }
.cf-tots::-webkit-scrollbar { height: 6px; }
.cf-tots::-webkit-scrollbar-thumb { background: var(--line); }
.cf-tots::-webkit-scrollbar-track { background: transparent; }
.cf-tr { display: grid; }
.cf-tr > div { min-width: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; border-bottom: 1px solid var(--line); background-color: var(--surface); white-space: nowrap; }
.cf-tr > div.cur { background-color: var(--cf-cur-solid); }
.cf-row:hover > div { background-color: var(--hover); } /* наведение подсвечивает всю строку, включая закреплённый столбец */
.cf-row > div:not(.cf-stk):hover { background-color: color-mix(in srgb, var(--ink) 7%, var(--hover)); } /* и отдельно — ячейку под курсором */
.cf-tr > .cf-stk { position: sticky; left: 0; z-index: 1; justify-content: flex-start; padding: 0 12px 0 16px; overflow: hidden; }
.cf-thr > div { height: 48px; flex-direction: column; align-items: flex-end; justify-content: flex-end; padding: 0 8px 8px; border-bottom-color: var(--ink); border-top: 2px solid transparent; }
.cf-thr > div.cur { border-top-color: var(--accent); }
.cf-thr > .cf-stk { z-index: 2; align-items: flex-start; padding-left: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.cf-th-n { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.cf-thr .cur .cf-th-n { color: var(--accent); }
.cf-th-d { display: block; margin-top: 2px; font: 400 11px/14px var(--font-mono); color: var(--muted); }
.cf-art > div { height: 40px; }
.cf-grp > div { height: 44px; padding: 0 8px; }
.cf-grp > .cf-stk { padding-left: 0; font-size: 11px; font-weight: 500; letter-spacing: .2em; color: var(--ink); }
.cf-cnt { margin-left: 8px; font: 400 10px/12px var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.cf-tots .cf-bal > div { border-bottom-color: var(--ink); }
.cf-tr > .cf-tot { padding-left: 12px; }
.cf-noart { display: grid; }
.cf-noart-in { position: sticky; left: 0; height: 56px; display: flex; align-items: center; gap: 16px; padding-left: 16px; font-size: 13px; border-bottom: 1px solid var(--line); grid-column: 1 / -1; }
.cf-noart-in > * { position: sticky; left: 16px; }
.cf-noart .btn { margin: 0; }
.cf-dsec > .cf-note { flex: none; margin: 8px 0 12px; }
.cf-v { display: inline-block; padding: 2px 6px; border: 1px solid transparent; font: 400 13px/18px var(--font-mono); color: var(--ink); }
.cf-v.dashed { border-style: dashed; border-color: var(--ink); }
.cf-v.strong { font-weight: 500; }
.cf-v.missed { color: var(--muted); text-decoration: line-through; }
.cf-v.empty, .cf-v.zero { color: var(--muted); }
.cf-v.pos { color: var(--ok-ink); }
.cf-v.neg { color: var(--bad); }
.cf-cell { min-width: 100%; height: 32px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: flex-end; border: 0; background: transparent; color: inherit; }
.cf-cell.ro { cursor: default; }
.cf-cell.selected .cf-v { border: 1px solid var(--ink); }
.cf-tot { padding-left: 12px !important; }
.cf-note { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--muted); }
.cf-tip { white-space: normal; width: 240px; }

/* Окошко плана у ячейки */
.cf-pop { position: fixed; z-index: 55; width: 300px; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); color: var(--ink); }
.cf-pop-art { margin-top: 4px; font-size: 15px; font-weight: 500; }
.cf-pop-btns { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.cf-b36 { height: 36px; padding: 0 10px; font-size: 11px; letter-spacing: .12em; }
.cf-pop-btns { gap: 6px; }
.cf-pop .cf-text-bad { letter-spacing: .12em; }
.cf-text-bad { height: 36px; padding: 0 2px; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--bad); font-size: 11px; font-weight: 500; letter-spacing: .16em; }
.cf-dlg .cf-text-bad { height: 44px; font-size: 12px; }
.cf-text-btn2 { height: 44px; padding: 0 2px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.cf-text-btn2:hover { text-decoration: underline; text-underline-offset: 4px; }
.cf-dlg-foot .cf-text-btn2 { justify-content: center; }

/* Поля форм */
.cf-f { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cf-in { width: 100%; height: 40px; padding: 0 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: 0; outline: none; font-size: 14px; }
.cf-in.mono { font-size: 13px; }
.cf-in:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-in[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.cf-in::placeholder { color: var(--muted); opacity: 1; }
.cf-in-wrap { position: relative; display: block; }
.cf-in-wrap .cf-in { padding-right: 40px; }
.cf-in-wrap svg, .cf-rub { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 13px; }
.cf-err { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--bad); }
.cf-pop .cf-err { margin-top: 6px; }
.cf-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cf-g2 .cf-f { margin-top: 20px; }
.cf-sel { width: 100%; height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--control); color: var(--ink); font-size: 14px; text-align: left; }
.cf-sel[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-lb { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 280px; overflow-y: auto; padding: 4px 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.cf-lb-i { width: 100%; min-height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.cf-lb-i[aria-selected="true"] { font-weight: 500; }
.cf-lb-i:hover, .cf-lb-i:focus-visible { background: var(--hover); outline-offset: -2px; }
.cf-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); }
.cf-kind { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.cf-kind:first-child { border-left: 0; }
.cf-kind .mono { font-size: 15px; letter-spacing: 0; }
.cf-kind[aria-checked="true"] { background: var(--inv-bg); color: var(--inv-ink); }

/* Окна */
.modal.cf-dlg { width: 560px; }
.modal.cf-dlg.cf-dlg-440 { width: 440px; }
.modal.cf-dlg.modal-sm { width: 480px; margin-top: 120px; }
.cf-dlg-body { padding: 6px 28px 4px; }
.cf-dlg-body > .cf-f:first-child { margin-top: 20px; }
.cf-dlg-lead { margin-top: 20px; font-size: 14px; line-height: 21px; }
.cf-dlg .cfm-text { margin-top: 20px; font-size: 14px; line-height: 21px; }
.cf-dlg-foot { display: flex; align-items: center; gap: 12px; padding: 28px 28px 24px; }

/* Шапка: «Начальный остаток», «Операции», «+ Добавить операцию» */
.cf-hbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cf-hbtn { height: 40px; margin: 0; white-space: nowrap; }
.cf-hbal { font-size: 13px; font-weight: 500; letter-spacing: 0; }

/* Окно «Операции» */
.modal.cf-dlg.cf-dlg-920 { width: 920px; }
.cf-dlg-t { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.cf-dlg-sub { font-size: 11px; letter-spacing: .04em; }
/* Период в окне «Операции» — кнопка с календарём 7.22 «Период» */
.cf-jper { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 12px/16px var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.cf-jper:hover, .cf-jper[aria-expanded="true"] { background: var(--hover); }
.cf-jper svg { color: var(--muted); }
.cf-journal .cf-dlg-t { align-items: center; }
/* Окно «Операции»: закреплены шапка (вкладки + период), строка отбора и подвал; прокручивается только список */
.modal.cf-journal[open] { display: flex; flex-direction: column; overflow: hidden; }
.cf-journal .cf-dlg-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.cf-journal .cf-dlg-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.cf-journal .cf-dlg-foot { flex: none; border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 16px; }
.cf-jtop { flex: none; }
.cf-jscroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 12px; overscroll-behavior: contain; }
.cf-journal .cf-jscroll { min-height: min(240px, 40vh); } /* окно не «прыгает» по высоте, пока набирают поиск */
.cf-jscroll .cf-ops-d { margin-top: 0; overflow: visible; }
.cf-jscroll .cf-ops thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.cf-jscroll > .cf-plaque:first-child, .cf-jscroll > .cf-jlead:first-child { margin-top: 0; }
.cf-jbar.cf-jbar-r { justify-content: flex-end; }
/* Поиск по операциям */
.cf-jsearch { position: relative; flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; }
.cf-jsearch > svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.cf-jsearch .cf-in { height: 32px; padding: 0 32px 0 34px; font-size: 13px; }
.cf-jsearch .cf-in::-webkit-search-cancel-button { display: none; }
.cf-jsearch-x { position: absolute; right: 2px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.cf-jsearch-x:hover { color: var(--ink); }
.cf-journal .modal-head { padding-top: 12px; padding-bottom: 0; align-items: flex-end; }
.cf-journal .modal-head [data-close] { margin-bottom: 8px; }
.cf-journal .cf-dlg-t { padding-bottom: 14px; }
.cf-jh { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.cf-jh .cf-jtabs { margin: 0; border-bottom: 0; }
.cf-jh .cf-jtab { height: 48px; margin-bottom: -1px; }
.cf-jh .cf-jper { margin-bottom: 0; }
.cf-jbar { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.cf-jcount { font-size: 11px; }
.cf-jscope { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cf-chip { height: 32px; padding: 0 4px 0 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--inv-bg); color: var(--inv-ink); font-size: 13px; }
.cf-chip button { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; }
.cf-ulink { height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-decoration: underline; text-underline-offset: 4px; }
.cf-journal .cf-ops-d { margin-top: 12px; }
.cf-jsum { font-size: 13px; font-weight: 500; }
.cf-jsum .pos { color: var(--ok-ink); }
.cf-journal .cf-dlg-foot .btn { margin: 0; }

/* Окно операции: вкладки, сегменты, статьи */
.cf-tabs { display: flex; border: 1px solid var(--line); }
.cf-tab { height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.cf-tab:first-child { border-left: 0; }
.cf-tab:hover { background: var(--hover); }
.cf-tab[aria-selected="true"] { background: var(--inv-bg); color: var(--inv-ink); }
.cf-segrow { margin-top: 20px; }
.cf-dash { width: 10px; height: 10px; border: 1px dashed currentColor; }
.cf-sel.ph > span { color: var(--muted); }
.cf-sel[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.cf-artf { margin-top: 20px; }
.cf-noarts { font-size: 13px; line-height: 18px; color: var(--muted); }
.cf-newrow { display: flex; gap: 8px; }
.cf-newrow .cf-in { flex: 1; min-width: 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-b40 { height: 40px; margin: 0; flex: none; }
.cf-newrow .btn { padding: 0 14px; font-size: 11px; }
.cf-newhint { font-size: 11px; }
.cf-addlink { align-self: flex-start; height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 13px; }
.cf-addlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.cf-lb-new { border-top: 1px solid var(--line); min-height: 40px; color: var(--accent); }
.cf-lb-new > span:first-child { display: flex; align-items: center; gap: 8px; }
.cf-agroup { margin-top: 20px; }
.cf-agh { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); }
.cf-agh .cf-cnt { margin-left: 0; }
.cf-arow { min-height: 44px; display: flex; align-items: center; gap: 12px; padding-left: 4px; border-bottom: 1px solid var(--line); }
.cf-arow:hover { background: var(--hover); }
.cf-arow:hover .del-b { color: var(--ink); }
.cf-arow .cf-in { flex: 1; min-width: 0; height: 36px; margin: 4px 0; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-aname { flex: 1; min-width: 0; font-size: 14px; }
.cf-ause { font-size: 11px; white-space: nowrap; }
.cf-aempty { font-size: 13px; }
.cf-aacts { display: flex; }
.cf-asys { width: 80px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--muted); }
.cf-asys .mono { font-size: 10px; letter-spacing: .06em; }
.cf-aadd { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.cf-aadd .cf-in { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-kinds-sm .cf-kind { height: 38px; padding: 0 12px; font-size: 11px; letter-spacing: .14em; }
.cf-dlg-body > .btn { margin-top: 20px; }
.cf-warnplate { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--warn); font-size: 12px; letter-spacing: .04em; }
.cf-dlg-foot[hidden] { display: none; }
.cf-dlg-body > .cf-err { margin-top: 12px; }

/* Журнал денег (013): вкладки «Операции» / «Выплаты ВБ», счётчик новых отчётов, журнал выплат */
.cf-newcnt { min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font: 400 11px/18px var(--font-mono); letter-spacing: 0; }
.cf-jtabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--line); }
.cf-jtab { height: 40px; padding: 0 4px; margin: 0 24px -1px 0; display: flex; align-items: center; gap: 8px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.cf-jtab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.cf-jtab-n { font-size: 10px; letter-spacing: 0; }
.cf-planlbl { display: block; width: max-content; margin-top: 2px; padding: 0 5px; border: 1px dashed var(--ink); font-size: 10px; line-height: 15px; letter-spacing: .06em; }
.cf-amt.plan { padding: 2px 6px; border: 1px dashed var(--ink); }
.cf-jlead { margin-top: 16px; font-size: 13px; line-height: 18px; color: var(--muted); }
.cf-journal .cf-plaque { margin-top: 16px; }
.cf-plaque.bad { border-color: var(--bad); }
.cf-plaque.bad .cf-pl-dot { background: var(--bad); border-color: var(--bad); }
.cf-plaque.bad b { color: var(--bad); }
.cf-jempty { margin-top: 16px; min-height: 220px; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px dashed var(--line); }
.cf-jempty .state-title { margin-top: 20px; }
.cf-jempty .state-text { margin-top: 8px; font-size: 13px; line-height: 18px; max-width: 480px; }
.cf-jsk { height: 240px; margin-top: 16px; }
.cf-pays { margin-top: 16px; }
.cf-psub { display: block; margin-top: 2px; font: 400 11px/14px var(--font-mono); color: var(--muted); letter-spacing: .04em; }
.cf-jmonth { display: inline-flex; }
.cf-jmonth .cf-pnav { height: 32px; }
.cf-jmonth-l { min-width: 168px; height: 32px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.cf-jmonth-l svg { color: var(--muted); }
.cf-pays td { height: 52px; white-space: nowrap; }
.cf-pays .mono { font-size: 13px; }
.cf-pamt { font-weight: 500; white-space: nowrap; }
.cf-newlbl { display: inline-block; margin-left: 8px; padding: 0 5px; background: var(--accent); color: var(--on-accent); font: 400 10px/16px var(--font-mono); letter-spacing: .06em; vertical-align: 1px; }
.cf-pexp { font-size: 12px !important; }
.cf-pays td.cf-pdatecell { padding: 0 4px 0 12px; }
.cf-pdbtn { height: 36px; margin-left: -8px; padding: 0 8px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); }
.cf-pdbtn svg { color: var(--muted); }
.cf-pdbtn:hover { background: var(--hover); }
.cf-pdbtn:hover svg { color: var(--ink); }
.cf-pbadge { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); font: 400 11px/14px var(--font-mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.cf-pdot { width: 6px; height: 6px; flex: none; border-radius: 50%; border: 1px solid var(--muted); }
.cf-pbadge.fact { border-color: var(--ok); color: var(--ink); }
.cf-pbadge.fact .cf-pdot { background: var(--ok); border-color: var(--ok); }
.cf-pbadge.plan { border: 1px dashed var(--ink); color: var(--ink); }
.cf-pbadge.plan .cf-pdot { border-color: var(--ink); }
.cf-pays .btn-sm { margin: 0; }
.cf-ulink.muted { color: var(--muted); }
.cf-pays tr.cf-ped td { border-bottom: 0; }
.cf-pays tr.cf-ppanel-row td { height: auto; padding: 0; }
.cf-pays tbody tr.cf-ppanel-row:hover { background: transparent; }
.cf-ppanel { padding: 12px 16px 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; background: var(--hover); border-bottom: 1px solid var(--line); }
.cf-ppanel .cf-f { margin-top: 0; gap: 6px; }
.cf-pdate { width: 180px; }
.cf-ppanel .cf-in { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-ppanel .cf-in[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.cf-phint { height: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .04em; }
.cf-will { padding: 2px 6px; border: 1px solid var(--ink); }
.cf-will.plan { border-style: dashed; }
.cf-ppanel .top-spacer { flex: 1; }
.cf-ppanel .btn { font-size: 11px; padding: 0 14px; }
.cf-pcards { border-top: 1px solid var(--ink); }
.cf-pcard { padding: 12px 0; border-bottom: 1px solid var(--line); }
.cf-pc-1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; }
.cf-pc-1 .cf-pamt { font-size: 14px; }
.cf-pc-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.cf-pc-2 .cf-pbadge { height: 20px; padding: 0 6px; }
.cf-pc-3 { display: flex; gap: 8px; margin-top: 10px; }
.cf-pc-3 .btn { flex: 1; justify-content: center; margin: 0; }
.cf-pc-3 .cf-ulink { height: 44px; padding: 0 12px; text-decoration: none; font-size: 12px; }
.cf-pcard .cf-ppanel { margin-top: 10px; }
.cf-pcard .cf-pdate { width: 100%; }
.cf-pcard .cf-ppanel .cf-f { width: 100%; }
.cf-pcard .cf-ppanel .btn { flex: 1; justify-content: center; height: 44px; }

/* Загрузка операций из Excel */
.cf-imp-btns { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cf-imp-btns .btn { margin: 0; }
.cf-imp-name { font-size: 12px; }
.cf-import .cf-plaque { margin-top: 20px; }
.cf-imp { margin-top: 16px; }
.cf-imp td { height: 44px; }
.cf-imp tr.cf-imp-bad td { background: transparent; }
.cf-imp .cf-err { white-space: normal; }
.cf-imp tr.cf-imp-dup td { color: var(--muted); }
.cf-imp-note { white-space: normal; }
.cf-import .cf-newlbl { margin-left: 8px; }
.cf-journal .cf-dlg-foot { flex-wrap: wrap; }

/* Операции */
.cf-ops-d { margin-top: 12px; overflow-x: auto; }
.cf-ops { width: 100%; min-width: 820px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cf-ops th { height: 40px; padding: 0 12px; text-align: left; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); white-space: nowrap; }
.cf-ops th:first-child, .cf-ops td:first-child { padding-left: 0; }
.cf-ops td { height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cf-ops td.mono { font-size: 13px; white-space: nowrap; }
.cf-ops tbody tr:hover { background: var(--hover); }
.cf-ops tbody tr:hover .del-b { color: var(--ink); }
.cf-ops .cf-r { text-align: right; }
.cf-ops td.cf-acts { padding: 0; white-space: nowrap; }
.cf-ed:hover { color: var(--ink) !important; }
.cf-sort { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; }
.cf-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-src { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cf-src-sub { display: block; margin: 2px 0 0 14px; font: 400 11px/14px var(--font-mono); color: var(--muted); }
.cf-src-dot { width: 6px; height: 6px; flex: none; display: inline-block; border-radius: 50%; border: 1px solid var(--muted); }
.cf-src-dot.wb { background: var(--accent); border-color: var(--accent); }
.cf-amt { font: 500 13px/18px var(--font-mono); white-space: nowrap; color: var(--ink); }
.cf-amt.in { color: var(--ok-ink); }
.cf-sk-row { height: 52px; }
.cf-sk-row .skeleton { display: inline-block; width: 140px; height: 12px; margin-right: 24px; }
.cf-ops-m { display: none; margin-top: 12px; border-top: 1px solid var(--ink); }
.cf-mop { width: 100%; min-height: 64px; padding: 12px 0; display: block; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.cf-mop:disabled { cursor: default; }
.cf-mop-1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.cf-mop-1 .cf-amt { font-size: 14px; }
.cf-mop-2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 400 11px/14px var(--font-mono); color: var(--muted); }
.cf-mop-3 { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Шапка в одну строку: у «Начального остатка» — иконка + сумма (название — в подсказке и aria-label; при ширине
   страницы 1248 полные подписи всех трёх кнопок не помещаются); уже 1440 главная — «+ ДОБАВИТЬ». Без суммы (остаток
   не задан) надпись остаётся. */
.cf-hbtn[data-cf="balance"]:has(.cf-hbal) .cf-bal-l { display: none; }
@media (max-width: 1439px) {
  .cf-add-x { display: none; }
}
@media (max-width: 1279px) {
  .cf-num { font-size: 20px; line-height: 24px; }
  .cf-kpis { padding: 0 16px; }
  .cf-kpis > div { padding-right: 12px; margin-right: 12px; }
  .top-logo .logo-word { display: none; } /* ноутбук: в шапке знак логотипа, места — пути и кабинету */
}
@media (max-width: 1023px) {
  .cf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-kpis > div:nth-child(2n) { box-shadow: none; margin-right: 0; padding-right: 0; }
  .cf-kpis > div:nth-child(-n+2) { border-bottom: 1px solid var(--inv-line); }
}
@media (max-width: 767px) {
  .cf-kpis { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .cf-kpis > div { box-shadow: none; margin-right: 0; padding-right: 0; border-bottom: 1px solid var(--inv-line); }
  .cf-kpis > div:last-child { border-bottom: 0; }
  .cf-num { font-size: 24px; line-height: 28px; }
  .cf-head-l { width: 100%; } /* «Кэш-флоу», под ним период на всю ширину, кнопки — строкой ниже */
  .cf-head .cf-period { flex: 1 1 100%; }
  .cf-chartp { padding: 16px 16px 12px; }
  .cf-add-l { display: none; }
  .cf-period, .cf-pgroup { width: 100%; }
  .cf-pbtn { flex: 1; min-width: 0; }
  .cf-pdates { display: none; }
  .cf-pm { left: 0; right: 0; width: auto; }
  .cf-panel, .cf-empty { padding: 20px 16px; }
  .cf-yax { width: 40px; }
  .cf-yax > span { right: 4px; }
  .cf-unit { display: none; } /* ось 40 px: на телефоне только число */
  .cf-dsec { --c1: 132px; padding: 16px 16px 0; }
  .cf-tr > .cf-stk { padding-left: 8px; }
  .cf-grp > .cf-stk { white-space: normal; font-size: 10px; line-height: 13px; letter-spacing: .08em; } /* «ОСТАТОК НА КОНЕЦ НЕДЕЛИ» — не больше двух строк в столбце 132 */
  .cf-hide-sm { display: none !important; }
  .cf-hbtns { width: 100%; gap: 8px; }
  .cf-hbtn { padding: 0 12px; gap: 8px; }
  .cf-hbtn[data-cf="journal"] { width: 44px; padding: 0; justify-content: center; }
  .cf-hbtns .btn-primary { margin-left: auto; letter-spacing: .12em; }
  .cf-aadd { grid-template-columns: minmax(0, 1fr); }
  .cf-tabs { flex: 1; }
  .cf-tab { flex: 1; justify-content: center; }
  .cf-jbar .cf-segs { width: 100%; }
  .cf-jbar .cf-seg { flex: 1; justify-content: center; }
  .cf-journal .cf-dlg-foot { flex-direction: column-reverse; }
  .cf-ops-d { display: none; }
  .cf-ops-m { display: block; }
  .cf-g2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cf-in, .cf-sel { height: 44px; font-size: 16px; }
  .cf-in.mono { font-size: 16px; }
  .modal.cf-dlg, .modal.cf-dlg.cf-dlg-440, .modal.cf-dlg.modal-sm, .modal.cf-dlg.cf-dlg-920 { width: 100%; margin: auto 0 0; }
  .cf-dlg-body { padding: 6px 16px 4px; }
  .cf-dlg-foot { flex-direction: column-reverse; align-items: stretch; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
  .cf-dlg-foot .btn, .cf-dlg-foot .cf-text-bad, .cf-dlg-foot .cf-text-btn2 { width: 100%; justify-content: center; }
  .cf-dlg-foot .top-spacer { display: none; }
  .cf-pop { left: 8px !important; right: 8px; width: auto; }
}
.cf-dlg-body:has(+ .cf-dlg-foot[hidden]) { padding-bottom: 24px; } /* вкладка «Статьи» без подвала */

/* ================= Календарь (DESIGN.md 7.22) — один на весь проект ================= */
:root { --cl-band: rgba(12, 107, 74, .10); --cl-band2: rgba(12, 107, 74, .05); }
:root[data-theme="dark"] { --cl-band: rgba(107, 227, 164, .14); --cl-band2: rgba(107, 227, 164, .07); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cl-band: rgba(107, 227, 164, .14); --cl-band2: rgba(107, 227, 164, .07); } }
.cl { z-index: 60; background: var(--surface); color: var(--ink); }
.cl-pop { position: fixed; border: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.cl-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.cl-scrim { position: fixed; inset: 0; z-index: 59; background: var(--scrim); }
.cl-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 8px 12px 16px; border-bottom: 1px solid var(--line); }
.cl-head h2 { font-size: 22px; font-weight: 300; line-height: 28px; }
.cl-ib { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ink); }
.cl-ib:hover { background: var(--hover); }
.cl-x { width: 44px; height: 44px; }
.cl-main { display: flex; align-items: stretch; }
.cl-body { flex: 1; min-width: 0; padding: 20px 24px 16px; }
.cl-date .cl-body, .cl-weekOne .cl-body { padding: 12px; }
.cl-fields { display: flex; gap: 12px; margin-bottom: 18px; }
.cl-f { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-f .cf-in { padding: 0 10px; }
.cl-note:not(:empty) { margin: -8px 0 14px; font-size: 11px; line-height: 16px; }
.cl-note .cf-err { font-size: 13px; line-height: 18px; }
.cl-months { display: flex; gap: 32px; }
.cl-month { flex: none; }
.cl-mh { height: 36px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cl-mt { font-size: 14px; font-weight: 500; }
.cl-row { display: grid; grid-template-columns: repeat(7, 40px); height: 36px; margin-top: 2px; }
.cl-week .cl-row, .cl-weekOne .cl-row { grid-template-columns: 32px repeat(7, 40px); }
.cl-row.cl-wd { height: 28px; margin-top: 0; align-items: center; }
.cl-wd > span { font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); text-align: center; }
.cl-wk { display: flex; align-items: center; justify-content: center; font: 400 11px/14px var(--font-mono); color: var(--muted); }
.cl-wd .cl-wk { font-size: 10px; letter-spacing: .04em; }
.cl-row.wsel { background: var(--cl-band); }
.cl-row.wsel .cl-wk { color: var(--accent); font-weight: 500; }
.cl-row.wprev { background: var(--cl-band2); box-shadow: inset 0 0 0 1px var(--line); }
.cl-row.wprev .cl-wk { color: var(--ink); font-weight: 500; }
.cl-d { position: relative; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ink); font: 400 13px/16px var(--font-mono); }
.cl-n { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; }
.cl-n > span { padding-bottom: 1px; border-bottom: 2px solid transparent; }
.cl-d.today .cl-n > span { border-bottom-color: var(--accent); } /* сегодня — подчёркивание accent */
.cl-d.out { color: var(--muted); }
.cl-d.pas { opacity: .4; }
button.cl-d:hover .cl-n { border-color: var(--ink); }
.cl-d.sel .cl-n { background: var(--inv-bg); color: var(--inv-ink); font-weight: 500; }
.cl-d.rin { background: var(--cl-band); }
.cl-d.rs { background: linear-gradient(90deg, transparent 50%, var(--cl-band) 50%); }
.cl-d.re { background: linear-gradient(90deg, var(--cl-band) 50%, transparent 50%); }
.cl.is-prev .cl-d.rin { background: var(--cl-band2); }
.cl.is-prev .cl-d.rs { background: linear-gradient(90deg, transparent 50%, var(--cl-band2) 50%); }
.cl.is-prev .cl-d.re { background: linear-gradient(90deg, var(--cl-band2) 50%, transparent 50%); }
.cl-d.hov .cl-n { border: 1px dashed var(--ink); }
.cl-d:focus-visible { outline: none; }
.cl-d:focus-visible .cl-n { outline: 2px solid var(--ink); outline-offset: 2px; }
.cl-side { flex: none; width: 196px; padding: 20px 12px; border-left: 1px solid var(--line); }
.cl-p { width: 100%; height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.cl-p:hover { background: var(--hover); }
.cl-p[aria-selected="true"] { color: var(--accent); font-weight: 500; }
.cl-dot { width: 5px; height: 5px; flex: none; border-radius: 50%; }
.cl-p[aria-selected="true"] .cl-dot { background: var(--accent); }
.cl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 0; scrollbar-width: none; }
.cl-chips::-webkit-scrollbar { display: none; }
.cl-chip { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; white-space: nowrap; }
.cl-chip[aria-selected="true"] { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.cl-dchips { display: flex; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cl-dchip { height: 32px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .16em; }
.cl-dchip:hover { background: var(--hover); }
.cl-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--line); }
.cl-foot .btn { height: 40px; margin: 0; }
.cl-foot .btn-primary:disabled { background: var(--skeleton); border-color: var(--skeleton); color: var(--muted); cursor: default; }
/* Компактный календарь на компьютере (просьба владельца 06.11.2026: «занимает пол экрана»). Шторка на телефоне — прежних размеров. */
.cl-pop .cl-body { padding: 14px 16px 10px; }
.cl-pop.cl-date .cl-body, .cl-pop.cl-weekOne .cl-body { padding: 8px 10px 10px; }
.cl-pop .cl-fields { gap: 10px; margin-bottom: 8px; }
.cl-pop .cl-f { gap: 4px; }
.cl-pop .cl-f .label { font-size: 10px; }
.cl-pop .cl-f .cf-in { height: 32px; padding: 0 8px; font-size: 12px; }
.cl-pop .cl-note:not(:empty) { margin: 0 0 6px; font-size: 10px; line-height: 14px; }
.cl-pop .cl-note .cf-err { font-size: 12px; line-height: 16px; }
.cl-pop .cl-months { gap: 20px; }
.cl-pop .cl-mh { height: 28px; margin-bottom: 2px; }
.cl-pop .cl-mt { font-size: 13px; }
.cl-pop .cl-ib { width: 28px; height: 28px; }
.cl-pop .cl-row { grid-template-columns: repeat(7, 32px); height: 28px; margin-top: 1px; }
.cl-pop.cl-week .cl-row, .cl-pop.cl-weekOne .cl-row { grid-template-columns: 26px repeat(7, 32px); }
.cl-pop .cl-row.cl-wd { height: 20px; }
.cl-pop .cl-wd > span { font-size: 10px; letter-spacing: .06em; }
.cl-pop .cl-wk { font-size: 10px; }
.cl-pop .cl-wd .cl-wk { font-size: 9px; }
.cl-pop .cl-d { height: 28px; font-size: 12px; }
.cl-pop .cl-n { width: 26px; height: 26px; }
.cl-pop .cl-side { width: 156px; padding: 12px 8px; }
.cl-pop .cl-p { height: 30px; padding: 0 8px; gap: 8px; font-size: 13px; }
.cl-pop .cl-dchips { margin-top: 8px; padding-top: 6px; }
.cl-pop .cl-dchip { height: 28px; padding: 0 8px; font-size: 10px; }
.cl-pop .cl-foot { gap: 10px; padding: 8px 16px; }
.cl-pop .cl-foot .btn { height: 32px; padding: 0 14px; font-size: 11px; }
/* Кнопка календаря в поле даты */
.cl-fbtn { position: absolute; right: 2px; top: 2px; bottom: 2px; width: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--muted); }
.cl-fbtn:hover, .cl-fbtn[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.cf-in-wrap .cl-fbtn svg { position: static; transform: none; color: inherit; pointer-events: none; }
/* Кнопка-поле недели плана; сегмент «Расход / Приход» на всю ширину в «Изменить операцию» */
.cl-wbtn svg { color: var(--muted); }
.cl-wbtn[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cf-span2 { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .cl-sheet .cl-body { padding: 16px 16px 12px; }
  .cl-sheet .cl-months { justify-content: center; }
  .cl-sheet .cl-row { grid-template-columns: repeat(7, 48px); height: 44px; }
  .cl-sheet.cl-week .cl-row, .cl-sheet.cl-weekOne .cl-row { grid-template-columns: 36px repeat(7, 44px); }
  .cl-sheet .cl-row.cl-wd { height: 28px; }
  .cl-sheet .cl-d { height: 44px; font-size: 15px; }
  .cl-sheet .cl-n { width: 42px; height: 42px; }
  .cl-sheet.cl-week .cl-n, .cl-sheet.cl-weekOne .cl-n { width: 40px; }
  .cl-sheet .cl-f .cf-in { height: 44px; font-size: 16px; }
  .cl-sheet .cl-foot { position: sticky; bottom: 0; padding: 12px 16px 16px; background: var(--surface); }
  .cl-sheet .cl-foot .btn { flex: 1; height: 48px; justify-content: center; }
}

/* ================= Юнит-экономика (8.8, задача 018) ================= */
.un-page { max-width: none; padding-top: 24px !important; padding-bottom: 24px !important; }
.un-head .cf-hbtn { gap: 10px; }
.un-taxv { font-size: 13px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 1439px) { .un-cost-l { display: none; } }
.un-plaque { margin-top: 16px; }
.un-prog { flex: none; width: 220px; display: flex; align-items: center; gap: 10px; }
.un-prog-bar { flex: 1; height: 4px; background: var(--skeleton); position: relative; }
.un-prog-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.un-prog-n { font-size: 12px; font-weight: 500; }
/* Сводная — 6 ячеек (вариант A) */
.un-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.un-kpis > div { padding-right: 16px; margin-right: 16px; }
.un-kpis .cf-k1 { display: flex; align-items: center; gap: 6px; }
.un-kpis .cf-k1.un-kink { color: var(--inv-ink); }
.un-kw { flex: none; }
.un-kpis .un-kwarn { color: var(--inv-ink); }
@media (max-width: 1279px) { .un-kpis .cf-num { font-size: 20px; line-height: 24px; } }
@media (max-width: 1023px) {
  .un-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .un-kpis > div:nth-child(3n) { box-shadow: none; margin-right: 0; }
  .un-kpis > div:nth-child(-n+3) { border-bottom: 1px solid var(--inv-line); }
}
@media (max-width: 767px) {
  .un-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .un-kpis > div, .un-kpis > div:nth-child(3n) { box-shadow: none; margin-right: 0; border-bottom: 1px solid var(--inv-line); }
  .un-kpis > div:nth-child(odd) { box-shadow: inset -1px 0 0 var(--inv-line); margin-right: 16px; }
  .un-kpis > div:nth-last-child(-n+2) { border-bottom: 0; }
}
/* Панель «Товары» */
.un-panel { margin-top: 16px; padding: 0; position: relative; }
.un-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 16px clamp(16px, 2vw, 24px) 12px; }
.un-ph-l { display: flex; align-items: baseline; gap: 12px; }
.un-cnt { font-size: 11px; }
.un-search { position: relative; display: block; width: 340px; max-width: 100%; }
.un-search .un-sic { position: absolute; left: 12px; top: 12px; color: var(--muted); display: flex; pointer-events: none; }
.un-search input { width: 100%; height: 40px; padding: 0 12px 0 38px; background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: 0; outline: none; font: 400 14px var(--font-sans); }
.un-search input:focus-visible, .un-search input:not(:placeholder-shown) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.un-blk { padding: 0 clamp(16px, 2vw, 24px) 24px; }
.state-block.warn-b { border: 1px solid var(--warn); }
.un-nf { position: sticky; left: 0; width: min(100%, 1260px); padding: 24px; }
/* Таблица: своя прокрутка по обеим осям, закрепления — sticky */
.un-scr { position: relative; overflow: auto; border-top: 1px solid var(--ink); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; }
.un-scr::-webkit-scrollbar { width: 8px; height: 8px; }
.un-scr::-webkit-scrollbar-thumb { background: var(--line); }
.un-r { display: grid; width: max-content; min-width: 100%; }
.un-c { min-width: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; white-space: nowrap; }
.un-c.un-l { position: sticky; left: 0; z-index: 2; justify-content: flex-start; gap: 10px; padding: 0 12px 0 16px; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.un-pin { position: sticky; z-index: 1; background: var(--surface); }
.un-gs, .un-edge3 { box-shadow: inset 1px 0 0 var(--line); }
/* Тень у края закреплённого справа блока — полоса-градиент на всю высоту ячейки: строки стыкуются без разрывов (box-shadow с отрицательным spread давал «пятна» у каждой ячейки). */
.un-edge3::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; pointer-events: none; background: linear-gradient(to left, var(--un-shd), transparent); }
.un-scr { --un-shd: rgba(22, 51, 40, .10); }
:root[data-theme="dark"] .un-scr { --un-shd: rgba(0, 0, 0, .32); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .un-scr { --un-shd: rgba(0, 0, 0, .32); } }
.un-gr { position: sticky; top: 0; z-index: 4; height: 24px; background: var(--surface); }
.un-g { justify-content: flex-start; align-items: flex-end; padding: 0 10px 2px; box-shadow: inset 1px 0 0 var(--line); font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--ink); background: var(--surface); }
.un-g.un-pin { z-index: 2; }
.un-hd { position: sticky; top: 24px; z-index: 4; height: 44px; background: var(--surface); box-shadow: inset 0 -1px 0 var(--ink), 0 -1px 0 var(--ink); }
.un-hd > .un-c { background: var(--surface); }
.un-hd > .un-c.un-l { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--ink); }
.un-th { gap: 4px; color: var(--muted); }
.un-th.on { color: var(--ink); }
.un-thb { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; text-align: right; font: 500 10px/13px var(--font-sans); letter-spacing: .1em; white-space: normal; cursor: pointer; }
.un-c.un-l .un-thb { font-size: 11px; letter-spacing: .14em; text-align: left; }
.un-thb:hover { color: var(--ink); }
.un-thb svg { flex: none; }
.un-hic { flex: none; display: inline-flex; color: var(--muted); cursor: help; }
.un-hic.warn { color: var(--warn); }
.un-pinrow { position: sticky; z-index: 3; height: 40px; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.un-pinrow > .un-c { background: var(--surface); }
.un-un, .un-un > .un-c.un-l { box-shadow: inset 0 -1px 0 var(--ink); }
.un-un > .un-c.un-l { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--ink); }
.un-pl { font-size: 14px; }
.un-tot .un-pl { font-weight: 500; }
.un-un .un-pl { color: var(--muted); }
.un-pls { font-size: 11px; }
.un-n { font: 400 13px var(--font-mono); color: var(--ink); }
.un-n.b { font-weight: 500; }
.un-n.mut { color: var(--muted); }
.un-n.neg { color: var(--bad); }
.un-row { height: 44px; }
.un-row > .un-c { box-shadow: inset 0 -1px 0 var(--line); }
.un-row > .un-c.un-gs { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.un-row > .un-c.un-l { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.un-row > .un-c.un-edge3 { box-shadow: inset 1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.un-row:hover > .un-c { background: var(--hover); }
.un-thumb { position: relative; flex: none; width: 24px; height: 32px; padding: 0; border: 0; background: var(--skeleton); overflow: hidden; cursor: zoom-in; }
.un-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.un-pn { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.un-pt { font-size: 13px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-pa { font-size: 11px; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-set { height: 28px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid var(--line); background: transparent; color: var(--accent); font: 500 11px var(--font-sans); letter-spacing: .14em; white-space: nowrap; }
.un-set:hover, .un-set.selected { border-color: var(--ink); background: var(--hover); }
.un-costv { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted var(--line); text-underline-offset: 4px; }
.un-costv:hover, .un-costv.selected { text-decoration-color: var(--ink); }
.un-sk { height: 44px; align-items: center; box-shadow: inset 0 -1px 0 var(--line); }
.un-sk-ph { width: 24px; height: 32px; }
.un-sk-t { width: 180px; height: 12px; }
.un-sk-n { width: 60%; height: 12px; }
.un-zoom { position: fixed; z-index: 70; width: 168px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); pointer-events: none; } /* 168 × 224 — как в заказе поставщику (решение владельца 10.11; в 7.15 — 240 × 320) */
.un-zimg { height: 224px; display: flex; align-items: center; justify-content: center; background: var(--skeleton); }
.un-zimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.un-zt { padding: 8px 10px; font-size: 12px; line-height: 16px; }
.un-zt > div:first-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.un-zt .mono { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-tip { width: 280px; white-space: normal; }
/* Окошко себестоимости у ячейки */
.un-pop { width: 340px; padding: 16px; }
.un-pop-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.un-pop-n { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.un-pop-t { font-size: 14px; font-weight: 500; line-height: 18px; }
.un-pop-n .mono { font-size: 11px; }
.un-pop-x { width: 32px; height: 32px; margin: -6px -6px 0 0; }
.un-pop-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.un-pop-f .cf-f { margin-top: 14px; gap: 6px; }
.un-r-in { text-align: right; }
.un-pop-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.un-link { height: 36px; padding: 0 6px; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--ink); font: 500 11px var(--font-sans); letter-spacing: .16em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.un-link.acc { color: var(--accent); text-decoration: none; padding: 0; }
.un-pop-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .04em; }
.un-pop .cf-err { margin-top: 10px; }
/* Окна */
.modal.un-dlg-720 { width: 720px; }
.modal.un-dlg-440 { width: 440px; }
.un-cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; }
.un-csearch { flex: 1; min-width: 220px; width: auto; }
.un-chead, .un-cr { display: grid; grid-template-columns: minmax(0, 1fr) 132px 152px 104px; align-items: center; }
.un-chead { height: 36px; margin-top: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.un-chead .un-r { text-align: right; padding-right: 10px; }
.un-chead > span:nth-child(3) { padding-left: 10px; }
.un-chead .un-hcol { text-align: right; }
.un-clist { max-height: min(56vh, 560px); overflow-y: auto; }
.un-cr { min-height: 52px; border-bottom: 1px solid var(--line); }
.un-cr.chg { background: var(--hover); }
.un-crp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.un-crf { padding-left: 10px; }
.un-crf .cf-in { height: 36px; }
.un-crf.cf-in-wrap .cl-fbtn { right: 2px; width: 34px; }
.un-hb { height: 36px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 11px; cursor: pointer; }
.un-hb:disabled { cursor: default; }
.un-hist { grid-column: 1 / -1; margin: 0 0 10px 34px; padding: 6px 12px; background: var(--hover); }
.un-hv { display: flex; align-items: center; gap: 16px; height: 32px; font-size: 12px; border-bottom: 1px solid var(--line); }
.un-hv > span:first-child { width: 120px; }
.un-hvp { width: 96px; text-align: right; }
.un-hvs { flex: 1; font-size: 10px; letter-spacing: .08em; }
.un-hvs.ok { color: var(--ok-ink); }
.un-hvd { width: 28px; height: 28px; color: var(--muted); }
.un-cerr { margin-top: 10px; }
.un-chg { flex: 1; font-size: 11px; }
.un-icards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding-top: 16px; }
.un-icard { padding: 12px 14px; border: 1px solid var(--line); }
.un-icard.on { border-color: var(--ink); }
.un-icard p { margin-top: 6px; font-size: 13px; line-height: 18px; }
.un-icard .btn { margin-top: 10px; }
.un-icard .un-link { margin-top: 6px; padding: 0; }
.un-ifn { margin-top: 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.un-ifr { font-size: 11px; margin-top: 2px; }
.un-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.un-badge { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); font: 400 11px var(--font-mono); letter-spacing: .06em; }
.un-badge > span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.un-badge.ok { border-color: var(--ok); }
.un-badge.ok > span { background: var(--ok); }
.un-badge.bad { border-color: var(--bad); color: var(--bad); }
.un-badge.bad > span { background: var(--bad); }
.un-ih, .un-ir { display: grid; grid-template-columns: 64px 128px 110px 120px minmax(0, 1fr); align-items: center; }
.un-ih { height: 36px; margin-top: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.un-ih .un-r, .un-ir .un-r { text-align: right; padding-right: 12px; }
.un-ir { min-height: 36px; border-bottom: 1px solid var(--line); font-size: 12px; }
.un-ir .neg { color: var(--bad); }
.un-is { display: flex; align-items: center; gap: 6px; font: 400 13px var(--font-sans); padding: 6px 0; }
.un-is.ok { color: var(--ok-ink); }
.un-is.neg { color: var(--bad); }
.un-imore { padding: 8px 0; font-size: 11px; }
.un-inote { flex: 1; font-size: 13px; line-height: 18px; }
.un-taxf { width: 160px; margin-top: 20px; }
/* Телефон: карточки товаров */
.un-m { margin-top: 16px; }
.un-msearch { width: 100%; }
.un-msearch input { height: 44px; font-size: 16px; }
.un-mbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.un-psort { height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 400 13px var(--font-sans); }
.un-psort .label { font-size: 11px; letter-spacing: .16em; }
.un-lb { width: 240px; max-height: 60vh; }
.un-cards { margin-top: 12px; border-top: 1px solid var(--ink); }
.un-cards > .state-block { margin-top: 12px; }
.un-card { background: var(--surface); border: 1px solid var(--line-soft); border-top: 0; padding: 12px 14px; }
.un-c1 { display: flex; align-items: flex-start; gap: 12px; }
.un-thumb-m { width: 36px; height: 48px; cursor: default; }
.un-c1 .un-pn { flex: 1; }
.un-ct { font-size: 14px; line-height: 18px; }
.un-cp { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.un-cp .label { font-size: 10px; letter-spacing: .16em; }
.un-cpv { font-size: 15px; font-weight: 500; }
.un-cpv.neg, .un-cpm.neg { color: var(--bad); }
.un-cpv.mut { color: var(--muted); }
.un-cpm { font-size: 11px; }
.un-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.un-mini > span { min-width: 0; display: flex; flex-direction: column; }
.un-mini .label { font-size: 10px; letter-spacing: .14em; }
.un-mini .mono { font-size: 13px; margin-top: 2px; }
.un-call { margin-top: 8px; }
.un-cl { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.un-cl .mut { color: var(--muted); }
.un-cl .neg { color: var(--bad); }
.un-more { width: 100%; height: 36px; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: var(--ink); font: 500 11px var(--font-sans); letter-spacing: .16em; }
.un-mmore { width: 100%; margin-top: 12px; }
.un-sk-card { height: 132px; margin-top: 8px; }
@media (max-width: 767px) {
  .un-head .un-tax-l { display: none; }
  .un-chead, .un-cr { grid-template-columns: minmax(0, 1fr) 84px 118px; }
  .un-chead .un-hcol, .un-cr .un-hb { display: none; }
  .un-hist { margin-left: 0; }
  .un-icards { grid-template-columns: minmax(0, 1fr); }
  .un-ih { display: none; }
  .un-ir { grid-template-columns: 48px minmax(0, 1fr) 90px; row-gap: 2px; padding: 6px 0; }
  .un-ir > span:nth-child(4) { grid-column: 2; }
  .un-ir .un-is { grid-column: 1 / -1; }
}

/* Юнит-экономика: динамика продаж (мини-график 7.14) и переключатель «По дням / По неделям» (сегменты 7.3, высота 40) */
.un-ph-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.un-segs .cf-seg { height: 38px; }
.un-spk { justify-content: center; padding: 0 12px; cursor: crosshair; }
.un-spk.mut { cursor: default; }
.un-spk-th { justify-content: center; }
.un-thl { font: 500 10px/13px var(--font-sans); letter-spacing: .1em; text-align: center; white-space: normal; color: var(--muted); }
.un-spk-svg { display: block; overflow: visible; }
.un-spk-b { fill: var(--muted); }
.un-spk-b.on { fill: var(--ink); }
.un-spk-none { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }

/* Юнит-экономика: настройка таблицы (как «Настроить таблицу» в WB Продвижении; в дизайн-системе нет — собрано из 7.4 / 7.9) */
.un-tbtn { width: 40px; padding: 0; }
.un-tset { position: fixed; z-index: 60; width: 320px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); color: var(--ink); }
.un-tlist { overflow-y: auto; padding: 8px 0; min-height: 0; flex: 1; }
.un-tsec { padding: 12px 16px 4px; color: var(--muted); }
.un-ti { display: flex; align-items: center; min-height: 36px; padding: 0 8px 0 12px; background: var(--surface); }
.un-ti.drag { position: relative; z-index: 1; box-shadow: var(--shadow-overlay); }
.un-tchk { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: 400 14px var(--font-sans); text-align: left; cursor: pointer; }
span.un-tchk { cursor: default; color: var(--muted); }
.un-tchk:hover { background: var(--hover); }
span.un-tchk:hover { background: transparent; }
.un-cb { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); color: var(--surface); }
.un-cb.on { background: var(--ink); }
.un-cb.lock { border-color: var(--muted); background: var(--muted); }
.un-tic { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.un-tic:hover { color: var(--ink); background: var(--hover); }
.un-tic.on { color: var(--ink); }
.un-tic:disabled { opacity: .35; cursor: default; background: transparent; }
.un-tic-sp { flex: none; width: 32px; }
.un-grip { cursor: grab; touch-action: none; }
.un-ti.drag .un-grip { cursor: grabbing; }
.un-tfoot { padding: 12px 16px; border-top: 1px solid var(--line); }
/* Закреплённые слева столбцы (булавка) — сразу за «Товаром». */
.un-pinl { position: sticky; z-index: 2; background: var(--surface); }
.un-pinl.last { box-shadow: inset -1px 0 0 var(--line); }
.un-row > .un-c.un-pinl.last { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.un-g.un-pinl { z-index: 3; }

/* ================= Закупки → Заказ поставщику (DESIGN.md 8.9 v2.12, лампочка 7.23; задача 019) ================= */
.or-page { max-width: none; padding-top: 24px !important; padding-bottom: 32px !important; }
.or-head .or-new { height: 40px; }
.or-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.or-panel { margin-top: 16px; }
.or-search { width: 280px; }
/* Фильтры-списки 7.4: подпись + значение + chevron */
.or-flt { height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--control); background: var(--surface); color: var(--ink); white-space: nowrap; cursor: pointer; }
.or-flt:hover, .or-flt[aria-expanded="true"] { background: var(--hover); }
.or-flt[aria-expanded="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.or-flt .or-flt-v { font-size: 14px; }
.or-flt:disabled { color: var(--muted); border-style: dashed; border-color: var(--line); cursor: default; background: transparent; }
.or-lb { position: fixed; z-index: 60; max-height: min(420px, 70vh); }
.or-lb .cf-lb-i { min-height: 40px; }
.or-lb-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.or-lb-sep { height: 1px; margin: 4px 0; background: var(--line); }
.or-chk { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--control); color: transparent; }
.or-chk.on, input:checked + .or-chk { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
/* Статус — чип 7.7 (8.9): высота 22, Plex Mono 10, точка 6 */
.or-chip { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); color: var(--ink); font: 400 10px/1 var(--font-mono); letter-spacing: .06em; white-space: nowrap; background: transparent; }
.or-chip > i { flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink); background: var(--ink); }
.or-chip[data-st="draft"] { border-style: dashed; color: var(--muted); }
.or-chip[data-st="draft"] > i { background: transparent; border-color: var(--muted); }
.or-chip[data-st="production"] > i { background: var(--warn); border-color: var(--warn); }
.or-chip[data-st="transit"] { border-color: var(--info); }
.or-chip[data-st="transit"] > i { background: var(--info); border-color: var(--info); }
.or-chip[data-st="arrived"] { border-color: var(--ok); }
.or-chip[data-st="arrived"] > i { background: transparent; border-color: var(--ok); }
.or-chip[data-st="stock"] { border-color: var(--ok); }
.or-chip[data-st="stock"] > i { background: var(--ok); border-color: var(--ok); }
.or-chip[data-st="closed"] { color: var(--muted); }
.or-chip[data-st="closed"] > i { background: transparent; border-color: var(--line); }
.or-chip-btn { height: 32px; padding: 0 10px; gap: 8px; font-size: 11px; cursor: pointer; }
.or-chip-btn > i { width: 7px; height: 7px; }
.or-chip-btn:hover, .or-chip-btn[aria-expanded="true"] { background: var(--hover); }
/* Лампочка оплаты 7.23: знак 14 в ячейке 28 */
.or-lamp { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.or-lamp:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lp { display: block; overflow: visible; }
.lp-none .lp-c { fill: none; stroke: var(--control); }
.lp-partial .lp-c { fill: none; stroke: var(--ink); }
.lp-partial .lp-h { fill: var(--ink); }
.lp-full .lp-c { fill: var(--ok); stroke: var(--ok); }
.lp-full .lp-m { stroke: var(--surface); }
.lp-na .lp-m { stroke: var(--muted); }
.lp-late .lp-c { fill: var(--bad); stroke: var(--bad); }
.lp-late .lp-m { stroke: var(--on-bad); }
.or-lamp.lbl { width: auto; height: auto; gap: 6px; justify-content: flex-start; font: 500 10px/14px var(--font-sans); letter-spacing: .12em; color: var(--muted); }
/* Таблица заказов: шапка 44, строка 56, № закреплён слева (8.9, 7.15) */
.or-scr { position: relative; overflow: auto; border-top: 1px solid var(--ink); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; }
.or-scr::-webkit-scrollbar { width: 8px; height: 8px; }
.or-scr::-webkit-scrollbar-thumb { background: var(--line); }
.or-r { display: grid; grid-template-columns: var(--or-grid); width: max-content; min-width: 100%; }
.or-c { min-width: 0; display: flex; align-items: center; padding: 0 10px; background: var(--surface); }
.or-c.r { justify-content: flex-end; text-align: right; }
.or-c.c { justify-content: center; }
.or-c.or-pin { position: sticky; left: 0; z-index: 2; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 10px 0 16px; box-shadow: inset -1px 0 0 var(--line); }
.or-hd { position: sticky; top: 0; z-index: 4; height: 44px; box-shadow: inset 0 -1px 0 var(--ink); }
.or-hd > .or-c { background: var(--surface); box-shadow: inset 0 -1px 0 var(--ink); }
.or-hd > .or-c.or-pin { z-index: 5; box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--ink); }
.or-thb { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--muted); font: 500 10px/13px var(--font-sans); letter-spacing: .12em; text-align: inherit; cursor: pointer; }
.or-th.on .or-thb, .or-thb:hover { color: var(--ink); }
.or-th.r .or-thb { justify-content: flex-end; }
.or-lh { display: inline-flex; }
.or-lh > span { width: 28px; text-align: center; font-size: 9px; letter-spacing: .04em; }
.or-body { position: relative; }
.or-row { height: 56px; cursor: pointer; }
.or-row > .or-c { box-shadow: inset 0 -1px 0 var(--line); }
.or-row > .or-c.or-pin { box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
.or-row:hover > .or-c { background: var(--hover); }
.or-row.sep > .or-c { box-shadow: inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--line); }
.or-row.sep > .or-c.or-pin { box-shadow: inset -1px 0 0 var(--line), inset 0 1px 0 var(--ink), inset 0 -1px 0 var(--line); }
.or-sk { height: 52px; }
.or-sk > .or-c { box-shadow: inset 0 -1px 0 var(--line); }
.or-sk .skeleton { display: block; width: 70%; height: 12px; }
.or-no { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.or-no:hover { text-decoration-color: var(--ink); }
.or-sub, .or-s11 { font-size: 11px; line-height: 16px; }
.or-s10 { font-size: 10px; line-height: 14px; letter-spacing: .04em; }
.or-s12 { font-size: 12px; line-height: 17px; }
.or-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-sup { font-size: 13px; line-height: 16px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.or-c.mono, .or-c .mono { font-size: 13px; }
.or-c .or-s11, .or-c .or-s10 { font-size: 11px; }
.or-c .or-s10 { font-size: 10px; }
.or-c.or-2 { flex-direction: column; align-items: flex-end; justify-content: center; white-space: nowrap; } /* по вертикали — по центру и с одной строкой */
.or-left { font-size: 12px !important; line-height: 17px; padding-right: 16px; }
.or-left > span { font-size: 12px; }
.or-lamps { padding: 0 6px; }
.b { font-weight: 500; }
.or-page .neg, .or-dlg .neg { color: var(--bad); }
/* План прибытия в ячейке: при наведении — как поле, в работе — рамка ink 2 px + календарь 7.22 */
.or-dtc { padding: 0 6px; }
.or-dt { width: 100%; height: 44px; padding: 0 6px; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.or-dt > svg { flex: none; color: var(--muted); opacity: 0; }
.or-row:hover .or-dt, .or-dt:focus-visible { box-shadow: inset 0 0 0 1px var(--control); background: var(--surface); }
.or-row:hover .or-dt > svg, .or-dt:focus-visible > svg { opacity: 1; }
.or-dt:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ink); }
.or-dtv { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.or-dt.late .or-dtd { color: var(--bad); font-weight: 500; }
.or-late { display: flex; align-items: center; gap: 4px; font-size: 10px !important; letter-spacing: .04em; color: var(--bad); white-space: nowrap; }
.or-dtc.edit .or-dt-in { height: 44px; text-align: right; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.or-closed { position: sticky; left: 0; padding: 10px 16px; font-size: 11px; }
.or-lnk { padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; letter-spacing: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.or-empty { min-height: 300px; }
.or-empty .btn-primary { margin-top: 20px; }
/* Телефон: список карточками */
.or-m { margin-top: 16px; }
.or-mbar { display: flex; gap: 8px; }
.or-msearch { flex: 1; width: auto; }
.or-msearch input { height: 44px; font-size: 16px; }
.or-msearch .un-sic { top: 14px; }
.or-fbtn { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--control); background: var(--surface); color: var(--ink); }
.or-fbtn.on { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.or-cards { margin-top: 12px; border-top: 1px solid var(--ink); }
.or-card-m { display: block; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-soft); border-top: none; color: var(--ink); text-decoration: none; }
.or-cm1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.or-cm-sup { display: block; margin-top: 2px; font-size: 13px; }
.or-cm2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; }
.or-cm2 > span { display: flex; flex-direction: column; }
.or-cm2 > span.r { align-items: flex-end; text-align: right; }
.or-cm2 .label { font-size: 10px; letter-spacing: .16em; }
.or-cm2 .mono { font-size: 13px; margin-top: 2px; }
.or-cm2 .or-s12 { font-size: 12px; margin-top: 0; }
.or-cm3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.or-sk-card { height: 132px; margin-top: 8px; }
.or-fl-h { margin: 16px 0 6px; }
.or-chk-row { min-height: 44px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.or-chk-row > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.or-chk-row > input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.or-rad { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--control); }
input:checked + .or-rad { border: 5px solid var(--inv-bg); }

/* ---------- Карточка заказа (страница) ---------- */
.or-cardp { max-width: none; }
.or-back { height: 28px; padding: 0; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--muted); font: 500 11px var(--font-sans); letter-spacing: .2em; cursor: pointer; }
.or-back:hover { color: var(--ink); }
.or-chead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 8px; }
.or-chead-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.or-chead-r { display: flex; align-items: center; gap: 12px; }
.or-chead-r .btn { height: 40px; }
.or-csub { margin-top: 4px; font-size: 12px; }
.or-g6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.or-fields { margin-top: 20px; }
.or-f { margin-top: 0; gap: 6px; min-width: 0; }
.or-f .cf-in { height: 40px; }
.or-span2 { grid-column: span 2; }
.or-span6 { grid-column: 1 / -1; }
.or-newsup { display: flex; gap: 8px; }
.or-newsup .cf-in { flex: 1; }
.or-newsup .btn { height: 40px; }
.or-ib { width: 40px; height: 40px; color: var(--muted); }
.or-ib:hover { background: var(--hover); color: var(--ink); }
.or-ib:disabled { opacity: .35; background: transparent; }
/* Позиции */
.or-ppanel { margin-top: 20px; padding: 16px clamp(16px, 2vw, 24px) 12px; }
.or-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.or-phead .mono { font-size: 11px; }
.or-pbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.or-pbtns .btn-sm { font-size: 11px; }
.or-tbtn { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font: 500 11px var(--font-sans); letter-spacing: .16em; cursor: pointer; }
.or-tbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.or-tbtn.bad { color: var(--bad); padding: 0; }
.or-pos { display: grid; grid-template-columns: minmax(0, 1fr) 96px 112px 136px 40px; align-items: center; }
.or-phd { height: 36px; margin-top: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.or-pos .r { text-align: right; }
.or-prow { min-height: 48px; border-bottom: 1px solid var(--line); }
.or-prow:hover { background: var(--hover); }
.or-prow > .mono { font-size: 13px; }
.or-pt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.or-thumb { flex: none; width: 24px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--skeleton); color: var(--muted); overflow: hidden; }
.or-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-thumb.zoom { cursor: zoom-in; }
.or-thumb.zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.or-zoom { position: fixed; z-index: 70; width: 168px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); pointer-events: none; }
.or-zimg { height: 224px; display: flex; align-items: center; justify-content: center; background: var(--skeleton); }
.or-zimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-zt { padding: 8px 10px; font-size: 12px; line-height: 16px; }
.or-zt > div:first-child { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.or-zt .mono { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-thumb.nocard { background: transparent; border: 1px dashed var(--line); }
.or-ptn { min-width: 0; display: flex; flex-direction: column; }
.or-pname { font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-part { display: flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; min-width: 0; }
.or-nocard { flex: none; }
.or-nocard { padding: 0 5px; border: 1px dashed var(--line); font-size: 9px; letter-spacing: .06em; white-space: nowrap; }
.or-pin-w { padding-left: 8px; }
.or-pin-in { height: 32px; padding: 0 8px; text-align: right; border-color: var(--line); background: transparent; }
.or-pin-in:hover { border-color: var(--control); }
.or-pin-in.or-ni-t { text-align: left; flex: 1; }
.or-newrow { background: var(--hover); }
.or-ni-b { display: flex; justify-content: flex-end; }
.or-del { width: 32px; height: 32px; justify-self: end; color: var(--muted); }
.or-prow:hover .or-del { color: var(--ink); }
.or-del:hover { background: var(--hover); color: var(--bad) !important; }
.or-tscroll { max-height: min(520px, 60vh); overflow-y: auto; margin-top: 12px; border-top: 1px solid var(--ink); scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain; }
.or-tscroll::-webkit-scrollbar { width: 8px; }
.or-tscroll::-webkit-scrollbar-thumb { background: var(--line); }
.or-tscroll > .or-phd, .or-tscroll > .or-uhd { position: sticky; top: 0; z-index: 2; margin-top: 0; border-top: 0; background: var(--surface); }
.or-ptot { height: 40px; border-top: 1px solid var(--ink); font-size: 13px; font-weight: 500; }
.or-ptot-l { font: 500 13px var(--font-sans); }
.or-ptot-l .or-lnk { font-weight: 500; }
.or-pempty { margin-top: 12px; padding: 24px; border: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
/* Расходы и оплаты: четыре блока 2 × 2 */
.or-sec { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
.or-sec .mono { font-size: 11px; }
.or-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.or-blk { min-width: 0; padding: 14px 16px 10px; background: var(--surface); border: 1px solid var(--line-soft); }
.or-bh { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.or-bt { display: flex; align-items: center; gap: 8px; }
.or-bt .or-lamp { width: 20px; height: 20px; }
.or-btn { font-size: 12px; font-weight: 500; letter-spacing: .22em; }
.or-bc { font-size: 10px; }
.or-sch { font-size: 11px; }
.or-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.or-nums > span { min-width: 0; display: flex; flex-direction: column; }
.or-nums .label { font-size: 10px; letter-spacing: .16em; }
.or-nums .mono { margin-top: 2px; font-size: 14px; white-space: nowrap; }
.or-nums .or-lrub { margin-top: 2px; font-size: 11px; font-weight: 400; } /* остаток ≈ ₽ по курсу ЦБ */
.or-pay { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.or-pd { display: flex; flex-direction: column; }
.or-pd .mono { font-size: 12px; }
.or-tag { align-self: flex-start; margin-top: 2px; padding: 0 4px; border: 1px solid var(--line); font: 400 9px/14px var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.or-tag.plan { border-style: dashed; border-color: var(--ink); }
.or-tag.late { border-color: var(--bad); color: var(--bad); }
.or-pa { min-width: 0; display: flex; flex-direction: column; }
.or-pa .b { font-size: 13px; white-space: nowrap; }
.or-pm { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-pb { display: flex; align-items: center; gap: 4px; }
.or-paid { height: 28px; padding: 0 8px; gap: 6px; font-size: 10px; letter-spacing: .14em; }
.or-pb .or-ib { width: 28px; height: 28px; }
.or-none { padding: 12px 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.or-addpay { height: 36px; padding: 0; display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--accent); font: 500 11px var(--font-sans); letter-spacing: .16em; cursor: pointer; }
.or-addpay:hover { text-decoration: underline; text-underline-offset: 4px; }
.or-addpay:disabled { color: var(--muted); cursor: default; text-decoration: none; }
/* Итог партии */
.or-upanel { margin-top: 24px; padding: 16px clamp(16px, 2vw, 24px) 12px; }
.or-uhead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.or-uh-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.or-example { height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border: 1px dashed var(--ink); font: 400 9px var(--font-mono); letter-spacing: .08em; }
.or-uh-r { text-align: right; }
.or-utot { font-size: 20px; font-weight: 500; }
.or-unote { display: block; font-size: 11px; }
.or-un { display: grid; grid-template-columns: minmax(0, 1fr) 96px 136px 136px 152px; align-items: center; }
.or-un .r { text-align: right; }
.or-uhd { height: 36px; margin-top: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.or-uhd .ink { color: var(--ink); }
.or-urow { min-height: 48px; border-bottom: 1px solid var(--line); font-size: 13px; }
.or-urow .or-pt { font-family: var(--font-sans); }
.or-uname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-uname .sans { font-family: var(--font-sans); }
.or-unote2 { margin-top: 8px; font-size: 11px; }
/* Окна */
.or-dlg .cf-dlg-lead b { font-weight: 500; }
.or-pf { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.or-pf .cf-kind { height: 40px; }
.or-g2f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.or-g2f > .cf-f { margin-top: 18px; }
.or-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.or-amt > .cf-f { margin-top: 18px; }
.or-curs { display: flex; }
.or-curs .cf-kind { width: 48px; height: 38px; }
.or-curs .cf-kind:disabled { color: var(--muted); opacity: .45; cursor: default; }
.or-gnote { display: block; margin-top: 8px; font-size: 12px; }
.or-rate .cf-in.r, .or-amt .cf-in.r, .or-sh .cf-in.r { text-align: right; }
.or-inrub { height: 40px; display: flex; flex-direction: column; justify-content: center; }
.or-inrub .label { font-size: 10px; letter-spacing: .16em; }
.or-inrub .mono { font-size: 15px; }
.or-perr { margin-top: 12px; }
.or-sh { display: grid; grid-template-columns: 96px 172px minmax(0, 1fr) 40px; gap: 12px; align-items: center; margin-top: 8px; }
.or-shh { margin-top: 16px; }
.or-shh .label { font-size: 10px; }
.or-sh > .mono { font-size: 13px; }
.or-shf { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.or-shf .mono { font-size: 11px; }
.or-csearch { width: 100%; margin-top: 16px; }
.or-clist { max-height: min(52vh, 520px); overflow-y: auto; margin-top: 12px; border-top: 1px solid var(--ink); }
.or-crow { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; min-height: 60px; border-bottom: 1px solid var(--line); }
.or-crow.on { background: var(--hover); }
.or-cl { display: grid; grid-template-columns: 32px 40px minmax(0, 1fr); align-items: center; min-width: 0; cursor: pointer; }
.or-cl > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.or-cl > input:focus-visible + .or-chk { outline: 2px solid var(--ink); outline-offset: 2px; }
.or-cph { width: 30px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--skeleton); color: var(--muted); overflow: hidden; }
.or-cph img { width: 100%; height: 100%; object-fit: cover; }
.or-ctn { min-width: 0; display: flex; flex-direction: column; }
.or-ctt { font-size: 13px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-cta { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-cq .cf-in { height: 36px; }
.or-csel { flex: 1; font-size: 11px; }
.or-bdash { border-style: dashed; border-color: var(--ink); }
.or-bdash > span { background: transparent; border: 1px solid var(--ink); }
.or-ir { display: grid; grid-template-columns: 56px minmax(0, 1fr) 84px 96px minmax(0, 1.2fr); align-items: center; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 12px; }
.or-ir .r { text-align: right; padding-right: 12px; }
.or-irh { min-height: 36px; margin-top: 12px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 500 10px var(--font-sans); letter-spacing: .14em; color: var(--muted); }
.or-irt { min-width: 0; display: flex; flex-direction: column; }
.or-irt .sans { font: 400 12px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-is { display: flex; align-items: center; gap: 6px; font: 400 13px var(--font-sans); padding: 6px 0; }
.or-is.ok { color: var(--ok-ink); }
.or-is.neg { color: var(--bad); }
.or-tip { width: 300px; }

@media (max-width: 1279px) {
  .or-g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .or-kpis .cf-num { font-size: 20px; line-height: 24px; }
}
@media (max-width: 1023px) {
  .or-g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .or-kpis { grid-template-columns: minmax(0, 1fr); }
  .or-kpis > div { margin-right: 0 !important; padding-right: 0; box-shadow: none !important; border-bottom: 1px solid var(--inv-line); }
  .or-kpis > div:last-child { border-bottom: 0; }
  .or-g6, .or-g2, .or-g2f { grid-template-columns: minmax(0, 1fr); }
  .or-span2 { grid-column: auto; }
  .or-pos { grid-template-columns: minmax(0, 1fr) 64px 104px 32px; }
  .or-un { grid-template-columns: minmax(0, 1fr) 56px 104px; }
  .or-pp { display: none !important; }
  .or-head .or-new { height: 44px; }
  .or-chead-r { width: 100%; }
  .or-chead-r .btn { flex: 1; height: 44px; justify-content: center; }
  .or-f .cf-in, .or-flt, .or-newsup .btn { height: 44px; font-size: 16px; }
  .or-pay { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .or-ir { grid-template-columns: 40px minmax(0, 1fr) 56px 72px; }
  .or-ir > :last-child { grid-column: 1 / -1; }
  .or-sh { grid-template-columns: 72px minmax(0, 1fr) 40px; }
  .or-sh > .mono { display: none; }
  .or-crow { grid-template-columns: minmax(0, 1fr) 84px; }
  .or-uh-r { text-align: left; }
}

/* ================= Вход, первый вход, приглашение (8.10; задача 020) ================= */
.au-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.au-head { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line-soft); }
.au-head .thm.compact .thm-b { height: 40px; }
.au-main { flex: 1; display: flex; justify-content: center; padding: 72px 32px 48px; }
.au-col { width: 100%; max-width: 440px; }
.au-h1 { margin-top: 10px; font-size: 36px; line-height: 44px; font-weight: 300; outline: none; }
.au-lead { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--muted); }
.au-form.panel { margin-top: 24px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.au-plslot:empty { display: none; }
.au-pl { margin-top: 24px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--bad); background: var(--surface); font-size: 14px; line-height: 20px; }
.au-pl.warn { border-color: var(--warn); }
.au-pl b { font-weight: 500; }
.au-pl-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--bad); }
.au-pl.warn .au-pl-dot { background: var(--warn); }
.au-f { display: flex; flex-direction: column; gap: 8px; }
.au-lbl { display: flex; justify-content: space-between; gap: 12px; }
.au-aside { font: 400 10px/16px var(--font-mono); letter-spacing: .04em; }
.au-inw { position: relative; display: block; }
.au-in { width: 100%; height: 44px; padding: 0 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--control); border-radius: 0; outline: none; font-size: 14px; }
.au-in.mono { font-family: var(--font-mono); }
.au-in.pw { padding-right: 44px; }
.au-in:focus { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.au-in[aria-invalid="true"] { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.au-in[readonly] { background: var(--hover); color: var(--muted); border-color: var(--line); box-shadow: none; }
.au-eye { position: absolute; right: 2px; top: 2px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--muted); }
.au-eye:hover { background: var(--hover); color: var(--ink); }
.au-hint { font-size: 13px; line-height: 18px; color: var(--muted); }
.au-hint.bad { color: var(--bad); }
.au-go { width: 100%; margin-top: 4px; }
.au-forgot { align-self: flex-start; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.au-forgot-box { margin-top: -6px; padding: 12px 14px; background: var(--hover); font-size: 13px; line-height: 19px; }
.au-inv { margin-top: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line-soft); }
.au-av { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--inv-bg); color: var(--inv-ink); font: 500 11px/1 var(--font-mono); }
.au-inv-t { display: block; font-size: 14px; line-height: 20px; }
.au-inv-t b { font-weight: 500; }
.au-inv-m { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.au-dead { margin-top: 24px; min-height: 260px; background: var(--surface); }
.au-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 13px; line-height: 18px; color: var(--muted); }
.au-foot svg { flex: none; }
@media (max-width: 767px) {
  .au-main { padding: 28px 16px 32px; }
  .au-head .logo-word { display: none; }
  .au-h1 { font-size: 30px; line-height: 36px; }
  .au-in { font-size: 16px; }
  .au-form.panel { padding: 20px 16px; }
}

/* ================= Учётная запись в шапке (8.0, v2.13) ================= */
.acct { position: relative; flex: none; }
.acct-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; background: transparent; }
.acct-btn:hover, .acct-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--hover); }
.acct-av { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink); font: 500 11px/1 var(--font-mono); }
.acct-av.own { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.acct-menu { position: absolute; right: 0; top: 52px; z-index: 50; width: 280px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.acct-who { padding: 14px 14px 12px; }
.acct-name { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 500; }
.acct-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { flex: none; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; border: 1px solid var(--ink); font: 400 9px/1 var(--font-mono); letter-spacing: .08em; }
.acct-mail { margin-top: 3px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.acct-i { width: 100%; height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.acct-i:hover, .acct-i:focus-visible { background: var(--hover); }
.acct-i:focus-visible { outline-offset: -2px; }
@media (max-width: 767px) { .acct-menu { position: fixed; left: 0; right: 0; top: 64px; width: auto; } }
.rail-links { display: flex; flex-direction: column; gap: 4px; }
.sb-foot .nav-i + .nav-i { margin-top: 0; }

/* «Только просмотр» (8.11 п. 3) — метка в шапке раздела вместо кнопок изменения */
.ro-note { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; flex: none; border: 1px solid var(--line); font: 400 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.state-block.gate { margin-top: 28px; max-width: 720px; }

/* Сменить пароль */
.pw-lbl { display: flex; justify-content: space-between; gap: 12px; }
.pw-aside { font-size: 10px; letter-spacing: .04em; font-weight: 400; }
.pw-note { margin-top: 16px; }
.pw-err:not([hidden]), .tm-err:not([hidden]) { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--bad); font-size: 14px; line-height: 20px; }
.pw-err .led, .tm-err .led { margin-top: 7px; }
.tm-err b { font-weight: 500; }

/* ================= Команда (8.11) ================= */
.tm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.tm-lead { margin-top: 8px; max-width: 720px; }
.tm-panel { margin-top: 20px; }
.tm-grid { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) 140px minmax(180px, 1fr) 150px 56px; align-items: center; }
.tm-table { margin-top: 12px; }
.tm-th { height: 40px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.tm-th .r, .tm-last { text-align: right; }
.tm-row { min-height: 56px; border-bottom: 1px solid var(--line); }
.tm-row.click { cursor: pointer; }
.tm-row.click:hover { background: var(--hover); }
.tm-name { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 12px; }
.tm-av { flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--ink); font: 500 11px/1 var(--font-mono); }
.tm-av.own { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.tm-nt { min-width: 0; }
.tm-n1 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.tm-nn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-me { flex: none; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; border: 1px solid var(--ink); font: 400 9px/1 var(--font-mono); letter-spacing: .08em; }
.tm-rights { display: block; margin-top: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-email { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.tm-cabs { min-width: 0; padding-right: 12px; }
.tm-cab1 { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-cabn { display: block; font-size: 10px; letter-spacing: .06em; }
.tm-last { font-size: 12px; color: var(--muted); }
.tm-last.info, .tm-m2 .info { color: var(--info); }
.tm-last.warn, .tm-m2 .warn { color: var(--warn-ink); }
.tm-act { display: flex; justify-content: flex-end; }
.tm-ib { width: 40px; height: 40px; color: var(--muted); }
.tm-ib:hover { background: var(--hover); color: var(--ink); }
.tm-row.off .tm-nn, .tm-row.off .tm-email, .tm-row.off .tm-cab1, .tm-mi.off .tm-mn { color: var(--muted); }
.tm-chip { height: 22px; padding: 0 8px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ok); font: 400 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.tm-chip .led { width: 6px; height: 6px; background: var(--ok); }
.tm-chip.inv { border: 1px dashed var(--info); }
.tm-chip.inv .led { background: transparent; border: 1px solid var(--info); }
.tm-chip.off { border-color: var(--line); color: var(--muted); }
.tm-chip.off .led { background: transparent; border: 1px solid var(--muted); }
.tm-phone { display: none; }
.tm-list { margin-top: 12px; border-top: 1px solid var(--ink); }
.tm-mi { display: block; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.tm-m1 { display: flex; align-items: center; gap: 12px; }
.tm-mt { flex: 1; min-width: 0; }
.tm-mn { display: block; font-size: 15px; font-weight: 500; }
.tm-me2 { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-m2 { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 0 48px; font-size: 13px; color: var(--muted); }
.tm-m2 .mono { font-size: 11px; }
@media (max-width: 767px) { .tm-desk { display: none; } .tm-phone { display: block; } }

/* Окна «Команды» (7.6): 720 — люди, 600 — ссылка, 480 — подтверждение */
.modal.cf-dlg.tm-720 { width: 720px; }
.modal.cf-dlg.tm-600 { width: 600px; }
.tm-dlg-t { min-width: 0; }
.tm-dlg-sub { display: block; margin-top: 2px; font-size: 11px; }
.tm-body { padding: 20px 28px 8px; }
.tm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 28px 20px; border-top: 1px solid var(--line); margin-top: 12px; }
.tm-foot-l { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tm-two .cf-f { margin-top: 0; }
.tm-sec { margin-top: 22px; }
.tm-sec2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tm-one { font-size: 10px; }
.tm-cabs-l, .tm-acc-l { margin-top: 8px; border-top: 1px solid var(--ink); }
.tm-cab { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.tm-cab:hover { background: var(--hover); }
.tm-cab:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.tm-ck { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--control); color: transparent; }
.tm-cab.on .tm-ck { background: var(--inv-bg); border-color: var(--inv-bg); color: var(--inv-ink); }
.tm-cabname { flex: 1; font-size: 14px; }
.tm-cabtm { font-size: 10px; letter-spacing: .08em; }
.tm-acc { display: grid; grid-template-columns: minmax(0, 1fr) 372px; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); }
.tm-acc-l { min-width: 0; padding-right: 12px; }
.tm-acc .tm-acc-l { border: 0; margin: 0; }
.tm-grp { display: block; font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--muted); }
.tm-sname { display: block; font-size: 14px; }
.tm-note { display: block; font-size: 10px; }
.tm-segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.tm-seg { height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .14em; }
.tm-seg:first-child { border-left: 0; }
.tm-seg.h { color: var(--muted); }
.tm-seg:hover { background: var(--hover); }
.tm-seg .led { visibility: hidden; background: var(--inv-ink); }
.tm-seg[aria-checked="true"] { background: var(--inv-bg); color: var(--inv-ink); }
.tm-seg[aria-checked="true"] .led { visibility: visible; }
.tm-seg:focus-visible { outline-offset: -2px; }
.tm-relink { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; background: var(--hover); }
.tm-relink > span { flex: 1; min-width: 240px; }
.tm-relink-t { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; }
.tm-relink-b { height: 36px; gap: 8px; white-space: nowrap; }
.tm-tbtn { height: 40px; padding: 0 8px; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.tm-tbtn:hover { text-decoration: underline; text-underline-offset: 4px; }
.tm-tbtn.bad { color: var(--bad); }
.tm-okpl { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--ok); font-size: 14px; line-height: 20px; }
.tm-okpl .led { width: 8px; height: 8px; margin-top: 6px; }
.tm-okpl b { font-weight: 500; }
.tm-lrow { display: flex; gap: 8px; margin-top: 8px; }
.tm-lin.cf-in { flex: 1; min-width: 0; height: 44px; background: var(--hover); border-color: var(--line); }
.tm-copy { gap: 8px; white-space: nowrap; }
.tm-copy.done, .tm-copy.done:hover { background: transparent; color: var(--ink); border-color: var(--ok); }
.tm-lmeta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 11px; }
.tm-lnote { margin-top: 16px; font-size: 13px; line-height: 18px; }
.tm-dlg .cfm-text { margin-top: 0; }
@media (max-width: 767px) {
  .tm-body { padding: 16px 16px 8px; }
  .tm-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .tm-two { grid-template-columns: minmax(0, 1fr); }
  .tm-acc { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 10px 0; }
  .tm-lrow { flex-direction: column; }
}
/* Заказ поставщику при «Просмотр»: значения полей без полей ввода */
.or-rov { display: flex; align-items: center; min-height: 40px; font-size: 14px; border-bottom: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.or-rov.mono { font-size: 13px; }
.or-dt.ro { cursor: default; }
.tm-desk { overflow-x: auto; }
.tm-desk .tm-grid { min-width: 946px; }
/* Копии базы (021): предупреждение владельцу под шапкой — плашка 7.10 warn */
.bk-strip { padding: 8px var(--pad); background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.bk-strip .cf-plaque { margin-top: 0; }