/* «Графит»: calm neutral surfaces, one action colour (indigo), status colours only for meaning
   (red = срочно, amber = скоро, green = ок), no glow. Dark = :root, light = [data-theme=light];
   base.html picks the saved theme or the OS one. Token names are kept from the old neon theme. */
:root{
  color-scheme:dark; --scheme:dark;
  --bg:#0e1015; --card:#161920; --card-2:#1c2029; --ink:#e6e8ec; --muted:#98a0ae;
  --line:#242933; --line-strong:#323845;
  --accent:#7c7ff2; --accent-text:#a5a7f8; --accent-strong:#5b5ef0;
  --teal:#2ec4a6; --teal-soft:#5fdcc3;
  --urgent:#f97066; --soon:#fdb022; --ok:#47cd89; --dead:#7a8291;
  --info:#53b1fd; --ozon:#3d7bff; --wb:#d94fc0;
  --shop-ozon-1:#3d7bff; --shop-ozon-2:#93b8ff; --shop-wb-1:#d94fc0; --shop-wb-2:#f0a3e1;
  --mp-oz-ink:#93b8ff; --mp-wb-ink:#f0a3e1;
  --ink-strong:#ffffff; --brand-ink:#c7c8fb; --violet-hi:#c7c8fb; --urgent-soft:#fda29b;
  --grey-ink:#b3bac6; --danger-ink:#fecdca; --teal-ink:#5fdcc3; --amber-ink:#fec84b;
  --orange:#fb8a3c; --orange-ink:#fdb27a; --purple:#b692f6; --purple-ink:#d6bbfb; --good-soft:#75e0a7;
  --shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --input-bg:#11141a; --side-bg:#12151b; --panel-bg:var(--card);
  --scrim:rgba(0,0,0,.55); --overlay-bg:rgba(5,6,9,.7); --flash-bg:rgba(22,25,32,.97);
  --chart-grid:#2a2f39; --chart-text:#98a0ae; --chart-ink:#e6e8ec; --chart-tip-bg:#1c2029; --chart-tip-muted:#b3bac6; --chart-tip-ink:#fff;
  /* categorical: validated dataviz order (blue, orange, aqua, yellow, magenta, green, violet), dark steps */
  --chart-1:#3987e5; --chart-2:#d95926; --chart-3:#199e70; --chart-4:#c98500; --chart-5:#d55181; --chart-6:#2f9e2f; --chart-7:#9085e9;
  --chart-ad:#c98500; --chart-order:#199e70; --chart-spend:#d95926; --chart-shipped:#3987e5; --chart-fbo:#d55181;
  --track-bg:#2a2f39; --pct-good:#47cd89; --pct-mid:#fdb022; --pct-bad:#f97066; --cell-changed:rgba(253,176,34,.22);
  --pop-shadow:rgba(0,0,0,.4); --bar-shadow-up:rgba(0,0,0,.2); --toast-shadow:0 8px 24px rgba(0,0,0,.45);
  --mask-ink:#000; --spoiler-rgb:230,232,236; --sp-veil:rgba(22,25,32,.4); --sp-veil-strong:rgba(22,25,32,.75);
}
:root[data-theme="light"]{
  color-scheme:light; --scheme:light;
  --bg:#f4f5f7; --card:#ffffff; --card-2:#f7f8fa; --ink:#161a22; --muted:#5b6372;
  --line:#e6e8ec; --line-strong:#d3d7de;
  --accent:#4f46e5; --accent-text:#4338ca; --accent-strong:#4f46e5;
  --teal:#0e9384; --teal-soft:#107569;
  --urgent:#d92d20; --soon:#b54708; --ok:#067647; --dead:#667085;
  --info:#1570ef; --ozon:#005bff; --wb:#cb11ab;
  --shop-ozon-1:#005bff; --shop-ozon-2:#0a2f8c; --shop-wb-1:#cb11ab; --shop-wb-2:#6b1a7a;
  --mp-oz-ink:#0040b3; --mp-wb-ink:#8a0c74;
  --ink-strong:#0b0d12; --brand-ink:#4338ca; --violet-hi:#3730a3; --urgent-soft:#b42318;
  --grey-ink:#5b6372; --danger-ink:#b42318; --teal-ink:#107569; --amber-ink:#93370d;
  --orange:#e04f16; --orange-ink:#b93815; --purple:#7f56d9; --purple-ink:#6941c6; --good-soft:#079455;
  --shadow-card:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-pop:0 12px 32px rgba(16,24,40,.14),0 2px 6px rgba(16,24,40,.06);
  --input-bg:#ffffff; --side-bg:#ffffff; --panel-bg:var(--card);
  --scrim:rgba(16,24,40,.35); --overlay-bg:rgba(16,24,40,.4); --flash-bg:rgba(255,255,255,.97);
  --chart-grid:#eceef2; --chart-text:#5b6372; --chart-ink:#161a22; --chart-tip-bg:#ffffff; --chart-tip-muted:#5b6372; --chart-tip-ink:#161a22;
  --chart-1:#1f6fd1; --chart-2:#eb6834; --chart-3:#1baf7a; --chart-4:#eda100; --chart-5:#c13a72; --chart-6:#008300; --chart-7:#4a3aa7;
  --chart-ad:#a15c00; --chart-order:#08754f; --chart-spend:#c2410c; --chart-shipped:#1f6fd1; --chart-fbo:#c13a72;
  --track-bg:#e6e8ec; --pct-good:#067647; --pct-mid:#b54708; --pct-bad:#d92d20; --cell-changed:#fef0c7;
  --pop-shadow:rgba(16,24,40,.12); --bar-shadow-up:rgba(16,24,40,.08); --toast-shadow:0 8px 24px rgba(16,24,40,.18);
  --mask-ink:#000; --spoiler-rgb:22,26,34; --sp-veil:rgba(244,245,247,.45); --sp-veil-strong:rgba(244,245,247,.8);
}
/* derived tokens: computed on <html> from the theme's base colours, so one definition serves both themes */
:root{
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-sm:6px; --r:8px; --r-lg:12px;
  --focus:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);
  --age-warn-bg:color-mix(in srgb,var(--soon) 12%,transparent); --age-alarm-bg:color-mix(in srgb,var(--urgent) 10%,transparent);
  --tint-1:color-mix(in srgb,var(--accent) 4%,transparent); --tint-2:color-mix(in srgb,var(--accent) 8%,transparent);
  --tint-3:color-mix(in srgb,var(--accent) 13%,transparent); --tint-06:color-mix(in srgb,var(--accent) 5%,transparent);
  --tint-07:color-mix(in srgb,var(--accent) 6%,transparent); --tint-08:color-mix(in srgb,var(--accent) 7%,transparent);
  --tint-14:color-mix(in srgb,var(--accent) 10%,transparent); --tint-16:color-mix(in srgb,var(--accent) 12%,transparent);
  --tint-22:color-mix(in srgb,var(--accent) 15%,transparent);
  --tint-teal:color-mix(in srgb,var(--teal) 13%,transparent); --tint-teal-10:color-mix(in srgb,var(--teal) 10%,transparent);
  --tint-teal-08:color-mix(in srgb,var(--teal) 8%,transparent);
  --tint-red:color-mix(in srgb,var(--urgent) 12%,transparent); --tint-red-10:color-mix(in srgb,var(--urgent) 10%,transparent);
  --tint-red-08:color-mix(in srgb,var(--urgent) 8%,transparent); --tint-red-07:color-mix(in srgb,var(--urgent) 7%,transparent);
  --tint-amber:color-mix(in srgb,var(--soon) 14%,transparent); --tint-amber-08:color-mix(in srgb,var(--soon) 9%,transparent);
  --tint-amber-07:color-mix(in srgb,var(--soon) 8%,transparent);
  --tint-orange:color-mix(in srgb,var(--orange) 12%,transparent); --tint-purple:color-mix(in srgb,var(--purple) 12%,transparent);
  --tint-grey:color-mix(in srgb,var(--dead) 14%,transparent);
  --border-violet-30:var(--line); --border-violet-35:var(--line); --border-violet-45:var(--line-strong);
  --border-violet-50:color-mix(in srgb,var(--accent) 35%,transparent); --border-violet-55:var(--line-strong);
  --border-violet-60:var(--line-strong);
  --border-teal:color-mix(in srgb,var(--teal) 45%,transparent); --border-teal-45:color-mix(in srgb,var(--teal) 35%,transparent);
  --border-red:color-mix(in srgb,var(--urgent) 35%,transparent); --border-red-45:color-mix(in srgb,var(--urgent) 40%,transparent);
  --border-red-55:color-mix(in srgb,var(--urgent) 45%,transparent); --border-red-70:color-mix(in srgb,var(--urgent) 55%,transparent);
  --border-amber:color-mix(in srgb,var(--soon) 35%,transparent); --border-amber-45:color-mix(in srgb,var(--soon) 40%,transparent);
  --border-grey:color-mix(in srgb,var(--dead) 35%,transparent);
  --row-line:var(--line); --row-hover:color-mix(in srgb,var(--ink) 3.5%,transparent); --side-border:var(--line);
  --grid-dot:transparent; --side-shadow:var(--shadow-pop); --btn-grad-end:var(--accent-strong);
  --nav-active-ink:var(--accent-text); --nav-active-glow:none; --secondary-hover-bg:var(--tint-2);
  --panel-inset:var(--shadow-card); --kpi-inset:var(--shadow-card); --kpi-debt-shadow:var(--shadow-card);
  --kpi-hover-shadow:var(--shadow-pop); --btn-shadow:0 1px 2px rgba(16,24,40,.12); --dialog-shadow:var(--shadow-pop);
  --bento-tint:transparent; --bento-tint-teal:transparent; --bento-top:var(--card); --bento-bottom:var(--card);
  --bento-shadow:var(--shadow-card); --bento-hover-shadow:var(--shadow-card); --debt-row-shadow:none;
  --glow:none; --glow-k:0; --laser-op:0; --spark-filter:none;
  --glow-violet-25:transparent; --glow-violet-50:transparent; --glow-violet-55:transparent; --glow-violet-70:transparent;
  --glow-violet-90:transparent; --glow-violet-95:transparent; --glow-teal-30:transparent; --glow-teal-35:transparent;
  --glow-teal-60:transparent; --glow-teal-65:transparent; --glow-teal-90:transparent;
  --glow-red-30:transparent; --glow-red-35:transparent; --glow-red-70:transparent;
  --print-bg:#fff; --print-ink:#000; --print-line:#ccc; --print-th:#f2f2f2; --print-row:#ddd;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans);font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--accent-text);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px}
