/* ===================================================================
   THEME LAYER — "cyberpunk" (default theme)
   To add a new theme: copy this file to theme-<name>.css, change only
   the variables in :root, and swap the <link> in index.html (or make
   it a settings-driven <link id="theme-link"> swap later).
   =================================================================== */
:root {
  --bg: #06080f;
  --bg-panel: #0b0f1a;
  --bg-panel-2: #0e1424;
  --fg: #b9c8e0;
  --fg-dim: #566b8f;
  --fg-bright: #e8f0ff;
  --border: #1c2740;
  --cyan: #35e8ff;
  --magenta: #ff4fd8;
  --warn: #ffcc33;
  --danger: #ff4f6d;
  --title-yellow: #ffe045;
  --sync-orange: #ff9d35;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* status pill colors -- solid neon fills, one per status bucket */
  --status-instock-bg: #33ff88;
  --status-instock-text: #042b18;
  --status-discontinued-bg: #3a3a3a;
  --status-discontinued-text: #c8c8c8;
  --status-outofstock-bg: #ff1a1a;
  --status-outofstock-text: #3a0000;
  --status-exclusive-bg: #ff4fd8;
  --status-exclusive-text: #430c33;
}

* { box-sizing: border-box; }

/* Custom checkbox styling, applied globally -- a native browser
   checkbox (a plain grey square) reads jarringly out of place against
   everything else in this app deliberately styled to match the
   cyberpunk theme. appearance:none strips the native rendering
   entirely, replaced with a themed box that lights up cyan when
   checked, drawn as a simple checkmark via a clip-path rather than an
   image asset (so it recolors for free if the accent color ever
   changes, and needs no extra file). Sized a little larger than
   default (16px) since a fully custom checkbox is otherwise easy to
   miss/misclick at native browser sizing, especially at this app's
   generally small font sizes.
   Deliberately does NOT restyle a checkbox that's inside a native
   <select> or other browser-chrome context, only ones this app
   renders directly as an actual clickable option (there are none of
   the former in this app, but the exclusion is here as a guard in
   case that ever changes). */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg-panel);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease;
}
input[type="checkbox"]:hover {
  border-color: var(--cyan);
}
input[type="checkbox"]:checked {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 6px rgba(53, 232, 255, 0.5);
}
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #04121a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* v2.31.319: radios themed the same way (the native one read as filled on the dark theme) */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--bg-panel);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  margin: 0;
  transition: border-color 0.12s ease;
}
input[type="radio"]:hover { border-color: var(--cyan); }
input[type="radio"]:checked { border-color: var(--cyan); box-shadow: 0 0 6px rgba(53, 232, 255, 0.45); }
input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cyan); }
input[type="radio"]:disabled { opacity: 0.4; cursor: not-allowed; }
input[type="radio"]:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
input[type="checkbox"]:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: 2px;
}
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-mono); font-size: 14.5px;
  display: flex;
  padding-bottom: 32px; /* reserves space for the collapsed debug bar so it never overlaps content */
}
a { color: inherit; }

/* v2.31.276: nav rail -- line icons in neon tube colors per group; hover
   slides it open over the page with names, group headings and keys */
.sidebar { width: 64px; flex: none; position: relative; z-index: 60; }
.nav-rail {
  position: absolute; top: 0; left: 0; bottom: 0; width: 64px; overflow: hidden;
  background: #070a12; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: stretch; padding: 14px 9px; gap: 2px;
  transition: width .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s;
}
@media (hover: hover) { .nav-rail:hover { width: 212px; transition-delay: .12s; box-shadow: 10px 0 34px rgba(0, 0, 0, .55); } }  /* v2.31.292: touch screens (iPad) never get a stuck-open rail */
.nav-rail .logo { color: var(--cyan); font-size: 18px; height: 34px; margin-bottom: 8px; padding-left: 14px; display: flex; align-items: center; gap: 12px; white-space: nowrap; text-shadow: 0 0 10px rgba(53,232,255,.6); }
.nav-brand { font-size: 12px; font-weight: bold; letter-spacing: .08em; opacity: 0; transition: opacity .15s; }
.icon-btn {
  --g: var(--cyan);
  position: relative; flex: none; height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 13px;
  color: var(--g); cursor: pointer; border-radius: 6px; font-size: 16px; white-space: nowrap; opacity: .5;
  transition: opacity .15s, background .15s;
}
.icon-btn[data-g="home"] { --g: #33ff88; }
.icon-btn[data-g="ops"] { --g: #35e8ff; }
.icon-btn[data-g="cat"] { --g: #ff4fd8; }
.icon-btn[data-g="ppl"] { --g: #ffe045; }
.icon-btn[data-g="sys"] { --g: #c9d6f0; }
.icon-btn[data-view="status"] { --g: #ff4fd8; }  /* v2.31.287: same pink as the SHEVIBE STATUS title */
.nav-ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px var(--g)); }
.icon-btn:hover { opacity: .9; background: color-mix(in srgb, var(--g) 7%, transparent); }
.icon-btn.active { opacity: 1; background: color-mix(in srgb, var(--g) 11%, transparent); box-shadow: inset 2px 0 0 var(--g); }  /* v2.31.287: no flicker */
.icon-btn.active .nav-ic { filter: drop-shadow(0 0 4px var(--g)) drop-shadow(0 0 10px var(--g)); }
@media (prefers-reduced-motion: reduce) { .nav-rail { transition: none; } }
.icon-btn.disabled { opacity: .3; cursor: default; }
.nav-l { font-size: 12px; color: var(--fg); opacity: 0; transition: opacity .15s; }
.icon-btn.active .nav-l { color: var(--g); text-shadow: 0 0 8px color-mix(in srgb, var(--g) 60%, transparent); }
.icon-btn kbd { margin-left: auto; font: 9px var(--font-mono); color: #3a4f73; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; opacity: 0; transition: opacity .15s; }
.nav-hd { --g: var(--border); position: relative; flex: none; height: 16px; margin: 3px 0; }
.nav-hd::before { content: ""; position: absolute; left: 12px; width: 22px; top: 50%; height: 1px; background: var(--border); transition: opacity .15s; }
.nav-hd span { position: absolute; left: 13px; top: 2px; font-size: 8.5px; letter-spacing: .2em; white-space: nowrap; opacity: 0; transition: opacity .15s; }
.nav-hd[data-g="ops"] span { color: #35e8ff99; } .nav-hd[data-g="cat"] span { color: #ff4fd899; }
.nav-hd[data-g="ppl"] span { color: #ffe04599; } .nav-hd[data-g="sys"] span { color: #c9d6f099; }
.nav-sp { flex: 1; min-height: 8px; }
@media (hover: hover) { .nav-rail:hover .nav-l, .nav-rail:hover kbd, .nav-rail:hover .nav-hd span, .nav-rail:hover .nav-brand { opacity: 1; } }  /* v2.31.292: touch screens (iPad) never get a stuck-open rail */
@media (hover: hover) { .nav-rail:hover .nav-hd::before { opacity: 0; } }  /* v2.31.292: touch screens (iPad) never get a stuck-open rail */

.shell { flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.header {
  display: flex; align-items: center; gap: 16px; padding: 12px 20px;
  border-bottom: 1px solid var(--border); background: var(--bg-panel);
}
.header .title { color: var(--fg-bright); font-size: 13px; white-space: nowrap; }
.header .title::before { content: "▍"; color: var(--magenta); margin-right: 6px; }

.brand-mark {
  position: relative; overflow: hidden; padding: 4px 12px; border-left: 1px solid var(--border);
  margin-left: auto; white-space: nowrap;
}
.brand-text {
  font-family: var(--font-mono); font-weight: bold; font-size: 14px; letter-spacing: 0.5px;
  color: var(--cyan); text-shadow: 0 0 6px rgba(53,232,255,0.65), 0 0 14px rgba(53,232,255,0.3);
}
.brand-version { color: var(--fg-dim); font-size: 11px; font-weight: normal; margin-left: 2px; }
/* Not just decorative anymore -- this is the live connection indicator.
   Keeps its blink (still an "always alive" cue at a glance) but the
   COLOR now carries real meaning: normal cyan when everything's fine,
   red the moment any vendor has a connection issue or the API goes
   unreachable. Replaces the separate pulsing status dot this used to
   sit next to, which was redundant with this once repurposed. */
.brand-cursor { color: var(--cyan); margin-left: 2px; animation: brand-blink 1.1s steps(1) infinite; }
.brand-cursor.error { color: var(--danger); }
@keyframes brand-blink { 50% { opacity: 0; } }
.brand-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(53,232,255,0.06) 0px, rgba(53,232,255,0.06) 1px, transparent 1px, transparent 3px
  );
}
.search-wrap {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); padding: 7px 12px; border-radius: 4px;
}
.search-wrap input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--fg-bright);
  font-family: var(--font-mono); font-size: 14.5px;
}
#vendor-filter {
  background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: 4px;
  width: auto; min-width: 160px;
}

.view { display: none; overflow: auto; }
.view.active { display: block; }

/* Side panel size (v2.31.91, Settings -> Advanced): --panel-scale is 1-2.
   Every body-grid's panel column widens by the same factor the panel is
   zoomed, so the panel's own layout never changes -- the main table
   gives up the room instead. */
:root { --panel-scale: 1; --list-scale: 1; }
/* v2.31.218: one side-panel width for every view (was 300/360/375/390
   depending on the module) so the panel reads the same everywhere. */
:root { --panel-w: 375px; }
.body-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--panel-w) * var(--panel-scale)); overflow: hidden; }
.body-grid.active { display: grid; }

table { width: 100%; border-collapse: separate; border-spacing: 0; }
th {
  text-align: left; padding: 8px 10px; color: var(--fg-dim); font-weight: normal; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 2;
}
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--fg-bright); }
th.sortable .sort-arrow { display: inline-block; width: 10px; color: var(--cyan); }
td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
tr:hover:not(.pu-det):not(.pu-det *):not(.open) > td { background: rgba(53,232,255,0.05); }   /* v2.31.491: no roll-over inside an opened row */
/* The order currently open in the side panel (v2.31.56) -- also what the
   up/down arrow keys move. */
tr.order-row-selected td, tr.row-selected td, tr.kb-sel td { background: rgba(53,232,255,0.09); }
tr.order-row-selected td:first-child, tr.row-selected td:first-child, tr.kb-sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.badge { display: inline-block; padding: 4px 13px; border-radius: 999px; font-size: 11px; font-weight: bold; letter-spacing: .2px; }
.badge.instock { background: var(--status-instock-bg); color: var(--status-instock-text); }
.badge.discontinued { background: var(--status-discontinued-bg); color: var(--status-discontinued-text); }
.badge.outofstock { background: var(--status-outofstock-bg); color: var(--status-outofstock-text); }
.badge.exclusive { background: var(--status-exclusive-bg); color: var(--status-exclusive-text); }
/* Plain visual indicator in the orders table -- open circle for
   unfulfilled, filled cyan for partially fulfilled, filled green for
   fulfilled. Not interactive itself; clicking anywhere in the row
   already opens the detail panel where the real tracking numbers
   (grouped by which vendor's shipment they belong to) actually live. */
.track-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.track-dot.none { background: transparent; border: 1.5px solid var(--fg-dim); }
.track-dot.partial { background: var(--cyan); }
.track-dot.full { background: var(--status-instock-bg); }
.track-dot.locked { background: var(--status-exclusive-bg); }
/* Deliberately NOT var(--danger) (#ff4f6d) -- too close to the locked
   dot's pink (#ff4fd8), just one channel apart, which defeats the
   point of an at-a-glance indicator for the single most urgent state.
   Orange reads as "warning" on its own and can't be confused with
   pink from across the room. */
.track-dot.danger { background: #ff9500; }

.order-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
}
/* Shopify status: outline style always -- border/text pick up a
   consistent cyan once it's actually the active selection (a per-
   button --filter-color used to drive this; now every one of these
   dropdowns shares one plain, neutral look, so a single fallback
   color here is simpler than threading a custom property through
   each one for no real benefit). */
.order-filter-btn:not(.order-filter-btn-fill).active {
  border-color: var(--filter-color, var(--cyan)); color: var(--filter-color, var(--cyan));
}
/* Our own system status: filled/colored always, per direct request
   ("color buttons for our status, outline for others") -- these carry
   their color as a constant visual signal, not just on selection.
   Active gets a bright outline ring rather than a color change, since
   the color itself is already always showing. */
.order-filter-btn-fill {
  background: var(--filter-color); border-color: var(--filter-color); color: #04121a; font-weight: bold;
}
.order-filter-btn-fill.active {
  outline: 2px solid var(--fg-bright); outline-offset: 1px;
}
/* Crossdock PO day selector -- one neon tile per weekday, each carrying
   its own --day-color/--day-color-text pair (set inline per button, same
   convention as --filter-color above) so the whole row reads as a strip
   of distinct, color-coded days rather than uniform pills. Inactive
   tiles stay outlined in their own color at low opacity so the full
   five-day rhythm is visible at a glance even before picking one. */
.day-tile {
  box-sizing: border-box; cursor: pointer; height: 80px; border-radius: 12px;
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--day-color) 35%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-mono);
}
.day-tile .day-tile-letter { font-size: 26px; font-weight: 800; color: var(--day-color); line-height: 1; opacity: .85; }
.day-tile .day-tile-label { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--day-color); opacity: .7; }
.day-tile.active {
  background: var(--day-color); border-color: var(--day-color);
  box-shadow: 0 0 20px color-mix(in srgb, var(--day-color) 50%, transparent);
}
.day-tile.active .day-tile-letter, .day-tile.active .day-tile-label { color: var(--day-color-text); opacity: 1; }
/* v2.31.106: the title is a span INSIDE the cell -- the 2-line clamp
   used to be on the <td> itself (display:-webkit-box), which took it out
   of the table layout: at bigger list sizes the third line showed half
   cut off and the row highlight / borders didn't line up. */
.title-td { min-width: 200px; }
.title-cell {
  color: var(--title-yellow);
  /* Titles wrap into up to 2 lines instead of truncating to one --
     long titles actually get to display, and every row reserves the
     same vertical space so the table doesn't look ragged. Narrower than
     it would otherwise need to be (roughly a third less) specifically
     because the 2-line wrap compensates for the reduced horizontal
     room -- frees up width for everything else in the table/sidebar. */
  max-width: 440px;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}
.mono-num { font-variant-numeric: tabular-nums; color: var(--fg-bright); white-space: nowrap; }
.empty-state { padding: 40px; text-align: center; color: var(--fg-dim); }

.products-scroll { padding: 18px; overflow: auto; height: 100%; }
/* List size (v2.31.92, Settings -> Advanced): the table side of every body-grid. */
.body-grid > .products-scroll { zoom: var(--list-scale); }
/* narrower columns at bigger sizes: keep pills in one piece (the table scrolls sideways instead) */
.products-scroll .vendor-pill, .products-scroll .multiple-vendor-tag { white-space: nowrap; }
/* Sticky column headers stick at the scroll container's CONTENT edge,
   i.e. 18px below its top because of the padding above -- which left an
   18px strip where rows scrolled visibly past ABOVE the header (a
   long-standing bug, fixed v2.31.52). top: -18px (the padding) makes the
   header stick flush against the very top edge instead. At scrollTop 0
   nothing changes, since sticky only kicks in once scrolling starts.
   Keep in sync with the padding above. */
.products-scroll th { top: -18px; }
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px 0; color: var(--fg-dim); font-size: 11.5px;
}
.pagination button.btn:disabled { opacity: .3; cursor: default; }
.pagination button.btn:disabled:hover { border-color: var(--border); color: var(--fg-dim); }
/* v2.31.284: orders rows-per-page picker, sits after "next" */
.pagination .page-size-pick { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-dim); font-size: 11.5px; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--border); }
.pagination .page-size-pick select { width: 72px; }

.side-panel { border-left: 1px solid var(--border); background: var(--bg-panel-2); padding: 16px; overflow: auto; font-size: 13.5px; }
.side-panel { zoom: var(--panel-scale); }
.body-grid > :first-child { min-width: 0; }  /* the table side shrinks/scrolls instead of pushing the panel off-screen */
/* De-emphasized on purpose -- these are section labels, not content. */
.side-panel h4 { color: var(--fg-dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px 0; font-weight: normal; }

.panel-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.panel-tab {
  flex: 1; background: var(--bg); color: var(--fg-dim); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12.5px; padding: 8px 10px; border-radius: 999px;
  cursor: pointer; transition: all .15s;
}
.panel-tab:hover { color: var(--fg-bright); }
.panel-tab.active { background: var(--cyan); color: #04252b; border-color: var(--cyan); font-weight: bold; }

/* Settings: Vendors tab card grid */
.vendor-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.vendor-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px; border-left: 3px solid var(--border); }
.vendor-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vendor-card-head h3 { margin: 0; font-size: 15px; }
.vendor-card-actions { border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 12px; }
.vendor-extras-label { color: var(--fg-dim); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }

.vendor-feeds { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; }
.vendor-feed-row { font-size: 12px; }
/* Grid instead of flex-wrap -- flex-wrap let the button group drop
   onto its own line whenever the row ran short on space (narrower
   vendor cards, more vendors fit per screen width, etc.), which looked
   like a bug even though it was really just responsive wrapping. Fixed
   columns mean the name, dropdown, and buttons each always keep their
   own slot regardless of exactly how narrow the card gets, instead of
   flex deciding on the fly whether something fits. */
.vendor-feed-row-top { display: grid; grid-template-columns: 128px 1fr 80px; align-items: center; gap: 8px; }
/* Narrower than the global select width -- these options are all short
   now ("5 min", "disable", "weekly"), so the default 140px left a lot
   of empty space inside the dropdown for no reason. */
.vendor-feed-row-top select { width: 104px; }
.vendor-feed-name { color: var(--fg-bright); }
.vendor-feed-status { color: var(--fg-dim); font-size: 11px; display: block; margin-top: 3px; }

/* The "show N more sync options" toggle on a vendor card -- collapsed
   by default so a vendor with several rarely-touched feeds (catalog
   alongside inventory, order_status, etc) doesn't clutter the card
   with rows most people never need to look at. */
.vendor-more-sync { margin-top: 10px; }
.vendor-more-sync summary { color: var(--fg-dim); font-size: 10.5px; cursor: pointer; list-style: none; }
.vendor-more-sync summary::-webkit-details-marker { display: none; }
.vendor-more-sync summary:hover { color: var(--fg-bright); }
.vendor-more-sync summary::before { content: "▸ "; }
.vendor-more-sync[open] summary::before { content: "▾ "; }
.vendor-more-sync .vendor-feed-row { margin-top: 10px; }

/* Settings: Routing tab drag list */
.routing-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 14px; margin-bottom: 8px; cursor: grab; user-select: none;
}
.routing-row.dragging { opacity: 0.35; border-style: dashed; }
/* A real, confirmed gap: the shipping mapping cards' own drag-and-drop
   (onShipMapDragStart) has always added a plain "dragging" class with
   no matching rule anywhere -- .routing-row.dragging above is scoped
   to a completely different list (Settings -> Routing's own
   drag-to-reorder), so a card being dragged never actually looked any
   different while in motion. Added while already touching this area's
   styling. */
.shipmap-card.dragging { opacity: 0.35; border-style: dashed; }
.routing-handle { color: var(--fg-dim); font-size: 14px; line-height: 1; }
.routing-rank { color: var(--fg-dim); font-size: 11px; min-width: 16px; text-align: center; }
.routing-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.routing-name { color: var(--fg-bright); font-size: 13px; }
.split-icon { color: var(--magenta); font-size: 11px; margin: 0 4px; }
/* v2.31.278: vendor match = one segmented capsule (ORD | NJ | NAL | ELD) */
.vm-cap { display: inline-flex; vertical-align: middle; border-radius: 999px; overflow: hidden; white-space: nowrap; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.vm-cap > span { font-size: 10px; font-weight: bold; letter-spacing: .3px; text-transform: uppercase; color: #04121a; padding: 3px 9px; line-height: 1.35; }
.vm-cap > span + span { border-left: 1px solid rgba(0,0,0,.45); }

/* Settings: Shipping Mapping card grid -- deliberately mirrors the
   Vendors tab's own .vendor-card-grid/.vendor-card language above
   (same grid approach, same padding, same left-border accent, same
   dashed section divider) rather than the ad hoc, all-inline styling
   this used before, per direct request to make this section look and
   feel like that one. auto-fit/minmax handles the normal single-width
   card; a split mapping (see .shipmap-card.split) spans two grid
   columns instead of needing its own separate min-width value the way
   the old flex-wrap layout did. */
.shipmap-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.shipmap-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 18px; border-left: 3px solid var(--border); }
.shipmap-card.split { grid-column: span 2; }
@media (max-width: 720px) { .shipmap-card.split { grid-column: span 1; } }
.shipmap-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.shipmap-card-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 10.5px; color: var(--fg-dim); }
.shipmap-fields { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 7px; }
.shipmap-split-columns { display: flex; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.shipmap-split-column { flex: 1; min-width: 0; }

.clear-x { cursor: pointer; opacity: 0.7; margin-left: 4px; font-size: 9px; color: var(--fg-dim); }
.clear-x:hover { opacity: 1; color: var(--danger); }
/* Alternate (non-winning) vendor options next to a line item -- greyed
   out at rest so the winner reads clearly first, but not hidden: hover
   reveals the vendor's real color (via a per-element CSS variable, since
   each alternate has a different one), and a click reassigns the item
   to it, same action as dropping it in the split zone below. */
.alt-pill {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,0.08); color: var(--fg-dim); cursor: pointer;
}
.alt-pill:hover { background: var(--hover-color, var(--fg-dim)); color: #04121a; }
/* v2.31.516: test orders -- a vendor that lists the item at 0, pickable anyway */
.alt-pill.alt-zero { background: transparent; border: 1px dashed rgba(255,255,255,0.22); opacity: .7; padding: 0 5px; }
.alt-pill.alt-zero:hover { opacity: 1; border-style: solid; }
/* One wrapping row: winner pill, then alternates (v2.31.42 -- the "|"
   separators and the separate alternates box were dropped). */
.vendor-chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }

/* Quantity reveal on hover -- deliberately NOT a native title tooltip
   (slow to appear, can't be styled, looks out of place next to
   everything else in this theme). Label and value are stacked in the
   same grid cell (both occupying row 1 / column 1) rather than one
   replacing the other inline, so the pill's own size is always
   whichever of the two is larger (always the label) and never changes
   on hover -- toggling visibility, not display, keeps the hidden one's
   space reserved. Letting the pill shrink to fit just the number was
   the actual cause of a flicker loop: the pill shrinks under the
   cursor, the cursor ends up outside it, hover ends, the pill grows
   back, the cursor is over it again, hover restarts -- an oscillation.
   Fixed size in both states avoids that entirely. Shown the instant
   the mouse is over it either way, no transition, no delay. */
.qty-reveal-pill { display: inline-grid; }
/* Higher specificity than .vendor-pill/.alt-pill alone (both single-
   class selectors) so this always wins regardless of stylesheet order --
   .vendor-pill's own "display: inline-block" was silently overriding
   the grid stacking below it needs, which is the actual reason the
   quantity appeared to the right instead of centered on top of the
   label: without real grid stacking, both spans just flowed side by
   side as ordinary inline content, visibility:hidden or not. */
.vendor-pill.qty-reveal-pill, .alt-pill.qty-reveal-pill { display: inline-grid; }
.qty-reveal-label, .qty-reveal-value { grid-area: 1 / 1; text-align: center; }
.qty-reveal-value { visibility: hidden; font-weight: bold; }
.qty-reveal-pill:hover .qty-reveal-label { visibility: hidden; }
.qty-reveal-pill:hover .qty-reveal-value { visibility: visible; }

/* Shipping method picker modal -- a genuine "pick one from a list"
   interaction, not a text edit, so a small centered overlay rather
   than an inline editor. Reused for both the order-level "ship to"
   control and a single Shipping From box's own pill. */
/* Inline shipping picker -- replaces the old ship-modal-overlay popup.
   Slots directly into the pill's own spot in the sidebar (per direct
   request to keep this "all in one place") rather than a separate
   floating dialog. The dropdown-style panel animates open with a
   max-height/opacity transition for the "slides in" feel; closing is
   just the normal re-render swapping this same slot back to the
   plain pill, so no separate close animation is needed. */
.ship-picker-slot { display: inline-block; }
/* Full sidebar takeover for changing an order's shipping method --
   replaces the old small inline popover (still used elsewhere, e.g.
   the multi-select filter dropdowns' own .ship-inline-picker/
   .ship-inline-option classes, reused below for the option rows
   themselves) with a dedicated panel that fully occupies the order
   detail sidebar, per direct request for more room to actually see
   every option clearly. Slides in from the right on open, slides back
   out to the right on both a completed save and a plain cancel/back
   -- the same physical motion either way, since both end with the
   normal detail view underneath being revealed again. */
.ship-takeover {
  position: relative;
  animation: ship-takeover-slide-in 0.18s ease-out;
}
@keyframes ship-takeover-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.ship-takeover.ship-takeover-closing {
  animation: ship-takeover-slide-out 0.15s ease-in forwards;
}
@keyframes ship-takeover-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}
.ship-takeover-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ship-takeover-back {
  color: var(--fg-dim); font-size: 18px; cursor: pointer; line-height: 1; background: none; border: none; padding: 2px 4px;
}
.ship-takeover-back:hover { color: var(--cyan); }
.ship-takeover-title { color: var(--fg-bright); font-size: 12.5px; font-weight: bold; }
.ship-takeover-sub { color: var(--fg-dim); font-size: 10px; margin-top: 1px; }
.ship-takeover-option {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px;
  cursor: pointer; font-size: 12px; color: var(--fg-bright); background: var(--bg-panel);
  font-family: var(--font-mono); text-align: left;
}
.ship-takeover-option:hover { border-color: var(--cyan); }
.ship-takeover-option.current { border-color: var(--cyan); background: rgba(53,232,255,0.06); }
.ship-takeover-option .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ship-takeover-option .opt-label { flex: 1; }
.ship-takeover-option .check { color: var(--cyan); font-size: 13px; flex-shrink: 0; }

.ship-inline-picker {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: var(--bg-panel); border: 1px solid var(--cyan); border-radius: 6px;
  padding: 8px; min-width: 220px; max-width: 280px;
  position: relative; z-index: 5;
  animation: ship-picker-slide-in 0.15s ease-out;
}
@keyframes ship-picker-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ship-inline-option {
  display: block; width: 100%; text-align: left; background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px;
  cursor: pointer; font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright);
}
.ship-inline-option:hover { border-color: var(--cyan); color: var(--cyan); }
.ship-inline-option.current { border-color: var(--cyan); background: rgba(53,232,255,0.08); }
.ship-inline-cancel {
  width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 5px;
  padding: 6px; margin-top: 2px; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-dim);
}

/* Order detail: items grouped by which vendor is actually shipping them
   -- same visual language as the Settings vendor cards (colored left
   border), scaled down for the narrower order detail sidebar. */
.shipping-from-box {
  background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 10px;
}
.shipping-from-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--fg-dim);
  margin-bottom: 6px;
}
.shipping-from-box .upc-breakdown-loc:last-of-type { border-bottom: none; }
.process-order-btn { width: 100%; margin-top: 8px; font-size: 10.5px; padding: 6px; }

/* "Terminal Scan" submitting effect -- a scanning light sweeps across
   the button while the real API call is in flight, with a soft cyan
   glow pulse on the border; snaps to a solid green glow the instant
   the request resolves (success or the box locking). The text
   sequence fades "process order" out, then fades "submitting…" in --
   NOT a simultaneous crossfade -- via one non-repeating keyframe
   animation on the text stack, timed independently of the
   glow/scan-line loop (which keeps looping for as long as the real
   request actually takes, never a faked minimum duration). */
.submit-scan-btn {
  width: 100%; margin-top: 8px; padding: 7px 6px; border-radius: 6px;
  border: 1px solid var(--cyan); background: var(--bg-panel-2); color: var(--fg-bright);
  font-family: var(--font-mono); font-size: 10.5px; position: relative; overflow: hidden;
  animation: submit-scan-glow 1.2s ease-in-out infinite;
}
@keyframes submit-scan-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(53,232,255,0); }
  50% { box-shadow: 0 0 14px rgba(53,232,255,0.45); }
}
.submit-scan-line {
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(53,232,255,0.4), transparent);
  animation: submit-scan-sweep 0.9s linear infinite;
}
@keyframes submit-scan-sweep { to { left: 140%; } }
.submit-scan-btn.submit-scan-success {
  animation: none; border-color: var(--status-instock-bg);
  box-shadow: 0 0 16px rgba(61,220,80,0.4);
}
.submit-scan-btn.submit-scan-success .submit-scan-line { display: none; }
.submit-scan-text-stack { position: relative; display: inline-block; height: 13px; min-width: 90px; vertical-align: middle; }
.submit-scan-text-stack span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; }
.submit-scan-text-stack .submit-scan-idle { animation: submit-scan-fade-out 0.4s ease forwards; }
.submit-scan-text-stack .submit-scan-submitting { opacity: 0; animation: submit-scan-fade-in 0.4s ease 0.4s forwards; }
@keyframes submit-scan-fade-out { to { opacity: 0; } }
@keyframes submit-scan-fade-in { to { opacity: 1; } }

/* Gentler pulse for the LONGER-running "awaiting confirmation" window
   (order already locked, just waiting on the vendor's own async
   confirmation -- Ordoro's real propagation delay, not this app being
   slow) -- softer and slower than the Terminal Scan effect above,
   since that one signals an active request in flight and this one
   signals a longer, open-ended wait. Meant to make the handoff from
   the Terminal Scan effect into this state read as one continuous
   motion rather than a jarring drop from something animated to
   something completely static. */
@keyframes awaiting-confirmation-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.awaiting-confirmation-pulse { animation: awaiting-confirmation-pulse 1.8s ease-in-out infinite; }
/* Wraps Crossdock's two Shipping From boxes together -- outer border is
   the "these two belong together" signal, while each box keeps its own
   vendor-colored left border inside for identification. Boxes lose
   their own bottom margin/radius touching the group edges so it reads
   as one unit, not two boxes coincidentally placed inside a third. */
/* Crossdock card, layout "D" (v2.31.40): one .stat-card with a cyan
   left edge for the ECN-NJ + Ordoro pair -- replaces the old 2px cyan
   outline around two nested boxes with a button straddling its border.
   Items from both vendors are one list (each row carries its own vendor
   pill); the action is a normal full-width bar at the bottom. */
/* .stat-card.crossdock-card, not just .crossdock-card: .stat-card is
   defined further down this file and sets a plain 1px border on every
   side, which silently won over the cyan left edge (v2.31.41 fix). */
.stat-card.crossdock-card { border-left: 3px solid var(--cyan); padding: 10px 12px; margin-bottom: 10px; }
.stat-card.crossdock-card.locked { border-left-color: var(--status-exclusive-bg); }
/* Dark mint body (v2.31.63, mockup "M2"): a crossdock goes to Ordoro as
   one special order, so its card sits in a dark mint green -- the cyan
   edge, tag and PROCESS CROSSDOCK button stay. Locked crossdocks keep
   the mint body with their pink edge. */
/* v2.31.96 (mockup "C2"): body moved from dark mint to a dark cyan, the
   same family as the cyan edge and "⇄ CROSS DOCK" title. */
.stat-card.crossdock-card { background: #0b2330; border-color: rgba(53,232,255,.22); border-left-color: var(--cyan); }
.stat-card.crossdock-card.locked { border-left-color: var(--status-exclusive-bg); }
.crossdock-items .upc-breakdown-loc { border-bottom-color: rgba(53,232,255,.18) !important; }
.stat-card.crossdock-card .crossdock-process-btn { background: rgba(53,232,255,0.06); border-color: rgba(53,232,255,.22); }
.stat-card.crossdock-card .alt-pill:not(:hover) { background: #15303f; }
.crossdock-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crossdock-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: bold; letter-spacing: .5px; color: var(--cyan); text-transform: uppercase; }
.crossdock-tag-icon { font-size: 11px; }
.crossdock-head-right { display: inline-flex; align-items: center; font-size: 10px; }
.crossdock-head-right .vendor-pill { margin-right: 0 !important; }
.crossdock-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; font-size: 10.5px; margin-bottom: 5px; min-height: 13px; }
.crossdock-po-line { font-size: 9.5px; color: var(--fg-dim); letter-spacing: .3px; }
.crossdock-po-line b { color: var(--fg); font-weight: normal; }
.crossdock-po-link { cursor: pointer; border-bottom: 1px dashed var(--fg-dim); }
.crossdock-po-link:hover { color: var(--cyan); border-color: var(--cyan); }
.crossdock-items { margin-top: 4px; }
/* Row separators come from an inline style on each row, so the last
   one needs !important to drop the stray dashed line above the bar. */
.crossdock-items .upc-breakdown-loc:last-child { border-bottom: none !important; }
.crossdock-action { margin-top: 6px; }
.crossdock-card .crossdock-process-btn { display: block; width: 100%; padding: 9px 10px; }
.crossdock-status { text-align: center; padding: 6px 0 2px; }
.crossdock-card .crossdock-status .stat-value { font-size: 12px; letter-spacing: .5px; color: var(--status-exclusive-bg); }
.crossdock-card .crossdock-status .stat-label { text-transform: none; letter-spacing: 0; margin-top: 3px; }

/* Shared vendor-color pill -- used for a vendor's name wherever it shows
   up (Stock Levels breakdown, Status tab feed rows). Always uppercase via
   CSS rather than relying on the underlying name's casing. */
.vendor-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: bold;
  text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0;
}
.multiple-vendor-tag {
  color: var(--cyan); font-weight: bold; font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
  border: 1px solid var(--cyan); border-radius: 999px; padding: 3px 10px;
}

.upc-breakdown-header { font-size: 12.5px; font-weight: bold; margin-bottom: 12px; color: var(--fg); }
.upc-breakdown-header .upc-num { color: var(--title-yellow); }

/* One compact block per vendor: a name pill + title on one line, then
   SKU/item ID and stock chips on a second -- no bordered card, no price.
   Stock chips are a soft tint (background + colored text, no border) in
   that specific vendor's own color -- a lighter touch than a full pill,
   since with more vendors coming this needs to stay scannable without
   taking up a lot of vertical space per entry. */
.upc-vendor-block { padding: 10px 0; border-bottom: 1px dashed var(--border); }
.upc-vendor-block:last-child { border-bottom: none; }
.upc-vendor-line1 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.upc-vendor-sku { color: var(--fg-bright); font-size: 11.5px; } /* same color as the title -- both are "the identifying info", not secondary */
/* Its own full-width line now (used to sit inline next to the pill) --
   more room to breathe, especially for longer titles. */
.upc-vendor-title { display: block; color: var(--fg-bright); font-size: 12.5px; line-height: 1.35; margin-bottom: 7px; }
.upc-vendor-line2 { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); flex-wrap: wrap; }
.upc-vendor-updated { font-size: 10px; color: var(--fg-dim); margin-top: 6px; }
.qty-chip { font-size: 11px; padding: 3px 10px; border-radius: 999px; }
.qty-chip-code { font-weight: normal; } /* warehouse code: de-emphasized */
.qty-chip-num { font-weight: bold; } /* the actual quantity: the thing that matters, bold to stand out */

.warehouse-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.warehouse-row span:last-child { color: var(--cyan); }

.feed-status-row { padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.feed-status-row:last-child { border-bottom: none; }
.feed-status-row .row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feed-status-row .feed-name-group { display: flex; align-items: center; gap: 7px; }
.feed-status-row .feed-name { color: var(--fg-bright); }
.feed-status-row .feed-sub { color: var(--fg-dim); font-size: 11px; margin-top: 4px; }

/* Sync button: solid orange pill when idle, switches to solid green while
   a sync is actually running, then back to orange once it's done --
   whether it succeeded or failed (see setFeedStatusOverride() in app.js). */
.sync-btn {
  font-family: var(--font-mono); font-weight: bold; text-transform: uppercase; letter-spacing: .3px;
  border: none; border-radius: 999px; padding: 5px 12px; font-size: 9.5px; cursor: pointer;
}
.sync-btn.idle { background: transparent; border: 1.5px solid var(--sync-orange); color: var(--sync-orange); }
.sync-btn.syncing { background: transparent; border: 1.5px solid var(--status-instock-bg); color: var(--status-instock-bg); }
.sync-btn:disabled { cursor: default; opacity: .85; }

.supplier-legend-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; color: var(--fg-dim); }
.supplier-legend-row span:last-child { color: var(--fg-bright); font-weight: bold; }
/* v2.31.164: linked / in feed, warehouse sub-rows */
.supplier-legend-row.feed { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; }
.supplier-legend-row.feed .sl-nums { justify-self: end; color: var(--fg-bright); font-weight: normal; }
.supplier-legend-row.feed .sl-nums b { font-weight: bold; }
.supplier-legend-row.feed .sl-of { color: var(--fg-dim); font-weight: normal; }
.supplier-legend-row.feed .sl-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.supplier-legend-row.feed .sl-bar i { display: block; height: 100%; opacity: .75; }
.sl-bundle { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 0; border-left: 3px solid; border-radius: 4px; padding: 0 8px 0 12px; margin: 8px 0; background: rgba(255,255,255,.015); transition: background .15s; }
.sl-bundle:hover { background: rgba(255,255,255,.05); }
.sl-bundle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
/* v2.31.168: mockup C -- one (split) bar per vendor */
.sl-bundle { padding: 9px 10px 9px 12px; }
.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; }
.sl-top .sl-nums { color: var(--fg-bright); }
.sl-top .sl-nums b { font-weight: bold; }
.sl-top .sl-of { color: var(--fg-dim); }
.sl-wlabel { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); }
.sl-sbar { display: flex; gap: 1px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.06); margin-top: 7px; }
.sl-sbar i { display: block; height: 100%; }
.sl-key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; color: var(--fg-dim); margin-top: 6px; }
.sl-key b { color: var(--fg-bright); }
.sl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
/* v2.31.169: Vendor Inventory feed cards (linked + sync, mockup A) */
#feed-status-mini .sl-bundle.feed-status-row, #orders-feed-status .sl-bundle.feed-status-row { border-bottom: 0; font-size: 12px; padding: 9px 10px 8px 12px; }
.sl-bundle.order-sync-card { cursor: default; }
.sl-bundle.order-sync-card:hover { background: rgba(255,255,255,.015); }
.sl-sync { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
.sl-sync .feed-sub { margin-top: 0 !important; font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sync .sync-btn { flex: none; }
.status-dot.dot-stale { background: #ffcf3d; }
#feed-status-mini .sl-bundle.active { background: rgba(53,232,255,.07); box-shadow: inset 0 0 0 1px rgba(53,232,255,.35); }
.sl-bundle .supplier-legend-row:last-child { border-bottom: 0; }
.sl-bhead { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); padding: 7px 0 2px; }
.sl-bhead .sl-nums { letter-spacing: 0; font-size: 12px; color: var(--fg-bright); }
.sl-bhead .sl-of { color: var(--fg-dim); font-size: 10.5px; }
.sl-head { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--fg-dim); padding-bottom: 4px; }
.sl-foot { font-size: 9.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.5; }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.status-dot.dot-idle { background: var(--fg-dim); }
.status-dot.dot-ok { background: var(--status-instock-bg); }
.status-dot.dot-error { background: var(--status-outofstock-bg); }
.status-dot.dot-syncing { background: var(--cyan); animation: dot-pulse 1s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(53,232,255,0.6); } 50% { opacity: .5; box-shadow: 0 0 0 4px rgba(53,232,255,0); } }

.full-view { padding: 20px; overflow: auto; }
.panel { border: 1px solid var(--border); background: var(--bg-panel); padding: 20px; border-radius: 6px; margin-bottom: 16px; }
.panel h3 { margin: 0 0 3px 0; color: var(--fg-bright); font-size: 14px; }
.panel .sub { color: var(--fg-dim); font-size: 11px; margin-bottom: 16px; }
select, button.btn {
  background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border);
  font-family: var(--font-mono); padding: 5px 8px; font-size: 12px; border-radius: 4px;
}
select { width: 140px; }
button.btn { cursor: pointer; text-align: center; }
button.btn:hover { border-color: var(--cyan); color: var(--cyan); }

/* (.btn-import-large, the old solid-cyan big sync button, was removed in
   v2.31.33 -- every big sync button now uses .stat-card.stat-action;
   see renderBigSyncButton in app.js.) */
.last-run { font-size: 10px; color: var(--fg-dim); justify-self: end; }
.error-text { color: var(--danger); font-size: 10px; }

/* ===== raw data debug box ===== */
.debug-box {
  position: fixed; left: 64px; right: 0; bottom: 0; z-index: 50;
  background: var(--bg-panel-2); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg);
  max-height: 40vh; display: flex; flex-direction: column;
}
.debug-box-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; cursor: pointer; color: var(--fg-bright); user-select: none;
  height: 16px; flex-shrink: 0;
}
.debug-box-header:hover { color: var(--cyan); }
.debug-box-body { display: none; overflow: auto; padding: 0 16px 14px 16px; border-top: 1px solid var(--border); }
.debug-box.expanded .debug-box-body { display: block; }
.debug-empty { color: var(--fg-dim); padding: 12px 0; }

.debug-entry { border: 1px solid var(--border); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.debug-entry-head {
  display: flex; gap: 12px; align-items: center; padding: 6px 10px;
  background: var(--bg-panel); font-size: 10.5px; color: var(--fg-dim);
}
.debug-entry-head .label { color: var(--fg-bright); flex: 1; }
.debug-entry-head .status-ok { color: var(--cyan); }
.debug-entry-head .status-err { color: var(--danger); }
.debug-entry-body { padding: 8px 10px; }
.debug-entry-body .url-line { color: var(--fg-dim); margin-bottom: 6px; word-break: break-all; }
.debug-entry-body .url-line span { color: var(--magenta); }
.debug-entry-body pre {
  margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px; max-height: 160px; overflow: auto; font-size: 10.5px;
}
.debug-entry-body .error-line { color: var(--danger); margin-top: 6px; }

/* Status dashboard -- KPI tiles, leaderboard bars, and the tail -f style
   activity feed. Mirrors the "Ops Command Center" concept: each KPI tile
   carries its own accent color via --kpi-color (same --filter-color
   convention as the order filter buttons), and leaderboard rows use a
   plain filled/track bar pair rather than a chart library, since a
   ranked list of ten items never needs more than that to read clearly. */
@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.status-pulse-dot { animation: status-pulse 2s ease-in-out infinite; }
.kpi-tile {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-left: 3px solid var(--kpi-color, var(--cyan)); border-radius: 8px; padding: 14px;
}
.kpi-tile .kpi-label { font-size: 9.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.kpi-tile .kpi-value { font-size: 26px; font-weight: 800; color: var(--fg-bright); }
.kpi-tile .kpi-value .kpi-value-sub { font-size: 15px; color: var(--fg-dim); }
.kpi-tile .kpi-sub { font-size: 10px; margin-top: 4px; color: var(--kpi-color, var(--fg-dim)); }
.leaderboard-row { display: flex; align-items: center; gap: 8px; }

/* Small stat card -- the same look loadShopifySummary() renders inline
   for the Shopify Status tab (thin border, 6px radius, colored number
   over a small uppercase label). Pulled into classes for the Stock
   Levels force-sync widget because its action card needs a real
   :hover state, which inline styles can't express. */
.stat-card { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,0.02); min-width: 0; }
.stat-card .stat-value { font-size: 18px; font-weight: bold; }
.stat-card .stat-label { font-size: 9.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; }
.stat-card.stat-action {
  display: block; width: 100%; text-align: center; cursor: pointer; font-family: var(--font-mono); color: inherit;
  transition: border-color .15s, background .15s;
}
.stat-card.stat-action .stat-value { font-size: 13px; letter-spacing: .5px; color: var(--sync-orange); }
.stat-card.stat-action:hover:not(:disabled) { border-color: var(--sync-orange); background: rgba(255,157,53,0.06); }
.stat-card.stat-action:disabled { cursor: default; border-color: var(--cyan); background: rgba(53,232,255,0.05); }
.stat-card.stat-action:disabled .stat-value { color: var(--cyan); }
/* Vendor-tinted action buttons (v2.31.43): a per-shipment "PROCESS
   VENDOR ORDER" takes its box's vendor pill color, PROCESS CROSSDOCK
   takes cyan -- set inline as --action-color. Everything else about the
   button is the shared .stat-action card; buttons without the variable
   (PROCESS ALL, sync buttons) keep the default orange. */
.stat-card.stat-action[style*="--action-color"] .stat-value { color: var(--action-color); }
.stat-card.stat-action[style*="--action-color"]:hover:not(:disabled) {
  border-color: var(--action-color);
  background: color-mix(in srgb, var(--action-color) 8%, transparent);
}
.shipping-from-box .vendor-process-btn { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; }
/* Last item row in a shipment box: drop its dashed separator (an inline
   style, hence !important) -- the button card below already separates. */
.shipping-from-box .upc-breakdown-loc:not(:has(~ .upc-breakdown-loc)) { border-bottom: none !important; }
/* Segmented status bar inside a stat card (Vendor Inventory's linked
   stock card): one colored segment per status bucket, widths as a % of
   the whole, with a small legend row beneath. */
.stat-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 6px 0 5px; background: var(--border); }
.stat-bar span { display: block; height: 100%; }
.stat-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 9.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.stat-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; }
.leaderboard-row-linkable { cursor: pointer; border-radius: 4px; padding: 2px 4px; margin: 0 -4px; }
.leaderboard-row-linkable:hover { background: rgba(255,255,255,0.04); }
.leaderboard-row-linkable:hover .lb-name { color: var(--cyan); }
.leaderboard-row .lb-rank { width: 16px; font-size: 10px; color: var(--fg-dim); flex-shrink: 0; }
.leaderboard-row .lb-name { flex: 1; font-size: 11.5px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-row .lb-track { width: 90px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.leaderboard-row .lb-fill { height: 100%; }
.leaderboard-row .lb-value { width: 70px; text-align: right; font-size: 10px; color: var(--fg-dim); flex-shrink: 0; }
.activity-log-row { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.activity-log-row .log-ts { color: var(--fg-dim); }
.activity-log-row .log-level-ok { color: var(--status-instock-bg); }
.activity-log-row .log-level-error { color: var(--status-outofstock-bg); }
.activity-log-row .log-level-info { color: var(--cyan); }

/* Terminal-styled panels for the status dashboard's Top 20 lists,
   activity feed, and sync status -- matching the "Terminal Feed"
   design concept per direct request. Monospace throughout, a dashed
   "-- like this --" header instead of a colored uppercase label, and
   ranked rows built from plain text + unicode block characters
   (████░░░░) instead of colored bar-fill divs, deliberately more
   austere than the rest of the dashboard's own KPI tiles/wave chart,
   which keep their existing look untouched. */
.terminal-panel { font-family: var(--font-mono); min-width: 0; }
.terminal-panel-header { color: var(--fg-dim); font-size: 13px; margin-bottom: 12px; }
.terminal-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.terminal-row { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.terminal-row .t-rank { color: var(--fg-dim); width: 22px; flex-shrink: 0; }
/* min-width: 0 is the actual fix for a real reported bug (text
   overlapping the value column): a flex child defaults to
   min-width: auto, which means "never shrink below your own content
   width" REGARDLESS of overflow/text-overflow -- so the ellipsis
   truncation on a long name never actually engaged, and it spilled
   into the space meant for the bar/value next to it. Without this,
   overflow:hidden + text-overflow:ellipsis on a flex item are
   silently inert. */
.terminal-row .t-name { color: var(--fg-bright); flex: 1 1 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.terminal-row .t-bar-fill { color: var(--status-instock-bg); flex-shrink: 0; }
.terminal-row .t-bar-fill.gap { color: #ffb020; }
.terminal-row .t-bar-empty { color: var(--border); flex-shrink: 0; }
.terminal-row .t-value { color: var(--fg-dim); margin-left: auto; flex-shrink: 0; }
.terminal-row-linkable { cursor: pointer; }
.terminal-row-linkable:hover .t-name { color: var(--cyan); }

/* Vendor mix donut, next to the order-volume chart -- reuses the same
   pulsing-glow treatment built for the crossdock fill gauge concept,
   applied to the leading (largest-share) vendor's own arc segment so
   the panel draws the eye to whichever vendor you're currently most
   dependent on, not just to the chart in general. */
@keyframes vendor-mix-glow { 0%, 100% { filter: drop-shadow(0 0 3px currentColor); } 50% { filter: drop-shadow(0 0 9px currentColor); } }
.vendor-mix-leading { animation: vendor-mix-glow 2.4s ease-in-out infinite; }
.vendor-mix-legend-row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.vendor-mix-legend-row .vm-swatch { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.vendor-mix-legend-row .vm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-bright); }
.vendor-mix-legend-row .vm-pct { color: var(--fg-dim); flex-shrink: 0; }


/* Order tab (v2.31.39): full-width address card, PROCESS ALL bar, and
   (further down) notes card -- all .stat-card. */
.order-card { margin-bottom: 8px; padding: 10px 12px; }
.order-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; min-height: 18px; }
.order-card-spacer { flex: 1; }
.order-card-meta { font-size: 9.5px; color: var(--fg-dim); }
.order-card-link { font-size: 9.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; cursor: pointer; border-bottom: 1px dashed var(--fg-dim); margin-left: 6px; }
.order-card-link:hover { color: var(--cyan); border-color: var(--cyan); }
.order-card-link.disabled { opacity: .4; cursor: not-allowed; }
.order-card-link.disabled:hover { color: var(--fg-dim); border-color: var(--fg-dim); }
.order-chip { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg-dim); white-space: nowrap; cursor: default; }
.order-chip.edited { color: var(--warn); border-color: rgba(255,204,51,.4); }
.order-address-lines { font-size: 11.5px; line-height: 1.55; color: var(--fg-bright); }
.order-contact-line { font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-process-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; margin-bottom: 8px; padding: 9px 10px; }
/* Notes (v2.31.44): one slim line -- no "notes" label, minimal padding,
   save status tucked on the right. Grows only if the note itself wraps. */
.stat-card.order-notes-card { display: flex; align-items: center; gap: 8px; padding: 5px 10px; margin-bottom: 14px; }
.order-notes-input {
  flex: 1; min-width: 0; display: block; resize: none; overflow-y: auto; max-height: 200px;
  background: transparent; border: none; outline: none; padding: 0; margin: 0;
  color: var(--fg-bright); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  field-sizing: content; /* grows with its text where supported; autoGrowTextarea() covers the rest while typing */
}
.order-notes-input::placeholder { color: var(--fg-dim); }
.order-notes-status { white-space: nowrap; flex-shrink: 0; }

/* Address edit form */
.addr-form { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.addr-field { grid-column: span 3; min-width: 0; }
.addr-field.full { grid-column: span 6; }
.addr-field.city { grid-column: span 3; }
.addr-field.state { grid-column: span 1; }
.addr-field.zip { grid-column: span 2; }
.addr-field label { display: block; font-size: 8.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.addr-field input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg-bright); font-family: var(--font-mono); font-size: 11px; padding: 5px 7px; outline: none;
}
.addr-field input:focus { border-color: var(--cyan); }
.addr-field input.changed { border-color: rgba(255,204,51,.55); }
.addr-form-actions { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.btn.addr-save { background: var(--cyan); color: #04121a; border: none; font-weight: bold; font-size: 10.5px; }


/* ---- Order tab polish (v2.31.46) ---- */
/* S2: header row -- order + vendor pills left, status + age chips right */
.order-header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
/* Insurance (x-redo) shield beside the shipping pill (v2.31.60, option A
   from the badge mockups, at 2/3 of the mocked size). */
.insured-shield { display: inline-flex; color: var(--status-instock-bg); cursor: default; filter: drop-shadow(0 0 3px rgba(51,255,136,.5)); }
/* S3: titles capped at 2 lines (full title on hover); SKU moved to the price line */
/* Linked titles (v2.31.57) look like plain text until hovered. */
a.line-item-link { text-decoration: none; }
a.line-item-link:hover { color: var(--cyan); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; }
.line-item-title { color: var(--fg-bright); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
/* T2 (v2.31.47): totals on one slim line, total in green on the right */
.stat-card.order-totals-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px;
  margin-top: 14px; padding: 7px 11px; font-size: 10.5px; cursor: default;
  background: var(--bg-panel);   /* same darker panel as the shipment boxes (v2.31.72) */
}
.totals-parts { color: var(--fg-dim); }
.totals-parts b { color: var(--fg-bright); font-weight: normal; font-variant-numeric: tabular-nums; }
.totals-parts s { color: var(--fg-dim); font-size: 9.5px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.totals-parts, .totals-total { white-space: nowrap; }
/* margin-left:auto keeps the total right-aligned if a very large order
   ever pushes it onto its own line (flex-wrap) instead of overflowing. */
.totals-total { margin-left: auto; font-size: 13px; font-weight: bold; color: var(--status-instock-bg); font-variant-numeric: tabular-nums; }
/* R4 (v2.31.47): hold-to-reset -- hazard stripes fill while held */
/* Breathing room above (from the timeline) and below (padding, not
   margin -- a trailing margin can collapse away at the bottom of the
   scrolling panel). */
#order-detail [id^="reset-area-"] { margin-top: 28px; padding-bottom: 28px; }
.reset-hold-btn {
  display: block; width: 100%; position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none;
  border: 1px solid rgba(255,204,51,.35); border-radius: 6px; background: rgba(255,255,255,0.02);
  padding: 8px; cursor: pointer; font-family: var(--font-mono); color: var(--warn); text-align: center;
}
.reset-hold-btn:hover:not(:disabled) { border-color: var(--warn); }
.reset-hold-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: .35;
  background: repeating-linear-gradient(-45deg, var(--warn) 0 7px, #151100 7px 14px);
}
.reset-hold-btn.holding .reset-hold-fill { width: 100%; transition: width .6s linear; } /* = RESET_HOLD_MS in app.js */
.reset-hold-text { position: relative; z-index: 1; display: block; font-weight: bold; font-size: 12px; letter-spacing: .6px; text-shadow: 0 0 3px #000, 0 0 6px #000; }
/* Helper text sits under the button (v2.31.53), not inside it. */
.reset-hold-hint { margin-top: 5px; text-align: center; font-size: 8.5px; color: var(--fg-dim); letter-spacing: .4px; text-transform: uppercase; }
.reset-hold-btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.4); }

/* Pink CANCEL SUBMISSION card button (v2.31.49) -- same card as the
   process buttons, tinted with the app's "submitted" pink. */
.stat-card.cancel-submission-btn { margin-top: 8px; }
.crossdock-head-right a, .crossdock-head-right span { white-space: nowrap; }

/* ---- Address + age bento (v2.31.55) ---- */
.order-address-bento { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.order-address-bento > .order-card { margin-bottom: 0; min-width: 0; }
.order-address-bento.editing { grid-template-columns: 1fr; }   /* the edit form needs the full width */
/* Right third of the bento (v2.31.61): age card on top, PROCESS ALL
   tile under it, splitting the height evenly. With no tile, the age
   card fills the whole column. */
.order-bento-side { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px; min-width: 0; }
.order-bento-side > .stat-card { margin: 0; min-height: 0; }
.order-bento-side > .stat-card:not(:only-child) { padding-top: 6px; padding-bottom: 6px; }
.order-address-bento.editing .order-bento-side { display: none; }
/* PROCESS ALL tile -- the shared action card with green glowing text
   (option "G1"), so it reads as the tab's main action. */
.stat-card.stat-action.process-all-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 6px;
}
.stat-card.stat-action.process-all-tile .stat-value {
  font-size: 19px; line-height: 1; letter-spacing: .3px; white-space: nowrap; color: var(--status-instock-bg);
  text-shadow: 0 0 6px rgba(51,255,136,.6);
}
.stat-card.stat-action.process-all-tile .stat-label { font-size: 8px; margin-top: 6px; letter-spacing: .5px; }
/* v2.31.112 (mockup "A"): PROCESS at 19px. The armed "CONFIRM?" and the
   "SENDING..." progress are longer words, so they step down to fit. */
.stat-card.stat-action.process-all-tile.armed .stat-value { font-size: 16px; letter-spacing: -0.4px; }
.stat-card.stat-action.process-all-tile:disabled:not(.on-hold) .stat-value { font-size: 14px; letter-spacing: -0.3px; }
/* Resting look (v2.31.69, mockup "P4"): the same plain card as the age
   tile above it, plus a green left-edge bar like the shipment boxes. */
.stat-card.stat-action.process-all-tile { border-color: var(--border); border-left: 3px solid var(--status-instock-bg); background: rgba(255,255,255,0.02); }
.stat-card.stat-action.process-all-tile:hover:not(:disabled) { border-color: var(--status-instock-bg); background: rgba(51,255,136,0.06); }
/* Sending: cyan, like every other in-progress state. */
.stat-card.stat-action.process-all-tile:disabled { border-color: var(--cyan); background: rgba(53,232,255,0.05); }
.stat-card.stat-action.process-all-tile:disabled .stat-value { color: var(--cyan); text-shadow: 0 0 6px rgba(53,232,255,.6); }
.stat-card.order-age-card { display: flex; align-items: center; justify-content: center; padding: 10px 6px; min-width: 0; cursor: default; }
.age-stat { display: inline-flex; flex-direction: column; align-items: center; }
.age-num {
  font-size: 19px; font-weight: bold; white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.1;
  /* yellow since v2.31.68 (was amber #ffb02e) */
  color: #ffe045; text-shadow: 0 0 6px rgba(255,224,69,.6), 0 0 16px rgba(255,200,0,.3);
}
/* width is set by fitAgeChips() to match .age-num exactly */
.age-chip {
  margin-top: 6px; box-sizing: border-box; border: 1px solid; border-radius: 3px; padding: 2px 0;
  text-align: center; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; overflow: hidden; line-height: 1.3;
}
.order-address-lines, .order-contact-line { overflow-wrap: anywhere; }
.order-edit-pencil { color: var(--fg-dim); font-size: 13px; line-height: 1; padding: 1px 3px; border-radius: 3px; cursor: pointer; margin-left: 6px; }
.order-edit-pencil:hover { color: var(--cyan); background: rgba(53,232,255,.08); }
.order-edit-pencil.disabled { opacity: .35; cursor: not-allowed; }
.order-edit-pencil.disabled:hover { color: var(--fg-dim); background: none; }

/* ---- Click-again confirm on order PROCESS buttons (v2.31.65/66) ----
   First click arms the button: brighter, in its own --action-color, with
   a bar draining along the bottom; a second click before it empties
   sends. Declared last so it beats the vendor-tint hover rule. */
.stat-card.stat-action.armed,
.stat-card.stat-action.armed:hover:not(:disabled) {
  position: relative; overflow: hidden;
  border-color: var(--action-color, var(--sync-orange));
  background: color-mix(in srgb, var(--action-color, var(--sync-orange)) 10%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--action-color, var(--sync-orange)) 25%, transparent);
}
.stat-card.stat-action.armed .stat-value { text-shadow: 0 0 6px color-mix(in srgb, var(--action-color, var(--sync-orange)) 70%, transparent); }
.stat-card.stat-action.armed .stat-label { margin-top: 2px; }
.process-arm-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--action-color, var(--sync-orange)); box-shadow: 0 0 6px var(--action-color, var(--sync-orange));
  animation: process-arm-drain linear forwards;
}
@keyframes process-arm-drain { from { width: 100%; } to { width: 0; } }

/* Order list (v2.31.73): yellow order numbers, dim "Sep 26 · 8:15 PM" dates. */
#orders-rows td.order-num-cell { color: var(--title-yellow); }
#orders-rows td.order-date-cell { color: var(--fg-dim); }
/* v2.31.279: tighter order rows -- one-line cells, long names trimmed (full name on hover) */
@media (min-width: 801px) {
  #orders-rows td, #orders-table-header-row th { padding-left: 6px; padding-right: 6px; white-space: nowrap; }
  /* the customer column takes whatever room is left and trims with "…",
     so the vendor match capsule always fits on one line */
  #orders-rows td.order-cust-cell { width: 100%; max-width: 1px; min-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  #orders-rows .badge { padding: 3px 9px; font-size: 10.5px; }
  #orders-rows .vm-cap > span { padding: 3px 7px; }
}

/* ---- Order hold (v2.31.74, mockups H4 + I3) ---- */
/* Pause switch at the far right of the Order tab's header row. */
.hold-switch {
  position: relative; width: 40px; height: 20px; flex-shrink: 0; padding: 0; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.03);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.hold-switch .hold-knob {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fg-dim); color: var(--bg); transition: left .15s, background .15s, box-shadow .15s;
}
.hold-switch:hover, .hold-switch.ask { border-color: var(--sync-orange); }
/* flipped the moment you start a hold (v2.31.76): knob right = on */
.hold-switch.ask { background: rgba(255,157,53,.2); }
.hold-switch.ask .hold-knob { left: 22px; background: var(--sync-orange); box-shadow: 0 0 8px rgba(255,157,53,.7); }
.hold-switch.on { background: rgba(255,157,53,.2); border-color: var(--sync-orange); }
.hold-switch.on .hold-knob { left: 22px; background: var(--sync-orange); box-shadow: 0 0 8px rgba(255,157,53,.7); }
/* Reason picker under the header */
.hold-picker { border: 1px solid var(--sync-orange); border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255,157,53,.05); }
.hold-note-input {
  width: 100%; box-sizing: border-box; margin-top: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--fg-bright); font-family: var(--font-mono); font-size: 10.5px; padding: 5px 8px;
}
.hold-note-input:focus { outline: none; border-color: var(--border); }   /* regular outline, even focused (v2.31.77) */
.hold-picker-actions { display: flex; gap: 6px; margin-top: 8px; }
.hold-picker-actions button { flex: 1; font-family: var(--font-mono); font-size: 10px; font-weight: bold; letter-spacing: .5px; border-radius: 4px; padding: 6px 0; cursor: pointer; }
.hold-go { background: var(--sync-orange); color: #2a1400; border: 1px solid var(--sync-orange); }
.hold-go:hover:not(:disabled) { background: #ffb35e; box-shadow: 0 0 10px rgba(255,157,53,.45); }
.hold-go:disabled { opacity: .4; cursor: not-allowed; }
.hold-cancel { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); }
.hold-cancel:hover { color: var(--fg-bright); }
.hold-picker-error:empty { display: none; }
.hold-picker-error { margin-top: 6px; font-size: 10px; }
/* Banner while held */
.hold-banner {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--sync-orange); border-left: 3px solid var(--sync-orange); border-radius: 6px;
  background: rgba(255,157,53,.07); font-size: 10.5px; color: var(--fg-bright);
}
.hold-banner:hover { background: rgba(255,157,53,.1); }
.hold-banner-text { min-width: 0; }
.hold-banner-why { color: var(--fg-dim); font-size: 9.5px; margin-top: 2px; overflow-wrap: anywhere; }
/* PROCESS buttons while held: visible but not clickable */
.stat-card.stat-action.on-hold:disabled { border-color: var(--border); background: rgba(255,255,255,.02); cursor: not-allowed; opacity: .6; }
.stat-card.stat-action.on-hold:disabled .stat-value { color: var(--fg-dim); text-shadow: none; }
.stat-card.stat-action.process-all-tile.on-hold:disabled { opacity: 1; border-left: 3px solid var(--sync-orange); }
.stat-card.stat-action.process-all-tile.on-hold:disabled .stat-label { color: var(--sync-orange); }
/* Order list */
.track-dot.hold { width: auto; height: auto; border-radius: 0; background: none; color: var(--sync-orange); line-height: 0; vertical-align: middle; }
.badge.hold-badge { background: var(--sync-orange); color: #2a1400; }

/* Shopify products: small "full update" line under the quick-sync button (v2.31.78) */
.feed-sub.shopify-full-update { text-align: center; margin-top: 2px; font-size: 10px; color: var(--fg-dim); }
.shopify-full-update-link { color: var(--sync-orange); cursor: pointer; border-bottom: 1px dashed var(--sync-orange); }
.shopify-full-update-link:hover { color: #ffb35e; }

/* ---- USPS address alerts (v2.31.84) ---- */
.stat-card.order-card.addr-alert-apt { background: rgba(255,157,53,.07); border-color: rgba(255,157,53,.45); }
.stat-card.order-card.addr-alert-bad { background: rgba(255,79,109,.07); border-color: rgba(255,79,109,.5); }
.order-edit-pencil.alert { display: inline-flex; align-items: center; padding: 0 2px; }
.order-edit-pencil.alert:hover { background: none; }
.addr-alert-icon.apt { filter: drop-shadow(0 0 4px rgba(255,170,40,.6)); }
.addr-alert-icon.bad { filter: drop-shadow(0 0 4px rgba(255,79,109,.6)); }
.addr-issue { display: flex; gap: 7px; align-items: flex-start; font-size: 11px; color: var(--fg-bright); margin: 2px 0 10px; line-height: 1.4; }
.addr-issue-why { color: var(--fg-dim); font-size: 10px; }
.addr-suggest { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.addr-suggest-title { font-size: 9px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; }
.addr-suggest-opt { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 10.5px; line-height: 1.45; color: var(--fg-bright); cursor: pointer; background: rgba(255,255,255,.02); }
.addr-suggest-opt:hover { border-color: var(--cyan); }
.addr-suggest-opt.sel { border-color: var(--cyan); background: rgba(53,232,255,.06); }
.addr-suggest-src { font-size: 9px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; }
.addr-suggest-radio { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--fg-dim); margin-top: 2px; flex-shrink: 0; }
.addr-suggest-opt.sel .addr-suggest-radio { border-color: var(--cyan); background: radial-gradient(var(--cyan) 45%, transparent 50%); }
.addr-field-alert-apt input { border-color: var(--sync-orange) !important; box-shadow: 0 0 0 1px rgba(255,157,53,.25); }
.addr-field-alert-bad input { border-color: #ff4f6d !important; box-shadow: 0 0 0 1px rgba(255,79,109,.25); }
.addr-field-hint { font-size: 9px; margin-top: 2px; }
.addr-field-alert-apt .addr-field-hint { color: var(--sync-orange); }
.addr-field-alert-bad .addr-field-hint { color: #ff4f6d; }
.addr-alert-lead { display: inline-flex; vertical-align: -2px; margin-right: 6px; }  /* v2.31.143: icon before the customer name */
.addr-alert-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.addr-alert-dot.apt { background: #ffab2e; box-shadow: 0 0 5px rgba(255,171,46,.8); }
.addr-alert-dot.bad { background: #ff4f6d; box-shadow: 0 0 5px rgba(255,79,109,.8); }

/* Crossdock speed badge row above the bento (v2.31.85) */
.order-speed-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; }

/* ---- UPS inbound (v2.31.89) ---- */
.ups-since { background: var(--bg); border: 1px solid var(--border); color: var(--fg); font-family: var(--font-mono); font-size: 11px; padding: 5px 8px; border-radius: 6px; color-scheme: dark; }
.ups-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: bold; letter-spacing: .3px; text-transform: uppercase; color: var(--st); white-space: nowrap; }
.ups-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); box-shadow: 0 0 5px var(--st); }
.ups-track { color: var(--title-yellow); text-decoration: none; }
.ups-track:hover { text-decoration: underline; }
.ups-order-link { color: var(--cyan); cursor: pointer; font-size: 10.5px; white-space: nowrap; }
.ups-order-link:hover { text-decoration: underline; }
.ups-acct { color: var(--fg); }
#ups-rows td.dim, #ups-rows .dim, #ups-view .dim { color: var(--fg-dim); }
.ups-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 8px; }
.ups-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.ups-chips .order-filter-btn { padding: 4px 9px; font-size: 10px; }
.ups-setting-row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.ups-setting-row input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border); color: var(--fg-bright); font-family: var(--font-mono); font-size: 11px; padding: 5px 8px; border-radius: 4px; }
.ups-raw { margin-top: 16px; }
/* Raw traffic terminal (v2.31.113, mockup "T2") -- Order tab "raw vendor
   traffic" roll-out + UPS "raw UPS response". Always a black terminal,
   whatever the theme, with standard dark-terminal syntax colors. */
:root { --syn-k: #79c0ff; --syn-s: #a5d6a7; --syn-n: #f0b86e; --syn-b: #d2a8ff; --syn-nl: #7d8590; --syn-p: #8b949e; --syn-tag: #7ee787; --syn-attr: #79c0ff; --syn-err: #ff6b81; }
.raw-roll { margin-top: 14px; }
.raw-roll > summary { list-style: none; cursor: pointer; font-size: 10px; color: var(--fg-dim); display: flex; align-items: center; gap: 6px; user-select: none; }
.raw-roll > summary::-webkit-details-marker { display: none; }
.raw-roll > summary:hover { color: var(--fg); }
.raw-roll .raw-car { display: inline-block; color: var(--status-instock-bg); transition: transform .12s; }
.raw-roll[open] .raw-car { transform: rotate(90deg); }
.raw-roll .raw-cnt { margin-left: auto; font-size: 9px; }
.rt-win { margin-top: 6px; border: 1px solid #1f2a40; border-radius: 6px; overflow: hidden; background: #010204; font-family: var(--font-mono); }
.rt-bar { display: flex; align-items: center; gap: 5px; padding: 5px 8px; background: #0d1322; border-bottom: 1px solid #1f2a40; font-size: 9px; color: #6b7a99; }
.rt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rt-dot.r { background: #ff5f57; } .rt-dot.y { background: #febc2e; } .rt-dot.g { background: #28c840; }
.rt-ttl { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-calls { display: flex; border-bottom: 1px solid #1f2a40; background: #070b15; overflow-x: auto; scrollbar-width: thin; }
.rt-call { font-size: 9px; padding: 5px 9px; color: #6b7a99; border-right: 1px solid #1f2a40; cursor: pointer; white-space: nowrap; }
.rt-call:hover { color: #c9d4ea; }
.rt-call.on { color: #e8f0ff; background: #010204; box-shadow: inset 0 2px 0 var(--status-instock-bg); }
.rt-tabs { display: flex; align-items: center; font-size: 9px; border-bottom: 1px solid #141c2e; }
.rt-tab { padding: 4px 9px; color: #6b7a99; cursor: pointer; }
.rt-tab.on { color: var(--cyan); box-shadow: inset 0 -1px 0 var(--cyan); }
.rt-copy { margin-left: auto; padding: 4px 9px; color: var(--cyan); cursor: pointer; opacity: .8; }
.rt-copy:hover { opacity: 1; }
.rt-meta { font-size: 9.5px; padding: 6px 9px 0; color: #6b7a99; word-break: break-all; }
.rt-body { display: grid; grid-template-columns: auto 1fr; padding: 6px 0 8px; max-height: 340px; overflow: auto; }
.rt-body pre { margin: 0; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; white-space: pre; background: none; border: 0; padding: 0; }
.rt-gut { position: sticky; left: 0; background: #010204; color: #33405c; text-align: right; padding: 0 8px 0 9px !important; user-select: none; }
.rt-code { color: #c9d4ea; padding-right: 9px !important; }
.rt-empty { font-size: 10px; color: #6b7a99; padding: 10px 9px; }
.rt-win .st-ok, .raw-roll .st-ok { color: var(--status-instock-bg); } .rt-win .st-warn { color: #ffe045; } .rt-win .st-err, .raw-roll .st-err { color: var(--syn-err); }
.syn-k { color: var(--syn-k); } .syn-s { color: var(--syn-s); } .syn-n { color: var(--syn-n); } .syn-b { color: var(--syn-b); }
.syn-nl { color: var(--syn-nl); font-style: italic; } .syn-p { color: var(--syn-p); } .syn-tag { color: var(--syn-tag); } .syn-attr { color: var(--syn-attr); } .syn-err { color: var(--syn-err); }
.ups-track-pill { background: var(--title-yellow); color: #1a1600; font-weight: bold; font-size: 11px; padding: 3px 10px; border-radius: 999px; text-decoration: none; }
.ups-pkg-card { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; padding: 10px 12px; }
.ups-kv { display: flex; gap: 10px; font-size: 11px; }
.ups-kv span { width: 70px; flex-shrink: 0; color: var(--fg-dim); text-transform: uppercase; font-size: 9.5px; letter-spacing: .4px; padding-top: 1px; }
.ups-kv b { color: var(--fg-bright); font-weight: normal; overflow-wrap: anywhere; }
.ups-timeline-title { font-size: 10.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .5px; margin: 4px 0 10px; }
.ups-timeline { position: relative; padding-left: 22px; }
.ups-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.ups-tl-item { position: relative; padding-bottom: 16px; }
.ups-tl-item:last-child { padding-bottom: 0; }
.ups-tl-dot { position: absolute; left: -21px; top: 2px; width: 9px; height: 9px; border-radius: 50%; }
.ups-tl-label { font-size: 12px; font-weight: bold; color: var(--fg-bright); }
.ups-tl-when { font-size: 10.5px; color: var(--fg-dim); margin-top: 2px; }

/* Settings -> Advanced (v2.31.91) */
.scale-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.scale-row input[type=range] { width: 280px; accent-color: var(--cyan); }
.scale-value { color: var(--title-yellow); font-weight: bold; min-width: 44px; font-variant-numeric: tabular-nums; }
.scale-ticks { display: flex; justify-content: space-between; width: 280px; margin-left: 0; font-size: 10px; color: var(--fg-dim); }

/* Item with no vendor (v2.31.93): hazard card above the vendor boxes */
.hz-card { --a: #ff4f6d; --a-rgb: 255,79,109; border: 1px solid rgba(var(--a-rgb), .6); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.hz-card.hz-oos { --a: var(--sync-orange); --a-rgb: 255,157,53; }
.hz-stripe { height: 7px; background: repeating-linear-gradient(-45deg, var(--a) 0 8px, transparent 8px 16px); opacity: .9; }
.hz-body { padding: 10px 12px 11px; background: rgba(var(--a-rgb), .04); }
.hz-title { font-size: 10px; letter-spacing: .5px; font-weight: bold; color: var(--a); margin-bottom: 6px; }
.hz-carried { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; font-size: 9.5px; color: var(--fg-dim); }
.hz-pick { background: transparent; cursor: pointer; font-family: inherit; }
.hz-pick:hover { background: rgba(var(--a-rgb), .18); }
.hz-zero { font-size: 9px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(var(--a-rgb), .45); color: var(--a); text-transform: uppercase; }
.hz-why { font-size: 10px; color: var(--fg-dim); margin-top: 6px; line-height: 1.45; }
.hz-assign { margin-top: 10px; width: 100%; background: transparent; border: 1px solid var(--a); color: var(--a); font-family: var(--font-mono); font-size: 10.5px; font-weight: bold; letter-spacing: .5px; border-radius: 5px; padding: 8px; cursor: pointer; }
.hz-assign:hover { background: rgba(var(--a-rgb), .12); }
.assign-note { border: 1px solid rgba(255,224,69,.35); background: rgba(255,224,69,.05); color: var(--title-yellow); font-size: 10px; line-height: 1.5; border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; }
.assign-note b { color: var(--fg-bright); }
.assign-group { font-size: 9px; color: var(--fg-dim); letter-spacing: .5px; margin: 10px 0 6px; }
.assign-right { font-size: 9.5px; color: var(--fg-dim); flex-shrink: 0; }
.ship-takeover-option.assign-opt.armed { border-color: var(--status-instock-bg); background: rgba(51,255,136,.06); }
.ship-takeover-option.assign-opt.armed .assign-right { color: var(--status-instock-bg); font-weight: bold; }
/* a force-assigned item inside its vendor box */
.upc-breakdown-loc.forced-item { border: 1px dashed var(--title-yellow) !important; border-radius: 5px; padding: 6px 8px !important; margin: 4px -4px; background: rgba(255,224,69,.04); }
.forced-tag-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.forced-tag { font-size: 8.5px; font-weight: bold; letter-spacing: .3px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--title-yellow); color: var(--title-yellow); }
.forced-undo { margin-left: auto; font-size: 10px; color: var(--cyan); border-bottom: 1px dashed var(--cyan); cursor: pointer; }

/* ================= Phone layout (v2.31.98, mockup "A") =================
   Below 800px: the left icon rail becomes a ☰ drawer, list tables become
   cards, and each screen's side panel opens full screen (unchanged
   inside) with a "← back" bar. See js/mobile.js. Desktop is untouched. */
.m-only, #m-drawer, #m-drawer-shade { display: none; }
@media (max-width: 800px) {
  body { font-size: 14px; padding-bottom: 0; }
  body.m-no-scroll { overflow: hidden; }
  .sidebar { display: none; }
  .shell { height: 100dvh; }
  .m-only { display: inline-flex; }

  /* header: ☰, title, ▤, then search + filters wrap underneath */
  .header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); }
  .header .title { flex: 1; font-size: 13px; }
  .brand-mark { display: none; }
  .m-icon-btn { width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--bg); color: var(--cyan);
    border: 1px solid var(--border); border-radius: 8px; font-size: 16px; cursor: pointer; padding: 0; font-family: var(--font-mono); }
  #m-panel-btn { color: var(--fg); font-size: 14px; }
  .search-wrap { order: 5; flex: 1 1 100%; max-width: none; }
  .search-wrap input { font-size: 16px; }   /* 16px stops iOS zooming in on focus */
  #order-filter-bar, #ups-filter-bar { order: 6; flex: 1 1 100%; flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 2px; }
  #order-filter-bar .order-multiselect-panel { position: fixed !important; left: 10px !important; right: 10px; top: 110px !important; max-width: none; z-index: 60 !important; }
  .header select { order: 6; flex: 1 1 45%; width: auto; min-height: 36px; font-size: 14px; }
  .order-filter-btn { min-height: 34px; white-space: nowrap; flex-shrink: 0; }

  /* drawer */
  #m-drawer-shade { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 70; }
  #m-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(80vw, 300px); background: var(--bg-panel-2); border-right: 1px solid var(--border);
    z-index: 71; padding: 16px 12px; padding-top: max(16px, env(safe-area-inset-top)); flex-direction: column; gap: 3px;
    transform: translateX(-102%); transition: transform .18s ease-out; display: flex; }
  body.m-drawer-open #m-drawer { transform: none; }
  body.m-drawer-open #m-drawer-shade { display: block; }
  .m-brand { color: var(--cyan); font-weight: bold; font-size: 14px; }
  .m-ver { color: var(--fg-dim); font-size: 10px; margin-bottom: 14px; }
  .m-nav { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent;
    background: none; color: var(--fg); font-family: var(--font-mono); font-size: 13px; text-align: left; cursor: pointer; }
  .m-nav i { font-style: normal; width: 18px; text-align: center; color: var(--fg-dim); }
  .m-nav i .nav-ic { width: 17px; height: 17px; vertical-align: -3px; filter: none; }
  .m-nav[data-g="home"] i { color: #33ff88; } .m-nav[data-g="ops"] i { color: #35e8ff; }
  .m-nav[data-g="cat"] i { color: #ff4fd8; } .m-nav[data-g="ppl"] i { color: #ffe045; } .m-nav[data-g="sys"] i { color: #c9d6f0; }
  .m-nav.on { background: rgba(53,232,255,.1); color: var(--cyan); border-color: rgba(53,232,255,.35); }
  .m-nav.on i { color: var(--cyan); }

  /* list + full-screen panel */
  .body-grid { grid-template-columns: 1fr !important; }
  .body-grid > .side-panel { display: none; }
  .body-grid.m-panel-open > .side-panel { display: block; position: fixed; inset: 0; z-index: 50; zoom: 1; border-left: 0;
    padding: 0 14px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: ship-takeover-slide-in .18s ease-out; }
  .m-panel-bar { position: sticky; top: 0; z-index: 5; margin: 0 -14px 12px; padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top));
    background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; }
  .m-back { background: none; border: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 14px; min-height: 36px; padding: 0 4px; cursor: pointer; }
  .products-scroll { padding: 10px; }

  /* tables -> cards */
  .products-scroll table, .products-scroll tbody { display: block; width: 100%; }
  .products-scroll thead { display: none; }
  .products-scroll tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); position: relative; }
  .products-scroll tbody td { border: 0 !important; padding: 0 !important; background: none !important; white-space: normal; }
  .products-scroll tbody tr:empty { display: none; }
  .products-scroll tbody tr.row-selected, .products-scroll tbody tr.order-row-selected { border-color: var(--cyan); background: rgba(53,232,255,.05); }

  /* order card: order # + date / customer / vendor pills + total */
  #orders-rows tr { display: grid; grid-template-columns: 14px 1fr auto; grid-template-areas: "dot num date" "dot cust cust" "dot ship status" "dot vend total"; gap: 4px 8px; }
  #orders-rows td:nth-child(1) { grid-area: dot; align-self: start; padding-top: 3px !important; }
  #orders-rows td:nth-child(2) { grid-area: num; font-size: 15px; font-weight: bold; }
  #orders-rows td:nth-child(4) { grid-area: date; justify-self: end; font-size: 11px; }
  #orders-rows td:nth-child(5) { grid-area: cust; color: var(--fg-bright); }
  #orders-rows td:nth-child(6) { display: none; }
  #orders-rows td:nth-child(7) { grid-area: ship; }
  #orders-rows td:nth-child(8) { display: none; }   /* shopify status -- the card shows the Nexus status (v2.31.203) */
  #orders-rows td:nth-child(9) { grid-area: status; justify-self: end; }
  #orders-rows td:nth-child(10) { grid-area: total; justify-self: end; align-self: end; color: var(--fg-bright); font-size: 14px; }
  #orders-rows td:nth-child(11) { grid-area: vend; }
  .pagination { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .pagination .btn { min-height: 38px; min-width: 80px; }

  /* full-page screens (Status, Settings): one column */
  .full-view { padding: 12px; }
  .full-view [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #status-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .full-view .panel-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 12px 0 0 !important; }
  .full-view .panel-tab { flex-shrink: 0; min-height: 38px; }
  .full-view .panel { padding: 14px; max-width: none !important; }
  .vendor-card-grid, .shipmap-card-grid { grid-template-columns: 1fr !important; }
  .scale-row input[type=range], .scale-ticks { width: 100%; max-width: 280px; }

  /* the raw-data debug bar is a desktop troubleshooting tool */
  .debug-box { display: none !important; }
}

/* result note for search-bar commands like /test vendor (v2.31.102) */
#command-note { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 80; max-width: min(92vw, 640px);
  background: var(--bg-panel-2); border: 1px solid var(--cyan); color: var(--fg-bright); font-size: 12px; line-height: 1.5;
  padding: 9px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); cursor: pointer; }
#command-note.error { border-color: var(--danger); color: var(--danger); }

/* International order globe (v2.31.105) */
.intl-globe { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px; color: var(--magenta);
  filter: drop-shadow(0 0 3px rgba(255,79,216,.85)) drop-shadow(0 0 7px rgba(255,79,216,.45)); cursor: help; }
.intl-globe svg { display: block; }

/* Compact inventory tables (v2.31.106): every column but the title
   takes only the width it needs, so the title gets the rest; pills and
   headers never break onto a second line. */
#rows td:not(.title-td), #shopify-rows td:not(.title-td) { white-space: nowrap; width: 1%; font-size: .92em; padding-left: 8px; padding-right: 8px; }
#table-header-row th, #shopify-table-header-row th { padding-left: 8px; padding-right: 8px; }
.products-scroll th { white-space: nowrap; }
.badge { white-space: nowrap; }

/* Shopify vs vendors difference next to the VENDORS number (v2.31.107) */
.qty-delta { font-size: .8em; font-weight: bold; padding: 0 5px; border-radius: 4px; margin-left: 3px; }
.qty-delta.over { color: var(--danger); background: rgba(255,79,109,.12); }
.qty-delta.under { color: var(--sync-orange); background: rgba(255,157,53,.12); }
#shopify-diff-filter { width: auto; }

/* FORCE PROCESS (v2.31.114, mockup F4 + split pills P1) -- Orders → Status tab */
#orders-force-process .fp-scope { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; font-size: 10px; }
#orders-force-process .fp-scope span { flex: 1; text-align: center; padding: 5px 6px; color: var(--fg-dim); cursor: pointer; white-space: nowrap; user-select: none; }
#orders-force-process .fp-scope span:hover { color: var(--fg); }
#orders-force-process .fp-scope span.on { background: rgba(255,59,92,.14); color: var(--fg-bright); box-shadow: inset 0 0 0 1px #ff3b5c; border-radius: 999px; }
#orders-force-process .fp-scope b { color: var(--title-yellow, #ffe045); }
.fp-pills { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; min-height: 20px; }
.fp-pill { display: inline-flex; border-radius: 999px; overflow: hidden; font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.fp-pill .nm { padding: 3px 7px 3px 9px; }
.fp-pill .ct { padding: 3px 8px 3px 6px; background: rgba(0,0,0,.2); box-shadow: inset 1px 0 0 rgba(0,0,0,.25); }
.fp-pill.xd, .fp-pill.skip { border: 1px solid var(--cyan); }
.fp-pill.xd .nm, .fp-pill.xd .ct, .fp-pill.skip .nm, .fp-pill.skip .ct { padding-top: 2px; padding-bottom: 2px; }
.fp-pill.xd .nm { color: var(--cyan); }
.fp-pill.xd .ct { background: rgba(53,232,255,.15); color: var(--cyan); box-shadow: none; }
.fp-pill.skip { border: 1px dashed var(--sync-orange, #ff9d35); cursor: help; }
.fp-pill.skip .nm { color: var(--sync-orange, #ff9d35); }
.fp-pill.skip .ct { background: rgba(255,157,53,.15); color: var(--sync-orange, #ff9d35); box-shadow: none; }
.fp-refresh { font-size: 11px; color: var(--fg-dim); cursor: pointer; margin-left: 2px; }
.fp-refresh:hover { color: var(--cyan); }
.fp-dim { color: var(--fg-dim); font-size: 10px; }
.fp-hold { position: relative; overflow: hidden; width: 100%; margin-top: 10px; border: 1px solid #ff3b5c; background: transparent; color: #ff3b5c; border-radius: 5px; padding: 10px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: 1px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.fp-hold .fill { position: absolute; inset: 0; width: 0; background: #ff3b5c; pointer-events: none; }
.fp-hold .txt { position: relative; z-index: 1; }
.fp-hold.holding .fill { width: 100%; transition: width 3s linear; } /* = FORCE_HOLD_MS in forceprocess.js */
.fp-hold.holding .txt { color: #fff; transition: color 1.5s; }
.fp-hold:disabled { opacity: .35; cursor: not-allowed; }
/* v2.31.174: glowing tails on the long action buttons (Shopify order /
   product sync, sync all vendors, hold to process) -- a slim bar inset at
   each end in the button's own text color. */
.tail-btn { position: relative; --tail: var(--sync-orange, #ff9d35); padding-left: 20px; padding-right: 20px; }
.tail-btn::before, .tail-btn::after { content: ""; position: absolute; top: 7px; bottom: 7px; width: 4px; border-radius: 3px; background: var(--tail); box-shadow: 0 0 8px var(--tail), 0 0 16px color-mix(in srgb, var(--tail) 55%, transparent); z-index: 1; pointer-events: none; transition: background .2s, box-shadow .2s; }
.tail-btn::before { left: 7px; }
.tail-btn::after { right: 7px; }
.fp-hold.tail-btn { --tail: #ff3b5c; }
/* v2.31.183: while a sync runs its button is simply greyed out (disabled),
   no glow -- the pulsing dot beside it shows it's working. */
.stat-card.stat-action.tail-btn:disabled { --tail: var(--fg-dim); border-color: var(--border); background: rgba(255,255,255,.02); opacity: .55; }
.stat-card.stat-action.tail-btn:disabled .stat-value { color: var(--fg-dim); }
.stat-card.stat-action.tail-btn:disabled::before, .stat-card.stat-action.tail-btn:disabled::after { box-shadow: none; }
.sync-btn.syncing, .sync-btn:disabled { border-color: var(--border) !important; color: var(--fg-dim) !important; opacity: .55; box-shadow: none; }
.fp-hint { font-size: 9px; color: var(--fg-dim); text-align: center; margin-top: 4px; }
.fp-last { font-size: 10px; text-align: center; margin-top: 6px; color: var(--fg-dim); }
.fp-last .st-ok, .fp-log .st-ok { color: var(--status-instock-bg); }
.fp-last .st-err, .fp-log .st-err { color: #ff3b5c; }
.fp-prog { border: 1px solid var(--cyan); border-radius: 5px; padding: 9px; background: rgba(53,232,255,.04); }
.fp-prog-top { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--cyan); font-weight: bold; }
.fp-bar { height: 5px; background: rgba(53,232,255,.12); border-radius: 3px; margin: 7px 0; overflow: hidden; }
.fp-bar i { display: block; height: 100%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); transition: width .3s; }
.fp-log { font-size: 9.5px; color: var(--fg-dim); line-height: 1.6; word-break: break-word; }
.fp-stop { margin-top: 6px; font-size: 9.5px; color: var(--sync-orange, #ff9d35); border: 1px solid var(--sync-orange, #ff9d35); background: none; font-family: var(--font-mono); border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.fp-stop:disabled { opacity: .6; cursor: default; }

/* v2.31.115 (mockup "B3"): pill-shaped vendor bar replaces the split pills;
   the block now sits above sync status. */
.fp-pills .fp-bar3 { flex: 1; min-width: 0; }
.fp-bar3 { display: flex; gap: 2px; height: 18px; }
.fp-seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 14px; font-size: 10px; font-weight: 800; color: #04121a; cursor: default; transition: opacity .1s; }
.fp-seg:first-child { border-radius: 999px 0 0 999px; }
.fp-seg:last-child { border-radius: 0 999px 999px 0; }
.fp-seg:only-child { border-radius: 999px; }
.fp-bar3:hover .fp-seg { opacity: .45; }
.fp-bar3:hover .fp-seg:hover { opacity: 1; }
.fp-seg-skip { background: repeating-linear-gradient(135deg, var(--sync-orange, #ff9d35) 0 3px, rgba(255,157,53,.25) 3px 6px); color: #1a0800; text-shadow: 0 0 3px #ff9d35, 0 0 3px #ff9d35, 0 0 2px #ff9d35; }
.fp-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #02040a; border: 1px solid var(--border); color: var(--fg-bright); font-size: 9.5px; font-weight: normal; padding: 3px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 5; }
.fp-tip-skip { color: var(--sync-orange, #ff9d35); }
.fp-seg:hover .fp-tip { opacity: 1; }
.fp-seg:first-child .fp-tip { left: 0; transform: none; }
.fp-seg:last-child .fp-tip { left: auto; right: 0; transform: none; }
.fp-sep { border-top: 1px solid var(--border); margin: 14px 0 4px; }
/* v2.31.116: FORCE PROCESS sits under the order-stats bento, above the vendor rows */
#orders-force-process { margin-bottom: 6px; }
#orders-force-process h4 { margin-top: 0; }

/* Vendor tiles (v2.31.117, bento mockup "V2") -- Orders → Status tab.
   Replaces the order-stats bento and the vendor bar; tap = list filter. */
.fp-head { display: flex; align-items: center; margin-top: 0; }
.fp-head-r { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 10px; }
.fp-skip { color: var(--sync-orange, #ff9d35); cursor: help; }
.fp-link { color: var(--fg-dim); cursor: pointer; }
.fp-link:hover { color: var(--cyan); }
.vtiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.vtile { position: relative; min-width: 0; border: 1px solid var(--border); border-top: 2px solid var(--c); border-radius: 5px; background: rgba(255,255,255,.015); padding: 7px 3px 5px; text-align: center; cursor: pointer; font-family: var(--font-mono); transition: background .1s, box-shadow .1s; }
.vtile:hover { background: rgba(255,255,255,.05); }
.vtile b { display: block; color: var(--fg-bright); font-size: 16px; line-height: 1; }
.vtile span { display: block; font-size: 7.5px; color: var(--c); margin-top: 4px; letter-spacing: .3px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.vtile.zero b { color: var(--fg-dim); }
.vtile.on { background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.vtile.on b { color: var(--c); }
/* v2.31.172: Orders → Status vendor mix ring (replaces the tiles) */
.vmix-title { color: #ff4fd8; text-shadow: 0 0 6px #ff4fd8; letter-spacing: 2.5px; font-weight: 800; }
.vmix-sub { font-size: 10px; color: var(--fg-dim); margin: -4px 0 6px; }
.vmix { display: flex; justify-content: center; margin: 4px 0 10px; }
.vmix-ring .vmix-seg { cursor: pointer; transition: opacity .15s; }
.vmix-ring .vmix-n { fill: var(--fg-bright); font-size: 30px; font-weight: 800; font-family: var(--font-mono); }
.vmix-ring .vmix-l { fill: var(--fg-dim); font-size: 8.5px; letter-spacing: 2px; font-family: var(--font-mono); }
.vmix-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.vmix-li { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg); padding: 4px 6px; border-radius: 5px; border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; transition: opacity .15s, background .1s; }
.vmix-li:hover:not(:disabled) { background: rgba(255,255,255,.05); }
.vmix-li .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c); box-shadow: 0 0 5px var(--c); }
.vmix-li .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.vmix-li b { color: var(--fg-bright); }
.vmix-li.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 35%, transparent); }
.vmix-li.off { opacity: .38; }
.vmix-li.zero:not(.on) .nm, .vmix-li.zero:not(.on) b { color: var(--fg-dim); }
.vmix-li.zero:not(.on) .sw { box-shadow: none; opacity: .5; }
.vmix-li.hold .nm { color: var(--sync-orange, #ff9d35); font-weight: bold; }
.vmix-legend { margin-bottom: 0; }
.vmix-box { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); padding: 12px 12px 12px; margin-bottom: 4px; }
.vmix-box .fp-head { margin-top: 0; }
.vmix-sep { border-top: 1px dashed var(--border); margin: 10px -12px 0; }
.vmix-box .fp-hold { margin-top: 12px; }
/* v2.31.180: Orders → VENDOR SHIPMENTS bento */
.ship-box { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); padding: 12px; }
.ship-head { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 10.5px; }
.ship-head > * { white-space: nowrap; }
.ship-title { color: var(--cyan); text-shadow: 0 0 6px var(--cyan); letter-spacing: 2.5px; font-weight: 800; font-size: 12px; }
.ship-head .sl-nums b { color: var(--fg-bright); }
.ship-head .sl-of { color: var(--fg-dim); }
.ship-cards-gap { border-top: 1px dashed var(--border); margin: 12px -12px 4px; }
.ship-box #orders-feed-status .sl-bundle:last-child { margin-bottom: 0; }
/* v2.31.180: Shopify Inventory → Status tiles, health cards, full update box */
.hl-tile { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: rgba(255,255,255,0.02); transition: background .1s; }
.hl-tile.click { cursor: pointer; }
.hl-tile.click:hover { background: rgba(255,255,255,.05); }
#shopify-health .hl-card { cursor: default; font-size: 12px; padding: 9px 10px 8px 12px; }
#shopify-health .hl-card:hover { background: rgba(255,255,255,.015); }
.hl-key { cursor: pointer; }
.hl-key:hover { color: var(--fg-bright); }
.fu-box { border: 1px dashed rgba(255,204,51,.35); border-radius: 8px; padding: 10px; }
.fu-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; color: var(--warn); letter-spacing: 1.5px; font-weight: bold; margin-bottom: 5px; }
.fu-head .feed-sub { margin: 0; color: var(--fg-dim); letter-spacing: 0; font-weight: normal; font-size: 10px; white-space: nowrap; }
.fu-note { font-size: 9.5px; color: var(--fg-dim); margin-bottom: 8px; }
.fu-idcheck { margin: -3px 0 8px; }
.fu-idcheck .feed-sub { font-size: 9.5px; color: var(--fg-dim); margin: 0; }
.fu-hold.holding .reset-hold-fill { transition: width 1.5s linear; }   /* = FULL_UPDATE_HOLD_MS in app.js */
.vmix-empty { grid-column: 1 / -1; text-align: center; color: var(--fg-dim); font-size: 11px; padding: 4px 0; }
.vmix-hold { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 10px 0 12px; padding: 6px 9px; border: 1px dashed rgba(255,157,53,.5); border-radius: 6px; background: transparent; color: var(--sync-orange, #ff9d35); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.vmix-hold span { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; letter-spacing: 1px; }
.vmix-hold b { font-size: 13px; }
.vmix-hold:hover { background: rgba(255,157,53,.06); }
.vmix-hold.on { border-style: solid; background: rgba(255,157,53,.12); box-shadow: 0 0 8px rgba(255,157,53,.3); }
.vmix-hold.zero { opacity: .5; }
.vt-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--status-instock-bg); }
.vt-dot.warn { background: var(--sync-orange, #ff9d35); box-shadow: 0 0 4px var(--sync-orange, #ff9d35); }
.hold-tile { border-top-style: dashed; }

/* v2.31.119: "N skipped" is a link that shows just those orders */
.fp-skip { cursor: pointer; border-radius: 999px; padding: 1px 7px; }
.fp-skip:hover { background: rgba(255,157,53,.12); }
.fp-skip.on { background: rgba(255,157,53,.18); box-shadow: inset 0 0 0 1px var(--sync-orange, #ff9d35); }

/* ===== System Status -- Synthwave Arcade "Marquee" (v2.31.121) ===== */
.sw-status { background: #06080f; padding: 0 !important; }
.sw-header { position: relative; height: 150px; overflow: hidden; background: linear-gradient(180deg, #1a0b2e 0%, #12081f 55%, #06080f 100%); border-bottom: 1px solid var(--border); }
.sw-floor { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 58px; opacity: .7; }
.sw-floor line { stroke: #ff4fd8; stroke-width: 1; opacity: .35; vector-effect: non-scaling-stroke; }
.sw-horizon { position: absolute; left: 0; right: 0; bottom: 57px; height: 1px; background: linear-gradient(90deg, transparent, #ff4fd8, #b388ff, #ff4fd8, transparent); box-shadow: 0 0 10px #ff4fd8; }
/* v2.31.150 (header mockup D): order volume as a neon mountain range on the horizon */
/* v2.31.152 (wide mockup A): TODAY + mountains are one unit spanning from
   past the subtitle to REFRESH; the mountains stretch wider (not taller)
   on big screens -- redrawn at the real pixel width, so text never stretches */
.sw-volume { position: absolute; left: 560px; right: 225px; top: 6px; bottom: 0; z-index: 1; display: flex; gap: 22px; }
.sw-ridge-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sw-ridge { flex: 1; position: relative; min-height: 0; }
.sw-ridge-days { height: 57px; position: relative; pointer-events: none; }
.sw-ridge svg, .sw-ridge-days svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sw-today { flex: none; width: 110px; margin-bottom: 57px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 10px; font-family: var(--font-mono); cursor: default; z-index: 3; }
.sw-today-n { font-size: 38px; font-weight: 800; line-height: .9; color: var(--cyan); text-shadow: 0 0 10px var(--cyan), 0 0 24px rgba(53,232,255,.45); }
.sw-today-l { font-size: 10px; letter-spacing: 3px; color: #b388ff; margin-top: 5px; }
.sw-today-d { font-size: 11px; font-weight: 800; margin-top: 3px; letter-spacing: .5px; color: var(--fg-dim); white-space: nowrap; }
.sw-today-d span { color: var(--fg-dim); font-weight: normal; text-shadow: none; }
.sw-today-d.down { color: #ff4d6a; text-shadow: 0 0 6px rgba(255,77,106,.6); }
.sw-today-d.up { color: #33ff88; text-shadow: 0 0 6px rgba(51,255,136,.6); }
@media (max-width: 1100px) { .sw-ridge-col { display: none; } }
@media (max-width: 800px) { .sw-volume { display: none; } }
.sw-header-row { z-index: 2; pointer-events: none; }
.sw-header-row > * { pointer-events: auto; }
.sw-header-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 50px; gap: 16px; }
@keyframes sw-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 94% { opacity: .82; } 96% { opacity: 1; } }
.sw-title { font-size: 32px; font-weight: 800; letter-spacing: 3px; color: #ff4fd8; text-shadow: 0 0 8px #ff4fd8, 0 0 22px rgba(255,79,216,.6), 0 0 40px rgba(179,136,255,.4); animation: sw-flicker 3.5s linear infinite; }
.sw-subtitle { font-size: 11px; color: #b388ff; letter-spacing: 3px; margin-top: 6px; }
.sw-subtitle span { color: var(--fg-dim); }
.sw-refresh { background: transparent; border: 1.5px solid var(--cyan); color: var(--cyan); border-radius: 999px; padding: 10px 20px; min-height: 44px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 2px; cursor: pointer; box-shadow: 0 0 10px rgba(53,232,255,.35), inset 0 0 10px rgba(53,232,255,.15); }
.sw-refresh:hover { background: rgba(53,232,255,.1); }
.sw-body { padding: 20px 30px 28px; display: flex; flex-direction: column; gap: 16px; }
.sw-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.sw-kpi { border: 1.5px solid var(--sw-c); border-radius: 12px; padding: 14px 16px; min-width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--sw-c) 8%, transparent), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--sw-c) 20%, transparent), inset 0 0 14px color-mix(in srgb, var(--sw-c) 8%, transparent); }
.sw-kpi-label { font-size: 9.5px; color: var(--fg-dim); letter-spacing: 1.5px; text-transform: uppercase; }
.sw-kpi-value { font-size: 34px; font-weight: 800; color: var(--sw-c); text-shadow: 0 0 10px color-mix(in srgb, var(--sw-c) 65%, transparent); line-height: 1.15; margin-top: 4px; }
.sw-kpi-value span { font-size: 16px; opacity: .7; }
.sw-kpi-sub { font-size: 10px; color: var(--fg); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-kpi-sub.bad { color: #ff4d6a; }
.sw-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sw-row-chart { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sw-panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.sw-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.sw-panel-title { font-size: 12px; font-weight: 800; color: var(--sw-c); letter-spacing: 2px; text-shadow: 0 0 6px color-mix(in srgb, var(--sw-c) 55%, transparent); }
.sw-panel-sub { font-size: 9.5px; color: var(--fg-dim); margin-top: 3px; margin-bottom: 12px; }
.sw-latest { font-size: 13px; font-weight: 800; color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
.sw-dim { color: var(--fg-dim); font-size: 11px; }
.sw-mix { display: flex; gap: 16px; align-items: center; }
/* v2.31.154: Vendor Mix NOW | 30 DAYS toggle, clickable NOW legend */
.mix-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; flex: none; }
.mix-seg button { background: transparent; border: 0; font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; padding: 3px 9px; border-radius: 999px; color: var(--fg-dim); cursor: pointer; }
.mix-seg button.on { background: #ff4fd8; color: #1a0418; box-shadow: 0 0 8px rgba(255,79,216,.6); }
.vendor-mix-legend-row.clickable { cursor: pointer; border-radius: 4px; padding: 1px 2px; }
.vendor-mix-legend-row.clickable:hover { background: rgba(255,255,255,.05); }
.mix-held { display: block; margin: 10px auto 0; background: transparent; border: 0; font-family: var(--font-mono); font-size: 10.5px; color: #ff9d35; cursor: pointer; }
.sw-mix .vendor-mix-legend-row .vm-swatch { width: 10px; height: 10px; box-shadow: 0 0 5px currentColor; }
.sw-mix .vendor-mix-legend-row .vm-pct { color: var(--fg-bright); font-weight: 700; }
.sw-scores { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow: auto; }
.sw-score { display: grid; grid-template-columns: 26px minmax(0, 1fr) 84px 58px; gap: 10px; align-items: center; padding: 4px 6px; border: 0; border-radius: 4px; background: transparent; text-align: left; font-family: var(--font-mono); cursor: pointer; width: 100%; }
.sw-score:hover { background: rgba(255,255,255,.04); }
.sw-score-rank { color: var(--fg-dim); font-weight: 800; font-size: 12px; }
.sw-score-name { font-size: 11.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-score:hover .sw-score-name { color: var(--cyan); }
.sw-score-vendor { color: var(--fg-dim); }
.sw-score-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.sw-score-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b388ff, var(--sw-c)); box-shadow: 0 0 6px var(--sw-c); }
.sw-score-val { font-size: 12px; font-weight: 700; color: var(--fg-dim); text-align: right; }
.sw-score.top .sw-score-rank, .sw-score.top .sw-score-val { color: var(--sw-c); }
.sw-score.top .sw-score-name { color: var(--fg-bright); }
.sw-log { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 1.5; height: 240px; overflow: auto; }
.sw-log-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; color: var(--fg); }
.sw-log-row .log-ts { color: var(--fg-dim); }
.sw-log-row [class^="log-level-"] { font-weight: 700; }
.sw-log-row .log-level-ok, .sw-log-row .log-level-success { color: var(--status-instock-bg); }
.sw-log-row .log-level-error { color: #ff4d6a; }
.sw-log-row .log-level-warn, .sw-log-row .log-level-warning { color: #ff9d35; }
.sw-log-row .log-level-info { color: var(--cyan); }
@keyframes sw-blink { 50% { opacity: .25; } }
.sw-log-cursor { color: #ff4fd8; }
.sw-log-cursor span { animation: sw-blink 1s steps(1) infinite; }
.sw-sync-row { display: flex; gap: 8px; align-items: center; white-space: nowrap; overflow: hidden; flex-shrink: 0; }
.sw-sync-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--sw-sc); box-shadow: 0 0 6px var(--sw-sc); }
.sw-sync-row b { color: var(--sw-sc); width: 58px; flex-shrink: 0; }
.sw-sync-row.ok { --sw-sc: var(--status-instock-bg); }
.sw-sync-row.err { --sw-sc: #ff4d6a; }
.sw-sync-row.run { --sw-sc: var(--cyan); }
.sw-sync-name { color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sw-sync-meta { color: var(--fg-dim); margin-left: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 8px; }
.sw-sync-row.err .sw-sync-meta { color: #ff4d6a; }
@media (max-width: 1100px) { .sw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .sw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-row, .sw-row-chart { grid-template-columns: minmax(0, 1fr); }
  .sw-header-row { padding: 0 16px 50px; }
  .sw-title { font-size: 24px; }
  .sw-body { padding: 16px; }
}

/* v2.31.122: bigger text in the leaderboards and log/sync boxes; vendor pill in front on MOST WANTED */
.sw-scores { gap: 3px; max-height: 360px; }
.sw-score { grid-template-columns: 32px minmax(0, 1fr) 90px 66px; padding: 5px 6px; }
.sw-score-rank { font-size: 14px; }
.sw-score-name { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.sw-score-val { font-size: 14px; }
.sw-score-pill { font-size: 9.5px; padding: 2px 7px; flex-shrink: 0; }
.sw-log { font-size: 13px; gap: 5px; height: 280px; }
.sw-sync-row b { width: 70px; }
.sw-sync-row i { width: 9px; height: 9px; }
.sw-panel-sub { font-size: 10.5px; }
.sw-panel-title { font-size: 13px; }
.sw-score-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-score:hover .sw-score-title { color: var(--cyan); }

/* ===== Mission Control (v2.31.124, concepts board 12) ===== */
@keyframes mc-pulse { 0%, 100% { box-shadow: 0 0 10px rgba(255,77,106,.35); } 50% { box-shadow: 0 0 22px rgba(255,77,106,.85); } }
.mc-banner { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--mc-c); border-radius: 10px; padding: 10px 16px; background: color-mix(in srgb, var(--mc-c) 8%, transparent); }
.mc-banner.red { --mc-c: #ff4d6a; animation: mc-pulse 1.8s ease-in-out infinite; }
.mc-banner.orange { --mc-c: #ff9d35; }
.mc-banner.purple { --mc-c: #b388ff; }
.mc-banner.yellow { --mc-c: #ffcf3d; }
.mc-banner-icon { font-size: 20px; color: var(--mc-c); text-shadow: 0 0 8px var(--mc-c); }
.mc-banner-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.mc-banner-text b { font-size: 13.5px; color: var(--fg-bright); }
.mc-banner-text span { font-size: 11.5px; color: var(--fg); }
.mc-banner-btn { background: transparent; border: 1.5px solid var(--mc-c); color: var(--mc-c); border-radius: 999px; padding: 8px 14px; min-height: 36px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.mc-banner-btn:hover { background: color-mix(in srgb, var(--mc-c) 15%, transparent); }
.mc-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.mc-tile { text-align: left; border: 1.5px solid var(--sw-c); border-radius: 12px; padding: 12px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--sw-c) 10%, transparent), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--sw-c) 25%, transparent); display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; font-family: var(--font-mono); }
.mc-tile:hover { background: color-mix(in srgb, var(--sw-c) 14%, transparent); }
.mc-tile.pulse { animation: mc-pulse 1.8s ease-in-out infinite; }
.mc-tile-label { font-size: 9.5px; color: var(--sw-c); letter-spacing: 1.2px; font-weight: 800; }
.mc-tile-value { font-size: 32px; font-weight: 800; color: var(--fg-bright); text-shadow: 0 0 10px var(--sw-c); line-height: 1.1; }
.mc-tile-sub { font-size: 10.5px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-arrow { color: var(--sw-c); }
.mc-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.mc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mc-lane-panel { border-color: #3a1522; }
.mc-chip { font-size: 11px; font-weight: 800; border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mc-chip.red { color: #ff4d6a; } .mc-chip.orange { color: #ff9d35; } .mc-chip.purple { color: #b388ff; }
.mc-chip.pulse { animation: mc-pulse 1.8s ease-in-out infinite; }
.mc-lane-row { display: grid; grid-template-columns: 58px 84px minmax(0, 1fr) auto 150px; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; margin-bottom: 6px; border-radius: 6px; background: rgba(255,255,255,.02); border: 1px solid var(--border); cursor: pointer; font-family: var(--font-mono); text-align: left; }
.mc-lane-row:hover { border-color: #ff4d6a66; background: rgba(255,77,106,.05); }
.mc-tier { border: 1.5px solid var(--t); color: var(--t); border-radius: 4px; padding: 1px 0; font-size: 10px; font-weight: 800; text-align: center; box-shadow: 0 0 8px color-mix(in srgb, var(--t) 35%, transparent); }
.mc-num { color: #ffcf3d; font-weight: 700; font-size: 12.5px; }
.mc-cust { font-size: 12px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cust span { color: var(--fg-dim); }
.mc-state { text-align: right; font-size: 10.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-state.ok { color: var(--status-instock-bg); } .mc-state.hold { color: #ff9d35; }
/* ship-day states (v2.31.136) */
.mc-state.ship-late { color: #ff4d6a; } .mc-state.ship-owed { color: #ff4d6a; }
.mc-state.ship-bonus { color: #ffcf3d; } .mc-state.ship-next { color: var(--fg-dim); }
.mc-state.held::before { content: "⏸ "; color: #ff9d35; }
.mc-lane-row.ship-late { border-color: #ff4d6a; background: rgba(255,77,106,.08); box-shadow: 0 0 10px rgba(255,77,106,.25); }
.mc-lane-row.ship-owed { border-color: #ff4d6a66; }
.mc-lane-row.ship-next { opacity: .6; }
.mc-pill { display: inline-block; background: #566b8f; color: #04121a; border-radius: 999px; padding: 2px 8px; font-size: 9px; font-weight: 800; white-space: nowrap; text-transform: uppercase; justify-self: start; }
.mc-pill.xd { background: transparent; border: 1px solid var(--cyan); color: var(--cyan); padding: 1px 7px; }
.mc-pill.none { background: transparent; border: 1px dashed var(--fg-dim); color: var(--fg-dim); padding: 1px 7px; }
.mc-foot { font-size: 10.5px; color: var(--fg-dim); margin-top: 6px; }
.mc-empty { font-size: 11.5px; color: var(--fg-dim); padding: 6px 0; }
.mc-sec { font-size: 9.5px; letter-spacing: 1.2px; font-weight: 800; margin: 12px 0 6px; }
.mc-sec:first-child { margin-top: 0; }
.mc-sec.dim { color: var(--fg-dim); font-weight: 400; }
.mc-sec-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.mc-sec-row .mc-sec { margin: 0 0 6px; }
.mc-sec-r { font-size: 10px; color: var(--fg-dim); }
.mc-bar { display: flex; height: 20px; border-radius: 999px; overflow: hidden; gap: 2px; }
.mc-bar > div, .mc-bar > .mc-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #04121a; min-width: 18px; }
.mc-bar > .mc-bar-seg { border: 0; padding: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 800; color: #04121a; cursor: default; }
.mc-bar.clickable > .mc-bar-seg { cursor: pointer; transition: filter .12s, transform .12s; }
.mc-bar.clickable > .mc-bar-seg:hover { filter: brightness(1.18) saturate(1.1); }
.mc-bar.clickable:not(.whole):has(.mc-bar-seg:hover) > .mc-bar-seg:not(:hover) { filter: brightness(.7); }  /* v2.31.144 */
.mc-bar.whole:hover > .mc-bar-seg { filter: brightness(1.18) saturate(1.1); }
.mc-bar.empty { background: var(--border); justify-content: center; align-items: center; font-size: 10px; color: var(--fg-dim); }
.mc-bar-labels { display: flex; gap: 2px; margin-top: 5px; }
.mc-bar-labels > div { text-align: center; font-size: 10px; white-space: nowrap; min-width: 18px; overflow: hidden; }
.mc-age-row { display: grid; grid-template-columns: 84px 64px auto minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 4px 2px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); text-align: left; }
.mc-age-row:hover { background: rgba(255,255,255,.04); }
.mc-age { font-weight: 800; font-size: 12px; }
.mc-note { color: var(--fg-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-more { background: transparent; border: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 11px; cursor: pointer; padding: 4px 2px; }
.mc-days { display: flex; gap: 5px; margin-bottom: 12px; }
.mc-day { flex: 1; text-align: center; font-size: 10px; font-weight: 800; padding: 4px 0; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--dc, #566b8f) 35%, transparent); color: color-mix(in srgb, var(--dc, #566b8f) 70%, var(--fg-dim)); }
.mc-day.on { background: var(--dc, #ffcf3d); border-color: var(--dc, #ffcf3d); color: var(--dct, #1a1400); box-shadow: 0 0 8px var(--dc, #ffcf3d); }
.mc-po-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mc-po-name { font-size: 13px; color: var(--fg-bright); font-weight: 800; }
.mc-open { color: var(--status-instock-bg); font-size: 9.5px; border: 1px solid var(--status-instock-bg); border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-weight: 700; }
.mc-po-val { font-size: 16px; color: #ffcf3d; font-weight: 800; text-shadow: 0 0 8px #ffcf3d; }
.mc-po-val span { color: var(--fg-dim); font-size: 12px; text-shadow: none; }
.mc-po-bar { position: relative; height: 18px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.mc-po-bar > div { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--dc, #ffcf3d) 55%, transparent), var(--dc, #ffcf3d)); box-shadow: 0 0 10px var(--dc, #ffcf3d); }
.mc-po-bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: var(--fg-bright); text-shadow: 0 0 3px #000; }
.mc-po-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; text-align: center; }
.mc-po-stats b { display: block; font-size: 17px; color: var(--fg-bright); }
.mc-po-stats span { font-size: 9.5px; color: var(--fg-dim); }
.mc-po-closed { display: grid; grid-template-columns: 44px 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 11.5px; padding: 3px 0; }
.mc-po-day { color: var(--dc, #ffcf3d); font-weight: 800; }
.mc-po-cv { color: var(--fg-bright); font-weight: 700; }
@media (max-width: 1100px) { .mc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mc-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) {
  .mc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-lane-row { grid-template-columns: 52px 76px minmax(0, 1fr); }
  .mc-lane-row .mc-pill, .mc-lane-row .mc-state { grid-column: span 1; }
}
.mc-bar > div, .mc-bar > .mc-bar-seg, .mc-bar-labels > div { min-width: 44px; }
.mc-bar-labels { margin-bottom: 6px; }

/* ===== Mission Control, three-column "Outrun" layout (v2.31.125, concepts board 13) ===== */
.mc-3col { display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.mc-left, .mc-center, .mc-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mc-board { padding: 0; overflow: hidden; }
.mc-tiles.stack { display: flex; flex-direction: column; gap: 0; }
.mc-tiles.stack .mc-tile { border: 0; border-radius: 0; border-left: 3px solid var(--sw-c); border-bottom: 1px solid var(--border); box-shadow: none; background: transparent; padding: 11px 14px; }
.mc-tiles.stack .mc-tile:hover { background: color-mix(in srgb, var(--sw-c) 8%, transparent); }
.mc-tiles.stack .mc-tile.pulse { animation: none; background: rgba(255,77,106,.06); }
.mc-tiles.stack .mc-tile.pulse .mc-tile-value { animation: sw-flicker 1.8s linear infinite; }
.mc-tiles.stack .mc-tile-value { font-size: 28px; }
.mc-stats-title { padding: 10px 14px 4px; font-size: 9.5px; color: var(--fg-dim); letter-spacing: 1.2px; }
.mc-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 14px; border-top: 1px solid var(--border); }
.mc-stat-label { font-size: 9.5px; color: var(--fg-dim); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stat-value { font-size: 15px; font-weight: 800; color: var(--sw-c); text-shadow: 0 0 8px color-mix(in srgb, var(--sw-c) 55%, transparent); white-space: nowrap; }
.mc-stat-value span { font-size: 11px; opacity: .7; }
.mc-stat.bad .mc-stat-label { color: #ff4d6a; }
/* narrow left column: compact cross dock widget */
.mc-left .mc-days { gap: 4px; }
.mc-left .mc-day { font-size: 9px; }
.mc-left .mc-po-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.mc-left .mc-po-val { font-size: 20px; }
.mc-left .mc-po-stats b { font-size: 13px; }
.mc-left .mc-po-stats span { font-size: 8.5px; }
.mc-left .mc-po-closed { grid-template-columns: 36px minmax(0, 1fr) auto; }
.mc-left .mc-po-closed .mc-note:last-child { display: none; }
/* center column banner wraps */
.mc-center .mc-banner-text { flex-direction: column; gap: 2px; }
/* right column: donut over a two-column legend, tighter logs */
.mc-mix-stack .sw-mix { flex-direction: column; }
.mc-mix-stack .sw-mix svg { width: 170px !important; height: 170px !important; }
.mc-mix-stack .sw-mix > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px !important; width: 100%; }
.mc-right-log { height: auto; max-height: 340px; font-size: 12px; }
.mc-right .sw-sync-row b { width: 62px; }
.mc-right .sw-sync-name { max-width: 55%; }
/* the lane rows in the narrower center column */
.mc-center .mc-lane-row { grid-template-columns: 56px 80px minmax(0, 1fr) auto 128px; }
@media (max-width: 1250px) { .mc-3col { grid-template-columns: 250px minmax(0, 1fr); } .mc-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mc-3col, .mc-right { grid-template-columns: minmax(0, 1fr); display: flex; flex-direction: column; } }
.mc-left .mc-po-closed { grid-template-columns: 34px 64px minmax(0, 1fr); }
.mc-left .mc-po-closed .mc-note { font-size: 11px; }
.mc-right .sw-sync-row { flex-wrap: wrap; row-gap: 0; }
.mc-right .sw-sync-name { max-width: none; flex: 1; }
.mc-right .sw-sync-meta { flex-basis: 100%; margin-left: 87px; padding-left: 0; font-size: 11px; }
.mc-right .sw-log-row { white-space: normal; }
/* v2.31.151: plain PROCESS (no ">"), breathing a soft glow while it's ready
   to press -- not while armed, sending, on hold or cancelled */
.stat-card.stat-action.process-all-tile .stat-value { font-size: 19px; letter-spacing: .3px; }
@keyframes process-yearn {
  0%, 100% { text-shadow: 0 0 6px rgba(51,255,136,.55); }
  50% { text-shadow: 0 0 10px rgba(51,255,136,.95), 0 0 22px rgba(51,255,136,.45); }
}
@keyframes process-yearn-edge {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: -2px 0 12px -2px rgba(51,255,136,.55); }
}
.stat-card.stat-action.process-all-tile:not(:disabled):not(.armed) .stat-value { animation: process-yearn 2.8s ease-in-out infinite; }
.stat-card.stat-action.process-all-tile:not(:disabled):not(.armed) { animation: process-yearn-edge 2.8s ease-in-out infinite; }
.stat-card.stat-action.process-all-tile:not(:disabled):not(.armed):hover .stat-value { animation: none; text-shadow: 0 0 10px rgba(51,255,136,.95), 0 0 22px rgba(51,255,136,.45); }
@media (prefers-reduced-motion: reduce) {
  .stat-card.stat-action.process-all-tile .stat-value, .stat-card.stat-action.process-all-tile { animation: none !important; }
}

/* v2.31.127 (concepts board 14): split order age; cross dock right; system check + event log left */
.mc-age-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mc-age-row.two { display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 5px 2px; }
.mc-age-top { display: grid; grid-template-columns: 80px 58px auto; gap: 8px; align-items: center; }
.mc-age-row.two .mc-note { font-size: 10.5px; }
/* v2.31.141 Order Age rows: one line, shared columns (subgrid) */
/* v2.31.164: Waiting to Process -- oldest orders in two columns */
.mc-age-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-items: start; }
@media (max-width: 900px) { .mc-age-two { grid-template-columns: minmax(0, 1fr); } }
.mc-age-list { display: grid; grid-template-columns: max-content max-content max-content max-content minmax(0, 1fr) max-content; column-gap: 10px; }
.mc-age-list .mc-age-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 6px 4px; }
.mc-age-list .mc-age-row > * { min-width: 0; }
.mc-age-cell { display: flex; align-items: center; }
.mc-age-cell .track-dot { margin: 0 auto; }
.mc-age-vendor { justify-content: flex-end; }
.mc-age-tag { font-size: 9px; font-weight: 800; letter-spacing: .5px; border-radius: 4px; padding: 0 5px; line-height: 15px; white-space: nowrap; text-align: center; }
.mc-age-tag.hold { color: #ff9d35; border: 1px solid rgba(255,157,53,.55); }
.mc-age-tag.warn { color: #ffcf3d; border: 1px solid rgba(255,207,61,.55); }
.mc-age-list .mc-onote { color: var(--fg-bright); text-transform: uppercase; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-left .sw-sync-row { flex-wrap: wrap; row-gap: 0; }
.mc-left .sw-sync-name { max-width: none; flex: 1; }
.mc-left .sw-sync-meta { flex-basis: 100%; margin-left: 87px; padding-left: 0; font-size: 11px; }
.mc-left .sw-log-row { white-space: normal; }
.mc-left .sw-log { font-size: 11.5px; height: auto; max-height: 360px; }
.mc-left .sw-sync-row b { width: 62px; }
.mc-right .mc-po-closed { grid-template-columns: 40px 68px minmax(0, 1fr) auto; }
@media (max-width: 900px) { .mc-age-split { grid-template-columns: minmax(0, 1fr); } }
.mc-left .sw-sync-meta { margin-left: 16px; white-space: normal; }

/* v2.31.129: address card header -- alert / approved icon before the shipping pill; pencil stays in the corner */
.addr-head-icon { display: inline-flex; align-items: center; }
.addr-head-icon.clickable { cursor: pointer; }
.addr-head-icon.approved svg { filter: drop-shadow(0 0 4px rgba(51,255,136,.6)); }
.addr-approve { color: var(--status-instock-bg) !important; border-color: var(--status-instock-bg) !important; }
.addr-recheck-note { color: #ffab2e; font-size: 10.5px; }
.addr-field-alert-fix input { border-color: var(--sync-orange) !important; box-shadow: 0 0 0 1px rgba(255,157,53,.25); }
.addr-field-alert-fix .addr-field-hint { color: var(--sync-orange); }

/* v2.31.131 address editor (mockup E1): color-coded sources, equal buttons, revert inside */
:root { --addr-usps: #4d8dff; --addr-shop: #74f24a; --addr-yours: #35e8ff; }
.addr-src { border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 6px; padding: 7px 10px; font-size: 11px; line-height: 1.45; color: var(--fg-bright); cursor: pointer; background: rgba(255,255,255,.015); }
.addr-src:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.addr-src.sel { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px var(--c); }
.addr-src-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.addr-tag { font-size: 8.5px; font-weight: 800; letter-spacing: .6px; border-radius: 3px; padding: 1px 5px; color: #04121a; }
.addr-src-note { font-size: 9px; color: var(--fg-dim); }
.addr-src-use { margin-left: auto; font-size: 9.5px; color: var(--c); }
.addr-diff { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.addr-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.addr-btns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.addr-btn { border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; letter-spacing: .6px; padding: 9px 4px; border: 1.5px solid; background: transparent; cursor: pointer; min-height: 38px; }
.addr-btn.save { background: var(--cyan); border-color: var(--cyan); color: #04252b; }
.addr-btn.save:disabled { opacity: .7; }
.addr-btn.ok { border-color: var(--status-instock-bg); color: var(--status-instock-bg); }
.addr-btn.ok:hover { background: rgba(51,255,136,.08); }
.addr-btn.cancel { border-color: var(--border); color: var(--fg-dim); }
.addr-btn.cancel:hover { color: var(--fg); }
.addr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.addr-revert { font-size: 10px; color: var(--addr-shop); cursor: pointer; white-space: nowrap; }
.addr-revert:hover { text-decoration: underline; }
.addr-recheck-note { color: #ffab2e; font-size: 10px; margin-top: 6px; }
.addr-status-line { font-size: 9.5px; margin-top: 4px; }
.addr-status-line.ok { color: var(--status-instock-bg); }
.addr-status-line.warn { color: #ffab2e; }
.addr-status-line.dim { color: var(--fg-dim); }
.order-chip.approved { border-color: var(--status-instock-bg); color: var(--status-instock-bg); }
.addr-field-alert-fix .addr-field-hint, .addr-field-alert-apt .addr-field-hint { font-size: 9.5px; }

/* v2.31.155: INCOMING (UPS packages headed to our dock) */
.inc-all { background: transparent; border: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; white-space: nowrap; }
.inc-sum { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; margin: 2px 0 6px; }
.inc-sum b { font-size: 13px; margin-right: 3px; }
.inc-err { font-size: 10px; color: #ff9d35; margin-bottom: 4px; }
.inc-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.04); }
.inc-row:last-child { border-bottom: 0; }
.inc-ic { font-size: 13px; text-align: center; }
.inc-mid { min-width: 0; }
.inc-l1 { display: flex; gap: 6px; align-items: center; font-size: 11.5px; min-width: 0; }
.inc-trk { color: var(--fg-bright); font-weight: 700; font-family: var(--font-mono); }
.inc-po { font-size: 9.5px; font-weight: 800; color: #ffcf3d; border: 1px solid rgba(255,207,61,.6); border-radius: 999px; padding: 0 6px; line-height: 15px; white-space: nowrap; }
.inc-ship { font-size: 10px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.inc-l2 { font-size: 10px; color: var(--fg-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-eta { text-align: right; font-size: 11px; font-weight: 800; white-space: nowrap; }
.inc-eta small { display: block; font-size: 9px; font-weight: normal; color: var(--fg-dim); letter-spacing: 1px; }
/* v2.31.156: INCOMING rows -- vendor pill + PO name, sections */
.inc-vp { font-size: 9.5px; font-weight: 800; color: #04121a; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.inc-po2 { color: var(--fg-bright); font-weight: 800; font-size: 12px; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-box { font-size: 9px; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; flex: none; }
.inc-sec { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); font-weight: 700; margin: 8px 0 0; }
.inc-l2 { letter-spacing: .3px; font-size: 9.5px; }
/* v2.31.157: INCOMING rows link to ups.com; manual refresh */
a.inc-row { color: inherit; text-decoration: none; border-radius: 5px; }
a.inc-row:hover { background: rgba(255,255,255,.04); }
a.inc-row:hover .inc-po2 { color: var(--cyan); }
.inc-actions { display: flex; align-items: center; gap: 6px; }
.inc-refresh { background: transparent; border: 1px solid var(--border); color: var(--cyan); border-radius: 999px; width: 24px; height: 24px; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.inc-refresh:hover { border-color: var(--cyan); }
.inc-refresh.spin { animation: inc-spin .8s linear infinite; }
@keyframes inc-spin { to { transform: rotate(360deg); } }
/* v2.31.159: Shipments screen rework (INCOMING by cart | OTHER SHIPMENTS) */
.shp-tab { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--fg-dim); cursor: pointer; }
.shp-tab b { margin-left: 6px; }
.shp-tab.on { background: #fff44f; border-color: #fff44f; color: #1a1800; box-shadow: 0 0 10px rgba(255,244,79,.4); }
.shp-tab.oth.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; box-shadow: 0 0 10px rgba(53,232,255,.4); }
.shp-checked { font-size: 10.5px; color: var(--fg-dim); }
.shp-raw { font-size: 10.5px; color: var(--fg-dim); text-decoration: none; }
.shp-raw:hover { color: var(--cyan); }
.shp-sum { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; margin-bottom: 12px; }
.shp-sum b { font-size: 15px; margin-right: 4px; }
.shp-sum .dim, .shp-table .dim { color: var(--fg-dim); }
.shp-err { font-size: 11px; color: #ff9d35; margin-bottom: 10px; }
.shp-table td { white-space: nowrap; }
.shp-table .shp-r { text-align: right; }
.shp-box:hover td { background: rgba(255,255,255,.03); }
.shp-grp td { background: rgba(255,244,79,.05); border-top: 1px solid rgba(255,244,79,.18); }
.shp-grp.done td { background: rgba(51,255,136,.035); border-top-color: rgba(51,255,136,.15); }
.shp-po { color: var(--title-yellow); font-weight: bold; }
.shp-trk { color: var(--cyan); text-decoration: underline dotted; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.shp-trk:hover { text-decoration-style: solid; }
.shp-ic { width: 22px; text-align: center; padding-left: 16px !important; }
.shp-st { font-weight: bold; }
.shp-eta { font-weight: bold; }
.shp-link { color: var(--fg-dim); cursor: pointer; }
.shp-link:hover { color: var(--cyan); }
.shp-ord { color: var(--title-yellow); cursor: pointer; font-variant-numeric: tabular-nums; }
.shp-ord:hover { text-decoration: underline; }
.shp-svc1 { color: #ff4d6a; font-weight: bold; }
.shp-svc2 { color: #ff9d35; font-weight: bold; }
.shp-ok { color: var(--status-instock-bg); font-weight: bold; }
.shp-warn { color: #ff9d35; font-weight: bold; }
/* v2.31.160: Shipments side panel */
.shp-side .shp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.shp-side .shp-tab { width: 100%; padding: 7px 6px; }
.shp-today, .shp-print { display: block; width: 100%; margin-bottom: 8px; padding: 9px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 1px; cursor: pointer; background: transparent; }
.shp-today { border: 1px solid rgba(255,207,61,.55); color: #ffcf3d; }
.shp-today.on { background: #ffcf3d; color: #1a1400; box-shadow: 0 0 10px rgba(255,207,61,.45); }
.shp-print { border: 1px solid var(--status-instock-bg); color: var(--status-instock-bg); }
.shp-print:hover { background: rgba(51,255,136,.08); }
.shp-hint { font-size: 10px; color: var(--fg-dim); margin: -2px 0 12px; }
.shp-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.shp-tile { border: 1px solid var(--border); border-top: 2px solid var(--tc); border-radius: 6px; padding: 8px 8px 7px; text-align: center; font-family: var(--font-mono); }
.shp-tile.click { cursor: pointer; } .shp-tile.click:hover { background: rgba(255,255,255,.03); }
.shp-tile b { display: block; font-size: 22px; color: var(--fg-bright); text-shadow: 0 0 8px var(--tc); }
.shp-tile span { display: block; font-size: 9px; letter-spacing: 1px; font-weight: 800; color: var(--tc); margin-top: 2px; }
.shp-tile small { display: block; font-size: 9.5px; color: var(--fg-dim); margin-top: 2px; }
.shp-h4 { font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 4px 0 8px; font-weight: 700; text-transform: uppercase; }
.shp-vrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-family: var(--font-mono); font-size: 11px; margin-bottom: 6px; }
.shp-vbar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.shp-vbar i { display: block; height: 100%; border-radius: 999px; }
.shp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.shp-filter-on { color: #ffcf3d; font-size: 11px; }
.shp-filter-on a { color: var(--cyan); cursor: pointer; text-decoration: underline; }
.shp-table td.shp-when { color: var(--fg-dim); }
/* v2.31.162: Shipments table uses the shared th/td + List size (Settings -> Advanced), like Orders / Inventory */
.shp-table th { white-space: nowrap; }
.shp-grp td { font-size: 1.02em; }
.shp-ic { width: 26px; }
.shp-meta, .shp-link { color: var(--fg-dim); font-size: .8em; }

/* v2.31.185: System Status → LIVE SYNCS */
.live-panel { padding: 12px 14px; }
.live-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.live-sub { font-size: 10px; color: var(--fg-dim); }
.live-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11px; padding: 4px 0 5px; }
.live-name { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-t { color: var(--fg-bright); font-variant-numeric: tabular-nums; font-size: 11px; }
.live-row.idle .live-t { color: var(--fg-dim); font-size: 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: dot-pulse 1s ease-in-out infinite; }
.live-bar { grid-column: 1 / -1; height: 2px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; position: relative; }
.live-bar i { position: absolute; top: 0; bottom: 0; width: 30%; background: var(--cyan); animation: live-sweep 1.4s ease-in-out infinite; }
@keyframes live-sweep { from { left: -30%; } to { left: 100%; } }
.live-q { font-size: 10px; color: var(--fg-dim); padding: 4px 0 0 15px; }

/* v2.31.188: Vendor Inventory → selected product → STOCK HISTORY */
.uh-wrap { margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; }
.uh-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); margin-bottom: 6px; }
.uh-tabs { display: inline-flex; gap: 4px; }
.uh-tab { font-family: var(--font-mono); font-size: 9.5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg-dim); cursor: pointer; }
.uh-tab.on { color: #04252b; background: var(--cyan); border-color: var(--cyan); }
.uh-empty { font-size: 11px; color: var(--fg-dim); padding: 8px 0; }
.uh-chart { position: relative; }
.uh-chart svg { display: block; overflow: visible; }
.uh-grid { stroke: var(--border); stroke-width: 1; }
.uh-ax { fill: var(--fg-dim); font-size: 8px; font-family: var(--font-mono); }
.uh-cross { stroke: var(--fg-dim); stroke-width: 1; stroke-dasharray: 2 2; }
.uh-bulk circle { fill: #ff9d35; stroke: var(--panel-bg, #0f1220); stroke-width: 2; }
.uh-bulk text { fill: #04121a; font-size: 9px; font-weight: bold; font-family: var(--font-mono); pointer-events: none; }
.uh-tip { position: absolute; top: 4px; pointer-events: none; background: rgba(8,11,20,.95); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 10px; min-width: 110px; z-index: 5; }
.uh-tip b { color: var(--fg-bright); }
.uh-tip-date { color: var(--fg-dim); font-size: 9px; margin-bottom: 2px; }
.uh-sw { display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: 3px; }
.uh-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; margin: 6px 0; color: var(--fg); }
.uh-legend b { color: var(--fg-bright); }
.uh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.uh-stats > div { border: 1px solid var(--border); border-radius: 6px; padding: 6px 7px; }
.uh-stats b { display: block; color: var(--fg-bright); font-size: 14px; }
.uh-stats span { font-size: 8.5px; color: var(--fg-dim); letter-spacing: .4px; }
.uh-note { font-size: 9.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.5; }
.uh-note b { color: #ff9d35; }

/* v2.31.189: Most Wanted leads with days with sales */
.sw-score-days { color: var(--fg-bright); font-weight: bold; }
#status-top-unlinked .sw-score { grid-template-columns: 32px minmax(0, 1fr) 66px 120px 96px; }
.mw-tier { font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 0; border: 1px solid; border-radius: 4px; text-align: center; font-family: var(--font-mono); }
#status-top-unlinked .sw-score-val { color: var(--fg-dim); font-size: 12px; font-weight: normal; }
#status-top-unlinked .sw-score-val .sw-score-days { color: var(--fg-bright); font-weight: bold; }
#status-top-unlinked .sw-score.top .sw-score-val .sw-score-days { color: var(--sw-c); }
#status-top-unlinked .sw-score-val { white-space: nowrap; }

/* v2.31.191: Most Wanted column headers + tag key */
.mw-head { display: grid; grid-template-columns: 32px minmax(0, 1fr) 66px 120px 96px; gap: 10px; padding: 0 6px 4px; font-size: 9px; letter-spacing: 1.3px; color: var(--fg-dim); }
.mw-head span { text-align: center; }
.mw-head span:last-child { text-align: right; }
.mw-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 10px; color: var(--fg-dim); }
.mw-key .mw-tier { display: inline-block; padding: 1px 6px; margin-right: 2px; }
.mw-key-note { margin-left: auto; }
/* headers + key stay visible while the list scrolls */
#status-top-unlinked .mw-head { position: sticky; top: 0; z-index: 1; background: var(--bg-panel); padding-top: 2px; }
#status-top-unlinked .mw-key { position: sticky; bottom: 0; z-index: 1; background: var(--bg-panel); padding-bottom: 2px; }

/* v2.31.193: Most Wanted category tabs -- neon chips, wrapping so every category shows */
.mw-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 6px; margin: 8px 0 6px; }
.mw-tabs:empty { display: none; }
.mw-tab { flex: none; display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 9px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--fg-dim); cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s; }
.mw-tab:hover { color: var(--mw-tc); border-color: color-mix(in srgb, var(--mw-tc) 55%, transparent); }
.mw-tab.on { color: #0b0616; background: var(--mw-tc); border-color: var(--mw-tc); box-shadow: 0 0 8px color-mix(in srgb, var(--mw-tc) 60%, transparent); }
.mw-tab-n { font-weight: 600; opacity: .7; letter-spacing: 0; }
.mw-cat-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin: 0 -2px; opacity: .9; }

/* v2.31.193: Settings → Categories */
.cat-loading, .cat-empty { color: var(--fg-dim); font-size: 11.5px; padding: 14px 0; }
.cat-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-stat { border: 1px solid var(--border); border-radius: 6px; padding: 6px 12px; font-size: 11px; color: var(--fg-dim); }
.cat-stat b { color: var(--fg-bright); font-size: 14px; margin-right: 4px; }
.cat-stat.warn { border-color: #ff9d3566; }
.cat-stat.warn b { color: #ff9d35; }
.cat-legend { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.cat-legend-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--cat-c) 45%, transparent); color: var(--cat-c);
  border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: bold; letter-spacing: .3px; }
.cat-legend-chip b { color: var(--fg-dim); font-weight: normal; }
.cat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin-bottom: 14px; }
.cat-search { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-mono); font-size: 12px; padding: 5px 8px; min-width: 0; flex: 1 1 200px; max-width: 320px; }
.cat-search:focus { outline: none; border-color: var(--cyan); }
.cat-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); cursor: pointer; }
.cat-rescan { margin-left: auto; font-size: 11px; }
.cat-group { margin-bottom: 18px; }
.cat-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cat-group-count { font-size: 11px; color: var(--fg-dim); }
.cat-warn-text { color: #ff9d35; }
.cat-table th { position: static; background: transparent; }
.cat-table .num { text-align: right; width: 80px; color: var(--fg-dim); }
.cat-table th:nth-child(3), .cat-table td:nth-child(3) { width: 90px; }
.cat-table th:nth-child(4), .cat-table td:nth-child(4) { width: 300px; white-space: nowrap; }
.cat-value { color: var(--fg); overflow-wrap: break-word; }
.cat-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; border: 1px solid var(--border); vertical-align: 1px; }
.cat-row.unmapped .cat-value { color: #ffcf9a; }
.cat-row.skip .cat-value { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: #566b8f88; }
.cat-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; border: 1px solid; border-radius: 4px; }
.cat-badge.auto { color: var(--fg-dim); border-color: var(--border); }
.cat-badge.set { color: #33ff88; border-color: #33ff8855; }
.cat-badge.skip { color: #8fa3c7; border-color: #8fa3c744; }
.cat-badge.skip.auto { border-style: dashed; }
.cat-badge.unmapped { color: #ff9d35; border-color: #ff9d3566; box-shadow: 0 0 6px #ff9d3533; }
.cat-select { width: 235px; font-size: 11.5px; padding: 3px 6px; }
.cat-row.unmapped .cat-select { border-color: #ff9d3566; }
.cat-saved { font-size: 10.5px; margin-left: 8px; color: var(--fg-dim); }
.cat-saved.ok { color: #33ff88; }
.cat-saved.err { color: #ff4d6a; white-space: normal; }
@media (max-width: 700px) {
  .cat-table th:nth-child(3), .cat-table td:nth-child(3) { display: none; }
  .cat-table th:nth-child(4), .cat-table td:nth-child(4) { width: auto; white-space: normal; }
  .cat-table td, .cat-table th { padding: 5px 4px; }
  .cat-table .num { width: 36px; }
  .cat-select { width: 138px; }
  .cat-rescan { margin-left: 0; }
}

/* v2.31.197 (mockup A): Most Wanted lanes + grid */
.mw-view button.on { background: #b388ff; color: #0b0616; box-shadow: 0 0 8px rgba(179,136,255,.6); }
.mw-body { margin-top: 12px; }
.mw-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.mw-lane { border: 1px solid var(--border); border-top: 3px solid var(--lc); border-radius: 10px; padding: 10px 12px 6px; min-width: 0; }
.mw-lane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mw-lane-head b { color: var(--lc); font-size: 11.5px; letter-spacing: 2px; text-shadow: 0 0 6px color-mix(in srgb, var(--lc) 55%, transparent); }
.mw-lane-head span { font-size: 9.5px; color: var(--fg-dim); white-space: nowrap; }
.mw-lane-desc { font-size: 10px; color: var(--fg-dim); margin: 2px 0 6px; }
.mw-row { display: grid; grid-template-columns: 14px 7px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 0; border-top: 1px dashed #151d31; padding: 6px 2px; font-family: inherit; font-size: 12px; color: var(--fg); text-align: left; cursor: pointer; }
.mw-row:hover { background: rgba(179,136,255,.07); }
.mw-row:hover .mw-ttl { color: var(--cyan); }
.mw-n { color: var(--fg-dim); font-weight: 800; font-size: 10px; }
.mw-dot { width: 7px; height: 7px; border-radius: 50%; }
.mw-ttl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--fg-bright); min-width: 0; }
.mw-metric { font-size: 10.5px; color: var(--fg-dim); text-align: right; white-space: nowrap; min-width: 58px; }
.mw-metric b { color: var(--fg-bright); }
.mw-empty { font-size: 10.5px; color: var(--fg-dim); padding: 10px 2px 12px; border-top: 1px dashed #151d31; }
.mw-wk { display: inline-flex; gap: 2px; align-items: flex-end; height: 15px; flex: none; vertical-align: -2px; }
.mw-wk i { width: 5px; background: #2a3552; border-radius: 1px; }
.mw-wk i.now { background: var(--c, #b388ff); box-shadow: 0 0 4px var(--c, #b388ff); }
.mw-up { color: #33ff88; font-size: 10.5px; font-weight: 800; }
.mw-dn { color: #ff4d6a; font-size: 10.5px; font-weight: 800; }
.mw-flat { color: var(--fg-dim); font-size: 10.5px; }
.mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mw-card { border: 1px solid var(--border); border-left: 3px solid var(--cc); border-radius: 9px; padding: 8px 10px 4px; min-width: 0; }
.mw-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.mw-card-head b { color: var(--cc); font-size: 9.5px; letter-spacing: 1.2px; }
.mw-card-head span { font-size: 9.5px; color: var(--fg-dim); }
.mw-card-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 6px; align-items: center; width: 100%;
  background: transparent; border: 0; padding: 3px 0; font-family: inherit; font-size: 11px; color: var(--fg); text-align: left; cursor: pointer; }
.mw-card-row .mw-ttl { font-size: 11px; }
.mw-card-row:hover .mw-ttl { color: var(--cyan); }
.mw-card-row .mw-up, .mw-card-row .mw-dn, .mw-card-row .mw-flat { text-align: right; font-size: 9.5px; }
.mw-card-more { display: block; margin-left: auto; background: transparent; border: 0; font-family: inherit; font-size: 9.5px; color: var(--fg-dim); cursor: pointer; padding: 4px 0; }
.mw-card-more:hover { color: var(--cc); }
.mw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 10px; color: var(--fg-dim); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.mw-foot .mw-wk { margin-right: 4px; }
.mw-foot-note { margin-left: auto; }

/* v2.31.198: Most Wanted category picker (replaces the chip row) */
.mw-head-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.mw-pick { position: relative; }
.mw-pick-btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--pc); cursor: pointer; }
.mw-pick-btn:hover { box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 45%, transparent); }
.mw-pick-btn i, .mw-pick-opt i { width: 7px; height: 7px; border-radius: 50%; background: var(--pc); flex: none; }
.mw-pick-btn b { color: var(--fg-dim); font-weight: 600; letter-spacing: 0; }
.mw-pick-caret { color: var(--fg-dim); font-size: 9px; }
.mw-pick-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; max-height: 360px; overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.mw-pick-menu[hidden] { display: none; }
.mw-pick-opt { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; border-radius: 6px; padding: 6px 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg); cursor: pointer; text-align: left; }
.mw-pick-opt span { flex: 1; }
.mw-pick-opt b { color: var(--fg-dim); font-weight: normal; font-size: 10px; }
.mw-pick-opt:hover { background: color-mix(in srgb, var(--pc) 12%, transparent); color: var(--pc); }
.mw-pick-opt.on { color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.mw-hist { color: #ffcf3d; cursor: help; }
@media (max-width: 700px) {
  .sw-panel-head:has(.mw-head-ctl) { flex-wrap: wrap; gap: 10px; }
  .mw-head-ctl { width: 100%; justify-content: space-between; }
}

/* v2.31.199: Trends screen */
.mw-open-trends { background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px; color: var(--fg-dim); cursor: pointer; }
.mw-open-trends:hover { color: #b388ff; border-color: #b388ff88; }
/* v2.31.200: a body-grid like the other screens; wider panel for the product detail */
.tr-scroll { padding: 18px 20px 30px; }
.tr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.tr-title { font-size: 18px; font-weight: 800; letter-spacing: 4px; color: #b388ff; text-shadow: 0 0 8px #b388ff; }
.tr-sub { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }
.tr-tabs button { padding: 5px 12px; font-size: 10px; }
.tr-tabs button.on { background: #b388ff; color: #0b0616; box-shadow: 0 0 8px rgba(179,136,255,.6); }
.tr-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); padding: 12px 14px; min-width: 0; }
.tr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 12px; }
.tr-kpis:empty { display: none; }
.tr-kpi { text-align: left; border: 1px solid var(--border); border-left: 3px solid var(--kc); border-radius: 10px; background: var(--bg-panel); padding: 10px 12px;
  font-family: var(--font-mono); color: var(--fg); cursor: pointer; }
.tr-kpi:disabled { cursor: default; }
.tr-kpi:not(:disabled):hover { box-shadow: 0 0 10px color-mix(in srgb, var(--kc) 30%, transparent); }
.tr-kpi .k { font-size: 9.5px; letter-spacing: 1.5px; color: var(--kc); font-weight: 800; }
.tr-kpi .v { font-size: 24px; color: var(--fg-bright); font-weight: 800; margin: 4px 0 2px; }
.tr-kpi .n { font-size: 10px; color: var(--fg-dim); }
.tr-heat { margin-bottom: 12px; }
.tr-hh { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--fg-dim); letter-spacing: 1.2px; margin-bottom: 8px; flex-wrap: wrap; }
.tr-heatrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.tr-hc { text-align: left; border: 1px solid var(--border); border-top: 2px solid var(--cc); border-radius: 8px; padding: 7px 8px; background: transparent;
  font-family: var(--font-mono); cursor: pointer; color: var(--fg); }
.tr-hc:hover, .tr-hc.on { background: color-mix(in srgb, var(--cc) 10%, transparent); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.tr-hc .cn { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hc .cv { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 5px; }
.tr-sp { display: flex; gap: 2px; align-items: flex-end; height: 18px; width: 44px; }
.tr-sp i { flex: 1; background: #2a3552; border-radius: 1px; }
.tr-sp i:last-child { background: var(--cc); }
.tr-link { background: none; border: 0; color: #b388ff; font-family: inherit; font-size: inherit; cursor: pointer; padding: 0; }
.tr-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.tr-lanes:empty { display: none; }
.tr-lane { text-align: left; border: 1px solid var(--border); border-top: 3px solid var(--lc); border-radius: 8px; padding: 7px 9px; background: transparent;
  font-family: var(--font-mono); color: var(--fg); cursor: pointer; }
.tr-lane.on { background: color-mix(in srgb, var(--lc) 10%, transparent); border-color: color-mix(in srgb, var(--lc) 60%, transparent); }
.tr-lane b { font-size: 10px; letter-spacing: 1.5px; color: var(--lc); }
.tr-lane span { float: right; font-size: 13px; color: var(--fg-bright); font-weight: 800; }
.tr-lane div { font-size: 9px; color: var(--fg-dim); margin-top: 3px; min-height: 11px; }
.tr-filters { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.tr-filters:empty { display: none; }
.tr-search { flex: 1 1 200px; min-width: 150px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; padding: 5px 8px; }
.tr-search:focus { outline: none; border-color: #b388ff; }
.tr-sel { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--fg-dim); letter-spacing: .5px; }
.tr-sel select { width: auto; max-width: 180px; font-size: 10.5px; padding: 3px 6px; }
.tr-table-wrap { overflow-x: auto; }
.tr-table { width: 100%; border-collapse: collapse; }
.tr-table th { position: static; background: transparent; white-space: nowrap; }
.tr-table td { border-bottom: 1px dashed #151d31; white-space: nowrap; }
.tr-table tbody tr { cursor: pointer; }
.tr-table tr.sel td { background: rgba(179,136,255,.08); }
.tr-table tr.sel td:first-child { box-shadow: inset 3px 0 0 #b388ff; }
.tr-table .num { text-align: right; }
.tr-t { max-width: 280px; overflow: hidden; text-overflow: ellipsis; color: var(--fg-bright); }
.tr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.tr-tag { font-size: 8px; font-weight: 800; letter-spacing: .8px; padding: 1px 5px; border: 1px solid; border-radius: 3px; font-family: var(--font-mono); }
.tr-pill { display: inline-block; font-size: 8.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; color: #04121a; margin-right: 3px; }
.tr-pill.out { opacity: .45; }
.tr-more { font-size: 9px; color: var(--fg-dim); }
.tr-dim { color: var(--fg-dim); }
.tr-good { color: #33ff88; }
.tr-ok { color: #ffcf3d; }
.tr-bad { color: #ff4d6a; }
.tr-star { background: none; border: 0; color: var(--fg-dim); font-size: 14px; cursor: pointer; padding: 0 2px; }
.tr-star:hover { color: #ffcf3d; }
.tr-star.on { color: #ffcf3d; text-shadow: 0 0 6px #ffcf3d; }
.tr-act { font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 4px; border: 1px solid; }
.tr-x { background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 12px; }
.tr-x:hover { color: #ff4d6a; }
.tr-status { width: auto; font-size: 9.5px; font-weight: 800; letter-spacing: .8px; color: var(--sc); border-color: color-mix(in srgb, var(--sc) 50%, transparent); padding: 2px 5px; }
.tr-note-inline { width: 220px; background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--fg); font-family: var(--font-mono); font-size: 11px; padding: 3px 5px; }
.tr-note-inline:hover, .tr-note-inline:focus { border-color: var(--border); outline: none; background: var(--bg); }
.tr-pager { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: var(--fg-dim); margin-top: 8px; flex-wrap: wrap; }
.tr-pager button { background: transparent; border: 1px solid var(--border); border-radius: 5px; color: var(--fg); font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; cursor: pointer; }
.tr-pager button:disabled { opacity: .35; cursor: default; }
.tr-foot { margin-left: auto; }
.tr-empty { color: var(--fg-dim); font-size: 11px; padding: 16px 4px; }
.tr-dmeta { font-size: 10px; color: var(--fg-dim); margin-bottom: 6px; }
.tr-dtitle { color: var(--fg-bright); font-size: 13.5px; margin: 0 0 8px; line-height: 1.35; }
.tr-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tr-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-family: var(--font-mono); font-size: 9.5px;
  font-weight: 800; letter-spacing: 1px; padding: 5px 10px; cursor: pointer; }
.tr-btn:hover { border-color: #b388ff; color: #b388ff; }
.tr-btn-p { background: #ffcf3d; border-color: #ffcf3d; color: #1a1300; }
.tr-btn-p:hover { color: #1a1300; box-shadow: 0 0 10px #ffcf3d88; }
.tr-btn-on { color: #ffcf3d; border-color: #ffcf3d88; }
.tr-why { border: 1px solid #33ff8844; background: #33ff880d; border-radius: 7px; padding: 8px 10px; font-size: 10.5px; line-height: 1.55; }
.tr-why b { color: #33ff88; }
.tr-sec { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 12px 0 6px; border-top: 1px dashed var(--border); padding-top: 8px; }
.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tr-st { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; }
.tr-st b { display: block; color: var(--fg-bright); font-size: 15px; }
.tr-st b small { color: var(--fg-dim); font-size: 10px; font-weight: normal; }
.tr-st span { font-size: 8.5px; color: var(--fg-dim); letter-spacing: 1px; }
.tr-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tr-weeks div { border: 1px solid var(--border); border-radius: 7px; padding: 5px 7px; text-align: center; }
.tr-weeks div:last-child { border-color: #b388ff66; }
.tr-weeks b { display: block; color: var(--fg-bright); font-size: 14px; }
.tr-weeks span { display: block; font-size: 8px; color: var(--fg-dim); letter-spacing: .5px; }
.tr-weeks em { font-style: normal; font-size: 8.5px; color: var(--fg-dim); }
.tr-hist { margin-top: 10px; }
.tr-hist:empty { display: none; }
.tr-hist .uh-stats { display: none; }   /* the panel already shows these */
.tr-vrow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; font-size: 10.5px; padding: 4px 0; border-bottom: 1px dashed #151d31; }
.tr-vrow b { color: var(--fg-bright); }
.tr-short { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 10px; }
.tr-note { width: 100%; min-height: 60px; resize: vertical; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; padding: 6px 8px; }
.tr-note:focus { outline: none; border-color: #b388ff; }
@media (max-width: 700px) {
  .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-kpi { padding: 8px 10px; }
  .tr-kpi .v { font-size: 18px; }
  .tr-kpi .n { display: none; }
  .tr-tabs { width: 100%; justify-content: space-between; }
}

/* v2.31.200: Trends side panel (Overview / Product) */
.tr-panel .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 0; }
.tr-panel #tr-heat:not(:empty), .tr-panel #tr-over-extra { margin-top: 6px; }
.tr-panel .tr-heatlist { margin-bottom: 6px; }
.tr-panel .tr-kpi { padding: 7px 9px; border-radius: 6px; background: rgba(255,255,255,0.02); }
.tr-panel .tr-kpi .k { font-size: 8.5px; letter-spacing: 1px; }
.tr-panel .tr-kpi .v { font-size: 18px; margin: 3px 0 1px; }
.tr-panel .tr-kpi .n { font-size: 9px; }
.tr-h4 { display: flex; justify-content: space-between; align-items: baseline; color: var(--fg-dim); font-size: 10px; text-transform: uppercase;
  letter-spacing: .6px; margin: 16px 0 8px; font-weight: normal; }
.tr-h4 span { text-transform: none; letter-spacing: 0; font-size: 9.5px; }
.tr-heatlist { display: flex; flex-direction: column; gap: 1px; }
.tr-hrow { display: grid; grid-template-columns: 8px minmax(0, 1fr) 40px 46px 50px; gap: 8px; align-items: center; width: 100%; background: transparent;
  border: 0; border-radius: 5px; padding: 5px 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg); cursor: pointer; text-align: left; }
.tr-hrow:hover, .tr-hrow.on { background: color-mix(in srgb, var(--cc) 12%, transparent); }
.tr-hrow.on { box-shadow: inset 2px 0 0 var(--cc); }
.tr-hrow .tr-dot { margin: 0; background: var(--cc); }
.tr-hname { color: var(--cc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-hn { color: var(--fg-dim); font-size: 9.5px; text-align: right; }
.tr-hrow .tr-sp { width: 46px; height: 14px; }
.tr-ht { text-align: right; }
.tr-note-sm { font-size: 10px; color: var(--fg-dim); line-height: 1.55; }
.tr-peek-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #151d31; font-size: 11px; }
.tr-peek-row .tr-t { max-width: none; flex: 1; min-width: 0; }
.tr-flaghelp { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.tr-flaghelp div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: baseline; font-size: 10px; color: var(--fg); line-height: 1.4; }
.tr-flaghelp .tr-tag { justify-self: start; }
#tr-detail .tr-dtitle { font-size: 13px; }

/* v2.31.201 (top bar mockup A): Trends filters in the top bar, tabs + lanes in one row */
.tr-hbar { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.tr-hbar select { width: auto; max-width: 210px; }
.tr-toprow { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.tr-toprow .tr-tabs { flex: none; align-self: center; }
.tr-toprow .tr-lanes { flex: 1; margin-bottom: 0; }
@media (max-width: 1100px) {
  .tr-toprow { flex-direction: column; }
  .tr-toprow .tr-tabs { align-self: flex-start; }
}
@media (max-width: 800px) {
  #trends-filter-bar { order: 6; flex: 1 1 100%; }
  #trends-filter-bar select { flex: 1 1 45%; max-width: none; }
}

/* v2.31.203: NEXUS STATUS pills (filled = done, outline = in progress) + shipped age card */
.nx-pill { display: inline-block; font-size: 11px; font-weight: bold; letter-spacing: .2px; padding: 3px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.nx-pill.nx-unp { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }
.nx-pill.nx-pp { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 60%, transparent); }
.nx-pill.nx-pr { background: var(--status-exclusive-bg); color: #1a0418; }
.nx-pill.nx-ps { color: var(--status-instock-bg); border-color: color-mix(in srgb, var(--status-instock-bg) 60%, transparent); }
.nx-pill.nx-fs { background: var(--status-instock-bg); color: #04210f; }
.age-num.age-shipped { color: #33ff88; text-shadow: 0 0 6px rgba(51,255,136,.6), 0 0 16px rgba(51,255,136,.3); letter-spacing: .5px; }
.age-num.age-partship { color: var(--cyan); text-shadow: 0 0 6px rgba(53,232,255,.6), 0 0 16px rgba(53,232,255,.3); }
.age-sub { margin-top: 5px; font-size: 10px; line-height: 1.45; color: var(--fg-dim); text-align: center; }
.age-sub b { color: var(--fg-bright); }
.age-chip.age-chip-free { padding: 2px 8px; }

/* v2.31.205: feed schedules (Settings -> vendor cards) */
.feed-sched-line { font-size: 10.5px; color: var(--fg-dim); margin-top: 3px; line-height: 1.5; }
.feed-sched-sum { color: var(--accent, #35e8ff); }
.feed-sched-link { color: var(--fg); text-decoration: underline dotted; cursor: pointer; margin-left: 6px; }
.feed-sched-link:hover { color: var(--accent, #35e8ff); }
.feed-sched-editor { margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; font-size: 11px; }
.feed-sched-editor[hidden] { display: none; }
.fse-modes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fse-modes label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--fg-bright); }
.feed-sched-editor select, .feed-sched-editor input[type="text"], .feed-sched-editor input[type="time"] {
  background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; padding: 4px 6px; }
.fse-times input { width: 100%; box-sizing: border-box; }
.fse-times[hidden], .fse-quiet[hidden] { display: none; }
.fse-quiet { color: var(--fg-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fse-days { display: flex; gap: 4px; flex-wrap: wrap; }
.fse-day { background: transparent; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 10px; padding: 2px 8px; font-family: var(--font-mono); font-size: 10px; cursor: pointer; }
.fse-day.on { border-color: var(--accent, #35e8ff); color: var(--fg-bright); background: rgba(53, 232, 255, 0.12); }
.fse-preset { color: var(--fg-dim); font-size: 10px; line-height: 1.5; }
.fse-actions { display: flex; align-items: center; gap: 6px; }
.fse-err { color: var(--danger); font-size: 10.5px; }

/* v2.31.206: HIGH SCORES in Trends -> Our Catalog */
.tr-hs { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.tr-hsrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; width: 100%; background: transparent;
  border: 0; border-radius: 4px; padding: 5px 6px; color: var(--fg); font-family: var(--font-mono); font-size: 11px; text-align: left; cursor: pointer; }
.tr-hsrow:hover, .tr-hsrow.on { background: rgba(255, 207, 61, 0.10); }
.tr-hsrow b { text-align: right; color: #ffcf3d; font-size: 11.5px; }
.tr-hsrow .tr-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-hs30 { color: var(--fg-dim); font-size: 10px; white-space: nowrap; }
.tr-hs30 small { font-size: 9px; opacity: 0.8; }
.tr-hsrank { color: var(--fg-dim); font-weight: bold; font-size: 10.5px; letter-spacing: 0.5px; }
.tr-hsrank.top, .tr-hsrow.top .tr-hsrank { color: #ffcf3d; text-shadow: 0 0 6px rgba(255, 207, 61, 0.55); }
.tr-hsbar { display: inline-block; width: 70px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); vertical-align: middle; margin-right: 8px; overflow: hidden; }
.tr-hsbar i { display: block; height: 100%; background: #ffcf3d; box-shadow: 0 0 6px rgba(255, 207, 61, 0.6); border-radius: 3px; }
.tr-hsval { color: #ffcf3d; font-size: 12px; }
.tr-hsgold { color: #ffcf3d; }
.mw-open-trends[style*="--sw-c"]:hover { color: var(--sw-c); border-color: color-mix(in srgb, var(--sw-c) 55%, transparent); }

/* v2.31.207: EST. SALES chart above stock history, dot key */
.uh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.uh-sbar { fill: #33ff88; opacity: 0.35; }
.uh-sbar:hover { opacity: 0.7; }
.uh-sline { fill: none; stroke: #33ff88; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(51, 255, 136, 0.55)); }
.uh-salesum { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--fg-dim); margin: 2px 0 4px; }
.uh-salesum b { color: #33ff88; }
.uh-subhead { font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 10px 0 6px; padding-top: 8px; border-top: 1px dashed var(--border); }

/* v2.31.208 / v2.31.209: order PROFIT card -- profit + margin first, then short lines */
.profit-slot:empty { display: none; }
.pf-card { margin-top: 12px; padding: 14px 16px 10px; --pf: #33ff88; }
.pf-card.est { --pf: #ffcf3d; }
.pf-card.loss { --pf: #ff4d6a; }
.pf-top { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 10px; }
.pf-big span { display: block; font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); margin-bottom: 2px; }
.pf-big b { font-size: 28px; line-height: 1.1; color: var(--pf); text-shadow: 0 0 10px color-mix(in srgb, var(--pf) 40%, transparent); }
.pf-mg b { font-size: 19px; color: #ffcf3d; text-shadow: 0 0 8px rgba(255, 207, 61, 0.35); }
.pf-mg b i { font-style: normal; font-size: 12px; margin-right: 4px; vertical-align: 3px; }
.pf-mg b i.up { color: #33ff88; } .pf-mg b i.dn { color: #ff4d6a; }
.pf-badge { margin-left: auto; font-size: 9px; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(51, 255, 136, 0.45); color: #33ff88; cursor: help; }
.pf-badge.est { border-color: rgba(255, 207, 61, 0.45); color: #ffcf3d; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.pf-table th { font-size: 8.5px; letter-spacing: 1.5px; color: var(--fg-dim); font-weight: normal; text-align: right; padding: 0 0 6px; }
.pf-table td { padding: 6px 0 6px 8px; border-top: 1px dashed var(--border); text-align: right; color: var(--fg-bright); white-space: nowrap; }
.pf-table td:first-child, .pf-table th:first-child { text-align: left; padding-left: 0; color: var(--fg-dim); white-space: normal; }
.pf-table td small { font-size: 9px; color: var(--fg-dim); opacity: 0.8; }
.pf-table .pf-neg { color: #ff8fa3; } .pf-table .pf-pos { color: #33ff88; } .pf-table .pf-dim { color: var(--fg-dim); font-size: 11px; }
.pf-click { cursor: pointer; } .pf-click:hover td:first-child { color: var(--fg-bright); }
.pf-tog { color: var(--cyan); font-size: 10px; }
.pf-sub td { font-size: 10.5px; color: #a9b6d3; border-top-style: dotted; }
.pf-sub td:first-child { padding-left: 12px; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; max-width: 150px; white-space: nowrap; }
.pf-tot td { border-top: 1px solid color-mix(in srgb, var(--pf) 45%, transparent); color: var(--pf) !important; font-weight: bold; letter-spacing: 0.5px; padding-top: 8px; }
.pf-table th { background: transparent; position: static; border: 0; text-transform: none; }
.pf-table td { border-bottom: 0; }
.pf-table tr:hover td { background: transparent; }
.pf-table tr.pf-click:hover td { background: rgba(53, 232, 255, 0.05); }

/* v2.31.212: barcode on more than one Shopify listing */
.upc-dup { display: inline-block; font-size: 9.5px; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(255, 157, 53, 0.6); color: #ff9d35; cursor: help; vertical-align: 1px; }

/* v2.31.213: suggested vendor matches -- panel (A) + review queue (B) */
.match-ok { font-size: 9px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(51, 255, 136, 0.5); color: #33ff88; margin-left: 6px; cursor: pointer; }
.match-ok:hover { background: rgba(51, 255, 136, 0.12); }
.ms-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 2px; color: var(--fg-dim); margin: 16px 0 8px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ms-head b { color: #ffcf3d; font-weight: normal; }
.ms-card { border: 1px solid rgba(255, 207, 61, 0.35); background: rgba(255, 207, 61, 0.04); border-radius: 8px; padding: 11px 12px; margin-bottom: 10px; }
.ms-title { font-size: 11.5px; color: var(--fg-bright); line-height: 1.4; }
.ms-meta { font-size: 10px; color: var(--fg-dim); margin-top: 4px; }
.ms-meta .vendor-pill { font-size: 9px; padding: 1px 7px; }
.ms-bc { display: grid; grid-template-columns: 52px 1fr; gap: 2px 6px; font-size: 11px; margin-top: 8px; }
.ms-bc span { color: var(--fg-dim); } .ms-bc b { font-weight: normal; color: var(--fg-bright); letter-spacing: 1px; }
.ms-bc b i { font-style: normal; background: rgba(255, 77, 106, 0.4); border-radius: 2px; padding: 0 1px; }
.ms-ev { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ms-ev span { font-size: 9px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(51, 255, 136, 0.4); color: #33ff88; }
.ms-ev span.w { border-color: rgba(255, 207, 61, 0.5); color: #ffcf3d; }
.ms-btns { display: flex; gap: 6px; margin-top: 10px; }
.ms-btns button, .mr-table button { flex: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 7px 0; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.ms-btns button:hover, .mr-table button:hover { color: var(--fg-bright); border-color: var(--fg-dim); }
button.ms-ok { background: #33ff88; color: #04121a; border-color: #33ff88; font-weight: bold; }
button.ms-ok:hover { color: #04121a; filter: brightness(1.1); }
.ms-dim { color: var(--fg-dim); font-size: 11px; }
.mr-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.mr-tabs { display: flex; gap: 6px; }
.mr-tabs button { font-family: var(--font-mono); font-size: 10px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.mr-tabs button.on { background: var(--cyan); color: #04252b; border-color: var(--cyan); }
.mr-table td { vertical-align: middle; cursor: pointer; }
.mr-table td small { display: block; color: var(--fg-dim); font-size: 11.5px; margin-top: 2px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-table td .t { color: var(--fg-bright); }
.mr-table td .vendor-pill { font-size: 9px; padding: 1px 7px; }
.mr-table td.conf { font-weight: bold; } .mr-table td.conf.high { color: #33ff88; } .mr-table td.conf.med { color: #ffcf3d; }
.mr-table td.act { white-space: nowrap; width: 90px; } .mr-table td.act button { width: 38px; flex: none; padding: 5px 0; margin-left: 4px; }
.mr-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-size: 11px; color: var(--fg-dim); margin-top: 10px; }
.mr-pager button { font-family: var(--font-mono); font-size: 10px; background: transparent; border: 1px solid var(--border); color: var(--fg); border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.mr-foot { font-size: 10px; color: var(--fg-dim); margin-top: 14px; line-height: 1.6; max-width: 900px; }

/* v2.31.214: login screen + sidebar log out */
/* v2.31.272: login screen = the "Breach x Grid" intro (js/intro.js) */
.login-screen.nxi { position: fixed; inset: 0; z-index: 9999; background: #000; overflow: hidden; font-family: var(--font-mono); }
.nxi-screen { position: absolute; inset: 0; overflow: hidden; background: #03050a; }
.nxi-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nxi-layer { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0; }
.nxi-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.nxi-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%); }
.nxi-flash { position: absolute; inset: 0; pointer-events: none; background: #dffcff; opacity: 0; mix-blend-mode: screen; }
.nxi-snd { position: absolute; right: 12px; bottom: 10px; z-index: 2; font: 700 9px var(--font-mono); letter-spacing: .2em; color: #4c6590; background: rgba(3,5,10,.6); border: 1px solid #1c2740; border-radius: 6px; padding: 5px 8px; cursor: pointer; }
.nxi-snd:hover, .nxi-snd.on { color: var(--cyan); border-color: var(--cyan); }
.nxi-t { position: absolute; white-space: pre; line-height: 1.36; pointer-events: none; }
.nxi-boot { left: 22px; top: 20px; font-size: 10.5px; color: #8197bb; padding: 10px 14px 14px 12px; background: linear-gradient(100deg, rgba(3,5,10,.82) 0%, rgba(3,5,10,.6) 70%, rgba(3,5,10,0) 100%); }
.portrait .nxi-boot { left: 8px; top: 10px; font-size: 9.5px; }
.nxi-dim { color: #3a4f73; }
.nxi-hud { font-size: 9.5px; letter-spacing: .22em; color: #4c6590; }
.nxi-hud-r { right: 34px; top: 30px; text-align: right; }
.nxi-hud-bl { left: 34px; bottom: 24px; }
.nxi-hud-br { right: 34px; bottom: 24px; text-align: right; }
.portrait .nxi-hud { display: none; }
.nxi-grant { position: absolute; left: 0; top: 262px; width: 960px; text-align: center; font-weight: 800; font-size: 46px; letter-spacing: .3em; color: #33ff88; opacity: 0; pointer-events: none; text-shadow: 0 0 22px rgba(51,255,136,.7); }
.portrait .nxi-grant { font-size: 30px; letter-spacing: .2em; }
.nxi-pn { position: absolute; left: 290px; top: 338px; width: 380px; height: 236px; margin: 0; padding: 20px 22px; background: rgba(4,8,16,.82); border: 1px solid rgba(53,232,255,.38); box-shadow: 0 0 44px rgba(53,232,255,.14), inset 0 0 40px rgba(53,232,255,.06); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; }
.nxi-pn::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(53,232,255,.035) 0 1px, transparent 1px 4px); }
.nxi-head { display: flex; align-items: center; gap: 10px; height: 22px; }
.nxi-mark { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 5px rgba(53,232,255,.8)); }
.nxi-title { font-weight: 800; font-size: 15px; letter-spacing: .2em; color: var(--cyan); text-shadow: 0 0 10px rgba(53,232,255,.7); white-space: pre; }
.nxi-chip { margin-left: auto; font-size: 8.5px; letter-spacing: .24em; color: #33ff88; display: flex; gap: 6px; align-items: center; white-space: pre; }
.nxi-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.nxi-sub { margin-top: 9px; height: 14px; font-size: 9.5px; letter-spacing: .32em; color: var(--fg-dim); white-space: pre; }
.nxi-sub.err { color: #ff2a6d; text-shadow: 0 0 10px rgba(255,42,109,.7); }
.nxi-field { margin-top: 15px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid rgba(53,232,255,.28); background: rgba(0,0,0,.4); cursor: text; }
.nxi-field:focus-within { border-color: var(--cyan); box-shadow: 0 0 18px rgba(53,232,255,.25), inset 0 0 12px rgba(53,232,255,.08); }
.nxi-prompt { color: var(--magenta); font-weight: 800; text-shadow: 0 0 8px rgba(255,79,216,.7); }
.nxi-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #e8f6ff; font: 16px var(--font-mono); letter-spacing: .4em; caret-color: var(--cyan); padding: 0; }
.nxi-input::placeholder { color: #2b3c5c; letter-spacing: .16em; font-size: 11.5px; }
.nxi-btn { margin-top: 12px; width: 100%; height: 40px; border: 0; background: var(--cyan); color: #021a1f; font: 800 11.5px var(--font-mono); letter-spacing: .34em; cursor: pointer; white-space: pre; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); box-shadow: 0 0 22px rgba(53,232,255,.45); }
.nxi-btn:hover { background: #8af5ff; }
.nxi-btn:disabled { opacity: .6; }
.nxi-foot { margin-top: 12px; font-size: 8.5px; letter-spacing: .18em; color: #3a4f73; display: flex; justify-content: space-between; gap: 10px; white-space: pre; }
.nxi-foot .login-err { color: #ff2a6d; letter-spacing: .06em; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nxi-foot .login-err:empty { display: none; }
.nxi-foot .login-err:not(:empty) + #nxi-foot-l { display: none; }
.nxi-brk { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 0 solid var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); opacity: 0; pointer-events: none; }
.nxi-brk.tl { border-top-width: 2px; border-left-width: 2px; } .nxi-brk.tr { border-top-width: 2px; border-right-width: 2px; }
.nxi-brk.bl { border-bottom-width: 2px; border-left-width: 2px; } .nxi-brk.br { border-bottom-width: 2px; border-right-width: 2px; }
.nxi-pn.denied { border-color: rgba(255,42,109,.8); box-shadow: 0 0 50px rgba(255,42,109,.3), inset 0 0 40px rgba(255,42,109,.1); }
.nxi-pn.denied .nxi-title, .nxi-pn.denied .nxi-sub { color: #ff2a6d; text-shadow: 0 0 10px rgba(255,42,109,.8); }
.nxi-layer.denied .nxi-brk { border-color: #ff2a6d; filter: drop-shadow(0 0 6px #ff2a6d); }
.nxi-pn.granted { border-color: rgba(51,255,136,.8); }
.nxi-pn.granted .nxi-title, .nxi-pn.granted .nxi-sub { color: #33ff88; text-shadow: 0 0 10px rgba(51,255,136,.8); }
.nxi-layer.granted .nxi-brk { border-color: #33ff88; filter: drop-shadow(0 0 6px #33ff88); }
/* if the intro can't run, a plain centred panel */
.nxi-plain .nxi-screen { background: radial-gradient(circle at 50% 30%, #101830 0%, #06080f 70%); }
.nxi-plain .nxi-layer { transform: none !important; width: 100% !important; height: 100% !important; }
.nxi-plain .nxi-pn { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; opacity: 1 !important; clip-path: none !important; max-width: calc(100vw - 24px); }
.nxi-plain .nxi-brk, .nxi-plain .nxi-cv, .nxi-plain .nxi-t { display: none; }
.sidebar-auth { font-size: 15px; }
.sidebar-auth.warn { --g: var(--warn); opacity: .9; }

/* v2.31.214: Contacts */
.ct-view .products-scroll { padding: 12px 14px; }
.ct-empty { color: var(--fg-dim); font-size: 13px; padding: 18px 4px; }
.ct-dim { color: var(--fg-dim); }
.ct-pad { font-size: 10.5px; padding: 4px 0; }
.ct-new { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; font-weight: bold; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--cyan); background: var(--cyan); color: #04252b; cursor: pointer; }
.ct-kind { display: inline-block; font-size: 8.5px; letter-spacing: 1px; font-weight: bold; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); margin-right: 5px; }
.ct-int { font-size: 9.5px; color: var(--fg-dim); margin-right: 5px; }
.ct-tag { font-size: 9px; color: var(--fg-dim); border: 1px dashed var(--border); border-radius: 999px; padding: 1px 6px; margin-right: 4px; }
.ct-brand { display: inline-block; font-size: 10px; color: var(--fg-bright); background: rgba(255, 157, 53, 0.12); border: 1px solid rgba(255, 157, 53, 0.35); border-radius: 999px; padding: 1px 8px; margin: 0 4px 3px 0; }
.ct-brand i { font-style: normal; color: var(--fg-dim); font-size: 9px; }
.ct-more { font-size: 9.5px; color: var(--fg-dim); }
.ct-table td { vertical-align: middle; cursor: pointer; }
.ct-table td small { display: block; font-size: 11.5px; color: var(--fg-dim); }
.ct-table tr.sel td { background: rgba(53, 232, 255, 0.06); }
.ct-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.ct-name { color: var(--fg-bright); font-weight: bold; margin-bottom: 3px; }
.ct-lock { font-size: 9.5px; color: var(--warn); }
.ct-sug-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; color: var(--fg); border: 1px dashed rgba(255, 207, 61, 0.5); background: rgba(255, 207, 61, 0.05); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; }
.ct-sug-bar b { color: var(--warn); }
.ct-sug-bar button, .ct-sug-head button { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; margin-left: 4px; }
.ct-sug-head button.on { background: var(--warn); color: #241a00; border-color: var(--warn); font-weight: bold; }
.ct-sug-head button:disabled { opacity: 0.4; cursor: default; }
.ct-sug { border: 1px solid rgba(255, 207, 61, 0.4); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; background: rgba(255, 207, 61, 0.03); }
.ct-sug-head { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 2px; color: var(--warn); margin-bottom: 6px; flex-wrap: wrap; gap: 6px; }
.ct-sug-sec { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 10px 0 4px; }
.ct-sug-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; max-height: 260px; overflow: auto; }
.ct-sug-row { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 0; cursor: pointer; }
.ct-sug-row small { color: var(--fg-dim); font-size: 9.5px; margin-left: auto; }
.ct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.ct-title { font-size: 16px; font-weight: bold; color: var(--fg-bright); margin-bottom: 4px; }
.ct-brands { margin-bottom: 4px; }
.ct-sec { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ct-add { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.5px; background: transparent; border: 0; color: var(--cyan); cursor: pointer; text-decoration: underline dotted; }
.ct-btn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; }
.ct-btn.on { background: var(--cyan); color: #04252b; border-color: var(--cyan); font-weight: bold; }
.ct-btn.bad { color: var(--danger); border-color: rgba(255, 79, 109, 0.5); }
.ct-link { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: var(--bg-panel-2); }
.ct-link-top { display: flex; align-items: center; gap: 8px; }
.ct-link-top a { color: var(--fg-bright); text-decoration: none; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-link-top a:hover { color: var(--cyan); }
.ct-lk { font-size: 8.5px; letter-spacing: 1px; font-weight: bold; padding: 1px 6px; border-radius: 4px; color: #04121a; background: var(--c); flex: none; }
.ct-link-act { margin-left: auto; }
.ct-link-act button { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 12px; }
.ct-link-act button:hover { color: var(--cyan); }
.ct-url { font-size: 12px; margin-top: 2px; }
.ct-login { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ct-cred { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ct-cred > span { width: 40px; color: var(--fg-dim); font-size: 11px; }
.ct-cred code { flex: 1; font-family: var(--font-mono); color: var(--fg-bright); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-cred button { font-family: var(--font-mono); font-size: 9.5px; background: transparent; border: 1px solid var(--border); color: var(--fg); border-radius: 4px; padding: 2px 7px; cursor: pointer; }
.ct-cred button:hover { border-color: var(--cyan); color: var(--cyan); }
.ct-person { padding: 5px 0; border-bottom: 1px dashed var(--border); display: flex; flex-direction: column; gap: 2px; }
.ct-person a, .ct-addr a { color: var(--cyan); text-decoration: none; font-size: 12.5px; }
.ct-po { font-size: 8.5px; font-weight: bold; color: #04121a; background: var(--warn); border-radius: 3px; padding: 0 4px; }
.ct-addrs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-addr { font-size: 12.5px; line-height: 1.5; }
.ct-terms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ct-terms div { border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.ct-terms span { display: block; font-size: 8.5px; letter-spacing: 1px; color: var(--fg-dim); text-transform: uppercase; }
.ct-terms b { font-weight: normal; color: var(--fg-bright); }
.ct-terms a { color: var(--cyan); text-decoration: none; }
.ct-notes { white-space: pre-wrap; font-size: 11px; line-height: 1.5; }
.ct-form label { display: block; font-size: 9px; letter-spacing: 1px; color: var(--fg-dim); margin: 8px 0 3px; text-transform: uppercase; }
.ct-form label.ct-chk, .ct-chk { text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--fg); display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.ct-form input, .ct-form select, .ct-form textarea, .ct-link-edit input, .ct-link-edit select { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; }
.ct-link-edit input, .ct-link-edit select { margin-bottom: 6px; }
.ct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ct-grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; }
.ct-rowedit { border: 1px solid var(--border); border-radius: 7px; padding: 8px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 5px; }
.ct-rowfoot { display: flex; justify-content: space-between; align-items: center; }
.ct-x { background: transparent; border: 0; color: var(--danger); font-family: var(--font-mono); font-size: 9.5px; cursor: pointer; }
.ct-actions { display: flex; gap: 6px; margin-top: 12px; align-items: center; }
.ct-hint { font-size: 9.5px; color: var(--fg-dim); margin-top: 6px; }
.ct-msg { font-size: 10.5px; color: var(--fg-dim); margin-top: 6px; min-height: 12px; }
.ct-msg.bad { color: var(--danger); word-break: break-all; }
.ct-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ct-kpi { background: transparent; border: 1px solid var(--border); border-top: 2px solid var(--c); border-radius: 7px; padding: 6px 8px; text-align: left; cursor: pointer; color: var(--fg); font-family: var(--font-mono); }
.ct-kpi b { display: block; font-size: 17px; color: var(--c); }
.ct-kpi span { font-size: 8.5px; letter-spacing: 1px; color: var(--fg-dim); }
.ct-help { font-size: 10.5px; line-height: 1.6; color: var(--fg); }
.ct-warn { color: var(--warn); }
@media (max-width: 800px) { .ct-table th:nth-child(3), .ct-table td:nth-child(3), .ct-table th:nth-child(6), .ct-table td:nth-child(6) { display: none; } }
.ct-form input[type="checkbox"], .ct-link-edit input[type="checkbox"] { width: auto; margin: 0; padding: 0; flex: none; }

/* v2.31.215: Google Contacts import */
.ct-imp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; }
.ct-imp:hover { border-color: var(--cyan); color: var(--cyan); }
.ct-imp-box { border: 1px solid rgba(53, 232, 255, 0.35); background: rgba(53, 232, 255, 0.03); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.ct-imp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin-bottom: 8px; }
.ct-imp-head .ct-btn { margin-left: 4px; }
.ct-imp-head .ct-btn:disabled { opacity: 0.4; cursor: default; }
.ct-file { display: inline-flex; margin-top: 10px; cursor: pointer; }
.ct-file input { display: none; }
.ct-file span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; font-weight: bold; padding: 8px 16px; border-radius: 6px; background: var(--cyan); color: #04252b; }
.ct-imp-scroll { max-height: 460px; overflow: auto; margin-top: 10px; }
.ct-imp-table td { cursor: default; }
.ct-imp-table tr.off td { opacity: 0.4; }
.ct-imp-table select, .ct-imp-name { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-family: var(--font-mono); font-size: 10.5px; max-width: 190px; }
.ct-imp-name { width: 180px; }
.ct-new-tag { font-size: 9.5px; color: #33ff88; }

/* ---------- v2.31.219: Purchasing (js/purchasing.js) ---------- */
.pu-tabs { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.pu-tabs button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 7px 12px; border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; }
.pu-tabs button.on { background: rgba(53,232,255,.12); color: var(--cyan); font-weight: bold; }
.pu-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); cursor: pointer; white-space: nowrap; }
.pu-empty { color: var(--fg-dim); font-size: 13px; padding: 18px 4px; }
.pu-empty.sm { padding: 6px 0; font-size: 12px; }
.pu-table { width: 100%; border-collapse: collapse; }
.pu-table td { vertical-align: middle; cursor: pointer; }
.pu-table td small { display: block; font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; }
.pu-table .num { text-align: right; }
.pu-table tr.sel td { background: rgba(53,232,255,.06); }
.pu-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.pu-num { color: var(--fg-bright); font-weight: bold; white-space: nowrap; }
.pu-pill { display: inline-block; font-size: 9.5px; letter-spacing: 1px; font-weight: bold; padding: 2px 8px; border-radius: 999px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); white-space: nowrap; }
.pu-late { display: inline-block; font-size: 9.5px; letter-spacing: 1px; font-weight: bold; padding: 2px 6px; border-radius: 4px; background: #ff4d6d; color: #1a0006; }
.pu-late-t { color: #ff4d6d; }
/* v2.31.521: PO progress track (list) + boxes tab */
.pu-trk { width: 150px; }
.pu-trk .shp-track i.half { border-color: var(--c); background: color-mix(in srgb, var(--c) 35%, var(--bg)); }
.pu-trk-lbl { font-size: 10px; color: var(--fg-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-trk-lbl.dlv { color: #ffcf3d; }
.pu-boxes a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.pu-bst { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid #2a3552; color: var(--fg-dim); }
.pu-bst-transit, .pu-bst-out { color: var(--cyan); border-color: rgba(53,232,255,.45); }
.pu-bst-delivered { color: #33ff88; border-color: rgba(51,255,136,.45); }
.pu-bst-exception { color: #ff4d6d; border-color: rgba(255,77,109,.5); }
.pu-boxnote { font-size: 11px; color: #ffcf3d; margin: 8px 2px 0; }
.pu-numie { font-weight: 700; color: var(--fg-bright); }
/* v2.31.524: a deleted product's old URL */
.pch-urlrow { margin: 5px 0 2px; font-size: 10.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pch-chip { font-size: 9px; letter-spacing: .08em; padding: 1px 7px; border-radius: 999px; border: 1px solid #2a3552; color: var(--fg-dim); white-space: nowrap; }
.pch-chip.bad { color: #ff4f6d; border-color: rgba(255,79,109,.55); background: rgba(255,79,109,.08); }
.pch-chip.ok { color: #33ff88; border-color: rgba(51,255,136,.45); }
.pch-chip.live { color: var(--cyan); border-color: rgba(53,232,255,.45); }
.pch-chip.warn { color: #ffcf3d; border-color: rgba(255,207,61,.45); }
.pch-url { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; word-break: break-all; }
.pch-re { color: var(--fg-dim); cursor: pointer; text-decoration: underline dotted; }
.pch-re:hover { color: var(--cyan); }
/* v2.31.523: delivery status in place of SENT, tracking on the PO, links from Shipments */
.pu-shippill { cursor: pointer; }
.pu-shippill.live { box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); animation: pu-pulse 1.6s ease-in-out infinite; }
@keyframes pu-pulse { 50% { box-shadow: 0 0 2px color-mix(in srgb, var(--c) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pu-shippill.live { animation: none; } }
.pu-trks { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pu-trkl, .pu-boxes a { color: var(--cyan); cursor: pointer; text-decoration: none; border-bottom: 1px dashed currentColor; }
.pu-boxes a.pu-ups { font-size: 9.5px; color: var(--fg-dim); border-bottom: 0; margin-left: 4px; }
.shp-polink { border-bottom: 1px dashed currentColor; cursor: pointer; }
.shp-polink2 { color: inherit; text-decoration: none; cursor: pointer; display: block; }
.shp-polink2:hover { color: var(--cyan); }
.pu-prog { width: 90px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.pu-prog i { display: block; height: 100%; background: #33ff88; }
.pu-table .warn, .pu-line .warn { color: var(--warn); }
.pu-table .bad, .pu-kpis .bad b, .pu-supr .bad { color: #ff4d6d; }

.pu-head { margin-bottom: 10px; }
.pu-title { font-size: 18px; font-weight: bold; color: var(--fg-bright); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pu-title.sm { font-size: 15px; }
.pu-sup { color: var(--fg); margin-top: 4px; }
.pu-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pu-btn { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; white-space: nowrap; }
.pu-btn:hover:not(:disabled) { border-color: var(--fg-dim); color: var(--fg-bright); }
.pu-btn.main { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; }
.pu-btn.bad { color: #ff4d6d; border-color: rgba(255,77,109,.4); }
.pu-btn:disabled { opacity: .4; cursor: default; }
.pu-x { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; font-family: var(--font-mono); font-size: 12px; padding: 2px 4px; }
.pu-x:hover { color: #ff4d6d; }
.pu-msg { font-size: 12px; color: #33ff88; min-height: 0; margin-bottom: 6px; }
.pu-msg:empty { display: none; }
.pu-msg.bad { color: #ff4d6d; }
.pu-hint { font-size: 12px; color: var(--fg-dim); line-height: 1.5; margin: 6px 0 10px; }
.pu-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pu-rise { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; border: 1px dashed rgba(51,255,136,.5); background: rgba(51,255,136,.06); border-radius: 8px; padding: 8px 10px; margin: 6px 0 10px; }
.pu-rise b { color: #33ff88; }
.pu-send { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 10px; background: rgba(255,255,255,.02); }
.pu-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; }
.pu-bento > div { border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px; background: rgba(255,255,255,.02); }
.pu-bento span, .pu-kpis span { display: block; font-size: 9.5px; letter-spacing: 1.2px; color: var(--fg-dim); }
.pu-bento b { display: block; font-size: 17px; color: var(--fg-bright); margin: 3px 0 1px; }
.pu-bento b small { font-size: 12px; color: var(--fg-dim); font-weight: normal; }
.pu-bento i { font-style: normal; font-size: 11px; color: var(--fg-dim); }
.pu-sec { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; letter-spacing: 2px; color: var(--fg-dim); margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pu-sec-note { letter-spacing: .5px; color: #33ff88; }
.pu-line { padding: 7px 0; border-bottom: 1px dashed var(--border); }
.pu-lt1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pu-ltitle { color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pu-lrecv { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
.pu-lrecv.done { color: #33ff88; }
.pu-lsub { font-size: 11.5px; color: var(--fg-dim); margin: 2px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-lrise { color: #33ff88; }
.pu-lctl { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pu-lctl input, .pu-rq input { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-family: var(--font-mono); font-size: 13px; }
input.pu-q { width: 64px; text-align: right; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; font-family: var(--font-mono); font-size: 13px; }
.pu-cost { display: inline-flex; align-items: center; gap: 2px; color: var(--fg-dim); }
.pu-cost input { width: 80px; }
.pu-lt { margin-left: auto; color: var(--fg-bright); }
.pu-rq { display: flex; align-items: center; gap: 6px; color: #33ff88; font-size: 12.5px; }
.pu-rq input { width: 70px; border-color: rgba(51,255,136,.5); }
.pu-recv { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pu-recv input, .pu-in, .pu-add input, .pu-note-add input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-family: var(--font-mono); font-size: 13px; }
.pu-in { margin-bottom: 6px; }
.pu-add { position: relative; margin-top: 8px; }
.pu-add-res { border: 1px solid var(--border); border-radius: 6px; margin-top: 4px; max-height: 300px; overflow: auto; background: var(--bg-panel); }
.pu-add-res button { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--fg-bright); padding: 7px 9px; cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.pu-add-res button:hover { background: rgba(53,232,255,.07); }
.pu-add-res small { display: block; font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.pu-add-res .pu-add-custom { color: var(--cyan); }
.pu-form { display: flex; flex-direction: column; gap: 6px; }
.pu-f { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: start; }
.pu-f > span { font-size: 11px; color: var(--fg-dim); padding-top: 7px; letter-spacing: .5px; }
.pu-f input, .pu-f textarea, .pu-f select, .pu-addr input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; font-family: var(--font-mono); font-size: 12.5px; }
.pu-f input:disabled, .pu-f textarea:disabled, .pu-addr input:disabled { opacity: .55; }
.pu-addr { display: flex; flex-direction: column; gap: 4px; }
.pu-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pu-row3 { display: grid; grid-template-columns: minmax(0, 1fr) 48px 72px; gap: 4px; }
.pu-from { font-size: 12.5px; padding-top: 6px; }
.pu-rcpt { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.pu-rcpt small { display: block; color: var(--fg-dim); font-size: 11.5px; }
.pu-note-add { display: flex; gap: 6px; margin-bottom: 6px; }
.pu-events { display: flex; flex-direction: column; }
.pu-ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,.05); }
.pu-ev-k { color: var(--cyan); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; padding-top: 1px; }
.pu-ev small { grid-column: 2; color: var(--fg-dim); font-size: 11px; }
.pu-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pu-kpis > div { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
.pu-kpis b { display: block; font-size: 19px; color: var(--fg-bright); margin-top: 3px; }
.pu-supr { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px dashed var(--border); padding: 6px 2px; color: var(--fg-bright); cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.pu-supr small { grid-column: 1; color: var(--fg-dim); font-size: 11.5px; }
.pu-supr > b { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: normal; }
.pu-supr:hover { background: rgba(53,232,255,.05); }
.pu-rhead { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; margin: 0 0 10px; }
.pu-rhead b { color: var(--fg-bright); font-weight: normal; }
.pu-rtable tr.pu-grp td { cursor: default; background: rgba(255,255,255,.025); padding-top: 12px; }
.pu-rtable tr.pu-grp td > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pu-rtable tr.pu-grp small { color: var(--fg-dim); font-size: 11.5px; margin-left: 6px; }
.pu-ritem { max-width: 420px; }
.pu-calc > div { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.pu-calc > div.dim { font-size: 11.5px; color: var(--fg-dim); padding-top: 0; }
.pu-calc > div.tot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; color: var(--cyan); font-weight: bold; }
@media (max-width: 800px) {
  .pu-table:not(.ex-table):not(.pu-rtable) > thead > tr > th:nth-child(5), .pu-table:not(.ex-table):not(.pu-rtable) > tbody > tr > td:nth-child(5), .pu-table:not(.ex-table) > thead > tr > th:nth-child(8), .pu-table:not(.ex-table) > tbody > tr > td:nth-child(8) { display: none; }   /* v2.31.554: direct children only -- these leaked into the PO items table inside an open PO */
  .pu-rtable th:nth-child(4), .pu-rtable td:nth-child(4), .pu-rtable th:nth-child(6), .pu-rtable td:nth-child(6) { display: none; }
}
.pu-oo { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; width: 100%; text-align: left; margin-bottom: 10px; padding: 7px 10px; border-radius: 7px; border: 1px solid rgba(255,207,61,.45); background: rgba(255,207,61,.06); color: var(--fg-bright); cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.pu-oo span { font-size: 10px; letter-spacing: 1.2px; color: #ffcf3d; }
.pu-oo i { font-style: normal; font-size: 11.5px; color: var(--fg-dim); }
.pu-oo small { grid-column: 1 / -1; font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; }
.pu-add-res b.warn { color: var(--warn); font-weight: normal; }
.ct-starcol { width: 28px; padding-right: 0 !important; }
.ct-headbtns { display: flex; gap: 6px; align-items: flex-start; }
.ct-fav.on { color: #ffcf3d; border-color: rgba(255,207,61,.5); }

/* ---------- v2.31.220: Purchasing layout v2 -- POs unroll in the list ---------- */
.pu-table th.pu-car, .pu-table td.pu-car { width: 22px; padding-right: 0; color: var(--fg-dim); font-size: 12px; }
.pu-table tr.open > td { background: rgba(53,232,255,.05); border-bottom: 0; }
.pu-table tr.open > td.pu-car { color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.pu-table tr.pu-det > td { padding: 0 0 16px; cursor: default; background: rgba(53,232,255,.025); box-shadow: inset 3px 0 0 var(--cyan); }
.pu-table tr.pu-det:hover > td { background: rgba(53,232,255,.025); }
.pu-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: bold; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; background: var(--c); color: #06120a; vertical-align: 1px; }
.pu-tag button { background: none; border: 0; color: #06120a; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.pu-tag button:hover { opacity: 1; }
.pu-dwrap { margin: 0 14px 0 30px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-panel-2); overflow: hidden; cursor: default; }
.pu-dact { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pu-when { margin-left: auto; font-size: 12px; color: var(--fg-dim); }
.pu-tagrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.pu-tag-in { width: 120px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; }
.pu-qtag { font-family: var(--font-mono); font-size: 9.5px; font-weight: bold; letter-spacing: .5px; padding: 3px 7px; border-radius: 3px; border: 1px dashed var(--c); color: var(--c); background: transparent; cursor: pointer; }
.pu-dmsg { padding: 6px 14px 0; margin: 0; }
.pu-dwrap .pu-send, .pu-dwrap .pu-rise { margin: 10px 14px; }
.pu-recvbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 14px; background: rgba(51,255,136,.07); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.pu-recvbar b { color: #33ff88; letter-spacing: 1px; font-size: 11.5px; }
.pu-recvbar input { flex: 1; min-width: 200px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font-family: var(--font-mono); font-size: 12.5px; }
.pu-d3 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--border); }
.pu-d3 > div { padding: 12px 14px; font-size: 13.5px; line-height: 1.55; min-width: 0; }
.pu-d3 > div + div { border-left: 1px solid var(--border); }
.pu-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 1.5px; color: var(--fg-dim); margin-bottom: 4px; }
.pu-cap a, .pu-sec a { color: var(--cyan); letter-spacing: .5px; cursor: pointer; text-decoration: none; }
.pu-cap small { letter-spacing: .3px; opacity: .8; }
.pu-cap2 { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pu-kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; row-gap: 2px; font-size: 13.5px; }
.pu-kv > span { color: var(--fg-dim); font-size: 12.5px; }
.pu-kv > b { font-weight: normal; color: var(--fg-bright); min-width: 0; }
.pu-kv1 { grid-template-columns: 76px minmax(0, 1fr); margin-top: 4px; }
.pu-small { font-size: 12px; }
.pu-ie { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px dashed #3a4a6e; color: var(--fg-bright); font-family: var(--font-mono); font-size: 13.5px; padding: 2px 2px; border-radius: 0; }
.pu-ie:hover:not(:disabled) { border-bottom-color: var(--fg-dim); }
.pu-ie:focus { outline: none; border-bottom: 1px solid var(--cyan); background: rgba(53,232,255,.05); }
.pu-ie::placeholder { color: #45577d; }
.pu-ie:disabled { border-bottom-color: transparent; color: var(--fg); }
.pu-ie.num { text-align: right; }
.pu-ie[type=number] { -moz-appearance: textfield; }
.pu-ie[type=number]::-webkit-inner-spin-button { opacity: .3; }
.pu-ie-cost { width: 84px; }
.pu-dol { color: var(--fg-dim); margin-right: 1px; }
.pu-ta { width: 100%; box-sizing: border-box; resize: vertical; background: transparent; border: 1px dashed #2b3958; border-radius: 6px; color: var(--fg); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; padding: 5px 7px; }
.pu-ta:focus { outline: none; border: 1px solid var(--cyan); background: rgba(53,232,255,.04); color: var(--fg-bright); }
.pu-ta:disabled { border-color: transparent; }
.pu-supname { display: flex; align-items: center; gap: 4px; color: var(--fg-bright); font-weight: bold; font-size: 14.5px; }
.pu-stsel { width: auto; background: var(--bg); color: var(--cyan); border: 1px solid var(--border); border-radius: 5px; font-family: var(--font-mono); font-size: 11px; padding: 2px 4px; }
.pu-stname .pu-ie { font-weight: bold; }
.pu-ie-st { margin-bottom: 1px; }
.pu-st3 { display: grid; grid-template-columns: minmax(0, 1fr) 46px 76px; gap: 6px; }
.pu-dtabs { display: flex; gap: 18px; padding: 10px 14px 0; border-bottom: 1px solid var(--border); }
.pu-dtabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 8px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 13.5px; cursor: pointer; }
.pu-dtabs button.on { color: #33ff88; border-bottom-color: #33ff88; }
table.pu-it { width: 100%; border-collapse: collapse; }
.pu-it th { position: static; background: transparent; padding: 8px 12px; }
.pu-it td { padding: 8px 12px; cursor: default; vertical-align: middle; }
.pu-it .num { text-align: right; }
.pu-it td small { display: block; font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; }
.pu-it-title { max-width: 420px; }
.pu-it-title > span { display: block; color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-it td .pu-ie { min-width: 0; }
.pu-it td.num .pu-ie.num:not(.pu-ie-cost) { width: 64px; }
.pu-addnote { color: var(--fg-dim); cursor: pointer; text-decoration: none; }
.pu-addnote:hover { color: var(--cyan); }
.pu-lnote { color: #ffcf3d !important; cursor: pointer; }
.pu-rcv { width: 70px; text-align: right; background: var(--bg); color: #33ff88; border: 1px solid rgba(51,255,136,.55); border-radius: 5px; padding: 4px 7px; font-family: var(--font-mono); font-size: 13.5px; }
.pu-it .good, .pu-rcpt .good { color: #33ff88; }
.pu-it .hi { color: var(--fg-bright); }
.pu-tot { display: grid; grid-template-columns: minmax(0, 1fr) 170px; font-size: 13.5px; background: rgba(255,255,255,.025); }
.pu-tot > div { padding: 7px 14px; text-align: right; border-top: 1px solid rgba(255,255,255,.05); }
.pu-tot > div.l { color: var(--fg); }
.pu-tot .g { color: var(--fg-bright); font-weight: bold; background: rgba(255,255,255,.04); }
.pu-tot .pu-ie-cost { width: 90px; }
.pu-pad { padding: 10px 14px; }
.pu-rcpt { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pu-rcpt b { color: var(--fg-bright); font-weight: normal; }
.pu-rcpt small { display: block; color: var(--fg-dim); font-size: 12px; margin-top: 2px; }
.pu-picker { position: relative; border: 1px solid rgba(53,232,255,.45); border-radius: 9px; background: var(--bg-panel-2); padding: 12px 14px; margin-bottom: 12px; }
.pu-sup-q { width: 420px; max-width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid rgba(53,232,255,.55); border-radius: 6px; padding: 8px 11px; font-family: var(--font-mono); font-size: 14px; }
.pu-sup-q:focus { outline: none; border-color: var(--cyan); }
.pu-dd { width: 520px; max-width: 100%; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, var(--bg-panel)); overflow: hidden; }
.pu-dd-h { font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); padding: 7px 11px 4px; }
.pu-dd-row { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.pu-dd-row.on, .pu-dd-row:hover { background: rgba(53,232,255,.08); }
.pu-dd-row small { margin-left: auto; color: var(--fg-dim); font-size: 11.5px; text-align: right; }
.pu-dd-row .bad { color: #ff4d6d; font-weight: normal; }
.pu-dd-choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 11px 10px 36px; font-size: 12.5px; background: rgba(53,232,255,.05); }
.pu-dd-note { padding: 7px 11px; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12px; }
.pu-dd-note a { color: var(--cyan); cursor: pointer; }
.pu-sec.first { border-top: 0; margin-top: 0; padding-top: 0; }
.pu-ctx { border: 1px solid rgba(53,232,255,.4); border-radius: 8px; padding: 9px 11px; background: rgba(53,232,255,.05); font-size: 12.5px; line-height: 1.55; }
.pu-ctx-h { display: flex; align-items: center; gap: 4px; }
.pu-ctx-h b { color: var(--fg-bright); font-size: 15px; }
.pu-add-res button { display: flex; align-items: center; gap: 8px; }
.pu-ar-t { flex: 1; min-width: 0; }
.pu-ar-a { color: var(--cyan); font-size: 12px; white-space: nowrap; }
.pu-low > div { display: grid; grid-template-columns: minmax(0, 1fr) 58px 26px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.pu-low > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-bright); }
.pu-low small { display: block; color: var(--fg-dim); font-size: 11px; }
.pu-low input { width: 100%; box-sizing: border-box; text-align: right; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; font-family: var(--font-mono); font-size: 13px; }
.pu-x.add { color: var(--cyan); font-size: 16px; }
.pu-stcard { border: 1px solid var(--border); border-radius: 7px; padding: 7px; margin-bottom: 6px; }
.pu-stcard.def { border-color: rgba(53,232,255,.45); }
.pu-stcard .pu-row { margin-bottom: 4px; flex-wrap: nowrap; }
.pu-stl { flex: 1; min-width: 0; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 4px 7px; font-family: var(--font-mono); font-size: 12.5px; }
.pu-fav { color: #ffcf3d; }
@media (max-width: 800px) {
  .pu-dwrap { margin: 0; }
  .pu-d3 { grid-template-columns: 1fr; }
  .pu-d3 > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .pu-table tr.pu-det { display: block !important; border: 0 !important; padding: 0 !important; background: none !important; }
  .pu-table tr.pu-det > td { display: block !important; padding: 0 !important; box-shadow: none; }
  table.pu-it, .pu-it tbody { display: block; }
  .pu-it thead { display: none; }
  .pu-it tr { display: grid !important; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: none !important; margin: 0 !important; }
  .pu-it td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .pu-it td.pu-it-title { grid-column: 1 / -1; max-width: none; }
  .pu-sup-q, .pu-dd { width: 100%; }
}

/* ---------- v2.31.222: low stock threshold line (Shopify product panel) + LOW chip ---------- */
.lst-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; margin-bottom: 10px; font-size: 13px; background: rgba(255,255,255,.02); }
.lst-line b { color: var(--fg-bright); font-size: 15px; }
.lst-line .dim { color: var(--fg-dim); font-size: 12px; }
.lst-k { font-size: 10px; letter-spacing: 1.3px; color: var(--fg-dim); white-space: nowrap; }
.lst-line.green .lst-k { color: #33ff88; }
.lst-line.red { border-color: rgba(255,79,109,.55); background: rgba(255,79,109,.07); }
.lst-line.red .lst-k, .lst-line.red > b { color: #ff4f6d; }
.lst-line.amber { border-color: rgba(255,207,61,.55); background: rgba(255,207,61,.06); }
.lst-line.amber .lst-k, .lst-line.amber > b { color: #ffcf3d; }
.lst-line.edit { border-color: rgba(53,232,255,.55); }
.lst-loading { color: var(--fg-dim); font-size: 11px; letter-spacing: 1px; }
.lst-a { margin-left: auto; color: var(--cyan); cursor: pointer; font-size: 12px; white-space: nowrap; }
.lst-src { margin-left: auto; font-size: 11px; color: var(--fg-dim); white-space: nowrap; }
.lst-in { width: 64px; text-align: right; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; font-family: var(--font-mono); font-size: 13px; }
.lst-in:focus { outline: none; border-color: var(--cyan); }
.lst-btn { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; }
.lst-btn.main { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; }
.lst-po { flex-basis: 100%; display: flex; align-items: center; gap: 8px; border-top: 1px dashed rgba(255,255,255,.1); margin-top: 3px; padding-top: 6px; font-size: 12px; min-width: 0; }
.lst-po b { font-size: 13px !important; color: var(--fg-bright) !important; }
.lst-pk { font-size: 9.5px; letter-spacing: 1.2px; color: #ffcf3d; white-space: nowrap; }
.lst-pk.red { color: #ff4f6d; }
.lst-pt { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lst-late { color: #ff4f6d; }
.lst-msg { font-size: 12px; color: #33ff88; margin: -4px 0 10px; }
.lst-msg.bad { color: #ff4f6d; }
.lst-chip { display: inline-block; font-size: 9.5px; font-weight: bold; letter-spacing: .5px; padding: 0 5px; border-radius: 3px; vertical-align: 1px; font-family: var(--font-mono); }
.lst-chip.red { background: #ff4f6d; color: #1a0006; }
.lst-chip.amber { background: #ffcf3d; color: #1a1300; }

/* v2.31.224: SEND PO / SHIP-FROM chips in the contact editor */
.ct-hidden-chk { display: none !important; }
.ct-pochip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 4px 10px; border-radius: 999px; border: 1px dashed #3a4a6e; background: transparent; color: var(--fg-dim); cursor: pointer; }
.ct-pochip:hover { border-color: var(--cyan); color: var(--cyan); }
.ct-pochip.on { border: 1px solid var(--cyan); background: rgba(53,232,255,.14); color: var(--cyan); font-weight: bold; }
.ct-rowedit.po-on { border-color: rgba(53,232,255,.6); box-shadow: inset 3px 0 0 var(--cyan); }

/* v2.31.225: supplier box + supplier card in the Purchasing panel */
.pu-ibtns { display: flex; gap: 6px; letter-spacing: 0; }
.pu-ibtn { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border); background: rgba(255,255,255,.02); color: var(--fg); cursor: pointer; white-space: nowrap; }
.pu-ibtn:hover { border-color: var(--cyan); color: var(--cyan); }
.pu-sup-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 6px; }
.pu-sup-chips span { font-size: 11px; color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; }
.pu-sup-line { display: flex; align-items: center; gap: 7px; color: var(--fg-bright); text-decoration: none; font-size: 13px; line-height: 1.7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.pu-sup-line:hover { color: var(--cyan); }
.pu-ico { color: var(--fg-dim); width: 14px; text-align: center; flex: none; font-size: 12px; }
.pu-sup-sub { font-size: 10px; letter-spacing: 1.3px; color: var(--fg-dim); margin: 9px 0 2px; }
.pu-sup-mails { position: relative; }
.pu-sup-mails .pu-mini { position: absolute; right: 0; top: 3px; }
.pu-sup-addr { font-size: 13px; line-height: 1.55; color: var(--fg); padding-left: 21px; }
.pu-mini { font-family: var(--font-mono); font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.pu-mini:hover { color: var(--cyan); border-color: var(--cyan); }
.pu-cardhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.pu-cardname { font-size: 16px; font-weight: bold; color: var(--fg-bright); margin-bottom: 4px; }
.pu-brand { display: inline-block; font-size: 10.5px; color: var(--fg-bright); background: rgba(255,157,53,.12); border: 1px solid rgba(255,157,53,.35); border-radius: 999px; padding: 0 7px; margin-top: 3px; }
.pu-cardterms { margin: 6px 0 2px; }
.pu-cp { padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.pu-cp-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pu-cp-h b { color: var(--fg-bright); }
.pu-cp-h a { text-decoration: none; }
.pu-cp-po { margin-left: auto; font-size: 9.5px; font-weight: bold; letter-spacing: 1px; color: var(--cyan); border: 1px solid var(--cyan); background: rgba(53,232,255,.12); border-radius: 999px; padding: 0 7px; }
.pu-cred { font-size: 12.5px; padding-left: 4px; line-height: 1.8; }
.pu-cp-po { white-space: nowrap; flex: none; }

/* v2.31.226: brand picker in the contact editor */
.ct-bp { position: relative; border: 1px solid var(--border); border-radius: 6px; padding: 6px; background: var(--bg); }
.ct-bp-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
.ct-bp-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-bright); background: rgba(255,157,53,.12); border: 1px solid rgba(255,157,53,.4); border-radius: 999px; padding: 2px 4px 2px 9px; }
.ct-bp-pill button { background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.ct-bp-pill button:hover { color: #ff4f6d; }
.ct-bp-none { font-size: 11px; padding: 2px; }
.ct-form .ct-bp input#ct-bp-q { border: 0; border-top: 1px dashed var(--border); border-radius: 0; background: transparent; padding: 6px 4px 2px; font-size: 12px; }
.ct-form .ct-bp input#ct-bp-q:focus { outline: none; }
.ct-bp-res { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 20; background: var(--bg-panel); border: 1px solid rgba(53,232,255,.45); border-radius: 0 0 7px 7px; max-height: 260px; overflow: auto; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.ct-bp-res:empty { display: none; }
.ct-bp-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; font-size: 12.5px; color: var(--fg-bright); cursor: pointer; border-top: 1px solid var(--border); }
.ct-bp-row:first-child { border-top: 0; }
.ct-bp-row.on, .ct-bp-row:hover { background: rgba(53,232,255,.08); }
.ct-bp-row small { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.ct-bp-row.add span { color: var(--cyan); }
.ct-bp-warn { color: #ffcf3d; font-weight: normal; }

/* v2.31.227: REORDER ★ favorites */
.pu-favseg button.on { background: rgba(255,207,61,.12); color: #ffcf3d; }
.pu-favchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.pu-favchip { font-family: var(--font-mono); font-size: 12px; border: 1px solid rgba(255,207,61,.5); background: rgba(255,207,61,.07); color: var(--fg-bright); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.pu-favchip span { color: #ffcf3d; }
.pu-favchip b { color: #ffcf3d; font-weight: normal; margin-left: 3px; }
.pu-favchip.zero { opacity: .5; cursor: default; }
.pu-favlink, .pu-morerow a { color: var(--cyan); cursor: pointer; font-size: 12px; margin-left: 4px; }
.pu-favnote { font-size: 12.5px; color: var(--fg-dim); border: 1px dashed rgba(255,207,61,.45); border-radius: 8px; padding: 8px 11px; margin-bottom: 10px; }
.pu-rtable tr.pu-morerow td { color: var(--fg-dim); font-size: 12.5px; cursor: default; background: rgba(255,255,255,.015); }

/* v2.31.230: REORDER select all, PO timeline in the panel */
.pu-grpact { display: flex; align-items: center; gap: 8px; }
.pu-selall { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.pu-selall input[data-part="1"] { background: var(--cyan); border-color: var(--cyan); }
.pu-selall input[data-part="1"]::after { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 2px; background: #04121a; border: 0; transform: none; }
.pu-thispo { font-size: 12.5px; line-height: 1.7; }
.pu-thispo b { color: var(--fg-bright); }
.pu-tl { position: relative; padding-left: 22px; margin-top: 6px; }
.pu-tl-line { position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--cyan); }
.pu-tl-ev { position: relative; padding-bottom: 16px; }
.pu-tl-ev.last { padding-bottom: 0; }
.pu-tl-ev > i { position: absolute; left: -21px; top: 2px; width: 9px; height: 9px; border-radius: 50%; }
.pu-tl-k { font-size: 12px; font-weight: bold; color: var(--fg-bright); }
.pu-tl-x { font-size: 12px; color: var(--fg); margin-top: 2px; word-break: break-word; }
.pu-tl-t { font-size: 10.5px; color: var(--fg-dim); margin-top: 2px; }
.pu-notes-card { margin: 4px 0 12px; }

/* ======================================================================
   v2.31.232 · UI KIT -- one component per job (claude/UI_GUIDELINES.md).
   Later rules win: the module classes below are restyled onto the shared
   look instead of each keeping its own sizes / colours.
   ====================================================================== */

/* 1 · BUTTONS -- secondary (default), primary, danger, armed; small size */
.pu-btn, .ct-btn, .tr-btn, .lst-btn, .ct-new, .ct-imp, .ct-sug-bar button, .ct-sug-head button, .ms-btns button, .mr-table button, .ui-btn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; font-weight: normal; line-height: 1.2;
  padding: 6px 11px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg);
  cursor: pointer; white-space: nowrap; box-shadow: none; text-transform: none;
}
.pu-btn:hover:not(:disabled), .ct-btn:hover:not(:disabled), .tr-btn:hover:not(:disabled), .lst-btn:hover:not(:disabled), .ct-imp:hover,
.ct-sug-bar button:hover, .ct-sug-head button:hover, .ms-btns button:hover, .mr-table button:hover, .ui-btn:hover:not(:disabled) {
  border-color: var(--cyan); color: var(--fg-bright); box-shadow: none;
}
.pu-btn.main, .ct-btn.on, .ct-new, .lst-btn.main, .tr-btn-p, .ct-sug-bar button.on, .ct-sug-head button.on, .ui-btn.p {
  background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold;
}
.pu-btn.main:hover:not(:disabled), .ct-btn.on:hover, .ct-new:hover, .lst-btn.main:hover, .tr-btn-p:hover, .ui-btn.p:hover:not(:disabled) {
  color: #04252b; box-shadow: 0 0 8px rgba(53,232,255,.45);
}
.pu-btn.bad, .ct-btn.bad, .ui-btn.d { color: #ff4f6d; border-color: rgba(255,79,109,.45); }
.pu-btn.bad:hover, .ct-btn.bad:hover, .ui-btn.d:hover { color: #ff6f88; border-color: #ff4f6d; }
.btn-armed, .pu-btn.bad.armed, .ct-btn.bad.armed { background: #ff4f6d !important; border-color: #ff4f6d !important; color: #1a0006 !important; font-weight: bold; }
.tr-btn-on { color: var(--cyan); border-color: rgba(53,232,255,.5); }
.pu-btn:disabled, .ct-btn:disabled, .tr-btn:disabled, .lst-btn:disabled, .ui-btn:disabled { opacity: .4; cursor: default; }
/* small: inline actions */
.pu-ibtn, .pu-mini, .ui-btn.s { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 3px 8px; border-radius: 5px;
  border: 1px solid var(--border); background: transparent; color: var(--fg); cursor: pointer; }
.pu-ibtn:hover, .pu-mini:hover, .ui-btn.s:hover { border-color: var(--cyan); color: var(--cyan); }

/* 2 · SECTION LABELS -- one style */
.ct-sec, .pu-sec, .tr-sec, .sec-label {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 2px; font-weight: normal; text-transform: uppercase; color: var(--fg-dim);
  margin: 14px 0 7px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.pu-sec.first, .sec-label.first { border-top: 0; margin-top: 0; padding-top: 0; }
.ct-sec a, .pu-sec a, .tr-sec a, .sec-label a, .ct-sec .ct-add { letter-spacing: .5px; font-size: 11px; color: var(--cyan); text-transform: none; }
.shp-h4 { font-size: 10.5px; letter-spacing: 2px; font-weight: normal; color: var(--fg-dim); }

/* 4 · PILLS -- reverted in v2.31.233 (module pill styles restored) */

/* 1b · TABS -- page views = segmented (top bar / main area) · side panel = pills · inside a card = cyan underline */
.mix-seg.tr-tabs { border-radius: 7px; padding: 0; overflow: hidden; }
.mix-seg.tr-tabs button { border-radius: 0; font-size: 10.5px; font-weight: normal; letter-spacing: 1px; padding: 7px 12px; box-shadow: none; }
.mix-seg.tr-tabs button.on { background: rgba(53,232,255,.12); color: var(--cyan); font-weight: bold; box-shadow: none; }
.shp-tab { border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: normal; letter-spacing: .5px; color: var(--fg-dim); }
.shp-tab.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; box-shadow: none; }
.shp-tab.on.oth { background: var(--cyan); border-color: var(--cyan); color: #04252b; }
.pu-dtabs button.on { color: var(--cyan); border-bottom-color: var(--cyan); }

/* 5 · PICKER -- one dropdown look for search-and-pick */
.pu-add-res, .pu-dd, .ct-bp-res { border: 1px solid rgba(53,232,255,.45); border-radius: 7px; background: var(--bg-panel); box-shadow: 0 10px 24px rgba(0,0,0,.45); overflow: auto; }
.ct-bp-res { border-radius: 0 0 7px 7px; }
.pu-add-res > button, .pu-dd-row, .ct-bp-row { padding: 7px 10px; font-size: 13px; border-top: 1px solid var(--border); border-bottom: 0; }
.pu-add-res > button:first-child, .ct-bp-row:first-child { border-top: 0; }
.pu-add-res > button:hover, .pu-add-res > button.on, .pu-dd-row:hover, .pu-dd-row.on, .ct-bp-row:hover, .ct-bp-row.on { background: rgba(53,232,255,.08); }
.pu-add-res small, .pu-dd-row small, .ct-bp-row small { font-size: 11px; color: var(--fg-dim); }
.pu-ar-a, .pu-add-res .pu-add-custom, .ct-bp-row.add span, .pu-dd-note a { color: var(--cyan); }
.pu-dd-note, .pu-dd-h { font-size: 11px; }

/* 8 · SUMMARY TILES -- label 9.5px · number 17px (colour = meaning) · one sub line */
.stat-card .stat-value { font-size: 17px; }
.stat-card .stat-label { font-size: 9.5px; letter-spacing: 1.2px; }
.pu-kpis b { font-size: 17px; }
.pu-kpis span, .pu-bento span { font-size: 9.5px; letter-spacing: 1.2px; }
.uh-stats > div { border-radius: 7px; padding: 7px 9px; }
.uh-stats b { font-size: 17px; }
.uh-stats span { font-size: 9.5px; letter-spacing: 1.2px; }
.shp-tile { border-radius: 7px; text-align: left; padding: 7px 9px; }
.shp-tile b { font-size: 17px; text-shadow: none; }
.shp-tile span { font-size: 9.5px; letter-spacing: 1.2px; }
.shp-tile small { font-size: 11px; }
.tr-kpi { border-radius: 7px; padding: 8px 10px; }
.tr-kpi .k { font-size: 9.5px; letter-spacing: 1.2px; }
.tr-kpi .v { font-size: 17px; margin: 3px 0 1px; }
.tr-kpi .n { font-size: 11px; }

/* 9 · EMPTY / FEEDBACK -- left, 13px, says what to do next · inline status text */
.empty-state, .pu-empty, .ct-empty, .tr-empty { text-align: left; font-size: 13px; color: var(--fg-dim); padding: 18px 4px; }
.pu-empty.sm, .ct-pad { font-size: 12px; padding: 6px 0; }
.ct-msg, .pu-msg { font-size: 12px; }
.pu-cancel-why { width: 200px; background: var(--bg); color: var(--fg-bright); border: 1px solid rgba(255,79,109,.5); border-radius: 6px; padding: 5px 8px; font-family: var(--font-mono); font-size: 12px; }

/* v2.31.232: contact card inline fields */
.ct-title-ie { font-size: 16px !important; font-weight: bold; margin-bottom: 4px; }
.ct-ie-kv { grid-template-columns: 92px minmax(0, 1fr); row-gap: 3px; }
.ct-ie-web { display: flex; align-items: center; gap: 6px; }
.ct-ie-web a { color: var(--cyan); text-decoration: none; }
.ct-ie-status { letter-spacing: .3px; text-transform: none; font-size: 11.5px; color: var(--fg-dim); }
.ct-ie-status.ok { color: #33ff88; } .ct-ie-status.bad { color: #ff4f6d; }
.ct-notes-card { margin-bottom: 8px; }
/* v2.31.232 kit, round 2: favorites keep their star colour; UPS panel actions = standard buttons */
.ct-btn.ct-fav.on { background: rgba(255,207,61,.1); color: #ffcf3d; border-color: rgba(255,207,61,.55); font-weight: bold; }
.shp-today, .shp-print { font-size: 10.5px; font-weight: normal; letter-spacing: 1px; padding: 7px 10px; border: 1px solid var(--border); color: var(--fg); }
.shp-today:hover, .shp-print:hover { border-color: var(--cyan); color: var(--fg-bright); background: transparent; }
.shp-today.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; box-shadow: none; }
/* v2.31.234: supplier PO notes banner (reuses .hold-banner) + contact card hint */
.hold-banner.pu-ponotes { cursor: default; align-items: flex-start; margin: 8px 0; }
.hold-banner.pu-ponotes:hover { background: rgba(255,157,53,.07); }
.hold-banner.pu-ponotes .pu-ico { color: var(--sync-orange); font-weight: bold; }
.hold-banner.pu-ponotes .hold-banner-why { white-space: pre-wrap; color: var(--fg); font-size: 10.5px; }
.ct-sec-hint { text-transform: none; letter-spacing: 0; font-size: 10px; margin-left: 6px; }
.ct-ponotes-card { margin-bottom: 8px; }
.ord-sup-list { margin-top: 8px; max-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
.ord-sup-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 11px; cursor: pointer; }
.ord-sup-row:last-child { border-bottom: 0; }
.ord-sup-row input { margin-top: 2px; }
.ord-sup-row.off > div { opacity: .4; }
.ord-sup-row .ord-sup-ch { color: var(--fg-dim); font-size: 10px; margin-top: 2px; overflow-wrap: anywhere; }
.ord-sup-row .ord-sup-to { font-size: 10px; letter-spacing: .5px; margin-left: 6px; }
.ord-sup-row .ord-sup-to.new { color: var(--status-instock-bg); }
.ord-sup-row .ord-sup-to.upd { color: var(--cyan); }
/* v2.31.235: REORDER supplier list in the side panel (Overview BY SUPPLIER rows) */
.pu-suprow { border: 1px solid transparent; border-bottom: 1px dashed var(--border); border-radius: 0; padding: 7px 8px; }
.pu-suprow.on { border: 1px solid var(--cyan); border-radius: 6px; background: rgba(53,232,255,.06); }
.pu-suprow.zero { cursor: default; color: var(--fg-dim); }
.pu-suprow.zero:hover { background: transparent; }
.pu-suprow .pu-fav { color: #ffcf3d; }
.pu-supsum { color: var(--fg-dim); font-size: 12px; margin: -2px 0 8px; }
.pu-back { display: inline-block; margin: 0 0 8px; margin-left: 0; }
/* v2.31.236: REORDER = green tab, ★ FAVORITES = yellow, ADD TO PO = orange; checkbox under the supplier name; PO lines: full supplier SKU, $ on the cost line, green quantities */
.pu-tabs button.pu-tab-ro.on { background: rgba(51,255,136,.13); color: #33ff88; }
.pu-favseg button.on { background: rgba(255,207,61,.13); color: #ffcf3d; }
.pu-btn.main.pu-addpo { background: var(--sync-orange); border-color: var(--sync-orange); color: #2a1300; }
.pu-btn.main.pu-addpo:hover:not(:disabled) { color: #2a1300; box-shadow: 0 0 9px rgba(255,157,53,.5); }
.pu-btn.main.pu-addpo:disabled { opacity: .45; }
.pu-grpsub { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.pu-grpsub .pu-selall { border: 0; padding: 0; font-size: 12px; color: var(--fg); }
input.pu-q.pu-qgo, .pu-it .pu-ie.pu-ie-qty, .pu-qty-ro { color: #33ff88; font-weight: bold; }
input.pu-q.pu-qgo { border-color: rgba(51,255,136,.45); }
.pu-it td.pu-it-sku { white-space: nowrap; }
.pu-it .pu-ie.pu-ie-sku { min-width: 0; max-width: none; text-overflow: clip; }
.pu-sku-ro { white-space: nowrap; color: var(--fg-bright); }
.pu-it-title { max-width: 360px; }
.pu-costwrap { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.pu-costwrap .pu-ie-cost { width: 78px; }
/* v2.31.237: ★ FAVORITES / ALL SUPPLIERS / show all live at the top of the Suppliers tab */
.pu-suptoggle { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pu-suptoggle .pu-favseg { flex: 1 1 auto; display: flex; }
.pu-suptoggle .pu-favseg button { flex: 1; white-space: nowrap; }
/* v2.31.238: nothing-low suppliers open their full product list; LOW ONLY / ALL PRODUCTS switch on an open supplier */
.pu-suprow.zero { cursor: pointer; }
.pu-suprow.zero:hover { background: rgba(53,232,255,.05); color: var(--fg-bright); }
.pu-suprow.zero.on { color: var(--fg-bright); }
.pu-scope { margin-right: 4px; }
.pu-scope button { font-size: 10.5px; padding: 6px 10px; }
/* v2.31.239: Purchasing overview -- status tiles (shp-tile), money strip, NEEDS ATTENTION, supplier value bars */
.pu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pu-tile { background: rgba(255,255,255,.015); font-family: var(--font-mono); width: 100%; }
.pu-tile b { font-size: 22px; line-height: 1.15; }
.pu-tile.zero b { color: var(--fg-dim); text-shadow: none; }
.pu-tile.on { background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px var(--tc); }
.pu-money { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-top: 8px; background: rgba(53,232,255,.04); }
.pu-money > span { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); }
.pu-money > span small { display: block; letter-spacing: 0; font-size: 10.5px; margin-top: 2px; }
.pu-money b { display: block; text-align: right; font-size: 20px; color: var(--cyan); text-shadow: 0 0 8px rgba(53,232,255,.6); }
.pu-money div small { display: block; text-align: right; color: var(--fg-dim); font-size: 10.5px; }
.pu-filt { margin-top: 8px; font-size: 11.5px; color: #ffcf3d; }
.pu-filt a { color: var(--cyan); cursor: pointer; text-decoration: underline; }
.pu-att { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 9px; align-items: center; border: 1px solid var(--border); border-radius: 7px; padding: 8px 9px 8px 0; margin-bottom: 6px; background: rgba(255,255,255,.015); cursor: pointer; }
.pu-att:hover { background: rgba(255,255,255,.04); }
.pu-att > i { align-self: stretch; border-radius: 7px 0 0 7px; background: var(--ac); }
.pu-att .t { color: var(--fg-bright); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-att .t small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.pu-att-b { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--ac); color: var(--ac); background: transparent; white-space: nowrap; cursor: pointer; }
.pu-att-b:hover { background: color-mix(in srgb, var(--ac) 12%, transparent); }
.pu-att-b.solid { background: var(--ac); color: #1a0e00; font-weight: bold; }
.pu-supr.pu-vrow { grid-template-columns: minmax(0, 1fr) 84px auto; column-gap: 10px; }
.pu-vrow > span:first-child { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-vrow > small { grid-column: 1; grid-row: 2; }
.pu-vrow > .pu-vbar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.pu-vrow > b { grid-column: 3 !important; grid-row: 1 / span 2; text-align: right; }
.pu-vbar { display: flex; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pu-vbar i { display: block; height: 100%; }
.pu-vrow.on { background: rgba(53,232,255,.06); box-shadow: inset 2px 0 0 var(--cyan); }
.pu-tile { text-align: center; padding: 9px 6px 7px; }
.pu-tile b, .pu-tile span { text-align: center; }
.pu-vrow > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-setsec { cursor: pointer; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.pu-setsec a { color: var(--cyan); }
/* v2.31.241: ECN-bound POs */
.pu-ecntag { display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: bold; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; background: #35e8ff; color: #04121a; }
.pu-ecnbtn { border-color: rgba(53,232,255,.55); color: var(--cyan); }
.pu-ecnline { color: var(--fg-dim); }
.pu-ecnline b { font-weight: normal; color: var(--fg); }
.pu-ecnline b.pu-ecnwh { color: var(--cyan); font-weight: bold; }
.pu-att-bs { display: inline-flex; gap: 5px; }
/* v2.31.242: ECN line as chips */
.pu-ecns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pu-ec { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 4px; padding: 0 6px; font-size: 10.5px; line-height: 1.6; color: var(--fg-dim); white-space: nowrap; }
.pu-ec b { color: var(--fg); font-weight: normal; }
.pu-ec.id { border-color: rgba(179,136,255,.45); color: #b388ff; }
.pu-ec.dest { border-color: var(--cyan); background: rgba(53,232,255,.12); color: var(--cyan); }
.pu-ec.dest b { color: var(--cyan); font-weight: bold; }
.pu-ec.arr { border-color: rgba(51,255,136,.55); background: rgba(51,255,136,.1); color: #33ff88; }
.pu-ec.arr b { color: #33ff88; font-weight: bold; }
.pu-ec.sold { border-color: rgba(255,157,53,.45); color: #ff9d35; }
.pu-ec.sold b { color: #ff9d35; }
.pu-ec.xtra { border-color: rgba(255,207,61,.55); background: rgba(255,207,61,.1); color: #ffcf3d; }
.pu-ec.xtra b { color: #ffcf3d; font-weight: bold; }
.pu-ec.err { border-color: rgba(255,79,109,.55); background: rgba(255,79,109,.08); color: #ff4f6d; white-space: normal; }
.pu-ec.ago { border-color: transparent; color: #4a5a80; padding-left: 2px; }
/* v2.31.248: Shipments -> INVOICES (UPS invoice import) */
.civ-kind { display: inline-block; font-size: 9px; font-weight: bold; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); white-space: nowrap; }
.civ-import { display: block; text-align: center; cursor: pointer; margin-bottom: 4px; }
.civ-box { margin-bottom: 10px; }
.civ-refs { max-width: 260px; overflow-wrap: anywhere; }
.civ-done td { opacity: .45; }
.civ-msg { color: #33ff88; font-size: 12px; margin: 0 0 8px; }
.civ-inv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 2px; border-bottom: 1px dashed var(--border); font-size: 12px; }
.civ-inv b { color: var(--fg-bright); font-weight: normal; }
.civ-inv span { grid-column: 1; color: var(--fg-dim); font-size: 11px; }
.civ-inv span i { color: #ff9d35; font-style: normal; }
.civ-inv em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; color: var(--fg-bright); }
.civ-act { white-space: nowrap; }
.civ-act span { display: inline-flex; gap: 4px; margin-right: 6px; align-items: center; }
.civ-act .pu-ie { width: 86px; font-size: 12px; }
.civ-act .ct-btn { padding: 3px 7px; font-size: 10px; }
#shp-invoice-tools .shp-bento { margin-top: 10px; }
.pf-ups { color: var(--cyan); font-size: 9px; letter-spacing: 1px; border: 1px solid rgba(53,232,255,.5); border-radius: 3px; padding: 0 4px; }
.pf-warn td:first-child { color: #ff9d35; }
.civ-sub { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.civ-hint { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 8px; }
.civ-table td { vertical-align: middle; }
.civ-act { display: flex; gap: 4px; align-items: center; }
.civ-act .pu-ie { width: 130px; }
.shp-tabs:has(#shp-tab-pnl) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* v2.31.249: UPS box corrections */
.civ-corr { display: inline-block; margin-top: 3px; font-size: 10.5px; color: #ff9d35; border: 1px solid rgba(255,157,53,.45); border-radius: 4px; padding: 0 6px; }
.civ-dims { font-weight: normal; color: var(--fg-bright); }
.civ-dims.bad { color: #ff9d35; font-weight: bold; }
.civ-rep { font-size: 10px; color: #ffcf3d; margin-left: 6px; }
.pf-adj td:first-child { color: #ff9d35; padding-left: 14px; }
.pf-adj td:first-child small { color: var(--fg-dim); }
.civ-act { flex-wrap: wrap; } .civ-hintline { flex-basis: 100%; color: #b388ff; }
/* v2.31.250: Status -> VENDOR LEADERBOARD */
.vl-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 4px 0 10px; }
.vl-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(60px, 120px) 70px 92px 54px; gap: 8px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed var(--border); font-family: var(--font-mono); font-size: 12px; }
.vl-head { font-size: 9px; letter-spacing: 1px; color: var(--fg-dim); border-bottom: 1px solid var(--border); }
.vl-rank { text-align: center; font-weight: 800; font-size: 14px; color: var(--fg-dim); }
.vl-rank.r1 { color: #ffcf3d; text-shadow: 0 0 8px #ffcf3d; } .vl-rank.r2 { color: #d6e0f5; } .vl-rank.r3 { color: #ff9d35; }
.vl-who { min-width: 0; }
.vl-top { display: block; background: none; border: 0; padding: 0; margin-top: 2px; color: var(--fg-dim); font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vl-top:hover { color: var(--cyan); }
.vl-part { color: #ff9d35; font-size: 9.5px; }
.vl-bar { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.vl-bar i { display: block; height: 100%; border-radius: 999px; }
.vl-num { text-align: right; color: var(--fg-bright); }
.vl-num small { display: block; color: var(--fg-dim); font-size: 9.5px; }
.vl-up { color: #33ff88; } .vl-dn { color: #ff4f6d; } .vl-fl { color: var(--fg-dim); cursor: help; }
.vl-foot { margin-top: 8px; font-size: 11px; color: var(--fg-dim); }
.vl-tile { text-align: center; } .vl-tile b { font-size: 20px; }
/* v2.31.250: box corrections by vendor */
.civ-vtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 7px; margin-bottom: 10px; }
.civ-vtile { font-family: var(--font-mono); background: rgba(255,255,255,.015); text-align: center; }
.civ-vtile.on { background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px var(--tc); }
.civ-vtile b { font-size: 18px; }
.civ-vg { border: 1px solid var(--border); border-left: 3px solid var(--vc); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.civ-vh { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,.02); }
.civ-vs { color: var(--fg-dim); font-size: 11.5px; } .civ-vs b { color: #ffcf3d; font-weight: normal; }
.civ-vm { margin-left: auto; color: #ff9d35; font-weight: bold; }
.civ-brow { display: grid; grid-template-columns: 250px 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 12px; border-top: 1px dashed var(--border); font-size: 12.5px; }
.civ-rep2 { font-size: 9.5px; color: #ffcf3d; border: 1px solid rgba(255,207,61,.5); border-radius: 3px; padding: 0 5px; margin-left: 6px; }
.civ-bamt { text-align: right; color: var(--fg-bright); } .civ-bamt small { display: block; color: var(--fg-dim); font-size: 9.5px; }
.civ-bords { display: flex; flex-wrap: wrap; gap: 3px 9px; }
.civ-ord { color: var(--cyan); font-size: 11px; text-decoration: underline; cursor: pointer; }
.civ-ord.none { color: var(--fg-dim); text-decoration: none; cursor: help; }
/* v2.31.252: origins + order side panel */
.civ-osel { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-family: var(--font-mono); font-size: 11.5px; max-width: 180px; }
.civ-olabel { width: 120px; }
.civ-ord.on { color: #ffcf3d; }
.civ-ord sup { color: #ff9d35; margin-left: 1px; }
.civ-vs i { color: #ff9d35; font-style: normal; }
.civ-oph { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
/* v2.31.253: the side panel order view reuses the Orders panel pieces */
#shp-invoice-tools .order-header-row { margin-bottom: 10px; }
#shp-invoice-tools .civ-oaddr { margin-bottom: 4px; }
.civ-opkg .shipping-from-title { display: flex; align-items: center; gap: 4px; }
.civ-opk-amt { color: var(--fg-bright); font-size: 12px; }
.civ-opkg .civ-corr { margin-top: 5px; }
#shp-invoice-tools .pf-card { margin-top: 12px; }
.civ-resend { border: 1px solid rgba(255,207,61,.45); background: rgba(255,207,61,.06); color: var(--fg); border-radius: 6px; padding: 7px 10px; margin: 0 0 10px; font-size: 11.5px; }
.civ-resend b { color: #ffcf3d; }
/* v2.31.256: shipping P&L, one-line incoming, senders tab */
.civ-leaks { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.civ-leak small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 10px; }
.civ-chip { font-family: var(--font-mono); background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; font-size: 11px; color: var(--fg-dim); cursor: pointer; }
.civ-chip:hover { color: var(--fg); }
.civ-chip.on { color: var(--cyan); border-color: var(--cyan); background: rgba(53,232,255,.08); }
.civ-csep { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.civ-ccount { margin-left: auto; color: var(--fg-dim); font-size: 11px; }
.civ-pnl td { cursor: pointer; vertical-align: middle; }
.civ-pnl td small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.civ-pnl tr:hover:not(.pu-det):not(.pu-det *):not(.open):not(.sel) > td { background: rgba(255,255,255,.025); }
.civ-pnl tr.sel td { background: rgba(53,232,255,.06); }
.civ-pnl tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.civ-pnl .num, .shp-inc .num { text-align: right; }
.civ-pnl th.civ-sort { cursor: pointer; user-select: none; }
.civ-pnl th.civ-sort:hover, .civ-pnl th.civ-sort.on { color: var(--cyan); }
.civ-onum { color: var(--cyan); text-decoration: underline; }
.civ-snd .vendor-pill { margin: 1px 0; }
.civ-net { display: inline-flex; align-items: center; gap: 8px; }
.civ-net b { font-weight: normal; }
.civ-nbar { width: 60px; height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; display: flex; justify-content: flex-end; }
.civ-nbar i { display: block; height: 100%; background: #ff4f6d; border-radius: 99px; }
.civ-pnl .pu-pill { margin: 1px 3px 1px 0; }
.civ-more { text-align: center; padding: 10px; }
.civ-more a { color: var(--cyan); cursor: pointer; }
.civ-sr { display: grid; grid-template-columns: minmax(0, 1fr) 40px 74px; gap: 6px; align-items: center; padding: 6px 6px; border-bottom: 1px dashed var(--border); border-radius: 5px; cursor: pointer; font-size: 12px; }
.civ-sr:hover { background: rgba(255,255,255,.03); }
.civ-sr.on { background: rgba(53,232,255,.07); box-shadow: inset 3px 0 0 var(--cyan); }
.civ-sr small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.civ-sr b { color: var(--fg-bright); font-weight: normal; letter-spacing: 1px; font-size: 11px; }
.civ-sr .num { text-align: right; }
.civ-invh { cursor: pointer; display: flex; justify-content: space-between; }
.civ-invh a { color: var(--cyan); letter-spacing: .5px; text-transform: none; }
.civ-rvw { margin-bottom: 10px; }
.civ-why { margin-bottom: 4px; cursor: default; }
.civ-whyl { font-size: 11.5px; padding: 2px 2px 10px; }
.civ-whyl > div { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; }
.civ-whyl b { font-weight: normal; }
.civ-newdot { color: #ff9d35; }
.shp-inc td small { display: block; }
.shp-inc tr.shp-done > td { opacity: .55; }
.shp-boxes { padding: 2px 10px 0 30px; }
.shp-bx { display: grid; grid-template-columns: 22px 54px 210px minmax(0, 1fr) 130px 90px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.shp-bx:last-child { border-bottom: 0; }
.shp-bx .num { text-align: right; }
.ups-sig { display: inline-block; margin-left: 4px; font-size: 9.5px; letter-spacing: 1px; font-weight: bold; padding: 1px 6px; border-radius: 999px; color: #ff9d35; border: 1px solid rgba(255,157,53,.6); background: rgba(255,157,53,.1); vertical-align: middle; }
.ups-sig.bad { color: #ff4f6d; border-color: rgba(255,79,109,.6); background: rgba(255,79,109,.12); }
.ups-sig-box { border: 1px solid rgba(255,157,53,.5); background: rgba(255,157,53,.06); border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; font-size: 11.5px; }
.ups-sig-box.bad { border-color: rgba(255,79,109,.55); background: rgba(255,79,109,.07); }
.ups-sig-line { padding: 2px 0; }
.ups-sig-line.bad b { color: #ff4f6d; }
.ups-sig-foot { color: var(--fg-dim); font-size: 10px; margin-top: 4px; }
/* v2.31.257: dark text on vendor / sender pills in Shipments (bright fills); an inline color still wins */
.shp-scroll .vendor-pill, .shp-side .vendor-pill { color: #04121a; }
.shp-inc tr.sel:not(.open) > td { background: rgba(53,232,255,.06); }
.shp-inc tr.sel:not(.open) > td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
/* v2.31.258: slimmer P&L list with a ▸ roll-out; focused order panel */
.civ-pnl { table-layout: auto; }
.civ-pnl td { white-space: normal; }
.civ-pnl th.civ-sort { cursor: pointer; }
.civ-pc { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.civ-pc b { font-weight: normal; font-size: 13px; }
.civ-pc small { color: var(--fg-dim); font-size: 10.5px; margin-top: 1px; white-space: nowrap; }
.civ-why-c .pu-pill { margin: 1px 3px 1px 0; }
.civ-det { padding: 4px 12px 2px 30px; }
.civ-dl { font-size: 11px; color: var(--fg-dim); letter-spacing: .5px; margin: 6px 0 4px; }
.civ-dl b { color: var(--fg-bright); font-weight: normal; }
.civ-dbox { display: grid; grid-template-columns: 130px 200px minmax(0, 1fr) 80px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.civ-dbox:last-of-type { border-bottom: 0; }
.civ-dbox .num { text-align: right; color: var(--fg-bright); }
.civ-who { color: var(--fg-dim); font-size: 11px; margin: -4px 0 8px; }
.civ-why .t small { white-space: normal; }
.civ-more-btn { border: 1px dashed var(--border); border-radius: 7px; padding: 9px 11px; margin: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; }
.civ-more-btn:hover { background: rgba(255,255,255,.03); }
.civ-more-btn b { color: var(--fg-bright); letter-spacing: 1.5px; font-weight: normal; }
.civ-more-btn span { color: var(--fg-dim); }
#shp-invoice-tools .profit-slot .pf-card { margin-top: 4px; }
/* v2.31.259: per-box money table in the P&L roll-out */
.civ-btab { width: 100%; border-collapse: collapse; margin: 2px 0 4px; }
.civ-btab th { font-size: 9.5px; letter-spacing: 1px; color: var(--fg-dim); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); font-weight: normal; cursor: default; }
.civ-btab td { padding: 7px 8px; border-bottom: 1px dashed var(--border); font-size: 12px; cursor: default; background: transparent !important; box-shadow: none !important; }
.civ-btab td small { display: block; font-size: 10.5px; margin-top: 2px; }
.civ-btab .num { text-align: right; white-space: nowrap; }
.civ-btab .civ-strong { color: var(--fg-bright); }
.civ-btab tr.civ-btot td { border-top: 1px solid var(--border); border-bottom: 0; font-weight: bold; color: var(--fg-bright); }
/* v2.31.260: roll-out summary box + outlined result bar */
.civ-sumbig { margin: 4px 0 6px; padding: 10px 14px 10px 0; cursor: default; }
.civ-sumbig .t { font-size: 14px; }
.civ-sumbig .t small { font-size: 11.5px; margin-top: 4px; }
.civ-sumnum { font-size: 21px; font-weight: normal; padding-right: 4px; }
.civ-mpill { font-size: 9.5px; padding: 1px 8px; vertical-align: 1px; }
.civ-resbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; border: 1.5px solid var(--rc); background: color-mix(in srgb, var(--rc) 9%, transparent); border-radius: 8px; padding: 9px 14px; box-shadow: 0 0 12px color-mix(in srgb, var(--rc) 22%, transparent); }
.civ-resbar b { font-size: 15px; font-weight: normal; color: var(--rc); letter-spacing: .5px; white-space: nowrap; }
.civ-resbar span { color: var(--fg-dim); font-size: 11px; text-align: right; }
.civ-sumnum.sm { font-size: 17px; }
/* v2.31.262 (mockup B): the whole roll-out in one card -- tinted header band, full-height accent */
.civ-card { position: relative; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.015); overflow: hidden; padding-left: 5px; margin: 2px 0 4px; }
.civ-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ac); }
.civ-cardh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; background: color-mix(in srgb, var(--ac) 10%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); }
.civ-cardh .t { color: var(--fg-bright); font-size: 14px; letter-spacing: .5px; }
.civ-cardh .t small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 4px; letter-spacing: .3px; }
.civ-cardh .t small b { font-weight: normal; }
.civ-cardh .civ-sumnum { color: var(--ac); }
.civ-card .civ-btab { margin: 0; }
.civ-card .civ-btab th:first-child, .civ-card .civ-btab td:first-child { padding-left: 12px; }
.civ-card .civ-btab th:last-child, .civ-card .civ-btab td:last-child { padding-right: 14px; }
/* v2.31.264: flush roll-out card, drop zone, leaks in the side panel */
.civ-pnl tr.pu-det > td { padding: 0; box-shadow: none; background: transparent; }
.civ-pnl tr.pu-det:hover > td { background: transparent; }
.civ-pnl .civ-det { padding: 0; }
.civ-pnl .civ-card { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-top: 1px solid color-mix(in srgb, var(--ac) 40%, transparent); padding-left: 4px; }
.civ-pnl .civ-card::before { width: 4px; }
.civ-pnl .civ-cardh { padding-left: 18px; }
.civ-pnl .civ-card .civ-btab th:first-child, .civ-pnl .civ-card .civ-btab td:first-child { padding-left: 18px; }
.civ-olink { color: var(--cyan); cursor: pointer; }
.civ-drop { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1.5px dashed color-mix(in srgb, var(--cyan) 55%, transparent); border-radius: 10px; padding: 16px 10px; background: rgba(53,232,255,.035); cursor: pointer; transition: background .15s, box-shadow .15s; margin-bottom: 12px; }
.civ-drop:hover { background: rgba(53,232,255,.07); }
.civ-drop.hot { border-color: var(--cyan); background: rgba(53,232,255,.12); box-shadow: 0 0 14px rgba(53,232,255,.3); }
.civ-drop.busy { opacity: .6; cursor: progress; }
.civ-drop .ic { font-size: 20px; color: var(--cyan); line-height: 1; }
.civ-drop b { color: var(--fg-bright); letter-spacing: 1.5px; font-size: 11px; font-weight: normal; }
.civ-drop span { color: var(--fg-dim); font-size: 10.5px; }
.civ-drop u { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.civ-kpis { grid-template-columns: 1fr 1fr; }
.civ-lk { display: grid; grid-template-columns: 4px minmax(0, 1fr) 84px; gap: 9px; align-items: center; padding: 7px 9px 7px 0; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px; cursor: pointer; }
.civ-lk:hover { background: rgba(255,255,255,.03); }
.civ-lk > i { align-self: stretch; border-radius: 7px 0 0 7px; background: var(--tc); }
.civ-lk span { font-size: 11px; letter-spacing: 1px; color: var(--fg); }
.civ-lk span small { display: block; letter-spacing: 0; color: var(--fg-dim); font-size: 10px; margin-top: 1px; }
.civ-lk b { text-align: right; font-weight: normal; color: #ff4f6d; }
.civ-lk.on { background: color-mix(in srgb, var(--tc) 12%, transparent); border-color: var(--tc); }
/* v2.31.265: P&L filters in the top bar, sortable headers, shipping donut */
.shp-filter-bar { align-items: center; gap: 8px; }
.civ-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.civ-seg button { font-family: var(--font-mono); background: transparent; border: 0; color: var(--fg-dim); padding: 5px 11px; font-size: 11px; cursor: pointer; }
.civ-seg button + button { border-left: 1px solid var(--border); }
.civ-seg button:hover { color: var(--fg); }
.civ-seg button.on { background: rgba(53,232,255,.12); color: var(--cyan); }
.civ-fcount { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.civ-pnl th small { display: block; font-size: 9.5px; letter-spacing: 0; margin-top: 2px; }
.civ-subsort { color: var(--fg-dim); border-bottom: 1px dotted currentColor; cursor: pointer; }
.civ-subsort:hover, .civ-subsort.on { color: var(--cyan); }
.civ-stat { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: rgba(255,255,255,.015); margin-bottom: 4px; }
.civ-cap { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); margin-bottom: 8px; }
.civ-cap a { color: #ff9d35; cursor: pointer; letter-spacing: .5px; }
.civ-dn { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: center; }
.civ-arc { cursor: pointer; transition: stroke-width .12s; }
.civ-arc:hover { stroke-width: 17; }
.civ-lg { font-size: 11px; }
.civ-lg > div { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px; border-radius: 4px; }
.civ-lg > div:not(.sub) { cursor: pointer; }
.civ-lg > div:not(.sub):hover, .civ-lg > div.on { background: rgba(255,255,255,.05); }
.civ-lg > div.sub { color: var(--fg-dim); padding: 0 4px 6px 18px; border-bottom: 1px dashed var(--border); margin-bottom: 4px; font-size: 10.5px; }
.civ-lg > div.sub:last-child { border-bottom: 0; margin-bottom: 0; }
.civ-lg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.civ-lg b { font-weight: normal; }
.civ-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.civ-mini > div { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; min-width: 0; }
.civ-mini b { display: block; color: var(--fg-bright); font-weight: normal; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-mini span { font-size: 9px; letter-spacing: 1px; color: var(--fg-dim); }
/* v2.31.266: neon shipping ring (mockup A) + late-delivery refunds */
.civ-dnA { display: flex; justify-content: center; margin: 2px 0 4px; }
.civ-tglow-r { filter: drop-shadow(0 0 6px rgba(255,79,109,.8)); }
.civ-tglow-g { filter: drop-shadow(0 0 6px rgba(51,255,136,.75)); }
.civ-donut .civ-arc { transition: stroke-width .12s; }
.civ-donut .civ-arc:hover { stroke-width: 15; }
.civ-lmt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.civ-lmtile { border: 1px solid var(--border); border-top: 2px solid var(--tc); border-radius: 7px; padding: 8px 10px; background: color-mix(in srgb, var(--tc) 5%, transparent); cursor: pointer; }
.civ-lmtile:hover, .civ-lmtile.on { background: color-mix(in srgb, var(--tc) 12%, transparent); }
.civ-lmtile.on { box-shadow: inset 0 0 0 1px var(--tc); }
.civ-lmtile b { display: block; font-size: 20px; font-weight: normal; color: var(--tc); text-shadow: 0 0 10px color-mix(in srgb, var(--tc) 70%, transparent); }
.civ-lmtile span { font-size: 9px; letter-spacing: 1.4px; font-weight: 800; color: var(--tc); }
.civ-lmtile small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; }
.civ-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.civ-strip > div { padding: 7px 6px; text-align: center; min-width: 0; }
.civ-strip > div + div { border-left: 1px solid var(--border); }
.civ-strip b { display: block; font-weight: normal; font-size: 13px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-strip span { font-size: 8.5px; letter-spacing: 1.3px; color: var(--fg-dim); }
.civ-rfsum { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-size: 11.5px; color: var(--fg-dim); cursor: pointer; margin-bottom: 6px; }
.civ-rfsum.has { border-color: rgba(255,79,109,.55); background: rgba(255,79,109,.07); color: var(--fg); box-shadow: 0 0 10px rgba(255,79,109,.15); }
.civ-rfsum b { color: #ff4f6d; font-weight: normal; }
.civ-rfsum span b { color: var(--fg-bright); }
.civ-rf { border: 1px solid var(--border); border-left: 3px solid #ff4f6d; border-radius: 7px; padding: 7px 9px; margin-bottom: 6px; font-size: 11px; }
.civ-rf.hot { box-shadow: 0 0 10px rgba(255,79,109,.25); }
.civ-rf1 { display: flex; justify-content: space-between; align-items: center; }
.civ-rf1 b { color: var(--fg-bright); font-weight: normal; font-size: 13px; }
.civ-rf2 { color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.civ-rf3 { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.civ-rfb { display: inline-flex; gap: 4px; }
.civ-rfb button { font-family: var(--font-mono); font-size: 9px; letter-spacing: .8px; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.civ-rfb button:hover { color: var(--fg); border-color: var(--fg-dim); }
.civ-rfb button.ok { color: #33ff88; border-color: rgba(51,255,136,.5); }
.civ-rfft { color: var(--fg-dim); font-size: 10px; margin: 2px 0 6px; line-height: 1.5; }
.civ-rfft a { color: var(--cyan); }
/* v2.31.268: refunds -- status pill (NOT CLAIMED / CLAIMED) + "mark:" actions on their own line */
.civ-rfst { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.civ-rf .civ-rfb { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.civ-rf .civ-rfb .shp-meta { font-size: 9.5px; margin-right: 2px; }
.civ-rfd { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--fg-dim); padding: 3px 2px; border-bottom: 1px dashed var(--border); }
.civ-rfd a, .civ-rfft a { cursor: pointer; }
/* v2.31.269: file link + "maybe late" (calendar-only) packages */
.civ-rf.maybe { border-left-color: #ff9d35; opacity: .85; }
.civ-rf .civ-rfb button.file { color: var(--cyan); border-color: rgba(53,232,255,.5); margin-right: 6px; }
/* v2.31.271: claim buttons are neutral until picked; FILE sits next to NOT CLAIMED */
.civ-rf .civ-rfb button.ok { color: var(--fg-dim); border-color: var(--border); }
.civ-rf .civ-rfb button.on { color: #04121a; background: #ffcf3d; border-color: #ffcf3d; font-weight: bold; }
.civ-file { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(53,232,255,.6); background: rgba(53,232,255,.08); color: var(--cyan); cursor: pointer; }
.civ-file:hover { background: rgba(53,232,255,.18); }

/* v2.31.274: Settings -> Routing layout (step bar + list left + rule cards) */
.rt-pipe { display: flex; align-items: center; gap: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 11px 16px; margin-bottom: 14px; overflow-x: auto; }
.rt-pipe:empty { display: none; }
.rt-ps { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: .08em; color: var(--fg-bright); white-space: nowrap; }
.rt-ps small { color: var(--fg-dim); letter-spacing: 0; font-size: 10px; }
.rt-arrow { flex: 1; height: 1px; min-width: 18px; margin: 0 12px; background: linear-gradient(90deg, var(--border), var(--cyan), var(--border)); }
.rt-chip { font-size: 9px; letter-spacing: .1em; font-weight: bold; border-radius: 999px; padding: 1px 7px; border: 1px solid var(--border); color: var(--fg-dim); }
.rt-chip.on { color: var(--green, #33ff88); border-color: color-mix(in srgb, #33ff88 55%, transparent); }
.rt-chip.val { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }
.rt-save { margin-left: 14px; font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; }
.rt-wrap { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; align-items: stretch; }
.rt-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.rt-wide { grid-column: 1 / -1; }
.rt-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
/* v2.31.275: bento -- cards in a row share a height, the priority card matches the whole right column, "how it works" sits on each card's bottom edge */
.rt-card > .rt-more { margin-top: auto; padding-top: 12px; }
.rt-card > .rt-ctls { margin-bottom: 2px; }
.rt-prio #routing-order-list { flex: 0 0 auto; }
.rt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rt-head h3 { margin: 0; font-size: 12.5px; color: var(--fg-bright); }
.rt-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); font-size: 9.5px; font-weight: bold; flex: none; }
.rt-one { font-size: 11px; color: var(--fg-dim); margin-top: 6px; line-height: 1.55; }
.rt-inline { margin: 0 0 0 4px; }
.rt-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rt-seg button { font: 10.5px var(--font-mono); letter-spacing: .06em; padding: 4px 12px; background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; }
.rt-seg button.active { background: var(--cyan); color: #04252b; font-weight: bold; }
.rt-seg button.w.active { background: var(--status-exclusive-bg); color: var(--status-exclusive-text); }
.rt-ctls { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.rt-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 22px; }
.rt-ctl { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--fg-bright); cursor: pointer; }
.rt-ctl > span:first-child { flex: 1; }
.rt-ctl input[type="time"], .rt-ctl input[type="number"] { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 4px; padding: 3px 7px; font-family: var(--font-mono); font-size: 11px; }
.rt-ctl input[type="number"] { width: 76px; }
input[type="checkbox"].rt-sw { appearance: none; -webkit-appearance: none; position: relative; width: 30px; height: 16px; border-radius: 999px; background: #1a2440; border: 1px solid var(--border); margin: 0; flex: none; cursor: pointer; box-shadow: none; transition: background .15s, border-color .15s; }
input[type="checkbox"].rt-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--fg-dim); transform: none; transition: left .15s, background .15s; }
input[type="checkbox"].rt-sw:checked { background: rgba(51,255,136,.2); border-color: #33ff88; box-shadow: 0 0 6px rgba(51,255,136,.35); }   /* v2.31.672: every ON switch is green (hold stays orange) */
input[type="checkbox"].rt-sw:checked::after { left: 16px; top: 2px; width: 10px; height: 10px; border: 0; background: #33ff88; transform: none; }
input[type="checkbox"].rt-sw:hover { border-color: var(--cyan); }
.rt-more { font-size: 11px; color: var(--fg-dim); line-height: 1.6; }
.rt-more summary { color: var(--cyan); font-size: 10.5px; cursor: pointer; list-style: none; }
.rt-more summary::-webkit-details-marker { display: none; }
.rt-more summary::after { content: " ▸"; }
.rt-more[open] summary::after { content: " ▾"; }
.rt-more[open] summary { margin-bottom: 6px; }
.rt-status { font-size: 10.5px; color: var(--fg-dim); margin-top: 8px; min-height: 0; }
.rt-note { font-size: 10.5px; color: var(--fg-dim); }
@media (max-width: 900px) { .rt-wrap { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .rt-rules { grid-template-columns: 1fr; } }


/* v2.31.282: "/resync" result box above the order list */
.resync-report { position: relative; margin: 0 0 12px; padding: 10px 34px 10px 12px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg-panel); font-size: 11.5px; }
.resync-h { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.resync-row { padding: 3px 0; color: var(--fg); line-height: 1.5; }
.resync-row b { margin-right: 6px; } .resync-row b.ok { color: var(--status-instock-bg); } .resync-row b.warn { color: var(--warn); }
.resync-trk { color: var(--cyan); margin-left: 4px; }
.resync-meta { color: var(--fg-dim); margin-left: 6px; font-size: 10.5px; }
.resync-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: var(--fg-dim); font-size: 16px; cursor: pointer; }
.resync-x:hover { color: var(--fg-bright); }
/* v2.31.286: /ignore preview + confirm */
.resync-row b.bad { color: var(--status-outofstock-bg, #ff4d4d); }
.resync-row .ign-btn { font-size: 11px; padding: 3px 10px; margin-left: 8px; }
.resync-row.ign-actions { padding-top: 8px; } .resync-row.ign-actions .ign-btn:first-child { margin-left: 0; }
.resync-row .ign-go { border-color: var(--warn); color: var(--warn); }

/* v2.31.287: EVENT LOG (left) and SYSTEM CHECK (right) stretch down to the
   bottom of the tallest column, so all three columns end level. The log sits
   absolutely inside .mc-fill, so a long log scrolls instead of making the
   column taller. Wide layout only; below 1251px the columns stack. */
.mc-fill { position: relative; }
@media (min-width: 1251px) {
  .mc-3col { align-items: stretch; }
  .mc-left > .sw-panel:last-child, .mc-right > .sw-panel:last-child { flex: 1; display: flex; flex-direction: column; min-height: 260px; }
  .mc-fill { flex: 1; min-height: 200px; }
  .mc-fill > .sw-log { position: absolute; inset: 0; height: auto; max-height: none; }
}

/* v2.31.288: top banner (pink neon marquee, or hazard tape when urgent) + its pencil */
.header .brand-mark { flex: none; }
body:not(.on-status) .tb-edit-wrap, body:not(.on-status) #top-banner { display: none !important; }  /* v2.31.290: Status page only */  /* never squeezed by the banner */
.tb-edit-wrap { position: relative; flex: none; margin-left: -8px; }
.tb-pencil { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--fg-dim); cursor: pointer; padding: 0; }
.tb-pencil svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-pencil:hover { color: var(--magenta); border-color: color-mix(in srgb, var(--magenta) 40%, transparent); box-shadow: 0 0 8px rgba(255,79,216,.25); }
.tb-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; width: 380px; padding: 12px; background: var(--bg-panel-2); border: 1px solid color-mix(in srgb, var(--magenta) 45%, var(--border)); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.6), 0 0 18px rgba(255,79,216,.12); }
.tb-pop-h { font-size: 10px; letter-spacing: .14em; color: var(--magenta); margin-bottom: 8px; }
.tb-pop-h span { color: var(--fg-dim); letter-spacing: .04em; margin-left: 6px; text-transform: none; }
.tb-pop textarea { width: 100%; resize: vertical; min-height: 54px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font: 12.5px var(--font-mono); }
.tb-pop textarea:focus { outline: none; border-color: var(--magenta); }
.tb-pop-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 11.5px; color: var(--fg); }
.tb-pop-row label { display: inline-flex; align-items: center; gap: 6px; }
.tb-hours { margin-left: auto; }
.tb-hours select { width: auto; }
.tb-pop-btns { justify-content: flex-end; }
.tb-pop-note { margin-right: auto; color: var(--fg-dim); font-size: 10.5px; }
.tb-pop .tb-save { border-color: var(--magenta); color: var(--magenta); }

.tb { flex: 1 1 auto; min-width: 120px; height: 26px; position: relative; overflow: hidden; display: flex; align-items: center; cursor: pointer; }
.tb-tape { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; }
.tb-track { display: flex; white-space: nowrap; animation: tb-scroll 20s linear infinite; will-change: transform; }
.tb:hover .tb-track { animation-play-state: paused; }
@keyframes tb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tb-neon { border: 1px solid color-mix(in srgb, var(--magenta) 45%, transparent); border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,79,216,.06), rgba(255,79,216,.12), rgba(255,79,216,.06));
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tb-neon .tb-track { font-size: 12px; letter-spacing: .12em; color: #ffd0f4; text-shadow: 0 0 6px var(--magenta), 0 0 14px rgba(255,79,216,.5); }
.tb-track span { flex: none; }
.tb-track em { flex: none; font-style: normal; padding: 0 22px; }   /* diamond between every message, padded both sides */
.tb-neon .tb-track em { color: var(--magenta); }
.tb-urgent { border-radius: 4px; background: #1a0a10; animation: tb-alarm 1.6s ease-in-out infinite; }
.tb-hz { flex: none; width: 34px; height: 100%; background: repeating-linear-gradient(-45deg, var(--warn) 0 7px, #120d00 7px 14px); }
.tb-urgent .tb-track { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--warn); text-shadow: 0 0 8px rgba(255,204,51,.6); }
.tb-urgent .tb-track em { color: #ff4f6d; text-shadow: 0 0 8px rgba(255,79,109,.7); font-size: 10px; }
@keyframes tb-alarm { 50% { box-shadow: 0 0 16px rgba(255,79,109,.5); background: #2a0c14; } }
@media (prefers-reduced-motion: reduce) { .tb-track { animation-duration: 60s !important; } .tb-urgent { animation: none; } }
@media (max-width: 800px) {
  .tb { order: 4; flex: 1 1 100%; }
  .tb-pop { position: fixed; left: 10px; right: 10px; top: 60px; width: auto; }
}

/* v2.31.291 (mockup T1): ON HOLD + WAITING TO PROCESS in one full-width box */
.oa-panel { padding: 14px 16px; container-type: inline-size; }
.oa-lane + .oa-lane { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.oa-lh { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 8px; }
.oa-t { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; min-width: 0; }
.oa-t b { font-size: 18px; font-weight: 800; color: var(--sw-c); text-shadow: 0 0 8px var(--sw-c); }
.oa-t small { font-size: 10px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; }
.oa-bar { min-width: 0; padding-top: 1px; }
.oa-bar .mc-bar { height: 18px; }
.oa-bar .mc-bar-labels { font-size: 9.5px; }
.oa-c { display: flex; align-items: center; }
.oa-holds { display: grid; grid-template-columns: 14px max-content 54px max-content minmax(0, 1fr) max-content; column-gap: 12px; }
.oa-hrow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 5px 4px; border: 0; border-top: 1px solid #121a2b; background: transparent; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); text-align: left; color: inherit; }
.oa-hrow:first-child { border-top: 0; }
.oa-hrow:hover, .oa-cell:hover { background: rgba(255,255,255,.04); }
.oa-hrow .mc-age { text-align: right; }
.oa-note { min-width: 0; color: var(--fg-bright); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-v { display: flex; justify-content: flex-end; min-width: 0; }
.oa-cell .oa-v { justify-content: flex-start; }
.oa-cell .oa-v .mc-pill { max-width: 150px; }
.oa-v .mc-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.oa-hrow .oa-v .mc-pill { max-width: 150px; }
.oa-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.oa-cell { display: grid; grid-template-columns: 12px minmax(64px, 110px) 46px minmax(64px, 1fr); gap: 8px; align-items: center; padding: 5px 4px; border: 0; background: transparent; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); text-align: left; color: inherit; min-width: 0; }
.oa-cell .track-dot { margin: 0; }
.oa-cell .mc-age { text-align: right; }
.oa-num { display: flex; align-items: center; gap: 6px; min-width: 0; }
.oa-num .mc-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.oa-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.oa-foot .mc-more { margin: 0; }
/* sized by the box itself (the middle column is narrower on smaller screens) */
/* 3 across shows 9, 2 across 10, 1 across 6 -- so the last row is always full */
.oa-cells .oa-cell:nth-child(n+10) { display: none; }
@container (max-width: 720px) { .oa-lh { grid-template-columns: max-content minmax(0, 1fr); } .oa-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oa-cells .oa-cell:nth-child(10) { display: grid; } }
@container (max-width: 470px) {
  .oa-cells { grid-template-columns: minmax(0, 1fr); } .oa-cells .oa-cell:nth-child(n+7) { display: none; }
  .oa-lh { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .oa-hrow .oa-v .mc-pill { max-width: 90px; }
}
@media (max-width: 800px) {
  .oa-lh { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .oa-cells { grid-template-columns: minmax(0, 1fr); }
  .oa-holds { grid-template-columns: 14px max-content 50px minmax(0, 1fr) max-content; }
  .oa-holds .oa-hrow > .oa-c:nth-child(4) { display: none; }
}

/* ===================================================================
   v2.31.292: mobile polish pass (phones, <= 900 / 800px)
   =================================================================== */
@media (max-width: 900px) {
  /* Status: stack every panel in one column at full width. The three
     column wrappers dissolve (display: contents) so panels can be put in
     a phone-friendly order: summary, urgent work, then the rest. */
  .mc-3col { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .mc-left, .mc-center, .mc-right { display: contents; }
  .mc-3col .sw-panel, .mc-3col #status-alert { min-width: 0; max-width: 100%; }
  .mc-left > .mc-board { order: 1; }
  .mc-center > * { order: 2; }
  .mc-right > * { order: 3; }
  .mc-left > .live-panel { order: 4; }
  .mc-left > .sw-panel:last-child { order: 5; }
  #status-alert:empty { display: none; }
}
@media (max-width: 800px) {
  /* Status header: title on one line, refresh shrinks to an icon button */
  .sw-title { font-size: 21px; letter-spacing: 2px; white-space: nowrap; }
  .sw-subtitle { letter-spacing: 2px; font-size: 10px; }
  .sw-refresh { font-size: 0; padding: 0; width: 44px; height: 44px; min-height: 44px; flex: none; }
  .sw-refresh::first-letter { font-size: 18px; }
  .sw-header-row { gap: 10px; }

  /* ON HOLD rows: number / age / reason / vendor on top, the note underneath */
  .oa-holds { grid-template-columns: 14px max-content max-content minmax(0, 1fr) max-content; row-gap: 0; }
  .oa-holds .oa-hrow { grid-template-columns: subgrid; padding: 6px 2px; }
  .oa-holds .oa-hrow > .oa-c:nth-child(4) { display: flex; }
  .oa-holds .oa-note { grid-column: 2 / -1; grid-row: 2; white-space: normal; font-size: 10.5px; line-height: 1.4; color: var(--fg); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .oa-holds .oa-v { grid-column: 5; grid-row: 1; }
  .oa-hrow .oa-v .mc-pill { max-width: 120px; }
  .oa-lh { gap: 4px; margin-bottom: 6px; }
  .oa-t b { font-size: 16px; }

  /* Vendor leaderboard: drop the share bar, keep units / $ / trend, pill on one line */
  .vl-row { grid-template-columns: 20px minmax(0, 1fr) 54px 66px 46px; gap: 6px; font-size: 11px; }
  .vl-row > :nth-child(3) { display: none; }
  .vl-row .vendor-pill { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
  .vl-head > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vl-kpis { gap: 6px; }
  .vl-tile b { font-size: 17px; }

  /* panel headers with controls: controls drop to their own row, compact */
  .sw-panel-head { flex-wrap: wrap; gap: 8px; }
  .mw-head-ctl { flex-wrap: wrap; gap: 6px; }
  .mw-pick button, .mw-open-trends { white-space: nowrap; }
}
@media (max-width: 800px) {
  /* Orders cards: every card the same width -- long vendor names / capsules
     shrink with … instead of pushing the card past the screen edge */
  #orders-rows tr { grid-template-columns: 14px minmax(0, 1fr) auto; width: 100%; box-sizing: border-box; }
  #orders-rows td { min-width: 0; max-width: 100%; }
  #orders-rows td:nth-child(7), #orders-rows td:nth-child(11) { overflow: hidden; }
  #orders-rows .vm-cap { max-width: 100%; }
  #orders-rows .vm-cap > span, #orders-rows td .vendor-pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #orders-rows td .vendor-pill { display: inline-block; max-width: 100%; vertical-align: middle; }
}
@media (max-width: 800px) {
  /* Vendor Inventory + Shopify Inventory cards. The desktop table squeezes
     every non-title column to 1% width; in a wrapping card that made the
     numbers pile on top of each other. Here each cell sizes to its content:
     title on its own line, then sku / upc / price, then stock + status. */
  #rows tr, #shopify-rows tr { gap: 6px 12px; align-items: center; }
  #rows td, #shopify-rows td, #rows td:not(.title-td), #shopify-rows td:not(.title-td) { width: auto !important; white-space: nowrap; font-size: 12px; padding: 0 !important; min-width: 0; }
  #rows td.title-td, #shopify-rows td.title-td { flex: 1 1 100%; white-space: normal; font-size: 13.5px; }
  #rows td.title-td .title-cell, #shopify-rows td.title-td .title-cell { white-space: normal; overflow: visible; max-width: none; display: inline; }
  #rows td.mono-num, #shopify-rows td.mono-num { color: var(--fg); }
  /* vendor inventory: title · vendor · [item id hidden] · sku · upc · price · stock… · status · updated */
  #rows td:nth-child(3) { display: none; }
  #rows td:nth-child(4)::before, #shopify-rows td:nth-child(2)::before { content: "sku "; color: var(--fg-dim); font-size: 10px; }
  #rows td:nth-child(5)::before, #shopify-rows td:nth-child(3)::before { content: "upc "; color: var(--fg-dim); font-size: 10px; }
  #rows td:last-child, #shopify-rows td:last-child { margin-left: auto; }
  #rows td:nth-last-child(2) { order: 10; } #rows td:last-child { order: 11; }
  #rows .vendor-pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
  /* shopify inventory: title · sku · upc · price · inv · vendors · status · updated */
  #shopify-rows td:nth-child(5)::before { content: "shopify "; color: var(--fg-dim); font-size: 10px; }
  #shopify-rows td:nth-child(6)::before { content: "vendors "; color: var(--fg-dim); font-size: 10px; }
  #shopify-rows td:nth-child(6)[style*="fg-dim"]::before { content: ""; }
}
@media (max-width: 800px) {
  #orders-rows td.m-empty { display: none; }   /* no customer / shipping / total yet: no empty "—" line */
  #rows td:nth-child(n+7):nth-last-child(n+3)::before { content: "qty "; color: var(--fg-dim); font-size: 10px; }
}
@media (max-width: 800px) {
  /* Cross Dock PO cards: PO # + status / created + value / items · orders */
  #crossdock-rows tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "po status" "created value" "counts counts"; gap: 4px 10px; }
  #crossdock-rows td:nth-child(1) { grid-area: po; font-weight: bold; color: var(--fg-bright); font-size: 14px; }
  #crossdock-rows td:nth-child(2) { grid-area: created; color: var(--fg-dim); font-size: 11.5px; }
  #crossdock-rows td:nth-child(3) { grid-area: counts; font-size: 11.5px; color: var(--fg); }
  #crossdock-rows td:nth-child(3)::before { content: "items "; color: var(--fg-dim); }
  #crossdock-rows td:nth-child(4) { grid-area: counts; justify-self: start; margin-left: 72px; font-size: 11.5px; }
  #crossdock-rows td:nth-child(4)::before { content: "orders "; color: var(--fg-dim); }
  #crossdock-rows td:nth-child(5) { grid-area: value; justify-self: end; color: var(--fg-bright); font-weight: bold; }
  #crossdock-rows td:nth-child(6) { grid-area: status; justify-self: end; }
}
@media (max-width: 800px) {
  /* Settings: cards use the full width instead of overflowing it */
  #settings-view div[id^="settings-tab-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .vendor-card-grid, .shipmap-card-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .vendor-card { min-width: 0; padding: 14px; }
  .vendor-card input[type="text"], .vendor-card input:not([type]), .vendor-card select { min-width: 0; max-width: 100%; }
  /* Shipments P&L filters wrap instead of running off the side */
  #shp-filter-bar { flex-wrap: wrap; row-gap: 6px; }
  #shp-filter-bar .civ-fcount { flex-basis: 100%; }
}
@media (max-width: 800px) {
  /* Purchasing PO cards: PO # + status / supplier + total / items + ETA / received + ship to */
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "car num status" "car sup total" "car recv ship"; gap: 3px 10px; align-items: center; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(1) { grid-area: car; align-self: start; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(2) { grid-area: num; font-size: 14px; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(3) { grid-area: sup; color: var(--fg-bright); min-width: 0; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(4) { grid-area: status; justify-self: end; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(5) { grid-area: items; font-size: 11.5px; text-align: left; color: var(--fg-dim); }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(5) small { display: inline; margin-left: 4px; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(5)::before { content: "lines "; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(6) { grid-area: recv; font-size: 11px; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(6) .dim { display: none; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(7) { grid-area: total; justify-self: end; color: var(--fg-bright); font-weight: bold; }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(8) { grid-area: eta; justify-self: end; font-size: 11px; color: var(--fg-dim); }
  .pu-table:not(.ex-table) > tbody > tr:not(.pu-det) > td:nth-child(9) { grid-area: ship; justify-self: end; font-size: 11px; color: var(--fg-dim); }
  .pu-table:not(.ex-table) > tbody > tr.pu-det { display: block; padding: 0; border: 0; background: none; }
  .pu-table:not(.ex-table) > tbody > tr.pu-det > td { display: block; }
}
@media (max-width: 800px) {
  /* filter selects pair up two per row instead of stacking one per row */
  #trends-filter-bar select, #contacts-filter-bar select, #purchasing-filter-bar select, .header select { min-width: 0; }
  #trends-filter-bar select { flex: 1 1 40%; }
}
@media (max-width: 800px) { .header #vendor-filter { font-size: 14px; } }
@media (max-width: 800px) {
  .oa-holds .oa-hrow > .oa-c:nth-child(4) { min-width: 0; overflow: hidden; }
  .oa-holds .oa-hrow > .oa-c:nth-child(4) .mc-age-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
}
@media (max-width: 800px) {
  /* vendor feed rows: name / schedule / SYNC share the card width */
  .vendor-feed-row-top { grid-template-columns: minmax(0, 1fr) minmax(0, 104px) 72px; gap: 6px; }
  .vendor-feed-row-top select { width: 100%; }
  .vendor-feed-row-top > :last-child, .vendor-feed-row-top .btn { min-width: 0; max-width: 100%; }
}
@media (max-width: 800px) {
  /* Shipments → Senders cards: sender / from + account / packages + corrections / IS + label */
  .civ-orig tbody tr { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "from acct" "pk corr" "is label"; gap: 4px 12px; align-items: center; }
  .civ-orig tbody td { min-width: 0; text-align: left !important; }
  .civ-orig tbody td:nth-child(1) { grid-area: name; color: var(--fg-bright); font-size: 13px; }
  .civ-orig tbody td:nth-child(2) { grid-area: from; }
  .civ-orig tbody td:nth-child(3) { grid-area: acct; text-align: right !important; }
  .civ-orig tbody td:nth-child(4) { grid-area: pk; }
  .civ-orig tbody td:nth-child(4)::before { content: "packages "; color: var(--fg-dim); font-size: 10px; }
  .civ-orig tbody td:nth-child(5) { grid-area: corr; text-align: right !important; }
  .civ-orig tbody td:nth-child(5)::before { content: "corrections "; color: var(--fg-dim); font-size: 10px; }
  .civ-orig tbody td:nth-child(4) small, .civ-orig tbody td:nth-child(5) small { display: inline; margin-left: 6px; }
  .civ-orig tbody td:nth-child(6) { grid-area: is; }
  .civ-orig tbody td:nth-child(7) { grid-area: label; }
  .civ-orig .civ-osel, .civ-orig .civ-olabel { width: 100%; max-width: none; }

  /* pagination: prev · page info · next on one line, rows-per-page under it */
  .pagination { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; padding: 12px 0; }
  .pagination > span[id$="-page-info"] { text-align: center; font-size: 10.5px; line-height: 1.4; }
  .pagination .btn { min-width: 0; padding: 0 12px; }
  .pagination .page-size-pick { grid-column: 1 / -1; justify-self: center; margin: 0; padding: 0; border: 0; }
}

/* v2.31.292: tablets (801-1100px) -- the top bar wraps instead of pushing
   the SheVibe Nexus brand off the right edge on busy pages (Orders filters) */
@media (min-width: 801px) and (max-width: 1100px) {
  .header { flex-wrap: wrap; row-gap: 8px; }
  .header .brand-mark { margin-left: auto; }
}
@media (max-width: 800px) {
  /* Priority Lane rows: two lines on a phone -- tier · order # · vendor,
     then customer · placed time and the LATE / ship-day state */
  .mc-lane-row, .mc-center .mc-lane-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tier num pill" "cust cust state"; gap: 5px 10px; }
  .mc-lane-row .mc-tier { grid-area: tier; }
  .mc-lane-row .mc-num { grid-area: num; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mc-lane-row .mc-pill { grid-area: pill; justify-self: end; max-width: 130px; overflow: hidden; text-overflow: ellipsis; grid-column: auto; }
  .mc-lane-row .mc-cust { grid-area: cust; font-size: 11.5px; min-width: 0; }
  .mc-lane-row .mc-state { grid-area: state; justify-self: end; text-align: right; white-space: nowrap; grid-column: auto; }
}

/* v2.31.295: international globe in its own narrow column, between order # and date */
#orders-rows td.order-intl-cell, #orders-table-header-row th.order-intl-th { width: 1%; padding-left: 0 !important; padding-right: 4px !important; text-align: left; }
#orders-rows td.order-intl-cell .intl-globe { margin-left: 0; }
@media (max-width: 800px) {
  #orders-rows tr { grid-template-columns: 14px max-content minmax(0, 1fr) auto; grid-template-areas: "dot num intl date" "dot cust cust cust" "dot ship ship status" "dot vend vend total"; }
  #orders-rows td.order-intl-cell { grid-area: intl; justify-self: start; width: auto; }
  #orders-rows td.order-intl-cell:empty { display: block; }
}

/* v2.31.296: per-order flag icons (address / UPS / international) in the column after the order # */
.ofl-row { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.ofl { display: inline-flex; align-items: center; line-height: 0; cursor: help; }
.ofl-ups { color: #ff9d35; filter: drop-shadow(0 0 3px rgba(255,157,53,.6)); }
.ofl-ups.bad { color: #ff4f6d; filter: drop-shadow(0 0 3px rgba(255,79,109,.7)); }
.ofl-row .intl-globe { margin-left: 0; }

/* ===================================================================
   v2.31.297: NEXUS//CONSOLE -- slash-command terminal (js/console.js)
   =================================================================== */
#nx-console { position: fixed; left: 0; right: 0; top: 0; height: 0; z-index: 400; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,5,12,.97), rgba(4,9,20,.96)); border-bottom: 0 solid var(--cyan);
  box-shadow: 0 12px 44px rgba(53,232,255,.0); transition: height .34s cubic-bezier(.16,1,.3,1), box-shadow .3s; font-family: var(--font-mono); }
#nx-console.open { height: min(62vh, 560px); pointer-events: auto; border-bottom-width: 2px; box-shadow: 0 12px 44px rgba(53,232,255,.28), 0 2px 0 rgba(255,79,216,.25); }
.nxc-rain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .22; pointer-events: none; }
.nxc-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(53,232,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(53,232,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.nxc-head { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 16px; font-size: 10px; letter-spacing: .2em; color: var(--cyan); border-bottom: 1px solid rgba(53,232,255,.25); background: rgba(2,5,12,.6); }
.nxc-head b { color: var(--magenta); text-shadow: 0 0 8px var(--magenta); }
.nxc-sess { margin-left: auto; color: #2f7f92; }
.nxc-sess + .nxc-x { margin-left: 0; }
.nxc-x { margin-left: auto; background: transparent; border: 1px solid rgba(53,232,255,.35); color: var(--cyan); font: 10px var(--font-mono); letter-spacing: .12em; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
.nxc-x:hover { background: rgba(53,232,255,.12); }
.nxc-log { position: absolute; left: 0; right: 0; top: 33px; bottom: 74px; overflow: auto; padding: 10px 16px; color: #bfefff; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; text-shadow: 0 0 6px rgba(53,232,255,.35); }
.nxc-block { margin-bottom: 10px; }
.nxc-log .c-cy { color: var(--cyan); } .nxc-log .c-mg { color: var(--magenta); text-shadow: 0 0 6px rgba(255,79,216,.5); }
.nxc-log .c-gr { color: #33ff88; } .nxc-log .c-ye { color: #ffcf3d; } .nxc-log .c-rd { color: #ff4d6a; }
.nxc-log .c-dm { color: #5d7fa3; text-shadow: none; } .nxc-log .c-br { color: var(--fg-bright); }
.nxc-cur { display: inline-block; width: 8px; height: 14px; background: var(--magenta); vertical-align: -2px; animation: brand-blink 1s steps(1) infinite; }
.nxc-sug { position: absolute; left: 0; right: 0; bottom: 40px; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.nxc-sug::-webkit-scrollbar { display: none; }
.nxc-s { font-size: 11px; color: #7fb8cc; border: 1px solid rgba(53,232,255,.25); background: rgba(2,8,16,.85); border-radius: 4px; padding: 3px 9px; cursor: pointer; flex: none; }
.nxc-s b { color: var(--cyan); font-weight: 700; } .nxc-s i { font-style: normal; color: #a8892b; }
.nxc-s.on { border-color: var(--magenta); box-shadow: 0 0 10px rgba(255,79,216,.35); }
.nxc-s.on b { color: var(--magenta); }
.nxc-in { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-top: 1px solid rgba(53,232,255,.25); background: rgba(53,232,255,.05); }
.nxc-prompt { color: var(--magenta); text-shadow: 0 0 6px var(--magenta); white-space: nowrap; font-size: 13px; }
.nxc-field { position: relative; flex: 1; display: flex; min-width: 0; }
.nxc-field input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--cyan); font: 13.5px var(--font-mono); caret-color: var(--magenta); padding: 0; width: 100%; }
.nxc-ghost { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: rgba(53,232,255,.3); font: 13.5px var(--font-mono); white-space: pre; pointer-events: none; overflow: hidden; max-width: 100%; }
#nx-console.busy .nxc-prompt { animation: brand-blink .6s steps(1) infinite; }
@media (max-width: 800px) {
  #nx-console.open { height: min(72dvh, 560px); }
  .nxc-head { padding: 8px 10px; letter-spacing: .14em; padding-top: max(8px, env(safe-area-inset-top)); }
  .nxc-sess { display: none; }
  .nxc-head .nxc-x { margin-left: auto; }
  .nxc-log { padding: 8px 10px; font-size: 11.5px; top: calc(33px + env(safe-area-inset-top)); }
  .nxc-in, .nxc-sug { padding: 0 10px; }
  .nxc-prompt { font-size: 12px; }
  .nxc-field input, .nxc-ghost { font-size: 16px; }   /* 16px: no iOS zoom on focus */
}
@media (prefers-reduced-motion: reduce) { #nx-console { transition: none; } }

/* v2.31.299: Nexus status pills are always OUTLINED (Shopify's status is
   always filled), in Shopify's own colours where the meaning matches --
   grey = not started (Shopify "unfulfilled"), green = shipped (Shopify
   "fulfilled"). Dashed border = part-way, solid = done. */
.nx-pill { background: transparent !important; border-width: 1.5px; border-style: solid; padding: 2px 10px; }
.nx-pill.nx-unp { color: #c8d0dc; border-color: #6b7486; }
.nx-pill.nx-pp { color: var(--status-exclusive-bg); border-color: color-mix(in srgb, var(--status-exclusive-bg) 70%, transparent); border-style: dashed; }
.nx-pill.nx-pr { color: var(--status-exclusive-bg); border-color: var(--status-exclusive-bg); }
.nx-pill.nx-ps { color: var(--status-instock-bg); border-color: color-mix(in srgb, var(--status-instock-bg) 70%, transparent); border-style: dashed; }
.nx-pill.nx-fs { color: var(--status-instock-bg); border-color: var(--status-instock-bg); box-shadow: 0 0 6px rgba(51,255,136,.25); }
.nx-pill.nx-hold { color: var(--sync-orange); border-color: var(--sync-orange); }

/* ===== v2.31.301 (mockup A): INCOMING grouped rows + step track ===== */
.shp-inc2 { padding-bottom: 12px; }
.shp-sec { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .16em; color: var(--c); margin: 16px 0 7px; }
.shp-sec:first-child { margin-top: 4px; }
.shp-sec b { font-size: 12px; }
.shp-sec::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--c) 25%, transparent); order: 5; }
.shp-sec a { order: 6; color: var(--fg-dim); cursor: pointer; letter-spacing: .06em; font-size: 10px; }
.shp-sec[onclick] { cursor: pointer; }
.shp-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 190px 170px minmax(120px, 210px) 14px; gap: 14px; align-items: center;
  padding: 9px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 8px; background: var(--bg-panel); cursor: pointer; }
.shp-row:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); border-left-color: var(--c); }
.shp-row.sel { background: color-mix(in srgb, var(--c) 6%, var(--bg-panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); }
.shp-row.done { opacity: .58; }
.shp-row.done:hover, .shp-row.done.sel { opacity: .85; }
.shp-eta2 { font-weight: 800; font-size: 12px; letter-spacing: .08em; color: var(--c); white-space: nowrap; }
.shp-who { min-width: 0; }
.shp-who > div { margin-top: 4px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-po.none { color: var(--fg-dim); }
.shp-st { font-size: 11.5px; min-width: 0; }
.shp-st small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.shp-note { font-size: 11px; color: var(--fg); min-width: 0; }
.shp-note small { display: block; margin-top: 2px; font-size: 10.5px; }
.shp-car { color: var(--fg-dim); font-size: 10px; }
.shp-boxes2 { margin: -2px 0 10px 18px; padding: 6px 12px; border-left: 1px dashed var(--border); }
/* step track: label → transit → out → dock */
.shp-trk-wrap { width: 170px; }
.shp-track { position: relative; display: flex; justify-content: space-between; align-items: center; }
.shp-track::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; margin-top: -1px; background: #1c2740; }
.shp-track::after { content: ""; position: absolute; left: 4px; top: 50%; height: 2px; margin-top: -1px; width: calc((100% - 8px) * var(--f)); background: var(--c); box-shadow: 0 0 6px var(--c); }
.shp-track i { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #2a3552; background: var(--bg); }
.shp-track i.done { background: var(--c); border-color: var(--c); }
.shp-track i.now { background: var(--c); border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), 0 0 10px var(--c); }
.shp-track.bad i.now { animation: brand-blink 1s steps(1) infinite; }
.shp-trlbl { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .08em; color: #3d4d6e; margin-top: 3px; }
@media (max-width: 1250px) { .shp-row { grid-template-columns: 90px minmax(0, 1fr) 170px 150px 14px; } .shp-note { display: none; } }
@media (max-width: 800px) {
  .shp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who eta" "trk st" "note note"; gap: 8px 10px; padding: 10px 12px; }
  .shp-row .shp-eta2 { grid-area: eta; justify-self: end; align-self: start; }
  .shp-row .shp-who { grid-area: who; }
  .shp-row .shp-trk-wrap { grid-area: trk; width: auto; max-width: 200px; }
  .shp-row .shp-st { grid-area: st; justify-self: end; text-align: right; }
  .shp-row .shp-note { grid-area: note; display: block; font-size: 10.5px; color: var(--fg-dim); }
  .shp-row .shp-car { display: none; }
  .shp-boxes2 { margin-left: 6px; }
}
@media (max-width: 800px) {
  .shp-row .shp-st { max-width: 52vw; }
  .shp-row .shp-st > span { display: inline-block; white-space: normal; }
  .shp-boxes2 .shp-bx { display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; grid-template-areas: "ic box trk eta" "ic st st when"; gap: 2px 8px; align-items: center; padding: 6px 0; }
  .shp-boxes2 .shp-bx > :nth-child(1) { grid-area: ic; } .shp-boxes2 .shp-bx > :nth-child(2) { grid-area: box; }
  .shp-boxes2 .shp-bx > :nth-child(3) { grid-area: trk; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .shp-boxes2 .shp-bx > :nth-child(4) { grid-area: st; } .shp-boxes2 .shp-bx > :nth-child(5) { grid-area: when; justify-self: end; }
  .shp-boxes2 .shp-bx > :nth-child(6) { grid-area: eta; justify-self: end; }
}

/* v2.31.302: scan age on stuck-looking boxes */
.shp-st small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-quiet { color: #ff9d35; display: block; overflow: hidden; text-overflow: ellipsis; }

/* v2.31.303: SENDERS -- new contact from a sender */
.civ-newc { display: flex; gap: 6px; align-items: center; }
.civ-newc .pu-ie { min-width: 0; flex: 1; }

/* v2.31.303: ON HOLD (2/3) + WAITING TO PROCESS (1/3) side by side again */
.oa-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.oa-split > .sw-panel { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.oa-split .oa-lane { flex: 1; display: flex; flex-direction: column; }
.oa-split .oa-wait-panel .oa-lh { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.oa-split .oa-wait-panel .oa-cells { grid-template-columns: minmax(0, 1fr); }
.oa-split .oa-wait-panel .oa-cells .oa-cell { display: grid; grid-template-columns: 12px minmax(0, 1fr) 46px minmax(0, max-content); padding: 4px 2px; border-top: 1px solid #121a2b; }
.oa-split .oa-wait-panel .oa-cells .oa-cell:first-child { border-top: 0; }
.oa-split .oa-wait-panel .oa-cell .oa-v { justify-content: flex-end; }
.oa-split .oa-wait-panel .oa-cell .oa-v .mc-pill { max-width: 110px; }
.oa-split .oa-wait-panel .oa-foot { margin-top: auto; padding-top: 4px; }
.oa-split .oa-wait-panel .oa-bar .mc-bar-labels { font-size: 8.5px; }
.oa-split .oa-wait-panel .oa-cells .oa-cell { grid-template-columns: 12px minmax(0, 1fr) max-content minmax(0, max-content); }
.oa-split .oa-wait-panel .oa-cell .mc-age { white-space: nowrap; }
.oa-split .oa-wait-panel .oa-t { flex-wrap: wrap; row-gap: 0; white-space: normal; }
.oa-split .oa-wait-panel .oa-t small { white-space: nowrap; }
/* the middle column is too narrow for a 1/3 box on smaller screens -- stack them */
@media (max-width: 1500px) { .oa-split { grid-template-columns: minmax(0, 1fr); gap: 14px; } .oa-split .oa-wait-panel .oa-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } .oa-split .oa-wait-panel .oa-cells .oa-cell:nth-child(2) { border-top: 0; } }
@media (max-width: 900px) { .oa-split .oa-wait-panel .oa-cells { grid-template-columns: minmax(0, 1fr); } .oa-split .oa-wait-panel .oa-cells .oa-cell:nth-child(2) { border-top: 1px solid #121a2b; } }
.oa-split .oa-wait-panel .oa-cells .oa-cell { grid-template-columns: 12px minmax(64px, 1fr) max-content minmax(0, max-content); gap: 7px; }
.oa-split .oa-wait-panel .oa-cell .oa-v .mc-pill { max-width: 92px; }

/* v2.31.304: waiting (1/3) on the left, holds (2/3) on the right */
.oa-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1500px) { .oa-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1500px) { .oa-split .oa-hold-panel { order: -1; } }   /* stacked: holds first (more urgent) */

/* v2.31.305: SENDERS -- a matched contact's name is the sender name */
.civ-cname { color: var(--fg-bright); font-size: 12px; }
/* v2.31.305: ON HOLD header mirrors WAITING -- title, then the bar under it */
.oa-split .oa-hold-panel .oa-lh { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.oa-split .oa-wait-panel .mc-bar-labels > div { font-size: 9px; letter-spacing: -0.3px; text-overflow: ellipsis; }
/* v2.31.306: waiting 25% wider (1/3 -> 5/12), holds take the rest */
@media (min-width: 1501px) { .oa-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (min-width: 1501px) { .oa-split .oa-wait-panel .oa-cell .oa-v .mc-pill { max-width: 130px; } }

/* v2.31.307: contact pill color */
.ct-pillc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: normal; }
.ct-sws { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ct-sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); padding: 0; cursor: pointer; flex: none; }
.ct-sw:hover { transform: scale(1.15); }
.ct-sw.on { box-shadow: 0 0 0 2px var(--bg, #05070d), 0 0 0 3px var(--fg-bright); }
.ct-sw-any { position: relative; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fg-dim); font-size: 12px; line-height: 1; border-style: dashed; }
.ct-sw-any input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ===== v2.31.308: P&L views (ORDERS | BOX CORRECTIONS) ===== */
.civ-views { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.civ-views button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.civ-views button b { color: #ff9d35; margin-left: 4px; }
.civ-views button.on { border-color: var(--cyan); color: var(--cyan); background: rgba(53,232,255,.08); }
.civ-views button:hover:not(.on) { color: var(--fg-bright); }
.civ-unl { margin-left: auto; font-size: 10.5px; color: #ff9d35; cursor: pointer; }
.civ-unl:hover { text-decoration: underline; }
.civ-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.civ-kpi b { font-size: 20px; }
.civ-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.civ-panel { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; background: rgba(255,255,255,.012); }
.civ-ph { font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); margin-bottom: 8px; text-transform: uppercase; }
.civ-ph .shp-meta { letter-spacing: 0; text-transform: none; }
.civ-weeks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; height: 160px; align-items: stretch; }
.civ-wk { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.civ-wk-a { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-bottom: 1px solid var(--border); }
.civ-wk i { display: block; width: 100%; max-width: 28px; background: linear-gradient(180deg, #ff9d35, #ff4f6d); border-radius: 3px 3px 0 0; box-shadow: 0 0 8px rgba(255,157,53,.35); }
.civ-wk-v { font-size: 8.5px; color: var(--fg); margin-bottom: 3px; white-space: nowrap; }
.civ-wk-l { font-size: 8.5px; color: var(--fg-dim); margin-top: 4px; white-space: nowrap; }
.civ-fix { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content; gap: 10px; align-items: center; padding: 6px 4px; border-top: 1px solid #121a2b; cursor: pointer; border-radius: 4px; font-size: 11px; }
.civ-fix:first-of-type { border-top: 0; }
.civ-fix:hover { background: rgba(255,255,255,.04); }
.civ-fix .vendor-pill { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.civ-fix-amt { color: #ff4f6d; font-weight: 700; text-align: right; }
@media (max-width: 1100px) { .civ-split2 { grid-template-columns: minmax(0, 1fr); } .civ-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .civ-unl { margin-left: 0; width: 100%; }
  .civ-fix { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .civ-fix > .shp-meta, .civ-fix > .civ-rep2 { display: none; }
}

/* ===== v2.31.308: contacts -- SHIPS FROM + senders without a contact ===== */
.ct-ship, .ct-unl-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content max-content; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #121a2b; font-size: 11.5px; }
.ct-ship:first-child { border-top: 0; }
.ct-ship b, .ct-unl-row b { color: var(--fg-bright); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ship small, .ct-unl-row small { display: block; color: var(--fg-dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-ship-src { font-size: 9px; letter-spacing: .8px; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(53,232,255,.4); border-radius: 999px; padding: 1px 7px; }
.ct-x { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.ct-x:hover { color: #ff4f6d; }
.ct-ship-pick { width: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; background: var(--panel, #0b0f1a); color: var(--fg); border: 1px dashed var(--border); border-radius: 6px; padding: 6px 8px; }
.ct-unl-bar { border-color: rgba(255,157,53,.5); background: rgba(255,157,53,.05); }
.ct-unl .ct-unl-row { grid-template-columns: minmax(0, 1fr) max-content max-content; }
.ct-unl-new { display: flex; gap: 6px; align-items: center; }
.ct-unl-new .pu-ie { width: 180px; }

/* v2.31.309: Shipments tabs fill the side panel; P&L date in its own column */
.shp-tabs:has(#shp-tab-pnl) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.civ-pnl td.civ-date { color: var(--fg); font-size: 11.5px; white-space: nowrap; }

/* ===== v2.31.310 (mockup A): contact card -- quick strip + grouped boxes ===== */
.ct-headtags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.ct-headtags .ct-brand { margin: 0; }
.ct-star { background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-dim); font-size: 15px; line-height: 1; width: 30px; height: 28px; cursor: pointer; }
.ct-star.on { color: #ffcf3d; border-color: rgba(255,207,61,.5); text-shadow: 0 0 8px rgba(255,207,61,.6); }
.ct-star:hover { color: #ffcf3d; }
.ct-head-status:empty { display: none; }
.ct-head-status { margin: -4px 0 6px; }
.ct-quick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 9px; background: rgba(53,232,255,.05); border: 1px solid rgba(53,232,255,.2); font-size: 12px; }
.ct-quick b { color: var(--fg-bright); }
.ct-quick a { color: var(--cyan); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; max-width: 100%; vertical-align: bottom; }
.ct-quick-web { text-align: right; }
.ct-box { border: 1px solid var(--border); border-left: 3px solid var(--bc); border-radius: 10px; padding: 2px 12px 12px; margin-top: 10px; background: rgba(255,255,255,.012); }
.ct-box > .ct-sec { border-top: 0; margin: 8px 0 8px; padding-top: 0; }
.ct-box .vendor-pill { letter-spacing: .3px; }
.ct-box .ct-person:last-of-type { border-bottom: 0; }
.ct-box .ct-addrs { margin: 6px 0 4px; }
.ct-sub { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 10px 0 5px; text-transform: uppercase; }
.ct-sub .ct-dim { letter-spacing: 0; text-transform: none; font-size: 10px; }
.ct-box .ct-notes-card { margin: 0; }
.ct-kv-tight { margin-top: 6px; }
.ct-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ct-chip { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-dim); background: transparent; border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ct-chip:hover { color: var(--cyan); border-color: rgba(53,232,255,.5); }
@media (max-width: 800px) { .ct-box .ct-addrs { grid-template-columns: minmax(0, 1fr); } }
.ct-quick-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-qn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ct-quick-who .ct-po { flex: none; }

/* ===== v2.31.311: Trends -- lanes as a SHOW list in the side panel, actionable bentos only ===== */
.tr-lanelist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.tr-lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; text-align: left; font-family: var(--font-mono); background: transparent; border: 1px solid var(--border); border-left: 3px solid var(--lc); border-radius: 7px; padding: 7px 10px; cursor: pointer; color: inherit; }
.tr-lrow b { font-size: 10.5px; letter-spacing: 1.5px; color: var(--lc); }
.tr-lrow .tr-ln { font-size: 14px; font-weight: 800; color: var(--fg-bright); }
.tr-lrow small { grid-column: 1 / -1; font-size: 10px; color: var(--fg-dim); margin-top: 2px; }
.tr-lrow:hover { background: rgba(255,255,255,.03); }
.tr-lrow.on { background: color-mix(in srgb, var(--lc) 10%, transparent); border-color: color-mix(in srgb, var(--lc) 55%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--lc) 18%, transparent); }
.tr-m-only { display: none; }
@media (max-width: 900px) { .tr-m-only { display: contents; } }
.tr-kpis > .tr-kpi:only-child { grid-column: 1 / -1; }
#tr-overview #tr-heat .tr-h4:first-child { margin-top: 14px; }
.tr-panel .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== v2.31.312: shortlist -- read-only list, DECISION box (pipeline + note) in the side panel ===== */
.tr-table td.tr-notep { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.tr-dec { border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); background: color-mix(in srgb, var(--sc) 5%, transparent); border-radius: 10px; padding: 10px 12px; margin: 10px 0 12px; }
.tr-dec-h { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: 1.5px; color: var(--sc); margin-bottom: 10px; }
.tr-dec-h .tr-dim { letter-spacing: 0; }
.tr-pipe { display: flex; align-items: center; gap: 6px; }
.tr-ps { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 2px 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-dim); cursor: pointer; }
.tr-ps b { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #3a4766; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; flex: none; }
.tr-ps:hover { color: var(--fg-bright); }
.tr-ps.done { color: var(--fg); } .tr-ps.done b { border-color: var(--pc); color: var(--pc); }
.tr-ps.on { color: var(--pc); font-weight: 800; } .tr-ps.on b { border-color: var(--pc); background: var(--pc); color: #0b0f1a; box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 50%, transparent); }
.tr-pl { flex: 1; height: 1px; background: var(--border); min-width: 10px; }
.tr-pl.done { background: color-mix(in srgb, var(--sc) 60%, transparent); }
.tr-pipe.passed { opacity: .55; }
.tr-dec-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tr-dec-btns .tr-btn { margin: 0; }
.tr-btn-x { color: var(--fg-dim); }
.tr-dec .tr-note { margin-top: 10px; width: 100%; }
.tr-dec-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--fg-dim); margin-top: 6px; }
.ct-cred button.ct-eye { display: inline-flex; align-items: center; justify-content: center; padding-left: 8px; padding-right: 8px; }
.ct-cred button.ct-eye svg { display: block; }

/* ===== v2.31.314 (mockup A): INCOMING side panel ===== */
.shp-hero { border: 1px solid rgba(53,232,255,.3); background: linear-gradient(180deg, rgba(53,232,255,.07), transparent); border-radius: 11px; padding: 12px 13px; }
.shp-hero.on { border-color: var(--cyan); box-shadow: 0 0 12px rgba(53,232,255,.18); }
.shp-hero-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 9.5px; letter-spacing: 1.5px; color: var(--cyan); }
.shp-hero-top .shp-meta { letter-spacing: 0; font-size: 10px; }
.shp-hero-big { display: block; background: transparent; border: 0; padding: 0; margin: 2px 0 0; font-family: var(--font-mono); font-size: 32px; font-weight: 800; color: var(--cyan); text-shadow: 0 0 10px rgba(53,232,255,.4); cursor: pointer; line-height: 1.1; }
.shp-hero-next { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }
.shp-hero-next b { color: var(--fg-bright); font-weight: normal; }
.shp-hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.shp-hstat { text-align: left; font-family: var(--font-mono); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; cursor: pointer; color: inherit; }
.shp-hstat:disabled { cursor: default; }
.shp-hstat:not(:disabled):hover { border-color: var(--c); }
.shp-hstat b { display: block; font-size: 16px; color: var(--fg-bright); }
.shp-hstat span { display: block; font-size: 8.5px; letter-spacing: 1px; color: var(--c); margin-top: 1px; }
.shp-h4s { margin: 14px 0 8px; }
.shp-toolrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.shp-toolrow .shp-today, .shp-toolrow .shp-print { margin: 0; text-align: center; white-space: nowrap; }
.shp-toolrow .shp-today.on { background: rgba(255,207,61,.1); border-color: #ffcf3d; color: #ffcf3d; font-weight: bold; }
.shp-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--fg-bright); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; }
.shp-alert:hover { background: color-mix(in srgb, var(--c) 11%, transparent); }
.shp-alert b { font-size: 18px; color: var(--c); }
.shp-alert small { display: block; color: var(--fg-dim); font-size: 9.5px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-alert span { min-width: 0; }
.shp-alert em { font-style: normal; color: var(--c); font-size: 10px; white-space: nowrap; }
.shp-side .shp-bento { display: block; margin-bottom: 0; }
.shp-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; gap: 10px; align-items: center; padding: 5px 0; font-size: 11px; border-bottom: 1px dashed var(--border); }
.shp-srow:last-child { border-bottom: 0; }
.shp-srow .vendor-pill { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-srow b { text-align: right; color: var(--fg-bright); }
.shp-srow-bad { color: #ff4d6a; }
.shp-raw { white-space: nowrap; }
.shp-sum:empty { display: none; }   /* v2.31.315 */

/* v2.31.316: refresh lives on the ARRIVING TODAY card (replaces "check now"); date next to the title */
.shp-hero-top { align-items: center; }
.shp-hero-date { font-style: normal; letter-spacing: .5px; color: var(--fg-dim); font-size: 10px; margin-left: 2px; }
.shp-hero-ref { width: 30px; height: 30px; font-size: 15px; flex: none; }
.shp-side .shp-foot { justify-content: space-between; }

/* ===== v2.31.317: vendor mail (js/mail.js) ===== */
.ml-empty { padding: 24px; color: var(--fg-dim); font-size: 12px; }
.ml-dim { color: var(--fg-dim); } .ml-small { font-size: 10.5px; } .ml-pad { padding: 6px 0; font-size: 11px; }
.ml-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ml-table th { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); font-weight: normal; text-align: left; padding: 8px; border-bottom: 1px solid var(--border); }
.ml-table td { padding: 8px; border-bottom: 1px dashed var(--border); vertical-align: middle; cursor: pointer; }
.ml-table tr:hover td { background: rgba(255,255,255,.025); }
.ml-table tr.sel td { background: rgba(53,232,255,.06); } .ml-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.ml-table tr.unread .ml-subj b { color: var(--fg-bright); } .ml-table tr.unread td:first-child::before { content: "●"; color: var(--cyan); margin-right: 5px; font-size: 9px; }
.ml-dt { white-space: nowrap; color: var(--fg-dim); width: 1%; }
.ml-who { white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ml-who .vendor-pill { max-width: 190px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ml-from { color: var(--fg); } .ml-out { color: #b388ff; }
.ml-subj { max-width: 0; width: 60%; }
.ml-subj b { display: block; font-weight: normal; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-subj small { display: block; color: var(--fg-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ml-tag { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: .8px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.ml-refs { white-space: nowrap; }
.ml-ref { display: inline-block; font-size: 10.5px; color: var(--cyan); border: 1px solid rgba(53,232,255,.3); border-radius: 999px; padding: 1px 8px; margin: 1px 4px 1px 0; cursor: pointer; text-decoration: none; }
.ml-ref.po { color: #ffcf3d; border-color: rgba(255,207,61,.35); cursor: default; } .ml-ref.trk { color: #b388ff; border-color: rgba(179,136,255,.35); cursor: default; }
.ml-attc { width: 1%; white-space: nowrap; text-align: right; padding-right: 12px !important; }
.ml-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 10px 8px; font-size: 11px; color: var(--fg-dim); }
.ml-pager button, .ml-btn { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .8px; background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.ml-btn:hover:not(:disabled) { border-color: var(--cyan); color: var(--fg-bright); }
.ml-btn.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: 800; }
.ml-btn.bad { color: #ff4d6a; border-color: rgba(255,77,106,.5); } .ml-btn.on.bad { background: #ff4d6a; color: #1a0006; }
.ml-btn:disabled { opacity: .45; cursor: default; }
.ml-setup { max-width: 640px; margin: 20px; padding: 18px 20px; border: 1px solid rgba(53,232,255,.3); border-radius: 12px; background: rgba(53,232,255,.04); font-size: 12.5px; line-height: 1.6; }
.ml-setup h3 { margin: 0 0 8px; color: var(--cyan); font-size: 14px; letter-spacing: 1px; }
.ml-setup ol { padding-left: 20px; } .ml-setup a { color: var(--cyan); cursor: pointer; }
.ml-h4 { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: 1.8px; color: var(--fg-dim); margin: 16px 0 8px; text-transform: uppercase; }
.ml-h4 a { color: var(--cyan); letter-spacing: .3px; text-transform: none; cursor: pointer; font-size: 10.5px; }
.ml-h4 span { color: var(--fg-bright); letter-spacing: 0; }
.ml-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ml-kpi { text-align: left; font-family: var(--font-mono); background: transparent; border: 1px solid var(--border); border-top: 2px solid var(--c); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: inherit; }
.ml-kpi.on { background: color-mix(in srgb, var(--c) 10%, transparent); }
.ml-kpi b { display: block; font-size: 18px; color: var(--fg-bright); } .ml-kpi span { font-size: 9px; letter-spacing: 1.2px; color: var(--c); }
.ml-lag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 11px; }
.ml-lag small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 3px; }
.ml-lag .vendor-pill { font-size: 9px; }
.ml-inv { padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 11px; }
.ml-inv a { color: var(--fg-bright); text-decoration: none; } .ml-inv a:hover { color: var(--cyan); }
.ml-inv small, .ml-acct small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; }
.ml-acct { padding: 5px 0; font-size: 11px; } .ml-acct small.bad, .gw .bad { color: #ff4d6a; }
.ml-note { margin-top: 12px; font-size: 11px; color: var(--fg); border: 1px dashed var(--border); border-radius: 7px; padding: 8px 10px; }
.ml-mhead { display: flex; gap: 8px; align-items: center; font-size: 11px; }
.ml-msubj { margin: 8px 0; font-size: 14px; color: var(--fg-bright); line-height: 1.35; }
.ml-mfrom { font-size: 11.5px; color: var(--fg); } .ml-mfrom small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 3px; }
.ml-chips { margin-top: 8px; } .ml-facts { margin-top: 6px; font-size: 11px; color: var(--fg-dim); } .ml-facts b { color: #ffcf3d; font-weight: normal; }
.ml-atts { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ml-attrow { font-size: 11.5px; color: var(--fg-bright); text-decoration: none; border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; }
.ml-attrow:hover { border-color: var(--cyan); } .ml-attrow small { color: var(--fg-dim); margin-left: 6px; }
.ml-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.ml-body { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; color: var(--fg); background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-height: 52vh; overflow: auto; margin: 0; }
.ml-thr { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 11px; cursor: pointer; } .ml-thr small { display: block; color: var(--fg-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-boxacts { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.ml-boxacts button { font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; background: transparent; color: var(--fg-dim); border: 1px dashed var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.ml-boxacts button:hover { color: var(--cyan); border-color: rgba(53,232,255,.5); } .ml-boxacts button.bad:hover { color: #ff4d6a; border-color: rgba(255,77,106,.5); }
.ml-modal { position: fixed; inset: 0; z-index: 200; background: rgba(2,4,9,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ml-dialog { width: min(1100px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-panel, #0b0f1a); border: 1px solid rgba(53,232,255,.35); border-radius: 12px; padding: 14px 16px; box-shadow: 0 10px 40px rgba(0,0,0,.6); font-family: var(--font-mono); }
.ml-dhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 11px; color: var(--fg-dim); }
.ml-dhead b { color: var(--cyan); letter-spacing: 1.2px; font-size: 11.5px; } .ml-dhead b.bad { color: #ff4d6a; }
.ml-x { margin-left: auto; background: transparent; border: 0; color: var(--fg-dim); font-size: 14px; cursor: pointer; }
.ml-warn { font-size: 11px; color: #ffcf3d; border: 1px solid rgba(255,207,61,.4); background: rgba(255,207,61,.06); border-radius: 7px; padding: 7px 10px; margin-bottom: 8px; }
.ml-err { font-size: 11px; color: #ff4d6a; margin-top: 8px; }
.ml-form { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; align-items: center; font-size: 11px; color: var(--fg-dim); margin-bottom: 8px; }
.ml-form input, .ml-form select { width: 100%; font-family: var(--font-mono); font-size: 12px; }
.ml-form select { background: var(--bg-input, #070a12); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
.ml-ta { width: 100%; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; background: var(--bg-input, #070a12); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 8px; padding: 10px; resize: vertical; }
.ml-dacts { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ml-sent { font-size: 13px; color: #33ff88; padding: 10px 0; } .ml-sent small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 4px; }
.gw { max-width: 980px; font-size: 12px; }
.gw-head { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .gw-head h3 { margin: 0; font-size: 13px; letter-spacing: 1.5px; color: var(--fg-bright); } .gw-head > span { color: var(--fg-dim); font-size: 11px; flex: 1; }
.gw-checks { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.gw-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 7px; }
.gw-check b { color: var(--fg-dim); } .gw-check.ok b { color: #33ff88; } .gw-check.bad b { color: #ff4d6a; } .gw-check.bad { border-color: rgba(255,77,106,.35); }
.gw-check small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; word-break: break-word; }
.gw-copy { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 6px 0; font-size: 11px; color: var(--fg-dim); }
.gw-copy code { color: var(--fg-bright); font-size: 11px; word-break: break-all; }
.gw-table { width: 100%; border-collapse: collapse; }
.gw-table td { padding: 8px; border-bottom: 1px dashed var(--border); font-size: 11.5px; vertical-align: middle; }
.gw-table td small { display: block; color: var(--fg-dim); font-size: 10px; } .gw-table tr.gw-off { opacity: .5; }
.gw-tog { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; color: var(--fg); cursor: pointer; }
.gw-sync { color: var(--fg-dim); font-size: 10.5px; }
@media (max-width: 800px) { .ml-table th:nth-child(5), .ml-table td:nth-child(5) { display: none; } .gw-table td { display: block; border: 0; padding: 4px 8px; } .gw-table tr { display: block; border-bottom: 1px dashed var(--border); padding: 6px 0; } }
.gw-rescan { color: var(--cyan); cursor: pointer; }
.gw-only { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 10px; color: var(--fg-dim); }
.gw-only span { white-space: nowrap; letter-spacing: .5px; }
.gw-only input { flex: 1; min-width: 150px; max-width: 260px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; font-family: var(--font-mono); font-size: 11px; }
.gw-only input:focus { outline: none; border-color: var(--cyan); }
.gw-only input:not(:placeholder-shown) { border-color: rgba(53, 232, 255, .45); }
.ml-via { display: inline-block; font-size: 9.5px; font-weight: bold; color: var(--cyan); border: 1px solid rgba(53, 232, 255, .4); border-radius: 999px; padding: 0 6px; margin-right: 6px; vertical-align: 1px; }

/* v2.31.322: P&L → VENDOR BILLS */
.vb-q { flex: 1; min-width: 200px; max-width: 340px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; font-family: var(--font-mono); font-size: 11px; }
.vb-q:focus { outline: none; border-color: var(--cyan); }
.vb-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 230px); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.vb-wk { text-align: left; font-family: var(--font-mono); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; background: rgba(255,255,255,.012); color: var(--fg); cursor: pointer; }
.vb-wk:hover { border-color: color-mix(in srgb, var(--cyan) 50%, var(--border)); }
.vb-wk.on { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(53,232,255,.3) inset; }
.vb-wk small { display: block; font-size: 10px; color: var(--fg-dim); }
.vb-wk b { display: block; font-size: 15px; color: var(--fg-bright); margin: 3px 0; font-weight: bold; }
.vb-fl { color: #ff9d35; } .vb-ok { color: var(--status-instock-bg); }
.vb-table td { vertical-align: top; }
.vb-row { cursor: pointer; } .vb-row.open td { background: rgba(53,232,255,.04); } .vb-row.done { opacity: .55; }
.vb-ord { font-weight: bold; color: var(--yellow, #ffcf3d); }
.vb-why { margin: 1px 0 3px; } .vb-why small { display: block; color: var(--fg); font-size: 10.5px; margin-top: 2px; }
.vb-over { color: #ff4f6d; font-weight: bold; } .vb-credit { color: var(--status-instock-bg); font-weight: bold; } .vb-up { color: #ff9d35; font-weight: bold; }
.vb-acts { white-space: nowrap; } .vb-acts .ct-btn { margin-left: 4px; }
.vb-state { font-size: 10px; margin-right: 4px; } .vb-state.ok { color: var(--status-instock-bg); } .vb-state.asked { color: var(--cyan); }
.vb-drawer td { background: rgba(53,232,255,.025); padding: 8px 14px 12px; }
.vb-lines { width: 100%; max-width: 760px; border-collapse: collapse; font-size: 11px; }
.vb-lines td { padding: 4px 8px; border-bottom: 1px dashed var(--border); }
.vb-sku { color: var(--fg-bright); }
.vb-tot { font-size: 11px; margin-top: 6px; color: var(--fg); } .vb-tot b { color: var(--fg-bright); }
.vb-clean { border: 1px dashed rgba(51,255,136,.35); border-radius: 8px; padding: 12px 14px; color: var(--status-instock-bg); font-size: 11.5px; }
.vb-allbtn { margin-top: 14px; }
.vb-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.vb-side { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 11px; background: rgba(255,255,255,.012); }
.vb-sh b { display: block; color: var(--fg-bright); font-size: 12.5px; } .vb-sh small { color: var(--fg-dim); font-size: 10px; }
.vb-big { font-size: 22px; font-weight: bold; color: var(--fg-bright); margin: 8px 0 2px; }
.vb-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 8px 0; background: var(--border); }
.vb-bar i { display: block; }
.vb-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; }
.vb-kv span { color: var(--fg-dim); } .vb-kv span i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.vb-kv b { color: var(--fg-bright); font-weight: normal; text-align: right; }
.vb-chk { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.vb-ck { color: var(--status-instock-bg); } .vb-x { color: #ff9d35; font-weight: bold; }
.vb-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .vb-btns a.ct-btn { text-decoration: none; }
@media (max-width: 800px) { .vb-table th:nth-child(5), .vb-table td:nth-child(5) { display: none; } }
.vb-acts .ct-btn { padding: 3px 8px; }
.vb-dt { white-space: nowrap; color: var(--fg); font-size: 11px; }
.vb-table th.civ-sort { cursor: pointer; user-select: none; } .vb-table th.civ-sort:hover, .vb-table th.civ-sort.on { color: var(--cyan); }
.vb-sgs { margin-top: 6px; }
.vb-sg { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed rgba(53,232,255,.35); border-radius: 7px; padding: 5px 8px; margin-top: 4px; max-width: 560px; }
.vb-sg.top { background: rgba(53,232,255,.04); }
.vb-sgl { font-size: 11px; color: var(--fg-dim); } .vb-sgl small { display: block; color: var(--fg); font-size: 10.5px; margin-top: 2px; }
.vb-sg .ct-btn { padding: 3px 9px; white-space: nowrap; }
.vb-sg .vb-linkbtn { border-color: var(--cyan); color: var(--cyan); background: transparent; }
.vb-more { font-size: 10px; color: var(--cyan); cursor: pointer; display: inline-block; margin-top: 3px; }
.vb-hand { color: var(--cyan); } .vb-hand a { cursor: pointer; text-decoration: underline dotted; }
.ofl-up { line-height: 1; font-size: 11px; }
.shp-po .shp-link { color: inherit; font-weight: inherit; text-decoration: none; } .shp-po .shp-link:hover { text-decoration: underline; }

/* v2.31.333: P&L side panel -- SHIPPING / VENDORS tabs + area list */
.pa-wrap { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.pa-tabs button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; padding: 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.pa-tabs button.on { background: var(--cyan); color: #04121a; font-weight: bold; border-color: var(--cyan); }
.pa-tabs button b { color: #ff9d35; margin-left: 4px; } .pa-tabs button.on b { color: #04121a; }
.pa { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; font-family: var(--font-mono); color: var(--fg);
  border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; background: rgba(255,255,255,.012); cursor: pointer; }
.pa:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--border)); border-left-color: var(--c); }
.pa.on { background: color-mix(in srgb, var(--c) 10%, transparent); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); border-left-color: var(--c); }
.pa-ic { color: var(--c); font-size: 14px; text-align: center; }
.pa-t b { display: block; color: var(--fg-bright); letter-spacing: 1px; font-size: 11px; } .pa-t small { color: var(--fg-dim); font-size: 10px; }
.pa-n { text-align: right; font-weight: bold; color: var(--c); font-size: 12px; white-space: nowrap; } .pa-n small { display: block; font-weight: normal; font-size: 10px; color: var(--fg-dim); }
.pa-soon { opacity: .5; cursor: default; } .pa-soon:hover { border-color: var(--border); }
/* UPS REFUNDS */
.rf-sec { color: var(--c); display: flex; align-items: center; gap: 6px; margin-top: 16px; cursor: default; } .rf-sec[onclick] { cursor: pointer; } .rf-sec b { color: var(--fg-bright); }
.rf-table td { vertical-align: middle; }
.rf-late { font-size: 11px; } .rf-late small { display: block; }
.rf-br { color: var(--fg-bright); }
.rf-cd { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 11px; }
.rf-bar { width: 64px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; display: inline-block; } .rf-bar i { display: block; height: 100%; background: var(--c); }
.rf-maybe td { opacity: .8; }
.rf-months { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 10px; }
.rf-months div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-size: 9px; color: var(--fg-dim); }
.rf-months i { display: block; width: 100%; background: var(--status-instock-bg); opacity: .8; border-radius: 2px 2px 0 0; }
.rf-chk { color: var(--cyan); cursor: pointer; }
.rf-steps { margin: 4px 0 0; padding-left: 18px; font-size: 10.5px; line-height: 1.7; color: var(--fg); } .rf-steps b { color: var(--fg-bright); }
.rf-table { table-layout: fixed; }
.rf-table td:nth-child(1) { width: 110px; } .rf-table td:nth-child(2) { width: 180px; } .rf-table td:nth-child(4) { width: 190px; } .rf-table td:nth-child(5) { width: 90px; } .rf-table td:nth-child(6) { width: 230px; }
.rf-table th:nth-child(1) { width: 110px; } .rf-table th:nth-child(2) { width: 180px; } .rf-table th:nth-child(4) { width: 190px; } .rf-table th:nth-child(5) { width: 90px; } .rf-table th:nth-child(6) { width: 230px; }
.rf-months i { max-width: 42px; }
@media (max-width: 800px) { .rf-table { table-layout: auto; } .rf-table td:nth-child(3), .rf-table th:nth-child(3) { display: none; } }
.pa-more { font-size: 10px; color: var(--fg-dim); padding: 4px 4px 0; line-height: 1.5; }
.pf-inv { color: #ffcf3d; font-size: 9px; letter-spacing: 1px; border: 1px solid rgba(255,207,61,.5); border-radius: 3px; padding: 0 4px; }
.inv-src { font-size: 9px; letter-spacing: .5px; color: #ffcf3d; border: 1px solid rgba(255,207,61,.45); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
button.inv-src { background: transparent; font-family: inherit; line-height: inherit; cursor: pointer; }
button.inv-src:hover { background: rgba(255,207,61,.12); border-color: #ffcf3d; }

/* v2.31.336: the favicon mark in the nav and on Status */
.nav-rail .logo .logo-mark { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 0 6px rgba(53,232,255,.45)); }
.sw-title { display: flex; align-items: center; gap: 14px; }
.sw-mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 0 10px rgba(53,232,255,.5)); animation: none; }
@media (max-width: 800px) { .sw-mark { width: 26px; height: 26px; } .sw-title { gap: 10px; } }

/* v2.31.337: nothing on hold -- waiting 2/3, a big 0 in the hold box */
@media (min-width: 1501px) { .oa-split.oa-noholds { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.oa-split.oa-noholds .oa-wait-panel .oa-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; }
.oa-split.oa-noholds .oa-wait-panel .oa-cells .oa-cell:nth-child(2) { border-top: 0; }
@media (max-width: 1500px) { .oa-split.oa-noholds .oa-hold-panel { order: 0; } }
.oa-zero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 120px; }
.oa-zero b { font-size: 78px; line-height: 1; font-weight: 800; color: var(--c); text-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent), 0 0 42px color-mix(in srgb, var(--c) 25%, transparent); }
.oa-zero span { font-size: 10px; letter-spacing: 2px; color: var(--c); margin-top: 8px; }
@media (max-width: 1500px) { .oa-zero { min-height: 90px; } .oa-zero b { font-size: 56px; } }
/* v2.31.337: ROUTING CHECK */
.pa-sep { height: 1px; background: var(--border); margin: 10px 0; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.rt-card { border: 1px solid var(--border); border-left: 3px solid var(--c); border-radius: 9px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255,255,255,.012); font-size: 11px; }
.rt-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .rt-acts { margin-left: auto; white-space: nowrap; } .rt-acts .ct-btn { margin-left: 4px; padding: 3px 9px; }
.rt-lines { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 150px) minmax(0, 2fr); gap: 5px 12px; align-items: center; }
.rt-t { color: var(--fg-bright); }
.rt-lines .ct-btn { padding: 2px 8px; margin-left: 6px; }
.rt-probs { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.rt-prob { font-size: 10.5px; color: var(--fg); margin: 3px 0; }
@media (max-width: 800px) { .rt-lines { grid-template-columns: minmax(0, 1fr); } .rt-h { flex-wrap: wrap; } }
/* v2.31.338: recheck result right under the button */
.vb-rcmsg { margin-top: 8px; }
.vb-rcmsg.err { color: #ff4f6d; border-color: rgba(255,79,109,.45); }
.vb-btns .ct-btn:disabled { opacity: .7; cursor: progress; }
/* v2.31.343: links to the vendor's own invoice (PDF / CSV / email) */
.vb-srcs { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.vb-src { font-size: 9px; letter-spacing: .5px; color: var(--cyan); border: 1px solid rgba(53,232,255,.35); border-radius: 4px; padding: 1px 5px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.vb-src:hover { background: rgba(53,232,255,.12); border-color: var(--cyan); }
.vb-srcs.big .vb-src { font-size: 10px; padding: 2px 7px; }
/* v2.31.344: mark a vendor invoice wholesale */
.vb-wsbtn { color: #35e8ff; border-color: rgba(53,232,255,.4); }
/* v2.31.346: "fine" needs a note; notes on any invoice */
.vb-finebar td { padding: 0 8px 10px !important; border-top: none !important; }
.vb-fine { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(51,255,136,.35); border-radius: 8px; background: rgba(51,255,136,.05); }
.vb-fine-l { font-size: 9.5px; letter-spacing: 1.5px; color: #33ff88; white-space: nowrap; }
.vb-fine-in { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--fg-bright); padding: 6px 8px; font: inherit; font-size: 12px; }
.vb-fine-in.need { border-color: #ff9d35; box-shadow: 0 0 0 1px #ff9d35; }
.vb-fine-go { color: #33ff88; border-color: rgba(51,255,136,.5); }
.vb-fine-go:disabled { opacity: .45; cursor: not-allowed; }
.vb-note { font-size: 11px; color: var(--fg-dim); margin-top: 3px; max-width: 520px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-notebox { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; }
.vb-notebox .vb-note-in { flex: 1; }
/* v2.31.349: WOULD HAVE ROUTED verdict line */
.cmp-verdict { margin: 4px 0 14px; padding: 8px 12px; border-left: 3px solid var(--c); border-radius: 4px; background: color-mix(in srgb, var(--c) 7%, transparent); font-size: 12px; }
.cmp-verdict b { color: var(--c); letter-spacing: .5px; }
/* v2.31.350: what a vendor's file carries */
.vb-kindnote { display: block; margin-top: 4px; color: var(--fg-dim); font-size: 10px; }
/* v2.31.354: invoice lines vs catalog (mockup B) */
.vb-lchip { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.vb-lchip.ok { color: #33ff88; border-color: rgba(51,255,136,.35); background: rgba(51,255,136,.06); }
.vb-lchip.up { color: #ff9d35; border-color: rgba(255,157,53,.5); background: rgba(255,157,53,.08); }
.vb-lchip.down { color: var(--cyan); border-color: rgba(53,232,255,.4); background: rgba(53,232,255,.06); }
.vb-lp-up { color: #ff9d35; font-weight: bold; }
.vb-lp-down { color: var(--cyan); font-weight: bold; }
.vb-lp-was { color: var(--fg-dim); font-size: 10px; }
.vb-lines tr.vb-lr-up td { background: rgba(255,157,53,.07); }
.vb-lines tr.vb-lr-up td:first-child { box-shadow: inset 3px 0 0 #ff9d35; }
/* v2.31.362: recent weeks + pinned + archive heatmap */
.vb-wk.pin { border-color: rgba(255,157,53,.55); }
.vb-pintag { font-size: 8.5px; letter-spacing: 1px; color: #ff9d35; border: 1px solid rgba(255,157,53,.5); border-radius: 999px; padding: 0 5px; margin-left: 3px; white-space: nowrap; display: inline-block; line-height: 1.5; vertical-align: 1px; }   /* v2.31.526: "1 OPEN" never wraps */
.vb-archbtn { border-style: dashed; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.vb-archbtn b { font-size: 12px; letter-spacing: 1.5px; }
.vb-hm { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.vb-hm-h { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: 1.5px; color: var(--fg-dim); margin-bottom: 8px; }
.vb-hm-year { font-size: 10px; letter-spacing: 2px; color: var(--cyan); margin: 8px 0 4px; }
.vb-hm-row { display: grid; gap: 4px; align-items: center; margin-bottom: 4px; }
.vb-hm-m { font-size: 10.5px; color: var(--fg-dim); letter-spacing: 1px; }
.vb-hm-tot { text-align: right; font-size: 11px; color: var(--fg); }
.vb-hm-cell { height: 26px; border-radius: 5px; border: 1px solid transparent; font: 10px var(--font-mono); cursor: pointer; color: #33ff88; }
.vb-hm-cell.g1 { background: rgba(51,255,136,.08); } .vb-hm-cell.g2 { background: rgba(51,255,136,.16); }
.vb-hm-cell.g3 { background: rgba(51,255,136,.26); } .vb-hm-cell.g4 { background: rgba(51,255,136,.38); color: #c9ffe0; }
.vb-hm-cell.o { background: rgba(255,157,53,.22); color: #ff9d35; }
.vb-hm-cell:hover { border-color: rgba(53,232,255,.5); }
.vb-hm-cell.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.vb-weeks { grid-auto-columns: minmax(150px, 1fr); }   /* v2.31.362: pinned + 4 recent + ARCHIVE fit in one row */

/* v2.31.365: ECN's lines sheet -- the invoice's rows in its drawer + the whole week in a panel */
.vb-sheet { margin: 10px 0 4px; }
.vb-sh-lab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); margin-bottom: 5px; }
.vb-sh-lab > span { letter-spacing: 0; font-size: 10.5px; }
.vb-sh-acts { margin-left: auto; display: flex; gap: 4px; }
.vb-sh-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 8px; max-width: 100%; }
.vb-sh-wrap.big { max-height: calc(100vh - 140px); }
.vb-sh { width: 100%; border-collapse: collapse; font-size: 11px; font-family: var(--font-mono); }
.vb-sh th, .vb-sh td { padding: 4px 7px; border-bottom: 1px solid rgba(28,39,64,.6); text-align: left; white-space: nowrap; }
.vb-sh th { position: sticky; top: 0; z-index: 1; background: var(--bg-panel-2); color: var(--fg-dim); font-weight: normal; font-size: 9.5px; letter-spacing: 1px; }
.vb-sh th.shp-r, .vb-sh td.shp-r { text-align: right; }
.vb-sh-n { color: #3a4562; text-align: right !important; width: 34px; border-right: 1px solid var(--border); }
.vb-sh-z { color: #3a4562; }
.vb-sh tr.hl td { background: rgba(53,232,255,.10); color: var(--fg-bright); }
.vb-sh tr.hl td.vb-sh-n { color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.vb-sh tr.hl2 td { background: rgba(53,232,255,.04); }
.vb-sh tr.top td { border-top: 1px solid rgba(53,232,255,.6); } .vb-sh tr.bot td { border-bottom: 1px solid rgba(53,232,255,.6); }
.vb-sh-dialog { width: min(1280px, 100%); }
.vb-sh-dialog .ml-dhead { flex-wrap: wrap; }
.vb-sh-hit { color: var(--cyan); }
.vb-sh-q { margin-left: auto; width: 210px; font-family: var(--font-mono); font-size: 11px; background: var(--bg-input, #070a12); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; }
.vb-sh-dialog .ct-btn { text-decoration: none; }
@media (max-width: 700px) { .vb-sh-q { width: 100%; margin-left: 0; } }
/* v2.31.366: leaderboard pills -- black text reads on every vendor color (yellow ECN, peach Honey's) */
.vl-row .vendor-pill, .vl-foot .vendor-pill { color: #000; text-shadow: none; }

/* v2.31.367: ECN crossdock order mail -- W# chip + what the stock follow-up said */
.ml-ref.xd { color: #ff79c6; border-color: rgba(255,121,198,.45); }
.ml-xd { display: inline-block; font-size: 10px; border-radius: 999px; padding: 1px 7px; margin-left: 4px; border: 1px solid var(--border); white-space: nowrap; }
.ml-xd.ok { color: #33ff88; border-color: rgba(51,255,136,.45); } .ml-xd.bad { color: #ff9d35; border-color: rgba(255,157,53,.55); } .ml-xd.wait { color: var(--fg-dim); }
.ml-xdbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; }
.ml-xdbox a { color: var(--cyan); cursor: pointer; }
.ml-xdnote { flex-basis: 100%; color: var(--fg); font-style: italic; font-size: 11px; }

/* v2.31.369: supplier sidebar -- LOW ONLY / ALL + find a supplier */
.pu-suptoggle .pu-showseg { flex: 1 1 100%; display: flex; }
.pu-suptoggle .pu-showseg button { flex: 1; white-space: nowrap; }
.pu-showseg button.on { background: rgba(53,232,255,.12); color: var(--cyan); }
.pu-supq { flex: 1 1 100%; font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-input, #070a12); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; }
.pu-supq:focus { outline: none; border-color: rgba(53,232,255,.5); }

/* v2.31.370: PO side panel -- LOW ONLY / ALL products from the supplier */
.pu-lowseg { display: flex; margin: 2px 0 8px; } .pu-lowseg button { flex: 1; white-space: nowrap; }
.pu-lowq { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.pu-lowdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.pu-lowon { color: #33ff88; font-size: 11px; text-align: right; }

/* v2.31.372: VENDOR LEADERBOARD → OUR SPEND */
.vl-sec { margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--title-yellow); font-weight: 700; }
.vl-sec span { color: var(--fg-dim); font-weight: normal; letter-spacing: .5px; font-size: 10.5px; }
.vl-sub { display: block; margin-top: 2px; color: var(--fg-dim); font-size: 10.5px; }
.vl-gap { display: inline-block; width: 18px; }

/* v2.31.373: VENDOR LEADERBOARD -- OUR SPEND / VENDOR RANKING tabs */
.vl-mode-title { color: var(--fg-bright); }
.vl-ctl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* v2.31.374: Cross Dock PO -- order it on ecn.com */
.xd-ecn-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xd-ecn { font-size: 11.5px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.xd-ecn.dim, .xd-ecn .dim, .xd-ecn-h .dim { color: var(--fg-dim); }
.xd-card { border: 1px solid rgba(255,207,61,.45); border-radius: 8px; padding: 10px; background: rgba(255,207,61,.04); }
.xd-kv { display: flex; justify-content: space-between; gap: 8px; } .xd-kv > span:first-child { color: var(--fg-dim); }
.xd-ok { color: #33ff88; } .xd-bad { color: #ff4f6d; } .xd-warn { color: #ffcf3d; }
.xd-small { font-size: 10.5px; }
.xd-go { width: 100%; margin-top: 6px; border-color: rgba(53,232,255,.6) !important; color: var(--cyan) !important; font-weight: bold; }
.xd-loc { width: 100%; border-collapse: collapse; font-size: 10.5px; margin: 4px 0; } .xd-loc th { color: var(--fg-dim); font-weight: normal; text-align: left; } .xd-loc td, .xd-loc th { padding: 2px 4px; border-bottom: 1px dashed var(--border); }
.xd-row { display: flex; gap: 6px; } .xd-in { flex: 1; font-family: var(--font-mono); font-size: 11.5px; background: var(--bg-input, #070a12); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
.xd-link { color: var(--cyan); cursor: pointer; font-size: 11px; }
.xd-tag { font-size: 9.5px; letter-spacing: .5px; border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.xd-tag.ok { color: #33ff88; border-color: rgba(51,255,136,.45); } .xd-tag.warn { color: #ffcf3d; border-color: rgba(255,207,61,.5); } .xd-tag.bad { color: #ff4f6d; border-color: rgba(255,79,109,.5); }
.xd-note { width: 100%; box-sizing: border-box; resize: vertical; margin-top: 2px; }
.xd-del { width: 100%; margin-top: 18px; color: #ff4f6d !important; border-color: rgba(255,79,109,.45) !important; }

/* v2.31.382: Settings → ECN ORDERING + simple send */
.xd-set-sec { font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.xd-tg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.xd-tg input { display: none; }
.xd-sw { width: 32px; height: 18px; border-radius: 999px; background: #1a2236; position: relative; margin-top: 1px; transition: background .15s; }
.xd-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #566b8f; transition: left .15s, background .15s; }
.xd-tg input:checked + .xd-sw { background: rgba(51,255,136,.25); } .xd-tg input:checked + .xd-sw::after { left: 16px; background: #33ff88; }
.xd-tg b { color: var(--fg-bright); font-weight: normal; font-size: 11px; letter-spacing: .5px; } .xd-tg small { display: block; color: var(--fg-dim); font-size: 10px; line-height: 1.45; margin-top: 2px; }
.xd-adv { border: 1px dashed rgba(255,207,61,.35); border-radius: 8px; padding: 2px 10px; margin-top: 10px; } .xd-adv .xd-tg { border-bottom: 0; }
.xd-adv-l { font-size: 9.5px; color: #ffcf3d; letter-spacing: 2px; margin-top: 6px; }
.xd-links { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 10.5px; }
.xd-steps div { font-size: 11px; padding: 1px 0; }
.mc-xd-need { border: 1px solid rgba(255,157,53,.55); background: rgba(255,157,53,.07); color: #ff9d35; border-radius: 8px; padding: 6px 9px; margin-bottom: 8px; font-size: 11px; cursor: pointer; }
.mc-xd-need b { color: var(--fg-bright); font-weight: normal; }

/* v2.31.384: ECN "Unlisted" (was "Exclusive") + the hand-set ★ EXCLUSIVE */
.badge.unlisted { background: transparent; color: #b388ff; border: 1px dashed #b388ff; }
.badge.xexcl { background: #ffcf3d; color: #2a1d00; }
.xstar-th { width: 26px; text-align: center !important; color: var(--fg-dim); }
.xstar-td { width: 26px; text-align: center; }
.xstar { font-size: 16px; color: #2a3550; cursor: pointer; user-select: none; line-height: 1; }
.xstar:hover { color: #ffcf3d; } .xstar.on { color: #ffcf3d; text-shadow: 0 0 8px rgba(255,207,61,.55); } .xstar.none { cursor: default; opacity: .4; }
.xhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.xstar-btn { font-family: var(--font-mono); font-size: 10.5px; background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.xstar-btn.on { color: #ffcf3d; border-color: rgba(255,207,61,.6); }

/* v2.31.388: cross dock POs -- P&L-style rows, orders (yellow #) with their items */
.xd-list .civ-card .civ-btab td { cursor: default; }
.xd-onum { color: #ffcf3d; text-decoration: underline; cursor: pointer; font-weight: bold; }
.xd-onum:hover { text-shadow: 0 0 8px rgba(255,207,61,.6); }
.xd-prog { width: 110px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; display: inline-block; vertical-align: middle; }
.xd-prog i { display: block; height: 100%; background: #ffcf3d; }
.civ-btab tr.xd-oh td { background: rgba(255,207,61,.05); border-top: 1px solid rgba(255,207,61,.18); }
.civ-btab tr.xd-oh td small { display: inline; margin-left: 8px; color: var(--fg-dim); font-size: 11px; }
.civ-btab td.xd-sku { color: var(--fg-bright); font-family: var(--font-mono); padding-left: 34px !important; }
.civ-btab td.xd-t { color: var(--fg-dim); }
.xd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.xd-title { font-size: 15px; }
.xd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 6px; }
.xd-tiles .shp-tile b { font-size: 17px; }
.xd-bar { margin: 6px 0 12px; font-size: 11px; color: var(--fg-dim); font-family: var(--font-mono); }
.xd-bar .xd-prog { width: 100%; height: 6px; margin-bottom: 4px; display: block; }
.xd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 4px; }
.xd-btns.one { grid-template-columns: 1fr; }
.xd-secr { letter-spacing: .5px; }
.xd-ph { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding: 6px 8px; font-size: 12px; background: rgba(255,207,61,.05); border-left: 3px solid #ffcf3d; border-radius: 0 6px 6px 0; }
.xd-ph small { color: var(--fg-dim); font-size: 11px; }
.xd-pl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 6px 0 6px 10px; border-bottom: 1px dashed var(--border); font-size: 12px; }
.xd-pl .s { color: var(--fg-bright); font-family: var(--font-mono); }
.xd-pl small { display: block; color: var(--fg-dim); font-size: 11px; }
.xd-pl .mono-num { white-space: nowrap; }
#crossdock-po-detail .xd-del { display: block; width: auto; margin-top: 18px; padding: 4px 0; background: none; border: 0 !important; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: #ff4d6d !important; cursor: pointer; text-align: left; }
#crossdock-po-detail .xd-del:hover { text-shadow: 0 0 8px rgba(255,77,109,.6); }

/* v2.31.389: shipments period switch, unmatched 3rd party boxes, Quantum View CSV drop */
.shp-days { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-left: 10px; vertical-align: middle; }
.shp-days button { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; padding: 4px 10px; color: var(--fg-dim); background: transparent; border: 0; cursor: pointer; }
.shp-days button:hover { color: var(--fg-bright); }
.shp-days button.on { background: var(--cyan); color: #04252b; font-weight: bold; }
.shp-um { display: grid; grid-template-columns: 70px 1.2fr 1fr 1.5fr 190px; gap: 12px; align-items: center; padding: 9px 12px; border-bottom: 1px dashed var(--border); font-size: 12px; border-left: 3px solid #ffcf3d; }
.shp-um small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.shp-um-who { color: var(--fg-bright); }
.shp-um-ref { display: block; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-um-act { justify-self: end; text-align: right; }
.shp-um-note { padding: 8px 12px 12px; font-size: 11px; }
.shp-lk { display: inline-flex; gap: 4px; margin-top: 4px; }
.shp-lk .pu-ie { width: 100px; }
.shp-lkerr { color: #ff4d6d; }
.shp-poref { color: #ffcf3d; font-weight: bold; }
.shp-qdrop { margin-top: 14px; }

/* v2.31.390: INCOMING · 3RD PARTY · ECN on one line */
.shp-tabs:has(#shp-tab-ecn) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.shp-tabs:has(#shp-tab-ecn) .shp-tab { white-space: nowrap; padding: 7px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }

/* v2.31.393: ignore boxes that aren't business */
.shp-um.ign { border-left-color: #566b8f; opacity: .7; }
.shp-personal { display: inline-block; font-size: 9.5px; letter-spacing: 1px; padding: 1px 6px; border-radius: 999px; color: #ff9d35; border: 1px solid rgba(255,157,53,.5); margin-left: 6px; vertical-align: 1px; }
.shp-ign { color: var(--fg-dim) !important; }
.shp-ignsec { margin-top: 18px; }

/* v2.31.394: the UFO drop zone (js/ufo.js) -- idle grazing cow, drag = beam + struggle, reading = shloop, done = burp */
.ufo-dz { position: relative; display: block; overflow: hidden; height: 172px; margin-bottom: 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px dashed rgba(53,232,255,.45); background: radial-gradient(ellipse at 50% 8%, rgba(53,232,255,.09), transparent 70%), rgba(53,232,255,.025);
  transition: border-color .2s, box-shadow .2s; font-family: var(--font-mono); }
.ufo-dz:hover { background-color: rgba(53,232,255,.05); }
.ufo-dz.hot, .ufo-dz.busy { border-style: solid; border-color: var(--cyan); box-shadow: 0 0 22px rgba(53,232,255,.35), inset 0 0 30px rgba(53,232,255,.08); }
.ufo-dz.ok { border-color: rgba(51,255,136,.5); }
.ufo-dz.busy { cursor: progress; }
.uz-stars i { position: absolute; width: 2px; height: 2px; background: var(--fg-bright); border-radius: 50%; opacity: .5; animation: uzTwinkle 2.2s infinite; }
.uz-ufo { position: absolute; top: 24px; left: 50%; width: 70px; height: 26px; margin-left: -35px; z-index: 4; animation: uzHover 2.6s ease-in-out infinite; }
.uz-dome { position: absolute; left: 20px; top: -11px; width: 30px; height: 18px; border-radius: 16px 16px 4px 4px; background: rgba(53,232,255,.18); border: 1px solid var(--cyan); overflow: hidden; }
.uz-alien { position: absolute; left: 9px; top: 5px; width: 11px; height: 10px; border-radius: 6px 6px 3px 3px; background: #1df08a; }
.uz-alien::before, .uz-alien::after { content: ""; position: absolute; top: 3px; width: 3px; height: 4px; border-radius: 50%; background: #04121a; }
.uz-alien::before { left: 2px; } .uz-alien::after { right: 2px; }
.uz-disc { position: absolute; left: 0; right: 0; top: 4px; height: 14px; border-radius: 50%; background: linear-gradient(90deg,#0e2a33,#1f5d6b,#0e2a33); border: 1px solid var(--cyan); box-shadow: 0 0 14px rgba(53,232,255,.55); }
.uz-lights i { position: absolute; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: #ffe045; animation: uzBlink 1s infinite; }
.uz-lights i:nth-child(1) { left: 12px; } .uz-lights i:nth-child(2) { left: 24px; animation-delay: .25s; } .uz-lights i:nth-child(3) { left: 36px; animation-delay: .5s; } .uz-lights i:nth-child(4) { left: 48px; animation-delay: .75s; }
.uz-beam { position: absolute; top: 42px; left: 50%; width: 150px; margin-left: -75px; height: 82px; clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(53,232,255,.5), rgba(53,232,255,.06)); opacity: 0; transition: opacity .25s; z-index: 2; }
.uz-beam::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.12) 6px 7px); animation: uzRise .5s linear infinite; }
.ufo-dz.hot .uz-beam, .ufo-dz.busy .uz-beam { opacity: 1; }
.uz-ground { position: absolute; left: 0; right: 0; bottom: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(51,255,136,.35), transparent); }
.uz-grass i { position: absolute; bottom: 48px; width: 2px; height: 5px; background: rgba(51,255,136,.5); border-radius: 1px; transform-origin: bottom; animation: uzSway 2s ease-in-out infinite; }
.uz-cow { position: absolute; left: 50%; bottom: 47px; width: 40px; height: 29px; margin-left: -20px; z-index: 3; transform-origin: 50% 50%; }
.uz-cow svg { width: 100%; height: 100%; overflow: visible; display: block; }
.uz-cow .uc-head { transform-origin: 12px 12px; animation: uzGraze 3s ease-in-out infinite; }
.uz-cow .uc-tail { transform-origin: 41px 10px; animation: uzSwish 1.2s ease-in-out infinite; }
.uz-txt { position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center; z-index: 5; }
.uz-txt b { display: block; color: var(--fg-bright); letter-spacing: 2px; font-size: 11.5px; font-weight: normal; }
.uz-txt small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uz-txt small u { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed currentColor; }
.ufo-dz.ok .uz-txt b { color: var(--status-instock-bg); }
.uz-bub { position: absolute; z-index: 6; font-size: 10px; color: #04121a; background: var(--fg-bright); padding: 2px 6px; border-radius: 8px; opacity: 0; white-space: nowrap; pointer-events: none; }
.uz-bub::after { content: ""; position: absolute; left: 6px; bottom: -4px; border: 4px solid transparent; border-top-color: var(--fg-bright); border-bottom: 0; }
.uz-nope { left: calc(50% + 18px); bottom: 74px; }
.uz-later { left: calc(50% + 14px); bottom: 92px; }
.uz-burp { position: absolute; left: calc(50% + 34px); top: 18px; font-size: 10px; color: #ffe045; opacity: 0; z-index: 6; }
.uz-sweat i { position: absolute; width: 4px; height: 6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--cyan); opacity: 0; z-index: 6; }
.uz-sweat i:nth-child(1) { left: calc(50% - 24px); bottom: 78px; } .uz-sweat i:nth-child(2) { left: calc(50% + 22px); bottom: 82px; }
.uz-hay i { position: absolute; top: 46px; left: calc(50% - 4px); width: 8px; height: 2px; background: #ffe045; border-radius: 1px; opacity: 0; z-index: 5; }
.uz-hay i:nth-child(1) { --x: -30px; --r: -50deg; } .uz-hay i:nth-child(2) { --x: 26px; --r: 40deg; } .uz-hay i:nth-child(3) { --x: -8px; --r: 90deg; }
/* dragging over: hooves dug in */
.ufo-dz.hot .uz-cow { animation: uzStruggle .5s ease-in-out infinite; }
.ufo-dz.hot .uz-cow .uc-head { animation: none; }
.ufo-dz.hot .uz-nope { opacity: 1; }
.ufo-dz.hot .uz-sweat i { animation: uzSweat .9s infinite; } .ufo-dz.hot .uz-sweat i:nth-child(2) { animation-delay: .3s; }
/* the cow going up (plays out even when the upload is already done): struggle, then stretched up the beam -- "later, nerds" */
.ufo-dz.abduct { border-style: solid; border-color: var(--cyan); box-shadow: 0 0 22px rgba(53,232,255,.35), inset 0 0 30px rgba(53,232,255,.08); }
.ufo-dz.abduct .uz-beam { opacity: 1; transition: none; }
.ufo-dz.abduct .uz-cow { animation: uzShloop 2.4s ease-in var(--uoff, 0ms) forwards; }
.ufo-dz.abduct .uz-cow .uc-head { animation: none; }
.ufo-dz.abduct .uz-later { animation: uzLater 2.4s var(--uoff, 0ms) forwards; }
.ufo-dz.abduct .uz-sweat i { animation: uzSweat .9s var(--uoff, 0ms) 2; }
.ufo-dz.abduct .uz-alien { animation: uzAlien 2.4s var(--uoff, 0ms) forwards; }
/* still reading after the cow is up: beam stays on, cow gone */
.ufo-dz.busy .uz-cow { opacity: 0; }
.ufo-dz.busy .uz-alien { background: #fff; }
.ufo-dz.done .uz-alien { animation: uzAlien 1.2s var(--uoff, 0ms) reverse both; }
/* done: the UFO wobbles and burps hay; a new cow wanders back in */
.ufo-dz.done .uz-ufo { animation: uzZip 8s ease-in-out var(--uoff, 0ms) 1 both; }   /* v2.31.399: burp, zip off, zip back in */
.ufo-dz.done .uz-hay i { animation: uzHay 1.3s ease-out var(--uoff, 0ms) 1 both; }
.ufo-dz.done .uz-burp { animation: uzBurp 2.2s var(--uoff, 0ms) 1 both; }
.ufo-dz.done .uz-cow { animation: uzBack 8s var(--uoff, 0ms) both; }
@keyframes uzTwinkle { 50% { opacity: .08; } }
@keyframes uzHover { 50% { transform: translateY(-4px); } }
@keyframes uzBlink { 50% { opacity: .15; } }
@keyframes uzRise { to { background-position: 0 -7px; } }
@keyframes uzSway { 50% { transform: rotate(14deg); } }
@keyframes uzGraze { 0%, 55%, 100% { transform: rotate(0); } 65%, 85% { transform: rotate(-14deg) translateY(3px); } }
@keyframes uzSwish { 50% { transform: rotate(22deg); } }
@keyframes uzStruggle { 0%, 100% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-3px,-1px) rotate(7deg); } 75% { transform: translate(3px,-2px) rotate(-7deg); } }
@keyframes uzSweat { 0% { opacity: 0; transform: translate(0,0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0,10px); } }
@keyframes uzShloop { 0% { transform: none; } 8% { transform: translate(-3px,0) rotate(7deg); } 16% { transform: translate(3px,-2px) rotate(-8deg); } 24% { transform: translate(-3px,-4px) rotate(9deg); }
  32% { transform: translate(0,-8px) rotate(-180deg); } 55% { transform: translate(0,-30px) rotate(-180deg) scale(.8,1.25); }
  85% { transform: translate(0,-62px) rotate(-180deg) scale(.35,1.7); opacity: 1; } 95%, 100% { transform: translate(0,-74px) rotate(-180deg) scale(.08,2); opacity: 0; } }
@keyframes uzLater { 0%, 28% { opacity: 0; transform: translateY(4px); } 34%, 70% { opacity: 1; transform: translateY(-4px); } 85%, 100% { opacity: 0; } }
@keyframes uzAlien { 0%, 88% { background: #1df08a; } 92%, 100% { background: #ffffff; } }
@keyframes uzWobble { 0% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.06); } 55% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes uzHay { 0% { opacity: 0; transform: translate(0,0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), 46px) rotate(var(--r)); } }
@keyframes uzBurp { 0%, 8% { opacity: 0; transform: translateY(4px); } 20%, 70% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes uzBack { 0%, 70% { opacity: 0; transform: translateX(-150px); } 71% { opacity: 1; } 88%, 100% { opacity: 1; transform: translateX(0); } }
/* the UFO after the cow is in: wobble + burp, zip off to the right, gone a few seconds, zip back from the left and settle -- ends exactly where idle starts */
@keyframes uzZip { 0% { transform: none; opacity: 1; } 4% { transform: rotate(-8deg) scale(1.06); } 9% { transform: rotate(6deg); } 13% { transform: none; }
  24% { transform: translateX(-8px) rotate(-4deg); } 30% { transform: translateX(300px) skewX(-25deg) scaleX(1.4); opacity: 1; } 31% { opacity: 0; transform: translateX(300px); }
  56% { opacity: 0; transform: translateX(-300px); } 57% { opacity: 1; transform: translateX(-300px) skewX(25deg) scaleX(1.4); }
  63% { transform: translateX(10px) skewX(-6deg); } 66% { transform: translateX(-4px); } 69%, 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ufo-dz *, .ufo-dz *::after { animation: none !important; } .ufo-dz.busy .uz-cow, .ufo-dz.abduct .uz-cow { opacity: 0; } }
.uz-hotb { display: none !important; }
.ufo-dz.hot:not(.busy) .uz-hotb { display: block !important; color: var(--cyan) !important; }
.ufo-dz.hot:not(.busy) .uz-b { display: none; }

/* v2.31.395: newest UPS invoice under the drop zone */
.civ-lastinv { margin: -4px 0 12px; text-align: center; font-size: 10.5px; letter-spacing: 1px; color: var(--fg-dim); }
.civ-lastinv b { color: var(--fg-bright); font-weight: normal; letter-spacing: .5px; }
.civ-lastinv span { letter-spacing: .3px; }

/* v2.31.397: passphrase dots without a password field (keeps Safari's password popups away) */
.nxi-masked { -webkit-text-security: disc; }
.nxi-masked::placeholder { -webkit-text-security: none; }
.civ-upslink { display: inline-flex; vertical-align: -2px; margin-left: 4px; color: var(--cyan); }
.civ-upslink:hover { filter: drop-shadow(0 0 4px rgba(53,232,255,.7)); }

/* v2.31.401: cancelled in Shopify -> cancelled in Nexus */
.nx-pill.nx-can { color: var(--danger); border-color: var(--danger); }

/* v2.31.402: P&L -> PROFIT (js/opnl.js) */
.pa-tabs.pa-tabs3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-tabs.pa-tabs3 button { padding: 8px 4px; letter-spacing: 1px; white-space: nowrap; }
.op-trk { width: 230px; }
.op-trk .shp-trlbl span { font-size: 8.5px; letter-spacing: .5px; }
.op-trk .shp-trlbl .op-pend { color: #ff9d35; }
.op-onum { color: #ffcf3d; text-decoration: underline; font-weight: bold; cursor: pointer; }
.opnl-table td small { display: block; }
.op-from .vendor-pill { margin: 1px 2px 1px 0; }
.op-pr { font-size: 14.5px; font-weight: bold; }
.op-pos { color: var(--status-instock-bg); } .op-neg { color: #ff4f6d; } .op-est { font-style: italic; opacity: .85; }
.op-flagc { color: #ff9d35; white-space: nowrap; }
.op-sumtxt { margin-left: 10px; } .op-sumtxt a { color: var(--cyan); cursor: pointer; }
.op-refresh { margin-left: 10px; color: var(--cyan); cursor: pointer; display: inline-block; }
.op-refresh.spin { animation: inc-spin 1s linear infinite; }
.op-sec { font-size: 10px; letter-spacing: 2px; color: var(--fg-dim); margin: 0 0 6px; }
.op-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; }
.op-col { padding: 12px 18px; border-right: 1px dashed var(--border); min-width: 0; } .op-col:last-child { border-right: 0; }
.op-l { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(28,39,64,.7); }
.op-l > span { min-width: 0; } .op-l small { display: block; color: var(--fg-dim); font-size: 10.5px; }
.op-l b { font-weight: normal; font-family: var(--font-mono); white-space: nowrap; }
.op-l.tot { border-bottom: 0; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-weight: bold; }
.op-l.op-sub { color: var(--fg-dim); font-size: 11px; padding: 2px 0 2px 8px; border-bottom: 0; }
.op-l.op-warn span, .op-l.op-warn b { color: #ff9d35; }
.op-srcs { margin-top: 8px; }
.op-src { display: inline-flex; align-items: center; font-size: 10px; letter-spacing: .5px; padding: 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); text-decoration: none; margin: 2px 4px 2px 0; white-space: nowrap; cursor: pointer; }
.op-src:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.op-box { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.op-boxh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 11px; }
.op-tag { font-size: 9px; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; font-weight: bold; white-space: nowrap; }
.op-tag.inv { background: rgba(51,255,136,.15); color: var(--status-instock-bg); } .op-tag.est { background: rgba(255,207,61,.15); color: #ffcf3d; } .op-tag.pend { background: rgba(255,157,53,.15); color: #ff9d35; }
.op-wf { display: flex; height: 14px; border-radius: 4px; overflow: hidden; margin: 12px 18px 4px; background: #141c33; }
.op-wf i { display: block; height: 100%; }
.op-wfl { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 18px 4px; font-size: 10.5px; color: var(--fg-dim); }
.op-wfl span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 5px; }
.op-flag { color: #ff9d35; font-size: 11px; margin-top: 6px; }
.op-why { padding: 10px 18px 14px; font-size: 11px; color: var(--fg-dim); border-top: 1px dashed var(--border); }
.op-why b { color: #ff9d35; font-weight: normal; } .op-why.op-ok { color: var(--status-instock-bg); }
.op-big { display: flex; gap: 18px; align-items: flex-end; margin: 6px 0 10px; }
.op-big div span { display: block; font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); } .op-big div b { font-size: 22px; font-family: var(--font-mono); }
.op-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 6px; }
.op-tile { text-align: left; background: transparent; border: 1px solid var(--border); border-top: 2px solid var(--tc); border-radius: 6px; padding: 8px; font-family: var(--font-mono); cursor: pointer; color: var(--fg); }
.op-tile b { display: block; font-size: 18px; color: var(--fg-bright); } .op-tile span { font-size: 9px; letter-spacing: 1px; color: var(--tc); font-weight: 800; } .op-tile small { display: block; font-size: 10px; color: var(--fg-dim); margin-top: 2px; }
.op-tile:hover, .op-tile.on { background: color-mix(in srgb, var(--tc) 10%, transparent); }
.op-note { font-size: 10.5px; color: var(--fg-dim); line-height: 1.5; margin-bottom: 4px; }
@media (max-width: 1400px) { .op-grid { grid-template-columns: 1fr 1fr; } .op-grid .op-col:nth-child(2) { grid-column: 1 / -1; order: 3; border-right: 0; border-top: 1px dashed var(--border); } }

/* ---------- v2.31.403: Contacts -- list in the side panel (bento), card with tabs in the main area ---------- */
.ct-panel { padding: 12px 12px 24px; overflow-y: auto; }
.cr-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 4px; }
.cr-bento .shp-tile { background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 8px 9px 6px; min-width: 0; }
.cr-bento .shp-tile b { font-size: 19px; }
.cr-bento .shp-tile.on { background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); }
.cr-bento .shp-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-only { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 1px; color: var(--fg-dim); padding: 10px 4px 2px; text-transform: uppercase; }
.cr-only button { background: transparent; border: 0; color: var(--cyan); font: inherit; cursor: pointer; letter-spacing: .5px; }
.cr-list { margin-top: 4px; }
.cr-grp { font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); padding: 12px 6px 4px; }
.cr-lrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; padding: 7px 6px; border-bottom: 1px dashed var(--border); font-size: 12px; cursor: pointer; align-items: center; }
.cr-lrow:hover { background: rgba(255,255,255,.025); }
.cr-lrow.on { background: rgba(53,232,255,.07); box-shadow: inset 3px 0 0 var(--cyan); }
.cr-lrow .cr-nm { min-width: 0; }
.cr-lrow .cr-nm b { display: block; font-weight: normal; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-lrow small { display: block; color: var(--fg-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-lrow .n { font-size: 10px; color: var(--fg-dim); text-align: right; white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.cr-star { background: transparent; border: 0; padding: 0; cursor: pointer; color: #2a3654; font-size: 13px; line-height: 1; }
.cr-star.on { color: #ffcf3d; text-shadow: 0 0 6px rgba(255,207,61,.5); }
.cr-star:hover { color: #ffcf3d; }
.cr-more { text-align: center; padding: 12px 0 4px; font-size: 11px; } .cr-more a { color: var(--cyan); cursor: pointer; }

#ct-card { border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.008); min-height: 300px; }
#ct-card > .ct-empty { padding: 30px; }
.cx-head { display: flex; align-items: flex-start; gap: 16px; padding: 14px 18px 10px; }
.cx-hl { flex: 1; min-width: 0; }
.cx-name.ct-title-ie { font-size: 20px !important; font-weight: bold; letter-spacing: .5px; color: var(--fg-bright); width: 100%; max-width: 560px; margin: 0; }
.cx-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.cx-tags .ct-brand, .cx-tags .ct-tag { margin: 0; }
.cx-chipl { display: inline-flex; gap: 5px; align-items: center; font-size: 10.5px; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c); cursor: pointer; white-space: nowrap; }
.cx-chipl i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.cx-hbtns { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cx-hbtns a.pu-btn { text-decoration: none; display: inline-block; }
#ct-card .ct-head-status { margin: -4px 18px 6px; }
.cx-tabs { display: flex; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.cx-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--fg-dim); padding: 10px 0 9px; cursor: pointer; white-space: nowrap; }
.cx-tabs button:hover { color: var(--fg-bright); }
.cx-tabs button.on { color: var(--cyan); border-bottom-color: var(--cyan); }
.cx-body { padding: 14px 18px 18px; }
#ct-card > .ct-msg { margin: 0 18px 12px; }
.cx-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.cx-stats .shp-tile { background: transparent; color: inherit; font: inherit; min-width: 0; }
.cx-stats .shp-tile:not(.click) { cursor: default; }
.cx-grid { display: grid; gap: 12px; }
.cx-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cx-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; position: relative; overflow: hidden; background: rgba(255,255,255,.012); min-width: 0; }
.cx-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bc); }
.cx-card .pu-sec { margin-top: 0; padding-top: 0; border-top: 0; display: flex; justify-content: space-between; gap: 8px; }
.cx-act, .cx-act a { color: var(--cyan); letter-spacing: .5px; cursor: pointer; font-weight: normal; }
.cx-card .pu-sec .cx-act, .cb-grp .cx-act { margin-left: auto; }
.cx-more { font-size: 11px; padding-top: 6px; } .cx-more a, .ct-pad a, .cx-pogo a, .cx-empty a { color: var(--cyan); cursor: pointer; }
.cx-more-l { padding-top: 12px; }
.cx-person { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.cx-person:last-child { border-bottom: 0; }
.cx-person small { display: block; color: var(--fg-dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-person a, .cb-kv a { color: var(--cyan); text-decoration: none; }
.cx-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: bold; color: #04121a; background: var(--c); }
.cx-po { font-size: 9px; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; background: rgba(255,207,61,.15); color: #ffcf3d; font-weight: bold; }
.cx-mbtn { font-family: var(--font-mono); font-size: 10px; border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; color: var(--fg-dim); background: transparent; cursor: pointer; }
.cx-mbtn:hover { color: var(--fg-bright); border-color: var(--fg-dim); }
.cx-mbtns { display: flex; gap: 4px; }
.cx-conn { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.cx-conn:last-child { border-bottom: 0; }
.cx-conn small { display: block; color: var(--fg-dim); font-size: 10.5px; }
.cx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); margin: auto; }
.cx-login { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
.cx-login a { color: inherit; text-decoration: none; } .cx-login a b { font-weight: normal; color: var(--fg-bright); }
.cx-login small { display: block; color: var(--fg-dim); font-size: 10.5px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 9.5px; color: #04121a; font-weight: bold; background: var(--c); }
.cx-ext { color: var(--cyan); text-decoration: none; margin-left: 4px; }
.cx-mini { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.cx-mini small { color: var(--fg-dim); }
.cx-mini.click, .cx-table tr.click { cursor: pointer; } .cx-mini.click:hover, .cx-table tr.click:hover td { background: rgba(255,255,255,.025); }
.cx-trk { color: var(--cyan); text-decoration: none; font-family: var(--font-mono); }
.cx-pogo { margin-top: 8px; } .cx-pogo b { color: var(--fg-bright); font-weight: normal; }
.cx-addrtxt { font-size: 12px; line-height: 1.5; }
.cx-empty { padding: 22px 22px 26px; }
.cx-empty-h { font-size: 14px; color: var(--fg-bright); margin-bottom: 14px; }
.cx-empty .ct-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 14px; max-width: 640px; }
.cb-grp { display: flex; gap: 8px; font-size: 10px; letter-spacing: 2px; color: var(--fg-dim); margin: 18px 0 8px; }
.cb-grp0 { margin-top: 0; }
.cb-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cb-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cb-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cb-pcard { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.cb-pcard .cx-av { width: 40px; height: 40px; font-size: 14px; }
.cb-pcard b { font-size: 14px; color: var(--fg-bright); font-weight: normal; }
.cb-pcard > div > small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 2px; }
.cb-kv { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 4px 10px; font-size: 12px; margin-top: 8px; }
.cb-kv > span:nth-child(odd) { color: var(--fg-dim); } .cb-kv a { overflow: hidden; text-overflow: ellipsis; }
.cb-note { color: var(--fg); }
.cb-lk { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.cb-lk .cx-ico { width: 32px; height: 32px; font-size: 11px; border-radius: 8px; }
.cb-lkn { min-width: 0; } .cb-lk b { color: var(--fg-bright); font-weight: normal; }
.cb-lk small { display: block; color: var(--fg-dim); font-size: 11px; font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-creds { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.cb-creds code { font-size: 11px; border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; color: var(--fg); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-creds a, .cb-creds button { font-family: var(--font-mono); font-size: 10.5px; color: var(--cyan); cursor: pointer; background: transparent; border: 0; padding: 2px 3px; text-decoration: none; white-space: nowrap; }
.cb-creds button.ct-eye { display: inline-flex; align-items: center; color: var(--fg-dim); } .cb-creds button.ct-eye:hover { color: var(--cyan); }
.cb-creds-l { justify-content: flex-start; margin-top: 8px; }
.cb-mtile { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-width: 0; }
.cb-mtile .th { height: 96px; display: grid; place-items: center; font-size: 32px; color: var(--c); text-decoration: none; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }
.cb-mtile .bd { padding: 10px 12px; font-size: 12px; } .cb-mtile .bd b { font-weight: normal; color: var(--fg-bright); }
.cb-mtile .bd small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-mact { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cb-mact button { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; } .cb-mact button:hover { color: var(--cyan); }
.cb-mform { grid-column: span 2; }
.cb-filt { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cb-fchip { cursor: pointer; font-family: var(--font-mono); opacity: .55; }
.cb-fchip.on, .cb-fchip:hover { opacity: 1; }
.cb-tl { position: relative; padding-left: 22px; }
.cb-tl::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: #1c2740; }
.cb-ev { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; align-items: center; }
.cb-ev::before { content: ""; position: absolute; left: -20px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.cb-ev small { display: block; color: var(--fg-dim); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-day { font-size: 10px; letter-spacing: 2px; color: var(--fg-dim); margin: 14px 0 2px; }
.cb-day:first-child { margin-top: 2px; }
#ct-card .ct-form { max-width: 760px; padding: 4px 18px 18px; }
#ct-card > .ct-head { padding: 14px 18px 0; }
#ct-card .ct-link-edit { margin-bottom: 8px; }
@media (max-width: 1250px) { .cx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cb-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .cx-grid2, .cb-2, .cb-3 { grid-template-columns: minmax(0, 1fr); } .cx-head { flex-direction: column; } .cx-hbtns { margin-left: 0; justify-content: flex-start; } .cb-lk { grid-template-columns: 34px minmax(0, 1fr); } .cb-lk .cb-creds { grid-column: 1 / -1; justify-content: flex-start; } .cb-mform { grid-column: auto; } }
/* v2.31.404: PROFIT row fulfilled in Shopify (not shipped in Nexus) */
.op-shopf { font-size: 8.5px; letter-spacing: 1px; font-weight: bold; padding: 0 5px; border-radius: 3px; color: #95e35d; border: 1px solid rgba(149,227,93,.5); }

/* ---------- v2.31.405: PROFIT breakdown -- one table grouped by vendor + totals tiles ---------- */
:root { --op-paid: #33ff88; --op-cost: #f2384f; --op-kept: #35e8ff; --op-ship: #b388ff; --op-fee: #ff9d35; }
.op-tiles5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px 18px 2px; }
.op-tiles5 > div { border: 1px solid var(--border); border-top: 2px solid var(--c); border-radius: 7px; padding: 7px 10px; min-width: 0; }
.op-tiles5 span { display: block; font-size: 9px; letter-spacing: 1.3px; color: var(--c); font-weight: 800; }
.op-tiles5 b { display: block; font-size: 17px; color: var(--fg-bright); font-family: var(--font-mono); margin-top: 2px; }
.op-tiles5 small { display: block; font-size: 10.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-tbl { padding: 10px 18px 4px; overflow-x: auto; }
.op-mt { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: auto; }
.civ-pnl .op-mt td { cursor: default; white-space: normal; }
.op-mt th { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); font-weight: normal; position: static; background: transparent; }
.op-mt .num { text-align: right; white-space: nowrap; font-family: var(--font-mono); }
.op-mt td { padding: 6px 10px; border-bottom: 1px dashed rgba(28,39,64,.8); vertical-align: top; background: transparent; }
/* v2.31.492: (removed) a hover rule here wiped the box header / column tints on mouse-over -- rows inside an opened order no longer react at all */
.op-mt td small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.op-mt th.op-hp { color: var(--op-paid); border-bottom: 2px solid var(--op-paid); }
.op-mt th.op-hc { color: var(--op-cost); border-bottom: 2px solid var(--op-cost); }
.op-mt th.op-hk { color: var(--op-kept); border-bottom: 2px solid var(--op-kept); }
.op-mt td.op-p { color: var(--op-paid); background: rgba(51,255,136,.045); }
.op-mt td.op-co { color: var(--op-cost); background: rgba(255,107,138,.05); }
.op-mt td.op-k { color: var(--op-kept); background: rgba(53,232,255,.045); }
.op-mt td.op-k.neg, .op-mt .op-k.neg { color: #ff4f6d; }
.op-mt .op-k { color: var(--op-kept); }
.op-mt td.op-co.op-s, .op-mt .op-s { color: var(--op-ship); }
.op-mt td.op-co.op-f, .op-mt .op-f { color: var(--op-fee); }
.op-mt .op-warn { color: #ff9d35; }
.op-dim { color: var(--fg-dim); }
.op-mt tr.op-sub td { font-size: 11.5px; color: var(--fg-dim); }
.op-mt tr.op-sub td:first-child { padding-left: 22px; }
.op-mt tr.op-warnr td { color: #ff9d35; } .op-mt tr.op-warnr b { font-weight: normal; }
.op-mt tr.op-btot td { border-top: 1px solid var(--border); border-bottom: 0; font-weight: bold; }
.op-mt tr.op-gh td { background: color-mix(in srgb, var(--vc) 10%, transparent); border-top: 1px solid color-mix(in srgb, var(--vc) 40%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--vc) 25%, transparent); padding: 7px 10px; vertical-align: middle; }
.op-mt tr.op-gh td:first-child { box-shadow: inset 4px 0 0 var(--vc); }
.op-mt tr.op-gh .op-src { margin: 0 0 0 4px; }
.op-ghsrc { margin-left: 4px; }
.op-nspill { background: #566b8f; color: #04121a; }
.op-mt tr.op-grand td { border-top: 2px solid var(--border); border-bottom: 0; font-size: 13.5px; font-weight: bold; padding: 9px 10px; }
.op-flags { padding: 0 18px; }
.op-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 18px 10px; font-size: 10.5px; color: var(--fg-dim); }
.op-legend span[style]::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.op-pager { padding: 14px 0 6px; }
@media (max-width: 1100px) { .op-tiles5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {   /* the phone "tables -> cards" + PO-card rules must not reach the nested breakdown table */
  .products-scroll table.op-mt { display: table !important; width: 100%; }
  .products-scroll .op-mt thead { display: table-header-group !important; }
  .products-scroll .op-mt tbody { display: table-row-group !important; }
  .products-scroll .op-mt tbody tr, .products-scroll .op-mt thead tr { display: table-row !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; }
  .products-scroll .op-mt td, .products-scroll .op-mt th { display: table-cell !important; grid-area: auto !important; justify-self: auto !important; font-size: 11px !important;
    padding: 5px 4px !important; border: 0 !important; border-bottom: 1px dashed rgba(28,39,64,.8) !important; }
  .products-scroll .op-mt th { font-size: 8px !important; letter-spacing: .3px; }
  .products-scroll .op-mt td::before { content: none !important; }
  .products-scroll .op-mt td.op-p { background: rgba(51,255,136,.045) !important; color: var(--op-paid) !important; }
  .products-scroll .op-mt td.op-co { background: rgba(255,107,138,.05) !important; color: var(--op-cost) !important; }
  .products-scroll .op-mt td.op-co.op-s { color: var(--op-ship) !important; } .products-scroll .op-mt td.op-co.op-f { color: var(--op-fee) !important; }
  .products-scroll .op-mt td.op-k { background: rgba(53,232,255,.045) !important; color: var(--op-kept) !important; }
  .products-scroll .op-mt td.op-k.neg { color: #ff4f6d !important; }
  .op-tbl { overflow-x: hidden; }
  .products-scroll .op-mt tr.op-gh td { background: color-mix(in srgb, var(--vc) 10%, transparent) !important; border-top: 1px solid color-mix(in srgb, var(--vc) 40%, transparent) !important; }
  .products-scroll .op-mt tr.op-btot td { border-top: 1px solid var(--border) !important; font-weight: bold; }
  .products-scroll .op-mt tr.op-grand td { border-top: 2px solid var(--border) !important; font-weight: bold; font-size: 12px !important; }
  .products-scroll .op-mt tr.op-sub td:first-child { padding-left: 8px !important; }
}
@media (max-width: 700px) { .op-tiles5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .products-scroll .op-mt th:nth-child(2), .products-scroll .op-mt tr:not(.op-gh) td:nth-child(2), .products-scroll .op-mt th:nth-child(6), .products-scroll .op-mt tr:not(.op-gh) td:nth-child(6) { display: none !important; } .op-tbl { padding: 8px 6px 4px; } }
/* v2.31.406: PROFIT -- sortable headers + the box's shipping method pill */
.opnl-table th.civ-sort { cursor: pointer; user-select: none; }
.opnl-table th.civ-sort:hover, .opnl-table th.civ-sort.on { color: var(--cyan); }
.op-msort { color: inherit; cursor: pointer; } .op-msort:hover, .op-msort.on { color: var(--cyan); }
.op-mpill { margin-left: 2px; }
/* v2.31.407: Contacts -- website favicons */
.ct-fav { display: inline-block; object-fit: contain; vertical-align: middle; }
.cr-fav { width: 14px; height: 14px; border-radius: 3px; margin: -2px 6px 0 0; }
.ct-favslot.cr-fav { display: none; }
.cx-favwrap { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.04); display: grid; place-items: center; overflow: hidden; margin-top: 2px; text-decoration: none; }
.cx-favwrap:hover { border-color: var(--cyan); box-shadow: 0 0 10px rgba(53,232,255,.25); }
.cx-fav { width: 26px; height: 26px; }
.ct-favslot.cx-fav { width: auto; height: auto; }
.cx-favph { font-size: 12px; font-weight: bold; color: var(--fg-dim); letter-spacing: .5px; }
.cx-ico.cx-icof { background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); }
.cx-ico .ct-fav { width: 70%; height: 70%; }
.cb-mfav { width: 14px; height: 14px; border-radius: 3px; margin: -2px 6px 0 0; }
.ct-favslot.cb-mfav, .ct-favslot.cx-webfav { display: none; }
.cx-webfav { width: 14px; height: 14px; border-radius: 3px; margin: -2px 4px 0 0; }
.cx-ext { display: inline-flex; align-items: center; white-space: nowrap; }
.ct-ie-web { display: flex; align-items: center; gap: 4px; }
/* v2.31.408: cross dock ECN -- Orders' PROCESS buttons (click twice) + tidy check card */
.xd-ecn .xd-act { display: block; width: 100%; margin-top: 8px; padding: 9px 10px; }
.xd-ecn .xd-act .stat-value { font-size: 12px; letter-spacing: 1.5px; }
.xd-ecn .xd-act2 { margin-top: 4px; padding: 7px 10px; }
.xd-ecn .xd-act2 .stat-value { font-size: 11px; }
.xd-ecn .xd-tiles { margin: 2px 0 4px; }
.xd-ecn .xd-tiles .shp-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-kv2 { font-size: 11.5px; margin: 4px 0 6px; row-gap: 5px; align-items: start; }
.xd-kv2 > span { font-size: 10.5px; letter-spacing: .5px; }
.xd-kv2 .xd-tag { margin: 0 4px 2px 0; display: inline-block; }
.xd-ecn .xd-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xd-ecn .xd-tiles .shp-tile { min-width: 0; }
.xd-ecn .xd-tiles .shp-tile b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v2.31.409: cross dock DELETE PO -- hold to delete (RESET ORDER's button, in red) */
.xd-delwrap { margin-top: 18px; }
.reset-hold-btn.xd-delhold { color: #ff4f6d; border-color: rgba(255,79,109,.4); }
.reset-hold-btn.xd-delhold:hover:not(:disabled) { border-color: #ff4f6d; }
.xd-delhold .reset-hold-fill { background: repeating-linear-gradient(-45deg, #ff4f6d 0 7px, #1a0006 7px 14px); }
.reset-hold-btn.xd-delhold.holding .reset-hold-fill { transition: width 1s linear; }        /* = XD_DEL_HOLD_MS */
.reset-hold-btn.xd-delhold.long.holding .reset-hold-fill { transition: width 2s linear; }   /* = XD_DEL_HOLD_PLACED_MS */
/* v2.31.409: cross dock ECN progress dots (ORDERED -> RECEIVED -> CONFIRMED -> SHIPPED) */
.xd-trk { width: 210px; }
.xd-trk.wide { width: 100%; }
.xd-trk .shp-trlbl span { font-size: 8.5px; letter-spacing: .5px; text-transform: uppercase; }
.xd-trk .shp-trlbl .xd-trk-on { color: var(--fg-dim); }
.xd-trk .shp-trlbl .xd-trk-go { color: var(--cyan); cursor: pointer; }
.xd-trk .shp-trlbl .xd-trk-go:hover { text-decoration: underline; }
.xd-trk .shp-trlbl .op-pend { color: #ff9d35; }
.xd-trkbox { border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px 7px; margin-bottom: 6px; }
/* v2.31.410: cross dock -- per-step tracker colours; ECN order pill */
.xd-trk .shp-track i.done { background: var(--c); border-color: var(--c); }
.xd-trk .shp-trlbl .xd-trk-go { text-decoration: none; }
.xd-trk .shp-trlbl .xd-trk-go:hover { text-decoration: underline; }
.civ-pnl td small .ml-ref.xd, #crossdock-rows small .ml-ref.xd { display: inline-block; margin: 0 0 0 6px; font-size: 10px; vertical-align: 1px; }
.xd-trk .shp-track::after { background: var(--g, var(--c)); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.op-rnote { font-size: 10px; letter-spacing: .5px; color: #ffcf3d; border: 1px dashed rgba(255,207,61,.45); border-radius: 999px; padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
/* v2.31.412: Contacts home -- favorites as an app-icon grid (mockup C) */
.cfv { padding: 16px 18px 18px; }
.cfv-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 11px; letter-spacing: 2px; color: var(--fg-dim); }
.cfv-top a { color: var(--cyan); letter-spacing: .5px; cursor: pointer; }
.cfv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.cfv-tile { font-family: var(--font-mono); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px 12px; text-align: center; cursor: pointer; min-width: 0;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--g) 16%, transparent), transparent 70%), rgba(255,255,255,.01); transition: border-color .15s, transform .15s; }
.cfv-tile:hover { border-color: color-mix(in srgb, var(--g) 60%, transparent); transform: translateY(-1px); }
.cfv-ico { width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 9px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.92);
  box-shadow: 0 0 14px color-mix(in srgb, var(--g) 45%, transparent); }
.cfv-ico .cfv-img { width: 34px; height: 34px; object-fit: contain; }
.cfv-ico:has(.cfv-ph) { background: transparent; }
.cfv-ph { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 15px; font-weight: bold; color: #04121a; background: var(--g); }
.ct-favslot.cfv-img { display: contents; }
.cfv-tile b { display: block; font-size: 12px; color: var(--fg-bright); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfv-tile small { display: block; font-size: 9.5px; letter-spacing: 1px; margin-top: 3px; font-weight: bold; }
.cfv-chip { display: inline-block; max-width: 100%; margin-top: 9px; font-size: 9.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cc) 50%, transparent); color: var(--cc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
.cfv-hint { margin-top: 14px; font-size: 10.5px; color: var(--fg-dim); text-align: center; }
.cx-home { padding: 6px 9px; }

/* v2.31.419: removed / refunded in Shopify */
.op-rm{display:inline-block;font-size:10px;padding:0 6px;border-radius:999px;border:1px solid rgba(255,157,53,.5);color:#ff9d35;margin-left:4px}
.ord-removed{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:11px;color:#ff9d35;border:1px dashed rgba(255,157,53,.45);border-radius:8px;padding:6px 10px;margin:0 0 8px;background:rgba(255,157,53,.05)}
.ord-removed span{color:var(--fg-dim)} .ord-removed b{color:var(--fg-bright);font-weight:normal} .ord-removed .r{color:#ff9d35}

/* v2.31.423: list rows get the favorites' icon (favicon, else coloured initials) */
.cr-lrow { grid-template-columns: 18px 26px minmax(0, 1fr) auto; }
.cr-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.92);
  box-shadow: 0 0 8px color-mix(in srgb, var(--g) 35%, transparent); }
.cr-ico:has(.cr-ph) { background: transparent; }
.cr-ico .cr-img { width: 19px; height: 19px; object-fit: contain; }
.ct-favslot.cr-img { display: contents; }
.cr-ph { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: bold; color: #04121a; background: var(--g); }
.cx-aka { font-size: 11px; color: var(--fg-dim); margin: 2px 0 4px; letter-spacing: .5px; }

/* v2.31.426: contact edit as a popup over the card */
.ct-edialog { width: min(760px, 100%); padding: 14px 18px 16px; }
.ct-edialog .ct-form { max-width: none; }
.ct-prow { display: grid; grid-template-columns: 1.2fr .8fr 1.5fr 1fr auto auto; gap: 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 5px; }
.ct-prow.po-on { border-color: rgba(53,232,255,.45); background: rgba(53,232,255,.04); }
.ct-prow input:not([type=checkbox]) { min-width: 0; }
@media (max-width: 640px) { .ct-prow { grid-template-columns: 1fr 1fr; } }
.ct-unl-acts { display: flex; gap: 6px; }
.ct-btn.armed { color: #ff9d35; border-color: rgba(255,157,53,.6); background: rgba(255,157,53,.08); }
/* v2.31.427: this screen's data changed while you were working in it */
.live-pill { margin-left: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(53,232,255,.55); background: rgba(53,232,255,.1); color: var(--cyan); white-space: nowrap; animation: livePulse 2.4s ease-in-out infinite; }
.live-pill:hover { background: rgba(53,232,255,.2); }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,232,255,.0); } 50% { box-shadow: 0 0 10px 0 rgba(53,232,255,.35); } }

/* v2.31.429: one person edited right on the card */
.cb-pedit { display: block; border-color: rgba(53,232,255,.5); background: rgba(53,232,255,.04); }
.cb-pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-pe-grid input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; min-width: 0; }
.cb-pe-grid input:focus { border-color: var(--cyan); outline: none; }
.cb-pe-wide { grid-column: 1 / -1; }
.cb-pe-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.cb-pe-msg { flex: 1; font-size: 10px; color: var(--fg-dim); } .cb-pe-msg.bad { color: #ff4f6d; }

/* v2.31.430: PRICE WATCH */
.pw-dn { color: #33ff88; } .pw-up { color: #ff4f6d; }
.pw-was { color: var(--fg-dim); text-decoration: line-through; margin-right: 6px; }
.pw-sub { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-spark { display: block; }
.pw-star { background: transparent; border: 0; padding: 0; cursor: pointer; color: #2a3654; font-size: 14px; } .pw-star.on, .pw-star:hover { color: #ffcf3d; }
.pw-events { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.pw-ev { display: flex; align-items: center; gap: 8px; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--fg); cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 5%, transparent); border-radius: 8px; padding: 7px 11px; }
.pw-ev b { color: var(--c); font-weight: normal; letter-spacing: 1px; } .pw-ev em { font-style: normal; color: var(--fg-dim); font-size: 10px; }
.pw-evs { display: flex; align-items: center; gap: 6px; width: 100%; background: transparent; border: 0; border-bottom: 1px dashed var(--border); padding: 6px 2px; font-family: var(--font-mono); font-size: 11px; color: var(--fg); cursor: pointer; text-align: left; }
.pw-evs .pw-evs-pct { margin-left: auto; color: var(--c); }   /* v2.31.528: only the % -- not the vendor pill */
.pw-evs .tr-pill, .pw-ev .tr-pill, .pw-li .tr-pill { color: #04121a; }   /* dark text on the vendor colour, easier to read */
.pw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 8px 0 6px; }
.pw-tiles .shp-tile { background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pw-li { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 6px 0; border-top: 1px dashed var(--border); cursor: pointer; }
.pw-li > span, .pw-li .pw-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-li em { font-style: normal; color: var(--fg-dim); } .pw-li b { font-weight: normal; white-space: nowrap; }
.uh-price .uh-subhead small { color: var(--fg-dim); letter-spacing: 0; margin-left: 6px; font-size: 9.5px; }
.uh-price .uh-legend em { font-style: normal; color: var(--fg-dim); font-size: 9.5px; }
.uh-ours { margin-left: auto; color: var(--fg-dim); }
.pw-li .tr-pill, .pw-evs .tr-pill { flex: none; }
/* v2.31.431: Settings -> Backup */
.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1600px; }
@media (max-width: 1100px) { .bk-grid { grid-template-columns: 1fr; } }
.bk-card { border-top: 2px solid var(--c); display: flex; flex-direction: column; gap: 8px; }
.bk-card h3 { color: var(--c); }
.bk-card .sub b { color: var(--fg); font-weight: normal; }
.bk-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-row input { flex: 1; min-width: 140px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-family: var(--font-mono); font-size: 11px; }
.bk-file { display: block; border: 1px dashed rgba(255,157,53,.5); border-radius: 8px; padding: 12px; text-align: center; font-size: 11px; color: var(--fg-dim); cursor: pointer; }
.bk-file input { display: none; }
.bk-prog { font-size: 10.5px; color: var(--fg-dim); } .bk-prog span { display: block; margin-top: 4px; }
.bk-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; } .bk-bar i { display: block; height: 100%; background: var(--c, var(--cyan)); transition: width .4s; }
.bk-msg { font-size: 11px; line-height: 1.6; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--border); }
.bk-msg.ok { border-color: rgba(51,255,136,.4); background: rgba(51,255,136,.05); } .bk-msg.bad { border-color: rgba(255,79,109,.5); color: #ff4f6d; }
.bk-msg a { color: var(--cyan); cursor: pointer; } .bk-msg code { color: var(--fg-bright); }
.bk-msg .pu-btn { margin-left: 8px; }
.bk-warn { font-size: 11px; color: #ffcf3d; border: 1px solid rgba(255,207,61,.4); background: rgba(255,207,61,.06); border-radius: 7px; padding: 7px 10px; }
.bk-man { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.bk-man div { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; } .bk-man span { display: block; font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); text-transform: uppercase; } .bk-man b { font-weight: normal; color: var(--fg-bright); font-size: 12px; }
.bk-files { margin-top: 14px; max-width: 1600px; }
.bk-table { width: 100%; border-collapse: collapse; font-size: 11px; } .bk-table td { padding: 7px 6px; border-top: 1px dashed var(--border); } .bk-table td.num { text-align: right; white-space: nowrap; }
.bk-kind { display: inline-block; font-size: 9px; letter-spacing: 1px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); margin-right: 6px; color: var(--fg-dim); }
.bk-kind.full { color: #35e8ff; border-color: rgba(53,232,255,.5); } .bk-kind.analysis { color: #b388ff; border-color: rgba(179,136,255,.5); }

/* v2.31.432: nightly backups */
.bk-night { border-top: 2px solid var(--c); max-width: 1600px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.bk-nh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bk-nh h3 { margin: 0; color: var(--c); } .bk-nh .pu-btn { margin-left: auto; }
.bk-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10px; letter-spacing: 1.5px; }
.bk-switch input { accent-color: #33ff88; }
.bk-time { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; font-family: var(--font-mono); font-size: 11px; color-scheme: dark; }
.bk-last { font-size: 11px; color: var(--fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: #566b8f; display: inline-block; }
.bk-dot.ok { background: #33ff88; box-shadow: 0 0 6px #33ff88; } .bk-dot.bad { background: #ff4f6d; } .bk-dot.warn { background: #ffcf3d; } .bk-dot.run { background: var(--cyan); animation: livePulse 1.2s infinite; }
.bk-steps { display: flex; flex-direction: column; gap: 6px; }
.bk-steps > div { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 11px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; }
.bk-steps > div > b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; border: 1px solid var(--border); color: var(--fg-dim); font-weight: normal; }
.bk-steps > div.done > b { background: #33ff88; color: #04121a; border-color: #33ff88; }
.bk-steps > div > em { font-style: normal; font-size: 10px; color: var(--fg-dim); } .bk-steps > div.done > em { color: #33ff88; }
.bk-steps a { color: var(--cyan); } .bk-steps code { color: var(--fg-bright); }
.bk-sa { cursor: pointer; border-bottom: 1px dashed var(--cyan); } .bk-sa.ok { color: #33ff88; }
.bk-drive { min-width: 320px; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 5px 8px; font-family: var(--font-mono); font-size: 11px; }
.bk-oktxt { color: #33ff88; margin-left: 6px; } .bk-badtxt { color: #ff4f6d; margin-left: 6px; }
.st-bk-alert { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,79,109,.5); background: rgba(255,79,109,.07); color: #ff4f6d; border-radius: 9px; padding: 8px 12px; font-size: 11.5px; margin-bottom: 10px; cursor: pointer; }
.st-bk-alert b { letter-spacing: 1.5px; font-weight: normal; }
.bk-steps span b { color: var(--fg-bright); font-weight: normal; }

/* v2.31.433: merge a duplicate card */
.ct-mg { margin: 10px 0 4px; border: 1px solid rgba(255,157,53,.5); border-radius: 10px; padding: 10px 12px; background: rgba(255,157,53,.04); display: flex; flex-direction: column; gap: 8px; }
.ct-mg-h { display: flex; align-items: center; gap: 10px; font-size: 11px; } .ct-mg-h b { color: #ff9d35; letter-spacing: 1.5px; font-weight: normal; } .ct-mg-h .ct-x { margin-left: auto; }
.ct-mg-q { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; font-family: var(--font-mono); font-size: 11px; }
.ct-mg-res { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ct-mg-row, .ct-mg-pick { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-family: var(--font-mono); color: var(--fg); cursor: pointer; }
.ct-mg-row:hover { border-color: rgba(255,157,53,.6); }
.ct-mg-row b, .ct-mg-pick b { display: block; font-weight: normal; color: var(--fg-bright); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-mg-row small, .ct-mg-pick small { display: block; font-size: 10px; color: var(--fg-dim); }
.ct-mg-pick { cursor: default; border-color: rgba(255,157,53,.6); }
.ct-mg-list { margin: 0; padding-left: 18px; font-size: 11px; line-height: 1.7; } .ct-mg-list b { color: var(--fg-bright); font-weight: normal; }
.ct-mg-foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .ct-bad { color: #ff4f6d; font-size: 11px; margin-right: auto; }

/* v2.31.435: PROFIT list -- margin column */
.opnl-table th.op-mth { width: 92px; }
.op-mg { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 64px; }
.op-mg b { font-weight: normal; font-size: 15px; }
.op-mg i { display: block; width: 64px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.op-mg i em { display: block; height: 100%; border-radius: 2px; background: currentColor; }
.op-mg.neg { color: #ff4f6d; } .op-mg.low { color: #ff9d35; } .op-mg.ok { color: #35e8ff; } .op-mg.good { color: #33ff88; }
.op-mg.neg i em { width: 100% !important; opacity: .35; }

.bk-ready { display: flex; gap: 14px; align-items: center; font-size: 11px; color: #33ff88; } .bk-ready a, .bk-hide { color: var(--cyan); cursor: pointer; font-size: 10.5px; margin-left: auto; }
.bk-hide { align-self: flex-end; }

/* v2.31.438: Settings tabs (mockup B) -- underline tabs, icons, status dots */
.st-tabs { display: flex; gap: 2px; margin: 18px 20px 6px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.st-tab { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--fg-dim); cursor: pointer; white-space: nowrap; }
.st-tab svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.st-tab:hover { color: var(--fg); }
.st-tab.active { color: var(--fg-bright); border-bottom-color: var(--cyan); }
.st-tab.active svg { color: var(--cyan); }
.st-dot { display: none; width: 6px; height: 6px; border-radius: 50%; }
.st-dot.bad { display: inline-block; background: #ff4f6d; box-shadow: 0 0 6px #ff4f6d; }
.st-dot.warn { display: inline-block; background: #ffcf3d; box-shadow: 0 0 6px #ffcf3d; }
.st-dot.ok { display: inline-block; background: #33ff88; box-shadow: 0 0 6px #33ff88; }

/* v2.31.439: Contacts side panel tabs + import drop zone */
.cr-tabs { margin-bottom: 10px; }
.cr-tcount { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 999px; background: #ff9d35; color: #1a0d00; font-size: 9.5px; font-weight: bold; margin-left: 4px; }
.cr-drop .ufo-dz { min-height: 150px; }
/* v2.31.440 (mockup A): vendor cards -- same three lanes everywhere */
.vc-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.vendor-card.vc { border: 1px solid var(--border); border-top: 3px solid var(--vc); border-left: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vendor-card.vc.dragging { opacity: .5; }
.vc-head { display: flex; align-items: center; gap: 8px; }
.vc-head .routing-handle { color: var(--fg-dim); }
.vc-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: bold; color: #04121a; letter-spacing: .5px; white-space: nowrap; }
.vc-name { font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vc-status { margin-left: auto; font-size: 10px; white-space: nowrap; }
.vc-gearbtn { background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--fg-dim); font-size: 13px; cursor: pointer; padding: 1px 6px; }
.vc-gearbtn:hover, .vc-gearbtn.on { border-color: var(--border); color: var(--cyan); }
.vc-gear { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.015); display: flex; flex-direction: column; gap: 6px; }
.vc-edit, .vc-wh { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vc-gear input[type=text] { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; padding: 5px 8px; border-radius: 5px; flex: 1; min-width: 100px; }
.vc-gear input.vc-short { flex: 0 0 80px; min-width: 0; }
.vc-gear input[type=color] { width: 28px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); padding: 2px; cursor: pointer; }
.vc-gear .btn { font-size: 10px; padding: 3px 9px; }
.vc-whcode { min-width: 64px; font-size: 10.5px; color: var(--fg-bright); }
.vc-sec { font-size: 9px; letter-spacing: 2px; color: var(--fg-dim); margin-top: 4px; }
.vc-dim { color: var(--fg-dim); font-size: 10.5px; } .vc-dimbtn { color: var(--fg-dim) !important; }
.vc-toolmsg { font-size: 10.5px; color: var(--fg-dim); flex-basis: 100%; }
.vc-toolmsg:empty { display: none; }
.vc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 8px; margin-top: auto; }
.vc-foot .vc-pill { font-size: 9px; }
.vc-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vc-tools .btn { font-size: 10px; padding: 3px 9px; }
@media (max-width: 700px) { .vc-grid { grid-template-columns: minmax(0, 1fr); } }
.vc-gear[hidden], .vc-row .feed-sched-editor[hidden] { display: none; }
/* v2.31.441 (mockup E): ticker rows -- one thin line per lane, header tinted in the vendor color */
.vendor-card.vc { padding: 0; gap: 0; overflow: hidden; border-top: 1px solid var(--border); }
.vc-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.vc-head { padding: 9px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--vc) 18%, transparent), transparent 70%); }
.vc-gear { margin: 0 12px 8px; }
.vc-lanes { display: flex; flex-direction: column; }
.vc-row { border-top: 1px solid rgba(255,255,255,.045); }
.vc-line { display: grid; grid-template-columns: 8px 78px 100px minmax(0, 1fr) 16px 26px; gap: 8px; align-items: center; padding: 5px 12px; font-size: 10.5px; min-height: 30px; box-sizing: border-box; }
.vc-ln { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-row.sub .vc-ln { letter-spacing: 0; font-size: 9.5px; padding-left: 6px; border-left: 1px solid var(--border); }
.vc-sc { justify-self: start; max-width: 100%; background: transparent; border: 0; border-bottom: 1px dashed #2a3654; border-radius: 0; color: var(--fg-bright); font-family: var(--font-mono); font-size: 10.5px; padding: 1px 0; cursor: pointer; appearance: none; -webkit-appearance: none; field-sizing: content; }
.vc-sc:hover, .vc-sc:focus { border-bottom-color: var(--cyan); outline: none; }
.vc-sc.off { color: var(--fg-dim); }
.vc-sc option { background: var(--bg); color: var(--fg-bright); }
.vc-line .feed-sub { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vc-line .feed-sub.err { color: var(--danger); }
.vc-infobtn { background: transparent; border: 0; color: #3a4a6b; cursor: pointer; font-size: 12px; padding: 0; letter-spacing: 1px; }
.vc-infobtn:hover { color: var(--cyan); } .vc-infobtn.on { color: var(--cyan); }
.vc-line .sync-btn.vc-sync { width: 26px; height: 22px; padding: 0; font-size: 13px; line-height: 1; border-radius: 6px; margin: 0; }
.vc-info { padding: 2px 12px 8px 30px; font-size: 10px; color: var(--fg-dim); display: flex; flex-direction: column; gap: 3px; }
.vc-info[hidden], .vc-moreb[hidden] { display: none; }
.vc-what { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .vc-what b { color: var(--fg); font-weight: normal; }
.vc-info .vc-full { padding: 2px 8px; font-size: 9px; color: var(--fg-dim); margin-left: auto; }
.vc-info .feed-sched-line { font-size: 10px; color: var(--fg-dim); }
.vc-row .feed-sched-editor { margin: 0 12px 8px; }
.vc-row.na .vc-line { opacity: .4; }
.vc-na { grid-column: 3 / -1; font-size: 10px; color: var(--fg-dim); }
.vc-more { background: transparent; border: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 9.5px; text-align: left; padding: 0 12px 6px 30px; cursor: pointer; }
.vc-more:hover { text-decoration: underline; }
.vc-foot { padding: 8px 12px 10px; margin-top: auto; border-top: 1px solid rgba(255,255,255,.045); }

.status-dot.dot-manual { background: #ffcf3d; }   /* v2.31.441: off schedule -- only runs when you press ⟳ */
/* v2.31.442: P&L ship-from pills joined into one capsule, like Orders */
.op-from .op-cap { max-width: 100%; }
.op-from .op-cap > span { font-size: 9.5px; padding: 2px 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- v2.31.445: Time off (js/timeoff.js) ---------- */
.to-view { padding: 14px 20px 30px; overflow: auto; }
.to-wrap { max-width: 1500px; font-size: 12px; }
.to-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.to-whoami { margin-left: auto; font-size: 11px; display: flex; gap: 8px; align-items: center; }
.to-banner { border: 1px solid rgba(255,207,61,.4); background: rgba(255,207,61,.07); color: #ffcf3d; border-radius: 6px; padding: 8px 12px; font-size: 11.5px; margin-bottom: 10px; }
.to-msg { font-size: 12px; color: #33ff88; margin: 0 0 10px; }
.to-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .to-grid { grid-template-columns: 1fr; } }
.to-card { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); padding: 14px 16px; min-width: 0; }
.to-empty { font-size: 13px; color: var(--fg-dim); padding: 6px 0; }
.to-empty a, .to-small a, .to-wrap a { color: var(--cyan); cursor: pointer; text-decoration: none; }
.to-dim { color: var(--fg-dim); } .to-b { color: var(--fg-bright); }
.to-small { font-size: 11px; line-height: 1.5; } .to-tiny { font-size: 9.5px; margin-top: 3px; }
.to-err { color: #ff4f6d; } .to-okt { color: #33ff88; } .to-warn { color: #ffcf3d; }
.to-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.to-row .pu-ie { width: auto; flex: 1; min-width: 120px; }
.to-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.to-fl { font-size: 9.5px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 10px 0 4px; }
.to-sel { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; font: 11px var(--font-mono); padding: 3px 5px; }
.to-types { display: inline-flex; flex-wrap: wrap; }
.to-pv { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; margin: 12px 0; font-size: 11.5px; line-height: 1.8; background: rgba(0,0,0,.15); }
.to-bal { margin-bottom: 12px; }
.to-bal-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; margin-bottom: 4px; gap: 10px; }
.to-bal-h > b { letter-spacing: 2px; }
.to-big { font-size: 16px; color: var(--fg-bright); }
.to-bar { height: 10px; border: 1px solid var(--border); border-radius: 2px; display: flex; overflow: hidden; background: #070b14; }
.to-bar i { display: block; height: 100%; }
.to-pix { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 6px) !important; background-blend-mode: multiply; }
.to-table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.to-table td, .to-table th { padding: 6px 7px; border-bottom: 1px solid #111a2b; text-align: left; vertical-align: middle; }
.to-table th { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); font-weight: normal; }
.to-table .pu-ie { font-size: 11.5px; }
.to-table .to-n, .to-row .to-n { width: 64px; min-width: 0; flex: none; }
.to-gap { margin-top: 14px; }
.to-set td:first-child .pu-ie { min-width: 110px; }
.to-r { text-align: right !important; white-space: nowrap; }
.to-off td, .to-off { opacity: .45; }
.to-okb { color: #33ff88 !important; border-color: rgba(51,255,136,.45) !important; }
.to-color { width: 30px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
.to-code { font-size: 10.5px; color: #ffcf3d; margin-top: 3px; } .to-code b { letter-spacing: 2px; font-size: 12px; }
.to-adj { background: rgba(53,232,255,.04); border-radius: 6px; padding: 6px 8px; font-size: 11px; }
.to-hols { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.to-hol { border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11px; display: inline-flex; gap: 6px; align-items: center; }
.to-hol .pu-mini { padding: 0 5px; }
.to-tog { display: block; font-size: 11.5px; margin: 5px 0; cursor: pointer; }
.to-log { margin-top: 8px; font-size: 10px; color: var(--fg-dim); max-height: 140px; overflow: auto; line-height: 1.6; }
.to-dirbox { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.to-signin { max-width: 520px; }
.to-or { text-align: center; color: var(--fg-dim); font-size: 10px; margin: 10px 0; letter-spacing: 2px; }
.to-me-sprite { cursor: pointer; margin-top: -14px; }
.to-me-sprite:hover { filter: drop-shadow(0 0 4px var(--cyan)); }
/* team calendar */
.to-cal { display: grid; grid-template-columns: 130px repeat(var(--to-cols, 14), minmax(22px, 1fr)); gap: 2px; font-size: 10px; overflow-x: auto; }
.to-ch { color: var(--fg-dim); text-align: center; font-size: 9px; padding: 3px 0; border-radius: 3px; }
.to-ch.we { opacity: .55; } .to-ch.td { color: var(--cyan); background: rgba(53,232,255,.1); font-weight: bold; }
.to-cn { color: var(--fg-bright); display: flex; align-items: center; gap: 6px; font-size: 11px; white-space: nowrap; overflow: hidden; }
.to-cn .to-sprite { flex: none; }
.to-cc { min-height: 20px; border-radius: 3px; position: relative; background: rgba(255,255,255,.015); }
.to-cc.we { background: #0c1220; } .to-cc.hol { background: rgba(51,255,136,.16); }
.to-half { position: absolute; left: 3px; top: 3px; font-size: 8px; color: var(--fg-bright); letter-spacing: .5px; }
.to-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 10px; color: var(--fg-dim); margin-top: 10px; }
.to-chip { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
/* Status bento: WHO'S OUT */
.to-stage { display: flex; gap: 10px 8px; justify-content: center; align-items: flex-end; flex-wrap: wrap; padding: 12px 10px 18px; border-radius: 8px; min-height: 104px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0b1430 0%, #101a36 70%); margin-top: 8px; }
.to-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #16213a 0 8px, #121b30 8px 16px); }
.to-who { position: relative; z-index: 1; text-align: center; font-size: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.to-who b { display: block; color: var(--fg-bright); font-weight: normal; margin-top: 4px; }
.to-who small { color: var(--fg-dim); font-size: 9px; line-height: 1.35; white-space: nowrap; }
.to-who { min-width: 0; max-width: 92px; }
.to-nobody { cursor: default; } .to-more b { font-size: 16px; color: var(--cyan); }
.to-sprite { image-rendering: pixelated; display: block; }
.to-sp-personal, .to-sp-away, .to-sp-holiday { animation: to-bob 1.2s steps(2) infinite; }
.to-sp-sick { animation: to-breathe 3s ease-in-out infinite; transform-origin: bottom; }
.to-sp-beach { animation: to-sun 2.4s steps(2) infinite; }
.to-sp-remote { animation: to-bob 2s steps(2) infinite; }
.to-cn .to-sprite, .to-me-sprite .to-sprite { animation: none; }
@keyframes to-bob { 50% { transform: translateY(-2px); } }
@keyframes to-breathe { 50% { transform: scaleY(1.03); } }
@keyframes to-sun { 50% { filter: brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .to-sprite { animation: none !important; } }
.to-wk { font-size: 11px; line-height: 1.9; } .to-wk i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.to-wk b { color: var(--fg-bright); font-weight: normal; margin-right: 6px; }
.to-pend { color: #ffcf3d; }
.to-wait { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; padding: 3px 0; }
.to-wait b { color: var(--fg-bright); font-weight: normal; }
.to-wait > span:first-child { flex: 1; min-width: 0; } .to-wait > span:last-child { white-space: nowrap; }
.to-ok:hover { color: #33ff88 !important; border-color: #33ff88 !important; } .to-no:hover { color: #ff4f6d !important; border-color: #ff4f6d !important; }
/* the stand-alone page (/timeoff.html) */
.to-page { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-mono); }
.to-page-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-panel); }
.to-page-head b { color: var(--fg-bright); letter-spacing: 2px; font-size: 13px; }
.to-page-head img { width: 22px; height: 22px; }
@media (max-width: 700px) { .to-cal { grid-template-columns: 84px repeat(var(--to-cols, 14), minmax(18px, 1fr)); } .to-two { grid-template-columns: 1fr; } .to-view, .to-page .to-view { padding: 10px 12px; } .to-table { font-size: 10.5px; } }
/* v2.31.447: MY TIME OFF, bigger and bolder (mockup A) + avatar heads */
.to-top .pu-tabs button { font-size: 13px; padding: 11px 18px; letter-spacing: 1.5px; }
.to-whoami { font-size: 13px; }
.to-msg { font-size: 15px; font-weight: bold; }
.to-av { display: block; image-rendering: auto; object-fit: contain; }
.to-av-sp { display: inline-flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.to-av-sm { display: inline-block; vertical-align: -4px; margin-right: 4px; }
.to-cn .to-av, .to-cn .to-av-sp { flex: none; }
.to-avcell { white-space: nowrap; } .to-avcell > span { cursor: pointer; display: inline-block; vertical-align: middle; }
.to-avcell .pu-mini { vertical-align: middle; margin-left: 2px; padding: 0 5px; }
.tm-head { display: flex; align-items: center; gap: 18px; margin: 4px 0 6px; flex-wrap: wrap; }
.tm-av { position: relative; width: 76px; height: 76px; border-radius: 16px; background: #0e1424; border: 2px solid var(--border); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; cursor: pointer; flex: none; }
.tm-av:hover { border-color: var(--cyan); }
.tm-av-edit { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); color: #04252b; font-size: 12px; font-weight: bold; display: flex; align-items: center; justify-content: center; }
.tm-hello { font-size: 28px; font-weight: bold; color: var(--fg-bright); }
.tm-line { font-size: 16px; color: var(--fg); margin-top: 2px; } .tm-line b { color: var(--fg-bright); }
.tm-acts { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.tm-big { font-family: var(--font-mono); font-size: 16px; font-weight: bold; letter-spacing: 2px; padding: 15px 24px; border-radius: 12px; border: 2px solid var(--cyan); background: var(--cyan); color: #04252b; cursor: pointer; }
.tm-big:hover:not(:disabled) { filter: brightness(1.1); }
.tm-big:disabled { opacity: .35; cursor: default; }
.tm-big.red { background: transparent; border-color: #ff4f6d; color: #ff4f6d; }
.tm-big.ghost { background: transparent; border-color: var(--border); color: var(--fg-bright); }
.tm-big.btn-armed { background: #ff4f6d !important; color: #1a0006 !important; }
.tm-half { font-size: 13px; color: var(--fg-dim); margin: 0 0 16px; text-align: right; }
.tm-half a { color: #ff7a90 !important; }
.tm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tm-tile { border: 1px solid var(--border); border-top: 4px solid var(--c); border-radius: 14px; padding: 18px 20px; background: var(--bg-panel); }
.tm-t { font-size: 15px; font-weight: bold; letter-spacing: 2px; color: var(--c); }
.tm-n { font-size: 50px; font-weight: bold; color: var(--fg-bright); line-height: 1; margin: 12px 0 2px; }
.tm-n small { font-size: 17px; color: var(--fg-dim); font-weight: normal; }
.tm-tile .to-bar { height: 14px; border-radius: 7px; border: 0; background: #121a2c; margin: 12px 0 8px; }
.tm-s { font-size: 14px; color: var(--fg); }
.tm-note { font-size: 12px; color: var(--fg-dim); margin-top: 6px; }
.tm-extra { font-size: 14px; color: var(--fg); margin: 10px 2px 0; } .tm-extra b { color: var(--fg-bright); }
.tm-lists { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) { .tm-lists { grid-template-columns: 1fr; } }
.tm-lists .to-card, .tm-req { border-radius: 14px; padding: 18px 20px; }
.tm-h2 { font-size: 13px; letter-spacing: 3px; font-weight: bold; color: var(--fg-dim); margin-bottom: 8px; }
.tm-h2 a { letter-spacing: 1px; font-size: 13px; }
.tm-row { display: flex; align-items: center; gap: 16px; padding: 13px 2px; border-bottom: 1px solid #121a2b; flex-wrap: wrap; }
.tm-row:last-child { border-bottom: 0; }
.tm-date { width: 60px; flex: none; text-align: center; border-radius: 10px; background: #111829; padding: 6px 0; }
.tm-date .m { font-size: 11px; letter-spacing: 2px; font-weight: bold; color: var(--c); }
.tm-date .d { font-size: 24px; font-weight: bold; color: var(--fg-bright); line-height: 1.1; }
.tm-what { flex: 1; min-width: 180px; }
.tm-w1 { font-size: 16px; font-weight: bold; color: var(--fg-bright); }
.tm-w2 { font-size: 13.5px; color: var(--fg-dim); margin-top: 2px; }
.tm-pill { display: inline-block; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: bold; letter-spacing: 1px; border: 2px solid var(--c); color: var(--c); white-space: nowrap; }
.tm-why { font-size: 13px; color: #ff7a90; }
.tm-mid { font-family: var(--font-mono); font-size: 12.5px; font-weight: bold; letter-spacing: 1.5px; padding: 8px 14px; border-radius: 9px; border: 2px solid var(--border); background: transparent; color: var(--fg-bright); cursor: pointer; }
.tm-mid:hover { border-color: #ff4f6d; color: #ff4f6d; }
.tm-empty { font-size: 15px; color: var(--fg-dim); padding: 10px 2px; }
.tm-req { margin-bottom: 16px; border-color: rgba(53,232,255,.45); }
.tm-fl { font-size: 13px; letter-spacing: 2px; font-weight: bold; color: var(--cyan); margin: 14px 0 10px; }
.tm-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tm-type { font-family: var(--font-mono); border: 2px solid var(--border); border-radius: 14px; background: transparent; color: var(--fg-bright); padding: 14px 10px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 118px; justify-content: flex-end; }
.tm-type b { font-size: 15px; letter-spacing: 1.5px; } .tm-type small { font-size: 13px; color: var(--fg-dim); }
.tm-type.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); } .tm-type.on b { color: var(--c); }
.tm-type:hover { border-color: var(--c); }
.tm-reqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .tm-reqgrid { grid-template-columns: 1fr; } .tm-acts { margin-left: 0; width: 100%; } .tm-acts .tm-big { flex: 1; } .tm-half { text-align: left; } }
.tm-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tm-lab { font-size: 12px; letter-spacing: 2px; color: var(--fg-dim); font-weight: bold; margin-bottom: 6px; }
.tm-in { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 17px; color: var(--fg-bright); background: #0a0e18; border: 2px solid #23304d; border-radius: 10px; padding: 11px 12px; color-scheme: dark; }
.tm-in:focus { outline: none; border-color: var(--cyan); }
.tm-sel { width: 100%; margin-top: 8px; font-family: var(--font-mono); font-size: 15px; color: var(--fg-bright); background: #0a0e18; border: 2px solid #23304d; border-radius: 10px; padding: 9px 10px; }
.tm-sum { font-size: 16px; line-height: 1.9; border: 2px solid var(--border); border-radius: 12px; padding: 12px 16px; background: rgba(0,0,0,.15); min-height: 90px; }
.tm-sum .to-b { font-size: 18px; }
.tm-sendrow { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
/* v2.31.448: balance tiles double as the type picker */
.tm-tile { position: relative; cursor: pointer; transition: opacity .15s, box-shadow .15s, transform .15s; }
.tm-tile:hover { border-color: var(--c); }
.tm-spr { position: absolute; top: 14px; right: 16px; pointer-events: none; }
.tm-spr .to-sprite { display: block; }
.tm-tile .tm-t { padding-right: 70px; min-height: 22px; }
.tm-tiles.picking .tm-tile:not(.sel) { opacity: .5; }
.tm-tiles.picking .tm-tile:not(.sel):hover { opacity: .85; }
.tm-tile.sel { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 0 22px color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--bg-panel)); transform: translateY(-2px); }
.tm-selb { font-size: 11px; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; background: var(--c); color: #06080f; margin-left: 6px; vertical-align: 2px; }
.tm-bar0 { height: 14px; margin: 12px 0 8px; }
.tm-req { margin-top: 16px; margin-bottom: 0; border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.tm-reqtype { color: var(--c); } .tm-hint { letter-spacing: .5px; font-weight: normal; font-size: 12px; }
/* v2.31.449: full-day badge, optional first/last-day times, receipt, work week settings */
.tm-full { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15.5px; font-weight: bold; color: #33ff88; border: 2px solid rgba(51,255,136,.45); background: rgba(51,255,136,.07); border-radius: 12px; padding: 11px 16px; }
.tm-times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tm-link { font-size: 14px; font-weight: bold; color: var(--cyan) !important; cursor: pointer; }
.tm-tf { display: flex; align-items: center; gap: 8px; }
.tm-time { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 26px; font-weight: bold; text-align: center; color: var(--fg-bright); background: #0a0e18; border: 2px solid #2b3a5c; border-radius: 12px; padding: 11px 12px; }
.tm-time:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.tm-time::placeholder { color: #3b4a66; }
.tm-x { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); background: transparent; color: var(--fg-dim); font-size: 14px; cursor: pointer; }
.tm-x:hover { border-color: #ff4f6d; color: #ff4f6d; }
.tm-thint { font-size: 12.5px; color: var(--fg-dim); margin-top: 6px; } .tm-thint.bad { color: #ff7a90; }
.tm-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; }
.tm-chip { border-radius: 10px; background: #0e1424; padding: 8px 10px; font-size: 12.5px; color: var(--fg); }
.tm-chip b { display: block; font-size: 14.5px; color: var(--fg-bright); }
.tm-chip.part { border: 2px solid var(--c); } .tm-chip.gap { display: flex; align-items: center; justify-content: center; color: var(--fg-dim); font-size: 18px; }
.tm-rcpt { border: 2px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.tm-math { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; text-align: center; gap: 6px; }
.tm-math.one { grid-template-columns: auto 1fr; text-align: left; gap: 20px; }
.tm-math .k { font-size: 12px; letter-spacing: 2px; color: var(--fg-dim); font-weight: bold; }
.tm-math .v { font-size: 40px; font-weight: bold; color: var(--fg-bright); line-height: 1.1; }
.tm-math .u { font-size: 13px; color: var(--fg-dim); }
.tm-math .op { font-size: 30px; color: var(--fg-dim); }
.tm-math .take .v { color: var(--c); } .tm-math .left .v { color: #33ff88; } .tm-math .left.neg .v { color: #ff4f6d; }
.tm-warn { border: 2px solid rgba(255,79,109,.5); background: rgba(255,79,109,.08); border-radius: 12px; padding: 12px 16px; font-size: 14.5px; color: #ffb3c0; margin-top: 12px; line-height: 1.5; }
.tm-warn b { color: #ff4f6d; }
.tm-note2 { border: 2px solid rgba(255,207,61,.4); background: rgba(255,207,61,.06); border-radius: 12px; padding: 10px 16px; font-size: 14px; color: #ffcf3d; margin-top: 12px; }
.tm-info { border: 2px solid rgba(51,255,136,.35); background: rgba(51,255,136,.05); border-radius: 12px; padding: 10px 16px; font-size: 14px; color: #8dffbe; margin-top: 12px; }
.ww-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; }
@media (max-width: 900px) { .ww-grid { grid-template-columns: 1fr; } }
.ww-row { display: grid; grid-template-columns: 70px 56px 140px 20px 140px 1fr; gap: 10px; align-items: center; padding: 6px 0; font-size: 15px; }
.ww-row b { color: var(--fg-bright); } .ww-row.off b { color: #3b4a66; }
.ww-row.lunch { border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 12px; }
.ww-time { font-family: var(--font-mono); font-size: 15px; color: var(--fg-bright); background: #0a0e18; border: 2px solid #23304d; border-radius: 9px; padding: 7px 9px; color-scheme: dark; }
.ww-time:disabled { opacity: .4; }
.ww-h { text-align: right; color: var(--fg-dim); font-size: 14px; }
.ww-tog { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; }
.ww-tog input { opacity: 0; width: 0; height: 0; }
.ww-tog i { position: absolute; inset: 0; border-radius: 12px; background: #1c2740; transition: background .15s; }
.ww-tog i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #566b8f; transition: left .15s; }
.ww-tog input:checked + i { background: rgba(51,255,136,.3); } .ww-tog input:checked + i::after { left: 23px; background: #33ff88; }
.ww-total { font-size: 14px; color: var(--fg-dim); margin-top: 10px; } .ww-total b { color: var(--fg-bright); }
/* v2.31.450: scenes with your head (one 4:3 box for all), pencil in the corner, (days) next to hours */
.to-scene { position: relative; border-radius: 10px; overflow: hidden; flex: none; }
.to-scene svg { display: block; }
.to-sc-head { position: absolute; image-rendering: pixelated; }
.tm-spr { top: 14px; right: 14px; }
.tm-tile { min-height: 168px; }
.tm-tile .tm-t, .tm-tile .tm-n { padding-right: 132px; }
.tm-n { font-size: 40px; white-space: nowrap; }
.tm-n small { display: block; font-size: 15px; margin-top: 6px; white-space: normal; line-height: 1.4; }
.tm-dd { color: var(--fg-bright); font-weight: bold; }
.tm-tile .to-bar { margin-top: 14px; }
.tm-av { overflow: visible; }
.tm-av .to-av, .tm-av .to-av-sp { border-radius: 14px; overflow: hidden; }
.tm-av-edit { right: -8px; top: -8px; bottom: auto; width: 22px; height: 22px; border: 2px solid var(--bg); }
.to-who .to-scene { margin: 0 auto; }
.to-stage { gap: 10px; }
.to-who { max-width: none; }
.tm-ddb { display: block; font-size: 16px; margin-top: 2px; }
/* v2.31.451: scenes are PNG art at the heads' density; FULL DAY badge is the button */
.to-sc-art { position: absolute; left: 0; top: 0; image-rendering: pixelated; }
.to-scene { background: #0e1424; }
button.tm-full { font-family: var(--font-mono); cursor: pointer; text-align: left; flex-wrap: wrap; }
button.tm-full:hover { border-color: #33ff88; background: rgba(51,255,136,.12); }
.tm-full-ed { font-size: 12.5px; color: var(--cyan); font-weight: bold; letter-spacing: .5px; margin-left: 6px; }
/* v2.31.452: the days are the time picker; no REQUEST button (tiles start a request) */
.tm-tip { font-size: 14px; color: var(--fg-dim); align-self: flex-end; }
.tm-strip-h { font-size: 14px; font-weight: bold; color: #33ff88; margin: 16px 0 10px; }
.tm-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.tm-day { position: relative; font-family: var(--font-mono); text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #0e1424; border: 2px solid transparent; color: var(--fg); }
.tm-day b { font-size: 16px; color: var(--fg-bright); }
.tm-day-t { font-size: 13px; color: #8dffbe; }
.tm-day-h { font-size: 12px; color: var(--fg-dim); }
.tm-day-tag { font-size: 10px; letter-spacing: 1.5px; font-weight: bold; color: var(--c); }
.tm-day.edge { cursor: pointer; border-color: #2b3a5c; }
.tm-day.edge:hover { border-color: var(--c); }
.tm-day.part .tm-day-t { color: var(--c); font-weight: bold; }
.tm-day.part { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tm-day.open { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.tm-day-ed { position: absolute; right: 9px; top: 8px; font-style: normal; font-size: 13px; color: var(--cyan); }
.tm-day.gap { align-items: center; justify-content: center; text-align: center; color: var(--fg-dim); font-size: 18px; }
.tm-day.gap small { font-size: 11px; }
.tm-editor { margin-top: 12px; border: 2px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 6%, transparent); border-radius: 14px; padding: 14px 16px; }
.tm-ed-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 15px; }
.tm-ed-h b { color: var(--fg-bright); }
.tm-editor .tm-times { margin-top: 0; align-items: end; }
.tm-ehint { font-size: 13px; color: var(--fg-dim); line-height: 1.5; padding-bottom: 12px; }

/* v2.31.453: Time off → TEAM -- week / 2 weeks / month, faces on the calendar, bigger balances */
.tv .tv-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.tv-ttl { font-size: 24px; font-weight: bold; color: var(--fg-bright); min-width: 0; }
.tv-nav { display: flex; gap: 8px; }
.tv-nav button { background: transparent; border: 2px solid var(--border); border-radius: 10px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: bold; color: var(--fg-bright); cursor: pointer; }
.tv-nav button:hover { border-color: var(--cyan); color: var(--cyan); }
.tv-seg { display: inline-flex; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; margin-left: auto; }
.tv-seg button { background: transparent; border: 0; padding: 9px 16px; font: inherit; font-size: 14px; color: var(--fg-dim); font-weight: bold; letter-spacing: 1px; cursor: pointer; }
.tv-seg button.on { background: rgba(53,232,255,.14); color: var(--cyan); }
.tv-av { border-radius: 8px; image-rendering: pixelated; background: #0e1424; display: block; flex: none; object-fit: cover; }
.tv-b { color: var(--fg-bright); } .tv-y { color: #ffcf3d; }
.tv-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.tv-sum > div { border-radius: 12px; background: #0e1424; padding: 12px 14px; min-width: 0; }
.tv-sum b { display: block; font-size: 26px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-sum span { font-size: 12px; color: var(--fg-dim); letter-spacing: 1px; }
.tv-today { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; border-radius: 12px; background: #0e1424; padding: 12px 16px; margin-bottom: 16px; font-size: 15px; }
.tv-tdl { color: var(--fg-bright); }
.tv-hol { color: #33ff88; font-weight: bold; }
.tv-chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--c); border-radius: 999px; padding: 3px 12px 3px 3px; font-weight: bold; color: var(--fg-bright); }
.tv-chip .tv-av { border-radius: 50%; background: #0b0f1a; }
.tv-chip i { font-style: normal; color: var(--fg-dim); font-weight: normal; }
/* month grid */
.tv-mg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.tv-hd { font-size: 12px; letter-spacing: 2px; color: var(--fg-dim); font-weight: bold; text-align: center; padding: 4px 0; }
.tv-c { min-height: 104px; border-radius: 12px; background: #0e1424; padding: 8px 9px; position: relative; cursor: pointer; min-width: 0; }
.tv-c:hover { background: #121a2e; }
.tv-c.we { background: #0a0d16; } .tv-c.other { opacity: .3; } .tv-c.hol { background: rgba(51,255,136,.1); }
.tv-c.td { outline: 2px solid #ffcf3d; } .tv-c.sel { outline: 2px solid var(--cyan); }
.tv-n { font-size: 16px; font-weight: bold; color: var(--fg-bright); }
.tv-c.we .tv-n { color: #3b4a66; }
.tv-cnt { position: absolute; right: 9px; top: 9px; font-size: 11px; font-weight: bold; color: var(--fg-dim); }
.tv-cnt.busy { color: #ffcf3d; }
.tv-hn { font-size: 11px; color: #33ff88; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.tv-who { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tv-p { position: relative; }
.tv-p .tv-av { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 18%, #0e1424); }
.tv-p.pend .tv-av { border-style: dashed; border-color: #ffcf3d; }
.tv-pb { position: absolute; right: -4px; bottom: -4px; font-size: 9px; font-weight: bold; background: #0b0f1a; color: var(--fg-bright); border-radius: 4px; padding: 0 3px; }
/* day detail */
.tv-detail { margin-top: 14px; border: 2px solid rgba(53,232,255,.35); background: rgba(53,232,255,.04); border-radius: 14px; padding: 14px 18px; }
.tv-dh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 17px; color: var(--fg-bright); }
.tv-x { background: transparent; border: 0; color: var(--cyan); font-size: 16px; font-weight: bold; cursor: pointer; }
.tv-dr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 9px 0; border-top: 1px solid #121a2b; font-size: 15px; }
.tv-dn { color: var(--fg-bright); min-width: 80px; } .tv-dt { font-weight: bold; }
.tv-dr .tv-pill, .tv-dr .tv-dec { margin-left: auto; }
.tv-pill { border: 2px solid var(--c); color: var(--c); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
.tv-dec .to-row { display: flex; gap: 6px; align-items: center; }
/* week / 2 weeks */
.tv-wscroll { overflow-x: auto; }
.tv-wk { display: grid; gap: 3px 2px; align-items: center; }
.tv-wh { font-size: 11px; color: var(--fg-dim); text-align: center; font-weight: bold; padding-bottom: 4px; }
.tv-wh b { display: block; font-size: 15px; color: var(--fg-bright); }
.tv-wh.we, .tv-wh.we b { color: #3b4a66; } .tv-wh.td, .tv-wh.td b { color: #ffcf3d; }
.tv-wn { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: bold; color: var(--fg-bright); padding-right: 10px; min-width: 0; }
.tv-wn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-wc { height: 44px; border-radius: 6px; background: #0e1424; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: #06080f; }
.tv-wc.we { background: #0a0d16; } .tv-wc.hol { background: rgba(51,255,136,.14); }
.tv-wc.on { background: var(--c); cursor: pointer; }
.tv-wc.on.half { background: linear-gradient(90deg, var(--c) 0 50%, color-mix(in srgb, var(--c) 35%, #0e1424) 50%); }
.tv-wc.pend { background: repeating-linear-gradient(45deg, rgba(255,207,61,.33) 0 6px, transparent 6px 12px); border: 2px dashed #ffcf3d; color: #ffcf3d; }
/* legend + balances */
.tv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--fg); margin-top: 14px; }
.tv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tv-legend i.tv-pendchip { background: repeating-linear-gradient(45deg, #ffcf3d 0 3px, transparent 3px 6px); }
.tv-bh { margin: 26px 0 6px; font-size: 13px; letter-spacing: 3px; color: var(--fg-dim); font-weight: bold; }
.tv-bh span { letter-spacing: 0; font-weight: normal; }
.tv-bscroll { overflow-x: auto; }
.tv-bt { width: 100%; border-collapse: collapse; font-size: 15px; }
.tv-bt th { font-size: 12px; letter-spacing: 2px; color: var(--fg-dim); text-align: left; padding: 8px 10px; font-weight: bold; white-space: nowrap; }
.tv-bt td { padding: 12px 10px; border-top: 1px solid #121a2b; vertical-align: middle; white-space: nowrap; }
.tv-who { display: flex; align-items: center; gap: 12px; font-weight: bold; color: var(--fg-bright); font-size: 16px; }
.tv-bv { font-size: 20px; font-weight: bold; color: var(--fg-bright); } .tv-of { font-size: 13px; color: var(--fg-dim); }
.tv-mini { height: 8px; border-radius: 4px; background: #121a2c; overflow: hidden; margin-top: 6px; width: 100%; max-width: 150px; min-width: 70px; }
.tv-mini i { display: block; height: 100%; }
.tv-own { font-size: 11px; border: 2px solid #ffcf3d; color: #ffcf3d; border-radius: 999px; padding: 1px 8px; }
@media (max-width: 900px) { .tv-sum { grid-template-columns: repeat(2, 1fr); } .tv-seg { margin-left: 0; } }
@media (max-width: 640px) {
  .tv-ttl { font-size: 19px; width: 100%; }
  .tv-mg { gap: 3px; } .tv-hd { font-size: 10px; letter-spacing: 0; }
  .tv-c { min-height: 64px; padding: 4px; border-radius: 8px; }
  .tv-n { font-size: 12px; } .tv-cnt, .tv-hn { display: none; }
  .tv-who { gap: 2px; margin-top: 4px; } .tv-p .tv-av { width: 20px; height: 20px; border-radius: 5px; } .tv-pb { display: none; }
  .tv-sum b { font-size: 20px; }
}
.tv-dec .pu-btn { font-size: 13px; padding: 8px 16px; font-weight: bold; }
/* v2.31.454: group scenes in WHO'S OUT */
.to-group b i { font-style: normal; color: var(--fg-dim); margin-left: 3px; }
/* v2.31.455: everyone's in */
.to-allin small { white-space: normal; }
.to-streak { display: inline-block; margin-top: 6px; border: 2px solid #ffcf3d; color: #ffcf3d; border-radius: 999px; padding: 1px 9px; font-size: 10px; font-weight: bold; letter-spacing: .5px; }
.to-scene.to-scene-bare { background: transparent; border-radius: 0; overflow: visible; }
/* v2.31.460: Shopify product changes -- strip, CHANGES tab, full list */
.lst-chip.pch-new { background: #33ff88; color: #04140a; }
.lst-chip.pch-back { background: #35e8ff; color: #04121a; }
.pch-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 2px 0 12px; }
.pch-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 122px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.02); cursor: pointer; font-family: var(--font-mono); text-align: left; }
.pch-tile:hover { border-color: var(--fg-dim); }
.pch-tile.on { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; background: rgba(53,232,255,.06); }
.pch-l { font-size: 9.5px; letter-spacing: .8px; color: var(--fg-dim); }
.pch-n { font-size: 17px; font-weight: bold; }
.pch-s { font-size: 10.5px; color: var(--fg-dim); }
.pch-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.pch-seg button { padding: 6px 10px; }
.pch-note { font-size: 13px; color: var(--fg-dim); line-height: 1.55; margin: 8px 0; }
.pch-note a { color: var(--cyan); cursor: pointer; }
.pch-day { font-size: 10.5px; letter-spacing: 1.5px; color: var(--fg-dim); margin: 2px 0 8px; }
.pch-ev .pch-row { display: flex; gap: 10px; align-items: flex-start; }
.pch-ev.sel .pch-body { background: rgba(53,232,255,.07); border-radius: 6px; box-shadow: 0 0 0 4px rgba(53,232,255,.07); }
.pch-body { flex: 1; min-width: 0; }
.pch-body .pu-pill { margin-right: 6px; vertical-align: 1px; }
.pch-th { flex: none; width: 34px; height: 34px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #0e1424); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.pch-th.gone { filter: grayscale(1); opacity: .55; }
.pch-snap { border: 1px dashed var(--border); border-radius: 7px; padding: 7px 9px; margin-top: 6px; font-size: 11px; color: var(--fg-dim); line-height: 1.6; }
.pch-snap b { color: var(--fg-bright); }
.pch-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pch-bar select { font-family: var(--font-mono); font-size: 11.5px; }
.pch-q { min-width: 220px; }
.pch-count { font-size: 11.5px; color: var(--fg-dim); margin-left: auto; }
.pch-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pch-table th { text-align: left; font-size: 10.5px; color: var(--fg-dim); font-weight: normal; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pch-table td { padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.pch-table tr:hover td { background: rgba(255,255,255,.025); }
.pch-dim { color: var(--fg-dim); font-size: 11px; }
.pch-b { color: var(--fg-bright); }
.pch-gone { color: var(--fg-dim); text-decoration: line-through; }
@media (max-width: 760px) { .pch-tile { min-width: calc(50% - 4px); } .pch-right { margin-left: 0; width: 100%; flex-direction: row; justify-content: space-between; } }
.pch-bf { font-size: 11.5px; color: var(--fg-dim); margin: -2px 0 10px; line-height: 1.5; }
.pch-bf a { color: var(--cyan); cursor: pointer; }
.pch-ok { color: #33ff88; }
/* v2.31.462: Time off on phones -- nothing wider than the screen */
.to-wrap, .to-card, .tm-req { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tm-reqgrid > *, .tm-dates > *, .tm-math > *, .tm-strip > *, .tm-tiles > * { min-width: 0; }
.tm-in { min-width: 0; max-width: 100%; }
input[type="date"].tm-in { -webkit-appearance: none; appearance: none; min-height: 50px; }
.tm-note2, .tm-warn { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .to-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tm-req { padding: 14px 14px; }
  .tm-dates { gap: 10px; }
  .tm-in { font-size: 16px; padding: 10px; }
}
@media (max-width: 560px) {
  /* YOU HAVE − TAKING = LEFT AFTER as rows: label + note on the left, the number on the right */
  .tm-math { grid-template-columns: 1fr; text-align: left; gap: 2px; }
  .tm-math > div:not(.op) { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .tm-math .k { grid-column: 1; grid-row: 1; }
  .tm-math .u { grid-column: 1; grid-row: 2; }
  .tm-math .v { grid-column: 2; grid-row: 1 / span 2; font-size: 32px; text-align: right; }
  .tm-math .op { font-size: 20px; text-align: right; line-height: 1; padding-right: 4px; }
  .tm-math.one > .to-dim { display: block; }
}
@media (max-width: 560px) {
  .tv-wk { grid-template-columns: 74px repeat(var(--n, 5), minmax(0, 1fr)) !important; gap: 2px 1px; }
  .tv-wn { gap: 4px; font-size: 11px; padding-right: 2px; }
  .tv-wn .tv-av { width: 22px; height: 24px; }
  .tv-wh { font-size: 9px; } .tv-wh b { font-size: 12px; }
  .tv-wc { height: 34px; font-size: 9px; }
  .tv-dr { font-size: 13px; }
  .tv-dr .tv-pill, .tv-dr .tv-dec { margin-left: 0; }
}
@media (max-width: 560px) {
  .tv-bt { font-size: 12px; }
  .tv-bt th { padding: 6px 5px; font-size: 10px; letter-spacing: 1px; }
  .tv-bt td { padding: 8px 5px; }
  .tv-bt .tv-who { gap: 6px; font-size: 13px; }
  .tv-bt .tv-who .tv-av { width: 24px; height: 26px; }
  .tv-bv { font-size: 15px; } .tv-of { font-size: 10px; }
  .tv-mini { min-width: 44px; }
}
/* v2.31.463: tiles inside the CHANGES tab, no thumbnail box */
#shopify-panel-tab-changes .pch-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 10px; }
#shopify-panel-tab-changes .pch-tile { min-width: 0; padding: 6px 9px; }
#shopify-panel-tab-changes .pch-n { font-size: 16px; }
.pch-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.pch-ctl a { color: var(--cyan); cursor: pointer; font-size: 11.5px; }
.pch-bar .pch-seg button { padding: 6px 9px; }
/* v2.31.465: the TEAM grids take their column count from CSS variables, not an inline grid-template -- Nexus's
   phone rule ".full-view [style*=grid-template-columns] { 1fr }" was squashing them into one column */
.tv-mg { grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); }
.tv-wk { grid-template-columns: minmax(120px, 190px) repeat(var(--n, 5), minmax(var(--min, 34px), 1fr)); }
@media (max-width: 560px) { .tv-wk { grid-template-columns: 74px repeat(var(--n, 5), minmax(0, 1fr)) !important; } }

/* v2.31.467: everyone's in -- the control room (layered pixel art, whole-number scale) */
.to-cr { position: relative; overflow: hidden; border-radius: 10px; margin: 0 auto; background: #24262f; image-rendering: pixelated; flex: none; max-width: 100%; }
.to-cr-wall { position: absolute; inset: 0; background: url(/img/timeoff/cr_wall.png) repeat-x 0 0; image-rendering: pixelated; }
.to-cr-desk { position: absolute; background: url(/img/timeoff/cr_desk_m.png) repeat-x 0 0; image-rendering: pixelated; }
.to-cr-l { position: absolute; image-rendering: pixelated; display: block; }
.to-cr-blink { animation: to-cr-blink 1.1s steps(1, end) infinite; }
@keyframes to-cr-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .to-cr-blink { animation: none; } }

/* v2.31.468: Settings -> Routing -> Vendor costs */
#vc-root { margin-top: 12px; }
.vc-row { display: grid; grid-template-columns: minmax(110px, 160px) 70px 80px 90px minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.vc-h { font-size: 9.5px; letter-spacing: .8px; color: var(--fg-dim); padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.vc-v { padding: 9px 0 8px; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
.vc-v:last-of-type { border-bottom: 0; }
.vc-f { display: flex; align-items: center; } .vc-f .pu-ie { font-size: 13px; width: 100%; }
.vc-s { font-size: 11px; color: var(--fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vc-dim { color: var(--fg-dim); } .vc-ok { color: #33ff88; font-size: 10.5px; }
.vc-msg { font-size: 12px; } .vc-okt { color: #33ff88; } .vc-err { color: #ff5a7a; }
.vc-brands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; padding-left: calc(min(160px, 100%) + 18px); }
.vc-br { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--fg-bright); border: 1px solid var(--border); border-radius: 999px; padding: 1px 4px 1px 9px; background: rgba(255,255,255,.02); font-family: var(--font-mono); }
.vc-br .vc-bp { width: 38px; font-size: 11px; text-align: right; padding: 0 1px; }
.vc-x { background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 10px; padding: 0 4px; }
.vc-x:hover { color: #ff5a7a; }
.vc-add { border-style: dashed; color: var(--cyan); cursor: pointer; padding: 1px 9px; }
.vc-add:hover { background: rgba(53,232,255,.08); }
.vc-pick { position: relative; display: inline-block; } .vc-pq { width: 150px; font-size: 11px; }
.vc-dd { position: absolute; left: 0; top: 100%; z-index: 30; width: 300px; }
.vc-dd .pu-dd-row { display: flex; justify-content: space-between; gap: 10px; }
.vc-warn { font-size: 10.5px; color: #ffcf3d; }
.vc-addb { background: none; border: 0; color: var(--fg-dim); font-family: var(--font-mono); font-size: 10.5px; cursor: pointer; padding: 0; }
.vc-addb:hover { color: var(--cyan); }
.vc-row .pu-ie, .vc-br .pu-ie { -moz-appearance: textfield; appearance: textfield; }
.vc-row .pu-ie::-webkit-inner-spin-button, .vc-row .pu-ie::-webkit-outer-spin-button, .vc-br .pu-ie::-webkit-inner-spin-button, .vc-br .pu-ie::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vc-name .vendor-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
.vc-v { padding: 7px 0 6px; }
.vc-empty { font-size: 13px; color: var(--fg-dim); }
@media (max-width: 760px) {
  .vc-row { grid-template-columns: 1fr 1fr 1fr; }
  .vc-h span:nth-child(1), .vc-h span:nth-child(5) { display: none; }
  .vc-name, .vc-s { grid-column: 1 / -1; }
  .vc-h span:nth-child(2) { grid-column: 1; }
  .vc-brands { padding-left: 0; }
}
.vc-bar { font-size: 11px; color: var(--fg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vc-br i { font-style: normal; font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; border-radius: 3px; padding: 0 4px; }
.vc-auto { color: #33ff88; } .vc-br .vc-auto { background: rgba(51,255,136,.12); } .vc-br.is-auto { border-color: color-mix(in srgb, #33ff88 40%, var(--border)); }
.vc-you { color: var(--cyan); } .vc-br .vc-you { background: rgba(53,232,255,.12); }
.vc-seen { font-size: 10.5px; width: 100%; } .vc-seen summary { color: var(--fg-dim); cursor: pointer; }
.vc-seen-l { margin-top: 6px; max-width: 620px; }
.vc-sr { display: grid; grid-template-columns: minmax(0, 1fr) 90px 50px 150px; gap: 10px; padding: 2px 0; align-items: center; }
.vc-sr > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-learn { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; color: var(--fg-dim); cursor: pointer; }
@media (max-width: 760px) { .vc-sr { grid-template-columns: minmax(0, 1fr) 70px 40px; } .vc-sr > span:nth-child(4) { grid-column: 1 / -1; } }
/* v2.31.468: control room on top every day, today's out scenes underneath */
.to-who.to-room { flex: 0 0 100%; }
.to-outrow { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 10px 8px; justify-content: center; align-items: flex-end; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
/* v2.31.469: brand exceptions folded into a dropdown list */
.vc-exd { width: 100%; font-size: 10.5px; } .vc-exd > summary { color: var(--fg-dim); cursor: pointer; } .vc-exd > summary:hover { color: var(--fg); }
.vc-exl { margin: 6px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 22px; max-width: 980px; }
.vc-er { display: grid; grid-template-columns: minmax(0, 1fr) 54px 40px 18px; gap: 6px; align-items: center; padding: 2px 0; border-bottom: 1px dotted color-mix(in srgb, var(--border) 60%, transparent); font-size: 11px; color: var(--fg-bright); }
.vc-er > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-er i { font-style: normal; font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; border-radius: 3px; padding: 0 4px; text-align: center; }
.vc-er .vc-auto { background: rgba(51,255,136,.12); } .vc-er .vc-you { background: rgba(53,232,255,.12); }
.vc-er .vc-bp { width: 34px; font-size: 11px; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.vc-er .vc-bp::-webkit-inner-spin-button, .vc-er .vc-bp::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vc-exnone { margin: 6px 0; }
.vc-exd .vc-brands { padding-left: 0; margin-top: 4px; }
.vc-exd .vc-seen { margin-top: 6px; }
.vc-lsw { flex: none; } .vc-lsw > span:first-child { flex: none; }
.vc-lsw span { color: var(--fg-bright); }
/* v2.31.471: vendor shipment counts open the orders behind them */
.order-sync-card .sl-click { cursor: pointer; border-radius: 4px; }
.order-sync-card .sl-click:hover { background: rgba(255,255,255,.06); color: var(--fg-bright); }
.order-sync-card .sl-sbar i[onclick] { cursor: pointer; }
/* v2.31.474: attachments in the compose box (a PO's PDF) */
.ml-atts { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ml-att { font-size: 11.5px; color: var(--fg-bright); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: rgba(255,255,255,.03); }
/* v2.31.474: the screen title resets the screen */
.header .page-title-reset { cursor: pointer; border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.header .page-title-reset:hover { color: var(--cyan); background: rgba(53,232,255,.06); }
/* v2.31.475: everyone's in -- "All hands on deck!" as a glowing terminal line (option D) */
.to-allin > b { font-size: 15px; font-weight: 800; color: #33ff88; text-shadow: 0 0 8px rgba(51,255,136,.6); margin-top: 6px; }
.to-allin > b::before { content: "> "; }
.to-allin > b::after { content: "_"; animation: to-cursor 1.1s steps(1, end) infinite; }
.to-allin > small { color: #9fb0d0; }
@keyframes to-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .to-allin > b::after { animation: none; } }
/* v2.31.477: E / W per warehouse; cheapest-wins savings */
.routing-region { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; font-weight: bold; width: 20px; height: 18px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; padding: 0; }
.routing-region.e { color: #ffcf3d; border-color: color-mix(in srgb, #ffcf3d 50%, transparent); }
.routing-region.w { color: #35e8ff; border-color: color-mix(in srgb, #35e8ff 50%, transparent); }
.rt-saved { font-size: 11px; color: var(--fg); } .rt-saved b { color: #33ff88; }
.box-cheap { display: inline-block; font-size: 9.5px; font-weight: bold; letter-spacing: .4px; color: #33ff88; border: 1px solid color-mix(in srgb, #33ff88 50%, transparent); border-radius: 999px; padding: 1px 7px; margin-right: 6px; white-space: nowrap; }
/* v2.31.479: Status -> NEEDS A HUMAN */
.at-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 10px; }
.at-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1px; color: var(--fg-bright); background: transparent; border: 1px solid color-mix(in srgb, var(--s) 60%, var(--border)); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.at-pill b { color: var(--s); font-size: 12.5px; }
.at-pill.ok { opacity: .55; } .at-pill:hover { background: color-mix(in srgb, var(--s) 10%, transparent); }
.at-pill.on { background: color-mix(in srgb, var(--s) 18%, transparent); opacity: 1; }
.at-card { background: var(--bg-panel-2, #0e1424); border: 1px solid var(--border); border-left: 3px solid var(--s); border-radius: 7px; padding: 8px 10px; margin-bottom: 7px; cursor: pointer; }
.at-card:hover { border-color: color-mix(in srgb, var(--s) 45%, var(--border)); }
.at-t { display: flex; gap: 9px; align-items: baseline; }
.at-n { font-size: 17px; font-weight: 800; color: var(--s); min-width: 14px; }
.at-w { color: var(--fg-bright); font-size: 12px; line-height: 1.35; }
.at-m { display: flex; gap: 8px; color: var(--fg-dim); font-size: 10.5px; margin-top: 3px; }
.at-m span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-m a { margin-left: auto; color: var(--cyan); white-space: nowrap; }
.at-more { text-align: center; color: var(--fg-dim); font-size: 10.5px; margin-top: 4px; } .at-more a { color: var(--cyan); cursor: pointer; }
.at-clear { border: 1px dashed #33ff88; color: #33ff88; border-radius: 9px; padding: 12px; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; }
.at-clear small { display: block; font-weight: normal; letter-spacing: 0; color: var(--fg-dim); font-size: 10px; margin-top: 5px; }
.at-empty { color: var(--fg-dim); font-size: 12px; padding: 6px 0; }
/* v2.31.480: clear (X) on a NEEDS A HUMAN card */
.at-x { margin-left: auto; align-self: flex-start; background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 11px; padding: 0 2px 0 6px; line-height: 1; }
.at-x:hover { color: #ff4f6d; }
.at-cl { margin-top: 6px; } .at-okt { color: #33ff88; }
/* v2.31.481: Settings -> STATUS ROOM backdrop picker */
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 10px; margin-top: 8px; }
.rb { background: none; border: 2px solid transparent; border-radius: 10px; padding: 5px; cursor: pointer; color: inherit; font: inherit; font-size: 11px; letter-spacing: .06em; opacity: .8; display: flex; flex-direction: column; align-items: center; }
.rb:hover { opacity: 1; border-color: rgba(255,255,255,.15); }
.rb.on { border-color: #33ff88; opacity: 1; }
.rb b { display: block; margin-top: 5px; }
.rb-pic { width: 170px; height: 84px; overflow: hidden; border-radius: 6px; }
.rb-pic .to-cr { zoom: .5; border-radius: 12px; }
.rb-dice { width: 170px; height: 84px; border: 1px dashed rgba(255,255,255,.25); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-sizing: border-box; }
/* v2.31.482: desk statuses (test) -- props at their own resolution, marquee name panel, click a seat to cycle */
.to-ds { image-rendering: pixelated; pointer-events: none; }
canvas.to-mq { image-rendering: pixelated; }
.to-ds-hit { position: absolute; cursor: pointer; }
.to-ds-hit:hover { outline: 1px dashed rgba(255,255,255,.25); outline-offset: -1px; border-radius: 4px; }
/* v2.31.486: P&L invoice track -- half-filled dot when some boxes are in, a hover on each dot */
.op-trk .shp-track i { cursor: help; transition: transform .12s; }
.op-trk .shp-track i:hover { transform: scale(1.5); }
.op-trk .shp-track i.half { border-color: var(--c); background: linear-gradient(90deg, var(--c) 50%, var(--bg) 50%); }
/* v2.31.488: partly invoiced = a dashed line on to the half-filled dot (the solid line is what's final) */
.op-trk .op-dash { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px); opacity: .8; }
/* v2.31.489: P&L list -- ESTIMATE / FINAL under the margin, estimates a shade dimmer (no ~, no margin bar) */
.op-dimv { opacity: .6; }
.op-mg .op-ltag { font-style: normal; }
/* v2.31.490: PROFIT last -- SPLIT note and the ESTIMATE / FINAL badge on one line under it */
.op-prsub { display: flex; justify-content: flex-end; align-items: center; gap: 8px; white-space: nowrap; }
/* v2.31.493: Profit sidebar -- VENDOR MIX, a multi-select vendor filter */
.op-vmh a { margin-left: 6px; color: var(--cyan); cursor: pointer; letter-spacing: .5px; }
.op-vmh .op-dim { letter-spacing: .5px; font-size: 10px; }
.op-vmring { display: flex; justify-content: center; margin: 6px 0 10px; }
.op-vmring svg { width: 170px; height: 170px; }
.op-vmring circle[onclick]:hover { stroke-width: 30; }
.op-vmgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.op-vm { display: flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; border-radius: 5px; padding: 4px 6px; color: var(--fg-bright); font: inherit; font-size: 11px; cursor: pointer; text-align: left; min-width: 0; }
.op-vm:hover { background: rgba(255,255,255,.05); }
.op-vm i { width: 10px; height: 10px; border-radius: 3px; flex: none; box-shadow: 0 0 5px currentColor; }
.op-vm span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .5px; }
.op-vm b { flex: none; }
.op-vm.on { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }
.op-vm.off { opacity: .4; }
.op-vmgrid { margin-bottom: 14px; }
/* v2.31.497: Settings -> Vendors redesign (mockup A) -- every feed with SYNC / FULL pills, ✎ opens every setting */
.vc2-grid { align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); }   /* v2.31.498: cards in a row line up (same height, footers on one line) */
.vc2 { border-top: 3px solid var(--vc); }
.vc2.editing { grid-column: auto; }   /* v2.31.499: ✎ edits in place, same width -- the card just grows down */
.vc2.vc2-short { align-self: start; }   /* the cards beside an open one keep their own height */
.vc2.editing .vc2-lb { width: 96px; }
.vc2.editing .vc2-lbs { width: auto; margin-left: 0; }
.vc2-head { background: linear-gradient(90deg, color-mix(in srgb, var(--vc) 12%, transparent), transparent); }
.vc2-pen { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--fg); cursor: pointer; font-size: 13px; flex: none; }
.vc2-pen:hover, .vc2-pen.on { border-color: var(--cyan); color: var(--cyan); }
.vc2-lane { font-size: 9.5px; letter-spacing: .14em; color: var(--fg-dim); opacity: .75; padding: 9px 12px 3px; }
.vc2-fr { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; padding: 6px 12px; border-top: 1px solid rgba(255,255,255,.04); }
.vc2-ft { min-width: 0; }
.vc2-what { color: var(--fg-bright); font-size: 12px; }
.vc2-sch { color: var(--fg-dim); font-size: 11px; }
.vc2-run { color: var(--fg-dim); font-size: 10.5px; margin-top: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc2-run.err { color: var(--status-outofstock-bg); }
.vc2-btns { display: flex; gap: 6px; flex: none; }
.vc2-none { padding: 10px 12px; color: var(--fg-dim); font-size: 11px; }
.vc2-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vc2-mini { font-size: 9px; padding: 2px 7px; }
.vc2-tool { font-size: 10.5px; }
.vc2-ed { border-top: 1px solid var(--border); background: rgba(0,0,0,.18); padding: 10px 14px 14px; }
.vc2-sec { font-size: 9.5px; letter-spacing: .16em; color: #ffb14a; margin: 14px 0 8px; }
.vc2-sec:first-child { margin-top: 4px; }
.vc2-sec .vc-dim { letter-spacing: 0; margin-left: 6px; }
.vc2-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.vc2-lb { color: var(--fg-dim); font-size: 11px; width: 110px; flex: none; }
.vc2-lbs { width: auto; margin-left: 10px; }
.vc2-in { background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 6px; color: var(--fg-bright); font: inherit; font-size: 12px; padding: 5px 8px; }
.vc2-in.off { color: var(--fg-dim); }
.vc2-sw { width: 32px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: none; padding: 1px; cursor: pointer; }
.vc2-prev .vc-pill { margin-left: 2px; }
.vc2-chips { display: inline-flex; gap: 4px; }
.vc2-chips button { font: inherit; font-size: 10px; letter-spacing: .8px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--fg-dim); cursor: pointer; }
.vc2-chips button.on { border-color: var(--cyan); color: var(--cyan); }
.vc2-tg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 10.5px; color: var(--fg-dim); }
.vc2-tg input { display: none; }
.vc2-tg i { width: 28px; height: 15px; border-radius: 9px; background: #2a3552; position: relative; transition: background .15s; }
.vc2-tg i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #06101c; transition: left .15s; }
.vc2-tg input:checked + i { background: var(--status-instock-bg); }
.vc2-tg input:checked + i::after { left: 15px; }
.vc2-fed { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.vc2-fedh { display: flex; align-items: center; gap: 8px; }
.vc2-fedh b { color: var(--fg-bright); font-weight: normal; font-size: 12px; }
.vc2-fedh .vc2-btns { margin-left: auto; }
.vc2-fed .feed-sched-line { font-size: 11px; color: var(--fg-dim); }
.vc2-ex { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vc2-ex span { border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; font-size: 10.5px; color: var(--fg); }
.vc2-link { color: var(--cyan); cursor: pointer; font-size: 10.5px; }
.vc2-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vc2-save, .vc2-done { font-size: 10.5px; letter-spacing: .8px; }
.vc2-done { background: var(--cyan); color: #06101c; border-color: var(--cyan); font-weight: bold; }

/* v2.31.498: everything on a vendor card 1.2x bigger for readability (text, pills, buttons, spacing) */
.vc2 { zoom: 1.2; }
@media (max-width: 1100px) { .vc2-grid { grid-template-columns: minmax(0, 1fr); } }
/* v2.31.500: Settings -> Time off -> SCENE EDITOR (big live preview, one row per layer) */
.se-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.se-lbl { font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); width: 64px; flex: none; }
.se-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.se-chip:hover { border-color: var(--fg-dim); color: var(--fg-bright); }
.se-chip.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; }
.se-chip.on .se-faint { color: #0d4a55; }
.se-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.se-faint { color: var(--fg-dim); font-weight: normal; }
.se-av { width: 20px !important; height: 20px !important; border-radius: 5px; image-rendering: pixelated; margin-left: -5px; }
.se-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff9d35; display: inline-block; }
.se-note { margin: 2px 0 10px; }
.se-tag { display: inline-block; font-size: 11px; color: var(--fg-dim); border: 1px dashed var(--border); border-radius: 6px; padding: 3px 8px; }
.se-tag.own { color: #ff9d35; border: 1px solid rgba(255,157,53,.4); }
.se-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.se-sp { width: 10px; }
.se-prev { background: #04060c; border: 1px solid var(--border); border-radius: 10px; padding: 14px; overflow: auto; user-select: none; -webkit-user-select: none; touch-action: none; }
.se-prev .to-cr { margin: 0 auto; max-width: none; }
.to-sl-ed { cursor: move; }
.to-sl-sel { outline: 1px dashed rgba(53,232,255,.9); outline-offset: 0; }
.to-cr-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(53,232,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(53,232,255,.22) 1px, transparent 1px); }
.se-seat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; font-size: 11.5px; }
.se-seat .to-dim { margin-right: 2px; }
.se-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.se-table th { text-align: left; font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); font-weight: normal; padding: 4px 6px; }
.se-table td { padding: 5px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.se-table tr { cursor: pointer; }
.se-table tr:not(:first-child):hover td { background: rgba(255,255,255,.02); }
.se-table tr.sel td { background: rgba(53,232,255,.06); }
.se-table tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--cyan); }
.se-table tr.off td:not(.se-acts) { opacity: .45; }
.se-table b { color: var(--fg-bright); font-weight: normal; font-size: 12.5px; }
.se-table small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.se-th { width: 44px; }
.se-th img, .se-th .se-thav { width: 36px !important; height: 36px !important; object-fit: contain; image-rendering: pixelated; background: #141b2e; border-radius: 6px; display: block; }
.se-name { width: 150px; }
.se-sel { max-width: 120px; }
.se-sits.head { font-size: 11px; color: var(--cyan); border: 1px solid rgba(53,232,255,.4); border-radius: 999px; padding: 2px 9px; }
.se-n { width: 58px; text-align: right; }
.se-nud { display: inline-flex; gap: 2px; }
.se-nud button, .se-acts button { font: inherit; font-size: 11px; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: transparent; color: var(--fg); cursor: pointer; }
.se-nud button:hover, .se-acts button:hover:not(:disabled) { border-color: var(--fg-dim); color: var(--fg-bright); }
.se-acts { white-space: nowrap; text-align: right; }
.se-acts button { margin-left: 2px; }
.se-acts button.on { border-color: var(--cyan); color: var(--cyan); }
.se-acts button:disabled { opacity: .3; cursor: default; }
.se-acts .se-del:hover { border-color: #5a2030; color: #ff4f6d; }
.se-drop { margin-top: 10px; border: 1.5px dashed var(--border); border-radius: 9px; padding: 12px; text-align: center; color: var(--fg-dim); font-size: 11.5px; cursor: pointer; }
.se-drop:hover, .se-drop.over { border-color: var(--cyan); color: var(--cyan); }
.se-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.se-copy { border-color: #ff9d35; color: #ff9d35; }
.se-copy:disabled { opacity: .4; }
.se-kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 10px; }
.se-copybox { margin-top: 14px; border: 1px solid rgba(255,157,53,.35); border-radius: 10px; padding: 12px 14px; background: rgba(255,157,53,.03); }
.se-cps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 14px; margin-bottom: 10px; }
.se-cp { display: flex; align-items: center; gap: 9px; padding: 7px 2px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12px; }
.se-cp .to-small { margin-left: auto; }
.se-cb { width: 15px; height: 15px; border: 1.5px solid var(--fg-dim); border-radius: 4px; display: inline-block; flex: none; }
.se-cb.on { background: var(--cyan); border-color: var(--cyan); box-shadow: inset 0 0 0 2px #04252b; }
@media (max-width: 760px) { .se-table th:nth-child(7), .se-table td:nth-child(7) { display: none; } .se-name { width: 100px; } }
.se-lbl { width: 84px; }
.se-table th:nth-child(3) { width: 140px; } .se-table th:nth-child(4) { width: 72px; } .se-table th:nth-child(5), .se-table th:nth-child(6) { width: 76px; } .se-table th:nth-child(7) { width: 120px; }
.se-size { width: 62px; }
/* v2.31.503: Status WHO'S OUT -- OUT TODAY rows under the room (mockup A) */
.to-orow { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; font-size: 12px; padding: 4px 0; }
.to-orow i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.to-ot { margin-left: 8px; }
.to-obk { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.to-obk b { color: #33ff88; font-weight: normal; }
/* v2.31.503: "NONE · DESKS ONLY" room -- see-through, no grey box behind the desks */
.to-cr.to-cr-none { background: transparent; }
/* v2.31.504: no backdrop -- no navy panel / dashed floor behind the room, and the room is cropped to what's drawn */
.to-cr-in { position: absolute; left: 0; width: 100%; }
.to-stage.to-stage-bare { background: none; padding: 4px 0 2px; min-height: 0; border-radius: 0; }
.to-stage.to-stage-bare .to-cr { border-radius: 0; }
/* v2.31.504: NEEDS A HUMAN moved to the right column (under CROSS DOCK PO), VENDOR MIX to the left under the action board.
   Phones keep NEEDS A HUMAN right after the action board, and VENDOR MIX with the right-column panels. */
@media (max-width: 900px) { .mc-3col #status-attention-panel { order: 1; } .mc-3col #status-vmix-panel { order: 3; } }
.op-mt tr.op-warnr.op-click { cursor: pointer; } .op-mt tr.op-warnr.op-click:hover td { text-decoration: underline dotted; }   /* v2.31.506 */
.op-bill.zero { opacity: .5; } .op-bill small { color: var(--tc); }   /* v2.31.506: VENDOR BILLING bento */
.op-tiles.op-bills { grid-template-columns: repeat(3, 1fr); } .op-bills .op-tile span { font-size: 9.5px; }   /* v2.31.507: + PRICE MOVED */
.op-flinv { margin-left: 8px; font-size: .92em; color: #b388ff; border: 1px solid rgba(179,136,255,.45); border-radius: 999px; padding: 1px 9px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.op-flinv:hover { color: #d6c2ff; border-color: #b388ff; }   /* v2.31.508 */
.pf-badge.pf-badge-go { cursor: pointer; } .pf-badge.pf-badge-go:hover { background: rgba(255,255,255,.06); } .pf-badge.pf-badge-go::after { content: " ↗"; }   /* v2.31.509 */
.op-focus { margin: 4px 0 10px; padding: 8px 12px; border: 1px dashed rgba(255,207,61,.45); border-radius: 8px; color: var(--fg); font-size: 12px; } .op-focus b { color: #ffcf3d; font-weight: normal; } .op-focus a { color: var(--cyan); cursor: pointer; }   /* v2.31.509 */
/* v2.31.510: EXPERIMENTS (js/labs.js) */
.icon-btn[data-view="labs"] { --g: #b388ff; }
.lab-home { max-width: 980px; padding: 6px 4px; }
.lab-h { font-size: 13px; letter-spacing: .16em; color: #b388ff; margin: 4px 0 14px; } .lab-h span { letter-spacing: .02em; color: var(--fg-dim); font-size: 12px; margin-left: 10px; }
.lab-card { display: block; width: 100%; text-align: left; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid #b388ff; border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; color: var(--fg); font-family: var(--font-mono); cursor: pointer; }
.lab-card:hover { border-color: #b388ff; }
.lab-card b { display: block; font-size: 14px; color: var(--fg-bright); font-weight: normal; margin: 6px 0 4px; } .lab-card small { display: block; color: var(--fg-dim); font-size: 12px; line-height: 1.5; } .lab-card em { display: block; font-style: normal; color: #b388ff; font-size: 11px; margin-top: 8px; }
.lab-tag, .lab-name i { font-style: normal; font-size: 9.5px; letter-spacing: .12em; padding: 2px 7px; border-radius: 4px; background: rgba(179,136,255,.15); color: #b388ff; border: 1px solid rgba(179,136,255,.45); }
.lab-about p { color: var(--fg-dim); font-size: 12px; line-height: 1.6; }
.lab-sec { font-size: 10.5px; letter-spacing: .16em; color: var(--fg-dim); margin: 18px 0 8px; display: flex; justify-content: space-between; gap: 10px; } .lab-sec span { letter-spacing: .02em; font-size: 11px; }
.lab-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.lab-back { color: #b388ff; font-size: 11px; letter-spacing: .12em; cursor: pointer; } .lab-name { color: var(--fg-bright); font-size: 13px; letter-spacing: .08em; }
.lab-tabs { display: flex; gap: 4px; margin-left: 8px; }
.lab-tabs button { font: inherit; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); cursor: pointer; }
.lab-tabs button.on { background: var(--cyan); border-color: var(--cyan); color: #04252b; font-weight: bold; } .lab-tabs button b { color: #ff9d35; } .lab-tabs button.on b { color: #7a2d00; }
.lab-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; font-size: 11px; } .lab-seg span { padding: 5px 10px; color: var(--fg-dim); cursor: pointer; } .lab-seg span.on { background: var(--cyan); color: #04252b; font-weight: bold; }
.lab-rep { margin-left: auto; position: relative; }
.lab-rep > button { font: inherit; font-family: var(--font-mono); font-size: 11.5px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; }
.lab-menu { position: absolute; right: 0; top: 36px; width: 300px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px; z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.lab-menu a { display: block; padding: 8px 10px; border-radius: 6px; font-size: 12px; color: var(--fg-bright); cursor: pointer; } .lab-menu a small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; } .lab-menu a:hover { background: rgba(255,255,255,.05); }
.lab-mnote { font-size: 10px; color: var(--fg-dim); padding: 4px 10px 2px; letter-spacing: .08em; }
.lab-chip { margin: 0 0 8px; } .lab-chip span { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid #ff4f6d; color: #ff4f6d; cursor: pointer; }
.lab-big { display: flex; gap: 20px; align-items: flex-end; } .lab-big span { display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--fg-dim); } .lab-big b { font-size: 24px; font-weight: normal; color: var(--fg-bright); }
.lab-big b.amb { color: #ffcf3d; } .lab-big b.neg { color: #ff4f6d; }
.lab-dim { color: var(--fg-dim); font-size: 11px; margin-top: 5px; }
.lab-look { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lab-lk { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 8px 12px 8px 0; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--fg); font-family: var(--font-mono); text-align: left; cursor: pointer; }
.lab-lk:first-child { border-top: 0; } .lab-lk:hover, .lab-lk.on { background: rgba(255,255,255,.045); } .lab-lk.on i { box-shadow: 0 0 8px var(--c); }
.lab-lk i { align-self: stretch; background: var(--c); } .lab-lk b { display: block; font-weight: normal; font-size: 12px; color: var(--fg-bright); } .lab-lk small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.lab-n { text-align: right; font-size: 15px; color: var(--c); } .lab-n small { color: var(--fg-dim); font-size: 10.5px; }
.lab-more { display: flex; justify-content: space-between; width: 100%; margin-top: 14px; border: 1px dashed var(--border); border-radius: 8px; padding: 8px 12px; background: transparent; color: var(--fg-dim); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.lab-moreb { margin-top: 6px; }
.lab-foot { margin-top: 18px; font-size: 10.5px; color: var(--fg-dim); } .lab-foot a { color: #b388ff; cursor: pointer; }
.lab-evs-wrap { margin: 4px 18px 16px; }
.lab-ev { border: 1px solid var(--border); border-left: 3px solid #b388ff; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: rgba(179,136,255,.03); }
.lab-ev.lab-evs { border-left-color: #35e8ff; background: rgba(53,232,255,.03); }
.lab-evh { font-size: 11px; letter-spacing: .1em; color: var(--fg-bright); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.lab-evsrc { margin-left: auto; display: inline-flex; gap: 6px; }
.lab-evflags { color: #ff9d35; font-size: 11.5px; margin: 2px 0 8px; line-height: 1.6; }
.lab-evacts { margin-top: 8px; display: flex; gap: 6px; }
.lab-evr { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 3px 0; } .lab-evr a { color: var(--cyan); cursor: pointer; }
.lab-ok { color: #33ff88; } .lab-view .or { color: #ff9d35; } .lab-view .amb { color: #ffcf3d; }
.lab-grid td.lab-wk { cursor: pointer; } .lab-grid td.lab-wk b { display: block; font-weight: normal; } .lab-grid td.lab-wk small { color: var(--fg-dim); font-size: 10.5px; }
.lab-grid td.lab-wk:hover { background: rgba(255,255,255,.04); }
.lab-view .why-t { font-size: 10px; letter-spacing: .06em; padding: 1px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; }

/* v2.31.529: Vendor Inventory → ★ EXCLUSIVES (ECN stock ledger) */
#ex-main { padding: 14px 16px 30px; font-family: var(--font-mono); }
.ex-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 12px; letter-spacing: .06em; }
.ex-head b { color: #ffb14a; letter-spacing: .14em; font-weight: normal; }
.ex-head .pu-mini { margin-left: auto; }
.ex-table td { vertical-align: top; }
.ex-table th.n, .ex-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ex-row { cursor: pointer; }
.ex-row.flag td { background: rgba(255,79,109,.04); }
.ex-row.dim { opacity: .55; cursor: default; }
.ex-t { color: var(--fg-bright); }
.ex-d { color: var(--fg-dim); font-size: 10.5px; }
#ex-main .bad, .ex-drawer .bad { color: #ff4f6d; } #ex-main .ok, .ex-drawer .ok { color: #33ff88; } #ex-main .warn { color: #ffcf3d; } #ex-main .cy { color: var(--cyan); }
.ex-chip { font-size: 9px; letter-spacing: .08em; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.ex-chip.bad { color: #ff4f6d; } .ex-chip.ok { color: #33ff88; } .ex-chip.warn { color: #ffcf3d; }
.ex-drawer { margin: 4px 0 12px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #0b111f; }
.ex-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 12px; margin-bottom: 10px; }
.ex-eq b { font-size: 17px; color: var(--fg-bright); font-weight: normal; } .ex-eq span { color: var(--fg-dim); }
.ex-eq b.bad { color: #ff4f6d; } .ex-eq b.warn { color: #ffcf3d; } .ex-eq b.ok { color: #33ff88; }
.ex-eq span.bad { color: #ff4f6d; } .ex-eq span.warn { color: #ffcf3d; } .ex-eq span.ok { color: #33ff88; }
.ex-short { font-size: 11.5px; color: #ffcf3d; margin: 0 0 8px; }
.ex-short a, .ex-tl a { color: var(--cyan); cursor: pointer; border-bottom: 1px dashed currentColor; }
.ex-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.ex-explain { display: flex; gap: 6px; align-items: center; margin: -2px 0 10px; }
.ex-tl { display: grid; grid-template-columns: 150px 96px 110px 60px 92px minmax(0, 1fr); gap: 8px; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed #1c2740; }
.ex-tl.h { color: var(--fg-dim); font-size: 9.5px; letter-spacing: .14em; border-bottom: 1px solid var(--border); }
.ex-tl.unexplained { color: #ff4f6d; }
.ex-msg { font-size: 11.5px; margin-bottom: 8px; }
.ex-empty { color: var(--fg-dim); font-size: 12px; padding: 30px 4px; }
.ex-ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ex-tile { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: #0b111f; font-family: var(--font-mono); }
.ex-tile .l { font-size: 9px; letter-spacing: .14em; color: var(--fg-dim); } .ex-tile .n { font-size: 18px; } .ex-tile .s { font-size: 10px; color: var(--fg-dim); }
.ex-checkall { width: 100%; margin-bottom: 12px; }
.ex-how { font-size: 10.5px; line-height: 1.6; color: var(--fg-dim); font-family: var(--font-mono); }
.ex-how b { color: var(--fg); letter-spacing: .14em; font-weight: normal; }
/* v2.31.530: Exclusives -- sync button on top, Shipments-style bento (clickable), sortable columns, POs on the way */
.ex-sync { margin-bottom: 12px; }
.ex-bento .shp-tile.on { background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: inset 0 0 0 1px var(--tc); }
.ex-table th.ex-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ex-table th.ex-sortable:hover, .ex-table th.ex-sortable.on { color: var(--cyan); }
#ex-main td.ex-nj { color: #b388ff; } #ex-main td.ex-ca { color: #ff9d35; }
.ex-clear { color: var(--cyan); cursor: pointer; text-decoration: underline dotted; }
.ex-sec { font-size: 9.5px; letter-spacing: .14em; color: var(--fg-dim); margin: 6px 0 6px; }
.ex-pos { margin-bottom: 10px; }
.ex-po { display: grid; grid-template-columns: 150px 90px 190px minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: 11.5px; padding: 5px 0; border-bottom: 1px dashed #1c2740; }
.ex-po a { color: var(--cyan); cursor: pointer; border-bottom: 1px dashed currentColor; justify-self: start; }
.ex-po b { color: #ffcf3d; font-weight: normal; }
.ex-wh { font-size: 9.5px; letter-spacing: .08em; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; justify-self: start; }
.ex-wh.nj { color: #b388ff; } .ex-wh.ca { color: #ff9d35; }
.ex-note { font-size: 10.5px; color: var(--fg-dim); margin: -4px 0 12px; font-family: var(--font-mono); } .ex-note a { color: var(--cyan); cursor: pointer; text-decoration: underline dotted; }
.ex-bento .shp-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* v2.31.533: Exclusives is its own corner -- nothing from the products page shows through */
.products-scroll.ex-on > :not(#ex-main) { display: none !important; }
body.ex-mode #vendor-filter, body.ex-mode #status-filter { display: none !important; }
.pch-resync { margin: 4px 0 14px; }   /* v2.31.534 */
.pch-ctl.pch-ctl-top { margin: 0 0 12px; }
/* v2.31.535: ⤓ CSV pill (Shopify → Changes) */
.pch-csv { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; font-weight: 800;
  border: 1px solid rgba(53,232,255,.5); color: var(--cyan); background: transparent; border-radius: 8px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.pch-csv:hover { background: rgba(53,232,255,.08); box-shadow: 0 0 8px rgba(53,232,255,.25); }
.pch-csv:disabled { opacity: .35; cursor: default; box-shadow: none; }
.pch-csv svg { width: 13px; height: 13px; }
/* v2.31.537: Changes tiles in the shared bento look */
.pch-bento .shp-tile { background: transparent; font: inherit; width: 100%; }
.pch-bento .shp-tile.on { background: color-mix(in srgb, var(--tc) 12%, transparent); box-shadow: inset 0 0 0 1px var(--tc); }
.pch-bento .shp-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pch-bento .shp-tile b { font-family: var(--font-mono); }

/* v2.31.538: a shipment's journey (click a row) -- the places its UPS scans came from, as stops on a line */
.shp-jr { margin: -2px 0 12px 18px; padding: 14px 16px 12px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px; background: rgba(10, 17, 32, .7); cursor: default; }
.shp-jr-box { display: inline-block; font-size: 9.5px; letter-spacing: .12em; color: #ffb14a; margin-bottom: 10px; }
.shp-jr-wait { padding: 4px 0 8px; }
.shp-jmap { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 2px 0 10px; }
.shp-stop { position: relative; text-align: center; padding: 20px 4px 0; font-size: 11px; min-width: 0; }
.shp-stop::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--c, #35e8ff); box-shadow: 0 0 5px var(--c, #35e8ff); opacity: .85; }
.shp-stop:first-child::before { left: 50%; }
.shp-stop:last-child::before { right: 50%; }
.shp-jmap.going .shp-stop.now::before { right: 0; background: linear-gradient(90deg, var(--c) 50%, transparent 50%); box-shadow: none; }
.shp-stop.fut::before { background: repeating-linear-gradient(90deg, #3d4d6e 0 6px, transparent 6px 11px); box-shadow: none; opacity: 1; }
.shp-stop i { position: absolute; top: 1px; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--c, #35e8ff); z-index: 1; }
.shp-stop.now i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent), 0 0 10px var(--c); }
.shp-stop.fut i { background: var(--bg); border: 2px solid #3d4d6e; box-sizing: border-box; }
.shp-stop b { display: block; color: var(--fg-bright); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-stop b em { display: block; font-style: normal; font-size: 9.5px; color: #33ff88; letter-spacing: .06em; }
.shp-stop.now b { color: var(--c); font-weight: 700; }
.shp-stop.fut b, .shp-stop.fut small { color: var(--fg-dim); }
.shp-stop small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; line-height: 1.3; }
.shp-stop small.shp-stop-n { font-size: 9px; color: #3d4d6e; }
.shp-jmap.tight .shp-stop { font-size: 10px; } .shp-jmap.tight .shp-stop small { font-size: 9px; }
.shp-jr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 9px; }
.shp-jr-acts { display: flex; gap: 8px; }
.shp-jr-acts .ct-btn { text-decoration: none; }
.shp-jscans { margin-top: 10px; position: relative; padding-left: 18px; }
.shp-jscans::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: #1c2740; }
.shp-jday { color: #ffb14a; font-size: 9.5px; letter-spacing: .14em; padding: 8px 0 2px; }
.shp-jsc { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 170px; gap: 12px; font-size: 11.5px; padding: 3px 0; }
.shp-jsc::before { content: ""; position: absolute; left: -18px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); border: 1.5px solid #3d4d6e; }
.shp-jsc.now::before { background: #35e8ff; border-color: #35e8ff; box-shadow: 0 0 7px #35e8ff; }
.shp-jsc.now { color: var(--fg-bright); }
.shp-bx.pick { cursor: pointer; border-radius: 6px; } .shp-bx.pick:hover { background: rgba(53, 232, 255, .05); }
.shp-bx.pick.on { background: rgba(53, 232, 255, .08); box-shadow: inset 2px 0 0 #35e8ff; }
.shp-boxes2 + .shp-jr { border-top: 1px solid var(--border); border-radius: 10px; margin-top: 4px; }
@media (max-width: 800px) {
  .shp-jr { margin-left: 0; padding: 12px 10px; }
  .shp-jmap { grid-template-columns: 1fr; }
  .shp-stop { text-align: left; padding: 0 0 12px 26px; }
  .shp-stop::before, .shp-stop:first-child::before, .shp-stop:last-child::before { top: 0; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
  .shp-stop:first-child::before { top: 6px; } .shp-stop:last-child::before { bottom: auto; height: 6px; }
  .shp-jmap.going .shp-stop.now::before { background: var(--c); right: auto; }
  .shp-stop.fut::before { background: repeating-linear-gradient(180deg, #3d4d6e 0 5px, transparent 5px 9px); }
  .shp-stop i { left: 2px; top: 1px; }
  .shp-jsc { grid-template-columns: 64px minmax(0, 1fr); } .shp-jsc > :nth-child(3) { grid-column: 2; }
}
.shp-stop small.shp-signed { color: #33ff88; font-size: 9.5px; letter-spacing: .04em; }   /* v2.31.539 */
.pu-att .t small { white-space: normal; line-height: 1.45; }   /* v2.31.540: the latest on the boxes can take two lines */
#status-hs-seg button.on { background: #ffcf3d; color: #1a1204; box-shadow: 0 0 8px rgba(255,207,61,.55); }   /* v2.31.541: HIGH SCORES gold */

/* v2.31.544: P&L → SHIPPING side panel, mockup C -- big NET number + one 100% bar per breakdown */
.civ-mixC .civ-big { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 8px; flex-wrap: wrap; }
.civ-mixC .civ-big b { font-size: 30px; font-weight: 800; letter-spacing: .02em; }
.civ-mixC .civ-big b.bad { color: #ff4f6d; text-shadow: 0 0 12px rgba(255, 79, 109, .45); }
.civ-mixC .civ-big b.good { color: #33ff88; text-shadow: 0 0 12px rgba(51, 255, 136, .4); }
.civ-mixC .civ-big span { font-size: 9.5px; letter-spacing: .14em; color: var(--fg-dim); }
.civ-mixh { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px !important; }
.civ-mixh a { color: var(--cyan); cursor: pointer; letter-spacing: .06em; text-transform: none; font-size: 10px; }
.civ-mixh span { color: var(--fg-dim); letter-spacing: .06em; text-transform: none; font-size: 10px; }
.civ-mbar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; margin: 5px 0 6px; }
.civ-mbar i { display: block; min-width: 3px; background: var(--c); cursor: pointer; transition: opacity .12s, filter .12s; }
.civ-mbar i:hover { filter: brightness(1.25) drop-shadow(0 0 4px var(--c)); }
.civ-mbar i.dim { opacity: .2; }
.civ-mbar i.on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.civ-mkeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; }
.civ-mk { display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 7px; align-items: center; background: transparent; border: 0; border-radius: 5px; padding: 5px 7px; font: inherit; font-size: 11px; color: var(--fg-bright); cursor: pointer; text-align: left; min-width: 0; }
.civ-mk i { grid-row: 1; width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 5px var(--c); }
.civ-mk em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.civ-mk small { grid-column: 2; display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; }
.civ-mk small span { color: var(--fg-dim); }
.civ-mk b { font-weight: normal; color: var(--fg-dim); } .civ-mk b.bad { color: #ff4f6d; } .civ-mk b.good { color: #33ff88; }
.civ-mk:hover { background: rgba(255, 255, 255, .04); }
.civ-mk.on { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 2px 0 0 var(--c); }
.civ-mk.dim { opacity: .45; }
.civ-mmore { grid-column: 1 / -1; font-size: 10px; color: var(--cyan); cursor: pointer; padding: 3px 6px; letter-spacing: .04em; }
.civ-lk2 { padding-top: 5px; padding-bottom: 5px; }
/* v2.31.545: LEAKS & CLAIMS rows that open their own list; the UPS CSV drop at the bottom */
.civ-go span em { font-style: normal; font-size: 9px; letter-spacing: .08em; color: var(--tc); opacity: .8; margin-left: 4px; }
.civ-go.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 10%, transparent); }
.civ-backord { display: inline-block; font-size: 10px; letter-spacing: .12em; color: var(--cyan); cursor: pointer; margin: 2px 0 8px; }
.civ-upbox { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* v2.31.549: Vendor Mail on a phone -- a proper card per message (the desktop table's width tricks collapsed the subject
   and stacked the time on the sender). Row 1: sender · time · 📎   row 2: subject   row 3: snippet   row 4: kind + refs */
@media (max-width: 800px) {
  .products-scroll .ml-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who dt att" "subj subj subj" "kind refs refs"; gap: 5px 10px; align-items: center; padding: 11px 12px; }
  .products-scroll .ml-table tbody td { width: auto !important; max-width: none !important; min-width: 0; }
  .products-scroll .ml-table td.ml-dt { grid-area: dt; font-size: 10.5px; text-align: right; }
  .products-scroll .ml-table td.ml-who { grid-area: who; max-width: 100% !important; }
  .products-scroll .ml-table td.ml-who .vendor-pill { max-width: 100%; }
  .products-scroll .ml-table td.ml-subj { grid-area: subj; }
  .products-scroll .ml-table td.ml-subj b { font-size: 13px; }
  .products-scroll .ml-table td.ml-subj small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 3px; }
  .products-scroll .ml-table td:nth-child(4) { grid-area: kind; }
  .products-scroll .ml-table td.ml-refs { grid-area: refs; display: block !important; justify-self: end; white-space: normal; text-align: right; }
  .products-scroll .ml-table td.ml-attc { grid-area: att; border: 0; background: none; padding: 0 !important; font-size: 11px; text-align: left; }
  .products-scroll .ml-table td.ml-attc:empty { display: none; }
  .products-scroll .ml-table tr.unread td:first-child::before { content: none; }
  .products-scroll .ml-table tr.unread { box-shadow: inset 3px 0 0 var(--cyan); }
  .products-scroll .ml-table tr.unread td.ml-who::before { content: "●"; color: var(--cyan); margin-right: 6px; font-size: 9px; }
}

/* v2.31.550 (mockup B): Status on a phone -- brand + update time in the top bar, no grid header, half the side
   padding, Action Board tiles two across */
.m-brand { display: none; }
@media (max-width: 800px) {
  body.on-status #page-title { display: none; }
  body.on-status #m-panel-btn[style*="hidden"] { display: none; }   /* Status has no side panel -- its hidden button held a gap */
  body.on-status .m-brand { display: flex; flex: 1; margin-left: 4px; align-items: baseline; gap: 8px; min-width: 0; cursor: pointer; font-family: var(--font-mono); }
  body.on-status .m-brand img { width: 18px; height: 18px; align-self: center; }
  body.on-status .m-brand b { font-weight: 800; letter-spacing: .14em; color: #ff4fd8; text-shadow: 0 0 10px rgba(255, 79, 216, .6); font-size: 14px; white-space: nowrap; }
  body.on-status .m-brand small { font-size: 10px; letter-spacing: .06em; color: var(--fg-dim); white-space: nowrap; }
  body.on-status .sw-header { display: none !important; }
  body.on-status #status-actions.stack { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.on-status #status-actions.stack > * { min-width: 0; min-height: 0 !important; padding: 10px 12px !important; }
}
/* v2.31.551: est. sales -- a one-day spike reads as noise (hollow, hatched, dashed edge) */
.uh-sbar.spike { fill: url(#uh-hatch); opacity: 1; stroke: #33ff88; stroke-opacity: .5; stroke-width: .7; stroke-dasharray: 2 1.5; }
.uh-spk { display: inline-block; width: 8px; height: 8px; vertical-align: -1px; border: 1px dashed rgba(51, 255, 136, .6); background: repeating-linear-gradient(45deg, rgba(51, 255, 136, .5) 0 1px, transparent 1px 3px); }

/* v2.31.552: ★ favorites tinted by each logo's own colour (--g) -- desktop: tinted cards (mockup A) */
.cfv-tile { border-color: color-mix(in srgb, var(--g) 40%, var(--border));
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--g) 30%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--g) 9%, #0d1322), #0b101c); }
.cfv-tile small { color: color-mix(in srgb, var(--g) 80%, #ffffff) !important; }
/* phone: one row each with a colour edge (mockup B) -- only what needs you on the right, quiet ones dimmed */
@media (max-width: 800px) {
  .cfv { padding: 10px 8px 14px; }
  .cfv-grid { grid-template-columns: 1fr; gap: 6px; }
  .cfv-tile { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ico name chip" "ico type chip"; gap: 1px 10px; align-items: center;
    text-align: left; padding: 8px 10px 8px 14px; border-radius: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--g) 22%, #0d1322), #0c111d 62%); border-color: color-mix(in srgb, var(--g) 25%, var(--border)); }
  .cfv-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g); box-shadow: 0 0 10px var(--g); }
  .cfv-tile:hover { transform: none; }
  .cfv-ico { grid-area: ico; width: 40px; height: 40px; border-radius: 10px; margin: 0; }
  .cfv-ico .cfv-img { width: 30px; height: 30px; }
  .cfv-ph { width: 40px; height: 40px; border-radius: 10px; font-size: 13px; }
  .cfv-tile b { grid-area: name; font-size: 13px; align-self: end; }
  .cfv-tile small { grid-area: type; margin-top: 0; align-self: start; }
  .cfv-chip { grid-area: chip; margin-top: 0; max-width: 46vw; }
  .cfv-tile.quiet .cfv-chip { border-color: transparent; color: #3d4d6e; padding: 0; }
}

/* v2.31.553: Status on a phone -- one column in this order: Action Board, Incoming, Cross Dock PO, the rest, Who's Out
   last. Not on phones: the alerts above Priority Lane, Priority Lane, and On Hold / Waiting to Process (the Action
   Board covers them). Stats two across. */
@media (max-width: 800px) {
  body.on-status .sw-body.mc-3col { display: flex !important; flex-direction: column; }
  body.on-status .mc-3col > .mc-left, body.on-status .mc-3col > .mc-center, body.on-status .mc-3col > .mc-right { display: contents; }
  body.on-status .mc-3col .sw-panel, body.on-status .mc-3col #status-attention-panel, body.on-status .mc-3col #status-vmix-panel { order: 10; }
  body.on-status .mc-3col .mc-board { order: 1; }
  body.on-status #status-incoming-panel { order: 2; }
  body.on-status #status-crossdock-panel { order: 3; }
  body.on-status .mc-3col #status-attention-panel { order: 4; }   /* the most useful of "the rest" */
  body.on-status #status-whosout-panel { order: 99; }
  body.on-status #status-alert, body.on-status #status-backup-alert, body.on-status .mc-lane-panel, body.on-status #status-age { display: none !important; }
  body.on-status #status-kpi-grid.mc-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.on-status #status-kpi-grid.mc-stats > * { min-width: 0; }
}
@media (max-width: 800px) {
  body.on-status #status-kpi-grid .mc-stat { flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding: 8px 14px; }
  body.on-status #status-kpi-grid .mc-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  body.on-status #status-kpi-grid .mc-stat-label { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body.on-status #status-kpi-grid .mc-stat-value { font-size: 18px; }
}

/* v2.31.554: ★ Exclusives on a phone -- a card per item: title + diff, then the six numbers in a labelled row, then
   the status + why and what's on the way; the roll-out (equation, POs, timeline) stacks instead of a wide grid */
@media (max-width: 800px) {
  .ex-head { flex-wrap: wrap; gap: 4px 10px; }
  .products-scroll .ex-table tbody tr.ex-row { display: grid !important; grid-template-columns: 12px repeat(6, minmax(0, 1fr)); grid-template-areas: "car t t t t t d" "car a b c e f g" "car w w w w y y"; gap: 6px 6px; align-items: start; padding: 10px 10px 10px 8px; }
  .products-scroll .ex-table tr.ex-row > td { min-width: 0; text-align: left !important; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(1) { grid-area: car; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(2) { grid-area: t; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(3) { grid-area: a; } .products-scroll .ex-table tr.ex-row > td:nth-child(4) { grid-area: b; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(5) { grid-area: c; } .products-scroll .ex-table tr.ex-row > td:nth-child(6) { grid-area: e; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(7) { grid-area: f; } .products-scroll .ex-table tr.ex-row > td:nth-child(8) { grid-area: g; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(9) { grid-area: d; text-align: right !important; font-size: 15px; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(10) { grid-area: w; font-size: 11px; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(10) .ex-d { display: block; margin-top: 3px; white-space: normal; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(11) { grid-area: y; text-align: right !important; font-size: 11px; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(n+3):nth-child(-n+8) { font-size: 14px; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(n+3):nth-child(-n+8)::before { display: block; font-size: 8px; letter-spacing: .1em; color: var(--fg-dim); margin-bottom: 2px; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(3)::before { content: "IN"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(4)::before { content: "ALLOC"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(5)::before { content: "SHIPPED"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(6)::before { content: "SHOULD"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(7)::before { content: "NJ"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(8)::before { content: "CA"; }
  .products-scroll .ex-table tr.ex-row > td:nth-child(11):empty { display: none; }
  .products-scroll .ex-table tbody tr.ex-row.dim { grid-template-areas: "car t t t t t t" "car w w w w w w"; }
  .products-scroll .ex-table tbody tr.ex-row.dim > td:nth-child(3) { grid-area: w; }
  .products-scroll .ex-table tbody tr.ex-det { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; margin: -6px 0 10px !important; }
  .products-scroll .ex-table tbody tr.ex-det > td { display: block !important; width: auto !important; }
  .ex-drawer { padding: 10px 4px; }
  .ex-eq { gap: 2px 8px; }
  .ex-eq b { font-size: 15px; }
  .ex-po { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; }
  .ex-po > :nth-child(n+3) { grid-column: 1 / -1; }
  .ex-tl { grid-template-columns: 78px minmax(0, 1fr) auto; gap: 2px 8px; }
  .ex-tl.h { display: none; }
  .ex-tl > :nth-child(3) { grid-column: 2; font-size: 10.5px; }
  .ex-tl > :nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }
  .ex-tl > :nth-child(5) { grid-column: 3; text-align: right; font-size: 10.5px; color: var(--fg-dim); }
  .ex-tl > :nth-child(6) { grid-column: 1 / -1; font-size: 10.5px; color: var(--fg-dim); }
}
/* v2.31.554: PO items on a phone -- title + SKU, then labelled numbers in a row (ordered, received, on hand, sold),
   then unit cost + total */
@media (max-width: 800px) {
  .pu-it tr { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; grid-template-areas: "t t t t" "s s s s" "o r h d" "c c x tot"; align-items: end; }
  .pu-it td:nth-child(1) { grid-area: t; } .pu-it td:nth-child(2) { grid-area: s; }
  .pu-it td:nth-child(3) { grid-area: o; } .pu-it td:nth-child(4) { grid-area: r; }
  .pu-it td:nth-child(5) { grid-area: h; } .pu-it td:nth-child(6) { grid-area: d; }
  .pu-it td:nth-child(7) { grid-area: c; } .pu-it td:nth-child(8) { grid-area: tot; text-align: right !important; font-size: 14px; }
  .pu-it td:nth-child(9) { grid-area: x; justify-self: end; }
  .pu-it td:nth-child(n+3):nth-child(-n+8)::before { display: block; font-size: 8px; letter-spacing: .1em; color: var(--fg-dim); margin-bottom: 2px; text-align: left; }
  .pu-it td:nth-child(3)::before { content: "ORDERED"; } .pu-it td:nth-child(4)::before { content: "RECEIVED"; }
  .pu-it td:nth-child(5)::before { content: "ON HAND"; } .pu-it td:nth-child(6)::before { content: "SOLD"; }
  .pu-it td:nth-child(7)::before { content: "UNIT COST"; } .pu-it td:nth-child(8)::before { content: "TOTAL"; text-align: right; }
  .pu-it.recv td:nth-child(5)::before { content: "RECEIVE NOW"; } .pu-it.recv td:nth-child(6)::before { content: "STOCK ROSE"; }
  .pu-it td .pu-ie.num:not(.pu-ie-cost) { width: 100% !important; text-align: left; }
  .pu-it td.pu-it-title .pu-ecns { margin-top: 6px; }
}

/* v2.31.555: one phone gutter for the whole app -- change --m-gutter (outer edge of every screen) / --m-inner (inside
   panels and cards) here and every screen follows. Was 10-18px in different places. */
@media (max-width: 800px) {
  :root { --m-gutter: 8px; --m-inner: 12px; }
  .header { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .products-scroll { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .full-view { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .sw-body { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .body-grid.m-panel-open > .side-panel { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .m-panel-bar { margin-left: calc(-1 * var(--m-gutter)); margin-right: calc(-1 * var(--m-gutter)); padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .sw-panel:not(.mc-board), .panel, .cfv { padding-left: var(--m-inner) !important; padding-right: var(--m-inner) !important; }
  .products-scroll tbody tr { padding-left: var(--m-inner) !important; padding-right: var(--m-inner) !important; }
}

/* v2.31.558 (mockup A): tighter Status on a phone -- stats as 5 mini cells in one row, Incoming one line per box
   (tracking # / scan line / service go -- tap opens UPS), no panel subtitles */
.mc-stat-short, .inc-eta-s, .inc-nopo { display: none; }
.inc-long { font-style: normal; }
@media (max-width: 800px) {
  body.on-status #status-kpi-grid.mc-stats { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body.on-status #status-kpi-grid .mc-stat { flex-direction: column-reverse; align-items: center; text-align: center; padding: 8px 2px !important; border-right: 1px solid var(--border); }
  body.on-status #status-kpi-grid .mc-stat:last-child { border-right: 0; }
  body.on-status #status-kpi-grid .mc-stat-label { display: none; }
  body.on-status #status-kpi-grid .mc-stat-short { display: block; font-size: 7.5px; letter-spacing: .08em; color: var(--fg-dim); white-space: nowrap; }
  body.on-status #status-kpi-grid .mc-stat-value { font-size: 15px; }
  body.on-status .sw-panel-sub { display: none !important; }
  body.on-status .inc-sum { gap: 4px 10px; font-size: 10px; } body.on-status .inc-sum b { font-size: 12px; }
  body.on-status .inc-long, body.on-status .inc-l2, body.on-status .inc-eta small, body.on-status .inc-eta-l { display: none; }
  body.on-status .inc-eta-s, body.on-status .inc-nopo { display: inline; }
  body.on-status .inc-nopo { color: var(--fg-dim); font-style: italic; font-size: 10.5px; }
  body.on-status .inc-row { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 7px; padding: 6px 0; }
  body.on-status .inc-l1 { font-size: 11px; white-space: nowrap; overflow: hidden; }
  body.on-status .inc-l1 .inc-po2 { overflow: hidden; text-overflow: ellipsis; }
}

/* v2.31.560: Vendor Mix -- ON HOLD is the last legend row (orange); on a phone the ring sits left and a one-column
   list right (mockup A), and the panel comes right after the Action Board */
.vendor-mix-legend-row.vm-hold .vm-name, .vendor-mix-legend-row.vm-hold .vm-pct { color: #ff9d35 !important; font-weight: 700; }
@media (max-width: 800px) {
  body.on-status .mc-mix-stack .sw-mix { flex-direction: row !important; gap: 14px; align-items: center; }
  body.on-status .mc-mix-stack .sw-mix svg { width: 124px !important; height: 124px !important; }
  body.on-status .mc-mix-stack .sw-mix > div { display: flex !important; flex-direction: column; gap: 4px !important; width: auto; }
  body.on-status .mc-3col #status-vmix-panel { order: 2; }
  body.on-status #status-incoming-panel { order: 3; }
  body.on-status #status-crossdock-panel { order: 4; }
  body.on-status .mc-3col #status-attention-panel { order: 5; }
}

/* v2.31.562 (mockup B): Status on a phone -- slim Shopify order sync line under the Action Board */
.m-sync-slim { display: none; }
@media (max-width: 800px) {
  body.on-status .m-sync-slim { display: block; order: 1; margin-top: -4px; }
  .msync-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-panel); border: 1px solid rgba(255, 157, 53, .55); border-radius: 10px;
    padding: 10px 14px; font-family: var(--font-mono); color: #ff9d35; letter-spacing: .14em; font-weight: 800; font-size: 12px; cursor: pointer; box-shadow: 0 0 10px rgba(255, 157, 53, .12); }
  .msync-btn small { font-weight: normal; letter-spacing: 0; font-size: 10px; color: var(--fg-dim); white-space: nowrap; }
  .msync-btn.busy { color: var(--cyan); border-color: rgba(53, 232, 255, .55); cursor: default; }
}

/* v2.31.563: phone Status -- NEEDS A HUMAN as department tiles + the 3 most urgent (mockup C); EVENT LOG and SYSTEM
   CHECK share one spot near the bottom with a LOG / SYSTEM toggle; WHO'S OUT stays last */
.m-logseg { display: none; }
@media (max-width: 800px) {
  .at-mhead { font-size: 10px; color: var(--fg-dim); margin: 6px 0 10px; } .at-mhead em { font-style: normal; color: #ff4f6d; }
  .at-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .at-tile { text-align: left; background: transparent; border: 1px solid color-mix(in srgb, var(--s) 50%, var(--border)); border-top: 2px solid var(--s); border-radius: 7px; padding: 6px 8px; cursor: pointer; font-family: var(--font-mono); }
  .at-tile b { display: block; font-size: 17px; color: var(--s); }
  .at-tile span { font-size: 8.5px; letter-spacing: .12em; color: var(--fg-dim); }
  .at-tile.ok { opacity: .55; } .at-tile.on { background: color-mix(in srgb, var(--s) 16%, transparent); opacity: 1; }
  .at-cap { font-size: 9px; letter-spacing: .14em; color: var(--fg-dim); margin: 6px 0 2px; }
  .at-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--border); cursor: pointer; }
  .at-row > b { color: var(--s); font-size: 17px; text-align: center; }
  .at-rt { display: block; font-size: 11.5px; color: var(--fg-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .at-rm small { display: block; font-size: 9.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
  .at-rm { min-width: 0; } .at-ar { color: var(--fg-dim); } .at-row .at-x { align-self: center; padding: 4px 2px 4px 8px; }
  .at-mfoot { padding-top: 8px; border-top: 1px solid var(--border); margin-top: 0; }
  /* the log pair */
  body.on-status .m-logseg { display: inline-flex; float: right; border: 1px solid var(--border); border-radius: 999px; padding: 2px; margin-top: -3px; margin-bottom: 8px; }
  body.on-status .m-logseg button { background: none; border: 0; color: var(--fg-dim); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; padding: 3px 9px; border-radius: 999px; cursor: pointer; text-shadow: none; }
  body.on-status .m-logseg button.on { background: var(--cyan); color: #04121a; font-weight: 800; }
  body.on-status .mc-3col #status-eventlog-panel, body.on-status .mc-3col #status-syscheck-panel { order: 97; }
  body.on-status:not(.m-log-sys) #status-syscheck-panel, body.on-status.m-log-sys #status-eventlog-panel { display: none !important; }
}

/* v2.31.564: phones -- the banner marquee rides at the very top, above the menu / SHEVIBE NEXUS row */
@media (max-width: 800px) {
  .header > .tb { order: -1; flex: 1 1 100%; }
}

/* v2.31.565: phones -- a faint synthwave grid floor in the top bar (mockup A), and the gutter counted once:
   .full-view and the .sw-body inside it both added --m-gutter (16px a side on Status). Gutters tightened to 6 / 10. */
@media (max-width: 800px) {
  :root { --m-gutter: 6px; --m-inner: 10px; }
  .full-view .sw-body { padding-left: 0 !important; padding-right: 0 !important; }
  .header { position: relative; }
  .header > * { z-index: 2; }   /* flex items take z-index without changing their position */
  .header::before, .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; }
  .header::before {
    top: 0;
    background:
      repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 79, 216, .9) 27px 28px),
      repeating-linear-gradient(0deg, rgba(255, 79, 216, .9) 0 1px, transparent 1px 9px);
    transform: perspective(60px) rotateX(50deg); transform-origin: bottom; opacity: .32;
    -webkit-mask: linear-gradient(to top, #000, transparent); mask: linear-gradient(to top, #000, transparent);
  }
  .header::after { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 79, 216, .7), rgba(0, 229, 255, .7), transparent); }
}

/* v2.31.567: ★ exclusives -- orders outside Nexus that may already be at ECN */
.ex-short.ex-pend { color: var(--fg-dim); }
.ex-short.ex-pend b { color: #35e8ff; }

/* v2.31.575: mail list attachment column -- file-type chips (was a 📎 that picked up the compose chip's bubble style) */
.ml-achips { display: inline-flex; align-items: center; gap: 4px; }
.ml-achip { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 800; letter-spacing: .6px; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); border-radius: 4px; padding: 2px 6px; }
.ml-achip i { font-style: normal; opacity: .8; }
.ml-amore { font-size: 10px; color: var(--fg-dim); }
.ml-ainv { font-size: 9px; font-weight: 800; letter-spacing: .6px; color: #ffcf3d; margin-left: 2px; }

/* v2.31.578: console -- copy a command's result */
.nxc-copy { display: block; margin: 4px 0 2px auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .8px; color: var(--fg-dim);
  background: transparent; border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; cursor: pointer; opacity: .55; }
.nxc-block:hover .nxc-copy, .nxc-copy:focus { opacity: 1; }
.nxc-copy:hover { color: var(--cyan); border-color: var(--cyan); }

/* v2.31.579: order P&L as one receipt -- money bar, money in / money out, kept */
.op2 { padding: 14px 18px 16px; border-left: 3px solid var(--ac); background: var(--bg-panel); }
.op2-hd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.op2-big { font-size: 30px; font-weight: 800; color: var(--op-paid); line-height: 1; } .op2-big.neg, .op2-mg.neg, .op2-tot.neg b { color: #ff4f6d; }
.op2-on { color: var(--fg); } .op2-on b { color: var(--fg-bright); }
.op2-mg { color: var(--op-kept); }
.op2-ok { color: var(--status-instock-bg); font-size: 11px; } .op2-why { color: #ffcf3d; font-size: 11px; } .op2-why b { font-weight: 600; }
.op2-links { margin-left: auto; }
.op2-meta { font-size: 10.5px; letter-spacing: .5px; color: var(--fg-dim); margin: 6px 0 12px; }
.op2-bar { display: flex; height: 30px; border-radius: 7px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.04); }
.op2-bar div { display: flex; align-items: center; justify-content: center; min-width: 4px; font-size: 10.5px; font-weight: 800; color: #0b0f1a; white-space: nowrap; overflow: hidden; }
.op2-axis { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--fg-dim); margin: 4px 0 6px; }
.op2-over { color: #ff4f6d; }
.op2-sec { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1.6px; color: var(--fg-dim); margin: 16px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.op2-sec span { letter-spacing: .5px; color: var(--fg); }
.op2-ln { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 2px; border-bottom: 1px dashed rgba(255,255,255,.06); font-size: 12.5px; }
.op2-l { min-width: 0; color: var(--fg-bright); } .op2-l i { font-style: normal; color: var(--fg-dim); font-size: 11px; margin-left: 4px; }
.op2-l small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; }
.op2-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.op2-paid { color: var(--op-paid); } .op2-cost { color: var(--op-cost); } .op2-ship { color: var(--op-ship); } .op2-fee { color: var(--op-fee); } .op2-warnc { color: #ff4f6d; }
.op2-box { margin-top: 6px; }
.op2-bh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 8px; border-radius: 6px; background: color-mix(in srgb, var(--vc) 9%, transparent); border-left: 3px solid var(--vc); }
.op2-srcs { margin-left: auto; display: inline-flex; flex-wrap: wrap; }
.op2-bt { font-size: 12.5px; color: var(--op-cost); margin-left: 6px; font-variant-numeric: tabular-nums; }
.op2-sub { padding-left: 14px; }
.op2-ord { margin-top: 8px; } .op2-ordh { font-size: 10px; letter-spacing: 1.4px; color: var(--fg-dim); padding: 4px 8px; border-left: 3px solid var(--border); }
.op2-note { font-size: 10.5px; color: var(--fg-dim); padding: 5px 14px; }
.op2-warn { font-size: 11px; color: #ffcf3d; padding: 5px 14px; cursor: pointer; } .op2-warn b { color: #ff4f6d; }
.op2-tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 10px 2px 2px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 800; color: var(--fg-bright); }
.op2-tot b { font-size: 18px; color: var(--op-paid); }
@media (max-width: 800px) {
  .op2 { padding: 12px 10px; } .op2-big { font-size: 26px; } .op2-links { margin-left: 0; width: 100%; }
  .op2-srcs { margin-left: 0; width: 100%; order: 9; } .op2-bt { margin-left: auto; }
  .op2-bar div[data-w="sm"] { font-size: 0; }
}

/* v2.31.580: money in / money out side by side (stacked under 1000px), colored bands, and the math at the bottom */
.op2-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; margin-top: 14px; }
.op2-sec.in, .op2-sec.out { align-items: center; margin: 0 0 6px; padding: 9px 12px; border: 0; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; }
.op2-sec.in { background: rgba(51,255,136,.09); box-shadow: inset 4px 0 0 var(--op-paid); color: var(--op-paid); }
.op2-sec.out { background: rgba(255,107,138,.09); box-shadow: inset 4px 0 0 var(--op-cost); color: var(--op-cost); }
.op2-sl { display: inline-flex; align-items: center; gap: 0; flex-wrap: wrap; }
.op2-sl i { font-style: normal; display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; margin-right: 9px; font-size: 12px; color: #0b0f1a; letter-spacing: 0; }
.op2-sec.in .op2-sl i { background: var(--op-paid); } .op2-sec.out .op2-sl i { background: var(--op-cost); }
.op2-sl small { font-weight: 400; letter-spacing: .4px; color: var(--fg-dim); font-size: 10.5px; margin-left: 10px; }
.op2-sec.in b, .op2-sec.out b { font-size: 16px; letter-spacing: 0; color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: 10px; }
.op2-col > .op2-box:first-of-type { margin-top: 2px; }
.op2-eq { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 14px; font-variant-numeric: tabular-nums; }
.op2-eq b { font-size: 20px; color: var(--op-paid); } .op2-eq.neg b { color: #ff4f6d; }
.op2-eqm { color: var(--op-kept); font-size: 12px; }
@media (max-width: 1000px) { .op2-cols { grid-template-columns: minmax(0, 1fr); gap: 4px; } .op2-col + .op2-col { margin-top: 12px; } }
@media (max-width: 800px) { .op2-sl small { display: block; margin: 2px 0 0 29px; width: 100%; } .op2-eq { font-size: 12.5px; } .op2-eq b { font-size: 17px; } }

/* v2.31.582: an unroutable item that already shipped (order fulfilled in Shopify) -- calm, not a hazard */
.hz-card.hz-shipped { border-color: rgba(51,255,136,.35); background: rgba(51,255,136,.04); }

/* v2.31.583: time off -- blackout dates + BambooHR import preview */
.to-hol.to-blk { border-color: rgba(255,79,109,.45); color: #ff8aa0; }
.to-bz { margin-top: 10px; font-size: 11.5px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.to-bzl { font-size: 11px; line-height: 1.7; max-height: 220px; overflow: auto; }
/* v2.31.584: Shipping P&L styled like Profit -- flags fold into one line under NET; Profit's big numbers + tiles */
.civ-pnl td .vendor-pill.civ-mpill { font-size: 9.5px; }
.civ-opbig { justify-content: space-between; margin: 8px 0 4px; }
.civ-opbig div:first-child b { font-size: 28px; }
.civ-opnote { font-size: 10.5px; color: var(--fg-dim); margin: 2px 0 12px; }
.civ-opnote b { font-weight: normal; }
/* v2.31.586: the reason under PROFIT / NET is a box like FINAL / ESTIMATE, coloured by kind */
.op-tag.op-ftag { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); cursor: help; }
.op-flagn { font-size: 9.5px; color: var(--fg-dim); margin-left: -4px; }
.civ-pnl .civ-fl { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 3px; }
/* v2.31.586: trend legend -- one tidy row: swatch keys left, totals right, each item kept whole */
.uh-salesum { align-items: center; flex-wrap: wrap; row-gap: 3px; line-height: 1.3; }
.uh-salesum .uh-key, .uh-salesum .uh-tot { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.uh-salesum em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.uh-salesum .uh-tot { margin-left: auto; }
.uh-kl { display: inline-block; width: 10px; height: 2px; border-radius: 1px; background: #33ff88; }
.uh-kb { display: inline-block; width: 6px; height: 8px; background: rgba(51, 255, 136, .45); }
.uh-salesum .uh-spk { vertical-align: 0; }
/* v2.31.586: STOCK BY VENDOR -- hover a name: its line comes forward, the others dim */
.uh-slg .uh-li { cursor: pointer; transition: opacity .12s; }
.uh-stock path.uh-sl { transition: opacity .12s, stroke-width .12s; }
.uh-wrap.uh-hl .uh-stock path.uh-sl:not(.on) { opacity: .18; }
.uh-wrap.uh-hl .uh-stock path.uh-sl.on { stroke-width: 3; }
.uh-wrap.uh-hl .uh-slg .uh-li:not(.on) { opacity: .35; }
.uh-stock path.uh-sl { pointer-events: none; }
/* v2.31.587: Trends VENDORS · STOCK -- one joined capsule; out of stock = a darkened segment */
.tr-cap { margin-right: 5px; }
.tr-cap > span { font-size: 8.5px; font-weight: 800; padding: 2px 7px; }
.tr-cap > span b { font-weight: 800; }
.tr-cap > span.out { filter: brightness(.45); }
/* v2.31.587: Trends column headers sort on click */
.tr-table th.tr-sort { cursor: pointer; user-select: none; }
.tr-table th.tr-sort:hover, .tr-table th.tr-sort.on { color: var(--cyan); }
/* v2.31.589: Settings -> Backup -> vendor files to Google Drive */
.bk-df .bk-nh .sub code { font-size: 10.5px; color: var(--fg); }
.bk-dferr { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.bk-dferr small { color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-dferr .pu-btn { align-self: flex-start; margin-top: 4px; }
/* v2.31.605: VENDORS drive + where files go */
.bk-dfdrv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.bk-dfdrv .pu-in { flex: 1 1 320px; min-width: 0; }
.bk-dfdrv small { flex-basis: 100%; color: var(--fg-dim); font-size: 11px; }
.bk-dfk { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--fg-dim); }
.bk-dfl { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.bk-dfl > small { color: var(--fg-dim); font-size: 11px; }
.bk-dft { width: 100%; border-collapse: collapse; font-size: 12px; }
.bk-dft th { text-align: left; font-size: 10px; letter-spacing: .08em; color: var(--fg-dim); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.bk-dft td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bk-dft code { font-size: 11px; color: var(--fg-dim); }
.bk-dfn { width: 210px; padding: 2px 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.bk-dfc { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); margin-right: 4px; white-space: nowrap; background: none; color: var(--fg-dim); }
.bk-dfc.ok { color: #3ddc84; border-color: #3ddc8466; }
.bk-dfc.new { color: #ffcf3d; border-color: #ffcf3d66; }
.bk-dfc.like { color: #7cc4ff; border-color: #7cc4ff66; cursor: pointer; }
/* v2.31.592: THE PAPERWORK as hole-punched ledger pages (mockup D), shipping labels as cards clipped beside them */
.lab-ledger { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.lab-ledger.solo { grid-template-columns: minmax(0, 1fr); }
.lab-lpages { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lab-lpage { position: relative; border-radius: 4px; box-shadow: 0 10px 26px rgba(0,0,0,.5); padding: 4px 14px 6px 66px;
  background: #141b29; background-image: linear-gradient(90deg, transparent 48px, rgba(255,79,109,.45) 48px 50px, transparent 50px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(53,232,255,.06) 31px 32px); }
.lab-holes { position: absolute; left: 16px; top: 0; bottom: 0; width: 16px; background: radial-gradient(circle, var(--bg) 6px, rgba(0,0,0,.35) 6.5px, transparent 7.5px) 0 22px / 16px 72px repeat-y; }
.lab-lpage .lab-ev, .lab-lcard .lab-ev { border: 0; background: transparent; margin: 0; padding: 10px 4px; }
.lab-lpage .lab-evh { font-size: 13px; letter-spacing: 1.5px; }
.lab-lpage .vb-lines tr td { background: transparent; }
.lab-lpage .vb-lchip.up, .lab-lpage .vb-lchip.down { position: relative; border-color: transparent; background: transparent; }
.lab-lpage .vb-lchip.up::before, .lab-lpage .vb-lchip.down::before { content: ""; position: absolute; inset: -4px -6px; border: 1.5px solid currentColor; border-radius: 50% 45% 55% 48%; transform: rotate(-3deg); opacity: .8; pointer-events: none; }
.lab-lcards { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; }
.lab-lcard { position: relative; background: #121a24; border-top: 3px solid var(--cyan); box-shadow: 0 10px 24px rgba(0,0,0,.5); transform: rotate(1.2deg); padding: 4px 8px; }
.lab-lcard:nth-child(2n) { transform: rotate(-1deg); }
.lab-lcard::before { content: ""; position: absolute; right: 18px; top: -11px; width: 12px; height: 26px; border: 2px solid #8fa3c7; border-radius: 6px; }
.lab-lcard .lab-evr { flex-direction: column; align-items: flex-start; gap: 4px; }
@media (max-width: 1000px) { .lab-ledger { grid-template-columns: minmax(0, 1fr); } .lab-lcard { transform: none; } }
@media (max-width: 700px) { .lab-lpage { padding-left: 34px; background-image: linear-gradient(90deg, transparent 24px, rgba(255,79,109,.45) 24px 25px, transparent 25px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(53,232,255,.06) 31px 32px); } .lab-holes { left: 5px; width: 12px; background-size: 12px 72px; } }
.op2-sku { color: var(--fg); letter-spacing: .5px; }   /* v2.31.591: vendor SKU under the product (money out) */
/* v2.31.594: OUR CATALOG fits without scrolling sideways -- the product name takes what's left and trims */
.tr-cat { table-layout: auto; }
.tr-cat th, .tr-cat td { padding-left: 7px; padding-right: 7px; }
.tr-cat td.tr-t { max-width: 1px; width: 100%; }
.tr-cat .tr-cap > span { padding: 2px 5px; }
.tr-cat .tr-act { white-space: nowrap; }
.tr-cap > span.off { background: repeating-linear-gradient(135deg, #2a3348 0 4px, #222a3c 4px 8px); color: var(--fg-dim); }   /* v2.31.595 */
/* v2.31.595: vendor / warehouse switches + the cross dock switch (Settings -> Routing, Cross Dock -> Settings) */
.rs-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 2px; }
.rs-lbl { font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); margin-right: 4px; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 3px 4px 3px 9px; font: 10px var(--font-mono); color: var(--fg-bright); cursor: pointer; }
.rs-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.rs-chip b { font-size: 9px; padding: 1px 6px; border-radius: 999px; background: rgba(51,255,136,.16); color: #33ff88; }
.rs-chip.off { color: var(--fg-dim); border-style: dashed; } .rs-chip.off i { opacity: .35; } .rs-chip.off b { background: rgba(255,79,109,.16); color: #ff4f6d; }
.rs-sw { margin-left: auto; font: bold 9px var(--font-mono); letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(51,255,136,.5); background: rgba(51,255,136,.12); color: #33ff88; cursor: pointer; }
.rs-sw.off { border-color: rgba(255,79,109,.5); background: rgba(255,79,109,.12); color: #ff4f6d; }
.rs-sw:disabled { opacity: .6; cursor: default; }
.rs-sw.big { font-size: 11px; padding: 4px 14px; margin-left: 0; }
.routing-row.rs-off { opacity: .55; } .routing-row.rs-off .routing-name { text-decoration: line-through; text-decoration-color: rgba(255,79,109,.6); }
.rs-why { font-size: 9px; color: #ff4f6d; letter-spacing: .5px; }
.rs-confirm { border: 1px solid rgba(255,79,109,.45); background: rgba(255,79,109,.06); border-radius: 8px; padding: 10px 12px; margin: 10px 0; font-size: 11.5px; }
.rs-confirm ul { margin: 6px 0 8px 16px; padding: 0; line-height: 1.6; color: var(--fg); } .rs-confirm em { font-style: normal; color: var(--fg-bright); } .rs-confirm em.bad { color: #ff4f6d; }
.rs-btns { display: flex; gap: 8px; }
.rs-msg { font-size: 11px; color: var(--cyan); margin: 8px 0 0; }
.rs-xdrow { display: flex; align-items: center; gap: 12px; font-size: 11.5px; margin: 6px 0; }
#crossdock-switch { margin-bottom: 14px; }
.xd-off .icon-btn[data-view="crossdock"], .xd-off .m-nav[data-view="crossdock"], .xd-off #status-crossdock-panel { display: none !important; }
.routing-row .rs-sw + .routing-region { margin-left: 8px; }
.rs-why { display: inline-block; text-decoration: none; margin-left: 6px; }
/* v2.31.596: warehouse / cross dock switches are the settings toggle -- green on, red off; an off row greys out but its toggle stays bright */
input[type="checkbox"].rt-sw.rs-tg { background: rgba(255,79,109,.18); border-color: rgba(255,79,109,.7); margin-left: auto; }
input[type="checkbox"].rt-sw.rs-tg::after { background: #ff4f6d; }
input[type="checkbox"].rt-sw.rs-tg:checked { background: rgba(51,255,136,.2); border-color: #33ff88; box-shadow: 0 0 6px rgba(51,255,136,.35); }
input[type="checkbox"].rt-sw.rs-tg:checked::after { background: #33ff88; }
.routing-row .rs-tg + .routing-region { margin-left: 10px; }
.routing-row.rs-off { opacity: 1; }
.routing-row.rs-off > :not(.rs-tg) { opacity: .4; }
.routing-row.rs-off .routing-name { text-decoration: none; }
.rs-why { color: #ff4f6d; font-size: 9px; letter-spacing: 1px; }
.rs-xdrow .rs-tg { margin-left: 0; }
/* v2.31.597 (mockup A): Settings -> Routing -- priority left (sticky), the rules as one even list, controls in one column */
.rt-a { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); align-items: start; }
.rt-a .rt-prio { position: sticky; top: 8px; padding: 14px 14px 12px; }
.rt-a .rt-rules { display: flex; flex-direction: column; gap: 14px; }
.rt-a .rt-list { padding: 4px 16px 6px; }
.rt-listh { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: 2px; color: var(--fg-dim); padding: 10px 0 6px; border-bottom: 1px solid var(--border); }
.rt-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(300px, 400px) 20px; gap: 6px 14px; align-items: start; padding: 12px 0; border-bottom: 1px dashed rgba(143,163,199,.15); }
.rt-row:last-child { border-bottom: 0; }
.rt-row > .rt-num { margin-top: 1px; }
.rt-rt b { display: block; font-size: 12.5px; color: var(--fg-bright); font-weight: normal; }
.rt-rt small { display: block; font-size: 10.5px; color: var(--fg-dim); margin-top: 3px; line-height: 1.5; }
.rt-row > .rt-ctls { margin: 0; gap: 7px; }
.rt-ctls-in { display: flex; flex-direction: column; gap: 7px; }
.rt-ctls-in > .rt-ctls { margin: 0; gap: 7px; }
.rt-ctls-in + .rt-ctls-in { padding-top: 7px; border-top: 1px dashed rgba(143,163,199,.12); }
.rt-ctls-in .rt-ctls + .rt-ctls { padding-top: 7px; border-top: 1px dashed rgba(143,163,199,.12); }
.rt-row .rt-ctl { font-size: 11px; }
.rt-row .rt-note { font-size: 10px; }
.rt-i { background: transparent; border: 0; color: var(--cyan); font-size: 13px; cursor: pointer; padding: 0; line-height: 1; opacity: .75; }
.rt-i:hover, .open > .rt-i, .open > .rt-head > .rt-i { opacity: 1; }
.rt-how { display: none; grid-column: 2 / -1; font-size: 11px; color: var(--fg-dim); line-height: 1.6; border-left: 2px solid rgba(53,232,255,.35); padding: 4px 0 4px 10px; }
.rt-row.open > .rt-how, #vc-card.open > .rt-how { display: block; }
.rt-xdc { grid-column: 2 / -1; } .rt-xdc:empty { display: none; }
#vc-card .rt-head .rt-i { margin-left: auto; }
#vc-card > .rt-how { margin: 8px 0 4px; }
@media (max-width: 1100px) { .rt-a { grid-template-columns: minmax(0, 1fr); } .rt-a .rt-prio { position: static; } }
@media (max-width: 760px) { .rt-row { grid-template-columns: 22px minmax(0, 1fr) 20px; } .rt-row > .rt-ctls { grid-column: 2 / -1; grid-row: 2; } .rt-row > .rt-i { grid-column: 3; grid-row: 1; } }
/* v2.31.598: vendor mix -- a source switched off in Settings -> Routing shows ⛔ instead of its count */
.vmix-li.rs-dis .nm { opacity: .5; }
.vmix-li.rs-dis .sw { opacity: .35; }
.rs-noentry { font-size: 11px; line-height: 1; filter: saturate(1.2); }
/* ===================== v2.31.599: the nuclear option (js/nuke.js) ===================== */
.vc-nuke { margin-left: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,79,109,.55); background: radial-gradient(circle at 35% 30%, #ff6b7f, #b3122c 70%); color: #ffe066; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: 0 0 0 2px rgba(255,79,109,.12), 0 0 10px rgba(255,79,109,.35); transition: transform .15s, box-shadow .15s; }
.vc-nuke:hover { transform: scale(1.12) rotate(20deg); box-shadow: 0 0 0 3px rgba(255,79,109,.25), 0 0 18px rgba(255,79,109,.7); }
.vc-nuke.restart { width: auto; height: auto; border-radius: 999px; padding: 3px 10px; font: bold 10px var(--font-mono); letter-spacing: 1px; color: #04121a; background: linear-gradient(#5dff9a, #1fbf5f); border-color: #33ff88; box-shadow: 0 0 10px rgba(51,255,136,.45); }
.vc-nuke.restart:hover { transform: scale(1.06); }
.vc-status.vc-off { color: #ff4f6d; letter-spacing: 1px; font-weight: bold; animation: nkBlink 1.6s steps(2) infinite; }
.vc-status.vc-wake { color: #33ff88; letter-spacing: 1px; }
.vc2.vc-nuked { position: relative; border-color: rgba(255,79,109,.5); background-image: repeating-linear-gradient(135deg, rgba(255,207,61,.05) 0 12px, transparent 12px 24px); }
.vc2.vc-nuked > :not(.vc-head) { filter: grayscale(1); opacity: .35; pointer-events: none; }
.vc2.vc-nuked .vc-head > :not(.vc-off):not(.vc-nuke) { filter: grayscale(1); opacity: .5; }
.vc2.vc-waking { box-shadow: 0 0 0 1px rgba(51,255,136,.45), 0 0 14px rgba(51,255,136,.18); }
.vc-wh { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; }
.vc-reg { font: bold 9px var(--font-mono); border: 1px solid var(--border); background: transparent; color: var(--fg-dim); border-radius: 4px; padding: 0 4px; line-height: 15px; cursor: pointer; }
.vc-reg.e { color: #ffcf3d; border-color: rgba(255,207,61,.55); } .vc-reg.w { color: var(--cyan); border-color: rgba(53,232,255,.55); }
.rt-xd-inline { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 8px; }
.rt-xd-inline .rt-sw { margin-left: 0 !important; }

body.nk-lock { overflow: hidden; }
.nk { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 45%, rgba(90,0,12,.55), rgba(4,0,2,.92) 70%); animation: nkIn .25s ease-out; font-family: var(--font-mono); }
.nk::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.nk.nk-green { background: radial-gradient(circle at 50% 45%, rgba(0,70,30,.55), rgba(0,4,2,.92) 70%); }
.nk.nk-arm::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px rgba(255,0,40,.55); animation: nkAlarm .5s ease-in-out infinite alternate; }
.nk.nk-green.nk-arm::after { box-shadow: inset 0 0 160px rgba(51,255,136,.4); }
.nk-panel { --shake: 0px; --c: #ff4f6d; position: relative; width: min(600px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(180deg, #160509, #0b0306); border: 2px solid var(--c); border-radius: 14px; padding: 26px 26px 22px; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 60px rgba(255,79,109,.35), inset 0 0 40px rgba(255,79,109,.08); color: #ffd9de; animation: nkShake .09s linear infinite; }
.nk-green .nk-panel { --c: #33ff88; background: linear-gradient(180deg, #04140b, #020906); color: #d9ffe8; box-shadow: 0 0 60px rgba(51,255,136,.3), inset 0 0 40px rgba(51,255,136,.06); }
.nk-haz { position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 12px 12px 0 0; background: repeating-linear-gradient(-45deg, #ffcf3d 0 12px, #111 12px 24px); background-size: 34px 34px; animation: nkHaz 1s linear infinite; opacity: .9; }
.nk-haz.bottom { top: auto; bottom: 0; border-radius: 0 0 12px 12px; }
.nk-green .nk-haz { background: repeating-linear-gradient(-45deg, #33ff88 0 12px, #06120b 12px 24px); background-size: 34px 34px; }
.nk-x { position: absolute; top: 16px; right: 14px; background: transparent; border: 1px solid rgba(255,255,255,.2); color: inherit; border-radius: 6px; width: 26px; height: 26px; cursor: pointer; font-size: 12px; }
.nk-top { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.nk-tre { width: 64px; height: 64px; flex: none; fill: var(--c); filter: drop-shadow(0 0 10px var(--c)); animation: nkSpin 6s linear infinite; }
.nk-arm .nk-tre { animation-duration: .6s; }
.nk-tre-ring { fill: none; stroke: var(--c); stroke-width: 3; opacity: .5; }
.nk-tre-hub { fill: #0b0306; } .nk-green .nk-tre-hub { fill: #020906; }
.nk-tre-dot { fill: var(--c); }
.nk-title { position: relative; font-size: 26px; font-weight: 800; letter-spacing: 4px; color: var(--c); text-shadow: 0 0 14px var(--c); }
.nk-title::before, .nk-title::after { content: attr(data-t); position: absolute; left: 0; top: 0; opacity: .6; }
.nk-title::before { color: #35e8ff; animation: nkGlitch 2.4s infinite steps(1); clip-path: inset(0 0 55% 0); }
.nk-title::after { color: #ffcf3d; animation: nkGlitch 1.9s infinite steps(1) reverse; clip-path: inset(55% 0 0 0); }
.nk-sub { font-size: 12px; opacity: .85; margin-top: 4px; } .nk-sub b { color: #fff; }
.nk-sec { font-size: 10px; letter-spacing: 3px; color: var(--c); margin: 6px 0 8px; opacity: .85; }
.nk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nk-st { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px; background: rgba(0,0,0,.3); }
.nk-st b { display: block; font-size: 20px; color: #fff; } .nk-st span { font-size: 9.5px; line-height: 1.35; opacity: .75; display: block; margin-top: 2px; }
.nk-st.bad { border-color: rgba(255,79,109,.6); } .nk-st.bad b { color: #ff4f6d; text-shadow: 0 0 8px rgba(255,79,109,.6); }
.nk-list { list-style: none; padding: 0; margin: 12px 0 4px; font-size: 11.5px; line-height: 1.8; }
.nk-list i { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; border: 1px solid currentColor; font-size: 9px; color: var(--c); }
.nk-err { color: #ff4f6d; font-size: 12px; }
.nk-launch { display: flex; flex-direction: column; align-items: center; margin: 18px 0 6px; }
.nk-btnwrap { position: relative; width: 200px; height: 200px; display: grid; place-items: center; perspective: 600px; }
.nk-ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.nk-ring-bg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.nk-ring-fg { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 578.05; stroke-dashoffset: 578.05; filter: drop-shadow(0 0 8px var(--c)); }
.nk-big { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 0; cursor: pointer; font: 800 14px var(--font-mono); letter-spacing: 2px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.5);
  background: radial-gradient(circle at 38% 30%, #ff8a99 0, #ff2d4b 28%, #b00020 62%, #5a0010 100%);
  box-shadow: 0 10px 0 #4a000d, 0 14px 30px rgba(0,0,0,.6), 0 0 40px rgba(255,45,75,.55), inset 0 -8px 18px rgba(0,0,0,.35), inset 0 6px 12px rgba(255,255,255,.35); transition: transform .08s, box-shadow .08s; user-select: none; touch-action: none; }
.nk-big:active:not(:disabled), .nk-arm .nk-big { transform: translateY(7px); box-shadow: 0 3px 0 #4a000d, 0 6px 16px rgba(0,0,0,.6), 0 0 70px rgba(255,45,75,.9), inset 0 -6px 14px rgba(0,0,0,.4), inset 0 6px 12px rgba(255,255,255,.3); }
.nk-big:disabled { cursor: not-allowed; filter: saturate(.6) brightness(.7); }
.nk-green .nk-big { background: radial-gradient(circle at 38% 30%, #b8ffd2 0, #33ff88 30%, #109a48 64%, #04411d 100%); color: #022; text-shadow: none; box-shadow: 0 10px 0 #033a19, 0 14px 30px rgba(0,0,0,.6), 0 0 40px rgba(51,255,136,.5), inset 0 -8px 18px rgba(0,0,0,.3), inset 0 6px 12px rgba(255,255,255,.4); }
.nk-green.nk-arm .nk-big { transform: translateY(7px); box-shadow: 0 3px 0 #033a19, 0 0 70px rgba(51,255,136,.9); }
.nk-cover { position: absolute; width: 168px; height: 168px; border-radius: 50%; border: 3px solid #ffcf3d; cursor: pointer; transform-origin: 50% 0; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .45s;
  background: repeating-linear-gradient(-45deg, rgba(255,207,61,.55) 0 12px, rgba(17,17,17,.55) 12px 24px), radial-gradient(circle, rgba(255,255,255,.15), rgba(255,255,255,.04)); box-shadow: inset 0 0 20px rgba(255,255,255,.15), 0 6px 18px rgba(0,0,0,.5);
  font: 800 12px var(--font-mono); letter-spacing: 2px; color: #fff; text-shadow: 0 1px 3px #000; }
.nk-cover span { background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 6px; }
.nk-cover.up { transform: rotateX(118deg) translateY(-6px); opacity: .55; pointer-events: auto; }
.nk-hint { margin-top: 10px; font-size: 11px; opacity: .8; letter-spacing: 1px; } .nk-hint.nk-abort { color: #ffcf3d; opacity: 1; }
.nk-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 0; font-weight: 800; color: var(--c); }
.nk-count.on { font-size: 180px; opacity: .14; animation: nkTick 1s ease-out infinite; text-shadow: 0 0 40px var(--c); }
.nk-flash { position: fixed; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.nk-boom .nk-flash { animation: nkFlash .9s ease-out forwards; }
.nk-green.nk-boom .nk-flash { background: #b8ffd2; }
.nk-boom .nk-panel { animation: nkBoom .55s cubic-bezier(.2,1.8,.4,1); }
.nk-boom .nk-panel::after { content: ""; position: absolute; left: 50%; top: 62%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 4px solid var(--c); animation: nkWave 1s ease-out forwards; pointer-events: none; }
.nk-stamp { margin: 28px auto 6px; width: max-content; font-size: 34px; font-weight: 800; letter-spacing: 6px; color: var(--c); border: 4px solid var(--c); border-radius: 10px; padding: 8px 22px; transform: rotate(-7deg); text-shadow: 0 0 16px var(--c); box-shadow: 0 0 30px rgba(255,79,109,.4), inset 0 0 20px rgba(255,79,109,.2); animation: nkStamp .45s cubic-bezier(.2,1.6,.4,1); }
.nk-res { text-align: center; font-size: 12px; opacity: .9; margin: 14px 0 8px; }
@keyframes nkIn { from { opacity: 0; } }
@keyframes nkHaz { to { background-position: 34px 0; } }
@keyframes nkSpin { to { transform: rotate(360deg); } }
@keyframes nkShake { 0% { transform: translate(0, 0); } 25% { transform: translate(var(--shake), calc(var(--shake) * -.6)); } 50% { transform: translate(calc(var(--shake) * -.8), var(--shake)); } 75% { transform: translate(calc(var(--shake) * .5), calc(var(--shake) * .8)); } 100% { transform: translate(0, 0); } }
@keyframes nkAlarm { from { opacity: .25; } to { opacity: 1; } }
@keyframes nkGlitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-3px, 1px); } 94% { transform: translate(3px, -1px); } 97% { transform: translate(-1px, 0); } }
@keyframes nkTick { from { transform: scale(1.25); opacity: .3; } to { transform: scale(1); opacity: .12; } }
@keyframes nkFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes nkBoom { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes nkWave { from { transform: scale(1); opacity: 1; } to { transform: scale(26); opacity: 0; } }
@keyframes nkStamp { from { transform: rotate(-7deg) scale(3); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 1; } }
@keyframes nkBlink { 50% { opacity: .45; } }
@media (max-width: 560px) { .nk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nk-title { font-size: 20px; letter-spacing: 2px; } .nk-panel { padding: 22px 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .nk-panel, .nk-tre, .nk-haz, .nk-title::before, .nk-title::after, .nk.nk-arm::after, .vc-status.vc-off { animation: none !important; } }
.nk-cover span { background: rgba(0,0,0,.85); padding: 7px 12px; border-radius: 6px; line-height: 1.5; display: inline-block; }
.nk-cover.up { transform: rotateX(118deg) translateY(-6px) scale(.92); opacity: .16; }
/* v2.31.600: the ☢ sits in ✎ as the last thing -- DANGER ZONE */
.vc2-sec.vc2-danger { color: #ff4f6d; }
.vc2-nukerow { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px dashed rgba(255,79,109,.45); border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(255,207,61,.04) 0 10px, transparent 10px 20px); }
.vc2-nukerow b { display: block; color: #ff4f6d; font-size: 12px; letter-spacing: 1px; }
.vc2-nukerow small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; line-height: 1.5; }
.vc-nuke.big { width: 44px; height: 44px; font-size: 22px; margin-left: 0; flex: none; }
.nk-st em { display: block; font-style: normal; font-size: 10.5px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed rgba(255,255,255,.12); opacity: .8; }
.nk-st em.hot { color: #ff4f6d; opacity: 1; font-weight: bold; text-shadow: 0 0 8px rgba(255,79,109,.5); }
.nk-st em { color: inherit; font-weight: normal; text-shadow: none; }   /* v2.31.602: the sub line is the quiet vendor-wide count */
/* v2.31.604: a PO's supplier mail (Purchasing -> a PO -> Mail) and "this is …" in Mail */
.pu-mail { padding: 10px 4px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; }
.pu-msug { display: flex; align-items: center; gap: 12px; border: 1px dashed rgba(53,232,255,.45); background: rgba(53,232,255,.05); border-radius: 8px; padding: 9px 12px; }
.pu-msug span { flex: 1; } .pu-msug small { display: block; color: var(--fg-dim); font-size: 10.5px; margin-top: 2px; } .pu-msug b { color: var(--cyan); }
.pu-minv { border: 1px solid var(--border); border-left: 3px solid #33ff88; border-radius: 8px; padding: 10px 12px; }
.pu-minv.bad { border-left-color: #ff4f6d; }
.pu-minvh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pu-minvh b { letter-spacing: 1.5px; color: var(--fg-bright); }
.pu-minvh .pu-btn { margin-left: auto; }
.pu-mchip { font-size: 9.5px; font-weight: bold; letter-spacing: 1px; padding: 1px 7px; border-radius: 4px; background: rgba(255,255,255,.06); }
.pu-mchip.ok { color: #33ff88; background: rgba(51,255,136,.12); } .pu-mchip.bad { color: #ff4f6d; background: rgba(255,79,109,.12); } .pu-mchip.dim { color: var(--fg-dim); }
.pu-mok { font-size: 10.5px; margin-top: 6px; }
.pu-mt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 11.5px; } .pu-mt th { font-size: 9px; letter-spacing: 1.5px; color: var(--fg-dim); text-align: left; font-weight: normal; padding: 4px; }
.pu-mt td { padding: 5px 4px; border-top: 1px dashed rgba(143,163,199,.15); } .pu-mt td small { display: block; color: var(--fg-dim); font-size: 10px; } .pu-mt .num { text-align: right; }
.pu-mtrk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; }
.pu-mrow { display: grid; grid-template-columns: 56px 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px dashed rgba(143,163,199,.15); }
.pu-mk { font-size: 9px; font-weight: bold; letter-spacing: 1px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--fg-dim); text-align: center; }
.pu-mk.invoice { color: #ffcf3d; border-color: rgba(255,207,61,.5); } .pu-mk.shipped, .pu-mk.tracking { color: var(--cyan); border-color: rgba(53,232,255,.5); }
.pu-ms { min-width: 0; color: var(--fg-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pu-ms small { display: block; color: var(--fg-dim); font-size: 10.5px; }
.pu-matt a { font-size: 9.5px; font-weight: bold; color: #ff4f6d; border: 1px solid rgba(255,79,109,.5); border-radius: 4px; padding: 1px 6px; text-decoration: none; }
.pu-mfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 10.5px; padding-top: 4px; }
.pu-mf.ok { color: #33ff88; } .pu-mf.bad { color: #ff4f6d; }
.ml-thisis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; border: 1px dashed rgba(255,207,61,.45); border-radius: 8px; font-size: 11px; color: #ffcf3d; }
.ml-thisis input { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font: 11px var(--font-mono); min-width: 180px; }
.ml-thisis small { flex-basis: 100%; color: var(--fg-dim); }
/* v2.31.605: ETA from UPS tracking + the supplier's invoice PDF on the PO */
.pu-etab { display: flex; align-items: center; gap: 6px; }
.pu-etaups { font-size: 9px; font-weight: 800; letter-spacing: .08em; padding: 1px 6px; border-radius: 4px; color: #ffb000; border: 1px solid #ffb00066; }
.pu-invs { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-invl { font-weight: 700; color: #7cc4ff; text-decoration: none; border: 1px solid #7cc4ff55; border-radius: 6px; padding: 1px 8px; font-size: 12px; }
.pu-invl:hover { background: #7cc4ff22; }
.pu-etanone { font-size: 10px; color: var(--fg-dim); font-style: italic; }
/* v2.31.607: Experiments ledger -- under the price = money kept (green), over = money lost (red); who billed the box */
.op-flag.good { color: #33ff88; }
.lab-lpage .vb-lchip.down, .lab-lpage .vb-lp-down { color: #33ff88; }
.lab-lpage .vb-lchip.up, .lab-lpage .vb-lp-up { color: #ff4f6d; }
.lab-lpage tr.vb-lr-up td:first-child { box-shadow: inset 3px 0 0 #ff4f6d; }
.lab-evwho { font-size: 13px; }
.lab-evwho .shp-meta { margin-left: 4px; }

/* v2.31.612: NEEDS A HUMAN, full width -- count + bar on top, department tabs, things in two columns */
.nh-panel { padding: 14px 16px; }
.nh-top { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 22px; align-items: start; }
.nh-bar .mc-bar-labels { font-size: 9px; }
.nh-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.nh-tab { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: var(--fg-bright); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--s) 35%, var(--border)); border-radius: 999px; padding: 5px 13px 5px 12px;
  font: 10.5px var(--font-mono); letter-spacing: 1.5px; transition: background .15s, border-color .15s; }
.nh-tab:hover { background: color-mix(in srgb, var(--s) 8%, transparent); }
.nh-tab.on { background: color-mix(in srgb, var(--s) 16%, transparent); border-color: color-mix(in srgb, var(--s) 70%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--s) 25%, transparent); }
.nh-tab.ok { opacity: .5; } .nh-tab.ok b { color: #33ff88; }
.nh-tab b { color: var(--s); font-size: 14px; font-weight: 800; }
.nh-pips { display: inline-flex; gap: 3px; }
.nh-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--s); box-shadow: 0 0 5px var(--s); }
.nh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.nh-it { display: grid; grid-template-columns: 40px minmax(0, 1fr) 48px 18px; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
  border-radius: 8px; cursor: pointer; position: relative; border: 1px solid #121a2b;
  background: linear-gradient(90deg, color-mix(in srgb, var(--s) 10%, transparent), transparent 45%); }
.nh-it::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--s); box-shadow: 0 0 8px var(--s); }
.nh-it:hover { border-color: color-mix(in srgb, var(--s) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--s) 16%, transparent), color-mix(in srgb, var(--s) 4%, transparent)); }
.nh-n { font-size: 21px; font-weight: 800; color: var(--s); text-align: center; text-shadow: 0 0 10px color-mix(in srgb, var(--s) 55%, transparent); }
.nh-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-w { color: var(--fg-bright); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-tx small { color: var(--fg-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nh-tx small em { font-style: normal; font-weight: 700; letter-spacing: 1.2px; font-size: 9.5px; color: color-mix(in srgb, var(--s) 70%, var(--fg-dim)); margin-right: 7px; }
.nh-go { color: var(--cyan); font-size: 10.5px; opacity: 0; transition: opacity .15s; text-align: right; }
.nh-it:hover .nh-go { opacity: 1; }
.nh-x { background: none; border: 0; color: var(--fg-dim); cursor: pointer; font-size: 11px; padding: 0; }
.nh-x:hover { color: #ff4f6d; } .nh-xoff { cursor: default; }
.nh-clear { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 0; color: #33ff88; }
.nh-clear b { font-size: 32px; text-shadow: 0 0 12px #33ff88; } .nh-clear span { font: 11px var(--font-mono); letter-spacing: 2px; }
.nh-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: 11px; }
.nh-foot > a { color: var(--cyan); cursor: pointer; }
.nh-foot > span { margin-left: auto; } .nh-foot .at-more { margin: 0; }
@media (max-width: 1100px) { .nh-grid { grid-template-columns: minmax(0, 1fr); } .nh-top { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
/* v2.31.615: Settings -> Routing -> Product rules -- one card per product, PO-like editor */
.sr-new { margin: 6px 0 10px; }
.sr-none { color: var(--fg-dim); font-size: 11px; padding: 8px 2px; }
.sr-g { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; background: rgba(255,255,255,.012); }
.sr-g.out_at_vendor { border-left-color: #ffcf3d; } .sr-g.low { border-left-color: #ffcf3d; }
.sr-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-gt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 240px; }
.sr-gt b { color: var(--fg-bright); font-size: 12.5px; } .sr-gt small { color: var(--fg-dim); font-size: 10.5px; }
.sr-tag { font: 700 9.5px var(--font-mono); letter-spacing: 1.3px; color: #33ff88; border: 1px solid #33ff8866; border-radius: 999px; padding: 2px 8px; }
.sr-tag.amb { color: #ffcf3d; border-color: #ffcf3d66; }
.sr-ends { font-size: 10.5px; color: var(--fg-dim); }
.sr-x { background: none; border: 0; color: var(--fg-dim); cursor: pointer; } .sr-x:hover { color: #ff4f6d; }
.sr-srcs { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sr-src { display: grid; grid-template-columns: max-content 70px max-content minmax(0, 1fr) max-content; align-items: center; gap: 10px; font-size: 11px; padding: 3px 0; border-top: 1px dashed #121a2b; }
.sr-feed { color: var(--fg-dim); } .sr-feed b { color: var(--fg-bright); } .sr-feed.amb { color: #ffcf3d; }
.sr-used { color: var(--fg-dim); font-size: 10px; }
.sr-qty { width: 84px; padding: 2px 6px; font-size: 11px; }
.sr-meter { position: relative; display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border-radius: 6px; background: #0b1120; overflow: hidden; min-width: 130px; }
.sr-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(53,232,255,.3), rgba(53,232,255,.1)); }
.sr-meter b, .sr-meter small { position: relative; } .sr-meter b { color: var(--cyan); font-size: 13px; } .sr-meter small { color: var(--fg-dim); font-size: 10px; }
.sr-meter.low b { color: #ffcf3d; }
.sr-ed { border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--border)); border-radius: 10px; padding: 12px 14px; margin: 6px 0 12px; background: rgba(53,232,255,.025); }
.sr-step { display: flex; align-items: baseline; gap: 8px; font: 700 10.5px var(--font-mono); letter-spacing: 1.6px; color: var(--fg-bright); margin: 10px 0 6px; }
.sr-step:first-child { margin-top: 0; }
.sr-step span { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); color: #04121a; font-size: 10px; }
.sr-step small { font: 10.5px var(--font-body, inherit); letter-spacing: 0; color: var(--fg-dim); text-transform: none; }
.sr-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-item { font-size: 11.5px; background: #0b1120; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; color: var(--fg-bright); }
.sr-item a { color: var(--fg-dim); cursor: pointer; margin-left: 4px; } .sr-item a:hover { color: #ff4f6d; }
.sr-search { position: relative; margin-top: 6px; } .sr-search .pu-in { width: 100%; }
.sr-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; margin-top: 3px; max-height: 300px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.sr-res button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #121a2b; padding: 7px 10px; cursor: pointer; color: var(--fg-bright); }
.sr-res button:hover { background: rgba(53,232,255,.07); } .sr-res button small { color: var(--fg-dim); font-size: 10.5px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-chip { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px var(--font-mono); letter-spacing: 1px; background: transparent; color: var(--fg-bright); border: 1px solid color-mix(in srgb, var(--c) 55%, var(--border)); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.sr-chip small { color: var(--fg-dim); font-weight: 400; }
.sr-chip.on { background: color-mix(in srgb, var(--c) 85%, transparent); color: #0a0f1a; border-color: var(--c); } .sr-chip.on small { color: #0a0f1acc; }
.sr-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.sr-tbl th { text-align: left; font-size: 9.5px; letter-spacing: 1.4px; color: var(--fg-dim); padding: 5px 6px; border-bottom: 1px solid var(--border); }
.sr-tbl td { padding: 5px 6px; border-bottom: 1px solid #121a2b; vertical-align: middle; } .sr-tbl .num { text-align: right; }
.sr-ti b { display: block; color: var(--fg-bright); font-weight: 600; } .sr-ti small { color: var(--fg-dim); font-size: 10px; }
.sr-ov { width: 72px; text-align: right; padding: 3px 6px; }
.sr-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; margin-top: 10px; }
.sr-opt { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; } .sr-opt b { display: block; color: var(--fg-bright); }
.sr-opt small { color: var(--fg-dim); font-size: 10.5px; } .sr-opt a { color: var(--cyan); cursor: pointer; }
.sr-date { padding: 2px 6px; font-size: 11px; }
.sr-note { grid-column: 1 / -1; }
.sr-fa { display: flex; gap: 8px; margin-top: 10px; }
.sr-ended { margin-top: 8px; font-size: 11px; color: var(--fg-dim); } .sr-ended summary { cursor: pointer; }
.sr-erow { display: flex; gap: 10px; align-items: center; padding: 4px 0; opacity: .7; } .sr-erow em { font-style: normal; margin-left: auto; }
/* v2.31.616: sortable order columns */
th.o-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.o-sort:hover { color: var(--fg-bright); }
th.o-sort .o-sort-ar { margin-left: 4px; font-size: 9px; opacity: .35; }
th.o-sort.on { color: var(--cyan); } th.o-sort.on .o-sort-ar { opacity: 1; }
.civ-exp { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 700 10px var(--font-mono); letter-spacing: 1.5px; color: var(--fg-dim); }
.civ-exp .ct-btn { text-decoration: none; }
/* v2.31.619: UPS invoices roll-out -- one card per billing week (mockup B) */
.civ-wks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.civ-wk2 { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: 8px; padding: 8px 10px; background: rgba(255,255,255,.012); }
.civ-wk2.rev { border-left-color: #ffcf3d; }
.civ-wk2h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.civ-wk2h > span { display: flex; flex-direction: column; } .civ-wk2h b { color: var(--fg-bright); font-size: 13px; } .civ-wk2h small { color: var(--fg-dim); font-size: 10px; }
.civ-wk2t { align-items: flex-end; color: var(--fg-bright); font-weight: 700; font-size: 13.5px; white-space: nowrap; } .civ-wk2t small { color: #ffcf3d; font-weight: 400; }
.civ-wk2r { display: grid; grid-template-columns: 14px 58px 30px auto minmax(0, 1fr) max-content; gap: 6px; align-items: center; font-size: 10.5px; padding: 4px 2px;
  border-top: 1px dashed var(--border); color: var(--fg-dim); text-decoration: none; border-radius: 4px; }
.civ-wk2r:hover { background: rgba(53,232,255,.06); } .civ-wk2r i { font-style: normal; color: var(--cyan); }
.civ-wk2a { color: var(--fg-bright); letter-spacing: .5px; } .civ-wk2n { color: var(--fg-dim); }
.civ-wk2p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .civ-wk2p em { font-style: normal; color: #ff9d35; }
.civ-wk2m { color: var(--fg-bright); white-space: nowrap; }

.civ-vtile.dim { opacity: .45; } .civ-vtile.dim:hover { opacity: .8; }
/* v2.31.625: paperwork -- the box's shipping is a stub of the same sheet, past a dotted tear line, always as tall as the page */
.lab-sheet { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: stretch; padding-right: 0; }
.lab-sheet.nostub { grid-template-columns: minmax(0, 1fr); padding-right: 14px; }
.lab-pmain { min-width: 0; padding-right: 14px; }
.lab-pstub { position: relative; border-left: 2px dashed rgba(143,163,199,.35); padding: 0 14px 6px 16px; }
.lab-pstub::before, .lab-pstub::after { content: ""; position: absolute; left: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); }
.lab-pstub::before { top: -11px; } .lab-pstub::after { bottom: -11px; }
.lab-pstub .lab-ev { border: 0; background: transparent; margin: 0; padding: 10px 0; }
.lab-pstub .lab-evh { font-size: 12px; letter-spacing: 1.5px; }
.lab-pstub .lab-evr { flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 0; }
.lab-ptear { border: 0; border-top: 1px dashed rgba(143,163,199,.3); margin: 4px 0; }
@media (max-width: 1000px) { .lab-sheet { grid-template-columns: minmax(0, 1fr); } .lab-pstub { border-left: 0; border-top: 2px dashed rgba(143,163,199,.35); padding: 4px 14px 6px 0; } .lab-pstub::before, .lab-pstub::after { display: none; } }
/* v2.31.627: the shipping stub -- one fact per line */
.lab-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 4px 0; font-size: 12px; }
.lab-kv > span { font: 700 9.5px var(--font-mono); letter-spacing: 1.4px; color: var(--fg-dim); }
.lab-kv > b { font-weight: 400; color: var(--fg-bright); min-width: 0; overflow-wrap: anywhere; }
.lab-kv > b .shp-meta { font-size: 10.5px; }
.lab-kv .lab-trk { color: var(--cyan); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3px; }
.lab-kv.warn > span { color: #ff9d35; } .lab-kv .or { color: #ff9d35; }
.lab-kv.amb > b { color: #ffcf3d; }
@media (min-width: 1001px) { .lab-sheet:not(.nostub) { grid-template-columns: minmax(0, 1fr) 340px; } }   /* v2.31.647: desktop only -- on a phone it squeezed the stub over the invoice */
/* v2.31.629: paperwork note (mockup D) -- ✎ NOTE pill in the heading, the note as a slip under it; the old note box is hidden here */
.lab-lpage .vb-notebox { display: none; }
.lab-npill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; background: transparent; cursor: pointer; border: 1px solid var(--border); color: var(--fg-dim);
  border-radius: 6px; padding: 2px 8px; font: 700 10px var(--font-mono); letter-spacing: 1px; }
.lab-npill:hover { color: #ffcf3d; border-color: #ffcf3d88; }
.lab-npill.on { color: #ffcf3d; border-color: #ffcf3d88; background: rgba(255,207,61,.06); }
.lab-nslip { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 6px; padding: 6px 10px; border-left: 3px solid #ffcf3d; background: rgba(255,207,61,.07); cursor: text; }
.lab-nslip b { font: 700 9.5px var(--font-mono); letter-spacing: 1.4px; color: #ffcf3d; line-height: 20px; flex: none; }
.lab-nslip span { font-style: italic; color: #e9eef8; font-size: 12.5px; line-height: 20px; white-space: pre-wrap; }
.lab-nslip.edit { align-items: center; }
.lab-nin { flex: 1; min-height: 22px; background: transparent; border: 0; outline: none; resize: none; font: italic 12.5px/20px var(--font-body, inherit); color: #e9eef8; }
.lab-nin::placeholder { color: rgba(143,163,199,.55); }
.lab-nslip { margin: 14px 0 10px; }
/* v2.31.632: the box journey -- the current stop's right half carries the dashes on to the destination (it was a gap) */
.shp-jmap.going .shp-stop.now::before { background: linear-gradient(90deg, var(--c) 0 50%, transparent 50%), repeating-linear-gradient(90deg, #3d4d6e 0 6px, transparent 6px 11px); background-position: 0 0, 50% 0; }
@media (max-width: 700px) { .shp-jmap.going .shp-stop.now::before { background: var(--c); } }

/* v2.31.634: REORDER -- what's already on order as PO pills; covered rows fade back */
.pu-rtable .pu-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pu-popill { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; border: 1px solid rgba(53,232,255,.55); background: rgba(53,232,255,.08); color: var(--cyan); border-radius: 12px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.pu-popill:hover { background: rgba(53,232,255,.16); }
.pu-popill b { color: var(--fg-bright); }
.pu-popill i { font-style: normal; color: #33ff88; }
.pu-popill.draft { border-color: rgba(255,204,51,.6); color: var(--warn); background: rgba(255,204,51,.07); }
.pu-popill.draft i { color: var(--warn); }
.pu-popill.late { border-color: rgba(255,79,109,.6); color: var(--danger); background: rgba(255,79,109,.07); }
.pu-popill.late i { color: var(--danger); }
.pu-pillmore { font-size: 11px; }
.pu-rtable tr.pu-cov > td { opacity: .6; }
.pu-rtable tr.pu-cov > td.pu-keep { opacity: 1; }
.pu-covtag { color: #33ff88; font-size: 12px; white-space: nowrap; }
.pu-more { display: block; font-size: 10.5px; color: var(--fg-dim); cursor: pointer; margin-top: 2px; }
.pu-more:hover { color: var(--cyan); }
.pu-grppo { color: var(--cyan); }

/* v2.31.637: ★ SMILE POINTS experiment */
.lpt-cov { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid rgba(255,204,51,.45); background: rgba(255,204,51,.06); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; font-size: 12.5px; }
.lpt-cov b { color: var(--warn); }
.lpt-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 6px; }
.lpt-tile { border: 1px solid var(--border); border-top: 2px solid var(--c); border-radius: 6px; padding: 10px 12px; background: rgba(255,255,255,.02); }
.lpt-tile span { display: block; font-size: 9.5px; letter-spacing: .16em; color: var(--fg-dim); }
.lpt-tile > b { display: block; font-size: 24px; font-weight: normal; color: var(--c); margin: 4px 0 2px; }
.lpt-tile small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; } .lpt-tile small b { color: var(--fg-bright); font-weight: normal; }
.lpt-cmp td.lpt-hi { color: var(--cyan); }
.lpt-months > div { display: grid; grid-template-columns: 56px 1fr 70px 34px; gap: 8px; align-items: center; font-size: 11.5px; padding: 2px 0; }
.lpt-months span { color: var(--fg-dim); } .lpt-months i { display: block; height: 9px; background: var(--sync-orange); border-radius: 2px; opacity: .8; }
.lpt-months b { text-align: right; font-weight: normal; color: var(--fg-bright); } .lpt-months small { color: var(--fg-dim); text-align: right; }
.lpt-v { border-left: 2px solid var(--sync-orange); padding-left: 10px; }
.lpt-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 6px; }
.lpt-src { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.015); }
.lpt-src.warn { border-color: rgba(255,204,51,.45); background: rgba(255,204,51,.05); }
.lpt-src > span { font-size: 9.5px; letter-spacing: .16em; color: var(--fg-dim); }
.lpt-src > b { font-weight: normal; color: var(--fg-bright); font-size: 14px; }
.lpt-src > small { color: var(--fg-dim); font-size: 11px; line-height: 1.4; flex: 1; }
.lpt-src > div { margin-top: 6px; } .lpt-src label.pu-btn { cursor: pointer; display: inline-block; } .lpt-src label.dis { opacity: .5; pointer-events: none; }
.lpt-msg { font-size: 12px; color: var(--cyan); margin: 4px 0 6px; }
.lpt-camp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--fg-dim); margin: 8px 0 2px; }
/* v2.31.639: the Smile tables keep their columns on a phone (they were turned into stacked cards by the PO table's phone layout) */
.lpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lpt-table th { text-align: left; font-weight: normal; font-size: 10px; letter-spacing: .1em; color: var(--fg-dim); padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: bottom; }
.lpt-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--fg); }
.lpt-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 800px) {
  .lpt-table { font-size: 11.5px; table-layout: fixed; }
  .lpt-table th { font-size: 8.5px; letter-spacing: .04em; padding: 5px 4px; white-space: normal; line-height: 1.25; }
  .lpt-table td { padding: 6px 4px; }
  .lpt-table td:first-child { word-break: break-word; line-height: 1.3; }
  .lpt-cmp:not(.lpt-top) th:first-child, .lpt-cmp:not(.lpt-top) td:first-child { width: 34%; }
  .lpt-top th:first-child, .lpt-top td:first-child { width: 38%; font-size: 10.5px; }
  .lpt-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lpt-tile > b { font-size: 20px; }
  .lpt-months > div { grid-template-columns: 44px 1fr 52px 22px; gap: 6px; font-size: 10.5px; }
}
@media (max-width: 800px) {
  .lpt-table th.num { white-space: normal; }
  .lpt-table td.num { overflow: hidden; text-overflow: clip; }
  .lpt-imp th:nth-child(5), .lpt-imp td:nth-child(5), .lpt-imp th:nth-child(6), .lpt-imp td:nth-child(6) { display: none; }
  .lpt-imp th:first-child, .lpt-imp td:first-child { width: 30%; }
}
/* v2.31.642: a vendor cost you typed (kept) -- click to follow the invoices again */
.vc-f { position: relative; }
.vc-yb { display: block; margin-top: 2px; background: none; border: 0; padding: 0; font: inherit; font-size: 9.5px; color: #b388ff; cursor: pointer; letter-spacing: .04em; }
.vc-yb:hover { color: var(--cyan); }
/* v2.31.643: brand-learning rules */
.vc-rules { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; background: rgba(255,255,255,.015); }
.vc-rh { font-size: 12px; color: var(--fg-dim); margin-bottom: 10px; } .vc-rh b { color: var(--fg-bright); font-weight: normal; }
.vc-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 22px; }
.vc-rl label { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg); } .vc-rl label b { color: var(--cyan); font-weight: normal; }
.vc-rl input[type=range] { width: 100%; accent-color: var(--cyan); margin: 4px 0 2px; }
.vc-rl small { color: var(--fg-dim); font-size: 10.5px; }
.vc-rl label.vc-rck { justify-content: flex-start; gap: 8px; align-items: center; padding-top: 14px; cursor: pointer; }
.vc-rpv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 10px; font-size: 12px; min-height: 18px; }
.vc-pv b { color: var(--fg-bright); font-weight: normal; margin-right: 4px; } .vc-pv i { color: var(--fg-dim); font-style: normal; }
.vc-rft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; }

/* v2.31.647: paperwork on a phone -- the shipping stub sits under the invoice; each invoice line is the item, then qty · price · check · total */
@media (max-width: 700px) {
  .lab-sheet { display: block; padding-right: 10px; }
  .lab-pmain { padding-right: 0; }
  .lab-pstub { padding: 6px 0 6px 0; margin-top: 6px; }
  .lab-lpage { padding-right: 10px; }
  .lab-lpage .lab-evh { font-size: 12px; letter-spacing: 1px; flex-wrap: wrap; row-gap: 4px; }
  .lab-lpage .vb-lines { display: block; font-size: 11.5px; }
  .lab-lpage .vb-lines tbody { display: block; }
  .lab-lpage .vb-lines tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: center;
    padding: 6px 0; border-bottom: 1px dashed var(--border); }
  .lab-lpage .vb-lines td { display: block; padding: 0; border: 0; text-align: left; }
  .lab-lpage .vb-lines td.vb-sku { grid-column: 1 / -1; }
  .lab-lpage .vb-lines td:nth-child(4) { justify-self: start; }
  .lab-lpage .vb-lines td:last-child { justify-self: end; color: var(--fg-bright); }
  .lab-lpage .vb-tot { line-height: 1.6; }
  .lab-kv { grid-template-columns: 84px minmax(0, 1fr); }
  .lab-lpage .vb-acts, .lab-lpage .lab-btns { flex-wrap: wrap; }
}
/* v2.31.648: Vendor Inventory side panel -- SHOPIFY LINK */
.vpl { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 6px 0 14px; background: rgba(255,255,255,.015); }
.vpl-h { font: 700 10px var(--font-mono); letter-spacing: 1.6px; color: var(--fg-dim); margin-bottom: 8px; display: flex; justify-content: space-between; }
.vpl-h small { letter-spacing: .3px; font-weight: 400; }
.vpl-now { border-left: 3px solid var(--fg-dim); padding: 4px 0 4px 10px; margin-bottom: 8px; }
.vpl-now > span { font-size: 11px; font-weight: 700; } .vpl-now.ok { border-color: #33ff88; } .vpl-now.ok > span { color: #33ff88; }
.vpl-now.warn { border-color: #ff9d35; } .vpl-now.warn > span { color: #ff9d35; }
.vpl-sub { font-size: 10.5px; color: var(--fg-dim); margin-top: 3px; } .vpl-sub a { color: var(--cyan); cursor: pointer; }
.vpl-r { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--border); }
.vpl-now .vpl-r { border-top: 0; }
.vpl-r > span { flex: 1; min-width: 0; } .vpl-r b { display: block; font-weight: 400; color: var(--fg-bright); font-size: 12px; }
.vpl-r small { color: var(--fg-dim); font-size: 10.5px; } .vpl-r i { font-style: normal; color: #b388ff; }
.vpl-lh { font: 700 9.5px var(--font-mono); letter-spacing: 1.4px; color: var(--fg-dim); margin: 6px 0 2px; }
.vpl-s input { width: 100%; box-sizing: border-box; margin-top: 8px; background: #060912; border: 1px solid var(--border); color: var(--fg-bright); padding: 6px 8px; border-radius: 5px; font: inherit; font-size: 12px; }
.vpl-dim { color: var(--fg-dim); font-size: 11px; padding: 6px 0; } .vpl-msg { color: var(--cyan); font-size: 11px; margin-top: 6px; }
/* v2.31.649: Ordoro sales channel picker */
.ord-ch { margin-bottom: 8px; }
.ord-ch select.vc2-in { max-width: 100%; min-width: 220px; }
.ord-ch-warn { color: var(--warning, #ffcc33); margin: 2px 0 4px; }
@media (max-width: 700px) { .ord-ch .vc2-row { flex-wrap: wrap; } .ord-ch select.vc2-in { min-width: 0; width: 100%; } }
/* v2.31.650: Shopify panel FORCE LINK */
.flk { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }
.flk-btn { width: 100%; text-align: left; background: rgba(53,232,255,.06); border: 1px solid rgba(53,232,255,.45); color: var(--accent, #35e8ff); font: inherit; font-size: 11px; letter-spacing: .06em; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.flk-btn small { color: var(--fg-dim); letter-spacing: 0; margin-left: 6px; }
.flk-btn.on, .flk-btn:hover { background: rgba(53,232,255,.12); }
.flk-s { margin: 8px 0 4px; }
.flk-s input { width: 100%; box-sizing: border-box; background: var(--bg, #060912); border: 1px solid var(--border); color: var(--fg-bright, #e8f0ff); font: inherit; font-size: 11px; padding: 6px 8px; border-radius: 4px; }
.flk-lh { color: var(--fg-dim); font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 2px; }
.flk-r { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 11px; }
.flk-r.here { background: rgba(51,255,136,.04); }
.flk-t { flex: 1; min-width: 0; }
.flk-t b { font-weight: 600; word-break: break-word; }
.flk-t small { display: block; color: var(--fg-dim); font-size: 10px; margin-top: 2px; word-break: break-all; }
.flk-t small.flk-warn { color: var(--warning, #ffcc33); }
.flk-a { flex: none; }
.flk-tag { font-size: 9px; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; }
.flk-dim { color: var(--fg-dim); font-size: 11px; padding: 6px 0; }
.flk-msg { font-size: 11px; color: var(--success, #33ff88); margin-top: 6px; }
/* v2.31.652: oversell guard */
.sf-guard { margin-bottom: 8px; }
.sf-guard .sf-n { width: 56px; text-align: right; }
.sf-guard .sf-pre { color: var(--fg-dim); font-size: 11px; }
.sf-guard .vc2-row { flex-wrap: wrap; gap: 6px; }
.qty-chip.floored .qty-chip-num { text-decoration: line-through; opacity: .7; }
.qty-chip-fl { margin-left: 3px; font-weight: 700; color: var(--warning, #ffcc33); }
/* v2.31.653: Settings -> Vendors, layout A -- roster table + right side bar (js/vendorset.js) */
#settings-tab-vendors { padding: 0 !important; }
.vs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) calc(440px * var(--panel-scale)); align-items: start; min-height: calc(100vh - 140px); }
.vs-main { padding: 16px 20px 24px; min-width: 0; zoom: var(--list-scale); }   /* v2.31.654: Settings -> Advanced sizes, like every other screen */
.vs-side { position: sticky; top: 0; max-height: calc((100vh - 120px) / var(--panel-scale)); overflow: auto; border-left: 1px solid var(--border); background: var(--bg-panel-2); padding: 0 16px 20px; font-size: 13.5px; align-self: stretch; min-height: calc((100vh - 140px) / var(--panel-scale)); zoom: var(--panel-scale); }
.vs-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vs-tile .stat-value { font-size: 22px; } .vs-tile .stat-label { font-size: 10.5px; }
.vs-tile .stat-value small { font-size: 13px; color: var(--fg-dim); font-weight: normal; }
.vs-tile.click { cursor: pointer; } .vs-tile.click:hover { border-color: var(--cyan); }
.vs-good { color: var(--status-instock-bg); } .vs-warn { color: var(--warn); } .vs-bad { color: var(--danger); } .vs-dim { color: var(--fg-dim); } .vs-sy { color: var(--cyan); }
.vs-tablewrap { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vs-table th { color: var(--fg-dim); font-weight: normal; text-align: left; font-size: 11px; letter-spacing: .08em; padding: 7px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.vs-table td { padding: 11px 8px; border-bottom: 1px solid #121a2c; vertical-align: middle; }
.vs-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-r { cursor: pointer; }
.vs-r:hover td { background: rgba(255,255,255,.02); }
.vs-r.on td { background: rgba(53,232,255,.06); }
.vs-r.on td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.vs-r.dragging { opacity: .4; }
.vs-r.nuked td:not(.vs-rt):not(.vs-v) { opacity: .4; }
.vs-r.roff td:not(.vs-rt) { opacity: .6; }
.vs-hand { white-space: nowrap; color: var(--fg-dim); width: 52px; min-width: 52px; }
.vs-hand .routing-handle { cursor: grab; margin-right: 6px; display: inline-block !important; vertical-align: middle; }
.vs-table td.vs-hand small { font-size: 10px; display: inline-block; vertical-align: middle; margin-top: 0; }
.vs-v { white-space: nowrap; max-width: 260px; }
.vs-v .vs-name { color: var(--fg-dim); display: inline-block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; margin-right: 4px; }
.vs-v small { display: block; margin-top: 4px; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.vs-v small .vc-status { margin: 0; }
.vs-sqs { display: inline-flex; gap: 3px; flex-wrap: wrap; max-width: 90px; }
.status-dot.vs-sq { width: 11px; height: 11px; border-radius: 2px; margin: 0; }
.vs-last { white-space: nowrap; }
.vs-whs { font-size: 12px; color: var(--fg-dim); }
.vs-wh { display: inline-flex; align-items: center; gap: 3px; margin: 1px 8px 1px 0; white-space: nowrap; }
.vs-wh b { font-size: 9px; padding: 0 3px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg-dim); }
.vs-wh b.e { color: var(--cyan); border-color: rgba(53,232,255,.4); } .vs-wh b.w { color: var(--magenta); border-color: rgba(255,79,216,.4); }
.vs-rt { width: 70px; }
.vs-hint { margin-top: 10px; font-size: 12px; }
.vs-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin: 0 -16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, color-mix(in srgb, var(--vc) 14%, transparent), transparent); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); }
.vs-head .vs-hname { color: var(--fg-bright); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-head .vc-status { margin-left: 0; }
.vs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.vs-tabs { display: flex; gap: 5px; margin: 14px 0 6px; }
.vs-tabs .panel-tab { font-size: 11.5px; padding: 7px 4px; white-space: nowrap; letter-spacing: .03em; min-width: 0; }
.vs-body { min-height: 120px; }
.vs-pad { padding: 12px 0; font-size: 13px; }
.vs-note { font-size: 12px; margin: 6px 0 4px; }
.vs-lane { padding: 12px 0 2px !important; }
.vs-fr { border-top: 1px dashed var(--border); padding: 8px 0; }
.vs-frm { display: flex; align-items: center; gap: 8px; }
.vs-frm .vs-ft { flex: 1; min-width: 0; }
.vs-frm .vs-ft .vc2-what { font-size: 13.5px; }
.vs-frm .vc2-run { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.vs-frm .vc2-run.err { color: var(--danger); }
.vs-fsched { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 15px; flex-wrap: wrap; font-size: 12px; color: var(--fg-dim); }
.vs-fsched select.vc2-in { font-size: 12.5px; padding: 4px 7px; }
.vs-fsched .feed-sched-line { margin: 0; }
.vs-whr { border-top: 1px dashed var(--border); padding: 8px 0; }
.vs-whr1, .vs-whr2 { display: flex; align-items: center; gap: 8px; }
.vs-whr2 { margin-top: 6px; padding-left: 78px; }
.vs-whcode { width: 70px; flex: none; color: var(--fg-dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.vs-whr1 .vc2-in[type="text"] { flex: 1; min-width: 0; }
.vs-kv { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.vs-kv > span:first-child { width: 130px; flex: none; color: var(--fg-dim); font-size: 12.5px; }
.vs-kv.top { align-items: flex-start; }
.vs-num { width: 84px; }
.vs-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 8px; }
.vs-tools .ord-ch, .vs-tools .sf-guard { width: 100%; }
.vs-side .vc2-sec.vc2-danger { margin-top: 22px; }
@media (max-width: 1300px) { .vs-wrap { grid-template-columns: minmax(0, 1fr) 380px; } .vs-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .vs-wrap { grid-template-columns: 1fr; }
  .vs-main { padding: 12px; }
  .vs-side { position: static; max-height: none; min-height: 0; border-left: 0; border-top: 1px solid var(--border); }
  .vs-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-table th:nth-child(5), .vs-table td:nth-child(5), .vs-table th:nth-child(7), .vs-table td:nth-child(7), .vs-table th:nth-child(8), .vs-table td:nth-child(8) { display: none; }
}
@media (max-width: 1000px) { .vs-tabs { overflow-x: auto; } .vs-tabs .panel-tab { flex: none; padding: 6px 10px; } }
/* v2.31.655: Settings -> Shipping in the Vendors layout (js/shipset.js) -- reuses the vs-* pieces */
.ss-sum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.vs-table td small { display: block; color: var(--fg-dim); font-size: 11.5px; margin-top: 3px; }
.ss-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg-dim); white-space: nowrap; }
.ss-chip.c { color: var(--cyan); border-color: rgba(53,232,255,.45); } .ss-chip.g { color: var(--status-instock-bg); border-color: rgba(51,255,136,.45); } .ss-chip.m { color: var(--magenta); border-color: rgba(255,79,216,.45); }
.vs-sub { color: var(--fg-dim); font-size: 12px; flex-basis: 100%; padding-left: 138px; margin-top: -2px; }
.ss-vrow { border-top: 1px dashed var(--border); padding: 9px 0; }
.ss-vrow > div { gap: 10px !important; flex-wrap: wrap; }
.ss-vrow select, .ss-vrow input[type="text"] { font-size: 13px !important; padding: 6px 8px !important; border-radius: 6px !important; background: rgba(0,0,0,.35) !important; }
@media (max-width: 1000px) { .ss-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vs-sub { padding-left: 0; } }
.ss-vrow .ss-vlb { width: 110px; flex: none; overflow: hidden; }
.ss-vrow .ss-vlb .vc-pill { max-width: 106px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.ss-vrow select, .ss-vrow input[type="text"] { flex: 1 1 120px !important; }
.ss-vrow select, .ss-vrow input[type="text"] { min-width: 0 !important; max-width: 100%; }
/* v2.31.656: Settings -> Routing in the Vendors layout (js/routingset.js) */
#settings-tab-routing .vs-main, #settings-tab-categories .vs-main, #settings-tab-google .vs-main, #settings-tab-backup .vs-main, #settings-tab-timeoff .vs-main, #settings-tab-advanced .vs-main { min-width: 0; }
.rtx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.rtx-seg button { background: transparent; border: 0; color: var(--fg-dim); font: inherit; font-size: 12px; letter-spacing: .06em; padding: 7px 16px; cursor: pointer; }
.rtx-seg button.on { background: var(--cyan); color: #04252b; font-weight: bold; }
.rtx-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(53,232,255,.55); color: var(--cyan); font-size: 11px; font-weight: bold; }
.rtx-num.big { width: 28px; height: 28px; font-size: 13px; flex: none; }
.rtx-name { color: var(--fg-bright); }
.rtx-sum { color: var(--fg-dim); font-size: 12.5px; }
.rtx-save { min-height: 14px; font-size: 12px; text-align: right; margin-top: 6px; }
.rtx-ew { margin: 12px 0 8px; }
.rtx-one { margin-bottom: 8px; }
.rtx-ctls { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.rtx-ctls .rt-ctl { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.rtx-ctls .rt-ctl > span:first-child { flex: 1; color: var(--fg); }
.rtx-ctls .rt-ctls { display: flex; flex-direction: column; gap: 0; margin: 0 0 10px; }
.rtx-ctls .rt-note { font-size: 12px; color: var(--fg-dim); }
.rtx-ctls input[type="time"], .rtx-ctls input[type="number"] { background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 6px; color: var(--fg-bright); font: inherit; font-size: 13px; padding: 5px 8px; max-width: 120px; }
.rtx-how { margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.015); color: var(--fg-dim); font-size: 12.5px; line-height: 1.6; }
.rtx-how b { color: var(--fg-bright); }
.rtx-how > b:first-child { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.rtx-xd { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 4px; font-size: 13px; }
.rtx-pane-l .rt-card { border: 0; background: transparent; padding: 0; }
/* v2.31.656: Settings -> Categories in the Vendors layout */
.cat2-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.cat2-bar .cat-search { flex: 1; min-width: 180px; }
.cat2-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cat2-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: 6px; font: inherit; font-size: 12.5px; padding: 6px 10px; cursor: pointer; }
.cat2-btn:hover { border-color: var(--cyan); }
.cat2-btn.on { background: var(--cyan); color: #04252b; border-color: var(--cyan); font-weight: bold; }
.cat2-btn .cat-swatch, .cat2-legend .cat-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cat2-legend > div { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.cat2-legend span { flex: 1; } .cat2-legend b { font-weight: normal; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
#settings-categories .vs-table .cat-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
/* v2.31.656: Settings -> Google in the Vendors layout */
.gw2-sum { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gw2-tile .status-dot { width: 9px; height: 9px; vertical-align: 1px; }
.gw2-h { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; flex-wrap: wrap; }
.gw2-h b { color: var(--fg-bright); font-size: 14px; }
.gw2-mail { color: var(--fg-bright); }
.gw2-sync { font-size: 12.5px; color: var(--fg-dim); max-width: 260px; }
.gw2-check { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px dashed var(--border); }
.gw2-check .status-dot { margin-top: 5px; flex: none; }
.gw2-check b { color: var(--fg-bright); font-weight: normal; display: block; } .gw2-check small { display: block; color: var(--fg-dim); font-size: 12px; margin-top: 2px; word-break: break-word; }
.gw2-copy { display: flex; gap: 8px; align-items: flex-start; } .gw2-copy code { flex: 1; font-size: 11.5px; color: var(--fg); word-break: break-all; line-height: 1.5; }
@media (max-width: 1300px) { .gw2-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* v2.31.656: Settings -> Backup in the Vendors layout */
.bk2-name { font-size: 12.5px; word-break: break-all; }
#bk-side .bk-last { font-size: 12.5px; margin: 10px 0; line-height: 1.5; }
.bk2-step { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-top: 1px dashed var(--border); font-size: 12.5px; line-height: 1.5; }
.bk2-step > b { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
.bk2-step.done > b { border-color: var(--status-instock-bg); color: var(--status-instock-bg); }
.bk2-step > span { flex: 1; min-width: 0; } .bk2-step > em { font-style: normal; color: var(--fg-dim); font-size: 11.5px; }
.bk2-step .bk-drive { width: 100%; margin: 4px 0; }
.bk2-rbox { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.bk2-rbox .bk-row { display: flex; gap: 8px; } .bk2-rbox .bk-row input { flex: 1; min-width: 0; }
#bk-main .bk-dfdrv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
#bk-main .bk-dfdrv input { flex: 1; min-width: 220px; }
#bk-main .bk-dfdrv small { flex-basis: 100%; color: var(--fg-dim); }
/* v2.31.656: Settings -> Time off in the Vendors layout */
.to2-wrap { max-width: none; font-size: 13px; }
.to2-seg { flex-wrap: wrap; border-radius: 12px; }
.to2 .to-card { max-width: none; }
.to2-av { width: 40px; }
.to2-name { color: var(--fg-bright); }
.to2-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .to2-add input { flex: 1; min-width: 140px; }
.to2-hav { cursor: pointer; flex: none; }
.to2 .to-code { font-size: 12.5px; color: var(--cyan); }
/* v2.31.656: Settings -> Advanced in the Vendors layout */
.adv-scale { margin-top: 14px; }
.adv-prevcard { border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: var(--bg-panel); }
.adv-status { margin-top: 10px; font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
/* v2.31.657: outline US map on Settings -> Routing rules + warehouse pins */
.rtx-map { margin: 6px 0 4px; }
.us-map { width: 100%; display: block; margin: 8px 0 2px; }
.us-map path { transition: fill .2s; }
.us-leg { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--fg-dim); margin: 2px 0 6px; }
.us-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.us-leg .bad { color: #ff4f6d; } .us-leg .amb { color: #ffcc33; }
.us-miss { font-size: 11.5px; color: var(--warn); line-height: 1.5; margin: 2px 0 8px; }
.us-tz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.us-tz div { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 10.5px; color: var(--fg-dim); }
.us-tz b { display: block; font-size: 16px; color: var(--fg-bright); }
.vs-pinrow { flex-wrap: wrap; }
.vs-pinlb { color: var(--fg-dim); font-size: 12px; }
.vs-pinzip { width: 74px; }
.vs-pinsrc { color: var(--fg-dim); font-size: 11.5px; flex: 1; min-width: 140px; }
/* v2.31.658: map dots + two-column key, hover lights one location */
.us-pin .us-halo { opacity: 0; transition: opacity .15s; }
.us-pin { transition: opacity .15s; }
.us-map.us-hl .us-pin { opacity: .15 !important; }
.us-map.us-hl .us-pin.on { opacity: 1 !important; }
.us-map.us-hl .us-pin.on .us-halo { opacity: .9; }
.us-key { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; margin: 4px 0 10px; }
.us-k { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; font-size: 12px; color: var(--fg); cursor: default; min-width: 0; }
.us-k i { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid #06080f; box-shadow: 0 0 0 1px rgba(255,255,255,.08); font-style: normal; font-size: 9px; font-weight: bold; color: #04121a; display: inline-flex; align-items: center; justify-content: center; }
.us-k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.us-k small { color: var(--warn); font-size: 10px; }
.us-k.off { opacity: .5; } .us-k.nopin i { opacity: .4; }
.us-k:hover, .us-k.on { background: rgba(53,232,255,.08); }
#routing-order-list .routing-row:hover { border-color: rgba(53,232,255,.5); }
.ml-bigsync { margin: 0 0 14px; } /* v2.31.661 */
/* v2.31.662: Purchasing -- REORDER + NEW PO in the side bar, ADD ALL, low banner */
.pu-acts { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin: 0 0 14px; }
.pu-act { position: relative; text-align: left; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: rgba(255,255,255,.02); font: inherit; color: var(--fg); cursor: pointer; transition: background .15s, border-color .15s; }
.pu-act b { display: block; font-size: 16px; letter-spacing: .06em; }
.pu-act small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.pu-act.re { border-color: rgba(51,255,136,.55); background: rgba(51,255,136,.06); } .pu-act.re b { color: var(--status-instock-bg); }
.pu-act.re:hover { background: rgba(51,255,136,.12); }
.pu-act.np { border-color: rgba(53,232,255,.55); background: rgba(53,232,255,.06); } .pu-act.np b { color: var(--cyan); }
.pu-act.np:hover { background: rgba(53,232,255,.12); }
.pu-act-badge { position: absolute; top: -9px; right: -6px; background: var(--warn); color: #3a2a00; font-weight: bold; font-size: 10.5px; border-radius: 999px; padding: 2px 8px; letter-spacing: .05em; }
.pu-rsel { border: 1px solid rgba(51,255,136,.45); background: rgba(51,255,136,.05); border-radius: 8px; padding: 12px; margin: 0 0 14px; }
.pu-rsel b { color: var(--status-instock-bg); font-size: 14px; letter-spacing: .04em; }
.pu-rsel small { display: block; color: var(--fg-dim); font-size: 11px; margin-top: 4px; }
.pu-rsel-b { display: flex; gap: 8px; margin-top: 10px; }
.pu-rsel.off { border-color: var(--border); background: transparent; font-size: 11.5px; }
.pu-lowbar { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255,204,51,.45); background: rgba(255,204,51,.06); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; font-size: 12.5px; }
.pu-lowbar > span:nth-child(2) { flex: 1; }
.pu-lowchip { border: 1px solid var(--warn); color: var(--warn); border-radius: 999px; font-size: 10.5px; font-weight: bold; padding: 2px 9px; white-space: nowrap; }
.pu-hdr-ro { color: var(--status-instock-bg); font-size: 11.5px; letter-spacing: .12em; font-weight: bold; }
.pu-mob-only { display: none; }
@media (max-width: 1000px) { .pu-mob-only { display: inline-block; } .pu-lowbar { flex-wrap: wrap; } }

/* v2.31.663/664: purchasing side bar -- tabs first; ORDER LOW STOCK sync-style + NEW PO outline; hold-to-generate */
.pu-acts2 { margin: 2px 0 16px; }
.pu-acts2 .stat-card { margin-top: 4px; width: 100%; }
.pu-lowpill { display: inline-block; background: var(--warn); color: #3a2a00; font-weight: bold; font-size: 10px; border-radius: 999px; padding: 1px 7px; margin-left: 8px; vertical-align: 2px; letter-spacing: .04em; }
.pu-re-info { text-align: center; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--fg-dim); }
.pu-re-info b { color: var(--fg); font-weight: normal; }
.pu-re-info .ln { display: block; }
.pu-re-info small { display: block; font-size: 11px; opacity: .8; }
.pu-np2 { display: block; width: 100%; margin-top: 12px; background: transparent; border: 1px solid rgba(53,232,255,.35); color: var(--cyan); border-radius: 6px; padding: 9px; font: inherit; font-size: 12.5px; letter-spacing: .06em; cursor: pointer; }
.pu-np2:hover { background: rgba(53,232,255,.08); border-color: rgba(53,232,255,.6); }
.pu-btn.main.pu-btn-go { background: #33ff88; border-color: #33ff88; color: #04121a; }
.pu-btn.main.pu-btn-go:hover { filter: brightness(1.1); }
.pu-rsel2 { margin: 2px 0 18px; }
.pu-rsel2.off { color: var(--fg-dim); font-size: 12px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; padding: 12px; }
.pu-gen { position: relative; overflow: hidden; width: 100%; border: 1px solid #33ff88; background: transparent; color: #33ff88; border-radius: 6px; padding: 14px 10px; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: 1px; user-select: none; -webkit-user-select: none; touch-action: none; cursor: pointer; --tail: #33ff88; }
.pu-gen:hover { background: rgba(51,255,136,.06); }
.pu-gen .fill { position: absolute; inset: 0; width: 0; background: rgba(51,255,136,.5); }
.pu-gen .txt { position: relative; z-index: 1; }
.pu-gen.holding .fill { width: 100%; transition: width 3s linear; }
.pu-gen.holding .txt { color: #fff; text-shadow: 0 0 6px #000; }
.pu-gen.done { background: #33ff88; color: #04121a; cursor: default; }
.pu-gen-i { text-align: center; margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--fg-dim); }
.pu-gen-i b { display: block; color: var(--fg); font-size: 13px; letter-spacing: .02em; }
.pu-gen-i small { display: block; font-size: 11.5px; text-wrap: balance; }
.pu-gen-i a { color: var(--fg-dim); text-decoration: underline dotted; }
.pu-gen-i a:hover { color: var(--fg); }

/* v2.31.666: one tab row (POs · Reorder · Overview), small switches inside, green low-stock banner */
.pu-tabpill { display: inline-block; margin-left: 6px; vertical-align: 1px; background: var(--warn); color: #3a2a00; font-weight: bold; font-size: 9.5px; border-radius: 999px; padding: 1px 6px; letter-spacing: .04em; }
.pu-subsw { margin: 0 0 12px; }
.pu-subsw button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-lowb { display: flex; align-items: center; gap: 16px; border: 1px solid rgba(51,255,136,.4); background: rgba(51,255,136,.045); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.pu-lowb .t { flex: 1; min-width: 0; }
.pu-lowb .t b { display: block; font-size: 13.5px; color: var(--fg); letter-spacing: .02em; }
.pu-lowb .t b .pu-lowpill { margin: 0 4px 0 0; font-size: 11px; padding: 2px 8px; }
.pu-lowb .t small { display: block; font-size: 12px; color: var(--fg-dim); margin-top: 3px; }
.pu-lowb .t small em { font-style: normal; color: var(--fg); }
.pu-lowb .big-sync { width: 270px; flex: none; }
.pu-lowb .stat-card { width: 100%; margin: 0; }
@media (max-width: 1000px) { .pu-lowb { flex-wrap: wrap; } .pu-lowb .big-sync { width: 100%; } }

/* v2.31.667: REORDER suppliers fold up; banner ORDER LOW STOCK = bright tint (S4) */
.pu-grpname { cursor: pointer; }
.pu-car2 { display: inline-block; width: 20px; color: var(--fg-dim); font-size: 15px; }
.pu-grpname:hover .pu-car2, .pu-grpname:hover b { color: var(--cyan); }
.pu-grp.shut td { border-bottom-color: var(--border); }
.pu-carall { cursor: pointer; color: var(--fg-dim); text-align: center; user-select: none; font-size: 14px; }
.pu-carall:hover { color: var(--cyan); }
.pu-lowb .stat-card.stat-action { background: rgba(51,255,136,.18); border: 1.5px solid #33ff88; box-shadow: inset 0 0 14px rgba(51,255,136,.25); }
.pu-lowb .stat-card.stat-action .stat-value { color: #b8ffd6; font-weight: 800; }
.pu-lowb .stat-card.stat-action:hover { background: rgba(51,255,136,.28); }

/* v2.31.668: low-stock bar = one clickable line (B2) */
.pu-lowb2 { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px; background: rgba(51,255,136,.14); border: 1.5px solid #33ff88; box-shadow: inset 0 0 18px rgba(51,255,136,.2); border-radius: 8px; padding: 12px 26px; font: inherit; font-size: 13.5px; color: var(--fg); cursor: pointer; text-align: left; --tail: #33ff88; transition: background .15s; }
.pu-lowb2:hover { background: rgba(51,255,136,.24); }
.pu-lowb2 .go, .pu-lowb2 .ar { color: #b8ffd6; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.pu-lowb2 .pu-lowpill { margin: 0; font-size: 11px; padding: 2px 8px; vertical-align: 0; }
.pu-lowb2 .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-lowb2 .dim { color: var(--fg-dim); }
@media (max-width: 1000px) { .pu-lowb2 { flex-wrap: wrap; padding: 10px 20px; } .pu-lowb2 .t { flex-basis: 100%; order: 3; white-space: normal; } }

/* v2.31.669: compose is wider (PO lines fit on one line) + the From mailbox's HTML signature */
.ml-sig { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.ml-sig.off { opacity: .7; }
.ml-sig-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ml-sig-h label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ml-sigframe { display: block; width: 100%; height: 90px; min-height: 60px; margin-top: 8px; border: 0; border-radius: 6px; background: #fff; }
.ml-signone { margin-top: 6px; }
.gw-sig { margin-bottom: 12px; }
.gw-sigta { font-size: 11.5px; }
.gw-sigb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* v2.31.670: ECN NJ / CA in their warehouse pill colors -- ship-to tag, PO list, item stock chips */
.pu-whpill { display: inline-block; font-size: 10px; font-weight: bold; letter-spacing: .08em; padding: 2px 8px; border-radius: 999px; background: var(--whc); color: var(--whi, #04121a); white-space: nowrap; }
.pu-cap .pu-whpill { margin-left: 6px; }
.pu-ec.wh { border-color: color-mix(in srgb, var(--whc) 45%, transparent); color: color-mix(in srgb, var(--whc) 75%, var(--fg-dim)); }
.pu-ec.wh b { color: var(--fg); }
.pu-ec.wh.dest { border-color: var(--whc); background: color-mix(in srgb, var(--whc) 16%, transparent); color: var(--whc); }
.pu-ec.wh.dest b { color: var(--whc); font-weight: bold; }

/* v2.31.673: vendor COSTS -- brand exceptions list */
.vs-exh { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 8px; }
.vs-exh b { font-size: 12px; letter-spacing: .12em; color: var(--fg); }
.vs-exh span { color: var(--fg-dim); font-size: 11px; }
.vs-exh a { margin-left: auto; }
.vs-exq { width: 100%; background: var(--bg-input, #070a12); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; color: var(--fg); font: inherit; font-size: 11.5px; margin-bottom: 8px; }
.vs-ext { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; }
.vs-ext th { color: var(--fg-dim); font-weight: normal; font-size: 9.5px; letter-spacing: .12em; text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--border); }
.vs-ext th:nth-child(2) { width: 96px; } .vs-ext th:nth-child(3) { width: 42px; } .vs-ext th:nth-child(4) { width: 52px; }
.vs-ext td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: middle; }
.vs-ext .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-ext .num { text-align: right; } .vs-ext .pc { font-weight: bold; color: var(--fg); }
.vs-exbar { height: 6px; border-radius: 3px; background: rgba(51,255,136,.12); position: relative; }
.vs-exbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #33ff88; }
.vs-extag { font-size: 9px; letter-spacing: .08em; border-radius: 3px; padding: 1px 5px; }
.vs-extag.a { color: var(--fg-dim); border: 1px solid var(--border); }
.vs-extag.y { color: #04121a; background: var(--cyan); }
.vs-exmore { display: block; text-align: center; margin-top: 8px; color: var(--cyan); font-size: 11.5px; cursor: pointer; }

/* v2.31.675: an attachment that can be dropped from the email */
.ml-att a { color: inherit; text-decoration: none; }
.ml-attx { background: none; border: 0; color: var(--fg-dim); cursor: pointer; margin-left: 6px; font: inherit; padding: 0 2px; }
.ml-attx:hover { color: #ff4f6d; }

/* v2.31.675: note timestamp */
.lab-nat { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--fg-dim); letter-spacing: .04em; }

/* v2.31.675 (N3): no vendor invoice yet */
.lab-wait { display: flex; align-items: center; gap: 14px; padding: 12px 2px 8px; }
.lab-wait .ic { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed #ffcf3d; display: flex; align-items: center; justify-content: center; color: #ffcf3d; font-size: 18px; flex: none; }
.lab-wait.late .ic { border-color: #ff9d35; }
.lab-wait .tx { min-width: 0; }
.lab-wait .tx b { display: block; font-size: 13.5px; color: var(--fg-bright, var(--fg)); letter-spacing: .06em; }
.lab-wait .tx small { display: block; font-size: 12px; color: var(--fg-dim); margin-top: 3px; }
.lab-wait .est { margin-left: auto; text-align: right; flex: none; }
.lab-wait .est b { display: block; font-size: 18px; color: var(--fg); }
.lab-wait .est small { font-size: 11px; color: var(--fg-dim); }
.lab-wait .or { color: #ff9d35; }

/* v2.31.677 (R1): restore drop zone -- nuclear test range */
.bkr { position: relative; height: 200px; margin: 10px 0 12px; border: 1.5px dashed rgba(255,157,53,.55); border-radius: 12px; overflow: hidden; background: #090d18; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.bkr svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bkr.s-drag, .bkr.s-loaded, .bkr.s-read { border-color: #ffcf3d; box-shadow: inset 0 0 18px rgba(255,207,61,.25); }
.bkr.s-armed, .bkr.s-boom { border-color: #ff4f6d; border-style: solid; box-shadow: inset 0 0 22px rgba(255,79,109,.35); cursor: default; }
.bkr.s-done { border-color: #33ff88; }
.bkr-lbl { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; z-index: 2; padding: 0 10px; pointer-events: none; }
.bkr-lbl b { display: block; letter-spacing: .22em; font-size: 13px; color: #e8eefc; text-shadow: 0 1px 4px #000; }
.bkr-lbl small { display: block; color: #8fa3c7; font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 3px #000; }
.bkr-lbl small i { color: var(--cyan); font-style: normal; }
.bkr .bkr-flash { opacity: 0; }
.bkr.s-boom .bkr-flash { animation: bkr-flash 1.6s ease-out forwards; }
@keyframes bkr-flash { 0% { opacity: 0; } 8% { opacity: .95; } 100% { opacity: 0; } }
.bkr .bkr-cloud { transform-origin: 210px 140px; transform: scale(0); opacity: 0; }
.bkr.s-boom .bkr-cloud { animation: bkr-cloud 2.4s ease-out forwards; }
@keyframes bkr-cloud { 0% { transform: scale(.1) translateY(20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1) translateY(-10px); opacity: 1; } }
.bkr.s-done .bkr-cloud { transform: scale(1) translateY(-10px); opacity: .15; transition: opacity 1.2s; }
.bkr .bkr-siren { opacity: 0; }
.bkr.s-drag .bkr-siren, .bkr.s-read .bkr-siren, .bkr.s-armed .bkr-siren { opacity: 1; animation: bkr-blink .5s steps(2) infinite; }
@keyframes bkr-blink { 50% { opacity: .15; } }
.bkr .bkr-can { transition: transform .6s; }
.bkr.s-drag .bkr-can, .bkr.s-loaded .bkr-can { transform: translateY(-6px); }
.bkr .bkr-gauge { opacity: 0; transition: opacity .3s; }
.bkr.s-read .bkr-gauge { opacity: 1; }
.bkr .bkr-needle { transform-origin: 350px 62px; animation: bkr-needle 1s ease-in-out infinite alternate; }
@keyframes bkr-needle { from { transform: rotate(-50deg); } to { transform: rotate(40deg); } }
.bkr .bkr-town { opacity: 0; transition: opacity 1s .4s; }
.bkr.s-done .bkr-town { opacity: 1; }
.bkr.s-boom .bkr-tower, .bkr.s-done .bkr-tower { opacity: 0; transition: opacity .3s; }
.bkr .bkr-count { opacity: 0; font-size: 30px; font-weight: 900; fill: #ff4f6d; letter-spacing: .1em; font-family: var(--font-mono); }
.bkr.s-armed .bkr-count { opacity: 1; animation: bkr-pulse 1s infinite; }
.bkr.s-armed.go .bkr-count { animation-duration: .35s; }
@keyframes bkr-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .bkr *, .bkr { animation: none !important; transition: none !important; } }

/* v2.31.678: contacts side panel -- ★ FAVORITES / + NEW CONTACT above the bento */
.cr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 10px; }
.cr-act { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 8px; font: inherit; font-size: 11.5px; letter-spacing: .08em; cursor: pointer; color: var(--fg); }
.cr-act b { color: var(--fg-dim); font-weight: normal; margin-left: 4px; }
.cr-act.fav { border-color: rgba(255,207,61,.45); color: #ffcf3d; }
.cr-act.fav:hover, .cr-act.fav.on { background: rgba(255,207,61,.12); }
.cr-act.fav.on { border-color: #ffcf3d; }
.cr-act.fav.on b { color: #ffcf3d; }
.cr-act.new { border-color: rgba(53,232,255,.45); color: var(--cyan); }
.cr-act.new:hover { background: rgba(53,232,255,.1); }

/* v2.31.679: UPS invoices by email */
.civ-um { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; font-size: 11.5px; }
.civ-um-h { font-size: 10.5px; letter-spacing: .14em; color: var(--fg-bright, var(--fg)); display: flex; gap: 6px; align-items: baseline; margin-bottom: 4px; }
.civ-um-h span { color: var(--fg-dim); letter-spacing: .04em; } .civ-um-h a { margin-left: auto; cursor: pointer; color: var(--cyan); }
.civ-um-r { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px dashed rgba(255,255,255,.06); }
.civ-um-r .n small { display: block; color: var(--fg-dim); font-size: 10.5px; }
.civ-um-r a { color: var(--cyan); font-size: 10.5px; border: 1px solid rgba(53,232,255,.4); border-radius: 4px; padding: 1px 6px; text-decoration: none; }
.civ-um-r .ok { color: #33ff88; font-size: 10.5px; } .civ-um-r .wait { color: #ffcf3d; font-size: 10.5px; } .civ-um-r .dim { color: var(--fg-dim); }
.civ-um-err { color: #ff9d35; font-size: 11px; margin: 4px 0; }

/* v2.31.682: invoice source badge (✉ PDF from UPS's email / CSV) + check mail in the INVOICES heading */
.civ-wk2s { flex: none; }
.civ-src { font-size: 9.5px; letter-spacing: .08em; border: 1px solid var(--border); color: var(--fg-dim); border-radius: 4px; padding: 1px 5px; font-weight: normal; white-space: nowrap; }
.civ-src.pdf { border-color: rgba(53,232,255,.45); color: var(--cyan); }
.civ-wk2p em.wait { color: #ffcf3d; font-style: normal; }
.civ-invck { margin-left: auto; margin-right: 10px; color: var(--cyan); font-size: 10.5px; letter-spacing: .06em; cursor: pointer; text-transform: none; }
.civ-invck:hover { text-decoration: underline; }
.civ-um-err.dim { color: var(--fg-dim); }

/* v2.31.684: login intro -- "click to boot" while the browser holds sound back */
.nxi-gate { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; background: rgba(3,5,10,.55); }
.nxi-gate.on { display: flex; }
.nxi-gate b { font: 800 16px var(--font-mono); letter-spacing: .3em; color: var(--cyan); text-shadow: 0 0 14px rgba(53,232,255,.6); animation: nxi-gate-p 1.4s ease-in-out infinite; }
.nxi-gate small { font: 11px var(--font-mono); letter-spacing: .14em; color: #4c6590; }
@keyframes nxi-gate-p { 50% { opacity: .45; } }

/* v2.31.685: Vendor Inventory by brand */
#brand-filter { background: var(--bg); color: var(--fg-bright); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; border-radius: 4px; width: 170px; }
#brand-filter.on { border-color: var(--cyan); color: var(--cyan); }
body.ex-mode #brand-filter { display: none !important; }
.prod-brand { display: block; font-size: 10.5px; color: var(--fg-dim); letter-spacing: .04em; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-brand a { cursor: pointer; color: inherit; }
.prod-brand a:hover { color: var(--cyan); text-decoration: underline dotted; }
@media (max-width: 800px) { .header #brand-filter { font-size: 14px; width: 130px; } }

/* v2.31.686: Vendor Inventory export */
.prod-export { background: transparent; border: 1px solid rgba(53,232,255,.45); color: var(--cyan); font: 700 11px var(--font-mono); letter-spacing: .1em; padding: 6px 12px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.prod-export:hover { background: rgba(53,232,255,.1); }
body.ex-mode #products-export { display: none !important; }

/* v2.31.688: My time off -- CANCEL sits under the status pill */
.tm-st { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.tm-cx { background: transparent; border: 1px solid rgba(255,79,109,.5); color: #ff4f6d; font: 700 10px var(--font-mono); letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.tm-cx:hover { background: rgba(255,79,109,.12); }
.tm-cx.btn-armed { background: #ff4f6d; color: #fff; }

/* v2.31.690 / .692 (mockup S6): Shopify delivery tracking -- the orders list's split pill (darker FULFILLED | status
   colour + symbol + word) and the chip after each tracking number in the order view. Colours live in app.js DLV_COLOR. */
.dlv-cap > span { display: inline-flex; align-items: center; gap: 4px; }
.dlv-cap > span.dlv-ful { background: #1f9e57; }
.dlv-cap > span.dlv-ful.part { background: #1c8a99; }
.dlv-cap svg, .dlv-chip svg { width: 11px; height: 11px; flex: none; }
.dlv-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: bold; letter-spacing: .3px; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; color: #04121a; }
.dlv-cap > span.dlv-seg.ic { padding-left: 6px; padding-right: 6px; }   /* v2.31.693: a symbol per box (B2) */
.dlv-cap > span.dlv-seg { color: #04121a; }
/* v2.31.694: every segment of a shipping/status pill is exactly the same size, with or without a symbol, so plain
   and split pills line up row to row */
.dlv-cap { height: 19px; }
.dlv-cap > span, #orders-rows .dlv-cap > span { height: 19px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; line-height: 19px; font-size: 10px; letter-spacing: .3px; }
.dlv-cap > span.dlv-seg.ic { padding-left: 6px; padding-right: 6px; }
.dlv-cap .dlv-x { opacity: .65; font-size: 9.5px; margin-left: 1px; }   /* v2.31.699: ×N boxes with that status (D2) */
/* v2.31.705: Sign in with Google on the login screen (the passphrase sits behind a link) */
.nxi-gsi { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0 4px; min-height: 44px; }
.nxi-gsi[hidden] { display: none; }
.nxi-alt { font: 10px var(--font-mono); letter-spacing: .12em; color: var(--fg-dim); cursor: pointer; border-bottom: 1px dashed currentColor; text-transform: uppercase; }
.nxi-alt:hover { color: var(--cyan); }
.nxi-step { font: 10px var(--font-mono); letter-spacing: .14em; color: var(--fg-dim); text-transform: uppercase; margin: 12px 0 0; text-align: center; }
.nxi-step:empty { display: none; }
.nxi-step b { color: var(--cyan); font-weight: 700; text-transform: none; letter-spacing: .04em; }
/* v2.31.706: USERS screen */
.us-view { padding: 14px 20px 30px; overflow: auto; }
.us-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.us-tile { border: 1px solid var(--border, #1b2636); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.02); }
.us-tile b { font-size: 22px; color: var(--fg-bright); }
.us-tile span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.us-tile.good b { color: var(--status-instock-bg); }
.us-tile.dim b { color: var(--fg-dim); }
.us-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.us-add .vc2-in { min-width: 140px; }
.us-msg { margin-top: 10px; font-size: 12px; color: var(--status-instock-bg); }
.us-msg.err { color: #ff6b61; }
@media (max-width: 800px) { .us-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v2.31.707: "STEP 1 OF 2" on its own line, the detail under it -- neither wraps */
.nxi-step { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nxi-step > span { white-space: nowrap; }
.nxi-step .nxi-step-n { color: var(--cyan); letter-spacing: .3em; }
/* v2.31.709: user pictures (shared with time off) */
.us-av { border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.06); vertical-align: middle; flex: none; }
.us-av-i { display: inline-flex; align-items: center; justify-content: center; color: var(--cyan); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(53,232,255,.35); }
.us-avcell { width: 40px; }
.us-hav { cursor: pointer; margin-right: 10px; display: inline-flex; }

/* v2.31.711: panel / list size -- steps and − / + instead of a slider */
.scl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.scl-row .scale-value { min-width: 40px; text-align: center; }
.scl-nudge { width: 30px; height: 28px; border: 1px solid var(--border, #2a3346); background: transparent; color: var(--fg-bright);
  font: inherit; font-size: 16px; line-height: 1; border-radius: 4px; cursor: pointer; }
.scl-nudge:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.scl-nudge:disabled { opacity: .3; cursor: default; }
.scl-steps { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.scl-step { border: 1px solid var(--border, #2a3346); background: transparent; color: var(--fg-dim); font: inherit; font-size: 11px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.scl-step:hover { color: var(--fg-bright); border-color: var(--cyan); }
.scl-step.on { color: #05070d; background: var(--cyan); border-color: var(--cyan); font-weight: bold; }