:root{
  color-scheme:dark;
  --bg:#0f1117;--panel:#171a23;--panel2:#1d2130;--line:#2a2f40;--line2:#3a4157;
  --text:#e7e9ef;--muted:#8d93a6;--dim:#5d6377;
  --accent:#6c8cff;--accent2:#a78bfa;
  --good:#3ecf8e;--bad:#ff6b6b;--warn:#f5a623;--yellow:#e8d44d;
  --good-bg:rgba(62,207,142,.14);--bad-bg:rgba(255,107,107,.14);--warn-bg:rgba(245,166,35,.14);--yellow-bg:rgba(232,212,77,.13);
  --radius:12px;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-size:13px}
a{color:var(--accent);text-decoration:none}
.num,td.n,.kpi .v{font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

/* layout: sidebar + top bar */
body{padding-left:224px}
.side{position:fixed;left:0;top:0;bottom:0;width:224px;background:#12141c;border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:60;padding:14px 10px}
.logo{display:flex;gap:10px;align-items:center;padding:4px 8px 16px}
.logo-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:16px}
.logo b{display:block;font-size:14px}.logo small{color:var(--muted);font-size:11px}
.tabs{display:flex;flex-direction:column;gap:2px;flex:1}
.tabs a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--muted);white-space:nowrap}
.tabs a i{font-style:normal;width:16px;text-align:center;opacity:.8}
.tabs a.on{background:var(--accent);color:#fff}
.tabs a:hover:not(.on){background:var(--panel2);color:var(--text)}
.side-spacer{flex:1}
.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;padding:8px 18px;min-height:46px;
  background:rgba(15,17,23,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .right{margin-left:auto;display:flex;gap:12px;align-items:center;color:var(--muted);white-space:nowrap}
main{padding:12px 18px 60px;margin:0 auto}

/* filters bar */
.bar{position:sticky;top:46px;z-index:40;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 0;background:var(--bg)}
.seg{display:inline-flex;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px}
.seg button{white-space:nowrap;border:0;background:none;padding:5px 10px;border-radius:7px;color:var(--muted)}
.seg button.on{background:var(--panel2);color:var(--text)}
.inp,select.inp{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 10px;outline:none}
.inp:focus{border-color:var(--accent)}
.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:6px 12px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{filter:brightness(1.15)}
.hint{color:var(--muted);font-size:12px}
.chk{display:inline-flex;gap:6px;align-items:center;color:var(--muted)}

/* cards */
.grid{display:grid;gap:12px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.card h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.kpi .l{color:var(--muted);font-size:12px;display:flex;justify-content:space-between}
.kpi .v{font-size:22px;font-weight:700;margin:6px 0 4px}
.kpi .p{color:var(--dim);font-size:12px}
.delta{font-size:12px;font-weight:600}
.delta.good{color:var(--good)}.delta.bad{color:var(--bad)}.delta.neutral{color:var(--muted)}
.q{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);
  color:var(--muted);font-size:10px;cursor:help;position:relative}
.q:hover::after{content:attr(data-tip);position:absolute;right:0;top:20px;width:260px;padding:8px 10px;background:#000;
  border:1px solid var(--line2);border-radius:8px;color:var(--text);font-size:12px;line-height:1.4;z-index:99;white-space:normal;text-align:left}

/* tables */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);max-height:calc(100vh - 150px)}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left}
th{position:sticky;top:0;z-index:5;background:var(--panel2);color:var(--muted);font-weight:600;font-size:12px}
td.n,th.n{text-align:right}
tr:hover td{background:rgba(255,255,255,.02)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600}
.pill.good{background:var(--good-bg);color:var(--good)}.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.yellow{background:var(--yellow-bg);color:var(--yellow)}
.pill.grey{background:var(--panel2);color:var(--muted)}
.dot{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;font-weight:700;font-size:11px}
.dot.A{background:var(--good-bg);color:var(--good)}.dot.B{background:var(--warn-bg);color:var(--warn)}.dot.C{background:var(--bad-bg);color:var(--bad)}
.thumb{width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--panel2);vertical-align:middle}
.thumb.lg{width:64px;height:64px}
.copy{cursor:copy;border-bottom:1px dashed var(--dim)}
.bar-in{position:relative}
.bar-in i{position:absolute;left:0;top:3px;bottom:3px;background:rgba(108,140,255,.18);border-radius:4px;z-index:0}
.bar-in span{position:relative;z-index:1}