/* left sidebar nav; on phones it slides in from a burger in .mbar */
:root{--side-w:232px}
body{padding-left:var(--side-w)}
.side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);z-index:40;display:flex;flex-direction:column;
  padding:14px 10px 12px;overflow-y:auto;background:var(--side-bg);border-right:1px solid var(--side-border);scrollbar-width:thin}
.side .brand,.mbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--ink-strong);letter-spacing:-.01em;text-decoration:none}
.side .brand{padding:4px 10px 14px}
.side .brand img,.mbar .brand img{width:26px;height:26px;border-radius:7px}
.side nav{flex:1;display:flex;flex-direction:column}
.side .grp{padding:6px 0}
.side .grp-t{padding:10px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dead)}
.side a:not(.brand){position:relative;display:block;color:var(--muted);padding:6px 10px;margin:1px 0;border-radius:var(--r-sm);font-size:14px;font-weight:500}
.side a:not(.brand):hover{background:var(--row-hover);color:var(--ink-strong);text-decoration:none}
.side a.active{background:var(--tint-3);color:var(--nav-active-ink);font-weight:600}
.side a.active:before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.side-foot{display:flex;align-items:center;gap:6px;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.side .side-foot .logout{flex:1;margin:0;border:0}
.theme-toggle{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border-radius:var(--r);
  background:transparent;color:var(--muted);border:1px solid var(--line-strong);box-shadow:none;
  font:400 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer}
.theme-toggle:hover{background:var(--row-hover);color:var(--ink-strong);filter:none}
.mbar .theme-toggle{margin-left:auto}
.mbar,.nav-scrim{display:none}
/* overflow-x makes main a clipping scroll container so wide tables (/demand, /pricing) scroll instead of stretching the page; absolutely positioned popovers inside main get clipped by it. */
main{max-width:1240px;margin:28px auto;padding:0 24px 8px;overflow-x:auto}
@media(max-width:900px){
  :root{--mbar-h:56px}
  body{padding-left:0}
  .mbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;height:56px;padding:0 12px;
    background:color-mix(in srgb,var(--side-bg) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--side-border)}
  .burger{width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:var(--r)}
  .burger:hover{background:var(--row-hover)}
  .burger span,.burger span:before,.burger span:after{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px;position:relative}
  .burger span:before,.burger span:after{content:"";position:absolute;left:0}
  .burger span:before{top:-6px} .burger span:after{top:6px}
  .side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--side-shadow);width:min(280px,84vw)}
  .side a:not(.brand){padding:9px 10px;font-size:15px}
  .nav-toggle:checked~.side{transform:none}
  .nav-toggle:checked~.nav-scrim{display:block;position:fixed;inset:0;z-index:35;background:var(--scrim)}
  main{margin:18px auto;padding:0 16px 8px}
}
h1{font-size:22px;font-weight:700;margin:0 0 18px;letter-spacing:-.015em;color:var(--ink-strong)}
h2{font-size:16px;font-weight:650;margin:0 0 12px;color:var(--ink-strong)}
h3{font-size:14px;font-weight:650;margin:18px 0 8px;color:var(--ink-strong)}
.num,.value,td,th{font-variant-numeric:tabular-nums}
.kpi-row{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:14px 16px}
.kpi .label{font-size:12px;font-weight:500;color:var(--muted)}
.kpi .value{font-size:24px;font-weight:700;margin-top:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.kpi .delta.up{color:var(--ok)} .kpi .delta.down{color:var(--urgent)}
.kpi .value.alarm{color:var(--urgent)}
.kpi .value.ok{color:var(--ok)}
.kpi.debt{border-color:var(--border-violet-50);background:linear-gradient(var(--tint-1),var(--tint-1)),var(--card)}
.kpi.debt .value{color:var(--accent-text)}
a.kpi{color:inherit;text-decoration:none;display:block;transition:box-shadow .15s,border-color .15s}
a.kpi:hover{border-color:var(--line-strong);box-shadow:var(--kpi-hover-shadow)}
.kpi-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;margin-bottom:20px}
.panel h2{font-size:15px;color:var(--ink-strong);margin:0 0 12px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar form{display:flex;gap:8px;flex-wrap:wrap}
input,select,textarea,button{font:inherit;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--input-bg);color:var(--ink);
  transition:border-color .12s,box-shadow .12s,background .12s}
