/* Темы: светлая — по умолчанию, тёмная — по настройке системы или по переключателю в шапке (html[data-theme]). */
:root, :root[data-theme="light"] {
  --bg: #f2f4f8; --panel: #fff; --panel2: #f7f8fb; --text: #121a2b; --muted: #667089; --line: #e2e6ee; --grid: #e8ebf2;
  --accent: #4f8a00; --accent-ink: #fff; --accent-weak: rgba(79, 138, 0, .1);
  --neg: #d33a3a; --pos: #13864d; --sect: #eceff5; --neg-bg: rgba(211, 58, 58, .1); --pos-bg: rgba(19, 134, 77, .1);
  --s1: #e87ba4; --s2: #2a78d6; --s3: #eda100; --s4: #13864d; --s5: #d33a3a; --s6: #667089;
  --mp-wb: #e87ba4; --mp-ozon: #2a78d6; --mp-ym: #eda100;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06); color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0d13; --panel: #121722; --panel2: #171d2b; --text: #e9edf5; --muted: #8c96ad; --line: #232a3b; --grid: #1f2636;
  --accent: #b8f23f; --accent-ink: #0a0d13; --accent-weak: rgba(184, 242, 63, .12);
  --neg: #ff6f6f; --pos: #41dd9b; --sect: #171d2b; --neg-bg: rgba(255, 111, 111, .14); --pos-bg: rgba(65, 221, 155, .14);
  --s1: #d55181; --s2: #3987e5; --s3: #c98500; --s4: #41dd9b; --s5: #ff6f6f; --s6: #8c96ad;
  --mp-wb: #d55181; --mp-ozon: #3987e5; --mp-ym: #c98500;
  --shadow: none; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0a0d13; --panel: #121722; --panel2: #171d2b; --text: #e9edf5; --muted: #8c96ad; --line: #232a3b; --grid: #1f2636;
    --accent: #b8f23f; --accent-ink: #0a0d13; --accent-weak: rgba(184, 242, 63, .12);
    --neg: #ff6f6f; --pos: #41dd9b; --sect: #171d2b; --neg-bg: rgba(255, 111, 111, .14); --pos-bg: rgba(65, 221, 155, .14);
    --s1: #d55181; --s2: #3987e5; --s3: #c98500; --s4: #41dd9b; --s5: #ff6f6f; --s6: #8c96ad;
    --mp-wb: #d55181; --mp-ozon: #3987e5; --mp-ym: #c98500;
    --shadow: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", Roboto, sans-serif; }

/* шапка */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 10px 20px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.logo { width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.muted { color: var(--muted); font-weight: 400; }
nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
nav button { border: 0; background: none; padding: 9px 12px; color: var(--muted); cursor: pointer; font: inherit; border-radius: 0;
  border-bottom: 2px solid transparent; }
nav button:hover { color: var(--text); }
nav button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.shopsel { flex-direction: row; align-items: center; gap: 8px; }
.shopsel select { min-width: 200px; }
.icon-btn { width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 17px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; }
#syncbox { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
main { padding: 18px 20px; max-width: 1800px; margin: 0 auto; }
.banner { margin: 14px 20px 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-weak); color: var(--text);
  border: 1px solid var(--line); }

/* формы */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 16px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  color: var(--text); min-width: 140px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-weak); border-color: var(--accent); }
textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; margin: 8px 0; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
button.xls { color: var(--pos); border-color: var(--pos); }
button:disabled { opacity: .5; cursor: default; }
.presets { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.presets button { border: 0; border-radius: 0; background: none; color: var(--muted); padding: 8px 12px; }
.presets button.on { background: var(--accent-weak); color: var(--text); font-weight: 600; }
label.filebtn { flex-direction: row; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--text); font-size: 14px; cursor: pointer; }
.hint { color: var(--muted); max-width: 820px; }

/* карточки показателей (вкладка «По неделям») */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); }
.card .k { font-size: 12px; color: var(--muted); }
.card .v { font-size: 20px; font-weight: 700; margin-top: 2px; }
canvas { width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; }