/* RNP */
.rnp td,.rnp th{padding:5px 8px}
.rnp thead th{background:#1a1e2b;border-bottom:1px solid var(--line2)}
.rnp thead tr:first-child th{top:0}.rnp thead tr:nth-child(2) th{top:29px}
.rnp th.day{text-align:center;line-height:1.1}.rnp th.day b{display:block;color:var(--text)}.rnp th.day small{color:var(--dim)}
.rnp th.today{background:rgba(108,140,255,.25)!important}
.rnp th.fact{background:#1f2640!important}
.rnp .sticky{position:sticky;z-index:4;background:var(--panel)}
.rnp th.sticky{z-index:8}
.rnp .c1{left:0;min-width:300px;max-width:300px;white-space:normal;vertical-align:top;padding:10px!important}
.rnp .c2{left:300px;min-width:150px;max-width:150px;white-space:normal}
.rnp .c3{left:450px;min-width:140px;box-shadow:8px 0 10px -8px rgba(0,0,0,.7)}
.rnp tr.first td{border-top:4px solid #0b0d13}
.rnp tbody.alt td,.rnp tbody.alt td.sticky{background:#141720}
.rnp tbody.total td,.rnp tbody.total td.sticky{background:#18203a}
.rnp tbody.total td.c1{border-left:3px solid var(--accent)}
.rnp .grp{text-align:center;border-left:2px solid var(--line2)}
.rnp td.gl,.rnp th.gl{border-left:2px solid var(--line2)}
.rnp td.fact{background:rgba(108,140,255,.09)!important;font-weight:600}
.rnp td.we{background:rgba(255,255,255,.03)}
.rnp td.today{background:rgba(108,140,255,.12)!important;outline:1px solid rgba(108,140,255,.6);outline-offset:-1px}
.rnp td.ok{background:var(--good-bg)!important}.rnp td.miss{background:var(--bad-bg)!important}
.rnp td.neg{color:var(--bad)}
.rnp tr.main td{font-weight:600}.rnp tr.sub td{color:var(--muted);font-size:12px}
.rnp .lab{display:inline}.rnp td.c2{font-weight:500!important}
.ar{font-style:normal;font-size:9px;margin-right:3px;vertical-align:1px}.ar.good{color:var(--good)}.ar.bad{color:var(--bad)}
.dynbox{display:inline-block;padding:2px 6px;border-radius:6px;border:1px solid;font-size:11px;font-weight:600}
.dynbox.good{color:var(--good);border-color:rgba(62,207,142,.45)}.dynbox.bad{color:var(--bad);border-color:rgba(255,107,107,.45)}
.warnc{color:var(--warn)}
.mk{display:inline-block;width:3px;height:14px;border-radius:2px;margin-right:7px;vertical-align:-2px}
.plan-inp{width:96px;background:#11141c;border:1px solid var(--line);border-radius:6px;padding:3px 7px;text-align:right}
.plan-inp:focus{border-color:var(--accent);outline:none}
canvas.spark{width:130px;height:28px;display:block}
/* product card */
.pc{display:flex;flex-direction:column;gap:8px}
.pc-head{display:flex;gap:10px}.pc-title{min-width:0}
.pc .sku{font-weight:700}
.pc .nm{font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0}
.pc-price{display:grid;grid-template-columns:1.3fr 1fr;gap:6px}
.pc-price>div{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 9px;display:flex;flex-direction:column;gap:1px}
.pc-price b{font-size:13px}.pc-price b.big{font-size:17px}
.pc-price .idx{align-items:flex-start;gap:4px}
.pc-sub{margin-top:2px}
.facts{display:flex;flex-direction:column;gap:4px}
.facts>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.facts .maxdrr{background:#202640;border-radius:7px;padding:5px 8px;color:var(--text);margin-top:2px}
.chip{display:inline-block;min-width:44px;text-align:center;padding:2px 7px;border-radius:6px;font-weight:700;font-size:11.5px}
.chip.good{background:rgba(62,207,142,.18);color:var(--good)}.chip.bad{background:rgba(255,107,107,.18);color:var(--bad)}
.chip.yellow{background:rgba(232,212,77,.16);color:var(--yellow)}.chip.warn{background:rgba(245,166,35,.18);color:var(--warn)}
.chip.grey{background:var(--panel2);color:var(--text)}
.tot-title{font-size:17px;font-weight:700}
.mini-note{display:block;padding:5px 8px;margin:0;font-size:11px}
.prodcard{display:flex;gap:10px}
.prodcard .nm{font-weight:600;line-height:1.25;margin-bottom:4px;cursor:pointer}
.mini{display:grid;grid-template-columns:auto auto;gap:1px 10px;font-size:11px;color:var(--muted);margin-top:6px}
.mini b{font-weight:600;color:var(--text);text-align:right}
.pricebox{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.pricebox>div{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:11px;color:var(--muted)}
.pricebox b{display:block;color:var(--text);font-size:13px}

/* checklist */
.heat-good{background:var(--good-bg)!important}.heat-bad{background:var(--bad-bg)!important}
.heat-warn{background:var(--warn-bg)!important}.heat-yellow{background:var(--yellow-bg)!important}
.zero{color:var(--dim)}
.th-grp{text-align:center;border-left:2px solid var(--line2)}
.charts{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.chart-box{height:200px;position:relative}

/* finres */
.two{grid-template-columns:minmax(380px,1fr) minmax(380px,1.2fr);align-items:start}
.pnl td:first-child{white-space:normal}
.pnl tr.sub td:first-child{padding-left:26px;color:var(--muted)}
.pnl tr.total td{font-weight:700;border-top:2px solid var(--line2)}
.pnl .tog{cursor:pointer;color:var(--muted);display:inline-block;width:14px}

.empty{padding:40px;text-align:center;color:var(--muted)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#000;border:1px solid var(--line2);
  padding:8px 14px;border-radius:10px;z-index:200}
.note{background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:8px 12px;margin:8px 0}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line2);border-radius:14px;max-width:760px;width:95vw}
dialog::backdrop{background:rgba(0,0,0,.6)}

@media (max-width:900px){
  body{padding-left:0}
  .side{position:static;width:auto;flex-direction:row;padding:6px;overflow-x:auto}
  .side .logo{display:none}.tabs{flex-direction:row}.side-spacer{display:none}
  .top{position:static}
  .kpis{grid-template-columns:1fr 1fr}.kpi .v{font-size:18px}
  .two{grid-template-columns:1fr}
  main{padding:10px 10px 60px}
  .top{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .bar{top:85px}
  .rnp .c1{min-width:220px;max-width:220px}.rnp .c2{left:220px}.rnp .c3{position:static;box-shadow:none}
}

/* large monitors: scale everything up instead of leaving empty space */
@media (min-width:1900px){html,body{font-size:14px}}
@media (min-width:2500px){html{zoom:1.2}}
@media (min-width:3200px){html{zoom:1.45}}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#4c5470}
.loading-card{max-width:640px;margin:40px auto;text-align:center}
.loading-card .big{font-size:18px;font-weight:700;margin-bottom:8px}

.btn.sm{padding:4px 10px;font-size:12px}
table.costs td{vertical-align:middle}
dialog .inp{width:100%}
/* pages ported from Power BI: Заказы / Товарный остаток / Экономика товара */
td span.good,td.good{color:var(--good)}td span.bad,td.bad{color:var(--bad)}
tr.on td{background:rgba(108,140,255,.12)}
#odet table th,#sprod table th,#eprod table th{top:0}
#eprod thead tr:nth-child(2) td{position:sticky;top:29px;background:var(--panel2);z-index:4}