input,select{min-height:36px}
input::placeholder,textarea::placeholder{color:var(--dead)}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--line-strong) 60%,var(--muted))}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--focus)}
button:focus-visible,.btn:focus-visible{outline:0;box-shadow:var(--focus)}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);min-height:0}
/* One filled (indigo) button per screen: plain button/.btn is quiet, .primary is the main action,
   .on marks the selected item of a toggle group (periods, tabs, pages). */
button,.btn{background:var(--card);color:var(--ink);border-color:var(--line-strong);min-height:36px;
  cursor:pointer;font-weight:500;box-shadow:var(--btn-shadow)}
button:hover,.btn:hover{background:var(--card-2);border-color:color-mix(in srgb,var(--line-strong) 60%,var(--muted));text-decoration:none}
button:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
a.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r);line-height:1.5}
input[type=file]::file-selector-button{background:var(--card-2);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:4px 10px;margin-right:10px;cursor:pointer;font:inherit}
.btn.primary,button.primary{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong);font-weight:600}
.btn.primary:hover,button.primary:hover{background:color-mix(in srgb,var(--accent-strong) 88%,var(--mask-ink));border-color:var(--accent-strong)}
.btn.on,button.on{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--tint-2);box-shadow:none}
/* Marketplace chip before a shop name (|shop_name). */
.mp{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1;padding:3px 5px;border-radius:4px;margin-right:6px;vertical-align:1px}
.mp-oz{background:color-mix(in srgb,var(--shop-ozon-1) 14%,transparent);color:var(--mp-oz-ink)}
.mp-wb{background:color-mix(in srgb,var(--shop-wb-1) 14%,transparent);color:var(--mp-wb-ink)}
.btn.danger,button.danger{background:var(--tint-red);color:var(--danger-ink);border-color:var(--border-red-55);box-shadow:none}
.btn.danger:hover,button.danger:hover{background:color-mix(in srgb,var(--urgent) 20%,transparent)}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.panel table{border:0;border-radius:0}
th{padding:9px 12px;text-align:left;font-size:12px;font-weight:600;color:var(--muted);background:var(--card-2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
tbody tr:hover td{background:var(--row-hover)}
th a{color:inherit}
tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:99px;font-size:12px;font-weight:600;line-height:18px;border:1px solid transparent;white-space:nowrap}
.badge.new{background:var(--tint-red);color:var(--urgent-soft);border-color:var(--border-red)}
.badge.packed{background:var(--tint-amber);color:var(--amber-ink);border-color:var(--border-amber)}
.badge.shipped{background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}
.badge.delivered{background:var(--tint-teal);color:var(--ok);border-color:var(--border-teal-45)}
.badge.cancelled{background:var(--tint-grey);color:var(--grey-ink);border-color:var(--border-grey)}
.badge.high{background:var(--tint-teal);color:var(--ok);border-color:var(--border-teal-45)}
.badge.low{background:var(--tint-red);color:var(--urgent-soft);border-color:var(--border-red)}
.urgent{color:var(--urgent);font-weight:600}.soon{color:var(--soon)}.ok{color:var(--ok)}.dead{color:var(--dead)}
.chart{width:100%;height:auto}
.chart-hover{display:none}
.chart-hover.show{display:block}
.shop-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.shop-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:14px 16px}
.shop-card .name{font-weight:650}
.shop-card .nums{color:var(--muted);font-size:12px;margin:4px 0}
.spark{display:block;margin-top:6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--muted)}
.legend-item{display:flex;align-items:center;gap:6px}
.legend-swatch{width:10px;height:10px;border-radius:3px;display:inline-block;background:var(--accent)}
.legend-dash{background:none;border-top:2px dashed var(--ink);height:0;width:16px;border-radius:0}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px}
.muted{color:var(--muted)}
@media(max-width:760px){.kpi-row{grid-template-columns:repeat(2,1fr)}.kpi-row-3{grid-template-columns:1fr}}
/* tabs = segmented control */
.tabs{display:inline-flex;gap:2px;margin-bottom:16px;flex-wrap:wrap;padding:3px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line);max-width:100%}
.tabs a{padding:5px 12px;border-radius:var(--r-sm);color:var(--muted);font-size:13px;font-weight:600}
.tabs a:hover{color:var(--ink-strong);text-decoration:none}
.tabs a.active{background:var(--card);color:var(--ink-strong);box-shadow:var(--btn-shadow),0 0 0 1px var(--line)}
/* !important is needed to beat inline border:none styles on the orders.html dialogs. */
dialog{background:var(--card);color:var(--ink);border:1px solid var(--line) !important;border-radius:var(--r-lg);box-shadow:var(--dialog-shadow)}
dialog::backdrop{background:var(--overlay-bg)}
#job-list p{margin:3px 0}
progress{accent-color:var(--accent)}
.shop-counts{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:13px}
tr.age-warn td{background:var(--age-warn-bg)}
tr.age-alarm td{background:var(--age-alarm-bg)}
tr.mismatch td{background:var(--age-alarm-bg)}
tr.selected td{background:var(--tint-14)}
svg.dashboard-chart{cursor:pointer}
.real-badge{color:var(--ok);font-weight:700;margin-left:3px}
.estimate-badge{color:var(--muted);font-weight:700;margin-left:3px}
/* WB price advisor (/pricing) */
.zone-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.zone-card{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line);
  border-left-width:4px;border-radius:var(--r);background:var(--card);color:var(--ink);cursor:pointer;font:inherit;text-align:left;box-shadow:var(--shadow-card)}
