/* «Графит»: 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. */
/* Onest (as on /welcome), self-hosted variable font: one file per script */
@font-face{font-family:"Onest";src:url(/static/fonts/onest-cyrillic.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(/static/fonts/onest-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
: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; --ym:#ffcc00;
  --shop-ozon-1:#3d7bff; --shop-ozon-2:#93b8ff; --shop-wb-1:#d94fc0; --shop-wb-2:#f0a3e1;
  --mp-oz-ink:#93b8ff; --mp-wb-ink:#f0a3e1;
  --shop-ym-1:#ffcc00; --shop-ym-2:#ffe066; --mp-ym-ink:#ffd84d;
  --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; --ym:#e6b800;
  --shop-ozon-1:#005bff; --shop-ozon-2:#0a2f8c; --shop-wb-1:#cb11ab; --shop-wb-2:#6b1a7a;
  --mp-oz-ink:#0040b3; --mp-wb-ink:#8a0c74;
  --shop-ym-1:#ffcc00; --shop-ym-2:#b38f00; --mp-ym-ink:#7a5c00;
  --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:"Onest",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:14.5px/1.5 var(--sans);
  -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}
.brand .z-plate{display:block;height:34px;width:auto}.mbar .brand .z-plate{height:30px}
.z-eye{transform-box:fill-box;transform-origin:50% 50%;transition:transform .12s ease}.z-eye.blink{transform:scaleY(.12)}
.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:26px;font-weight:700;margin:0 0 18px;letter-spacing:-.025em;line-height:1.2;color:var(--ink-strong)}
h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink-strong)}
h3{font-size:15px;font-weight:600;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:14px;box-shadow:var(--shadow-card);padding:16px 18px}
.kpi .label{font-size:12.5px;font-weight:500;color:var(--muted)}
.kpi .value{font-size:28px;line-height:1.15;font-weight:700;margin-top:6px;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)}
.kpi.debt .value{color:var(--accent-text)}
a.kpi{position:relative;color:inherit;text-decoration:none;display:block;transition:box-shadow .15s,border-color .15s}
a.kpi:after{content:"→";position:absolute;top:14px;right:16px;color:var(--dead);transition:transform .15s,color .15s}
a.kpi:hover:after{transform:translateX(3px);color:var(--accent-text)}
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)}
.mp-ym{background:color-mix(in srgb,var(--shop-ym-1) 20%,transparent);color:var(--mp-ym-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:10px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
td.num,th.num,td.r,th.r{text-align:right}
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) */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.side a.sec{display:flex;align-items:center;gap:11px;padding:8px 10px;font-size:14.5px;font-weight:500}
.sec-i{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.side a.sec.active .sec-i{opacity:1}
.sec-l{flex:1;min-width:0}
.sec-b{min-width:20px;padding:1px 6px;border-radius:99px;font-size:11.5px;font-weight:600;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums;background:var(--tint-red);color:var(--urgent-soft)}
.side .grp-settings{margin-top:auto;border-top:1px solid var(--line);padding-top:8px}
@media(max-width:900px){.side a.sec{padding:11px 10px;font-size:15.5px}}
.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-bar{position:sticky;top:0;z-index:25;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.sec-tabs{display:flex;align-items:center;gap:14px;max-width:1240px;margin:0 auto;padding:4px 24px 0}
.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:13px 12px 12px;font-size:14.5px;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-bar{top:var(--mbar-h)}.sec-tabs{padding:0 8px}}
/* «Сегодня»: header with the period, the to-do strip, 4 tiles, shops, one chart, the day, the order feed folded */
.today-head{align-items:center;justify-content:space-between;margin-bottom:14px}
.today-title{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.today-title .muted{font-size:14px}
.today-title .attn{color:var(--urgent-soft);font-weight:600}
.todo-strip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-bottom:20px}
.todo-chip{--lvl:var(--line-strong);position:relative;display:inline-flex;flex-direction:column;max-width:100%;border-radius:12px;
  background:color-mix(in srgb,var(--lvl) 9%,var(--card));border:1px solid color-mix(in srgb,var(--lvl) 32%,var(--line));
  color:var(--ink-strong);font-size:14px;text-decoration:none;transition:border-color .15s,background-color .15s}
.todo-chip.urgent{--lvl:var(--urgent)} .todo-chip.soon{--lvl:var(--soon)} .todo-chip.info{--lvl:var(--info)}
.todo-chip.ok{--lvl:var(--ok);background:transparent;border-color:var(--line);color:var(--muted)}
a.todo-chip,.todo-chip>summary{display:flex;flex-direction:row;align-items:center;gap:9px;padding:8px 12px 8px 9px;cursor:pointer;list-style:none}
.todo-chip.ok>summary{padding-left:12px}
.todo-chip>summary::-webkit-details-marker{display:none}
a.todo-chip:hover,.todo-chip>summary:hover{text-decoration:none}
a.todo-chip:hover,details.todo-chip:hover{border-color:color-mix(in srgb,var(--lvl) 60%,var(--line))}
.todo-chip .ic{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;font-size:14px;
  background:color-mix(in srgb,var(--lvl) 16%,transparent)}
.todo-chip .t{font-weight:500;overflow-wrap:anywhere}
.todo-chip .t b{font-weight:700;font-variant-numeric:tabular-nums}
.todo-chip .go{color:var(--muted);transition:transform .15s}
a.todo-chip:hover .go{transform:translateX(3px);color:var(--ink-strong)}
.todo-chip .chev{width:7px;height:7px;flex:none;margin:0 2px 3px 2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.6;transition:transform .15s}
.todo-chip[open] .chev{transform:rotate(-135deg);margin:3px 2px 0 2px}
.todo-more{display:grid;gap:3px;padding:0 12px 10px 44px;font-size:13px;color:var(--muted)}
.todo-chip.ok .todo-more{padding-left:12px}
.todo-more .btn{justify-self:start;margin-top:6px}
.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}
@media(max-width:600px){.todo-chip{flex:1 1 100%}.today-head{align-items:flex-start}}
/* tiles: as tall as their content */
.bento .bento-card{min-height:0}
.pick-go{align-self:flex-start;margin-top:12px}
.net-more{margin-top:10px}
.net-more>summary{cursor:pointer;width:fit-content;font-size:13px;color:var(--muted);list-style:none}
.net-more>summary::-webkit-details-marker{display:none}
.net-more>summary:after{content:" ▾"}.net-more[open]>summary:after{content:" ▴"}
.net-more>summary:hover{color:var(--ink-strong)}
/* one chart with a switch */
.charts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.chart-tabs{display:inline-flex;padding:3px;gap:2px;border-radius:10px;background:var(--card-2);border:1px solid var(--line)}
.chart-tab{min-height:0;padding:6px 12px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--muted);font-weight:500}
.chart-tab:hover{background:transparent;color:var(--ink-strong)}
.chart-tab[aria-selected=true]{background:var(--card);color:var(--ink-strong);box-shadow:var(--shadow-card)}
.chart-note{margin:0 0 8px}
/* the order feed, folded */
.feed-panel>summary{display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none}
.feed-panel>summary::-webkit-details-marker{display:none}
.feed-panel>summary h2{margin:0}
.feed-panel>summary:after{content:"▾";margin-left:auto;color:var(--muted)}
.feed-panel[open]>summary{margin-bottom:12px}.feed-panel[open]>summary:after{content:"▴"}
/* ⌘K search (base.html + static/search.js) */
.side .search-open{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 10px;padding:7px 10px;min-height:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--input-bg);color:var(--dead);box-shadow:none;font-size:13.5px;font-weight:400;text-align:left}
.side .search-open:hover{border-color:var(--line-strong);color:var(--muted);background:var(--input-bg)}
.search-open span{flex:1}
.search-open .sec-i,.icon-btn .sec-i{width:16px;height:16px}
kbd{font:500 11px/1 var(--sans);padding:3px 5px;border-radius:5px;border:1px solid var(--line);color:var(--dead);background:var(--card-2)}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;min-height:0;padding:0;margin-left:auto;border:0;background:transparent;box-shadow:none;color:var(--muted)}
.mbar .icon-btn+.theme-toggle{margin-left:4px}
.search-dlg{width:min(600px,calc(100vw - 24px));max-height:min(520px,80vh);margin:12vh auto auto;padding:0;border:1px solid var(--line-strong);
  border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop);overflow:hidden}
