/* Brunel Ops — Receiving control room (dark desktop surface).
   Graphite/charcoal with a cool teal undertone; restrained luminous accents.
   Instrument-grade for dense data work: tabular figures, 3-tier depth, calm motion,
   full keyboard focus. Motion personality (Brunel): operational, controlled, calm. */
@font-face{font-family:'Jakarta';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}
:root{
  /* surfaces — three tiers: recessed plane / floating card / carved well (navy) */
  --bg-root:#091324; --bg-shell:#0c1626; --bg-side:#07101f;
  --bg-card:#101f33; --bg-card-2:#152741; --bg-soft:rgba(22,46,82,.5);
  --bg-input:#0e1c30; --field-bg:#0b1830;
  --line:rgba(120,162,216,.10); --line-2:rgba(120,162,216,.17); --line-3:rgba(120,162,216,.28);
  /* text — AA-compliant tiers, never harsh pure-white */
  --text:#dbe6f3; --text-strong:#f2f8ff; --text-bright:#eaf4ff; --field:#ccd9e8;
  --muted:#8ba1bd; --hint:#7089a5; --ink-on-teal:#04182b;
  /* accents — blue family (--teal = bright accent, brightened per Aaron; --emerald = deep for gradients) */
  --teal:#25b8f5; --teal-deep:#1d6fb8; --emerald:#1d76c4; --cyan:#4fd0ff; --blue:#1d6fb8;
  --amber:#3d9bf0; --red:#ff7d7d; --purple:#8fb4ff;   /* no gold/purple — attention is blue now */
  --glow-teal:rgba(37,184,245,.34); --glow-cyan:rgba(79,208,255,.24);
  --shadow:0 26px 54px -30px rgba(0,0,0,.82);
  --shadow-sm:0 1px 0 rgba(255,255,255,.03),0 14px 30px -22px rgba(0,0,0,.85);
  --radius:18px; --radius-sm:13px; --radius-xs:10px;
  --ease:cubic-bezier(.22,.7,.25,1); --ease-out:cubic-bezier(.16,1,.3,1);
  /* one accent gradient (was copy-pasted as a raw literal 6+ times) + a real "done/healthy" green */
  --good:#35c9f0; --grad-accent:linear-gradient(135deg,var(--teal-deep),var(--teal));
  /* ALIAS tokens — the customer/loyalty templates were written against --ink / --panel* which existed
     nowhere, so they fell through to dark hex fallbacks and broke in light mode. Aliasing them to the
     real tokens fixes the whole Customers section in BOTH themes without touching every template. */
  --ink:var(--text); --ink-dim:var(--muted); --ink-bright:var(--text-strong);
  --panel:var(--bg-card); --panel-2:var(--bg-card-2);
}
*{box-sizing:border-box}
html,body{margin:0}
body.recv{background:var(--bg-root);color:var(--text);
  font-family:'Jakarta',-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:.001em}
body.recv a{text-decoration:none}
/* only UNCLASSED content links get link-blue; a classed anchor is a button/pill and MUST keep its own
   colour, else `body.recv a` (specificity 0,1,2) overrides it and white-on-fill labels vanish. */
body.recv a:not([class]){color:var(--teal)}
::selection{background:rgba(0,168,232,.26);color:var(--text-strong)}

/* one primary button — the accent gradient with AA-safe text on it, both themes. Replaces the raw
   linear-gradient(135deg,#1d6fb8,#25b8f5);color:#fff literals scattered across inbox/loyalty pages. */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--grad-accent);color:var(--ink-on-teal);border:0;border-radius:11px;
  padding:.6rem 1.15rem;font-weight:700;font-size:13.5px;line-height:1;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 18px -8px var(--glow-teal);transition:filter .15s var(--ease),transform .12s var(--ease)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* keyboard focus — a single calm teal ring, layout-safe inside contained cards */
:where(a,button,.selpill,.more-link,summary,[tabindex]):focus-visible{
  outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--radius-xs)}
.selpill:focus-visible{outline-offset:3px}
:focus:not(:focus-visible){outline:none}

/* icons — MUST be constrained or inline SVG balloons to its default box */
.ic{width:18px;height:18px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.btn .ic{width:16px;height:16px;vertical-align:0}
.recv-nav a .ic{width:18px;height:18px;opacity:.6}
.recv-nav a.active .ic{opacity:1}

/* ambient glow — slow, controlled, behind everything */
#amb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.55}

/* shell */
.recv-app{position:relative;z-index:1;display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.recv-side{position:sticky;top:0;align-self:start;height:100vh;display:flex;flex-direction:column;gap:6px;
  background:linear-gradient(180deg,var(--bg-side),#070f10);border-right:1px solid var(--line);padding:22px 16px 16px}
.recv-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 18px;border-bottom:1px solid var(--line);margin-bottom:8px}
.recv-brand img{height:32px;width:auto;filter:drop-shadow(0 2px 12px var(--glow-teal))}
.recv-brand .brand-light{display:none}
.recv-brand .ops{font-size:11px;letter-spacing:.3em;color:var(--text);font-weight:600;margin-top:5px}
.recv-brand .tag{font-size:9.5px;letter-spacing:.2em;color:var(--hint);text-transform:uppercase;margin-top:3px}
.recv-nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.recv-nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--radius-xs);color:#a3bbb2;
  font-size:13px;font-weight:500;transition:.2s var(--ease);position:relative}
.recv-nav a:hover{background:rgba(120,162,216,.06);color:var(--text)}
.recv-nav a.active{background:linear-gradient(100deg,rgba(0,168,232,.15),rgba(56,198,255,.04));color:var(--text-bright);
  box-shadow:inset 0 0 0 1px var(--line-2),0 8px 22px -12px var(--glow-teal)}
.recv-nav a.active::before{content:"";position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;
  background:var(--teal);box-shadow:0 0 14px var(--teal)}
.recv-side .spacer{flex:1}
.recv-console{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:var(--radius-sm);
  background:transparent;border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:500;transition:.2s var(--ease)}
.recv-console:hover{background:rgba(0,168,232,.06)}
.recv-console .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
.recv-console .chev{margin-left:auto;color:var(--muted)}

/* theme toggle (sits just above Ops Console) — segmented sun/moon with a sliding thumb */
.theme-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-input);border:1px solid var(--line);
  border-radius:999px;padding:3px;margin:0 0 8px}
.theme-toggle .tt-thumb{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:999px;
  background:rgba(0,168,232,.16);box-shadow:0 0 16px -5px var(--glow-teal);transition:transform .3s var(--ease-out);transform:translateX(100%)}
.theme-toggle .tt-opt{position:relative;z-index:1;background:transparent;border:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:6px;padding:7px 0;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.04em;transition:color .2s var(--ease)}
.theme-toggle .tt-opt[aria-pressed=true]{color:var(--teal)}
.theme-toggle .tt-opt svg{width:15px;height:15px;flex:0 0 auto}

/* main */
.recv-main{position:relative;min-width:0;padding:26px clamp(20px,3vw,42px) 96px;max-width:1500px}
.recv-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.recv-top .grow{flex:1;min-width:240px}
.recv-h1{font-size:27px;font-weight:600;letter-spacing:-.015em;margin:0;color:var(--text-strong)}
.recv-h1 .acc{color:var(--teal)}
.recv-sub{color:var(--muted);font-size:13.5px;margin:6px 0 0;line-height:1.5}
.recv-top-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.recv-live{display:flex;align-items:center;gap:7px;color:var(--hint);font-size:12px}
.recv-live .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 10px var(--emerald);animation:pulse 4.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.9}50%{opacity:.55}}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;margin-bottom:14px;transition:.18s var(--ease)}
.back-link:hover{color:var(--teal)}

/* cards / panels — floating surface, hairline sheen, carved interior */
.card,.rc-card,.panel{background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative}
.rc-card::before,.panel::before,.recv-import::before,.b-row::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  border-radius:var(--radius) var(--radius) 0 0;background:linear-gradient(90deg,transparent,rgba(120,162,216,.18),transparent);pointer-events:none}
.rc-card{padding:17px 18px;margin:15px 0;transition:border-color .25s var(--ease);
  content-visibility:auto;contain-intrinsic-size:auto 150px;contain:layout paint style}
.rc-card:hover{border-color:var(--line-2)}
.rc-card.selected{border-color:rgba(0,168,232,.55);box-shadow:0 0 0 1px var(--teal),0 0 38px -6px var(--glow-teal),0 22px 44px -26px rgba(0,0,0,.9);
  background:linear-gradient(180deg,rgba(0,168,232,.07),var(--bg-card))}
.rc-card.confirmed-line{border-left:2px solid rgba(56,198,255,.45)}
.rc-card.removing{opacity:0;transform:scale(.97) translateY(-6px);transition:.22s var(--ease)}
.rc-card.just-saved{animation:affirm .85s var(--ease-out)}
@keyframes affirm{0%{box-shadow:0 0 0 1px var(--teal),0 0 0 6px rgba(0,168,232,.22)}100%{box-shadow:0 0 0 1px transparent,0 0 0 6px transparent}}
.panel{padding:16px}
.panel h3{margin:0 0 11px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal)}

.rc-head{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.rc-head .grow{flex:1;min-width:170px}
.rc-title{font-weight:600;font-size:15px;color:var(--text-strong);letter-spacing:-.005em;margin:0}
.rc-sub{font-size:12px;color:var(--hint);margin-top:2px}
code{font-family:"SF Mono",Menlo,monospace;font-size:11.5px;color:var(--cyan);background:rgba(56,198,255,.08);padding:1px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.num{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}

/* selection pill — the green glow you liked (kept), bigger hit-target */
.selpill{position:relative;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-3);background:transparent;color:transparent;
  font-size:.5rem;cursor:pointer;flex:0 0 auto;transition:.2s var(--ease);display:inline-flex;align-items:center;justify-content:center}
.selpill::after{content:"";position:absolute;inset:-5px}
.selpill:hover{border-color:var(--teal);transform:scale(1.12)}
.selpill[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--ink-on-teal);box-shadow:0 0 16px var(--glow-teal)}

/* badges — calm states are quiet dots; only attention states stay loud */
.badges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:500;
  white-space:nowrap;letter-spacing:.02em;border:1px solid transparent;line-height:1.45}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.9}
.b-ok{color:var(--emerald)}.b-todo{color:var(--cyan)}.b-info{color:#9dbcff}.b-new{color:var(--purple)}.b-muted{color:var(--muted)}
.b-ok,.b-todo,.b-info,.b-new,.b-muted{background:rgba(255,255,255,.045);border-color:transparent}
.b-warn{background:rgba(61,155,240,.14);color:var(--amber);border-color:rgba(61,155,240,.26);font-weight:600}
.b-bad{background:rgba(255,125,125,.15);color:#ff9c9c;border-color:rgba(255,125,125,.28);font-weight:600}
.b-mem{background:rgba(0,168,232,.12);color:var(--teal);border-color:rgba(0,168,232,.3)}

/* match panel */
.match-area{background:var(--bg-soft);border:1px solid var(--line);border-left:2px solid var(--teal);
  border-radius:var(--radius-sm);padding:12px 13px;margin:10px 0}
.match-area.is-none{border-left-color:var(--amber)}
.match-area.is-mem{border-left-color:var(--teal);box-shadow:inset 0 0 36px -24px var(--glow-teal)}
.match-area.is-confirmed{border-left-color:var(--emerald)}
.match-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.match-top .grow{flex:1;min-width:190px}
.match-top strong{color:var(--text-strong)}
.match-top .tick{color:var(--emerald)}
.cand{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:7px 8px;margin:1px -4px 0;border-radius:8px;transition:background .15s}
.cand+.cand{border-top:1px solid var(--line)}
.cand:hover{background:rgba(120,162,216,.05)}
.cand .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cand-fig{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.more-link{font-size:12px;color:var(--muted);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:4px 0;transition:.18s var(--ease)}
.more-link:hover{color:var(--teal)}.more-link .chev{transition:transform .25s var(--ease)}.more-link[aria-expanded=true] .chev{transform:rotate(180deg)}
/* collapsible alternates — animates both ways, GSAP-independent */
.alts{overflow:hidden;transition:max-height .3s var(--ease-out),opacity .22s var(--ease-out);
  max-height:760px;opacity:1;margin-top:9px;padding-top:6px;border-top:1px solid var(--line)}
.alts.hide{display:block;max-height:0;opacity:0;margin-top:0;padding-top:0;border-top-color:transparent}
.srch{display:flex;gap:7px;align-items:center;margin-top:9px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg-input);border:1px solid var(--line-2);border-radius:var(--radius-xs);transition:.16s var(--ease)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.srch input{flex:1;padding:8px 11px}
select option{background:var(--bg-input)}

/* received-first field grid — carved wells, instrument readouts, tabular figures */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;align-items:end;margin-top:13px}
.fields label{font-size:9.5px;color:#6f8780;display:grid;gap:5px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.fields input,.fields select{width:100%;padding:10px 11px;color:var(--field);font-size:14px;font-weight:600;background:var(--field-bg);
  border:1px solid var(--line-2);letter-spacing:.01em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.12)}
.fields input:focus-visible,.fields select:focus-visible{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.fields input::placeholder{color:#74908a}
.fields .inferflag{color:var(--cyan);text-transform:none;letter-spacing:0;cursor:help;font-weight:600;font-size:9.5px;display:inline-flex;align-items:center;gap:3px}
.rc-meta{font-size:12.5px;margin-top:11px;color:var(--muted)}.rc-meta>div{margin-top:5px}
.rc-meta strong{color:var(--text);font-variant-numeric:tabular-nums}.rc-meta .amber{color:var(--amber)}

/* buttons */
form{display:inline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font:inherit;font-weight:600;font-size:13px;
  padding:9px 15px;border-radius:var(--radius-xs);border:1px solid transparent;color:var(--text);background:transparent;
  transition:transform .1s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s,filter .22s}
.btn-approve{background:linear-gradient(135deg,var(--teal),var(--emerald));color:var(--ink-on-teal);box-shadow:0 10px 24px -13px var(--glow-teal)}
.btn-approve:not([disabled]):hover{box-shadow:0 14px 34px -12px var(--glow-teal);filter:brightness(1.05)}
.btn-ghost{background:rgba(120,162,216,.05);border-color:var(--line-2);color:var(--muted)}
.btn-ghost:not([disabled]):hover{border-color:var(--teal);color:var(--text);background:rgba(0,168,232,.08)}
.btn:not([disabled]):active{transform:scale(.96)}
.btn[disabled]{opacity:.65;cursor:default}
.btn.loading{pointer-events:none;gap:8px;justify-content:center}
.btn.loading::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .6s linear infinite;display:inline-block;flex:0 0 auto;margin-right:2px}
@keyframes spin{to{transform:rotate(360deg)}}
.rc-head form[action*='delete'] .btn-ghost:hover{border-color:rgba(255,125,125,.5);color:#ff9c9c;background:rgba(255,125,125,.07)}

/* toolbar + import-at-top */
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:6px 0 18px}
.recv-import{padding:18px 19px;margin:0 0 20px;background:linear-gradient(155deg,var(--bg-card-2),var(--bg-card));
  border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.recv-import::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--glow-teal),transparent 70%);pointer-events:none}