/* таблицы */
.tablewrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tablewrap.short { max-height: none; margin-bottom: 14px; }
table.report { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.report th, .report td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report thead th { position: sticky; top: 0; background: var(--panel); z-index: 3; font-weight: 600; color: var(--muted); font-size: 12px; }
.report th:first-child, .report td:first-child { position: sticky; left: 0; background: var(--panel); text-align: left; z-index: 2; min-width: 300px; }
.report thead th:first-child { z-index: 4; }
.report tr.sect td { background: var(--sect); font-weight: 700; cursor: pointer; }
.report tr.sect td:first-child { background: var(--sect); }
.report tr.bold td { font-weight: 700; }
.report tr.refrow td { color: var(--muted); font-style: italic; font-size: 12px; }
.report tr.refrow td.neg { color: var(--muted); }
.report td.total, .report th.total { background: var(--accent-weak); font-weight: 600; }
.report .neg { color: var(--neg); }
.report .sub { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.report.sortable th { cursor: pointer; }
.report td.abcA { color: var(--pos); font-weight: 700; } .report td.abcC { color: var(--neg); }
.report .pc { display: inline-block; min-width: 46px; margin-left: 8px; font-size: 11px; color: var(--muted); font-weight: 400; text-align: right; }
.report tr.subt { cursor: pointer; }
.report tr.subt td, .report tr.subt td:first-child { background: var(--panel2); }
.report tr.det td:first-child { padding-left: 28px; color: var(--muted); }
table.dash th:first-child, table.dash td:first-child { min-width: 240px; }
table.dash tr.totalrow td { font-weight: 700; background: var(--accent-weak); }
table.mini { width: 100%; border-collapse: collapse; }
table.mini td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
table.mini td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.mini td.n { color: var(--muted); width: 22px; }
table.mini .sub { display: block; font-size: 11px; color: var(--muted); }
table.mini .neg { color: var(--neg); }

/* панели и настройки */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.panel h3 { margin: 0; font-size: 15px; }
.panel label { width: 100%; max-width: 420px; }
.panel input, .panel select { width: 100%; }
.panel.wide { align-items: stretch; }
.panel.wide .filters { margin-bottom: 0; }
.panel .filters label { width: auto; max-width: none; }
.panel .filters input, .panel .filters select { width: auto; }
.log { margin: 0; width: 100%; max-height: 180px; overflow: auto; background: var(--bg); padding: 8px; border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
details { margin-bottom: 14px; } summary { cursor: pointer; margin-bottom: 8px; }
.del { color: var(--neg); cursor: pointer; border: 0; background: none; padding: 0 6px; }
.report td.act { text-align: right; }
.report td.act button { padding: 3px 9px; margin-left: 4px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 1px 8px 1px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--text); margin-right: 6px; vertical-align: 1px; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.badge.wb::before { background: var(--mp-wb); } .badge.ozon::before { background: var(--mp-ozon); } .badge.ym::before { background: var(--mp-ym); }
.share { display: inline-block; width: 60px; height: 6px; background: var(--line); border-radius: 3px; margin-right: 6px; vertical-align: middle; overflow: hidden; }
.share i { display: block; height: 100%; background: var(--accent); }
.sect-title { margin: 6px 0 8px; font-size: 15px; }

/* дашборд */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0; overflow: hidden; }
.kpi > div:first-child { flex: 1 1 150px; min-width: 0; }
.kpi .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.kpi .k .lc { text-transform: none; }
.kpi .v { font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; margin: 4px 0 6px; white-space: nowrap; }
.kpi .v.neg { color: var(--neg); }
.kpi canvas { width: 76px; height: 34px; border: 0; background: none; margin: 0; border-radius: 0; flex: none; }
.kpi canvas.ring { width: 64px; height: 64px; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 8px; }
.delta.up { color: var(--pos); background: var(--pos-bg); } .delta.down { color: var(--neg); background: var(--neg-bg); }
.delta-note { font-size: 11px; color: var(--muted); margin-left: 6px; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.box h3 { margin: 0 0 2px; font-size: 15px; }
.box .sub-h { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.box canvas { border: 0; background: none; margin: 0; border-radius: 0; display: block; }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; margin-bottom: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mp-row:last-child { border-bottom: 0; }
.mp-ico { width: 34px; height: 34px; border-radius: 9px; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.mp-ico.wb { background: var(--mp-wb); color: #0b0b0b; } .mp-ico.ozon { background: var(--mp-ozon); color: #fff; } .mp-ico.ym { background: var(--mp-ym); color: #0b0b0b; }
.mp-main { flex: 1; min-width: 0; }
.mp-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-row canvas { width: 70px; height: 28px; flex: none; border: 0; background: none; margin: 0; border-radius: 0; }
.cost-row { padding: 7px 0; }
.cost-row .top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.cost-row .top span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-row .track { height: 6px; background: var(--line); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.cost-row .track i { display: block; height: 100%; border-radius: 3px; background: var(--s5); }
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); display: none; max-width: 260px; }
.tip b { display: block; margin-bottom: 4px; }
.tip div { display: flex; justify-content: space-between; gap: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { main { padding: 10px; } header { padding: 10px; } .report th:first-child, .report td:first-child { min-width: 190px; }
  .grid-charts { grid-template-columns: minmax(0, 1fr); } }

/* юнит-экономика: выбор строки и путь цены */
.report tr.pick { cursor: pointer; } .report tr.pick:hover td { background: var(--panel2); }
.report tr.pick.sel td { background: var(--accent-weak); }
.report tr.totalrow td { font-weight: 700; background: var(--accent-weak); position: sticky; bottom: 0; }
.wf-row { display: grid; grid-template-columns: minmax(170px, 270px) 1fr 110px; align-items: center; gap: 10px; padding: 3px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.wf-row .k { font-weight: 600; } .wf-row .v { text-align: right; white-space: nowrap; }
.wf-row .v i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 6px; display: inline-block; min-width: 42px; }
.wf-row .v.neg { color: var(--neg); }
.wf-tr { height: 10px; background: var(--line); border-radius: 3px; position: relative; }
.wf-tr b { position: absolute; top: 0; height: 100%; border-radius: 3px; display: block; }
.wf-tr b.tt { background: var(--pos); } .wf-tr b.dd { background: var(--neg); }

/* ABC */
.report td.abcB { color: var(--muted); font-weight: 600; } .report td.abcL { color: var(--neg); font-weight: 700; }
#a-abc { margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
table.mx { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.mx th { font-weight: 500; color: var(--muted); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
table.mx td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line); }
table.mx th:first-child, table.mx td:first-child { text-align: left; font-weight: 600; }
table.mx td.cell { cursor: pointer; } table.mx td.cell:hover { background: var(--panel2); }
table.mx td.cell.on { background: var(--accent-weak); font-weight: 700; }
table.mx td.cell.bad { color: var(--neg); }
.abc-line { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.abc-line:last-child { border-bottom: 0; } .abc-line .muted { font-size: 12px; }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--accent-weak); font-size: 12px; cursor: pointer; margin-bottom: 8px; }

#a-abc[hidden] { display: none; }

.pfbar { height: 5px; border-radius: 3px; background: var(--grid); margin: 6px 0; overflow: hidden; }
.pfbar i { display: block; height: 100%; background: var(--accent); }
#pf-chart { width: 100%; margin-bottom: 14px; }
#pf-form[hidden] { display: none; }
.lt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; background: var(--muted); }
.lt.ok { background: var(--pos); } .lt.warn { background: #e0a100; } .lt.bad { background: var(--neg); }
.pfbar i.ok { background: var(--pos); } .pfbar i.warn { background: #e0a100; } .pfbar i.bad { background: var(--neg); }
.pfgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.pfname { font-weight: 600; margin-bottom: 6px; }
.pfrow { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; font-size: 13px; }
.pfrow .pfbar { margin: 0; height: 8px; }
.pfrow b { text-align: right; }
#d-plan { margin-bottom: 14px; }
#pf-arts-box { margin-top: 18px; }
#pf-arts h4 { margin: 14px 0 6px; }
.report th.grp { text-align: center; }

/* ---------- состояния загрузки ---------- */
/* повторная загрузка: кадр остаётся на месте, данные чуть бледнеют (без скелетонов и прыжков) */
.tab.stale > :not(.filters) { opacity: .55; transition: opacity .15s; pointer-events: none; }
/* первая загрузка: скелетоны на месте будущих карточек */
.skel { border-radius: 16px; min-height: 96px; border: 1px solid var(--line);
  background: linear-gradient(90deg, var(--panel) 0%, var(--panel2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.empty { color: var(--muted); padding: 18px 4px; }
.empty b { display: block; color: var(--text); margin-bottom: 4px; }

/* ---------- телефон: меню одной прокручиваемой строкой, шапка не липнет и не съедает экран ---------- */
@media (max-width: 700px) {
  header { position: static; gap: 8px 12px; }
  header nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 0 10px; scrollbar-width: none; }
  header nav::-webkit-scrollbar { display: none; }
  nav button { white-space: nowrap; padding: 8px 10px; }
  .shopsel { order: 2; flex: 1; }
  .shopsel select { max-width: 100%; }
  #syncbox { order: 4; flex: 1 0 100%; font-size: 12px; color: var(--muted); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 12px; }
  .kpi canvas { display: none; }
  .kpi .v { font-size: 20px; }
  .delta-note { display: block; margin: 4px 0 0; }
  .filters { gap: 8px; }
  .pfrow { grid-template-columns: 90px 1fr 56px; }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- графики продаж ---------- */
.bh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bh .tv { font-size: 12px; padding: 3px 10px; color: var(--muted); }
.box .tv-table .tablewrap { max-height: 300px; border: 0; }
.box canvas { width: 100%; }
.bhr { display: inline-flex; align-items: center; gap: 8px; }
.bhr select { font-size: 12px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
.dow-note { margin-top: 10px; font-size: 13px; color: var(--muted); }
.dow-note b { color: var(--text); }
.scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.scale i { display: block; flex: 0 0 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--accent)); }
/* ---------- пояснение к графику: «?» у заголовка, открывается при наведении, фокусе и касании ---------- */
.info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; outline: none; }
.info > i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font: 600 11px/1 system-ui; font-style: normal;
  color: var(--muted); border: 1px solid var(--line); cursor: help; }
.info:hover > i, .info:focus > i { color: var(--text); border-color: var(--muted); }
.infotip { display: none; position: absolute; left: -4px; top: 26px; z-index: 40; width: 340px; max-width: min(340px, 82vw); padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  font: 400 13px/1.45 system-ui; color: var(--text); text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; }
.info:hover .infotip, .info:focus .infotip, .info:focus-within .infotip { display: block; }
.infotip.r { left: auto; right: -4px; }
.infotip p { margin: 0 0 8px; } .infotip ul { margin: 4px 0 8px; padding-left: 18px; } .infotip li { margin-bottom: 4px; }
.infotip .now { padding: 6px 8px; border-radius: 8px; background: var(--accent-weak); }

/* ---------- РНП ---------- */
.rnpwrap { overflow: auto; max-height: calc(100vh - 210px); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.rnp { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.rnp th, .rnp td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; background: var(--panel); }
.rnp thead th { position: sticky; top: 0; z-index: 4; color: var(--muted); font-weight: 600; font-size: 11px; line-height: 1.2; }
.rnp .s1 { position: sticky; left: 0; z-index: 3; width: 190px; min-width: 190px; max-width: 190px; text-align: left; white-space: normal; }
.rnp .s2 { position: sticky; left: 190px; z-index: 3; min-width: 250px; text-align: left; border-right: 1px solid var(--line); }
.rnp thead .s1, .rnp thead .s2 { z-index: 6; }
.rnp .we { background: var(--panel2); }
.rnp td.fut { color: var(--muted); }
.rnp td.neg { color: var(--neg); }
.rnp tbody.tot td, .rnp tbody.tot th { background: var(--accent-weak); }
.rnp tbody.tot td.s1, .rnp tbody.tot td.s2 { background: var(--panel2); }
.rnp td.lab { color: var(--text); }
.rnp tbody > tr:first-child > td { border-top: 6px solid var(--bg); }
.rnp td.art { vertical-align: top; padding: 10px; background: var(--panel); }
.rnp .ph { display: block; width: 96px; height: 128px; object-fit: cover; border-radius: 10px; background: var(--panel2); margin-bottom: 8px; }
.rnp .ph-total { display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--muted); }
.rnp .an { font-weight: 600; word-break: break-all; margin-bottom: 2px; }
.rnp .hs { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.rnp .hs b { color: var(--text); text-align: right; }
.rnp .hs2 { margin: 10px 0 2px; font-size: 11px; color: var(--muted); }
.rnpspark { width: 100%; height: 34px; display: block; }

/* ---------- периодические таблицы (оПиУ, по неделям): каждый период — своя колонка, сумма и доля разделены ---------- */
.report th.pg { text-align: center; border-left: 1px solid var(--line); padding: 8px 14px; }
.report td.pv { border-left: 1px solid var(--line); padding-left: 16px; min-width: 104px; }
.report td.pcc { min-width: 58px; padding-left: 6px; padding-right: 14px; color: var(--muted); font-size: 11px; font-weight: 400; }
.report th.pg.total, .report td.pv.total, .report td.pcc.total { background: var(--accent-weak); }
.report td.pcc.total { color: var(--text); opacity: .7; }
.report tbody tr:hover td { background: var(--panel2); }
.report tbody tr:hover td.total { background: var(--accent-weak); }
.report tr.sect:hover td { background: var(--sect); }
.report tr.sect td { border-left: 0; padding: 8px 12px; }
.report tbody tr:not(.sect) td:first-child { border-right: 1px solid var(--line); }
.report td, .report th { padding-top: 7px; padding-bottom: 7px; }

/* ---------- «По неделям»: месяцы разграничены чередующимся фоном, жирной чертой и подписью над неделями ---------- */
:root { --mo-tint: color-mix(in srgb, var(--accent) 7%, var(--panel)); --mo-line: color-mix(in srgb, var(--muted) 65%, var(--panel)); }
.report .mo1 { background: var(--mo-tint); }
.report td.mstart, .report th.mstart { border-left: 2px solid var(--mo-line); }
.report thead th.mh { text-align: center; font-size: 12px; font-weight: 700; color: var(--text); height: 30px; box-sizing: border-box; letter-spacing: .2px; }
.report thead.two tr.prow th { top: 30px; }                     /* вторая строка шапки липнет под строкой месяцев (только в «По неделям») */
.report thead tr.mrow th[rowspan] { vertical-align: middle; }
.report thead tr.mrow th.total { background: var(--accent-weak); }

/* ---------- главные строки отчёта: «Прибыль» и «Рентабельность» крупнее и на цветной подложке ---------- */
.report tr.keyrow td { font-size: 15px; font-weight: 700; padding-top: 11px; padding-bottom: 11px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.report tr.keyrow td:first-child { font-size: 15px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.report tr.keyrow td.mo1 { background: color-mix(in srgb, var(--accent) 15%, var(--panel)); }
.report tr.keyrow td.total { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.report tr.keyrow td.pcc { font-size: 12px; font-weight: 500; }
.report tr.keyrow td, .report tr.keyrow td.pv, .report tr.keyrow td.neg, .report tr.keyrow td.pcc { color: var(--text); }
.report tr.keyrow:has(td:first-child:is(:not(:empty))) { border-top: 0; }
.report tbody tr.keyrow:first-of-type td { border-top: 2px solid var(--mo-line); }
.report tbody tr.keyrow:hover td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
/* шапка с колонкой «Итого» непрозрачная: иначе строки просвечивают сквозь неё при прокрутке */
.report thead th.total, .report thead tr.mrow th.total, .report th.pg.total { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }

/* ---------- график по месяцам в ОПиУ ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.chips .cgrp { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin: 0 2px 0 10px; }
.chips .cgrp:first-child { margin-left: 0; }
.chip { font-size: 12px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.on { color: var(--text); font-weight: 600; border-color: var(--accent); background: var(--accent-weak); }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.mcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.mcp { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 6px; background: var(--panel); min-width: 0; }
.mct { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.mct span { font-weight: 700; font-size: 15px; }
.mct span.neg { color: var(--neg); }
#mchart { margin-bottom: 14px; }
#mchart canvas { width: 100%; display: block; }

/* ---------- меню слева: на компьютере узкая панель с иконками, при наведении раскрывается с названиями ---------- */
nav button svg, .sbrand { display: none; }
@media (min-width: 701px) {
  body { padding-left: 64px; }
  .brand { display: none; }
  #syncbox { margin-left: auto; }                      /* список магазинов слева, статус загрузки и кнопки справа */
  nav { position: fixed; left: 0; top: 0; bottom: 0; width: 64px; flex: none; flex-direction: column; flex-wrap: nowrap; gap: 2px;
    padding: 12px 10px; background: var(--panel); border-right: 1px solid var(--line); z-index: 30; overflow: hidden;
    transition: width .18s ease, box-shadow .18s ease; }
  nav:hover, nav:focus-within { width: 240px; box-shadow: 6px 0 28px rgba(0, 0, 0, .14); }
  .sbrand { display: flex; align-items: center; gap: 12px; padding: 2px 6px 14px; white-space: nowrap; font-size: 16px; }
  .sbrand .logo { flex: none; }
  nav button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 10px; border-bottom: 0;
    white-space: nowrap; text-align: left; }
  nav button svg { display: block; width: 20px; height: 20px; flex: none; }
  nav button:hover { background: var(--panel2); }
  nav button.active { background: var(--accent-weak); border-bottom: 0; }
  nav button.active svg { color: var(--accent); }
}
@media (min-width: 701px) {
  nav button span, .sbrand b { opacity: 0; transition: opacity .12s; }
  nav:hover button span, nav:hover .sbrand b, nav:focus-within button span, nav:focus-within .sbrand b { opacity: 1; transition-delay: .06s; }
}

/* ---------- сверка с отчётами ---------- */
.recon-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 10px 0 14px; }
.recon-how > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); line-height: 1.5; }
.primary-file { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.rc-card { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: 10px; background: var(--panel); }
.rc-card.ok { border-left-color: var(--pos); } .rc-card.bad { border-left-color: var(--neg); } .rc-card.warn { border-left-color: #d9a400; }
.rc-h { margin-bottom: 4px; } .rc-s { color: var(--muted); margin-bottom: 8px; }
.rc-t td:first-child, .rc-t th:first-child { position: static; min-width: 200px; }
.rc-t tr.rc-bad td { color: var(--neg); font-weight: 600; }