.search-dlg[open]{display:flex;flex-direction:column;animation:searchIn .14s ease-out}
.search-dlg::backdrop{background:var(--overlay-bg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@keyframes searchIn{from{opacity:0;transform:translateY(-6px) scale(.99)}}
.search-box{display:flex;align-items:center;gap:10px;padding:4px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
.search-box input{flex:1;border:0;box-shadow:none;background:transparent;font-size:16px;padding:12px 0;min-height:0}
.search-box input:focus{box-shadow:none}
.search-res{overflow-y:auto;padding:6px}
.search-g{padding:10px 10px 4px;font-size:11.5px;font-weight:600;color:var(--dead);text-transform:uppercase;letter-spacing:.05em}
.search-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.search-row:hover,.search-row[aria-selected=true]{background:var(--tint-2);text-decoration:none}
.search-row[aria-selected=true] .search-t{color:var(--accent-text)}
.search-row img,.search-ph{width:32px;height:32px;flex:none;border-radius:6px;object-fit:cover;background:var(--card-2)}
.search-t{font-weight:500;white-space:nowrap}
.search-s{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:13px}
.search-none{padding:22px;text-align:center;color:var(--muted)}
@media(max-width:900px){.search-dlg{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.search-dlg[open]{animation:none}}
/* ⓘ «Как считается»: an explanation behind a tap instead of grey text between the numbers */
.hint{display:inline-block;position:relative;vertical-align:1px;margin-left:4px;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0}
.hint>summary{list-style:none;cursor:pointer;width:17px;height:17px;display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-strong);color:var(--muted);font:600 10.5px/1 var(--sans);font-style:italic}
.hint>summary::-webkit-details-marker{display:none}
.hint>summary:hover,.hint[open]>summary{color:var(--accent-text);border-color:var(--accent)}
.hint>div{position:absolute;z-index:30;top:24px;left:-10px;width:min(320px,78vw);padding:12px 14px;border-radius:12px;background:var(--card);
  border:1px solid var(--line-strong);box-shadow:var(--shadow-pop);font-size:13px;line-height:1.5;color:var(--ink);animation:hintIn .12s ease-out}
@keyframes hintIn{from{opacity:0;transform:translateY(-3px)}}
/* cards clip their corners (overflow:hidden): let an open hint out */
:is(.bento-card,.kpi,.panel,.shop-tile):has(.hint[open]){overflow:visible;z-index:5}
.hint.hint-r>div{left:auto;right:-10px}
/* empty state: what will be here + what to do */
.empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:36px 18px;margin-bottom:20px;border:1px dashed var(--line-strong);
  border-radius:14px;color:var(--muted)}
.empty svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.empty b{color:var(--ink-strong);font-size:15px;font-weight:600}
/* smooth theme switch */
body,.side,.sec-bar,.kpi,.panel,.bento-card,.shop-tile,table,th,td,button,.btn,input,select{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
@media(prefers-reduced-motion:reduce){.hint>div{animation:none}body,.side,.sec-bar,.kpi,.panel,.bento-card,.shop-tile,table,th,td,button,.btn,input,select{transition:none}}
/* shared page pieces (step 3 «Деньги»): title + status line, «Ещё» menu, drawers, selection bar, chips */
.ph-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.ph-title h1{margin:0}
.ph-title .muted{font-size:13.5px}
.page-head{justify-content:space-between}
.page-head-tools{flex-wrap:wrap}
.page-head-tools form{margin:0}
label.check{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
label.check input{min-height:0}
.linkish{min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--accent-text);font-weight:500}
.linkish:hover{background:none;text-decoration:underline}
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer}
details.menu>summary::-webkit-details-marker{display:none}
details.menu>summary:after{content:" ▾";color:var(--muted)}
.menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:8px;min-width:280px;padding:12px;border-radius:12px;
  background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow-pop)}