.recv-import h3{margin:0 0 4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);display:flex;align-items:center;gap:7px}
.recv-import .imp-grid{display:grid;gap:12px;grid-template-columns:1fr;margin-top:11px}
@media(min-width:760px){.recv-import .imp-grid{grid-template-columns:1.45fr .85fr}}
textarea.imp{width:100%;min-height:100px;padding:12px;resize:vertical;color:var(--field)}
.imp-side{display:flex;flex-direction:column;gap:9px}

/* two-column workbench */
.cols{display:grid;gap:22px;align-items:start}
@media(min-width:1080px){.cols{grid-template-columns:minmax(0,1fr) 332px}}
.sticky{position:sticky;top:14px}
.summ{display:grid;grid-template-columns:1fr auto;gap:9px 12px;font-size:13px;color:var(--muted)}
.summ b{color:var(--text-strong);text-align:right;font-variant-numeric:tabular-nums;font-size:15px}
h2.sec{font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:6px 0 2px;font-weight:600}
.empty{color:var(--hint);font-size:13.5px;padding:18px 2px}
.rc-list{list-style:none;margin:0;padding:0}

/* ready/saved section */
details.box{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 16px;margin:18px 0;background:var(--bg-card)}
details.box>summary{cursor:pointer;font-weight:600;color:var(--text-bright);list-style:none;display:flex;align-items:center;gap:8px}
details.box>summary::-webkit-details-marker{display:none}
.saved-row{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.saved-row:last-child{border-bottom:0}.saved-row .grow{flex:1;color:var(--text)}

/* preview — recessed instrument, single accent edge (not a glowing hero) */
.preview{position:relative;background:var(--field-bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.preview::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:linear-gradient(90deg,var(--teal),transparent 60%)}
.preview .pv-title{font-weight:600;color:var(--text-strong);font-size:14px;line-height:1.3}
.preview .pv-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-top:7px;color:var(--muted)}
.preview .pv-row span:last-child{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.preview .pv-tag{display:inline-block;font-size:10.5px;padding:3px 0 0;color:var(--muted);margin-top:9px;font-weight:600}

/* segmented (list) */
.seg{display:inline-flex;gap:2px;background:var(--bg-card);border:1px solid var(--line);border-radius:999px;padding:3px;margin:6px 0 16px}
.seg a{padding:6px 14px;border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:600;transition:.18s var(--ease)}
.seg a:hover{color:var(--text)}
.seg a.active{background:linear-gradient(120deg,rgba(0,168,232,.17),rgba(56,198,255,.07));color:var(--text-bright)}
.b-row{display:flex;gap:12px;align-items:center;padding:14px 16px;margin:9px 0;background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));
  border:1px solid var(--line);border-radius:var(--radius-sm);transition:.2s var(--ease);position:relative;overflow:hidden}
.b-row:hover{border-color:var(--line-2);transform:translateX(2px)}
.b-row .grow{flex:1;min-width:140px;color:var(--text)}
.b-row strong{color:var(--text-strong)}

/* notes + flashes */
.uni-note{display:flex;gap:9px;align-items:flex-start;background:rgba(0,168,232,.05);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:12px 15px;font-size:13px;margin:0 0 18px;color:var(--muted)}
.uni-note .ic{color:var(--teal);flex:0 0 auto}
.flash{padding:12px 15px;border-radius:var(--radius-sm);margin:0 0 12px;font-size:13.5px;border:1px solid}
.flash-success{background:rgba(56,198,255,.09);border-color:rgba(56,198,255,.3);color:var(--emerald)}
.flash-error{background:rgba(255,125,125,.09);border-color:rgba(255,125,125,.3);color:#ffadad}

/* sticky bulk bar */
.bulkbar{position:fixed;left:calc(50% + 118px);bottom:20px;transform:translateX(-50%) translateY(150%);
  background:linear-gradient(135deg,#0c2620,#091713);border:1px solid var(--line-2);color:#eaf4ff;border-radius:var(--radius-sm);
  padding:9px 11px 9px 18px;display:flex;gap:8px;align-items:center;box-shadow:0 26px 56px -16px rgba(0,0,0,.9),0 0 0 1px var(--line-2);
  z-index:50;transition:transform .32s var(--ease-out);font-size:13px}
.bulkbar.show{transform:translateX(-50%) translateY(0)}
.bulkbar #bulk-count{font-weight:700;color:var(--teal);margin-right:4px;font-variant-numeric:tabular-nums}
.bulkbar .btn{padding:8px 13px;font-size:12.5px}
@media(max-width:1080px){.bulkbar{left:50%}}

/* toast */
.toast{position:fixed;right:20px;bottom:20px;background:linear-gradient(135deg,#0c2620,#091713);border:1px solid var(--line-2);
  color:#eaf4ff;padding:12px 16px;border-radius:var(--radius-sm);font-size:13.5px;z-index:60;opacity:0;transform:translateY(10px);
  transition:.28s var(--ease-out);box-shadow:var(--shadow);max-width:340px}
.toast.show{opacity:1;transform:none}
.toast.err{border-color:rgba(255,125,125,.45);color:#ffb3b3}
.toast.ok{border-color:var(--line-3)}

.hide{display:none}

/* ── mobile top bar + off-canvas drawer (hidden on desktop) ───────────────── */
.recv-topbar{display:none}
/* global refresh — a fixed control top-right on desktop (the topbar carries it on mobile). Reloads
   the current page; a boon in the installed PWA where a browser refresh is not to hand. */
.recv-refresh-fixed{position:fixed;top:16px;right:18px;z-index:41;width:40px;height:40px;
  display:grid;place-items:center;border-radius:12px;cursor:pointer;
  background:var(--bg-card);border:1px solid var(--line-2);color:var(--muted);
  box-shadow:var(--shadow-sm);transition:color .15s var(--ease),border-color .15s var(--ease),transform .3s var(--ease)}
.recv-refresh-fixed:hover{color:var(--teal);border-color:var(--line-3)}
.recv-refresh-fixed:active{transform:scale(.94)}
.recv-refresh-fixed svg{width:19px;height:19px}
.js-refresh.spinning svg{animation:recv-spin .7s var(--ease)}
@keyframes recv-spin{to{transform:rotate(360deg)}}
@media(max-width:860px){ .recv-refresh-fixed{display:none} }   /* mobile uses the topbar button */
.recv-scrim{position:fixed;inset:0;z-index:38;background:rgba(2,10,8,.55);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s var(--ease)}
body.nav-open .recv-scrim{opacity:1;visibility:visible}
@media(max-width:860px){
  .recv-app{grid-template-columns:1fr}
  /* clean header: [hamburger]   [ Brunel centred ]   [theme] — no page title */
  .recv-topbar{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;
    position:sticky;top:0;z-index:40;height:calc(58px + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb,var(--bg-shell) 92%,transparent);backdrop-filter:saturate(140%) blur(16px);
    border-bottom:1px solid var(--line)}
  .recv-topactions{display:flex;align-items:center;gap:8px;justify-self:end}
  /* hamburger + refresh + theme: identical square icon buttons */
  .recv-burger,.recv-toptheme,.recv-toprefresh{width:40px;height:40px;display:grid;place-items:center;background:var(--bg-soft);
    border:1px solid var(--line-2);border-radius:11px;color:var(--text);cursor:pointer;padding:0}
  .recv-burger:active,.recv-toptheme:active,.recv-toprefresh:active{transform:scale(.94)}
  .recv-burger svg,.recv-toptheme svg,.recv-toprefresh svg{width:19px;height:19px}
  .recv-burger .ic-close{display:none}
  body.nav-open .recv-burger .ic-open{display:none}
  body.nav-open .recv-burger .ic-close{display:block}
  .recv-toptheme{justify-self:end}
  .recv-toptheme .tt-moon{display:none}body.recv.light .recv-toptheme .tt-sun{display:none}body.recv.light .recv-toptheme .tt-moon{display:block}
  /* logo centred in the middle column */
  .recv-topbrand{display:flex;align-items:center;justify-content:center}
  .recv-topbrand img{height:30px;width:auto;max-width:100%}
  /* sidebar becomes an off-canvas drawer, sitting BELOW the top bar */
  .recv-side{position:fixed;top:calc(58px + env(safe-area-inset-top,0px));left:0;z-index:39;width:266px;max-width:84vw;
    height:calc(100dvh - 58px - env(safe-area-inset-top,0px));
    transform:translateX(-104%);transition:transform .28s var(--ease-out);box-shadow:var(--shadow);overflow-y:auto;
    background:var(--bg-shell);padding-top:14px;padding-bottom:env(safe-area-inset-bottom,0px)}
  body.nav-open .recv-side{transform:translateX(0)}
  .recv-side .recv-brand{display:none}           /* logo already in the top bar */
  .recv-nav a .lbl{display:inline}
  .recv-main{padding:18px 16px 96px}
}
body.recv.light .recv-topbar{background:color-mix(in srgb,#ffffff 92%,transparent);border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  #amb{display:none}
  .recv-live .dot,.recv-console .dot{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ============ product photo / image assets ============ */
.photo-layout{display:grid;gap:22px;align-items:start}
@media(min-width:1080px){.photo-layout{grid-template-columns:minmax(0,1fr) 344px}}
.photo-slot{position:relative;border:1px solid var(--line-2);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));box-shadow:var(--shadow-sm);padding:16px}
.photo-slot.empty{border-style:dashed;border-color:var(--line-3);text-align:center;padding:38px 18px}
.photo-slot.empty .ph-ic{color:var(--teal);opacity:.8}
.photo-slot.empty .ph-hint{color:var(--muted);font-size:13.5px;margin:10px 0 18px}
.photo-slot.dragover{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 40px -8px var(--glow-teal)}
.photo-hero{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.photo-hero .shot{width:208px;height:208px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);flex:0 0 auto}
.photo-hero .meta{flex:1;min-width:180px;display:flex;flex-direction:column;gap:9px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:13px}
.photo-thumb{position:relative;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--line);background:var(--field-bg);aspect-ratio:1}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.photo-thumb:hover img{transform:scale(1.04)}
.photo-thumb .th-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:5px;justify-content:flex-end;padding:6px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),transparent);opacity:0;transition:opacity .2s var(--ease)}
.photo-thumb:hover .th-actions,.photo-thumb:focus-within .th-actions{opacity:1}
.photo-thumb .th-actions .btn{padding:5px 9px;font-size:11px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.18);color:#fff}
.photo-thumb .th-actions .btn:hover{background:rgba(0,0,0,.7)}
/* camera/upload pick buttons (hidden native input over a styled button) */
.pick{display:inline-flex;position:relative;overflow:hidden;vertical-align:top}
.pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:200px}
.pick-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.sf-frame{width:100%;aspect-ratio:1;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden;position:relative}
.sf-frame img{width:100%;height:100%;object-fit:contain;display:block}
.sf-frame.empty{display:flex;align-items:center;justify-content:center;background:var(--field-bg);color:var(--hint);font-size:12.5px;text-align:center;padding:14px}
.no-shop{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--amber);
  background:rgba(61,155,240,.12);border:1px solid rgba(61,155,240,.26);border-radius:999px;padding:4px 11px}
.sf-meta{display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:12.5px;color:var(--muted);margin-top:12px}
.sf-meta b{color:var(--text);text-align:right;font-variant-numeric:tabular-nums}

