/* ESTOQUE-CUSTOS-V3-01 → V5-01 (owner 2026-10-03) — PORTED from docs/mockups/lotus-estoque-custos-v3.html, the v5 differences from docs/mockups/lotus-estoque-custos-v5.html's <style> by the same mapping as v3
 (LUCRO-BRUTO-V3-01), values byte-identical: every class ec-, every id ec-, every var --ec-, scoped `html #ec-root`;
 the frame (.ctl .hint html body header.app .side nav.bn .av .brand .bodyw) dropped for the app shell; `main` is
 #ec-root itself; `.frame.desk X` -> @media(min-width:1200px) (BREAKPOINT-01's existing desktop step),
 `.frame:not(.desk) X` -> @media(max-width:1199.98px), each block in the prototype's own order (they won by
 specificity there and win by order here). App-only substitutions follow in the last block and are named there. */
html #ec-root *:where(:not(svg, svg *)){all:revert}
#ec-root{--ec-navy:#0f1b2d;--ec-navy2:#1a2c47;--ec-gold:#c9a24a;--ec-bg:#f4f5f7;--ec-card:#fff;--ec-line:#e9ecf0;--ec-line2:#dde1e7;--ec-ink:#0b1220;--ec-ink2:#3d4a5c;--ec-muted:#7d8899;--ec-faint:#b4bcc8;--ec-hd:#f8f9fb;--ec-amber:#b45309;--ec-amberbg:#fef6e7;--ec-pos:#0e7f5a;--ec-neg:#c2410c;--ec-info:#1d4ed8;--ec-wa:#128c4a;--ec-w1:#0f1b2d;--ec-w2:#c9a24a;--ec-w3:#6b7f99;--ec-w4:#b9c4d3;font-size:16px;line-height:normal;letter-spacing:normal;font-weight:400;text-align:start;text-transform:none;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ec-ink);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","tnum"}
html #ec-root *{box-sizing:border-box}
html #ec-root button{font:inherit;cursor:pointer;color:inherit;border:0;background:none;padding:0}
html #ec-root input{font:inherit;color:var(--ec-ink)}
html #ec-root svg{display:block}
html #ec-root *{box-sizing:border-box}
html #ec-root select{font:inherit;color:var(--ec-ink)}
html #ec-root .ec-ctop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
html #ec-root .ec-crumb{font-size:12.5px;font-weight:500;color:var(--ec-muted)}
html #ec-root .ec-crumb b{color:var(--ec-ink2);font-weight:600}
html #ec-root .ec-ph{margin:0 0 16px}
html #ec-root h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.4px}
html #ec-root .ec-sub{font-size:12.5px;color:var(--ec-muted);margin-top:3px}
html #ec-root .ec-acts{display:flex;gap:8px}
html #ec-root .ec-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600;white-space:nowrap;border:1px solid var(--ec-line2);background:#fff;color:var(--ec-ink2)}
html #ec-root .ec-btn.ec-pri{background:var(--ec-navy);border-color:var(--ec-navy);color:#fff}
html #ec-root .ec-btn.ec-wa{background:var(--ec-wa);border-color:var(--ec-wa);color:#fff}
html #ec-root .ec-btn svg{width:15px;height:15px}
html #ec-root .ec-seg{display:flex;border:1px solid var(--ec-line2);border-radius:9px;overflow:hidden;background:#fff}
html #ec-root .ec-seg button{height:32px;padding:0 11px;font-size:12.5px;font-weight:600;color:var(--ec-ink2)}
html #ec-root .ec-seg button+button{border-left:1px solid var(--ec-line2)}
html #ec-root .ec-seg button.ec-on{background:var(--ec-navy);color:#fff}
html #ec-root .ec-kpi{background:var(--ec-card);border:1px solid var(--ec-line);border-radius:14px;margin-bottom:14px;overflow:hidden}
html #ec-root .ec-kmain{padding:16px 16px 14px;position:relative;cursor:pointer}
html #ec-root .ec-kmain:after{content:"▼";position:absolute;right:16px;top:16px;color:var(--ec-faint);font-size:10px;transition:transform .2s}
html #ec-root .ec-kpi.ec-kcl .ec-kmain:after{transform:rotate(-90deg)}
@media (max-width:1199.98px){html #ec-root .ec-kpi.ec-kcl .ec-kgrid,html #ec-root .ec-kpi.ec-kcl .ec-stack{display:none}}
@media (min-width:1200px){html #ec-root .ec-kmain{cursor:default}html #ec-root .ec-kmain:after{display:none}}
html #ec-root .ec-khint{font-size:11.5px;color:var(--ec-info);font-weight:600;margin-top:8px}
html #ec-root .ec-kpi:not(.ec-kcl) .ec-khint{display:none}
@media (min-width:1200px){html #ec-root .ec-khint{display:none}}
html #ec-root .ec-kl{font-size:11px;font-weight:600;color:var(--ec-muted);letter-spacing:.2px}
html #ec-root .ec-kbig{font-size:30px;font-weight:700;letter-spacing:-1px;margin-top:4px;line-height:1.05}
html #ec-root .ec-kbig small{font-size:15px;font-weight:600;color:var(--ec-muted);letter-spacing:0;margin-right:3px}
html #ec-root .ec-kline{font-size:12.5px;color:var(--ec-ink2);margin-top:6px}
html #ec-root .ec-kline b{font-weight:600}
html #ec-root .ec-kgrid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ec-line)}
html #ec-root .ec-kgrid>div{padding:12px 16px}
html #ec-root .ec-kgrid>div+div{border-left:1px solid var(--ec-line)}
html #ec-root .ec-kv{font-size:17px;font-weight:700;margin-top:3px;letter-spacing:-.3px}
html #ec-root .ec-ks{font-size:11.5px;color:var(--ec-muted);margin-top:2px}
html #ec-root .ec-cov{display:flex;align-items:center;gap:8px;margin-top:6px}
html #ec-root .ec-cov .ec-tr{flex:1;height:5px;background:#eef0f3;border-radius:3px;overflow:hidden}
html #ec-root .ec-cov .ec-tr i{display:block;height:100%;background:var(--ec-pos)}
html #ec-root .ec-lnk{text-align:left;display:block;margin-top:3px;color:var(--ec-amber);font-weight:600;font-size:11.5px}
html #ec-root .ec-stack{padding:0 16px 14px}
html #ec-root .ec-sbar{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;margin:10px 0 10px}
html #ec-root .ec-sbar i{display:block;height:100%}
html #ec-root .ec-leg{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
html #ec-root .ec-lg{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ec-ink2);text-align:left;padding:3px 0;border-radius:6px}
html #ec-root .ec-lg .ec-d{width:8px;height:8px;border-radius:2px;flex:none}
html #ec-root .ec-lg span:nth-child(2){flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html #ec-root .ec-lg b{font-weight:600;color:var(--ec-ink)}
html #ec-root .ec-lg.ec-off{opacity:.35}
html #ec-root .ec-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ec-line2);overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
html #ec-root .ec-tabs::-webkit-scrollbar{display:none}
html #ec-root .ec-tab{flex:none;padding:9px 10px 10px;font-size:13px;font-weight:600;color:var(--ec-muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
html #ec-root .ec-tab small{font-weight:500;color:var(--ec-faint);margin-left:5px;font-size:11.5px}
html #ec-root .ec-tab.ec-on{color:var(--ec-ink);border-bottom-color:var(--ec-navy)}
html #ec-root .ec-tab.ec-on small{color:var(--ec-muted)}
html #ec-root .ec-tb{display:flex;gap:8px;align-items:center;margin-bottom:10px}
html #ec-root .ec-srch{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--ec-line2);border-radius:9px;height:36px;padding:0 10px;background:#fff;min-width:0}
html #ec-root .ec-srch svg{width:15px;height:15px;color:var(--ec-muted);flex:none}
html #ec-root .ec-srch input{border:0;outline:0;background:none;flex:1;font-size:13.5px;min-width:0}
html #ec-root .ec-srch .ec-x{color:var(--ec-muted);display:none;font-size:14px}
html #ec-root .ec-srch.ec-has .ec-x{display:block}
html #ec-root .ec-ib{position:relative;width:36px;height:36px;border-radius:9px;border:1px solid var(--ec-line2);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ec-ink2);flex:none}
html #ec-root .ec-ib svg{width:16px;height:16px}
html #ec-root .ec-ib .ec-bd{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--ec-navy);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
html #ec-root .ec-dfl{display:none;gap:8px;align-items:center}
html #ec-root .ec-dfl select{height:36px;border:1px solid var(--ec-line2);border-radius:9px;background:#fff;padding:0 10px;font-size:13px;font-weight:500;color:var(--ec-ink2)}
html #ec-root .ec-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ec-muted);margin:0 2px 8px}
html #ec-root .ec-meta b{color:var(--ec-ink2);font-weight:600}
html #ec-root .ec-meta button{color:var(--ec-info);font-weight:600;font-size:12px}
html #ec-root .ec-fchip{display:inline-flex;align-items:center;gap:5px;background:#eef1f5;color:var(--ec-ink2);border-radius:6px;padding:2px 4px 2px 8px;font-weight:600;margin-left:6px}
html #ec-root .ec-fchip button{color:var(--ec-muted);font-size:12px;width:16px}
html #ec-root .ec-lst{background:var(--ec-card);border:1px solid var(--ec-line);border-radius:14px;overflow:hidden}
html #ec-root .ec-gh{display:grid;grid-template-columns:24px minmax(0,1fr) auto 10px;gap:9px;align-items:center;width:100%;text-align:left;padding:7px 12px;background:var(--ec-navy);color:#fff;border-top:1px solid #23344f}
html #ec-root .ec-gh>span:nth-child(2){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html #ec-root .ec-gh .ec-ini{width:24px;height:24px;border-radius:6px;background:rgba(201,162,74,.16);color:var(--ec-gold);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.3px}
html #ec-root .ec-gh:first-child{border-top:0}
html #ec-root .ec-gh .ec-car{color:#6f84a3;font-size:10px;transition:transform .15s}
html #ec-root .ec-gh.ec-cl .ec-car{transform:rotate(-90deg)}
html #ec-root .ec-gh .ec-gn{font-size:13px;font-weight:700;letter-spacing:.3px;color:#fff;display:inline}
html #ec-root .ec-gh .ec-gm{font-size:11px;color:#9fb0c9;font-weight:500;display:inline;margin-left:7px}
html #ec-root .ec-gh .ec-gm .ec-am{color:#f3c873;font-weight:600}
/* the owner corrected his own v5 mockup, 2026-10-03: on the desktop navy brand row «sem custo» is the SAME light amber as the phone bar (the prototype drew the dark --amber there) */
html #ec-root tr.ec-g td .ec-gm .ec-am{color:#f3c873}
html #ec-root .ec-gh .ec-gr{text-align:right;white-space:nowrap}
html #ec-root .ec-gh .ec-gr b{display:inline;font-size:12.5px;font-weight:700;color:#fff}
html #ec-root .ec-gh .ec-gr span{display:inline;font-size:11px;color:#9fb0c9;margin-left:4px}
html #ec-root .ec-gh .ec-shr{grid-column:2/4;margin-top:-1px;height:3px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:-2px}
html #ec-root .ec-gh .ec-shr i{display:block;height:100%;background:var(--ec-gold)}
html #ec-root .ec-gh.ec-cl+.ec-rows{display:none}
html #ec-root .ec-pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 14px 10px 45px;border-top:1px solid var(--ec-line);background:#fff}
html #ec-root .ec-pr:hover{background:#fbfcfd}
html #ec-root .ec-pr .ec-n{font-size:13px;font-weight:500;line-height:1.3;color:var(--ec-ink)}
html #ec-root .ec-pr .ec-m{font-size:11.5px;color:var(--ec-muted);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
html #ec-root .ec-pr .ec-v{text-align:right;white-space:nowrap}
html #ec-root .ec-pr .ec-v b{display:block;font-size:14px;font-weight:600}
html #ec-root .ec-pr .ec-v span{display:block;font-size:11.5px;color:var(--ec-muted);margin-top:2px}
html #ec-root .ec-dot{display:inline-flex;align-items:center;gap:5px;color:var(--ec-amber);font-weight:600;font-size:12px}
html #ec-root .ec-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ec-amber)}
html #ec-root .ec-up{color:var(--ec-neg)}
html #ec-root .ec-dn{color:var(--ec-pos)}
html #ec-root .ec-wq{display:flex;gap:10px}
html #ec-root .ec-wq span{display:inline-flex;align-items:center;gap:4px}
html #ec-root .ec-wq span i{width:6px;height:6px;border-radius:2px;display:inline-block}
html #ec-root .ec-wq span.ec-z{color:var(--ec-faint)}
html #ec-root .ec-empty{text-align:center;color:var(--ec-muted);font-size:13px;padding:36px 10px}
html #ec-root .ec-dt{display:none}
html #ec-root table{width:100%;border-collapse:collapse}
html #ec-root thead th{position:sticky;top:0;background:#fff;font-size:11px;font-weight:600;color:var(--ec-muted);text-align:right;padding:10px 10px;border-bottom:1px solid var(--ec-line2);white-space:nowrap;cursor:pointer;user-select:none;z-index:1}
html #ec-root thead th:first-child{text-align:left;padding-left:38px}
html #ec-root thead th.ec-s{color:var(--ec-ink)}
html #ec-root thead th.ec-s:after{content:" ↓"}
html #ec-root thead th.ec-s.ec-asc:after{content:" ↑"}
html #ec-root td{padding:10px 10px;border-top:1px solid var(--ec-line);text-align:right;font-size:13px;white-space:nowrap}
html #ec-root td:first-child{text-align:left;padding-left:38px;white-space:normal;font-weight:500}
html #ec-root tr.ec-g td{background:var(--ec-navy);color:#fff;font-weight:700;cursor:pointer;border-top-color:#23344f;padding-top:7px;padding-bottom:7px}
html #ec-root tr.ec-g td:first-child{white-space:nowrap;padding-left:14px;font-size:13px;letter-spacing:.2px}
html #ec-root tr.ec-g td:first-child .ec-car{display:inline-block;width:16px;color:var(--ec-faint);font-size:10px;transition:transform .15s}
html #ec-root tr.ec-g.ec-cl td:first-child .ec-car{transform:rotate(-90deg)}
html #ec-root tr.ec-g td .ec-gm{font-size:11.5px;color:#9fb0c9;font-weight:500;letter-spacing:0;text-transform:none;margin-left:8px}
html #ec-root td:first-child{min-width:230px}
html #ec-root tr.ec-p{cursor:pointer}
html #ec-root tr.ec-p:hover td{background:#fbfcfd}
html #ec-root td.ec-mu{color:var(--ec-muted)}
html #ec-root td.ec-z{color:var(--ec-faint)}
html #ec-root td.ec-b{font-weight:600}
html #ec-root td .ec-bar{display:inline-block;width:36px;height:4px;background:#e9ecf0;border-radius:2px;vertical-align:middle;margin-left:8px;overflow:hidden}
html #ec-root td .ec-bar i{display:block;height:100%;background:var(--ec-navy)}
html #ec-root .ec-ov{position:absolute;inset:0;background:rgba(11,18,32,.42);display:none;align-items:flex-end;justify-content:center;z-index:30}
html #ec-root .ec-ov.ec-on{display:flex}
html #ec-root .ec-sheet{background:#fff;width:100%;border-radius:18px 18px 0 0;max-height:90%;display:flex;flex-direction:column;overflow:hidden}
html #ec-root .ec-shh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:18px 18px 14px;border-bottom:1px solid var(--ec-line)}
html #ec-root .ec-shh .ec-kl{margin-bottom:4px}
html #ec-root .ec-shh h3{margin:0;font-size:16px;font-weight:700;line-height:1.35}
html #ec-root .ec-shb{overflow:auto;padding:4px 18px 18px;flex:1}
html #ec-root .ec-blk{padding:14px 0;border-bottom:1px solid var(--ec-line)}
html #ec-root .ec-blk:last-child{border-bottom:0}
html #ec-root .ec-bt{font-size:11px;font-weight:600;color:var(--ec-muted);margin-bottom:8px}
html #ec-root .ec-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
html #ec-root .ec-li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px}
html #ec-root .ec-li span:first-child{color:var(--ec-ink2)}
html #ec-root .ec-li span:last-child{font-weight:600;white-space:nowrap}
html #ec-root .ec-li .ec-mu{color:var(--ec-muted);font-weight:500}
html #ec-root .ec-hist{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;font-size:12.5px}
html #ec-root .ec-hist span:nth-child(3n+1){color:var(--ec-muted)}
html #ec-root .ec-hist span:nth-child(3n){text-align:right;font-weight:600}
html #ec-root .ec-note{background:var(--ec-amberbg);color:#7c4a03;border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.45}
html #ec-root .ec-opt{display:grid;gap:4px;margin:10px 0 4px}
html #ec-root .ec-opt label{display:flex;gap:10px;align-items:center;font-size:13.5px;padding:9px 2px;cursor:pointer}
html #ec-root .ec-opt input{accent-color:var(--ec-navy);width:16px;height:16px}
html #ec-root .ec-wabox{background:#f6f8f7;border:1px solid var(--ec-line);border-radius:10px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.8px;white-space:pre-wrap;line-height:1.55;color:#1d2b22;max-height:300px;overflow:auto}
html #ec-root .ec-shf{display:flex;gap:8px;padding:12px 18px 18px;border-top:1px solid var(--ec-line)}
html #ec-root .ec-shf .ec-btn{flex:1;height:40px}
html #ec-root .ec-fs{margin-bottom:16px}
html #ec-root .ec-fs .ec-bt{margin-bottom:6px}
html #ec-root .ec-fs .ec-opts{display:flex;flex-wrap:wrap;gap:6px}
html #ec-root .ec-fs .ec-o{height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--ec-line2);font-size:13px;font-weight:500;color:var(--ec-ink2)}
html #ec-root .ec-fs .ec-o.ec-on{border-color:var(--ec-navy);background:var(--ec-navy);color:#fff}
html #ec-root .ec-toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);background:var(--ec-navy);color:#fff;font-size:13px;font-weight:600;padding:10px 14px;border-radius:10px;opacity:0;transition:.25s;z-index:40;white-space:nowrap;pointer-events:none}
html #ec-root .ec-toast.ec-on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:1200px){html #ec-root .ec-kpi{display:grid;grid-template-columns:1fr 1.15fr 1.35fr}
html #ec-root .ec-kgrid{border-top:0;border-left:1px solid var(--ec-line)}
html #ec-root .ec-stack{border-left:1px solid var(--ec-line);padding:16px}
html #ec-root .ec-stack .ec-sbar{margin-top:12px}
html #ec-root .ec-tb .ec-ib.ec-flt{display:none}
html #ec-root .ec-dfl{display:flex}
html #ec-root .ec-mob{display:none}
html #ec-root .ec-dt{display:block;overflow-x:auto}
html #ec-root .ec-ov{align-items:stretch;justify-content:flex-end}
html #ec-root .ec-sheet{width:440px;border-radius:0;max-height:none;height:100%}
html #ec-root .ec-toast{bottom:28px}}
@media (max-width:1199.98px){html #ec-root .ec-crumb b,html #ec-root .ec-crumb .ec-sl{display:none}
html #ec-root .ec-crumb button:before{content:"‹ "}
html #ec-root .ec-btn .ec-tx{display:none}
html #ec-root .ec-acts .ec-btn{width:34px;padding:0}}
/* ---- APP SUBSTITUTIONS, each named (everything above is the prototype's own) ----------------------------------
   S1 the sheet and the toast are positioned against the PAGE, not the dropped frame: absolute -> fixed, above the
      app's bottom bar; on the desktop the sheet is the right-side panel the prototype draws.
   S2 every colour the prototype's SCRIPT wrote inline (category and warehouse swatches, bars) is a CLASS here, with
      the prototype's own values, because DESIGN-TOKENS-01 forbids a raw colour in a .js file.
   S3 an element hidden with the `hidden` attribute stays hidden when a ported rule gives it a display.
   S4 #ec-root carries its own gutter and canvas: the prototype's <main> padding without the room it kept for its nav. */
html #ec-root .ec-ov{position:fixed;z-index:90}
html #ec-root .ec-toast{position:fixed;z-index:95;bottom:96px}
html #ec-root .ec-c0,html #ec-root .ec-w0{background:var(--ec-w1)}
html #ec-root .ec-c1,html #ec-root .ec-w1{background:var(--ec-w2)}
html #ec-root .ec-c2,html #ec-root .ec-w2{background:var(--ec-w3)}
html #ec-root .ec-c3,html #ec-root .ec-w3{background:var(--ec-w4)}
html #ec-root .ec-sbar i.ec-dim{opacity:.25}
html #ec-root .ec-wq span i.ec-w0,html #ec-root .ec-wq span i.ec-w1,html #ec-root .ec-wq span i.ec-w2,html #ec-root .ec-wq span i.ec-w3{display:inline-block}
html #ec-root [hidden]{display:none!important}
html #ec-root .ec-sic{display:inline-flex}
html #ec-root .ec-li.ec-sep{margin-top:8px;border-top:1px solid var(--ec-line);padding-top:10px}
html #ec-root .ec-am{color:var(--ec-amber);font-weight:600}
/* S5 the crumb's «‹ » is TEXT, not a ::before, so the app's shared «‹ Voltar» sees the screen's own way back
   (BACK-BUTTON-01: one way back, never two); the desktop crumb reads «Estoque / …» as the prototype draws it */
html #ec-root .ec-crumb button:before{content:none}
@media (min-width:1200px){html #ec-root .ec-lt{display:none}}
html #ec-root{padding:16px 16px 24px;background:var(--ec-bg);min-height:100%}
@media (min-width:1200px){html #ec-root{padding:28px 36px 40px}html #ec-root .ec-toast{bottom:28px}}
/* ESTOQUE-FILTROS-V7-01 (owner 2026-10-04) — the v7 selectors, PORTED from docs/mockups/lotus-estoque-custos-v7.html's
 «v6 selectors» block by the same mapping, values byte-identical. One owner substitution, named: the prototype's
 .g4 is four columns, and the owner's text says up to 4 warehouses sit on ONE row (Todos + each), so the column
 count is --ec-wn (warehouses + 1), set by the screen; more than 4 keeps the prototype's .g3 (Todos spans the top
 row, the rest in threes). The desktop (.frame.desk) puts every button on one row, Todos not spanning, as the
 prototype's 5- and 7-column rules do for its 4 and 6 warehouses. */
html #ec-root .ec-wsel{background:#fff;border:1px solid var(--ec-line);border-radius:16px;padding:6px;margin-bottom:10px}
html #ec-root .ec-wsel .ec-g4,html #ec-root .ec-wsel .ec-g3{display:grid;grid-template-columns:repeat(var(--ec-wc,3),1fr);gap:4px}
html #ec-root .ec-wsel button{border-radius:11px;padding:9px 6px 8px;text-align:center;min-width:0}
html #ec-root .ec-wsel button b{display:block;font-size:13px;font-weight:700;color:var(--ec-ink2);white-space:normal;overflow-wrap:break-word}
html #ec-root .ec-wsel button span{display:block;font-size:11.5px;color:var(--ec-muted);margin-top:2px;white-space:nowrap}
html #ec-root .ec-wsel button.ec-on{background:var(--ec-navy)}html #ec-root .ec-wsel button.ec-on b{color:#fff}html #ec-root .ec-wsel button.ec-on span{color:var(--ec-gold)}
html #ec-root .ec-wsel button.ec-all{grid-column:1/-1;display:flex;justify-content:center;gap:8px;align-items:baseline;padding:8px}html #ec-root .ec-wsel button.ec-all span{margin:0}
html #ec-root .ec-wsel .ec-dist{display:flex;height:6px;border-radius:3px;overflow:hidden;margin:8px 6px 6px;gap:2px}html #ec-root .ec-wsel .ec-dist i{display:block;height:100%;border-radius:2px;background:#d4d9e1}html #ec-root .ec-wsel .ec-dist i.ec-on{background:var(--ec-gold)}
html #ec-root .ec-catsel{width:100%;height:46px;background:#fff;border:1px solid var(--ec-line);border-radius:12px;display:flex;align-items:center;gap:10px;padding:0 14px;margin-bottom:12px}
html #ec-root .ec-catsel .ec-k{font-size:13px;color:var(--ec-muted);font-weight:600}html #ec-root .ec-catsel b{flex:1;font-size:14.5px;font-weight:700;color:var(--ec-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}html #ec-root .ec-catsel b small{font-weight:600;color:var(--ec-muted);margin-left:6px}
html #ec-root .ec-catsel .ec-ch{color:var(--ec-muted);font-size:13px}html #ec-root .ec-catsel.ec-on{background:var(--ec-navy);border-color:var(--ec-navy)}html #ec-root .ec-catsel.ec-on .ec-k,html #ec-root .ec-catsel.ec-on .ec-ch{color:#aab6c8}html #ec-root .ec-catsel.ec-on b{color:#fff}html #ec-root .ec-catsel.ec-on b small{color:var(--ec-gold)}
html #ec-root .ec-copt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:12px 0;border-top:1px solid var(--ec-line2);font-size:15px;text-align:left}html #ec-root .ec-copt:first-child{border-top:0}
html #ec-root .ec-copt .ec-ck{width:20px;height:20px;border-radius:10px;border:1.5px solid var(--ec-faint)}html #ec-root .ec-copt.ec-on .ec-ck{background:var(--ec-navy);border-color:var(--ec-navy);box-shadow:inset 0 0 0 4px #fff}
html #ec-root .ec-copt .ec-nm{font-weight:600}html #ec-root .ec-copt .ec-nm small{display:block;font-size:12px;color:var(--ec-muted);font-weight:500;margin-top:1px}html #ec-root .ec-copt .ec-a{font-weight:700;white-space:nowrap}
html #ec-root .ec-copt .ec-mb{height:3px;background:var(--ec-line2);border-radius:2px;margin-top:5px;max-width:140px}html #ec-root .ec-copt .ec-mb i{display:block;height:100%;background:var(--ec-gold);border-radius:2px}
@media (min-width:1200px){html #ec-root .ec-wsel .ec-g4,html #ec-root .ec-wsel .ec-g3{grid-template-columns:repeat(var(--ec-wn,5),1fr)}html #ec-root #ec-dCat{display:none}html #ec-root .ec-wsel button.ec-all{grid-column:auto;display:block;padding:9px 6px 8px}html #ec-root .ec-wsel button.ec-all span{margin-top:2px}html #ec-root .ec-wsel button b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}