.menu-pop form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.menu-pop .btn,.menu-pop button{justify-content:flex-start}
.menu-upload input[type=file]{max-width:100%;font-size:13px}
/* zones as filter chips */
.zone-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.zone-strip .zone-card{flex-direction:row;align-items:baseline;gap:8px;padding:7px 12px;border-left-width:1px;border-radius:10px;box-shadow:none}
.zone-strip .zone-card:before{content:"";width:8px;height:8px;border-radius:50%;align-self:center;background:var(--zc,var(--dead))}
.zone-strip .zone-card .label{font-size:13px;font-weight:500;color:var(--ink)}
.zone-strip .zone-card .value{font-size:15px}
.zone-strip .zone-card.active{border-color:var(--accent);background:var(--tint-2);box-shadow:none}
.zone-strip .zone-loss{--zc:var(--urgent)} .zone-strip .zone-low_profit{--zc:var(--orange)} .zone-strip .zone-stale{--zc:var(--purple)}
.zone-strip .zone-slow{--zc:var(--soon)} .zone-strip .zone-hit{--zc:var(--ok)} .zone-strip .zone-normal{--zc:var(--accent)}
.zone-strip .zone-card{border-left-color:var(--line)}
.advice-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:8px}
.advice-head h2{margin:0}
.advice .notes{margin:0}
.table-tools{margin-bottom:8px}
.table-tools input[type=search]{min-width:260px;flex:1;max-width:420px}
.table-tools input[type=number]{width:70px}
.sel-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;padding:6px 6px 6px 12px;border-radius:12px;border:1px solid var(--line)}
.sel-bar.has-sel{border-color:var(--border-violet-50);background:var(--tint-1)}
.sel-bar>.muted{margin-right:auto}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--ink-strong)}
th[aria-sort=ascending]:after{content:" ↑"} th[aria-sort=descending]:after{content:" ↓"}
#pricing-table input[type=number]{width:96px}
.pager{flex-wrap:wrap;justify-content:flex-end;gap:4px}
.pager button{min-width:36px;padding:6px 10px;box-shadow:none}
.pager>.muted:first-child{margin-right:auto}
/* drawer: a dialog sliding in from the right */
dialog.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;padding:18px 20px;
  border:0 !important;border-left:1px solid var(--line-strong) !important;border-radius:0;overflow-y:auto;animation:drawerIn .18s ease-out}