/* ============ product image studio ============ */
.studio{border:1px solid var(--line-2);border-radius:var(--radius);background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));box-shadow:var(--shadow-sm);padding:16px}
.studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.studio-cell{margin:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.studio-cell img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:#fff}
.studio-cell.checker img{background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.studio-cell figcaption{font-size:11px;color:var(--muted);text-align:center;padding:5px 4px;background:var(--bg-card);border-top:1px solid var(--line)}
.studio-retake{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--red,#e66);background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.30);border-radius:var(--radius-sm);padding:9px 12px}
.studio-warn{margin-top:12px;font-size:12.5px;color:var(--amber);background:rgba(61,155,240,.10);border:1px solid rgba(61,155,240,.26);border-radius:var(--radius-sm);padding:9px 12px}
.studio-meta{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;color:var(--muted);margin:13px 0}
.studio-meta b{color:var(--text);font-weight:600}
.studio .pick-row{margin-top:6px}

/* ============ product image studio v2 (AI-first) ============ */
.aistudio{border:1px solid var(--line-2);border-radius:var(--radius);background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));box-shadow:var(--shadow-sm);padding:16px}
.ai-main{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
@media(max-width:560px){.ai-main{grid-template-columns:1fr}}
.ai-original{margin:0}
.ai-original img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;cursor:zoom-in}
.ai-original figcaption,.ai-hero figcaption{font-size:11px;color:var(--muted);text-align:center;padding:5px 2px}
.ai-hero{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2);background:#fff;position:relative}
.ai-hero.approved{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.ai-hero img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:#fff;cursor:zoom-in}
.ai-pending{aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:14px;background:var(--field-bg);text-align:center;padding:18px}
.ai-status-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0 8px}
.ai-badge{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.ai-badge.ai-ready{color:var(--teal);border-color:var(--teal);background:var(--field-bg)}
.ai-badge.ai-generating{color:var(--amber);border-color:rgba(61,155,240,.4)}
.ai-badge.ai-failed,.ai-badge.ai-blocked{color:var(--red,#e66);border-color:rgba(255,90,90,.4)}
.wm-panel{margin:6px 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--field-bg)}
.wm-shots{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:9px}
.wm-shot{margin:0;width:150px}
.wm-shot img{width:150px;height:auto;border-radius:8px;border:1px solid var(--line-2);display:block;cursor:zoom-in}
.wm-shot figcaption{font-size:11px;color:var(--muted);margin-top:3px}
.wm-controls{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.wm-lab{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.chip{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-card);color:var(--text);cursor:pointer}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.wm-custom{display:flex;gap:8px;margin-top:9px}
.wm-custom [data-wm-custom]{flex:1;min-width:240px;background:var(--bg-card);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 10px;font-size:12.5px}
.wm-overlaymode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:9px}
.wm-overlaymode .seg{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text)}
.wm-overlaymode .seg.disabled{opacity:.5}
.wm-logo-up{margin-left:auto}
.wm-opacity{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wm-opacity input[type=range]{flex:1;min-width:160px;max-width:320px;accent-color:var(--teal)}
.wm-opacity output{min-width:34px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--teal)}
.chip-reset{border-color:rgba(61,155,240,.4);color:var(--amber)}
.wm-hint{font-size:11.5px;color:var(--muted);margin:8px 0 0}
.ai-hero{position:relative}
.wm-drag{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border:2px solid var(--teal);border-radius:50%;background:rgba(29,111,184,.30);cursor:grab;touch-action:none;box-shadow:0 0 0 2px rgba(0,0,0,.4),0 0 8px rgba(29,111,184,.5);z-index:5}
.wm-drag:active{cursor:grabbing}
.ai-hero.placing{cursor:crosshair}
.ai-hero.placing img{cursor:crosshair}
.chip.chip-on{background:var(--teal);color:var(--ink-on-teal);border-color:var(--teal);font-weight:700}
.wm-logo-chip{height:26px;width:auto;max-width:90px;border:1px solid var(--line-2);border-radius:6px;background:repeating-conic-gradient(#2a2f36 0% 25%,#222 0% 50%) 50%/12px 12px;object-fit:contain}
.img-context{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:10px;background:var(--field-bg);font-size:13px}
.img-context b{color:var(--text);font-size:14px}
.img-context .ic-lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.img-context .ic-line{color:var(--teal);font-weight:600}
.img-context .ic-file{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:12px}
.img-context .ic-warn,.wm-overlaymode .ic-warn{flex-basis:100%;color:var(--amber);font-size:12px}
.wm-overlaymode .ic-warn{flex-basis:auto}
.ai-altfile{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.ai-altfile .af,.ai-altfile label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.ai-altfile input{background:var(--bg-card);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 10px;font-size:12.5px;min-width:230px}
.ai-altfile input[readonly]{opacity:.75}
.ai-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0 4px}
.ai-preset{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.ai-preset select,[data-ai-custom]{background:var(--bg-card);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:6px 10px;font-size:12.5px}
[data-ai-custom]{min-width:300px;flex:1}
.ai-advanced{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ai-advanced summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:600}
.ai-advanced summary:hover{color:var(--text)}
.js-zoom{cursor:zoom-in}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(4,8,12,.88);padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:90vh;object-fit:contain;border-radius:8px;background:#fff}
.lb-x{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:24px;cursor:pointer}
.lb-x:hover{background:rgba(255,255,255,.25)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:64px;background:rgba(255,255,255,.10);color:#fff;border:0;font-size:34px;cursor:pointer;border-radius:10px}
.lb-nav:hover{background:rgba(255,255,255,.22)}
.lb-prev{left:18px}.lb-next{right:18px}

/* ============ camera modal (one icon per line → in-page capture) ============ */
.cam-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:18px}
.cam-modal.open{display:flex}
.cam-backdrop{position:absolute;inset:0;background:rgba(4,8,12,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s var(--ease)}
.cam-modal.open .cam-backdrop{opacity:1}
.cam-card{position:relative;width:min(880px,100%);max-height:92vh;overflow:auto;background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));
  border:1px solid var(--line-2);border-radius:calc(var(--radius) + 4px);box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding:22px 22px 18px;transform:translateY(14px) scale(.985);opacity:0;transition:transform .28s var(--ease),opacity .28s var(--ease)}
.cam-modal.open .cam-card{transform:none;opacity:1}
.cam-x{position:absolute;top:12px;right:12px;display:inline-flex;padding:8px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.cam-x:hover{background:var(--field-bg);color:var(--text);border-color:var(--line)}
.cam-head{padding-right:34px;margin-bottom:16px}
.cam-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--teal)}
.cam-title{margin:5px 0 4px;font-size:19px;font-weight:680;color:var(--text)}
.cam-sub{margin:0;font-size:12px}
.cam-choices{display:grid;gap:14px}
@media(min-width:640px){.cam-choices{grid-template-columns:1fr 1fr}}
.cam-choice{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px;border-radius:var(--radius);cursor:pointer;
  background:var(--field-bg);border:1px solid var(--line-2);transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.cam-choice:hover,.cam-choice:focus-visible{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 14px 40px -18px var(--glow-teal);transform:translateY(-2px);outline:none}
.cam-choice-ic{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:var(--bg-card);border:1px solid var(--line);color:var(--teal)}
.cam-choice-name{font-size:16px;font-weight:680;color:var(--text)}
.cam-choice-purpose{font-size:13px;color:var(--muted);line-height:1.5}
.cam-choice-instr{font-size:12px;color:var(--hint);line-height:1.55;background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;white-space:pre-line}
.cam-choice-go{margin-top:2px;font-size:12.5px;font-weight:650;color:var(--teal)}
.cam-current{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}
.cam-back{background:transparent;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 0;margin-bottom:6px}
.cam-back:hover{color:var(--text)}
.cam-k-title{margin:2px 0 6px;font-size:16px;font-weight:680;color:var(--text)}
.cam-k-instr{margin:0 0 14px;font-size:12.5px;color:var(--hint);line-height:1.55;white-space:pre-line}
.cam-actions{display:flex;gap:10px;flex-wrap:wrap}
.cam-drop{margin-top:12px;border:1.5px dashed var(--line-3);border-radius:var(--radius);padding:15px;text-align:center;color:var(--hint);font-size:12.5px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.cam-drop.dragover{border-color:var(--teal);background:var(--field-bg);color:var(--teal)}
.cam-previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:14px}
.cam-pv{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;aspect-ratio:1}
.cam-pv img{width:100%;height:100%;object-fit:cover;display:block}
.cam-pv .pv-actions{position:absolute;inset:auto 0 0 0;display:flex;gap:4px;justify-content:flex-end;padding:5px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);opacity:0;transition:opacity .2s var(--ease)}
.cam-pv:hover .pv-actions,.cam-pv:focus-within .pv-actions{opacity:1}
.cam-pv .pv-actions button{padding:4px 7px;font-size:10.5px;border-radius:7px;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.2);cursor:pointer}
.cam-pv .pv-actions button:hover{background:rgba(0,0,0,.78)}
.cam-hero{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.cam-hero img{width:148px;height:148px;border-radius:12px;border:1px solid var(--line);background:#fff;object-fit:contain;flex:0 0 auto}
.cam-hero .hero-meta{flex:1;min-width:160px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted)}
.cam-hero .hero-meta .hm-badges{display:flex;gap:6px;flex-wrap:wrap}
.cam-full{display:inline-block;margin-top:16px;font-size:12.5px;color:var(--teal);text-decoration:none}
.cam-full:hover{text-decoration:underline}
.cam-card.busy{opacity:.7;pointer-events:none}
.cam-empty{margin-top:14px;font-size:12.5px;color:var(--hint);text-align:center;padding:14px;border:1px dashed var(--line);border-radius:var(--radius)}

/* ============ apply-to-Shopify modal ============ */
.apply-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:var(--amber);
  background:rgba(61,155,240,.12);border:1px solid rgba(61,155,240,.26);border-radius:999px;padding:4px 11px}
.apply-body{margin-top:6px}
.apply-kind{font-size:14.5px;font-weight:680;color:var(--text);margin-bottom:10px}
.apply-diff{width:100%;border-collapse:collapse;margin:4px 0 12px;font-size:13px}
.apply-diff td{padding:7px 9px;border-bottom:1px solid var(--line);color:var(--muted)}
.apply-diff td:first-child{color:var(--text);font-weight:600;width:34%}
.apply-diff strong{color:var(--teal)}
.apply-pay{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.apply-pay b{color:var(--text)}
.apply-warn{margin:10px 0;font-size:12.5px;color:var(--amber);line-height:1.5}
.apply-defer{margin:12px 0 2px;font-size:11.5px;color:var(--hint);line-height:1.5}
.apply-defer span{color:var(--muted);font-weight:650}
.apply-block{font-size:13px;color:var(--text)}
.apply-block ul{margin:8px 0 0;padding-left:18px;color:var(--amber)}
.apply-block li{margin:3px 0}
.apply-confirm{margin-top:16px;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--line);padding-top:14px}
.apply-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--text);cursor:pointer}
.apply-check input{margin-top:2px;width:16px;height:16px;accent-color:var(--teal)}
.apply-result{margin-top:14px;border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;line-height:1.55}
.apply-result.good{background:rgba(0,168,232,.10);border:1px solid rgba(0,168,232,.30);color:var(--text)}
.apply-result.bad{background:rgba(255,120,120,.10);border:1px solid rgba(255,120,120,.30);color:var(--text)}
.en-sect{margin:14px 0}
.en-sect h4{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--teal)}
.en-sect .apply-diff td:first-child{width:42%;color:var(--muted);font-weight:500}
.en-ctrls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:11px 12px;margin-bottom:6px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--field-bg);font-size:12.5px}
.en-ctrls input[type=text],.en-ctrls input:not([type]){background:var(--bg-card);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:5px 9px;margin-left:6px;font-size:12.5px}
.en-ctrls .en-tax label{margin-right:9px;color:var(--muted)}
.en-ctrls .en-tax input{accent-color:var(--teal);margin-right:3px}

