/* Finansist — оформление. Свои цвета, без внешних шрифтов и библиотек.
   Таблицы — с чёткой сеткой, как в учётных программах: видны и строки, и столбцы. */
:root {
  --bg: #e9ecf1;
  --panel: #ffffff;
  --ink: #18202e;
  --ink-soft: #4f596b;
  --line: #c9d0db;          /* рамки ячеек */
  --line-strong: #8e9ab0;   /* разделитель шапки и итогов */
  --head: #26344f;          /* шапка таблиц */
  --head-ink: #ffffff;
  --zebra: #edf1f7;
  --hover: #e3ecfd;
  --section: #e6ebf4;       /* строки разделов */
  --total: #d6dfee;         /* строки остатков и итогов */
  --side: #1c2638;          /* боковая панель */
  --side-ink: #c9d2e3;
  --accent: #2f5bd3;
  --accent-soft: #e3eafc;
  --pos: #12703f;
  --neg: #b42318;
  --brand-ink: #ffffff;
  --side-hover: #28354d;
  --side-hover-ink: #ffffff;
  --side-muted: #7f8ca6;
  --side-line: #33415c;
  --side-link: #9fb6ff;
  --accent-ink: #ffffff;
  --accent-hover: #2549b3;
  --top-line: #d3d9e3;
  --control-line: #aeb8c8;
  --control-hover: #f2f4f8;
  --input-bg: #ffffff;
  --head-sep: #3c4c6b;
  --head-edge: #0f1828;
  --chip: #e6e9ef;
  --shadow: 0 1px 2px rgba(20, 30, 50, .06);
  --radius: 6px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
* { box-sizing: border-box; }
/* Скрытое атрибутом hidden не показывать, даже если у элемента свой display (подписи форм — flex) */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Каркас: тёмная боковая панель + рабочая область ---------- */
.layout { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--side-ink); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
        position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 700; font-size: 19px; letter-spacing: .3px; color: var(--brand-ink); margin: 0 10px 14px; }
.brand.big { font-size: 26px; margin: 0 0 4px; color: var(--accent); }
.side nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side nav a, .side nav .soon { padding: 8px 12px; border-radius: 5px; color: var(--side-ink); }
.side nav a:hover { background: var(--side-hover); color: var(--side-hover-ink); text-decoration: none; }
.side nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.side .soon { color: var(--side-muted); cursor: default; }
.nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--side-muted); margin: 16px 12px 4px; }
/* Разделы меню сворачиваются: нажатие на название раздела; раздел текущей страницы открыт */
.nav-sec { display: flex; flex-direction: column; gap: 2px; }
.nav-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
                     margin: 6px 0 2px; padding: 7px 12px; border-radius: 5px; user-select: none; }
.nav-sec > summary::-webkit-details-marker { display: none; }
.nav-sec > summary::after { content: "›"; font-size: 15px; line-height: 1; transition: transform .15s; }
.nav-sec[open] > summary::after { transform: rotate(90deg); }
.nav-sec > summary:hover { background: var(--side-hover); color: var(--side-hover-ink); }
.nav-sec.has-on > summary { color: var(--side-ink); }
.nav-sec > a { display: block; padding-left: 20px; }
.logout { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--side-line); padding: 12px 8px 0; }
.who { color: var(--side-ink); font-size: 13px; }
.side button.link { color: var(--side-link); }

/* Переключатель темы: кружки с цветами боковой панели и акцента каждой темы */
.themes { display: flex; align-items: center; gap: 7px; padding: 10px 8px; border-top: 1px solid var(--side-line); }
.themes-label { font-size: 12px; color: var(--side-muted); margin-right: auto; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--side-line); padding: 0; cursor: pointer;
          background: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%); }