dialog.drawer::backdrop{background:var(--overlay-bg)}
@keyframes drawerIn{from{transform:translateX(24px);opacity:0}}
.drawer-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.drawer-head h2{margin:0;flex:1}
.drawer-head .icon-btn{margin:0;font-size:16px}
.drawer-form{display:grid;gap:10px;margin-bottom:12px}
.drawer-form label:not(.check){display:grid;gap:4px;font-size:12.5px;font-weight:500;color:var(--muted)}
.drawer-actions{display:flex;gap:8px;flex-wrap:wrap}
.drawer-sec{display:grid;gap:10px;padding-top:12px;margin-top:4px;border-top:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){dialog.drawer{animation:none}}
summary.btn{display:inline-flex;align-items:center;min-height:36px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-weight:500;box-shadow:var(--btn-shadow)}
summary.btn:hover{background:var(--card-2)}
#pricing-table td:nth-child(3){min-width:240px}
#pricing-table td:nth-child(15){min-width:200px}
.attn{color:var(--urgent-soft);font-weight:600}
.rate-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:16px;padding:10px 14px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.rate-line b{color:var(--ink-strong);font-weight:600;font-variant-numeric:tabular-nums}
.rate-line .linkish{margin-left:auto}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink);font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap}
.chip b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.chip:hover{text-decoration:none;border-color:color-mix(in srgb,var(--line-strong) 60%,var(--muted))}
.chip.on{border-color:var(--accent);background:var(--tint-2);color:var(--accent-text)}
.chip.on b{color:var(--accent-text)}
.pager a.btn{min-width:36px;justify-content:center;padding:6px 10px;box-shadow:none}
.pager a.btn.on,.pager button.on{border-color:var(--accent);color:var(--accent-text);background:var(--tint-2)}
.drawer h3{margin:16px 0 8px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 20px}
.filters{display:grid;gap:8px;margin-bottom:18px}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-l{min-width:72px;font-size:12.5px;font-weight:600;color:var(--dead);text-transform:uppercase;letter-spacing:.04em}
h1 .hint{vertical-align:4px}
.sec-h{margin-top:26px}
details.fold>summary{display:flex;align-items:baseline;gap:12px;cursor:pointer;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary h2{margin:0}
details.fold>summary:after{content:"▾";margin-left:auto;color:var(--muted)}
details.fold[open]>summary{margin-bottom:12px}details.fold[open]>summary:after{content:"▴"}
/* step 4 «Реклама»: segmented period, folded extra tiles, section jump chips */
.seg{gap:4px}
.seg .btn{min-height:32px;padding:5px 11px;box-shadow:none}
.kpi-more{margin:-2px 0 14px}
.kpi-more>summary{cursor:pointer;width:fit-content;font-size:13px;color:var(--muted);list-style:none;margin-bottom:8px}
.kpi-more>summary::-webkit-details-marker{display:none}
.kpi-more>summary:after{content:" ▾"}.kpi-more[open]>summary:after{content:" ▴"}
.kpi-more>summary:hover{color:var(--ink-strong)}
.ads-jump{margin:4px 0 12px}
/* the ads pages share these (they used to carry their own copies, each a little different) */
.ads-kpi{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px}
.ads-kpi .kpi .value{font-size:22px}
.ads-kpi .kpi .value.small{font-size:15px}
@media(max-width:760px){.ads-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ads .btn.sm{min-height:30px;padding:4px 10px;font-size:12.5px}
.ads-scroll{overflow-x:auto}
.ads-sec{margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow-card);scroll-margin-top:64px}
.ads-sec>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:12px 16px;cursor:pointer;list-style:none;user-select:none}
.ads-sec>summary::-webkit-details-marker{display:none}
.ads-sec>summary::before{content:"▸";color:var(--muted);transition:transform .15s;display:inline-block}
.ads-sec[open]>summary::before{transform:rotate(90deg)}
.ads-sec>summary h2{margin:0;font-size:17px}
.ads-sec[open]>summary{border-bottom:1px solid var(--line)}
.ads-sec>:not(summary){margin-left:14px;margin-right:14px}
.ads-sec>:last-child{margin-bottom:12px}
h1 .badge{vertical-align:4px;margin-left:6px}
.boost .ads-kpi{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){.boost .ads-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.boost .ads-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}