/* ============================================================================
   WeConnect ERP - module pieces (stores, parcels, partners, reports, charts)
   and the second motion layer. Loaded after app.css.
   ============================================================================ */

/* ---------- small shared bits ---------------------------------------------------- */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.spacer{flex:1}
.kpi .l{display:flex;align-items:center;gap:7px}
.kpi .l .i{width:15px;height:15px;color:var(--ink-4)}
.kpi.alert{border-color:#F4C2C5;background:linear-gradient(180deg,#FFF6F6,#fff 60%)}
.kpi.alert .v{color:var(--red)}
.kpi.good .v{color:var(--pos)}
.demo-note{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:#FFF7E8;border:1px dashed #E8C98C;font-size:12.5px;color:#6B4A0E}
.demo-note .i{color:#B7700F;width:16px;height:16px}
.period-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3);margin-left:auto}
.period-chip .i{width:15px;height:15px}
.legend.pad{padding:10px 20px 14px}
.legend.pad0{margin-top:10px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw-d{background:#12805C} .sw-r{background:#B4233E} .sw-t{background:#C9CFDA}
.btn.red{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 20px -12px rgba(208,20,30,.9)}
.btn.red:hover{background:#B80F18;border-color:#B80F18}
.btn.danger{background:var(--neg);border-color:var(--neg);color:#fff}
.lockup.big .logo-mark{width:92px;height:52px}
.lockup.big .wm b{font-size:40px}
.lockup.big .wm small{font-size:11px;letter-spacing:.46em;margin-top:8px}

/* store tag: coloured code block + name. Distinct from status pills on purpose. */
.stag{display:inline-flex;align-items:stretch;border-radius:7px;overflow:hidden;font-size:12px;line-height:1;vertical-align:middle;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent);background:color-mix(in srgb,var(--c) 10%,#fff);white-space:nowrap}
.stag b{background:var(--c);color:#fff;font:800 10.5px/1 var(--f-ui);letter-spacing:.06em;padding:5px 7px;display:flex;align-items:center}
.stag span{padding:5px 8px;color:var(--ink-2);font-weight:600;display:flex;align-items:center}
.stag.sm b{padding:4px 6px;font-size:9.5px}
.stag.lg{font-size:13.5px;border-radius:9px}
.stag.lg b{font-size:12px;padding:8px 10px}
.stag.lg span{padding:8px 12px}
.stag.xl{font-size:17px;border-radius:12px}
.stag.xl b{font-size:16px;padding:11px 14px;letter-spacing:.08em}
.stag.xl span{padding:11px 16px}

/* infinite ribbon of every store tag */
.ribbon{overflow:hidden;border-radius:16px;background:var(--carbon);padding:12px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ribbon-track{display:flex;gap:10px;width:max-content;animation:marquee 60s linear infinite}
.ribbon:hover .ribbon-track{animation-play-state:paused}
.ribbon .stag{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ribbon .stag span{color:rgba(255,255,255,.85)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Shopify stores ---------------------------------------------------------- */
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.store-card{position:relative;display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.store-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px color-mix(in srgb,var(--c) 70%,#000);border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.sc-top{position:relative;display:block;height:92px;padding:16px 18px;text-decoration:none;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000));overflow:hidden}
.sc-top::before{content:"";position:absolute;right:-30px;top:-40px;width:120px;height:170px;background:rgba(255,255,255,.12);transform:skewX(-28deg);transition:transform .6s var(--ease)}
.store-card:hover .sc-top::before{transform:skewX(-28deg) translateX(-40px)}
.sc-code{position:relative;font:900 30px/1 var(--f-display);letter-spacing:.04em;text-shadow:0 2px 10px rgba(0,0,0,.15)}
.sc-status{position:absolute;right:14px;top:14px}
.sc-status .pill{background:rgba(255,255,255,.92)}
.sc-status .pill.nodot{color:var(--ink-2)}
.spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:34px;opacity:.9}
.sc-body{padding:14px 18px 6px;flex:1}
.sc-body h3{margin:0;font:800 17px/1.2 var(--f-display);letter-spacing:-.02em}
.sc-body > p{margin:4px 0 12px}
.sc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.sc-stats b{display:block;font:800 18px/1.1 var(--f-display);letter-spacing:-.02em}
.sc-stats small{font-size:11px;color:var(--ink-4)}
.sc-err{display:flex;gap:7px;align-items:flex-start;margin:10px 0 0;font-size:12px;color:var(--neg)}
.sc-err .i{width:14px;height:14px;margin-top:2px}
.sc-pack{display:flex;gap:8px;align-items:center;margin:10px 0 8px;font-size:12px;color:var(--ink-3)}
.sc-pack .i{width:15px;height:15px;color:var(--ink-4)}
.sc-foot{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px solid var(--line-2)}
.sc-sync{margin-left:auto;font-size:11.5px}

.store-form{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.sf-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.sticky-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:14px}
.store-form .form-actions{grid-column:1/-1}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{position:relative;cursor:pointer}
.sw input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.sw i{display:block;width:30px;height:30px;border-radius:9px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .25s var(--spring),box-shadow .2s}
.sw:hover i{transform:scale(1.1)}
.sw input:checked + i,.sw input:checked ~ i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c);transform:scale(1.05)}
.sw input:focus-visible ~ i{outline:2px solid var(--ink)}
.sw.custom i{background:conic-gradient(#D0141E,#F2B01E,#12805C,#2F5E9E,#8C6BC0,#D0141E)}
.sw.custom input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.prev-tag{padding:18px;border-radius:18px;background:var(--sheet-2);display:grid;place-items:center}
.label4x6{--c:#D0141E;background:#fff;border-radius:6px;border:1px solid #D9D9DE;box-shadow:0 18px 40px -22px rgba(0,0,0,.4);aspect-ratio:4/6;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:11px;transform:rotate(-1.5deg);transition:transform .4s var(--ease)}
.label4x6:hover{transform:rotate(0)}
.l-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:2px solid #141417}
.l-head b{background:var(--c);color:#fff;font:900 22px/1 var(--f-display);letter-spacing:.06em;padding:7px 10px;border-radius:5px;transition:background .3s}
.l-head span{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.l-row{display:flex;flex-direction:column;gap:1px}
.l-row small{font:800 8.5px/1 var(--f-ui);letter-spacing:.14em;color:var(--ink-4)}
.l-row b{font-size:13px;font-weight:800}
.l-row span{color:var(--ink-3)}
.l-bar{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:4px}
.l-bar svg{width:100%;height:52px;fill:#141417}
.l-bar span{font-size:10px;letter-spacing:.1em}
.l-foot{display:flex;justify-content:space-between;font-weight:800;padding-top:6px;border-top:1px dashed #C9C9D1}
.l-insert{display:flex;gap:6px;align-items:center;padding:6px 8px;border-radius:5px;background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);font-weight:700}
.l-insert .i{width:13px;height:13px}
.howto{border-radius:12px;background:var(--sheet-2);padding:2px 14px}
.howto summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:center;padding:10px 0;font-weight:700;font-size:13px}
.howto summary::-webkit-details-marker{display:none}
.howto summary .i{width:16px;height:16px;color:var(--red)}
.howto ol{margin:0 0 12px;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--ink-2)}
.howto .codebox{margin-top:6px;background:var(--carbon);color:#FFB3B6}

/* ---------- parcels ------------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:6px}
.flow-step{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;border-radius:16px;background:var(--sheet-2);text-decoration:none;text-align:center;border:1.5px solid transparent;transition:transform .3s var(--spring),border-color .2s,background .2s;animation:rise .6s var(--ease) both;animation-delay:calc(var(--k) * 90ms + 100ms)}
.flow-step:hover{transform:translateY(-3px);background:#fff;border-color:var(--line)}
.flow-step.on{border-color:var(--ink);background:#fff}
.flow-step b{font:900 30px/1 var(--f-display);letter-spacing:-.03em}
.flow-step span{font-size:12px;font-weight:600;color:var(--ink-3)}
.flow-step.st-pos b{color:var(--pos)}
.flow-arrow{width:28px;height:2px;background:var(--line);position:relative;overflow:hidden}
.flow-arrow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--red),transparent);animation:flow-run 1.8s linear infinite;animation-delay:calc(var(--k) * 300ms)}
@keyframes flow-run{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.flow-side{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.side-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:12px;background:var(--sheet-2);text-decoration:none;font-size:12.5px;font-weight:600;color:var(--ink-2);border:1.5px solid transparent;transition:border-color .2s,transform .2s}
.side-chip:hover{transform:translateY(-1px)}
.side-chip.on{border-color:var(--ink)}
.side-chip b{min-width:26px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px;color:#fff;padding:0 6px}
.st-warn b{background:var(--warn)} .st-neg b{background:var(--neg)} .st-info b{background:var(--info)} .st-pos b{background:var(--pos)}
.flow-step.st-info b,.flow-step.st-pos b{background:none}
.flow-step.st-info b{color:var(--info)}
.rule-note{display:flex;gap:7px;align-items:center;margin:14px 0 0}
.rule-note .i{width:14px;height:14px}
.flag-list{list-style:none;margin:0;padding:0}
.flag-list li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--line-2);animation:rise-x .45s var(--ease) both;animation-delay:calc(var(--k) * 60ms + 150ms)}
.flag-list li:first-child{border-top:0}
.fl-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.fl-ic.st-warn{background:var(--warn-tint);color:var(--warn)} .fl-ic.st-neg{background:var(--neg-tint);color:var(--neg)}
.fl-ic .i{width:17px;height:17px}
.fl-tx{flex:1;min-width:0}
.fl-tx b{display:block;font-size:13.5px}
.fl-tx small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--ink-3);font-size:12px;margin-top:3px}
.t tr.flag-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.t tr.flag-neg td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
.t tr.click{cursor:pointer}
.cour{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.cour i{width:24px;height:24px;border-radius:7px;background:var(--c);color:#fff;display:grid;place-items:center;font:800 8.5px/1 var(--f-ui);font-style:normal;letter-spacing:.02em;flex:none}
.cour.lg i{width:32px;height:32px;border-radius:9px;font-size:10px}
.sheet-dlg.wide{width:min(620px,calc(100vw - 24px))}
.pd-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.pd-head h3{margin:8px 0 2px;font:800 24px/1.1 var(--f-mono);letter-spacing:-.02em}
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:16px 0;font-size:13px}
.pd-grid dt{font-size:11px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.pd-grid dd{margin:2px 0 0;font-weight:600}
.ptl{list-style:none;margin:0;padding:0;position:relative}
.ptl li{position:relative;padding:0 0 14px 26px;animation:rise-x .4s var(--ease) both;animation-delay:calc(var(--k) * 70ms + 120ms)}
.ptl li::before{content:"";position:absolute;left:5px;top:14px;bottom:0;border-left:2px solid var(--line-2)}
.ptl li:last-child::before{display:none}
.ptl li i{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--info);box-shadow:0 0 0 3px #fff}
.ptl li.s-delivered i{background:var(--pos)} .ptl li.s-failed i,.ptl li.s-reship i{background:var(--warn)} .ptl li.s-rts i,.ptl li.s-lost i{background:var(--neg)}
.ptl li:first-child i{box-shadow:0 0 0 3px #fff,0 0 0 7px color-mix(in srgb,var(--info) 20%,transparent);animation:ping 2s ease-out infinite}
@keyframes ping{50%{box-shadow:0 0 0 3px #fff,0 0 0 9px transparent}}
.ptl b{display:block;font-size:13px}
.ptl small{color:var(--ink-4);font-size:12px}

.cour-t td{vertical-align:middle}
.bar-cell{width:34%}
.hbar{display:flex;height:10px;border-radius:6px;background:var(--sheet-3);overflow:hidden;gap:2px}
.hbar i{display:block;height:100%;width:var(--w);transform-origin:left;animation:grow-x 1s var(--ease) both .2s}
.hbar i.d{background:#12805C;border-radius:6px 0 0 6px} .hbar i.r{background:#B4233E}
.cour-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cour-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.cour-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--c)}
.cour-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cc-h{display:flex;align-items:center;gap:12px}
.cc-h > div{flex:1;min-width:0}
.cc-h b{display:block;font-size:15px;font-weight:800}
.cc-h small{color:var(--ink-4);font-size:12px}
.cc-logo{width:46px;height:46px;border-radius:14px;background:var(--c);color:#fff;display:grid;place-items:center;font:900 13px/1 var(--f-ui);box-shadow:0 10px 20px -12px var(--c)}
.copyrow{display:flex;gap:6px;align-items:stretch}
.copyrow .codebox{flex:1;padding:9px 11px;font-size:11px;background:var(--sheet-2);color:var(--ink-2);border-radius:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal}
.cour-card .sc-foot{margin:0 -18px -18px;padding:10px 14px 12px}
.cour-card.add{align-items:center;justify-content:center;text-align:center;border:1.5px dashed var(--line);background:var(--sheet-2);text-decoration:none;min-height:190px}
.cour-card.add::before{display:none}
.cour-card.add .i{width:30px;height:30px;color:var(--red);padding:6px;border-radius:50%;background:#fff;box-shadow:var(--shadow);transition:transform .35s var(--spring)}
.cour-card.add:hover .i{transform:rotate(90deg) scale(1.1)}
.cour-card.add small{color:var(--ink-3);max-width:30ch}
.prov-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pp{position:relative;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1.5px solid var(--line);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.pp:hover{transform:translateY(-2px)}
.pp input{position:absolute;opacity:0}
.pp-logo{width:34px;height:34px;border-radius:10px;background:var(--c);color:#fff;display:grid;place-items:center;font:900 10px/1 var(--f-ui);flex:none}
.pp b{font-size:13px;font-weight:700;line-height:1.2}
.pp:has(input:checked){border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 15%,transparent)}
.pp:has(input:focus-visible){outline:2px solid var(--ink)}
.prov-fields[hidden]{display:none}
.prov-fields:not([hidden]){animation:rise .4s var(--ease) both}

/* ---------- partners -------------------------------------------------------------- */
.rank-hero{position:relative;overflow:hidden;display:flex;align-items:center;gap:26px;padding:26px 30px;border-radius:24px;color:#fff;background:linear-gradient(120deg,var(--carbon) 55%,#3A0A0E);isolation:isolate}
.rank-hero::after{content:"";position:absolute;right:-60px;top:-40px;width:260px;height:320px;background:var(--red-grad);transform:skewX(-30deg);opacity:.85;z-index:-1;animation:slash-in-r 1s var(--ease) both .2s}
@keyframes slash-in-r{from{transform:skewX(-30deg) translateX(120%)}}
.rh-num{font:900 110px/.85 var(--f-display);letter-spacing:-.06em;display:flex;align-items:flex-start}
.rh-num small{font-size:36px;color:var(--red-2);margin-top:8px}
.rh-tx{flex:1;min-width:0}
.rh-tx h2{margin:0;font:900 30px/1.1 var(--f-display);letter-spacing:-.03em}
.rh-tx p{margin:8px 0 0;color:rgba(255,255,255,.72)}
.rh-stats{display:flex;gap:10px}
.rh-stats > div{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);min-width:92px}
.rh-stats b{display:block;font:900 24px/1 var(--f-display)}
.rh-stats small{font-size:11px;color:rgba(255,255,255,.65)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:14px;max-width:760px;margin:0 auto;width:100%;padding-top:10px}
.pod{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.pod-av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font:900 20px/1 var(--f-ui);background:#fff;border:3px solid var(--line);box-shadow:var(--shadow);animation:pop .7s var(--spring) both;animation-delay:calc(var(--k) * 180ms + 700ms)}
.pod.p1 .pod-av{width:78px;height:78px;border-color:var(--red);color:var(--red);font-size:24px}
.pod b{font-size:14px;font-weight:800;margin-top:6px}
.pod small{font-size:12px;color:var(--ink-3)}
.pod-block{width:100%;margin-top:10px;border-radius:16px 16px 6px 6px;background:linear-gradient(180deg,var(--sheet-3),var(--sheet-2));display:grid;place-items:start center;padding-top:12px;transform-origin:bottom;animation:grow-y .9s var(--ease) both;animation-delay:calc(var(--k) * 180ms + 200ms)}
.pod-block span{font:900 34px/1 var(--f-display);color:var(--ink-4)}
.pod.p1 .pod-block{height:150px;background:var(--red-grad);box-shadow:0 20px 40px -20px rgba(208,20,30,.8)}
.pod.p1 .pod-block span{color:#fff}
.pod.p2 .pod-block{height:112px}
.pod.p3 .pod-block{height:86px}
@keyframes grow-y{from{transform:scaleY(0)}}
.board{list-style:none;margin:0;padding:0}
.board li{display:flex;align-items:center;gap:12px;padding:11px 20px;border-top:1px solid var(--line-2);animation:rise-x .45s var(--ease) both;animation-delay:calc(var(--k) * 40ms + 150ms)}
.board li:first-child{border-top:0}
.board li.me{background:linear-gradient(90deg,var(--red-tint),transparent 70%)}
.bd-no{width:28px;text-align:center;font:900 20px/1 var(--f-display);color:var(--ink-4);flex:none}
.board li.top .bd-no{color:var(--red)}
.bd-nm{flex:1;min-width:0}
.bd-nm b{display:block;font-size:13.5px}
.bd-nm small{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.mv{font:800 11px/1 var(--f-ui);font-style:normal;padding:4px 6px;border-radius:6px}
.mv.up{background:var(--pos-tint);color:var(--pos)} .mv.down{background:var(--neg-tint);color:var(--neg)}
.bd-bar{width:26%;height:8px;border-radius:6px;background:var(--sheet-3);overflow:hidden;flex:none}
.bd-bar i{display:block;height:100%;width:var(--w);background:var(--red-grad);border-radius:6px;transform-origin:left;animation:grow-x 1s var(--ease) both .3s}
.bd-v{width:78px;text-align:right;flex:none}
.bd-v b{display:block;font-size:14px} .bd-v small{font-size:11px;color:var(--ink-4)}
.bd-hidden{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-4)}
.bd-hidden .i{width:13px;height:13px}

/* ---------- charts ------------------------------------------------------------------ */
.chart{width:100%;min-height:60px}
.chsvg{width:100%;height:auto;display:block;overflow:visible;font-family:var(--f-ui)}
.chsvg .tk{font-size:10.5px;fill:#8C8C96;font-variant-numeric:tabular-nums}
.chsvg .lb{font-size:12.5px;fill:#36363D;font-weight:600}
.chsvg .val{font-size:12px;fill:#141417;font-weight:800;font-variant-numeric:tabular-nums}
.chsvg .tag-tx{font-size:8.5px;fill:#fff;font-weight:800;letter-spacing:.04em}
.chsvg .dn-v{font-size:26px;font-weight:900;fill:#141417}
.chsvg .dn-l{font-size:11px;fill:#8C8C96}
.chart.drawn .ch-line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s var(--ease) forwards}
.chart.drawn .ch-fill{animation:fade 1s ease both .4s}
.chart.drawn .ch-col{transform-box:fill-box;transform-origin:bottom;animation:grow-y .7s var(--ease) both}
.chart.drawn .ch-row{animation:rise-x .5s var(--ease) both}
.chart.drawn .ch-bar{transform-box:fill-box;transform-origin:left;animation:grow-x .9s var(--ease) both .15s}
.chart.drawn .ch-slice{transform-box:view-box;transform-origin:100px 100px;animation:slice-in .7s var(--spring) both}
.chart.still *{animation:none!important;stroke-dashoffset:0!important}
.ch-col:hover rect:not([fill=transparent]),.ch-slice:hover{filter:brightness(1.1)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}}
@keyframes slice-in{from{transform:scale(.6) rotate(-30deg);opacity:0}}
.ch-tip{position:fixed;left:0;top:0;z-index:100;pointer-events:none;min-width:170px;padding:10px 12px;border-radius:12px;background:var(--carbon);color:#fff;font-size:12px;box-shadow:0 14px 34px -12px rgba(0,0,0,.5);opacity:0;transition:opacity .12s}
.ch-tip b{display:block;margin-bottom:4px;font-size:12.5px}
.ch-tip .r{display:flex;align-items:center;gap:7px;justify-content:space-between;padding:1px 0}
.ch-tip .r i{width:8px;height:8px;border-radius:2px}
.ch-tip .r span{flex:1;color:rgba(255,255,255,.7)}
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut-wrap .chart{max-width:210px}
.dn-legend{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;gap:7px;font-size:12.5px}
.dn-legend li{display:flex;align-items:center;gap:8px}
.dn-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.dn-legend span{flex:1;color:var(--ink-2)}
.waterfall{list-style:none;margin:0;padding:6px 0}
.waterfall li{display:flex;justify-content:space-between;align-items:center;padding:11px 20px;border-top:1px solid var(--line-2);font-size:13.5px;animation:rise-x .4s var(--ease) both;animation-delay:calc(var(--k) * 70ms + 200ms)}
.waterfall li:first-child{border-top:0}
.waterfall li b{font:800 16px/1 var(--f-display)}
.waterfall li.sub{background:var(--sheet-2);font-weight:700}
.waterfall li.sub b{font-size:20px}
.waterfall li.neg b{color:var(--neg)}
.table-view summary{list-style:none;cursor:pointer;padding-bottom:16px}
.table-view summary::-webkit-details-marker{display:none}
.table-view .chev{margin-left:auto;transition:transform .3s var(--ease);color:var(--ink-4)}
.table-view[open] .chev{transform:rotate(90deg)}

/* ---------- dashboard glance --------------------------------------------------------- */
.glance{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.gl-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gl{padding:14px 16px;border-radius:16px;background:var(--sheet-2);display:flex;flex-direction:column;gap:3px;transition:transform .3s var(--ease),background .3s}
.gl:hover{transform:translateY(-2px);background:#fff;box-shadow:var(--shadow)}
.gl small{font-size:12px;color:var(--ink-3);font-weight:600}
.gl b{font:900 30px/1.05 var(--f-display);letter-spacing:-.035em}
.gl span{font-size:12px;color:var(--ink-4)}
.gl.bad b{color:var(--neg)}
.gl-bar{display:block;height:6px;border-radius:6px;background:var(--line-2);overflow:hidden;margin-top:6px}
.gl-bar i{display:block;height:100%;width:var(--w);background:var(--red-grad);border-radius:6px;transform-origin:left;animation:grow-x 1.2s var(--ease) both .4s}
.gl-chart .ch.mini{padding:0 0 8px}
.gl-chart .ch.mini .btn{margin-left:auto}

/* ---------- the banner's slashes: dashboard hero + sign-in ------------------------------ */
.hero{background:linear-gradient(120deg,var(--carbon) 0%,var(--carbon-2) 55%,#2A0A0D 100%)}
.hero-orn{border-color:rgba(238,46,53,.25)}
.hero-orn::before{border-color:rgba(238,46,53,.35)}
.hero-slashes{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-slashes i{position:absolute;top:-30%;height:170%;transform:skewX(-32deg);animation:slash-drop 1s var(--ease) both}
.hero-slashes i:nth-child(1){right:210px;width:70px;background:linear-gradient(180deg,rgba(238,46,53,.0),rgba(238,46,53,.35));animation-delay:.15s}
.hero-slashes i:nth-child(2){right:120px;width:34px;background:var(--red-grad);opacity:.9;animation-delay:.3s}
.hero-slashes i:nth-child(3){right:-40px;width:150px;background:linear-gradient(180deg,#D0141E,#6E080E);opacity:.55;animation-delay:.45s}
@keyframes slash-drop{from{transform:skewX(-32deg) translateY(-110%)}}
.hero-rise{position:absolute;left:34%;bottom:-6px;width:min(420px,40%);height:auto;z-index:-1;overflow:visible}
.hero-rise path{fill:none;stroke:#FF8A8F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.8s var(--ease) forwards .6s}
.hero-rise .hd{stroke-dasharray:90;stroke-dashoffset:90;animation-delay:2.1s;animation-duration:.5s}
.auth-art{background:radial-gradient(700px 420px at 100% 0%,rgba(208,20,30,.28),transparent 60%),linear-gradient(135deg,#0F0F12,var(--carbon) 60%,#1E0709)}
.slashes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.slashes i{position:absolute;transform:skewX(-34deg);animation:slash-in-l 1.1s var(--ease) both}
.slashes .s1{left:-80px;top:-40px;width:260px;height:60px;background:#0A0A0C;animation-delay:.1s}
.slashes .s2{left:-60px;top:38px;width:340px;height:18px;background:var(--red-grad);animation-delay:.25s}
.slashes .s3{right:-40px;bottom:120px;width:300px;height:22px;background:var(--red-grad);animation-delay:.45s;animation-name:slash-in-r2}
.slashes .s4{right:-70px;bottom:40px;width:420px;height:64px;background:#0A0A0C;animation-delay:.6s;animation-name:slash-in-r2}
@keyframes slash-in-l{from{transform:skewX(-34deg) translateX(-120%)}}
@keyframes slash-in-r2{from{transform:skewX(-34deg) translateX(120%)}}
.rise{position:absolute;right:4%;top:22%;width:62%;height:auto;overflow:visible}
.rise-line,.rise-head{fill:none;stroke:#FF8A8F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.75;vector-effect:non-scaling-stroke}
.rise-line{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s var(--ease) forwards .7s}
.rise-head{stroke-dasharray:120;stroke-dashoffset:120;animation:draw .5s var(--ease) forwards 2.5s}
.art-logo{position:relative;z-index:1}
.art-copy h2 em{font-style:normal;color:var(--red-2)}
.auth-logo .lockup{margin-bottom:10px}

/* ---------- motion layer 2 -------------------------------------------------------------- */
/* active menu highlight morphs from item to item across page loads */
.nav a{isolation:isolate}
.nav a.on{background:transparent}
.nav-pill{position:absolute;inset:0;border-radius:11px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);z-index:-1;view-transition-name:nav-pill}
.tabbar a,.tabbar button{isolation:isolate}
.tab-pill{position:absolute;inset:0;border-radius:18px;background:var(--red-tint);z-index:-1;view-transition-name:tab-pill}
.subtabs a.on{view-transition-name:none}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(nav-pill),::view-transition-group(tab-pill){animation-duration:.5s;animation-timing-function:cubic-bezier(.34,1.3,.64,1)}
}
/* thin red bar while the next page loads */
.nav-progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:200;background:linear-gradient(90deg,var(--red),#FF7A80);box-shadow:0 0 12px rgba(238,46,53,.7);border-radius:0 3px 3px 0;opacity:0;pointer-events:none}
html.is-loading .nav-progress{opacity:1;animation:loading 2.5s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes loading{from{width:0}to{width:85%}}
/* button ripple */
.btn{position:relative;overflow:hidden}
.btn .rip{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);animation:rip .6s var(--ease) forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
/* cards: a red line sweeps in on hover */
.card{position:relative}
.card::after{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:var(--red-grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);pointer-events:none}
.card:hover::after{transform:scaleX(1)}
details.card::after,.card.kpi::after{left:14px;right:14px}
.kpi{transition:transform .3s var(--ease),box-shadow .3s}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* ---------- responsive -------------------------------------------------------------- */
@media (max-width:1180px){
  .g4{grid-template-columns:1fr 1fr}
  .store-form{grid-template-columns:1fr}
  .sticky-side{position:static;flex-direction:row;flex-wrap:wrap}
  .label4x6{max-width:300px}
  .glance{grid-template-columns:1fr}
  .rank-hero{flex-wrap:wrap}
}
@media (max-width:900px){
  .g4{grid-template-columns:1fr 1fr;gap:10px}
  .kpi-row .kpi{padding:14px}
  .kpi-row .kpi .v{font-size:26px}
  .store-grid,.cour-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr;gap:8px}
  .flow-arrow{display:none}
  .period-chip{margin-left:0}
  .donut-wrap{flex-direction:column}
  .rank-hero{padding:22px 20px;gap:12px}
  .rank-hero::after{width:150px;right:-90px;opacity:.55}
  .rh-num{font-size:84px}
  .rh-stats{width:100%}
  .rh-stats > div{flex:1;min-width:0}
  .podium{gap:8px}
  .pod-av{width:48px;height:48px;font-size:16px}
  .pod.p1 .pod-av{width:60px;height:60px}
  .pod b{font-size:12.5px}
  .bd-bar{display:none}
  .gl b{font-size:24px}
  .ribbon{border-radius:14px}
  .pd-grid{grid-template-columns:1fr}
  .hero-slashes i:nth-child(1){right:90px} .hero-slashes i:nth-child(2){right:40px} .hero-slashes i:nth-child(3){right:-90px}
  .hero-rise{display:none}
  .lockup.big .wm b{font-size:30px}
  .lockup.big .logo-mark{width:70px;height:40px}
  .slashes .s3,.slashes .s4{display:none}
  .rise{top:auto;bottom:10px;width:80%;opacity:.6}
  .nav-progress{top:env(safe-area-inset-top,0)}
  .tabbar .on::before{display:none}
  .card::after{display:none}
}
@media print{
  .side,.top,.appbar,.tabbar,.no-print,.acts,.demo-note,.foot{display:none!important}
  .app{display:block} .main{padding:0} .sheet{box-shadow:none;border-radius:0}
  body{background:#fff}
  .card{break-inside:avoid;border-color:#ddd}
  .chart *{animation:none!important;stroke-dashoffset:0!important}
}

/* roadmap: a phase that is partly built */
.bead-li.part .bead{background:conic-gradient(var(--red) 0 50%,#fff 50% 100%);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border-color:var(--red)}
.bead-li.part small{color:var(--red);font-weight:600}

/* ============================================================================
   PLAIN BLACK & WHITE (Kenn, 2026-09-24): the app itself is black and white only.
   Colour is kept ONLY in graphs and badges (status pills, store tags, courier
   logos, counts). Everything below neutralises the old red/indigo accents.
   ============================================================================ */
/* on black surfaces: white text and icons */
.brand .logo-mark,.hero-orn .logo-mark,.logo-mark.red,.lockup.on-dark .logo-mark{background:#fff;filter:none}
.brand b span,.lockup.on-dark .wm b span,.lockup .wm b span{color:inherit}
.brand::after{display:none}
.nav a.on .i{color:#fff}
.nav a.on::before{background:#fff;box-shadow:none}
.eyebrow.red,.art-copy .eyebrow,.ab-title small{color:rgba(255,255,255,.55)}
.hero h1 em,.art-copy h2 em{color:rgba(255,255,255,.6)}
.rh-num small{color:rgba(255,255,255,.45)}
.dlg-ic,.pal-res a.sel .pi,.soon-ic,.lk-ring,.mod.is-live .mod-ic,.mod:hover .mod-ic,.tile.on .i{color:#fff}
.lk-ring{box-shadow:0 0 0 10px var(--sheet-3)}
.toast .i{color:#fff}
.codebox,.howto .codebox{color:#E6E6EA}
/* on white surfaces: black accents, grey states */
.ph h1 em{color:var(--ink-3)}
.eyebrow{color:var(--ink-4)}
:focus-visible{outline-color:var(--ink)}
.soon-art .ring{border-color:#D9D9DE}
.soon-art .r3{border-color:#9A9AA3}
.d-edit{background:#9A9AA3}
.v-edit,.o-edit input:checked + span,.lvl-edit{background:#E6E6EA;color:var(--ink)}
.chain-thread path{stroke:#C9C9D1}
.bead{border-color:#C9C9D1;color:var(--ink);box-shadow:0 6px 14px -10px rgba(0,0,0,.35)}
.bead-li.live .bead{background:var(--ink);border-color:var(--ink);box-shadow:0 0 0 6px var(--sheet-3)}
.bead-li.live small,.bead-li.part small{color:var(--ink)}
.bead-li.part .bead{background:conic-gradient(var(--ink) 0 50%,#fff 50% 100%);border-color:var(--ink)}
.btn.red{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.btn.red:hover{background:#000;border-color:#000;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.nav-progress{background:#fff;box-shadow:none;mix-blend-mode:difference;height:3px}
/* plain surfaces: no slashes, arrows, glows or gradients */
.hero{background:var(--carbon)}
.hero::after,.hero-slashes,.hero-rise,.slashes,.rise,.rank-hero::after{display:none}
.hero-orn{border-color:rgba(255,255,255,.14)}
.hero-orn::before{border-color:rgba(255,255,255,.18)}
.auth-art{background:var(--carbon)}
.rank-hero{background:var(--carbon)}
.pod.p1 .pod-av{border-color:var(--ink);color:var(--ink)}
.pod.p1 .pod-block{background:var(--ink);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.bd-bar i,.gl-bar i,.rb i{background:var(--ink)}
.board li.me{background:var(--sheet-2)}
.kpi.alert{border-color:var(--line);background:#fff}
.kpi.alert .v{color:var(--neg)}
.demo-note{background:var(--sheet-2);border:1px dashed #C9C9D1;color:var(--ink-2)}
.demo-note .i{color:var(--ink-3)}
.ribbon{background:var(--sheet-2);-webkit-mask:none;mask:none;border:1px solid var(--line-2)}
.ribbon .stag{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ribbon .stag span{color:var(--ink-2)}
/* store cards: white header with the store's own tag as the badge */
.sc-top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line-2);height:96px}
.sc-top::before{display:none}
.sc-code{display:inline-block;background:var(--c);color:#fff;font-size:22px;padding:8px 12px;border-radius:10px;text-shadow:none}
.sc-status .pill{background:var(--sheet-2)}
.spark polyline{stroke:var(--ink-3)}
.spark polygon{fill:var(--ink-3)}
.store-card:hover{box-shadow:var(--shadow);border-color:var(--line)}
.flow-arrow::after{background:linear-gradient(90deg,transparent,var(--ink),transparent)}
.card::after{background:var(--ink)}
.chart.drawn .ch-fill{opacity:1}
/* parcel status chips read label first, then the count */
.side-chip{padding:7px 8px 7px 12px}
.side-chip b{order:2}
.bead-li.part .bead{background:conic-gradient(#D9D9DE 0 50%,#fff 50% 100%);color:var(--ink);text-shadow:none;border-color:var(--ink)}
.av{background:#EDEDF0;color:var(--ink)}
.side .av,.ms-head .av{background:#2A2A30;color:#fff}

/* ============================================================================
   CONTRAST + TONAL COLOUR (2026-09-24, pass 3)
   Every badge = light background + dark text of the same colour.
   Sidebar labels no lower than ~4.5:1 on black.
   ============================================================================ */
.nav h6{color:rgba(255,255,255,.58)}
.nav .ph{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.22)}
.nav a{color:rgba(255,255,255,.82)}
.brand small,.me-card small{color:rgba(255,255,255,.66)}
.ab-title small{color:rgba(255,255,255,.66)}
/* status pills */
.pill{background:#EFEFF2;color:#3F3F46}
.pill.pos{background:var(--pos-tint);color:var(--pos-ink)}
.pill.neg{background:var(--neg-tint);color:var(--neg-ink)}
.pill.warn{background:var(--warn-tint);color:var(--warn-ink)}
.pill.info{background:var(--info-tint);color:var(--info-ink)}
.pill.brass{background:#EFEFF2;color:var(--ink)}
.pill.dark{background:var(--ink);color:#fff}
.sc-status .pill.nodot,.pill.nodot{color:#3F3F46}
.mv.up{background:var(--pos-tint);color:var(--pos-ink)} .mv.down{background:var(--neg-tint);color:var(--neg-ink)}
/* counts on parcel chips: tonal too */
.st-warn b{background:var(--warn-tint);color:var(--warn-ink)}
.st-neg b{background:var(--neg-tint);color:var(--neg-ink)}
.st-info b{background:var(--info-tint);color:var(--info-ink)}
.st-pos b{background:var(--pos-tint);color:var(--pos-ink)}
.flow-step.st-info b{background:none;color:var(--info)}
.flow-step.st-pos b{background:none;color:var(--pos)}
.fl-ic.st-warn{background:var(--warn-tint);color:var(--warn-ink)} .fl-ic.st-neg{background:var(--neg-tint);color:var(--neg-ink)}
.kpi.alert .v,.gl.bad b{color:var(--neg)}
/* store tags: light tint of the store colour + dark shade of it */
.stag{background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,#fff)}
.stag b{background:color-mix(in srgb,var(--c) 22%,#fff);color:color-mix(in srgb,var(--c) 62%,#000)}
.stag span{color:color-mix(in srgb,var(--c) 55%,#000)}
.ribbon .stag{background:color-mix(in srgb,var(--c) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,#fff)}
.ribbon .stag span{color:color-mix(in srgb,var(--c) 55%,#000)}
.sc-code{background:color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 62%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff)}
.l-head b{background:color-mix(in srgb,var(--c) 18%,#fff);color:color-mix(in srgb,var(--c) 62%,#000)}
.l-insert{background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 60%,#000)}
/* courier badges */
.cour i,.cc-logo,.pp-logo{background:color-mix(in srgb,var(--c) 16%,#fff);color:color-mix(in srgb,var(--c) 68%,#000);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,#fff)}
.cour-card::before{background:color-mix(in srgb,var(--c) 45%,#fff)}
/* chart legend swatches match the chart */
.sw-d{background:#15803D} .sw-r{background:#DC2626} .sw-t{background:#CBD5E1}
.hbar i.d{background:#15803D} .hbar i.r{background:#DC2626}
/* role/level chips stay neutral */
.lvl-view{color:var(--ink-2)}

/* connection mode switch + step list (store form) */
.mode-seg{display:flex;width:100%}
.mode-seg label{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;border-radius:9px;font-size:13px;font-weight:700;color:var(--ink-3);cursor:pointer}
.mode-seg label i{font-style:normal;font-weight:500;font-size:11px;color:var(--ink-4)}
.mode-seg label.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mode-seg input{position:absolute;opacity:0;pointer-events:none}
.csteps{margin:0;padding:0;list-style:none;counter-reset:cs;display:flex;flex-direction:column;gap:10px}
.csteps li{counter-increment:cs;position:relative;padding:10px 12px 10px 46px;border-radius:12px;background:var(--sheet-2);font-size:13px;line-height:1.5}
.csteps li::before{content:counter(cs);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.csteps li small{display:block;color:var(--ink-3);font-size:12px}
.csteps .copyrow{display:flex;gap:6px;margin:6px 0}
.csteps .codebox{background:#fff;color:var(--ink);border:1px solid var(--line);padding:8px 10px;flex:1}
[data-for][hidden]{display:none!important}
.oi-list{list-style:none;margin:0 0 12px;padding:0;border:1px solid var(--line-2);border-radius:12px}
.oi-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--line-2);font-size:13px}
.oi-list li:first-child{border-top:0}

/* ============================================================================
   2026-09-25: product images, ship flow, packing, inventory, SMS, store logos
   ============================================================================ */
.row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.check{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--ink)}
.btn.xs{height:26px;padding:0 8px;font-size:11.5px;border-radius:8px;gap:5px}
.btn.xs .i{width:13px;height:13px}
.btn.big{height:54px;font-size:15px;border-radius:15px;padding:0 20px;flex:1;min-width:200px}
.neg-tx{color:var(--neg)} .pos-tx{color:var(--pos)} .warn-tx{color:var(--warn-ink)}
.grow{flex:1}

/* product thumbnails */
.thumb{width:36px;height:36px;border-radius:9px;object-fit:cover;background:var(--sheet-2);border:1px solid var(--line-2);flex:none;display:inline-grid;place-items:center;vertical-align:middle}
.thumb.lg{width:48px;height:48px;border-radius:11px}
.thumb.none .i{width:16px;height:16px;color:var(--ink-4)}
.it-cell{display:flex;align-items:center;gap:10px;min-width:0}
.thumbs{display:flex;flex:none}
.thumbs .thumb{box-shadow:0 0 0 2px #fff}
.thumbs .thumb + .thumb{margin-left:-14px}
.orders-t td{vertical-align:middle}

/* store logo inside tags and cards */
.stag.has-logo img{width:22px;height:auto;align-self:stretch;object-fit:cover;background:#fff;border-right:1px solid color-mix(in srgb,var(--c) 25%,#fff)}
.stag.sm.has-logo img{width:19px}
.stag.lg.has-logo img{width:32px}
.stag.xl.has-logo img{width:42px}
.sc-id{position:relative;display:inline-flex;align-items:center;gap:10px}
.sc-logo{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#fff;box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}
.logo-up{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-prev{width:64px;height:64px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);border:1px solid var(--line)}
.logo-prev img{width:100%;height:100%;object-fit:cover}
.logo-prev b{font-weight:800;font-size:13px;letter-spacing:.06em;color:color-mix(in srgb,var(--c) 62%,#000)}
.logo-fld{grid-column:1/-1}

/* sync progress */
.sync-bar{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--carbon);color:#fff;margin-bottom:16px;overflow:hidden;font-size:13.5px}
.sync-bar[hidden]{display:none}
.sync-bar .sb-tx span{opacity:.75}
.sb-spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.sb-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1)}
.sb-track i{position:absolute;inset:0;width:30%;background:#fff;animation:sbmove 1.4s var(--ease) infinite}
@keyframes sbmove{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.sync-bar.ok{background:var(--pos-tint);color:var(--pos-ink)}
.sync-bar.ok .sb-spin,.sync-bar.err .sb-spin,.sync-bar.ok .sb-track,.sync-bar.err .sb-track{display:none}
.sync-bar.err{background:var(--neg-tint);color:var(--neg-ink)}

/* "fix it once" card (Shopify permissions) */
.fix-card{display:flex;gap:16px;padding:20px;margin-bottom:16px;border-color:#F3D3B5;background:linear-gradient(180deg,#FFF9F3,#fff 70%)}
.fix-ic{width:42px;height:42px;border-radius:12px;background:var(--warn-tint);color:var(--warn-ink);display:grid;place-items:center;flex:none}
.fix-ic .i{width:20px;height:20px}
.fix-card h3{margin:0 0 4px;font-size:16px;font-weight:800}
.fix-card p{margin:0 0 10px;color:var(--ink-2);font-size:13.5px}
.fix-tx{min-width:0;flex:1}
.csteps.compact li{background:#fff;border:1px solid var(--line-2)}

/* order sheet */
.od-head{display:flex;align-items:center;gap:12px}
.od-head h3{margin:2px 0 0}
.od-logo{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.od-logo.lg{width:64px;height:64px;border-radius:14px}
.o-steps{list-style:none;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.o-steps li{position:relative;padding-top:18px;font-size:12px;color:var(--ink-4)}
.o-steps li i{position:absolute;top:0;left:0;right:0;height:5px;border-radius:5px;background:var(--line)}
.o-steps li.done{color:var(--ink)}
.o-steps li.done i{background:var(--ink)}
.o-steps b{display:block;font-weight:700}
.o-steps small{display:block;font-size:11px;color:var(--ink-4)}
.od-video video{width:100%;max-height:340px;border-radius:14px;background:#000;display:block}
.od-video{margin:0 0 12px}
.oi-list li{align-items:center}
.oi-l{display:flex;align-items:center;gap:10px;min-width:0}
.oi-l img,.oi-ph{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--sheet-2);flex:none;display:grid;place-items:center}
.oi-ph .i{width:16px;height:16px;color:var(--ink-4)}
.oi-l b{display:block;font-weight:600;line-height:1.3}
.oi-l small{color:var(--ink-3)}
.oi-r{text-align:right;white-space:nowrap}
.oi-r small{display:block;color:var(--ink-3)}
.ship-box{margin-top:16px;padding:16px;border-radius:16px;border:1.5px solid var(--ink);display:flex;flex-direction:column;gap:12px;background:#fff}
.ship-box.is-done{border-color:var(--line);background:var(--sheet-2)}
.ship-h{display:flex;align-items:center;gap:8px;font-size:15px}
.ship-h .i{width:18px;height:18px}
.ship-h .pill{margin-left:auto}
.ship-f{display:flex;gap:8px;flex-wrap:wrap}
.ship-lala,.ship-book{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--sheet-2)}
.ship-book{flex-direction:row;align-items:center;flex-wrap:wrap}
.ship-box [hidden]{display:none!important}
.cchips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{position:relative;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px 0 6px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:border-color .2s,box-shadow .2s}
.cchip input{position:absolute;opacity:0;pointer-events:none}
.cchip i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:800 9px/1 var(--f-ui);font-style:normal;background:color-mix(in srgb,var(--c) 16%,#fff);color:color-mix(in srgb,var(--c) 68%,#000)}
.cchip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cchip:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}

/* pager */
.pager{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2)}

/* packing (picker) */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.pk-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.pk-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ink-4)}
.pk-card:active{transform:scale(.985)}
.pk-thumbs{display:flex;flex:none}
.pk-thumbs img,.pk-thumbs .none{width:58px;height:58px;border-radius:12px;object-fit:cover;background:var(--sheet-2);box-shadow:0 0 0 2px #fff;display:grid;place-items:center}
.pk-thumbs .none .i{width:18px;height:18px;color:var(--ink-4)}
.pk-thumbs > * + *{margin-left:-30px}
.pk-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pk-top{display:flex;align-items:center;gap:7px}
.pk-top b{font-size:15px}
.pk-items{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-card .go{width:18px;height:18px;color:var(--ink-4);flex:none}
.pk-head{margin-bottom:14px}
.pk-head h2{font:800 34px/1.05 var(--f-display);margin:10px 0 4px;letter-spacing:-.02em}
.pk-head .note{margin-top:10px}
.pk-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pk-steps li{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;background:var(--sheet-2);font-size:12.5px;font-weight:600;color:var(--ink-3)}
.pk-steps i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);font-style:normal;font-weight:800;flex:none}
.pk-steps i .i{width:14px;height:14px}
.pk-steps li.on{background:var(--carbon);color:#fff}
.pk-steps li.on i{background:#fff;color:var(--ink);border-color:#fff}
.pk-steps li.done{color:var(--pos-ink);background:var(--pos-tint)}
.pk-steps li.done i{background:var(--pos);border-color:var(--pos);color:#fff}
.card.locked{opacity:.55}
.scan-row{display:flex;gap:8px}
.scan-row .f-search{margin:0}
.scan-row .f-search input{font-size:16px;height:48px}
.scan-cam{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3;max-height:320px}
.scan-cam[hidden]{display:none}
.scan-cam video{width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;left:12%;right:12%;top:35%;bottom:35%;border:2px solid #fff;border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.scan-cam .btn{position:absolute;right:10px;bottom:10px}
.scan-msg{margin:0;min-height:20px;font-size:13.5px;font-weight:600}
.scan-msg.ok{color:var(--pos-ink)} .scan-msg.bad{color:var(--neg-ink)} .scan-msg.warn{color:var(--warn-ink)}
.pk-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pk-line{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;border:1.5px solid var(--line);background:#fff;transition:border-color .25s,background .25s}
.pk-line.ok{border-color:var(--pos);background:var(--pos-tint)}
.pk-line.unmapped{border-style:dashed}
.pk-line.flash{animation:pkflash .5s var(--ease)}
@keyframes pkflash{from{transform:scale(1.02)}}
.pk-img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--sheet-2);flex:none;display:grid;place-items:center}
.pk-img.none .i{width:20px;height:20px;color:var(--ink-4)}
.pk-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pk-tx b{font-size:14.5px;line-height:1.25}
.pk-tx small{font-size:12px;color:var(--ink-3)}
.pk-count{font:800 22px/1 var(--f-display);color:var(--ink-3);white-space:nowrap}
.pk-count b{color:var(--ink)}
.pk-line.ok .pk-count,.pk-line.ok .pk-count b{color:var(--pos-ink)}
.btn.pulse{animation:btnpulse 1.6s var(--ease) infinite}
@keyframes btnpulse{0%{box-shadow:0 0 0 0 rgba(17,17,19,.45)}70%{box-shadow:0 0 0 12px rgba(17,17,19,0)}100%{box-shadow:0 0 0 0 rgba(17,17,19,0)}}
.pk-video{margin:0}
.pk-video video{width:100%;max-height:420px;border-radius:14px;background:#000;display:block}
.pk-video figcaption{margin-top:6px}
.up-box{display:flex;gap:10px;flex-wrap:wrap}
.up-box label[hidden],.up-prog[hidden]{display:none}
.up-prog{flex:1 1 100%;display:flex;flex-direction:column;gap:8px}
.up-bar{height:10px;border-radius:10px;background:var(--sheet-3);overflow:hidden}
.up-bar i{display:block;height:100%;width:0;background:var(--ink);border-radius:10px;transition:width .3s var(--ease)}
.up-prog.ok .up-bar i{background:var(--pos)}
.up-prog.err .up-bar i{background:var(--neg)}
.up-tx{font-size:13.5px;font-weight:600}
.sms-preview{margin:0;padding:14px 16px;border-radius:18px 18px 18px 6px;background:var(--sheet-2);font-size:14px;line-height:1.5;max-width:520px}
.sms-row{margin:0;display:flex;align-items:center;gap:8px}

/* inventory */
.inv-t td{vertical-align:middle}
.t .ck{width:36px}
.t .ck input{width:17px;height:17px;accent-color:var(--ink)}
.bc-mini{display:inline-flex;flex-direction:column;gap:2px;width:120px}
.bc-mini .bc{width:120px;height:26px;display:block}
.bc-mini small{font-size:10.5px;letter-spacing:.06em;color:var(--ink-3)}
.bulk-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--carbon);color:#fff;font-weight:600;font-size:13px;border-radius:16px 16px 0 0}
.bulk-bar[hidden]{display:none}
.bulk-bar .btn.dark{background:#fff;color:var(--ink);border-color:#fff}
.bc-big{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;margin:14px 0;border-radius:14px;border:1px solid var(--line)}
.bc-big .bc{width:100%;max-width:340px;height:70px}
.bc-big span{letter-spacing:.14em;font-weight:700}
.big-num{font:800 28px/1 var(--f-display)!important}
.move-box{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:var(--sheet-2);margin-bottom:10px}
.mv-seg{display:flex;flex-wrap:wrap}
.mv-seg label{position:relative;flex:1;display:flex;align-items:center;justify-content:center;height:34px;padding:0 10px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.mv-seg label.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.mv-seg input{position:absolute;opacity:0;pointer-events:none}
.move-box .btn{align-self:flex-start}
.edit-box{margin-bottom:12px}
.edit-box summary{cursor:pointer;font-weight:600;font-size:13px;padding:6px 0}
.edit-box form{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.edit-box .btn{align-self:flex-start}
.mv-h{margin:16px 0 8px;font-size:13px}
.mv-list{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:12px}
.mv-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--line-2);font-size:13px}
.mv-list li:first-child{border-top:0}
.mv-list li > small{text-align:right;white-space:nowrap}

/* SMS settings */
.sms-form{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.tpl{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.tpl:last-child{border-bottom:0;padding-bottom:0}
.tpl textarea{min-height:84px;height:auto;resize:vertical;padding:10px 12px;line-height:1.5;font:inherit}
.tpl-prev{margin:0;display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px 16px 16px 6px;background:var(--sheet-2);font-size:13.5px;max-width:560px}
.switch{display:flex;align-items:center;gap:12px;cursor:pointer;position:relative}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch > i{width:42px;height:24px;border-radius:24px;background:var(--line);position:relative;flex:none;transition:background .25s}
.switch > i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s var(--spring)}
.switch input:checked + i{background:var(--ink)}
.switch input:checked + i::after{transform:translateX(18px)}
.switch input:focus-visible + i{outline:2px solid var(--ink);outline-offset:2px}
.switch b{display:block;font-size:14px}
.switch small{display:block;color:var(--ink-3);font-size:12px}
.test-form{display:flex;gap:8px}
.test-form .inp{width:170px}
.msg-cell{max-width:380px;font-size:12.5px;color:var(--ink-2)}

/* small menu (popover) */
.menu-pop{position:fixed;inset:auto;margin:0;width:260px;padding:6px;border-radius:14px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s var(--ease),display .18s allow-discrete,overlay .18s allow-discrete}
.menu-pop:popover-open{opacity:1;transform:none}
@starting-style{.menu-pop:popover-open{opacity:0;transform:translateY(-4px)}}
.menu-pop form{margin:0}
.menu-pop button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border:0;border-radius:9px;background:none;font:600 13px var(--f-ui);text-align:left;cursor:pointer;color:var(--ink)}
.menu-pop button:hover{background:var(--sheet-2)}
.menu-pop .i{width:16px;height:16px}

@media (max-width:900px){
  .pk-grid{grid-template-columns:1fr}
  .pk-steps span{font-size:11.5px}
  .pk-steps li{padding:8px;gap:6px}
  .pk-head h2{font-size:28px}
  .o-steps{grid-template-columns:repeat(2,1fr);row-gap:10px}
  .fix-card{flex-direction:column;padding:16px}
  .btn.big{min-width:0;flex:1 1 100%}
  .test-form{flex:1 1 100%}
  .test-form .inp{flex:1;width:auto}
  .bc-mini,.bc-mini .bc{width:100px}
}
@media (prefers-reduced-motion:reduce){.sb-spin,.sb-track i,.btn.pulse{animation:none}}

/* image preview (tap a product picture) */
img.thumb,.oi-l img,img.pk-img,img[data-zoom]{cursor:zoom-in}
.img-lb{padding:0;border:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;display:none;place-items:center;overflow:hidden}
.img-lb[open]{display:grid}
.img-lb::backdrop{background:rgba(10,10,12,.82);backdrop-filter:blur(6px)}
.img-lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:92vw}
.img-lb img{max-width:92vw;max-height:78vh;border-radius:18px;background:#fff;object-fit:contain;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);animation:lbin .35s var(--ease)}
.img-lb figcaption{color:#fff;font-weight:600;font-size:14px;text-align:center;max-width:60ch}
.img-lb .lb-x{position:fixed;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer}
@keyframes lbin{from{opacity:0;transform:scale(.94)}}
@media (prefers-reduced-motion:reduce){.img-lb img{animation:none}}

/* packing photos */
.pk-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.pk-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--sheet-2);display:block}
.pk-photos.sm{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));margin:0 0 12px}

/* customers */
.g2-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.cust-hero{display:flex;align-items:center;gap:18px;padding:22px;margin-bottom:16px}
.cust-hero .av.lg{width:64px;height:64px;font-size:22px}
.ch-tx{flex:1;min-width:0}
.ch-tx h2{margin:0 0 4px;font:800 28px/1.1 var(--f-display);letter-spacing:-.02em}
.ch-tx p{margin:0}
.ch-tx a{color:inherit}
.cust-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px!important}
.rate-ring{--p:0;--rc:var(--ink-4);width:112px;height:112px;border-radius:50%;flex:none;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,#fff 79%,transparent 80% 100%),conic-gradient(var(--rc) calc(var(--p) * 1%),var(--sheet-3) 0)}
.rate-ring.pos{--rc:var(--pos)} .rate-ring.warn{--rc:var(--warn)} .rate-ring.neg{--rc:var(--neg)}
.rate-ring b{font:800 26px/1 var(--f-display)}
.rate-ring small{font-size:11.5px;color:var(--ink-3)}
.kpi .v .of{font-size:.55em;color:var(--ink-4);font-weight:700}
.rate-bar{display:inline-flex;align-items:center;gap:8px}
.rate-bar b{min-width:38px}
.rate-bar > i{width:90px;height:7px;border-radius:7px;background:var(--sheet-3);overflow:hidden;display:block}
.rate-bar > i > i{display:block;height:100%;border-radius:7px;background:var(--ink-4)}
.rate-bar.pos > i > i{background:var(--pos)} .rate-bar.warn > i > i{background:var(--warn)} .rate-bar.neg > i > i{background:var(--neg)}
.rate-bar.pos b{color:var(--pos-ink)} .rate-bar.warn b{color:var(--warn-ink)} .rate-bar.neg b{color:var(--neg-ink)}
.buy-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.buy-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.buy-list li span{flex:1;min-width:0}
.cust-link{color:inherit;text-decoration:none}
.cust-link:hover b{text-decoration:underline}
@media (max-width:900px){.g2-1{grid-template-columns:1fr}.cust-hero{flex-wrap:wrap;padding:18px}.rate-ring{width:96px;height:96px}.ch-tx h2{font-size:24px}}

#order-body:focus,#item-body:focus{outline:none}