.zone-card:hover{background:var(--card-2)}
.zone-card .label{font-size:12px;color:var(--muted);font-weight:600}
.zone-card .value{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.zone-card .muted{font-size:11px}
.zone-card.active{box-shadow:0 0 0 2px var(--accent)}
.zone-loss{border-left-color:var(--urgent)}.badge.zone-loss{background:var(--tint-red);color:var(--urgent-soft)}
.zone-low_profit{border-left-color:var(--orange)}.badge.zone-low_profit{background:var(--tint-orange);color:var(--orange-ink)}
.zone-stale{border-left-color:var(--purple)}.badge.zone-stale{background:var(--tint-purple);color:var(--purple-ink)}
.zone-slow{border-left-color:var(--soon)}.badge.zone-slow{background:var(--tint-amber);color:var(--amber-ink)}
.zone-hit{border-left-color:var(--ok)}.badge.zone-hit{background:var(--tint-teal);color:var(--ok)}
.zone-normal{border-left-color:var(--accent)}.badge.zone-normal{background:var(--tint-16);color:var(--accent-text)}
.zone-no_stock,.zone-no_data{border-left-color:var(--dead)}.badge.zone-no_stock,.badge.zone-no_data{background:var(--tint-grey);color:var(--grey-ink)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 12px;align-items:end;margin-bottom:8px}
.settings-grid label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--muted)}
.settings-grid input{width:100%}
.notes{margin:0;padding-left:18px}.notes li{margin:2px 0}
.small{font-size:12px}
.use-rec{padding:0 6px;font-size:12px;margin-left:4px;min-height:0}
/* modal used by the /debts cancel dialog */
.modal-overlay{position:fixed;inset:0;background:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-overlay[hidden]{display:none}
.modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;max-width:560px;width:calc(100% - 32px);max-height:85vh;overflow:auto;box-shadow:var(--dialog-shadow)}
.token-warn{border:1px solid var(--border-amber);border-left:3px solid var(--soon);border-radius:var(--r);padding:10px 14px;margin:0 0 16px;background:var(--tint-amber-08)}
.token-warn strong{color:var(--amber-ink)}
.token-warn .muted{color:var(--muted);font-size:13px;margin-top:4px}
.modal .warn{border-left:3px solid var(--soon);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:6px 10px;margin:10px 0;background:var(--tint-amber-07)}
.modal .note{border-left:3px solid var(--urgent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:6px 10px;margin:10px 0;background:var(--tint-red-07)}
/* Overview (/): bento of calm cards, one big number each, thin share bars, sparklines */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0}
.period-pick select{border-radius:var(--r)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.bento-card,.shop-tile,.panel.laser{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow-card);transition:border-color .15s}
.bento-card:hover,.shop-tile:hover{border-color:var(--line-strong)}
.bento-card{display:flex;flex-direction:column;padding:18px 18px 16px;min-height:300px}
.bento-card>.label,.shop-tile .name,.bento-foot .label,.autopack .label{font-size:13px;font-weight:500;color:var(--muted)}
.bento-card>.label{padding-right:78px}
.value.big{font-variant-numeric:tabular-nums;font-size:34px;line-height:1.1;font-weight:700;color:var(--ink-strong);
  margin:6px 0 14px;letter-spacing:-.025em;white-space:nowrap}