/* ============ LIGHT MODE (toggle in the sidebar) — clean, modern, navy/teal on soft white ============ */
body.recv.light{
  /* LIGHT — the hero: crisp layered paper. Cards sit ABOVE the page (bg-card-2 != bg-card), the
     accent is deeper than dark so text-on-white AND white-on-accent both pass AA. */
  --bg-root:#E8EEF7; --bg-shell:#F2F6FC; --bg-side:#FFFFFF;
  --bg-card:#FFFFFF; --bg-card-2:#F4F8FE; --bg-soft:#EAF1FB; --bg-input:#EDF2FB; --field-bg:#EDF2FB;
  --line:#D5DFEC; --line-2:#BFCEE0; --line-3:#A2B7D0;
  --text:#17293D; --text-strong:#0A1826; --text-bright:#0A1826; --field:#17293D;
  --muted:#516579; --hint:#586A7E; --ink-on-teal:#FFFFFF;
  /* brilliant electric azure that is AA both as text-on-white and white-on-fill; every status colour
     passes AA as normal text on white (the old amber #B5730E and green #0F9D6E both FAILED). */
  /* LIGHT MODE IS BLUE / WHITE / GREY ONLY. No amber, green or purple — every status colour is a
     legible blue, negatives are a strong slate-grey. --amber is the bright website azure. */
  --teal:#0F6FE0; --teal-deep:#0B52B8; --emerald:#1462C9; --cyan:#1183C0; --blue:#0F6FE0;
  --good:#1462C9; --amber:#0F6FE0; --red:#37475A; --purple:#3358CC;
  --glow-teal:rgba(15,111,224,.20); --glow-cyan:rgba(17,131,192,.16);
  --shadow:0 1px 2px rgba(16,42,63,.06),0 12px 28px -16px rgba(16,42,63,.18);
  --shadow-sm:0 1px 0 rgba(255,255,255,.7),0 10px 24px -20px rgba(16,42,63,.14);
  /* re-declare the aliases here so they RECOMPUTE against the light tokens on the body. A var()-alias
     declared only at :root freezes to the dark value and inherits down (CSS gotcha) — this fixes it. */
  --ink:var(--text); --ink-dim:var(--muted); --ink-bright:var(--text-strong);
  --panel:var(--bg-card); --panel-2:var(--bg-card-2);
  /* gradients were :root-only, so every primary button/pill rendered the DARK gradient in light mode.
     Re-declare off the light teals so they follow the theme (and the Phase 1 palette). */
  --grad-accent:linear-gradient(135deg,var(--teal-deep),var(--teal));
  --grad:linear-gradient(135deg,var(--teal-deep),var(--teal));
  --grad-soft:linear-gradient(135deg,rgba(30,116,200,.12),rgba(21,95,168,.07));
}
body.recv.light{background:var(--bg-root)}
body.recv.light ::selection{background:rgba(29,111,184,.18);color:var(--text-strong)}
body.recv.light #amb{display:none}
body.recv.light .recv-side{background:linear-gradient(180deg,#ffffff,#f3f7fa);border-right-color:var(--line)}
body.recv.light .recv-brand img{filter:none}
body.recv.light .recv-brand .brand-dark{display:none}
body.recv.light .recv-brand .brand-light{display:inline-block}
/* softer top-edge sheen + import glow for white surfaces */
body.recv.light .rc-card::before,body.recv.light .panel::before,body.recv.light .recv-import::before,body.recv.light .b-row::before{
  background:linear-gradient(90deg,transparent,rgba(29,111,184,.16),transparent)}
body.recv.light .recv-import::after{background:radial-gradient(circle,rgba(29,111,184,.13),transparent 70%)}
/* calm badges get a faint dark tint for shape on white; warn/bad keep their fill */
body.recv.light .b-ok,body.recv.light .b-todo,body.recv.light .b-info,body.recv.light .b-new,body.recv.light .b-muted{background:rgba(16,42,63,.05)}
/* carved field wells, lighter inset */
body.recv.light .fields input,body.recv.light .fields select{box-shadow:inset 0 1px 2px rgba(16,42,63,.06)}
body.recv.light .recv-console:hover{background:rgba(29,111,184,.07)}
/* floating chrome stays crisp on light */
body.recv.light .bulkbar{background:linear-gradient(135deg,#ffffff,#f3f7fa);border-color:var(--line-2);color:var(--text);box-shadow:0 22px 50px -18px rgba(16,42,63,.28)}
body.recv.light .toast{background:#ffffff;border-color:var(--line-2);color:var(--text);box-shadow:var(--shadow)}
body.recv.light .toast.err{border-color:rgba(207,69,54,.4);color:#b03525}
body.recv.light .flash-error{color:#b03525}
/* theme-toggle thumb slides under the sun (left) in light */
body.recv.light .theme-toggle .tt-thumb{transform:translateX(0);background:rgba(29,111,184,.14)}

/* ============================================================================
   CONTROL ROOM — dials, rings, module cards, coverage map, source pills
   ============================================================================ */
.cr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.cr-hero{grid-column:span 2;display:flex;align-items:center;gap:28px;padding:24px 28px}
.cr-dials{grid-column:span 2;padding:18px 22px}
.cr-mod{grid-column:span 1;padding:16px 18px;display:flex;flex-direction:column;gap:5px;text-decoration:none}
.cr-coverage{grid-column:span 2}
@media(max-width:1100px){.cr-grid{grid-template-columns:repeat(2,1fr)}.cr-hero,.cr-dials,.cr-coverage{grid-column:span 2}}
@media(max-width:680px){.cr-grid{grid-template-columns:1fr}.cr-hero,.cr-dials,.cr-mod,.cr-coverage{grid-column:span 1}.cr-hero{flex-direction:column;text-align:center}}

.cr-eyebrow{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:8px}
.cr-band{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;letter-spacing:.01em}
.cr-band-excellent{color:var(--emerald);background:rgba(56,198,255,.14)}
.cr-band-good{color:var(--teal);background:rgba(0,168,232,.14)}
.cr-band-fair{color:var(--amber);background:rgba(61,155,240,.15)}
.cr-band-needs-work{color:var(--red);background:rgba(255,125,125,.14)}

/* hero gauge — score centred inside the ring */
.cr-gauge{position:relative;flex:0 0 auto;width:188px;height:188px;display:grid;place-items:center}
.bigdial{width:188px;height:188px;transform:rotate(-90deg)}
.bd-bg{fill:none;stroke:var(--line-2);stroke-width:12}
.bd-fg{fill:none;stroke:var(--teal);stroke-width:12;stroke-linecap:round;stroke-dasharray:100;filter:drop-shadow(0 0 9px var(--glow-teal))}
.cr-hero-fair .bd-fg{stroke:var(--amber);filter:drop-shadow(0 0 9px rgba(61,155,240,.4))}
.cr-hero-needs-work .bd-fg{stroke:var(--red);filter:drop-shadow(0 0 9px rgba(255,125,125,.4))}
.cr-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.cr-gauge-num{font-size:52px;font-weight:700;line-height:.9;letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cr-gauge-num span{font-size:17px;color:var(--muted);font-weight:600;letter-spacing:0}
.cr-hero-r{flex:1;min-width:0}
.cr-hero-lead{color:var(--muted);font-size:13px;line-height:1.5;margin:10px 0 16px;max-width:42ch}
.cr-seg{display:flex;flex-direction:column;gap:11px}
.cr-seg-row{display:grid;grid-template-columns:128px 1fr 44px;align-items:center;gap:12px}
.cr-seg-lbl{font-size:12.5px;color:var(--text)}
.cr-seg-lbl em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.cr-seg-bar{height:7px;border-radius:6px;background:var(--line-2);overflow:hidden}
.cr-seg-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--cyan))}
.cr-seg-bar-dim i{background:var(--line-3);opacity:.9}
.cr-seg-val{font-size:14px;font-weight:700;color:var(--text-strong);text-align:right;font-variant-numeric:tabular-nums}

.cr-ring-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.cr-ring{width:84px;text-align:center;position:relative}
.ring{width:64px;height:64px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--line-2);stroke-width:7}
.ring-fg{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:100}
.ring-teal .ring-fg{stroke:var(--teal)}.ring-cyan .ring-fg{stroke:var(--cyan)}.ring-amber .ring-fg{stroke:var(--amber)}
.cr-ring-val{position:absolute;top:20px;left:0;right:0;font-size:16px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums}
.cr-ring-val span{font-size:9px;color:var(--muted)}
.cr-ring-lbl{font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.2}

.cr-card-head{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px;margin-bottom:4px}
.cr-stat{margin:4px 0 6px}
.cr-stat b{font-size:30px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1}
.cr-stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.cr-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--text);padding:3px 0;border-top:1px solid var(--line)}
.cr-row b{color:var(--text-strong);font-variant-numeric:tabular-nums}
.cr-row.muted{color:var(--muted);border-top:none;padding-top:1px}
.cr-row.warn b{color:var(--amber)}
.cr-mod:hover{border-color:var(--line-3);box-shadow:0 10px 30px -16px var(--glow-teal)}

.cr-cov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
@media(max-width:680px){.cr-cov-grid{grid-template-columns:repeat(2,1fr)}}
.cr-cov-tile{display:flex;flex-direction:column;gap:4px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius-xs);text-decoration:none;background:var(--bg-soft)}
.cr-cov-tile:hover{border-color:var(--line-2)}
.cr-cov-lbl{font-size:11px;color:var(--muted)}
.cr-cov-pct{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.cov-ok{color:var(--emerald)}.cov-mid{color:var(--cyan)}.cov-low{color:var(--amber)}
.cr-cov-bar{height:4px;border-radius:3px;background:var(--line-2);overflow:hidden}
.cr-cov-bar i{display:block;height:100%;background:var(--teal)}

.src{font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:999px;font-weight:700;border:1px solid var(--line-2);color:var(--muted)}
.src-real{color:var(--emerald);border-color:rgba(56,198,255,.3)}
.src-derived{color:var(--cyan);border-color:rgba(56,198,255,.3)}
.src-scaffold{color:var(--amber);border-color:rgba(61,155,240,.3)}

/* ============================================================================
   LIGHT MODE PARITY — genuinely designed light theme on the same teal system.
   Overrides the dark tokens so EVERY receiving.css page works in light mode.
   ============================================================================ */
/* (the light TOKEN palette is defined once, above; this block previously redefined it in green and
   flattened the accent — removed. The visual overrides below are kept.) */
body.recv.light{background:var(--bg-root)}
body.recv.light .card,body.recv.light .rc-card,body.recv.light .panel{
  background:linear-gradient(180deg,#ffffff,var(--bg-card-2));box-shadow:0 6px 20px -14px rgba(13,90,74,.3)}
body.recv.light .recv-side{background:linear-gradient(180deg,var(--bg-side),#dfeae6)}
body.recv.light .recv-nav a.active{background:linear-gradient(100deg,rgba(29,111,184,.16),rgba(13,147,184,.06));color:var(--text-strong)}
body.recv.light .bd-fg,body.recv.light .ring-fg{filter:none}
body.recv.light .src-real{color:#1d6fb8}body.recv.light .src-derived{color:#0d7fa0}body.recv.light .src-scaffold{color:#b06f12}
body.recv.light #amb{display:none}

/* compatibility shims so the Product Health pages render cleanly under the dark shell */
.greeting{margin-bottom:14px}
.greeting h1{font-size:26px;font-weight:600;letter-spacing:-.015em;margin:0;color:var(--text-strong)}
.greeting .sub,.greeting p{color:var(--muted);font-size:13.5px;margin:6px 0 0}
h2.sec,.sec{font-size:15px;font-weight:600;color:var(--text-strong);margin:18px 0 8px}
.badge.b-ok{font-size:11px;padding:2px 9px;border-radius:999px;background:rgba(0,168,232,.12);color:var(--teal);border:1px solid var(--line-2)}
.more-link{color:var(--teal);font-size:12.5px;cursor:pointer;background:none;border:none}

/* receiving batch search — instant client-side filter */
.batch-search{display:flex;align-items:center;gap:9px;background:var(--bg-input);border:1px solid var(--line-2);
  border-radius:var(--radius-sm);padding:9px 13px;margin:4px 0 10px;transition:border-color .2s var(--ease)}
.batch-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--glow-teal)}
.batch-search .bs-ic{color:var(--muted);display:flex}
.batch-search .bs-ic .ic{width:16px;height:16px}
.batch-search input{flex:1;background:none;border:0;outline:none;color:var(--text-strong);font-size:14px;min-width:0}
.batch-search input::placeholder{color:var(--hint)}
.bs-clear{background:none;border:0;color:var(--muted);cursor:pointer;display:flex;padding:2px;border-radius:6px}
.bs-clear:hover{color:var(--text);background:var(--bg-soft)}
.bs-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.bs-chip{background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:500;
  padding:4px 12px;border-radius:999px;cursor:pointer;text-transform:capitalize;transition:.18s var(--ease)}
.bs-chip:hover{border-color:var(--line-2);color:var(--text)}
.bs-chip.active{background:linear-gradient(100deg,rgba(0,168,232,.16),rgba(56,198,255,.05));border-color:var(--line-2);color:var(--text-bright)}
body.recv.light .bs-chip.active{background:linear-gradient(100deg,rgba(29,111,184,.14),rgba(13,147,184,.05))}

/* Control Room polish — card depth, hero accent, module emphasis */
.cr-grid .card{position:relative;overflow:hidden;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease)}
.cr-grid .card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,162,216,.22),transparent);pointer-events:none}
.cr-hero{background:
  radial-gradient(120% 140% at 85% 0%,rgba(0,168,232,.07),transparent 60%),
  linear-gradient(180deg,var(--bg-card-2),var(--bg-card))}
a.cr-mod{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
a.cr-mod:hover{transform:translateY(-2px);border-color:var(--line-3);box-shadow:0 16px 34px -20px var(--glow-teal)}
.cr-mod .cr-stat b{background:linear-gradient(180deg,var(--text-strong),var(--text));-webkit-background-clip:text;background-clip:text}
.cr-card-head .ic{width:15px;height:15px;color:var(--teal);opacity:.85}
.cr-dials{background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card))}
body.recv.light .cr-grid .card::after{background:linear-gradient(90deg,transparent,rgba(29,111,184,.18),transparent)}
body.recv.light .cr-hero{background:radial-gradient(120% 140% at 85% 0%,rgba(29,111,184,.06),transparent 60%),linear-gradient(180deg,#ffffff,var(--bg-card-2))}
body.recv.light .cr-seg-bar-dim i{background:#c4d2cd}

/* Control Room refinements — light nav contrast + larger sub-dials */
body.recv.light .recv-nav a{color:#46615a}
body.recv.light .recv-nav a:hover{color:var(--text-strong)}
body.recv.light .recv-brand .ops{color:#46615a}
.cr-ring{width:92px}
.ring{width:72px;height:72px}
.cr-ring-val{top:24px;font-size:17px}
.cr-ring-lbl{font-size:11px;margin-top:7px}
.cr-dials .cr-ring-row{gap:16px 10px}

/* ============================================================================
   FORM CONTROLS — app-styled inputs/selects/textareas/file pickers everywhere,
   so no raw browser defaults appear. Element-scoped; .btn classes are untouched.
   ============================================================================ */
.recv input[type=text],.recv input[type=email],.recv input[type=password],
.recv input[type=search],.recv input[type=number],.recv input[type=date],
.recv input[type=tel],.recv input[type=url],.recv textarea,.recv select{
  width:100%;background:var(--bg-input);border:1px solid var(--line-2);border-radius:11px;
  color:var(--text-strong);font:inherit;font-size:14px;padding:10px 13px;line-height:1.4;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  -webkit-appearance:none;appearance:none}
.recv textarea{min-height:96px;resize:vertical}
.recv input::placeholder,.recv textarea::placeholder{color:var(--hint)}
.recv input:focus,.recv textarea:focus,.recv select:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--glow-teal)}
.recv select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa39b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px;cursor:pointer}
.recv input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
/* custom file input */
.recv input[type=file]{font:inherit;font-size:13px;color:var(--muted);max-width:100%}
.recv input[type=file]::-webkit-file-upload-button,.recv input[type=file]::file-selector-button{
  font:inherit;font-size:13px;font-weight:600;margin-right:12px;padding:9px 15px;cursor:pointer;
  background:var(--bg-soft);color:var(--text-strong);border:1px solid var(--line-2);border-radius:10px;
  transition:.18s var(--ease)}
.recv input[type=file]::file-selector-button:hover{border-color:var(--teal);color:var(--teal)}
/* checkbox / radio accent */
.recv input[type=checkbox],.recv input[type=radio]{accent-color:var(--teal);width:16px;height:16px}
/* a stray anchor inside content that wasn't given a component style still reads as app text, not raw blue */
.recv-main a:not(.btn):not(.b-row):not(.cr-mod):not(.recv-nav a):not(.bs-chip):not(.tab):not(.back-link):not([class]){
  color:var(--teal);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.recv-main a:not([class]):hover{border-bottom-color:currentColor}

/* ============================================================================
   LOGIN — premium product entry point
   ============================================================================ */
.login-body{min-height:100dvh}
.login-wrap{position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;padding:24px}
.login-card{position:relative;width:100%;max-width:420px;padding:36px 34px 26px;border-radius:22px;
  background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));border:1px solid var(--line-2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9),0 0 0 1px rgba(120,162,216,.04) inset;overflow:hidden}
.login-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,168,232,.5),transparent)}
.login-card::after{content:"";position:absolute;width:280px;height:280px;top:-150px;right:-120px;border-radius:50%;
  background:radial-gradient(circle,var(--glow-teal),transparent 70%);pointer-events:none}
