/* Общая сетка для всех вариантов: всё через токены, вариант задаёт только их и флаги
   data-head (шапка блоков), data-badge (значки групп), data-colt (подкраска блоков), data-density. */
:root {
  --bg: #f4f5f7; --surface: #fff; --surface-2: #f8f9fb; --line: #e6e8ec; --line-2: #cfd4dc;
  --ink: #111827; --ink-2: #4b5563; --ink-3: #8b93a1;
  --accent: #2f5bea; --accent-ink: #fff; --accent-soft: #eaf0ff;
  --good: #0f7a4d; --good-bg: #e2f5ec; --warn: #a15c07; --warn-bg: #fdf0d9; --bad: #c0362c; --bad-bg: #fde6e3; --info: #2f5bea; --info-bg: #eaf0ff; --mute-bg: #eef0f3;
  --A: #0f7a4d; --A-bg: #dcf3e7; --B: #a15c07; --B-bg: #fcefd6; --C: #5b6473; --C-bg: #eceef2;
  --X: #2f5bea; --X-bg: #e6edff; --Y: #6b3fd4; --Y-bg: #efe8ff; --Z: #c02670; --Z-bg: #fde5f0;
  --seas: #e07b12;
  --side-bg: #fff; --side-ink: #4b5563; --side-ink-2: #9aa1ad; --side-on-bg: #eef2ff; --side-on-ink: #1e3a8a; --side-line: #e6e8ec;
  --tb-bg: #fff; --tb-ink: #111827; --tb-ink-2: #6b7280; --tb-line: #e6e8ec; --tb-field: #f3f4f6;
  --th-bg: #f8f9fb; --th-ink: #4b5563; --th-ink-2: #9aa1ad; --band-bg: #fff; --band-ink: #374151;
  --g-card: #8b93a1; --g-prod: #8b93a1; --g-grp: #6b3fd4; --g-win: #6b3fd4; --g-money: #0f7a4d; --g-dem: #2f5bea; --g-stock: #0e7f86; --g-dec: #c0362c;
  --font: "Golos Text", system-ui, sans-serif; --font-num: var(--font); --font-display: var(--font);
  --r: 12px; --r-s: 7px; --row-h: 56px; --fs: 13px; --hd-h: 54px;
  --shadow: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.04);
  --shadow-lg: 0 24px 60px -16px rgba(17,24,39,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg.lucide { width: 16px; height: 16px; flex: none; display: block; }
.app { display: flex; min-height: 100vh; }
.app.nav-top { flex-direction: column; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ───── боковая навигация ───── */
.side { width: 248px; flex: none; background: var(--side-bg); border-right: 1px solid var(--side-line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side.rail { width: 68px; align-items: center; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.side.rail .brand { padding: 16px 0 12px; }
.mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex: none; }
.mark svg.lucide { width: 18px; height: 18px; }
.brand-t b { display: block; font: 700 15px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--side-ink-strong, var(--ink)); }
.brand-t small { display: block; font-size: 12px; color: var(--side-ink-2); }
.snav { flex: 1; overflow-y: auto; padding: 4px 12px; display: flex; flex-direction: column; gap: 14px; }
.side.rail .snav { padding: 4px 0; align-items: center; }
.snav-g { display: flex; flex-direction: column; gap: 2px; }
.snav-h { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--side-ink-2); padding: 0 10px 6px; }
.snav-i { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--side-ink); font-weight: 500; font-size: 13.5px; cursor: pointer; position: relative; }
.snav-i:hover { background: color-mix(in srgb, var(--side-on-bg) 60%, transparent); }
.snav-i.on { background: var(--side-on-bg); color: var(--side-on-ink); font-weight: 600; }
.snav-i span { flex: 1; white-space: nowrap; }
.snav-i em { font-style: normal; font-size: 11px; font-weight: 700; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 9px; display: grid; place-items: center; background: var(--mute-bg); color: var(--side-ink); }
.snav-g:nth-child(2) .snav-i:nth-of-type(2) em { background: var(--bad); color: #fff; }
.side.rail .snav-i { width: 44px; height: 40px; justify-content: center; padding: 0; }
.side.rail .snav-i svg.lucide { width: 19px; height: 19px; }
.snav-i em.dot { position: absolute; top: 7px; right: 8px; min-width: 7px; width: 7px; height: 7px; padding: 0; background: var(--bad); }
.snav-sub { display: flex; flex-direction: column; margin: 2px 0 4px 21px; padding-left: 14px; border-left: 1px solid var(--side-line); }
.snav-sub a { height: 30px; display: flex; align-items: center; padding: 0 10px; border-radius: 7px; font-size: 13px; color: var(--side-ink); cursor: pointer; }
.snav-sub a.on { color: var(--side-on-ink); font-weight: 600; background: var(--side-on-bg); }
.snav-foot { padding: 10px 12px 16px; border-top: 1px solid var(--side-line); display: flex; flex-direction: column; gap: 2px; }
.side.rail .snav-foot { padding: 10px 0 16px; align-items: center; }

/* ───── верхняя панель ───── */
.tb { background: var(--tb-bg); color: var(--tb-ink); border-bottom: 1px solid var(--tb-line); position: sticky; top: 0; z-index: 30; }
.tb-in { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; max-width: 2200px; margin: 0 auto; }
.nav-top .tb .brand { padding: 0; }
.nav-top .brand-t b { color: var(--tb-ink); }
.nav-top .brand-t small { color: var(--tb-ink-2); }
.gs { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 10px; background: var(--tb-field); color: var(--tb-ink-2); width: min(460px, 40vw); }
.gs input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--tb-ink); min-width: 0; }
.gs input::placeholder { color: var(--tb-ink-2); }
.gs kbd { font: 600 11px var(--font); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--tb-line); color: var(--tb-ink-2); }
.tb-sp { flex: 1; }
.sync { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--good-bg); color: var(--good); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sync svg.lucide { width: 15px; height: 15px; }
.ib { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--tb-line); background: transparent; color: var(--tb-ink-2); display: grid; place-items: center; cursor: pointer; position: relative; flex: none; }
.ib:hover { color: var(--tb-ink); background: var(--tb-field); }
.ib em { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--tb-bg); }
.me { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 13px; flex: none; }
.me-t b { display: block; font-size: 13px; line-height: 1.2; }
.me-t small { display: block; font-size: 12px; color: var(--tb-ink-2); }
.tnav { border-top: 1px solid var(--tb-line); }
.tnav .tb-in { height: 46px; gap: 4px; }
.tnav a { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; color: var(--tb-ink-2); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; }
.tnav a:hover { color: var(--tb-ink); }
.tnav a.on { color: var(--tb-ink); border-bottom-color: var(--accent); font-weight: 600; }
.tnav a em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 9px; background: var(--bad); color: #fff; }
.tnav .chev { width: 14px; height: 14px; opacity: .6; }