.value.big small{font-size:15px;color:var(--muted);font-weight:600;letter-spacing:0}
.value.big.glow-teal{color:var(--ok)}
.value.big.glow-violet{color:var(--ink-strong)}
.value.big.alarm{color:var(--urgent)}
.value.big.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;font:600 12px/1 var(--sans);font-variant-numeric:tabular-nums;padding:4px 8px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted);background:var(--card-2);white-space:nowrap}
.pill.corner{position:absolute;top:16px;right:16px}
.pill.up{color:var(--ok);border-color:var(--border-teal-45);background:var(--tint-teal-10)}
.pill.down{color:var(--urgent);border-color:var(--border-red);background:var(--tint-red-10)}
.laser-bar{display:flex;gap:2px;height:8px;border-radius:99px;background:var(--track-bg);margin-bottom:14px;overflow:hidden}
.laser-bar i{display:block;height:100%;background:var(--c)}
.laser-bar i:first-child{border-radius:99px 0 0 99px} .laser-bar i:last-child{border-radius:0 99px 99px 0}
.laser-bar i:only-child{border-radius:99px}
.bento-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bento-rows li,.bento-rows .row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;border-top:1px solid var(--row-line)}
.bento-rows li:first-child,.bento-rows .row:first-child{border-top:0}
.bento-rows .name,.bento-rows .row .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.bento-rows .num,.bento-rows .row .value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-strong)}
.bento-rows .row .value.ok{color:var(--ok)} .bento-rows .row .value.muted{color:var(--muted)} .bento-rows .row .value.alarm{color:var(--urgent)}
.bento-rows .pct{font:600 11px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);background:var(--card-2);border-radius:5px;padding:2px 6px;min-width:40px;text-align:right}
.bento-rows a.row{color:inherit;text-decoration:none;margin:0 -8px;padding:6px 8px;border-radius:var(--r-sm)}
.bento-rows a.row:hover{background:var(--row-hover);text-decoration:none}
.bento-rows a.row.debt{border:1px solid var(--border-violet-50);background:var(--tint-1);margin:0;padding:10px 12px;border-radius:var(--r)}
.bento-rows a.row.debt .value{color:var(--accent-text);font-size:16px}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c)}
.bento-foot{display:flex;gap:22px;margin-top:auto;padding-top:12px}
.bento-foot .value{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink-strong);margin-top:2px}
.bento-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.bento-spark{margin:auto -18px -16px;padding-top:10px}
.bento-spark .spark{width:100%;height:46px}
.autopack{margin-top:auto;padding-top:14px}
.autopack form{margin:6px 0 4px}
.autopack select{width:100%}
.spark{overflow:visible}
.spark polyline{filter:var(--spark-filter)}
/* sparkline_svg tags the polyline by its colour family */
.spark polyline.sp-violet{color:var(--accent)}
.spark polyline.sp-teal{color:var(--teal)}
.shop-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.shop-tile{padding:14px 16px 12px}
.shop-tile .value{font-weight:700;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink-strong);margin:4px 0 2px}
.shop-tile .nums{color:var(--muted);font-size:12px}
.shop-tile .spark{width:100%;height:34px;margin-top:8px}
.tile-orders{margin:8px 0 6px}
.tile-orders-total{font-size:12px;color:var(--muted)}
.tile-orders-total b{font:700 18px/1.2 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-strong);margin-right:2px}
.laser-bar.tile-split{height:6px;margin:6px 0 7px}
.tile-orders-legend{display:flex;gap:14px;font:600 12px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.tile-orders-legend>span{display:inline-flex;align-items:center;gap:5px}
.tile-orders-legend .dot{width:7px;height:7px}
.tile-orders-legend .muted{color:var(--muted);cursor:help}
.day-card{scroll-margin-top:12px}
.day-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.day-head h2{margin:0}
.day-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.day-shops td,.day-shops th{white-space:nowrap}
.day-chip,.day-step{display:inline-flex;align-items:center;justify-content:center;height:32px;border-radius:var(--r);border:1px solid var(--line-strong);
  color:var(--ink);font-size:13px;font-weight:500;padding:0 12px;background:var(--card);min-height:0;box-shadow:none}
.day-step{width:32px;padding:0;font-size:18px}
.day-step.off{opacity:.35}
.day-chip:hover,.day-step:hover{background:var(--card-2);text-decoration:none}
.day-chip.active{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--tint-2)}
.day-pick input{height:32px;min-height:0;padding:0 10px;color-scheme:var(--scheme)}
.day-summary{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:24px;align-items:start;margin-bottom:12px}
.day-total .value.big{margin:0 0 4px}
.day-bar{height:8px;margin:6px 0 12px}
.day-statuses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 18px}
.day-statuses li{display:flex;align-items:center;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--row-line)}
.day-statuses .name{flex:1}
.day-statuses .num{font:700 15px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.day-statuses .pct{font:600 11px var(--sans);font-variant-numeric:tabular-nums;color:var(--muted);min-width:34px;text-align:right}
.day-statuses li.zero{opacity:.45}
.table-scroll{overflow-x:auto}
.day-shops th .dot{display:inline-block;width:7px;height:7px;margin-right:5px;vertical-align:middle}
.day-shops td:nth-child(n+2),.day-shops th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.day-foot{margin:10px 0 0}
@media(max-width:700px){.day-summary{grid-template-columns:1fr;gap:8px}}
/* "Скрыть цифры": Telegram-style spoilers (static/spoiler.js marks .sp) */
.page-head-tools{display:flex;align-items:center;gap:8px}
.spoiler-toggle{display:inline-flex;align-items:center;gap:7px;font:500 13px var(--sans);color:var(--ink);cursor:pointer;white-space:nowrap;
  background:var(--card);border:1px solid var(--line-strong);border-radius:var(--r);padding:0 12px;height:36px;box-shadow:var(--btn-shadow)}
.spoiler-toggle:hover{background:var(--card-2)}
@media(max-width:600px){.spoiler-toggle{padding:0 11px}.spoiler-toggle-text{display:none}}
.spoiler-toggle svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spoiler-toggle .eye-shut,.spoiler-on .spoiler-toggle .eye-open{display:none}
.spoiler-on .spoiler-toggle .eye-shut{display:inline}
.spoiler-on .spoiler-toggle{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--tint-2)}
@property --sp-r{syntax:"<length>";inherits:false;initial-value:0px}
.spoiler-on .sp{position:relative;cursor:pointer;--sp-r:0px;transition:--sp-r .6s cubic-bezier(.25,.7,.3,1)}
.spoiler-on .sp.sp-open{cursor:auto}
.spoiler-on .pill.corner.sp{position:absolute}
.spoiler-on .value.sp{width:fit-content}
.spoiler-on .sp.sp-opening{--sp-r:var(--sp-far)}
.spoiler-on .sp-text:not(.sp-open):not(.sp-opening),.spoiler-on .sp-text:not(.sp-open):not(.sp-opening) *{color:transparent!important;text-shadow:none!important}
.spoiler-on .sp:not(.sp-open)::after{content:"";position:absolute;inset:-2px -4px;border-radius:7px;z-index:3;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background-image:var(--sp-p1),var(--sp-p2),var(--sp-p3);animation:sp-drift 7s linear infinite;
  -webkit-mask:radial-gradient(circle at var(--sp-x,50%) var(--sp-y,50%),transparent var(--sp-r),var(--mask-ink) calc(var(--sp-r) + 16px));
  mask:radial-gradient(circle at var(--sp-x,50%) var(--sp-y,50%),transparent var(--sp-r),var(--mask-ink) calc(var(--sp-r) + 16px))}