.login-brand{display:flex;flex-direction:column;gap:7px;margin-bottom:24px}
.login-brand img{height:38px;width:auto;align-self:flex-start;filter:drop-shadow(0 2px 16px var(--glow-teal))}
.login-brand .brand-light{display:none}
.login-sub{font-size:10.5px;letter-spacing:.34em;color:var(--hint);text-transform:uppercase;font-weight:600}
.login-h{font-size:25px;font-weight:600;letter-spacing:-.015em;color:var(--text-strong);margin:0 0 6px}
.login-lead{color:var(--muted);font-size:13px;line-height:1.55;margin:0 0 22px;max-width:34ch}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-field{display:flex;flex-direction:column;gap:6px}
.login-field span{font-size:12px;font-weight:600;color:var(--field);letter-spacing:.01em}
.login-btn{width:100%;justify-content:center;margin-top:6px;height:46px;font-size:15px}
.login-err{background:rgba(255,125,125,.1);border:1px solid rgba(255,125,125,.34);color:var(--red);
  font-size:13px;font-weight:500;padding:10px 13px;border-radius:11px;margin-bottom:16px}
.login-foot{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:20px;
  color:var(--hint);font-size:11.5px}
.login-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 9px var(--emerald)}
@media(max-width:520px){.login-card{padding:30px 22px 22px;border-radius:18px}}

/* logo theme swap — white-wordmark logo on dark, navy-wordmark logo on light surfaces */
.brand-dark{display:inline-block}
.brand-light{display:none}
body.recv.light .brand-dark{display:none}
body.recv.light .brand-light{display:inline-block}

/* ============================================================================
   ACTION-CENTRE COMPONENTS — shared across Product Health, Content, Photos,
   New Products, Claims. Product rows are cards, never naked browser links.
   ============================================================================ */
/* page toolbar: search + filter chips + count */
.ec-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.ec-search{display:flex;align-items:center;gap:9px;flex:1;min-width:240px;background:var(--bg-input);
  border:1px solid var(--line-2);border-radius:12px;padding:9px 13px;transition:border-color .2s var(--ease),box-shadow .2s}
.ec-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--glow-teal)}
.ec-search .ic{width:16px;height:16px;color:var(--muted)}
.ec-search input{flex:1;background:none;border:0;outline:none;color:var(--text-strong);font-size:14px;min-width:0;padding:0}
.ec-search input::placeholder{color:var(--hint)}
.ec-count{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* receiving line filter bar — search + one status dropdown + collapsible add-lines */
.recv-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 16px}
.recv-filtersel{background:var(--bg-input);border:1px solid var(--line-2);border-radius:12px;color:var(--text-strong);
  font-size:13px;padding:9px 13px;outline:none;cursor:pointer}
.recv-filtersel:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--glow-teal)}
.recv-addlines{margin-left:auto}
.recv-addlines>summary{cursor:pointer;color:var(--muted);font-size:12.5px;list-style:none;display:inline-flex;
  align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line-2);border-radius:12px}
.recv-addlines>summary::-webkit-details-marker{display:none}
.recv-addlines>summary .ic{width:15px;height:15px}
.recv-addlines[open]>summary{color:var(--text-strong);border-color:var(--teal)}
.recv-addlines form{margin-top:10px;display:flex;flex-direction:column;gap:9px;background:var(--bg-card-2);
  border:1px solid var(--line-2);border-radius:12px;padding:12px;flex-basis:100%}
.recv-addlines .imp{min-height:84px;background:var(--bg-input);border:1px solid var(--line-2);border-radius:10px;
  color:var(--text-strong);font-family:ui-monospace,monospace;font-size:12.5px;padding:10px;resize:vertical}
.recv-addlines .imp-side{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* new-batch drop zone (file drag-drop or paste, format auto-detected) */
.nb-drop{margin-top:12px;border:1.5px dashed var(--line-2);border-radius:12px;padding:12px;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.nb-drop.drag{border-color:var(--teal);background:var(--glow-teal)}
.nb-drop-hint{margin:0 0 10px;color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nb-drop-hint .ic{width:15px;height:15px}
.nb-browse{background:none;border:0;color:var(--teal);cursor:pointer;font:inherit;text-decoration:underline;padding:0}
.nb-file-name{color:var(--text-strong)}
.nb-drop .imp{width:100%;min-height:92px;background:var(--bg-input);border:1px solid var(--line-2);border-radius:10px;
  color:var(--text-strong);font-family:ui-monospace,monospace;font-size:12.5px;padding:10px;resize:vertical;box-sizing:border-box}

/* mini stat dials (overall / in-stock / out-of-stock) */
.ec-dials{display:flex;gap:14px;flex-wrap:wrap;margin:4px 0 18px}
.ec-mini{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));
  border:1px solid var(--line);border-radius:16px;padding:14px 18px;flex:1;min-width:190px;position:relative;overflow:hidden}
.ec-mini::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,162,216,.2),transparent)}
.ec-mini-dial{position:relative;width:62px;height:62px;flex:0 0 auto;display:grid;place-items:center}
.ec-mini-dial svg{width:62px;height:62px;transform:rotate(-90deg)}
.ec-mini-dial .bg{fill:none;stroke:var(--line-2);stroke-width:8}
.ec-mini-dial .fg{fill:none;stroke-width:8;stroke-linecap:round;stroke-dasharray:100}
.ec-mini-dial .v{position:absolute;font-size:15px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums}
.ec-mini-meta b{display:block;font-size:13px;color:var(--text);font-weight:600}
.ec-mini-meta span{font-size:11.5px;color:var(--muted)}

/* entity row card */
.ec-list{display:flex;flex-direction:column;gap:8px}
.ec-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:14px;text-decoration:none;
  background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));border:1px solid var(--line);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.ec-row:hover{border-color:var(--line-3);box-shadow:0 12px 28px -20px var(--glow-teal);transform:translateY(-1px)}
.ec-row .grow{flex:1;min-width:0}
.ec-title{font-size:14px;font-weight:600;color:var(--text-strong);line-height:1.3;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-sub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ec-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.mchip{font-size:10.5px;font-weight:600;letter-spacing:.01em;padding:2px 8px;border-radius:7px;
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}
.mchip.bad{color:var(--amber);border-color:rgba(61,155,240,.3);background:rgba(61,155,240,.08)}
.mchip.crit{color:var(--red);border-color:rgba(255,125,125,.3);background:rgba(255,125,125,.08)}
.mchip.ok{color:var(--emerald);border-color:rgba(56,198,255,.3);background:rgba(56,198,255,.08)}
/* health pill */
.hpill{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:46px;
  border-radius:11px;background:var(--bg-soft);border:1px solid var(--line)}
.hpill b{font-size:16px;font-weight:700;line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums}
.hpill span{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.hpill.h-hi{border-color:rgba(56,198,255,.35)}.hpill.h-hi b{color:var(--emerald)}
.hpill.h-mid{border-color:rgba(61,155,240,.32)}.hpill.h-mid b{color:var(--amber)}
.hpill.h-lo{border-color:rgba(255,125,125,.32)}.hpill.h-lo b{color:var(--red)}
.ec-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ec-none{text-align:center;color:var(--muted);font-size:13px;padding:26px}
/* page subnav as pills */
.ph-subnav{display:flex;gap:7px;flex-wrap:wrap;margin:2px 0 16px}
.ph-subnav a{font-size:12.5px;font-weight:500;padding:6px 13px;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:var(--muted);background:var(--bg-soft);transition:.18s var(--ease)}
.ph-subnav a:hover{border-color:var(--line-2);color:var(--text)}
.ph-subnav a.active{background:linear-gradient(100deg,rgba(0,168,232,.15),rgba(56,198,255,.04));color:var(--text-bright);border-color:var(--line-2)}
body.recv.light .ph-subnav a.active{background:linear-gradient(100deg,rgba(29,111,184,.14),rgba(13,147,184,.05))}
@media(max-width:680px){.ec-row{flex-wrap:wrap}.ec-actions{width:100%;margin-top:8px}.ec-actions .btn{flex:1}}

/* collapsed total-units editor in receiving line cards */
.tu-block{grid-column:1/-1;background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;padding:8px 11px}
.tu-row{display:flex;align-items:center;gap:10px}
.tu-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.tu-val{font-size:15px;color:var(--text-strong);font-variant-numeric:tabular-nums;font-weight:700}
.tu-editbtn{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--line-2);
  color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;cursor:pointer;transition:.15s var(--ease)}
.tu-editbtn:hover{border-color:var(--teal);color:var(--teal)}
.tu-editbtn .ic{width:13px;height:13px}
.tu-controls{display:none;margin-top:10px;gap:10px;flex-wrap:wrap}
.tu-block.tu-open .tu-controls{display:flex}
.tu-block.tu-open .tu-editbtn{border-color:var(--teal);color:var(--teal)}
.tu-controls label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);min-width:150px;flex:1}
.tu-reason{display:flex;gap:10px;flex-wrap:wrap;flex:1 1 100%}
.tu-reason.hide,.js-other.hide{display:none}

/* entity row thumbnail (content queue) */
.ec-thumb{flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:17px}
.ec-thumb img{width:100%;height:100%;object-fit:cover}

/* status segment filter: wrap cleanly on mobile instead of overflowing the viewport */
@media(max-width:860px){
  .seg{display:flex;flex-wrap:wrap;border-radius:14px;gap:4px;overflow:visible}
  .seg a{white-space:nowrap}
}

/* receiving queue-hygiene tabs + go-live preview */
.seg-n{display:inline-block;min-width:16px;padding:0 5px;margin-left:4px;border-radius:999px;font-size:10px;
  background:var(--bg-soft);color:var(--muted);font-variant-numeric:tabular-nums}
.seg a.active .seg-n{background:rgba(0,168,232,.18);color:var(--text-bright)}
.gl-guard{display:flex;gap:11px;align-items:flex-start;background:rgba(0,168,232,.06);border:1px solid var(--line-2);
  border-radius:14px;padding:13px 16px;margin:4px 0 16px;font-size:13px;color:var(--text);line-height:1.5}
.gl-guard .ic{color:var(--emerald);flex:0 0 auto;margin-top:2px}
.gl-warn{background:rgba(61,155,240,.08);border:1px solid rgba(61,155,240,.3);border-radius:14px;padding:12px 16px;margin:0 0 16px}
.gl-warn b{display:flex;align-items:center;gap:7px;color:var(--amber);font-size:13px}
.gl-warn .ic{width:15px;height:15px}
.gl-warn ul{margin:8px 0 0;padding-left:22px;font-size:12.5px;color:var(--text);line-height:1.7}
.gl-btn{width:100%;justify-content:flex-start;margin-bottom:8px}
.gl-btn[disabled]{opacity:.5;cursor:not-allowed}
.ec-row.b-row{align-items:center}
.ec-row.b-row .grow{cursor:pointer}

/* ── Quick Fixes grid (Product Health action centre) ───────────────────────── */
.qf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:4px 0 16px}
.qf-card{background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;position:relative;overflow:hidden;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.qf-card:hover{border-color:var(--line-3);transform:translateY(-1px)}
.qf-card::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(120,162,216,.22),transparent)}
.qf-card.qf-empty{opacity:.6}
.qf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.qf-ic{color:var(--teal);display:flex}.qf-ic .ic{width:16px;height:16px}
.qf-n{font-size:24px;font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1}
.qf-label{font-size:12px;color:var(--muted);line-height:1.35;margin-bottom:8px;min-height:32px}
.qf-items{display:flex;flex-direction:column;gap:4px}
.qf-item{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:11.5px;color:var(--text);
  padding:3px 0;border-top:1px solid var(--line)}
.qf-item:first-child{border-top:none}
.qf-item-t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qf-item-h{color:var(--muted);font-variant-numeric:tabular-nums}
.qf-more{font-size:11px;color:var(--teal);margin-top:3px}
.qf-done{font-size:11.5px;color:var(--emerald);display:flex;align-items:center;gap:5px}
.qf-done .ic{width:13px;height:13px}

/* French classification strip */
.fr-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:11px 15px;margin-bottom:20px}
.fr-lbl{font-size:12px;font-weight:700;color:var(--text-strong);text-transform:uppercase;letter-spacing:.04em}
.fr-pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.fr-ok{background:rgba(56,198,255,.12);color:var(--emerald)}
.fr-auto{background:rgba(0,168,232,.12);color:var(--teal)}
.fr-rev{background:rgba(61,155,240,.13);color:var(--amber)}
.fr-block{background:var(--bg-card);color:var(--muted);border:1px solid var(--line)}
.fr-note{font-size:11.5px;color:var(--hint);margin-left:auto}

/* cost report bits */
.cr-cov-bar{display:block;height:6px;border-radius:5px;background:var(--line-2);overflow:hidden}
.cr-cov-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--teal),var(--cyan))}
.cost-proj{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.cost-proj-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text);
  padding:8px 11px;background:var(--bg-soft);border-radius:9px}
.cost-proj-row b{color:var(--text-strong);font-variant-numeric:tabular-nums}
.cap-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text);
  padding:7px 0;border-top:1px solid var(--line)}
.cap-row:first-child{border-top:none}
.cap-row b{color:var(--teal);font-variant-numeric:tabular-nums}
@media(max-width:680px){.fr-note{margin-left:0;flex-basis:100%}}

/* Coverage Map dials: clean even grid on mobile (no cramped wrap, no overflow) */
@media(max-width:680px){
  .cr-dials .cr-ring-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px;justify-items:center}
  .cr-dials .cr-ring{width:100%;max-width:84px}
  .cr-dials .ring{width:58px;height:58px}
  .cr-dials .cr-ring-val{top:18px;font-size:13px}
  .cr-dials .cr-ring-lbl{font-size:9.5px}
}
@media(max-width:380px){.cr-dials .cr-ring-row{grid-template-columns:repeat(3,1fr)}}