.swatch:hover { transform: scale(1.12); }
.swatch.on { border-color: var(--side-hover-ink); box-shadow: 0 0 0 2px var(--accent); }
.sw-blue { --sw-a: #1c2638; --sw-b: #2f5bd3; }
.sw-graphite { --sw-a: #26282c; --sw-b: #0f8a8c; }
.sw-emerald { --sw-a: #143027; --sw-b: #1c7a56; }
.sw-light { --sw-a: #ffffff; --sw-b: #2f5bd3; }
.sw-dark { --sw-a: #0d1117; --sw-b: #4f7fff; }

.main { padding: 18px 24px 40px; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
       padding-bottom: 12px; border-bottom: 2px solid var(--top-line); }
.top h1 { font-size: 21px; margin: 0; }

/* ---------- Карточки, формы, кнопки ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
        box-shadow: var(--shadow); }
.btn { display: inline-block; border: 1px solid var(--control-line); background: var(--panel); color: var(--ink); padding: 7px 14px;
       border-radius: 5px; font: inherit; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--control-hover); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { background: #fff; border-color: var(--neg); color: var(--neg); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn.wide { width: 100%; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
button.link:hover { text-decoration: underline; }
form.inline { display: inline; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.form.narrow { max-width: 440px; }
.form label, .filters label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; }
.form label.check, .filters label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-weight: 400; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); padding: 6px 9px; border: 1px solid var(--control-line);
                          border-radius: 5px; background: var(--input-bg); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
legend { color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 0 4px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.form-actions { display: flex; gap: 8px; }
.hint { color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.alert { padding: 10px 12px; border-radius: 5px; }
.alert.err { background: #fdecea; color: #8e2a1e; border: 1px solid #f0b4ab; margin-bottom: 12px; }
.alert.ok { background: #e4f3ea; color: #145233; border: 1px solid #a9d7bb; margin-bottom: 12px; }
.lead { max-width: 820px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; }
.upload { margin-top: 18px; }
.upload h2 { font-size: 15px; margin: 0; }
.backup-schedule { margin-bottom: 16px; }
.backup-schedule h2 { font-size: 15px; margin: 0; }
form.restore { display: inline-flex; gap: 6px; align-items: center; margin-left: 10px; }
form.restore label.check { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-soft); }
.danger-zone { margin-top: 18px; display: flex; gap: 14px; align-items: center; max-width: 760px;
               padding: 12px 16px; border: 1px dashed #e2a399; border-radius: var(--radius); background: #fff; }

/* ---------- Панель фильтров над таблицей ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; padding: 12px 14px;
           background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.filters select { max-width: 230px; }
.filters .hint { align-self: center; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.summary span { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 5px 10px; color: var(--ink-soft); }
.summary b { color: var(--ink); }

/* ---------- Таблицы: полная сетка ----------
   border-collapse: separate — чтобы рамки не пропадали у закреплённой шапки при прокрутке.
   Рамка у каждой ячейки справа и снизу, у самой таблицы — слева и сверху (через обёртку). */
.table-wrap { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
              overflow: auto; max-height: calc(100vh - 230px); box-shadow: var(--shadow); }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.grid th, .grid td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.grid th:last-child, .grid td:last-child { border-right: 0; }
.grid th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--head-ink); background: var(--head);
           padding: 9px 10px; position: sticky; top: 0; z-index: 2; border-right-color: var(--head-sep); border-bottom: 2px solid var(--head-edge);
           white-space: nowrap; }
.grid th.num { text-align: right; }
.grid td { padding: 6px 10px; vertical-align: top; background: inherit; }
.grid tbody tr { background: var(--panel); }
.grid tbody tr:nth-child(even) { background: var(--zebra); }
.grid tbody tr:hover { background: var(--hover); }
.grid tfoot td { font-weight: 700; background: var(--total); border-top: 2px solid var(--line-strong); position: sticky; bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 700; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted, tr.muted td { color: #8a93a3; }
.empty { text-align: center; color: var(--ink-soft); padding: 28px; }
.row-actions a, .row-actions button { margin-left: 10px; font-size: 13px; }
.row-actions a:first-child { margin-left: 0; }
/* Комментарий — одна строка, полный текст во всплывающей подсказке */
.grid td.comment { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--chip); color: var(--ink-soft); }
.src-manual { background: #dfe8ff; color: #1f45a8; }
.src-bank { background: #fff0d6; color: #8a5a00; }
.src-wb { background: #f1e3f8; color: #6f2490; }
.src-ozon { background: #dfeaff; color: #1b55b3; }
.grid tbody tr.excluded, .grid tbody tr.excluded:nth-child(even) { background: #fff6e5; }
.journal td.amount { font-weight: 600; }
.amount-link { color: inherit; border-bottom: 1px dashed currentColor; }
.amount-link:hover { text-decoration: none; border-bottom-style: solid; }
.journal td.comment { max-width: 190px; }
.journal td.art { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journal td.acc { min-width: 200px; }

.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: var(--chip); color: var(--ink-soft); margin-left: 4px; }
.tag.light { background: transparent; border: 1px solid var(--line); }
.tag.mp-wb { background: #f1e3f8; color: #6f2490; }
.tag.mp-ozon { background: #dfeaff; color: #1b55b3; }
.kind { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.kind-income { background: #dff1e6; color: var(--pos); }
.kind-expense { background: #fbe4e1; color: var(--neg); }
.kind-transfer { background: var(--chip); color: var(--ink-soft); }

/* ---------- ДДС: закреплённый первый столбец, разделы и остатки выделены ---------- */
.dds { min-width: 1400px; }
.dds .sticky { position: sticky; left: 0; z-index: 1; min-width: 270px; background: inherit; border-right: 2px solid var(--line-strong); }
.dds th.sticky { z-index: 3; background: var(--head); }
.dds tbody tr, .dds tbody tr:nth-child(even) { background: var(--panel); }
.dds tbody tr:hover { background: var(--hover); }
.dds tr.group { cursor: pointer; font-weight: 600; background: var(--section); }
.dds tbody tr.group:nth-child(even) { background: var(--section); }
.dds tr.group td.sticky::before { content: "▸ "; color: var(--ink-soft); }
.dds tr.group.open td.sticky::before { content: "▾ "; }
.dds tr.total, .dds tbody tr.total:nth-child(even) { background: var(--total); font-weight: 700; }
.dds tr.total td { border-top: 2px solid var(--line-strong); }
.dds td.sub { padding-left: 32px; color: var(--ink-soft); font-weight: 400; }

/* ---------- Сводка по прибыли: прибыль выделена, итоги разделов раскрываются ---------- */
.pnl tr.total, .pnl tbody tr.total:nth-child(even) { background: var(--section); font-weight: 600; }
.pnl tr.total td { border-top: 0; }
.pnl tr.profit, .pnl tbody tr.profit:nth-child(even) { background: var(--total); font-weight: 700; }
.pnl tr.profit td { border-top: 2px solid var(--line-strong); }
.pnl tr.section { font-weight: 600; }
.pnl tr.item td.sticky, .pnl tr.info td { color: var(--ink-soft); }
.pnl tr.info td.sticky { font-style: italic; }
.pnl td.lvl1 { padding-left: 28px; }
.pnl td.lvl2 { padding-left: 48px; }
.pnl td:last-child, .pnl th:last-child { font-weight: 700; border-left: 2px solid var(--line-strong); }

/* ---------- Заказы ---------- */
.orders td .sub { display: block; }
.defect-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 14px; padding-top: 12px;
               border-top: 1px solid var(--line); }
.defect-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.defect-form .hint { flex-basis: 100%; margin: 0; }

.ad-key { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--line); }
.ad-key h3 { font-size: 14px; margin: 0 0 6px; }

/* ---------- Баннер: нужно действие владельца ---------- */
.banner { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px;
          align-items: center; }
.banner.warn { background: #fff4d6; border: 1px solid #e8c766; color: #5c4400; }
.banner a { font-weight: 600; }

/* ---------- Сводка по товарам ---------- */
.products { min-width: 1500px; }
.products td.sticky .sub { display: block; }
.products td.sub-row { padding-left: 30px; }
.abc span { display: inline-block; width: 16px; text-align: center; font-weight: 700; font-size: 12px; }
.abc-a { color: var(--pos); }
.abc-b { color: var(--ink); }
.abc-c { color: var(--ink-soft); }

/* ---------- Поставки ---------- */
.supplies td .sub, .grid td .sub { display: block; }
.supply-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 14px; }
.supply-all { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.supply-all label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-soft); }
.cost-input { width: 110px; text-align: right; }

.pager { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 14px; color: var(--ink-soft); }
.pager a { background: var(--panel); border: 1px solid var(--line); padding: 5px 12px; border-radius: 5px; }

/* ---------- Вход ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--side); }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); font-size: 13px; }
.muted { color: var(--ink-soft); margin: 0; }

.mobile-bar, .filters-toggle { display: none; }
@media (max-width: 760px) {
  /* Телефон: сверху строка с кнопкой меню; меню выезжает слева поверх страницы */
  .mobile-bar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 40; height: 48px;
                padding: 0 10px; background: var(--side); color: var(--side-ink); }
  .menu-toggle { border: 0; background: none; color: var(--brand-ink); font-size: 24px; line-height: 1; padding: 6px 8px;
                 cursor: pointer; }
  .mobile-brand { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
  .mobile-title { color: var(--side-ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .layout { grid-template-columns: 1fr; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(300px, 84vw); height: 100vh;
          transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; box-shadow: 4px 0 20px rgba(0, 0, 0, .25); }
  body.menu-open .side { transform: none; }
  body.menu-open { overflow: hidden; }
  .menu-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(10, 15, 25, .45); }
  .main { padding: 12px 12px 40px; }
  .top h1 { font-size: 18px; }
  .cols { grid-template-columns: 1fr; }
  .table-wrap { max-height: none; }
  /* Фильтры свёрнуты: видна кнопка «Фильтры» и краткая строка того, что выбрано */
  .filters-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--control-line);
                    border-radius: 6px; background: var(--input-bg); color: var(--ink); padding: 8px 10px; font: inherit;
                    text-align: left; cursor: pointer; }
  .filters-toggle b { white-space: nowrap; }
  .filters-toggle span { color: var(--ink-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  form.filters.collapsed > :not(.filters-toggle) { display: none !important; }
}

/* ---------- Цветовые темы. Включаются атрибутом data-theme у <html>; без атрибута — синяя ---------- */
html[data-theme="graphite"] {
  --bg: #e7e8e7; --panel: #ffffff; --ink: #1d2024; --ink-soft: #54595f;
  --line: #ccd0d3; --line-strong: #8d9399; --head: #33373d; --head-ink: #ffffff; --head-sep: #4a4f57; --head-edge: #16181b;
  --zebra: #f1f2f2; --hover: #ddf1f1; --section: #e8eaeb; --total: #d8dcdf;
  --side: #26282c; --side-ink: #cfd3d7; --side-hover: #33363b; --side-muted: #868c94; --side-line: #3b3f45; --side-link: #7fd6d6;
  --accent: #0f8a8c; --accent-hover: #0b6f71; --accent-soft: #d6efef; --top-line: #d2d5d7;
}
html[data-theme="emerald"] {
  --bg: #e6ece8; --panel: #ffffff; --ink: #17241e; --ink-soft: #4d5e56;
  --line: #c4d3cb; --line-strong: #7f9c8f; --head: #1d4a3c; --head-ink: #ffffff; --head-sep: #2f604f; --head-edge: #0c241c;
  --zebra: #eef4f0; --hover: #dcf0e5; --section: #e2ece6; --total: #cfe0d6;
  --side: #143027; --side-ink: #c4d8cf; --side-hover: #1f4236; --side-muted: #7f9e91; --side-line: #2a4a3f; --side-link: #8fe0b8;
  --accent: #1c7a56; --accent-hover: #155f43; --accent-soft: #d8eee3; --top-line: #cfdbd4;
}
html[data-theme="light"] {
  --bg: #f2f4f7; --panel: #ffffff; --ink: #18202e; --ink-soft: #4f596b;
  --line: #c3ccd9; --line-strong: #7f8ca3; --head: #dbe3ef; --head-ink: #18202e; --head-sep: #b9c4d6; --head-edge: #7f8ca3;
  --zebra: #f4f7fb; --hover: #e4edfd; --section: #eaeff7; --total: #dbe3f0;
  --side: #ffffff; --side-ink: #2b3446; --brand-ink: #2f5bd3; --side-hover: #eef2f9; --side-hover-ink: #18202e;
  --side-muted: #8590a3; --side-line: #dfe4ec; --side-link: #2f5bd3; --top-line: #dfe4ec;
}
html[data-theme="light"] .side { border-right: 1px solid #d5dbe5; }
html[data-theme="dark"] {
  --bg: #12161c; --panel: #1a2029; --ink: #e4e8ef; --ink-soft: #a3adbd;
  --line: #2f3845; --line-strong: #4c586b; --head: #0d1117; --head-ink: #e9edf5; --head-sep: #262e3a; --head-edge: #000000;
  --zebra: #1f2630; --hover: #263247; --section: #222a35; --total: #2a3445;
  --side: #0d1117; --side-ink: #b9c3d4; --side-hover: #1a2230; --side-muted: #6f7b8f; --side-line: #222a35; --side-link: #8eb0ff;
  --accent: #4f7fff; --accent-hover: #3d6ae6; --accent-soft: #22304d; --top-line: #262e3a;
  --control-line: #3a4556; --control-hover: #232b37; --input-bg: #141a22; --chip: #2a3240;
  --pos: #4cc38a; --neg: #ff7b6b; --shadow: none;
}
html[data-theme="dark"] input[type="date"] { color-scheme: dark; }
/* Тёмная тема: плашки и подсветки строк, у которых свои светлые цвета */
html[data-theme="dark"] .banner.warn, html[data-theme="dark"] .doubtful { background: #3a3017; border-color: #7a6424; color: #f1dc9c; }
html[data-theme="dark"] .alert.err, html[data-theme="dark"] .status.err { background: #3d1f1c; color: #ffb4a8; border-color: #6e322b; }
html[data-theme="dark"] .alert.ok { background: #17352a; color: #a6e3c3; border-color: #2c5e47; }
html[data-theme="dark"] .grid tbody tr.excluded, html[data-theme="dark"] .grid tbody tr.check,
html[data-theme="dark"] .grid tbody tr.check:nth-child(even) { background: #332a14; }
html[data-theme="dark"] .src-manual, html[data-theme="dark"] .src-ozon, html[data-theme="dark"] .tag.mp-ozon { background: #22304d; color: #9fbcff; }
html[data-theme="dark"] .src-bank { background: #3a3017; color: #f1dc9c; }
html[data-theme="dark"] .src-wb, html[data-theme="dark"] .tag.mp-wb { background: #3a2547; color: #e0b3f5; }
html[data-theme="dark"] .kind-income { background: #17352a; }
html[data-theme="dark"] .kind-expense { background: #3d1f1c; }
html[data-theme="dark"] .btn.danger { background: transparent; }
html[data-theme="dark"] .warn-text { color: #f1dc9c !important; }
/* ---------- Выписки банков ---------- */
.tabs { display: flex; gap: 4px; margin: 0 0 10px; }
.tabs a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink-soft); }
.tabs a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.status { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--chip); color: var(--ink-soft); }
.status.ok { background: #dff1e6; color: #12703f; }
.status.warn { background: #fff0d0; color: #8a5a00; }
.grid td.center { text-align: center; }
.grid .sub { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; max-width: 420px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-inline { font-size: 12px; color: var(--ink-soft); }
.warn-text { color: #8a5a00 !important; }
.draft select { max-width: 210px; }
.draft .wide-input { width: 220px; }
.draft td.who-col { max-width: 440px; }
.grid tbody tr.dup, .grid tbody tr.dup:nth-child(even) { background: var(--zebra); color: var(--ink-soft); }
.grid tbody tr.check, .grid tbody tr.check:nth-child(even) { background: #fff7e0; }
.grid tbody tr.saved td { color: var(--ink-soft); }
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; align-items: center; }
.inline-flex { display: inline-flex; gap: 12px; align-items: center; }

/* ---------- Окно операции поверх журнала (как в MPFinAssist) ---------- */
body.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(12, 18, 30, .5); display: flex;
                  justify-content: center; align-items: flex-start; padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain; }
.modal { width: 100%; max-width: 520px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong);
         border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-close { font-size: 28px; line-height: 1; color: var(--ink-soft); padding: 0 4px; }
.modal-close:hover { color: var(--ink); text-decoration: none; }
.modal-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.modal-body .alert { margin: 0; }
.op-fields { display: flex; flex-direction: column; gap: 12px; }
.modal-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.btn.save { background: var(--pos); border-color: var(--pos); color: #fff; font-weight: 600; padding: 8px 20px; }
.btn.save:hover { filter: brightness(.92); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.modal-delete { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 18px;
                border-top: 1px dashed var(--line); font-size: 13px; }
.modal-delete .check { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); }

/* Поле в рамке с подписью внутри, сверху */
.mf { position: relative; display: block; }
.mf > span, .mf > label { position: absolute; top: 5px; left: 11px; z-index: 1; font-size: 11.5px; font-weight: 400;
                          color: var(--ink-soft); pointer-events: none; }
.mf > input, .mf > select, .mf > textarea, .mf > .picker-input { display: block; width: 100%; padding: 21px 10px 6px;
                          min-height: 48px; border-radius: 6px; }
.mf > textarea { resize: vertical; min-height: 76px; }
.mf-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.mf-checks .check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.mf-checks + .mf { margin-top: 10px; }
.mf-row { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }

/* Выбор из списка с поиском: статья и товар */
.picker-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5; max-height: 320px; overflow-y: auto;
               margin: 0; padding: 4px 0; list-style: none; background: var(--panel); border: 1px solid var(--line-strong);
               border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.picker-list li { padding: 6px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.picker-list li.group { cursor: default; padding: 6px 12px 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
                        color: var(--ink-soft); }
.picker-list li.active { background: var(--accent); color: var(--accent-ink); }
.picker-list li.active .kind-tag, .picker-list li.active .sub-inline { color: var(--accent-ink); }
.picker-list li.none { cursor: default; color: var(--ink-soft); }
.kind-tag { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.kind-tag.income { color: var(--pos); }
.kind-tag.expense { color: var(--neg); }

@media (max-width: 760px) {
  .modal-backdrop { padding: 8px; }
  .mf-row { grid-template-columns: 1fr; }
}

/* ---------- Маркетплейсы ---------- */
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.shop-card h2 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.mp { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #fff; }
.mp-wb { background: #8a1fb4; }
.mp-ozon { background: #005bff; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0 0 12px; font-size: 13.5px; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.token-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 8px 0; }
.token-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; color: var(--ink-soft);
                    font-size: 12.5px; font-weight: 600; }
details.replace { margin: 4px 0 8px; font-size: 13px; }
details.replace summary { cursor: pointer; color: var(--accent); }
.job, .coverage { margin: 8px 0 0; font-size: 13.5px; }
.status.err { background: #fbe4e1; color: #b42318; }
.danger-link { color: var(--neg); }
@media (max-width: 760px) { .shop-cards { grid-template-columns: 1fr; } }
.ok-text { color: var(--pos); font-weight: 700; }
.err-text { color: var(--neg); font-weight: 700; }
.check-item { white-space: nowrap; }
/* Платёжный календарь */
.calendar td.sub-row { padding-left: 30px; }
.calendar tr.weekend > td.sticky { color: var(--ink-soft); }
.calendar tr.today > td { box-shadow: inset 0 2px 0 var(--accent); }
.calendar tr.child.planned > td { background: var(--chip); }
.planned-form { max-width: 520px; }
.banner.overdue { display: block; }
.banner.overdue ul { margin: 6px 0 0; padding-left: 18px; }
/* Баланс */
.balance td.lvl0 { font-weight: 700; }
.balance td.lvl3 { padding-left: 68px; }
.balance tr.section td { background: var(--section); letter-spacing: .04em; }
.dds.calendar { min-width: 0; width: auto; }
.dds.balance { min-width: 0; width: 100%; max-width: 1100px; }
.balance td.sticky { min-width: 380px; max-width: 560px; }
.balance td .sub { max-width: 560px; font-weight: 400; white-space: normal; }
.balance td.num, .calendar td.num { min-width: 130px; }
/* Партии товара */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.form-grid label.check { align-self: end; }
.batch-head { margin-bottom: 14px; }
.batch-cost { margin: 12px 0 18px; max-width: 760px; }
.batch-cost h3, .card h3 { margin: 0 0 8px; font-size: 15px; }
table.grid.compact td { padding: 4px 8px; }
table.grid tr.sub-total td { border-top: 2px solid var(--line-strong); }
.batch-items input.num-input, table.grid input.num-input { width: 84px; text-align: right; }
h2#items, h2#ops, h2#plan { font-size: 17px; margin: 20px 0 8px; }
/* Чистые активы */
.net-head { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 14px; }
.net-main, .net-why { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.net-main b { font-size: 26px; }
.net-main.pos b, b.pos { color: var(--pos); }
.net-main.neg b, b.neg { color: var(--neg); }
.net-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.net-chart svg { width: 100%; max-width: 900px; height: auto; display: block; }
.net-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.net-chart .zero-line { stroke: var(--line-strong); stroke-width: 1.5; }
.net-chart .tick { font-size: 11px; fill: var(--ink-soft); }
.net-chart .bar-pos { fill: var(--pos); opacity: .75; }
.net-chart .bar-neg { fill: var(--neg); opacity: .75; }
.net-chart .line-assets { fill: none; stroke: var(--accent); stroke-width: 2; }
.net-chart .line-debts { fill: none; stroke: #c07a1a; stroke-width: 2; stroke-dasharray: 5 4; }
.net-chart .key { display: inline-block; width: 18px; height: 10px; margin: 0 4px 0 10px; vertical-align: middle; }
.net-chart .key.bar-pos { background: var(--pos); opacity: .75; }
.net-chart .key.line-assets { border-top: 2px solid var(--accent); height: 0; }
.net-chart .key.line-debts { border-top: 2px dashed #c07a1a; height: 0; }
.doubtful { border-color: #e8c766; background: #fffaf0; margin: 12px 0; }
.balance { margin-bottom: 14px; }
.banner.info { background: var(--accent-soft); border: 1px solid var(--line); color: var(--ink); display: block; }
/* Дашборд */
.presets { display: flex; gap: 6px; flex-wrap: wrap; align-self: flex-end; }
.btn.small { padding: 4px 10px; font-size: 12.5px; }
.btn.small.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dash-h { font-size: 17px; margin: 22px 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kpis.compact { margin-top: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px; }
.kpis.compact .kpi { background: transparent; }
.kpi-label { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.kpi-value { font-size: 19px; }
.kpi-change { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.kpi-change.up { color: var(--pos); }
.kpi-change.down { color: var(--neg); }
.kpi-sub { font-size: 12px; color: var(--ink-soft); }
.dash-chart svg { width: 100%; height: auto; display: block; }
.dash-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.dash-chart .zero-line { stroke: var(--line-strong); stroke-width: 1.2; }
.dash-chart .tick { font-size: 11px; fill: var(--ink-soft); }
.dash-chart .bar-rev { fill: var(--accent); opacity: .55; }
.dash-chart .line-gross { fill: none; stroke: var(--pos); stroke-width: 2.2; }
.dash-chart .seg-bought { fill: var(--pos); opacity: .8; }
.dash-chart .seg-in_delivery { fill: var(--accent); opacity: .55; }
.dash-chart .seg-returned { fill: #c07a1a; opacity: .8; }
.dash-chart .seg-cancelled { fill: var(--neg); opacity: .55; }
.dash-chart .key { display: inline-block; width: 16px; height: 10px; margin: 0 4px 0 10px; vertical-align: middle; }
.dash-chart .key.bar-rev { background: var(--accent); opacity: .55; }
.dash-chart .key.line-gross { border-top: 2px solid var(--pos); height: 0; }
.dash-chart .key.seg-bought { background: var(--pos); opacity: .8; }
.dash-chart .key.seg-in_delivery { background: var(--accent); opacity: .55; }
.dash-chart .key.seg-returned { background: #c07a1a; opacity: .8; }
.dash-chart .key.seg-cancelled { background: var(--neg); opacity: .55; }
/* Хранение: склады на графике */
.dash-chart .seg-w0 { fill: #3b6fd8; opacity: .8; }
.dash-chart .key.seg-w0 { background: #3b6fd8; opacity: .8; }
.dash-chart .seg-w1 { fill: #2e9e6b; opacity: .8; }
.dash-chart .key.seg-w1 { background: #2e9e6b; opacity: .8; }
.dash-chart .seg-w2 { fill: #d9822b; opacity: .8; }
.dash-chart .key.seg-w2 { background: #d9822b; opacity: .8; }
.dash-chart .seg-w3 { fill: #8a5cd1; opacity: .8; }
.dash-chart .key.seg-w3 { background: #8a5cd1; opacity: .8; }
.dash-chart .seg-w4 { fill: #c94a4a; opacity: .8; }
.dash-chart .key.seg-w4 { background: #c94a4a; opacity: .8; }
.dash-chart .seg-w5 { fill: #1f9bb0; opacity: .8; }
.dash-chart .key.seg-w5 { background: #1f9bb0; opacity: .8; }
.dash-chart .seg-w_rest { fill: #9aa3ad; opacity: .8; }
.dash-chart .key.seg-w_rest { background: #9aa3ad; opacity: .8; }
.dash-table td { white-space: nowrap; }
/* Фото товаров */
td.with-photo .thumb { vertical-align: middle; margin-right: 8px; }
td.with-photo > div { display: inline-block; vertical-align: middle; }
.thumb { width: 34px; height: 44px; object-fit: cover; border-radius: 4px; background: var(--section); }
span.thumb.empty { display: inline-block; }
/* Платёжный календарь: горизонтальная таблица по статьям */
.dds.cal-grid { min-width: 0; width: auto; font-size: 12.5px; }
.cal-grid .sticky { min-width: 230px; max-width: 280px; }
.cal-grid th.num, .cal-grid td.num { min-width: 74px; padding: 4px 6px; }
.cal-grid th .sub { display: block; font-weight: 400; font-size: 11px; }
.cal-grid th.weekend { color: #f3b2a8; }
.cal-grid td.col-today, .cal-grid th.col-today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.cal-grid td.col-future { background-image: linear-gradient(rgba(47, 91, 211, .035), rgba(47, 91, 211, .035)); }
.cal-grid td.plan, .cal-grid td.plan a { color: var(--accent); font-style: italic; }
.cal-grid td a.add { color: var(--ink-soft); text-decoration: none; opacity: 0; padding: 0 6px; }
.cal-grid tr:hover td a.add { opacity: .7; }
.cal-grid td a.add:hover { opacity: 1; color: var(--accent); }
.cal-grid tr.closing td { border-top: 2px solid var(--line-strong); }
/* Инструкция к странице */
details.help { margin: 0 0 14px; max-width: 1000px; }
details.help summary { cursor: pointer; font-weight: 600; color: var(--accent); }
details.help .help-body { margin-top: 10px; line-height: 1.5; }
details.help .help-body h4 { margin: 12px 0 4px; font-size: 14px; }
details.help .help-body p, details.help .help-body li { margin: 4px 0; }
/* Товары */
.goods-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.photo-big { width: 120px; height: 160px; object-fit: cover; border-radius: 8px; background: var(--section); }
/* Сравнение периодов */
.compare td.cmp-a, .compare th.cmp-a { border-left: 2px solid var(--line-strong); }
details.metric-pick { position: relative; align-self: flex-end; }
details.metric-pick summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--control-line); border-radius: 6px; background: var(--input-bg); }
details.metric-pick[open] > label { display: flex; }
details.metric-pick[open] { background: var(--panel); padding: 8px; border: 1px solid var(--line); border-radius: 8px; z-index: 5; }
.abc-matrix { width: auto; margin-bottom: 10px; }
.abc-matrix td.on { background: var(--accent-soft); font-weight: 700; }

/* Заказы по времени */
.ot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; margin: 12px 0; }
.ot-grid h3 { margin: 0 0 6px; font-size: 15px; }
.heat td.h0 { background: rgba(47, 91, 211, 0); }
.heat td.h1 { background: rgba(47, 91, 211, 0.16); }
.heat td.h2 { background: rgba(47, 91, 211, 0.24); }
.heat td.h3 { background: rgba(47, 91, 211, 0.32); }
.heat td.h4 { background: rgba(47, 91, 211, 0.4); }
.heat td.h5 { background: rgba(47, 91, 211, 0.48); }
.heat td.h6 { background: rgba(47, 91, 211, 0.56); }
.heat td.h7 { background: rgba(47, 91, 211, 0.64); }
.heat td.h8 { background: rgba(47, 91, 211, 0.72); }
.heat td.h9 { background: rgba(47, 91, 211, 0.8); }
.heat td.h7, .heat td.h8, .heat td.h9 { color: #fff; }
/* План-факт: полоса выполнения */
svg.progress { width: 90px; height: 8px; vertical-align: middle; display: inline-block; }
.kpi svg.progress { display: block; width: 100%; margin-top: 4px; }
svg.progress .track { fill: var(--line); }
svg.progress .fill { fill: var(--accent); }
svg.progress .done { fill: var(--pos); }
/* Выбор периода (как в MPFinAssist): поле с диапазоном и окно с быстрыми вариантами и двумя месяцами */
.range-field { position: relative; }
.range-input { min-width: 210px; text-align: left; padding: 6px 10px; border: 1px solid var(--control-line); border-radius: 5px;
               background: var(--input-bg); color: var(--ink); font: inherit; cursor: pointer; }
.range-input:hover { background: var(--control-hover); }
.range-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; display: flex; background: var(--panel);
             border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 25, 45, .18);
             color: var(--ink); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; cursor: default; }
.range-presets { list-style: none; margin: 0; padding: 6px 0; border-right: 1px solid var(--line); min-width: 150px; }
.range-presets button { display: block; width: 100%; text-align: left; padding: 9px 16px; border: 0; background: none;
                        color: var(--ink); font: inherit; cursor: pointer; }
.range-presets button:hover { background: var(--hover); }
.range-presets button.on { background: var(--accent); color: var(--accent-ink); }
.range-cals { display: flex; gap: 18px; padding: 10px 14px; }
.range-head { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; }
.range-head select { padding: 2px 4px; font: inherit; }
.range-nav { border: 0; background: none; font-size: 20px; line-height: 1; padding: 0 8px; cursor: pointer; color: var(--ink); }
.range-grid { border-collapse: separate; border-spacing: 0 3px; }
.range-grid th { font-size: 12px; font-weight: 600; padding: 2px 0 6px; width: 36px; color: var(--ink); background: none; }
.range-grid td { width: 36px; height: 30px; text-align: center; cursor: pointer; border: 0; padding: 0; }
.range-grid td.out { color: var(--ink-soft); opacity: .45; cursor: default; }
.range-grid td.in { background: var(--accent-soft); }
.range-grid td.edge { background: var(--accent); color: var(--accent-ink); border-radius: 4px; }
.range-grid td.today { font-weight: 700; }
.range-grid td[data-day]:hover { outline: 1px solid var(--accent); }
@media (max-width: 760px) {
  .range-pop { position: fixed; left: 8px !important; right: 8px; top: 64px; flex-direction: column; max-height: 82vh; overflow: auto; }
  .range-presets { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .range-presets button { width: auto; padding: 6px 10px; }
  .range-cals { flex-direction: column; align-items: center; }
}
/* ---------- Телефон: карточки вместо широких таблиц ---------- */
.fab, .m-view { display: none; }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 8px 10px; }
  .kpi-value { font-size: 17px; }
  .top { flex-wrap: wrap; gap: 8px; }
  .top-actions .m-off { display: none; }
  .m-view { display: inline-block; margin: 0 0 8px; }
  /* Общий вид: таблица с отметкой m-cards — карточки «подпись: значение»; подписи — из заголовков столбцов */
  table.m-cards:not(.as-table), table.m-cards:not(.as-table) tbody { display: block; width: 100%; min-width: 0; }
  table.m-cards:not(.as-table) thead { display: none; }
  table.m-cards:not(.as-table) tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 12px;
                                    border-bottom: 1px solid var(--line); background: var(--panel); }
  table.m-cards:not(.as-table) tr[hidden] { display: none; }
  table.m-cards:not(.as-table) tr.total { background: var(--total); }
  table.m-cards:not(.as-table) tr.child { background: var(--zebra); padding-left: 24px; }
  table.m-cards:not(.as-table) td { display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
                                    border: 0; padding: 0; white-space: normal; position: static; min-width: 0;
                                    background: none; font-size: 13px; text-align: right; }
  table.m-cards:not(.as-table) td::before { content: attr(data-label); color: var(--ink-soft); font-size: 12px; text-align: left;
                                            flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  table.m-cards:not(.as-table) td.m-full { grid-column: 1 / -1; }
  table.m-cards:not(.as-table) td a { overflow-wrap: anywhere; word-break: break-all; }
  table.m-cards:not(.as-table) td.m-head, table.m-cards:not(.as-table) td.m-wide { grid-column: 1 / -1; justify-content: flex-start;
                                                                                  text-align: left; font-size: 14px; }
  table.m-cards:not(.as-table) td.m-head { order: -1; font-weight: 600; border-right: 0; align-items: center; }
  table.m-cards:not(.as-table) td.m-head::before { content: none; }
  table.m-cards:not(.as-table) tr.group td.m-head::before { content: "▸"; color: var(--ink-soft); margin-right: 6px; flex: 0 0 auto; }
  table.m-cards:not(.as-table) tr.group.open td.m-head::before { content: "▾"; }
  table.m-cards[data-row-link]:not(.as-table) tbody tr { cursor: pointer; }
  table.m-cards:not(.as-table) td.m-wide { flex-direction: column; gap: 2px; }
  table.m-cards:not(.as-table) td.m-hide, table.m-cards:not(.as-table) td:empty { display: none; }
  table.m-cards:not(.as-table) td.empty { grid-column: 1 / -1; justify-content: center; }
  table.m-cards:not(.as-table) td.empty::before { content: none; }
  /* Журнал: компактная карточка — дата и статья слева, сумма справа, ниже счёт, магазин, товар и комментарий */
  table.journal, table.journal tbody { display: block; min-width: 0; }
  table.journal thead { display: none; }
  table.journal tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px;
                     border-bottom: 1px solid var(--line); background: var(--panel); cursor: pointer; }
  table.journal tr.excluded { background: var(--zebra); }
  table.journal td { display: block; border: 0; padding: 0; white-space: normal; min-width: 0; background: none; }
  table.journal td:empty { display: none; }
  table.journal td.c-dds, table.journal td.c-pnl { grid-column: 1; font-size: 12px; color: var(--ink-soft); }
  table.journal td.c-dds:not(:empty)::before { content: "ДДС "; }
  table.journal td.c-pnl:not(:empty)::before { content: "ПнЛ "; }
  table.journal td.art { grid-column: 1; font-weight: 600; max-width: none; }
  table.journal td.amount { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 16px; font-weight: 700; }
  table.journal td.acc, table.journal td.c-shop, table.journal td.c-prod, table.journal td.comment {
    grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-soft); max-width: none; }
  table.journal td.comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.journal td.c-src, table.journal td.row-actions { display: none; }
  table.journal td.empty { grid-column: 1 / -1; text-align: center; }
  .fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: 18px; z-index: 30;
         width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 30px;
         line-height: 1; text-decoration: none; box-shadow: 0 6px 16px rgba(15, 25, 45, .3); }
  .fab:hover { text-decoration: none; }
  body.modal-open .fab { display: none; }
}

/* ---------- Дашборд: блоки по два в ряд и плашки — как в «Сводке продаж» MPFinAssist ---------- */
:root { --c-revenue: #2f6fd6; --c-cogs: #4b5563; --c-commission: #a39d12; --c-logistics: #d9822b; --c-gross: #1f9d55;
        --c-loss: #d64545; --c-warn: #d98a00; --c-blue: #2f5bd3; --c-bought-bar: #7fcf98; --c-ads: #f0a020;
        --tile-bg: #f5f7fa; --alert-bg: #fff7e0; --alert-line: #f1d48a; }
html[data-theme="dark"] { --c-revenue: #5b93ff; --c-cogs: #9aa4b2; --c-commission: #cfc745; --c-logistics: #f0a35a;
        --c-gross: #4cc38a; --c-loss: #ff7b6b; --c-warn: #f2b13c; --c-blue: #6f9bff; --c-bought-bar: #3f8f5e;
        --c-ads: #f2b13c; --tile-bg: #202733; --alert-bg: #3a3017; --alert-line: #7a6424; }
.dash-row { display: grid; gap: 14px; margin-bottom: 14px; align-items: stretch; }
.dash-row-a { grid-template-columns: minmax(250px, 1fr) minmax(0, 2.8fr); }
.dash-row-b { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.9fr); }
.dash-row-c { grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr); align-items: start; }
.dash-block { padding: 14px 16px; margin-bottom: 14px; min-width: 0; }
.dash-row > .dash-block { margin-bottom: 0; }
.dash-title { font-size: 15px; margin: 0 0 10px; }
.dash-title small { font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.legend { font-size: 12px; color: var(--ink-soft); }
.legend .key { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
.legend .key.line { height: 0; border-top: 3px solid; border-radius: 0; vertical-align: 3px; }
.key.k-revenue { border-color: var(--c-revenue); }
.key.k-gross { border-color: var(--c-gross); }
.key.k-cogs { background: var(--c-cogs); }
.key.k-commission { background: var(--c-commission); }
.key.k-logistics { background: var(--c-logistics); }
.key.k-loss { background: var(--c-loss); }
.key.k-ordered { border-color: var(--c-revenue); }
.key.k-bought { border-color: var(--c-gross); }
.key.k-ordered_sum { background: var(--c-revenue); }
.key.k-bought_sum { background: var(--c-bought-bar); }
.key.k-ads { background: var(--c-ads); }
.key.k-spp-wb { border-color: #8a5cd1; }
.key.k-avg { border-top-style: dashed; border-color: var(--ink-soft); }
.dash-svg .line-avg { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 5 4; }
.dash-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-pair { display: flex; flex: 1; }
.tile-pair .tile { flex: 1; }
.tile.tone-purple .tile-value { color: #8a5cd1; }
.tile.edge-purple { border-left-color: #8a5cd1; }
.key.k-spp-ozon { border-color: var(--c-revenue); }
.dash-svg .line-spp-wb { fill: none; stroke: #8a5cd1; stroke-width: 2.4; }
.dash-svg .line-spp-ozon { fill: none; stroke: var(--c-revenue); stroke-width: 2.4; }
.dash-svg .dot-spp-wb { fill: #8a5cd1; }
.dash-svg .dot-spp-ozon { fill: var(--c-revenue); }
.dash-alert { background: var(--alert-bg); border-left: 3px solid var(--alert-line); border-radius: 4px; padding: 6px 10px;
              margin: 0 0 8px; font-size: 12.5px; }
.dash-svg { width: 100%; height: auto; display: block; }
.dash-svg .grid-line { stroke: var(--line); stroke-width: 1; opacity: .6; }
.dash-svg .tick { font-size: 10.5px; fill: var(--ink-soft); }
.dash-svg .bar-cogs { fill: var(--c-cogs); }
.dash-svg .bar-commission { fill: var(--c-commission); }
.dash-svg .bar-logistics { fill: var(--c-logistics); }
.dash-svg .bar-loss { fill: var(--c-loss); }
.dash-svg .bar-ordered_sum { fill: var(--c-revenue); opacity: .9; }
.dash-svg .bar-bought_sum { fill: var(--c-bought-bar); }
.dash-svg .bar-ads { fill: var(--c-ads); }
.dash-svg .line-revenue, .dash-svg .line-ordered { fill: none; stroke: var(--c-revenue); stroke-width: 2.4; }
.dash-svg .line-gross, .dash-svg .line-bought { fill: none; stroke: var(--c-gross); stroke-width: 2.4; }
.dash-svg .hover-col { fill: transparent; }
.dash-svg .hover-col:hover { fill: var(--accent); fill-opacity: .06; }
.dash-foot { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; font-size: 12.5px; color: var(--ink-soft);
             display: grid; gap: 4px; }
.c-cogs { color: var(--c-cogs); }
.c-commission { color: var(--c-commission); }
.c-logistics { color: var(--c-logistics); }
.c-gross { color: var(--c-gross); }
.c-blue { color: var(--c-blue); }
.tile { background: var(--tile-bg); border-radius: 6px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px;
        border-left: 3px solid transparent; min-width: 0; }
.tile-label { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.tile-main { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile-value { font-size: 20px; font-weight: 700; }
.tile-change { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.tile-change.up { color: var(--pos); }
.tile-change.down { color: var(--neg); }
.tile-note { font-size: 11.5px; color: var(--ink-soft); }
.tile.tone-accent .tile-value { color: #1b8a9a; }
.tile.tone-blue .tile-value { color: var(--c-blue); }
.tile.tone-pos .tile-value { color: var(--pos); }
.tile.tone-neg .tile-value { color: var(--neg); }
.tile.tone-warn .tile-value { color: var(--c-warn); }
.tile.edge-pos { border-left-color: var(--pos); }
.tile.edge-blue { border-left-color: var(--c-blue); }
.tile.edge-warn { border-left-color: var(--c-warn); }
.tile-stack { display: grid; gap: 8px; }
.tile-stack .tile-value { font-size: 22px; }
.tile-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile-grid2 .tile { align-items: center; text-align: center; }
.tile-grid2 .tile-main { justify-content: center; }
.tile-grid2 .wide { grid-column: 1 / -1; }
.tile-grid2 .wide .tile { height: 100%; box-sizing: border-box; }
.ops-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ops-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.op-box { background: var(--tile-bg); border-radius: 6px; display: flex; flex-direction: column; }
.op-box .tile { background: none; align-items: center; text-align: center; flex: 1; }
.op-box .tile-main { justify-content: center; }
.op-foot { display: flex; justify-content: space-between; gap: 8px; padding: 5px 12px 7px; border-top: 1px solid var(--line);
           font-size: 12.5px; color: var(--ink-soft); }
.op-foot b { color: var(--ink); }
.op-foot b.pos { color: var(--pos); }
.op-foot b.neg { color: var(--neg); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0 0; font-size: 13px; }
.kv dt { color: var(--ink-soft); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.kv-3 { grid-template-columns: repeat(3, minmax(0, 1fr) auto); border-top: 1px solid var(--line); padding-top: 8px; }
.dash-note { background: var(--tile-bg); border-radius: 6px; padding: 7px 10px; font-size: 12.5px; margin: 10px 0 0; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.stat-row > div { background: var(--tile-bg); border-radius: 6px; padding: 6px 10px; display: flex; justify-content: space-between;
                  gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.stat-row b { color: var(--ink); }
.stat-row b.pos { color: var(--pos); }
.stat-row b.neg { color: var(--neg); }
.dash-table td.with-photo { white-space: normal; min-width: 180px; }
table.models { width: 100%; }
table.models td:first-child { white-space: normal; }
@media (max-width: 1100px) {
  .dash-row-a, .dash-row-b, .dash-row-c, .dash-row-2 { grid-template-columns: minmax(0, 1fr); }
  .tile-stack { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 760px) {
  .ops-4, .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-3 { grid-template-columns: minmax(0, 1fr); }
  .kv-3 { grid-template-columns: 1fr auto; }
  .tile-value, .tile-stack .tile-value { font-size: 18px; }
  .dash-block { padding: 12px; }
}