.spoiler-on .sp-media:not(.sp-open)::after{inset:0;border-radius:10px;background-color:var(--sp-veil);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.spoiler-on .tile-orders-total.sp{width:fit-content}
.spoiler-on .laser-bar.sp-media:not(.sp-open)::after{inset:-4px -2px;background-color:var(--sp-veil-strong)}
@keyframes sp-drift{from{background-position:0 0,0 0,0 0}to{background-position:48px -96px,-128px -64px,72px 108px}}
.panel.laser{padding:18px;margin-bottom:14px}
.panel.laser table{background:transparent}
@media(max-width:1100px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bento{grid-template-columns:1fr}.value.big{font-size:30px}.bento-card{min-height:0}}
@media(prefers-reduced-motion:reduce){a.kpi,.side{transition:none}
  .spoiler-on .sp:not(.sp-open)::after{animation:none}.spoiler-on .sp{transition-duration:.01s}}
@media print{
  :root{color-scheme:light}
  body{background:var(--print-bg);color:var(--print-ink)}
  .side,.mbar,.nav-scrim,.toolbar,.tabs,.pager,.modal-overlay{display:none}
  body{padding-left:0}
  .panel,.kpi,.shop-card,.bento-card,.shop-tile,table{background:var(--print-bg);color:var(--print-ink);box-shadow:none;border-color:var(--print-line)}
  th{background:var(--print-th);color:var(--print-ink)}
  td{border-bottom-color:var(--print-row)}
  .kpi .value,.kpi.debt .value,.kpi .value.ok,.value.big,.shop-tile .value{color:var(--print-ink)}
  a{color:var(--print-ink)}
  main{overflow:visible;max-width:none}
}
/* «Чистыми» tile on «/» */
.net-range{display:flex;gap:6px;margin:8px 0 4px}
.net-range .day-chip,.net-custom .day-chip{font:inherit;cursor:pointer}
.net-custom{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.net-custom input[type=date]{min-width:0;flex:1 1 110px}
.net-rows .row{padding:4px 0}
.net-custom[hidden]{display:none}
.net-card .estimate-badge{margin:0 4px 0 0}
.net-custom input[type=date]{font-size:13px;padding:6px 8px}
.net-clip{color:var(--urgent-soft);margin:2px 0 4px}
.net-rows .row.net-subtotal{border-top:1px solid var(--teal);font-weight:700}
/* six-section sidebar + section tabs above the page (observer/web/nav.py) */
.side a.sec{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:14px}
.sec-i{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:13px;line-height:1;
  color:var(--muted);background:var(--card-2);border:1px solid var(--line);flex:none}
.side a.sec.active .sec-i{color:var(--accent-text);border-color:var(--border-violet-50);background:var(--card)}
/* sections fold open to their pages (details.sec-d) */
.side .sec-d{margin:1px 0}
.side summary.sec{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font-size:14px;
  font-weight:500;color:var(--muted);cursor:pointer;list-style:none;user-select:none}
.side summary.sec::-webkit-details-marker{display:none}
.side summary.sec:hover{background:var(--row-hover);color:var(--ink-strong)}
.side summary.sec.active{color:var(--ink-strong);font-weight:600}
.side summary.sec.active .sec-i{color:var(--accent-text);border-color:var(--border-violet-50);background:var(--card)}
.side summary.sec:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sec-l{flex:1;min-width:0}
.sec-n{font-size:11px;font-weight:600;color:var(--dead);font-variant-numeric:tabular-nums}
.sec-c{width:7px;height:7px;flex:none;margin:0 2px 3px 0;border-right:1.5px solid var(--dead);border-bottom:1.5px solid var(--dead);
  transform:rotate(45deg);transition:transform .15s ease}
.sec-d[open] .sec-c{transform:rotate(-135deg);margin:3px 2px 0 0}
.sec-d[open] .sec-n{visibility:hidden}
.side .sec-items{margin:2px 0 6px 21px;padding-left:10px;border-left:1px solid var(--line)}
.side .sec-items a{padding:5px 10px;font-size:13.5px}
.side .sec-items a.active:before{left:-11px}
.side .grp-settings{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
@media(max-width:900px){.side summary.sec{padding:10px;font-size:15px}.side .sec-items a{padding:8px 10px;font-size:14.5px}}
@media(prefers-reduced-motion:reduce){.sec-c{transition:none}}
.side .side-foot a.settings{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;margin:0;
  border:1px solid var(--line-strong);border-radius:var(--r);font-size:16px;color:var(--muted)}
.side .side-foot a.settings.active{color:var(--accent-text);border-color:var(--border-violet-50);background:var(--tint-3)}
.side .side-foot a.settings.active:before{display:none}
.sec-tabs{display:flex;align-items:center;gap:14px;margin:-6px 0 20px;border-bottom:1px solid var(--line)}
.sec-name{font-size:12px;font-weight:600;color:var(--dead);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.sec-tabs-row{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0}
.sec-tabs-row::-webkit-scrollbar{display:none}
.sec-tabs a{position:relative;padding:10px 12px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.sec-tabs a:hover{color:var(--ink-strong);text-decoration:none}
.sec-tabs a.active{color:var(--ink-strong);font-weight:600}
.sec-tabs a.active:after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent)}
@media(max-width:900px){.sec-name{display:none}.sec-tabs{margin:-4px -16px 16px;padding:0 8px}}
/* «Сегодня»: what needs doing, then the money numbers */
.today{margin-bottom:22px}
.today-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.today-head h1{margin:0}
.today-head .muted{font-size:14px}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.todo li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--lvl,var(--line-strong));border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.todo li.urgent{--lvl:var(--urgent);font-weight:inherit;color:inherit}
.todo li.soon{--lvl:var(--soon);color:inherit}
.todo li.info{--lvl:var(--info)}
.todo .ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;font-size:16px;
  background:color-mix(in srgb,var(--lvl,var(--dead)) 12%,transparent);color:var(--lvl,var(--muted))}
.todo .t{font-weight:600;color:var(--ink-strong)}
.todo .t b{font-variant-numeric:tabular-nums}
.todo .d{font-size:13px;color:var(--muted);margin-top:1px}
.todo .d div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo .btn{white-space:nowrap}
.todo-ok{margin:10px 0 0;font-size:13px;color:var(--muted)}
.todo-ok summary{cursor:pointer;width:fit-content}
.todo-ok ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.todo-ok li:before{content:"✓ ";color:var(--ok);font-weight:700}
.proto{font-size:11px;font-weight:600;padding:1px 6px;border-radius:99px;border:1px dashed var(--line-strong);color:var(--muted);margin-left:6px}
.money-head{margin:8px 0 14px;font-size:16px}
@media(max-width:600px){.todo li{grid-template-columns:auto 1fr;gap:10px 12px}.todo .btn{grid-column:1/-1;justify-content:center}}
.todo li>div{min-width:0}
.todo .t{overflow-wrap:anywhere}