/* ============================================================================
   CONTROL ROOM V4 — three-zone composition matching the elite mockup
   ============================================================================ */
.cr-top{display:grid;grid-template-columns:1.5fr 1.45fr 1fr;gap:16px;margin-top:8px}
.cr-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.cr-bottom{display:grid;grid-template-columns:1fr 1fr 1.7fr;gap:16px;margin-top:16px}
@media(max-width:1180px){.cr-top{grid-template-columns:1fr 1fr}.cr-top .cr-activity{grid-column:1/-1}
  .cr-ops{grid-template-columns:repeat(2,1fr)}.cr-bottom{grid-template-columns:1fr 1fr}.cr-bottom .cr-value{grid-column:1/-1}}
@media(max-width:680px){.cr-top,.cr-ops,.cr-bottom{grid-template-columns:1fr}.cr-top .cr-activity{grid-column:auto}}

/* LIVE badge (real-time) */
.cr-live-badge{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;letter-spacing:.07em;
  color:var(--emerald);background:rgba(56,198,255,.12);border:1px solid rgba(56,198,255,.28);
  padding:2px 8px;border-radius:999px;text-transform:uppercase}
.cr-live-badge .d{width:5px;height:5px;border-radius:50%;background:var(--emerald);box-shadow:0 0 7px var(--emerald);
  animation:cr-pulse 2s var(--ease) infinite}
@keyframes cr-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* hero now has a head + body */
.cr-hero{display:flex;flex-direction:column;gap:14px}
.cr-hero .cr-card-head{display:flex;align-items:center;gap:9px;justify-content:flex-start}
.cr-hero-body{display:flex;align-items:center;gap:22px;flex:1}
.cr-trend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--muted);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.cr-trend .ic{width:14px;height:14px}
.cr-trend-up strong{color:var(--emerald)}.cr-trend-up .ic{color:var(--emerald)}
.cr-trend-down strong{color:var(--amber)}.cr-trend-flat strong{color:var(--muted)}
.cr-trend strong{color:var(--text-strong)}

/* coverage footer */
.cr-cov-foot{display:flex;gap:20px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.cr-cov-foot b{color:var(--teal);font-weight:600}.cr-cov-foot b.prio{color:var(--amber)}

/* What's Happening Now */
.cr-activity{display:flex;flex-direction:column}
.cr-act-list{display:flex;flex-direction:column;gap:2px;margin-top:6px;flex:1}
.cr-act-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line)}
.cr-act-row:last-child{border-bottom:none}
.cr-act-ic{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--teal)}
.cr-act-ic .ic{width:15px;height:15px}
.cr-act-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cr-act-title{font-size:12.5px;font-weight:600;color:var(--text-strong);line-height:1.25}
.cr-act-ctx{font-size:11px;color:var(--muted)}
.cr-act-meta{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--hint);white-space:nowrap}
.cr-act-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px var(--emerald)}
.cr-act-empty{font-size:12px;color:var(--muted);padding:14px 0}
.cr-act-foot{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:12px;color:var(--teal);text-decoration:none}
.cr-act-foot .ic{width:13px;height:13px}