/* ───── страница ───── */
.pg { flex: 1; min-width: 0; }
.pg-in { padding: 22px 20px 40px; max-width: 2200px; margin: 0 auto; }   /* шире под таблицы; на широких мониторах дальше не растягиваем */
.ph { display: flex; align-items: flex-end; gap: 20px; }
.ph-l { flex: 1; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.crumbs svg.lucide { width: 13px; height: 13px; }
.ph h1 { margin: 0; font: 700 30px/1.15 var(--font-display); letter-spacing: -.025em; }
.ph-m { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 0; color: var(--ink-2); font-size: 13px; }
.ph-m span { display: inline-flex; align-items: center; gap: 7px; }
.ph-m svg.lucide { width: 15px; height: 15px; color: var(--ink-3); }
.ph-r { display: flex; gap: 10px; }
.bt { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); }
.bt:hover { border-color: var(--ink-3); }
.bt-p { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bt-p:hover { filter: brightness(1.06); border-color: var(--accent); }
.bt-s { height: 34px; padding: 0 12px; font-size: 13px; box-shadow: none; }
.tabs { display: flex; gap: 2px; margin: 22px 0 18px; border-bottom: 1px solid var(--line); }
.tabs a { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; color: var(--ink-2); font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--ink); font-weight: 650; border-bottom-color: var(--ink); }
.tabs a em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--mute-bg); padding: 1px 8px; border-radius: 9px; }
.cab { width: 10px; height: 10px; border-radius: 3px; display: block; }
.cab-sm { background: #3b6fe0; } .cab-sim { background: #db3b8b; }

/* ───── сводка ───── */
.kps { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.kp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); min-width: 0; }
.kp-f { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.kp-f:hover { border-color: var(--line-2); }
.kp-f.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.kp-l { font-size: 12.5px; color: var(--ink-2); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.kp-v { font: 700 24px/1.15 var(--font-num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kp-s { font-size: 12px; color: var(--ink-3); }
.dist { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; margin: 4px 0 2px; }
.dist i { display: block; } .d-A { background: var(--A); } .d-B { background: var(--B); } .d-C { background: var(--C); opacity: .55; }

/* ───── таблица ───── */
.grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.tools { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ts { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); width: 300px; color: var(--ink-3); background: var(--surface); }
.ts:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ts input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; }
.fl { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: 13px; cursor: pointer; }
.fl b { font-weight: 600; color: var(--ink); }
.fl svg.lucide { width: 15px; height: 15px; color: var(--ink-3); }
.fl .chev { width: 14px; height: 14px; }
.tl-sp { flex: 1; }
.tl-n { font-size: 12.5px; color: var(--ink-3); }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--mute-bg); gap: 2px; }
.seg button { width: 30px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.tw { overflow: auto; max-height: calc(100vh - 140px); }
table.t { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; font-size: var(--fs); font-variant-numeric: tabular-nums; }
.t th, .t td { padding: 0 12px; vertical-align: middle; border-bottom: 1px solid var(--line); overflow: hidden; }
.t td { height: var(--row-h); white-space: nowrap; background: var(--surface); }
.t .a-r { text-align: right; } .t .a-c { text-align: center; }
.t thead th { position: sticky; z-index: 3; background: var(--th-bg); }
.t .th-b th { top: 0; height: 40px; padding: 0 8px; background: var(--band-bg); color: var(--band-ink); text-align: left; border-bottom: 1px solid var(--line); }
.t .th-c th { top: 40px; height: var(--hd-h); color: var(--th-ink); text-align: left; vertical-align: bottom; padding-bottom: 9px; border-bottom: 1px solid var(--line-2); cursor: default; }
.t .th-c th.a-r { text-align: right; } .t .th-c th.a-c { text-align: center; }
.t .th-c th[data-sort] { cursor: pointer; }
.t .th-c th[data-sort]:hover { color: var(--ink); }
.ch { display: inline-flex; flex-direction: column; gap: 2px; white-space: normal; line-height: 1.2; vertical-align: bottom; }
.th-c th.a-r .ch { align-items: flex-end; } .th-c th.a-c .ch { align-items: center; }
.ch-n { font-size: 12px; font-weight: 600; }
.ch-u { font-size: 11px; font-weight: 500; color: var(--th-ink-2); }
.so { display: inline-block; vertical-align: bottom; margin-left: 4px; opacity: .35; }
.so svg.lucide { width: 12px; height: 12px; }
.th-c th.sorted { color: var(--accent); } .th-c th.sorted .so { opacity: 1; }
.bh { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; font: 650 12px/1 var(--font); color: inherit; cursor: pointer; white-space: nowrap; letter-spacing: .01em; }
.bh small { font-size: 11px; font-weight: 600; opacity: .55; }
.bh .bh-x { width: 13px; height: 13px; opacity: 0; transition: opacity .15s; }
.bh:hover .bh-x { opacity: .6; }
.bh:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.bh-stub { padding: 0; width: 28px; justify-content: center; }
.stub-n { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; color: var(--th-ink-2); }
.t td.stub { background: var(--surface-2); }
.t .gst { border-left: 1px solid var(--line-2); }
.t tbody tr { cursor: pointer; }
.t tbody tr:hover td { background: var(--row-hover, color-mix(in srgb, var(--accent) 5%, var(--surface))); }
.t tbody tr.sel td { background: var(--accent-soft); }
.t .fz { position: sticky; z-index: 2; }
.t thead .fz { z-index: 5; }
.t .fz-last { box-shadow: inset -1px 0 0 var(--line-2), 6px 0 8px -6px rgba(0,0,0,.12); }
.t tr.tot td { height: 42px; background: var(--surface-2); font-weight: 700; border-bottom: 1px solid var(--line-2); cursor: default; }
.t tr.tot td:nth-child(2) { color: var(--ink-2); font-weight: 600; }
.t tr.tot td:nth-child(3) { color: var(--ink-3); font-weight: 500; }

/* подкраска блоков по группам */
[data-colt="on"] .t td.bi-odd { background: var(--surface-2); }
[data-colt="on"] .t tr.tot td.bi-odd { background: color-mix(in srgb, var(--surface-2) 70%, var(--line)); }

/* шапки блоков: стили */
.b-card { --gc: var(--g-card); } .b-prod { --gc: var(--g-prod); } .b-grp { --gc: var(--g-grp); } .b-win { --gc: var(--g-win); }
.b-money { --gc: var(--g-money); } .b-dem { --gc: var(--g-dem); } .b-stock { --gc: var(--g-stock); } .b-dec { --gc: var(--g-dec); }
[data-head="line"] .t .th-b th { box-shadow: inset 0 3px 0 var(--gc); color: var(--gc); }
[data-head="line"] .t .th-b .bh { color: var(--gc); }
[data-head="tint"] .t .th-b th { background: color-mix(in srgb, var(--gc) 13%, var(--surface)); color: color-mix(in srgb, var(--gc) 80%, var(--ink)); }
[data-head="tint"] .t .th-c th { background: color-mix(in srgb, var(--gc) 6%, var(--surface)); }
[data-head="solid"] .t .th-b th { background: var(--band-bg); color: var(--band-ink); box-shadow: inset 0 -2px 0 var(--gc); border-bottom-color: transparent; }
[data-head="solid"] .t .th-b .bh svg.lucide:first-child { color: var(--gc); }
[data-head="solid"] .t .th-c th { background: var(--th-bg); color: var(--th-ink); border-bottom-color: transparent; }
[data-head="cap"] .t .th-b .bh span { text-transform: uppercase; letter-spacing: .09em; font-size: 10.5px; }
[data-head="cap"] .t .th-b .bh svg.lucide:first-child { color: var(--gc); }
[data-head="cap"] .t .th-b th.gst, [data-head="cap"] .t .th-b th:first-child { box-shadow: inset 2px 0 0 var(--gc); }

/* плотность */
[data-density="compact"] { --row-h: 42px; --fs: 12.5px; }
[data-density="compact"] img.ph { width: 26px; height: 34px; }

/* ───── ячейки ───── */
img.ph { width: 36px; height: 46px; border-radius: 6px; object-fit: cover; display: block; margin: 0 auto; background: var(--mute-bg); box-shadow: 0 0 0 1px var(--line); }
.code { font-family: var(--font-num); color: var(--ink-2); font-size: .96em; }
.nm { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; }
.nm svg.lucide { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
tr:hover .nm svg.lucide { opacity: .7; }
.vend { font-family: var(--font-num); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: block; }
.subj { font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: block; }
.brand { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; display: block; }
.mute { color: var(--ink-3); }
.nil { color: var(--ink-3); font-size: .95em; }
.strong { font-weight: 700; }
.neg { color: var(--bad); font-weight: 600; }
.zero { display: inline-flex; min-width: 28px; justify-content: center; padding: 2px 8px; border-radius: 6px; background: var(--bad-bg); color: var(--bad); font-weight: 700; }

/* значки групп */
.gr { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 7px; font: 700 12px/1 var(--font-num); letter-spacing: 0; }
.gr-A { background: var(--A-bg); color: var(--A); } .gr-B { background: var(--B-bg); color: var(--B); } .gr-C { background: var(--C-bg); color: var(--C); }
.gr-X { background: var(--X-bg); color: var(--X); } .gr-Y { background: var(--Y-bg); color: var(--Y); } .gr-Z { background: var(--Z-bg); color: var(--Z); }
.gr-N { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.gr-main { width: 30px; height: 26px; font-size: 13px; }
.gr-xyz { border-radius: 50%; width: 25px; height: 25px; }
.gr-kpi { width: 20px; height: 20px; font-size: 11px; border-radius: 6px; }
[data-badge="solid"] .gr-A { background: var(--A); color: #fff; } [data-badge="solid"] .gr-B { background: var(--B); color: #fff; } [data-badge="solid"] .gr-C { background: var(--C); color: #fff; }
[data-badge="solid"] .gr-X { background: var(--X); color: #fff; } [data-badge="solid"] .gr-Y { background: var(--Y); color: #fff; } [data-badge="solid"] .gr-Z { background: var(--Z); color: #fff; }
[data-badge="outline"] .gr:not(.gr-N) { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
[data-badge="outline"] .gr-main.gr-A { background: var(--A-bg); } [data-badge="outline"] .gr-main.gr-B { background: var(--B-bg); }
[data-badge="dot"] .gr:not(.gr-N) { background: transparent; width: auto; padding: 0 2px; gap: 6px; display: inline-flex; color: var(--ink); }
[data-badge="dot"] .gr:not(.gr-N)::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gcol); }
[data-badge="dot"] .gr-A { --gcol: var(--A); } [data-badge="dot"] .gr-B { --gcol: var(--B); } [data-badge="dot"] .gr-C { --gcol: var(--C); }
[data-badge="dot"] .gr-X { --gcol: var(--X); } [data-badge="dot"] .gr-Y { --gcol: var(--Y); } [data-badge="dot"] .gr-Z { --gcol: var(--Z); }
[data-badge="dot"] .gr-xyz::before { border-radius: 2px; }

/* рейтинг */
.rt { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: .95em; }
.rt svg.lucide { width: 13px; height: 13px; fill: currentColor; }
.rt-good { background: var(--good-bg); color: var(--good); } .rt-ok { background: var(--mute-bg); color: var(--ink); } .rt-ok svg.lucide { color: #e3a008; fill: #e3a008; }
.rt-warn { background: var(--warn-bg); color: var(--warn); } .rt-bad { background: var(--bad-bg); color: var(--bad); }

.mv { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mv svg.lucide { width: 15px; height: 15px; }
.mv small { font: 600 11px var(--font-num); padding: 1px 6px; border-radius: 5px; background: var(--mute-bg); color: var(--ink-2); }
.mv-up { color: var(--good); } .mv-down { color: var(--bad); } .mv-flat { color: var(--ink-3); font-weight: 500; }
.hard { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--A); }
.hard svg.lucide { width: 14px; height: 14px; }
.pd { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; cursor: help; }
.pd b { font-weight: 700; border-bottom: 1px dotted var(--ink-3); }
.pd svg.lucide { width: 13px; height: 13px; } .pd-up { color: var(--good); } .pd-down { color: var(--bad); }
.sh { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sh-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--mute-bg); overflow: hidden; }
.sh-bar i { display: block; height: 100%; background: var(--g-money); border-radius: 2px; }
.pill { display: inline-flex; min-width: 46px; justify-content: center; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.pill-good { background: var(--good-bg); color: var(--good); } .pill-ok { background: var(--mute-bg); color: var(--ink); } .pill-warn { background: var(--warn-bg); color: var(--warn); } .pill-bad { background: var(--bad-bg); color: var(--bad); }
.dy { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; justify-content: flex-end; }
.dy svg.lucide { width: 14px; height: 14px; }
.dy-up { color: var(--good); } .dy-down { color: var(--bad); } .dy-flat { color: var(--ink-3); font-weight: 500; }
.mo { display: inline-flex; align-items: center; gap: 2px; }
.mo i { width: 4px; height: 12px; border-radius: 1.5px; background: var(--line); }
.mo i.on { background: var(--g-dem); opacity: .75; }
.mo b { margin-left: 7px; font-weight: 700; min-width: 16px; text-align: right; }
.se { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; width: 100%; }
.se-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--mute-bg); color: var(--ink-3); }
.se-ic svg.lucide { width: 15px; height: 15px; }
.se-now .se-ic, .se-soon .se-ic { background: color-mix(in srgb, var(--seas) 15%, var(--surface)); color: var(--seas); }
/* времена года: осень — оранжевая, зима — голубая снежинка (кружится), весна — зелёный цветок (покачивается), лето — жёлтое солнце */
:root { --sz-autumn: #e8792b; --sz-winter: #2f9be8; --sz-spring: #2fa85a; --sz-summer: #e0a516; }
.sz-autumn { --sz: var(--sz-autumn); } .sz-winter { --sz: var(--sz-winter); } .sz-spring { --sz: var(--sz-spring); } .sz-summer { --sz: var(--sz-summer); }
.se[class*="sz-"] .se-ic { background: color-mix(in srgb, var(--sz) 14%, var(--surface)); color: var(--sz); }
.se-past[class*="sz-"] .se-ic, .se-far[class*="sz-"] .se-ic { background: color-mix(in srgb, var(--sz) 8%, var(--surface)); color: color-mix(in srgb, var(--sz) 70%, var(--ink-3)); }
.sz-winter .se-ic svg.lucide { animation: sz-snow 6s linear infinite; }
.sz-spring .se-ic svg.lucide { animation: sz-bloom 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
/* осень — листок покачивается, лето — солнце медленно вращается (как снежинка и цветок) */
.sz-autumn .se-ic svg.lucide { animation: sz-leaf 3.2s ease-in-out infinite; transform-origin: 20% 80%; }
.sz-summer .se-ic svg.lucide { animation: sz-sun 9s linear infinite; }
@keyframes sz-leaf { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(10deg) translateY(1px); } }
@keyframes sz-sun { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes sz-snow { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes sz-bloom { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .se[class*="sz-"] .se-ic svg.lucide, .t th[class*="b-sz"] .bh svg.lucide:first-child, .lg-sz svg.lucide { animation: none !important; } }
.se-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.se-t b { font-size: 12.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.se-t small { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.se-now .se-t b, .se-soon .se-t b { color: var(--seas); }
.se-none .se-t b { color: var(--ink-2); font-weight: 500; }
.sp { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 22px; width: 62px; }
.sp i { flex: 1; border-radius: 1.5px; background: var(--line-2); min-height: 2px; }
.sp i.pk { background: var(--seas); }
.sp i.last { box-shadow: 0 0 0 1px var(--ink-3); }
.av { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.av-bar { width: 52px; height: 6px; border-radius: 3px; background: var(--mute-bg); overflow: hidden; }
.av-bar i { display: block; height: 100%; border-radius: 3px; }
.av b { min-width: 38px; text-align: right; font-weight: 700; }
.av-good i { background: var(--good); } .av-good b { color: var(--good); }
.av-warn i { background: var(--warn); } .av-warn b { color: var(--warn); }
.av-bad i { background: var(--bad); } .av-bad b { color: var(--bad); }
.ls-md { color: var(--warn); font-weight: 600; } .ls-hi { color: var(--bad); font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; max-height: 48px; overflow: hidden; }
.tg { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tg svg.lucide { width: 12px; height: 12px; }
.tg-bad { background: var(--bad-bg); color: var(--bad); } .tg-warn { background: var(--warn-bg); color: var(--warn); } .tg-info { background: var(--info-bg); color: var(--info); }

/* ───── карточка товара ───── */
.ov { position: fixed; inset: 0; background: rgba(10,14,22,.38); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.ov.on { opacity: 1; pointer-events: auto; }
.dr { position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 100vw; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(102%); transition: transform .24s cubic-bezier(.2,.8,.2,1); z-index: 61; display: flex; flex-direction: column; color: var(--ink); }
.dr.on { transform: none; }
.dr-h { display: grid; grid-template-columns: 104px 1fr 36px; gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.dr-h img { width: 104px; height: 138px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.dr-b { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.dr-t h2 { margin: 2px 0 10px; font: 700 22px/1.2 var(--font-display); letter-spacing: -.02em; }
.dr-g { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-ids { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font: 12.5px var(--font-num); color: var(--ink-2); }
.dr-bd { flex: 1; overflow: auto; padding: 20px 24px 32px; display: flex; flex-direction: column; gap: 22px; }
.dr-s h4 { margin: 0 0 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dr-dec { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.kv { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kv-i { padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.kv-i:nth-child(3n) { border-right: 0; }
.kv-i span { font-size: 12px; color: var(--ink-3); }
.kv-i b { font-size: 15px; font-variant-numeric: tabular-nums; }
.kv-i .av, .kv-i .pd, .kv-i .dy { justify-content: flex-start; }
.dbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 120px; align-items: end; margin-bottom: 14px; }
.db { display: flex; flex-direction: column; align-items: stretch; height: 100%; justify-content: flex-end; gap: 6px; }
.db i { display: block; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--g-dem) 70%, var(--surface)); }
.db i.pk { background: var(--seas); }
.db small { text-align: center; font-size: 11px; color: var(--ink-3); }
.dr-s .se { max-width: 360px; }

/* подпись блока остаётся видна при прокрутке вправо — прилипает к краю закреплённых колонок */
.t .th-b th { overflow: visible; }
.t .th-b th:not(.fz) .bh { position: sticky; left: calc(var(--fzw, 288px) + 8px); }


/* ═════ Утверждённый стиль — вариант 11 ═════ */
img.ph { height: calc(var(--row-h) - 12px); width: calc((var(--row-h) - 12px) * .78); }
:root {
  --bg: #f6f8fa; --surface: #fff; --surface-2: #f9fafb; --line: #e3e8ee; --line-2: #c9d1da;
  --ink: #0a2540; --ink-2: #425466; --ink-3: #7a8796;
  --accent: #3a5bff; --accent-ink: #fff; --accent-soft: #ebefff;
  --good: #0e8a5f; --good-bg: #e0f4ec; --warn: #b4610b; --warn-bg: #fdf0db; --bad: #d63b3b; --bad-bg: #fde8e8; --info: #3a5bff; --info-bg: #ebefff; --mute-bg: #eef1f5;
  --A: #0e8a5f; --A-bg: #dcf2e8; --B: #b4610b; --B-bg: #fcedd5; --C: #6b7a8c; --C-bg: #edf0f4;
  --X: #3a5bff; --X-bg: #e6ebff; --Y: #7a4ff0; --Y-bg: #f0eaff; --Z: #d0347e; --Z-bg: #fde6f1;
  --tb-bg: #fff; --tb-line: #e3e8ee; --tb-field: #f1f4f8; --tb-ink: #0a2540; --tb-ink-2: #6b7a8c;
  --th-bg: #fff; --th-ink: #425466; --th-ink-2: #8b97a6; --band-bg: #fff; --band-ink: #0a2540;
  --g-card: #8b97a6; --g-prod: #8b97a6; --g-grp: #7a4ff0; --g-win: #7a4ff0; --g-money: #0e8a5f; --g-dem: #3a5bff; --g-stock: #0b8a9c; --g-dec: #d63b3b;
  --font: "Golos Text", system-ui, sans-serif; --font-num: "Roboto Mono", ui-monospace, monospace; --font-display: "Golos Text", system-ui, sans-serif;
  --r: 12px; --row-h: 52px; --fs: 13px; --shadow: 0 1px 2px rgba(10,37,64,.06), 0 2px 6px rgba(10,37,64,.04);
}
.t .th-b th { box-shadow: none; }
.t .th-b .bh span { position: relative; }
.t .th-b .bh span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--gc); }
.t .th-b .bh svg.lucide:first-child { color: var(--gc); }
.gr { border-radius: 999px; }
.gr-main { width: 32px; }
.t td .code, .t td .vend { font-size: 12px; }
:root {
  --side-bg: #fff; --side-ink: #425466; --side-ink-2: #8b97a6; --side-on-bg: #ebefff; --side-on-ink: #2a45d6; --side-line: #e3e8ee;
}
.side .mark { background: var(--accent); }
.snav-i.on svg.lucide { color: var(--accent); }

/* ═════ Разделы сервиса в утверждённом стиле ═════ */
.snav-i { text-decoration: none; }
.snav-sub a { text-decoration: none; }
.pg-in { padding-bottom: 60px; }
.ph-m:empty { display: none; }
.tabs a { text-decoration: none; }
.tabs .cab-all { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #3b6fe0 50%, #db3b8b 50%); display: block; }
.kps.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kps.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kps.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kps.k8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.kps.k7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kp-v .u { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.kp-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.kp-ic svg.lucide { width: 15px; height: 15px; }
.delta { display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; margin-top: 4px; }
.delta svg.lucide { width: 13px; height: 13px; }
.delta-up { background: var(--good-bg); color: var(--good); } .delta-down { background: var(--bad-bg); color: var(--bad); }
.bt-g { box-shadow: none; }
.fl.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fl.on b, .fl.on svg.lucide { color: var(--accent); }
.fl select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fl { position: relative; }
.reset { font-size: 13px; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0 4px; }
.pager { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.pager .sp { flex: 1; }
.pager button { min-width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pager button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager button[disabled] { opacity: .4; pointer-events: none; }
.t tr.grow td { background: var(--surface-2); height: 44px; font-weight: 650; color: var(--ink-2); cursor: default; }
.t tr.grow:hover td { background: var(--surface-2); }
.t td .xs { font-size: 11.5px; color: var(--ink-3); display: block; margin-top: 2px; font-weight: 500; }
.q { display: inline-flex; min-width: 46px; justify-content: center; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.q-ok { background: var(--good-bg); color: var(--good); } .q-low { background: var(--warn-bg); color: var(--warn); }
.q-no { background: var(--bad); color: #fff; } .q-na { background: var(--mute-bg); color: var(--ink-3); font-weight: 600; }
.q-ship { background: var(--accent-soft); color: var(--accent); }
.dot-n { color: var(--line-2); }
.cabl { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.cabl .cab { width: 9px; height: 9px; }
.whs { display: flex; flex-wrap: wrap; gap: 4px; white-space: normal; }
.whs span { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.card-h .sub { font-size: 12.5px; color: var(--ink-3); }
.card-h .sp { flex: 1; }
.card-h a { color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }
.card-b { padding: 16px 20px 20px; }
.hico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.hico svg.lucide { width: 16px; height: 16px; }
.cols { display: grid; gap: 18px; margin-top: 18px; }
.c-73 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.c-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1200px) { .c-73, .c-11 { grid-template-columns: 1fr; } .kps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.night { display: grid; grid-template-columns: repeat(4, 1fr); }
.night > div { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-left: 1px solid var(--line); }
.night > div:first-child { border-left: 0; }
.okc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--good-bg); color: var(--good); flex: none; }
.night small { display: block; font-size: 12px; color: var(--ink-3); }
.night b { font-weight: 650; }
.list .row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 16px; gap: 14px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--line); cursor: pointer; }
.list .row:first-child { border-top: 0; }
.list .row:hover { background: var(--surface-2); }
.list .row > svg.lucide:last-child { color: var(--ink-3); }
.list .ri { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.list .ri svg.lucide { width: 18px; height: 18px; }
.list .rt1 { font-weight: 600; }
.list .rt2 { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .rn { text-align: right; }
.list .rn b { display: block; font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.list .rn small { font-size: 12px; color: var(--ink-3); }
.list .row img.ph { width: 40px; height: 52px; margin: 0; }
.list .row.prod { grid-template-columns: 40px minmax(0, 1fr) auto 16px; }
.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stack i { display: block; }
table.mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini th { font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.mini td { text-align: right; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.mini th:first-child, .mini td:first-child { text-align: left; padding-left: 0; }
.mini tr:last-child td { border-bottom: 0; }
.mini tr.click { cursor: pointer; } .mini tr.click:hover td { background: var(--surface-2); }
.mini .av, .mini .sh { justify-content: flex-start; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; color: var(--ink); }
.note svg.lucide { color: var(--accent); margin-top: 1px; }
.covr { padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.covr:last-child { border-bottom: 0; }
.covr-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.covr-h b.p { margin-left: auto; font-size: 22px; letter-spacing: -.02em; }
.covr-bar { height: 8px; border-radius: 4px; background: var(--mute-bg); overflow: hidden; }
.covr-bar i { display: block; height: 100%; border-radius: 4px; }
.covr small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 7px; }

.cal { display: grid; grid-template-columns: 340px repeat(12, minmax(0, 1fr)); }
.cal > div { border-bottom: 1px solid var(--line); }
.cal .hd { font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: center; padding: 12px 0; background: var(--surface-2); }
.cal .hd.now { color: var(--accent); }
.cal .cr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 20px; cursor: pointer; }
.cal .cr img.ph { width: 34px; height: 44px; margin: 0; }
.cal .cr b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal .cr small { font-size: 12px; color: var(--ink-3); }
.cal .cr:hover b { color: var(--accent); }
.cal .cl { display: grid; place-items: center; padding: 6px 3px; border-left: 1px solid var(--line); }
.cal .cl i { display: block; width: 100%; height: 34px; border-radius: 6px; }
.cal .cl.now { background: var(--accent-soft); }

.tl .row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.tl .row:first-child { border-top: 0; }
.tl .tm { font-weight: 700; font-variant-numeric: tabular-nums; }
.tl small { display: block; font-size: 12.5px; color: var(--ink-3); }
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.st svg.lucide { width: 13px; height: 13px; }
.st-ok { background: var(--good-bg); color: var(--good); } .st-warn { background: var(--warn-bg); color: var(--warn); } .st-mute { background: var(--mute-bg); color: var(--ink-2); } .st-bad { background: var(--bad-bg); color: var(--bad); }
.log .row { display: grid; grid-template-columns: 150px 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.log .row:first-child { border-top: 0; }

.set { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px; align-items: start; }
.stabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.stabs a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 9px; color: var(--ink-2); font-weight: 500; cursor: pointer; }
.stabs a:hover { background: var(--surface); color: var(--ink); }
.stabs a.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); border: 1px solid var(--line); }
.stabs a.on svg.lucide { color: var(--accent); }
.cabc { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--line); }
.cabc:first-child { border-top: 0; }
.lg { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; }
.cabc-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cabc-t b { font-size: 15px; }
.cabc-m { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.cabc-s { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cabc-a { display: flex; gap: 8px; }
.key { font-family: var(--font-num); font-size: 12px; background: var(--mute-bg); padding: 2px 8px; border-radius: 6px; color: var(--ink-2); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr); }
.form > div { display: flex; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.form .fh { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.form .fg { grid-column: 1 / -1; font-weight: 700; background: var(--surface-2); color: var(--ink); }
.form .fc { font-size: 12.5px; color: var(--ink-3); }
.inp { width: 100%; height: 38px; border-radius: 9px; border: 1px solid var(--line-2); padding: 0 12px; background: var(--surface); outline: 0; }
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp.r { text-align: right; font-weight: 650; font-family: var(--font-num); }
.fld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.fld small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.fgrid { display: grid; gap: 14px; }
.fg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fg6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.acc { width: 100%; border-collapse: collapse; }
.acc th, .acc td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.acc th:first-child, .acc td:first-child { text-align: left; }
.acc th { font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); }
.lvl { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--mute-bg); gap: 2px; }
.lvl span { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.lvl span.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.usr { display: grid; grid-template-columns: 40px minmax(0, 1fr) 200px 36px; gap: 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); }
.usr:first-child { border-top: 0; }
.usr small { display: block; font-size: 12.5px; color: var(--ink-3); }
/* Сотрудники и доступ: должность + галочки разделов сотрудника */
.usr-note { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); background: var(--surface-2); }
.usr-note svg.lucide { width: 15px; height: 15px; color: var(--accent); flex: none; }
.usr-note + .usr { border-top: 1px solid var(--line); }
.secs { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.secs-g { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.secs-h { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.sck { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; background: var(--surface); }
.sck input { margin: 0; accent-color: var(--accent); cursor: pointer; }
.sck:has(input:checked) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.secs-all, .secs-none { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.secs-none { color: var(--warn); }
.secs-all svg.lucide, .secs-none svg.lucide { width: 14px; height: 14px; }
.mdl .secs { gap: 8px 14px; }
.fld label.sck { display: inline-flex; margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1; }
.selx { position: relative; display: flex; align-items: center; height: 36px; padding: 0 30px 0 12px; border-radius: 9px; border: 1px solid var(--line-2); font-weight: 600; }
.selx select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.selx svg.lucide { position: absolute; right: 10px; width: 14px; height: 14px; color: var(--ink-3); }

.mdl { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; background: rgba(10,37,64,.4); }
.mdl.on { display: grid; }
.mdl-c { width: 580px; max-width: calc(100vw - 32px); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); }
.mdl-h { display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px; gap: 14px; align-items: start; padding: 22px 24px 0; }
.mdl-h h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.mdl-h p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.mdl-b { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.mdl-f { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }
.scopes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scope { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.scope svg.lucide { width: 15px; height: 15px; color: var(--ink-3); }
.scope.ok svg.lucide { color: var(--good); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); transition: all .2s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast svg.lucide { color: #6ce9a6; }
.snav-i em.red { background: var(--bad); color: #fff; }
.snav-g:nth-child(2) .snav-i:nth-of-type(2) em { background: var(--mute-bg); color: var(--side-ink); }
.snav-g:nth-child(2) .snav-i:nth-of-type(2) em.red { background: var(--bad); color: #fff; }
.t td.cbg-bad { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.t td.cbg-warn { background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.t td.cbg-ok { background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
a.sync, a.brand { text-decoration: none; }

/* ═════ Рабочая версия: вход, пометки, состояния ═════ */
.auth { min-height: 100vh; width: 100%; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.auth-c { width: 400px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 28px; }
.auth-c h1 { margin: 4px 0 6px; font-size: 24px; letter-spacing: -.02em; }
.auth-c p { margin: 0 0 20px; color: var(--ink-2); font-size: 13.5px; }
.auth-err { color: var(--bad); font-size: 13px; font-weight: 600; min-height: 18px; }
.demo { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 16px; border-radius: 10px; background: var(--warn-bg); color: var(--ink); font-size: 13px; border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.demo svg.lucide { color: var(--warn); margin-top: 1px; }
.sync-bad { background: var(--bad-bg) !important; color: var(--bad) !important; }
.sync-warn { background: var(--warn-bg) !important; color: var(--warn) !important; }
.sync-mute { background: var(--mute-bg) !important; color: var(--ink-2) !important; }
.st-info { background: var(--info-bg); color: var(--info); }
.lvl.fixed span { cursor: default; }
.scope.no svg.lucide { color: var(--bad); }
.tl .row.jr { grid-template-columns: 96px minmax(0, 1fr) auto auto; }
.bt[disabled] { opacity: .5; pointer-events: none; }
.tg-mute { background: var(--mute-bg); color: var(--ink-3); }
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--ink-2); text-align: center; cursor: pointer; }
.drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop svg.lucide { width: 24px; height: 24px; color: var(--accent); }
.drop small { color: var(--ink-3); font-size: 12px; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.steps { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); }

/* ═════ Таблицы: вся выборка с виртуальной прокруткой, ровные шапки, переносы в 2 строки ═════ */
:root { --hd-h: 58px; }
.tw { overflow: auto; max-height: calc(100vh - 128px); overscroll-behavior: contain; }
table.t { table-layout: fixed; }
.t tr.vt-pad td { padding: 0; border: 0; background: transparent; }
.t tbody tr.vt-pad { cursor: default; }
.t tbody tr.vt-pad:hover td { background: transparent; }
/* слои: шапка → «Итого» → закреплённые колонки → прочие ячейки */
.t thead th { z-index: 6; }
.t thead .fz { z-index: 8; }
.t tr.tot td { position: sticky; top: var(--thh, 98px); z-index: 4; box-shadow: inset 0 -1px 0 var(--line-2); }
.t tr.tot td.fz { z-index: 5; }
.t tr.tot td.fz-last { box-shadow: inset -1px 0 0 var(--line-2), inset 0 -1px 0 var(--line-2), 6px 0 8px -6px rgba(0,0,0,.12); }
.t tr.tot td:nth-child(2), .t tr.tot td:nth-child(3) { font-family: var(--font); }
.t tr.tot td.a-r { font-family: var(--font-num); font-size: .95em; }
.t tr.grow td { padding-left: 16px; }
.t tr.grow .grow-t { position: sticky; left: 16px; display: inline-flex; align-items: center; gap: 8px; }

/* шапка колонок: одна высота, низ по базовой линии, текст — влево, числа — вправо, название до 2 строк */
.t .th-c th { vertical-align: bottom; padding: 0 12px 8px; }
/* нижняя строка шапки — единица измерения и значок сортировки рядом с ней (у числовых — слева, чтобы край текста совпадал с числами) */
.t .th-c .ch { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; line-height: 1.22; white-space: normal; }
.t .th-c th.a-r .ch { align-items: flex-end; text-align: right; } .t .th-c th.a-c .ch { align-items: center; text-align: center; }
.t .th-c .ch-n { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; max-width: 100%; }
.t .th-c .ch-u { display: flex; align-items: center; gap: 4px; max-width: 100%; min-height: 13px; white-space: nowrap; }
.t .th-c th.a-r .ch-u { flex-direction: row-reverse; }
.t .th-c .ch-ut { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t .th-c .so { flex: none; margin: 0; display: block; }
.t .th-c .so svg.lucide { width: 12px; height: 12px; }

/* данные: числа — моноширинным табличным, по правому краю */
.t td.a-r { font-family: var(--font-num); font-size: .94em; letter-spacing: -.01em; }
.t td.a-r b, .t td.a-r .strong { font-weight: 600; }
.t td { line-height: 1.3; }

/* текст до 2 строк с подсказкой полного значения */
.t td .cl2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.28; }
.t td .vend.cl2 { overflow-wrap: anywhere; }
.t td .subj.cl2, .t td .brand.cl2 { overflow-wrap: anywhere; }
.t td .brand.cl2 { color: var(--ink-2); }

/* «На что обратить внимание» — чипы в 2 строки */
.t td .tags { display: flex; flex-wrap: wrap; gap: 3px; max-height: 43px; overflow: hidden; white-space: normal; }
.t td .tg { height: 20px; padding: 0 7px; font-size: 11px; gap: 4px; max-width: 100%; }
.t td .tg > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t td .tg svg.lucide { width: 11px; height: 11px; }
[data-density="compact"] .t td .tags { max-height: 39px; }
[data-density="compact"] .t td .tg { height: 18px; }


/* «Куда движется» — три чётких состояния, чипы одного размера */
.mv { display: inline-flex; align-items: center; gap: 6px; width: 116px; height: 26px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.mv svg.lucide { width: 15px; height: 15px; }
.mv small { margin-left: auto; font: 650 10.5px var(--font-num); padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, currentColor 13%, var(--surface)); color: inherit; }
.mv-up { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 22%, transparent); }
.mv-flat { background: var(--info-bg); color: var(--info); font-weight: 650; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--info) 22%, transparent); }
.mv-down { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 22%, transparent); }
.mv-none { background: var(--mute-bg); color: var(--ink-3); font-weight: 500; }

/* «Сезон»: значок, подпись, 12 столбиков Я…Д */
.se { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; }
.se-t b, .se-t small { white-space: nowrap; display: block; }
.se[class*="sz-"].se-now .se-t b, .se[class*="sz-"].se-soon .se-t b { color: var(--sz); }
.sp { display: inline-flex; align-items: stretch; gap: 1px; height: 30px; width: auto; }
.sp-m { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 7px; gap: 2px; cursor: default; }
.sp-m i { display: block; width: 5px; border-radius: 2px 2px 1px 1px; background: var(--line-2); max-height: 18px; flex: none; }
.sp-m b { font: 600 8.5px/1 var(--font); color: var(--ink-3); letter-spacing: 0; height: 9px; }
.sp-m.pk i { background: var(--sz, var(--seas)); }
.sp-m.pk b { color: var(--sz, var(--seas)); font-weight: 700; }
.sp-m.cur b { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 1px; }
.sp-m.cur i { box-shadow: 0 0 0 1px var(--ink-2); }
.sp-m:hover i { filter: brightness(.85); }
.se-past .sp-m.pk i, .se-far .sp-m.pk i { opacity: .75; }

/* подвал таблицы */
.pager .vt-pos { font-family: var(--font-num); font-size: 12px; }
.t td .brand { padding: 0; gap: 0; font-size: inherit; }
/* строка всегда одной высоты — это нужно виртуальной прокрутке */
.t tbody tr[data-row] td > * { max-height: calc(var(--row-h) - 4px); overflow: hidden; }
.t tbody tr[data-row] td > img.ph { overflow: visible; }
.t td .tg-more { background: var(--mute-bg); color: var(--ink-2); padding: 0 6px; font-family: var(--font-num); }
.t td .tags { align-content: center; }
.dr .tags { max-height: none; }
.dr .tg { height: auto; min-height: 22px; padding: 3px 8px; white-space: normal; line-height: 1.3; }
/* двухстрочные ячейки «значение + пояснение»: обе строки не вылезают за колонку */
.t td > b, .t td > .xs, .t td > span > .xs { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t td .xs { font-family: var(--font); letter-spacing: 0; }
.t tr.tot td { white-space: nowrap; text-overflow: ellipsis; }
.t tr.tot td.fz-last { font-size: 12px; }

/* карточки-показатели: на ноутбуке не сжимаются в узкие столбики */
.kp-v { font-size: clamp(17px, 1.45vw, 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1800px) {
  .kps.k7, .kps.k8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kps.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kps.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kps.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.t tr.tot .tot-l { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; color: var(--ink); }
.t tr.tot .tot-l small { font: 500 11px var(--font); color: var(--ink-3); white-space: nowrap; }
.t td .vv { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.t td .vv .vend.cl2 { -webkit-line-clamp: 1; max-width: 100%; }
.t td .vv .tg { height: 18px; font-size: 10.5px; }
.t td .subj.cl2, .t td .brand.cl2 { hyphens: auto; -webkit-hyphens: auto; }
/* сезонность: тепловая карта по месяцам в таблице */
.t td .hm { display: flex; align-items: center; justify-content: center; height: 28px; border-radius: 6px; font: 600 10.5px var(--font-num); color: var(--ink-2); background: color-mix(in srgb, var(--accent) var(--v), transparent); }
.t td .hm-pk { background: color-mix(in srgb, var(--sz, var(--seas)) var(--v), transparent); color: var(--ink); }
.t td .hm-now { box-shadow: inset 0 0 0 2px var(--accent); }
.t .th-c .now-m { display: block; font-size: 10px; color: var(--accent); font-weight: 700; }
.t td.a-c .hm { width: 100%; }
.t .mcol { padding-left: 3px !important; padding-right: 3px !important; }
.t tr.tot td.mcol { font-size: 11px; }

/* малые таблицы разделов: шапка по низу, без вылезания из карточки */
.card-b:has(> table.mini) { overflow-x: auto; }
.mini th { vertical-align: bottom; line-height: 1.25; white-space: normal; }
.mini td { vertical-align: middle; }
.mini td:first-child { min-width: 110px; }
.t td .cc-sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t td .cc-sub .neg { font-weight: 600; }

/* ═════ Таблицы: выше строки, крупнее фото, блоки колонок своими цветами, липкая горизонтальная прокрутка ═════ */
:root {
  --row-h: 64px;
  --bk-slate: #7a8796; --bk-sand: #b0782f; --bk-sky: #1d8fd1; --bk-violet: #7a4ff0; --bk-plum: #b4479e;
  --bk-green: #0e8a5f; --bk-blue: #3a5bff; --bk-teal: #0b8a9c; --bk-red: #d63b3b;
  --fbo: #eebb3c; --fbs: #2a9d8f;   /* FBW — тёплый жёлтый, FBS — спокойный бирюзовый: пара по просьбе пользователя */
}
.pg-in { padding-bottom: 16px; }
.grid { overflow: clip; }   /* не hidden: иначе липкая полоса прокрутки прилипала бы к карточке, а не к окну */

/* шапка блоков: мягкая подложка цвета блока и тонкая полоса сверху; соседние блоки одного цвета — подложка слабее */
.t .th-b th { background: color-mix(in srgb, var(--gc) 9%, var(--surface)); box-shadow: inset 0 2px 0 var(--gc); color: color-mix(in srgb, var(--gc) 62%, var(--ink)); }
.t .th-b th.b-alt { background: color-mix(in srgb, var(--gc) 4.5%, var(--surface)); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--gc) 55%, var(--surface)); }
.t .th-b .bh span::after { display: none; }
.t .th-b .bh { font-weight: 650; }
.t .th-b .bh svg.lucide:first-child { color: var(--gc); width: 15px; height: 15px; }
.t .th-b .bh small { color: inherit; }
.t .th-c th { background: color-mix(in srgb, var(--gc) 3%, var(--surface)); }
.t .th-c th.b-alt { background: color-mix(in srgb, var(--gc) 1.5%, var(--surface)); }
/* разделитель между блоками по всей высоте — очень лёгкий, в цвет блока */
.t .gst { border-left: 1px solid color-mix(in srgb, var(--gc, var(--line-2)) 28%, var(--line)); }
.t thead .gst { border-left-color: color-mix(in srgb, var(--gc, var(--line-2)) 40%, var(--line)); }

/* «Куда движется»: «держится» — нейтрально, без подсветки; размер чипа тот же */
.mv-flat { background: transparent; color: var(--ink-3); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }

/* липкая полоса горизонтальной прокрутки: всегда видна внизу окна */
.tw { overscroll-behavior: contain; }
.tw::-webkit-scrollbar { width: 10px; height: 0; }
.tw::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 2px solid var(--surface); }
.tw::-webkit-scrollbar-track { background: var(--surface); }
.hs { position: sticky; bottom: 0; z-index: 9; overflow-x: auto; overflow-y: hidden; height: 14px; background: var(--surface); border-top: 1px solid var(--line); }
.hs > div { height: 1px; }
.hs::-webkit-scrollbar { height: 14px; }
.hs::-webkit-scrollbar-track { background: var(--surface-2); }
.hs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 7px; border: 3px solid var(--surface-2); }
.hs::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ═════ Карточка товара: заказы за 30 дней ═════ */
.dr-s h4 .dro-per { margin-left: 8px; font: 500 11.5px var(--font-num); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.dro-ld { display: flex; align-items: center; gap: 10px; padding: 18px 14px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--ink-3); font-size: 13px; }
.dro-ld svg.lucide { width: 16px; height: 16px; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.dro-sum { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.dro-sum > div { padding: 10px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dro-sum > div:last-child { border-right: 0; background: var(--surface-2); }
.dro-sum span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.dro-sum span i, .dro-lg i, .dro-dl i, .dro-cab i, .tp-r i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.dro-sum b { font: 650 18px var(--font-num); letter-spacing: -.02em; }
.dro-sum small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.dro-ch { position: relative; height: 168px; margin-top: 4px; }
.dro-y { position: absolute; left: 0; right: 0; top: 6px; bottom: 18px; border-bottom: 1px solid var(--line-2); }
.dro-g { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--line); }
.dro-g b { position: absolute; left: 0; top: 0; transform: translateY(-50%); background: var(--surface); padding-right: 4px; font: 500 10.5px var(--font-num); color: var(--ink-3); }
.dro-bars { position: absolute; left: 34px; right: 0; top: 6px; bottom: 0; display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 3px; }
.dro-c { display: flex; flex-direction: column; min-width: 0; cursor: default; }
.dro-st { height: calc(100% - 18px); display: flex; flex-direction: column-reverse; border-radius: 3px; }
.dro-st i { display: block; flex: none; }
.dro-st i:last-child { border-radius: 3px 3px 0 0; }
.dro-st .s-fbo { background: var(--fbo); }
.dro-st .s-fbs { background: var(--fbs); }
.dro-st .s-na { background: var(--line-2); }
.dro-st .s-part { background: repeating-linear-gradient(135deg, var(--fbs) 0 3px, color-mix(in srgb, var(--fbs) 45%, var(--surface)) 3px 6px); }
.dro-c.we .dro-st { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.dro-c.we small { color: var(--ink-2); }
.dro-c.hv .dro-st { background: var(--accent-soft); }
.dro-c.hv .dro-st i { filter: brightness(.92); }
.dro-c small { display: flex; justify-content: center; height: 18px; font: 500 10px/18px var(--font-num); color: var(--ink-3); white-space: nowrap; overflow: visible; }
.dro-c.today { margin-left: 4px; padding-left: 4px; border-left: 1px dashed var(--line-2); }
.dro-c.today small { font-family: var(--font); color: var(--ink-2); font-weight: 600; }
.dro-tip { position: absolute; top: 0; left: 0; transform: translateY(calc(-100% - 6px)); z-index: 3; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s; box-shadow: var(--shadow-lg); }
.dro-tip.on { opacity: 1; }
.dro-tip b { font-weight: 650; font-variant-numeric: tabular-nums; }
.dro-tip span { color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.dro-tip .tp-r { display: flex; align-items: center; gap: 6px; }
.dro-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 16px; font-size: 12px; color: var(--ink-2); }
.dro-lg span { display: inline-flex; align-items: center; gap: 6px; }
.dro-lg .lg-na { background: var(--line-2); }
.dro-lg .lg-we { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.dro-sh small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.dro-bar { display: flex; height: 24px; border-radius: 7px; overflow: hidden; background: var(--mute-bg); }
.dro-bar i { display: flex; align-items: center; min-width: 0; padding: 0 9px; overflow: hidden; }
.dro-bar i + i { box-shadow: inset 2px 0 0 var(--surface); }
.dro-bar i b { font: 650 11.5px var(--font); color: #fff; white-space: nowrap; }
.dro-bar i.na b { color: var(--ink-3); }
.dro-dyn { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dro-dh { padding: 8px 12px; font-size: 12px; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.dro-dy { display: grid; grid-template-columns: 90px 86px 1fr; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.dro-dy:last-child { border-bottom: 0; }
.dro-dl { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.dro-dy .dy { justify-content: flex-start; font-family: var(--font-num); font-size: 13px; }
.dro-dy .dy-flat { color: var(--ink-2); }
.dro-dy small { color: var(--ink-3); font-size: 12px; }
.dro-nt { display: flex; gap: 8px; margin-top: 12px; padding: 9px 12px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.dro-nt svg.lucide { width: 15px; height: 15px; flex: none; color: var(--ink-3); margin-top: 1px; }
.dro-t { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dro-t th { text-align: right; font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.dro-t td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line); font-family: var(--font-num); white-space: nowrap; }
.dro-t th:first-child, .dro-t td:first-child { text-align: left; font-family: var(--font); }
.dro-cab { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dro-t .code { font-family: var(--font-num); color: var(--ink-2); }

/* колонка «FBW / FBS за последние 30 дн» в ABC и «Закончились» */
.fx { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; font-size: 11.5px; line-height: 1.25; color: var(--ink-2); }
.fx-l b { margin-left: auto; min-width: 34px; text-align: right; }
.fx-d { display: inline-flex; align-items: center; gap: 1px; min-width: 52px; justify-content: flex-end; font-style: normal; font-family: 'Roboto Mono', monospace; font-size: 11px; color: var(--ink-3); }
.fx-d svg.lucide { width: 12px; height: 12px; }
.fx-up { color: #0e8a5f; } .fx-dn { color: #d63b3b; }
.fx-l { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.fx-l b { font-family: 'Roboto Mono', monospace; font-weight: 600; color: var(--ink); }
.fx-l i { width: 7px; height: 7px; border-radius: 2px; }
.fx-bar { grid-column: 1 / -1; display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--mute-bg); }
.fx .fx-o { background: var(--fbo); } .fx .fx-s { background: var(--fbs); }

/* ═════ Таблицы: надписи крупнее (ширины колонок прежние), ровные вертикали, «На что обратить внимание» целиком ═════ */
:root { --fs: 14px; --hd-h: 76px; }   /* шапка колонок выше: название до 3 строк, подпись единиц до 2 */
/* шапка: блоки 13px, названия колонок 13px (до 2 строк), подписи единиц 11.5px */
.t .th-b .bh { font-size: 13px; }
.t .th-b .bh small { font-size: 11.5px; }
.t .th-c .ch-n { font-size: 13px; }
.t .th-c .ch-u { font-size: 11.5px; min-height: 14px; }
.t .th-c .so svg.lucide { width: 13px; height: 13px; }
.stub-n { font-size: 11.5px; }
/* значения: текст 14px, числа Roboto Mono 13.5px */
.t td.a-r, .t tr.tot td.a-r { font-size: 13.5px; }
.t td .code, .t td .vend { font-size: 13px; }
.t td .xs { font-size: 12px; }
.t tr.tot td.fz-last { font-size: 13px; }
.t tr.tot .tot-l small { font-size: 11.5px; }
.t tr.tot td.mcol { font-size: 11.5px; }
.gr { font-size: 12.5px; } .gr-main { font-size: 13.5px; }
.mv { font-size: 12.5px; } .mv small { font-size: 11px; }
.se-t b { font-size: 13px; } .se-t small { font-size: 11.5px; }
.t td .tg { font-size: 11.5px; height: 21px; }
.t td .vv .tg { font-size: 11px; height: 19px; }
.t td .hm { font-size: 11px; }
.fx { font-size: 12px; } .fx-d { font-size: 11.5px; }

/* стрелка тренда — в слоте постоянной ширины справа от числа (пустой, если стрелки нет);
   в колонках .arr слот занимает правый отступ ячейки: числа, «—», «Итого» и шапка — на одной вертикали */
.arr-s { flex: none; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: flex-end; }
.arr-s svg.lucide { width: 14px; height: 14px; }
.pd, .dy { gap: 2px; }
.t td.arr, .t .th-c th.arr, .t tr.tot td.arr { padding-right: 28px; }
.t td.arr .arr-s { margin-right: -16px; }
.t td.arr .dy { justify-content: flex-end; }
/* FBW / FBS: проценты доли и динамики — по правому краю своих слотов, стрелка — в своём слоте */
.fx-d { min-width: 66px; gap: 2px; }
.fx-d .arr-s, .fx-d .arr-s svg.lucide { width: 12px; height: 12px; }
.fx-l b { min-width: 38px; }
/* «0» в красной плашке: цифра на одной вертикали с остальными числами колонки */
.t td.a-r .zero { justify-content: flex-end; margin-right: -8px; }
/* маржинальность — плашки одной ширины по центру, цифры моноширинные */
.t td .pill-m { width: 60px; min-width: 0; justify-content: center; font-family: var(--font-num); font-size: 13px; letter-spacing: -.02em; }
.av b { min-width: 42px; }


/* «На что обратить внимание»: все замечания строками; цвет значка — важность, точки — кабинет */
.t td .ats { display: flex; flex-direction: column; justify-content: center; gap: 1px; white-space: normal; max-height: calc(var(--row-h) - 4px); overflow: hidden; }
.at { display: flex; align-items: flex-start; gap: 5px; min-width: 0; font-size: 12px; font-weight: 400; line-height: 14px; color: var(--ink); }
.at > svg.lucide { flex: none; width: 12px; height: 12px; margin-top: 1px; }
.at-t { min-width: 0; overflow-wrap: anywhere; }
.at-c { display: inline-flex; align-items: center; gap: 2px; margin-left: 5px; vertical-align: 1px; }
.at-c .cab { display: inline-block; width: 7px; height: 7px; border-radius: 2px; }
.at-bad > svg.lucide, .at-bad .at-d { color: var(--bad); } .at-bad .at-t { color: var(--bad); }
.at-warn > svg.lucide, .at-warn .at-d { color: var(--warn); }
.at-info > svg.lucide, .at-info .at-d { color: var(--info); }
.at-d { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-top: 4px; }
.t td .ats-two { display: grid; grid-template-columns: max-content max-content; column-gap: 7px; row-gap: 1px; align-content: center; }
.ats-two .at { font-size: 11.5px; gap: 3px; white-space: nowrap; }
.ats-two .at-c { margin-left: 2px; }
/* подпись единиц не обрезается: переносится на вторую строку; значок сортировки — у нижней строки */
.t .th-c .ch-u { white-space: normal; align-items: flex-end; }
.t .th-c .ch-ut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; line-height: 1.18; }
.t .th-c .so { align-self: flex-end; margin-bottom: 1px; }
/* слот стрелки выходит в правый отступ ячейки — не обрезать */
.t tbody tr[data-row] td.arr > * { overflow: visible; }
.t td .subj.cl2, .t td .brand.cl2 { font-size: 13.5px; }
/* значок сортировки — в правом верхнем углу шапки колонки: подписи достаётся вся ширина колонки */
.t .th-c .so { position: absolute; top: 7px; right: 6px; margin: 0; }
.t .th-c .ch-u { min-height: 0; }
.t .th-c .ch-ut:empty { display: none; }
/* артикул WB — моноширинным: 9–10 цифр и значок ссылки влезают в прежнюю ширину колонки */
.t td .nm { font-family: var(--font-num); font-size: 13px; letter-spacing: -.01em; }
/* «нет данных», «нет оценок» и т. п. — чуть мельче значений и с переносом, а не за край колонки */
.t td .nil { font-size: 12.5px; white-space: normal; }
/* код продавца, предмет, бренд — до 3 строк (крупнее шрифт, ширина прежняя) */
.t td .vend.cl2, .t td .subj.cl2, .t td .brand.cl2 { -webkit-line-clamp: 3; line-height: 1.2; }
/* «Хватит до», «Ближайший приезд» и пр.: значение и пояснение переносятся, а не обрезаются */
.t tbody td > b, .t tbody td .xs { white-space: normal; text-overflow: clip; }
/* плашки-статусы в числовых колонках («взять в резерв») — с переносом */
.t td .pill:not(.pill-m) { white-space: normal; line-height: 1.2; text-align: center; }
/* полоса наличия/покрытия короче — подпись «3 из 6» влезает в узкую колонку */
.t td .av { gap: 6px; } .t td .av-bar { width: 36px; }
/* название колонки — до 3 строк с переносом по слогам («Сибирь (Новосибирск)») */
.t .th-c .ch-n { -webkit-line-clamp: 3; hyphens: auto; -webkit-hyphens: auto; }
/* склады «Куда везти» — плотнее, чтобы 6 складов уместились в 3 строки */
.t td .whs { gap: 3px; } .t td .whs span { padding: 1px 6px; font-size: 11.5px; line-height: 15px; }
.t td.a-r .pill:not(.pill-m) { margin-right: -8px; text-align: right; }
/* чипы-пояснения и статусы в ячейках: длинный текст переносится, а не обрезается многоточием */
.t td .tags .tg, .t td .st { height: auto; min-height: 21px; padding-top: 2px; padding-bottom: 2px; white-space: normal; line-height: 1.22; }
.t td .tags .tg > span { white-space: normal; overflow: visible; }
.t td .tags { max-height: calc(var(--row-h) - 4px); }
/* два кода продавца (сводный лист) — до 4 строк, кабинет точкой */
.t td .vend2.cl2 { -webkit-line-clamp: 4; font-size: 12px; line-height: 14px; }
.t td .vend2 { margin-left: -10px; }   /* точка кабинета — в левом отступе ячейки, коду достаётся вся ширина */
.vend2 .cab { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; vertical-align: 1px; }
.t .th-c .ch-ut { hyphens: auto; -webkit-hyphens: auto; }

/* «Действие» (C.action в core.js): текст в 1–2 строки без заливки, слева цветная точка по смыслу, количества — моноширинные.
   go — везти (акцент), urg — срочно (красный), ok — хватает (зелёный), mute — реже / не везти (серый), warn — цена (янтарный) */
.ac { --ac: var(--ink-3); display: inline-grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: 7px; align-items: baseline; max-width: 100%;
      font: 500 12px/1.28 var(--font); letter-spacing: -.005em; color: var(--ink); white-space: normal; text-align: left; vertical-align: middle; }
.ac-d { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); align-self: start; margin-top: .42em; }
.ac-x { min-width: 0; overflow-wrap: break-word; }
.ac-h { font-weight: 600; }
.ac-s { display: block; margin-top: 1px; color: var(--ink-2); font-size: 11.5px; }
.ac-n { font: 650 11.5px/1 var(--font-num); color: var(--ink); letter-spacing: -.02em; }
.ac-go { --ac: var(--accent); } .ac-urg { --ac: var(--bad); } .ac-urg .ac-h { color: var(--bad); }
.ac-ok { --ac: var(--good); } .ac-mute { --ac: #a3adba; } .ac-mute .ac-h { color: var(--ink-2); font-weight: 500; }
.ac-warn { --ac: #e0a030; } .ac-warn .ac-h { color: var(--warn); }
.ac-new { --ac: var(--Y); }
.dr-dec .ac { font-size: 14px; } .dr-dec .ac-s { font-size: 13px; } .dr-dec .ac-n { font-size: 13px; } .dr-dec .ac { grid-template-columns: 8px minmax(0, 1fr); column-gap: 9px; } .dr-dec .ac-d { width: 8px; height: 8px; }
/* ───── значки групп (znachki.html): кольцо с прогрессом — ABC / маржа / XYZ / окна / при полном наличии (вариант 10, C.ring); твёрдая группа — цветная буква со звёздочкой (вариант 7, C.firm) ───── */
.t td.gtc { padding: 0 6px; }
.gA { --c: #0e8a5f; --s: #e3f5ec; --l: #a9dcc3; --d: #0a6b49; }
.gB { --c: #c27410; --s: #fdf1dc; --l: #f0cc8e; --d: #8f5200; }
.gC { --c: #7a8796; --s: #eef1f5; --l: #d3d9e1; --d: #566273; }
.gX { --c: #3a5bff; --s: #ebefff; --l: #c3cdff; --d: #2440c9; }
.gY { --c: #7a4ff0; --s: #f1ecff; --l: #d6c8fb; --d: #5a31c9; }
.gZ { --c: #c8457e; --s: #fdecf3; --l: #f2c0d6; --d: #9e2a5c; }
.gN { --c: #a3adba; --s: #f3f5f8; --l: #d7dde5; --d: #7a8796; }
.fG { --c: #d29a12; --s: #fff6d6; --l: #ecc75a; --d: #7a5200; }
.fS { --c: #8d98a7; --s: #f2f4f7; --l: #c3cad4; --d: #475263; }
.zst { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; vertical-align: middle; }
.zst > small { font: 500 10.5px/1 var(--font); color: var(--ink-3); white-space: nowrap; }
.dash { color: var(--ink-3); font: 500 13px var(--font-num); opacity: .7; }
/* 10. Круг-кольцо с прогрессом */
.z10 { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; font: 700 11.5px/1 var(--font-num); color: var(--d); vertical-align: middle; flex: none; }
.z10 svg.rg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.z10 svg.rg circle { fill: none; stroke-width: 3; }
.z10 svg.rg .bg { stroke: var(--s); }
.z10 svg.rg .fg { stroke: var(--c); stroke-linecap: round; }
.z10.est svg.rg .fg { stroke-dasharray: 2 3 !important; stroke-linecap: butt; }
.z10.sm { width: 24px; height: 24px; font-size: 10.5px; }
.z10 b { font-weight: inherit; }
/* 7. Минимал — только цветная буква (твёрдая группа) */
.z7 { display: inline-flex; align-items: baseline; gap: 2px; font: 700 16px/1 var(--font-num); color: var(--c); vertical-align: middle; }
.z7.gC { color: #9aa5b3; }
.z7.firm { align-items: center; gap: 3px; color: var(--d); }
.z7.firm svg.lucide { width: 13px; height: 13px; fill: var(--c); color: var(--c); }
/* карточка товара: кольца по верхнему краю, подписи под ними не сдвигают букву; окна — с зазором под подпись «12 мес» */
.dr-g > .z10 { align-self: flex-start; }
.dr-g > .z7, .dr-g > .dash { align-self: flex-start; margin-top: 4px; }
.dr-g > .zst + .zst { margin-left: 4px; }
/* «Доля накопит.»: цвет заливки и текста — по значению (M.cumStyle в core.js: --cb, --cf) */
.t td.cbg-cum { background: var(--cb); } .t tbody tr:hover td.cbg-cum { background: color-mix(in srgb, var(--cb) 90%, #000); }
.t td.cbg-cum .cum { color: var(--cf); font-weight: 600; }
.t td .cum-c { color: #5b6573; }   /* больше 95 % (группа C): без заливки, серый текст с контрастом ≥ 4,5:1 */

/* фильтры «Бренд» / «Артикулы», окна списков и колонок (api.js) */
.as-t td, .as-t th { text-align: left !important; vertical-align: top; font-size: 13px; }
.as-t td .tg { margin: 1px 0; }
.mdl-c:has(.as-m) { width: 820px; max-height: calc(100vh - 40px); overflow-y: auto; }
.as-chosen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.as-chosen i { font-style: normal; cursor: pointer; margin-left: 4px; opacity: .7; }
.as-bl { max-height: 210px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; padding: 6px; }
.as-bi { display: grid !important; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 0 6px; padding: 5px 6px; border-radius: 7px; cursor: pointer; margin: 0 !important; font-weight: 500 !important; }
.as-bi:hover { background: var(--surface-2); } .as-bi.on { background: var(--accent-soft); }
.as-bi span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-bi small { grid-column: 2; font-size: 11.5px; color: var(--ink-3); margin: 0 !important; }
.as-ta { height: 70px; padding: 8px 12px; margin-top: 8px; resize: vertical; font: inherit; font-size: 13px; }
.as-items { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.as-items .acc td { padding: 6px 10px; }
.as-rep { font-size: 13px; }
.as-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.as-t td:first-child { min-width: 190px; }
@media (max-width: 700px) { .as-bl { grid-template-columns: 1fr; } }
button.fl { font: inherit; font-size: 13px; }
.fl-ic { padding: 0 9px; gap: 5px; }
.fl-ic svg.lucide { width: 16px; height: 16px; }
.kp-fl { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; margin-left: 4px; }
.al-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.al-row .inp { flex: 1 1 220px; height: 34px; }
.al-cb { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; font-weight: 500 !important; margin: 0 !important; }
.al-a { white-space: nowrap; text-align: right !important; vertical-align: middle !important; }
.al-a > * { vertical-align: middle; }
.al-a .bt + .ib, .al-a .st + .ib, .al-a .ib + .ib { margin-left: 6px; }
.al-ib { display: inline-grid; width: 30px; height: 30px; border-color: var(--line-2); color: var(--ink-3); }
.al-ib:hover { color: var(--ink); background: var(--surface-2); }
.al-ib.al-sure { color: var(--bad); border-color: var(--bad); }
.al-on td { background: var(--accent-soft); }
.al-ren { height: 30px; width: 260px; display: inline-block; }
.cm-g { columns: 2 260px; column-gap: 22px; }
.cm-b { break-inside: avoid; margin-bottom: 14px; }
.cm-h { display: flex !important; align-items: center; gap: 7px; padding: 4px 0 6px; margin: 0 !important; border-bottom: 1px solid var(--line); cursor: pointer; }
.cm-h svg.lucide { width: 15px; height: 15px; color: var(--ink-3); }
.cm-h b { font-size: 13.5px; } .cm-h small { margin-left: auto; color: var(--ink-3); font-size: 12px; }
.cm-c { display: flex !important; align-items: flex-start; gap: 7px; padding: 4px 0 4px 2px; margin: 0 !important; font-size: 13px; font-weight: 500 !important; cursor: pointer; }
.cm-c input, .cm-h input { flex: none; margin-top: 1px; }
.cm-fz { opacity: .6; cursor: default; }
/* подпись «Итого · N строк» в узкой закреплённой колонке (Код 1С) выходит в пустую соседнюю закреплённую ячейку строки итогов */
.t tr.tot td.fz:has(> .tot-l) { overflow: visible; z-index: 6; }

/* плашки над фото: «Топ» (зелёная), «Новинка» (фиолетовая), «Новинка?» (светлее) — сверху фото,
   чуть шире и выше его, текст целиком; ячейка фото не обрезает плашку и лежит над соседними закреплёнными колонками */
.ph-w { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.ph-new { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 1; min-width: calc(100% + 8px); box-sizing: border-box; padding: 0 4px; border-radius: 5px; background: #7a4ff0; color: #fff; font: 700 9px/14px 'Golos Text', sans-serif; font-style: normal; letter-spacing: 0; text-align: center; white-space: nowrap; box-shadow: 0 0 0 1.5px var(--surface), 0 1px 3px rgba(20, 20, 50, .22); pointer-events: none; }
.ph-new.ph-q { background: #a98af5; }
.ph-new.ph-old { background: #8a8f9c; }
.ph-new.ph-top { background: #0e8a5f; }
.t tbody tr[data-row] td > .ph-w { overflow: visible; max-height: none; }
.t td:has(> .ph-w) { overflow: visible; }
.t td.fz:has(> .ph-w) { z-index: 3; }
.t td:not(.fz):has(> .ph-w) { position: relative; z-index: 1; }
.fl-nw.on { background: color-mix(in srgb, #7a4ff0 12%, var(--surface)); border-color: #7a4ff0; color: #5a35c8; }
.fl-top.on { background: color-mix(in srgb, #0e8a5f 12%, var(--surface)); border-color: #0e8a5f; color: #0b6e4c; }
.fl-dup.on { background: color-mix(in srgb, #d9480f 12%, var(--surface)); border-color: #d9480f; color: #b23a0b; }
.fl-nw b, .fl-top b, .fl-dup b { margin-left: 4px; }

/* ═════ Адаптивность: 1024 … 2560 и телефон ═════ */
/* шапка страницы: кнопки справа от заголовка, а когда места мало — ровной строкой под ним */
.ph { flex-wrap: wrap; row-gap: 12px; }
.ph-l { flex: 1 1 440px; }
.ph-r { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* вкладки листов — в одну строку, при нехватке места прокручиваются */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; white-space: nowrap; }
/* модальные окна — по центру и не выше окна */
.mdl-c { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
/* «Права ролей» и прочие широкие таблицы настроек — своя прокрутка, страница не уезжает вбок */
.card:has(> table.acc) { overflow-x: auto; }
/* плитки-показатели: 6 → 3 → 2 в ряд, 4/5/7/8 → 4 → 2 */
@media (max-width: 1200px) {
  .kps { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kps.k4, .kps.k7, .kps.k8 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .kps.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .kps.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 1100px) {
  .set { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .stabs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .stabs a { flex: none; white-space: nowrap; }
  .night { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .night > div:nth-child(3) { border-left: 0; }
  .night > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .kps.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .usr { grid-template-columns: 40px minmax(0, 1fr) 150px 36px; }
}
/* телефон: меню — иконки (раскрытое — поверх страницы), всё в одну колонку, без прокрутки страницы вбок */
@media (max-width: 768px) {
  body { overflow-x: hidden; }
  .side.rail { width: 56px; }
  .side.rail .snav-i { width: 40px; }
  .side:not(.rail) { position: fixed; left: 0; top: 0; z-index: 75; box-shadow: var(--shadow-lg); }
  .app:has(> .side:not(.rail)) .main { margin-left: 56px; }
  .tb-in { padding: 0 12px; gap: 8px; }
  .gs { width: auto; flex: 1; min-width: 0; }
  .gs kbd, .me-t, .tb-sp { display: none; }
  .tb-in .sync { max-width: 40px; overflow: hidden; padding: 0 11px; font-size: 0; gap: 0; }
  .pg-in { padding: 16px 12px 32px; }
  .ph h1 { font-size: 24px; }
  .ph-m { gap: 6px 14px; }
  .ph-r { justify-content: flex-start; margin-left: 0; }
  .kps, .kps.k3, .kps.k4, .kps.k5, .kps.k7, .kps.k8 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .kp { padding: 12px; }
  .kp-v { font-size: 18px; white-space: normal; overflow: visible; }
  .kp-v .u { white-space: nowrap; }
  .ph-r { margin-bottom: 16px; }
  .c-73, .c-11, .night { grid-template-columns: minmax(0, 1fr); }
  .night > div { border-left: 0; border-top: 1px solid var(--line); }
  .tools .ts { flex: 1 1 100%; }
  .tw { max-height: calc(100vh - 120px); }
  .dr { width: 100vw; }
  .usr { grid-template-columns: 40px minmax(0, 1fr); }
  .usr > .selx, .usr > .ib, .usr > span:empty { grid-column: 2; justify-self: start; }
  .usr > .secs { grid-column: 1 / -1; }
  .mdl-c { max-width: calc(100vw - 16px); border-radius: 12px; }
  .mdl-h { padding: 16px 16px 0; gap: 10px; }
  .mdl-b { padding: 14px 16px; }
  .mdl-f { padding: 12px 16px; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .kp { padding: 10px; }
  .kp-v { font-size: 15.5px; }
  .kp-l { font-size: 12px; gap: 6px; }
  .ph-r .bt { padding: 0 12px; }
}
/* большие мониторы: таблица выше, содержимое не растягивается бесконечно */
@media (min-width: 2200px) { .pg-in { max-width: 2400px; } .tb-in { max-width: 2400px; } }
/* телефон: закреплённые слева колонки занимали бы весь экран — на узком экране они прокручиваются вместе с таблицей (шапка и «Итого» остаются липкими сверху) */
@media (max-width: 600px) {
  .t .fz { left: auto !important; }
  .t .fz-last { box-shadow: none; }
  .t .th-b th:not(.fz) .bh { position: static; }
}

/* метки товара под кодом 1С: «Топ» зелёная, «Новинка» фиолетовая, «Задвойка» оранжево-красная; две метки — столбиком
   плотнее: код + 2 чипа помещаются в строку 64px */
.code-tag { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ptags { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.code-tag:has(.ptags2) { gap: 2px; }
.ptags2 .ptag { padding: 1px 6px; line-height: 13px; }
.ptag { display: inline-block; padding: 2px 7px; border-radius: 6px; font: 700 10.5px/14px 'Golos Text', sans-serif; font-style: normal; color: #fff; white-space: nowrap; letter-spacing: .01em; }
.ptag-new { background: #7a4ff0; } .ptag-top { background: #0e8a5f; } .ptag-dup { background: #d9480f; }

/* справка вверху окон фильтров «Бренд» / «Артикулы» */
.note.fhelp { margin: 0 0 14px; line-height: 1.45; font-size: 13px; }
.note.fhelp b { color: var(--ink); }

/* ═════ Единая система отступов ═════
   Шкала 4 · 8 · 12 · 16 · 20 · 24 · 32 px. Все разделы, кроме листов ABC и «Закончились» (у них свои выверенные
   отступы: .pg-in без класса pg-std), идут столбиком с одним шагом; карточки, окна, поля, заметки и строки — по шкале. */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;
  --gap-head: var(--sp-6);    /* шапка раздела → первый блок (вкладки, плитки, карточка) */
  --gap-block: var(--sp-4);   /* между блоками страницы и внутри карточки */
  --gap-grid: var(--sp-4);    /* зазор в сетках плиток и карточек */
  --pad-x: var(--sp-5);       /* поля карточки слева и справа — по ним же выровнены строки списков и таблиц */
  --pad-y: var(--sp-5);
  --row-y: var(--sp-3);       /* поля строк списков в карточках */
}
.cols { gap: var(--gap-grid); margin-top: 0; }
/* страница: заголовок → (вкладки) → (заметка) → плитки → панель фильтров / таблица / карточки */
.pg-std > * { margin-top: 0; margin-bottom: 0; }
.pg-std > * + * { margin-top: var(--gap-block); }
.pg-std > .ph + * { margin-top: var(--gap-head); }
.pg-std .kps { gap: var(--gap-grid); }
.pg-std .kp { padding: var(--sp-4); }
.stk { display: flex; flex-direction: column; gap: var(--gap-block); min-width: 0; }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.inrow { display: flex; align-items: center; gap: var(--sp-2); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }

/* карточка: шапка одной высоты (с кнопкой и без), поля по шкале, блоки внутри — с одним шагом */
.card-h { min-height: 59px; padding: var(--sp-3) var(--pad-x); gap: var(--sp-3); }
.card-h h3 { font-size: 15px; line-height: 1.35; }
.card-h .sub { line-height: 1.35; }
.card-b { padding: var(--pad-y) var(--pad-x); }
.card-b > * + * { margin-top: var(--gap-block); }
.card-b > .stack + .legend { margin-top: var(--sp-3); }
.card-b > * + .sec-t { margin-top: var(--sp-6); }
.card-b > .sec-t + * { margin-top: var(--sp-2); }
.sec-t { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.card-load { padding: var(--sp-7); text-align: center; color: var(--ink-3); }
.card-x { overflow-x: auto; }

/* строки списков в карточках: поля как у карточки, один зазор между колонками */
.list .row { padding: var(--row-y) var(--pad-x); gap: var(--sp-4); }
.tl .row { padding: var(--row-y) var(--pad-x); gap: var(--sp-4); }
.log .row { padding: var(--row-y) var(--pad-x); gap: var(--sp-4); }
.usr { padding: var(--row-y) var(--pad-x); gap: var(--sp-4); }
.cabc { padding: var(--sp-4) var(--pad-x); gap: var(--sp-4); }
.cabc-m { margin-top: var(--sp-2); gap: var(--sp-1) var(--sp-4); }
.cabc-s { margin-top: var(--sp-3); }
.cabc-a { gap: var(--sp-2); }
.night > div { padding: var(--sp-4) var(--pad-x); gap: var(--sp-3); }
.form > div { padding: var(--row-y) var(--pad-x); }

/* малые таблицы: как на листах ABC — текст влево, числа вправо, шапка так же; края — по полям карточки */
.mini th { padding: var(--sp-2) var(--sp-3); }
.mini td { padding: var(--sp-3); }
.mini th:first-child, .mini td:first-child { padding-left: 0; }
.mini th:last-child, .mini td:last-child { padding-right: 0; }
.mini th.l, .mini td.l { text-align: left; }
.mini td.a-r, .mini th.a-r { text-align: right; }
.acc th, .acc td { padding: var(--sp-3) var(--sp-4); }
.card table.acc th:first-child, .card table.acc td:first-child { padding-left: var(--pad-x); }
.card table.acc th:last-child, .card table.acc td:last-child { padding-right: var(--pad-x); }
.as-t th.a-r, .as-t td.a-r { text-align: right !important; }
.as-t .al-a, .as-t th:last-child { text-align: right !important; }
.as-items .acc td { padding: var(--sp-2) var(--sp-3); }

/* заметки: иконка по центру первой строки текста */
.note { gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); line-height: 20px; }
.note svg.lucide { margin-top: 2px; }
.note.note-bad { background: var(--bad-bg); color: var(--bad); }
.note.note-bad svg.lucide { color: var(--bad); }
.note.fhelp { margin: 0; line-height: 20px; }

/* поля форм: подпись → поле 8, поле → подсказка 4; в сетке поля одного ряда стоят на одной линии,
   даже если подпись в две строки или у соседа есть подсказка */
.fld label { margin-bottom: var(--sp-2); line-height: 1.35; }
.fld small { margin-top: var(--sp-1); line-height: 1.4; }
.fld .drop { margin-bottom: 0; }
.fgrid { gap: var(--sp-4); }
.fgrid > .fld { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; }
.fgrid > .fld > label:first-child { align-self: end; }
.fgrid > .fld > small { align-self: start; }

/* окна: поля 24, блоки внутри 16, кнопки в подвале через 8 */
.mdl-h { padding: var(--sp-6) var(--sp-6) 0; gap: var(--sp-4); }
.mdl-b { padding: var(--sp-5) var(--sp-6) var(--sp-6); gap: var(--sp-4); }
.mdl-f { padding: var(--sp-4) var(--sp-6); gap: var(--sp-2); }
.scopes { gap: var(--sp-2); }
.al-row { margin-top: var(--sp-3); }
.as-tags { margin-top: var(--sp-2); }
.cm-g { column-gap: var(--sp-6); }
.cm-b { margin-bottom: var(--sp-4); }

/* карточка товара */
.dr-h { padding: var(--sp-6); gap: var(--sp-5); }
.dr-t h2 { margin: var(--sp-1) 0 var(--sp-3); }
.dr-ids { margin-top: var(--sp-3); gap: var(--sp-1) var(--sp-4); }
.dr-bd { padding: var(--sp-5) var(--sp-6) var(--sp-7); gap: var(--sp-6); }
.dr-s h4 { margin: 0 0 var(--sp-3); line-height: 1.35; }
.dr-dec { gap: var(--sp-2); padding: var(--sp-4); }
.kv-i { padding: var(--sp-3); }
.dbars { margin-bottom: var(--sp-4); }
.dro-ld { padding: var(--sp-4); }
.dro-sum { margin-bottom: var(--sp-4); }
.dro-lg { margin: var(--sp-3) 0 var(--sp-4); }
.dro-t { margin-top: var(--sp-4); }

/* настройки: меню слева и содержимое — через 24, карточки столбиком через 16 */
.set { gap: var(--sp-6); }
@media (max-width: 1100px) { .set { gap: var(--sp-4); } }
@media (max-width: 768px) { .pg-std > .ph + * { margin-top: var(--sp-4); } .pg-std .kps { gap: var(--sp-2); } .pg-std .kp { padding: var(--sp-3); } }
.mdl-b > .auth-err:empty, .stk > .auth-err:empty { display: none; }

/* «Решение» в «Расчёте отгрузки на WB» — как «Действие», текст обычной насыщенности */
.ac-h.ac-hn { font-weight: 500; }

/* статус пересчёта на листе «Расчёт отгрузки на WB» */
.sw-st:empty { display: none; }
.sw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.sw svg.lucide { width: 16px; height: 16px; }
.sw-run { background: var(--accent-soft); color: var(--accent); }
.sw-run svg.lucide { animation: sw-spin 1s linear infinite; }
.sw-ok { background: var(--good-bg); color: var(--good); }
.sw-bad { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); color: var(--bad); }
@keyframes sw-spin { to { transform: rotate(360deg); } }

/* карточка товара · «Едет на WB — поставки» (лист «Расчёт отгрузки на WB») */
.drs-w { overflow-x: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.drs-t { width: 100%; border-collapse: collapse; font-size: 12px; }
.drs-t th { text-align: left; padding: 6px 6px; font-weight: 600; font-size: 11px; color: var(--ink-3); background: var(--mute-bg); white-space: nowrap; }
.drs-t td { padding: 6px 6px; border-top: 1px solid var(--line-2); vertical-align: top; font-family: var(--font-num); }
.drs-t td:nth-child(2) { font-family: var(--font); min-width: 90px; }
.drs-t .a-r { text-align: right; white-space: nowrap; }
.drs-t .xs { display: block; font-size: 11px; color: var(--ink-3); font-family: var(--font); }
.drs-t .pill { min-width: 0; padding: 2px 6px; font-size: 11px; font-weight: 600; line-height: 1.25; }
.drs-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.drs-sum svg.lucide { width: 16px; height: 16px; color: var(--accent); }
.drs-sum small { color: var(--ink-3); }

.drs-t td:first-child { white-space: nowrap; }

/* ───── Логистика → «FBW и FBS» (api.js, PG.fbofbs): графики заказов по каналам и «закончилось» ───── */
:root { --fbo: #eebb3c; --fbo-d: #b98a12; --fbo-s: #fdf5df; --fbs: #2a9d8f; --fbs-d: #1d7268; --fbs-s: #e2f3f1; --fx-out: #d06a2c; --fx-na: #eceef2; }
.fx { display: flex; flex-direction: column; gap: 16px; }
.fx-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--mute-bg); gap: 2px; }
.fx-seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.fx-seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.fx-seg.sm button { height: 26px; padding: 0 10px; font-size: 12.5px; }
.fx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.fx-ch { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; flex-wrap: wrap; }
.fx-ch > div:first-child { flex: 1 1 320px; min-width: 0; }
.fx-ch h2 { margin: 0; font: 650 15.5px/1.3 var(--font-display); letter-spacing: -.01em; }
.fx-ch p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
.fx-lg { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 16px; font-size: 12.5px; color: var(--ink-2); }
.fx-lg span { display: inline-flex; align-items: center; gap: 6px; }
.fx-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.fx-lg i.ln { height: 3px; border-radius: 2px; width: 16px; }
.fx-chart { position: relative; padding: 6px 8px 10px; min-height: 120px; }
.fx-chart svg { display: block; width: 100%; overflow: visible; user-select: none; }
.fx-chart text { font: 500 11px var(--font-num); fill: var(--ink-3); }
.fx-chart text.fx-nat { font: 600 12px var(--font); fill: var(--ink-3); }
.fx-chart .fx-hit { fill: transparent; cursor: crosshair; }
.fx-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fx-corr { font-size: 12.5px; color: var(--ink-2); background: var(--mute-bg); border-radius: 8px; padding: 5px 10px; }
.fx-corr b { font-family: var(--font-num); }
.fx-tip { position: fixed; z-index: 100; pointer-events: none; background: #0a2540; color: #fff; border-radius: 9px; padding: 9px 12px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .08s; max-width: 360px; left: 0; top: 0; }
.fx-tip b { font-family: var(--font-num); font-weight: 600; }
.fx-tip .fx-tt { font-weight: 700; margin-bottom: 3px; font-size: 13px; }
.fx-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.fx-tip .fx-tm { color: #a9b8cc; font-size: 11.5px; margin-top: 3px; }
table.fx-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fx-t th { text-align: left; font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--th-ink, var(--ink-2)); padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--surface); vertical-align: bottom; max-width: 120px; }
.fx-t td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.fx-t tr:last-child td { border-bottom: 0; }
.fx-t .r, .fx-t th.r { text-align: right; }
.fx-t .n { font-family: var(--font-num); }
.fx-t .na { color: var(--ink-3); font-size: 12px; }
.fx-t tbody tr:hover td { background: var(--surface-2); }
.fx-t tr.bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.fx-dl { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1 var(--font-num); padding: 3px 6px; border-radius: 6px; }
.fx-dl.up { color: var(--good); background: var(--good-bg); } .fx-dl.dn { color: var(--bad); background: var(--bad-bg); } .fx-dl.nt { color: var(--ink-2); background: var(--mute-bg); }
.fx-bar { display: inline-flex; width: 90px; height: 8px; border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 8px; background: var(--fbs); }
.fx-bar i { background: var(--fbo); display: block; }
.fx-help { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-help > div { padding: 12px 18px 16px; border-left: 1px solid var(--line); }
.fx-help > div:first-child { border-left: 0; }
.fx-help h3 { margin: 0 0 6px; font: 650 13.5px/1.3 var(--font); display: flex; align-items: center; gap: 8px; }
.fx-help h3 svg.lucide { width: 16px; height: 16px; color: var(--accent); }
.fx-help p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 1500px) { .fx-help { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-help > div:nth-child(3) { border-left: 0; } .fx-help > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 1100px) { .fx-row2 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .fx-help { grid-template-columns: 1fr; } .fx-help > div { border-left: 0; border-top: 1px solid var(--line); } .fx-help > div:first-child { border-top: 0; } }

/* проценты на столбиках «Заказы по дням» в разделе «Доля заказов FBW/FBS» */
.fx-pl { font-family: 'Roboto Mono', monospace; font-weight: 700; pointer-events: none; }

/* «30 / 60 дней» и выбор месяца рядом — раздел «Доля заказов FBW/FBS» */
.fx-segs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* режим «Наличие» в разделе «Доля заказов FBW/FBS»: круги наличия матрицы на складах WB и ФФ */
svg.fx-pie { display: block; flex: none; overflow: visible; width: auto; max-width: 100%; }
.fx-pie .fx-ps { cursor: pointer; transition: opacity .1s; }
.fx-pie .fx-ps:hover { opacity: .82; }
.fx-pie text.fx-pc1 { font: 700 14px var(--font-num); fill: var(--ink); }
.fx-pie text.fx-pc2 { font: 500 10.5px var(--font); fill: var(--ink-3); }
.fx-av1 { display: flex; align-items: center; gap: 36px; padding: 10px 16px 6px; flex-wrap: wrap; }
.fx-avl { flex: 1 1 360px; min-width: 0; max-width: 760px; }
.fx-avl table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 10px; }
.fx-avl td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fx-avl td:first-child { white-space: normal; }
.fx-avl td.n { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fx-avl tr.fx-ps { cursor: default; } .fx-avl tr.fx-ps:hover td { background: var(--surface-2); }
.fx-avl tr.fx-avs td { border-bottom: 0; font-weight: 650; color: var(--ink); }
.fx-avl i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.fx-avt { font: 650 13.5px/1.3 var(--font); color: var(--ink); }
.fx-avsum { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.fx-avsum b { font-family: var(--font-num); color: var(--ink); }
.fx-avn { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.fx-avd { display: inline-block; font: 600 11px/1 var(--font-num); color: var(--warn); background: var(--warn-bg); border-radius: 5px; padding: 2px 5px; margin-left: 4px; vertical-align: 1px; }
.fx-avg { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px 12px; padding: 8px 8px 4px; }
.fx-avc { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 6px; border-radius: 10px; }
.fx-avc:hover { background: var(--surface-2); }
.fx-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-seg button svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.fx-avl tr.fx-avb td { color: var(--ink-3); }
.fx-avl td .bt { height: 28px; font-size: 12.5px; }
.fx-avl td .bt svg { width: 14px; height: 14px; }
.fx-avhow { margin: 0 16px 14px; padding: 9px 12px; border-radius: 8px; background: var(--mute-bg); font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }


/* «Доля заказов FBW/FBS»: вывод под графиком потерь, таблица «Неделя к неделе», точка в плитке */
.fx-kd { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: 0; }
.fx-from { margin: 4px 16px 12px; font-size: 12px; color: var(--ink-3); }
.fx-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 4px 16px 14px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.fx-verdict svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.fx-verdict b { color: var(--ink); }
.fx-verdict.bad { background: var(--bad-bg); border-color: #f6c9c9; } .fx-verdict.bad svg { color: var(--bad); }
.fx-verdict.good { background: var(--good-bg); border-color: #bfe5d3; } .fx-verdict.good svg { color: var(--good); }
.fx-wkw { overflow-x: auto; padding: 0 16px 12px; }
.fx-wk { width: 100%; min-width: 1000px; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.fx-wk th { text-align: right; font-weight: 600; font-size: 12px; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: bottom; line-height: 1.3; white-space: normal; }
.fx-wk td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-wk th:first-child, .fx-wk td:first-child { text-align: left; }
.fx-wk td:first-child { font-family: var(--font); font-weight: 600; }
.fx-wk tr:last-child td { border-bottom: 0; }
.fx-wk .na { color: var(--ink-3); font-family: var(--font); font-size: 12px; font-weight: 400; }
.fx-sh { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.fx-sh b { font-weight: 600; }
.fx-shb { display: inline-flex; width: 56px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--fx-na); }
.fx-shb i { display: block; height: 100%; }
.fx-chip { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.fx-chip.up { background: var(--good-bg); color: var(--good); } .fx-chip.dn { background: var(--bad-bg); color: var(--bad); } .fx-chip.eq { background: var(--mute-bg); color: var(--ink-2); }
.fx-verdict .na { color: var(--ink-3); }
/* два графика рядом: шапка, легенда, график и подпись — общими строками сетки (subgrid), поэтому стоят ровно при любой длине текста */
.fx-row2 { grid-template-rows: auto auto auto auto; }
.fx-row2 > .fx-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.fx-row2 > .fx-card > .fx-ch { align-items: flex-start; }
@media (max-width: 1100px) { .fx-row2 { grid-template-rows: none; } .fx-row2 > .fx-card { display: block; grid-row: auto; } }
.fx-ch .bt svg { width: 15px; height: 15px; }
.fx-ltop { margin: 0 16px 16px; }
.fx-ltt { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.fx-lgrid { display: grid; grid-template-columns: repeat(20, minmax(50px, 1fr)); gap: 5px; overflow-x: auto; padding-bottom: 2px; }   /* строго одна строка: не влезает — прокрутка вбок */
@media (max-width: 700px) { .fx-ch .bt { white-space: normal; height: auto; min-height: 34px; text-align: left; } }
.fx-lit { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; min-width: 0; text-align: center; }
.fx-lit:hover { background: var(--surface-2); }
.fx-lit img, .fx-lit > i { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 5px; background: var(--fx-na); }
.fx-lin { display: flex; flex-direction: column; min-width: 0; font-size: 11px; line-height: 1.3; }
.fx-lin b { font-family: var(--font-num); font-weight: 600; }
.fx-lin small { display: none; }   /* код продавца и предмет — в подсказке при наведении */
.fx-lr { font: 600 12px/1.2 var(--font-num); color: var(--bad); white-space: nowrap; }
.fx-lr small { display: block; font: 500 10px var(--font); color: var(--ink-3); }
.fx-lst { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.fx-lst > span { position: relative; padding-left: 14px; }
.fx-lst > span::before { content: '•'; position: absolute; left: 2px; color: var(--ink-3); }
.fx-verdict > span > .na { display: block; }

/* «Сезонность»: тепловая карта по сезонам — шапки блоков с анимированными значками, клетки цветом сезона */
.t th.b-szw .bh > svg.lucide:first-child { animation: sz-snow 6s linear infinite; }
.t th.b-szs .bh > svg.lucide:first-child { animation: sz-bloom 2.8s ease-in-out infinite; transform-origin: 50% 90%; }
.t th.b-szu .bh > svg.lucide:first-child { animation: sz-sun 9s linear infinite; }
.t th.b-sza .bh > svg.lucide:first-child { animation: sz-leaf 3.2s ease-in-out infinite; transform-origin: 20% 80%; }
.t td .hz { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; border-radius: 7px; font: 600 11px var(--font-num); color: var(--ink); background: color-mix(in srgb, var(--sz) var(--v), transparent); }
.t td .hz-pk { background: var(--sz); color: #fff; }
.t td .hz-pk::after { content: '★'; position: absolute; top: 1px; right: 4px; font-size: 8.5px; opacity: .9; }
.t td .hz-now { box-shadow: inset 0 0 0 2px var(--accent); }
.legend .lg-sz { display: inline-flex; align-items: center; gap: 5px; color: var(--sz); font-weight: 600; }
.legend .lg-sz svg.lucide { width: 14px; height: 14px; }
.lg-sz.sz-winter svg.lucide { animation: sz-snow 6s linear infinite; } .lg-sz.sz-spring svg.lucide { animation: sz-bloom 2.8s ease-in-out infinite; }
.lg-sz.sz-summer svg.lucide { animation: sz-sun 9s linear infinite; } .lg-sz.sz-autumn svg.lucide { animation: sz-leaf 3.2s ease-in-out infinite; }
.t .mcol { padding-left: 3px !important; padding-right: 3px !important; }
.t .mcol-s { padding-left: 15px !important; background-image: linear-gradient(var(--line), var(--line)); background-size: 1px 60%; background-position: 7px center; background-repeat: no-repeat; }   /* «Сезонность»: между сезонами — шире и тонкая черта */
.t td.mcol .hz { font-size: 10.5px; }
.t tr.tot td.mcol .tz { display: inline-flex; flex-direction: column; line-height: 1.1; } .t tr.tot td.mcol .tz small { font: 500 9.5px var(--font); color: var(--ink-3); }
/* «Сезонность»: клетка месяца — число; месяц пика на мягкой плашке цвета сезона со ★, текущий месяц в синей рамке */
.t td.cc-wrap .cc-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.t td.cc-wrap { white-space: normal; }
.t td .hzA { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 100%; height: 30px; padding: 0 4px; border-radius: 7px; font: 500 12px var(--font-num); color: var(--ink); white-space: nowrap; }
.t td .hz0 { color: var(--ink-3); font-weight: 400; }
.t td .hzA.pk { background: color-mix(in srgb, var(--sz) 16%, transparent); color: color-mix(in srgb, var(--sz) 80%, #000); font-weight: 700; }
.t td .hzA.pk::after { content: '★'; position: absolute; top: -2px; right: 1px; font-size: 8.5px; color: var(--sz); }
.t td .hzA.now { box-shadow: inset 0 0 0 1.5px var(--accent); }
.t tr.tot td.mcol .tz small { white-space: nowrap; }
.t td .nw { display: inline-block; white-space: nowrap; font-size: 12.5px; }   /* «Сезонность»: слова в одну строку */
.t td .nw.code { font: 400 12px var(--font-num); }
.t td .vend2.nw { display: flex; flex-direction: column; white-space: nowrap; }
.t td .nml { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }   /* «Сезонность»: артикул и подпись в одну строку */
.t td .nml small { font-size: 11px; color: var(--ink-3); }
.t td .nml small b { color: var(--bad); font-weight: 600; }
.t td .w2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.3; font-size: 12.5px; }   /* «Сезонность»: длинное — на 2-ю строку */
.t td .w2.code { font: 400 12px/1.3 var(--font-num); word-break: break-all; }
.t td .vend2.w2v { display: flex; flex-direction: column; white-space: normal; word-break: break-all; }
.t td .nml { gap: 6px; }
.t td .nm2 { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }   /* «Сезонность»: артикулы двух кабинетов — по строке */
.t td .nm2 > span { display: inline-flex; align-items: center; gap: 6px; }
.t td .nm2 .cab { width: 7px; height: 7px; flex: none; }
.t td .nm2 .nil { font-size: 11.5px; }
.t td .nml .nm svg { display: none; }   /* «Сезонность»: без значка ссылки — подпись ближе к артикулу (ссылка остаётся) */
.t td .nmst { display: inline-flex; flex-direction: column; gap: 2px; white-space: nowrap; line-height: 1.25; }   /* «Сезонность»: артикул и под ним группа — как в ABC */
.t td .nmst small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
.t td .nmst small b { color: var(--bad); font-weight: 600; }
.t td .nmst .nm svg { display: none; }
.t td .se.se-ns { grid-template-columns: 26px 1fr; }   /* «Сезон» без мини-графика — без лишнего отступа справа */
.t tr.tot td .tz { display: inline-flex; flex-direction: column; line-height: 1.1; align-items: flex-end; } .t tr.tot td .tz small { font: 500 9.5px var(--font); color: var(--ink-3); }
.t td .se-ns .se-t b, .t td .se-ns .se-t small { white-space: normal; overflow: visible; text-overflow: clip; }   /* «Сезонность»: если не влезает — на 2-ю строку, без многоточия */
.t td .se-ns .se-t { line-height: 1.15; }
.t td .se-ns .se-t b { font-size: 12.5px; }
.cost-miss { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
.cost-miss span { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .cost-miss b { font-family: var(--font-num); font-weight: 600; } .cost-miss small { color: var(--ink-3); }
.cost-miss .cab { width: 8px; height: 8px; }

/* «Расчёт отгрузки на ФФ»: куда везти — обычным текстом; настройки — таблица складов */
.ff-to { color: var(--ink-2); white-space: normal; }
.ff-set { margin-bottom: 4px; }
.ff-set td { padding: 6px 10px; }
.ff-set td .inp { width: 110px; margin-left: auto; }
.kps.ffk .kp-v { white-space: nowrap; }
/* «Заказов в день» на листе ФФ: от красного (мало) к зелёному (много), мягкие тона */
.ff-hm { display: inline-block; min-width: 34px; padding: 2px 7px; border-radius: 6px; font-weight: 700; text-align: right;
  background: hsl(var(--h) 62% 92%); color: hsl(var(--h) 55% 28%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ff-hm { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 60% 78%); } }
:root[data-theme="dark"] .ff-hm { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 60% 78%); }
.ff-pd { gap: 4px; padding-right: 4px; } .ff-pd .ff-hm { margin-right: 0; }
/* плитки складов на листе отгрузки на ФФ: три строки «что везти» и снизу серая плашка с кольцом покрытия матрицы A */
.ff-cov { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; background: var(--mute-bg); border: 1px solid var(--line); border-radius: 10px; }
.ff-cov small { font: 500 11.5px/1.35 var(--font); color: var(--ink-3); }
.ff-cov small b { color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.z10.ff-ring { width: 40px; height: 40px; font-size: 11px; }
.z10.ff-ring svg.rg circle { stroke-width: 4; }
.ffk .kp-s { display: flex; flex-direction: column; gap: 2px; }
.ff-ln { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.ff-ln b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ff-cl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: 500 11.5px/1.35 var(--font); color: var(--ink-3); }
.ff-cl > span { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.ff-cl b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.ff-cov { padding: 8px; gap: 8px; } .ff-cl > span { gap: 6px; }
.tg-ok { background: var(--good-bg); color: var(--good); }   /* «Дубли карточек»: разные цвета — не дубль */
/* боковое меню: без горизонтальной полосы прокрутки — длинное название пункта («Есть только в одном ЛК» с числом) переносится на 2 строки */
.snav { overflow-x: hidden; }
.snav-i { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.snav-i span { white-space: normal; min-width: 0; line-height: 1.25; }
.side.rail .snav-i { min-height: 40px; padding-top: 0; padding-bottom: 0; }
/* «Резерв 1С»: «взять в резерв» — в одну строку, по центру ячейки */
.t td .rsv-take { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; box-sizing: border-box; white-space: nowrap; padding: 3px 8px; border-radius: 7px;
  background: var(--bad-bg); color: var(--bad); font: 600 11.5px/1.2 var(--font); }
.t td .rsv-take svg.lucide { width: 13px; height: 13px; flex: none; }