/* IBM Plex Sans / Mono, Manrope — SIL Open Font License; served from here, not Google (works without it) */
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-cyrillic-2501a3.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/IBMPlexMono-latin-a80b2c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexMono-cyrillic-477cfb.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/IBMPlexMono-latin-2137a5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-cyrillic-b0cdd1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-latin-f66677.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-cyrillic-b0cdd1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-latin-f66677.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-cyrillic-b0cdd1.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/IBMPlexSans-latin-f66677.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Manrope-cyrillic-4bebc6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/Manrope-latin-a96caf.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Manrope-cyrillic-4bebc6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Manrope-latin-a96caf.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Manrope-cyrillic-4bebc6.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/Manrope-latin-a96caf.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  --bg:#F5F4EF; --panel:#FFFFFF; --ink:#16161A; --muted:#5A5A63; --faint:#6B6B73;
  --line:#E2E0D8; --line-soft:#F0EEE7; --chip:#EDEBE3; --bar-ordered:#C9C6BA;
  --clay:#C25A34; --green:#1F6F4A; --red:#B0342A; --amber:#8A5A00; --blue:#2A4FBF;
  --ink-panel:#16161A; --ink-panel-fg:#F5F4EF; --ink-panel-mut:#A5A39A; --ink-panel-line:#3A3A40;
  --tag-bg:#F3E4C2; --tag-br:#E0CB9C; --tag-fg:#6B4A12;
  --c-commission:#2A4FBF; --c-logistics:#5578D8; --c-storage:#8AA0E4; --c-return:#B3C0EE; --c-penalty:#D3DAF6;
  --c-ads:#C25A34; --c-other:#7A7A82; --c-left:#1F6F4A;
  --c-cost:#B8862E; --c-pack:#D8B26A; --c-tax:#8E6A55;
  /* platforms as chart series (checked for colour blindness, docs/DESIGN.md) */
  --ser-ozon:#2A4FBF; --ser-ym:#8A5A00;
  /* type scale (docs/DESIGN.md): no other sizes in the markup */
  --fs-axis:10px; --fs-xs:12px; --fs-s:13px; --fs-m:14px; --fs-l:16px; --fs-xl:22px; --fs-xxl:30px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121214; --panel:#1C1C1F; --ink:#EDEBE5; --muted:#A3A19A; --faint:#8B8983;
    --line:#2E2E33; --line-soft:#26262A; --chip:#26262A; --bar-ordered:#4A4944;
    --clay:#E08A5F; --green:#5FB88A; --red:#E2796C; --amber:#D4A24A; --blue:#7B9AE8;
    --ink-panel:#000000; --ink-panel-fg:#EDEBE5; --ink-panel-mut:#8B8983; --ink-panel-line:#2E2E33;
    --tag-bg:#3A3117; --tag-br:#544526; --tag-fg:#E0C68B;
    --c-commission:#7B9AE8; --c-logistics:#5F7FCF; --c-storage:#4A63A8; --c-return:#3A4E86; --c-penalty:#2E3C66;
    --c-ads:#E08A5F; --c-other:#8B8983; --c-left:#5FB88A;
    --c-cost:#D4A24A; --c-pack:#8F7640; --c-tax:#A88874;
    --ser-ozon:#6585DB; --ser-ym:#B88A35;
  }
}
*{box-sizing:border-box}
/* class display rules (.card is flex) must not override the hidden attribute */
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:var(--fs-m);line-height:1.5}
.wrap{max-width:1440px;margin:0 auto;padding:32px 24px 72px;display:flex;flex-direction:column;gap:20px}
h1{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.5px;margin:0}
h2{font-family:Manrope,system-ui,sans-serif;font-weight:700;font-size:var(--fs-l);margin:0}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.sub{font-size:var(--fs-s);color:var(--muted)}
.small{font-size:var(--fs-xs)}
.lab{font-size:var(--fs-xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dark{background:var(--ink-panel);border:1px solid var(--ink-panel-line);border-radius:12px;padding:20px 22px;color:var(--ink-panel-fg);display:flex;flex-direction:column;gap:14px;min-width:0}
.dark .sub{color:var(--ink-panel-mut)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.between{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.big{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:26px;letter-spacing:-.5px}
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.split{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto;display:inline-block}
.btn{font:inherit;font-size:var(--fs-s);min-height:44px;padding:0 15px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer}
.select{appearance:none;-webkit-appearance:none;color:var(--ink);font-weight:600;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:3px;gap:2px}
.seg button{font:inherit;font-size:var(--fs-s);min-height:38px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);font-weight:600}
/* a small one: filters inside a tab, in the bar above its table */
.seg.sm{display:inline-flex;flex-wrap:wrap}
.seg.sm button{font-size:var(--fs-s);min-height:32px;padding:0 10px}
/* a count beside a label: tabs, filters */
.cnt{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-xs);background:var(--chip);color:var(--muted);border-radius:6px;padding:1px 7px;margin-left:6px}
/* «скоро»: a section or tab not made yet — the same mark everywhere */
.soon{font-size:var(--fs-axis);font-weight:600;letter-spacing:.3px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
/* explanations: at the bottom of a card, under a thin line */
.note{font-size:var(--fs-xs);color:var(--muted);border-top:1px solid var(--line-soft);padding-top:10px}
/* «Как считается»: the details of a note, closed */
details.how{margin-top:4px}
details.how summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none;display:inline}
details.how summary::-webkit-details-marker{display:none}
details.how summary::after{content:" ▾";color:var(--muted)}
details.how[open] summary::after{content:" ▴"}
details.how > div{margin-top:6px;line-height:1.55}
/* focus you can see, on everything one can press (keyboard) */
:focus-visible{outline:2px solid var(--clay);outline-offset:2px;border-radius:4px}
tr.model:focus-visible{outline-offset:-2px}
/* a long table: its own scroll, the header stays */
.scroll.tall{max-height:72vh;overflow:auto}
.scroll.tall thead th{position:sticky;top:0;background:var(--panel);z-index:1}
/* a word beside a warning colour: the colour is never the only sign */
.flag{font-size:var(--fs-xs);font-weight:600;margin-left:4px}
.btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:720px}
th{font-size:var(--fs-xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 10px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
td{font-size:var(--fs-s);padding:8px 10px 8px 0;border-bottom:1px solid var(--line-soft);white-space:nowrap}
td.num,th.num{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-s);text-align:right}
th.num{font-family:inherit;font-size:var(--fs-xs)}
.bar{display:flex;height:22px;border-radius:5px;overflow:hidden;gap:1px}
.track{height:9px;border-radius:5px;background:var(--chip)}
.fill{height:9px;border-radius:5px}
.legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 16px}
.chart{display:flex;align-items:flex-end;gap:4px;height:150px}
.col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 0;min-width:0}
.pair{display:flex;align-items:flex-end;gap:2px;height:128px}
.pair div{width:9px;border-radius:2px 2px 0 0}
/* stacked column: segments from the baseline up, a 2px gap between them, the top end rounded */
.stack{display:flex;flex-direction:column-reverse;gap:2px;height:128px;width:100%;max-width:18px}
.stack div{flex:0 0 auto}
.stack div:last-child{border-radius:4px 4px 0 0}
.col.hit{cursor:default;border-radius:4px}
.col.hit:hover .stack,.col.hit:focus-visible .stack{filter:brightness(1.15)}
/* chart tooltip: values first, the series keyed by a short stroke */
.tip{position:absolute;z-index:5;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:var(--fs-xs);color:var(--muted);box-shadow:0 4px 16px rgba(0,0,0,.18);white-space:nowrap}
.tip b{color:var(--ink);font-family:"IBM Plex Mono",monospace;font-weight:600}
.tip .key{display:inline-block;width:12px;height:2px;vertical-align:middle;margin-right:6px}
.funnel{display:flex;align-items:flex-end;gap:8px}
.stage{flex:1;display:flex;flex-direction:column}
.stage .box{border-radius:8px;padding:12px;display:flex;flex-direction:column;justify-content:flex-end}
hr.sep{border:0;border-top:1px solid var(--line);margin:36px 0 0}
.up{color:var(--green);font-weight:600}.down{color:var(--red);font-weight:600}
.err{color:var(--red)}
.tag{font-size:var(--fs-xs);font-weight:600;letter-spacing:.3px;color:var(--ink-panel-mut);border:1px solid var(--ink-panel-line);border-radius:4px;padding:3px 8px;white-space:nowrap}
td.name{max-width:320px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1360px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .wrap{padding:20px 16px 48px}
  .kpis{grid-template-columns:1fr}
  .big{font-size:var(--fs-xl)}
  .pair div{width:5px}
  .seg{width:100%;flex-wrap:wrap}
  .seg button{flex:1;padding:0 4px}
  .select{width:100%}
}
/* tabs inside a page, under its header (Экономика, Закупки, Справочники) */
.stabs{display:flex;gap:28px;border-bottom:1px solid var(--line);flex-wrap:wrap;row-gap:8px}
.stabs button{font:inherit;font-size:var(--fs-l);background:none;border:0;border-bottom:2px solid transparent;padding:0 0 10px;margin-bottom:-1px;color:var(--muted);cursor:pointer}
.stabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
/* a model's row that opens to its sets (Экономика, Склад) */
tr.model{cursor:pointer}
tr.model:hover td{background:var(--line-soft)}
tr.inner td{background:var(--line-soft);font-size:var(--fs-s)}
tr.inner td.name{padding-left:30px}
/* tabs between sections, shared by every page */
.nav{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);margin:-12px 0 4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav .brand{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:var(--fs-l);letter-spacing:-.2px;color:var(--ink);margin-right:6px;white-space:nowrap}
.nav a{font-size:var(--fs-m);color:var(--muted);text-decoration:none;padding:12px 2px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--clay)}
.plan{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.plan b{color:var(--ink);font-weight:600}
@media (max-width:560px){.nav{gap:14px;margin-top:-4px}}
/* editable tables (cost and other data-entry pages) */
.in{font:inherit;font-size:var(--fs-s);padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:100%;min-width:56px}
.in:focus{outline:2px solid var(--clay);outline-offset:-1px}
input.in[type=number]{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-s)}
input.in[type=color]{padding:2px;height:32px;min-width:44px}
.link{font:inherit;font-size:var(--fs-s);background:none;border:0;padding:4px 0;color:var(--blue);cursor:pointer;white-space:nowrap}
.link.warn{color:var(--red);font-weight:600}
.link.quiet{color:var(--muted)}
/* buttons: .save — the main one, filled; .add — a secondary one, outlined; .link — an action in a table row */
.add{font:inherit;font-size:var(--fs-s);font-weight:600;min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.add:hover{border-color:var(--muted)}
.save{font:inherit;font-size:var(--fs-s);font-weight:600;min-height:36px;padding:0 14px;border-radius:8px;border:0;background:var(--ink);color:var(--bg);cursor:pointer}
.msg{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;max-width:min(560px,calc(100vw - 32px));font-size:var(--fs-m);font-weight:600;padding:12px 18px;border-radius:10px;background:var(--ink);color:var(--bg);box-shadow:0 6px 24px rgba(0,0,0,.25)}
.msg.bad{background:var(--red);color:#fff}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--line-soft)}
tr.picked td{background:var(--chip)}
.swatch{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:7px;border:1px solid var(--line)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:var(--fs-s);padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
table.edit{min-width:0}
table.edit td{white-space:normal;vertical-align:middle}
/* filters above editable tables: one search box and chip groups */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:4px}
.filters .fsearch{width:280px;min-height:40px}
.filters .fsel{min-height:40px}
.filters .fadd,.filters .add{min-height:40px;padding:0 16px}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flab{font-size:var(--fs-xs);font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-right:2px}
.filters .chip{min-height:30px}
.fcount{margin-left:auto}
/* a settings line in the bar; opened, its history takes the whole width */
.filters .params:has(.p-hist){flex-basis:100%}
@media (max-width:560px){.filters .fsearch{width:100%}.fcount{margin-left:0}}
/* the login page and the way out (mpdash/auth.py) */
.nav .nav-out{margin-left:auto;padding:12px 2px}
.login{max-width:380px;padding-top:12vh}
.login .brand{font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:var(--fs-l);color:var(--ink)}
.login form{display:flex;flex-direction:column;gap:12px}
.login label{display:flex;flex-direction:column;gap:4px}
.login .in{font-size:var(--fs-m);padding:10px 12px}
.login .save{min-height:44px;font-size:var(--fs-m)}