/* sparklines */
.spark{width:100%;height:34px;margin-top:12px;display:block;overflow:visible}
.spark-line{fill:none;stroke:var(--teal);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.spark-fill{fill:url(#none);opacity:.14}
.spark-teal .spark-line{stroke:var(--teal)}.spark-teal .spark-fill{fill:var(--teal)}
.spark-cyan .spark-line{stroke:var(--cyan)}.spark-cyan .spark-fill{fill:var(--cyan)}
.spark-amber .spark-line{stroke:var(--amber)}.spark-amber .spark-fill{fill:var(--amber)}

/* Value Created */
.cr-value{display:flex;flex-direction:column}
.cr-value-hero{margin:6px 0 14px}
.cr-value-num{font-size:38px;font-weight:700;letter-spacing:-.02em;color:var(--text-strong);line-height:1;font-variant-numeric:tabular-nums}
.cr-value-num span{font-size:18px;color:var(--muted);font-weight:600;margin-left:3px}
.cr-value-sub{font-size:12px;color:var(--muted);margin-top:5px}
.cr-value-bars{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.cr-vb{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.cr-vb-l{font-size:11.5px;color:var(--muted)}
.cr-vb-v{font-size:13px;font-weight:700;color:var(--text-strong);text-align:right;font-variant-numeric:tabular-nums;grid-row:span 2}
.cr-vb-bar{grid-column:1/2;height:8px;border-radius:6px;background:var(--bg-soft);overflow:hidden}
.cr-vb-human{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--cyan))}
.cr-vb-api{display:block;height:100%;border-radius:6px;background:var(--amber)}
.cr-value-net{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-radius:12px;
  background:linear-gradient(100deg,rgba(56,198,255,.1),rgba(0,168,232,.03));border:1px solid rgba(56,198,255,.22);margin-top:auto}
.cr-value-net span{font-size:12.5px;color:var(--text)}
.cr-value-net b{font-size:24px;font-weight:700;color:var(--emerald);font-variant-numeric:tabular-nums}
.cr-value-note{font-size:10.5px;color:var(--hint);line-height:1.5;margin:11px 0 0}
body.recv.light .cr-value-net{background:linear-gradient(100deg,rgba(29,111,184,.1),rgba(13,147,184,.03))}

/* ── GTIN / barcode capture panel (receiving line) ─────────────────────────── */
.gtin-panel{grid-column:1/-1;background:var(--bg-soft);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;margin-top:4px}
.gtin-panel.hide{display:none}
.gtin-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.gtin-title{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-strong);text-transform:uppercase;letter-spacing:.04em}
.gtin-title .ic{width:14px;height:14px;color:var(--teal)}
.gtin-status{font-size:11.5px;font-weight:600;color:var(--muted)}
.gtin-status.gs-matches{color:var(--emerald)}.gtin-status.gs-mismatch{color:var(--amber)}.gtin-status.gs-missing{color:var(--muted)}
.gtin-cur{font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:9px}
.gtin-capture{display:flex;gap:8px;margin-bottom:8px}
.gtin-capture input{flex:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.gtin-diff{font-size:12px;color:var(--text);background:var(--bg-card);border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:8px}
.gtin-diff .ok{color:var(--emerald);font-weight:600}.gtin-diff .bad{color:var(--red);font-weight:600}
.gtin-diff b{color:var(--text-strong);font-variant-numeric:tabular-nums}
.gtin-warn{color:var(--amber);font-size:11px;margin-top:5px}
.gtin-actions{display:flex;gap:8px}
.gtin-note{font-size:10.5px;color:var(--hint);line-height:1.5;margin:9px 0 0}
.gtin-history-list{margin-top:9px;display:flex;flex-direction:column;gap:4px}
.gtin-hrow{font-size:11.5px;color:var(--text);padding:5px 9px;background:var(--bg-card);border-radius:7px;font-variant-numeric:tabular-nums}
.gtin-hrow.muted{color:var(--muted)}

/* Operations Console footer (two-line) */
.recv-console .rc-con-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.recv-console .rc-con-txt b{font-size:12px;color:var(--text-strong);font-weight:600}
.recv-console .rc-con-txt span{font-size:10.5px;color:var(--muted)}

/* ── INLINE GTIN row (always visible on confirmed receiving lines) ──────────── */
.gtin-inline{grid-column:1/-1;background:var(--bg-soft);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-top:4px}
.gtin-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gtin-row-2{margin-top:8px}
.gtin-lbl{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text-strong);text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
.gtin-lbl .ic{width:13px;height:13px;color:var(--teal)}
.gtin-vals{display:flex;gap:12px;flex-wrap:wrap;flex:1;min-width:0;font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.gtin-cur,.gtin-sq{white-space:nowrap}
.gtin-sq{color:var(--muted)}.gtin-sq.gs-matches{color:var(--emerald)}.gtin-sq.gs-mismatch{color:var(--amber)}.gtin-sq.gs-missing{color:var(--muted)}
.gtin-status{flex:0 0 auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--bg-card);border:1px solid var(--line);color:var(--muted)}
.gtin-status.gs-matches{color:var(--emerald);border-color:rgba(56,198,255,.3)}
.gtin-status.gs-mismatch{color:var(--amber);border-color:rgba(61,155,240,.3)}
.gtin-status.gs-missing{color:var(--muted)}
.gtin-status.gs-saved{color:var(--teal);border-color:var(--line-2)}
.gtin-row-2 input{flex:1;min-width:130px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.gtin-row-2 .btn{flex:0 0 auto;padding:8px 11px}
.gtin-diff{flex-basis:100%;font-size:12px;color:var(--text);background:var(--bg-card);border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-top:8px}
.gtin-diff .ok{color:var(--emerald);font-weight:600}.gtin-diff .bad{color:var(--red);font-weight:600}.gtin-diff b{color:var(--text-strong)}
.gtin-warn{color:var(--amber);font-size:11px;margin-top:4px}
.gtin-history-list{flex-basis:100%;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.gtin-hrow{font-size:11.5px;color:var(--text);padding:5px 9px;background:var(--bg-card);border-radius:7px;font-variant-numeric:tabular-nums}
.gtin-hrow.muted{color:var(--muted)}
@media(max-width:680px){.gtin-row-2 .btn{flex:1}}

/* ── Control Room V3 recovery: hero tabs, highlights, next-best, value tooltip ── */
.cr-top{grid-template-columns:1.9fr 1fr}   /* Content Health (tabs) + What's Happening Now */
@media(max-width:1180px){.cr-top{grid-template-columns:1fr}.cr-top .cr-activity{grid-column:auto}}
.cr-card-head{position:relative}
.cr-tabs{display:inline-flex;gap:4px;margin-left:auto;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:3px}
.cr-tab{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:5px 13px;border-radius:8px;cursor:pointer;transition:.15s var(--ease)}
.cr-tab:hover{color:var(--text)}
.cr-tab.active{background:linear-gradient(100deg,rgba(0,168,232,.18),rgba(56,198,255,.05));color:var(--text-bright)}
body.recv.light .cr-tab.active{background:linear-gradient(100deg,rgba(29,111,184,.14),rgba(13,147,184,.05))}
.cr-tabpane.hide{display:none}
.cr-tabpane[data-pane="coverage"]{padding-top:8px}
.cr-hl{display:flex;flex-direction:column;gap:7px;margin:4px 0 12px}
.cr-hl-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.cr-hl-row:last-child{border-bottom:none}
.cr-hl-row b{color:var(--teal);font-weight:600}.cr-hl-row b.prio{color:var(--amber)}
.cr-nextbest{display:flex;align-items:center;gap:9px;text-decoration:none;background:linear-gradient(100deg,rgba(0,168,232,.1),transparent);
  border:1px solid var(--line-2);border-radius:11px;padding:10px 13px;font-size:12.5px;color:var(--text);margin-bottom:12px}
.cr-nextbest .ic{width:15px;height:15px;color:var(--teal);flex:0 0 auto}
.cr-nextbest b{color:var(--text-strong);font-weight:600}
.cr-info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--line-2);
  color:var(--muted);font-size:10px;font-style:italic;font-weight:700;cursor:help;position:relative;margin-left:6px}
.cr-info .cr-tip{position:absolute;bottom:130%;right:0;width:248px;background:var(--bg-card);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 12px;font-size:11px;font-style:normal;font-weight:400;color:var(--muted);line-height:1.55;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:.18s var(--ease);z-index:5;text-align:left}
.cr-info:hover .cr-tip,.cr-info:focus .cr-tip{opacity:1;visibility:visible}
.cr-value-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--muted)}
.cr-value-stats span{font-variant-numeric:tabular-nums}

/* ── Inline GTIN in the line field row + condensed card ────────────────────── */
.fields-row{margin-top:13px}
.fld-gtin{min-width:190px;grid-column:span 2}
.gtin-status-mini{font-size:8.5px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:6px;
  text-transform:none;color:var(--muted);background:var(--bg-soft);border:1px solid var(--line);margin-left:5px}
.gtin-status-mini.gs-matches{color:var(--emerald);border-color:rgba(56,198,255,.3)}
.gtin-status-mini.gs-mismatch{color:var(--amber);border-color:rgba(61,155,240,.32)}
.gtin-status-mini.gs-invalid{color:var(--red);border-color:rgba(255,125,125,.3)}
.gtin-status-mini.gs-saved{color:var(--teal);border-color:var(--line-2)}
.gtin-status-mini.gs-missing{color:var(--muted)}
.gtin-input-wrap{position:relative;display:block}
.gtin-input{width:100%;padding:10px 40px 10px 11px;color:var(--field);font-size:14px;font-weight:600;
  background:var(--field-bg);border:1px solid var(--line-2);border-radius:var(--radius-xs);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;-webkit-appearance:none;appearance:none}
.gtin-input:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.gtin-input::placeholder{color:var(--hint);font-weight:500;letter-spacing:0}
.gtin-cam{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;
  background:none;border:0;color:var(--muted);cursor:pointer;border-radius:7px}
.gtin-cam:hover{color:var(--teal);background:var(--bg-soft)}
.gtin-cam .ic{width:17px;height:17px}
/* second row: total units (left) + actions (right) */
.fields-row-2{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:11px;flex-wrap:wrap}
.fields-row-2 .tu-block{flex:1;min-width:220px;margin-top:0}
.fields-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.gtin-save[disabled]{opacity:.45;cursor:not-allowed}
/* compact meta line (current/square/diff + mini actions) */
.gtin-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.gtin-cur{color:var(--text)}
.gtin-sq.gs-matches{color:var(--emerald)}.gtin-sq.gs-mismatch{color:var(--amber)}.gtin-sq.gs-missing{color:var(--muted)}
.gtin-diff .ok{color:var(--emerald);font-weight:600}.gtin-diff .bad{color:var(--red);font-weight:600}.gtin-diff b{color:var(--text-strong)}
.gtin-mini{background:none;border:0;color:var(--teal);font:inherit;font-size:11.5px;cursor:pointer;padding:0;text-decoration:none}
.gtin-mini:hover{text-decoration:underline}
.gtin-history-list{flex-basis:100%;margin-top:4px;display:flex;flex-direction:column;gap:4px}
@media(max-width:680px){.fld-gtin{grid-column:1/-1}.fields-row-2{flex-direction:column}.fields-actions{width:100%}.fields-actions .btn{flex:1}}

/* ── Control Room hero: gauge + summary + coverage dials together (no toggle) ── */
.cr-hero{margin-top:8px}
.cr-hero-grid{display:grid;grid-template-columns:auto minmax(220px,1.05fr) minmax(0,1.7fr);gap:26px;align-items:center;margin-top:6px}
.cr-hero-mid{min-width:0}
.cr-hero-mid .cr-hero-lead{margin:0 0 12px}
.cr-hero-dials{border-left:1px solid var(--line);padding-left:24px}
.cr-hero-dials .cr-ring-row{margin-top:0;gap:14px 8px}
.cr-hero-dials .cr-ring{width:84px}
.cr-hero-dials .cr-cov-foot{margin-top:12px;padding-top:11px}
@media(max-width:1180px){.cr-hero-grid{grid-template-columns:auto 1fr;gap:20px}
  .cr-hero-dials{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:16px}}
@media(max-width:680px){.cr-hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cr-hero-mid{text-align:left}.cr-hero-dials .cr-ring-row{grid-template-columns:repeat(4,1fr);display:grid;justify-items:center}}

/* What's Happening Now — horizontal product-specific strip */
.cr-activity{margin-top:16px}
.cr-act-viewall{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--teal);text-decoration:none}
.cr-act-viewall .ic{width:13px;height:13px}
.cr-act-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:10px}
.cr-act-card{background:linear-gradient(180deg,var(--bg-card-2),var(--bg-card));border:1px solid var(--line);border-radius:13px;padding:12px 14px;min-width:0}
.cr-act-card .cr-act-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cr-act-card .cr-act-ic{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--bg-soft);border:1px solid var(--line);color:var(--teal)}
.cr-act-card .cr-act-ic .ic{width:15px;height:15px}
.cr-act-when{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--hint);white-space:nowrap}
.cr-act-when .cr-act-dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px var(--emerald)}
.cr-act-card .cr-act-title{font-size:12.5px;font-weight:600;color:var(--text-strong);line-height:1.3;margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cr-act-card .cr-act-ctx{font-size:11px;color:var(--muted);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
/* sidebar help item */
.recv-help{display:flex;align-items:center;gap:9px;margin-top:8px;padding:10px 12px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg-soft);text-decoration:none;color:var(--text)}
.recv-help:hover{border-color:var(--line-2)}
.recv-help .ic{width:16px;height:16px;color:var(--muted)}
.recv-help b{display:block;font-size:12px;color:var(--text-strong);font-weight:600}
.recv-help span{font-size:10.5px;color:var(--muted)}

/* receiving line card — mobile: 2-col fields, no horizontal overflow */
@media(max-width:1080px){
  /* the single mobile column must shrink below its content's min-width, or wide flex
     children (search bar, chips, fields) force the whole page to overflow sideways */
  .cols{grid-template-columns:minmax(0,1fr)}
  #active-area,.cols > *{min-width:0}
}
@media(max-width:680px){
  .fields,.fields-row{grid-template-columns:1fr 1fr}
  .fields label,.fields input,.fields select,.gtin-input,.gtin-input-wrap{min-width:0}
  .fld-gtin{grid-column:1/-1}
  .rc-head{flex-wrap:wrap;gap:8px}
  .rc-head .badges{flex-wrap:wrap}
  .rc-card,.saved-row{overflow:hidden}
  .match-top{flex-wrap:wrap}
  .ec-toolbar,.ec-search,.ec-search input{min-width:0}
  .seg{overflow-x:auto;flex-wrap:nowrap}
}

/* ── Save & go live: explicit LIVE-write button + per-target preview modal ──── */
.btn-live{background:linear-gradient(180deg,#ff7a59,#f0492f);color:#1a0a06;border:1px solid #ff8b6b;
  font-weight:700;box-shadow:0 6px 20px rgba(240,73,47,.28)}
.btn-live:hover{filter:brightness(1.05)}
.btn-live[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
body.recv.light .btn-live{color:#fff}
.cam-card-wide{max-width:680px;width:96vw}
.gl-eyebrow{color:#ff8b6b}
.gl-warn{background:rgba(240,73,47,.10);border:1px solid rgba(240,73,47,.32);border-radius:10px;padding:9px 12px;color:var(--text)}
.gl-warn b{color:#ff9c7f}
.gl-head td:first-child{color:var(--muted);white-space:nowrap;padding-right:14px}
.gl-targets{width:100%;border-collapse:collapse;margin:12px 0 6px;font-size:12.5px}
.gl-targets th{text-align:left;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:4px 8px;border-bottom:1px solid var(--line)}
.gl-targets td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.gl-targets .gl-cb{width:30px}
.gl-targets .gl-det{color:var(--text);font-variant-numeric:tabular-nums}
.gl-targets .gl-det b{color:var(--text-strong)}
.gl-targets .gl-st{color:var(--muted);white-space:nowrap;font-size:11.5px}
.gl-targets tr.gl-on .gl-st{color:var(--emerald)}
.gl-targets tr.gl-off{opacity:.6}
.gl-targets input[type=checkbox]{width:16px;height:16px;accent-color:#f0492f}
.gl-roll{margin-top:8px;font-size:11px;color:var(--muted)}
.gl-roll span{color:var(--text)}
.gl-flag{margin-top:8px;font-size:11.5px;color:var(--amber);background:rgba(61,155,240,.08);border:1px solid rgba(61,155,240,.28);border-radius:8px;padding:7px 10px}

/* new-product create row (editable title + Save & go live) */
.np-create{display:flex;align-items:flex-end;gap:10px;margin-top:12px;flex-wrap:wrap}
.np-title-l{flex:1;min-width:240px;font-size:9.5px;color:#6f8780;display:grid;gap:5px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.np-title{width:100%;padding:10px 12px;color:var(--field);font-size:14px;font-weight:600;background:var(--field-bg);
  border:1px solid var(--line-2);border-radius:var(--radius-xs)}
.np-title:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.badge.b-ok{background:rgba(56,198,255,.12);color:var(--emerald);border:1px solid rgba(56,198,255,.3)}
@media(max-width:680px){.np-create .btn-live{width:100%}}

/* ── Editable retail price + live "points" markup on the receiving line ───────── */
.fields-row-2 .tu-block{flex:0 1 auto;min-width:0}        /* Total units no longer hogs the row */
.fields-row-2 .tu-block .tu-row{white-space:nowrap}
.price-block{display:flex;align-items:flex-end;gap:9px;flex:0 1 auto}
.price-l{font-size:9.5px;color:#6f8780;display:grid;gap:5px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.price-wrap{position:relative;display:inline-flex;align-items:center}
.price-cur{position:absolute;left:11px;color:var(--muted);font-size:14px;font-weight:600;pointer-events:none}
.price-input{width:104px;padding:10px 11px 10px 22px;color:var(--field);font-size:14px;font-weight:600;background:var(--field-bg);
  border:1px solid var(--line-2);border-radius:var(--radius-xs);font-variant-numeric:tabular-nums}
.price-input:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.price-points{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:6px 9px;border-radius:8px;white-space:nowrap;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:1px}
.price-points.pb-good{color:var(--emerald);border-color:rgba(56,198,255,.3)}
.price-points.pb-ok{color:var(--teal);border-color:var(--line-2)}
.price-points.pb-mid{color:var(--amber);border-color:rgba(61,155,240,.32)}
.price-points.pb-low{color:var(--red);border-color:rgba(255,125,125,.3)}
@media(max-width:680px){.price-block{flex:1 1 100%}.price-input{flex:1;width:auto}}

/* ── Best-before as a dd/mm/yyyy text field + calendar button (native picker hidden) ── */
.bbd-field{position:relative;display:block}
.bbd-text{width:100%;padding:10px 36px 10px 11px;color:var(--field);font-size:14px;font-weight:600;background:var(--field-bg);
  border:1px solid var(--line-2);border-radius:var(--radius-xs);font-variant-numeric:tabular-nums;letter-spacing:.03em;-webkit-appearance:none;appearance:none}
.bbd-text:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,168,232,.16)}
.bbd-text::placeholder{color:var(--hint);font-weight:500;letter-spacing:0}
.bbd-cal{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-items:center;
  background:none;border:0;color:var(--muted);cursor:pointer;border-radius:7px}
.bbd-cal:hover{color:var(--teal);background:var(--bg-soft)}
.bbd-cal .ic{width:16px;height:16px}
/* native date input is rendered (so showPicker works) but visually hidden behind the calendar button */
.bbd-native{position:absolute;right:8px;bottom:2px;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;pointer-events:none}

/* ── Card condense pass (match the operator mockup) ──────────────────────────── */
/* GTIN: label + "GTIN matches" status on ONE line, input below */
.fld-gtin-top{display:flex;align-items:center;gap:8px}
.fld-gtin .gtin-status-mini{flex:1;margin-left:0;text-align:left;padding:3px 9px;font-size:9px}
/* Retail price: label on top, field + points on one row at matching height */
.price-block{display:grid;gap:5px;align-content:end}
.price-l-top{font-size:9.5px;color:#6f8780;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.price-row{display:flex;align-items:stretch;gap:8px}
.price-wrap{display:inline-flex;align-items:center}
.price-input{width:94px}
.price-points{margin-bottom:0;display:inline-flex;align-items:center;padding:0 12px;line-height:1}
/* second row: Total units + Retail price left, action buttons pushed right, bottoms aligned */
.fields-row-2{align-items:flex-end}
.fields-row-2 .fields-actions{margin-left:auto}
/* compact foot: price line + Square check/history on one line (no "Shopify <barcode>") */
.gtin-meta{gap:12px;margin-top:8px;align-items:center}
.gtin-meta .lf-price{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.gtin-meta .lf-price strong{color:var(--text-strong)}
.gtin-meta .gtin-mini{margin-left:0}
.rc-meta{margin-top:6px}

/* ============================================================================
   CONTROL ROOM — mockup layout (appended last so it wins on source order)
   Top row: Content Health (gauge+summary) · Content Health Scores (2x4 dials) ·
   Value Created. Then full-width activity. Then ONE row of six module cards.
   ============================================================================ */
.cr-top3{display:grid;grid-template-columns:1.05fr 1.25fr 1fr;gap:16px;margin-top:8px;align-items:stretch}
.cr-top3 > .card{padding:16px 18px;display:flex;flex-direction:column}
/* kill the legacy .cr-hero{grid-column:span 2} so it sits in one column here */
.cr-top3 .cr-hero{grid-column:auto;align-items:stretch;gap:0}
.cr-six{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-top:14px;align-items:start}
.cr-six > .card{padding:14px 15px}

/* Edge-bleed fix: base .card has NO padding; these never added any. */
.cr-activity,.cr-value{padding:16px 18px}
.cr-activity .cr-act-strip{margin-top:12px}

/* Content Health card: gauge + summary side by side, vertically centred. */
.cr-hero-body{display:flex;align-items:center;gap:18px;flex:1}
.cr-hero-mid{min-width:0}

/* Content Health Scores: clean 2x4 dial grid. */
.cr-scores{display:flex;flex-direction:column}
.cr-scores .cr-ring-row{display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px 6px;justify-items:center;margin:10px 0 0;flex:1;align-content:center}
.cr-scores .cr-cov-foot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}

/* Bigger, more central Content Health donut. */
.cr-gauge,.bigdial{width:200px;height:200px}
.cr-gauge-num{font-size:52px}
.cr-gauge-num span{font-size:17px}

/* Compact the dials so 4 fit per row in the narrower scores card. */
.cr-scores .cr-ring{width:auto}
.cr-scores .ring{width:64px;height:64px}
.cr-scores .cr-ring-val{top:20px;font-size:15px}
.cr-scores .cr-ring-lbl{font-size:10px;margin-top:5px}

/* Six-card row: tighter stat sizing so they fit at 6-up. */
.cr-six .cr-stat b{font-size:30px}
.cr-six .cr-card-head{font-size:12px}
.cr-six .cr-row{font-size:11.5px}

/* Mockup-accurate sizing: generous donut, large dials, roomy cards — but an
   efficient layout (3 top cards, 1 activity line, 6-card row) so it still fits. */
.recv-top{margin-bottom:8px}
.cr-top3{margin-top:6px;gap:15px}
.cr-top3 > .card{padding:15px 18px}
.cr-gauge,.bigdial{width:188px;height:188px}
.cr-gauge-num{font-size:48px}
.cr-gauge-num span{font-size:16px}
.cr-hero-body{gap:18px}
.cr-hero-lead{margin:0 0 9px;font-size:12px;line-height:1.45}
.cr-hl-row{padding:3px 0;font-size:12.5px}
.cr-nextbest{margin-top:9px}
.cr-trend{margin-top:8px}
.cr-value-hero{margin:4px 0 12px}
.cr-value-num{font-size:36px}
.cr-value-bars{gap:9px;margin-bottom:11px}
.cr-value-net{padding:11px 14px}
.cr-value-net b{font-size:23px}
.cr-value-stats{margin-top:9px}
.cr-scores{padding:15px 18px}
.cr-scores .cr-ring-row{gap:15px 6px;margin-top:8px}
.cr-scores .ring{width:68px;height:68px}
.cr-scores .cr-ring-val{top:22px;font-size:16px}
.cr-scores .cr-ring-lbl{font-size:10.5px;margin-top:6px}
/* tighter activity + six-row to reclaim height without shrinking the dials/donut */
.cr-activity{margin-top:11px}
.cr-act-card{padding:11px 13px}
.cr-act-card .cr-act-top{margin-bottom:6px}
.cr-six{margin-top:11px;gap:12px}
.cr-six > .card{padding:13px 14px}
.cr-six .cr-stat{margin:2px 0 6px}
.cr-six .cr-row{padding:3px 0}
/* What's Happening Now: ONE horizontal-scroll line, not a wrapping 2-row grid. */
.cr-activity{margin-top:12px}
.cr-act-strip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:11px;margin-top:10px;
  padding-bottom:4px;scrollbar-width:thin;scroll-snap-type:x proximity}
.cr-act-card{flex:0 0 226px;scroll-snap-align:start}
.cr-six{margin-top:12px;gap:12px}

@media(max-width:1040px){.cr-top3{grid-template-columns:1fr 1fr}.cr-top3 .cr-value{grid-column:1/-1}}
@media(max-width:1280px){.cr-six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cr-top3,.cr-six{grid-template-columns:1fr}}

/* Shopify price + Square price as two symmetric price+points columns. */
.price-cols{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.price-col{display:flex;flex-direction:column;gap:5px}

/* ── Go-live job status: line badges + bottom-right toasts (durable job feedback) ── */
.gl-status{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; font-size:12px;
  font-weight:600; letter-spacing:.01em; vertical-align:middle; }
.gl-status.gl-writing{ color:var(--cyan); }
.gl-status.gl-done{ color:var(--emerald); }
.gl-status.gl-failed{ color:var(--amber); }
.gl-spin{ width:11px; height:11px; border-radius:50%; border:2px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  border-top-color:var(--cyan); display:inline-block; animation:gl-spin .7s linear infinite; }
@keyframes gl-spin{ to{ transform:rotate(360deg); } }
.gl-badge-retry,.gl-toast-retry{ margin-left:8px; cursor:pointer; border:1px solid var(--line-2);
  background:var(--bg-card-2); color:var(--cyan); border-radius:7px; padding:2px 10px; font-size:12px;
  font-weight:600; transition:background .15s var(--ease,ease), border-color .15s; }
.gl-badge-retry:hover,.gl-toast-retry:hover{ background:var(--bg-soft); border-color:var(--cyan); }

.gl-toasts{ position:fixed; right:18px; bottom:18px; z-index:9000; display:flex; flex-direction:column;
  gap:10px; max-width:360px; pointer-events:none; }
.gl-toast{ pointer-events:auto; display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:12px; background:var(--bg-card); border:1px solid var(--line-2);
  box-shadow:0 12px 34px rgba(0,0,0,.45); color:var(--field,#e8eef0); font-size:13.5px; font-weight:550;
  transform:translateY(0); opacity:1; transition:opacity .4s var(--ease,ease), transform .4s var(--ease,ease); }
.gl-toast.gl-good{ border-left:3px solid var(--emerald); }
.gl-toast.gl-bad{ border-left:3px solid var(--amber); }
.gl-toast.gl-out{ opacity:0; transform:translateY(8px); }
.gl-toast>span{ flex:1; }

/* "Live on shop" badge — verified from the inventory write-audit log (not the stale status field). */
.badge.b-live{ background:color-mix(in srgb, var(--emerald) 20%, transparent); color:var(--emerald);
  border:1px solid color-mix(in srgb, var(--emerald) 48%, transparent); font-weight:700; }

/* ══════════════════════════════════════════════════════════════════════════════
   POLISH PASS (8 Jul) — energetic pills, livelier LIVE badge, light-mode with life.
   Appended last so it wins over earlier rules at equal specificity.
   ══════════════════════════════════════════════════════════════════════════════ */
:root{ --grad:linear-gradient(135deg,#1d6fb8,#25b8f5); --grad-soft:linear-gradient(135deg,rgba(37,184,245,.16),rgba(29,111,184,.10)); }

/* SELECTED / ACTIVE PILLS — solid gradient, white ink, a lift. No more muddy tints. */
.seg a.active,
.cr-pace.on, .cr-scope-opt.on, .cr-vwin-opt.on,
.room-tabs a.on{
  background:var(--grad) !important; color:#fff !important;
  box-shadow:0 4px 14px -4px rgba(37,184,245,.55), inset 0 1px 0 rgba(255,255,255,.28);
  font-weight:700; border-color:transparent !important;
}
.seg a.active .seg-n{ background:rgba(255,255,255,.22) !important; color:#fff !important; }
.room-tabs a.on{ border-bottom:none; border-radius:9px; padding:.5rem .95rem; }
.room-tabs{ gap:.35rem; }
/* the window row (today/7d/...) reads as one connected control */
.seg{ background:var(--bg-soft); }

/* LIVE badge — a real signal: soft fill, bright ink, a pulsing haloed dot. */
.cr-live-badge{
  color:var(--teal); background:var(--grad-soft);
  border:1px solid rgba(37,184,245,.32); font-size:9.5px; padding:2px 9px;
}
.cr-live-badge .d{ width:6px; height:6px; background:var(--teal);
  box-shadow:0 0 0 0 rgba(37,184,245,.55); animation:cr-halo 1.9s ease-out infinite; }
@keyframes cr-halo{ 0%{box-shadow:0 0 0 0 rgba(37,184,245,.55)} 70%{box-shadow:0 0 0 6px rgba(37,184,245,0)} 100%{box-shadow:0 0 0 0 rgba(37,184,245,0)} }

/* the loop "Running" state pill — solid, alive */
.cr-loop-state.on{ background:var(--grad) !important; color:#fff !important; border-color:transparent !important; }

/* ── LIGHT MODE, with energy ─────────────────────────────────────────────────
   A cool blue-tinted ground + two faint corner glows so white doesn't read dead,
   crisper blue-tinted card edges and shadows, and a brighter working accent. */
body.recv.light{
  --teal:#0F6FE0; --teal-deep:#0B52B8; --cyan:#1183C0;
  --line:rgba(24,72,128,.14); --line-2:rgba(24,72,128,.22);
  --bg-root:#e9f0f9;
  --shadow:0 22px 46px -26px rgba(20,60,120,.28);
  --shadow-sm:0 1px 0 rgba(255,255,255,.8),0 10px 24px -18px rgba(20,60,120,.18);
  background:
    radial-gradient(900px 480px at 100% -6%, rgba(37,184,245,.10), transparent 60%),
    radial-gradient(760px 420px at -6% 2%, rgba(29,111,184,.09), transparent 58%),
    var(--bg-root) !important;
}
body.recv.light .cr-live-badge{ color:#1160b0; background:linear-gradient(135deg,rgba(37,184,245,.14),rgba(29,111,184,.08)); border-color:rgba(29,111,184,.26); }
body.recv.light .card,body.recv.light .rc-card,body.recv.light .cr-card,body.recv.light .panel{ box-shadow:var(--shadow-sm); border-color:var(--line); }
/* light-mode cards get a whisper of blue in the border-top for lift */
body.recv.light .cr-card,body.recv.light .card{ border-top:1px solid rgba(37,184,245,.22); }

/* ============ SIDEBAR ACCORDION + COLLAPSIBLE RAIL (Customers v2, Phase 2) ============ */
/* Desktop: the sidebar is STICKY to the top-left and stays put while the page scrolls; its own
   nav scrolls internally if it overflows. Scoped to desktop so it never overrides the mobile
   off-canvas drawer (which is position:fixed at line ~333) — an unscoped position:relative here
   used to clobber that, taking full-height layout space and shoving mobile content far down. */
@media(min-width:861px){ .recv-side{position:sticky;top:0;height:100vh} }
.recv-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.recv-side .spacer{flex:0 0 6px}
.recv-collapse{position:absolute;top:16px;right:12px;width:26px;height:26px;display:inline-flex;
  align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--line-2);
  border-radius:8px;color:var(--muted);cursor:pointer;z-index:4;padding:0}
.recv-collapse svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.recv-collapse:hover{color:var(--text-strong);border-color:var(--line-3)}
body.nav-collapsed .recv-collapse svg{transform:rotate(180deg)}

.recv-room{display:flex;flex-direction:column}
.recv-room-hd{display:flex;align-items:center;gap:2px}
.recv-room-hd>.recv-room-link{flex:1;min-width:0}
.recv-caret{flex:0 0 auto;width:26px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--hint);cursor:pointer;border-radius:8px;padding:0;
  transition:transform .2s var(--ease),color .15s}
.recv-caret svg{width:13px;height:13px}
.recv-caret:hover{color:var(--text)}
.recv-room.open>.recv-room-hd>.recv-caret{transform:rotate(90deg);color:var(--teal)}

.recv-subnav{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:0;
  margin:1px 0 3px 25px;padding-left:12px;border-left:1px solid var(--line-2);
  transition:max-height .26s var(--ease),opacity .2s;opacity:.5}
.recv-room.open>.recv-subnav{max-height:640px;opacity:1}
.recv-subnav a.recv-sub{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;
  font-size:12.5px;font-weight:500;color:var(--muted);position:relative;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.recv-subnav a.recv-sub:hover{color:var(--text-strong);background:rgba(120,162,216,.07)}
.recv-subnav a.recv-sub.on{color:var(--text-bright);font-weight:650;background:rgba(15,111,224,.10)}
.recv-subnav a.recv-sub.on::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--teal)}
.recv-subnav a.recv-sub .rt-badge{margin-left:auto;font-size:10px;font-weight:700;background:var(--teal);
  color:#fff;border-radius:999px;padding:1px 6px}

/* collapsed rail — desktop only; mobile keeps the off-canvas drawer */
@media(min-width:861px){
  body.nav-collapsed .recv-app{grid-template-columns:68px minmax(0,1fr)}
  body.nav-collapsed .recv-side{padding-left:9px;padding-right:9px}
  body.nav-collapsed .recv-brand,
  body.nav-collapsed .recv-side .lbl,
  body.nav-collapsed .recv-search,
  body.nav-collapsed .recv-subnav,
  body.nav-collapsed .recv-caret,
  body.nav-collapsed .nav-badge,
  body.nav-collapsed .theme-toggle,
  body.nav-collapsed .recv-console .rc-con-txt,
  body.nav-collapsed .recv-console .chev,
  body.nav-collapsed .recv-help .rc-con-txt,
  body.nav-collapsed .brunel-appbar .appbar-btn span{display:none}
  body.nav-collapsed .recv-nav a,
  body.nav-collapsed .recv-room-link{justify-content:center;padding:10px 0}
  body.nav-collapsed .recv-room-hd{justify-content:center}
  body.nav-collapsed .recv-console,
  body.nav-collapsed .recv-help,
  body.nav-collapsed .brunel-appbar .appbar-btn{justify-content:center}
  body.nav-collapsed .recv-collapse{top:12px;right:50%;transform:translateX(50%)}
  body.nav-collapsed .recv-nav{margin-top:44px}
}

/* ============ Customers v2 Phase 3 — nav + chrome polish (wins; appended last) ============ */
/* 1. sidebar reads BLUE not green (nav text + light sidebar wash) */
.recv-nav a,.recv-room-link{color:#9fb2c9}
body.recv.light .recv-nav a,body.recv.light .recv-room-link{color:var(--muted)}
body.recv.light .recv-nav a:hover,body.recv.light .recv-room-link:hover{color:var(--text-strong)}
body.recv.light .recv-side{background:linear-gradient(180deg,#ffffff,#eef3fb)}
body.recv.light .recv-brand .ops{color:var(--muted)}

/* 2. accordion: no indent, no vertical rule — the lack of icons is enough grouping */
.recv-subnav{margin:0 0 4px;padding-left:0;border-left:0}
.recv-subnav a.recv-sub{padding:6px 11px}
.recv-subnav a.recv-sub.on::before{display:none}

/* 3. the sidebar is static and never shows a scrollbar; the nav scrolls internally if an open
      accordion overflows, but the bar itself does not move and the scrollbar is hidden */
.recv-nav{scrollbar-width:none}
.recv-nav::-webkit-scrollbar{width:0;height:0;display:none}

/* 4. collapsed rail never shows the photo count */
body.nav-collapsed .nav-badge{display:none!important}

/* 5. slim, subtle search — not a fat box */
.recv-search{position:relative;margin:2px 0 10px}
.recv-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--hint);pointer-events:none}
.recv-search input{width:100%;box-sizing:border-box;height:34px;padding:0 11px 0 33px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--text);font-size:12.5px}
.recv-search input::placeholder{color:var(--hint)}
.recv-search input:focus{outline:0;border-color:var(--teal);background:var(--bg-card)}
body.nav-collapsed .recv-search svg{display:none}

/* 6. global refresh lives in the sidebar header (was floating over page content) */
.recv-refresh-fixed{display:none!important}
.recv-side-tools{position:absolute;top:14px;right:11px;display:flex;gap:6px;z-index:4}
.recv-side-tools button{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-card);border:1px solid var(--line-2);border-radius:8px;color:var(--muted);cursor:pointer;padding:0}
.recv-side-tools button:hover{color:var(--text-strong);border-color:var(--line-3)}
.recv-side-tools button svg{width:15px;height:15px;transition:transform .2s var(--ease)}
body.nav-collapsed .recv-side-tools{top:12px;right:50%;transform:translateX(50%);flex-direction:column}
body.nav-collapsed .js-nav-collapse svg{transform:rotate(180deg)}

/* 7. the store-health / section pills were cropping their descenders */
.ph-subnav a{padding:7px 15px;line-height:1.5}

body.nav-collapsed .recv-nav{margin-top:80px}

/* ══════════════════════════════════════════════════════════════════════════════
   GBS gradient on every blue button/pill in LIGHT mode — the Install-app button
   gradient (#1d6fb8 → #25b8f5). Appended last so it wins over the earlier
   body.recv.light token block at equal specificity. Dark mode keeps its teal.
   ══════════════════════════════════════════════════════════════════════════════ */
body.recv.light{
  --grad:linear-gradient(135deg,#1d6fb8,#25b8f5);
  --grad-accent:linear-gradient(135deg,#1d6fb8,#25b8f5);
}
/* Primary/save/CTA buttons that set a flat blue background pick up the gradient too. */
body.recv.light .btn-primary,
body.recv.light .btn-live,
body.recv.light .appbar-btn{
  background:linear-gradient(135deg,#1d6fb8,#25b8f5);color:#fff;border-color:transparent;
}