/* ───────────────────────────────────────────────────────────────
 * <style> block #0 extracted from LIVEFILE.html
 * ─────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════
     COLOR SYSTEM — three layers
     ════════════════════════════════════════════════════════════════════
     1) Palette tokens (--b2-*)   The raw colors. Source of truth.
     2) Role bindings (--role-*)  Each semantic concept (priority,
                                  critical, ready, etc.) gets its own
                                  variable that defaults to a palette
                                  token. User preferences override
                                  these — changing one role doesn't
                                  affect any other role that happens
                                  to share the same default token.
     3) Element CSS               References --role-* (preferred) or
                                  --b2-* (for non-semantic uses like
                                  surfaces / borders).
     Theme presets (.theme-*) override sets of roles atomically.
     Legacy variables at the bottom bridge older Sales surfaces. */
  :root {
    /* ─── Layer 1: Surface tokens (no semantic colors). */
    --b2-bg: #141416;
    --b2-surface-0: #1a1a1d;
    --b2-surface-1: #1c1c1f;
    --b2-surface-2: #242427;
    --b2-surface-3: #2c2c30;
    --b2-hairline: rgba(255,255,255,0.07);
    --b2-hairline-strong: rgba(255,255,255,0.12);
    --b2-text: #f5f5f7;
    --b2-text-2: #a1a1a6;
    --b2-text-3: #8e8e95; /* a11y: bumped to clear WCAG AA 4.5:1 on dark surface */
    --b2-text-4: #6e6e73; /* a11y: bumped — reserve for decorative fills, not body text */

    /* ─── Layer 2: Palette RGB triplets — SOURCE OF TRUTH for all
       semantic colors. Theme presets override these to cascade through
       every layer below. */
    --b2-red-rgb:    255, 69, 58;
    --b2-amber-rgb:  255, 159, 10;
    --b2-blue-rgb:   10, 132, 255;
    --b2-teal-rgb:   17, 153, 171;
    --b2-green-rgb:  48, 209, 88;
    --b2-yellow-rgb: 255, 214, 10;
    --b2-purple-rgb: 192, 132, 252;
    --b2-orange-rgb: 251, 146, 60;
    --b2-pink-rgb:   236, 72, 153;

    /* ─── Layer 3: Palette solids + tints + borders, derived from
       triplets. Theme overrides at Layer 2 propagate here automatically. */
    --b2-red:           rgb(var(--b2-red-rgb));
    --b2-red-bg:        rgba(var(--b2-red-rgb), 0.12);
    --b2-red-border:    rgba(var(--b2-red-rgb), 0.32);
    --b2-amber:         rgb(var(--b2-amber-rgb));
    --b2-amber-bg:      rgba(var(--b2-amber-rgb), 0.12);
    --b2-amber-border:  rgba(var(--b2-amber-rgb), 0.32);
    --b2-blue:          rgb(var(--b2-blue-rgb));
    --b2-blue-bg:       rgba(var(--b2-blue-rgb), 0.14);
    --b2-blue-border:   rgba(var(--b2-blue-rgb), 0.34);
    --b2-teal:          rgb(var(--b2-teal-rgb));
    --b2-teal-bg:       rgba(var(--b2-teal-rgb), 0.14);
    --b2-teal-border:   rgba(var(--b2-teal-rgb), 0.34);
    --b2-green:         rgb(var(--b2-green-rgb));
    --b2-green-bg:      rgba(var(--b2-green-rgb), 0.14);
    --b2-green-border:  rgba(var(--b2-green-rgb), 0.30);
    --b2-yellow:        rgb(var(--b2-yellow-rgb));
    --b2-yellow-bg:     rgba(var(--b2-yellow-rgb), 0.12);
    --b2-yellow-border: rgba(var(--b2-yellow-rgb), 0.32);
    --b2-purple:        rgb(var(--b2-purple-rgb));
    --b2-purple-bg:     rgba(var(--b2-purple-rgb), 0.12);
    --b2-purple-border: rgba(var(--b2-purple-rgb), 0.32);
    --b2-orange:        rgb(var(--b2-orange-rgb));
    --b2-orange-bg:     rgba(var(--b2-orange-rgb), 0.12);
    --b2-orange-border: rgba(var(--b2-orange-rgb), 0.32);
    --b2-pink:          rgb(var(--b2-pink-rgb));
    --b2-pink-bg:       rgba(var(--b2-pink-rgb), 0.14);
    --b2-pink-border:   rgba(var(--b2-pink-rgb), 0.36);

    /* ─── Layer 4: Role bindings — what user preferences override
       individually. Each defaults to a palette token; the user can
       remap an individual role without affecting others that share
       the same default. */
    /* Critical / Alerts (red family) */
    --role-priority:        var(--b2-red);
    --role-priority-bg:     var(--b2-red-bg);
    --role-priority-border: var(--b2-red-border);
    --role-critical:        var(--b2-red);
    --role-critical-bg:     var(--b2-red-bg);
    --role-critical-border: var(--b2-red-border);
    --role-no-stock:        var(--b2-red);
    --role-no-stock-bg:     var(--b2-red-bg);
    --role-no-stock-border: var(--b2-red-border);
    --role-slipped:         var(--b2-red);

    /* Caution / Waiting (amber family) */
    --role-queued-build:        var(--b2-amber);
    --role-queued-build-bg:     var(--b2-amber-bg);
    --role-queued-build-border: var(--b2-amber-border);
    --role-low-stock:           var(--b2-amber);
    --role-low-stock-bg:        var(--b2-amber-bg);
    --role-low-stock-border:    var(--b2-amber-border);
    --role-needs-build:         var(--b2-amber);
    --role-needs-build-bg:      var(--b2-amber-bg);
    --role-needs-build-border:  var(--b2-amber-border);
    --role-wop:                 var(--b2-amber);
    --role-orphan:              var(--b2-amber);
    --role-orphan-bg:           var(--b2-amber-bg);
    --role-orphan-border:       var(--b2-amber-border);
    --role-choose-bin:          var(--b2-amber);
    --role-choose-bin-bg:       var(--b2-amber-bg);

    /* In Progress (blue family) */
    --role-building-now:        var(--b2-blue);
    --role-building-now-bg:     var(--b2-blue-bg);
    --role-building-now-border: var(--b2-blue-border);
    --role-outbound:            var(--b2-blue);
    --role-outbound-bg:         var(--b2-blue-bg);
    --role-outbound-border:     var(--b2-blue-border);
    --role-ship-by-date:        var(--b2-blue);
    --role-ship-by-date-bg:     var(--b2-blue-bg);
    --role-ship-by-date-border: var(--b2-blue-border);

    /* Info / Context (teal family) */
    --role-inspection:        var(--b2-teal);
    --role-inspection-bg:     var(--b2-teal-bg);
    --role-inspection-border: var(--b2-teal-border);
    --role-custom:            var(--b2-teal);
    --role-custom-bg:         var(--b2-teal-bg);
    --role-custom-border:     var(--b2-teal-border);
    --role-temp-bin:          var(--b2-teal);
    --role-temp-bin-bg:       var(--b2-teal-bg);
    --role-temp-bin-border:   var(--b2-teal-border);

    /* Success / Complete (green family) */
    --role-ready:            var(--b2-green);
    --role-ready-bg:         var(--b2-green-bg);
    --role-ready-border:     var(--b2-green-border);
    --role-permanent-bin:    var(--b2-green);
    --role-permanent-bin-bg: var(--b2-green-bg);

    /* On Purchase Order (purple) */
    --role-on-po:        var(--b2-purple);
    --role-on-po-bg:     var(--b2-purple-bg);
    --role-on-po-border: var(--b2-purple-border);

    /* Allocated to Orders (orange) */
    --role-allocated-qty:    var(--b2-orange);
    --role-allocated-qty-bg: var(--b2-orange-bg);

    /* Action / UI (yellow family — 5 distinct roles, same default. Each
       customizes independently so changing CTAs doesn't shift the
       today indicator or vice versa.) */
    --role-cta-primary:        var(--b2-yellow);
    --role-cta-primary-bg:     var(--b2-yellow-bg);
    --role-cta-primary-border: var(--b2-yellow-border);
    --role-today:              var(--b2-yellow);
    --role-today-bg:           var(--b2-yellow-bg);
    --role-drag-target:        var(--b2-yellow);
    --role-drag-target-bg:     var(--b2-yellow-bg);
    --role-cursor-row:         var(--b2-yellow);

    /* Calendar — calendar-specific roles. Three of these are decoupled
       overrides for roles that also exist app-wide: changing
       critical-calendar lets the user tint calendar critical chips
       differently from critical badges elsewhere. They default to the
       primary role so behaviour is unchanged until the user diverges. */
    --role-planned-build:               var(--b2-teal);
    --role-planned-build-bg:            var(--b2-teal-bg);
    --role-planned-build-border:        var(--b2-teal-border);
    --role-critical-calendar:           var(--role-critical);
    --role-critical-calendar-bg:        var(--role-critical-bg);
    --role-critical-calendar-border:    var(--role-critical-border);
    --role-building-now-calendar:        var(--role-building-now);
    --role-building-now-calendar-bg:     var(--role-building-now-bg);
    --role-building-now-calendar-border: var(--role-building-now-border);

    /* Role RGB triplet aliases — for legacy rgba() bridges. Each maps
       to the palette triplet of its default token. Per-role customizing
       requires updating the role triplet alongside the role solid. */
    --role-critical-rgb:      var(--b2-red-rgb);
    --role-on-po-rgb:         var(--b2-purple-rgb);
    --role-allocated-qty-rgb: var(--b2-orange-rgb);
    --role-ready-rgb:         var(--b2-green-rgb);
    --role-cta-primary-rgb:   var(--b2-yellow-rgb);
    --role-temp-bin-rgb:      var(--b2-teal-rgb);

    /* Brand-mark — LOCKED. Not surfaced in the settings UI. */
    --brand-mark-1: #ffd60a;
    --brand-mark-2: #ffb84d;

    /* ─── Layer 5: Legacy bridges — older Sales surfaces reference
       these names. Aliased to the new system so user preferences
       propagate across the whole app. */
    --yellow:        var(--role-cta-primary);
    --dark-gray:     var(--b2-bg);
    --teal:          var(--b2-teal);
    --white:         var(--b2-text);
    --light-gray:    #E9E9E9;
    --light-yellow:  #FEE7A4;
    --status-good:   var(--role-ready);
    --status-low:    var(--role-low-stock);
    --status-out:    #6b7280;
    --status-lowvol: #7c8694;
    --status-deep:   #38bdf8;
    --status-otw:    var(--role-on-po);
    --status-good-bg:   var(--role-ready-bg);
    --status-low-bg:    var(--role-low-stock-bg);
    --status-out-bg:    rgba(107,114,128,0.14);
    --status-lowvol-bg: rgba(124,134,148,0.10);
    --status-deep-bg:   rgba(56,189,248,0.10);
    --status-otw-bg:    var(--role-on-po-bg);
  }

  /* ════════════════════════════════════════════════════════════════════
     THEME PRESETS — applied as a class on <body>. Each preset overrides
     palette RGB triplets, which cascade through palette solids/tints,
     role bindings, and legacy bridges automatically.

     Roles that the user has individually customized in their preferences
     get persisted as :root overrides at runtime, which take precedence
     over both the preset class and the default declarations above.
     ══════════════════════════════════════════════════════════════════ */

  /* High-Contrast — boosted saturation/brightness, all colors hit
     WCAG AA on the dark surface (4.5:1 for text, 3:1 for UI). */
  body.theme-high-contrast {
    --b2-red-rgb:    255, 80, 64;
    --b2-amber-rgb:  255, 176, 32;
    --b2-blue-rgb:   74, 163, 255;
    --b2-teal-rgb:   93, 196, 216;
    --b2-green-rgb:  80, 221, 112;
    --b2-yellow-rgb: 255, 224, 64;
    --b2-purple-rgb: 212, 154, 255;
    --b2-orange-rgb: 255, 164, 80;
    --b2-text:   #ffffff;
    --b2-text-2: #c5c5cb;
    --b2-text-3: #8e8e95;
    --b2-text-4: #5e5e65;
    --b2-hairline:        rgba(255,255,255,0.14);
    --b2-hairline-strong: rgba(255,255,255,0.22);
  }

  /* Deuteranopia — red-green color blindness (most common, ~6% of men).
     Uses the Okabe-Ito palette as a base: vermillion replaces red,
     sky-blue replaces green for "success", deeper blue distinguishes
     "in progress" from "success", purple-magenta replaces ambiguous
     reds. Yellow stays bright; teal stays cyan-leaning. */
  body.theme-deuteranopia {
    --b2-red-rgb:    213, 94, 0;     /* vermillion */
    --b2-amber-rgb:  230, 159, 0;    /* deeper orange */
    --b2-blue-rgb:   0, 114, 178;    /* deeper blue */
    --b2-teal-rgb:   0, 158, 115;    /* bluish-green (teal-leaning) */
    --b2-green-rgb:  86, 180, 233;   /* sky-blue replaces green for success */
    --b2-yellow-rgb: 240, 228, 66;
    --b2-purple-rgb: 204, 121, 167;  /* reddish-purple */
    --b2-orange-rgb: 230, 159, 0;
  }

  /* Tritanopia — blue-yellow color blindness (rare, ~0.01%). Blues read
     as red/pink and yellows as pink/white. Solution: shift the blues
     toward magenta and the yellows toward red. Red and green are
     unaffected. */
  body.theme-tritanopia {
    --b2-red-rgb:    255, 69, 58;
    --b2-amber-rgb:  255, 105, 97;   /* coral instead of amber */
    --b2-blue-rgb:   178, 118, 178;  /* purple instead of blue */
    --b2-teal-rgb:   72, 169, 138;   /* greener teal */
    --b2-green-rgb:  48, 209, 88;
    --b2-yellow-rgb: 251, 113, 133;  /* coral-red replaces yellow */
    --b2-purple-rgb: 159, 122, 234;
    --b2-orange-rgb: 220, 76, 100;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: 'Avenir Next', 'Nunito Sans', -apple-system, sans-serif;
    background: var(--dark-gray);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ─── A11Y BASELINE ─────────────────────────────────────────────────────
     - Visible keyboard focus on every interactive element. The codebase
       strips outlines on many inputs/buttons; this :focus-visible rule
       re-establishes a consistent ring so keyboard users can see what's
       focused. Mouse users don't get it (the -visible variant only fires
       on keyboard nav).
     - prefers-reduced-motion: neutralizes the 50+ keyframe animations
       and transitions for users with vestibular sensitivity.
     - Skip link: hidden until it receives focus, then jumps to <main>. */
  :focus-visible {
    outline: 2px solid var(--yellow, #ffd60a);
    outline-offset: 2px;
    border-radius: 4px;
  }
  /* Don't double-ring elements that already paint their own focus indicator
     (e.g. native checkboxes, native radio buttons). They still get the
     outline; this is just a hook for components that want to opt out. */
  [data-no-focus-ring]:focus-visible { outline: none; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  .skip-link {
    position: fixed;
    top: -100px; left: 12px;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--yellow, #ffd60a);
    color: #1a1300;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: top 0.15s ease;
  }
  .skip-link:focus-visible {
    top: 12px;
    outline-offset: 2px;
  }

  /* Visually-hidden utility — content readable by screen readers but
     invisible on screen. Used for sr-only labels, button-reason text
     attached via aria-describedby, etc. */
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }

  /* aria-disabled buttons get the same visual treatment as native
     :disabled (opacity drop + not-allowed cursor), but stay focusable +
     announceable so AT users hear the aria-describedby reason. The
     existing per-component :disabled rules still apply on top — this is
     just the cross-cutting baseline. */
  button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  button[aria-disabled="true"]:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Re-entry repaints — when background data lands (demand, warehouse, BOM
     prefetch) while the user stays on the same view, render() rebuilds the
     content and the entrance fade would replay, which reads as "flashing" on
     load. body.reentry (set by render() on same-view repaints) suppresses the
     entrance fade so updates are seamless; a genuine view change clears it so
     the fade still plays once on arrival. */
  body.reentry .card,
  body.reentry .stocking-card,
  body.reentry .stocking-row-card,
  body.reentry .sku-table-wrap { animation: none !important; opacity: 1 !important; }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  /* ─── HEADER ─── */
  .header {
    padding: 24px 36px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ─── APP SHELL (V4a) ───────────────────────────────────────────────
     Thin top strip used across every dashboard mode. Brand + workspace
     label on the left, page tabs (Sales / Stocking / Calendar /
     Warehouse / Customization) immediately after, then search + bell +
     avatar pinned right. Sticky to viewport top so it stays available
     while scrolling long queues. Self-contained: defines its own
     --b2-* tokens locally so the BOM v2 vocabulary doesn't have to be
     cascaded from a parent .stockv2 wrapper. */
  .app-shell {
    /* Palette/role tokens inherited from :root — see top of stylesheet. */
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    padding: 10px 22px;
    background: var(--b2-surface-0);
    border-bottom: 1px solid var(--b2-hairline);
    /* Fixed (not sticky): the ec-shell below is position:fixed, so the header
       must be fixed too — otherwise mobile body-scroll rubber-bands the header
       against the fixed shell (header slides, rail doesn't, content jumps).
       Body scroll is locked below; the only scrollers are the rail + ec-content. */
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    color: var(--b2-text);
  }
  /* App shell owns the viewport: kill body scroll so mobile can't rubber-band
     the fixed header/rail. All scrolling happens inside .ec-content / .ec-rail. */
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app-shell-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
  .app-shell-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  /* Live build stamp — dim, unobtrusive, sits next to the brand. Populated
     from APP_VERSION so you can confirm at a glance which build is deployed. */
  .app-version {
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
    color: var(--b2-text-3); opacity: 0.65; align-self: center;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    appearance: none; background: none; border: 0; padding: 2px 4px; margin: 0;
    cursor: pointer; border-radius: 5px; transition: opacity .12s, background .12s, color .12s;
  }
  .app-version:hover { opacity: 1; color: var(--b2-text-2, #c7c7cc); background: rgba(255,255,255,.07); }
  .app-version:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(120,160,255,.5); opacity: 1; }

  /* Brand mark — uses the Elite Core logo image. Click navigates home.
     Wrapped in a <button> for proper semantic interactivity; the button
     wrapper is style-stripped to render the same as the legacy <img>
     onclick. */
  .app-brand-logo-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    flex: 0 0 auto;
  }
  .app-brand-logo {
    height: 22px; width: auto;
    flex: 0 0 auto;
    opacity: 0.92;
    transition: opacity 0.15s;
    pointer-events: none; /* clicks reach the button wrapper */
  }
  .app-brand-logo-btn:hover .app-brand-logo { opacity: 1; }

  /* Workspace label — separates brand from page nav with a hairline. */
  .app-workspace {
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--b2-text);
    padding-right: 14px;
    border-right: 1px solid var(--b2-hairline);
    white-space: nowrap;
  }

  /* Page tabs — Sales / Stocking / Calendar / Warehouse / Customization.
     Active item gets a slightly raised surface + inset hairline. */
  .app-pagenav { display: flex; align-items: center; gap: 1px; }
  .app-pagenav-item {
    height: 30px; padding: 0 14px;
    background: transparent; border: 0; border-radius: 7px;
    color: var(--b2-text-2);
    font: inherit; font-size: 13px; font-weight: 500;
    letter-spacing: -0.005em;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center;
    transition: background 0.12s, color 0.12s;
  }
  .app-pagenav-item:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  .app-pagenav-item.active {
    color: var(--b2-text); background: var(--b2-surface-2);
    box-shadow: inset 0 0 0 1px var(--b2-hairline-strong);
    font-weight: 600;
  }
  .app-pagenav-item:disabled {
    opacity: 0.4; cursor: not-allowed;
  }
  .app-pagenav-item:disabled:hover { background: transparent; color: var(--b2-text-2); }
  /* Nested nav group — Stocking parent with a Calendar/Queue submenu. */
  .app-pagenav-group { position: relative; display: inline-block; }
  .app-pagenav-parent { display: inline-flex; align-items: center; gap: 5px; }
  .app-pagenav-parent .app-pagenav-caret {
    color: var(--b2-text-3);
    transition: transform 0.12s ease;
  }
  .app-pagenav-group.is-open .app-pagenav-parent .app-pagenav-caret { transform: rotate(180deg); }
  .app-pagenav-group.is-open .app-pagenav-parent {
    color: var(--b2-text);
    background: var(--b2-surface-2);
  }
  .app-pagenav-submenu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 160px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    padding: 4px;
    display: none;
    z-index: 200;
  }
  .app-pagenav-group.is-open > .app-pagenav-submenu { display: flex; flex-direction: column; gap: 1px; }
  .app-pagenav-subitem {
    background: transparent; border: 0;
    color: var(--b2-text-2);
    font: inherit; font-size: 13px; font-weight: 500;
    letter-spacing: -0.005em;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .app-pagenav-subitem:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  .app-pagenav-subitem.active {
    color: var(--b2-text); background: var(--b2-surface-2);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--b2-hairline-strong);
  }

  /* Search — wraps the existing #searchWrap. Styles inherit a flat shape
     that matches the app-shell instead of the legacy teal-glow input. */
  .app-shell .search-wrap {
    width: 280px; max-width: 280px;
    margin: 0;
  }
  .app-shell .search-input {
    width: 100%;
    height: 30px;
    padding: 0 12px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    font-size: 12.5px; font-weight: 500;
    letter-spacing: 0;
  }
  .app-shell .search-input::placeholder { color: var(--b2-text-3); font-weight: 500; }
  .app-shell .search-input:focus {
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-3);
    box-shadow: none;
  }
  .app-shell .search-results {
    top: calc(100% + 4px);
    background: var(--b2-surface-1);
    border-color: var(--b2-hairline);
  }

  /* View-toggle (Compact / Expanded) — compressed for the thin top strip.
     Existing markup retained so setViewMode keeps targeting #btnCompact /
     #btnExpanded; switchDashboardMode toggles visibility based on mode. */
  .app-shell .view-toggle {
    display: flex; gap: 1px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    padding: 2px;
  }
  .app-shell .view-toggle .view-btn {
    height: 24px; padding: 0 10px;
    background: transparent; border: 0; border-radius: 5px;
    color: var(--b2-text-2);
    font: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .app-shell .view-toggle .view-btn:hover { color: var(--b2-text); }
  .app-shell .view-toggle .view-btn.active {
    background: var(--b2-surface-3); color: var(--b2-text);
  }

  /* Stale-data alert — a Lucide-style rounded warning triangle outlined
     in red, with a small database-zap glyph nested inside. Drawn as a
     single SVG so the rounded corners come from stroke-linejoin:round
     (rather than a hard clip-path). Native title attribute carries the
     hover tooltip; updateRefreshIndicator() sets it on a 10s interval. */
  .app-shell .refresh-alert {
    width: 30px; height: 30px;
    padding: 0;
    background: transparent;
    color: var(--role-critical);
    cursor: help;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    border: 0;
  }
  .app-shell .refresh-alert svg { display: block; }
  .app-shell .refresh-alert:hover { color: #ff6b62; }

  /* Notification bell icon button. */
  .app-iconbtn {
    width: 30px; height: 30px; padding: 0;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text-2);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    transition: background 0.12s, color 0.12s;
  }
  .app-iconbtn:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  /* Unified global lookup search bar (replaces the SKU + Order icon buttons). */
  .global-search { position: relative; display: inline-flex; align-items: center; }
  .global-search-icon { position: absolute; left: 9px; display: inline-flex; color: var(--b2-text-3); pointer-events: none; }
  .global-search-input {
    width: 200px; max-width: 34vw; height: 30px; box-sizing: border-box;
    padding: 0 26px 0 30px; background: var(--b2-surface-0, #1c1c1e);
    border: 1px solid var(--b2-hairline); border-radius: 8px;
    color: var(--b2-text); font: inherit; font-size: 12.5px;
    transition: border-color .12s, box-shadow .12s, width .15s;
  }
  .global-search-input::placeholder { color: var(--b2-text-3); }
  /* type=search adds a native clear button — hide it; we have a custom one. */
  .global-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
  .global-search-input:focus { outline: none; width: 280px; border-color: color-mix(in srgb, var(--b2-accent,#6ea8fe) 55%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--b2-accent,#6ea8fe) 22%, transparent); }
  .global-search-clear { position: absolute; right: 6px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--b2-text-3); cursor: pointer; border-radius: 5px; }
  .global-search-clear:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  .global-search-results {
    position: absolute; top: calc(100% + 6px); right: 0; width: 460px; max-width: 86vw;
    max-height: 66vh; overflow-y: auto; background: #16181a;
    border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,.55); z-index: 7000; padding: 6px;
  }
  .gs-section-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--b2-text-3); padding: 8px 8px 4px; }
  .gs-row { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; padding: 8px 9px; background: none; border: 0; border-radius: 7px; color: var(--b2-text); font: inherit; font-size: 13px; cursor: pointer; }
  .gs-row:hover, .gs-row.gs-active { background: var(--b2-surface-2, rgba(255,255,255,.06)); }
  .gs-pip { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; align-self: center; box-shadow: 0 0 5px rgba(0,0,0,.35); }
  .gs-row-dim { opacity: .5; }
  .gs-row-dim:hover { opacity: .8; }
  .gs-row-id { font-weight: 650; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
  .gs-row-sub { font-size: 11.5px; color: var(--b2-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
  .gs-row-status { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; color: var(--b2-text-2); background: var(--b2-surface-2, rgba(255,255,255,.08)); border: 1px solid var(--b2-hairline); border-radius: 999px; padding: 1px 8px; align-self: center; }
  .gs-showall { display: block; width: 100%; text-align: left; padding: 8px 9px; margin-top: 2px; background: none; border: 0; border-radius: 7px; color: var(--b2-accent, #6ea8fe); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
  .gs-showall:hover { background: var(--b2-surface-2, rgba(255,255,255,.06)); }
  .gs-back { display: inline-flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 8px 9px; background: none; border: 0; color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 4px; border-radius: 0; }
  .gs-back:hover { color: var(--b2-text); }
  .gs-empty { padding: 12px 10px; font-size: 12.5px; color: var(--b2-text-3); }
  @media (max-width: 760px) { .global-search-input { width: 130px; } .global-search-input:focus { width: 170px; } .global-search-results { width: 86vw; } }
  .app-iconbtn-dot {
    position: absolute; top: 5px; right: 5px;
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--role-critical);
    border: 1.5px solid var(--b2-surface-0);
    pointer-events: none;
  }
  /* Numbered "action required" badge variant (Review Requests inbox). Wider
     than the plain dot, carries the open-request count, and the host button
     gets a subtle amber ring so it reads as needing attention. */
  .app-iconbtn-count {
    top: 2px; right: 2px; width: auto; height: 15px; min-width: 15px;
    padding: 0 4px; border-radius: 999px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9.5px; font-weight: 800; line-height: 1; color: #1a1a1d;
    background: var(--role-cta-primary, #ffd84d);
  }
  .app-iconbtn.has-pending { color: var(--b2-text); box-shadow: inset 0 0 0 1px var(--b2-amber-border, rgba(255,159,10,0.55)); }

  /* Avatar button (right-most). Overrides legacy .user-trigger chrome so
     it renders as a clean 28px circle. The dropdown panel still anchors
     to #userInfoMenu so existing toggleUserMenu / panel rules apply. */
  .app-shell .user-info { margin-top: 0; gap: 10px; }
  .app-shell .user-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 999px;
  }
  .app-shell .user-trigger:hover { background: transparent; border-color: transparent; }
  .app-shell .user-info.open .user-trigger {
    background: transparent; border-color: transparent;
  }
  .app-shell .user-trigger-caret { display: none; }
  .app-shell .user-name { display: none; }
  .app-shell .user-avatar-wrap { width: 28px; height: 28px; }
  .app-shell .user-photo,
  .app-shell .user-photo-placeholder {
    width: 28px; height: 28px;
    border-color: var(--b2-hairline-strong);
  }
  .app-shell .user-photo-placeholder {
    background: linear-gradient(135deg, #4d3a8a, #c66bb8);
    color: var(--b2-text);
    font-size: 10.5px;
  }
  /* The notif-dot id is now relocated onto the bell button. Hide any
     legacy dot that might still sit inside the avatar wrap. */
  .app-shell .user-avatar-wrap .user-notif-dot { display: none !important; }

  /* Mobile collapse: stack workspace + nav, drop search width. */
  @media (max-width: 768px) {
    .app-shell {
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px 14px;
    }
    .app-shell-left { gap: 10px; flex-wrap: wrap; flex: 1 0 100%; }
    .app-shell-right { flex: 1 0 100%; justify-content: flex-end; }
    .app-shell .search-wrap { width: 100%; max-width: 100%; }
    .app-workspace { display: none; }
    .app-pagenav { flex-wrap: wrap; gap: 2px; }
    .app-pagenav-item { padding: 0 10px; font-size: 12px; }
    .app-shell .refresh-indicator { display: none; }
  }

  /* ─── MOBILE ─── */
  @media (max-width: 768px) {
    .header {
      padding: 16px 16px 12px;
      flex-direction: column;
      align-items: stretch;
    }
    .header > div:first-child {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .header > div:first-child .breadcrumb {
      display: none;
    }
    .header > div[style*="flex:1"] {
      padding: 0 !important;
      flex-direction: column !important;
      gap: 8px !important;
    }
    .search-wrap {
      max-width: 100% !important;
    }
    .header-right {
      flex-direction: row !important;
      justify-content: space-between;
      align-items: center;
    }
    .header-logo-img {
      height: 28px;
    }
    .wordmark-badge {
      font-size: 8px;
      padding: 2px 7px;
      margin-left: 8px;
    }
    .gradient-bar {
      margin-bottom: 14px;
    }
    .content {
      padding: 0 16px 24px !important;
    }
    .card-grid {
      grid-template-columns: 1fr !important;
    }
    .card-grid.subline-grid {
      grid-template-columns: 1fr !important;
    }
    /* On phones, drop the fixed-height cap. With cards stacked vertically,
       fixed heights just create dead space. The expand button still works. */
    .card.card-fixed {
      height: auto !important;
      overflow: visible !important;
    }
    .card.card-fixed .sl-block.sl-overflow {
      display: none;
    }
    .card.card-fixed.card-expanded .sl-block.sl-overflow {
      display: flex;
    }
    .back-btn {
      margin-bottom: 12px;
    }
    .clock-date {
      display: none;
    }
    .view-toggle {
      align-self: stretch;
    }
    .view-btn {
      flex: 1;
    }
    .filter-row {
      flex-wrap: wrap;
    }
    .filter-btn {
      font-size: 11px;
      padding: 5px 10px;
    }
    .sku-table {
      font-size: 12px;
    }
    .sku-table th, .sku-table td {
      padding: 8px 6px !important;
    }
    .sku-table th:first-child, .sku-table td:first-child {
      padding-left: 10px !important;
    }
    .sku-table th:last-child, .sku-table td:last-child {
      padding-right: 10px !important;
    }
    /* Drop the desktop Status min-width so the table doesn't overflow on mobile. */
    .sku-table th:nth-child(7), .sku-table td:nth-child(7) { min-width: 0; }
    .expanded-section-header {
      font-size: 12px;
    }
    .search-results {
      max-height: 300px;
    }
    .coming-badge {
      position: static;
      display: inline-block;
      margin-bottom: 8px;
    }
  }
  .wordmark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
  }
  .header-logo-img {
    height: 36px;
    width: auto;
  }
  .wordmark-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(var(--role-temp-bin-rgb),0.15);
    color: var(--teal);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.45);
    letter-spacing: 0.12em;
    position: relative;
    top: -2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
  }
  .wordmark-badge:hover {
    background: rgba(var(--role-temp-bin-rgb),0.25);
  }
  .wordmark-badge-arrow {
    font-size: 8px;
    opacity: 0.6;
  }
  .mode-badge-wrap {
    position: relative;
    display: inline-block;
    margin-left: 14px;
  }
  .mode-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #2a2c2d;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 4px;
    min-width: 160px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    z-index: 100;
    display: none;
  }
  .mode-dropdown.open {
    display: block;
  }
  .mode-dropdown-item {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    border-radius: 5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.12s;
  }
  .mode-dropdown-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--white);
  }
  .mode-dropdown-item.active {
    color: var(--teal);
    background: rgba(var(--role-temp-bin-rgb),0.1);
  }
  .header-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .clock {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .clock-date {
    margin-left: 12px;
    color: rgba(255,255,255,0.25);
  }
  .global-pills {
    display: flex;
    gap: 8px;
  }

  /* ─── BREADCRUMB ─── */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    margin-bottom: 8px;
  }
  .breadcrumb-item {
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.45);
    transition: color 0.2s;
  }
  .breadcrumb-item:hover { color: var(--white); }
  .breadcrumb-item.active { color: var(--yellow); cursor: default; }
  .breadcrumb-item.root.active { color: var(--white); }
  .breadcrumb-sep {
    color: rgba(255,255,255,0.15);
    font-size: 12px;
  }

  /* ─── GRADIENT DIVIDER ─── */
  .gradient-bar {
    height: 3px;
    background: linear-gradient(to right, var(--teal), var(--yellow));
    margin-bottom: 24px;
  }

  /* ─── CONTENT ─── */
  .content {
    padding: 0 36px 40px;
  }
  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 8px 18px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    letter-spacing: 0.04em;
    transition: all 0.2s;
  }
  .back-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
  }

  /* ─── GRID ─── */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
  }
  .card-grid.subline-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  /* ─── CARDS ─── */
  .card {
    border-radius: 12px;
    padding: 24px 22px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 150px;
    justify-content: space-between;
    opacity: 0;
    animation: fadeIn 0.35s ease forwards;
  }
  /* Fixed-height variant used on the category and family overview grids.
     Caps card height for visual uniformity in the grid; content top-aligns and
     overflow is hidden until the user clicks the expand button. */
  .card.card-fixed {
    height: 260px;
    justify-content: flex-start;
    overflow: hidden;
    transition: height 0.25s ease, all 0.25s ease;
  }
  .card.card-fixed.card-expanded {
    height: auto;
    overflow: visible;
  }
  /* Sub-family rows hidden by default when the card has more than the visible
     threshold. Expand button reveals them. */
  .card-fixed .sl-block.sl-overflow {
    display: none;
  }
  .card-fixed.card-expanded .sl-block.sl-overflow {
    display: flex;
  }
  .card-expand-btn {
    margin-top: auto;
    align-self: stretch;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
  }
  .card-expand-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.12);
  }
  .card-expand-btn .chev {
    display: inline-block;
    margin-right: 4px;
    transition: transform 0.2s ease;
  }
  .card-expanded .card-expand-btn .chev {
    transform: rotate(180deg);
  }
  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  /* Status fills take the KPI tiles' top-down gradient sheen (stronger tint at
     the top, fading down) but settle to a faint tint of the SAME status color
     rather than all the way to transparent — on the taller 260px cards a full
     fade-out left the colored border bounding empty space at the bottom (the
     "floating stroke"). Keeping a low same-color tail keeps the fill cohesive
     edge-to-edge so the border reads as part of the card. Borders unchanged. */
  .card.border-good {
    background: linear-gradient(180deg, rgba(var(--role-ready-rgb),0.22), rgba(var(--role-ready-rgb),0.07));
    border: 1px solid rgba(var(--role-ready-rgb),0.30);
  }
  .card.border-good:hover {
    background: linear-gradient(180deg, rgba(var(--role-ready-rgb),0.30), rgba(var(--role-ready-rgb),0.11));
  }
  .card.border-low {
    background: linear-gradient(180deg, rgba(var(--role-cta-primary-rgb),0.22), rgba(var(--role-cta-primary-rgb),0.07));
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.30);
  }
  .card.border-low:hover {
    background: linear-gradient(180deg, rgba(var(--role-cta-primary-rgb),0.30), rgba(var(--role-cta-primary-rgb),0.11));
  }
  .card.border-out {
    background: linear-gradient(180deg, rgba(107,114,128,0.18), rgba(107,114,128,0.06));
    border: 1px solid rgba(107,114,128,0.25);
  }
  .card.border-out:hover {
    background: linear-gradient(180deg, rgba(107,114,128,0.26), rgba(107,114,128,0.10));
  }
  .card.border-lowvol {
    background: linear-gradient(180deg, rgba(124,134,148,0.16), rgba(124,134,148,0.05));
    border: 1px solid rgba(124,134,148,0.18);
  }
  .card.border-lowvol:hover {
    background: linear-gradient(180deg, rgba(124,134,148,0.22), rgba(124,134,148,0.08));
  }
  .card.border-deep {
    background: linear-gradient(180deg, rgba(56,189,248,0.20), rgba(56,189,248,0.06));
    border: 1px solid rgba(56,189,248,0.25);
  }
  .card.border-deep:hover {
    background: linear-gradient(180deg, rgba(56,189,248,0.28), rgba(56,189,248,0.10));
  }
  .card.border-otw {
    background: linear-gradient(180deg, rgba(var(--role-on-po-rgb),0.20), rgba(var(--role-on-po-rgb),0.06));
    border: 1px solid rgba(var(--role-on-po-rgb),0.25);
  }
  .card.border-otw:hover {
    background: linear-gradient(180deg, rgba(var(--role-on-po-rgb),0.28), rgba(var(--role-on-po-rgb),0.10));
  }

  .card-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 3px;
  }
  .card-title.large { font-size: 24px; letter-spacing: -0.02em; }
  .card-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ─── SUB-LINE ROWS inside category cards ─── */
  .sl-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
  }
  .sl-block {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .sl-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px 6px 0 0;
    background: rgba(255,255,255,0.03);
  }
  .sl-block:last-child .sl-row,
  .sl-block .sl-row:only-child {
    border-radius: 6px;
  }
  .sl-block:has(.sl-lengths) .sl-row {
    border-radius: 6px 6px 0 0;
  }
  .sl-lengths {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px 10px 6px 28px;
    background: rgba(255,255,255,0.02);
    border-radius: 0 0 6px 6px;
    align-items: center;
  }
  .sl-row-name {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    min-width: 80px;
    letter-spacing: 0.02em;
  }
  .sl-row-bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: rgba(107,114,128,0.2);
    overflow: hidden;
    display: flex;
  }
  .sl-row-bar .good { background: var(--status-good); }
  .sl-row-bar .low { background: var(--status-low); }
  .sl-row-bar .otw { background: var(--role-on-po); }
  .sl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .sl-dot.st-good { background: var(--status-good); }
  .sl-dot.st-low { background: var(--status-low); }
  .sl-dot.st-out { background: var(--status-out); }
  .sl-dot.st-lowvol { background: var(--status-lowvol); }
  .sl-dot.st-deep { background: #38bdf8; }
  .sl-dot.st-otw { background: var(--role-on-po); }
  .sl-row-counts {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    white-space: nowrap;
  }

  /* ─── LENGTH CALLOUTS ─── */
  .length-callouts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    align-items: center;
  }
  .length-callout-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 2px;
  }
  .length-callout-label.out-label { color: var(--status-out); }
  .length-callout-label.low-label { color: var(--status-low); }
  .len-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.02em;
  }
  .len-tag.out-tag {
    background: var(--status-out-bg);
    color: var(--status-out);
    border: 1px solid rgba(107,114,128,0.35);
    opacity: 0.5;
  }
  .len-tag.low-tag {
    background: var(--status-low-bg);
    color: var(--status-low);
    border: 1px solid var(--role-low-stock-border);
  }
  .len-tag.good-tag {
    background: var(--status-good-bg);
    color: var(--status-good);
    border: 1px solid var(--role-ready-border);
  }
  .len-tag.lowvol-tag {
    background: var(--status-lowvol-bg);
    color: var(--status-lowvol);
    border: 1px solid rgba(124,134,148,0.35);
  }
  .len-tag.deep-tag {
    background: var(--status-deep-bg);
    color: var(--status-deep);
    border: 1px solid rgba(56,189,248,0.35);
  }
  .len-tag.otw-tag {
    background: var(--status-otw-bg);
    color: var(--status-otw);
    border: 1px solid var(--role-on-po-border);
  }
  .len-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.1);
    margin: 0 4px;
  }
  .len-sl {
    opacity: 0.6;
    font-weight: 600;
    margin-right: 1px;
  }

  /* ─── HEALTH BAR ─── */
  .health-bar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(107,114,128,0.25);
    overflow: hidden;
    display: flex;
    margin-bottom: 14px;
  }
  .health-good { background: var(--status-good); transition: width 0.5s; }
  .health-low { background: var(--status-low); transition: width 0.5s; }
  .health-otw { background: var(--role-on-po); transition: width 0.5s; }

  /* ─── STATUS PILLS ─── */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .pill.large {
    padding: 6px 16px;
    font-size: 17px;
    gap: 8px;
  }
  .pill .icon { font-size: 9px; }
  .pill.large .icon { font-size: 11px; }
  .pill-good { background: var(--status-good-bg); color: var(--status-good); }
  .pill-low { background: var(--status-low-bg); color: var(--status-low); }
  .pill-out { background: var(--status-out-bg); color: var(--status-out); }
  .pill-lowvol { background: var(--status-lowvol-bg); color: var(--status-lowvol); }
  .pill-deep { background: var(--status-deep-bg); color: var(--status-deep); }
  .pill-otw { background: var(--status-otw-bg); color: var(--status-otw); }

  /* ─── TABLE CONTROLS ─── */
  .coming-badge {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(var(--role-on-po-rgb),0.15);
    color: var(--role-on-po);
    border: 1px solid var(--role-on-po-border);
    letter-spacing: 0.02em;
  }
  .coming-badge.po-clickable { cursor: pointer; transition: background 120ms, border-color 120ms, transform 120ms; }
  .coming-badge.po-clickable:hover { background: rgba(var(--role-on-po-rgb),0.30); border-color: var(--role-on-po); transform: translateY(-1px); }
  /* Incoming PO modal — Sales "More coming" badge opens open purchase orders */
  .po-modal {
    width: min(680px, 96vw); max-height: calc(100vh - 104px); display: flex; flex-direction: column;
    background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  }
  .po-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 20px 24px 18px; border-bottom: 1px solid var(--b2-hairline);
  }
  .po-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--b2-text); margin-top: 5px; }
  .po-body { padding: 16px 24px 20px; overflow-y: auto; }
  .po-summary { font-size: 12px; color: var(--b2-text-3); margin: 0 2px 14px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
  .po-summary b { color: var(--b2-text-2); font-weight: 700; }
  .po-card {
    border: 1px solid var(--b2-hairline); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--b2-surface-2);
  }
  .po-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .po-card-id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .po-num { font-size: 14px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .po-num-link { cursor: pointer; color: var(--role-on-po); }
  .po-num-link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .po-lines-detail th { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b2-text-3); padding: 0 0 4px; }
  .po-lines-detail th.r { text-align: right; }
  .po-line-done { opacity: 0.45; }
  .po-desc { font-size: 13px; color: var(--b2-text-2); margin-top: 8px; line-height: 1.4; }
  .po-notes { margin-top: 12px; border-top: 1px solid var(--b2-hairline); padding-top: 10px; }
  .po-notes-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--b2-text-3); margin-bottom: 4px; }
  .po-notes-body { font-size: 12.5px; color: var(--b2-text-2); line-height: 1.5; white-space: pre-wrap; }
  .po-vendor { font-size: 12.5px; color: var(--b2-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .po-pill {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex: none;
    background: var(--b2-surface-3); color: var(--b2-text-3); border: 1px solid var(--b2-hairline);
  }
  .po-pill.ack    { background: rgba(var(--role-on-po-rgb),0.15); color: var(--role-on-po); border-color: var(--role-on-po-border); }
  .po-pill.ship   { background: var(--role-ready-bg); color: var(--role-ready); border-color: var(--role-ready-border); }
  .po-pill.crit   { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); }
  .po-pill.closed { background: var(--b2-surface-3); color: var(--b2-text-3); }
  .po-card-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--b2-text-2); }
  .po-meta-label { color: var(--b2-text-3); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; margin-right: 2px; }
  .po-track { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--role-on-po); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .po-track svg { width: 13px; height: 13px; }
  .po-track:hover { text-decoration: underline; }
  .po-lines { width: 100%; border-collapse: collapse; margin-top: 10px; }
  .po-lines td { padding: 6px 0; border-top: 1px solid var(--b2-hairline); font-size: 13px; color: var(--b2-text); }
  .po-lines td.r { text-align: right; }
  .po-sku { font-variant-numeric: tabular-nums; }
  .po-qty { color: var(--b2-text-2); }
  .po-qty strong { color: var(--b2-text); }
  .po-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--role-on-po-rgb),0.15);
    color: var(--role-on-po);
    border: 1px solid var(--role-on-po-border);
    letter-spacing: 0.02em;
    margin-left: 6px;
    cursor: default;
  }
  .po-badge.po-clickable { cursor: pointer; transition: background 120ms, border-color 120ms; }
  .po-badge.po-clickable:hover { background: rgba(var(--role-on-po-rgb),0.30); border-color: var(--role-on-po); }
  /* "Arriving" badge — shipped & en route (distinct from purple "on order") */
  .arriving-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
    background: var(--role-ready-bg); color: var(--role-ready); border: 1px solid var(--role-ready-border);
    letter-spacing: 0.02em; margin-left: 6px;
  }
  .arriving-badge.po-clickable { cursor: pointer; transition: filter 120ms; }
  .arriving-badge.po-clickable:hover { filter: brightness(1.12); }
  .build-planned-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(var(--role-cta-primary-rgb),0.12);
    color: var(--yellow);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.4);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: default;
  }
  .build-req-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--role-critical-rgb),0.12);
    color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
    letter-spacing: 0.02em;
    margin-left: 6px;
    cursor: default;
  }
  .build-active-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--role-temp-bin-rgb),0.15);
    color: var(--teal);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.45);
    letter-spacing: 0.02em;
    margin-left: 6px;
    cursor: default;
  }
  .demand-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--role-allocated-qty-rgb),0.15);
    color: var(--role-allocated-qty);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.45);
    letter-spacing: 0.02em;
    margin-left: 6px;
    cursor: default;
  }
  .demand-badge-info {
    /* Tier B2 mid sentence info — canonical font 11/700/0.02em/no transform.
       Was 600 weight; bumped to 700 to match its B2 siblings (.coming-badge,
       .po-badge, .build-req-badge, .build-active-badge, .demand-badge). */
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.10);
    letter-spacing: 0.02em;
    margin-left: 6px;
    cursor: default;
  }
  .recent-orders-link {
    color: var(--teal);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(var(--role-temp-bin-rgb),0.3);
    text-underline-offset: 2px;
    transition: all 0.15s;
  }
  .recent-orders-link:hover {
    text-decoration-color: var(--teal);
  }
  /* Order number link inside the Recent Orders modal. Subtle by default;
     underline thickens on hover so the row still feels approachable to scan. */
  .order-link {
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.15);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
  }
  .order-link:hover {
    text-decoration-color: var(--teal);
  }
  .hold-btn-inline {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.15s;
  }
  .hold-btn-inline:hover {
    color: rgba(255,255,255,0.5);
  }
  .held-link {
    color: var(--role-on-po);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(var(--role-on-po-rgb),0.3);
    text-underline-offset: 2px;
    transition: all 0.15s;
  }
  .held-link:hover {
    text-decoration-color: var(--role-on-po);
  }
  .hold-name-input {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--white);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 12px;
    outline: none;
    transition: border-color 0.15s;
  }
  .hold-name-input:focus {
    border-color: rgba(255,255,255,0.25);
  }
  /* ── Hide Family modal — Elite Core brand redesign (Claude Design handoff) ──
     Brand dark surface (#262829), the var(--role-cta-primary) yellow CTA, --b2-teal for the
     "back in stock / ready" state. Classes carry the hover/focus/disabled
     states inline styles can't. */
  .hf-modal { width: 648px; max-width: 94vw; max-height: 90vh; display: flex; flex-direction: column; background: #262829; border: 1px solid #3b3e40; border-radius: 20px; box-shadow: 0 24px 56px rgba(28,29,30,0.55), 0 2px 8px rgba(28,29,30,0.4); overflow: hidden; font-family: 'Avenir Next', 'Nunito Sans', sans-serif; }
  .hf-head { flex: none; padding: 24px 28px 18px; border-bottom: 1px solid #3b3e40; }
  .hf-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b2-teal, #1199ab); }
  .hf-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; color: #fff; line-height: 1.1; }
  .hf-crit { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ff8a82; background: rgba(204,58,58,0.16); border: 1px solid rgba(204,58,58,0.42); border-radius: 9999px; padding: 4px 10px; white-space: nowrap; }
  .hf-crit-dot { width: 5px; height: 5px; border-radius: 50%; background: #ff6b6b; }
  .hf-meta { font-size: 13px; color: #888a8b; margin-top: 9px; }
  .hf-close { flex: none; width: 38px; height: 38px; border-radius: 11px; background: transparent; border: 1px solid #3b3e40; color: #b8babb; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .16s; }
  .hf-close:hover { background: #34373a; color: #fff; transform: translateY(-1px); }
  .hf-body { overflow: auto; padding: 20px 28px 24px; flex: 1; min-height: 0; }
  .hf-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-top: 1px solid #3b3e40; background: rgba(255,255,255,0.012); }
  .hf-foot-note { font-size: 12.5px; color: #888a8b; }
  .hf-btn-cancel { background: #34373a; color: #fff; border: 0; border-radius: 12px; padding: 11px 20px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .16s; }
  .hf-btn-cancel:hover { background: #414548; }
  .hf-btn-submit { background: var(--role-cta-primary); color: #262829; border: 0; border-radius: 12px; padding: 11px 24px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: all .2s; }
  .hf-btn-submit:hover { background: #ffe066; box-shadow: 0 6px 20px rgba(var(--b2-yellow-rgb),0.35); }
  .hf-btn-submit:active { background: #e6c133; transform: translateY(1px); }
  .hf-btn-submit:disabled { opacity: 0.32; pointer-events: none; }
  .hf-unhide { background: transparent; color: #ff8a82; border: 1px solid rgba(204,58,58,0.42); border-radius: 12px; padding: 11px 18px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .16s; }
  .hf-unhide:hover { background: rgba(204,58,58,0.14); color: #ffb0a8; }
  .hf-tablewrap { border: 1px solid #3b3e40; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.012); }
  .hf-thead, .hf-row-grid { display: grid; grid-template-columns: 1fr 70px 70px 118px; gap: 22px; align-items: center; padding: 12px 18px; }
  .hf-thead { background: rgba(255,255,255,0.025); }
  .hf-th { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7f8284; }
  .hf-th.r { text-align: right; }
  .hf-row { border-top: 1px solid rgba(255,255,255,0.06); transition: background .16s; }
  .hf-row.bad { background: rgba(204,58,58,0.08); }
  .hf-matcell { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .hf-check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #5c5f61; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .14s; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
  .hf-check.on { border-color: var(--b2-teal, #1199ab); background: var(--b2-teal, #1199ab); }
  .hf-name { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .14s; }
  .hf-name.off { color: #9a9c9d; }
  .hf-ft { font-size: 10px; color: #7f8284; flex: none; }
  .hf-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; border-radius: 5px; padding: 2px 6px; flex: none; }
  .hf-tag.out { color: #ff8a82; background: rgba(204,58,58,0.16); border: 1px solid rgba(204,58,58,0.42); }
  .hf-tag.low { color: var(--role-cta-primary); background: rgba(var(--b2-yellow-rgb),0.14); border: 1px solid rgba(var(--b2-yellow-rgb),0.4); }
  .hf-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: #e6e7e8; }
  .hf-num.out { color: #ff8a82; }
  .hf-po { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: #9a9c9d; }
  .hf-po.none { color: #5b5e60; }
  .hf-thr { width: 100%; text-align: right; font-family: inherit; font-variant-numeric: tabular-nums; border-radius: 9px; padding: 9px 12px; font-size: 14px; outline: none; transition: border-color .12s, box-shadow .12s; background: rgba(255,255,255,0.06); border: 1px solid #3b3e40; color: #fff; }
  .hf-thr:focus { border-color: var(--role-cta-primary); box-shadow: 0 0 0 3px rgba(var(--b2-yellow-rgb),0.28); }
  .hf-thr:disabled { background: rgba(255,255,255,0.02); border-color: #303335; color: #55585a; cursor: not-allowed; }
  /* Level set at/below on-hand — already satisfied, so it's not a real gate. */
  .hf-thr.bad, .hf-thr.bad:focus { border-color: rgba(204,58,58,0.75); box-shadow: 0 0 0 3px rgba(204,58,58,0.22); }
  .hf-summary { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; }
  .hf-summary-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
  .hf-summary-count { flex: none; font-size: 12px; font-weight: 700; border-radius: 9999px; padding: 4px 11px; letter-spacing: 0.02em; }
  .hf-summary-text { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.45; color: #d6d7d8; }
  .hf-summary.neutral { background: rgba(255,255,255,0.04); border: 1px solid #3b3e40; }
  .hf-summary.neutral .hf-summary-dot { background: #888a8b; }
  .hf-summary.ready { background: rgba(17,153,171,0.10); border: 1px solid rgba(17,153,171,0.42); }
  .hf-summary.ready .hf-summary-dot { background: var(--b2-teal, #1199ab); }
  .hf-summary.ready .hf-summary-count { background: var(--b2-teal, #1199ab); color: #fff; }
  .hf-summary.bad { background: rgba(204,58,58,0.12); border: 1px solid rgba(204,58,58,0.42); }
  .hf-summary.bad .hf-summary-dot { background: #ff6b6b; }
  .hf-summary.bad .hf-summary-count { background: rgba(204,58,58,0.9); color: #fff; }
  .hold-existing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: rgba(var(--role-on-po-rgb),0.06);
    border: 1px solid rgba(var(--role-on-po-rgb),0.12);
    border-radius: 8px;
    margin-bottom: 6px;
  }
  .hold-existing-info {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
  }
  .hold-existing-info strong {
    color: var(--role-on-po);
  }
  .hold-release-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(var(--role-critical-rgb),0.2);
    background: none;
    color: var(--role-critical);
    cursor: pointer;
    transition: all 0.15s;
  }
  .hold-release-btn:hover {
    background: rgba(var(--role-critical-rgb),0.1);
    border-color: rgba(var(--role-critical-rgb),0.4);
  }
  .hold-manage-people {
    margin-bottom: 12px;
  }
  .hold-manage-toggle {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
  }
  .hold-manage-toggle:hover {
    color: rgba(255,255,255,0.4);
  }
  .hold-people-manager {
    margin-top: 8px;
    padding: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .hold-person-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
  }
  .hold-person-remove {
    font-size: 11px;
    color: rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
  }
  .hold-person-remove:hover {
    color: var(--role-critical);
    background: rgba(var(--role-critical-rgb),0.1);
  }
  .table-controls {
    margin-bottom: 14px;
  }
  .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .filter-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.25);
    margin-right: 4px;
  }
  .filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
  }
  .filter-btn.inactive {
    opacity: 0.5;
  }
  .filter-btn.inactive:hover {
    opacity: 0.8;
  }
  .filter-count {
    font-size: 11px;
    opacity: 0.7;
  }
  .sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
  }
  .sortable:hover {
    color: var(--yellow) !important;
  }
  .sort-active {
    color: var(--yellow) !important;
  }

  /* ─── TABLE ─── */
  .sku-table-wrap {
    background: rgba(255,255,255,0.025);
    border-radius: 12px;
    overflow: hidden;
    animation: fadeIn 0.35s ease both;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
  .sku-table {
    width: 100%;
    border-collapse: collapse;
  }
  .sku-table thead tr {
    background: rgba(255,255,255,0.04);
    text-align: left;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
  .sku-table th { padding: 14px 12px; }
  .sku-table th:first-child, .sku-table td:first-child { padding-left: 16px; }
  .sku-table th:last-child, .sku-table td:last-child { padding-right: 16px; }
  .sku-table th.r, .sku-table td.r { text-align: right; }

  /* Per-column spacing tuning for the 8-col Sales layout:
     1 SKU · 2 Available · 3 Cost · 4 Wholesale · 5 Recent · 6 Held · 7 Status · 8 On Hand.
     Auto-layout spreads slack unevenly, so we tighten two specific seams and
     reserve room for the Status badges (mobile keeps its own !important padding). */
  .sku-table th:nth-child(1), .sku-table td:nth-child(1) { padding-right: 6px; }  /* SKU → Available */
  .sku-table th:nth-child(2), .sku-table td:nth-child(2) { padding-left: 6px; }
  .sku-table th:nth-child(4), .sku-table td:nth-child(4) { padding-right: 6px; }  /* Wholesale → Recent */
  .sku-table th:nth-child(5), .sku-table td:nth-child(5) { padding-left: 6px; }
  .sku-table th:nth-child(7), .sku-table td:nth-child(7) { min-width: 170px; }    /* Status: room for badges */

  .sku-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s;
  }
  .sku-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); }
  .sku-table tbody tr:hover { background: rgba(255,255,255,0.06); }

  .sku-table td {
    padding: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
  }
  .sku-table td.sku-name { color: var(--white); font-weight: 700; }
  .sku-table td.dim { color: rgba(255,255,255,0.5); }
  .sku-table td.col-min { color: var(--yellow); }
  .sku-table td.col-max { color: var(--teal); }
  .sku-table td.dash { color: rgba(255,255,255,0.15); }

  .status-badge {
    /* Tier B2 mid sentence info — canonical font 11/700/0.02em/no transform.
       Content reads "Good"/"Low"/"Out" — sentence case is appropriate, and
       the tight 0.02em tracking matches the .coming-badge / .po-badge family
       it sits alongside. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .status-badge.good { background: var(--status-good-bg); color: var(--status-good); border: 1px solid var(--role-ready-border); }
  .status-badge.low  { background: var(--status-low-bg);  color: var(--status-low);  border: 1px solid var(--role-low-stock-border); }
  .status-badge.out  { background: var(--status-out-bg);  color: var(--status-out);  border: 1px solid rgba(107,114,128,0.35); }
  .status-badge.lowvol { background: var(--status-lowvol-bg); color: var(--status-lowvol); border: 1px solid rgba(124,134,148,0.35); }
  .status-badge.info { background: var(--b2-blue-bg); color: var(--b2-blue); border: 1px solid var(--b2-blue-border); }
  .status-badge.deep { background: var(--status-deep-bg); color: var(--status-deep); border: 1px solid rgba(56,189,248,0.35); }
  .status-badge.otw  { background: var(--status-otw-bg);  color: var(--status-otw);  border: 1px solid var(--role-on-po-border); }

  /* ─── LOADING ─── */
  .loading-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    animation: fadeIn 0.3s ease both;
  }
  .loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: var(--yellow);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .refresh-indicator {
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .refresh-indicator .refresh-time { color: rgba(255,255,255,0.4); }
  .error-banner {
    background: rgba(107,114,128,0.12);
    border: 1px solid rgba(107,114,128,0.25);
    border-radius: 8px;
    padding: 14px 20px;
    color: var(--status-out);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    animation: fadeIn 0.3s ease both;
  }
  /* ─── SEARCH ─── */
  .search-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
  }
  .search-input {
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--white);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s;
  }
  .search-input::placeholder {
    color: rgba(255,255,255,0.25);
    font-weight: 500;
  }
  .search-input:focus {
    border-color: var(--teal);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(var(--role-temp-bin-rgb),0.15);
  }
  .search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1e2024;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  }
  .search-results.open { display: block; }
  .search-group-label {
    padding: 10px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
  }
  .search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 12px;
  }
  .search-item:hover, .search-item.active { background: rgba(255,255,255,0.06); }
  .search-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .search-item-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
  }
  .search-item-path {
    font-size: 11px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .search-item-right {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .search-item-stat {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
  }
  .search-empty {
    padding: 20px 16px;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 13px;
    font-weight: 600;
  }
  .search-highlight {
    color: var(--yellow);
  }

  /* ─── VIEW TOGGLE ─── */
  .view-toggle {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
  }
  .view-btn {
    padding: 8px 16px;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: rgba(255,255,255,0.35);
  }
  .view-btn:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.04);
  }
  .view-btn.active {
    background: rgba(255,255,255,0.08);
    color: var(--yellow);
  }

  /* Sales-screen Compact/Expanded toggle: restore the compact look it had in
     the header. #content (where the Sales screen renders) is a sibling of the
     <header class="app-shell">, so the `.app-shell .view-toggle` rule above
     never reaches this instance — it was falling through to the big plain
     `.view-toggle`/`.view-btn` style. Re-scope via the wrapper id (#viewToggle
     beats the plain class) and mirror the header block (lines ~559–577). */
  #viewToggle.view-toggle {
    display: flex; gap: 1px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    padding: 2px;
    overflow: visible;
    flex-shrink: 0;
    width: max-content;
    align-self: center;
  }
  #viewToggle .view-btn {
    height: 24px; padding: 0 10px;
    background: transparent; border: 0; border-radius: 5px;
    color: var(--b2-text-2);
    font: inherit; font-size: 11px; font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }
  #viewToggle .view-btn:hover { color: var(--b2-text); background: transparent; }
  #viewToggle .view-btn.active {
    background: var(--b2-surface-3); color: var(--b2-text);
  }

  /* ─── EXPANDED SECTIONS ─── */
  .expanded-section {
    margin-bottom: 32px;
  }
  .expanded-section-header {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* ─── MODE SWITCH ─── */
  .mode-switch-bar {
    text-align: center;
    padding: 32px 0 16px;
  }
  .mode-switch-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.2s;
  }
  .mode-switch-btn:hover {
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.2);
  }

  /* ─── STOCKING VIEW ─── */
  .stocking-section {
    margin-bottom: 28px;
  }
  .stocking-section-header {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .stocking-table-wrap {
    overflow-x: auto;
    margin-bottom: 16px;
  }
  .stocking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .stocking-table th {
    text-align: left;
    padding: 10px 14px;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .stocking-table th.r { text-align: right; }
  .stocking-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
  }
  .stocking-table td.r { text-align: right; }
  .stocking-table td.sku-name {
    font-weight: 700;
    color: var(--white);
  }
  .stocking-table tr:hover {
    background: rgba(255,255,255,0.03);
  }
  .stocking-table tr.bom-clickable:hover {
    background: rgba(255,255,255,0.06);
  }
  .stocking-table tr.bom-clickable:hover .sku-name {
    color: var(--yellow);
  }
  .stocking-qty {
    color: var(--yellow);
    font-weight: 800;
    font-size: 15px;
  }
  .stocking-cost {
    color: rgba(255,255,255,0.5);
  }
  .stocking-summary {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    flex-wrap: wrap;
  }
  .stocking-stat {
    text-align: center;
  }
  .stocking-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--yellow);
  }
  .stocking-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-top: 2px;
  }
  .stocking-empty {
    text-align: center;
    padding: 48px;
    color: rgba(255,255,255,0.3);
    font-size: 16px;
    font-weight: 600;
  }
  .stocking-columns {
    column-count: 3;
    column-gap: 16px;
  }
  @media (max-width: 1200px) {
    .stocking-columns { column-count: 2; }
  }
  @media (max-width: 768px) {
    .stocking-columns { column-count: 1; }
  }
  .stocking-card {
    break-inside: avoid;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 14px;
    cursor: default;
    opacity: 0;
    animation: fadeIn 0.35s ease forwards;
  }
  .stocking-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .stocking-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .stocking-card-cat {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
  }
  .stocking-connector-group {
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
  }
  .stocking-connector-group:hover {
    background: rgba(255,255,255,0.06);
  }
  .stocking-connector-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  .stocking-connector-group:hover .stocking-connector-name {
    color: rgba(255,255,255,0.7);
  }
  .stocking-flat-click {
    padding: 4px 4px;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
  }
  .stocking-flat-click:hover {
    background: rgba(255,255,255,0.06);
  }
  .stocking-build-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 4px;
  }
  .stocking-build-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    border: 1px solid;
    border-radius: 5px;
    padding: 4px 8px;
  }
  .stocking-build-len {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
  }
  .stocking-build-qty {
    font-size: 11px;
    font-weight: 600;
  }
  .stocking-list {
    /* Container for category sections. Each section emits its own grid
       (.cat-section-grid) so this just stacks them vertically. */
    display: block;
  }
  .stocking-row-card {
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 0.35s ease forwards;
    height: 200px;
    position: relative;
    perspective: 800px;
    -webkit-perspective: 800px;
  }
  .stocking-row-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }
  .stocking-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
  }
  .stocking-row-card.flipped .stocking-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
  .card-face {
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 20px 16px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #2a2c2d;
    box-sizing: border-box;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
  .card-face.stocking-face {
    /* No z-index: 3D context handles face occlusion via backface-visibility.
       Explicit z-index can confuse Firefox's preserve-3d ordering. */
  }
  .card-face.sales-face {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /* overflow lives on .sales-face-scroll inside us — Firefox flattens
       a preserve-3d context if any child has overflow:auto, so we keep
       this face overflow-free and let the inner wrapper handle scroll. */
    background: #263538;
    border-color: rgba(var(--role-temp-bin-rgb),0.15);
    justify-content: flex-start;
  }
  .sales-face-scroll {
    /* Scroll wrapper inside the sales face. Keeps overflow off the 3D
       context's children so Firefox doesn't flatten the rotation. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .flip-back-btn {
    font-size: 14px;
    color: rgba(255,255,255,0.3);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .flip-legend {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .flip-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .flip-legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .flip-back-btn:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
  }
  .scroll-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: rgba(255,255,255,0.4);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }
  .sales-face-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 28px;
    background: linear-gradient(to top, rgba(30,40,42,0.95), transparent);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .stocking-row-card.flipped .sales-face-fade.show {
    opacity: 1;
  }
  .stocking-row-card.flipped .scroll-hint.needs-scroll {
    animation: scrollHintPulse 2.5s ease 1s forwards;
  }
  @keyframes scrollHintPulse {
    0% { opacity: 0; transform: translateX(-50%) translateY(0); }
    15% { opacity: 0.8; transform: translateX(-50%) translateY(2px); }
    30% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    45% { opacity: 0.8; transform: translateX(-50%) translateY(2px); }
    60% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
    75% { opacity: 0.6; transform: translateX(-50%) translateY(2px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
  }
  .flip-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.15);
    font-size: 14px;
    transition: all 0.15s;
    z-index: 2;
  }
  .flip-toggle:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
  }
  .build-all-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--teal);
    transition: all 0.15s;
    z-index: 2;
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.2);
    background: rgba(var(--role-temp-bin-rgb),0.06);
  }
  .build-all-toggle:hover {
    background: rgba(var(--role-temp-bin-rgb),0.15);
    border-color: rgba(var(--role-temp-bin-rgb),0.4);
  }
  .build-all-btn {
    padding: 4px 10px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--teal);
    transition: all 0.15s;
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.2);
    background: rgba(var(--role-temp-bin-rgb),0.06);
    flex-shrink: 0;
  }
  .build-all-btn:hover {
    background: rgba(var(--role-temp-bin-rgb),0.15);
    border-color: rgba(var(--role-temp-bin-rgb),0.4);
  }
  .card-btn-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .parts-btn {
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
  }
  .parts-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
  }
  .parts-row.parts-idle td {
    opacity: 0.35;
  }
  .parts-used-in {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
    margin-top: 2px;
  }
  .parts-used-in-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.1);
    text-underline-offset: 2px;
    transition: all 0.15s;
  }
  .parts-used-in-link:hover {
    color: var(--teal);
    text-decoration-color: rgba(var(--role-temp-bin-rgb),0.4);
  }
  .parts-shortage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--role-critical-rgb),0.3);
    background: rgba(var(--role-critical-rgb),0.08);
    color: var(--role-critical);
    cursor: pointer;
    transition: all 0.15s;
    animation: shortageGlow 2s ease-in-out infinite;
  }
  .parts-shortage-btn:hover {
    background: rgba(var(--role-critical-rgb),0.15);
    border-color: rgba(var(--role-critical-rgb),0.5);
  }
  .parts-shortage-btn-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.25);
    background: rgba(var(--role-cta-primary-rgb),0.06);
    color: var(--role-cta-primary);
    cursor: pointer;
    transition: all 0.15s;
  }
  .parts-shortage-btn-all:hover {
    background: rgba(var(--role-cta-primary-rgb),0.12);
    border-color: rgba(var(--role-cta-primary-rgb),0.4);
  }
  @keyframes shortageGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(var(--role-critical-rgb),0); }
    50% { box-shadow: 0 0 12px rgba(var(--role-critical-rgb),0.15); }
  }
  .build-all-btn.build-all-critical {
    color: var(--role-critical);
    border-color: rgba(var(--role-critical-rgb),0.25);
    background: rgba(var(--role-critical-rgb),0.08);
  }
  .build-all-btn.build-all-critical:hover {
    background: rgba(var(--role-critical-rgb),0.18);
    border-color: rgba(var(--role-critical-rgb),0.4);
  }
  /* ─── CARD ACTIONS FOOTER ───
     Primary Build All on the left (filled teal), secondary Parts on the right
     (outline). When the family is 100% WOP, .parts-only collapses to a single
     full-width Parts button. */
  .card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
  }
  .card-actions.parts-only {
    grid-template-columns: 1fr;
  }
  .card-actions .build-all-btn,
  .card-actions .parts-btn {
    padding: 11px 12px;
    border-radius: 8px;
    text-align: center;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .card-actions .build-all-btn {
    color: var(--teal);
    background: rgba(var(--role-temp-bin-rgb),0.14);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.4);
  }
  .card-actions .build-all-btn:hover {
    background: rgba(var(--role-temp-bin-rgb),0.25);
    border-color: rgba(var(--role-temp-bin-rgb),0.65);
  }
  .card-actions .parts-btn {
    color: rgba(255,255,255,0.5);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
  }
  .card-actions .parts-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.85);
  }
  /* ─── CORNER BADGES ───
     Top-right of card. WOP is clickable (opens detail modal); Critical is
     non-interactive (color is the signal — same rule as everything else
     under the unified red-means-critical scheme). When both apply they
     stack via .corner-badge-stack. */
  .corner-badge {
    position: absolute;
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 4;
    transition: all 0.15s;
  }
  .corner-badge.wop-badge {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    color: var(--status-low);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.45);
    cursor: pointer;
  }
  .corner-badge.wop-badge:hover {
    background: rgba(var(--role-cta-primary-rgb),0.3);
    border-color: rgba(var(--role-cta-primary-rgb),0.75);
  }
  .corner-badge.crit-badge {
    background: rgba(var(--role-critical-rgb),0.15);
    color: var(--role-critical);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
    cursor: default;
  }
  .corner-badge-stack {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    z-index: 4;
  }
  .corner-badge-stack .corner-badge {
    position: static;
  }
  .stocking-row-title {
    font-size: 21px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    line-height: 1.2;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
  }
  /* Hover tooltip — reveals the full title (helpful when long names are
     truncated to "..."). The native title= attribute is also still present for
     accessibility / right-click "copy"; this version just pops faster and
     matches the dashboard's visual style. */
  .stocking-row-title:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #1a1c1d;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: normal;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    z-index: 20;
    pointer-events: none;
  }
  .stocking-row-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 0 14px;
    border-left: 2px solid rgba(255,255,255,0.08);
    margin-top: 4px;
  }
  .stocking-row-stats-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    margin-bottom: 6px;
    padding-left: 14px;
  }
  .card-face.stocking-face {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .stocking-face-header {
    padding-bottom: 12px;
    padding-right: 80px; /* reserve space for a single top-right corner badge */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  /* When CRITICAL + WOP both apply, the badges sit side-by-side and we need
     more title-side reservation so the title truncates with "..." rather than
     colliding with the pills. */
  .stocking-face-header.has-stack {
    padding-right: 160px;
  }
  .stocking-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .stocking-hero-stat {
    text-align: center;
    padding: 0 4px;
  }
  .stocking-hero-stat:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .stocking-hero-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
  }
  .stocking-hero-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .stocking-row-stat {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
  }
  .stocking-row-stat strong {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    font-weight: 700;
    margin-right: 2px;
  }
  .stocking-row-types {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    font-weight: 600;
  }
  .subfam-column {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .subfam-builds {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
  }
  .subfam-build-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(var(--role-temp-bin-rgb),0.06);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.15);
    cursor: pointer;
    transition: all 0.15s;
  }
  .subfam-build-item:hover {
    background: rgba(var(--role-temp-bin-rgb),0.14);
    border-color: rgba(var(--role-temp-bin-rgb),0.3);
  }
  .subfam-build-length {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    min-width: 50px;
  }
  .subfam-build-qty {
    font-size: 13px;
    font-weight: 700;
    color: var(--yellow);
  }
  .subfam-conn-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.16);
  }
  .subfam-build-cta {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--teal);
    transition: color 0.15s;
  }
  .subfam-build-item:hover .subfam-build-cta {
    color: var(--teal);
  }
  .subfam-build-item.subfam-critical {
    background: rgba(var(--role-critical-rgb),0.06);
    border-color: rgba(var(--role-critical-rgb),0.15);
  }
  .subfam-build-item.subfam-critical:hover {
    background: rgba(var(--role-critical-rgb),0.12);
    border-color: rgba(var(--role-critical-rgb),0.3);
  }
  /* Inspection variant for subfamily chips. Yellow accent matches the
     inspection card variant on the per-family build queue. */
  .subfam-build-item.subfam-inspect {
    background: rgba(var(--role-cta-primary-rgb),0.06);
    border-color: rgba(var(--role-cta-primary-rgb),0.20);
  }
  .subfam-build-item.subfam-inspect:hover {
    background: rgba(var(--role-cta-primary-rgb),0.12);
    border-color: rgba(var(--role-cta-primary-rgb),0.40);
  }
  .subfam-build-item.subfam-inspect .subfam-build-cta {
    color: var(--yellow);
  }
  @media (max-width: 768px) {
    .cat-section-grid {
      grid-template-columns: 1fr;
    }
  }
  .stocking-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .stocking-card-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .stocking-card-badge strong {
    color: rgba(255,255,255,0.7);
    font-weight: 800;
  }
  .stocking-req-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .stocking-scoreboard {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
  }
  .stocking-scoreboard .len-tag {
    font-size: 13px;
    padding: 5px 10px;
  }
  .stocking-scoreboard .build-tag {
    box-shadow: 0 0 0 2px var(--yellow);
  }
  .len-tag.flip-dimmed {
    opacity: 0.4;
  }
  .len-tag.build-glow {
    cursor: pointer;
    background: var(--teal) !important;
    color: #fff !important;
    border-color: var(--teal) !important;
    box-shadow: 0 0 12px rgba(var(--role-temp-bin-rgb),0.4);
    animation: glowPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    font-weight: 700;
  }
  .len-tag.build-glow:hover {
    box-shadow: 0 0 20px rgba(var(--role-temp-bin-rgb),0.6);
    transform: scale(1.08);
  }
  .len-tag.critical-glow {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: #dc2626 !important;
  }
  .len-tag.critical-glow:hover {
    box-shadow: 0 0 12px rgba(220,38,38,0.45);
  }
  /* Inspect-glow — yellow accent for inspection chips on family/sub-family
     cards. Mirrors build-glow's clickability but uses the brand yellow to
     differentiate from teal build chips. */
  .len-tag.inspect-glow {
    cursor: pointer;
    background: var(--yellow) !important;
    color: #262829 !important;
    border-color: var(--yellow) !important;
    box-shadow: 0 0 12px rgba(var(--role-cta-primary-rgb),0.4);
    animation: inspectGlowPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    font-weight: 700;
  }
  .len-tag.inspect-glow:hover {
    box-shadow: 0 0 20px rgba(var(--role-cta-primary-rgb),0.6);
    transform: scale(1.08);
  }
  /* WOP — Waiting On Parts. Surfaces SKUs that would otherwise be buildable
     but are held back by status=WOP. Yellow warning tint (per the unified
     color system: yellow = warning, not action), no glow, no click. */
  .len-tag.wop-tag {
    background: var(--status-low-bg);
    color: var(--status-low);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.25);
    cursor: default;
    opacity: 0.85;
  }
  @keyframes inspectGlowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--role-cta-primary-rgb),0.3); }
    50% { box-shadow: 0 0 18px rgba(var(--role-cta-primary-rgb),0.55); }
  }
  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--role-temp-bin-rgb),0.3); }
    50% { box-shadow: 0 0 18px rgba(var(--role-temp-bin-rgb),0.5); }
  }

  /* ─── CRITICAL STYLES ─── */
  /* Card-level critical border was removed — the corner CRITICAL badge now
     carries the signal, so we don't need the red top accent doubling it. */
  .critical-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--role-critical);
    flex-shrink: 0;
  }
  .crit-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--role-critical);
    vertical-align: middle;
    margin-right: 3px;
    flex-shrink: 0;
  }
  .ba-critical {
    border-left: 3px solid var(--role-critical);
    padding-left: 7px;
  }
  .ba-critical-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--role-critical);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ba-qty-hint {
    font-size: 9px;
    color: rgba(255,255,255,0.2);
    font-weight: 600;
    position: absolute;
    bottom: -14px;
    left: 0;
    right: 0;
    text-align: center;
  }
  .ba-sku-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .ba-qty-wrap {
    position: relative;
  }
  .bom-critical-warning {
    background: rgba(var(--role-critical-rgb),0.08);
    border: 1px solid rgba(var(--role-critical-rgb),0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--role-critical);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .bom-critical-warning strong {
    color: #fff;
  }
  .bom-critical-breakdown {
    font-size: 12px;
    font-weight: 600;
    color: rgba(var(--role-critical-rgb),0.7);
    padding-left: 18px;
  }
  .bom-critical-breakdown div {
    padding: 2px 0;
  }
  .bom-critical-breakdown div::before {
    content: '\2022';
    margin-right: 6px;
  }

  /* ─── Build Status Block ─────────────────────────────────────────────────
     Two-section layout:
       1. Top stat row — three side-by-side cards:
            Critical Need Build (red, only when > 0)
            Total Suggested Build (white / muted at 0)
            Actively Building (white / muted at 0)
       2. Planned Builds — single teal-bordered block with sum header,
          column header (Date / QTY), then per-entry rows.
     Used in BOM modal + Calendar plan-entry modal. */
  .build-status-block {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
  }
  .bsb-stats-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .bsb-stat-card {
    flex: 1 1 0;
    min-width: 140px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .bsb-stat-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
  }
  .bsb-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--white);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  .bsb-stat-card-critical {
    background: rgba(var(--role-critical-rgb),0.06);
    border-color: rgba(var(--role-critical-rgb),0.35);
  }
  .bsb-stat-card-critical .bsb-stat-label,
  .bsb-stat-card-critical .bsb-stat-value { color: var(--role-critical); }
  .bsb-stat-card-critical .bsb-crit-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--role-critical);
    margin-right: 8px;
  }
  .bsb-stat-value-zero { color: rgba(255,255,255,0.3); }
  .bsb-stat-card-critical .bsb-stat-value-zero { color: rgba(var(--role-critical-rgb),0.4); }
  .bsb-crit-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--role-critical-rgb),0.7);
    padding: 2px 0 0 16px;
    margin-top: -6px;
    margin-bottom: 8px;
  }
  .bsb-crit-sub div { padding: 2px 0; }
  .bsb-crit-sub div::before { content: '\2022'; margin-right: 6px; }

  /* Planned Builds — single teal-bordered container with sum header band,
     column header (Date / QTY), and per-entry rows. */
  .bsb-planned-block {
    border: 1.5px solid #1199ab;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(var(--role-temp-bin-rgb),0.04);
  }
  .bsb-planned-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(var(--role-temp-bin-rgb),0.55);
    color: #fff;
  }
  .bsb-planned-header-label {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  .bsb-planned-header-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .bsb-planned-header-value.bsb-stat-value-zero { color: rgba(255,255,255,0.55); }
  .bsb-planned-thead {
    display: flex;
    align-items: center;
    background: rgba(var(--role-temp-bin-rgb),0.22);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(var(--role-temp-bin-rgb),0.35);
  }
  .bsb-planned-th-date { flex: 1; }
  .bsb-planned-th-qty  { width: 110px; text-align: right; }
  .bsb-planned-tbody { display: flex; flex-direction: column; }
  .bsb-planned-row {
    display: flex;
    align-items: center;
    padding: 9px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
  }
  .bsb-planned-row + .bsb-planned-row { border-top: 1px solid rgba(var(--role-temp-bin-rgb),0.18); }
  .bsb-planned-date { flex: 1; color: rgba(255,255,255,0.6); }
  .bsb-planned-qty {
    width: 110px;
    text-align: right;
    color: var(--white);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  .bsb-planned-row-active {
    background: rgba(var(--role-temp-bin-rgb),0.20);
    border-left: 3px solid #1199ab;
  }
  .bsb-planned-row-active .bsb-planned-date,
  .bsb-planned-row-active .bsb-planned-qty { color: #1199ab; }
  .bsb-planned-editing-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #1199ab;
    border: 1px solid #25b8cc;
    border-radius: 999px;
    vertical-align: 1px;
  }
  .bsb-planned-empty {
    padding: 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
    font-style: italic;
    text-align: center;
  }
  .bom-stats-row {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 8px;
  }
  .bom-stat {
    flex: 1;
    text-align: center;
  }
  .bom-stat:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .bom-stat-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
  }
  .bom-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-top: 4px;
  }
  /* Sub-label below "In Bin" — only renders when QB on-hand differs from
     physical (posted-not-shipped scenario). Surfaces the divergence so the
     warehouse can sanity-check against QB if needed. */
  .bom-stat-sub {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.32);
    margin-top: 2px;
    cursor: help;
    font-variant-numeric: tabular-nums;
  }
  /* Clickable allocation stat — bumps the cursor and brightens the arrow
     hint on hover so it reads as actionable. */
  .bom-stat-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: 6px;
  }
  .bom-stat-clickable:hover {
    background: rgba(var(--role-allocated-qty-rgb),0.06);
  }
  .bom-stat-clickable .bom-stat-link {
    color: rgba(var(--role-allocated-qty-rgb),0.5);
    font-size: 10px;
    margin-left: 2px;
    transition: color 0.15s ease;
  }
  .bom-stat-clickable:hover .bom-stat-link {
    color: var(--role-allocated-qty);
  }
  /* Allocations list modal — surfaces the ranked order list when the user
     clicks "Allocated" on the BOM modal stats row. */
  .alloc-list-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 13px;
  }
  .alloc-list-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .alloc-list-table th.r { text-align: right; }
  .alloc-list-table td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    vertical-align: middle;
  }
  .alloc-list-table td.r { text-align: right; }
  .alloc-list-table tr:last-child td { border-bottom: none; }
  .alloc-list-table .alloc-order-num {
    color: var(--role-temp-bin);
    cursor: pointer;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 700;
    font-size: 12px;
    transition: color 0.15s ease;
  }
  .alloc-list-table .alloc-order-num:hover {
    color: #fff;
    text-decoration: underline;
  }
  .alloc-list-table .alloc-customer {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
  }
  .alloc-list-table .alloc-date {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
  }
  .alloc-list-table .alloc-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .alloc-list-table .alloc-badge svg { flex: 0 0 auto; }
  .alloc-list-table .alloc-badge-priority {
    background: rgba(var(--role-critical-rgb),0.16);
    color: var(--role-critical);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
  }
  .alloc-list-table .alloc-badge-legacy {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.18);
  }

  /* ─── LINE ITEM ALLOCATION CELL (Order Detail) ─── */
  /* Three visual states:
     - .fulfilled  → green check, this order is fully allocated, no action
     - .short.clickable → orange, this order short AND other orders can be
       robbed; clicking opens the swap modal
     - .short.read-only → dim red, this order short but no stock to swap;
       awaiting production (no UI affordance, just info) */
  .line-item-alloc {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 700;
  }
  .line-item-alloc strong {
    font-size: 14px;
    font-weight: 800;
  }
  .line-item-alloc.fulfilled strong {
    color: var(--role-ready);
  }
  .line-item-alloc.fulfilled .line-item-alloc-checkmark {
    color: var(--role-ready);
    font-size: 12px;
  }
  .line-item-alloc.short strong {
    color: var(--role-allocated-qty);
  }
  .line-item-alloc.short.read-only strong {
    color: rgba(var(--role-critical-rgb),0.65);
  }
  /* Per-line shortfall variants for the FIFO model (Claimed Elsewhere
     migration). The shortfall reason picked by the tile-compute loop drives
     which class the cell renders with:
       .claimed → physical stock exists but is reserved to an earlier order;
                  swap UI is meaningful (pink + arrow, clickable).
       .build   → in the build/queue pipeline; swap can't help (amber, no arrow).
       (short, read-only)  → genuinely missing; existing red treatment. */
  .line-item-alloc.claimed strong { color: #ff8fbe; }
  .line-item-alloc.claimed .line-item-alloc-shortfall { color: rgba(255,255,255,0.55); }
  .line-item-alloc.claimed .line-item-alloc-arrow { color: rgba(255,143,190,0.85); }
  .line-item-alloc.clickable.claimed:hover { background: var(--b2-pink-bg); }
  .line-item-alloc.clickable.claimed:hover .line-item-alloc-arrow { color: #ff8fbe; }
  .line-item-alloc.build strong { color: var(--b2-amber); }
  .line-item-alloc.build .line-item-alloc-shortfall { color: rgba(255,255,255,0.55); }
  .line-item-alloc-shortfall {
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    font-weight: 600;
  }
  .line-item-alloc.short.read-only .line-item-alloc-shortfall {
    color: rgba(var(--role-critical-rgb),0.55);
  }
  .line-item-alloc.clickable {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 5px;
    transition: background 0.15s ease;
  }
  .line-item-alloc.clickable:hover {
    background: rgba(var(--role-allocated-qty-rgb),0.12);
  }
  .line-item-alloc-arrow {
    color: rgba(var(--role-temp-bin-rgb),0.7);
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    transition: color 0.15s ease;
  }
  .line-item-alloc-arrow svg { display: block; }
  .line-item-alloc.clickable:hover .line-item-alloc-arrow {
    color: var(--role-temp-bin);
  }

  /* ─── ALLOCATION SWAP MODAL ─── */
  /* Surfaces the "rob from other orders" UX from a line item. Header shows
     the SKU + focal order; summary strip mirrors the BOM stats row pattern;
     each other order gets its own row with a take-N input. */
  .swap-summary {
    display: flex;
    gap: 4px;
    margin: 14px 0 18px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 8px;
  }
  .swap-stat {
    flex: 1;
    text-align: center;
  }
  .swap-stat:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  .swap-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
  }
  .swap-stat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-top: 5px;
  }
  .swap-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
  }
  .swap-orders-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }
  .swap-order-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    transition: background 0.15s ease;
  }
  .swap-order-row:hover {
    background: rgba(255,255,255,0.05);
  }
  /* Hard-blocked orders dimmed — robbing from these is "free" */
  .swap-order-row.swap-blocked {
    opacity: 0.65;
  }
  /* Priority orders flagged in red so the warehouse knows the stakes */
  .swap-order-row.swap-priority {
    border-color: rgba(var(--role-critical-rgb),0.4);
    background: rgba(var(--role-critical-rgb),0.04);
  }
  .swap-order-info { min-width: 0; }
  .swap-order-num {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .swap-order-meta {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
  }
  .swap-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .swap-badge svg { flex: 0 0 auto; }
  .swap-badge-priority {
    background: rgba(var(--role-critical-rgb),0.18);
    color: var(--role-critical);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
  }
  .swap-badge-legacy {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.18);
  }
  .swap-badge-swap {
    background: rgba(var(--role-temp-bin-rgb),0.16);
    color: var(--role-temp-bin);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.45);
  }
  .swap-order-qty {
    text-align: right;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-weight: 600;
  }
  .swap-qty-current strong { color: #fff; }
  .swap-take-controls {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .swap-take-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .swap-take-input {
    width: 60px;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--yellow);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    font-family: inherit;
  }
  .swap-take-input:focus {
    outline: none;
    border-color: var(--yellow);
    background: rgba(0,0,0,0.4);
  }
  .swap-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: rgba(var(--role-cta-primary-rgb),0.04);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.2);
    border-radius: 8px;
    margin-top: 8px;
  }
  .swap-total-line {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
  }
  .swap-total-line strong { color: var(--yellow); }
  .swap-total-line span#swapTotalDisplay {
    color: var(--yellow);
    font-size: 18px;
    font-weight: 800;
  }
  .swap-execute-btn {
    background: var(--yellow);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
  }
  .swap-execute-btn:hover {
    background: #fae063;
    transform: translateY(-1px);
  }
  .swap-execute-btn:disabled {
    cursor: default;
    transform: none;
  }
  .swap-disclaimer {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.35);
    font-style: italic;
    text-align: center;
    margin-top: 14px;
    padding: 0 8px;
  }
  .swap-disclaimer code {
    font-family: 'SF Mono', 'Monaco', monospace;
    background: rgba(255,255,255,0.06);
    padding: 1px 4px;
    border-radius: 3px;
    color: rgba(255,255,255,0.6);
    font-style: normal;
  }
  .bom-demand-warning {
    background: rgba(var(--role-allocated-qty-rgb),0.08);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--role-allocated-qty);
    font-weight: 600;
    margin-bottom: 14px;
  }
  .bom-demand-warning strong {
    color: #fff;
  }

  /* ─── FAMILY ALLOCATION PANEL ─── */
  /* Surfaces shared-component constraints across siblings in a family. */
  .family-alloc-panel {
    background: linear-gradient(180deg, rgba(var(--role-allocated-qty-rgb),0.06) 0%, rgba(var(--role-allocated-qty-rgb),0.02) 100%);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.28);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms ease-out, transform 240ms ease-out;
  }
  /* Entering state — panel was just injected, starts faded out + slid up.
     The .entering class is removed in the next animation frame so the
     transition runs into the resting state. */
  .family-alloc-panel.entering {
    opacity: 0;
    transform: translateY(-6px);
  }
  /* Leaving state — applied right before removal. Element stays in DOM
     for the duration of the transition (200ms) then gets removed. */
  .family-alloc-panel.leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms ease-in, transform 200ms ease-in;
    pointer-events: none;
  }
  .family-alloc-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .family-alloc-icon {
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--b2-amber);
  }
  .family-alloc-icon svg { width: 20px; height: 20px; }
  .family-alloc-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--role-allocated-qty);
    letter-spacing: 0.02em;
  }
  .family-alloc-title strong {
    color: #fff;
    font-weight: 800;
  }
  .family-alloc-sub {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    margin-top: 3px;
    line-height: 1.4;
  }
  .family-alloc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 4px;
  }
  .family-alloc-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .family-alloc-table th.r { text-align: right; }
  .family-alloc-table td {
    padding: 8px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    vertical-align: middle;
  }
  .family-alloc-table td.r { text-align: right; }
  .family-alloc-table tr:last-child td { border-bottom: none; }
  .family-alloc-table tr.alloc-focal td {
    background: rgba(var(--role-cta-primary-rgb),0.06);
  }
  .family-alloc-table tr.alloc-focal td:first-child {
    border-left: 2px solid var(--yellow);
    padding-left: 6px;
  }
  .family-alloc-table .alloc-sku {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.92);
  }
  .family-alloc-table .alloc-suggested {
    font-weight: 800;
    color: var(--yellow);
    font-size: 14px;
  }
  .family-alloc-table .alloc-suggested.zero {
    color: rgba(255,255,255,0.25);
    font-weight: 700;
  }
  .alloc-jump-btn {
    background: rgba(var(--role-temp-bin-rgb),0.14);
    color: var(--role-temp-bin);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.3);
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 6px;
    transition: all 0.15s;
  }
  .alloc-jump-btn:hover {
    background: rgba(var(--role-temp-bin-rgb),0.28);
    color: #fff;
  }
  /* Order-coverage cell — compact ✓/~/✗ tally with optional priority badge.
     Title attribute carries the per-order detail. */
  .alloc-orders {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .alloc-orders .oc-cell {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    cursor: help;
  }
  .alloc-orders .oc-covered { color: #80d18d; }
  .alloc-orders .oc-partial { color: #fbbf24; }
  .alloc-orders .oc-unfilled { color: var(--role-critical); }
  .alloc-orders .oc-priority-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper.
       Padding stays at 1px 4px (denser than peers) because this badge
       sits inline with covered/unfilled counts in tight cells. */
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(var(--role-critical-rgb),0.16);
    color: var(--role-critical);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-left: -2px;
  }
  .alloc-orders .oc-priority-badge svg { flex: 0 0 auto; }
  .alloc-orders .oc-priority-unfilled {
    background: rgba(var(--role-critical-rgb),0.28);
    color: #fff;
    border-color: rgba(var(--role-critical-rgb),0.65);
  }
  /* Stacked layout — button on its own row, note below it. The previous
     side-by-side layout overflowed when the button text wrapped to two
     lines, leaving the note clipped/orphaned to the right. */
  .family-alloc-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    align-items: stretch;
  }
  .family-alloc-apply {
    background: var(--yellow);
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 0 0 rgba(var(--role-allocated-qty-rgb),0.55), 0 4px 12px rgba(var(--role-allocated-qty-rgb),0.18);
    animation: applyPulse 1.6s ease-in-out infinite;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .family-alloc-apply:hover {
    background: #fae063;
    transform: translateY(-1px);
    color: #000;
  }
  .family-alloc-apply.applied {
    background: rgba(76,175,80,0.2);
    color: #80d18d;
    cursor: default;
    animation: none;
    box-shadow: none;
  }
  /* Pulsing orange glow draws the eye — important because the panel only
     fires when there's a real over-consumption to flag. The pulse ring
     expands outward and fades, paired with a softer drop shadow for depth. */
  @keyframes applyPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(var(--role-allocated-qty-rgb),0.55), 0 4px 12px rgba(var(--role-allocated-qty-rgb),0.18);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(var(--role-allocated-qty-rgb),0), 0 6px 20px rgba(var(--role-allocated-qty-rgb),0.45);
    }
  }
  .family-alloc-note {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    font-style: italic;
    text-align: center;
    line-height: 1.4;
  }

  /* ─── USAGE % COLORS ─── */
  .usage-flash {
    color: var(--role-critical);
    font-weight: 800;
  }

  /* ─── COMPONENT PO COLUMN ─── */
  /* PO has its own column now. After Build and Effective Remaining After Build
     are colored by usage ratio so urgency reads at a glance even without the
     standalone Usage column. */

  /* ─── BUILD ACTION SECTION ─── */
  .build-action-section {
    background: rgba(var(--role-temp-bin-rgb),0.04);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.12);
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 28px;
  }
  .build-action-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .build-action-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
  }
  .build-action-summary {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
  }
  .build-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  .build-action-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
  }
  .build-action-card:hover {
    background: rgba(var(--role-temp-bin-rgb),0.10);
    border-color: rgba(var(--role-temp-bin-rgb),0.25);
    transform: translateY(-2px);
  }
  .build-action-length {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
  }
  .build-action-qty {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-top: 4px;
  }
  .build-action-cta {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--teal);
    margin-top: 8px;
  }
  /* Inspection variant — purchased-finished-goods card. Yellow accent
     differentiates from the teal Build cards at a glance. */
  .build-action-card-inspect {
    border-color: rgba(var(--role-cta-primary-rgb),0.25);
    background: rgba(var(--role-cta-primary-rgb),0.04);
  }
  .build-action-card-inspect:hover {
    background: rgba(var(--role-cta-primary-rgb),0.10);
    border-color: rgba(var(--role-cta-primary-rgb),0.45);
  }
  .build-action-card-inspect .build-action-cta {
    color: var(--yellow);
  }
  /* Conflict warning — Build Qty + To Be Inspected both set in Airtable. */
  .build-action-conflict {
    margin-top: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--role-critical);
    text-transform: uppercase;
  }
  /* ─── INSPECTION MODAL ─── */
  .inspect-checklist-preview {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .inspect-checklist-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 8px;
  }
  .inspect-checklist-list {
    margin: 0;
    padding-left: 18px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    line-height: 1.6;
  }
  .inspect-checklist-fallback {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
    font-style: italic;
  }
  .inspect-checklist-fallback strong {
    color: rgba(255,255,255,0.7);
    font-style: normal;
  }
  /* Mark Complete UI inside inspection modal when Inspecting Now = true. */
  .inspect-in-progress {
    margin-top: 18px;
  }
  .inspect-in-progress-banner {
    padding: 10px 14px;
    background: rgba(var(--role-cta-primary-rgb),0.08);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.30);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    margin-bottom: 14px;
  }
  .inspect-in-progress-banner strong {
    color: var(--yellow);
  }
  .inspect-complete-form {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
  }
  .inspect-complete-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .inspect-complete-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }
  .inspect-complete-qty {
    width: 80px;
    font-size: 16px !important;
    text-align: center;
  }
  .inspect-complete-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--white);
    font-weight: 700;
    font-size: 13px;
  }
  .inspect-complete-notes {
    width: 100%;
    min-height: 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px 10px;
    color: rgba(255,255,255,0.85);
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
  }
  .inspect-action-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .inspect-cancel-btn {
    background: transparent !important;
    color: rgba(var(--role-critical-rgb),0.85) !important;
    border: 1px solid rgba(var(--role-critical-rgb),0.35) !important;
  }
  .inspect-cancel-btn:hover {
    background: rgba(var(--role-critical-rgb),0.08) !important;
  }
  .inspect-reprint-btn {
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
  }
  .inspect-reprint-btn:hover {
    background: rgba(255,255,255,0.06) !important;
  }

  /* ─── LINE OVERVIEW ─── */
  .line-overview-section {
    margin-top: 8px;
  }
  .line-overview-header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    margin-bottom: 12px;
  }

  /* ─── BEING BUILT ─── */
  .top-sections-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
  }
  .top-sections-row > * {
    flex: 1;
    min-width: 0;
  }
  @media (max-width: 768px) {
    .top-sections-row {
      flex-direction: column;
    }
  }
  .being-built-section {
    background: rgba(var(--role-temp-bin-rgb),0.04);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.12);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
  }
  .being-built-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
  }
  .being-built-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .being-built-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
  }
  .being-built-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  .being-built-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px 14px;
    transition: all 0.15s;
  }
  .being-built-card:hover {
    background: rgba(var(--role-temp-bin-rgb),0.08);
    border-color: rgba(var(--role-temp-bin-rgb),0.2);
  }
  .being-built-sku {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
  }
  .being-built-details {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .being-built-qty {
    font-size: 12px;
    font-weight: 700;
    color: var(--teal);
  }
  .being-built-time {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
  }
  .being-built-cta {
    font-size: 10px;
    font-weight: 700;
    color: var(--teal);
    margin-top: 6px;
  }
  .being-built-urgent {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--role-critical);
    opacity: 0.7;
    margin-left: 4px;
  }

  /* ─── TO BE BUILT ─── */
  .to-be-built-section {
    background: rgba(var(--role-cta-primary-rgb),0.03);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.10);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
  }
  .to-be-built-header {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .to-be-built-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
  }
  .to-be-built-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
  }
  /* ─── CATEGORY FILTER CHIPS ───
     Sits in the To Be Built header, right-aligned via margin-left:auto. Each
     chip shows category name + family count; clicking restricts the list to
     that category. "All" is the default reset chip. */
  .category-filter-chips {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(255,255,255,0.55);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
  }
  .cat-chip:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
    color: var(--white);
  }
  .cat-chip.active {
    background: rgba(var(--role-temp-bin-rgb),0.14);
    border-color: rgba(var(--role-temp-bin-rgb),0.5);
    color: var(--teal);
  }
  .cat-chip-count {
    /* Tier D nested count chip — canonical font 10/700/no spacing/no transform.
       Was 800 weight; bumped down to 700 to match the count-chip vocabulary
       across the app and avoid out-shouting the parent chip's content. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .cat-chip.active .cat-chip-count {
    background: rgba(var(--role-temp-bin-rgb),0.25);
    color: var(--teal);
  }
  /* ─── CATEGORY SECTIONS ───
     One section per category, with a small uppercase subhead. .cat-hidden
     is set when a filter chip is active and this section's category isn't
     the selected one. */
  .cat-section {
    margin-bottom: 22px;
  }
  .cat-section:last-child {
    margin-bottom: 0;
  }
  .cat-section.cat-hidden {
    display: none;
  }
  .cat-section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .cat-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
  }
  .cat-section-count {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.04em;
  }
  /* The card grid was previously the .stocking-list itself; now it's the
     per-section grid. Same auto-fill behavior. */
  .cat-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
  /* ─── VIEW TOGGLE (Family / Classic) ───
     Sits at the right end of the To Be Built header, after the category
     filter chips. Segmented two-button control. */
  .view-toggle {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
  }
  .view-toggle-btn {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
  }
  .view-toggle-btn:hover {
    background: rgba(255,255,255,0.04);
    color: var(--white);
  }
  .view-toggle-btn.active {
    background: rgba(var(--role-temp-bin-rgb),0.18);
    color: var(--teal);
  }
  .view-toggle-btn + .view-toggle-btn {
    border-left: 1px solid rgba(255,255,255,0.12);
  }
  /* ─── CLASSIC VIEW ───
     Cards reflow into a single grid via display:contents on the wrappers.
     Section headers hide. Filter chips still apply (cat-hidden uses
     display:none which beats display:contents). */
  .stocking-list.classic-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
  }
  .stocking-list.classic-view .cat-section {
    display: contents;
    margin-bottom: 0;
  }
  .stocking-list.classic-view .cat-section.cat-hidden > * {
    display: none;
  }
  .stocking-list.classic-view .cat-section-header {
    display: none;
  }
  .stocking-list.classic-view .cat-section-grid {
    display: contents;
  }

  /* ─── BUILD CALENDAR (v2 — BOM design language) ───────────────────── */
  /* All rules scoped to .stockv2 .cal-app so --b2-* tokens cascade in. */
  .stockv2 .cal-app { padding-bottom: 40px; }

  /* Header nav cluster — prev / today-range / next pill */
  .stockv2 .cal-nav-group {
    display: inline-flex; align-items: stretch;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
  }
  .stockv2 .cal-nav-btn {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    font: 500 13px -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 0 14px;
    height: 34px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .stockv2 .cal-nav-btn:last-child { border-right: 0; }
  .stockv2 .cal-nav-btn:hover:not(:disabled) { background: var(--b2-surface-3); color: var(--b2-text); }
  .stockv2 .cal-nav-btn:disabled { cursor: default; }
  .stockv2 .cal-nav-btn.cal-range {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 20px;
    min-width: 200px;
  }
  .stockv2 .cal-range-today { color: var(--b2-text); font-weight: 600; }
  .stockv2 .cal-range-jump { color: var(--b2-text); font-weight: 600; font-size: 12px; }
  .stockv2 .cal-range-dates {
    font: 500 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--b2-text-3);
    letter-spacing: 0.02em;
  }

  /* Stat strip — 4-up grid above the calendar grid */
  .stockv2 .cal-statbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--b2-hairline);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 18px;
  }
  .stockv2 .cal-stat {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 18px;
    background: var(--b2-surface-1);
  }
  .stockv2 .cal-stat-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
  }
  .stockv2 .cal-stat-value {
    font-size: 14px; color: var(--b2-text-2);
  }
  .stockv2 .cal-stat-value strong {
    color: var(--b2-text); font-size: 18px; font-weight: 600;
    letter-spacing: -0.01em; margin-right: 4px;
  }
  .stockv2 .cal-stat-value.qty-crit strong { color: var(--role-critical); }
  .stockv2 .cal-stat-value.qty-blue strong { color: var(--role-building-now); }

  /* Two-column layout */
  .stockv2 .cal-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
  }
  @media (max-width: 900px) {
    .stockv2 .cal-layout { grid-template-columns: 1fr; }
  }

  /* Sidebar */
  .stockv2 .cal-sidebar {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 16px;
    /* The whole sidebar scrolls as one unit, bounded to the calendar grid's
       height (set in JS by _calSizeSidebar) so the Unscheduled / In Progress
       sections can't run past the calendar's bottom. */
    overflow-y: auto; min-height: 0;
  }
  .stockv2 .cal-side-section {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
  }
  .stockv2 .cal-side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2 .cal-side-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
  }
  .stockv2 .cal-side-count {
    font-size: 11px; font-weight: 700;
    color: var(--b2-text-2);
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 1px 7px;
  }
  .stockv2 .cal-side-empty {
    padding: 16px 14px;
    font-size: 12px; color: var(--b2-text-3); font-style: italic;
    text-align: center;
  }
  .stockv2 .cal-chip-stack {
    display: flex; flex-direction: column;
    padding: 8px;
    gap: 6px;
  }

  /* In-progress card */
  .stockv2 .cal-inprog {
    display: grid; grid-template-columns: 6px 1fr auto; align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 0;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 4px;
    overflow: hidden;
  }
  .stockv2 .cal-inprog-pulse {
    height: 100%;
    background: var(--role-building-now-calendar);
    animation: cal-pulse 1.8s ease-in-out infinite;
  }
  @keyframes cal-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  .stockv2 .cal-inprog-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 600; color: var(--b2-text);
  }
  .stockv2 .cal-inprog-meta {
    font-size: 11px; color: var(--b2-text-3); margin-top: 1px;
  }
  .stockv2 .cal-inprog-eta {
    font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--role-building-now-calendar);
    background: var(--role-building-now-calendar-bg);
    border: 1px solid var(--role-building-now-calendar-border);
    border-radius: 3px;
    padding: 2px 6px;
    margin-right: 8px;
  }

  /* Grid */
  .stockv2 .cal-grid-wrap {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
  }
  .stockv2 .cal-dow-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2 .cal-dow {
    padding: 8px 0;
    text-align: center;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
    border-right: 1px solid var(--b2-hairline);
  }
  .stockv2 .cal-dow:last-child { border-right: 0; }

  .stockv2 .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(124px, auto);
  }
  .stockv2 .cal-day {
    border-right: 1px solid var(--b2-hairline);
    border-bottom: 1px solid var(--b2-hairline);
    padding: 8px;
    display: flex; flex-direction: column;
    gap: 6px;
    background: var(--b2-surface-1);
    transition: background 0.12s;
  }
  .stockv2 .cal-day:nth-child(7n) { border-right: 0; }
  .stockv2 .cal-day.weekend { background: var(--b2-surface-2); }
  .stockv2 .cal-day.past { opacity: 0.45; }
  .stockv2 .cal-day.past .cal-day-num { color: var(--b2-text-3); }
  .stockv2 .cal-day.today {
    background: linear-gradient(180deg, var(--role-today-bg) 0%, var(--b2-surface-1) 60%);
  }
  /* drag-over: applied by drop targets via the legacy class
     `cal-day-droptarget` (set by calOnDragOver). */
  .stockv2 .cal-day.cal-day-droptarget,
  .stockv2 .cal-day.drag-over {
    background: var(--role-drag-target-bg);
    outline: 2px dashed var(--role-drag-target);
    outline-offset: -3px;
  }
  .stockv2 .cal-day.has-crit .cal-day-num { color: var(--b2-text); }
  .stockv2 .cal-day.cal-day-pad { background: var(--b2-surface-2); opacity: 0.4; }

  .stockv2 .cal-day-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 4px;
  }
  .stockv2 .cal-day-num {
    display: inline-flex; align-items: baseline; gap: 4px;
    font-size: 13px; font-weight: 600; color: var(--b2-text);
  }
  .stockv2 .cal-day-month {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--b2-text-3);
    margin-left: 2px;
  }
  .stockv2 .cal-today-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--role-today);
    margin-right: 4px; align-self: center;
  }
  .stockv2 .cal-day-load {
    display: inline-flex; align-items: baseline; gap: 2px;
    padding: 1px 6px;
    background: var(--b2-surface-3);
    border-radius: 3px;
    font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .stockv2 .cal-day-units { color: var(--b2-text); }
  .stockv2 .cal-day-units-label { color: var(--b2-text-3); font-size: 9px; }
  .stockv2 .cal-day.has-crit .cal-day-load {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .stockv2 .cal-day-chips {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1; min-height: 0;
  }

  /* Chips */
  .stockv2 .cal-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-left: 3px solid var(--role-planned-build);
    border-radius: 3px;
    font-size: 11px; line-height: 1.2;
    cursor: grab;
    transition: transform 0.08s, box-shadow 0.12s, border-color 0.12s, background 0.12s;
    user-select: none;
  }
  .stockv2 .cal-chip:hover {
    border-color: var(--b2-hairline-strong);
    border-left-color: var(--role-planned-build);
    background: var(--b2-surface-2);
    box-shadow: 0 1px 0 var(--b2-hairline);
  }
  .stockv2 .cal-chip:active { cursor: grabbing; }
  .stockv2 .cal-chip.cal-chip-dragging,
  .stockv2 .cal-chip.dragging { opacity: 0.5; transform: rotate(-1deg); }
  .stockv2 .cal-chip.crit {
    background: var(--role-critical-calendar-bg);
    border-color: var(--role-critical-calendar-border);
    border-left: 3px solid var(--role-critical-calendar);
  }
  .stockv2 .cal-chip.crit:hover {
    border-color: var(--role-critical-calendar);
    border-left-color: var(--role-critical-calendar);
  }
  .stockv2 .cal-chip.past { opacity: 0.6; }
  .stockv2 .cal-chip-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 600; color: var(--b2-text);
  }
  .stockv2 .cal-chip-qty {
    color: var(--b2-text-2); font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .stockv2 .cal-chip.crit .cal-chip-qty { color: var(--role-critical-calendar); }
  .stockv2 .cal-chip-len {
    margin-left: auto;
    color: var(--b2-text-3);
    font: 500 10px -apple-system, BlinkMacSystemFont, sans-serif;
  }
  .stockv2 .cal-chip-slipped {
    margin-left: auto;
    color: var(--role-slipped);
    font: 600 9px -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .stockv2 .cal-chip-sidebar { padding: 6px 10px; }
  .stockv2 .cal-chip-grid,
  .stockv2 .cal-chip-day { padding: 3px 6px; font-size: 10.5px; }

  /* kbd hint pill (used in page-sub) */
  .stockv2 .kbd {
    display: inline-block;
    padding: 1px 6px;
    font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--b2-text-2);
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 3px;
    line-height: 1.4;
  }

  /* ─── WAREHOUSE V3 (Floor) ──────────────────────────────────────────
     Additions on top of the existing stockv2 panel / tile / table
     primitives. Used by renderWarehouse + renderAllOpenOrders. */

  /* Proportional stacked allocation bar — scales from 1 to 2,000+ units. */
  .stockv2 .alloc-bar {
    display: flex; align-items: stretch;
    height: 8px; width: 100%; max-width: 220px;
    background: var(--b2-surface-3);
    border-radius: 4px; overflow: hidden;
  }
  .stockv2 .alloc-fill { display: block; height: 100%; min-width: 2px; }
  .stockv2 .alloc-fill.ok      { background: var(--role-ready); }
  .stockv2 .alloc-fill.build   { background: var(--role-queued-build); }
  .stockv2 .alloc-fill.short   { background: var(--role-no-stock); }
  .stockv2 .alloc-fill.pending { background: var(--b2-text-4); opacity: 0.7; }
  .stockv2 .alloc-fill + .alloc-fill { box-shadow: inset 1px 0 0 var(--b2-surface-1); }

  .stockv2 .alloc-cell { min-width: 220px; max-width: 280px; }
  .stockv2 .alloc-meta {
    margin-top: 6px; font-size: 11px;
    color: var(--b2-text-3);
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .alloc-meta strong { font-weight: 600; color: inherit; }

  .stockv2 .alloc-legend {
    display: flex; gap: 14px; font-size: 11px; color: var(--b2-text-3);
    align-items: center; flex-wrap: wrap;
  }
  .stockv2 .alloc-legend > span {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .stockv2 .alloc-swatch {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    background: var(--b2-surface-3);
  }
  .stockv2 .alloc-swatch.ok      { background: var(--role-ready); }
  .stockv2 .alloc-swatch.build   { background: var(--role-queued-build); }
  .stockv2 .alloc-swatch.short   { background: var(--role-no-stock); }
  .stockv2 .alloc-swatch.pending { background: var(--b2-text-4); }

  /* Priority shoulder for order rows. */
  .stockv2 .stockv2-tbl tbody tr.priority td:first-child {
    box-shadow: inset 2px 0 0 var(--role-priority);
  }
  .stockv2 .stockv2-tbl tbody tr.ready {
    background: rgba(48,209,88,0.025);
  }

  /* Line-item badges — one per blocked line, colored by reason. */
  .stockv2 .short-cell { padding-top: 8px; padding-bottom: 8px; }
  .stockv2 .line-badges { display: flex; flex-wrap: wrap; gap: 6px; }
  .stockv2 .line-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 7px;
    border-radius: 6px;
    font-size: 11.5px; font-weight: 500;
    background: var(--b2-surface-3);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    line-height: 1;
  }
  .stockv2 .line-badge .line-ico { flex-shrink: 0; }
  .stockv2 .line-badge-qty {
    font-weight: 700; color: var(--b2-text);
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .line-badge-sku { color: var(--b2-text); letter-spacing: -0.005em; }
  .stockv2 .line-badge-build {
    background: var(--role-queued-build-bg);
    border-color: var(--role-queued-build-border);
    color: var(--role-queued-build);
  }
  .stockv2 .line-badge-build .line-badge-qty,
  .stockv2 .line-badge-build .line-badge-sku { color: var(--role-queued-build); }
  .stockv2 .line-badge-short {
    background: var(--role-no-stock-bg);
    border-color: var(--role-no-stock-border);
    color: var(--role-no-stock);
  }
  .stockv2 .line-badge-short .line-badge-qty,
  .stockv2 .line-badge-short .line-badge-sku { color: var(--role-no-stock); }
  .stockv2 .line-badges-empty {
    font-size: 12px; color: var(--b2-text-4); padding-left: 2px;
  }

  /* Inline pill used inside the Order cell — flags orphan rows and
     priority orders (since the Status column is gone). */
  .stockv2 .oo-inline-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
    vertical-align: middle;
  }
  .stockv2 .oo-inline-badge svg { flex: 0 0 auto; }

  /* Priority bolt — yellow (#ffd029) against the red badge background.
     Scoped to every priority-badge variant in the app so the lightning
     glyph reads identically wherever it appears. */
  .stockv2 .oo-inline-badge.priority svg,
  .alloc-list-table .alloc-badge-priority svg,
  .swap-badge-priority svg,
  .alloc-orders .oc-priority-badge svg,
  .stockv2 .inline-badge.crit-badge svg {
    stroke: #ffd029;
    fill: #ffd029;
  }
  .stockv2 .oo-inline-badge.priority { background: var(--role-priority-bg); color: var(--role-priority); border: 1px solid var(--role-priority-border); }
  .stockv2 .oo-inline-badge.orphan   { background: var(--role-orphan-bg);   color: var(--role-orphan);   border: 1px solid var(--role-orphan-border); }
  .stockv2 .oo-inline-badge.custom   { background: var(--role-custom-bg);   color: var(--role-custom);   border: 1px solid var(--role-custom-border); }
  .stockv2 .oo-inline-badge.shipby   { background: var(--role-ship-by-date-bg); color: var(--role-ship-by-date); border: 1px solid var(--role-ship-by-date-border); }
  .stockv2 .oo-inline-badge.shipby.soon    { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: rgba(255,159,10,0.55); }
  .stockv2 .oo-inline-badge.shipby.overdue { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); }
  /* Partial Shipment — amber, signals only the staged wave is shipping. */
  .stockv2 .oo-inline-badge.partial { background: var(--b2-amber-bg); color: var(--b2-amber); border: 1px solid rgba(255,159,10,0.55); }
  .stockv2 .oo-inline-badge.partial svg { stroke-width: 2; }
  /* Build method — distinguishes legacy CPL builds (amber) from new
     Stocking Ticket builds (teal). Stays visible while the warehouse
     transitions away from CPL paperwork; once all CPL orders ship,
     all rows will read Stocking Ticket. */
  .stockv2 .oo-inline-badge.cpl         { background: var(--b2-amber-bg); color: var(--b2-amber); border: 1px solid rgba(255,159,10,0.55); }
  /* Build-method tag moved off teal — teal is now the Custom-order flag,
     and a Custom order can be built via Stocking Ticket, so two teal
     badges were appearing side-by-side. Green reads as "current system,
     healthy" without competing with the action flags. */
  .stockv2 .oo-inline-badge.stockticket { background: rgba(var(--b2-green-rgb),0.14); color: var(--b2-green); border: 1px solid rgba(var(--b2-green-rgb),0.55); }
  /* Pipeline-stage badges — surface where the order currently lives in
     the production pipeline (Warehouse → Print Shop → Labeling → RTS).
     Yellow (printshop) + purple (labeling) keep the two stages distinct
     from each other AND from Custom (teal), Ship-By (blue), Priority
     (red), and Orphan (amber). */
  .stockv2 .oo-inline-badge.stage-printshop { background: rgba(var(--b2-yellow-rgb),0.14); color: var(--b2-yellow); border: 1px solid rgba(var(--b2-yellow-rgb),0.55); }
  .stockv2 .oo-inline-badge.stage-labeling  { background: rgba(var(--b2-purple-rgb),0.16); color: var(--b2-purple); border: 1px solid rgba(var(--b2-purple-rgb),0.55); }
  /* Legacy marker — for orders stranded in the old Print Shop state when
     the pipeline collapsed. Neutral gray, no semantic urgency. */
  .stockv2 .oo-inline-badge.legacy { background: rgba(255,255,255,0.06); color: var(--b2-text-3); border: 1px solid rgba(255,255,255,0.18); }
  /* Loom marker — purple, distinct from every other flag. */
  .stockv2 .oo-inline-badge.loom { background: rgba(175,82,222,0.12); color: #c77dff; border: 1px solid rgba(175,82,222,0.5); }
  /* VIP customer — gold (Elite Core brand). Star glyph + gold pill so it
     reads as "handle with care" without competing with the red Priority
     flag. */
  .stockv2 .oo-inline-badge.vip {
    background: rgba(212,175,55,0.14);
    color: #e8c352;
    border: 1px solid rgba(212,175,55,0.55);
  }
  .stockv2 .oo-inline-badge.vip svg { color: #e8c352; }
  /* VIP row accent — subtle gold left shoulder, mirroring the priority
     row treatment but in gold. */
  .stockv2 .stockv2-tbl tbody tr.oo-vip td:first-child {
    box-shadow: inset 3px 0 0 rgba(212,175,55,0.7);
  }
  /* BAO status chips — neutral container for the synced Build Assembly
     Order statuses. The KITTING stage gets an amber highlight since it's
     the trigger for the Kitting echo. */
  .stockv2 .oo-inline-badge.bao { background: var(--b2-surface-3); color: var(--b2-text-2); border: 1px solid var(--b2-hairline); }
  .stockv2 .oo-inline-badge.bao-kitting { background: rgba(255,159,28,0.12); color: var(--role-needs-build); border: 1px solid rgba(255,159,28,0.5); }
  /* "Returned from Labeling" badge — uses the critical palette so a
     bounce-back stands out from Priority / Ship-By. Applied to Kitting
     rows whose Orders with Artwork record has a Last Return Reason set. */
  .stockv2 .oo-inline-badge.returned { background: var(--role-critical-bg); color: var(--role-critical); border: 1px solid var(--role-critical-border); }
  /* Pick-list-printed badge — quiet teal so it reads as informational
     "this has already been pulled / printed" rather than alarm. Pairs
     with the `Printed Nh ago · ×N` text emitted on Kitting active-queue
     rows. Sibling badge id pattern `pickListBadge-<orderId>` lets
     refreshPickListBadge update it in place after a print event. */
  .stockv2 .oo-inline-badge.picklist-printed {
    background: var(--b2-teal-bg);
    color: var(--b2-teal);
    border: 1px solid var(--b2-teal-border);
  }
  .stockv2 .oo-inline-badge.picklist-printed svg { color: var(--b2-teal); }

  /* ─── Kitting page ────────────────────────────────────────────────
     Pull queue UX. Each row reads as its own card: subtle surface tint,
     strong separator between siblings, top-aligned action button so the
     "Pulled & Delivered" CTA stays at eye level with the order header
     regardless of how many SKU lines hang below it. */
  /* Row gets a slightly lifted surface so each card pops off the
     surrounding panel. Thick bottom border in the panel background
     color simulates a card gap between siblings. */
  .stockv2 .kitting-tbl tbody tr { background: var(--b2-surface-2); }
  .stockv2 .kitting-tbl tbody td {
    vertical-align: top;
    padding: 18px 20px;
    border-bottom: 6px solid var(--b2-surface-1);
  }
  .stockv2 .kitting-tbl tbody tr:hover { background: var(--b2-surface-3); }
  .stockv2 .kitting-tbl tbody tr:last-child td { border-bottom: 0; }
  /* Float-bucket rail — Priority + Ship-By rows get a 3px colored
     accent on the leading edge of the first cell so the urgency
     bucket is visually distinct from the FIFO queue below it.
     Priority wins when both flags are set (handled in render). */
  .stockv2 .kitting-tbl tbody tr.kitting-row-priority td:first-child {
    box-shadow: inset 3px 0 0 0 var(--role-critical);
  }
  .stockv2 .kitting-tbl tbody tr.kitting-row-shipby td:first-child {
    box-shadow: inset 3px 0 0 0 var(--role-ship-by-date);
  }
  /* Returned-from-Labeling rows get the critical-red rail. Takes
     precedence over Priority/Ship-By when the order also matches one of
     those — a bounce-back needs attention regardless of urgency. */
  .stockv2 .kitting-tbl tbody tr.kitting-row-returned td:first-child {
    box-shadow: inset 3px 0 0 0 var(--role-critical);
  }
  /* Return-banner — full-width inline block inside the row body, below
     the customer line, showing the reason text inline so it doesn't
     require a hover. Critical-tinted to draw eyes. */
  .stockv2 .kitting-return-banner {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--role-critical-bg);
    border: 1px solid var(--role-critical-border);
    border-radius: 8px;
    font-size: 12px; font-weight: 500;
    color: var(--role-critical);
  }
  .stockv2 .kitting-return-banner svg {
    flex: 0 0 auto;
    width: 14px; height: 14px;
  }
  .stockv2 .kitting-return-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px;
  }
  .stockv2 .kitting-return-sep {
    opacity: 0.5;
  }
  .stockv2 .kitting-return-reason {
    color: var(--b2-text);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stockv2 .kitting-return-age {
    color: var(--b2-text-3);
    font-size: 11px;
    font-weight: 500;
    flex: 0 0 auto;
  }
  .stockv2 .kitting-line-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--b2-hairline);
  }
  .stockv2 .kitting-line-list::before {
    content: 'Pull list';
    display: block;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
    margin-bottom: 2px;
  }
  .stockv2 .kitting-line {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px; color: var(--b2-text);
    padding: 4px 0;
  }
  .stockv2 .kitting-line-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--b2-text);
    min-width: 32px;
  }
  .stockv2 .kitting-line-sku {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    color: var(--b2-text);
    cursor: pointer;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stockv2 .kitting-line-sku:hover { color: var(--b2-blue); text-decoration: underline; }
  .stockv2 .kitting-line-bin {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--role-temp-bin);
    cursor: pointer;
    white-space: nowrap;
  }
  .stockv2 .kitting-line-bin:hover { text-decoration: underline; }
  .stockv2 .kitting-line-bin-missing {
    color: var(--role-critical);
    font-style: italic;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    cursor: default;
  }
  /* "Building · don't pull" chip — the unbuilt-BAO portion of a line. Amber to
     read as a do-not-touch flag distinct from a bin link. */
  .stockv2 .kitting-line-bao {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 1px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    color: var(--role-needs-build, #ff9f1c);
    background: rgba(255,159,28,0.10);
    border: 1px solid rgba(255,159,28,0.4);
    border-radius: 999px; cursor: help; white-space: nowrap;
  }
  .stockv2 .kitting-line-bao svg { flex: 0 0 auto; }
  /* ─── Rich Kitting line layout ───────────────────────────────────
     When a line has customization specs (length/color/labels/notes)
     or matching proof thumbs, switch to a vertical layout so the
     kitter can see all the details inline without opening the order.
     Plain stock lines keep the original single-row layout. */
  .stockv2 .kitting-line.kitting-line-rich {
    align-items: flex-start;
  }
  .stockv2 .kitting-line-body {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .stockv2 .kitting-line-top {
    display: flex; align-items: center; gap: 12px;
    min-width: 0;
  }
  .stockv2 .kitting-line-rich .kitting-line-sku {
    flex: 0 1 auto;
  }
  .stockv2 .kitting-line-specs {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.3;
  }
  .stockv2 .kitting-spec {
    color: var(--b2-text-2);
    font-weight: 500;
  }
  .stockv2 .kitting-spec-strong {
    color: var(--b2-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .kitting-spec-muted {
    color: var(--b2-text-3);
  }
  .stockv2 .kitting-spec-sep {
    color: var(--b2-text-4);
    font-weight: 400;
  }
  .stockv2 .kitting-line-notes {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 12px;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 2px;
  }
  .stockv2 .kitting-notes-label {
    color: var(--role-needs-build);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  .stockv2 .kitting-notes-text {
    color: var(--b2-text);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }
  .stockv2 .kitting-line-more {
    font-size: 11px;
    color: var(--b2-text-3);
    font-weight: 500;
    margin-top: 2px;
  }
  .stockv2 .kitting-more-hint {
    color: var(--b2-text-4);
    font-style: italic;
  }
  /* Proof thumbnails — small, clickable, opens the proof modal. */
  .stockv2 .kitting-line-proofs {
    display: flex; gap: 6px;
    flex: 0 0 auto;
    margin-left: 8px;
    align-items: flex-start;
  }
  .stockv2 .kitting-line-proof {
    display: inline-flex;
    cursor: pointer;
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
    background: var(--b2-surface-2);
    transition: border-color 0.1s, transform 0.1s;
    flex: 0 0 auto;
  }
  .stockv2 .kitting-line-proof:hover {
    border-color: var(--b2-text-3);
    transform: scale(1.05);
  }
  .stockv2 .kitting-line-proof img {
    display: block;
    width: 42px; height: 42px;
    object-fit: cover;
  }
  /* Action cell — top-aligned so the CTA sits next to the order header,
     not stranded in vertical center when the card grows tall. */
  .stockv2 .kitting-tbl tbody td.kitting-action-cell {
    vertical-align: top;
    padding-top: 18px;
  }
  .stockv2 .kitting-deliver-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--role-ready-bg);
    color: var(--role-ready);
    border: 1px solid var(--role-ready-border);
    padding: 8px 14px;
    font-weight: 600;
  }
  .stockv2 .kitting-deliver-btn:hover {
    background: rgba(var(--role-ready-rgb),0.18);
    border-color: var(--role-ready);
  }
  .stockv2 .kitting-deliver-btn svg { flex: 0 0 auto; }
  /* Stack the primary CTA over the secondary Print button. Right-aligned
     within the action cell. */
  .stockv2 .kitting-action-stack {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 8px;
  }
  /* Print Pick List — quiet secondary action below the green CTA.
     Ghost button — text-only weight, becomes more legible on hover. */
  .stockv2 .kitting-print-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-3);
    padding: 6px 12px;
    font: inherit; font-size: 11.5px; font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .stockv2 .kitting-print-btn:hover {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-3);
  }
  .stockv2 .kitting-print-btn svg { flex: 0 0 auto; }

  /* Tertiary triage action — Remove from queue. Even quieter than Print
     Pick List: borderless ghost button in muted gray, only the icon hints
     at the action. Hover lifts it to a soft pink to signal destructive-ish
     intent (the order isn't deleted — just hidden — but it's a queue-shape
     change that warrants a moment's pause). */
  .stockv2 .kitting-remove-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--b2-text-3);
    padding: 5px 10px;
    font: inherit; font-size: 11px; font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .stockv2 .kitting-remove-btn:hover {
    color: var(--b2-pink, #ef5da8);
    border-color: var(--b2-pink-border, rgba(239,93,168,0.36));
    background: var(--b2-pink-bg, rgba(239,93,168,0.10));
  }
  .stockv2 .kitting-remove-btn svg { flex: 0 0 auto; }

  /* Row "Unlock" — releases a kitting-locked order (Pick Started At). Quiet,
     amber-tinted to read as a corrective action rather than a primary one. */
  .stockv2 .kitting-lock-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid transparent;
    color: var(--b2-text-3); padding: 5px 10px;
    font: inherit; font-size: 11px; font-weight: 600; border-radius: 7px;
    cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .stockv2 .kitting-lock-btn:hover {
    color: var(--role-needs-build, #ff9f1c);
    border-color: rgba(255,159,28,0.4); background: rgba(255,159,28,0.10);
  }
  .stockv2 .kitting-lock-btn svg { flex: 0 0 auto; }

  /* Toolbar "Print Pick Lists" — compact secondary button in the Pull Queue head. */
  .stockv2 .kit-printall-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    color: var(--b2-text); padding: 0 12px; height: 32px;
    font: inherit; font-size: 12px; font-weight: 600; border-radius: 8px;
    cursor: pointer; transition: background 0.12s, border-color 0.12s;
  }
  .stockv2 .kit-printall-btn:hover { background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }
  .stockv2 .kit-printall-btn svg { flex: 0 0 auto; }
  /* Pull Queue head action cluster — Hidden pill + Print Pick Lists, pinned right. */
  .stockv2 .kit-head-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; row-gap: 8px; }

  /* Hidden (N) ▸ pill — Pull Queue panel header. Only renders when
     KITTING_HIDDEN.size > 0; pink tint to match the "claimed/triage"
     vocabulary used elsewhere. */
  .stockv2 .kit-hidden-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--b2-pink-bg, rgba(239,93,168,0.10));
    border: 1px solid var(--b2-pink-border, rgba(239,93,168,0.36));
    color: #ff8fbe;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .stockv2 .kit-hidden-pill:hover {
    background: rgba(239,93,168,0.18);
    border-color: rgba(239,93,168,0.6);
  }
  .stockv2 .kit-hidden-pill-label { text-transform: uppercase; }
  .stockv2 .kit-hidden-pill-count {
    background: rgba(255,255,255,0.10);
    padding: 1px 7px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .kit-hidden-pill svg { flex: 0 0 auto; }

  /* To Be Built — "Hidden (N)" pill: families held until their cable restocks.
     Amber "on hold" tint to distinguish from the kitting pink "claimed" pill. */
  .stockv2 .tbb-hidden-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--b2-amber-bg, rgba(255,159,10,0.12));
    border: 1px solid var(--b2-amber-border, rgba(255,159,10,0.32));
    color: var(--b2-amber, #ff9f0a);
    padding: 4px 8px 4px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    cursor: pointer; transition: background 0.12s, border-color 0.12s;
  }
  .stockv2 .tbb-hidden-pill:hover { background: rgba(255,159,10,0.2); border-color: rgba(255,159,10,0.6); }
  .stockv2 .tbb-hidden-pill-label { text-transform: uppercase; }
  .stockv2 .tbb-hidden-pill-count {
    background: rgba(255,255,255,0.10);
    padding: 1px 7px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .tbb-hidden-pill svg { flex: 0 0 auto; }

  /* ─── Kitting hide-confirmation modal ──────────────────────────────── */
  .kit-hide-modal .kit-hide-body { padding: 18px 22px 22px; }
  .kit-hide-modal .kit-hide-label {
    font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 700;
    margin-bottom: 10px;
  }
  .kit-hide-modal .kit-hide-required {
    color: var(--role-critical, #ff453a);
    text-transform: none; letter-spacing: 0;
    font-weight: 600; font-size: 10.5px;
    margin-left: 4px;
  }
  .kit-hide-modal .kit-hide-optional {
    color: var(--b2-text-3);
    text-transform: none; letter-spacing: 0;
    font-weight: 600; font-size: 10.5px;
    margin-left: 4px;
  }
  .kit-hide-modal .kit-hide-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
  }
  .kit-hide-modal .kit-hide-chip {
    display: inline-flex; align-items: center;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    padding: 8px 14px;
    font: inherit; font-size: 12.5px; font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .kit-hide-modal .kit-hide-chip:hover {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .kit-hide-modal .kit-hide-chip.is-active {
    background: var(--b2-pink-bg, rgba(239,93,168,0.16));
    border-color: var(--b2-pink-border, rgba(239,93,168,0.6));
    color: #ff8fbe;
  }
  .kit-hide-modal .kit-hide-chip:focus-visible {
    outline: 2px solid var(--yellow, #ffd60a);
    outline-offset: 2px;
  }
  .kit-hide-modal .kit-hide-text {
    width: 100%;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    padding: 10px 12px;
    border-radius: 8px;
    font: inherit; font-size: 13px; line-height: 1.45;
    resize: vertical; min-height: 60px;
  }
  .kit-hide-modal .kit-hide-text:focus {
    outline: none;
    border-color: var(--b2-pink-border, rgba(239,93,168,0.6));
    background: var(--b2-surface-3);
  }
  .kit-hide-modal .kit-hide-actions {
    display: flex; justify-content: flex-end; gap: 10px;
    margin-top: 18px;
  }
  .kit-hide-modal .kit-hide-cancel {
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    padding: 9px 16px;
    font: inherit; font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
  }
  .kit-hide-modal .kit-hide-cancel:hover {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .kit-hide-modal .kit-hide-submit {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--b2-pink, #ef5da8);
    border: 1px solid var(--b2-pink, #ef5da8);
    color: #1c1d1e;
    padding: 9px 18px;
    font: inherit; font-size: 13px; font-weight: 700;
    border-radius: 8px; cursor: pointer;
    transition: background 0.12s, opacity 0.12s;
  }
  .kit-hide-modal .kit-hide-submit:hover:not([disabled]) {
    background: #ff8fbe;
  }
  .kit-hide-modal .kit-hide-submit[disabled] {
    opacity: 0.4; cursor: not-allowed;
  }

  /* ─── Hidden list modal ───────────────────────────────────────────── */
  .kit-hidden-modal .kit-hidden-body { padding: 4px 0 14px; }
  .kit-hidden-modal .kit-hidden-empty {
    padding: 36px 24px; text-align: center;
    color: var(--b2-text-3); font-weight: 600;
  }
  .kit-hidden-modal .kit-hidden-tbl {
    width: 100%; border-collapse: collapse;
  }
  .kit-hidden-modal .kit-hidden-tbl th,
  .kit-hidden-modal .kit-hidden-tbl td {
    padding: 12px 22px;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--b2-hairline);
    font-size: 13px;
  }
  .kit-hidden-modal .kit-hidden-tbl th {
    font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 700;
  }
  .kit-hidden-modal .kit-hidden-tbl th.r,
  .kit-hidden-modal .kit-hidden-tbl td.r { text-align: right; }
  .kit-hidden-modal .kit-hidden-tbl tr:last-child td { border-bottom: 0; }
  .kit-hidden-modal .kit-hidden-reason-cat {
    color: #ff8fbe; font-weight: 600;
  }
  .kit-hidden-modal .kit-hidden-reason-text {
    color: var(--b2-text-2); font-size: 12px;
    margin-top: 2px; max-width: 320px;
  }
  .kit-hidden-modal .kit-hidden-by {
    color: var(--b2-text-3); font-size: 11.5px;
    margin-top: 2px;
  }
  .kit-hidden-modal .kit-hidden-restore {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    padding: 6px 12px;
    font: inherit; font-size: 11.5px; font-weight: 600;
    border-radius: 7px; cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .kit-hidden-modal .kit-hidden-restore:hover {
    color: var(--role-ready, #30d158);
    border-color: var(--role-ready-border, rgba(48,209,88,0.5));
    background: var(--role-ready-bg, rgba(48,209,88,0.10));
  }
  .kit-hidden-modal .kit-hidden-restore svg { flex: 0 0 auto; }
  /* Permanently Remove — terminal action, red treatment (incl. hover, which
     the restore class fills green). */
  .kit-hidden-modal .kit-hidden-remove {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--role-critical-border, rgba(255,107,107,0.3));
    color: var(--role-critical, #ff6b6b);
    padding: 6px 12px;
    font: inherit; font-size: 11.5px; font-weight: 600;
    border-radius: 7px; cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .kit-hidden-modal .kit-hidden-remove:hover {
    color: var(--role-critical, #ff6b6b);
    border-color: var(--role-critical-border, rgba(255,107,107,0.5));
    background: var(--role-critical-bg, rgba(255,107,107,0.12));
  }
  .kit-hidden-modal .kit-hidden-remove svg { flex: 0 0 auto; }

  /* ─── Pull for Pack panel ──────────────────────────────────────────
     Warehouse-floor view's lead panel. Row is collapsed by default —
     summary + Mark Shipped button. Click to expand the pull list of
     stock items that still need to come off the shelf. */
  .stockv2 .pfp-row { cursor: pointer; }
  .stockv2 .pfp-row.is-expanded { background: rgba(var(--b2-amber-rgb),0.06); }
  .stockv2 .pfp-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--b2-hairline);
  }
  .stockv2 .pfp-detail-label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--b2-text-3);
    margin-bottom: 8px;
  }
  .stockv2 .pfp-line-list { display: flex; flex-direction: column; gap: 6px; }
  .stockv2 .pfp-line {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--b2-text);
  }
  .stockv2 .pfp-line-qty {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--b2-text);
    min-width: 28px;
  }
  .stockv2 .pfp-line-sku {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    color: var(--b2-text);
    cursor: pointer;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .stockv2 .pfp-line-sku:hover { color: var(--b2-blue); text-decoration: underline; }
  .stockv2 .pfp-line-bin {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px; font-weight: 600;
    color: var(--role-temp-bin);
    cursor: pointer; white-space: nowrap;
  }
  .stockv2 .pfp-line-bin:hover { text-decoration: underline; }
  .stockv2 .pfp-line-bin-missing {
    color: var(--role-critical); font-style: italic; font-weight: 500;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em;
    cursor: default;
  }
  .stockv2 .pfp-ship-btn {
    background: var(--role-cta-primary-bg);
    color: var(--yellow);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.6);
    padding: 8px 14px;
    font-weight: 700;
  }
  .stockv2 .pfp-ship-btn:hover {
    background: rgba(var(--role-cta-primary-rgb),0.22);
    border-color: var(--yellow);
  }

  /* Filter pills + search toolbar (replaces the legacy rich filter panel
     for the All Open Orders table). The five pills cover the most common
     filters; date / customer / artwork filters are deferred. */
  .stockv2 .c-toolbar {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--b2-hairline);
    background: var(--b2-surface-0);
    flex-wrap: wrap;
  }
  .stockv2 .c-search-wrap {
    position: relative;
    flex: 1; max-width: 360px;
    display: flex; align-items: center;
  }
  .stockv2 .c-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--b2-text-3);
    pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px;
  }
  .stockv2 .c-search-icon svg { display: block; }
  .stockv2 .c-search {
    flex: 1; height: 32px; padding: 0 28px 0 30px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    border-radius: 8px; color: var(--b2-text); font: inherit; font-size: 13px;
    outline: 0;
  }
  .stockv2 .c-search::placeholder { color: var(--b2-text-3); }
  .stockv2 .c-search:focus { border-color: var(--b2-hairline-strong); }
  .stockv2 .c-search-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px;
    background: transparent; border: 0; border-radius: 4px;
    color: var(--b2-text-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .stockv2 .c-search-clear:hover { color: var(--b2-text); background: var(--b2-surface-3); }

  /* Segmented filter pill control. */
  .stockv2 .seg {
    display: inline-flex; align-items: center;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    padding: 2px;
    gap: 1px;
  }
  .stockv2 .seg button {
    /* a11y: bumped from 26px to 32px so touch targets clear comfortably
       past WCAG 2.5.8 AA minimum (24px) while keeping the segmented
       control's compact horizontal footprint. */
    height: 32px; padding: 0 12px;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--b2-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: background 0.12s, color 0.12s;
  }
  .stockv2 .seg button:hover { color: var(--b2-text); }
  .stockv2 .seg button.active {
    background: var(--b2-surface-3);
    color: var(--b2-text);
    box-shadow: inset 0 0 0 1px var(--b2-hairline-strong);
    font-weight: 600;
  }

  /* CTA pseudo-link used in the right-most action cell ("Open →"). */
  .stockv2 .cta {
    color: var(--b2-text-3);
    font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 600;
    white-space: nowrap;
  }
  .stockv2 .stockv2-tbl tbody tr:hover .cta { color: var(--role-cta-primary); }

  /* Panel-head tweaks for the Warehouse view — long count lines can wrap
     and the title block keeps a stable min-width so right-side controls
     (sort segs, filter pills) don't push the title under them. */
  .stockv2 .stockv2-panel-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .stockv2 .stockv2-panel-head .stockv2-panel-title {
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
  }
  .stockv2 .stockv2-panel-head .stockv2-panel-title .pt-count {
    white-space: normal;
  }
  .stockv2 .stockv2-panel-head .rts-old-toggle {
    margin-left: 0;
    font-size: 11px;
  }

  /* Allocation legend collapses below the search row on narrow viewports
     so the toolbar doesn't compress the search input. */
  .stockv2 .c-toolbar { row-gap: 8px; }

  /* Compact in-panel toolbar — slim search input sized for a twin-panel
     card. Shorter and tighter than .c-toolbar (which sits inside the
     full-width All Open Orders panel). */
  .stockv2 .panel-toolbar {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    background: var(--b2-surface-0);
  }
  .stockv2 .panel-toolbar-search {
    position: relative; flex: 1; min-width: 0;
    display: flex; align-items: center;
  }
  .stockv2 .panel-toolbar-search .c-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--b2-text-3);
    pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 13px; height: 13px;
  }
  .stockv2 .panel-toolbar-search input {
    flex: 1; width: 100%;
    height: 28px;
    padding: 0 26px 0 28px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 7px;
    color: var(--b2-text);
    font: inherit; font-size: 12px;
    outline: 0;
  }
  .stockv2 .panel-toolbar-search input::placeholder { color: var(--b2-text-3); }
  .stockv2 .panel-toolbar-search input:focus { border-color: var(--b2-hairline-strong); }
  .stockv2 .panel-toolbar-search .c-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px;
    background: transparent; border: 0; border-radius: 4px;
    color: var(--b2-text-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px;
  }
  .stockv2 .panel-toolbar-search .c-search-clear:hover { color: var(--b2-text); background: var(--b2-surface-3); }

  /* Pager — Prev / "Page N of M · K shown" / Next. Sits at the bottom of
     a panel and replaces the previous "scroll forever" experience. */
  .stockv2 .panel-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-0);
    font-size: 11px;
    color: var(--b2-text-3);
  }
  .stockv2 .panel-pager-info { font-variant-numeric: tabular-nums; }
  .stockv2 .panel-pager-info strong { color: inherit; font-weight: 600; }
  .stockv2 .panel-pager-nav { display: inline-flex; align-items: center; gap: 4px; }
  .stockv2 .panel-pager-btn {
    height: 24px; min-width: 24px; padding: 0 8px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .stockv2 .panel-pager-btn:hover:not(:disabled) {
    background: var(--b2-surface-3); color: var(--b2-text);
  }
  .stockv2 .panel-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* RTS row accordion — caret in the order cell rotates when expanded,
     and an expansion row appears below the main row to reveal the bin
     pulls (which used to occupy a dedicated column). */
  .stockv2 .rts-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
    color: var(--b2-text-3);
    margin-right: 8px;
    vertical-align: middle;
    transition: transform 0.15s, color 0.15s;
    transform: rotate(0deg);
  }
  .stockv2 .rts-caret svg { display: block; }
  .stockv2 .stockv2-tbl tbody tr.expanded .rts-caret {
    transform: rotate(90deg);
    color: var(--b2-text);
  }
  /* Breathing room above the expansion card so it doesn't kiss the main
     row underneath. Bottom hairline preserves the row rhythm. */
  .stockv2 .rts-expand-row > td {
    padding: 10px 14px 14px;
    background: var(--b2-surface-0);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2 .rts-expand-row:hover { background: transparent; }
  .stockv2 .rts-expand-wrap {
    padding: 10px 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
  }
  .stockv2 .rts-expand-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
    margin-bottom: 8px;
  }
  .stockv2 .rts-expand-row .bin-pull { margin: 0 6px 4px 0; }
  /* Full-custom returned — the order is fully assembled at the marriage
     station, no shelf pull needed. Distinct treatment so the operator
     can tell instantly this is a "stage and ship" not a "pull and pack". */
  .stockv2 .rts-expand-label.rts-expand-label-assembled { color: var(--role-ready); }
  .stockv2 .rts-expand-assembled-hint {
    font-size: 12.5px; color: var(--b2-text-2);
    font-style: italic;
  }

  /* RTS pull-chip — one chip per SKU on a ready-to-ship order. Lists qty,
     SKU, and bin in a compact pill that wraps onto multiple lines if the
     order has many lines. */
  .stockv2 .rts-pulls-cell {
    padding: 8px 14px;
    line-height: 1.6;
  }
  .stockv2 .bin-pull {
    display: inline-flex; align-items: center;
    gap: 2px;
    margin-right: 8px; margin-bottom: 4px;
    padding: 4px 8px;
    background: var(--b2-surface-3);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    font-size: 11.5px; line-height: 1.2;
    color: var(--b2-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .stockv2 .bin-pull .num { color: inherit; font-weight: 600; }

  /* Production Inbound rows — small destination tag with action-tinted dot. */
  .stockv2 .row-dot.inbound-permanent { background: var(--role-permanent-bin); box-shadow: 0 0 0 3px var(--role-permanent-bin-bg); }
  .stockv2 .row-dot.inbound-outbound  { background: var(--role-outbound);      box-shadow: 0 0 0 3px var(--role-outbound-bg); }
  .stockv2 .row-dot.inbound-choose    { background: var(--role-choose-bin);    box-shadow: 0 0 0 3px var(--role-choose-bin-bg); }
  .stockv2 .row-dot.inbound-temp      { background: var(--role-temp-bin);      box-shadow: 0 0 0 3px var(--role-temp-bin-bg); }
  /* Logistics · SKU lookup ("who's waiting on this SKU?") — status colors */
  .stockv2 .row-dot.lgx-dot-waiting { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.18); }
  .stockv2 .row-dot.lgx-dot-partial { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,0.18); }
  .stockv2 .row-dot.lgx-dot-covered { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.18); }
  .stockv2 .lgx-status-tag { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:1px 6px; border-radius:5px; vertical-align:middle; }
  .stockv2 .lgx-status-tag.lgx-dot-waiting { color:#ef4444; background:rgba(239,68,68,0.12); }
  .stockv2 .lgx-status-tag.lgx-dot-partial { color:#f59e0b; background:rgba(245,158,11,0.12); }
  .stockv2 .lgx-status-tag.lgx-dot-covered { color:#22c55e; background:rgba(34,197,94,0.12); }
  .stockv2 .lgx-short { font-size:11px; font-weight:600; color:#ef4444; margin-top:1px; }
  .stockv2 .lgx-short.lgx-short-ok { color:var(--b2-text-3); font-weight:500; }
  .stockv2 .lgx-alloc { font-size:11px; font-weight:600; color:#22c55e; margin-top:1px; }
  .stockv2 .lgx-sku-hint { padding:14px 4px; color:var(--b2-text-3); font-size:12px; }
  .stockv2 .lgx-sku-picker { display:flex; flex-direction:column; gap:4px; padding-top:8px; }
  .stockv2 .lgx-sku-summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:8px 2px 4px; border-bottom:1px solid var(--b2-hairline); margin-bottom:2px; }
  .stockv2 .lgx-sku-summary-sku { font-weight:700; font-size:13px; color:var(--b2-text); }
  .stockv2 .lgx-sku-summary-meta { font-size:11.5px; color:var(--b2-text-3); }
  .stockv2 .lgx-group-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--b2-text-3); padding:14px 2px 6px; }
  .stockv2 .lgx-filter-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 2px; }
  .stockv2 .lgx-filter-pill {
    display:inline-flex; align-items:center; gap:4px;
    height:26px; padding:0 11px;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:13px;
    color:var(--b2-text-2, var(--b2-text)); font:inherit; font-size:11.5px; font-weight:600;
    cursor:pointer; white-space:nowrap;
  }
  .stockv2 .lgx-filter-pill:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .lgx-filter-pill.active { background:rgba(34,197,94,0.14); border-color:#22c55e; color:#22c55e; }
  .stockv2 .lgx-filter-note { font-size:11px; color:var(--b2-text-3); }
  .stockv2 .oo-inline-badge.lgx-ships { color:#22c55e; background:rgba(34,197,94,0.12); border-color:rgba(34,197,94,0.35); }
  /* SKU profile (unified lookup drill-in) */
  .stockv2 .skp-wrap { padding:12px 16px 18px; }
  /* The profile renders as <div class="stockv2 skp-wrap">, so the descendant
     rule above never matches (same element). Without this, the wrap falls back
     to .stockv2's padding-bottom:60px + 0 horizontal — leaving a big bottom gap
     and cells that run edge-to-edge, misaligned with the 24px header inset.
     Match the design's 18/24/22 so the body lines up with the header. */
  .sku-lookup-modal .skp-wrap { padding: 18px 24px 22px; }
  .stockv2 .skp-back { background:none; border:0; color:var(--b2-text-3); font:inherit; font-size:12px; cursor:pointer; padding:2px 0 10px; }
  .stockv2 .skp-back:hover { color:var(--b2-text); }
  .stockv2 .skp-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--b2-hairline); }
  .stockv2 .skp-sku { font-size:20px; font-weight:700; letter-spacing:-0.01em; color:var(--b2-text); }
  .stockv2 .skp-meta { font-size:12px; color:var(--b2-text-3); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .stockv2 .skp-section-title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--b2-text-3); margin:16px 0 8px; }
  .stockv2 .skp-section-note { font-weight:500; letter-spacing:0; text-transform:none; opacity:.75; margin-left:4px; }
  .stockv2 .skp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(94px, 1fr)); gap:8px; }
  .stockv2 .skp-cell { background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:9px; padding:9px 11px; }
  .stockv2 .skp-cell-strong { border-color:var(--b2-yellow-border); background:linear-gradient(180deg, var(--b2-yellow-bg), transparent 70%), var(--b2-surface-2); }
  .stockv2 .skp-cell-clickable { cursor:pointer; }
  .stockv2 .skp-cell-clickable:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .skp-label { font-size:10.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--b2-text-3); }
  .stockv2 .skp-value { font-size:18px; font-weight:700; color:var(--b2-text); margin-top:2px; line-height:1.1; }
  .stockv2 .skp-sub { font-size:10.5px; color:var(--b2-text-3); margin-top:1px; }
  .stockv2 .skp-wop { margin-top:8px; padding:8px 11px; border-radius:8px; background:rgba(245,158,11,0.12); color:#f59e0b; font-size:12px; font-weight:600; }
  .stockv2 .skp-foot { margin-top:14px; }
  .stockv2 .skp-link { background:none; border:0; color:var(--b2-accent, #6ea8fe); font:inherit; font-size:12px; cursor:pointer; padding:0; }
  .stockv2 .skp-link:hover { text-decoration:underline; }
  .stockv2 .skp-orders-card { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:10px; padding:12px 14px; }
  .stockv2 .skp-orders-sub { font-size:11.5px; color:var(--b2-text-3); margin-top:2px; }
  .stockv2 .skp-orders-count { font-size:20px; font-weight:700; color:var(--b2-text); display:flex; align-items:center; gap:8px; white-space:nowrap; }
  .stockv2 .skp-orders-chev { color:var(--b2-text-3); font-size:16px; }
  .stockv2 .skp-orders-card.skp-cell-clickable:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .skp-orders-empty { color:var(--b2-text-3); font-size:12px; justify-content:flex-start; }
  .stockv2 .skp-suggest { margin:4px 0 8px; padding:12px 14px; border-radius:10px; background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.35); }
  .stockv2 .skp-suggest-applied { background:rgba(34,197,94,0.10); border-color:rgba(34,197,94,0.35); }
  .stockv2 .skp-suggest-head { font-size:13px; font-weight:700; color:var(--b2-text); }
  .stockv2 .skp-suggest-body { font-size:12px; color:var(--b2-text-2, var(--b2-text)); margin-top:5px; line-height:1.45; }
  .stockv2 .skp-suggest-actions { display:flex; align-items:center; gap:12px; margin-top:10px; }
  .stockv2 .skp-suggest-btn { background:#f59e0b; color:#1a1205; border:0; border-radius:7px; font:inherit; font-size:12px; font-weight:700; padding:7px 13px; cursor:pointer; }
  .stockv2 .skp-suggest-btn:hover { filter:brightness(1.08); }
  .stockv2 .skp-suggest-link { background:none; border:0; color:var(--b2-text-3); font:inherit; font-size:12px; cursor:pointer; padding:0; }
  .stockv2 .skp-suggest-link:hover { color:var(--b2-text); text-decoration:underline; }
  /* Customers modal: per-customer share-of-volume bar */
  .stockv2 .skc-share-track { height:4px; border-radius:2px; background:var(--b2-surface-2); margin-top:6px; max-width:320px; overflow:hidden; }
  .stockv2 .skc-share-fill { display:block; height:100%; border-radius:2px; background:#6ea8fe; }
  .stockv2 .inbound-target {
    font-size: 12px;
    color: var(--b2-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .stockv2 .inbound-target strong { color: var(--b2-text); font-weight: 600; }
  .stockv2 .inbound-target.inbound-permanent strong { color: var(--role-permanent-bin); }
  .stockv2 .inbound-target.inbound-outbound        { color: var(--role-outbound); font-weight: 500; }
  .stockv2 .inbound-target.inbound-temp strong     { color: var(--role-temp-bin); }
  .stockv2 .inbound-target.inbound-choose          { color: var(--role-choose-bin); font-style: italic; font-weight: 600; }
  .stockv2 .inbound-target .clickable { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.15); text-underline-offset: 2px; }
  .stockv2 .inbound-target .clickable:hover { text-decoration-color: currentColor; }

  /* Dot cell shared by inbound rows. */
  .stockv2 .dot-cell { width: 18px; padding-right: 4px !important; }

  /* Bin picker modal — opens when "Set →" is clicked on a choose-bin row.
     Reuses the bom-overlay scrim. Self-contained so it doesn't depend on
     the larger bom-modal-* rule set. */
  .bin-picker-modal {
    background: #1a1a1d;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    width: 440px; max-width: calc(100vw - 32px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: #f5f5f7;
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    overflow: hidden;
  }
  .bin-picker-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 16px 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .bin-picker-title {
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.01em;
    color: #f5f5f7;
  }
  .bin-picker-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #a1a1a6;
  }
  .bin-picker-sub strong { color: #ff9f0a; font-weight: 600; }
  .bin-picker-close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: #a1a1a6;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .bin-picker-close:hover { color: #f5f5f7; background: rgba(255,255,255,0.05); }
  .bin-picker-body { padding: 16px 18px; }
  .bin-picker-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6e6e73;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .bin-picker-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    background: #242427;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: #f5f5f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px; font-weight: 600;
    outline: 0;
  }
  .bin-picker-input::placeholder {
    color: #6e6e73;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
  }
  .bin-picker-input:focus { border-color: rgba(255,255,255,0.20); background: #2c2c30; }
  .bin-picker-hint {
    margin-top: 8px;
    font-size: 11px;
    color: #6e6e73;
  }
  .bin-picker-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.20);
  }
  .bin-picker-btn {
    height: 32px;
    padding: 0 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .bin-picker-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #a1a1a6;
  }
  .bin-picker-btn-secondary:hover { background: rgba(255,255,255,0.05); color: #f5f5f7; }
  .bin-picker-btn-primary {
    background: #ffd60a;
    border: 1px solid #ffd60a;
    color: #1a1a1d;
  }
  .bin-picker-btn-primary:hover { background: #ffe066; border-color: #ffe066; }
  .bin-picker-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* ─── Inbound Detail Modal ─────────────────────────────────────────────
     Opens when the user clicks a Production Inbound row. Unifies the four
     action types (permanent / outbound / choose-bin / temp) into one
     detail view with header, summary tiles, bin confirmation, allocation
     breakdown, and an action footer. */
  .ib-modal {
    width: min(1040px, 96vw);
    max-width: none;
    max-height: 92vh;
    display: flex; flex-direction: column;
    background: #1a1a1d;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    color: #f5f5f7;
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  }
  .ib-head {
    padding: 20px 24px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 70%);
    border-bottom: 1px solid var(--b2-hairline);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
  }
  .ib-head-left { min-width: 0; flex: 1; }
  .ib-eyebrow {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--b2-text-3);
  }
  .ib-title-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .ib-title {
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ib-status-pill {
    /* Tier C rounded pill — canonical font 11.5/600/no spacing/no transform.
       Matches .od-badge so modal-header pill vocabulary reads identically. */
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    border: 1px solid transparent;
  }
  .ib-status-pill .ib-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
  }
  .ib-status-green  { background: var(--b2-green-bg); color: var(--role-permanent-bin); border-color: rgba(48,209,88,0.32); }
  .ib-status-green  .ib-status-dot { background: var(--role-permanent-bin); }
  .ib-status-blue   { background: var(--b2-blue-bg);  color: var(--b2-blue);  border-color: var(--b2-blue-border); }
  .ib-status-blue   .ib-status-dot { background: var(--b2-blue); }
  .ib-status-amber  { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: var(--b2-amber-border); }
  .ib-status-amber  .ib-status-dot { background: var(--b2-amber); }
  .ib-status-teal   { background: var(--b2-teal-bg);  color: var(--b2-teal);  border-color: var(--b2-teal-border); }
  .ib-status-teal   .ib-status-dot { background: var(--b2-teal); }
  .ib-meta-row {
    margin-top: 6px;
    font-size: 12.5px; color: var(--b2-text-2);
  }
  .ib-meta-row strong { color: var(--b2-text); font-weight: 600; }
  .ib-meta-row .muted { color: var(--b2-text-3); }
  .ib-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--b2-text-2);
    height: 30px; padding: 0 12px;
    cursor: pointer;
    font: inherit; font-size: 12px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ib-close:hover { background: rgba(255,255,255,0.04); color: var(--b2-text); }

  .ib-body {
    padding: 18px 24px 20px;
    overflow-y: auto;
    background: var(--b2-surface-2);
    display: flex; flex-direction: column; gap: 18px;
    flex: 1;
  }

  /* Summary tiles */
  .ib-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .ib-tile {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .ib-tile-row1 {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--b2-text-3);
    font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  }
  .ib-tile-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--b2-text-3); }
  .ib-tile-num {
    margin-top: 6px;
    font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; color: var(--b2-text);
    line-height: 1.1;
    display: flex; align-items: baseline; gap: 6px;
  }
  .ib-tile-num .muted { color: var(--b2-text-4); font-weight: 600; }
  .ib-tile-unit { font-size: 11px; color: var(--b2-text-3); font-weight: 500; letter-spacing: 0; text-transform: none; }
  .ib-tile-delta { margin-top: 6px; font-size: 11.5px; color: var(--b2-text-3); }
  .ib-tile-delta strong { color: var(--b2-text); font-weight: 600; }
  .ib-tile.green   { background: rgba(48,209,88,0.06);  border-color: rgba(48,209,88,0.22); }
  .ib-tile.green   .ib-tile-dot { background: var(--role-permanent-bin); }
  .ib-tile.green   .ib-tile-row1 { color: var(--role-permanent-bin); }
  .ib-tile.blue    { background: var(--b2-blue-bg);     border-color: var(--b2-blue-border); }
  .ib-tile.blue    .ib-tile-dot { background: var(--b2-blue); }
  .ib-tile.blue    .ib-tile-row1 { color: var(--b2-blue); }
  .ib-tile.amber   { background: var(--b2-amber-bg);    border-color: var(--b2-amber-border); }
  .ib-tile.amber   .ib-tile-dot { background: var(--b2-amber); }
  .ib-tile.amber   .ib-tile-row1 { color: var(--b2-amber); }
  .ib-tile.teal    { background: var(--b2-teal-bg);     border-color: var(--b2-teal-border); }
  .ib-tile.teal    .ib-tile-dot { background: var(--b2-teal); }
  .ib-tile.teal    .ib-tile-row1 { color: var(--b2-teal); }
  .ib-tile.muted   { opacity: 0.85; }
  .ib-tile.muted   .ib-tile-num { color: var(--b2-text-3); }

  /* Bin confirmation panel */
  .ib-panel {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: visible;
  }
  .ib-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .ib-panel-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .ib-panel-title .pt-name { font-size: 13px; font-weight: 600; color: var(--b2-text); }
  .ib-panel-title .pt-count { font-size: 12px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .ib-panel-title .pt-count .num { color: var(--b2-text-2); }
  .ib-bin-panel.unconfirmed.ib-bin-amber { border-color: var(--b2-amber-border); }
  .ib-bin-panel.unconfirmed.ib-bin-teal  { border-color: var(--b2-teal-border); }
  .ib-bin-panel.unconfirmed.ib-bin-green { border-color: rgba(48,209,88,0.28); }
  .ib-bin-panel.confirmed                { border-color: rgba(48,209,88,0.28); }
  .ib-confirmed-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--role-permanent-bin);
  }
  .ib-unconfirmed-tag {
    font-size: 11px; font-weight: 600; color: var(--b2-amber);
  }
  .ib-bin-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    flex-wrap: wrap;
  }
  .ib-bin-input-wrap {
    position: relative;
    min-width: 260px;
  }
  .ib-bin-input {
    width: 100%;
    height: 34px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 8px;
    font: inherit; color: var(--b2-text);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: left;
  }
  .ib-bin-input.empty { color: var(--b2-text-3); font-weight: 500; }
  .ib-bin-input:hover { background: var(--b2-surface-3); }
  .ib-bin-input.open  { border-color: var(--b2-text-3); }
  .ib-bin-input-icon  { color: var(--b2-text-3); display: inline-flex; }
  .ib-bin-input .num  { flex: 1; }
  .ib-bin-caret { color: var(--b2-text-3); font-size: 10px; }
  .ib-bin-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #1a1a1d;
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    padding: 4px;
    display: flex; flex-direction: column; gap: 1px;
    z-index: 10;
  }
  .ib-bin-option {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: none; border-radius: 7px;
    color: var(--b2-text); font: inherit; font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer; text-align: left;
  }
  .ib-bin-option:hover { background: var(--b2-surface-3); }
  .ib-bin-option.selected { color: var(--b2-blue); }
  .ib-bin-opt-tag {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-3);
    padding: 2px 6px; border-radius: 4px;
    background: var(--b2-surface-3);
    border: 1px solid var(--b2-hairline-strong);
    margin-left: auto;
  }
  .ib-bin-option-new {
    border-top: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    margin-top: 2px; padding-top: 10px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ib-bin-new-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 8px;
    color: var(--b2-text); font: inherit;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .ib-bin-new-input:focus { outline: none; border-color: var(--b2-blue); }
  .ib-bin-foot-inline {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--b2-amber);
  }
  .ib-confirm-btn {
    margin-left: auto; white-space: nowrap;
    height: 34px; padding: 0 14px;
    border-radius: 8px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--b2-hairline-strong);
    background: var(--b2-surface-2); color: var(--b2-text);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ib-confirm-btn.primary {
    background: #ffd60a; border-color: #ffd60a; color: #1a1a1d;
  }
  .ib-confirm-btn.primary:hover { background: #ffe066; border-color: #ffe066; }
  .ib-confirm-btn:hover { background: var(--b2-surface-3); }
  .ib-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Allocation panel */
  .ib-alloc-panel { background: var(--b2-surface-1); }
  .ib-alloc-meta { font-size: 11px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .ib-stack {
    display: flex; align-items: stretch;
    height: 10px;
    margin: 14px 18px 8px;
    background: var(--b2-surface-2);
    border-radius: 4px;
    overflow: hidden;
  }
  .ib-stack-seg { display: block; height: 100%; min-width: 2px; }
  .ib-stack-seg.order    { background: var(--b2-blue); }
  .ib-stack-seg.priority { background: var(--b2-red); }
  .ib-stack-seg.surplus  { background: var(--role-permanent-bin); }
  .ib-stack-seg.temp     { background: var(--b2-teal); }
  .ib-stack-seg.choose   { background: var(--b2-amber); }
  .ib-stack-seg + .ib-stack-seg { box-shadow: inset 1px 0 0 var(--b2-surface-1); }
  .ib-stack-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    padding: 0 18px 12px;
    font-size: 11px; color: var(--b2-text-3);
  }
  .ib-stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .ib-sw {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 2px; background: var(--b2-surface-3);
  }
  .ib-sw.order    { background: var(--b2-blue); }
  .ib-sw.priority { background: var(--b2-red); }
  .ib-sw.surplus  { background: var(--role-permanent-bin); }
  .ib-sw.temp     { background: var(--b2-teal); }
  .ib-sw.choose   { background: var(--b2-amber); }

  .ib-alloc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .ib-alloc-tbl th, .ib-alloc-tbl td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .ib-alloc-tbl th {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--b2-text-3);
    background: var(--b2-surface-2);
  }
  .ib-alloc-tbl td.r, .ib-alloc-tbl th.r { text-align: right; }
  .ib-alloc-tbl tr.priority td:first-child { box-shadow: inset 3px 0 0 var(--b2-red); }
  .ib-alloc-tbl tr.ib-surplus-row td:first-child { box-shadow: inset 3px 0 0 var(--role-permanent-bin); }
  .ib-alloc-tbl tr.ib-temp-row    td:first-child { box-shadow: inset 3px 0 0 var(--b2-teal); }
  .ib-alloc-tbl tr.ib-choose-row  td:first-child { box-shadow: inset 3px 0 0 var(--b2-amber); }
  .ib-alloc-tbl tr:last-child td { border-bottom: 0; }

  .ib-dest {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--b2-text); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .ib-dest svg { color: var(--b2-text-3); }
  .ib-row-sub { font-size: 11px; color: var(--b2-text-3); margin-top: 2px; }
  .ib-row-sub.muted { color: var(--b2-text-4); }
  .ib-num-strong { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--b2-text); }

  .ib-inline-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper.
       The .ok and .pending modifiers below intentionally flip to sentence-
       case because they display user-typed content (bin names / SKUs),
       not status labels — leave those alone. */
    display: inline-block;
    font-size: 9.5px; padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.06em; font-weight: 700; text-transform: uppercase;
    vertical-align: middle;
  }
  .ib-inline-badge.crit { background: var(--b2-red-bg); color: var(--b2-red); border: 1px solid var(--b2-red-border); }
  .ib-inline-badge.ok {
    background: var(--b2-green-bg); color: var(--role-permanent-bin);
    border: 1px solid rgba(48,209,88,0.32);
    text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 10.5px;
  }
  .ib-inline-badge.pending {
    background: var(--b2-amber-bg); color: var(--b2-amber);
    border: 1px solid var(--b2-amber-border);
    text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 10.5px;
  }

  /* Footer */
  .ib-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    border-top: 1px solid var(--b2-hairline);
    background: #1a1a1d;
  }
  .ib-footer-summary {
    font-size: 13px; color: var(--b2-text-2);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ib-footer-summary strong { color: var(--b2-text); font-weight: 600; }
  .ib-footer-summary svg { color: var(--b2-text-3); }
  .ib-footer-actions { display: flex; gap: 8px; }
  .ib-btn {
    height: 34px; padding: 0 14px;
    border-radius: 8px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--b2-hairline-strong);
    background: var(--b2-surface-2); color: var(--b2-text);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ib-btn:hover { background: var(--b2-surface-3); }
  .ib-btn.primary {
    background: #ffd60a; border-color: #ffd60a; color: #1a1a1d;
  }
  .ib-btn.primary:hover { background: #ffe066; border-color: #ffe066; }
  .ib-btn:disabled { opacity: 0.45; cursor: not-allowed; }

  @media (max-width: 720px) {
    .ib-tiles { grid-template-columns: 1fr; }
    .ib-bin-row { flex-wrap: wrap; }
    .ib-confirm-btn { margin-left: 0; }
  }

  /* ════════════════════════════════════════════════════════════════════
     Layout edit mode — drag-and-drop panel rearrangement. Each
     rearrangeable section is wrapped in a `.lay-slot`. The wrapper is
     transparent / non-interactive outside edit mode. Inside edit mode
     it shows an outline + drag handle, and clicks on its contents are
     blocked so users only interact with the layout, not the panel
     internals.
     ══════════════════════════════════════════════════════════════════ */
  .lay-slot { position: relative; }
  .lay-handle {
    display: none;
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    background: var(--b2-surface-3);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 6px;
    color: var(--b2-text-2);
    align-items: center; justify-content: center;
    z-index: 5;
    pointer-events: none;
  }
  body.layout-edit .lay-slot {
    outline: 2px dashed var(--b2-hairline-strong);
    outline-offset: 4px;
    border-radius: 14px;
    cursor: grab;
    transition: outline-color 0.12s, opacity 0.12s;
  }
  body.layout-edit .lay-slot:hover { outline-color: var(--role-cta-primary); }
  body.layout-edit .lay-slot:active { cursor: grabbing; }
  body.layout-edit .lay-slot.dragging { opacity: 0.45; cursor: grabbing; }
  body.layout-edit .lay-slot.drop-target {
    outline-color: var(--role-cta-primary);
    outline-style: solid;
    background: var(--role-cta-primary-bg);
  }
  body.layout-edit .lay-handle { display: inline-flex; }
  /* Block all interaction with panel internals while in edit mode so a
     stray click on a search input or sort button doesn't fire. The slot
     itself stays interactive (drag + drop). */
  body.layout-edit .lay-slot > :not(.lay-handle) { pointer-events: none; }
  body.layout-edit .lay-slot { user-select: none; }

  /* Floating edit-mode pill — bottom-right, sticks above all content. */
  .lay-edit-pill {
    position: fixed; bottom: 18px; right: 18px;
    z-index: 9000;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 14px;
    background: var(--b2-surface-1);
    border: 1px solid var(--role-cta-primary);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    font: 13px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--b2-text);
  }
  .lay-edit-pill-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--role-cta-primary);
    box-shadow: 0 0 0 4px var(--role-cta-primary-bg);
    animation: lay-pill-pulse 1.6s ease-in-out infinite;
  }
  @keyframes lay-pill-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
  }
  .lay-edit-pill-label { font-weight: 500; }
  .lay-edit-pill-reset {
    height: 28px; padding: 0 12px;
    background: transparent;
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 999px;
    color: var(--b2-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
  }
  .lay-edit-pill-reset:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  .lay-edit-pill-done {
    height: 28px; padding: 0 12px;
    background: var(--role-cta-primary);
    border: 0; border-radius: 999px;
    color: #1a1a1d;
    font: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer;
  }
  .lay-edit-pill-done:hover { filter: brightness(1.08); }

  /* ════════════════════════════════════════════════════════════════════
     Complete Build modal — opens from Stocking → Being Built rows.
     Compact confirmation modal with three actions: Cancel · Reprint ·
     Complete. Teal hero block to differentiate the in-progress build
     context from the regular "building now" indicators (which are blue).
     ════════════════════════════════════════════════════════════════════ */
  .cb-modal {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 12px;
    width: min(520px, 96vw);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: var(--b2-text);
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .cb-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .cb-eyebrow {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--b2-text-3);
  }
  .cb-title {
    margin-top: 6px;
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--b2-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .cb-sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--b2-text-3);
    max-width: 360px;
    line-height: 1.4;
  }
  .cb-close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text-2);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .cb-close:hover { color: var(--b2-text); background: var(--b2-surface-2); }

  .cb-body {
    padding: 22px 24px;
    background: var(--b2-surface-0);
    display: flex; flex-direction: column; gap: 16px;
  }
  .cb-hero {
    /* Teal palette here — distinguishes the "complete this build" context
       from the regular building-now blue used in Being Built indicators. */
    background: linear-gradient(180deg, var(--b2-teal-bg) 0%, var(--b2-surface-1) 100%);
    border: 1px solid var(--b2-teal-border);
    border-radius: 12px;
    padding: 28px 16px 22px;
    text-align: center;
  }
  .cb-hero-qty {
    font-size: 56px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--b2-teal);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .cb-hero-label {
    margin-top: 8px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--b2-text-3);
  }
  /* Piece B1 — editable "actually built" number. Styled to read like the
     static hero number (.cb-hero-qty) so the field is inline-editable
     without looking like a form control until you focus it. */
  .cb-hero-qty-input {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 2px dashed transparent;
    text-align: center;
    font-size: 56px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--b2-teal);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    padding: 0 0 2px;
    outline: none;
    -moz-appearance: textfield;
  }
  .cb-hero-qty-input::-webkit-outer-spin-button,
  .cb-hero-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .cb-hero-qty-input:hover { border-bottom-color: var(--b2-teal-border); }
  .cb-hero-qty-input:focus { border-bottom-color: var(--b2-teal); }
  .cb-hero-remain {
    margin-top: 8px;
    min-height: 14px;
    font-size: 12px; font-weight: 500;
    color: var(--b2-text-3);
    font-variant-numeric: tabular-nums;
  }
  .cb-hero-remain-warn { color: var(--b2-amber, #d98b2b); font-weight: 600; }

  .cb-context {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
  }
  .cb-context-row {
    display: grid;
    grid-template-columns: 24px 130px 1fr;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .cb-context-row:last-child { border-bottom: 0; }
  .cb-context-ico {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--b2-text-3);
  }
  .cb-context-k {
    font-size: 10.5px; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700;
    color: var(--b2-text-3);
  }
  .cb-context-v {
    color: var(--b2-text); font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  .cb-footer {
    padding: 14px 22px 16px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px;
  }
  .cb-footer-right { display: flex; gap: 8px; }
  .cb-btn {
    height: 34px; padding: 0 14px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text);
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .cb-btn:hover { background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }
  .cb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .cb-btn:disabled:hover { background: var(--b2-surface-2); border-color: var(--b2-hairline); }
  .cb-btn-cancel {
    color: var(--role-critical);
    border-color: var(--role-critical-border);
    background: transparent;
  }
  .cb-btn-cancel:hover {
    background: var(--role-critical-bg);
    border-color: var(--role-critical);
  }
  .cb-btn-primary {
    background: var(--role-cta-primary);
    border-color: var(--role-cta-primary);
    color: #1a1a1d;
    font-weight: 700;
  }
  .cb-btn-primary:hover {
    filter: brightness(1.08);
    background: var(--role-cta-primary);
    border-color: var(--role-cta-primary);
  }

  /* ════════════════════════════════════════════════════════════════════
     Display & Accessibility modal — opens from the avatar dropdown.
     Two top sections: preset selector + per-role color pickers (grouped
     by default, individual via a toggle). Future home for reduced-motion
     and font-size toggles.
     ════════════════════════════════════════════════════════════════════ */
  .disp-modal {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 12px;
    width: 640px; max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: var(--b2-text);
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .disp-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; padding: 16px 20px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    flex-shrink: 0;
  }
  .disp-title {
    font-size: 16px; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--b2-text);
  }
  .disp-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--b2-text-3);
  }
  .disp-close {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text-2);
    font-size: 18px; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
  }
  .disp-close:hover { color: var(--b2-text); background: var(--b2-surface-2); }
  .disp-body {
    padding: 16px 20px 12px;
    overflow-y: auto;
    flex: 1; min-height: 0;
  }
  .disp-section { margin-bottom: 22px; }
  .disp-section:last-child { margin-bottom: 6px; }
  .disp-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  .disp-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--b2-text-3);
  }
  .disp-toggle {
    font-size: 11px; color: var(--b2-text-3);
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
  }
  .disp-toggle input { margin: 0; cursor: pointer; }
  .disp-toggle:hover { color: var(--b2-text-2); }

  /* Preset cards */
  .disp-preset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }
  .disp-preset-card {
    text-align: left;
    padding: 10px 12px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .disp-preset-card:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .disp-preset-card.active {
    border-color: var(--role-cta-primary);
    background: var(--b2-surface-3);
    box-shadow: inset 0 0 0 1px var(--role-cta-primary);
  }
  .disp-preset-name {
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
  }
  .disp-preset-sub {
    margin-top: 3px;
    font-size: 11px; color: var(--b2-text-3);
    line-height: 1.3;
  }
  .disp-preset-swatches {
    display: flex; gap: 3px; margin-top: 8px;
  }
  .disp-preset-swatch {
    width: 14px; height: 14px; border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.08);
  }

  /* Top-level sub-sections within the Colors block (Primary + Calendar).
     Headed with a name + one-line description, then a stack of groups. */
  .disp-subsection {
    margin-bottom: 18px;
  }
  .disp-subsection:last-child { margin-bottom: 0; }
  .disp-subsection-head {
    margin: 6px 0 10px;
    padding: 8px 0;
    border-top: 1px solid var(--b2-hairline);
  }
  .disp-subsection:first-child .disp-subsection-head { border-top: 0; padding-top: 0; }
  .disp-subsection-label {
    display: block;
    font-size: 13px; font-weight: 700;
    color: var(--b2-text);
    letter-spacing: -0.005em;
  }
  .disp-subsection-sub {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--b2-text-3);
    line-height: 1.35;
  }

  /* Mismatch warning — shown under a calendar group's row when the
     user has decoupled its color from the linked primary role. */
  .disp-mismatch {
    padding: 8px 14px 10px;
    background: var(--role-low-stock-bg);
    border-top: 1px solid var(--role-low-stock-border);
    color: var(--role-low-stock);
    font-size: 11.5px;
    line-height: 1.4;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .disp-mismatch strong { font-weight: 700; font-variant-numeric: tabular-nums; }
  .disp-mismatch em { font-style: normal; color: var(--b2-text-2); }
  .disp-mismatch-icon {
    flex: 0 0 12px;
    margin-top: 2px;
    display: inline-flex;
    color: var(--role-low-stock);
  }
  /* Wraps the warning copy as a single flex item so the inline <strong>
     and <em> elements flow naturally instead of each becoming its own
     flex item (which previously stacked the words vertically). */
  .disp-mismatch-text {
    flex: 1; min-width: 0;
  }

  /* Color group rows — grouped view */
  .disp-group {
    background: var(--b2-surface-0);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
  }
  .disp-group-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    gap: 12px;
  }
  .disp-group-info { flex: 1; min-width: 0; }
  .disp-group-name {
    font-size: 13px; font-weight: 600; color: var(--b2-text);
  }
  .disp-group-roles {
    margin-top: 2px;
    font-size: 11px; color: var(--b2-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Individual rows shown when the modal-wide toggle is on */
  .disp-roles { display: none; border-top: 1px solid var(--b2-hairline); }
  .disp-modal.show-individual .disp-roles { display: block; }
  .disp-modal.show-individual .disp-group-row .disp-swatch-btn { display: none; }
  .disp-role-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 14px;
    border-top: 1px solid var(--b2-hairline);
  }
  .disp-role-row:first-child { border-top: 0; }
  .disp-role-name {
    font-size: 12.5px; color: var(--b2-text-2);
  }

  /* Swatch + native color picker. We wrap a hidden <input type="color">
     inside a styled button so the button shows the current color and
     clicking it opens the browser's color picker. */
  .disp-swatch-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 4px 4px 10px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    cursor: pointer;
    font: inherit; color: var(--b2-text-2); font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .disp-swatch-btn:hover { border-color: var(--b2-hairline-strong); color: var(--b2-text); }
  .disp-swatch {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
  }
  .disp-swatch-btn input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    border: 0; padding: 0;
  }
  .disp-warn {
    margin-left: 8px;
    color: var(--role-low-stock);
    font-size: 11px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .disp-warn-icon {
    width: 12px; height: 12px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Footer */
  .disp-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--b2-hairline);
    background: rgba(0,0,0,0.20);
    flex-shrink: 0;
  }
  .disp-footer-status {
    font-size: 11px; color: var(--b2-text-3);
  }
  .disp-footer-actions { display: flex; gap: 8px; }
  .disp-btn {
    height: 32px;
    padding: 0 14px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .disp-btn-secondary {
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
  }
  .disp-btn-secondary:hover { background: var(--b2-surface-2); color: var(--b2-text); }
  .disp-btn-primary {
    background: var(--role-cta-primary);
    border: 1px solid var(--role-cta-primary);
    color: #1a1a1d;
  }
  .disp-btn-primary:hover { filter: brightness(1.08); }
  .disp-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  /* Plan Build button (BOM modal) — yellow accent so users can tell it
     apart from the teal Begin Build at a glance. */
  .bom-plan-btn {
    background: transparent !important;
    color: var(--yellow) !important;
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.45) !important;
  }
  .bom-plan-btn:hover {
    background: rgba(var(--role-cta-primary-rgb),0.10) !important;
    border-color: var(--yellow) !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Order Detail modal — BOM v2 idiom. Opens from row click on Warehouse
     All Open Orders / RTS / inbound, and from packing-list scan paths.
     Self-contained od-* class namespace.
     ══════════════════════════════════════════════════════════════════ */
  .od-modal {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 12px;
    width: min(960px, 96vw);
    max-height: calc(100vh - 64px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: var(--b2-text);
    font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .od-head {
    padding: 18px 22px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
    flex-shrink: 0;
  }
  .od-head-left { flex: 1; min-width: 0; }
  .od-eyebrow {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--b2-text-3);
  }
  .od-title-row {
    display: flex; align-items: center; gap: 12px;
    margin-top: 4px; flex-wrap: wrap;
  }
  .od-title {
    font-size: 26px; font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--b2-text);
    font-variant-numeric: tabular-nums;
  }
  .od-printed {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--role-ready-bg);
    border: 1px solid var(--role-ready-border);
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    color: var(--role-ready);
  }
  .od-printed.dim {
    background: var(--b2-surface-2);
    border-color: var(--b2-hairline);
    color: var(--b2-text-3);
  }
  /* Fulfillment-stage badge — sits next to the order # (where the pack-list
     badge used to be). Reads where the order is in the warehouse pipeline;
     color per stage, pulsing dot. (Claude Design handoff, June 2026.) */
  @keyframes odStagePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
  .od-stage {
    display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
    padding: 4px 12px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; border: 1px solid transparent;
  }
  .od-stage .od-stage-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: odStagePulse 1.8s ease-in-out infinite; }
  .od-stage.awaiting { color: var(--b2-text-3, #9a9c9d); background: rgba(255,255,255,0.05); border-color: var(--b2-hairline, #34373a); }
  .od-stage.building { color: var(--b2-amber, #d98a2b); background: rgba(217,138,43,0.14); border-color: rgba(217,138,43,0.5); }
  .od-stage.kitting  { color: var(--b2-teal, #2bb0c4); background: rgba(17,153,171,0.16); border-color: rgba(17,153,171,0.5); }
  .od-stage.labeling { color: var(--role-cta-primary); background: rgba(var(--b2-yellow-rgb),0.16); border-color: rgba(var(--b2-yellow-rgb),0.5); }
  .od-stage.looms    { color: #b98af0; background: rgba(160,120,230,0.16); border-color: rgba(160,120,230,0.5); }
  .od-stage.packing  { color: #ec5a9b; background: rgba(236,72,153,0.14); border-color: rgba(236,72,153,0.5); }
  .od-stage.shipped  { color: var(--role-ready, #3fb950); background: var(--role-ready-bg, rgba(63,185,80,0.14)); border-color: var(--role-ready-border, rgba(63,185,80,0.42)); }
  .od-meta-row {
    margin-top: 8px;
    font-size: 13px; color: var(--b2-text-2);
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  }
  .od-meta-row.dim { font-size: 11.5px; color: var(--b2-text-3); margin-top: 4px; }
  .od-customer { color: var(--b2-text); font-weight: 600; }
  .od-bc-pill {
    /* BC status is an informational read-out (where the BigCommerce order
       sits in its lifecycle), not an action flag. Neutral gray so the
       Custom / Ship-By / Priority flags read as the real signals. */
    margin-left: 4px; padding: 2px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--b2-text-2);
    border-radius: 4px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .od-close {
    height: 30px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    border-radius: 7px;
    color: var(--b2-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
  }
  .od-close:hover { color: var(--b2-text); background: var(--b2-surface-2); }

  /* Body */
  .od-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1; min-height: 0;
    background: var(--b2-surface-0);
  }

  /* Tile row — 5 tiles base (inbound-detail uses .od-tiles + 4 tiles in this
     grid). Order Detail uses the .od-tiles-6 modifier for the 6-tile layout
     introduced by the FIFO migration (Claimed Elsewhere bucket). */
  .od-tiles {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    margin-bottom: 16px;
  }
  @media (max-width: 900px) {
    .od-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  }
  /* 6-tile variant (Order Detail) — Total · Ready · Claimed Elsewhere ·
     Queued Build · No Stock · Shipped. Breakpoints match the stocking
     system's responsive plan: ≥1280 = 6 cols, 900–1279 = 3+3, <900 = 2+2+2. */
  .od-tiles.od-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  @media (max-width: 1279px) {
    .od-tiles.od-tiles-6 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 899px) {
    .od-tiles.od-tiles-6 { grid-template-columns: repeat(2, 1fr); }
  }
  .od-tile {
    position: relative; padding: 14px 16px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
  }
  .od-tile::before {
    content: ''; position: absolute; inset: 0;
    background: var(--od-tile-bg, linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%));
    pointer-events: none;
  }
  .od-tile > * { position: relative; }
  .od-tile.muted { --od-tile-bg: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 70%); }
  .od-tile.red   { --od-tile-bg: linear-gradient(180deg, var(--role-critical-bg), transparent 70%);     border-color: var(--role-critical-border); }
  .od-tile.amber { --od-tile-bg: linear-gradient(180deg, var(--b2-amber-bg), transparent 70%);         border-color: var(--b2-amber-border); }
  .od-tile.teal  { --od-tile-bg: linear-gradient(180deg, var(--b2-teal-bg), transparent 70%);          border-color: var(--b2-teal-border); }
  .od-tile.blue  { --od-tile-bg: linear-gradient(180deg, var(--role-building-now-bg), transparent 70%); border-color: var(--role-building-now-border); }
  .od-tile.pink  { --od-tile-bg: linear-gradient(180deg, var(--b2-pink-bg), transparent 70%);          border-color: var(--b2-pink-border); }
  .od-tile.green { --od-tile-bg: linear-gradient(180deg, var(--role-ready-bg), transparent 70%);       border-color: var(--role-ready-border); }
  .od-tile.is-dim { opacity: 0.45; }
  .od-tile-row1 {
    display: flex; align-items: center; gap: 8px;
    font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-3);
  }
  .od-tile-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--b2-text-3); }
  .od-tile.red   .od-tile-dot { background: var(--role-critical); box-shadow: 0 0 0 4px var(--role-critical-bg); }
  .od-tile.amber .od-tile-dot { background: var(--b2-amber);      box-shadow: 0 0 0 4px var(--b2-amber-bg); }
  .od-tile.teal  .od-tile-dot { background: var(--b2-teal);       box-shadow: 0 0 0 4px var(--b2-teal-bg); }
  .od-tile.blue  .od-tile-dot { background: var(--role-building-now); box-shadow: 0 0 0 4px var(--role-building-now-bg); }
  .od-tile.pink  .od-tile-dot { background: var(--b2-pink);          box-shadow: 0 0 0 4px var(--b2-pink-bg); }
  .od-tile.green .od-tile-dot { background: var(--role-ready);       box-shadow: 0 0 0 4px var(--role-ready-bg); }
  .od-tile.red   .od-tile-row1 { color: var(--role-critical); }
  .od-tile.amber .od-tile-row1 { color: var(--b2-amber); }
  /* a11y: --b2-teal #1199ab against teal-tinted bg was ~2.8:1 — bumped
     to the brighter high-contrast variant for ≥4.5:1 on the small label
     text. The dot/border keep using the base teal so the visual accent
     reads the same. */
  .od-tile.teal  .od-tile-row1 { color: #5dc4d8; }
  .od-tile.blue  .od-tile-row1 { color: var(--role-building-now); }
  /* a11y: base --b2-pink (#ec4899) is ~3.0:1 against the pink-tinted bg —
     bumped to the brighter step for ≥4.5:1 on the small label text. Mirrors
     the teal label bump. The dot/border keep the base pink so the visual
     accent reads the same. */
  .od-tile.pink  .od-tile-row1 { color: #ff8fbe; }
  .od-tile.green .od-tile-row1 { color: var(--role-ready); }
  .od-tile-num {
    margin-top: 8px;
    font-size: 28px; font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--b2-text);
    font-variant-numeric: tabular-nums;
  }
  .od-tile-delta { margin-top: 4px; font-size: 11.5px; color: var(--b2-text-3); }
  .od-tile-delta strong { color: var(--b2-text-2); font-weight: 600; }

  /* Status row — badges left, toggles right */
  .od-status-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
  }
  .od-badges { display: flex; flex-wrap: wrap; gap: 6px; }
  .od-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    border: 1px solid transparent;
  }
  .od-badge-ok      { background: var(--role-ready-bg);          border-color: var(--role-ready-border);          color: var(--role-ready); }
  /* Order-level "Reallocation Available" / "Partial · N reallocatable" —
     surfaces when readyFIFO < total AND units are physically present but
     claimed by an earlier/higher-priority order. Pink, paired with the
     arrow-right-left glyph so it visually rhymes with the per-line ⇄. */
  .od-badge-realloc { background: var(--b2-pink-bg);             border-color: var(--b2-pink-border);             color: #ff8fbe; }
  .od-badge-realloc svg { color: #ff8fbe; }
  /* Badge color vocabulary (unified with the AOO inline-badge palette):
     Custom = teal, Ship-By = blue, Priority = red, Orphan = amber.
     Artwork status and BC status are *informational read-outs*, not action
     flags, so they get a neutral gray treatment that lets the real flags
     stand out. */
  .od-badge-custom  { background: var(--role-custom-bg);         border-color: var(--role-custom-border);         color: var(--role-custom); }
  /* Customization done — flips from teal "Required" to green once the order
     has been through Labeling (orderIsLabelsApplied). */
  .od-badge-custom-applied { background: var(--role-ready-bg);   border-color: var(--role-ready-border);          color: var(--role-ready); }
  .od-badge-artwork { background: rgba(255,255,255,0.06);        border-color: rgba(255,255,255,0.18);             color: var(--b2-text-2); }
  .od-badge-shipby  { background: var(--role-ship-by-date-bg);   border-color: var(--role-ship-by-date-border);   color: var(--role-ship-by-date); }
  .od-badge-partial { background: var(--b2-amber-bg);            border-color: var(--b2-amber-border);             color: var(--b2-amber); }
  /* VIP customer — gold (Elite Core brand), star glyph. */
  .od-badge-vip     { background: rgba(212,175,55,0.16);         border-color: rgba(212,175,55,0.6);              color: #e8c352; }
  .od-badge-vip svg { color: #e8c352; }
  /* Ship-By marker present but no actual date resolved from the
     synced 🧪 Ship By field — the date was never selected in the
     CoreCentral "Green Base." Red treatment flags it as a data gap
     needing upstream attention, distinct from a normal blue ship-by. */
  .od-badge-shipby-missing { background: rgba(255,59,48,0.08);    border-color: rgba(255,59,48,0.4);                color: var(--role-critical); }
  /* Ship Complete requested — the customer asked for the whole order in one
     shipment (detected in free-text Customer Notes). Indigo, package glyph;
     reads as a fulfillment constraint, distinct from amber "Partial". Pairs
     with the locked Partially Ship toggle below. */
  .od-badge-shipcomplete { background: rgba(99,102,241,0.14);     border-color: rgba(99,102,241,0.5);               color: #a5b4fc; }
  .od-badge-shipcomplete svg { color: #a5b4fc; }

  /* Toggle chips */
  .od-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
  .od-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 8px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
  }
  .od-toggle:hover { border-color: var(--b2-hairline-strong); }
  .od-toggle input { position: absolute; opacity: 0; pointer-events: none; }
  /* a11y: native checkbox inside is opacity:0 — keyboard focus on the
     input gets a ring on the wrapping label instead so sighted keyboard
     users can see what's focused. */
  .od-toggle:focus-within {
    outline: 2px solid var(--yellow, #ffd60a);
    outline-offset: 2px;
  }
  .od-toggle-switch {
    flex: 0 0 28px; width: 28px; height: 16px;
    background: var(--b2-surface-3); border-radius: 999px;
    position: relative;
    transition: background 0.18s;
  }
  .od-toggle-switch > span {
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px;
    background: var(--b2-text-3);
    border-radius: 50%;
    transition: transform 0.18s, background 0.18s;
  }
  .od-toggle.on .od-toggle-switch { background: var(--b2-amber-bg); }
  .od-toggle.on .od-toggle-switch > span { transform: translateX(12px); background: var(--b2-amber); }
  .od-toggle.on { border-color: var(--b2-amber-border); background: var(--b2-amber-bg); }
  .od-toggle.priority.on .od-toggle-switch { background: var(--role-critical-bg); }
  .od-toggle.priority.on .od-toggle-switch > span { background: var(--role-critical); }
  .od-toggle.priority.on { border-color: var(--role-critical-border); background: var(--role-critical-bg); }
  .od-toggle-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .od-toggle-label {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--b2-text);
  }
  .od-toggle.on .od-toggle-label { color: var(--b2-amber); }
  .od-toggle.priority.on .od-toggle-label { color: var(--role-critical); }
  /* Locked off — Customer Notes ask to ship complete, so a partial wave can't
     be armed against the request. Greyed + not-allowed; the disabled input
     means clicking the label can't flip it. Hover is neutralized. */
  .od-toggle.locked { opacity: 0.6; cursor: not-allowed; }
  .od-toggle.locked:hover { border-color: var(--b2-hairline); }
  .od-toggle.locked .od-toggle-label { color: var(--b2-text-3); }
  .od-toggle-hint {
    font-size: 10.5px; color: var(--b2-text-3);
    font-weight: 500;
  }
  .od-toggle-hint.locked { color: #a5b4fc; }

  /* Notes row */
  .od-notes-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 16px;
  }
  @media (max-width: 720px) { .od-notes-row { grid-template-columns: 1fr; } }
  .od-note {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .od-note-staff {
    background: var(--b2-amber-bg);
    border-color: var(--b2-amber-border);
  }
  .od-note-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--b2-text-3);
    margin-bottom: 6px;
  }
  .od-note-staff .od-note-label { color: var(--b2-amber); }
  .od-note-content {
    font-size: 12.5px; color: var(--b2-text-2);
    line-height: 1.45; white-space: pre-line;
  }
  .od-note-staff .od-note-content { color: var(--b2-text); }

  /* Line Items panel */
  .od-items {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .od-items-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .od-items-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 11.5px; letter-spacing: 0.10em; text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-3);
  }
  .od-items-title .pt-name { color: var(--b2-text); letter-spacing: 0.04em; }
  .od-items-title .pt-count {
    color: var(--b2-text-3); font-size: 11px; letter-spacing: 0.08em;
    padding-left: 8px; border-left: 1px solid var(--b2-hairline);
  }
  .od-items-actions { display: flex; gap: 6px; }
  .od-act-btn {
    height: 28px; padding: 0 10px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text-2);
    font: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .od-act-btn:hover { color: var(--b2-text); background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }

  /* The legacy .bom-table renders inside .od-items now; nudge a couple
     of paddings to fit the panel chrome. */
  .od-items .bom-table { width: 100%; border-collapse: collapse; }
  .od-items .bom-table thead th {
    font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 600;
    padding: 10px 14px; text-align: left;
    background: var(--b2-surface-1);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .od-items .bom-table thead th.r { text-align: right; }
  .od-items .bom-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    font-size: 13px;
    color: var(--b2-text);
    vertical-align: top;
  }
  .od-items .bom-table tbody tr:last-child td { border-bottom: 0; }
  .od-items .bom-table tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }

  /* Footer — allocation summary + actions */
  .od-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    flex-shrink: 0;
    flex-wrap: wrap;
  }
  .od-footer-summary { font-size: 12px; }
  .od-footer-summary strong { font-weight: 600; }
  .od-footer-actions { display: flex; gap: 8px; }
  .od-btn {
    height: 34px; padding: 0 14px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text);
    font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .od-btn:hover { background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }
  .od-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .od-btn:disabled:hover { background: var(--b2-surface-2); border-color: var(--b2-hairline); }
  .od-btn-primary {
    background: var(--role-cta-primary);
    border-color: var(--role-cta-primary);
    color: #1a1a1d;
    font-weight: 700;
  }
  .od-btn-primary:hover {
    filter: brightness(1.08);
    background: var(--role-cta-primary);
    border-color: var(--role-cta-primary);
  }

  /* ─── Order Detail footer: Shipping split-button + Notes ─── */
  .od-footer-actions { flex-wrap: wrap; align-items: center; }
  .od-split { position: relative; display: inline-flex; }
  .od-split-main .od-split-caret { transition: transform 0.15s ease; }
  .od-split-main[aria-expanded="true"] .od-split-caret { transform: rotate(180deg); }
  .od-split-menu {
    position: absolute; bottom: calc(100% + 6px); right: 0;
    min-width: 210px; z-index: 60;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    display: none; flex-direction: column; gap: 2px;
  }
  .od-split-menu.open { display: flex; }
  .od-split-item {
    width: 100%; text-align: left;
    height: 34px; padding: 0 10px;
    background: transparent; border: 0; border-radius: 7px;
    color: var(--b2-text); font: inherit; font-size: 13px; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  }
  .od-split-item:hover { background: var(--b2-surface-3); }
  .od-split-item:disabled { opacity: 0.4; cursor: not-allowed; }
  .od-split-item:disabled:hover { background: transparent; }
  .od-split-item svg { flex: 0 0 auto; opacity: 0.85; }
  .od-split-item-primary { color: var(--role-cta-primary); font-weight: 700; }
  /* Notes button pip — shown when the order has a saved note. */
  .od-notes-btn { position: relative; }
  .od-note-pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--role-cta-primary, #ffd029);
    display: inline-block; margin-left: 2px;
    box-shadow: 0 0 0 2px var(--b2-surface-2);
  }
  /* Notes modal (layers over the Order Detail modal) */
  .od-notes-modal {
    width: min(560px, 94vw);
    background: var(--b2-surface-1, #1a1a1d);
    border: 1px solid var(--b2-hairline-strong, rgba(255,255,255,0.16));
    border-radius: 16px;
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px); transition: transform 0.2s ease;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  }
  .bom-overlay.visible .od-notes-modal { transform: translateY(0); }
  .od-notes-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 18px 20px 12px; border-bottom: 1px solid var(--b2-hairline);
  }
  .od-notes-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b2-text-dim, #8a8a93); }
  .od-notes-title { font-size: 18px; font-weight: 700; color: var(--b2-text); margin-top: 2px; }
  .od-notes-close { background: transparent; border: 0; color: var(--b2-text-dim, #8a8a93); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }
  .od-notes-close:hover { color: var(--b2-text); }
  .od-notes-body { padding: 16px 20px; }
  .od-notes-textarea {
    width: 100%; min-height: 180px; resize: vertical;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    border-radius: 10px; padding: 12px 14px; box-sizing: border-box;
    color: var(--b2-text); font: inherit; font-size: 14px; line-height: 1.5;
  }
  .od-notes-textarea:focus { outline: none; border-color: var(--role-cta-primary); }
  .od-notes-meta { font-size: 11px; color: var(--b2-text-dim, #8a8a93); margin-top: 8px; }
  .od-notes-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px 18px; border-top: 1px solid var(--b2-hairline);
  }

  /* ─── INSPECTION PLAN ─── */
  .inspection-plan-section {
    background: rgba(var(--role-cta-primary-rgb),0.05);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.20);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
  }
  .inspection-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
  }
  .inspection-plan-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yellow);
  }
  .inspection-plan-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .inspection-plan-stat {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
  }
  .inspection-plan-stat strong {
    color: var(--white);
    font-weight: 800;
    margin-right: 3px;
  }
  .inspection-plan-stat.on-track {
    color: var(--status-good);
  }
  .inspection-plan-stat.behind {
    color: var(--role-critical);
  }
  .inspection-plan-table-wrap {
    overflow-x: auto;
  }
  .inspection-plan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .inspection-plan-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .inspection-plan-table thead th.r {
    text-align: right;
  }
  .inspection-plan-row {
    cursor: pointer;
    transition: background 0.15s;
  }
  .inspection-plan-row:hover {
    background: rgba(var(--role-cta-primary-rgb),0.08);
  }
  .inspection-plan-row td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
  }
  .inspection-plan-row td.r {
    text-align: right;
  }
  .inspection-plan-row td.ip-sku {
    font-weight: 700;
    color: var(--white);
  }
  .inspection-plan-row td.ip-today {
    color: var(--yellow);
    font-weight: 800;
    font-size: 13px;
  }
  .ip-cta {
    color: var(--yellow);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .ip-backlog {
    color: var(--role-critical);
    font-weight: 800;
  }
  .ip-on-track {
    color: rgba(255,255,255,0.3);
    font-weight: 600;
  }
  .ip-override-tag {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  /* Aggregation indicator on a BOM row whose component appeared multiple
     times in the source BOM (e.g. 5 cables of the same length in a feeder
     set). The row's per-unit, requested, and after-build columns reflect
     the aggregated total, not any single source row. */
  .bom-rows-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* ─── CRITICAL INSPECTIONS SECTION ───
     Surfaces SP-PD SKUs where pending order demand has exceeded the
     forecast-driven inspection cadence. Kevin's pipeline writes the
     critical qty; the dashboard reads it and renders here. Visual
     mirrors Today's Inspection Plan but in red urgency tones — sits
     directly above the Plan section so all inspection-related signals
     stack together (Critical → Plan → forecast cards). */
  .critical-inspection-section {
    background: rgba(var(--role-critical-rgb),0.04);
    border: 1px solid rgba(var(--role-critical-rgb),0.25);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
  }
  .critical-inspection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
  }
  .critical-inspection-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .critical-inspection-summary {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
  }
  .critical-inspection-summary .ci-stat strong {
    color: var(--role-critical);
    font-weight: 800;
  }
  .critical-inspection-table-wrap {
    overflow-x: auto;
  }
  .critical-inspection-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .critical-inspection-table thead th {
    text-align: left;
    padding: 8px 10px;
    color: rgba(255,255,255,0.45);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(var(--role-critical-rgb),0.18);
  }
  .critical-inspection-table thead th.r {
    text-align: right;
  }
  .critical-inspection-row {
    cursor: pointer;
    transition: background 0.12s ease;
  }
  .critical-inspection-row:hover {
    background: rgba(var(--role-critical-rgb),0.07);
  }
  .critical-inspection-row td {
    padding: 9px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .critical-inspection-row td.r {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .critical-inspection-row td.ci-sku {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
  }
  .critical-inspection-row td.ci-qty {
    font-weight: 800;
    color: var(--role-critical);
    font-size: 13px;
  }
  .critical-inspection-row td.ci-orders {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
  }
  .critical-inspection-row td.ci-cta {
    color: var(--role-critical);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  /* ─── CRITICAL OVERVIEW CARD ─── */
  .critical-overview-card {
    background: rgba(var(--role-critical-rgb),0.04);
    border: 1px solid rgba(var(--role-critical-rgb),0.15);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 0 0 rgba(var(--role-critical-rgb),0.2);
  }
  .critical-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--role-critical-rgb),0.1);
  }
  .critical-overview-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .critical-overview-skus {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  /* ─── CRITICAL FAMILY GROUPS ─── */
  /* Each family gets a collapsible row inside Critical Builds. Header shows
     family name, SKU count, total critical units, and a "Build all" button.
     Click anywhere on the header (except the button) toggles expansion. */
  .crit-family-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .crit-family-group {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(var(--role-critical-rgb),0.10);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .crit-family-group.expanded {
    border-color: rgba(var(--role-critical-rgb),0.22);
  }
  .crit-family-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
  }
  .crit-family-header:hover {
    background: rgba(var(--role-critical-rgb),0.05);
  }
  .crit-family-arrow {
    display: inline-block;
    transition: transform 0.2s;
    color: rgba(var(--role-critical-rgb),0.7);
    font-size: 12px;
    width: 10px;
  }
  .crit-family-group.expanded .crit-family-arrow {
    transform: rotate(90deg);
  }
  .crit-family-name {
    font-weight: 800;
    color: var(--white);
    font-size: 14px;
    letter-spacing: 0.02em;
  }
  .crit-family-count {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    flex: 1;
    letter-spacing: 0.02em;
  }
  .crit-family-count .crit-family-count-units {
    color: var(--role-critical);
    font-weight: 700;
  }
  .crit-family-buildall {
    background: rgba(var(--role-critical-rgb),0.10);
    border: 1px solid rgba(var(--role-critical-rgb),0.35);
    color: var(--role-critical);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .crit-family-buildall:hover {
    background: rgba(var(--role-critical-rgb),0.18);
    border-color: rgba(var(--role-critical-rgb),0.55);
  }
  .crit-family-body {
    display: none;
    padding: 0 12px 12px 12px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  .crit-family-group.expanded .crit-family-body {
    display: grid;
  }
  .critical-overview-sku {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(var(--role-critical-rgb),0.12);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .critical-overview-sku:hover {
    background: rgba(var(--role-critical-rgb),0.08);
    border-color: rgba(var(--role-critical-rgb),0.25);
  }
  .critical-overview-sku-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
  }
  .critical-overview-sku-detail {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
  }
  .critical-overview-sku-qty {
    font-size: 12px;
    font-weight: 700;
    color: var(--role-critical);
  }
  .critical-overview-sku-time {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
  }
  .critical-overview-sku-cta {
    font-size: 10px;
    font-weight: 700;
    color: var(--role-critical);
  }
  .stocking-req-card {
    flex: 1;
    min-width: 140px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px 24px;
    text-align: center;
  }
  .stocking-req-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--yellow);
    line-height: 1;
  }
  .stocking-req-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-top: 6px;
  }

  /* ─── BOM MODAL ─── */
  .bom-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .bom-overlay.visible {
    opacity: 1;
  }
  .bom-modal {
    background: var(--dark-gray);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px;
    transform: translateY(12px);
    transition: transform 0.2s ease;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  }
  .bom-overlay.visible .bom-modal {
    transform: translateY(0);
  }
  .bom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .bom-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
  }
  .bom-modal-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    margin-top: 4px;
  }
  .bom-close {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
  }
  .bom-close:hover {
    background: rgba(255,255,255,0.06);
    color: var(--white);
    border-color: rgba(255,255,255,0.2);
  }
  /* ─── STOCKING VIEW v2 (REDESIGN) ───
     Density-list page implementation. Same BOM v2 token vocabulary so the
     page reads as part of the same family. Scoped entirely to .stockv2 so
     no rule leaks into other dashboard views.
     Restrained color: red = critical only, yellow = CTA only, amber = build,
     blue = active-on-bench, teal = inspection/info, everything else gray. */
  .stockv2 {
    /* Palette tokens + role bindings now live on :root so user
       preferences propagate. .stockv2 just sets typography + chrome. */
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    color: var(--b2-text);
    padding-bottom: 60px;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
  }
  .stockv2 * { box-sizing: border-box; }
  .stockv2 .num { font-variant-numeric: tabular-nums; }
  /* Top bar */
  .stockv2-top {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px;
    /* Breathing room below the sticky app shell — same 22px the design
       spec lists for `.app-shell + .page-top`. Applied here so every
       stockv2-based page (Warehouse, Calendar, Stocking) gets consistent
       spacing without depending on the breadcrumb being visible. */
    margin-top: 22px;
    margin-bottom: 22px;
  }
  .stockv2-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
  }
  .stockv2-title {
    margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
  }
  .stockv2-sub { margin-top: 6px; color: var(--b2-text-2); font-size: 13px; }
  .stockv2-tools { display: flex; gap: 10px; align-items: center; }

  /* ─── Audit Log page (Phase 3) ──────────────────────────────────────
     Admin-only standalone page. Filter bar across the top, paged table
     of events below. Row click expands into an inline detail accordion
     with the full JSON payload. */
  .audit-page { padding: 24px 36px; max-width: 1400px; }
  .audit-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; }
  .audit-head-tools { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
  .audit-clear-btn { background: transparent; color: var(--b2-text-3); }
  .audit-clear-btn:hover { color: var(--b2-text); }

  .audit-filters {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
  }
  .audit-filter-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px;
  }
  @media (max-width: 900px) {
    .audit-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .audit-filter {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
  }
  .audit-filter input, .audit-filter select {
    height: 32px; padding: 0 8px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text);
    font: inherit;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
  }
  /* Replace the native select chevron — Chrome's default sits flush
     against the right edge and is too thick on dark backgrounds. Use
     a Lucide-style chevron-down SVG with breathing room on either side. */
  .audit-filter select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
  }
  .audit-filter input:focus, .audit-filter select:focus {
    outline: 2px solid var(--b2-blue);
    outline-offset: -1px;
    border-color: transparent;
  }
  /* Native date inputs render their calendar picker in light mode by
     default, which turns the indicator near-black on our dark surfaces.
     `color-scheme: dark` swaps the WebKit/Blink UA palette so the
     indicator + popup match the rest of the app. */
  .audit-filter input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
  }
  .audit-filter input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.7;
    cursor: pointer;
  }
  .audit-filter input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
  }

  .audit-body {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
  }
  .audit-status {
    padding: 40px; text-align: center;
    color: var(--b2-text-3);
    font-size: 13px;
  }
  .audit-status.audit-error {
    color: var(--role-critical);
    font-weight: 500;
  }
  .audit-pager {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    font-size: 12px;
  }
  .audit-pager-nav { display: flex; align-items: center; gap: 4px; }
  /* Pager buttons — the global .panel-pager-btn rule is scoped to
     `.stockv2`, which the audit page is not inside, so style them
     directly here. */
  .audit-pager .panel-pager-btn {
    height: 24px; min-width: 24px; padding: 0 8px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    color: var(--b2-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .audit-pager .panel-pager-btn:hover:not(:disabled) {
    background: var(--b2-surface-3); color: var(--b2-text);
  }
  .audit-pager .panel-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  /* Refresh button icon — inline Lucide refresh-cw, sized to match
     button text. */
  .audit-refresh-icon {
    width: 14px; height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
  }

  .audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .audit-table thead th {
    text-align: left;
    padding: 10px 12px;
    background: var(--b2-surface-2);
    color: var(--b2-text-3);
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--b2-hairline);
    position: sticky; top: 0; z-index: 1;
  }
  .audit-table thead th.r { text-align: right; }
  .audit-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--b2-hairline);
    vertical-align: middle;
  }
  .audit-table tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .audit-row { cursor: pointer; transition: background 0.08s; }
  .audit-row:hover { background: var(--b2-surface-2); }
  .audit-row.is-open { background: var(--b2-surface-2); }
  .audit-row-warn  .audit-td-event { font-weight: 600; }
  .audit-row-warn  { background: rgba(255, 159, 28, 0.04); }
  .audit-row-error { background: rgba(255, 59, 48, 0.06); }

  .audit-td-time { color: var(--b2-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .audit-td-user { color: var(--b2-text); font-weight: 500; }
  .audit-td-source { color: var(--b2-text-3); text-transform: capitalize; }
  .audit-td-msg { color: var(--b2-text-2); }
  .audit-td-entity { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--b2-text); }
  .audit-event-pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px; font-weight: 600;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
  }
  .audit-event-pill.audit-cat-order { border-color: rgba(0,122,255,0.4); color: var(--b2-blue); background: rgba(0,122,255,0.06); }
  .audit-event-pill.audit-cat-build { border-color: rgba(255,159,28,0.4); color: var(--b2-amber); background: rgba(255,159,28,0.06); }
  .audit-event-pill.audit-cat-stock { border-color: rgba(255,59,48,0.4); color: var(--role-critical); background: rgba(255,59,48,0.06); }

  /* Burst-grouping chrome — N events of the same (event_type, user, source)
     within the same minute collapse into one visual row with a × N count
     chip and a caret. Click expands child rows below with a left-rail indent. */
  .audit-group-count {
    display: inline-flex; align-items: center;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .audit-group-caret {
    margin-left: 6px;
    color: var(--b2-text-3);
    vertical-align: -1px;
    transition: transform 0.15s ease;
  }
  .audit-row.audit-group-row { cursor: pointer; }
  .audit-row.audit-group-row.is-expanded {
    background: var(--b2-surface-2);
  }
  .audit-row.audit-group-row.is-expanded .audit-group-caret { color: var(--b2-text); }
  .audit-group-msg-hint {
    color: var(--b2-text-3);
    font-style: italic;
    font-size: 12px;
  }
  /* Child rows inside an expanded group — subtle inset rail on the first
     column so they read as nested without overwhelming the row chrome.
     Time column gets a slightly muted color to push the group head's
     timestamp forward as the canonical reference. */
  .audit-row.audit-row-child td:first-child {
    box-shadow: inset 3px 0 0 var(--b2-pink-border, rgba(239,93,168,0.4));
    padding-left: 16px;
    color: var(--b2-text-3);
  }
  .audit-row.audit-row-child .audit-td-event {
    /* Slight dim on the pill so the group head still pops as the
       summary anchor, but the child SKU/order is still legible. */
    opacity: 0.92;
  }
  .audit-detail-row.audit-row-child > td {
    box-shadow: inset 3px 0 0 var(--b2-pink-border, rgba(239,93,168,0.4));
  }

  .audit-detail-row td { background: var(--b2-surface-2); padding: 14px 18px; cursor: default; border-bottom: 1px solid var(--b2-hairline); }
  .audit-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  @media (max-width: 900px) {
    .audit-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .audit-detail-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
    display: block; margin-bottom: 3px;
  }
  .audit-detail-mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--b2-text);
    word-break: break-all;
  }
  .audit-detail-json {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--b2-text-2);
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre;
  }

  /* ─── Phase 4: scoped audit timelines ─────────────────────────────
     Reusable vertical timeline used by the Order modal "Audit" tab,
     the SKU Lookup "view audit" affordance, and the matrix-row Per-SKU
     modal. Layout: dot + connector line on the left, event meta + msg
     on the right. */
  .audit-tl { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px; }
  .audit-tl-row {
    position: relative;
    padding-left: 22px;
  }
  .audit-tl-row::before {
    content: ''; position: absolute;
    left: 5px; top: 14px; bottom: -16px;
    width: 1px; background: var(--b2-hairline);
  }
  .audit-tl-row:last-child::before { display: none; }
  .audit-tl-dot {
    position: absolute; left: 0; top: 5px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--b2-surface-0);
    border: 2px solid var(--b2-text-3);
  }
  .audit-tl-cat-order .audit-tl-dot { border-color: var(--b2-blue); }
  .audit-tl-cat-build .audit-tl-dot { border-color: var(--b2-amber); }
  .audit-tl-cat-stock .audit-tl-dot { border-color: var(--role-critical); }
  .audit-tl-warn  .audit-tl-dot { border-color: var(--b2-amber); background: rgba(255,159,28,0.22); }
  .audit-tl-error .audit-tl-dot { border-color: var(--role-critical); background: rgba(255,59,48,0.22); }
  .audit-tl-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
    margin-bottom: 3px;
  }
  .audit-tl-event { font-weight: 600; font-size: 13.5px; color: var(--b2-text); }
  .audit-tl-when {
    font-size: 11px; color: var(--b2-text-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; flex: 0 0 auto;
  }
  .audit-tl-meta {
    font-size: 12px; color: var(--b2-text-2);
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  }
  .audit-tl-sep { color: var(--b2-text-3); }
  .audit-tl-user { color: var(--b2-text); font-weight: 500; }
  .audit-tl-source { text-transform: capitalize; }
  .audit-tl-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--b2-text); }
  .audit-tl-msg {
    font-size: 12.5px; color: var(--b2-text-2);
    margin-top: 5px; line-height: 1.4;
  }
  .audit-tl-empty {
    padding: 40px 20px; text-align: center;
    color: var(--b2-text-3);
    font-size: 13px;
  }
  .audit-tl-empty.audit-tl-error { color: var(--role-critical); }

  /* Order Detail modal — tab strip between head + body. The Audit tab
     is admin-only; the dispatcher in openOrderDetail injects its
     `style="display:none"` for non-admins. */
  .od-tabs {
    display: flex; gap: 4px;
    padding: 0 22px;
    background: var(--b2-surface-1);
    border-bottom: 1px solid var(--b2-hairline);
    flex-shrink: 0;
  }
  .od-tab {
    padding: 10px 14px;
    background: transparent; border: none;
    color: var(--b2-text-3);
    font: inherit; font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
  }
  .od-tab:hover { color: var(--b2-text); }
  .od-tab.is-active {
    color: var(--b2-text);
    border-bottom-color: var(--b2-blue);
  }

  /* SKU Lookup rows become clickable when the user is admin (open the
     per-SKU audit timeline). Non-admins see the existing styling
     unchanged because the class isn't applied. */
  .skl-tbl tbody tr.skl-row-clickable { cursor: pointer; }
  .skl-tbl tbody tr.skl-row-clickable:hover td { background: var(--b2-surface-2); }
  /* Yellow left-rail + revealed chevron signal "this row drills into a profile". */
  .skl-tbl tbody tr.skl-row-clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--b2-yellow); }
  .skl-tbl tbody tr.skl-row-clickable:hover .skl-chev { opacity: 1; transform: translateX(0); }
  /* Buttons */
  .stockv2-btn {
    height: 36px; padding: 0 14px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    border-radius: 10px; color: var(--b2-text); font: inherit; font-weight: 500;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  }
  .stockv2-btn:hover { background: var(--b2-surface-3); }
  .stockv2-btn-primary {
    background: var(--role-cta-primary); color: #1a1a1d; border-color: transparent;
    font-weight: 700;
  }
  /* Re-assert the CTA background on hover — the neutral .stockv2-btn:hover
     swaps in a grey surface, which would otherwise darken the yellow primary
     button (same specificity, defined earlier, so its background still won). */
  .stockv2-btn-primary:hover { background: var(--role-cta-primary); filter: brightness(1.08); }
  .stockv2-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
  /* RTS Ship button + Mark reconciled button — both turn green on hover
     to reinforce the "complete this step" action language. Specificity
     locked higher than the neutral .stockv2-btn:hover so the green tint
     wins. */
  .stockv2-btn.rts-ship-btn:hover,
  .stockv2-btn.recon-mark-btn:hover {
    background: var(--role-ready-bg);
    color: var(--role-ready);
    border-color: var(--role-ready-border);
  }
  /* Tiles */
  .stockv2-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    margin-bottom: 22px;
  }
  /* Five-tile variant — used by the Warehouse view when the Fully
     Blocked tile is split into separate "Waiting on Build" and
     "Waiting on Parts" tiles. Falls back to three columns on narrow
     viewports so cards don't squish. */
  .stockv2-tiles.stockv2-tiles-5 { grid-template-columns: repeat(5, 1fr); }
  @media (max-width: 1280px) {
    .stockv2-tiles.stockv2-tiles-5 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .stockv2-tiles.stockv2-tiles-5 { grid-template-columns: repeat(2, 1fr); }
  }
  /* Six-tile variant — Logistics view after Awaiting Artwork was added.
     Same responsive fall-backs as the 5-tile row. */
  .stockv2-tiles.stockv2-tiles-6 { grid-template-columns: repeat(6, 1fr); }
  @media (max-width: 1280px) {
    .stockv2-tiles.stockv2-tiles-6 { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 760px) {
    .stockv2-tiles.stockv2-tiles-6 { grid-template-columns: repeat(2, 1fr); }
  }
  /* Seven-tile variant — Logistics view after the Looms tile was added. */
  .stockv2-tiles.stockv2-tiles-7 { grid-template-columns: repeat(7, 1fr); }
  @media (max-width: 1280px) {
    .stockv2-tiles.stockv2-tiles-7 { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 760px) {
    .stockv2-tiles.stockv2-tiles-7 { grid-template-columns: repeat(2, 1fr); }
  }
  /* Looms panel — sub-section headers separating "Needs BAOs" from
     "In Build". Quiet uppercase label inside the panel body. */
  .loom-subhead {
    padding: 8px 14px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--b2-text-2);
    background: var(--b2-surface-2);
    border-top: 1px solid var(--b2-hairline);
    border-bottom: 1px solid var(--b2-hairline);
  }

  /* Kitting tab strip — replaces the long vertical scroll between the
     Pull Queue / Awaiting Build / Looms / Coming Soon sections. */
  .stockv2 .kit-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--b2-hairline);
    margin-bottom: 16px;
  }
  .stockv2 .kit-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    background: transparent; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--b2-text-3);
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s;
  }
  .stockv2 .kit-tab:hover { color: var(--b2-text); }
  .stockv2 .kit-tab.is-active {
    color: var(--b2-text);
    border-bottom-color: var(--b2-blue);
  }
  .stockv2 .kit-tab-count {
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 1px 7px; border-radius: 999px;
    background: var(--b2-surface-2);
    color: var(--b2-text-2);
  }
  .stockv2 .kit-tab.is-active .kit-tab-count {
    background: rgba(0,122,255,0.14); color: var(--b2-blue);
  }
  /* Change pip — small dot flagging a tab whose contents changed since
     it was last viewed. */
  .stockv2 .kit-tab-pip {
    position: absolute; top: 7px; right: 7px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--role-needs-build, #ff9f1c);
    box-shadow: 0 0 0 2px var(--b2-surface-0, #0b0b0c);
  }
  .stockv2-tile {
    position: relative; padding: 16px 18px 16px;
    border-radius: 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    overflow: hidden;
  }
  /* Freshness "Updating…" state — dims the held-over number and pulses a small
     label so a mid-refresh value never reads as the confirmed current count. */
  .stockv2-tile.is-updating .stockv2-tile-num .num { opacity: 0.4; }
  .stockv2-tile-updating {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--b2-text-3); margin-left: 8px;
    animation: stockv2TilePulse 1.3s ease-in-out infinite;
  }
  @keyframes stockv2TilePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
  .stockv2-tile.clickable {
    cursor: pointer;
    transition: border-color 120ms, transform 120ms;
  }
  .stockv2-tile.clickable:hover { border-color: var(--b2-hairline-strong); transform: translateY(-1px); }
  .stockv2-tile.clickable:active { transform: translateY(0); }
  .stockv2-tile::before {
    content: ""; position: absolute; inset: 0;
    background: var(--stockv2-tile-bg, linear-gradient(180deg, rgba(255,255,255,0.03), transparent 70%));
    pointer-events: none;
  }
  .stockv2-tile > * { position: relative; }
  .stockv2-tile.red    { --stockv2-tile-bg: linear-gradient(180deg, var(--role-critical-bg), transparent 70%);  border-color: var(--role-critical-border); }
  .stockv2-tile.amber  { --stockv2-tile-bg: linear-gradient(180deg, var(--b2-amber-bg), transparent 70%); border-color: var(--role-low-stock-border); }
  .stockv2-tile.blue   { --stockv2-tile-bg: linear-gradient(180deg, var(--b2-blue-bg), transparent 70%);  border-color: var(--b2-blue-border); }
  .stockv2-tile.teal   { --stockv2-tile-bg: linear-gradient(180deg, var(--b2-teal-bg), transparent 70%);  border-color: var(--b2-teal-border); }
  .stockv2-tile.pink   { --stockv2-tile-bg: linear-gradient(180deg, var(--b2-pink-bg), transparent 70%);  border-color: var(--b2-pink-border); }
  .stockv2-tile.green  { --stockv2-tile-bg: linear-gradient(180deg, var(--role-ready-bg), transparent 70%); border-color: var(--role-ready-border); }
  .stockv2-tile-row1 {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600; color: var(--b2-text-2);
  }
  .stockv2-tile.red   .stockv2-tile-row1 { color: #ff8a82; }
  .stockv2-tile.amber .stockv2-tile-row1 { color: #ffc472; }
  .stockv2-tile.blue  .stockv2-tile-row1 { color: #6cb1ff; }
  .stockv2-tile.teal  .stockv2-tile-row1 { color: #5fc8d8; }
  .stockv2-tile.pink  .stockv2-tile-row1 { color: var(--b2-pink); }
  .stockv2-tile.green .stockv2-tile-row1 { color: var(--role-ready); }
  /* Default dot — visible even when the tile has no tone class.
     Previously the dot only got a background via .red / .amber / .blue
     / etc. variants, so a tone-less tile (e.g. "Coming Soon") rendered
     an invisible 7px gap where the dot should be. Neutral gray gives
     informational/pending tiles a sensible default that the tone
     variants below still override. */
  .stockv2-tile-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--b2-text-3);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.05);
  }
  .stockv2-tile.red   .stockv2-tile-dot { background: var(--role-critical); box-shadow: 0 0 0 4px var(--role-critical-bg); }
  .stockv2-tile.amber .stockv2-tile-dot { background: var(--b2-amber); box-shadow: 0 0 0 4px var(--b2-amber-bg); }
  .stockv2-tile.blue  .stockv2-tile-dot { background: var(--b2-blue); box-shadow: 0 0 0 4px var(--b2-blue-bg); }
  .stockv2-tile.teal  .stockv2-tile-dot { background: var(--b2-teal); box-shadow: 0 0 0 4px var(--b2-teal-bg); }
  .stockv2-tile.pink  .stockv2-tile-dot { background: var(--b2-pink); box-shadow: 0 0 0 4px var(--b2-pink-bg); }
  .stockv2-tile.green .stockv2-tile-dot { background: var(--role-ready); box-shadow: 0 0 0 4px var(--role-ready-bg); }
  .stockv2-tile-num {
    margin-top: 10px;
    font-size: 36px; font-weight: 600; letter-spacing: -0.03em;
    color: var(--b2-text);
    display: flex; align-items: baseline; gap: 8px;
    font-variant-numeric: tabular-nums;
  }
  .stockv2-tile-unit { font-size: 13px; color: var(--b2-text-3); font-weight: 500; letter-spacing: 0; }
  .stockv2-tile-delta { margin-top: 6px; font-size: 12px; color: var(--b2-text-3); }
  .stockv2-tile-delta strong { color: var(--b2-text-2); font-weight: 600; }
  .stockv2-tile-progress {
    margin-top: 12px; height: 4px;
    background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden;
  }
  .stockv2-tile-progress > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--role-low-stock);
  }
  .stockv2-tile.red .stockv2-tile-progress > span { background: var(--role-critical); }
  .stockv2-tile.teal .stockv2-tile-progress > span { background: var(--b2-teal); }
  /* Panel */
  .stockv2-panel {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 14px;
    overflow: hidden;
  }
  .stockv2-panel-head {
    padding: 14px 18px 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2-panel-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 600;
  }
  .stockv2-panel-title .pt-name { color: var(--b2-text); letter-spacing: 0.04em; }
  .stockv2-panel-title .pt-count {
    color: var(--b2-text-3); font-size: 11px; letter-spacing: 0.08em;
    padding-left: 8px; border-left: 1px solid var(--b2-hairline);
  }
  /* Twin section row — always 2 cols. Used by Stocking (Critical/Being
     Built, Fast Ship/Ship-By), Logistics (Inventory Reconciliation/RTS),
     and Warehouse (Pull for Pack/Ready for BIN(s)). data-cols="3" is
     retained as a no-op for any legacy markup that might still set it. */
  .stockv2-section-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
  .stockv2-section-row[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1280px) { .stockv2-section-row[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 900px) { .stockv2-section-row { grid-template-columns: 1fr; } }
  /* Logistics 2×2 bento — four equal-width panels (Inventory
     Reconciliation | Ready to Ship, then Looms | Ship-By). Same treatment as
     the Stocking queue panels: each list paginates at 10 rows and the panel is
     a flex column with a min-height floor + the pager pinned to the bottom
     (margin-top:auto fills the empty space). NO scroll — and min-height (not a
     hard height) means a page of unusually tall rows grows instead of clipping,
     exactly like the Stocking panels. With uniform 10-row pages they all settle
     at the floor, so the 2×2 grid stays consistent. */
  .stockv2-section-row.lgx-bento > .stockv2-panel {
    min-height: 560px;
    display: flex; flex-direction: column;
  }
  .stockv2-section-row.lgx-bento > .stockv2-panel > .stockv2-panel-head { flex-shrink: 0; }
  .stockv2-section-row.lgx-bento > .stockv2-panel > .panel-pager { margin-top: auto; flex-shrink: 0; }
  @media (max-width: 900px) {
    .stockv2-section-row.lgx-bento > .stockv2-panel { min-height: 0; display: block; }
  }
  /* Ship-By Confirmed | Proposed — uses the same .stockv2-seg control as the
     Fast Ship sort toggle. Extra .sb-prop modifier tints the Proposed segment
     amber (pending queue), going red when it's the active tab. */
  .stockv2 .stockv2-seg button .seg-ct { opacity: 0.6; font-weight: 700; margin-left: 4px; }
  .stockv2 .stockv2-seg button.sb-prop { color: var(--b2-amber, #f59e0b); }
  .stockv2 .stockv2-seg button.sb-prop:hover { color: var(--b2-amber, #f59e0b); }
  .stockv2 .stockv2-seg button.sb-prop.active { background: color-mix(in srgb, var(--role-critical, #ef4444) 18%, transparent); color: var(--role-critical, #ef4444); }
  .stockv2 .stockv2-seg button.sb-prop.active .seg-ct { opacity: 0.85; }
  /* RTS slot height match — the inbound slot now stacks two panels
     (Inventory Reconciliation + Ready for BIN(s)) and is the taller
     of the two columns. Grid stretch already makes both slots the same
     height; these rules let RTS's single panel fill that height with
     its pager pinned to the bottom, so the column doesn't read as a
     short panel floating above a void. */
  .stockv2-section-row > .lay-slot[data-section-id="rts"] { display: flex; flex-direction: column; min-height: 0; }
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel > .stockv2-panel-head,
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel > .panel-toolbar { flex: 0 0 auto; }
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel > .open-orders-table-wrap,
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel > .stockv2-tbl { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .stockv2-section-row > .lay-slot[data-section-id="rts"] > .stockv2-panel > .panel-pager { flex: 0 0 auto; margin-top: auto; }
  /* Equal-height shell for the Stocking page twin panels. The grid row
     already sizes every .lay-slot to the tallest sibling; the rules
     below make the inner panel fill that slot, pin the panel head to a
     consistent height so heads in a row align, and flex the body region
     so the pager (when present) parks at the bottom rather than
     immediately below the last row. Applies to ANY .stockv2-section-row
     whose slot contains an .stk-twin-panel — the Stocking page now uses
     two 2-col rows (Critical/Being Built; Fast Ship/Ship-By) instead of
     a single 3-col row, so we don't gate on data-cols anymore. */
  .stockv2 .stockv2-section-row > .lay-slot:has(.stk-twin-panel) { display: flex; flex-direction: column; align-self: stretch; }
  .stockv2 .stockv2-section-row > .lay-slot > .stk-twin-panel { flex: 1; }
  .stockv2 .stk-twin-panel { display: flex; flex-direction: column; min-height: 520px; }
  .stockv2 .stk-twin-panel > .stockv2-panel-head { min-height: 60px; box-sizing: border-box; flex-shrink: 0; }
  .stockv2 .stk-twin-panel > .panel-toolbar { flex-shrink: 0; }
  .stockv2 .stk-twin-panel > .stockv2-tbl { flex: 0 0 auto; }
  .stockv2 .stk-twin-panel > .stk-twin-spacer { flex: 1; min-height: 0; }
  .stockv2 .stk-twin-panel > .empty { flex: 1; display: flex; align-items: center; justify-content: center; }
  .stockv2 .stk-twin-panel > .panel-pager { flex-shrink: 0; margin-top: auto; }
  /* Table */
  .stockv2-tbl { width: 100%; border-collapse: collapse; }
  .stockv2-tbl thead th {
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 600;
    padding: 10px 14px; text-align: left;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2-tbl thead th.r { text-align: right; }
  .stockv2-tbl tbody td {
    padding: 11px 14px; border-bottom: 1px solid var(--b2-hairline);
    font-size: 13px; color: var(--b2-text);
  }
  .stockv2-tbl tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .stockv2-tbl tbody tr:last-child td { border-bottom: 0; }
  .stockv2-tbl tbody tr { cursor: pointer; }
  .stockv2-tbl tbody tr:hover { background: rgba(255,255,255,0.02); }
  .stockv2 .muted { color: var(--b2-text-3); }
  .stockv2-tbl .row-sku { font-weight: 600; letter-spacing: -0.005em; }
  .stockv2-tbl .row-fam { color: var(--b2-text-3); font-size: 11px; margin-top: 2px; }
  /* Gmail-style message preview on a ticket row — muted, clamped to one line. */
  .stockv2-tbl .ad-row-preview {
    color: var(--b2-text-2, var(--b2-text-3)); font-size: 12px; line-height: 1.4;
    margin-top: 3px; max-width: 760px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Order # + inline badges flow as a single wrap-friendly row so multi-
     badge orders (e.g. CUSTOM + SHIP-BY + PRIORITY) don't break layout.
     Resetting the legacy `margin-left: 8px` on .oo-inline-badge inside
     .row-head — the flex `gap` handles spacing now. */
  .stockv2-tbl .row-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  .stockv2-tbl .row-head .oo-inline-badge { margin-left: 0; }
  .stockv2-tbl .qty-crit { color: var(--role-critical); font-weight: 600; }
  .stockv2-tbl .qty-amber { color: var(--role-needs-build); font-weight: 600; }
  .stockv2-tbl .cta { color: var(--b2-text-3); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
  .stockv2-tbl tr:hover .cta { color: var(--role-cta-primary); }
  /* Row status dot */
  .stockv2 .dot-cell { width: 18px; }
  .stockv2 .row-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
  .stockv2 .row-dot.crit  { background: var(--role-critical);     box-shadow: 0 0 0 3px var(--role-critical-bg); }
  .stockv2 .row-dot.build { background: var(--role-queued-build); box-shadow: 0 0 0 3px var(--role-queued-build-bg); }
  .stockv2 .row-dot.bb    { background: var(--role-building-now); box-shadow: 0 0 0 3px var(--role-building-now-bg); }
  .stockv2 .row-dot.ship-by-date { background: var(--role-ship-by-date); box-shadow: 0 0 0 3px var(--role-ship-by-date-bg); }
  .stockv2 .row-dot.wop   { background: var(--b2-text-3); }
  .stockv2 .row-dot.ok    { background: var(--role-ready);         box-shadow: 0 0 0 3px var(--role-ready-bg); }
  .stockv2 .row-dot.forced { background: var(--b2-purple);          box-shadow: 0 0 0 3px var(--b2-purple-bg); }
  /* FORCED pill — surfaces force-build state inline next to a SKU name. */
  .stockv2 .forced-pill {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    background: var(--b2-purple-bg);
    color: var(--b2-purple);
    border: 1px solid var(--b2-purple-border);
    border-radius: 3px;
    font-size: 9px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.4;
  }
  /* Cancel-override affordance on Being Built rows. */
  .stockv2 .forced-cancel {
    margin-left: 10px;
    font-size: 11px;
    color: var(--b2-text-3);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .stockv2 .forced-cancel:hover { color: var(--role-critical); }
  /* Reprint affordance — shares row-action visual weight with cancel. */
  .stockv2 .forced-reprint {
    margin-left: 10px;
    font-size: 11px;
    color: var(--b2-text-3);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .stockv2 .forced-reprint:hover { color: var(--b2-purple); }
  /* Clear Override link inside the BOM modal's purple banner. */
  .bom-modal-v2 .bom2-force-clear {
    margin-left: auto;
    font-size: 11px;
    color: var(--b2-text-3);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
    border: 0;
    padding: 0;
  }
  .bom-modal-v2 .bom2-force-clear:hover { color: var(--role-critical); }
  /* Length chips */
  .stockv2 .lens { display: flex; flex-wrap: wrap; gap: 4px; }
  .stockv2 .len {
    font-variant-numeric: tabular-nums;
    font-size: 11px; font-weight: 600;
    padding: 3px 7px; border-radius: 5px;
    background: var(--b2-surface-3); color: var(--b2-text-2);
    border: 1px solid var(--b2-hairline);
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
  }
  .stockv2 .len:hover { background: var(--b2-surface-1); color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  .stockv2 .len.build { background: var(--role-needs-build-bg); color: var(--role-needs-build); border-color: var(--role-needs-build-border); }
  .stockv2 .len.crit  { background: var(--role-critical-bg);    color: var(--role-critical);    border-color: var(--role-critical-border); }
  .stockv2 .len.wop   { background: var(--b2-surface-1); color: var(--b2-text-3); border-style: dashed; }
  .stockv2 .len-x { font-size: 9px; opacity: 0.6; font-weight: 500; }
  /* Toolbar (search + grouping) */
  .stockv2-toolbar {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px;
    border-bottom: 1px solid var(--b2-hairline);
    background: var(--b2-surface-0);
  }
  .stockv2-search-wrap {
    position: relative; flex: 1; max-width: 480px;
    display: flex; align-items: center;
  }
  .stockv2-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--b2-text-3); pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
  }
  .stockv2-search-icon svg { width: 16px; height: 16px; }
  .stockv2-search {
    flex: 1; height: 32px; padding: 0 28px 0 32px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    border-radius: 8px; color: var(--b2-text); font: inherit; font-size: 13px;
    outline: 0;
  }
  .stockv2-search:focus { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .stockv2-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: var(--b2-text-3);
    width: 22px; height: 22px; border-radius: 4px; cursor: pointer;
  }
  .stockv2-search-clear:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  /* Segmented control */
  .stockv2-seg {
    display: inline-flex; background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline); border-radius: 8px; padding: 2px;
  }
  .stockv2-seg button {
    height: 26px; padding: 0 10px; font-size: 11px; font-weight: 600;
    background: transparent; border: 0; color: var(--b2-text-3); cursor: pointer;
    border-radius: 6px; letter-spacing: 0.04em;
    font-family: inherit;
  }
  .stockv2-seg button.active { background: var(--b2-surface-3); color: var(--b2-text); }
  .stockv2-seg button:hover { color: var(--b2-text); }
  /* Critical-only lens toggle (boolean, distinct from the Cards/Table seg) */
  .stockv2-crit-toggle {
    height: 26px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    border-radius: 8px; border: 1px solid var(--b2-hairline);
    background: var(--b2-surface-2); color: var(--b2-text-3);
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }
  .stockv2-crit-toggle:hover { color: var(--b2-text); }
  .stockv2-crit-toggle.active {
    background: var(--role-critical-bg); color: var(--role-critical);
    border-color: var(--role-critical-border);
  }
  .stockv2-crit-toggle svg { width: 13px; height: 13px; flex: none; }
  /* Family head (grouping section header) */
  .stockv2-fam-head {
    padding: 12px 18px 6px;
    display: flex; align-items: baseline; justify-content: space-between;
    background: var(--b2-surface-0);
    border-top: 1px solid var(--b2-hairline);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2-fam-head-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--b2-text); }
  .stockv2-fam-head-meta { color: var(--b2-text-3); font-size: 11px; letter-spacing: 0.04em; }
  /* Expand caret */
  .stockv2 .exp-cell { width: 22px; padding-right: 0 !important; }
  .stockv2 .exp-caret {
    display: inline-block; color: var(--b2-text-3); font-size: 10px;
    transition: transform 0.12s; transform-origin: center;
  }
  .stockv2 .exp-caret.open { transform: rotate(90deg); color: var(--b2-text); }
  /* Family row + SKU row states */
  .stockv2-tbl tbody tr.fam-row.open td { background: rgba(255,255,255,0.025); }
  .stockv2-tbl tbody tr.fam-row.crit td { background: linear-gradient(90deg, var(--role-critical-bg), transparent 30%); }
  .stockv2-tbl tbody tr.sku-row td {
    background: var(--b2-surface-0);
    border-bottom: 1px solid var(--b2-hairline);
    padding-top: 9px; padding-bottom: 9px;
  }
  .stockv2-tbl tbody tr.sku-row td:nth-child(3) { padding-left: 36px; }
  .stockv2-tbl tbody tr.sku-row.wop td { opacity: 0.78; }
  .stockv2-tbl tbody tr.sku-row.wop:hover td { opacity: 1; }
  .stockv2-tbl tbody tr.sku-row.ok td { opacity: 0.55; }
  .stockv2-tbl tbody tr.sku-row.ok:hover td { opacity: 0.85; }
  /* WOP blocker line */
  .stockv2 .wop-blocker {
    color: var(--b2-text-3); font-size: 11px;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .stockv2 .wop-blocker strong { color: var(--role-low-stock); font-weight: 600; }
  /* Inline badges on family meta line */
  .stockv2 .inline-badge {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 6px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    padding: 1px 5px; border-radius: 3px; vertical-align: 1px;
  }
  .stockv2 .inline-badge svg { flex: 0 0 auto; }
  .stockv2 .inline-badge.crit-badge { background: var(--role-critical-bg); color: var(--role-critical); border: 1px solid var(--role-critical-border); }
  .stockv2 .inline-badge.wop-badge  { background: var(--b2-surface-3); color: var(--b2-text-3); border: 1px solid var(--b2-hairline); }
  /* Status pill in SKU row */
  .stockv2 .status-pill {
    display: inline-block; margin-left: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    padding: 2px 6px; border-radius: 4px; vertical-align: middle;
  }
  .stockv2 .status-pill[data-status="crit"]  { background: var(--role-critical-bg);     color: var(--role-critical); }
  .stockv2 .status-pill[data-status="build"] { background: var(--role-queued-build-bg); color: var(--role-queued-build); }
  .stockv2 .status-pill[data-status="wop"]   { background: var(--b2-surface-3); color: var(--b2-text-3); }
  .stockv2 .status-pill[data-status="ok"]    { background: var(--role-ready-bg);        color: var(--role-ready); }
  /* Hover-reveal row actions */
  .stockv2 .action-cell { width: 1%; white-space: nowrap; padding-right: 14px !important; }
  .stockv2 .row-actions {
    display: inline-flex; gap: 4px;
    opacity: 0; transition: opacity 0.12s;
    justify-content: flex-end;
  }
  .stockv2-tbl tbody tr:hover .row-actions { opacity: 1; }
  .stockv2 .row-act {
    height: 24px; padding: 0 10px;
    font: 600 11px/1 -apple-system, sans-serif; letter-spacing: 0.04em;
    background: var(--b2-surface-2); color: var(--b2-text-2);
    border: 1px solid var(--b2-hairline); border-radius: 6px;
    cursor: pointer; font-family: inherit;
  }
  .stockv2 .row-act:hover { background: var(--b2-surface-3); color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  .stockv2 .row-act.primary { background: var(--role-cta-primary); color: #1a1a1d; border-color: transparent; }
  .stockv2 .row-act.primary:hover { background: #ffe066; }
  /* Empty state */
  .stockv2 .empty {
    padding: 32px; text-align: center; color: var(--b2-text-3); font-size: 13px;
  }
  .stockv2 .empty a { color: var(--role-cta-primary); cursor: pointer; }
  /* Parts shortage pills */
  .stockv2-parts-strip {
    display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap;
  }
  .stockv2-parts-pill {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px;
    background: var(--b2-surface-1); border: 1px solid var(--b2-hairline);
    border-radius: 999px; font-size: 12px; color: var(--b2-text-2); cursor: pointer;
    font-family: inherit;
  }
  .stockv2-parts-pill.urgent {
    background: var(--role-critical-bg); border-color: var(--role-critical-border); color: #ff8a82;
  }
  .stockv2-parts-pill:hover { border-color: var(--b2-hairline-strong); }
  .stockv2-parts-pill .crit-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg);
  }
  /* ─── To Be Built CARD GRID (replaces the density list) ───
     The To Be Built queue is rendered as a 3-column grid of family cards.
     Each card has a title (with optional CRITICAL or N WOP badge), 3-up
     stats (SKUs / units / ft), a Lens chip strip, and Build All / Parts
     actions. The whole card is clickable — opens the first non-stocked
     SKU's BOM modal. */
  .stockv2 .cat-section { margin-bottom: 18px; }
  .stockv2 .cat-section:last-child { margin-bottom: 0; }
  .stockv2 .cat-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 16px 18px 10px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 600;
  }
  .stockv2 .cat-head .cat-name {
    color: var(--b2-text); letter-spacing: 0.06em; font-size: 13px;
  }
  .stockv2 .fam-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    padding: 16px 18px;
  }
  @media (max-width: 1400px) {
    .stockv2 .fam-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1100px) {
    .stockv2 .fam-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .stockv2 .fam-grid { grid-template-columns: 1fr; }
  }
  .stockv2 .fam-card {
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 12px; padding: 14px 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 0.12s, background 0.12s;
    position: relative;
  }
  /* Card body itself isn't clickable — no hover border swap. Hover
     affordance lives on the per-SKU length chips and action buttons. */
  .stockv2 .fam-card.crit { border-color: var(--role-critical-border); }
  .stockv2 .fam-title {
    font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 8px;
    color: var(--b2-text);
  }
  .stockv2 .fam-badge {
    font-size: 9px; letter-spacing: 0.08em; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .stockv2 .fam-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    margin-top: 2px;
  }
  .stockv2 .fam-stat-num {
    font-variant-numeric: tabular-nums;
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1; color: var(--b2-text);
  }
  .stockv2 .fam-stat-label {
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--b2-text-3); margin-top: 4px; font-weight: 500;
  }
  .stockv2 .fam-actions {
    display: flex; gap: 6px; margin-top: auto; padding-top: 8px;
  }
  .stockv2 .fam-act {
    flex: 1; height: 30px; padding: 0 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--role-cta-primary); color: #1a1a1d;
    border: 0; border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
  }
  .stockv2 .fam-act:hover { background: #ffe066; }
  .stockv2 .fam-act.secondary {
    background: transparent; color: var(--b2-text-2);
    border: 1px solid var(--b2-hairline);
    flex: 0 0 auto; padding: 0 12px;
  }
  .stockv2 .fam-act.secondary:hover {
    background: var(--b2-surface-3); color: var(--b2-text);
  }
  /* Move segmented grouping into the panel head — right-aligned. */
  .stockv2-panel-head .stockv2-seg { flex-shrink: 0; }
  /* Group of two seg controls (Group + View) sit side-by-side. */
  .stockv2-panel-head .stockv2-seg-group {
    display: inline-flex; align-items: center; gap: 8px;
    flex-shrink: 0;
  }

  /* ─── TO BE BUILT — TABLE VIEW ───
     Density-list alternative to the family card grid. Family-header
     bands group SKUs; within each family the rows are sorted by
     connector code (shown once per run) then by length. OK SKUs are
     hidden — the queue is only what still needs building. WOP and
     blocked rows render the Build CTA as disabled since they can't be
     built until parts arrive. */
  .stockv2 .ttb-wrap { overflow-x: auto; }
  .stockv2 .ttb-tbl {
    width: 100%; border-collapse: collapse;
    font-family: inherit;
  }
  .stockv2 .ttb-tbl thead th {
    background: var(--b2-surface-1);
    color: var(--b2-text-3);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    position: sticky; top: 0; z-index: 1;
  }
  .stockv2 .ttb-tbl thead th.r { text-align: right; }
  .stockv2 .ttb-tbl thead th.dot-cell { width: 18px; padding-right: 0; }
  .stockv2 .ttb-tbl tbody td {
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    vertical-align: middle;
  }
  .stockv2 .ttb-tbl tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
  .stockv2 .ttb-tbl tbody tr:last-child td { border-bottom: 0; }

  /* Section head — labels the urgency / category band when the
     grouping mode renders sections. */
  .stockv2 .ttb-section-head td {
    padding: 14px 14px 6px;
    background: var(--b2-bg);
    border-bottom: 0;
  }
  .stockv2 .ttb-section-name {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-2);
  }
  .stockv2 .ttb-section-meta {
    margin-left: 10px;
    font-size: 11px; color: var(--b2-text-3);
  }

  /* Family head — quiet band above each family's SKU rows. Crit
     variant gets a red shoulder. */
  .stockv2 .ttb-fam-head td {
    background: var(--b2-surface-2);
    padding: 10px 14px;
    border-top: 1px solid var(--b2-hairline-strong);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .stockv2 .ttb-fam-head.crit td { box-shadow: inset 3px 0 0 var(--role-critical); }
  .stockv2 .ttb-fam-row {
    display: flex; align-items: center; gap: 12px;
    justify-content: space-between;
  }
  .stockv2 .ttb-fam-left {
    display: flex; align-items: center; gap: 8px;
    min-width: 0; flex-wrap: wrap;
  }
  .stockv2 .ttb-fam-name {
    font-size: 14px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--b2-text);
  }
  .stockv2 .ttb-fam-meta {
    font-size: 12px; color: var(--b2-text-3);
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .stockv2 .ttb-fam-meta strong {
    color: var(--b2-text); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .stockv2 .ttb-dot { color: var(--b2-text-4); }
  .stockv2 .ttb-fam-actions {
    display: inline-flex; gap: 6px; flex-shrink: 0;
  }
  /* Compact action button. Used in the TTB family-header band and in
     the Critical Now / Being Built panel heads so all primary Build
     actions share the same shape and behavior. */
  .stockv2 .row-act {
    height: 26px; padding: 0 12px;
    font: 600 11px/1 inherit;
    color: var(--b2-text-2);
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .stockv2 .row-act:hover {
    background: var(--b2-surface-3); color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .stockv2 .row-act.primary {
    background: var(--role-cta-primary, var(--b2-yellow));
    color: #1a1a1d; border-color: transparent; font-weight: 700;
  }
  /* Primary keeps its yellow on hover — only brightens. Specificity
     locked higher than .row-act:hover so the yellow doesn't get
     clobbered by the neutral hover background. */
  .stockv2 .row-act.primary:hover {
    background: var(--role-cta-primary, var(--b2-yellow));
    color: #1a1a1d;
    border-color: transparent;
    filter: brightness(1.08);
  }

  /* Family head — badge variants (mirrors the card head). */
  .stockv2 .ttb-fam-head .inline-badge {
    padding: 2px 6px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    vertical-align: middle;
  }
  .stockv2 .ttb-fam-head .inline-badge.crit-badge {
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .stockv2 .ttb-fam-head .inline-badge.blocked-badge {
    background: transparent; color: var(--b2-pink);
    border: 1px dashed var(--b2-pink-border);
  }
  .stockv2 .ttb-fam-head .inline-badge.wop-badge {
    background: var(--b2-pink-bg); color: var(--b2-pink);
    border: 1px solid var(--b2-pink-border);
  }

  /* Row dots — small status indicators in the leftmost column. */
  .stockv2 .ttb-tbl .row-dot {
    width: 7px; height: 7px; border-radius: 50%;
    display: inline-block;
  }
  .stockv2 .ttb-tbl .row-dot.crit    { background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg); }
  .stockv2 .ttb-tbl .row-dot.blocked { background: var(--b2-pink); box-shadow: 0 0 0 3px var(--b2-pink-bg); }
  .stockv2 .ttb-tbl .row-dot.build   { background: var(--b2-amber); box-shadow: 0 0 0 3px var(--b2-amber-bg); }
  .stockv2 .ttb-tbl .row-dot.wop     { background: var(--b2-pink); opacity: 0.7; }
  .stockv2 .ttb-tbl .row-dot.ok      { background: var(--b2-green); box-shadow: 0 0 0 3px var(--b2-green-bg); }

  /* SKU rows. */
  .stockv2 .ttb-tbl .ttb-sku { cursor: pointer; }
  .stockv2 .ttb-tbl .ttb-sku td { padding: 10px 14px; font-size: 13px; }
  .stockv2 .ttb-tbl .ttb-sku.crit td:first-child { box-shadow: inset 3px 0 0 var(--role-critical); }
  .stockv2 .ttb-tbl .ttb-sku.blocked td:first-child { box-shadow: inset 3px 0 0 var(--b2-pink); }
  .stockv2 .ttb-tbl .ttb-sku.wop td,
  .stockv2 .ttb-tbl .ttb-sku.blocked td { color: var(--b2-text-3); }
  .stockv2 .ttb-tbl .ttb-sku.wop .row-sku,
  .stockv2 .ttb-tbl .ttb-sku.blocked .row-sku { color: var(--b2-text-2); }
  .stockv2 .ttb-tbl .ttb-sku:hover { background: rgba(255,255,255,0.025); }
  .stockv2 .ttb-tbl .ttb-sku:hover .fdm-cta { filter: brightness(1.15); }

  .stockv2 .ttb-sku-cell { min-width: 220px; }
  .stockv2 .ttb-tbl .row-sku { font-weight: 600; letter-spacing: -0.005em; color: var(--b2-text); }
  .stockv2 .ttb-tbl .row-fam {
    color: var(--b2-text-3); font-size: 11px;
    margin-top: 2px;
  }
  .stockv2 .ttb-blocker { color: var(--b2-text-3); }
  .stockv2 .ttb-blocker strong { color: var(--b2-text-2); font-weight: 600; }

  /* Connector column — code on the first row of each run, a thin
     rule on continuation rows so the eye groups them. */
  .stockv2 .ttb-conn-cell {
    width: 1%; white-space: nowrap;
    padding-right: 18px !important;
  }
  .stockv2 .ttb-conn-code {
    display: inline-block; padding: 3px 8px;
    background: var(--b2-surface-3); color: var(--b2-text);
    border: 1px solid var(--b2-hairline);
    border-radius: 4px;
    font-size: 11.5px; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
  }
  .stockv2 .ttb-conn-rule {
    display: inline-block; width: 22px; height: 1px;
    background: var(--b2-hairline-strong);
    vertical-align: middle;
    margin-left: 6px;
  }

  .stockv2 .ttb-len-cell { width: 1%; white-space: nowrap; }
  .stockv2 .ttb-len-cell strong {
    font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--b2-text);
  }
  .stockv2 .ttb-unit {
    color: var(--b2-text-3); font-size: 11px; margin-left: 2px;
    font-weight: 500;
  }

  .stockv2 .ttb-tbl .qty-crit  { color: var(--role-critical); font-weight: 600; }
  .stockv2 .ttb-tbl .qty-amber { color: var(--b2-amber); font-weight: 600; }
  .stockv2 .ttb-tbl .muted     { color: var(--b2-text-3); }

  .stockv2 .ttb-action {
    width: 1%; white-space: nowrap;
    padding-right: 14px !important;
  }

  /* ─── FAM CARD — VARIANT D (hero-dominant, click to open detail) ───
     Replaces the SKUs/units/ft stats row + length chip cloud + Build All /
     Parts actions with a hero-style "units to build" tile and a 4-segment
     density bar. Click anywhere on the card to open the Family Detail
     modal. */
  .stockv2 .fam-card.fam-card-d {
    background: var(--b2-surface-1);
    padding: 16px 16px 14px;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  }
  .stockv2 .fam-card.fam-card-d:hover {
    border-color: var(--b2-hairline-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  }
  .stockv2 .fam-card.fam-card-d.crit:hover {
    border-color: var(--role-critical);
  }
  .stockv2 .fam-card.fam-card-d .fc-head {
    display: flex; align-items: center; gap: 8px;
  }
  .stockv2 .fam-card.fam-card-d .fc-title {
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
    flex: 1; min-width: 0; color: var(--b2-text);
  }
  .stockv2 .fam-card.fam-card-d .fc-head-tags {
    display: inline-flex; gap: 4px; margin-left: auto;
  }
  .stockv2 .fam-card.fam-card-d .inline-badge {
    padding: 2px 6px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    vertical-align: middle;
  }
  .stockv2 .fam-card.fam-card-d .inline-badge.crit-badge {
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  /* Critical-blocked: pink palette + dashed border. Reads as "critical,
     but currently held up by parts" — distinct from solid-red active
     critical and from the filled pink WOP badge. */
  .stockv2 .fam-card.fam-card-d .inline-badge.blocked-badge {
    background: transparent; color: var(--b2-pink);
    border: 1px dashed var(--b2-pink-border);
  }
  .stockv2 .fam-card.fam-card-d .inline-badge.wop-badge {
    background: var(--b2-pink-bg); color: var(--b2-pink);
    border: 1px solid var(--b2-pink-border);
  }
  /* Force-build: purple — user-initiated override, distinct from the
     red (critical), pink (WOP/blocked), and gray (WOP-no-crit) hues
     already in use. */
  .stockv2 .fam-card.fam-card-d .inline-badge.forced-badge {
    background: var(--b2-purple-bg); color: var(--b2-purple);
    border: 1px solid var(--b2-purple-border);
  }
  /* Family card with any forced SKU gets a soft purple outline so the
     override surfaces at a glance on the queue. Doesn't override the
     red border on crit cards — the more urgent state wins visually. */
  .stockv2 .fam-card.fam-card-d.has-forced:not(.crit):not(.blocked-only) {
    border-color: var(--b2-purple-border);
  }
  .stockv2 .fam-card.fam-card-d.has-forced:not(.crit):not(.blocked-only):hover {
    border-color: var(--b2-purple);
  }
  .stockv2 .fam-card.fam-card-d .fc-hero-big {
    background: var(--b2-surface-0);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
  }
  .stockv2 .fam-card.fam-card-d.crit .fc-hero-big {
    border-color: var(--role-critical-border);
    background: linear-gradient(180deg, var(--role-critical-bg) 0%, var(--b2-surface-0) 100%);
  }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-num {
    font-size: 44px; font-weight: 800; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--b2-text);
    line-height: 1;
  }
  .stockv2 .fam-card.fam-card-d.crit .fc-hero-big-num { color: var(--role-critical); }
  /* Blocked-only: no actively-buildable work, only critical demand
     gated by WOP. Full pink treatment so the card reads as "stalled"
     instead of "0 to build". */
  .stockv2 .fam-card.fam-card-d.blocked-only { border-color: var(--b2-pink-border); }
  .stockv2 .fam-card.fam-card-d.blocked-only:hover { border-color: var(--b2-pink); }
  .stockv2 .fam-card.fam-card-d.blocked-only .fc-hero-big {
    border-color: var(--b2-pink-border);
    background: linear-gradient(180deg, var(--b2-pink-bg) 0%, var(--b2-surface-0) 100%);
  }
  .stockv2 .fam-card.fam-card-d.blocked-only .fc-hero-big-num { color: var(--b2-pink); }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-lbl {
    margin-top: 4px;
    font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-3);
  }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-meta {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--b2-hairline);
    display: flex; justify-content: center; gap: 14px;
    font-size: 11px; color: var(--b2-text-3);
  }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-meta strong {
    color: var(--b2-text); font-weight: 700;
    margin-right: 2px; font-variant-numeric: tabular-nums;
  }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-meta .crit strong { color: var(--role-critical); }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-meta .blocked { color: var(--b2-pink); }
  .stockv2 .fam-card.fam-card-d .fc-hero-big-meta .blocked strong { color: var(--b2-pink); }
  .stockv2 .fam-card.fam-card-d .fc-density {
    display: flex; height: 4px;
    border-radius: 999px; overflow: hidden;
    background: var(--b2-surface-2);
  }
  .stockv2 .fam-card.fam-card-d .fc-density-seg { min-width: 0; }
  .stockv2 .fam-card.fam-card-d .fc-density-seg.crit { background: var(--role-critical); }
  /* Blocked-critical lives in the WOP color family (pink) so the density
     bar reads as red→pink→amber→pink→green from most urgent to least.
     Slightly dimmer than the pure WOP segment to suggest "critical-flavor
     WOP" without breaking from the pink family. */
  .stockv2 .fam-card.fam-card-d .fc-density-seg.blocked { background: var(--b2-pink); }
  .stockv2 .fam-card.fam-card-d .fc-density-seg.build { background: var(--b2-amber); }
  .stockv2 .fam-card.fam-card-d .fc-density-seg.wop { background: var(--b2-pink); opacity: 0.6; }
  .stockv2 .fam-card.fam-card-d .fc-density-seg.ok { background: var(--b2-green); opacity: 0.5; }

  /* ─── FAMILY DETAIL MODAL — opened from a fam-card-d click ─── */
  .fdm-modal {
    width: min(960px, 96vw);
    max-width: none;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
    min-height: 0;
  }
  .bom-overlay.visible .fdm-modal { transform: translateY(0); }

  /* ─── SHIP-BY REVIEW MODAL ───
     Mirrors .fdm-modal's containment (max-height + flex column + internal
     scroll) so the header/Close stay pinned and the list scrolls inside
     — without this the modal overflows the viewport. */
  .sbr-modal {
    width: min(760px, 96vw);
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
    min-height: 0;
  }
  .bom-overlay.visible .sbr-modal { transform: translateY(0); }
  .sbr-head {
    flex: 0 0 auto;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--b2-hairline);
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  }
  .sbr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 22px 20px; }

  /* Count badge in the modal title — blue normally, red when anything's missed. */
  .sbr-count-badge {
    display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
    border-radius: 999px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
    background: var(--role-ship-by-date-bg); color: var(--role-ship-by-date);
    border: 1px solid var(--role-ship-by-date-border);
  }
  .sbr-count-badge.crit { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); }

  /* Group header — splits Missed from Upcoming so the two are never confused. */
  .sbr-group { display: flex; align-items: center; gap: 9px; margin: 2px 2px 11px; }
  .sbr-group:not(:first-child) { margin-top: 24px; }
  .sbr-group-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .sbr-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--b2-text-2); }
  .sbr-group-count { font-size: 11px; font-weight: 700; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .sbr-group-rule { flex: 1 1 auto; height: 1px; background: var(--b2-hairline); }
  .sbr-group.missed .sbr-group-dot { background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg); }
  .sbr-group.missed .sbr-group-label { color: var(--role-critical); }
  .sbr-group.upcoming .sbr-group-dot { background: var(--b2-text-4); }

  /* Tier pill — proper badge, not just colored text. */
  .sbr-tier {
    display: inline-flex; align-items: center;
    height: 19px; padding: 0 8px; border-radius: 999px;
    /* NB: do NOT collapse to `font: 700 9.5px/1 inherit` — `inherit` is
       not a valid family token in the font shorthand, so the whole
       declaration is dropped and the size is inherited (oversized). */
    font-family: inherit; font-size: 9.5px; font-weight: 700; line-height: 1;
    letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid transparent;
  }
  .sbr-tier.direct { background: var(--b2-green-bg); color: var(--b2-green); border-color: var(--b2-green-border); }
  .sbr-tier.arrive { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: var(--b2-amber-border); }
  /* Structured SHIP-BY-DATE line option — highest-confidence source. Uses
     the ship-by-date role color so it reads as "the real, explicit date." */
  .sbr-tier.lineitem { background: var(--role-ship-by-date-bg); color: var(--role-ship-by-date); border-color: var(--role-ship-by-date-border); }

  /* Status badge — leads the row. Missed = loud red, Due soon = amber.
     This is the primary "what state is this in" signal, not a dimmed card. */
  .sbr-status {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 9px 0 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid transparent;
  }
  .sbr-status svg { width: 11px; height: 11px; }
  .sbr-status.missed { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); }
  .sbr-status.soon { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: var(--b2-amber-border); }
  /* Informational hint (not an alarm): BC reports the order shipped. Muted so
     it reads as "FYI, verify" rather than urgent. */
  .sbr-status.bcship { background: var(--b2-surface-3); color: var(--b2-text-3); border-color: var(--b2-hairline-strong); }
  .sbr-status.partship { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: var(--b2-amber-border); }

  /* Row card */
  .sbr-rowcard {
    position: relative;
    display: flex; flex-direction: column; gap: 13px;
    border: 1px solid var(--b2-hairline); border-radius: 12px;
    padding: 15px 16px 14px; margin-bottom: 10px;
    background: var(--b2-surface-2);
    transition: border-color .14s ease, background .14s ease;
  }
  .sbr-rowcard:last-child { margin-bottom: 0; }
  /* Missed: calm, not loud — just a red left-rail (+ red date + MISSED pill).
     The old heavy red gradient/border wash made a stack of missed cards scream;
     the rail alone is enough signal (Claude Design rework, June 2026). */
  .sbr-rowcard.missed {
    box-shadow: inset 3px 0 0 var(--role-critical);
    padding-left: 18px;
  }
  .sbr-rowcard.soon { box-shadow: inset 3px 0 0 var(--b2-amber); padding-left: 18px; }

  .sbr-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .sbr-card-main { min-width: 0; }
  .sbr-id { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .sbr-id-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  /* Line-items accordion inside a Ship-By card (modal only). */
  .sbr-lines { margin-top: 10px; border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); padding-top: 8px; }
  .sbr-lines-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 4px 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary, #555); }
  .sbr-lines-toggle:hover { color: var(--text-primary, #111); }
  .sbr-lines-caret { transition: transform 0.15s ease; }
  .sbr-lines-toggle.is-open .sbr-lines-caret { transform: rotate(90deg); }
  .sbr-lines-body { margin-top: 6px; }
  .sbr-lines-msg { font-size: 12px; color: var(--text-secondary, #777); padding: 6px 0; }
  .sbr-lines-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .sbr-lines-table th { text-align: left; font-weight: 600; color: var(--text-secondary, #777); padding: 4px 8px; border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08)); }
  .sbr-lines-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.05)); }
  .sbr-li-sku { font-family: var(--font-mono, ui-monospace, monospace); }
  .sbr-li-num { text-align: right; font-variant-numeric: tabular-nums; }
  .sbr-li-ff { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .sbr-li-ff.awaiting { background: rgba(120,120,120,0.14); color: #555; }
  .sbr-li-ff.marked   { background: rgba(217,144,30,0.16); color: #9a6700; }
  .sbr-li-ff.shipped  { background: rgba(40,150,80,0.16); color: #1f7a44; }
  /* Shipment Planner (Partial Shipments v2) — "shipments as boxes" layout.
     Brand-aligned to the .sbr-modal / .fdm-* shell. Each shipment is its own
     card (truck badge + ship-by date + unit total + stepper line-list); a
     Remaining-to-assign bar pins the key state up top; shipments stack
     vertically so adding one never triggers horizontal scroll. */
  .splan-modal {
    width: min(720px, 96vw);
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1); color: var(--b2-text);
    border: 1px solid var(--b2-hairline-strong); border-radius: 14px;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px); transition: transform 0.2s ease; min-height: 0;
  }
  .bom-overlay.visible .splan-modal { transform: translateY(0); }
  .splan-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 14px; border-bottom: 1px solid var(--b2-hairline); }
  .splan-body { flex: 1 1 auto; min-height: 0; padding: 18px 22px; overflow: auto; }
  .splan-empty { padding: 32px; text-align: center; color: var(--b2-text-3); }
  /* over-assignment banner (hidden unless a line is over-assigned) */
  .splan-banner { padding: 9px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; border: 1px solid var(--role-critical-border); background: var(--role-critical-bg); color: var(--role-critical); }
  /* remaining-to-assign summary */
  .splan-summary { border: 1px solid var(--b2-hairline-strong); border-radius: 12px; background: var(--b2-surface-2); padding: 13px 15px; margin-bottom: 16px; }
  .splan-sum-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
  .splan-sum-h { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b2-text-2); white-space: nowrap; }
  .splan-sum-fig { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .splan-sum-fig small { color: var(--b2-text-3); font-weight: 600; }
  .splan-bar { height: 8px; border-radius: 999px; background: var(--b2-surface-0); overflow: hidden; display: flex; }
  .splan-bar i { display: block; height: 100%; transition: width .18s ease; }
  .splan-bar i.done { background: var(--b2-green); }
  .splan-bar i.rest { background: var(--b2-amber); opacity: .5; }
  .splan-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
  .splan-chips:empty { display: none; }
  .splan-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--b2-amber-bg); border: 1px solid var(--b2-amber-border); color: var(--b2-amber); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .splan-csku { font-family: var(--font-mono, ui-monospace, monospace); }
  .splan-allset { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--b2-green); }
  .splan-allset svg { width: 14px; height: 14px; }
  /* shipment card */
  .splan-card { border: 1px solid var(--b2-hairline-strong); border-radius: 12px; background: var(--b2-surface-2); overflow: hidden; margin-bottom: 12px; }
  .splan-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--b2-surface-3); border-bottom: 1px solid var(--b2-hairline); }
  .splan-card-badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--b2-text); }
  .splan-card-badge svg { color: var(--role-cta-primary); }
  .splan-card-rm { border: none; background: var(--role-critical-bg); color: var(--role-critical); border-radius: 7px; width: 26px; height: 26px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
  .splan-card-rm:hover { filter: brightness(1.18); }
  .splan-card-spacer { flex: 1; }
  .splan-card-tot { font-size: 13px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .splan-card-tot small { color: var(--b2-text-3); font-weight: 600; }
  .splan-card-body { padding: 4px 14px 10px; }
  .splan-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--b2-hairline); }
  .splan-row:last-child { border-bottom: none; }
  .splan-row.zero { opacity: 0.5; }
  .splan-row-sku { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 600; color: var(--b2-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .splan-row-cap { font-size: 11.5px; color: var(--b2-text-3); width: 56px; text-align: right; flex: 0 0 auto; }
  /* ship-by date field */
  .splan-datefield { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 8px; color: var(--b2-text); font-size: 12.5px; font-weight: 600; color-scheme: dark; }
  .splan-datefield svg { width: 13px; height: 13px; color: var(--b2-text-3); flex: 0 0 auto; }
  .splan-datefield input { background: none; border: none; color: var(--b2-text); font: inherit; font-weight: 600; padding: 0; color-scheme: dark; }
  .splan-datefield:focus-within { border-color: var(--role-cta-primary); box-shadow: 0 0 0 2px var(--role-cta-primary-bg); }
  /* qty stepper */
  .splan-stepper { display: inline-flex; align-items: center; height: 32px; border: 1px solid var(--b2-hairline-strong); border-radius: 8px; overflow: hidden; background: var(--b2-surface-1); flex: 0 0 auto; }
  .splan-stepper button { width: 30px; height: 100%; background: none; border: none; color: var(--b2-text-2); cursor: pointer; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
  .splan-stepper button:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  .splan-stepper input { width: 46px; height: 100%; text-align: center; background: none; border: none; color: var(--b2-text); font: inherit; font-size: 13.5px; font-weight: 700; border-left: 1px solid var(--b2-hairline); border-right: 1px solid var(--b2-hairline); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
  .splan-stepper input::-webkit-outer-spin-button, .splan-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .splan-stepper input:focus { outline: none; }
  .splan-stepper.zero input { color: var(--b2-text-3); font-weight: 600; }
  .splan-stepper:focus-within { border-color: var(--role-cta-primary); box-shadow: 0 0 0 2px var(--role-cta-primary-bg); }
  /* add shipment */
  .splan-add { width: 100%; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: none; border: 1px dashed var(--b2-hairline-strong); border-radius: 11px; padding: 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--b2-text-2); transition: border-color .14s ease, color .14s ease; }
  .splan-add:hover { color: var(--b2-text); border-color: var(--role-cta-primary); }
  .splan-add svg { width: 15px; height: 15px; }
  /* footer */
  .splan-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--b2-hairline); background: var(--b2-surface-0); }
  .splan-footnote { margin-right: auto; font-size: 12.5px; color: var(--b2-text-3); }
  .splan-footnote b { color: var(--b2-text); font-variant-numeric: tabular-nums; }
  /* Ship-By panel per-shipment sub-rows (Partial Shipments v2 surfacing). */
  .stockv2-tbl tr.sb-subrow { background: var(--surface-subtle, rgba(0,0,0,0.025)); }
  .stockv2-tbl tr.sb-subrow:hover { background: var(--surface-hover, rgba(0,0,0,0.05)); }
  .sb-sub-label { display: inline-flex; align-items: center; gap: 5px; padding-left: 14px; font-size: 12px; font-weight: 600; color: var(--text-secondary, #666); }
  .sb-sub-label svg { width: 12px; height: 12px; opacity: 0.8; }
  .sbr-approved { display: none; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; color: var(--b2-text-3); }
  .sbr-approved svg { width: 12px; height: 12px; color: var(--b2-text-3); flex: 0 0 12px; }
  .sbr-order { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--b2-text); }
  .sbr-customer { font-size: 12.5px; color: var(--b2-text-2); }

  .sbr-evidence { margin-top: 11px; }
  .sbr-source { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b2-text-4); }
  .sbr-quote { margin-top: 4px; font-size: 12.5px; color: var(--b2-text-2); line-height: 1.45; }
  .sbr-note { margin-top: 9px; display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--b2-amber); line-height: 1.4; }
  .sbr-note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }

  /* Date block — the headline of each card, right-aligned. */
  .sbr-dateblock { flex: 0 0 auto; text-align: right; min-width: 90px; }
  .sbr-date-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--b2-text-3); }
  .sbr-date-big { margin-top: 3px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--b2-text); font-variant-numeric: tabular-nums; line-height: 1.05; }
  .sbr-rowcard.missed .sbr-date-big { color: var(--role-critical); }
  .sbr-date-rel { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .sbr-rowcard.missed .sbr-date-rel { color: var(--role-critical); }
  .sbr-rowcard.soon .sbr-date-rel { color: var(--b2-amber); }
  .sbr-date-current { margin-top: 6px; font-size: 11px; color: var(--b2-text-3); }
  .sbr-date-current s { text-decoration-color: var(--b2-text-4); }

  /* Actions row — divided from the card body. Real classes so :hover works. */
  .sbr-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 13px; border-top: 1px solid var(--b2-hairline); }

  /* Quiet secondary strip — BC link on the left, Request-review on the right.
     Deliberately subordinate (no hard divider, muted color, smaller targets) so
     the eye reads the Approve/Reschedule/Dismiss decisions first and the
     side-actions second (Claude Design rework, June 2026). */
  .sbr-meta-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-top: 11px; }
  .sbr-link {
    appearance: none; background: none; border: 0; padding: 2px 0; margin: 0;
    font: 600 12px/1.3 inherit; color: var(--b2-text-3); cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
    transition: color .12s;
  }
  .sbr-link:hover { color: var(--b2-text); }
  .sbr-link svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: 0.8; }
  .sbr-review { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .sbr-review-label { font-size: 11px; font-weight: 600; color: var(--b2-text-4); }
  .sbr-chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 11px; border-radius: 999px;
    border: 1px solid var(--b2-hairline); background: transparent;
    color: var(--b2-text-3); font: 600 11.5px/1 inherit; cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
  }
  .sbr-chip svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--b2-text-4); transition: color .12s; }
  .sbr-chip:hover { background: var(--b2-surface-3); color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  .sbr-chip:hover svg { color: var(--b2-text-2); }
  .sbr-req-pill {
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
    color: var(--role-ready, #30d158); background: var(--role-ready-bg, rgba(48,209,88,0.14));
    border: 1px solid var(--b2-green-border, rgba(48,209,88,0.30));
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  }
  /* The team's answer pill (outcome-colored), shown to the requester once the
     reviewing team responds. Same shape as .sbr-req-pill. */
  .sbr-resp-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; cursor: help; }
  .sbr-resp-pill.confirmed { color: var(--role-ready, #30d158); background: var(--role-ready-bg, rgba(48,209,88,0.14)); border-color: var(--b2-green-border, rgba(48,209,88,0.30)); }
  .sbr-resp-pill.needs { color: var(--b2-amber, #ff9f0a); background: var(--b2-amber-bg, rgba(255,159,10,0.12)); border-color: var(--b2-amber-border, rgba(255,159,10,0.55)); }
  .sbr-resp-pill.cant { color: var(--role-critical); background: var(--role-critical-bg, rgba(255,59,48,0.10)); border-color: var(--role-critical-border, rgba(255,59,48,0.4)); }
  /* ── Review Requests inbox (Manufacturing / Sales) ───────────────────── */
  .rvi-card { border: 1px solid var(--b2-hairline); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--b2-surface-1); }
  .rvi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .rvi-id { display: flex; flex-direction: column; gap: 2px; }
  .rvi-order { font-size: 14px; font-weight: 700; color: var(--b2-text); }
  .rvi-cust { font-size: 12px; color: var(--b2-text-3); }
  .rvi-dateblock { text-align: right; flex: 0 0 auto; }
  .rvi-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b2-text-4); }
  .rvi-date { font-size: 15px; font-weight: 700; color: var(--b2-text); }
  .rvi-meta { font-size: 11.5px; color: var(--b2-text-3); margin-top: 6px; }
  .rvi-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
  .rvi-btn { appearance: none; border: 1px solid var(--b2-hairline); border-radius: 8px; padding: 6px 11px; background: var(--b2-surface-2); color: var(--b2-text-2); font: 600 12px/1 inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
  .rvi-btn:hover { border-color: var(--b2-hairline-strong); color: var(--b2-text); background: var(--b2-surface-3); }
  .rvi-btn svg { width: 13px; height: 13px; }
  /* Green/red action buttons — match the app's tinted role treatment
     (bg/color/border per role + brightness on hover, like .arriving-badge).
     Re-assert bg on hover so the neutral .rvi-btn:hover doesn't grey them. */
  .rvi-confirm { background: var(--role-ready-bg); color: var(--role-ready); border-color: var(--role-ready-border); }
  .rvi-confirm:hover { background: var(--role-ready-bg); color: var(--role-ready); border-color: var(--role-ready-border); filter: brightness(1.12); }
  .rvi-cant { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); }
  .rvi-cant:hover { background: var(--role-critical-bg); color: var(--role-critical); border-color: var(--role-critical-border); filter: brightness(1.12); }
  .rvi-form { margin-top: 10px; border-top: 1px dashed var(--b2-hairline); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
  .rvi-form[hidden] { display: none; }
  .rvi-form-label { font-size: 11px; font-weight: 600; color: var(--b2-text-4); }
  .rvi-form-date[hidden] { display: none; }
  .rvi-date-input { height: 32px; padding: 0 9px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-radius: 8px; color: var(--b2-text); font: 500 12px inherit; color-scheme: dark; }
  .rvi-note { width: 100%; box-sizing: border-box; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-radius: 8px; color: var(--b2-text); font: 400 12.5px/1.4 inherit; padding: 7px 9px; resize: vertical; }
  .rvi-form-actions { display: flex; gap: 8px; }
  .rvi-send { background: var(--role-cta-primary, #ffd84d); color: #1a1a1d; border-color: transparent; font-weight: 700; }
  .rvi-send:hover { background: var(--role-cta-primary, #ffd84d); filter: brightness(1.08); }
  .sbr-btn {
    height: 32px; padding: 0 13px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    border-radius: 8px; cursor: pointer;
    border: 1px solid var(--b2-hairline);
    background: var(--b2-surface-3); color: var(--b2-text);
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .12s, color .12s, border-color .12s, filter .12s;
  }
  .sbr-btn svg { width: 14px; height: 14px; }
  .sbr-btn:hover { background: var(--b2-hairline); border-color: var(--b2-hairline-strong); }
  .sbr-btn-approve { background: var(--role-cta-primary, #ffd84d); color: #1a1a1d; border: 0; font-weight: 700; }
  /* Re-assert the yellow bg on hover — the element also carries .sbr-btn,
     whose :hover sets a gray surface at equal specificity; without this
     the Approve button turns gray (looks disabled) on hover. */
  .sbr-btn-approve:hover { filter: brightness(1.08); background: var(--role-cta-primary, #ffd84d); }
  .sbr-btn-dismiss { background: transparent; color: var(--b2-text-3); margin-left: auto; border-color: transparent; }
  .sbr-btn-dismiss:hover { color: var(--b2-text); border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  /* Reschedule = date input + button joined into one control. */
  .sbr-resched { display: inline-flex; align-items: center; }
  .sbr-resched .sbr-btn { border-radius: 0 8px 8px 0; }

  /* ── RTS Ship modal (Ship All vs Ship individual items) ───────────────── */
  .rtsship-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .rtsship-actions .stockv2-btn { flex: 1 1 0; justify-content: center; min-width: 150px; height: 42px; font-size: 14px; font-weight: 700; }
  .rtsship-actions .stockv2-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .rtsship-hint, .rtsship-note { font-size: 12px; color: var(--b2-text-3); margin-bottom: 12px; line-height: 1.45; }
  .rtsship-lines { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
  .rtsship-line {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border: 1px solid var(--b2-hairline); border-radius: 8px;
    background: var(--b2-surface-1); cursor: pointer; user-select: none;
  }
  .rtsship-line:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .rtsship-line.is-marked { border-color: var(--role-cta-primary, #ffd84d); background: rgba(255,216,77,0.06); }
  .rtsship-line.is-shipped { opacity: 0.55; cursor: default; }
  .rtsship-line.is-shipped:hover { border-color: var(--b2-hairline); background: var(--b2-surface-1); }
  .rtsship-cb { width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--role-cta-primary, #ffd84d); }
  .rtsship-sku { font-size: 13px; font-weight: 600; color: var(--b2-text); flex: 1 1 auto; word-break: break-word; }
  .rtsship-qty { font-size: 12px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .rtsship-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
  .rtsship-tag.marked { background: rgba(255,216,77,0.16); color: var(--role-cta-primary, #ffd84d); }
  .rtsship-tag.done { background: var(--role-ready-bg, rgba(48,209,88,0.14)); color: var(--role-ready, #30d158); }

  /* ── RTS Ship modal — REDESIGN (Claude Design "Ship Modal Redesign") ───────
     Custom checkboxes, a select-all master + live count, app-native grouped
     rows, and a pinned footer with a single adaptive primary. Scoped to the
     ship overlay so the shared .sbr-modal shell + the Approvals modal are
     untouched. The legacy .rtsship-* rules above still drive the Partial-
     Designate modal. */
  #rtsShipOverlay .sbr-body { padding: 14px 24px 8px; }

  /* Toolbar: select-all master control + count summary */
  .ship-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid var(--b2-hairline);
    margin-bottom: 10px;
  }
  .ship-selectall {
    display: inline-flex; align-items: center; gap: 10px;
    cursor: pointer; user-select: none;
    font-size: 12.5px; font-weight: 600; color: var(--b2-text-2);
    padding: 4px; border-radius: 7px;
    transition: color .12s;
  }
  .ship-selectall:hover { color: var(--b2-text); }
  .ship-count {
    margin-left: auto;
    font-size: 11.5px; font-weight: 600; color: var(--b2-text-3);
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
  }
  .ship-count b { color: var(--b2-text-2); font-weight: 700; }

  /* Custom checkbox — replaces the bright native white box */
  .cb {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px; height: 18px; margin: 0;
    border-radius: 5px;
    border: 1.5px solid var(--b2-hairline-strong);
    background: var(--b2-surface-0);
    cursor: pointer; position: relative;
    transition: background .12s, border-color .12s, box-shadow .12s;
  }
  .cb:hover { border-color: rgba(255,255,255,0.28); }
  .cb:checked { background: var(--role-cta-primary, #ffd84d); border-color: var(--role-cta-primary, #ffd84d); }
  .cb:checked::after {
    content: ""; position: absolute; left: 5px; top: 1.5px;
    width: 5px; height: 9px;
    border: solid #1a1a1d; border-width: 0 2px 2px 0; transform: rotate(43deg);
  }
  .cb:indeterminate { background: var(--role-cta-primary, #ffd84d); border-color: var(--role-cta-primary, #ffd84d); }
  .cb:indeterminate::after {
    content: ""; position: absolute; left: 3px; top: 7.5px;
    width: 10px; height: 2px; border-radius: 1px; background: #1a1a1d;
  }
  .cb:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--b2-yellow-bg, rgba(255,214,10,0.12)); }
  .cb:disabled { cursor: default; opacity: 1; }

  /* Line rows */
  .ship-lines { display: flex; flex-direction: column; gap: 5px; padding-bottom: 6px; }
  .ship-line {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 13px 11px 11px;
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    background: var(--b2-surface-2);
    cursor: pointer; user-select: none; position: relative;
    transition: border-color .12s, background .12s, box-shadow .12s;
  }
  .ship-line:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .ship-line.is-selected {
    border-color: var(--b2-yellow-border, rgba(255,214,10,0.32));
    background: linear-gradient(90deg, var(--b2-yellow-bg, rgba(255,214,10,0.12)), rgba(255,214,10,0.04) 160px), var(--b2-surface-2);
    box-shadow: inset 3px 0 0 var(--role-cta-primary, #ffd84d);
  }
  .ship-sku {
    font-size: 13.5px; font-weight: 600; color: var(--b2-text);
    flex: 1 1 auto; word-break: break-word; letter-spacing: -0.005em;
  }
  .ship-qty {
    font-size: 12.5px; color: var(--b2-text-3);
    font-variant-numeric: tabular-nums; font-weight: 600; flex: 0 0 auto;
  }
  .ship-qty .x { color: var(--b2-text-4); font-weight: 500; }

  /* Per-line "ship N now" quantity control (partial-quantity shipping) */
  .ship-qtywrap { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }
  .ship-qtywrap .ship-qtyinput {
    width: 52px; height: 30px; text-align: center;
    background: var(--b2-surface-0); color: var(--b2-text);
    border: 1px solid var(--b2-hairline-strong); border-radius: 7px;
    font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; appearance: textfield;
    transition: border-color .12s, box-shadow .12s, opacity .12s;
  }
  .ship-qtywrap .ship-qtyinput::-webkit-outer-spin-button,
  .ship-qtywrap .ship-qtyinput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ship-qtywrap .ship-qtyinput:focus { outline: none; border-color: var(--b2-yellow-border, rgba(255,214,10,0.55)); box-shadow: 0 0 0 3px var(--b2-yellow-bg, rgba(255,214,10,0.12)); }
  .ship-qtywrap .ship-qtyinput.over { border-color: var(--role-critical, #ff6b6b); }
  .ship-line:not(.is-selected) .ship-qtywrap .ship-qtyinput { opacity: 0.5; }
  .ship-qtywrap .of { font-size: 12px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ship-qtywrap .of b { color: var(--b2-text-2); font-weight: 700; }
  /* "N of M shipped" progress note under a partially-shipped SKU */
  .ship-shipped-note { display: block; margin-top: 3px; font-size: 10.5px; color: var(--role-ready, #30d158); font-weight: 600; font-variant-numeric: tabular-nums; }

  .ship-tag {
    flex: 0 0 auto;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid transparent;
  }
  .ship-tag svg { width: 10px; height: 10px; }
  .ship-tag.marked { background: var(--b2-yellow-bg, rgba(255,214,10,0.12)); color: var(--role-cta-primary, #ffd84d); border-color: var(--b2-yellow-border, rgba(255,214,10,0.32)); }
  .ship-tag.done { background: var(--role-ready-bg, rgba(48,209,88,0.14)); color: var(--role-ready, #30d158); border-color: var(--b2-green-border, rgba(48,209,88,0.30)); }

  /* Shipped lines: locked, recessed, not re-shippable */
  .ship-line.is-shipped { background: var(--b2-surface-1); cursor: default; opacity: 0.78; }
  .ship-line.is-shipped:hover { border-color: var(--b2-hairline); background: var(--b2-surface-1); }
  .ship-line.is-shipped .ship-sku { color: var(--b2-text-2); }
  .ship-line.is-shipped .cb { background: var(--role-ready-bg, rgba(48,209,88,0.14)); border-color: var(--b2-green-border, rgba(48,209,88,0.30)); }
  .ship-line.is-shipped .cb::after {
    content: ""; position: absolute; left: 5px; top: 1.5px;
    width: 5px; height: 9px; border: solid var(--role-ready, #30d158);
    border-width: 0 2px 2px 0; transform: rotate(43deg);
  }

  .ship-subhead {
    display: flex; align-items: center; gap: 9px;
    margin: 16px 2px 9px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--b2-text-3);
  }
  .ship-subhead .rule { flex: 1 1 auto; height: 1px; background: var(--b2-hairline); }
  .ship-subhead.first { margin-top: 2px; }

  /* Footer action bar — single adaptive primary */
  .sbr-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-0);
  }
  .ship-summary { font-size: 12.5px; color: var(--b2-text-2); line-height: 1.35; }
  .ship-summary b { color: var(--b2-text); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ship-summary .sub { display: block; font-size: 11px; color: var(--b2-text-3); margin-top: 2px; }
  .ship-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .ship-actions .stockv2-btn { height: 38px; }
  .ship-actions .stockv2-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
  /* Date input — color-scheme:dark makes the native calendar glyph + picker
     render light on the dark surface instead of a black-on-dark icon. */
  .sbr-date-input {
    height: 32px; padding: 0 9px;
    background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-right: 0;
    border-radius: 8px 0 0 8px; color: var(--b2-text);
    font-family: inherit; font-size: 12px; font-weight: 500;
    color-scheme: dark;
    transition: border-color .12s, box-shadow .12s;
  }
  .sbr-date-input:focus { outline: none; border-color: var(--role-ship-by-date-border); box-shadow: 0 0 0 3px rgba(var(--b2-blue-rgb),0.12); }

  .fdm-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .fdm-head .page-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600;
  }
  .fdm-title {
    font-size: 24px; font-weight: 700; letter-spacing: -0.02em;
    margin-top: 4px;
    color: var(--b2-text);
    display: flex; align-items: center; gap: 10px;
  }
  .fdm-title .inline-badge {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px;
  }
  .fdm-title .inline-badge.crit-badge {
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .fdm-title .inline-badge.blocked-badge {
    background: transparent; color: var(--b2-pink);
    border: 1px dashed var(--b2-pink-border);
  }
  .fdm-meta { margin-top: 6px; font-size: 13px; color: var(--b2-text-3); }
  .fdm-meta strong { color: var(--b2-text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .fdm-close {
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    height: 32px; padding: 0 12px;
    border-radius: 8px; cursor: pointer;
    font: 500 12px/1 inherit;
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background 0.12s, color 0.12s;
  }
  .fdm-close:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  .fdm-close svg { width: 13px; height: 13px; }
  .fdm-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 20px 24px;
    background: var(--b2-surface-2);
    display: flex; flex-direction: column; gap: 18px;
  }
  .fdm-tiles {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  }
  .fdm-tiles .od-tile-num { font-size: 24px; }
  .fdm-tiles .od-tile-unit {
    margin-left: 6px; font-size: 11px; font-weight: 500;
    color: var(--b2-text-3); letter-spacing: 0.02em;
  }
  .fdm-group {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
  }
  .fdm-group-head {
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 16px;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .fdm-conn-code {
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--b2-surface-3);
    color: var(--b2-text);
    padding: 3px 8px; border-radius: 4px;
  }
  .fdm-conn-label { font-size: 13px; color: var(--b2-text); font-weight: 600; }
  .fdm-conn-count { font-size: 11.5px; color: var(--b2-text-3); margin-left: auto; }
  .fdm-tbl { width: 100%; border-collapse: collapse; }
  .fdm-tbl th, .fdm-tbl td {
    padding: 10px 14px; font-size: 13px; text-align: left;
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-text);
  }
  .fdm-tbl thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--b2-surface-1);
    color: var(--b2-text-3); font-weight: 600;
    font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--b2-hairline);
  }
  /* Scroll long tables within their own section so the modal head/tiles
     stay anchored. Sticky table headers keep column labels visible while
     the rows scroll. flex-shrink: 0 stops the parent flex column from
     squashing sections down to thead-only height when many groups stack
     (e.g. a family with 30+ connector options). */
  .fdm-group { max-height: 56vh; overflow: auto; flex-shrink: 0; }
  .fdm-tbl th.r, .fdm-tbl td.r { text-align: right; }
  .fdm-tbl tbody tr:last-child td { border-bottom: 0; }
  .fdm-tbl tbody tr.crit td:first-child { box-shadow: inset 2px 0 0 var(--role-critical); }
  .fdm-tbl tbody tr.blocked td:first-child { box-shadow: inset 2px 0 0 var(--b2-pink); }
  .fdm-tbl .num { font-variant-numeric: tabular-nums; }
  .fdm-tbl .muted { color: var(--b2-text-3); }
  .fdm-pill {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
    letter-spacing: 0.02em;
    display: inline-block;
  }
  .fdm-pill.crit { background: var(--role-critical-bg); color: var(--role-critical); border: 1px solid var(--role-critical-border); }
  /* Blocked-critical: pink text on transparent fill with dashed border,
     matching the card's blocked-badge treatment. WOP is filled pink. */
  .fdm-pill.blocked {
    background: transparent; color: var(--b2-pink);
    border: 1px dashed var(--b2-pink-border);
    padding: 2px 7px;
  }
  .fdm-pill.build { background: var(--b2-amber-bg); color: var(--b2-amber); border: 1px solid var(--b2-amber-border); }
  .fdm-pill.wop   { background: var(--b2-pink-bg);  color: var(--b2-pink);  border: 1px solid var(--b2-pink-border); }
  .fdm-pill.ok    { background: var(--b2-green-bg); color: var(--b2-green); border: 1px solid var(--b2-green-border); }
  /* Force-build pill — paired alongside the regular status pill on
     rows that have an active override. Tooltip shows the reason. */
  .fdm-pill.forced {
    background: var(--b2-purple-bg); color: var(--b2-purple);
    border: 1px solid var(--b2-purple-border);
    margin-left: 4px;
  }
  /* Force-build modal-header badge — same purple language. */
  .fdm-title .inline-badge.forced-badge {
    background: var(--b2-purple-bg); color: var(--b2-purple);
    border: 1px solid var(--b2-purple-border);
  }
  /* Row treatment for force-built SKUs in the family detail table —
     purple left shoulder, mirrors the red/crit and pink/blocked
     shoulders so the override reads at a glance. */
  .fdm-tbl tbody tr.forced td:first-child { box-shadow: inset 2px 0 0 var(--b2-purple); }
  .fdm-cta {
    font-size: 11px; font-weight: 700;
    color: var(--role-cta-primary, var(--b2-yellow, #ffd84d));
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: pointer;
  }
  .fdm-cta:hover { filter: brightness(1.15); }
  /* Disabled variant for blocked / WOP rows — same shape and footprint
     as the active CTA so columns don't shift, but muted and unclickable. */
  .fdm-cta-disabled {
    font-size: 11px; font-weight: 700;
    color: var(--b2-text-3);
    letter-spacing: 0.04em; text-transform: uppercase;
    cursor: not-allowed; opacity: 0.5;
  }
  .fdm-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px;
  }
  .fdm-footer .muted strong { color: var(--b2-text); font-weight: 600; font-variant-numeric: tabular-nums; }
  .fdm-footer .btn {
    height: 32px; padding: 0 14px;
    font: 600 12px/1 inherit;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    border-radius: 8px; cursor: pointer;
  }
  .fdm-footer .btn:hover { background: var(--b2-surface-3); }
  .fdm-footer .btn.btn-primary {
    background: var(--role-cta-primary, #ffd84d);
    color: #1a1a1d; border: 0; font-weight: 700;
  }
  .fdm-footer .btn.btn-primary:hover { filter: brightness(1.08); }
  .fdm-footer .btn.btn-primary[disabled],
  .fdm-footer .btn.btn-primary:disabled {
    background: var(--b2-surface-2);
    color: var(--b2-text-3);
    border: 1px solid var(--b2-hairline);
    cursor: not-allowed;
    filter: none;
    opacity: 1;
    font-weight: 600;
  }
  .fdm-footer .btn.btn-primary[disabled]:hover,
  .fdm-footer .btn.btn-primary:disabled:hover {
    background: var(--b2-surface-2);
    filter: none;
  }

  /* Reprint Last Batch — sits in the FDM header beside Close, same
     visual language as the Build All modal's reprint button. */
  .fdm-reprint {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; margin-right: 8px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text-2);
    font: 600 12px inherit;
    cursor: pointer;
    transition: all 0.14s;
  }
  .fdm-reprint:hover {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-3);
  }

  /* Toolbar host — wraps the FDM toolbar in a parent that carries the
     .ba-modal-v2 class so all the existing .ba2-* control styles
     (search/filter/sort/chips/tally) apply without duplication. The
     host itself is layout-neutral. */
  .fdm-toolbar-host {
    padding: 0 22px 6px;
  }

  /* Checkbox column — left of Length. The leading vertical accent
     (red for critical, pink for blocked, purple for forced) stays on
     td:first-child so it hugs the row's left edge cleanly regardless
     of whether the family has length variants. With the checkbox cell
     now occupying #1, the accent runs along the checkbox column edge. */
  .fdm-tbl th.fdm-check-cell, .fdm-tbl td.fdm-check-cell {
    width: 34px; padding-right: 0; padding-left: 14px; text-align: center;
  }
  /* Fixed table layout so every column gets an equal share of the row
     after the checkbox column's 34px is subtracted. Auto-layout was
     letting the long SKU strings dominate (or, when stretched, push
     everything to the right edge). With fixed-layout, the SKU/QTY/
     Status/Build columns each take the same width and the content
     within each cell aligns according to its own text-align rule. */
  .fdm-tbl { table-layout: fixed; }
  .fdm-tbl th.r, .fdm-tbl td.r { white-space: nowrap; }
  .fdm-tbl td .fdm-pill { white-space: nowrap; }
  /* SKU strings can overflow long names (e.g. PROCAT6A-S-EE-150); clip
     the cell instead of letting it wrap and balloon the row height. */
  .fdm-tbl td.fdm-sku-cell {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Existing rules at lines above already set:
       .fdm-tbl tbody tr.crit    td:first-child { box-shadow: inset 2px 0 0 var(--role-critical); }
       .fdm-tbl tbody tr.blocked td:first-child { box-shadow: inset 2px 0 0 var(--b2-pink); }
       .fdm-tbl tbody tr.forced  td:first-child { box-shadow: inset 2px 0 0 var(--b2-purple); }
     ...which now correctly target the checkbox cell. No override needed. */

  .fdm-check {
    width: 16px; height: 16px;
    accent-color: var(--yellow, #ffd60a);
    cursor: pointer;
    margin: 0;
  }
  .fdm-group-check {
    width: 16px; height: 16px;
    accent-color: var(--yellow, #ffd60a);
    cursor: pointer;
    margin: 0 10px 0 0;
    vertical-align: middle;
  }
  .fdm-group-head { display: flex; align-items: center; }

  /* Drag-paint highlight — short-lived row tint while the cursor is
     dragging across rows. Cleared on mouseup. */
  .fdm-tbl tbody tr.fdm-paint-target td {
    background: rgba(255,214,10,0.06);
  }

  /* ─── FORCE BUILD MODAL ───
     Opens from the To Be Built panel head for users with the
     Build Override Permission. Captures SKU + linked order + qty +
     reason, then PATCHes the six Force Build fields on the SKU's
     Stocking Summary record. */
  .stockv2-panel-head-actions {
    display: inline-flex; align-items: center; gap: 8px;
    flex-shrink: 0;
  }
  .stockv2-panel-head .row-act.fb-trigger {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .fb-modal {
    width: min(640px, 96vw);
    max-width: none;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
    min-height: 0;
  }
  .bom-overlay.visible .fb-modal { transform: translateY(0); }

  /* ─── Inspection Queue modal ─── */
  .iq-modal {
    width: min(860px, 96vw);
    max-width: none;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
  }
  .bom-overlay.visible .iq-modal { transform: translateY(0); }
  .iq-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .iq-title {
    margin-top: 4px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--b2-text);
  }
  .iq-sub {
    margin-top: 4px;
    font-size: 13px; color: var(--b2-text-3);
    font-variant-numeric: tabular-nums;
  }
  .iq-body { padding: 0; overflow-y: auto; background: var(--b2-surface-2); }
  .iq-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--b2-text-3);
    font-size: 14px;
  }
  .iq-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
  .iq-tbl th, .iq-tbl td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .iq-tbl th {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--b2-text-3);
    background: var(--b2-surface-1);
    position: sticky; top: 0;
  }
  .iq-tbl td.r, .iq-tbl th.r { text-align: right; }
  .iq-tbl tbody tr { cursor: pointer; }
  .iq-tbl tbody tr:hover { background: var(--b2-surface-3); }
  .iq-tbl tr.in-progress td:first-child { box-shadow: inset 3px 0 0 var(--b2-blue); }
  .iq-tbl tr.forced td:first-child { box-shadow: inset 3px 0 0 var(--b2-purple, #b388ff); }
  .iq-tbl tr:last-child td { border-bottom: 0; }
  .iq-sku {
    font-weight: 600; color: var(--b2-text);
    font-variant-numeric: tabular-nums;
  }
  .iq-fam { color: var(--b2-text-3); font-size: 12px; }
  .iq-qty { font-variant-numeric: tabular-nums; color: var(--b2-text); }
  .iq-qty .muted { color: var(--b2-text-3); font-size: 11px; }
  .iq-pill {
    display: inline-block;
    font-size: 10.5px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px;
    letter-spacing: 0;
  }
  .iq-pill.queued { background: var(--b2-surface-3); color: var(--b2-text-2); border: 1px solid var(--b2-hairline-strong); }
  .iq-pill.in-progress { background: var(--b2-blue-bg); color: var(--b2-blue); border: 1px solid var(--b2-blue-border); }
  .iq-pill.forced { background: rgba(179,136,255,0.12); color: var(--b2-purple, #b388ff); border: 1px solid rgba(179,136,255,0.32); }
  .iq-cta {
    font-size: 12px; font-weight: 600; color: var(--b2-yellow, #ffd60a);
    letter-spacing: -0.005em;
  }
  .iq-tbl tr:hover .iq-cta { color: #ffe066; }
  .fb-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .fb-head .page-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600;
  }
  .fb-title {
    margin-top: 4px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--b2-text);
  }
  .fb-sub {
    margin-top: 6px;
    font-size: 12.5px; color: var(--b2-text-3);
    max-width: 480px;
  }
  .fb-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 18px 24px;
    background: var(--b2-surface-2);
    display: flex; flex-direction: column; gap: 16px;
  }
  .fb-section { display: flex; flex-direction: column; gap: 8px; }
  .fb-label {
    font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; font-weight: 700;
    color: var(--b2-text-3);
  }
  .fb-label-hint {
    font-size: 11px; font-weight: 500;
    color: var(--b2-text-3); text-transform: none;
    letter-spacing: 0; margin-left: 4px;
  }
  .fb-required {
    margin-left: 6px; font-size: 10px;
    color: var(--role-critical); text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .fb-search { position: relative; }
  .fb-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--b2-text-3); pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px;
  }
  .fb-search-icon svg { width: 16px; height: 16px; }
  .fb-search-input {
    width: 100%; height: 36px;
    padding: 0 12px 0 34px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text); font: inherit; font-size: 13px;
    outline: 0; box-sizing: border-box;
  }
  .fb-search-input:focus {
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-2);
  }
  .fb-sku-results {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 240px; overflow: auto;
  }
  .fb-sku-result {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; padding: 8px 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    cursor: pointer; text-align: left;
    color: var(--b2-text); font: inherit;
  }
  .fb-sku-result:hover {
    background: var(--b2-surface-3);
    border-color: var(--b2-hairline-strong);
  }
  .fb-result-name {
    font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  }
  .fb-result-meta {
    font-size: 11.5px; color: var(--b2-text-3);
  }
  .fb-sku-card {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 8px;
    padding: 12px 14px;
  }
  .fb-sku-card-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .fb-sku-name {
    font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--b2-text);
  }
  .fb-sku-clear {
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-3);
    height: 26px; padding: 0 10px;
    border-radius: 6px; cursor: pointer;
    font: 600 11px/1 inherit;
  }
  .fb-sku-clear:hover {
    background: var(--b2-surface-3);
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .fb-sku-meta {
    margin-top: 8px;
    font-size: 12px; color: var(--b2-text-3);
  }
  .fb-sku-meta strong {
    color: var(--b2-text); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .fb-warn {
    padding: 10px 12px;
    background: var(--b2-amber-bg);
    border: 1px solid var(--b2-amber-border);
    border-radius: 6px;
    font-size: 12px; color: var(--b2-amber);
    line-height: 1.5;
  }
  .fb-warn-info {
    background: var(--role-cta-primary-bg, rgba(255,216,77,0.1));
    border-color: var(--role-cta-primary-border, rgba(255,216,77,0.3));
    color: var(--role-cta-primary, #ffd84d);
  }
  .fb-empty {
    padding: 12px 14px; font-size: 12px;
    color: var(--b2-text-3);
    background: var(--b2-surface-1);
    border: 1px dashed var(--b2-hairline);
    border-radius: 6px;
  }
  .fb-orders {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 220px; overflow: auto;
  }
  .fb-order-btn {
    display: grid; grid-template-columns: 90px 1fr auto;
    align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    cursor: pointer; text-align: left;
    color: var(--b2-text); font: inherit;
  }
  .fb-order-btn:hover {
    background: var(--b2-surface-3);
    border-color: var(--b2-hairline-strong);
  }
  .fb-order-btn.selected {
    background: var(--role-cta-primary-bg, rgba(255,216,77,0.12));
    border-color: var(--role-cta-primary, #ffd84d);
  }
  .fb-order-id {
    font-size: 13px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .fb-order-customer {
    font-size: 12px; color: var(--b2-text-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fb-order-qty {
    font-size: 11.5px; color: var(--b2-text-3);
    font-variant-numeric: tabular-nums;
  }
  .fb-qty-input {
    width: 120px; height: 36px;
    padding: 0 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text); font: inherit;
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    outline: 0;
  }
  .fb-qty-input:focus {
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-2);
  }
  .fb-hint { font-size: 11.5px; color: var(--b2-text-3); }
  .fb-hint strong { color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
  .fb-reason {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    color: var(--b2-text); font: inherit; font-size: 13px;
    outline: 0; resize: vertical; min-height: 60px;
    line-height: 1.4;
  }
  .fb-reason:focus {
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-2);
  }
  .fb-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; justify-content: flex-end; align-items: center;
    gap: 10px;
  }
  .fb-footer .btn {
    height: 32px; padding: 0 14px;
    font: 600 12px/1 inherit;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    border-radius: 8px; cursor: pointer;
  }
  .fb-footer .btn:hover { background: var(--b2-surface-3); }
  .fb-footer .btn.btn-primary {
    background: var(--role-cta-primary, #ffd84d);
    color: #1a1a1d; border: 0; font-weight: 700;
  }
  .fb-footer .btn.btn-primary:hover { filter: brightness(1.08); }
  .fb-footer .btn:disabled {
    opacity: 0.45; cursor: not-allowed;
    filter: none;
  }

  /* ─── SKU LOOKUP MODAL ───
     Opens from the Stocking page tools row. Lets Manufacturing look up
     any SKU's inventory status (On Hand · Available · Status) without
     leaving Stocking. Mirrors the Sales table column treatment so the
     numbers are consistent. */
  .sku-lookup-modal {
    width: min(720px, 96vw);
    max-width: none;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
    min-height: 0;
  }
  .bom-overlay.visible .sku-lookup-modal { transform: translateY(0); }
  .skl-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .skl-head .page-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600;
  }
  .skl-title {
    margin-top: 4px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--b2-text);
  }
  .skl-sub {
    margin-top: 6px;
    font-size: 12.5px; color: var(--b2-text-3);
    max-width: 460px;
  }
  .skl-search-wrap {
    position: relative;
    padding: 16px 24px;
    background: var(--b2-surface-0);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .skl-search-icon {
    position: absolute; left: 38px; top: 50%; transform: translateY(-50%);
    color: var(--b2-text-3); pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px;
  }
  .skl-search-icon svg { width: 17px; height: 17px; }
  .skl-input {
    width: 100%;
    height: 42px; padding: 0 40px 0 42px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    color: var(--b2-text);
    font: 500 14px/1 inherit;
    outline: 0;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  }
  .skl-input::placeholder { color: var(--b2-text-4, var(--b2-text-3)); }
  .skl-input:focus {
    border-color: var(--b2-yellow-border);
    background: var(--b2-surface-1);
    box-shadow: 0 0 0 3px var(--b2-yellow-bg);
  }
  /* Clear (×) button — appears once the field has text. */
  .skl-clear {
    position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 6px; border: 0;
    background: var(--b2-surface-3); color: var(--b2-text-3); cursor: pointer;
    display: none; align-items: center; justify-content: center;
  }
  .skl-clear svg { width: 12px; height: 12px; }
  .skl-clear:hover { color: var(--b2-text); background: var(--b2-hairline); }
  .skl-clear.show { display: inline-flex; }
  .skl-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 0;
    background: var(--b2-surface-1);
  }
  .skl-empty {
    padding: 48px 24px; text-align: center;
    color: var(--b2-text-3); font-size: 13.5px;
  }
  .skl-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
  .skl-tbl th, .skl-tbl td {
    padding: 13px 16px; font-size: 13.5px; text-align: left;
    border-bottom: 1px solid var(--b2-hairline);
    color: var(--b2-text);
  }
  .skl-tbl thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--b2-surface-0);
    color: var(--b2-text-3); font-weight: 700;
    font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 11px 16px;
    box-shadow: inset 0 -1px 0 var(--b2-hairline);
  }
  .skl-tbl th.r, .skl-tbl td.r { text-align: right; }
  .skl-tbl td.skl-sku {
    font-weight: 600; letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
  }
  .skl-tbl tbody tr { transition: background 0.1s; }
  .skl-tbl tbody tr:last-child td { border-bottom: 0; }
  /* SKU/order cell with the drill-in chevron that reveals on row hover. */
  .skl-sku-cell {
    font-weight: 600; letter-spacing: -0.005em;
    font-variant-numeric: tabular-nums;
    display: flex; align-items: center; gap: 9px;
  }
  .skl-chev {
    width: 14px; height: 14px; color: var(--b2-text-4, var(--b2-text-3));
    opacity: 0; transform: translateX(-3px);
    transition: opacity 0.12s, transform 0.12s; flex: 0 0 auto;
  }
  .skl-chev svg { width: 14px; height: 14px; display: block; }
  /* Tabular result numbers with semantic color (matches the Sales table). */
  .skl-num { font-variant-numeric: tabular-nums; font-weight: 600; }
  .skl-num.muted { color: var(--b2-text-4, var(--b2-text-3)); font-weight: 500; }
  .skl-num.amber { color: var(--b2-amber); }
  .skl-num.red { color: var(--b2-red); }
  .skl-num.green { color: var(--b2-green); }
  .skl-row-dim td { opacity: 0.45; }
  /* Result-count footer (replaces the inline cap note). */
  .skl-foot {
    flex: 0 0 auto;
    padding: 12px 24px; font-size: 12px;
    color: var(--b2-text-3);
    background: var(--b2-surface-0);
    border-top: 1px solid var(--b2-hairline);
    display: flex; align-items: center; gap: 8px;
  }
  .skl-foot b { color: var(--b2-text-2); font-weight: 700; font-variant-numeric: tabular-nums; }
  .skl-foot .cap { margin-left: auto; }
  .skl-cap-note {
    padding: 12px 18px; font-size: 12px;
    color: var(--b2-text-3); text-align: center;
    background: var(--b2-surface-1);
    border-top: 1px solid var(--b2-hairline);
  }
  .skl-cap-note strong { color: var(--b2-text); }
  /* Padded wrapper + summary line for the stacked history/customers modals. */
  .skl-modal-pad { padding: 16px 24px 20px; }
  .skl-summary {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--b2-text-3);
    margin: 0 2px 14px; font-variant-numeric: tabular-nums;
  }
  .skl-summary b { color: var(--b2-text-2); font-weight: 700; }
  /* ── Order-history status pills (Total Sold modal) ── */
  .hist-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
  }
  .hist-status svg { width: 11px; height: 11px; }
  .hist-status.shipped { background: var(--b2-green-bg); color: var(--b2-green); border-color: var(--b2-green-border); }
  .hist-status.open { background: var(--b2-blue-bg); color: var(--b2-blue); border-color: var(--b2-blue-border); }
  /* ── Customers ranked list (Who buys modal) ── */
  .cust-list { display: flex; flex-direction: column; gap: 6px; }
  .cust-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--b2-hairline);
    border-radius: 10px; background: var(--b2-surface-2);
    transition: border-color 0.12s, background 0.12s;
  }
  .cust-row.clickable { cursor: pointer; }
  .cust-row.clickable:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .cust-rank {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
    background: var(--b2-surface-0); color: var(--b2-text-3);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cust-row:first-child .cust-rank { background: var(--b2-teal-bg); color: var(--b2-teal); }
  .cust-main { flex: 1 1 auto; min-width: 0; }
  .cust-name { font-size: 13.5px; font-weight: 600; color: var(--b2-text); }
  .cust-sub { font-size: 11.5px; color: var(--b2-text-3); margin-top: 2px; }
  .cust-bar { margin-top: 8px; height: 6px; border-radius: 3px; background: var(--b2-surface-0); overflow: hidden; }
  .cust-bar-fill { height: 100%; border-radius: 3px; background: var(--b2-teal); min-width: 3px; }
  .cust-right { flex: 0 0 auto; text-align: right; white-space: nowrap; }
  .cust-units { font-size: 13.5px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; }
  .cust-units .lbl { font-size: 11px; font-weight: 600; color: var(--b2-text-3); margin-left: 3px; }
  .cust-share { font-size: 11px; color: var(--b2-text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
  /* ── Profile drill-in: the modal header BECOMES the SKU's identity ── */
  .skl-head.skl-head-profile { flex-direction: row; align-items: flex-start; }
  .skl-head-profile .skp-back {
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2); font: 600 12px/1 inherit; cursor: pointer;
    height: 30px; padding: 0 12px 0 9px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px; margin-bottom: 13px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .skl-head-profile .skp-back:hover { background: var(--b2-surface-3); color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  .skl-head-profile .skp-back svg { width: 14px; height: 14px; }
  .skl-title-sku { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--b2-text); }
  .skp-meta-head {
    margin-top: 9px; font-size: 13px; color: var(--b2-text-3);
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  }
  /* ── Waiting / Open-orders modal: order cards ── */
  .wait-filter { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; }
  .wait-pill {
    appearance: none; display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 13px; border-radius: 999px;
    border: 1px solid var(--b2-hairline); background: var(--b2-surface-2);
    color: var(--b2-text-2); font: 600 12px/1 inherit; cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .wait-pill:hover { color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  .wait-pill.active { background: var(--b2-green-bg); border-color: var(--b2-green-border); color: var(--b2-green); }
  .wait-pill svg { width: 13px; height: 13px; }
  .wait-note { font-size: 11.5px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
  .wait-list { display: flex; flex-direction: column; gap: 6px; }
  .wait-row {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px;
    border: 1px solid var(--b2-hairline); border-radius: 10px;
    background: var(--b2-surface-2); cursor: pointer;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  }
  .wait-row:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .wait-row.ships:hover { box-shadow: inset 3px 0 0 var(--b2-green); }
  .wait-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .wait-dot.waiting { background: var(--b2-amber); }
  .wait-dot.partial { background: var(--b2-blue); }
  .wait-dot.covered { background: var(--b2-green); }
  .wait-main { flex: 1 1 auto; min-width: 0; }
  .wait-idline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .wait-order { font-size: 13.5px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; }
  .wait-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; }
  .wait-tag.waiting { background: var(--b2-amber-bg); color: var(--b2-amber); border-color: var(--b2-amber-border); }
  .wait-tag.partial { background: var(--b2-blue-bg); color: var(--b2-blue); border-color: var(--b2-blue-border); }
  .wait-tag.covered { background: var(--b2-green-bg); color: var(--b2-green); border-color: var(--b2-green-border); }
  .wait-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; }
  .wait-badge svg { width: 10px; height: 10px; }
  .wait-badge.ships { background: var(--b2-green-bg); color: var(--b2-green); border-color: var(--b2-green-border); }
  .wait-badge.priority { background: var(--b2-red-bg); color: var(--b2-red); border-color: var(--b2-red-border); }
  .wait-meta { margin-top: 5px; font-size: 12px; color: var(--b2-text-3); }
  .wait-right { flex: 0 0 auto; text-align: right; white-space: nowrap; }
  .wait-short { font-size: 13.5px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; }
  .wait-short .lbl { font-size: 11px; font-weight: 600; color: var(--b2-text-3); margin-left: 3px; }
  .wait-alloc { margin-top: 3px; font-size: 11px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }

  /* ─── REORDER FAMILIES MODAL ───
     Opens from the Layout-Edit pill on the Stocking page. Lists every
     family currently in the To Be Built queue; drag rows to change the
     order used in Category / Urgency / Flat views. Saved to
     DISPLAY_PREFS.layout.familyOrder. */
  .fo-modal {
    width: min(560px, 96vw);
    max-width: none;
    max-height: calc(100vh - 48px);
    display: flex; flex-direction: column;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(12px);
    transition: transform 0.2s ease;
    min-height: 0;
  }
  .bom-overlay.visible .fo-modal { transform: translateY(0); }
  .fo-head {
    padding: 20px 24px 16px;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .fo-head .page-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600;
  }
  .fo-title {
    margin-top: 4px;
    font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
    color: var(--b2-text);
  }
  .fo-sub {
    margin-top: 6px;
    font-size: 12.5px; color: var(--b2-text-3);
    max-width: 420px;
  }
  .fo-body {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    padding: 14px 18px;
    background: var(--b2-surface-2);
    display: flex; flex-direction: column; gap: 6px;
  }
  .fo-empty {
    padding: 28px 16px; text-align: center;
    color: var(--b2-text-3); font-size: 13px;
  }
  .fo-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    cursor: grab;
    user-select: none;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  }
  .fo-row:hover {
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-3);
  }
  .fo-row.fo-dragging { opacity: 0.45; cursor: grabbing; }
  /* Drop indicators — a colored line on whichever side the dragged row
     will land. */
  .fo-row.fo-drop-before { box-shadow: inset 0 2px 0 var(--role-cta-primary, #ffd84d); }
  .fo-row.fo-drop-after  { box-shadow: inset 0 -2px 0 var(--role-cta-primary, #ffd84d); }
  .fo-grip {
    display: inline-flex; align-items: center;
    color: var(--b2-text-3);
    flex-shrink: 0;
    cursor: grab;
  }
  .fo-row:hover .fo-grip { color: var(--b2-text-2); }
  .fo-row-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
  }
  .fo-row-name {
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
    color: var(--b2-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fo-row-meta {
    font-size: 11.5px; color: var(--b2-text-3);
  }
  .fo-row-meta strong {
    color: var(--b2-text-2); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .fo-row-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    flex-shrink: 0;
    padding: 2px 6px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .fo-row-badge.crit-badge {
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .fo-row-badge.blocked-badge {
    background: transparent; color: var(--b2-pink);
    border: 1px dashed var(--b2-pink-border);
  }
  .fo-row-badge.wop-badge {
    background: var(--b2-pink-bg); color: var(--b2-pink);
    border: 1px solid var(--b2-pink-border);
  }
  .fo-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; justify-content: space-between; align-items: center;
    gap: 14px;
  }
  .fo-footer .btn {
    height: 32px; padding: 0 14px;
    font: 600 12px/1 inherit;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text);
    border-radius: 8px; cursor: pointer;
  }
  .fo-footer .btn:hover { background: var(--b2-surface-3); }
  .fo-footer .btn.btn-primary {
    background: var(--role-cta-primary, #ffd84d);
    color: #1a1a1d; border: 0; font-weight: 700;
  }
  .fo-footer .btn.btn-primary:hover { filter: brightness(1.08); }

  /* ─── PAGE HEADER SHORTAGE TRIGGER BUTTONS (v2) ───
     Replaces .stockv2-parts-pill. Two variants: urgent (red tint, blocking
     critical builds) and neutral (gray tint, all shortages). Sits in the
     page tools row alongside Export / Build All Critical. */
  .stockv2 .shortage-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px;
    font: 500 12px/1 'Avenir Next', 'Nunito Sans', sans-serif;
    color: var(--b2-text-2);
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.12s;
    font-family: inherit;
  }
  .stockv2 .shortage-btn:hover {
    background: var(--b2-surface-3); color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .stockv2 .shortage-btn strong { color: var(--b2-text); font-weight: 700; }
  .stockv2 .shortage-btn.urgent {
    background: var(--role-critical-bg);
    border-color: var(--role-critical-border);
    color: var(--role-critical);
  }
  .stockv2 .shortage-btn.urgent strong { color: var(--role-critical); }
  .stockv2 .shortage-btn.urgent:hover {
    background: var(--role-critical-bg);
    border-color: var(--role-critical);
    filter: brightness(1.15);
  }
  .stockv2 .shortage-btn .row-dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  }
  .stockv2 .shortage-btn .row-dot.crit { background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg); }
  .stockv2 .shortage-btn .row-dot.wop { background: var(--b2-text-3); }

  /* ─── PARTS SHORTAGE MODAL v2 (REDESIGN) ───
     Two visual modes: .ps-modal-v2 + optional .urgent (red headline +
     glow + red gradient header). Table columns: Component / On hand / On
     PO / Requested / After build / Effective remaining. Each row gets a
     thin deficit bar under the component name. */
  .bom-modal.bom-modal-v2.ps-modal-v2 {
    width: min(880px, 96vw);
    max-width: 96vw;
    max-height: 88vh;
    display: flex !important;
    flex-direction: column;
    grid-template-rows: none;
  }
  .bom-modal.bom-modal-v2.ps-modal-v2.urgent {
    border-color: var(--role-critical-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px var(--role-critical-border);
  }
  .ps-modal-v2 .ps2-header {
    padding: 18px 22px;
    display: flex; align-items: flex-start; justify-content: space-between;
    border-bottom: 1px solid var(--b2-hairline);
    flex-shrink: 0;
  }
  .ps-modal-v2.urgent .ps2-header {
    background: linear-gradient(180deg, var(--role-critical-bg) 0%, var(--b2-surface-1) 100%);
    border-bottom-color: var(--role-critical-border);
  }
  .ps-modal-v2 .ps2-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
  }
  .ps-modal-v2.urgent .ps2-eyebrow { color: var(--role-critical); }
  .ps-modal-v2 .ps2-title {
    margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--b2-text);
    display: flex; align-items: center; gap: 10px;
  }
  .ps-modal-v2 .ps2-sub {
    color: var(--b2-text-2); font-size: 13px; margin-top: 2px;
  }
  .ps-modal-v2 .ps2-close {
    width: 32px; height: 32px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2); border-radius: 8px;
    font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
  }
  .ps-modal-v2 .ps2-close:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  .ps-modal-v2 .ps2-body {
    flex: 1; overflow: auto;
    padding: 20px 22px;
    background: var(--b2-surface-2);
  }
  .ps-modal-v2 .ps2-tbl {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
  }
  .ps-modal-v2 .ps2-tbl th, .ps-modal-v2 .ps2-tbl td {
    padding: 10px 14px; font-size: 13px;
    text-align: left;
    color: var(--b2-text);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .ps-modal-v2 .ps2-tbl thead th {
    background: var(--b2-surface-2);
    color: var(--b2-text-3); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px;
  }
  .ps-modal-v2 .ps2-tbl tbody tr:last-child td { border-bottom: 0; }
  .ps-modal-v2 .ps2-tbl .r { text-align: right; }
  .ps-modal-v2 .ps2-tbl .mono { font-family: 'SF Mono', Monaco, ui-monospace, monospace; font-variant-numeric: tabular-nums; }
  .ps-modal-v2 .ps2-tbl td.muted { color: var(--b2-text-3); }
  .ps-modal-v2 .ps2-tbl td.crit-num { color: var(--role-critical); font-weight: 600; }
  .ps-modal-v2 .ps2-tbl td.amber-num { color: var(--role-low-stock); font-weight: 600; }
  .ps-modal-v2 .ps2-tbl tbody tr.ps2-row-urgent td:first-child {
    box-shadow: inset 2px 0 0 var(--role-critical);
  }
  .ps-modal-v2 .ps2-comp { display: flex; align-items: center; gap: 8px; }
  .ps-modal-v2 .ps2-comp-name { font-weight: 600; color: var(--b2-text); }
  .ps-modal-v2 .ps2-row-dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0;
    background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg);
  }
  .ps-modal-v2 .ps2-bar {
    margin-top: 6px;
    height: 3px;
    background: var(--b2-surface-3);
    border-radius: 2px;
    overflow: hidden;
  }
  .ps-modal-v2 .ps2-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--role-low-stock), var(--role-critical));
  }
  .ps-modal-v2 .ps2-legend {
    margin-top: 14px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--b2-text-3);
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 4px;
    display: flex; align-items: center; gap: 8px;
  }
  .ps-modal-v2 .ps2-legend-sep { color: var(--b2-text-3); opacity: 0.5; }
  .ps-modal-v2 .ps2-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-shrink: 0;
  }
  .ps-modal-v2 .ps2-summary { color: var(--b2-text-2); font-size: 13px; }
  .ps-modal-v2 .ps2-summary strong { color: var(--b2-text); font-weight: 600; }
  /* Click-to-drill: shortage rows that have a SKU breakdown. */
  .ps-modal-v2 .ps2-tbl tbody tr.ps2-row-clickable { cursor: pointer; }
  .ps-modal-v2 .ps2-tbl tbody tr.ps2-row-clickable:hover td { background: var(--b2-surface-1); }
  .ps-modal-v2 .fp2-breakdown-link {
    margin-top: 4px; padding: 0;
    background: none; border: 0;
    color: var(--b2-text-3); font: 500 11px 'Avenir Next', 'Nunito Sans', sans-serif;
    cursor: pointer; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
  }
  .ps-modal-v2 .fp2-breakdown-link:hover { color: var(--role-cta-primary); }

  /* ─── FAMILY PARTS MODAL v2 (REDESIGN) ───
     Family-scoped per-component view. Reuses .ps-modal-v2 visuals where
     possible; adds expandable "Used in N SKUs" breakdown rows. */
  .bom-modal.bom-modal-v2.fp-modal-v2 {
    width: min(900px, 96vw);
    max-width: 96vw;
    max-height: 88vh;
    display: flex !important;
    flex-direction: column;
    grid-template-rows: none;
  }
  /* fp-modal-v2 shares all the .ps2-* layout rules above by including both
     ps-modal-v2 + fp-modal-v2 classes on the root element. Variant rules
     below add the family-parts-specific touches (idle / short / breakdown). */
  .fp-modal-v2 .ps2-tbl tr.fp2-row.idle { opacity: 0.55; }
  .fp-modal-v2 .ps2-tbl tr.fp2-row.short td:first-child { box-shadow: inset 2px 0 0 var(--role-critical); }
  .fp-modal-v2 .ps2-tbl tr.fp2-row td { vertical-align: top; }
  .fp-modal-v2 .fp2-breakdown-link {
    margin-top: 4px; padding: 0;
    background: none; border: 0;
    color: var(--b2-text-3); font: 500 11px 'Avenir Next', 'Nunito Sans', sans-serif;
    cursor: pointer; letter-spacing: 0.01em;
    display: inline-flex; align-items: center; gap: 4px;
    font-family: inherit;
  }
  .fp-modal-v2 .fp2-breakdown-link:hover { color: var(--role-cta-primary); }
  .fp-modal-v2 .fp2-breakdown-row td {
    padding: 0 !important;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .fp-modal-v2 .fp2-breakdown {
    padding: 10px 16px 12px 24px;
    border-left: 2px solid var(--b2-hairline-strong);
    margin-left: 14px;
  }
  .fp-modal-v2 .fp2-breakdown-title {
    font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--b2-text-3);
    margin-bottom: 6px;
  }
  .fp-modal-v2 .fp2-breakdown-item {
    display: flex; align-items: center; gap: 8px;
    padding: 3px 0;
    font-size: 12px;
  }
  .fp-modal-v2 .fp2-bk-sku {
    font-family: 'SF Mono', Monaco, ui-monospace, monospace;
    color: var(--b2-text);
  }
  .fp-modal-v2 .fp2-bk-dots {
    flex: 1; min-width: 20px;
    border-bottom: 1px dotted var(--b2-hairline);
    align-self: flex-end; margin-bottom: 4px;
  }
  .fp-modal-v2 .fp2-bk-qty { color: var(--b2-text); font-weight: 600; font-variant-numeric: tabular-nums; }

  /* ─── BUILD ALL MODAL v2 (REDESIGN) ───
     Wider, modern variant of the legacy Build All modal. Activates when
     the modal root carries .bom-modal-v2.ba-modal-v2. All new layout
     classes use a .ba2-* prefix so legacy .ba-* rules (still used elsewhere)
     don't accidentally apply. */
  .bom-modal.bom-modal-v2.ba-modal-v2 {
    width: min(960px, 96vw);
    max-width: 96vw;
    max-height: 90vh;
    display: flex !important;
    flex-direction: column;
    grid-template-rows: none;
  }
  .ba-modal-v2 .ba2-header {
    padding: 18px 22px;
    display: flex; align-items: flex-start; justify-content: space-between;
    border-bottom: 1px solid var(--b2-hairline);
    flex-shrink: 0;
  }
  .ba-modal-v2 .ba2-eyebrow {
    color: var(--b2-text-3); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 4px;
  }
  .ba-modal-v2 .ba2-title {
    margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--b2-text);
    display: flex; align-items: center; gap: 10px;
  }
  .ba-modal-v2 .ba2-title .ba2-crit-badge {
    font-size: 9px; letter-spacing: 0.08em; font-weight: 700;
    padding: 2px 6px; border-radius: 4px;
    background: var(--role-critical-bg); color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .ba-modal-v2 .ba2-meta {
    color: var(--b2-text-2); font-size: 13px; margin-top: 2px;
  }
  .ba-modal-v2 .ba2-close {
    width: 32px; height: 32px;
    background: var(--b2-surface-2); border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2); border-radius: 8px;
    font-size: 16px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit;
    transition: all 0.15s;
  }
  .ba-modal-v2 .ba2-close:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  /* Bulk Reprint — only renders when a recent Build All batch exists in
     scope. Quiet secondary in the header so it doesn't compete with the
     primary "Build All →" footer CTA, but the printer icon + count make
     it obvious as a recovery surface. margin-left:auto pushes it (and
     the close button after it) to the right edge, keeping the title on
     the left with normal flex flow. */
  .ba-modal-v2 .ba2-reprint {
    margin-left: auto;
    margin-right: 8px;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    padding: 6px 12px;
    border-radius: 8px;
    font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    align-self: center;
  }
  .ba-modal-v2 .ba2-reprint:hover {
    color: var(--yellow, #ffd60a);
    border-color: var(--yellow, #ffd60a);
    background: rgba(255,214,10,0.08);
  }
  .ba-modal-v2 .ba2-reprint svg { flex: 0 0 auto; }
  .ba-modal-v2 .ba2-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    /* min-height: 0 lets a flex child shrink below its content size so the
       overflow rule actually engages once the modal hits max-height. */
    min-height: 0;
    padding: 18px 22px 22px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--b2-surface-2);
  }
  /* Body children keep their natural height so the body scroll engages.
     Without flex-shrink: 0, flex would try to compress them and the body
     ends up sized-to-content with nothing to scroll. */
  .ba-modal-v2 .ba2-body > * { flex-shrink: 0; }
  /* Subtle but visible scrollbar in the Build All body. */
  .ba-modal-v2 .ba2-body::-webkit-scrollbar { width: 10px; }
  .ba-modal-v2 .ba2-body::-webkit-scrollbar-track { background: transparent; }
  .ba-modal-v2 .ba2-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 5px;
    border: 2px solid var(--b2-surface-2);
  }
  .ba-modal-v2 .ba2-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
  /* Connector group */
  .ba-modal-v2 .ba2-group {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
  }
  .ba-modal-v2 .ba2-group-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--b2-surface-1);
  }
  .ba-modal-v2 .ba2-group-head.crit {
    background: linear-gradient(90deg, var(--role-critical-bg) 0%, var(--b2-surface-1) 70%);
  }
  .ba-modal-v2 .ba2-group-toggle {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--b2-text);
    cursor: pointer; text-align: left;
    font-family: inherit;
  }
  .ba-modal-v2 .ba2-group-name { font-weight: 600; font-size: 14px; letter-spacing: -0.005em; }
  .ba-modal-v2 .ba2-group-meta { color: var(--b2-text-3); font-size: 12px; }
  .ba-modal-v2 .ba2-group-body {
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-2);
    /* Cap group body so giant groups (e.g. All Critical with 170 SKUs)
       scroll internally — keeps the parts-consumption table visible below
       without having to scroll past every SKU first. Short groups stay
       compact because max-height only kicks in when content exceeds. */
    max-height: 60vh;
    overflow-y: auto;
  }
  .ba-modal-v2 .ba2-exp-caret {
    display: inline-block; color: var(--b2-text-3); font-size: 10px;
    transition: transform 0.12s; transform-origin: center;
  }
  .ba-modal-v2 .ba2-exp-caret.open { transform: rotate(90deg); color: var(--b2-text); }
  .ba-modal-v2 .ba2-crit-dot {
    margin-left: auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--role-critical); box-shadow: 0 0 0 3px var(--role-critical-bg);
  }
  /* SKU row inside group */
  .ba-modal-v2 .ba2-sku {
    border-bottom: 1px solid var(--b2-hairline);
    transition: background 0.12s;
  }
  .ba-modal-v2 .ba2-sku:last-child { border-bottom: 0; }
  .ba-modal-v2 .ba2-sku.off { opacity: 0.45; }
  /* Spreadsheet-style drag-to-select. user-select:none on the row stops
     the browser from highlighting SKU text while the cursor sweeps
     across rows. cursor:pointer on the checkbox cell signals it's the
     drag origin. .ba2-paint-target gets a brief yellow tint while the
     drag is alive — cleared on mouseup. */
  .ba-modal-v2 .ba2-sku-row { user-select: none; }
  .ba-modal-v2 .ba2-sku .ba2-check { cursor: pointer; }
  .ba-modal-v2 .ba2-sku.ba2-paint-target {
    background: rgba(255,214,10,0.06);
    box-shadow: inset 2px 0 0 var(--yellow, #ffd60a);
    transition: background 0.08s, box-shadow 0.08s;
  }

  /* ─── All Critical Builds — Direction C′ filter rework ────────────
     Two control rows:
       Row 1: Search box · Connector dropdown · Sort dropdown
       Row 2: Family chips · Status chips · Clear filters
     Filters affect visibility only; selection (checkbox state) is
     preserved across filter toggles. Sort reorders DOM nodes within
     the single 'All Critical SKUs' group. Per Claude Design's mockup. */
  .ba-modal-v2 .ba2-controls {
    margin-bottom: 10px;
    display: flex; flex-direction: column; gap: 10px;
  }
  .ba-modal-v2 .ba2-controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ba-modal-v2 .ba2-controls-row-2 { gap: 16px; }

  /* Search box — flex:1 to fill the row width. */
  .ba-modal-v2 .ba2-search {
    display: flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 10px 0 12px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 9px;
    color: var(--b2-text-3);
    transition: border-color 0.14s, box-shadow 0.14s;
    flex: 1; min-width: 0;
  }
  .ba-modal-v2 .ba2-search:focus-within {
    border-color: rgba(255,214,10,0.32);
    box-shadow: 0 0 0 3px rgba(255,214,10,0.12);
    color: var(--b2-text-2);
  }
  .ba-modal-v2 .ba2-search-icon { flex: 0 0 auto; }
  .ba-modal-v2 .ba2-search-input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    color: var(--b2-text);
    font: 500 14px inherit;
  }
  .ba-modal-v2 .ba2-search-input::placeholder { color: var(--b2-text-3); }
  .ba-modal-v2 .ba2-search-clear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: var(--b2-surface-3);
    border: 0; border-radius: 6px;
    color: var(--b2-text-3);
    cursor: pointer;
    font-size: 14px;
  }
  .ba-modal-v2 .ba2-search-clear:hover { color: var(--b2-text); }

  /* Dropdown button (Connector / Sort) — same shape, eyebrow + value + caret. */
  .ba-modal-v2 .ba2-dd-wrap { position: relative; flex: 0 0 auto; }
  .ba-modal-v2 .ba2-dd-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 11px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 9px;
    color: var(--b2-text);
    cursor: pointer;
    transition: all 0.14s;
    white-space: nowrap;
    font: inherit;
  }
  .ba-modal-v2 .ba2-dd-btn:hover { border-color: var(--b2-hairline-strong); }
  .ba-modal-v2 .ba2-dd-btn.is-open {
    border-color: rgba(255,214,10,0.32);
    box-shadow: 0 0 0 3px rgba(255,214,10,0.12);
  }
  .ba-modal-v2 .ba2-dd-lab {
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 700;
  }
  .ba-modal-v2 .ba2-dd-val { font-size: 13px; font-weight: 600; }
  .ba-modal-v2 .ba2-conn-btn.has-value .ba2-dd-val { color: var(--yellow, #ffd60a); }

  /* Filter toggle button — toggles the collapsible chip panel on row 2.
     .has-value gets a yellow accent + count dot when any chip filter is
     applied, so an operator who collapsed the panel can still see
     filters are active. Same shape as the Sort dropdown button. */
  .ba-modal-v2 .ba2-filter-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 13px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 9px;
    color: var(--b2-text);
    cursor: pointer;
    transition: all 0.14s;
    white-space: nowrap;
    font: 600 13px inherit;
    flex: 0 0 auto;
  }
  .ba-modal-v2 .ba2-filter-btn:hover { border-color: var(--b2-hairline-strong); }
  .ba-modal-v2 .ba2-filter-btn.is-open {
    border-color: rgba(255,214,10,0.32);
    box-shadow: 0 0 0 3px rgba(255,214,10,0.12);
  }
  .ba-modal-v2 .ba2-filter-btn.has-value {
    color: var(--yellow, #ffd60a);
    border-color: rgba(255,214,10,0.32);
  }
  .ba-modal-v2 .ba2-filter-btn.has-value .ba2-filter-icon { color: var(--yellow, #ffd60a); }
  .ba-modal-v2 .ba2-filter-icon { flex: 0 0 auto; color: var(--b2-text-3); }
  .ba-modal-v2 .ba2-filter-lab { font-size: 13px; font-weight: 600; }
  .ba-modal-v2 .ba2-filter-dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: var(--yellow, #ffd60a);
    color: #1a1a1d;
    font: 800 11px inherit; font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }
  .ba-modal-v2 .ba2-dd-caret {
    color: var(--b2-text-3);
    transition: transform 0.15s;
  }
  .ba-modal-v2 .ba2-dd-caret.is-open { transform: rotate(180deg); }
  .ba-modal-v2 .ba2-dd-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    min-width: 200px; padding: 5px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 11px;
    box-shadow: 0 16px 44px rgba(0,0,0,0.5);
    max-height: 280px; overflow-y: auto;
  }
  .ba-modal-v2 .ba2-dd-pop.ba2-conn-pop { min-width: 244px; }
  .ba-modal-v2 .ba2-dd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: 34px; padding: 0 10px;
    border: 0; border-radius: 7px;
    background: none; color: var(--b2-text-2);
    font: 500 13px inherit; text-align: left;
    cursor: pointer;
  }
  .ba-modal-v2 .ba2-dd-item:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  .ba-modal-v2 .ba2-dd-item.is-on { color: var(--b2-text); font-weight: 600; }
  .ba-modal-v2 .ba2-dd-item.is-on svg { color: var(--yellow, #ffd60a); }

  /* Family / Status chip groups */
  .ba-modal-v2 .ba2-chipgroup {
    display: flex; align-items: center; gap: 7px;
    flex-wrap: wrap;
  }
  .ba-modal-v2 .ba2-chipgroup-lab {
    font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--b2-text-4, var(--b2-text-3)); font-weight: 700;
    margin-right: 2px;
  }
  .ba-modal-v2 .ba2-chip {
    height: 30px; padding: 0 13px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 999px;
    color: var(--b2-text-2);
    font: 600 12.5px inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.14s;
  }
  .ba-modal-v2 .ba2-chip:hover {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
  }
  .ba-modal-v2 .ba2-chip.is-active {
    background: var(--yellow, #ffd60a);
    color: #1a1a1d;
    border-color: transparent;
  }
  .ba-modal-v2 .ba2-chip.is-active:hover { background: #ffe066; }
  .ba-modal-v2 .ba2-chip-divider {
    width: 1px; height: 22px;
    background: var(--b2-hairline);
    flex: 0 0 auto;
  }
  .ba-modal-v2 .ba2-clearfilters {
    background: none; border: 0;
    color: var(--b2-text-3);
    font: 600 12px inherit;
    padding: 4px 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .ba-modal-v2 .ba2-clearfilters:hover { color: var(--b2-text); text-decoration: underline; }

  /* Select / Deselect visible — acts on filtered rows only. Lives in
     the filter panel beside Clear filters. Yellow accent in "select"
     state to invite the action; muted when the action is the reverse
     (deselect). margin-left:auto pushes both action buttons to the
     right end of the row. */
  .ba-modal-v2 .ba2-select-visible {
    margin-left: auto;
    background: rgba(255,214,10,0.08);
    border: 1px solid rgba(255,214,10,0.32);
    color: var(--yellow, #ffd60a);
    font: 600 12px inherit;
    padding: 6px 12px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s, opacity 0.12s;
  }
  .ba-modal-v2 .ba2-select-visible:hover:not([disabled]) {
    background: rgba(255,214,10,0.18);
    border-color: rgba(255,214,10,0.5);
  }
  .ba-modal-v2 .ba2-select-visible.is-deselect {
    background: transparent;
    border-color: var(--b2-hairline);
    color: var(--b2-text-2);
  }
  .ba-modal-v2 .ba2-select-visible.is-deselect:hover:not([disabled]) {
    color: var(--b2-text);
    border-color: var(--b2-hairline-strong);
    background: var(--b2-surface-3);
  }
  .ba-modal-v2 .ba2-select-visible[disabled] { opacity: 0.4; cursor: not-allowed; }
  /* When Clear filters is also rendered, the select button keeps
     margin-left:auto but Clear sits beside it (no extra margin). */
  .ba-modal-v2 .ba2-select-visible + .ba2-clearfilters { margin-left: 0; }

  /* Tally line — "12 shown · 3 hidden by filter (2 still in batch)".
     Only takes vertical space when there's text to show; an empty
     tally collapses entirely so the toolbar sits flush against the
     SKU list when nothing's filtered. */
  .ba-modal-v2 .ba2-controls-tally {
    color: var(--b2-text-3); font-size: 11.5px;
    font-style: italic;
  }
  .ba-modal-v2 .ba2-controls-tally:empty { display: none; }
  .ba-modal-v2 .ba2-sku-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: 14px;
    padding: 10px 14px 10px 16px;
  }
  .ba-modal-v2 .ba2-sku-name {
    font-family: 'SF Mono', Monaco, ui-monospace, monospace;
    font-size: 13px; font-weight: 600;
    letter-spacing: -0.005em;
    display: flex; flex-direction: column; gap: 2px;
    color: var(--b2-text);
  }
  .ba-modal-v2 .ba2-sku-name .ba2-inline-row {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .ba-modal-v2 .ba2-inline-badge {
    display: inline-block;
    font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
    padding: 1px 5px; border-radius: 3px; vertical-align: 1px;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
  }
  .ba-modal-v2 .ba2-inline-badge.crit { background: var(--role-critical-bg); color: var(--role-critical); border: 1px solid var(--role-critical-border); }
  .ba-modal-v2 .ba2-inline-badge.wop  { background: var(--b2-surface-3); color: var(--b2-text-3); border: 1px solid var(--b2-hairline); }
  .ba-modal-v2 .ba2-sku-meta {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 11px; font-weight: 400; letter-spacing: 0;
    color: var(--b2-text-3);
  }
  /* Quantity input */
  .ba-modal-v2 .ba2-qty { display: flex; align-items: center; gap: 6px; }
  .ba-modal-v2 .ba2-qty input {
    width: 56px; height: 26px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 4px;
    padding: 0 8px;
    color: var(--b2-text);
    font: 600 13px/1 'SF Mono', Monaco, ui-monospace, monospace;
    text-align: right;
    -moz-appearance: textfield;
  }
  .ba-modal-v2 .ba2-qty input::-webkit-outer-spin-button,
  .ba-modal-v2 .ba2-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ba-modal-v2 .ba2-qty input:focus { outline: 0; border-color: var(--role-cta-primary); }
  .ba-modal-v2 .ba2-qty-unit { font-size: 11px; color: var(--b2-text-3); }
  /* Custom checkbox */
  .ba-modal-v2 .ba2-check {
    position: relative;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .ba-modal-v2 .ba2-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
  .ba-modal-v2 .ba2-check span {
    width: 14px; height: 14px;
    border: 1.5px solid var(--b2-hairline-strong);
    border-radius: 3px;
    background: var(--b2-surface-1);
    transition: all 0.12s;
  }
  .ba-modal-v2 .ba2-check input:checked + span {
    background: var(--role-cta-primary); border-color: var(--role-cta-primary);
    box-shadow: inset 0 0 0 2px var(--b2-surface-1);
  }
  .ba-modal-v2 .ba2-check input:indeterminate + span {
    background: var(--role-cta-primary); border-color: var(--role-cta-primary);
    box-shadow: inset 0 -5px 0 -3px var(--b2-surface-1), inset 0 5px 0 -3px var(--b2-surface-1);
  }
  /* Row BOM toggle */
  .ba-modal-v2 .ba2-row-act {
    height: 24px; padding: 0 10px;
    font: 600 11px/1 'Avenir Next', 'Nunito Sans', sans-serif;
    letter-spacing: 0.04em;
    background: var(--b2-surface-1); color: var(--b2-text-2);
    border: 1px solid var(--b2-hairline); border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
  }
  .ba-modal-v2 .ba2-row-act:hover { background: var(--b2-surface-3); color: var(--b2-text); border-color: var(--b2-hairline-strong); }
  /* Nested BOM table */
  .ba-modal-v2 .ba2-bom-tbl {
    margin: 0 14px 12px 46px;
    width: calc(100% - 60px);
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 4px;
    border-collapse: collapse;
  }
  .ba-modal-v2 .ba2-bom-tbl th, .ba-modal-v2 .ba2-bom-tbl td {
    padding: 6px 12px; font-size: 12px;
    text-align: left;
    color: var(--b2-text);
  }
  .ba-modal-v2 .ba2-bom-tbl th.r, .ba-modal-v2 .ba2-bom-tbl td.r { text-align: right; }
  .ba-modal-v2 .ba2-bom-tbl thead th {
    background: var(--b2-surface-2);
    color: var(--b2-text-3); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .ba-modal-v2 .ba2-bom-tbl td.muted { color: var(--b2-text-3); }
  /* Parts consumption panel */
  .ba-modal-v2 .ba2-parts {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 6px;
  }
  .ba-modal-v2 .ba2-parts-title {
    padding: 12px 16px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--b2-text-3);
    border-bottom: 1px solid var(--b2-hairline);
    background: var(--b2-surface-2);
  }
  .ba-modal-v2 .ba2-parts-tbl {
    width: 100%; border-collapse: collapse;
  }
  .ba-modal-v2 .ba2-parts-tbl th, .ba-modal-v2 .ba2-parts-tbl td {
    padding: 9px 16px; font-size: 13px;
    border-bottom: 1px solid var(--b2-hairline);
    text-align: left;
    color: var(--b2-text);
  }
  .ba-modal-v2 .ba2-parts-tbl th.r, .ba-modal-v2 .ba2-parts-tbl td.r {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .ba-modal-v2 .ba2-parts-tbl thead th {
    background: var(--b2-surface-1);
    color: var(--b2-text-3); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px;
  }
  .ba-modal-v2 .ba2-parts-tbl tbody tr:last-child td { border-bottom: 0; }
  .ba-modal-v2 .ba2-parts-tbl td.muted { color: var(--b2-text-3); }
  .ba-modal-v2 .ba2-parts-tbl td.crit-num { color: var(--role-critical); font-weight: 600; }
  .ba-modal-v2 .ba2-parts-tbl td.amber-num { color: var(--role-low-stock); font-weight: 600; }
  /* Footer */
  .ba-modal-v2 .ba2-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--b2-hairline);
    background: var(--b2-surface-1);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-shrink: 0;
  }
  .ba-modal-v2 .ba2-summary { color: var(--b2-text-2); font-size: 13px; }
  .ba-modal-v2 .ba2-summary strong { color: var(--b2-text); font-weight: 600; }
  .ba-modal-v2 .ba2-go {
    height: 36px; padding: 0 18px;
    font: 700 13px/1 'Avenir Next', 'Nunito Sans', sans-serif;
    letter-spacing: 0.04em;
    background: var(--role-cta-primary); color: #1a1a1d; border-color: transparent;
    border: 0; border-radius: 8px; cursor: pointer;
    font-family: inherit;
  }
  .ba-modal-v2 .ba2-go:hover { background: #ffe066; }
  .ba-modal-v2 .ba2-go:disabled { opacity: 0.4; cursor: not-allowed; }

  /* ─── BOM MODAL v2 (REDESIGN) ───
     Wide, modern bento layout. Activates when the modal carries the
     .bom-modal-v2 class. Scoped to that root so legacy .bom-modal styling
     used by other modals (parts, allocations, holds, WOP, prefs) is
     untouched. */
  .bom-modal.bom-modal-v2 {
    --b2-bg: #141416;
    --b2-surface-0: #1a1a1d;
    --b2-surface-1: #1c1c1f;
    --b2-surface-2: #242427;
    --b2-surface-3: #2c2c30;
    --b2-hairline: rgba(255,255,255,0.07);
    --b2-hairline-strong: rgba(255,255,255,0.12);
    --b2-text: #f5f5f7;
    --b2-text-2: #a1a1a6;
    --b2-text-3: #8e8e95; /* a11y: bumped to clear WCAG AA 4.5:1 on dark surface */
    --b2-text-4: #6e6e73; /* a11y: bumped — reserve for decorative fills, not body text */
    --b2-red: #ff453a;
    --b2-red-bg: rgba(255,69,58,0.12);
    --b2-red-border: rgba(255,69,58,0.32);
    --b2-amber: #ff9f0a;
    --b2-amber-bg: rgba(255,159,10,0.12);
    --b2-amber-border: rgba(255,159,10,0.32);
    --b2-blue: #0a84ff;
    --b2-blue-bg: rgba(10,132,255,0.14);
    --b2-blue-border: rgba(10,132,255,0.34);
    --b2-teal: #1199ab;
    --b2-teal-bg: rgba(var(--role-temp-bin-rgb),0.14);
    --b2-teal-border: rgba(var(--role-temp-bin-rgb),0.34);
    --b2-green: #30d158;
    --b2-green-bg: rgba(48,209,88,0.14);
    --b2-green-border: rgba(48,209,88,0.34);
    --b2-yellow: #ffd60a;
    /* Override base .bom-modal width/height + drop the per-modal padding —
       header/body/footer manage their own. */
    width: 1100px;
    max-width: 96vw;
    max-height: calc(100vh - 64px);
    padding: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a1d 0%, #131316 100%);
    border-color: var(--b2-hairline-strong);
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: 18px;
    color: var(--b2-text);
  }
  .bom-modal-v2 .bom2-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 22px 24px 18px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .bom-modal-v2 .bom2-eyebrow {
    color: var(--b2-text-3);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
  }
  .bom-modal-v2 .bom2-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--b2-text);
  }
  .bom-modal-v2 .bom2-close {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    color: var(--b2-text-2);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 18px;
    line-height: 1;
  }
  .bom-modal-v2 .bom2-close:hover {
    background: var(--b2-surface-3);
    color: var(--b2-text);
    transform: translateY(-1px);
  }
  .bom-modal-v2 .bom2-body {
    overflow: auto;
    padding: 20px 24px;
  }
  /* Status tiles row */
  .bom-modal-v2 .bom2-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
  }
  .bom-modal-v2 .bom2-tile {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: 12px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    overflow: hidden;
  }
  .bom-modal-v2 .bom2-tile::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--b2-tile-bg);
    opacity: 0.9;
    pointer-events: none;
  }
  .bom-modal-v2 .bom2-tile > * { position: relative; }
  /* Force-build banner — sits above the tiles so the override
     context is the first thing the user sees inside the BOM modal. */
  .bom-modal-v2 .bom2-force-banner {
    background: var(--b2-purple-bg);
    border: 1px solid var(--b2-purple-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .bom-modal-v2 .bom2-force-banner-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
  }
  .bom-modal-v2 .bom2-force-pill {
    display: inline-block;
    padding: 3px 8px;
    background: var(--b2-purple);
    color: #1a1a1d;
    border: 1px solid var(--b2-purple-border);
    border-radius: 4px;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.10em; text-transform: uppercase;
  }
  .bom-modal-v2 .bom2-force-qty {
    font-size: 13px; color: var(--b2-purple);
  }
  .bom-modal-v2 .bom2-force-qty strong {
    font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .bom-modal-v2 .bom2-force-banner-reason {
    font-size: 12.5px; color: var(--b2-text);
    line-height: 1.5;
  }
  .bom-modal-v2 .bom2-tile.red    { --b2-tile-bg: linear-gradient(180deg, var(--role-critical-bg), transparent 70%); border-color: var(--role-critical-border); }
  .bom-modal-v2 .bom2-tile.amber  { --b2-tile-bg: linear-gradient(180deg, var(--b2-amber-bg), transparent 70%); border-color: var(--role-low-stock-border); }
  .bom-modal-v2 .bom2-tile.blue   { --b2-tile-bg: linear-gradient(180deg, var(--b2-blue-bg), transparent 70%); border-color: var(--b2-blue-border); }
  .bom-modal-v2 .bom2-tile.teal   { --b2-tile-bg: linear-gradient(180deg, var(--b2-teal-bg), transparent 70%); border-color: var(--b2-teal-border); }
  .bom-modal-v2 .bom2-tile.muted  { --b2-tile-bg: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 70%); }
  .bom-modal-v2 .bom2-tile-row1 {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    font-weight: 600;
    color: var(--b2-text-2);
  }
  .bom-modal-v2 .bom2-tile.red   .bom2-tile-dot { background: var(--role-critical); box-shadow: 0 0 0 4px var(--role-critical-bg); }
  .bom-modal-v2 .bom2-tile.amber .bom2-tile-dot { background: var(--b2-amber); box-shadow: 0 0 0 4px var(--b2-amber-bg); }
  .bom-modal-v2 .bom2-tile.blue  .bom2-tile-dot { background: var(--b2-blue); box-shadow: 0 0 0 4px var(--b2-blue-bg); }
  .bom-modal-v2 .bom2-tile.teal  .bom2-tile-dot { background: var(--b2-teal); box-shadow: 0 0 0 4px var(--b2-teal-bg); }
  .bom-modal-v2 .bom2-tile.muted .bom2-tile-dot { background: rgba(255,255,255,0.2); }
  .bom-modal-v2 .bom2-tile-dot { width: 7px; height: 7px; border-radius: 50%; }
  .bom-modal-v2 .bom2-tile.red   .bom2-tile-row1 { color: #ff8a82; }
  .bom-modal-v2 .bom2-tile.amber .bom2-tile-row1 { color: #ffc472; }
  .bom-modal-v2 .bom2-tile.blue  .bom2-tile-row1 { color: #6cb1ff; }
  .bom-modal-v2 .bom2-tile.teal  .bom2-tile-row1 { color: #5fc8d8; }
  .bom-modal-v2 .bom2-tile-num {
    margin-top: 8px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--b2-text);
    display: flex; align-items: baseline; gap: 8px;
    font-variant-numeric: tabular-nums;
  }
  .bom-modal-v2 .bom2-tile-unit {
    font-size: 13px;
    color: var(--b2-text-3);
    font-weight: 500;
    letter-spacing: 0;
  }
  .bom-modal-v2 .bom2-tile-delta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--b2-text-3);
  }
  .bom-modal-v2 .bom2-progress {
    margin-top: 10px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .bom-modal-v2 .bom2-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--role-low-stock);
    transition: width 0.3s ease;
  }
  /* Bento grid */
  .bom-modal-v2 .bom2-bento {
    display: grid;
    grid-template-columns: 312px 1fr;
    grid-template-rows: 168px 1fr;
    grid-template-areas: "inv comp" "plan comp";
    gap: 14px;
    height: 400px;
  }
  .bom-modal-v2 .bom2-inv  { grid-area: inv; }
  .bom-modal-v2 .bom2-plan { grid-area: plan; }
  .bom-modal-v2 .bom2-comp { grid-area: comp; }
  .bom-modal-v2 .bom2-panel {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 12px;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
  }
  .bom-modal-v2 .bom2-panel-title {
    padding: 12px 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--b2-text-3);
    font-weight: 600;
    border-bottom: 1px solid var(--b2-hairline);
    display: flex; justify-content: space-between; align-items: center;
  }
  .bom-modal-v2 .bom2-dim {
    color: var(--b2-text-3);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
  }
  .bom-modal-v2 .bom2-scroll {
    overflow: auto;
    min-height: 0;
  }
  .bom-modal-v2 .bom2-scroll::-webkit-scrollbar,
  .bom-modal-v2 .bom2-body::-webkit-scrollbar { width: 10px; height: 10px; }
  .bom-modal-v2 .bom2-scroll::-webkit-scrollbar-thumb,
  .bom-modal-v2 .bom2-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  /* KPI list */
  .bom-modal-v2 .bom2-kpi {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--b2-hairline);
  }
  .bom-modal-v2 .bom2-kpi:last-child { border-bottom: 0; }
  .bom-modal-v2 .bom2-k-label { font-size: 13px; color: var(--b2-text-2); }
  .bom-modal-v2 .bom2-k-value {
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--b2-text);
  }
  /* In Bin value stacks its number over an optional "QB N" sub-label that
     surfaces the posted-but-not-shipped divergence from QB on-hand. */
  .bom-modal-v2 .bom2-k-inbin { display: flex; flex-direction: column; align-items: flex-end; }
  .bom-modal-v2 .bom2-k-sub {
    font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--b2-text-3); cursor: help; margin-top: 1px;
    font-variant-numeric: tabular-nums;
  }
  .bom-modal-v2 .bom2-allocated-clickable { cursor: pointer; transition: color 0.15s; }
  .bom-modal-v2 .bom2-allocated-clickable:hover { color: #fdba74; }
  /* Tables */
  .bom-modal-v2 .bom2-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
  }
  .bom-modal-v2 .bom2-table thead th {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--b2-text-3);
    font-weight: 600;
    text-align: right;
    padding: 10px 10px;
    background: var(--b2-surface-2);
    border-bottom: 1px solid var(--b2-hairline);
    position: sticky; top: 0; z-index: 1;
  }
  .bom-modal-v2 .bom2-table thead th.l { text-align: left; }
  .bom-modal-v2 .bom2-table tbody td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--b2-hairline);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--b2-text);
  }
  .bom-modal-v2 .bom2-table tbody td.l { text-align: left; }
  .bom-modal-v2 .bom2-table tbody tr.bom2-row {
    cursor: pointer;
    transition: background 0.14s;
  }
  .bom-modal-v2 .bom2-table tbody tr.bom2-row:hover {
    background: rgba(255,255,255,0.025);
  }
  .bom-modal-v2 .bom2-table tbody tr.bom2-row.expanded {
    background: rgba(10,132,255,0.06);
  }
  .bom-modal-v2 .bom2-table tbody tr.bom2-row.expanded td { border-bottom-color: transparent; }
  .bom-modal-v2 .bom2-comp-cell {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: center;
  }
  .bom-modal-v2 .bom2-caret {
    color: var(--b2-text-3);
    width: 14px; height: 14px;
    transition: transform 0.2s ease;
    line-height: 1;
    font-size: 12px;
    user-select: none;
  }
  .bom-modal-v2 tr.bom2-row.expanded .bom2-caret {
    transform: rotate(90deg);
    color: var(--role-building-now);
  }
  .bom-modal-v2 .bom2-comp-name { font-weight: 600; color: var(--b2-text); letter-spacing: -0.01em; }
  .bom-modal-v2 .bom2-comp-bin { font-size: 11px; color: var(--b2-text-3); margin-top: 2px; }
  .bom-modal-v2 .bom2-pos { color: var(--role-ready); }
  .bom-modal-v2 .bom2-neg { color: var(--role-critical); }
  .bom-modal-v2 .bom2-detail-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--b2-hairline) !important;
    background: rgba(10,132,255,0.04);
  }
  .bom-modal-v2 .bom2-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 12px 14px 14px 38px;
  }
  .bom-modal-v2 .bom2-dl {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--b2-text-3);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .bom-modal-v2 .bom2-dv {
    font-size: 13px;
    color: var(--b2-text);
    font-variant-numeric: tabular-nums;
  }
  /* Status pill on row */
  .bom-modal-v2 .bom2-status-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    font-size: 11px; font-weight: 600;
    border-radius: 999px;
  }
  .bom-modal-v2 .bom2-status-pill.ok    { background: var(--role-ready-bg); color: var(--role-ready); border: 1px solid var(--role-ready-border); }
  .bom-modal-v2 .bom2-status-pill.warn  { background: var(--role-low-stock-bg); color: var(--role-low-stock); border: 1px solid var(--role-low-stock-border); }
  .bom-modal-v2 .bom2-status-pill.crit  { background: var(--role-critical-bg);   color: var(--role-critical);   border: 1px solid var(--role-critical-border); }
  /* Planned-table tweaks */
  .bom-modal-v2 .bom2-planned-table thead th {
    position: static;
    background: transparent;
    padding: 8px 14px;
  }
  .bom-modal-v2 .bom2-planned-table tbody td { padding: 10px 14px; }
  .bom-modal-v2 .bom2-planned-table tbody tr:last-child td { border-bottom: 0; }
  .bom-modal-v2 .bom2-planned-table tbody tr:hover { background: rgba(var(--role-temp-bin-rgb),0.06); }
  .bom-modal-v2 .bom2-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--b2-text-3);
    font-size: 12px;
    font-weight: 600;
  }
  /* FOOTER */
  .bom-modal-v2 .bom2-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--b2-hairline);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
  }
  .bom-modal-v2 .bom2-footer-left {
    display: flex; gap: 14px; align-items: center;
  }
  .bom-modal-v2 .bom2-footer-qty-label {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--b2-text-3); font-weight: 600;
  }
  .bom-modal-v2 .bom2-footer-actions {
    display: flex; gap: 10px; align-items: center;
  }
  .bom-modal-v2 .bom2-footer-hint {
    color: var(--b2-text-3); font-size: 12px;
    display: flex; align-items: center; gap: 6px;
  }
  .bom-modal-v2 .bom2-footer-hint strong { color: var(--role-cta-primary); font-weight: 700; }
  /* Stepper (footer variant) */
  .bom-modal-v2 .bom2-stepper {
    display: grid;
    grid-template-columns: 36px 64px 36px;
    align-items: stretch;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    overflow: hidden;
    height: 44px;
  }
  .bom-modal-v2 .bom2-stepper button {
    background: transparent; border: 0;
    color: var(--b2-text-2);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
  }
  .bom-modal-v2 .bom2-stepper button:hover { background: var(--b2-surface-3); color: var(--b2-text); }
  .bom-modal-v2 .bom2-stepper button:active { transform: scale(0.92); }
  .bom-modal-v2 .bom2-stepper button:disabled { color: var(--b2-text-4); cursor: not-allowed; }
  .bom-modal-v2 .bom2-stepper input {
    background: transparent; border: 0;
    color: var(--role-cta-primary);
    font: 600 18px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, sans-serif;
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
    letter-spacing: -0.02em;
    outline: none;
  }
  .bom-modal-v2 .bom2-stepper input::-webkit-outer-spin-button,
  .bom-modal-v2 .bom2-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  /* Quick chips */
  .bom-modal-v2 .bom2-quick-chips {
    display: flex; gap: 6px;
    align-self: flex-end;
    padding-bottom: 4px;
  }
  .bom-modal-v2 .bom2-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    background: var(--b2-surface-3);
    color: var(--b2-text-2);
    border: 1px solid var(--b2-hairline);
    cursor: pointer;
    transition: background 0.15s;
  }
  .bom-modal-v2 .bom2-chip:hover { background: var(--b2-surface-2); color: var(--b2-text); }
  .bom-modal-v2 .bom2-chip.active {
    background: rgba(255,214,10,0.14);
    color: var(--role-cta-primary);
    border-color: rgba(255,214,10,0.35);
  }
  /* Buttons */
  .bom-modal-v2 .bom2-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", inherit;
    padding: 0 18px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 0.12s, background 0.15s, box-shadow 0.15s, opacity 0.15s;
    letter-spacing: -0.01em;
  }
  .bom-modal-v2 .bom2-btn-secondary {
    background: var(--b2-surface-2);
    color: var(--b2-text);
    border: 1px solid var(--b2-hairline-strong);
  }
  .bom-modal-v2 .bom2-btn-secondary:hover { background: var(--b2-surface-3); transform: translateY(-1px); }
  .bom-modal-v2 .bom2-btn-primary {
    background: linear-gradient(180deg, #ffe04d, #ffcb05);
    color: #1a1300;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 6px 16px -6px rgba(255,203,5,0.6),
      0 0 0 1px rgba(255,203,5,0.4);
  }
  .bom-modal-v2 .bom2-btn-primary:hover { transform: translateY(-1px); }
  .bom-modal-v2 .bom2-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
  /* Narrow viewport: collapse the bento + tiles to a single column */
  @media (max-width: 900px) {
    .bom-modal.bom-modal-v2 { width: 96vw; }
    .bom-modal-v2 .bom2-tiles { grid-template-columns: repeat(2, 1fr); }
    .bom-modal-v2 .bom2-bento {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas: "inv" "plan" "comp";
      height: auto;
    }
    .bom-modal-v2 .bom2-comp { min-height: 320px; }
    .bom-modal-v2 .bom2-footer { flex-wrap: wrap; }
  }

  /* ─── PLANNED BUILD MODAL VARIANT ───
     Reuses bom-modal-v2 palette, header, tiles, panel, button, and footer
     stepper styles. Adds: narrower width, no bento grid (single full-width
     panel), planned-builds table editing-row treatment, date input styled
     like the stepper, Delete (red outline) + Save (yellow outline) buttons. */
  .bom-modal.bom-modal-v2.bom-modal-pb {
    width: 760px;
    max-width: 96vw;
  }
  .bom-modal-v2.bom-modal-pb .bom2-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Single full-width panel inside body */
  .bom-modal-v2.bom-modal-pb .bom2-pb-panel-right {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--b2-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-total {
    color: #25b8cc;
  }
  /* Planned-builds table — non-sticky head, looser padding */
  .bom-modal-v2.bom-modal-pb .bom2-pb-table thead th {
    position: static;
    background: transparent;
    padding: 10px 14px;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody td {
    padding: 12px 14px;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody tr {
    transition: background 0.15s ease;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody tr:hover {
    background: rgba(255,255,255,0.025);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody tr.editing {
    background: rgba(var(--role-temp-bin-rgb),0.10);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody tr.editing:hover {
    background: rgba(var(--role-temp-bin-rgb),0.14);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-table tbody tr.editing td {
    border-bottom-color: rgba(var(--role-temp-bin-rgb),0.18);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-date {
    color: var(--b2-text);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-date.editing {
    color: #25b8cc;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-sub {
    font-size: 11px;
    color: var(--b2-text-3);
    margin-top: 2px;
  }
  /* "Editing" pill */
  .bom-modal-v2.bom-modal-pb .bom2-pb-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 8px;
    background: #25b8cc;
    color: #002a32;
    border: 1px solid rgba(37,184,204,0.85);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-qty-pos {
    color: #25b8cc;
    font-weight: 600;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-qty-dim {
    color: var(--b2-text-3);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-qty-unit {
    color: var(--b2-text-3);
    font-size: 11px;
    margin-left: 4px;
    font-weight: 500;
  }
  /* Footer for the planned-build modal — fields on the left, three actions
     on the right. Uses the same stepper as the BOM modal, with a date picker
     beside it. */
  .bom-modal-v2.bom-modal-pb .bom2-pb-footer-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-footer-actions {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  /* Date input — same surface as the stepper, yellow numerals */
  .bom-modal-v2.bom-modal-pb .bom2-pb-date-input {
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 10px;
    padding: 0 12px;
    height: 44px;
    color: var(--role-cta-primary);
    font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Helvetica, sans-serif;
    letter-spacing: -0.01em;
    width: 170px;
    color-scheme: dark;
    outline: none;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-date-input:focus {
    outline: 2px solid rgba(255,214,10,0.35);
    outline-offset: 1px;
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-date-input::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.9);
    opacity: 0.8;
    cursor: pointer;
  }
  /* Footer buttons unique to the planned-build modal */
  .bom-modal-v2.bom-modal-pb .bom2-pb-btn-danger {
    background: transparent;
    color: var(--role-critical);
    border: 1px solid var(--role-critical-border);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-btn-danger:hover {
    background: var(--role-critical-bg);
    transform: translateY(-1px);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-btn-ghost {
    background: transparent;
    color: var(--role-cta-primary);
    border: 1px solid rgba(255,214,10,0.4);
  }
  .bom-modal-v2.bom-modal-pb .bom2-pb-btn-ghost:hover {
    background: rgba(255,214,10,0.08);
    transform: translateY(-1px);
  }
  /* Mute the tile for zero values (auto-applied via .muted) */
  .bom-modal-v2 .bom2-tile.muted .bom2-tile-num { color: var(--b2-text-3); }
  .bom-modal-v2 .bom2-tile.muted .bom2-tile-row1 { color: var(--b2-text-3); }
  .bom-modal-v2 .bom2-tile.muted .bom2-tile-dot { display: none; }
  @media (max-width: 760px) {
    .bom-modal-v2.bom-modal-pb .bom2-tiles { grid-template-columns: repeat(2, 1fr); }
    .bom-modal-v2.bom-modal-pb .bom2-pb-footer-left { flex-direction: column; gap: 10px; }
    .bom-modal-v2.bom-modal-pb .bom2-pb-footer-actions { flex-wrap: wrap; }
  }

  /* ─── WOP MODAL TABLE ───
     Used by openWopModal. Reuses the .bom-overlay/.bom-modal shell so the
     modal itself looks consistent with the rest of the dashboard's modals. */
  .modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .modal-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .modal-table thead th.r { text-align: right; }
  .modal-table tbody td {
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    vertical-align: top;
  }
  .modal-table tbody td.r {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .modal-table tbody tr:last-child td {
    border-bottom: none;
  }
  .modal-table tbody td.sku-cell {
    font-family: 'SF Mono', Monaco, monospace;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
  }
  .modal-table tbody td.qty-cell {
    color: var(--status-low);
    font-weight: 800;
  }
  .modal-table tbody td.parts-cell {
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    line-height: 1.5;
  }
  .modal-totals {
    display: flex;
    justify-content: space-between;
    padding: 14px 12px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
  }
  .modal-totals .total-num {
    color: var(--status-low);
    font-weight: 800;
  }
  .bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .bom-table th {
    text-align: left;
    padding: 8px 12px;
    color: rgba(255,255,255,0.4);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .bom-table th.r { text-align: right; }
  .bom-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
  }
  .bom-table td.r { text-align: right; }
  .bom-table td.comp-name {
    font-weight: 700;
    color: var(--white);
  }
  .bom-table td.bom-bin,
  .bom-table .bom-bin {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    font-family: monospace, 'Courier New';
    letter-spacing: 0.04em;
  }
  .bom-total {
    color: var(--yellow);
    font-weight: 800;
  }
  .bom-qty-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .bom-qty-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
  }
  .bom-qty-input {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: var(--yellow);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 8px 16px;
    width: 140px;
    text-align: center;
    outline: none;
    transition: all 0.2s;
    -moz-appearance: textfield;
  }
  .bom-qty-input::-webkit-outer-spin-button,
  .bom-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .bom-qty-input:focus {
    border-color: var(--teal);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(var(--role-temp-bin-rgb),0.15);
  }
  .bom-suggested {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
  }
  .bom-suggested strong {
    color: rgba(255,255,255,0.5);
  }
  .bom-print-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    background: var(--yellow);
    color: var(--dark-gray);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
  }
  .bom-print-btn:hover {
    background: #fae06a;
    transform: translateY(-1px);
  }
  .cancel-build-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(var(--role-critical-rgb),0.3);
    background: rgba(var(--role-critical-rgb),0.08);
    color: var(--role-critical);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
  }
  .cancel-build-btn:hover {
    background: rgba(var(--role-critical-rgb),0.15);
    border-color: rgba(var(--role-critical-rgb),0.5);
  }
  .reprint-ticket-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.35);
    background: rgba(var(--role-temp-bin-rgb),0.08);
    color: var(--teal);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
  }
  .reprint-ticket-btn:hover {
    background: rgba(var(--role-temp-bin-rgb),0.16);
    border-color: rgba(var(--role-temp-bin-rgb),0.55);
  }

  /* ─── MODAL LOADING STATE ─── */
  /* Shown inside any modal that opens before its data is ready. Gives the
     user immediate feedback that the click registered. After ~3 seconds, a
     yellow "Airtable slow" note fades in so the user knows it's not stuck. */
  .modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px 48px;
    gap: 14px;
    min-height: 160px;
  }
  .modal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: modalSpin 0.8s linear infinite;
  }
  @keyframes modalSpin {
    to { transform: rotate(360deg); }
  }
  .modal-loading-text {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .modal-loading-slow {
    font-size: 12px;
    font-weight: 600;
    color: var(--yellow);
    background: rgba(var(--role-cta-primary-rgb),0.08);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.3);
    border-radius: 6px;
    padding: 8px 14px;
    margin-top: 6px;
    max-width: 320px;
    text-align: center;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .modal-loading-slow.visible {
    opacity: 1;
  }

  /* ─── BUILD ALL MODAL ─── */
  .ba-sku-row {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 10px 0;
    transition: opacity 0.2s;
  }
  .ba-sku-row.ba-critical {
    padding-bottom: 20px;
  }
  .ba-sku-header {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ba-check-wrap {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .ba-check {
    width: 16px;
    height: 16px;
    accent-color: var(--teal);
    cursor: pointer;
  }
  .ba-sku-info {
    flex: 1;
    min-width: 0;
  }
  .ba-sku-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ba-sku-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
  }
  .ba-sku-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .ba-qty-input {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--yellow);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    padding: 4px 8px;
    width: 65px;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
  }
  .ba-qty-input::-webkit-outer-spin-button,
  .ba-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .ba-qty-input:focus {
    border-color: var(--teal);
  }
  .ba-bom-toggle {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.1);
    background: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.15s;
  }
  .ba-bom-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
  }
  .ba-bom-detail {
    padding: 8px 0 4px 26px;
  }
  .ba-bom-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
  }
  .ba-bom-table th {
    text-align: left;
    padding: 4px 8px;
    color: rgba(255,255,255,0.3);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ba-bom-table th.r { text-align: right; }
  .ba-bom-table td {
    padding: 3px 8px;
    color: rgba(255,255,255,0.5);
  }
  .ba-bom-table td.r { text-align: right; }
  .ba-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  /* ─── BUILD ALL GROUPS ─── */
  .ba-group {
    margin-bottom: 4px;
  }
  .ba-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    border-radius: 8px;
    transition: background 0.15s;
    user-select: none;
    -webkit-user-select: none;
  }
  .ba-group-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
    min-width: 0;
  }
  .ba-group-header:hover {
    background: rgba(255,255,255,0.03);
  }
  .ba-group-header.ba-group-critical {
    background: rgba(var(--role-critical-rgb),0.04);
  }
  .ba-group-header.ba-group-critical:hover {
    background: rgba(var(--role-critical-rgb),0.08);
  }
  .ba-group-arrow {
    font-size: 12px;
    color: rgba(255,255,255,0.3);
    width: 14px;
    flex-shrink: 0;
  }
  .ba-group-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .ba-group-count {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.25);
  }
  .ba-group-crit {
    flex-shrink: 0;
  }
  .ba-group-body {
    padding-left: 6px;
    border-left: 2px solid rgba(255,255,255,0.04);
    margin-left: 14px;
  }
  .ba-summary {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
  }
  .ba-parts-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
  }
  .ba-parts-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 10px;
  }
  .ba-parts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
  }
  .ba-part-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
  }
  .ba-part-name {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ba-part-detail {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
  }
  .ba-part-qty {
    font-size: 13px;
    font-weight: 800;
    color: var(--yellow);
  }
  .ba-part-usage {
    font-size: 10px;
    font-weight: 700;
    min-width: 32px;
    text-align: right;
  }
  /* ─── LOGIN GATE ─── */
  .login-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  .login-box {
    text-align: center;
    max-width: 360px;
    width: 100%;
    padding: 0 24px;
  }
  .login-logo {
    height: 44px;
    margin-bottom: 24px;
  }
  .login-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
  }
  .login-input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--white);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    text-align: center;
    letter-spacing: 0.04em;
    transition: all 0.2s;
    margin-bottom: 14px;
  }
  .login-input::placeholder {
    color: rgba(255,255,255,0.2);
    font-weight: 500;
  }
  .login-input:focus {
    border-color: var(--teal);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(var(--role-temp-bin-rgb),0.15);
  }
  .login-input.error {
    border-color: var(--role-critical);
    box-shadow: 0 0 0 3px rgba(var(--role-critical-rgb),0.15);
  }
  .login-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: var(--yellow);
    color: var(--dark-gray);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.2s;
  }
  .login-btn:hover {
    background: #fae06a;
    transform: translateY(-1px);
  }
  .login-error {
    color: var(--role-critical);
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .login-error.show { opacity: 1; }
  /* Static version + copyright stamp, pinned centered at the bottom of the
     login screen. Non-interactive (not the changelog trigger). */
  .login-footer {
    position: absolute;
    bottom: 22px;
    left: 0; right: 0;
    text-align: center;
    color: rgba(255,255,255,0.28);
    line-height: 1.7;
    pointer-events: none;
    user-select: none;
  }
  .login-version {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
  }
  .login-copyright {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.2);
  }
  .dashboard-wrap { display: none; }
  .dashboard-wrap.unlocked { display: block; }

  /* ─── USER INFO IN HEADER ─── */
  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    position: relative;
  }
  .user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    transition: all 0.15s;
  }
  .user-trigger:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
  }
  .user-info.open .user-trigger {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
  }
  .user-avatar-wrap {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
  }
  .user-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.3);
    display: block;
  }
  .user-photo-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--role-temp-bin-rgb),0.18);
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.3);
    display: block;
  }
  /* Red unread-notification dot. Positioned in the avatar's top-right corner.
     Toggled via display:block when there's at least one unread notification
     visible to the current user. */
  .user-notif-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--role-critical);
    border: 2px solid #141415;
    box-shadow: 0 0 0 1px rgba(var(--role-critical-rgb),0.4);
  }
  .user-name {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
  }
  .user-trigger-caret {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    transition: transform 0.15s;
  }
  .user-info.open .user-trigger-caret {
    transform: rotate(180deg);
  }
  /* Dropdown panel — anchored beneath the user trigger, right-aligned. */
  .user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    background: #1a1c1d;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    z-index: 6000;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s, transform 0.15s;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    overflow: hidden;
    /* Parent .header-right sets text-align:right for its column children.
       Reset here so dropdown content (notification rows, footer items)
       inherits left-alignment as expected. */
    text-align: left;
  }
  /* Two panels live inside #userInfoMenu — notifications (bell) and
     account (avatar). The parent gets a per-panel state class so the
     correct one opens. Opening one auto-closes the other (handled in JS). */
  .user-info.notif-open .user-menu-panel.is-notif,
  .user-info.account-open .user-menu-panel.is-account {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  /* Account panel — System status block + menu items. Slightly wider than the
     old Preferences/Log-out-only panel so the status rows breathe. */
  .user-menu-panel.is-account {
    width: 268px;
  }
  .user-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .user-menu-section-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
  }
  .user-menu-mark-all {
    background: transparent;
    border: none;
    color: var(--teal);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.15s;
  }
  .user-menu-mark-all:hover {
    background: rgba(var(--role-temp-bin-rgb),0.12);
  }
  .user-menu-mark-all:disabled {
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
  }
  .user-menu-mark-all:disabled:hover {
    background: transparent;
  }
  .user-menu-list {
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 0;
  }
  .user-menu-empty {
    padding: 24px 14px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
  }
  /* Notification row — clickable; unread variant has a left-side accent */
  .user-menu-notif {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.12s;
    position: relative;
  }
  .user-menu-notif:hover {
    background: rgba(255,255,255,0.04);
  }
  .user-menu-notif.unread {
    background: rgba(var(--role-temp-bin-rgb),0.05);
    border-left-color: var(--teal);
  }
  .user-menu-notif.unread:hover {
    background: rgba(var(--role-temp-bin-rgb),0.10);
  }
  .user-menu-notif-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
  }
  .user-menu-notif-icon.type-rts_graduation {
    background: rgba(var(--role-ready-rgb),0.14);
    color: var(--role-ready);
  }
  .user-menu-notif-icon.type-custom_marriage_complete {
    background: rgba(var(--role-on-po-rgb),0.16);
    color: var(--role-on-po);
  }
  .user-menu-notif-icon.type-build_complete {
    background: rgba(var(--role-temp-bin-rgb),0.18);
    color: var(--teal);
  }
  .user-menu-notif-icon.type-critical_stock_alert {
    background: rgba(var(--role-critical-rgb),0.16);
    color: var(--role-critical);
  }
  .user-menu-notif-icon.type-labels_applied {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    color: var(--yellow);
  }
  .user-menu-notif-icon.type-labels_returned {
    background: rgba(var(--role-allocated-qty-rgb),0.16);
    color: var(--role-allocated-qty);
  }
  .user-menu-notif-icon.type-sent_to_print_shop {
    background: rgba(var(--role-temp-bin-rgb),0.18);
    color: var(--teal);
  }
  .user-menu-notif-body {
    flex: 1;
    min-width: 0;
  }
  .user-menu-notif-title {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 3px;
  }
  /* Two-tone title: bold prefix (identifier) + muted suffix (description). */
  .user-menu-notif-prefix {
    font-weight: 800;
    color: var(--white);
  }
  .user-menu-notif-suffix {
    font-weight: 500;
    color: rgba(255,255,255,0.55);
  }
  .user-menu-notif-time {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
  }
  /* Dismiss button — red outline, only shown on unread rows. Stops click
     propagation so clicking it doesn't also open the row's modal. */
  .user-menu-notif-dismiss {
    flex-shrink: 0;
    align-self: center;
    background: transparent;
    border: 1px solid rgba(var(--role-critical-rgb),0.5);
    color: var(--role-critical);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .user-menu-notif-dismiss:hover {
    background: rgba(var(--role-critical-rgb),0.12);
    border-color: rgba(var(--role-critical-rgb),0.75);
    color: #fca5a5;
  }

  /* ─── NOTIFICATION PANEL — b2 REDESIGN ──────────────────────────────────
     Refreshed panel that matches the rest of the app's b2 vocabulary
     (surfaces, hairlines, system font, calm status pills, ghost actions).
     Scoped to .user-menu-panel.is-notif so the account panel (.is-account)
     keeps the legacy styling. The outer .user-menu-panel rules still
     drive positioning + opening animation; these override the per-panel
     surface + content styling. */
  .user-menu-panel.is-notif {
    background: var(--b2-surface-1, #1c1c1f);
    border: 1px solid var(--b2-hairline-strong, rgba(255,255,255,0.12));
    border-radius: 14px;
    box-shadow:
      0 24px 64px rgba(0,0,0,0.55),
      0 2px 6px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    display: flex; flex-direction: column;
    overflow: hidden;
    color: var(--b2-text, #f5f5f7);
  }
  .user-menu-panel.is-notif .user-menu-header {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--b2-hairline, rgba(255,255,255,0.07));
    display: flex; align-items: center; justify-content: space-between;
  }
  .user-menu-panel.is-notif .user-menu-section-title {
    font-size: 13px; font-weight: 600; letter-spacing: -.005em;
    text-transform: none; color: var(--b2-text, #f5f5f7);
  }
  /* Unread pill — yellow tinted, sits next to the title. */
  .user-menu-panel.is-notif .notif-unread-pill {
    display: inline-flex; align-items: center;
    margin-left: 10px; height: 18px; padding: 0 7px;
    background: var(--b2-yellow-bg, rgba(255,214,10,0.12));
    color: var(--b2-yellow, #ffd60a);
    border: 1px solid rgba(var(--b2-yellow-rgb, 255,214,10), 0.45);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  /* Mark all read — now a quiet ghost action instead of the bright teal link. */
  .user-menu-panel.is-notif .user-menu-mark-all {
    background: transparent; border: 0;
    color: var(--b2-text-3, #6e6e73);
    font: inherit; font-size: 11.5px; font-weight: 500;
    letter-spacing: 0; cursor: pointer;
    padding: 4px 6px; margin-right: -6px;
    border-radius: 5px;
    transition: color 0.12s, background 0.12s;
  }
  .user-menu-panel.is-notif .user-menu-mark-all:hover {
    color: var(--b2-text, #f5f5f7);
    background: var(--b2-surface-3, #2c2c30);
  }
  .user-menu-panel.is-notif .user-menu-mark-all:disabled {
    color: var(--b2-text-4, #6e6e73);
    background: transparent;
    cursor: not-allowed;
  }

  /* Filter chips row. */
  .user-menu-panel.is-notif .notif-filters {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--b2-hairline, rgba(255,255,255,0.07));
    background: var(--b2-surface-0, #1a1a1d);
  }
  .user-menu-panel.is-notif .notif-chip {
    /* Tier C rounded pill — canonical font 11.5/600/no spacing/no transform.
       Was 500 weight; bumped to 600 to match .od-badge / .ib-status-pill. */
    padding: 4px 10px; font-size: 11.5px; font-weight: 600;
    background: var(--b2-surface-2, #242427);
    border: 1px solid var(--b2-hairline, rgba(255,255,255,0.07));
    border-radius: 999px;
    color: var(--b2-text-2, #a1a1a6);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .user-menu-panel.is-notif .notif-chip:hover {
    background: var(--b2-surface-3, #2c2c30); color: var(--b2-text, #f5f5f7);
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="all"] {
    background: var(--b2-yellow-bg, rgba(255,214,10,0.12));
    color: var(--b2-yellow, #ffd60a);
    border-color: var(--b2-yellow-border, rgba(255,214,10,0.32));
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="build"] {
    background: var(--b2-teal-bg, rgba(17,153,171,0.14));
    color: var(--b2-teal, #1199ab);
    border-color: var(--b2-teal-border, rgba(17,153,171,0.34));
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="order"] {
    background: var(--b2-green-bg, rgba(48,209,88,0.14));
    color: var(--b2-green, #30d158);
    border-color: var(--b2-green-border, rgba(48,209,88,0.30));
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="alert"] {
    background: var(--b2-red-bg, rgba(255,69,58,0.12));
    color: var(--b2-red, #ff453a);
    border-color: var(--b2-red-border, rgba(255,69,58,0.32));
  }
  .user-menu-panel.is-notif .notif-chip.active {
    background: var(--b2-text, #f5f5f7);
    color: var(--b2-bg, #141416);
    border-color: transparent;
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="all"].active {
    background: var(--b2-yellow, #ffd60a);
    color: #1a1300;
    border-color: transparent;
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="build"].active {
    background: var(--b2-teal, #1199ab); color: #fff;
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="order"].active {
    background: var(--b2-green, #30d158); color: #0a2410;
  }
  .user-menu-panel.is-notif .notif-chip[data-filter="alert"].active {
    background: var(--b2-red, #ff453a); color: #fff;
  }
  .user-menu-panel.is-notif .notif-chip-ct {
    /* Tier D nested count chip — canonical font 10/700/tabular-nums. Was
       600 weight; bumped to 700 to match .cat-chip-count and the rest of
       the count-chip vocabulary. */
    color: currentColor; opacity: 0.6; font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .user-menu-panel.is-notif .notif-chip.active .notif-chip-ct { opacity: 0.7; }

  /* Notification list — overrides .user-menu-list inside the notif panel. */
  .user-menu-panel.is-notif .user-menu-list {
    max-height: 460px;
    overflow-y: auto;
    padding: 4px 0 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--b2-surface-3, #2c2c30) transparent;
  }
  .user-menu-panel.is-notif .user-menu-list::-webkit-scrollbar { width: 8px; }
  .user-menu-panel.is-notif .user-menu-list::-webkit-scrollbar-thumb {
    background: var(--b2-surface-3, #2c2c30); border-radius: 999px;
    border: 2px solid var(--b2-surface-1, #1c1c1f);
  }
  .user-menu-panel.is-notif .user-menu-empty {
    padding: 34px 18px 30px;
    text-align: center;
    color: var(--b2-text-3, #6e6e73);
    font-size: 12.5px; font-weight: 500;
  }

  /* Sticky group header (Today / Earlier). */
  .user-menu-panel.is-notif .notif-group {
    position: sticky; top: 0; z-index: 1;
    padding: 10px 16px 6px 22px;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    font-weight: 700; color: var(--b2-text-3, #6e6e73);
    background: linear-gradient(var(--b2-surface-1, #1c1c1f) 70%, transparent);
    display: flex; align-items: baseline; gap: 8px;
  }
  .user-menu-panel.is-notif .notif-group .ct {
    font-size: 10px; color: var(--b2-text-4, #48484a);
    font-weight: 600; letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
  }

  /* Notification row. */
  .user-menu-panel.is-notif .notif-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px 10px 22px;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
    border-left: 0; /* clear legacy 3px accent */
  }
  .user-menu-panel.is-notif .notif-row:hover {
    background: rgba(255,255,255,0.025);
  }
  .user-menu-panel.is-notif .notif-row:hover .notif-dismiss { opacity: 1; }
  .user-menu-panel.is-notif .notif-row.unread::before {
    content: ""; position: absolute;
    left: 10px; top: 18px;
    width: 5px; height: 5px; border-radius: 999px;
    background: var(--b2-yellow, #ffd60a);
    box-shadow: 0 0 0 2px rgba(255,214,10,0.18);
  }
  .user-menu-panel.is-notif .notif-row.read .notif-title-prefix { color: var(--b2-text-2, #a1a1a6); }
  .user-menu-panel.is-notif .notif-row.read .notif-icon { opacity: 0.55; }

  /* Lucide-style status icon — colored pill background. */
  .user-menu-panel.is-notif .notif-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid transparent;
    margin-top: 1px;
  }
  .user-menu-panel.is-notif .notif-icon svg { width: 16px; height: 16px; stroke-width: 1.8; }
  .user-menu-panel.is-notif .notif-icon.build  { background: var(--b2-teal-bg, rgba(17,153,171,0.14));  color: var(--b2-teal, #1199ab);  border-color: var(--b2-teal-border, rgba(17,153,171,0.34)); }
  .user-menu-panel.is-notif .notif-icon.rts    { background: var(--b2-green-bg, rgba(48,209,88,0.14));  color: var(--b2-green, #30d158); border-color: var(--b2-green-border, rgba(48,209,88,0.30)); }
  .user-menu-panel.is-notif .notif-icon.custom { background: var(--b2-purple-bg, rgba(191,90,242,0.14)); color: var(--b2-purple, #bf5af2); border-color: var(--b2-purple-border, rgba(191,90,242,0.32)); }
  .user-menu-panel.is-notif .notif-icon.alert  { background: var(--b2-red-bg, rgba(255,69,58,0.12));    color: var(--b2-red, #ff453a);    border-color: var(--b2-red-border, rgba(255,69,58,0.32)); }
  .user-menu-panel.is-notif .notif-icon.order  { background: var(--b2-blue-bg, rgba(10,132,255,0.14));  color: var(--b2-blue, #0a84ff);   border-color: var(--b2-blue-border, rgba(10,132,255,0.34)); }
  .user-menu-panel.is-notif .notif-icon.print  { background: var(--b2-amber-bg, rgba(255,159,10,0.12)); color: var(--b2-amber, #ff9f0a);  border-color: var(--b2-amber-border, rgba(255,159,10,0.32)); }
  .user-menu-panel.is-notif .notif-icon.return { background: var(--b2-amber-bg, rgba(255,159,10,0.12)); color: var(--b2-amber, #ff9f0a);  border-color: var(--b2-amber-border, rgba(255,159,10,0.32)); }

  .user-menu-panel.is-notif .notif-body { min-width: 0; }
  .user-menu-panel.is-notif .notif-title {
    font-size: 13px; line-height: 1.4;
    color: var(--b2-text-2, #a1a1a6);
    overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  }
  .user-menu-panel.is-notif .notif-title-prefix {
    color: var(--b2-text, #f5f5f7); font-weight: 600; letter-spacing: -.005em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
  }
  .user-menu-panel.is-notif .notif-title-suffix { color: var(--b2-text-2, #a1a1a6); }
  .user-menu-panel.is-notif .notif-meta {
    margin-top: 2px;
    color: var(--b2-text-3, #6e6e73); font-size: 11px;
    display: inline-flex; align-items: center; gap: 6px;
  }

  /* Ghost dismiss — appears on row hover. */
  .user-menu-panel.is-notif .notif-dismiss {
    width: 24px; height: 24px; padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--b2-text-3, #6e6e73);
    cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s;
    align-self: center;
  }
  .user-menu-panel.is-notif .notif-dismiss:hover {
    background: var(--b2-surface-3, #2c2c30);
    color: var(--b2-text, #f5f5f7);
    border-color: var(--b2-hairline-strong, rgba(255,255,255,0.12));
  }
  .user-menu-panel.is-notif .notif-dismiss:focus-visible { opacity: 1; }
  .user-menu-panel.is-notif .notif-dismiss svg { width: 13px; height: 13px; stroke-width: 2; }

  /* Footer with View all + Preferences. */
  .user-menu-panel.is-notif .notif-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--b2-hairline, rgba(255,255,255,0.07));
    background: var(--b2-surface-0, #1a1a1d);
    display: flex; align-items: center; justify-content: space-between;
  }
  .user-menu-panel.is-notif .notif-foot-link {
    background: transparent; border: 0; padding: 4px 6px; margin: -4px -6px;
    color: var(--b2-text-2, #a1a1a6); font: inherit;
    font-size: 12px; font-weight: 500;
    cursor: pointer; border-radius: 5px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .user-menu-panel.is-notif .notif-foot-link:hover {
    color: var(--b2-text, #f5f5f7); background: var(--b2-surface-2, #242427);
  }
  .user-menu-panel.is-notif .notif-foot-link svg { width: 12px; height: 12px; stroke-width: 2; }
  .user-menu-panel.is-notif .notif-foot-pref {
    background: transparent; border: 0; padding: 4px 6px;
    color: var(--b2-text-3, #6e6e73); font: inherit;
    font-size: 11.5px; cursor: pointer; border-radius: 5px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .user-menu-panel.is-notif .notif-foot-pref:hover {
    color: var(--b2-text-2, #a1a1a6); background: var(--b2-surface-2, #242427);
  }
  .user-menu-panel.is-notif .notif-foot-pref svg { width: 12px; height: 12px; stroke-width: 1.8; }

  /* ─── PREFERENCES MODAL ─── */
  .prefs-help {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.45;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .prefs-empty {
    padding: 28px 20px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.5;
  }
  .prefs-list {
    padding: 6px 0 14px;
  }
  .prefs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .prefs-row:hover {
    background: rgba(255,255,255,0.03);
  }
  .prefs-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
  }
  /* Toggle switch — track + thumb. Checkbox itself is hidden but keeps
     focus/keyboard handling. ON = teal track + thumb on the right. */
  .prefs-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .prefs-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
  }
  .prefs-toggle-track {
    width: 36px;
    height: 20px;
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
    position: relative;
    transition: background 0.18s;
  }
  .prefs-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    transition: transform 0.18s, background 0.18s;
  }
  .prefs-toggle.on .prefs-toggle-track {
    background: rgba(var(--role-temp-bin-rgb),0.55);
  }
  .prefs-toggle.on .prefs-toggle-thumb {
    transform: translateX(16px);
    background: var(--white);
  }
  .prefs-toggle:hover .prefs-toggle-track {
    background: rgba(255,255,255,0.18);
  }
  .prefs-toggle.on:hover .prefs-toggle-track {
    background: rgba(var(--role-temp-bin-rgb),0.7);
  }
  /* Account footer — visually distinct from the scrolling notifications
     list. Slightly darker tint + thicker top border so the two sections
     never visually merge, even when the list is mid-scroll. */
  .user-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.10);
  }
  .user-menu-footer {
    background: rgba(0,0,0,0.25);
    padding: 4px 0;
  }
  .user-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
  }
  .user-menu-item:hover {
    background: rgba(255,255,255,0.06);
    color: var(--white);
  }
  .user-menu-icon {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .user-menu-icon svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .user-menu-item:hover .user-menu-icon {
    color: var(--white);
  }

  /* ─── WELCOME SCREEN ─── */
  .welcome-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #141415;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .welcome-overlay.visible {
    opacity: 1;
  }
  .welcome-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: welcomeSlideUp 0.5s ease;
  }
  @keyframes welcomeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .welcome-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid transparent;
    box-shadow: 0 12px 48px rgba(0,0,0,0.4);
    position: relative;
    z-index: 2;
  }
  .welcome-photo-wrap {
    position: relative;
    width: 156px;
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .welcome-photo-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--teal), var(--yellow), var(--teal), var(--yellow), var(--teal));
    animation: welcomeBorderSpin 2.5s linear infinite;
    z-index: 0;
  }
  .welcome-photo-wrap::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #141415;
    z-index: 1;
  }
  @keyframes welcomeBorderSpin {
    to { transform: rotate(360deg); }
  }
  .welcome-photo-initials {
    background: linear-gradient(135deg, rgba(var(--role-temp-bin-rgb),0.3), rgba(var(--role-cta-primary-rgb),0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .welcome-greeting {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.02em;
    margin-top: 8px;
  }
  .welcome-name {
    font-size: 32px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .welcome-loading {
    display: flex;
    gap: 6px;
    margin-top: 24px;
  }
  .welcome-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
    animation: welcomeDotPulse 1.2s ease infinite;
  }
  .welcome-dot:nth-child(2) { animation-delay: 0.2s; }
  .welcome-dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes welcomeDotPulse {
    0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
    30% { opacity: 1; transform: scale(1); }
  }

  /* ─── WAREHOUSE VIEW ─── */
  .warehouse-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Warehouse view split layout — Production Inbound on the left, All Open
     Orders on the right. Stacks vertically on narrower screens. */
  .warehouse-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  @media (max-width: 1100px) {
    .warehouse-split {
      grid-template-columns: 1fr;
    }
  }
  .warehouse-split-col-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .warehouse-split-col-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .warehouse-split-col-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* All Open Orders table — compact, scrollable list of open orders.
     Each row is clickable and opens the order detail modal. */
  .open-orders-section {
    /* sits inside warehouse-split-col on desktop */
  }
  .open-orders-table-wrap {
    background: #2a2c2d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
  }
  .open-orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .open-orders-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    /* Solid background so scrolled-under rows don't bleed through.
       Matches the .open-orders-table-wrap background color. */
    background: #2a2c2d;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .open-orders-table thead th.r {
    text-align: right;
  }
  .open-orders-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
  }
  .open-orders-table tbody tr:hover {
    background: rgba(var(--role-temp-bin-rgb),0.08);
  }
  .open-orders-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    font-weight: 600;
  }
  .open-orders-table tbody tr:last-child td {
    border-bottom: none;
  }
  .open-orders-table td.r {
    text-align: right;
  }
  /* ─── ALMOST-READY EXPANSION ROW ───
     Lives directly under a partially-allocated order's main row. Shows a
     progress bar (units allocated / total) and chips for the missing SKUs.
     Auto-rendered by renderAllOpenOrders when o.isPartial is true. */
  .open-orders-table tr.oo-progress-row {
    background: rgba(255,255,255,0.015);
    cursor: pointer;
    transition: background 0.12s;
  }
  .open-orders-table tr.oo-progress-row:hover {
    background: rgba(var(--role-temp-bin-rgb),0.06);
  }
  .open-orders-table tr.oo-progress-row > td {
    padding: 4px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .oo-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .oo-progress-meta {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
  }
  .oo-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
  }
  .oo-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--role-ready), #34d399);
    border-radius: 4px;
    /* Width is set inline; transition lets the bar animate the first time
       the row paints (from 0 → final). Subsequent renders reuse the same
       transition when the value changes. */
    animation: ooProgressGrow 0.6s ease forwards;
    transform-origin: left center;
  }
  @keyframes ooProgressGrow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  .oo-missing-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
  }
  .oo-missing-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .oo-missing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .oo-missing-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--role-cta-primary-rgb),0.12);
    color: var(--role-cta-primary);
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.3);
  }
  .oo-missing-chip .oo-missing-qty {
    font-weight: 800;
    color: inherit;
  }
  /* Graduation flash — order was partial last render and is RTS now. Plays
     a one-shot green pulse on the main row so the manager sees the
     transition. CSS animation removes itself after running. */
  .open-orders-table tr.oo-just-graduated {
    animation: ooGraduate 2.4s ease;
  }
  /* Focus state for AOO + RTS rows is now driven by the global
     :focus-visible baseline from the a11y refactor — rows are
     role="button" tabindex="0" so native focus paints the yellow ring
     consistently. Plus a subtle background tint matching the Labeling
     Queue's .lq-order.selected affordance. */
  tr.oo-row:focus-visible {
    background: rgba(255,214,10,0.06);
    outline-offset: -2px;
  }
  @keyframes ooGraduate {
    0%   { background: rgba(var(--role-ready-rgb),0.18); box-shadow: inset 0 0 0 1px rgba(var(--role-ready-rgb),0.5); }
    60%  { background: rgba(var(--role-ready-rgb),0.12); }
    100% { background: transparent; box-shadow: none; }
  }
  /* ─── FETCH INDICATOR ──────────────────────────────────────────────
     Persistent pill that surfaces whenever an Airtable request is in
     flight. Bottom-right corner; toast host bumped up to bottom:80px so
     a transient toast doesn't sit on top of it. Amber palette (high-vis
     "active work" — distinct from green=ok, red=error) so it actually
     gets noticed. Driven by a monkey-patch on window.fetch in the main
     script — see "installFetchIndicator" IIFE. */
  .fetch-indicator {
    position: fixed;
    bottom: 24px;
    right: 24px;
    transform: translateY(140%);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border: 1px solid rgba(180, 83, 9, 0.55);
    border-radius: 999px;
    color: #1a1a1d;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    z-index: 5500;
    box-shadow:
      0 8px 24px rgba(245, 158, 11, 0.35),
      0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.22s ease;
  }
  .fetch-indicator.visible {
    transform: translateY(0);
    opacity: 1;
  }
  .fetch-indicator .spinner {
    width: 14px;
    height: 14px;
    display: inline-flex;
    color: #1a1a1d;
    animation: fetchSpin 0.9s linear infinite;
    flex: 0 0 auto;
  }
  .fetch-indicator .spinner svg { width: 14px; height: 14px; display: block; }
  .fetch-indicator .label { white-space: nowrap; }
  @keyframes fetchSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .fetch-indicator .spinner { animation: none; } }

  /* ─── TOAST (bottom-right notifications) ───
     Used today for RTS graduation announcements. Stacks vertically. Click to
     dismiss; auto-dismiss after 5s. */
  .toast-host {
    position: fixed;
    right: 24px;
    /* Bumped from 24px so the fetch-indicator pill (also at right:24px,
       bottom:24px) owns the actual corner. Toasts stack upward from here. */
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Above every modal/overlay (ticket modal + quick pickers sit at 5000) so
       toasts are never trapped behind a dimmed backdrop or left unclickable. */
    z-index: 9000;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #1a1c1d;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--white);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    cursor: pointer;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .toast.visible {
    transform: translateX(0);
    opacity: 1;
  }
  /* Actionable "Assigned to you" toast — attention icon + ticket #/title +
     inline Undo/Reassign + a countdown bar so it doesn't slip by unseen. */
  @keyframes adToastCountdown { from { transform:scaleX(1); } to { transform:scaleX(0); } }
  @keyframes adToastPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
  .toast.toast-claim { position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; max-width:420px; cursor:default; border-color:rgba(110,168,254,0.5); box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(110,168,254,0.22); }
  .toast.toast-claim .toast-claim-icon { flex:none; width:30px; height:30px; border-radius:50%; background:#6ea8fe; color:#0b1530; display:flex; align-items:center; justify-content:center; animation:adToastPulse .9s ease-in-out 2; }
  .toast.toast-claim .toast-claim-body { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .toast.toast-claim .toast-claim-title { font-weight:700; font-size:13px; line-height:1.2; }
  .toast.toast-claim .toast-claim-sub { font-size:11.5px; font-weight:500; color:rgba(255,255,255,0.62); max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .toast.toast-claim .toast-claim-actions { display:flex; gap:6px; margin-left:auto; flex:none; }
  .toast.toast-claim .toast-claim-btn { background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); color:#fff; font:inherit; font-size:12px; font-weight:700; padding:4px 12px; border-radius:7px; cursor:pointer; white-space:nowrap; }
  .toast.toast-claim .toast-claim-btn:hover { background:rgba(255,255,255,0.18); }
  .toast.toast-claim .toast-claim-btn.primary { background:#6ea8fe; border-color:#6ea8fe; color:#0b1530; }
  .toast.toast-claim .toast-claim-btn.primary:hover { filter:brightness(1.08); }
  .toast.toast-claim .toast-claim-progress { position:absolute; left:0; bottom:0; height:3px; width:100%; background:#6ea8fe; transform-origin:left; animation:adToastCountdown var(--toast-dur,7s) linear forwards; }
  /* "Links" row under a message — clickable chips (like the attachments row),
     so links are easy to spot/act on without cluttering the body text. */
  .stockv2 .ad-tl-links { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:9px; }
  .stockv2 .ad-tl-links-label { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--b2-text-3, #8a8a8e); }
  .stockv2 .ad-tl-link-chip { display:inline-flex; align-items:center; max-width:280px; padding:4px 11px; background:rgba(110,168,254,0.12); border:1px solid rgba(110,168,254,0.34); border-radius:14px; color:#9cc4ff; font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stockv2 .ad-tl-link-chip:hover { background:rgba(110,168,254,0.22); color:#fff; }
  /* Inline reply composer — appears under the specific message you clicked
     Reply on (so you compose in context). A card connected to that message. */
  .stockv2 .ad-tl-reply-inline { margin:10px 0 4px; padding:14px 14px 12px; background:rgba(110,168,254,0.06); border:1px solid var(--b2-blue-border,rgba(110,168,254,0.34)); border-radius:10px; }
  .stockv2 .ad-tl-reply-inline .ad-reply-composer { margin-top:0; padding-top:0; border-top:0; }
  .stockv2 .ad-reply-composer { margin-top:20px; padding-top:16px; border-top:1px solid var(--b2-hairline-strong,#3a3a3c); }
  .stockv2 .ad-reply-composer-title { font-weight:700; font-size:13px; margin-bottom:10px; color:var(--b2-text); }
  .stockv2 .ad-reply-bar { display:flex; align-items:center; gap:10px; margin-top:12px; }
  .stockv2 .ad-reply-attach-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 13px; background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:8px; font-size:12.5px; font-weight:600; color:var(--b2-text); cursor:pointer; }
  .stockv2 .ad-reply-attach-btn:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-reply-attach { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
  .stockv2 .ad-reply-attach-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:14px; font-size:12px; color:var(--b2-text); }
  .stockv2 .ad-reply-attach-size { color:var(--b2-text-2,#8a8a8e); font-size:11px; }
  .stockv2 .ad-reply-attach-x { background:transparent; border:none; color:var(--b2-text-2,#8a8a8e); cursor:pointer; font-size:12px; line-height:1; padding:2px 4px; border-radius:6px; }
  .stockv2 .ad-reply-attach-x:hover { color:var(--b2-text); background:rgba(255,255,255,0.08); }
  .toast.toast-claim:hover .toast-claim-progress { animation-play-state:paused; }
  .toast.toast-success {
    border-color: rgba(var(--role-ready-rgb),0.45);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--role-ready-rgb),0.12);
  }
  .toast.toast-success::before {
    content: '✓ ';
    color: var(--status-good);
    font-weight: 800;
    margin-right: 4px;
  }
  .open-orders-table .oo-order {
    color: var(--white);
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .open-orders-table .oo-customer {
    color: rgba(255,255,255,0.7);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .open-orders-table .oo-time {
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
    font-size: 11px;
  }
  /* Per-row status badges in All Open Orders. Match the modal badge palette
     so the same colors mean the same thing across the warehouse view. */
  /* Emoji-only pills. Title attribute provides the label on hover. */
  .oo-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 12px;
    line-height: 1;
    border-radius: 6px;
    margin-left: 4px;
    white-space: nowrap;
    cursor: default;
  }
  .oo-status-badge:first-child { margin-left: 0; }
  .oo-status-ready {
    color: var(--role-ready);
    background: rgba(var(--role-ready-rgb),0.10);
    border: 1px solid rgba(var(--role-ready-rgb),0.35);
  }
  .oo-status-shipby {
    color: var(--yellow);
    background: rgba(var(--role-cta-primary-rgb),0.10);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.35);
  }
  .oo-status-custom {
    color: var(--role-on-po);
    background: rgba(var(--role-on-po-rgb),0.10);
    border: 1px solid rgba(var(--role-on-po-rgb),0.35);
  }
  /* Orphan order ("No Items") badge — orange to signal "needs eyes" without
     overlapping the yellow Ship-By treatment. */
  .oo-status-noitems {
    color: var(--role-allocated-qty);
    background: rgba(var(--role-allocated-qty-rgb),0.10);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.40);
  }
  /* High Priority badge — red, strongest visual weight. Bumps the order to
     the front of warehouse routing allocation. */
  .oo-status-priority {
    color: var(--role-critical);
    background: rgba(var(--role-critical-rgb),0.12);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
  }
  /* Animated three-dot indicator shown in the Status column while SKU info
     loads in the background. Replaces empty cells so the column doesn't
     look broken. Each dot pulses in sequence, typing-indicator style. */
  .oo-status-loading {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    vertical-align: middle;
  }
  .oo-status-loading span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    animation: oo-status-dot 1.4s infinite ease-in-out;
  }
  .oo-status-loading span:nth-child(2) { animation-delay: 0.2s; }
  .oo-status-loading span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes oo-status-dot {
    0%, 70%, 100% { opacity: 0.2; transform: scale(0.85); }
    35% { opacity: 0.85; transform: scale(1); }
  }
  .open-orders-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.3);
    font-weight: 600;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
  }

  /* Orphan orders alert — orders flagged Awaiting Fulfillment with no
     synced line items. Yellow border to read as "needs attention" without
     screaming "broken". Sits at the very top of the warehouse view above
     the production / open orders split. */
  .orphan-alert {
    background: rgba(var(--role-cta-primary-rgb),0.06);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.30);
    border-left: 4px solid var(--yellow);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
  }
  .orphan-alert-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .orphan-alert-icon { display: inline-flex; align-items: center; color: var(--b2-amber); }
  .orphan-alert-icon svg { width: 14px; height: 14px; }
  .orphan-alert-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--yellow);
    letter-spacing: 0.02em;
  }
  .orphan-alert-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    flex: 1;
  }
  .orphan-alert-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
  }
  .orphan-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.18);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .orphan-row:hover {
    background: rgba(var(--role-cta-primary-rgb),0.10);
    border-color: rgba(var(--role-cta-primary-rgb),0.45);
  }
  .orphan-row-num {
    font-weight: 800;
    color: var(--white);
    font-size: 13px;
  }
  .orphan-row-customer {
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    font-size: 12px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .orphan-row-time {
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Order-level status badges shown near the top of the Order Detail modal
     when an order is fully ready to ship or has a ship-by-date marker. */
  .order-badge-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .order-badge {
    /* Tier B1 mid uppercase status — canonical font 11/700/0.06em/upper. */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
  }
  .order-badge svg { flex: 0 0 auto; }
  .order-badge-ready {
    color: var(--role-ready);
    background: rgba(var(--role-ready-rgb),0.10);
    border: 1px solid rgba(var(--role-ready-rgb),0.40);
  }
  .order-badge-shipby {
    color: var(--role-ship-by-date);
    background: rgba(var(--b2-blue-rgb),0.10);
    border: 1px solid rgba(var(--b2-blue-rgb),0.40);
  }
  .order-badge-custom {
    color: var(--role-custom);
    background: rgba(var(--b2-teal-rgb),0.10);
    border: 1px solid rgba(var(--b2-teal-rgb),0.40);
  }
  .order-badge-custom-applied {
    color: var(--role-ready);
    background: rgba(var(--role-ready-rgb),0.10);
    border: 1px solid rgba(var(--role-ready-rgb),0.40);
  }

  /* Inline per-line-item custom indicator inside the order-detail line items
     table. Smaller version of the order-level Custom badge. Sits next to
     the SKU name so the picker can see at a glance which lines need
     labeling work. */
  .line-item-custom-pill {
    /* Custom = teal across the app (matches the AOO row inline badge and
       the order-detail Customization Required badge).
       Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    color: var(--role-custom);
    background: rgba(var(--b2-teal-rgb),0.10);
    border: 1px solid rgba(var(--b2-teal-rgb),0.35);
    vertical-align: middle;
  }

  /* Neutral "Details" chip for line items that have Target content but
     don't qualify as customization. Same shape as the Custom pill but
     muted gray so it doesn't compete visually. */
  .line-item-details-pill {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    vertical-align: middle;
  }

  /* Click-to-expand behavior shared by both chip variants. Cursor change,
     hover lift, and chevron rotate when expanded. */
  .line-item-chip {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .line-item-custom-pill.line-item-chip:hover {
    /* Stay in the teal Custom family on hover (was using the purple
       on-PO color, which clashed with the teal badge). */
    background: rgba(var(--b2-teal-rgb),0.20);
    border-color: rgba(var(--b2-teal-rgb),0.60);
  }
  .line-item-details-pill.line-item-chip:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
  }
  .line-item-chip-chev {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.2s ease;
    font-size: 11px;
    line-height: 1;
    opacity: 0.85;
    vertical-align: middle;
  }
  .line-item-chip.expanded .line-item-chip-chev {
    transform: rotate(180deg);
  }

  /* The expanded panel rendered below the SKU when its chip is clicked.
     Bold field name, plain value, one per line — same visual language as
     the customization rendering on the packing list. */
  .line-item-details {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
  }
  .line-item-detail-row {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255,255,255,0.7);
  }
  .line-item-detail-name {
    font-weight: 700;
    color: var(--white);
  }
  .line-item-detail-raw {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    white-space: pre-wrap;
    line-height: 1.5;
  }

  /* Per-line-item proof thumbnails. Filtered by SKU prefix so each row
     shows only the proofs relevant to its item. Clicking opens the
     existing fullscreen proof modal. */
  .line-item-proofs {
    display: flex;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .line-item-proof-link {
    cursor: pointer;
    display: inline-block;
    line-height: 0;
  }
  .line-item-proof-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.15s, border-color 0.15s;
  }
  .line-item-proof-link:hover .line-item-proof-thumb {
    transform: scale(1.15);
    border-color: var(--teal);
  }

  /* Legacy Order - Held toggle inside the Order Detail modal. Click the
     row anywhere to flip the checkbox. Background subtly tints when on,
     so the user can see at a glance the order is held. */
  .legacy-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
  }
  .legacy-toggle:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.14);
  }
  .legacy-toggle.legacy-on {
    background: rgba(124,134,148,0.10);
    border-color: rgba(124,134,148,0.30);
  }
  /* High Priority toggle — same shape as legacy-toggle but red accent when
     on so the priority signal carries visual weight. */
  .legacy-toggle.priority-toggle.priority-on {
    background: rgba(var(--role-critical-rgb),0.08);
    border-color: rgba(var(--role-critical-rgb),0.35);
  }
  .legacy-toggle.priority-toggle.priority-on input[type=checkbox]:checked {
    background: rgba(var(--role-critical-rgb),0.55);
    border-color: rgba(252,165,165,0.7);
  }
  .legacy-toggle.priority-toggle.priority-on .legacy-toggle-label {
    color: var(--role-critical);
  }
  .legacy-toggle input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .legacy-toggle input[type=checkbox]:checked {
    background: rgba(124,134,148,0.55);
    border-color: rgba(180,190,200,0.7);
  }
  .legacy-toggle input[type=checkbox]:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  .legacy-toggle-text { display: flex; flex-direction: column; gap: 2px; }
  .legacy-toggle-label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.78);
    letter-spacing: 0.02em;
  }
  .legacy-toggle.legacy-on .legacy-toggle-label { color: rgba(255,255,255,0.95); }
  .legacy-toggle-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
  }

  /* Legacy/Held section in the All Open Orders right column. Sits below
     the active orders table. Muted treatment so it reads as "out of the
     active flow" without disappearing entirely. */
  .legacy-section { margin-top: 24px; }
  .legacy-section-header .warehouse-split-col-title { color: rgba(255,255,255,0.6); }
  .legacy-table-wrap {
    background: rgba(255,255,255,0.015);
    border: 1px dashed rgba(255,255,255,0.10);
  }
  .legacy-table-wrap .open-orders-table tbody tr {
    opacity: 0.78;
  }
  .legacy-table-wrap .open-orders-table tbody tr:hover { opacity: 1; }

  /* Customer / Staff notes section inside the Order Detail modal. Both
     render when present; both skipped when empty. Staff variant gets a
     slight color tint to differentiate. */
  .notes-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
  }
  .notes-section.notes-staff {
    background: rgba(var(--role-temp-bin-rgb),0.04);
    border-color: rgba(var(--role-temp-bin-rgb),0.18);
  }
  .notes-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
  }
  .notes-section.notes-staff .notes-label { color: var(--teal); }
  .notes-content {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    white-space: pre-wrap;
    line-height: 1.5;
  }

  /* Order Detail modal: banner shown when an order has no line items. */
  .orphan-detail-banner {
    background: rgba(var(--role-cta-primary-rgb),0.08);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.35);
    border-left: 4px solid var(--yellow);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 8px 0 4px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    line-height: 1.5;
  }
  .orphan-detail-banner strong {
    display: block;
    color: var(--yellow);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
  }

  /* Packing list status badge — sits next to the order number/title.
     Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
  .packing-list-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    white-space: nowrap;
    vertical-align: middle;
  }
  .packing-list-badge.not-printed {
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .packing-list-badge.printed {
    color: var(--role-ready);
    background: rgba(var(--role-ready-rgb),0.10);
    border: 1px solid rgba(var(--role-ready-rgb),0.3);
  }
  /* Print Packing List button in the Order Detail modal — teal outline so it
     reads as a utility action distinct from Mark Complete (yellow primary). */
  .print-packing-list-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(var(--role-temp-bin-rgb),0.35);
    background: rgba(var(--role-temp-bin-rgb),0.08);
    color: var(--teal);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.04em;
  }
  .print-packing-list-btn:hover {
    background: rgba(var(--role-temp-bin-rgb),0.16);
    border-color: rgba(var(--role-temp-bin-rgb),0.55);
  }
  .warehouse-card {
    background: #2a2c2d;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 14px;
  }
  .warehouse-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    gap: 12px;
    flex-wrap: wrap;
  }
  .warehouse-header-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .warehouse-sku {
    font-size: 14px;
    font-weight: 800;
    color: var(--white);
  }
  .warehouse-meta {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
  }
  .warehouse-complete-btn {
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid rgba(var(--role-ready-rgb),0.3);
    background: rgba(var(--role-ready-rgb),0.08);
    color: var(--status-good);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.15s;
  }
  .warehouse-complete-btn:hover {
    background: rgba(var(--role-ready-rgb),0.15);
    border-color: rgba(var(--role-ready-rgb),0.5);
  }
  .warehouse-allocations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
  }
  .wh-alloc-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: default;
    transition: transform 0.12s, border-color 0.12s;
  }
  .wh-alloc-card[onclick] {
    cursor: pointer;
  }
  .wh-alloc-card[onclick]:hover {
    transform: translateY(-1px);
  }
  .wh-alloc-stock {
    border-color: rgba(56,189,248,0.2);
    background: rgba(56,189,248,0.04);
  }
  .wh-alloc-ship {
    border-color: rgba(var(--role-ready-rgb),0.2);
    background: rgba(var(--role-ready-rgb),0.04);
  }
  .wh-alloc-ship[onclick]:hover {
    border-color: rgba(var(--role-ready-rgb),0.5);
  }
  .wh-alloc-labeling {
    border-color: rgba(var(--role-on-po-rgb),0.2);
    background: rgba(var(--role-on-po-rgb),0.04);
  }
  .wh-alloc-labeling[onclick]:hover {
    border-color: rgba(var(--role-on-po-rgb),0.5);
  }
  /* Priority allocation overlay — red border + corner badge so the
     warehouse can spot priority orders at a glance among the routing
     allocation cards. Combines with the route color underneath. */
  .wh-alloc-card.wh-alloc-priority {
    border-color: rgba(var(--role-critical-rgb),0.55);
    box-shadow: 0 0 0 1px rgba(var(--role-critical-rgb),0.25);
    position: relative;
  }
  .wh-alloc-card.wh-alloc-priority:hover {
    border-color: rgba(var(--role-critical-rgb),0.8);
  }
  .wh-alloc-priority-tag {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--role-critical);
    background: rgba(var(--role-critical-rgb),0.15);
    border: 1px solid rgba(var(--role-critical-rgb),0.45);
    padding: 2px 6px;
    border-radius: 4px;
  }
  .wh-alloc-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    align-self: flex-start;
  }
  .wh-stock {
    background: rgba(56,189,248,0.15);
    color: #38bdf8;
    border: 1px solid rgba(56,189,248,0.45);
  }
  .wh-ship {
    background: rgba(var(--role-ready-rgb),0.15);
    color: var(--status-good);
    border: 1px solid rgba(var(--role-ready-rgb),0.45);
  }
  .wh-labeling {
    background: rgba(var(--role-on-po-rgb),0.15);
    color: var(--role-on-po);
    border: 1px solid rgba(var(--role-on-po-rgb),0.45);
  }
  /* New card variants for the bin-assignment decision tree.
     Outbound = green-yellow accent (skip bin, ship straight)
     Permanent bin = teal (regular stocking)
     Temp bin = amber (auto-generated, transient) */
  .wh-alloc-outbound {
    border-color: rgba(var(--role-cta-primary-rgb),0.35);
    background: linear-gradient(135deg, rgba(var(--role-cta-primary-rgb),0.08), rgba(var(--role-ready-rgb),0.04));
  }
  .wh-alloc-outbound[onclick]:hover {
    border-color: rgba(var(--role-cta-primary-rgb),0.7);
  }
  .wh-outbound {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    color: var(--yellow);
  }
  .wh-alloc-perm-bin {
    border-color: rgba(var(--role-temp-bin-rgb),0.25);
    background: rgba(var(--role-temp-bin-rgb),0.04);
  }
  .wh-perm-bin {
    background: rgba(var(--role-temp-bin-rgb),0.18);
    color: var(--role-temp-bin);
  }
  .wh-alloc-temp-bin {
    border-color: rgba(var(--role-allocated-qty-rgb),0.28);
    background: rgba(var(--role-allocated-qty-rgb),0.05);
  }
  .wh-temp-bin {
    background: rgba(var(--role-allocated-qty-rgb),0.18);
    color: var(--role-allocated-qty);
  }
  /* The big bin name (e.g. "F-04-3" or "Temp-007") on bin cards */
  .wh-alloc-bin-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    font-family: 'SF Mono', 'Monaco', monospace;
    letter-spacing: 0.02em;
  }
  .wh-temp-bin-confirm {
    background: rgba(var(--role-allocated-qty-rgb),0.18);
    color: var(--role-allocated-qty);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.4);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.15s;
  }
  .wh-temp-bin-confirm:hover {
    background: rgba(var(--role-allocated-qty-rgb),0.32);
    color: #fff;
  }
  .wh-temp-bin-confirm:disabled {
    cursor: default;
    opacity: 0.7;
  }
  .wh-alloc-temp-confirmed {
    border-color: rgba(var(--role-ready-rgb),0.4) !important;
    background: rgba(var(--role-ready-rgb),0.06) !important;
  }
  /* CHOOSE BIN — placeholder bin detected, prompt for real bin or temp fallback */
  .wh-alloc-choose-bin {
    border-color: rgba(var(--role-cta-primary-rgb),0.35);
    background: rgba(var(--role-cta-primary-rgb),0.04);
  }
  .wh-choose-bin {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    color: var(--yellow);
  }
  .wh-choose-bin-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
  }
  .wh-choose-bin-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--white);
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 700;
  }
  .wh-choose-bin-input:focus {
    outline: none;
    border-color: var(--yellow);
    background: rgba(0,0,0,0.4);
  }
  .wh-choose-bin-set {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    color: var(--yellow);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.4);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
  }
  .wh-choose-bin-set:hover { background: rgba(var(--role-cta-primary-rgb),0.32); color: #fff; }
  .wh-choose-bin-temp {
    background: rgba(var(--role-allocated-qty-rgb),0.12);
    color: var(--role-allocated-qty);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.28);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.15s;
  }
  .wh-choose-bin-temp:hover { background: rgba(var(--role-allocated-qty-rgb),0.24); color: #fff; }

  /* Clickable SKU/bin names — soft underline on hover, signal "this is interactive" */
  .warehouse-sku.clickable, .wh-alloc-bin-name.clickable {
    cursor: pointer;
    transition: color 0.12s;
  }
  .warehouse-sku.clickable:hover { color: var(--yellow); }
  .wh-alloc-bin-name.clickable:hover { color: var(--role-temp-bin); }

  /* SKU Location / Bin Contents modals — shared block styles */
  .loc-block {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
  }
  .loc-block-perm { border-color: rgba(var(--role-temp-bin-rgb),0.25); background: rgba(var(--role-temp-bin-rgb),0.04); }
  .loc-block-temp { border-color: rgba(var(--role-allocated-qty-rgb),0.25); background: rgba(var(--role-allocated-qty-rgb),0.04); }
  .loc-block-warn { border-color: rgba(var(--role-allocated-qty-rgb),0.4); background: rgba(var(--role-allocated-qty-rgb),0.06); }
  .loc-block-inbound { border-color: rgba(var(--role-temp-bin-rgb),0.2); background: rgba(var(--role-temp-bin-rgb),0.03); }
  .loc-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
  }
  .loc-bin-name {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 18px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .loc-bin-name.clickable {
    cursor: pointer;
    transition: color 0.12s;
  }
  .loc-bin-name.clickable:hover { color: var(--role-temp-bin); }
  .loc-temp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    gap: 12px;
  }
  .loc-temp-row + .loc-temp-row {
    border-top: 1px dashed rgba(255,255,255,0.05);
  }
  .loc-temp-bin {
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--white);
  }
  .loc-temp-bin.clickable {
    cursor: pointer;
    color: var(--role-temp-bin);
    transition: color 0.12s;
  }
  .loc-temp-bin.clickable:hover { color: #fff; text-decoration: underline; }
  .loc-temp-meta {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
  }

  /* ─── READY TO SHIP queue (warehouse view) ─── */
  .rts-old-toggle {
    margin-left: 8px;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.3);
    font-size: 11px;
    cursor: pointer;
  }
  .rts-old-toggle:hover {
    color: rgba(255,255,255,0.85);
    border-bottom-color: rgba(255,255,255,0.6);
  }
  /* RTS sort toggle — segmented control on the right of the queue header.
     Priority orders always sort first regardless of mode; this controls the
     secondary sort. */
  .rts-sort-toggle {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
    flex-shrink: 0;
  }
  .rts-sort-btn {
    padding: 5px 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.15s;
  }
  .rts-sort-btn:hover {
    background: rgba(255,255,255,0.04);
    color: var(--white);
  }
  .rts-sort-btn.active {
    background: rgba(var(--role-temp-bin-rgb),0.18);
    color: var(--teal);
  }
  .rts-sort-btn + .rts-sort-btn {
    border-left: 1px solid rgba(255,255,255,0.12);
  }
  .rts-card {
    border-color: rgba(var(--role-ready-rgb),0.25);
    background: rgba(var(--role-ready-rgb),0.04);
  }
  .rts-card.rts-priority {
    border-color: rgba(var(--role-allocated-qty-rgb),0.55);
    box-shadow: 0 0 0 1px rgba(var(--role-allocated-qty-rgb),0.2);
  }
  .rts-order-num {
    color: var(--white);
    cursor: pointer;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.15);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s;
  }
  .rts-order-num:hover { text-decoration-color: var(--teal); }
  .rts-priority-pill {
    display: inline-block;
    background: rgba(var(--role-allocated-qty-rgb),0.15);
    color: var(--role-allocated-qty);
    border: 1px solid rgba(var(--role-allocated-qty-rgb),0.45);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 6px;
  }
  .rts-mark-shipped {
    background: rgba(var(--role-ready-rgb),0.16) !important;
    color: var(--status-good) !important;
    border-color: rgba(var(--role-ready-rgb),0.45) !important;
  }
  .rts-mark-shipped:hover {
    background: rgba(var(--role-ready-rgb),0.3) !important;
    color: #fff !important;
  }
  .rts-pull-list {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }
  .rts-pull-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 6px;
  }
  .rts-pull-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0;
  }
  .rts-pull-row + .rts-pull-row {
    border-top: 1px dashed rgba(255,255,255,0.04);
  }
  .rts-pull-qty {
    color: var(--yellow);
    font-weight: 800;
    min-width: 36px;
  }
  .rts-pull-sku {
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    flex: 1;
    font-family: 'SF Mono', 'Monaco', monospace;
    transition: color 0.12s;
  }
  .rts-pull-sku:hover { color: var(--yellow); }
  .rts-pull-arrow {
    color: rgba(255,255,255,0.3);
    font-size: 11px;
  }
  .rts-pull-bin {
    color: var(--role-temp-bin);
    cursor: pointer;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-weight: 800;
    transition: color 0.12s;
  }
  .rts-pull-bin:hover { color: #fff; }
  .rts-pull-bin-temp { color: var(--role-allocated-qty); }
  .rts-pull-bin-temp:hover { color: #fff; }
  .rts-pull-bin-missing {
    color: rgba(var(--role-critical-rgb),0.7);
    font-style: italic;
    font-weight: 600;
  }

  /* ─── LABELING QUEUE VIEW ───
     Split layout: orders queue (left) + line-item proof + details (right).
     Adapted from the noahs-modal design (claude.ai/design handoff) to the
     existing dashboard's variable palette. */
  .lq-app {
    /* Match .stockv2's typography baseline so titles render at the same
       weight/color/smoothing as Sales / Stocking / Calendar / Warehouse —
       Avenir Next (inherited from body) reads slightly heavier than the
       system stack and lacks the antialiasing the other pages use. */
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    padding-top: 24px;
    --lq-hairline: rgba(255,255,255,0.08);
    --lq-hairline-strong: rgba(255,255,255,0.14);
    --lq-surface-0: rgba(255,255,255,0.02);
    --lq-surface-1: rgba(255,255,255,0.04);
    --lq-surface-2: rgba(255,255,255,0.06);
    --lq-surface-3: rgba(255,255,255,0.10);
    --lq-text: #f5f5f7;
    --lq-text-2: rgba(255,255,255,0.65);
    --lq-text-3: rgba(255,255,255,0.62); /* a11y: bumped from 0.45 to clear AA 4.5:1 */
    --lq-text-4: rgba(255,255,255,0.45); /* a11y: bumped from 0.30 — was old text-3 level */
    --lq-amber: #ff9f0a;
    --lq-amber-bg: rgba(255,159,10,0.12);
    --lq-amber-border: rgba(255,159,10,0.55); /* a11y: bumped to clear 3:1 UI-component contrast */
    --lq-blue: #0a84ff;
    --lq-blue-bg: rgba(10,132,255,0.14);
    --lq-blue-border: rgba(10,132,255,0.55);
    --lq-green: #30d158;
    --lq-green-bg: rgba(48,209,88,0.14);
    --lq-green-border: rgba(48,209,88,0.55);
    --lq-red: #ff453a;
    --lq-red-bg: rgba(255,69,58,0.12);
    --lq-red-border: rgba(255,69,58,0.55);
    --lq-purple: #bf5af2;
    --lq-purple-bg: rgba(191,90,242,0.12);
    --lq-purple-border: rgba(191,90,242,0.55);
    --lq-yellow: #ffd60a;
    --lq-radius-lg: 16px;
    --lq-radius-md: 12px;
    --lq-radius-sm: 8px;
    display: flex; flex-direction: column;
    color: var(--lq-text);
  }

  .lq-page-head {
    display: grid; grid-template-columns: 1fr auto; gap: 32px;
    align-items: start; margin-bottom: 28px;
  }
  .lq-eyebrow {
    color: var(--lq-text-3); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 600; margin-bottom: 4px;
  }
  .lq-page-title {
    margin: 0; font-size: 28px; font-weight: 600;
    letter-spacing: -0.02em;
  }
  .lq-page-sub { margin-top: 6px; color: var(--lq-text-3); font-size: 13px; }
  .lq-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
  .lq-summary-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .lq-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 10px 6px 9px;
    border-radius: 8px;
    background: var(--lq-surface-1);
    border: 1px solid var(--lq-hairline);
    font-size: 12px; font-weight: 600;
    color: var(--lq-text-2);
    line-height: 1; white-space: nowrap;
  }
  .lq-chip .lq-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .lq-chip .lq-n { color: var(--lq-text); font-variant-numeric: tabular-nums; font-weight: 700; }
  .lq-chip.lq-amber  { background: var(--lq-amber-bg);  border-color: var(--lq-amber-border);  color: #ffc472; }
  .lq-chip.lq-blue   { background: var(--lq-blue-bg);   border-color: var(--lq-blue-border);   color: #6cb1ff; }
  .lq-chip.lq-green  { background: var(--lq-green-bg);  border-color: var(--lq-green-border);  color: #6ce08c; }
  .lq-chip.lq-red    { background: var(--lq-red-bg);    border-color: var(--lq-red-border);    color: #ff8a82; }
  .lq-chip.lq-purple { background: var(--lq-purple-bg); border-color: var(--lq-purple-border); color: #d590f5; }
  .lq-chip.lq-amber  .lq-dot { background: var(--lq-amber); }
  .lq-chip.lq-blue   .lq-dot { background: var(--lq-blue); }
  .lq-chip.lq-green  .lq-dot { background: var(--lq-green); }
  .lq-chip.lq-red    .lq-dot { background: var(--lq-red); }
  .lq-chip.lq-purple .lq-dot { background: var(--lq-purple); }
  .lq-chip.lq-amber .lq-n, .lq-chip.lq-blue .lq-n, .lq-chip.lq-green .lq-n,
  .lq-chip.lq-red .lq-n, .lq-chip.lq-purple .lq-n { color: inherit; }
  .lq-head-actions { display: flex; gap: 10px; align-items: center; }

  .lq-btn {
    appearance: none; border: 0; cursor: pointer;
    font: 600 13px/1 inherit; padding: 0 14px; height: 36px;
    border-radius: 9px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
    color: var(--lq-text);
  }
  .lq-btn svg { width: 14px; height: 14px; }
  .lq-btn-secondary {
    background: var(--lq-surface-2); color: var(--lq-text);
    border: 1px solid var(--lq-hairline-strong);
  }
  .lq-btn-secondary:hover { background: var(--lq-surface-3); }
  .lq-btn-primary {
    background: linear-gradient(180deg, #ffe04d, #ffcb05);
    color: #1a1300;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 16px -6px rgba(255,203,5,0.6), 0 0 0 1px rgba(255,203,5,0.4);
  }
  .lq-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 10px 22px -6px rgba(255,203,5,0.7), 0 0 0 1px rgba(255,203,5,0.5);
  }
  .lq-btn-ghost { background: transparent; color: var(--lq-text); border: 1px solid var(--lq-hairline-strong); }
  .lq-btn-ghost:hover { background: var(--lq-surface-2); }
  .lq-btn-big { height: 42px; padding: 0 18px; font-size: 14px; border-radius: 11px; }
  .lq-btn:disabled,
  .lq-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    transform: none;
    filter: grayscale(0.4);
  }
  .lq-btn:disabled:hover,
  .lq-btn[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: none;
  }

  .lq-split {
    display: grid;
    grid-template-columns: minmax(380px, 0.85fr) 1fr;
    gap: 18px;
    align-items: stretch;
    min-height: 680px;
  }
  .lq-split > .lq-panel { height: 100%; min-height: 0; }
  .lq-panel {
    background: var(--lq-surface-0);
    border: 1px solid var(--lq-hairline);
    border-radius: var(--lq-radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .lq-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; gap: 12px;
    border-bottom: 1px solid var(--lq-hairline);
  }
  .lq-panel-head-l {
    display: flex; align-items: center; gap: 12px;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 700; color: var(--lq-text);
  }
  .lq-meta { color: var(--lq-text-3); font-weight: 600; letter-spacing: 0.08em; font-size: 11px; }
  .lq-panel-head-r { display: flex; align-items: center; gap: 8px; }

  .lq-search {
    margin: 12px 14px 6px;
    display: flex; align-items: center; gap: 8px;
    background: var(--lq-surface-2);
    border: 1px solid var(--lq-hairline);
    border-radius: 10px;
    padding: 0 12px; height: 36px;
  }
  .lq-search svg { width: 14px; height: 14px; color: var(--lq-text-3); flex-shrink: 0; }
  .lq-search input {
    flex: 1; background: transparent; border: 0; outline: 0;
    color: var(--lq-text);
    font: 500 13px/1 inherit;
  }
  .lq-search input::placeholder { color: var(--lq-text-3); }
  .lq-search-clear {
    appearance: none; background: transparent; border: 0;
    color: var(--lq-text-3); cursor: pointer; padding: 4px 6px;
    font-size: 12px;
  }
  .lq-search-clear:hover { color: var(--lq-text); }

  .lq-seg {
    display: inline-flex;
    background: var(--lq-surface-2);
    border: 1px solid var(--lq-hairline);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
  }
  .lq-seg button {
    appearance: none; background: transparent; border: 0;
    color: var(--lq-text-3);
    font: 600 12px/1 inherit;
    padding: 6px 10px; border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
  }
  .lq-seg button:hover { color: var(--lq-text); }
  .lq-seg button.active {
    background: var(--lq-surface-3); color: var(--lq-text);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;
  }
  .lq-line-hint {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 12px;
    background: rgba(255,214,10,0.06);
    border: 1px solid rgba(255,214,10,0.22);
    border-radius: var(--lq-radius-sm);
    color: var(--lq-text-2);
    font-size: 12px;
  }
  .lq-line-hint strong { color: var(--lq-text); font-variant-numeric: tabular-nums; }
  .lq-line-hint-btn {
    appearance: none; background: transparent; border: 0;
    color: var(--lq-yellow); font: 600 12px/1 inherit;
    cursor: pointer; padding: 0; text-decoration: underline;
    text-decoration-color: rgba(255,214,10,0.4);
    text-underline-offset: 3px;
  }
  .lq-line-hint-btn:hover { text-decoration-color: var(--lq-yellow); }

  .lq-queue { padding: 4px 0; flex: 1; min-height: 0; overflow: hidden; }
  .lq-app .panel-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid var(--lq-hairline);
    background: var(--lq-surface-0);
    font-size: 11px;
    color: var(--lq-text-3);
  }
  .lq-app .panel-pager-info { font-variant-numeric: tabular-nums; }
  .lq-app .panel-pager-info strong { color: var(--lq-text); font-weight: 600; }
  .lq-app .panel-pager-nav { display: inline-flex; align-items: center; gap: 4px; }
  .lq-app .panel-pager-btn {
    height: 24px; min-width: 24px; padding: 0 8px;
    background: var(--lq-surface-2);
    border: 1px solid var(--lq-hairline);
    border-radius: 6px;
    color: var(--lq-text-2);
    font: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .lq-app .panel-pager-btn:hover:not(:disabled) {
    background: var(--lq-surface-3); color: var(--lq-text);
  }
  .lq-app .panel-pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .lq-order { border-bottom: 1px solid var(--lq-hairline); transition: background .15s ease; }
  .lq-order:last-child { border-bottom: 0; }
  .lq-order-head {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 12px 18px; cursor: pointer;
  }
  .lq-order:hover .lq-order-head { background: rgba(255,255,255,0.02); }
  .lq-order.selected .lq-order-head {
    background: linear-gradient(90deg, rgba(255,214,10,0.10) 0%, rgba(255,214,10,0.02) 100%);
    box-shadow: inset 3px 0 0 var(--lq-yellow);
  }
  .lq-order-id {
    font-size: 14px; font-weight: 700; color: var(--lq-text);
    display: flex; align-items: center; gap: 6px;
  }
  .lq-order-id .lq-tag {
    display: inline-flex; align-items: center; padding: 2px 7px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; border-radius: 5px;
    background: rgba(17,153,171,0.14); color: #25b8cc;
    border: 1px solid rgba(17,153,171,0.34);
  }
  .lq-order-id .lq-tag.rush { background: var(--lq-red-bg); color: var(--lq-red); border-color: var(--lq-red-border); }
  .lq-order-id .lq-tag.sent { background: var(--lq-purple-bg); color: #d590f5; border-color: var(--lq-purple-border); }
  .lq-order-sub { margin-top: 3px; font-size: 12px; color: var(--lq-text-3); display: flex; gap: 8px; align-items: center; }
  .lq-order-sub .lq-sep { color: var(--lq-text-4); }
  .lq-order-count {
    font-variant-numeric: tabular-nums;
    color: var(--lq-text);
    font-size: 13px; font-weight: 600;
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  }
  .lq-order-count .lq-small { font-size: 11px; color: var(--lq-text-3); font-weight: 500; }
  .lq-pip { width: 8px; height: 8px; border-radius: 50%; }
  .lq-pip-pending  { background: var(--lq-amber); }
  .lq-pip-proofing { background: var(--lq-blue); }
  .lq-pip-ready    { background: var(--lq-green); }
  .lq-pip-error    { background: var(--lq-red); }
  .lq-order-age { font-size: 11px; color: var(--lq-text-3); text-align: right; min-width: 56px; }
  .lq-order-age.old { color: var(--lq-amber); }

  .lq-detail { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
  .lq-detail-head {
    display: grid; grid-template-columns: 1fr auto; gap: 12px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lq-hairline);
  }
  .lq-detail-eyebrow {
    color: var(--lq-text-3); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 700; margin-bottom: 4px;
  }
  .lq-detail-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
  .lq-line-status {
    /* Tier A pill variant — slightly larger 10px because it sits next to
       the SKU title in the modal header, but otherwise matches the Tier A
       canonical (700 / 0.06em / uppercase). */
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .lq-line-pending  { background: var(--lq-amber-bg); color: var(--lq-amber); border: 1px solid var(--lq-amber-border); }
  .lq-line-ready    { background: var(--lq-green-bg); color: var(--lq-green); border: 1px solid var(--lq-green-border); }
  .lq-line-error    { background: var(--lq-red-bg);   color: var(--lq-red);   border: 1px solid var(--lq-red-border); }
  .lq-line-proofing { background: var(--lq-blue-bg);  color: var(--lq-blue);  border: 1px solid var(--lq-blue-border); }
  .lq-pager {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lq-surface-1); border: 1px solid var(--lq-hairline);
    border-radius: 10px; padding: 4px;
  }
  .lq-pager-btn {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    background: var(--lq-surface-2); border: 1px solid var(--lq-hairline);
    border-radius: 6px; color: var(--lq-text-2); cursor: pointer;
  }
  .lq-pager-btn:hover:not(:disabled) { background: var(--lq-surface-3); color: var(--lq-text); border-color: var(--lq-hairline-strong); }
  .lq-pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .lq-pager-btn svg { width: 14px; height: 14px; }
  .lq-pager-prev svg { transform: rotate(180deg); }
  .lq-pager-count { padding: 0 6px; font: 600 12px/1 inherit; color: var(--lq-text-2); min-width: 60px; text-align: center; }
  .lq-pager-count strong { color: var(--lq-text); }

  .lq-detail-body { overflow: visible; padding: 20px; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
  .lq-proof-wrap { display: flex; flex-direction: column; gap: 12px; }
  .lq-proof-card {
    background: var(--lq-surface-1); border: 1px solid var(--lq-hairline);
    border-radius: var(--lq-radius-md); overflow: hidden;
  }
  .lq-proof-stage {
    aspect-ratio: 7 / 3;
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.04), transparent 50%),
      repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 14px, transparent 14px 28px),
      #0e0e10;
    display: grid; place-items: center;
    position: relative; overflow: hidden;
  }
  .lq-proof-stage::before {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 40px 40px,
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 40px 40px;
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
    pointer-events: none;
  }
  .lq-label {
    position: relative;
    width: min(82%, 460px);
    aspect-ratio: 17 / 11;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfaf6 0%, #ece8df 100%);
    color: #1a1300;
    padding: 16px 20px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 28px 56px -20px rgba(0,0,0,0.55);
    display: grid; grid-template-rows: auto 1fr auto;
    overflow: hidden;
    transform: perspective(900px) rotateX(2deg);
  }
  .lq-brand { font: 800 12px/1 -apple-system, "SF Pro Text", Helvetica; letter-spacing: 0.16em; color: var(--label-accent, #ffd60a); display: flex; align-items: center; gap: 6px; }
  .lq-brand .lq-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--label-accent, #ffd60a); }
  .lq-body-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: center; margin: auto 0; }
  .lq-for-line { font-size: 11px; font-weight: 600; color: #6e6e73; letter-spacing: 0.18em; text-transform: uppercase; }
  .lq-for-name { font: 700 24px/1.1 "SF Pro Display", -apple-system, Helvetica; letter-spacing: -0.02em; color: #1a1300; }
  .lq-sku { display: flex; justify-content: space-between; align-items: center; font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.08em; color: #6e6e73; }
  .lq-barcode { display: flex; gap: 1.5px; height: 12px; }
  .lq-barcode i { display: block; background: #1a1300; }
  .lq-proof-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--lq-hairline); background: rgba(0,0,0,0.2); color: var(--lq-text-3); font-size: 12px; gap: 12px; }
  .lq-proof-tool-l { display: flex; align-items: center; gap: 8px; }
  /* Style-strip the button wrapper so the proof image renders as it did
     before. The button gives keyboard users a focusable activator;
     :focus-visible from the global a11y baseline paints the ring. */
  .lq-proof-img-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    display: inline-flex;
    max-width: 92%; max-height: 92%;
    border-radius: 6px;
  }
  .lq-proof-img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 28px 56px -20px rgba(0,0,0,0.55);
    background: #fff;
    pointer-events: none; /* clicks reach the button wrapper */
  }
  .lq-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; text-decoration: none; }
  .lq-btn-sm svg { width: 12px; height: 12px; }

  .lq-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 1280px) { .lq-info { grid-template-columns: 1fr; } }
  .lq-details-card, .lq-info-card {
    background: var(--lq-surface-1); border: 1px solid var(--lq-hairline);
    border-radius: var(--lq-radius-md); overflow: hidden;
  }
  .lq-details-card { padding: 16px 18px; font-size: 13px; line-height: 1.7; }
  .lq-details-card .lq-row { display: block; }
  .lq-details-card .lq-k { font-weight: 700; color: var(--lq-text); margin-right: 6px; }
  .lq-details-card .lq-v { font-weight: 500; color: var(--lq-text-2); overflow-wrap: anywhere; }
  .lq-details-card .lq-v.lq-accent { color: var(--lq-yellow); font-weight: 600; }
  .lq-info-card-title {
    padding: 10px 14px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lq-text-3); font-weight: 700;
    border-bottom: 1px solid var(--lq-hairline);
  }
  .lq-kv {
    display: grid; grid-template-columns: 1fr auto;
    align-items: baseline; padding: 8px 14px;
    border-bottom: 1px solid var(--lq-hairline); gap: 12px;
  }
  .lq-kv:last-child { border-bottom: 0; }
  .lq-kv .lq-k { font-size: 12px; color: var(--lq-text-3); }
  .lq-kv .lq-k.lq-k-current { color: var(--lq-yellow); font-weight: 700; }
  /* "No labels" tag — surfaces on lines that aren't in the proof preview
     (no artwork proof on file). Quiet neutral chip so it reads as
     informational ("we know about this line, no labeling needed") rather
     than as a warning. */
  .lq-kv .lq-nolabel-tag {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    display: inline-block;
    margin-left: 4px;
    padding: 1px 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lq-text-3);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 3px;
    vertical-align: 1px;
  }
  .lq-kv .lq-v { font-size: 13px; font-weight: 600; color: var(--lq-text); text-align: right; font-variant-numeric: tabular-nums; }
  .lq-kv .lq-v.lq-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
  .lq-kv .lq-v.lq-accent { color: var(--lq-yellow); }

  .lq-detail-foot {
    display: flex; gap: 10px; align-items: center; justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--lq-hairline);
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
  }
  .lq-foot-r { display: flex; gap: 10px; align-items: center; }
  /* Footer buttons stay on one line — the cramped two-line wrap was the
     reason the dispatch summary copy got removed. */
  .lq-foot-r .lq-btn { white-space: nowrap; }
  /* Bigger button → bigger glyph. Default .lq-btn svg is 14px which
     reads a touch small inside the 42px-tall big buttons. */
  .lq-btn-big svg { width: 16px; height: 16px; }

  .lq-empty {
    display: grid; place-items: center;
    padding: 50px 20px;
    color: var(--lq-text-3); text-align: center;
  }
  .lq-empty .lq-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--lq-surface-2); border: 1px solid var(--lq-hairline);
    display: grid; place-items: center;
    margin: 0 auto 14px;
    color: var(--lq-text-2);
  }
  .lq-empty .lq-icon-wrap svg { width: 20px; height: 20px; }
  .lq-empty h3 { margin: 0 0 6px; color: var(--lq-text); font-size: 16px; font-weight: 700; }
  .lq-empty p { margin: 0; font-size: 13px; max-width: 320px; }

  @media (max-width: 1280px) {
    .lq-split { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .lq-split > .lq-panel { height: auto; }
    .lq-queue { max-height: 50vh; }
  }

  /* BC source-of-truth status pill in the order detail sub-line.
     Common BC statuses get distinct color treatments; unknown statuses
     fall back to a neutral pill. */
  .bc-status-pill {
    display: inline-block;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: 4px;
  }
  .bc-status-pill.bc-status-awaiting-fulfillment,
  .bc-status-pill.bc-status-pending {
    background: rgba(56,189,248,0.12);
    border-color: rgba(56,189,248,0.3);
    color: #38bdf8;
  }
  .bc-status-pill.bc-status-shipped,
  .bc-status-pill.bc-status-completed {
    background: rgba(var(--role-ready-rgb),0.14);
    border-color: rgba(var(--role-ready-rgb),0.35);
    color: var(--status-good);
  }
  .bc-status-pill.bc-status-cancelled,
  .bc-status-pill.bc-status-refunded,
  .bc-status-pill.bc-status-declined,
  .bc-status-pill.bc-status-disputed {
    background: rgba(var(--role-critical-rgb),0.14);
    border-color: rgba(var(--role-critical-rgb),0.35);
    color: var(--role-critical);
  }
  .bc-status-pill.bc-status-partially-shipped,
  .bc-status-pill.bc-status-partially-refunded,
  .bc-status-pill.bc-status-on-hold {
    background: rgba(var(--role-allocated-qty-rgb),0.14);
    border-color: rgba(var(--role-allocated-qty-rgb),0.35);
    color: var(--role-allocated-qty);
  }
  .wh-alloc-qty-big {
    font-size: 22px;
    font-weight: 800;
    color: var(--white);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .wh-alloc-of {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
  }
  .wh-alloc-sublabel {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
  }
  .wh-alloc-order-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.02em;
  }
  .wh-alloc-customer {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wh-alloc-status-badge {
    /* Tier A compact uppercase flag — canonical font 9.5/700/0.06em/upper. */
    font-size: 9.5px;
    font-weight: 700;
    color: var(--role-on-po);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    background: rgba(var(--role-on-po-rgb),0.1);
    border: 1px solid var(--role-on-po-border);
    border-radius: 4px;
    align-self: flex-start;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wh-proofs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .wh-proof-link {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.15s, border-color 0.15s;
    cursor: pointer;
  }
  .wh-proof-link:hover {
    transform: scale(1.05);
    border-color: rgba(var(--role-on-po-rgb),0.5);
  }
  .wh-proof-thumb {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: cover;
    background: #1a1b1c;
  }
  @media (max-width: 600px) {
    .warehouse-allocations {
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
  }
  .proof-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .proof-overlay.visible {
    opacity: 1;
  }
  .proof-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .proof-modal-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  }
  .proof-modal-caption {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    font-family: monospace, 'Courier New';
    background: rgba(0,0,0,0.5);
    padding: 6px 12px;
    border-radius: 6px;
  }
  .proof-modal-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--white);
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
  }
  .proof-modal-close:hover {
    background: rgba(255,255,255,0.15);
  }

  /* ─── RETURN-REASON MODAL ─────────────────────────────────────────
     Opened from the Labeling Queue's "Return to Kitting" button.
     Captures a structured reason so the Kitting team knows WHY an
     order is bouncing back to them. Modeled on proof-overlay's
     fade-in pattern but presents form inputs instead of an image. */
  .rrm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 16px;
  }
  .rrm-overlay.visible { opacity: 1; }
  .rrm-modal {
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 14px;
    padding: 22px 24px 20px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    font-family: 'Avenir Next', 'Nunito Sans', sans-serif;
    color: var(--b2-text);
  }
  .rrm-title {
    font-size: 16px; font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0 0 4px;
  }
  .rrm-sub {
    font-size: 12px; color: var(--b2-text-3);
    margin: 0 0 16px;
  }
  .rrm-choices {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 14px;
  }
  .rrm-choice {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--b2-hairline);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px; font-weight: 500;
    transition: background 0.1s, border-color 0.1s;
  }
  .rrm-choice:hover { background: var(--b2-surface-2); border-color: var(--b2-text-4); }
  .rrm-choice input[type="radio"] {
    margin: 0;
    accent-color: var(--role-critical);
  }
  .rrm-choice.checked {
    background: var(--role-critical-bg);
    border-color: var(--role-critical-border);
  }
  .rrm-textarea-wrap {
    display: none;
    margin-bottom: 14px;
  }
  .rrm-textarea-wrap.visible { display: block; }
  .rrm-textarea-label {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--b2-text-3);
    margin-bottom: 6px;
  }
  .rrm-textarea {
    width: 100%; box-sizing: border-box;
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--b2-text);
    font-family: inherit; font-size: 13px;
    resize: vertical;
    min-height: 64px;
  }
  .rrm-textarea:focus {
    outline: 2px solid var(--role-critical);
    outline-offset: -1px;
    border-color: transparent;
  }
  .rrm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 4px;
  }
  .rrm-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    font-family: inherit;
  }
  .rrm-btn-cancel {
    background: transparent;
    color: var(--b2-text-2);
    border-color: var(--b2-hairline);
  }
  .rrm-btn-cancel:hover { background: var(--b2-surface-2); color: var(--b2-text); }
  .rrm-btn-confirm {
    background: var(--role-critical);
    color: #fff;
  }
  .rrm-btn-confirm:hover { filter: brightness(1.1); }
  .rrm-btn-confirm:disabled {
    opacity: 0.4; cursor: not-allowed;
    filter: none;
  }

  /* ─── MOBILE MODAL FIXES ─── */
  @media (max-width: 600px) {
    .bom-overlay {
      padding: 8px;
      align-items: flex-end;
    }
    .bom-modal {
      padding: 16px 12px;
      max-height: 88vh;
      border-radius: 14px 14px 0 0;
    }
    .bom-modal-title {
      font-size: 15px;
      word-break: break-word;
    }
    .bom-table {
      font-size: 11px;
    }
    .bom-table th {
      padding: 6px 4px;
      font-size: 8px;
    }
    .bom-table td {
      padding: 8px 4px;
      font-size: 11px;
    }
    .bom-table td.comp-name {
      font-size: 11px;
      word-break: break-all;
      max-width: 90px;
    }
    .bom-table td.bom-bin,
    .bom-table .bom-bin {
      font-size: 9px;
    }
    .bom-qty-row {
      flex-wrap: wrap;
      gap: 8px;
    }
    .bom-qty-input {
      width: 80px;
      font-size: 20px;
    }
    .ba-sku-header {
      flex-wrap: wrap;
      gap: 6px;
    }
    .ba-sku-name {
      font-size: 12px;
      word-break: break-all;
    }
    .ba-sku-controls {
      margin-left: auto;
    }
    .ba-qty-input {
      width: 50px;
      font-size: 14px;
      padding: 6px;
    }
    .ba-bom-toggle {
      font-size: 10px;
      padding: 3px 8px;
    }
    .ba-parts-list {
      grid-template-columns: 1fr;
    }
    .ba-part-row {
      padding: 5px 0;
    }
    .ba-part-name {
      font-size: 11px;
      flex: 1;
      min-width: 0;
    }
    .ba-part-detail {
      gap: 8px;
    }
    .ba-part-qty {
      font-size: 12px;
      min-width: 45px;
      text-align: right;
    }
    .ba-footer {
      flex-wrap: wrap;
      gap: 10px;
    }
    .ba-summary {
      font-size: 11px;
    }
    .critical-overview-skus {
      grid-template-columns: 1fr;
    }
    .card-btn-group {
      gap: 4px;
    }
    .parts-btn, .build-all-btn {
      padding: 3px 8px;
    }
    .parts-btn span, .build-all-btn span {
      font-size: 9px !important;
    }
    .stocking-face-header {
      gap: 6px;
    }
  }

  /* Order line items export — Print + Download CSV split button.
     Sits in the toolbar above the line items table inside the order detail
     modal. The chevron half opens a small dropdown that currently has one
     entry (Download CSV). Built as a split button so a future menu item
     can slot in without reshuffling the layout. */
  .order-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 6px 0 8px;
    flex-wrap: wrap;
  }
  .order-list-toolbar-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
  }
  .order-list-export {
    position: relative;
    display: inline-flex;
    align-items: stretch;
  }
  .order-list-export-main,
  .order-list-export-chev {
    background: rgba(var(--role-cta-primary-rgb),0.08);
    border: 1px solid rgba(var(--role-cta-primary-rgb),0.4);
    color: var(--role-cta-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
  }
  .order-list-export-main {
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 7px 12px 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .order-list-export-chev {
    border-radius: 0 6px 6px 0;
    padding: 7px 9px;
    display: inline-flex;
    align-items: center;
  }
  .order-list-export-main:hover,
  .order-list-export-chev:hover,
  .order-list-export-chev.open {
    background: rgba(var(--role-cta-primary-rgb),0.18);
    border-color: var(--role-cta-primary);
  }
  .order-list-export-chev svg {
    width: 11px;
    height: 11px;
    transition: transform 120ms ease;
  }
  .order-list-export-chev.open svg { transform: rotate(180deg); }
  .order-list-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    background: #1f1d22;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    z-index: 100;
    display: none;
    overflow: hidden;
  }
  .order-list-export-menu.open { display: block; }
  .order-list-export-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #f5f5f5;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 14px;
    cursor: pointer;
  }
  .order-list-export-menu-item:hover {
    background: rgba(var(--role-cta-primary-rgb),0.1);
    color: var(--role-cta-primary);
  }

  /* Orders search + filter toolbar.
     Sits above the All Open Orders table and the Legacy / Held section.
     Search bar + collapsible filter panel. Each section keeps its own
     independent state via _ordersFilters[scope]. */
  .orders-toolbar { margin: 6px 0 12px; }
  .orders-search-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .orders-search-wrap { position: relative; flex: 1; min-width: 200px; }
  .orders-search-input {
    width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #f5f5f5;
    font-family: inherit; font-size: 12px;
    padding: 7px 32px 7px 30px; outline: none;
    transition: border-color 120ms ease, background 120ms ease;
  }
  .orders-search-input:focus { border-color: rgba(var(--role-cta-primary-rgb),0.5); background: rgba(255,255,255,0.07); }
  .orders-search-input::placeholder { color: rgba(255,255,255,0.3); }
  .orders-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4); pointer-events: none; }
  .orders-search-clear {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: rgba(255,255,255,0.4);
    cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 5px;
    display: none;
  }
  .orders-search-clear.visible { display: block; }
  .orders-search-clear:hover { color: var(--role-critical); }
  .orders-search-count { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.5); white-space: nowrap; }
  .orders-filter-toggle {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #f5f5f5;
    font-family: inherit; font-size: 12px; font-weight: 600;
    padding: 7px 12px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
  }
  .orders-filter-toggle:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
  .orders-filter-toggle.has-active { border-color: rgba(var(--role-cta-primary-rgb),0.5); color: var(--role-cta-primary); }
  .orders-filter-toggle-count {
    background: rgba(var(--role-cta-primary-rgb),0.2); color: var(--role-cta-primary);
    font-size: 10px; font-weight: 800;
    padding: 1px 6px; border-radius: 10px; margin-left: 2px;
  }
  .orders-filter-toggle-count:empty { display: none; }
  .orders-filter-toggle svg { width: 10px; height: 10px; transition: transform 120ms ease; }
  .orders-filter-toggle.open svg { transform: rotate(180deg); }
  .orders-filter-panel {
    display: none;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; padding: 12px 14px; margin-top: 8px;
  }
  .orders-filter-panel.open { display: block; }
  .orders-filter-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
  .orders-filter-row:last-of-type { margin-bottom: 0; }
  .orders-filter-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.4px; text-transform: uppercase;
    color: rgba(255,255,255,0.45); min-width: 70px;
  }
  .orders-filter-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px; color: rgba(255,255,255,0.8);
    font-family: inherit; font-size: 11px; font-weight: 600;
    padding: 4px 11px; cursor: pointer;
    transition: all 120ms ease;
  }
  .orders-filter-chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); }
  .orders-filter-chip.active { background: rgba(var(--role-cta-primary-rgb),0.15); border-color: rgba(var(--role-cta-primary-rgb),0.5); color: var(--role-cta-primary); }
  .orders-filter-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #f5f5f5;
    font-family: inherit; font-size: 12px;
    padding: 5px 8px; cursor: pointer; max-width: 240px;
  }
  .orders-filter-date-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: #f5f5f5;
    font-family: inherit; font-size: 11px;
    padding: 4px 8px; width: 130px;
  }
  .orders-filter-date-sep { font-size: 11px; color: rgba(255,255,255,0.4); }
  .orders-filter-clear {
    background: transparent;
    border: 1px solid rgba(var(--role-critical-rgb),0.4);
    border-radius: 6px; color: var(--role-critical);
    font-family: inherit; font-size: 11px; font-weight: 600;
    padding: 5px 11px; cursor: pointer;
    margin-left: auto; transition: background 120ms ease;
  }
  .orders-filter-clear:hover { background: rgba(var(--role-critical-rgb),0.1); }
  .orders-row-hidden { display: none !important; }

  @media (max-width: 720px) {
    .orders-search-row { flex-direction: column; align-items: stretch; }
    .orders-filter-toggle { width: 100%; justify-content: center; }
    .orders-search-count { text-align: center; }
    .orders-filter-row { flex-direction: column; align-items: flex-start; }
    .orders-filter-label { min-width: 0; }
    .orders-filter-clear { margin-left: 0; align-self: flex-end; }
    .orders-filter-select { max-width: 100%; width: 100%; }
  }

  /* ─── Home search engine ────────────────────────────────────────────
     Global search input + results. Reused by the Stock Central hub
     (restyled within .rw-search). Mirrors the app-shell dark theme. */
  #homeSearch {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px 16px 50px;
    font-size: 17px;
    color: var(--b2-text);
    background: var(--b2-surface-2);
    border: 1px solid var(--b2-hairline-strong);
    border-radius: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }
  #homeSearch::placeholder { color: var(--b2-text-3); }
  #homeSearch:focus {
    border-color: var(--b2-blue-border);
    background: var(--b2-surface-3);
    box-shadow: 0 0 0 3px var(--b2-blue-bg);
  }
  #homeResults {
    width: 100%;
    margin-top: 14px;
  }
  .home-results-group { margin-bottom: 18px; }
  .home-results-group-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--b2-text-3);
    padding: 4px 6px 8px;
  }
  .home-results-group-count { color: var(--b2-text-4); font-weight: 600; }
  .home-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    background: var(--b2-surface-1);
    border: 1px solid var(--b2-hairline);
    border-radius: 11px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--b2-text);
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .home-result-row:hover,
  .home-result-row.home-active {
    background: var(--b2-surface-2);
    border-color: var(--b2-hairline-strong);
  }
  .home-result-row.home-active {
    box-shadow: 0 0 0 2px var(--b2-blue-border);
  }
  .home-result-primary {
    font-size: 14px;
    font-weight: 600;
    color: var(--b2-text);
    white-space: nowrap;
  }
  .home-result-secondary {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--b2-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .home-result-meta {
    font-size: 12px;
    color: var(--b2-text-3);
    white-space: nowrap;
  }
  .home-lane-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .home-lane-chip.lane-rts {
    color: var(--role-ship-by-date);
    background: var(--role-ship-by-date-bg);
    border-color: var(--role-ship-by-date-border);
  }
  .home-lane-chip.lane-labeling {
    color: var(--role-cta-primary);
    background: var(--role-cta-primary-bg);
    border-color: var(--role-cta-primary-border);
  }
  .home-lane-chip.lane-loom {
    color: var(--b2-text-2);
    background: var(--b2-surface-3);
    border-color: var(--b2-hairline-strong);
  }
  .home-lane-chip.lane-progress {
    color: var(--b2-text-2);
    background: var(--b2-surface-2);
    border-color: var(--b2-hairline);
  }
  .home-lane-chip.lane-shipped {
    color: var(--b2-text-3);
    background: transparent;
    border-color: var(--b2-hairline);
  }
  .home-empty {
    text-align: center;
    color: var(--b2-text-3);
    font-size: 14px;
    padding: 28px 10px;
  }

  /* ─── Stock Central hub (Option B "At-a-glance") ─────────────────────
     Replaces the centered launcher's visual output. The search engine
     CSS above (#homeSearch / #homeResults / .home-result-* / .home-lane-chip
     / .home-empty) is REUSED — only the shell + cards are new. */
  .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .hub { max-width: 1160px; margin: 0 auto; padding: 40px 26px 90px; }
  .rw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
  .rw-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b2-text-3); font-weight: 700; margin-bottom: 7px; }
  .rw-title { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--b2-text); }
  .rw-title .accent { color: var(--b2-yellow); }
  .rw-sub { margin-top: 7px; font-size: 13.5px; color: var(--b2-text-2); }
  /* The hero search IS the real functional search — #homeSearch lives inside.
     The whole .rw-search box is the styled affordance; clicking it focuses
     the input. The input itself is transparent and fills the box. */
  .rw-search { position: relative; flex: 0 0 auto; width: 300px; height: 38px; border-radius: 9px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline); display: flex; align-items: center; gap: 9px; padding: 0 13px; color: var(--b2-text-3); font-size: 13px; cursor: text; transition: border-color .12s, background .12s; }
  .rw-search:hover { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .rw-search:focus-within { border-color: var(--b2-hairline-strong); background: var(--b2-surface-3); }
  .rw-search .ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--b2-text-3); }
  /* Override the big launcher input styling — in the hub it's the compact
     hero field. Reset to a transparent inline input. */
  .rw-search #homeSearch {
    width: 100%; box-sizing: border-box; flex: 1 1 auto; min-width: 0;
    padding: 0; height: 100%;
    font-size: 13px; color: var(--b2-text);
    background: transparent; border: 0; border-radius: 0;
    outline: none; box-shadow: none;
  }
  .rw-search #homeSearch::placeholder { color: var(--b2-text-3); }
  .rw-search #homeSearch:focus { background: transparent; border: 0; box-shadow: none; }
  /* Results overlay the cards: absolutely-positioned dropdown under the
     hero search. Reuses .home-result-* / .home-results-group / .home-empty. */
  #homeResults.rw-results {
    position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 86vw;
    max-height: 60vh; overflow-y: auto; margin-top: 0; z-index: 60;
    background: var(--b2-surface-0); border: 1px solid var(--b2-hairline-strong);
    border-radius: 12px; padding: 8px; box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  }
  #homeResults.rw-results:empty { display: none; }
  .rw-section { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b2-text-4); font-weight: 700; margin: 0 0 12px; }

  .b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .b-card { position: relative; border-radius: 12px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); padding: 17px 18px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 14px; transition: background .14s, border-color .14s, transform .14s; text-align: left; width: 100%; font: inherit; color: var(--b2-text); }
  .b-card:hover { background: var(--b2-surface-2); border-color: var(--b2-hairline-strong); transform: translateY(-2px); }
  .b-card:focus-visible { outline: none; border-color: var(--b2-blue-border); box-shadow: 0 0 0 3px var(--b2-blue-bg); }
  .b-top { display: flex; align-items: center; gap: 12px; }
  .b-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--b2-surface-3); border: 1px solid var(--b2-hairline); display: flex; align-items: center; justify-content: center; color: var(--b2-text-2); transition: color .14s, background .14s, border-color .14s; }
  .b-card:hover .b-ico { color: var(--b2-yellow); background: rgba(var(--b2-yellow-rgb),0.10); border-color: rgba(var(--b2-yellow-rgb),0.28); }
  .b-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--b2-text); }
  .b-desc { margin-top: 2px; font-size: 12px; color: var(--b2-text-4); }
  .b-foot { display: flex; align-items: center; gap: 9px; padding-top: 13px; border-top: 1px solid var(--b2-hairline); }
  .b-stat { font-size: 13px; color: var(--b2-text-2); display: inline-flex; align-items: center; gap: 6px; }
  .b-stat b { color: var(--b2-text); font-weight: 700; font-variant-numeric: tabular-nums; }
  .b-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; }
  .b-flag.crit { background: rgba(var(--b2-red-rgb),0.12); color: var(--b2-red); border-color: rgba(var(--b2-red-rgb),0.32); }
  .b-flag.warn { background: rgba(var(--b2-yellow-rgb),0.12); color: var(--b2-yellow); border-color: rgba(var(--b2-yellow-rgb),0.32); }
  .b-flag.calm { background: rgba(var(--b2-green-rgb),0.12); color: var(--b2-green); border-color: rgba(var(--b2-green-rgb),0.30); }
  .b-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .b-dot.crit { background: var(--b2-red); } .b-dot.warn { background: var(--b2-yellow); } .b-dot.calm { background: var(--b2-green); } .b-dot.info { background: var(--b2-blue); }

  @media (max-width: 1080px) { .b-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 720px)  {
    .b-grid { grid-template-columns: 1fr; }
    .rw-head { flex-direction: column; align-items: stretch; }
    .rw-search { width: 100%; }
    #homeResults.rw-results { width: 100%; right: 0; left: 0; }
  }

  /* ── Logistics Ship-By Radar — alternate page header (Display & Accessibility
     → "Logistics header" = Ship-By Radar). Faithful to the Direction C handoff;
     tokens only, so it respects each user's accessibility theme. ── */
  .lgx-radar { background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
  .lgx-radar-head { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--b2-hairline); }
  .lgx-radar-htitle { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
  .lgx-radar-htitle .t { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
  .lgx-radar-htitle .s { font-size: 12.5px; color: var(--b2-text-3); }
  .lgx-radar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .lgx-radar-card { padding: 16px 20px; border-right: 1px solid var(--b2-hairline); }
  .lgx-radar-card:last-child { border-right: 0; }
  .lgx-radar-when { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; color: var(--b2-text-3); }
  .lgx-radar-when .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 7px; }
  .lgx-radar-when.over { color: var(--b2-red); }
  .lgx-radar-when.soon { color: var(--b2-amber); }
  .lgx-radar-date { margin-top: 9px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
  .lgx-radar-date .prio { color: var(--role-critical); display: inline-flex; align-items: center; }
  .lgx-radar-date .prio svg { width: 15px; height: 15px; }
  .lgx-radar-ord { margin-top: 8px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; font-weight: 700; }
  .lgx-radar-cust { margin-top: 3px; font-size: 12px; color: var(--b2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lgx-radar-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--b2-hairline); font-size: 12px; color: var(--b2-text-3); }
  .lgx-radar-viewall { font-weight: 700; color: var(--b2-text-2); cursor: pointer; }
  .lgx-radar-viewall:hover { color: var(--b2-text); }
  .lgx-radar-empty { padding: 28px 20px; text-align: center; color: var(--b2-text-3); font-weight: 600; font-size: 13px; }
  @media (max-width: 1100px) {
    .lgx-radar-grid { grid-template-columns: repeat(2, 1fr); }
    .lgx-radar-card:nth-child(even) { border-right: 0; }
    .lgx-radar-card:nth-child(-n+2) { border-bottom: 1px solid var(--b2-hairline); }
  }

  /* ─── Admin Desk (ticket queue) ─── */
  .stockv2 .ad-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px; margin-top:6px; }
  /* "Open by owner" avatar strip — click a face to filter to their open tickets. */
  .stockv2 .ad-ownerload { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:10px; padding:8px 10px; background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:10px; }
  /* Inline filter-bar toggle that expands/collapses the owner strip. */
  .stockv2 .ad-owner-toggle { flex-shrink:0; font-size:12px; font-weight:600; cursor:pointer; color:var(--b2-text-2, var(--b2-text)); background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:8px; padding:5px 11px; }
  .stockv2 .ad-owner-toggle:hover { border-color:rgba(110,168,254,0.5); color:var(--b2-text); }
  .stockv2 .ad-owner-toggle.active { background:rgba(110,168,254,0.14); border-color:#6ea8fe; color:#6ea8fe; }
  .stockv2 .ad-owner-toggle-caret { opacity:.6; font-size:10px; }
  .stockv2 .ad-ownerload-row { display:flex; flex-wrap:wrap; gap:6px; }
  .stockv2 .ad-ownerload-item {
    display:flex; align-items:center; gap:7px; cursor:pointer;
    background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:999px;
    padding:3px 12px 3px 4px; color:var(--b2-text); font-size:12.5px; font-weight:600;
  }
  .stockv2 .ad-ownerload-item:hover { border-color:rgba(110,168,254,0.5); }
  .stockv2 .ad-ownerload-item.ad-ownerload-sel { background:rgba(110,168,254,0.14); border-color:#6ea8fe; }
  .stockv2 .ad-ownerload-ava { position:relative; display:inline-flex; }
  .stockv2 .ad-ownerload-ava .ad-ava { width:34px; height:34px; }
  .stockv2 .ad-ownerload-ava .ad-ava-ini { font-size:13px; }
  .stockv2 .ad-ownerload-count {
    position:absolute; bottom:-1px; right:-1px; min-width:15px; height:15px; padding:0 4px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#6ea8fe; color:#0b1530; font-size:9.5px; font-weight:800; border-radius:999px;
    border:2px solid var(--b2-surface-1); box-sizing:border-box;
  }
  .stockv2 .ad-ownerload-item.ad-ownerload-sel .ad-ownerload-count { border-color:#1e2836; }
  .stockv2 .ad-ownerload-name { padding-right:2px; }
  .stockv2 .ad-ownerload-clear { cursor:pointer; font-size:11.5px; font-weight:600; color:var(--b2-text-3); background:transparent; border:0; }
  .stockv2 .ad-ownerload-clear:hover { color:var(--b2-text); }
  .stockv2 .ad-warn { margin:10px 0 0; padding:10px 14px; border-radius:8px; font-size:12.5px; background:rgba(245,158,11,0.12); color:#f59e0b; border:1px solid rgba(245,158,11,0.35); }
  .stockv2 .ad-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
  .stockv2 .ad-pillrow { display:inline-flex; gap:4px; background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:9px; padding:3px; }
  .stockv2 .ad-pill { background:none; border:0; border-radius:6px; padding:5px 11px; font:inherit; font-size:12px; font-weight:600; color:var(--b2-text-3); cursor:pointer; white-space:nowrap; }
  .stockv2 .ad-pill:hover { color:var(--b2-text); }
  .stockv2 .ad-pill.active { background:var(--b2-surface-1); color:var(--b2-text); box-shadow:0 1px 2px rgba(0,0,0,0.2); }
  /* Compact dropdown for secondary filters (status / channel / tag).
     Matches the pill bar's height + tone so it reads as a peer of the
     scope pills next to it, but a single picker instead of a row. */
  .stockv2 .ad-filter-select {
    height:30px; padding:0 8px;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline);
    border-radius:9px; color:var(--b2-text);
    font:inherit; font-size:12px; font-weight:600;
    cursor:pointer;
  }
  .stockv2 .ad-filter-select:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-filter-select:focus { outline:none; border-color:var(--b2-hairline-strong); }
  /* Reminder timer — colorize the queue's "X ago" age text when a ticket
     has been silent past a threshold. Amber after 3 days, red after 7.
     Skips Closed / Resolved (intentional end-states; nothing to chase). */
  .stockv2 .ad-stale-amber { color:#f59e0b; font-weight:600; }
  .stockv2 .ad-stale-red   { color:#ef4444; font-weight:700; }
  /* Ticket-title rename — sits inline in the modal header. The pencil
     button is muted until hover so the title reads as the primary thing;
     edit mode swaps the title for an input + Save/Cancel inline. */
  .skl-title .ad-rename-btn {
    margin-left:10px; vertical-align:middle;
    background:transparent; border:1px solid transparent; border-radius:6px;
    color:var(--b2-text-3); cursor:pointer;
    font-size:14px; line-height:1; padding:4px 7px;
    opacity:0.55; transition: opacity 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  }
  .skl-title:hover .ad-rename-btn { opacity:1; }
  .skl-title .ad-rename-btn:hover { color:var(--b2-text); border-color:var(--b2-hairline); }
  .skl-title .ad-rename-input {
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline-strong); border-radius:6px;
    color:var(--b2-text); font:inherit; font-size:inherit; font-weight:inherit;
    padding:4px 10px; min-width:340px;
  }
  .skl-title .ad-rename-input:focus { outline:none; border-color:#6ea8fe; }
  .skl-title .ad-rename-save,
  .skl-title .ad-rename-cancel {
    margin-left:6px; padding:5px 12px; border-radius:6px;
    font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  }
  .skl-title .ad-rename-save { background:#6ea8fe; border:0; color:#0b0b0b; }
  .skl-title .ad-rename-save:hover { background:#8fbaff; }
  .skl-title .ad-rename-cancel { background:transparent; border:1px solid var(--b2-hairline); color:var(--b2-text-2); }
  .skl-title .ad-rename-cancel:hover { color:var(--b2-text); border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-search { flex:1; min-width:180px; }
  .stockv2 .ad-search input { width:100%; height:30px; padding:0 12px; background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:8px; color:var(--b2-text); font:inherit; font-size:12.5px; outline:0; }
  .stockv2 .ad-search input:focus { border-color:var(--b2-hairline-strong); }
  /* chips */
  .stockv2 .ad-chip { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; padding:1px 7px; border-radius:5px; vertical-align:middle; white-space:nowrap; }
  .stockv2 .ad-chip-type { background:rgba(255,255,255,0.07); color:var(--b2-text-2, var(--b2-text)); font-weight:600; }
  .stockv2 .ad-chip-prio-urgent { background:rgba(239,68,68,0.14); color:#ef4444; }
  .stockv2 .ad-chip-prio-high { background:rgba(245,158,11,0.14); color:#f59e0b; }
  .stockv2 .ad-chip.ad-dot-new { background:rgba(110,168,254,0.16); color:#6ea8fe; }
  .stockv2 .ad-chip.ad-dot-open { background:rgba(245,158,11,0.14); color:#f59e0b; }
  .stockv2 .ad-chip.ad-dot-waitint { background:rgba(236,72,153,0.16); color:#ec4899; }
  .stockv2 .ad-chip.ad-dot-waitcust { background:rgba(45,212,191,0.16); color:#2dd4bf; }
  .stockv2 .ad-chip.ad-dot-resolved { background:rgba(34,197,94,0.14); color:#22c55e; }
  .stockv2 .ad-chip.ad-dot-closed { background:rgba(255,255,255,0.06); color:var(--b2-text-3); }
  /* Channel chips — one per source mailbox. Colors are deliberately
     distinct from status/priority so the eye can read channel separately
     from urgency at a glance. Anything not in the route table (manual
     forwards, oddballs) lands on the neutral `forwarded` style. */
  .stockv2 .ad-chip-channel { font-weight:600; }
  .stockv2 .ad-chip-channel-orders    { background:rgba(110,168,254,0.16); color:#6ea8fe; }
  .stockv2 .ad-chip-channel-sales     { background:rgba(34,197,94,0.14);   color:#22c55e; }
  .stockv2 .ad-chip-channel-quotes    { background:rgba(168,85,247,0.16);  color:#a855f7; }
  .stockv2 .ad-chip-channel-returns   { background:rgba(245,158,11,0.16);  color:#f59e0b; }
  .stockv2 .ad-chip-channel-forwarded { background:rgba(255,255,255,0.07); color:var(--b2-text-3); }
  /* Manual tag chips on tickets. Five fixed colors matching the Airtable
     Tags multi-select. Selected = solid color (default). Off-state shows
     as a dashed outline so unset tags read as "pick me" affordances in
     the detail-modal toggle row without competing with selected chips. */
  .stockv2 .ad-chip-tag { font-weight:600; }
  .stockv2 .ad-chip-tag-po              { background:rgba(34,197,94,0.16);  color:#22c55e; }
  .stockv2 .ad-chip-tag-rfq             { background:rgba(110,168,254,0.16); color:#6ea8fe; }
  .stockv2 .ad-chip-tag-orderquestion   { background:rgba(245,158,11,0.16); color:#f59e0b; }
  .stockv2 .ad-chip-tag-productquestion { background:rgba(168,85,247,0.16); color:#a855f7; }
  .stockv2 .ad-chip-tag-stocketacheck   { background:rgba(45,212,191,0.16); color:#2dd4bf; }
  .stockv2 .ad-chip-tag-other           { background:rgba(255,255,255,0.07); color:var(--b2-text-3); }
  /* Button-as-chip resets + off state for the toggle row */
  .stockv2 button.ad-chip-tag { border:0; padding:1px 7px; cursor:pointer; font:inherit; font-size:10px; font-weight:700; letter-spacing:.02em; line-height:inherit; vertical-align:middle; }
  .stockv2 button.ad-chip-tag:hover { filter:brightness(1.15); }
  .stockv2 .ad-chip-tag-off {
    background:transparent !important; border:1px dashed var(--b2-hairline) !important;
    color:var(--b2-text-3) !important; font-weight:600 !important; opacity:0.72;
    padding:0 6px !important;
  }
  .stockv2 .ad-chip-tag-off:hover { opacity:1; filter:none; border-color:var(--b2-hairline-strong) !important; color:var(--b2-text-2) !important; }
  .stockv2 .ad-tag-toggles { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-4px 0 14px; }
  .stockv2 .ad-tag-toggles-label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--b2-text-3); margin-right:4px; }
  /* status dots (reuse .row-dot sizing) */
  .stockv2 .row-dot.ad-dot-new { background:#6ea8fe; box-shadow:0 0 0 3px rgba(110,168,254,0.18); }
  .stockv2 .row-dot.ad-dot-open { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,0.18); }
  .stockv2 .row-dot.ad-dot-waitint { background:#ec4899; box-shadow:0 0 0 3px rgba(236,72,153,0.18); }
  .stockv2 .row-dot.ad-dot-waitcust { background:#2dd4bf; box-shadow:0 0 0 3px rgba(45,212,191,0.18); }
  .stockv2 .row-dot.ad-dot-resolved { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.18); }
  .stockv2 .row-dot.ad-dot-closed { background:var(--b2-text-3); }
  /* detail modal */
  .stockv2 .ad-detail { display:flex; flex-direction:column; gap:2px; }
  .stockv2 .ad-drow { display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--b2-hairline); font-size:13px; }
  .stockv2 .ad-dlabel { width:120px; flex-shrink:0; color:var(--b2-text-3); font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; padding-top:1px; }
  .stockv2 .ad-dval { color:var(--b2-text); }
  /* Compact ticket header: chip row + collapsible tag picker + one meta line. */
  .stockv2 .ad-meta-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
  .stockv2 .ad-tag-add { font-size:11px; font-weight:600; cursor:pointer; color:var(--b2-text-3); background:transparent; border:1px dashed var(--b2-hairline); border-radius:999px; padding:2px 9px; }
  .stockv2 .ad-tag-add:hover { color:var(--b2-text); border-color:var(--b2-text-3); }
  .stockv2 .ad-tag-picker { margin:-2px 0 10px; }
  .stockv2 .ad-meta-line { display:flex; flex-wrap:wrap; align-items:center; gap:0; font-size:12.5px; color:var(--b2-text-2, var(--b2-text-3)); line-height:1.7; }
  .stockv2 .ad-meta-strong { color:var(--b2-text); font-weight:600; }
  .stockv2 .ad-meta-email { color:var(--b2-accent, #6ea8fe); text-decoration:none; }
  .stockv2 .ad-meta-email:hover { text-decoration:underline; }
  .stockv2 .ad-meta-sep { color:var(--b2-text-3); opacity:.5; margin:0 8px; }
  .stockv2 .ad-soon { margin-top:14px; padding:10px 12px; border-radius:8px; background:var(--b2-surface-2); color:var(--b2-text-3); font-size:12px; }
  /* Admin Desk ticket actions */
  .stockv2 .ad-actions { margin-top:16px; padding:12px 14px; border:1px solid var(--b2-hairline); border-radius:10px; background:var(--b2-surface-1); display:flex; flex-direction:column; gap:9px; }
  .stockv2 .ad-act-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .stockv2 .ad-act-label { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--b2-text-3); margin-right:2px; }
  .stockv2 .ad-select, .stockv2 .ad-input, .stockv2 .ad-textarea {
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px;
    color:var(--b2-text); font:inherit; font-size:12.5px; padding:6px 9px; outline:0;
  }
  .stockv2 .ad-select:focus, .stockv2 .ad-input:focus, .stockv2 .ad-textarea:focus { border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-input { width:100%; }
  .stockv2 .ad-note-box { display:flex; flex-direction:column; gap:8px; padding-top:3px; border-top:1px solid var(--b2-hairline); margin-top:3px; }
  .stockv2 .ad-textarea { width:100%; resize:vertical; }
  .stockv2 .ad-btn { background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px; color:var(--b2-text); font:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; cursor:pointer; }
  .stockv2 .ad-btn:hover { border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-btn-primary { background:#6ea8fe; border-color:#6ea8fe; color:#0b1530; }
  .stockv2 .ad-btn-primary:hover { filter:brightness(1.07); }
  /* Bulk selection — Gmail-style. No dedicated column: the leading cell shows
     the unread badge by default and swaps to a checkbox on row-hover or when
     selected. The action bar floats as a pill at the bottom. */
  .stockv2 .ad-lead { width:38px; text-align:center; }
  .stockv2 .ad-lead-check { display:none; width:16px; height:16px; cursor:pointer; accent-color:#6ea8fe; vertical-align:middle; }
  .stockv2 .ad-row:hover .ad-lead-check,
  .stockv2 .ad-row.ad-row-selected .ad-lead-check { display:inline-block; }
  .stockv2 .ad-row:hover .ad-lead-badge,
  .stockv2 .ad-row.ad-row-selected .ad-lead-badge { display:none; }
  .stockv2 .ad-selectall { display:inline-flex; align-items:center; margin-right:10px; }
  .stockv2 .ad-selectall input { width:16px; height:16px; cursor:pointer; accent-color:#6ea8fe; vertical-align:middle; }
  .stockv2 .ad-row-selected { background:rgba(110,168,254,0.12) !important; }
  .stockv2 .ad-row-selected:hover { background:rgba(110,168,254,0.16) !important; }
  /* Unclaimed rows — amber left-bar + faint tint (matches the Unclaimed KPI
     tile) so the "needs an owner" pile reads at a glance without shouting. */
  .stockv2 .ad-row.ad-row-unclaimed { background:rgba(245,180,66,0.07) !important; box-shadow:inset 3px 0 0 #f5b442; }
  .stockv2 .ad-row.ad-row-unclaimed:hover { background:rgba(245,180,66,0.12) !important; }
  /* "Assigned to you by someone else, not yet opened" — a loud purple row so an
     incoming assignment is impossible to miss. Clears once you open the ticket.
     Wins over the unclaimed tint (can't co-occur, but kept specific + late). */
  .stockv2 .ad-row.ad-row-assigned-new { background:rgba(168,108,255,0.16) !important; box-shadow:inset 3px 0 0 #a86cff; }
  .stockv2 .ad-row.ad-row-assigned-new:hover { background:rgba(168,108,255,0.24) !important; }
  .stockv2 .ad-chip-assigned-new { background:#a86cff; color:#15082b; border:0; font-weight:700; }
  /* Fired follow-up reminder — teal/green "it's time" highlight + badge, pinned
     to the top of the Inbox. Wins over other row tints. */
  .stockv2 .ad-row.ad-row-reminder { background:rgba(45,212,160,0.15) !important; box-shadow:inset 3px 0 0 #2dd4a0; }
  .stockv2 .ad-row.ad-row-reminder:hover { background:rgba(45,212,160,0.22) !important; }
  .stockv2 .ad-chip-reminder { background:#2dd4a0; color:#062a20; border:0; font-weight:700; }
  .stockv2 .ad-rem-pending { color:#2dd4a0; font-weight:600; }
  /* Reply composer "Remind me" row */
  .stockv2 .ad-reply-remind { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:10px; font-size:12px; }
  .stockv2 .ad-reply-remind-label { color:var(--b2-text-3); font-weight:600; }
  .stockv2 .ad-remind-preset { font-size:12px; font-weight:600; cursor:pointer; color:var(--b2-text-2,var(--b2-text)); background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:999px; padding:3px 11px; }
  .stockv2 .ad-remind-preset:hover { border-color:rgba(45,212,160,0.5); color:var(--b2-text); }
  .stockv2 .ad-remind-preset.active { background:rgba(45,212,160,0.14); border-color:rgba(45,212,160,0.5); color:#2dd4a0; }
  .stockv2 .ad-remind-date { font-size:12px; background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:7px; padding:3px 8px; color:var(--b2-text); color-scheme:dark; }
  .stockv2 .ad-reply-remind-chosen { color:#2dd4a0; font-weight:600; }
  /* Open-ticket head reminder chip / button */
  .stockv2 .ad-rem-head-chip { display:inline-flex; align-items:center; gap:6px; margin-left:6px; font-size:12px; font-weight:600; color:#2dd4a0; background:rgba(45,212,160,0.12); border:1px solid rgba(45,212,160,0.4); border-radius:999px; padding:3px 10px; }
  .stockv2 .ad-rem-head-clear { background:none; border:0; color:#2dd4a0; cursor:pointer; font-size:12px; padding:0 0 0 2px; line-height:1; }
  .stockv2 .ad-iconbtn.ad-rem-head-btn { width:auto; padding:0 10px; gap:5px; font-size:12px; font-weight:600; }
  .stockv2 .ad-remind-pop { display:flex; flex-direction:column; gap:8px; }
  .stockv2 .ad-remind-pop-date { margin-top:4px; }
  /* Floating action pill */
  .stockv2 .ad-bulkbar:empty { display:none; }
  .stockv2 .ad-bulkbar-inner { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:7100; display:flex; align-items:center; gap:14px; padding:9px 10px 9px 18px; background:rgba(26,26,28,0.97); border:1px solid var(--b2-hairline-strong,#3a3a3c); border-radius:13px; box-shadow:0 14px 40px rgba(0,0,0,0.55); animation:adBulkPop .14s ease-out; }
  @keyframes adBulkPop { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
  .stockv2 .ad-bulkbar-count { font-weight:700; font-size:13px; color:#fff; white-space:nowrap; }
  .stockv2 .ad-bulkbar-actions { display:flex; gap:8px; }
  .stockv2 .ad-bulkbar-inner .ad-btn { background:#2f2f33; border-color:#45454a; color:#fff; }
  .stockv2 .ad-bulkbar-inner .ad-btn:hover { border-color:#6a6a72; }
  .stockv2 .ad-bulkbar-clear { background:transparent; border:none; color:#9a9aa2; font:inherit; font-size:16px; line-height:1; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:8px; }
  .stockv2 .ad-bulkbar-clear:hover { color:#fff; background:rgba(255,255,255,0.08); }
  /* View-as (app-wide impersonation lens) — lives in the profile dropdown as a
     grid of teammate avatar circles. Plus an 👁 marker + ring on the header
     avatar while a lens is active. */
  .viewas-section { padding:12px 14px; border-bottom:1px solid var(--b2-hairline,#2c2c2e); }
  .viewas-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
  .viewas-reset { background:transparent; border:1px solid var(--b2-hairline-strong,#3a3a3c); border-radius:7px; color:var(--b2-text,#fff); font:inherit; font-size:11.5px; font-weight:600; padding:3px 9px; cursor:pointer; }
  .viewas-reset:hover { background:rgba(255,255,255,0.06); }
  .viewas-active { font-size:11.5px; line-height:1.4; color:var(--b2-text-2,#a0a0a6); margin-bottom:10px; }
  .viewas-active strong { color:var(--b2-text,#fff); }
  .viewas-avatars { display:flex; flex-wrap:wrap; gap:6px 4px; max-height:188px; overflow-y:auto; }
  .viewas-ava { width:60px; display:flex; flex-direction:column; align-items:center; gap:4px; background:transparent; border:none; padding:6px 2px; border-radius:9px; cursor:pointer; }
  .viewas-ava:hover { background:rgba(255,255,255,0.06); }
  .viewas-ava-circle { width:38px; height:38px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--b2-surface-2,#2a2a2c); border:2px solid transparent; box-sizing:border-box; }
  .viewas-ava-circle img { width:100%; height:100%; object-fit:cover; }
  .viewas-ava .viewas-ini { font-size:13px; font-weight:800; color:var(--teal,#6ea8fe); display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
  .viewas-ava.is-active .viewas-ava-circle { border-color:#f5d342; }
  .viewas-ava-name { font-size:10.5px; font-weight:600; color:var(--b2-text-2,#a0a0a6); max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .viewas-ava:hover .viewas-ava-name { color:var(--b2-text,#fff); }
  .user-trigger.impersonating .user-avatar-wrap { position:relative; }
  .user-trigger.impersonating .user-avatar-wrap::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid #f5d342; pointer-events:none; }
  /* Admin Desk pinned-notes strip — sits between the action bar and the
     timeline so internal context is visible the moment the ticket opens.
     Amber-tinted so notes read as "team scratchpad" without competing
     with the customer-facing thread below. */
  .stockv2 .ad-notes-pin {
    margin-top:14px; padding:10px 12px;
    background:rgba(245,158,11,0.06); border:1px solid rgba(245,158,11,0.28);
    border-left:3px solid #f59e0b; border-radius:8px;
  }
  .stockv2 .ad-notes-pin-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .stockv2 .ad-notes-pin-title { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#f59e0b; flex:1; }
  /* Per-thread notification toggle (All replies ⇄ Mentions only). */
  .stockv2 .ad-sub-toggle {
    flex-shrink:0; font-size:11px; font-weight:600; cursor:pointer;
    color:var(--b2-text-2, var(--b2-text)); background:var(--b2-surface-1);
    border:1px solid var(--b2-hairline); border-radius:999px; padding:3px 10px;
  }
  .stockv2 .ad-sub-toggle:hover { border-color:rgba(110,168,254,0.5); color:var(--b2-text); }
  .stockv2 .ad-sub-toggle[data-mode="all"] { color:#6ea8fe; border-color:rgba(110,168,254,0.4); background:rgba(110,168,254,0.10); }
  .stockv2 .ad-notes-pin-count {
    display:inline-block; min-width:18px; padding:0 6px; margin-left:4px;
    border-radius:9px; background:rgba(245,158,11,0.18);
    font-size:11px; font-weight:700; text-align:center; color:#f59e0b;
  }
  .stockv2 .ad-notes-pin-list {
    display:flex; flex-direction:column; gap:10px;
    max-height:240px; overflow-y:auto;
    padding-right:2px;
  }
  .stockv2 .ad-notes-pin-empty {
    font-size:12px; color:var(--b2-text-3); padding:14px 4px;
    text-align:center; font-style:italic;
  }
  .stockv2 .ad-notes-pin-compose {
    display:flex; align-items:flex-end; gap:8px; margin-top:10px;
    padding-top:10px; border-top:1px solid rgba(245,158,11,0.20);
  }
  .stockv2 .ad-notes-pin-input {
    flex:1; min-height:34px; max-height:120px; resize:none;
    background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:7px;
    padding:8px 10px; font-size:13px; color:var(--b2-text);
    font-family:inherit; line-height:1.4;
  }
  .stockv2 .ad-notes-pin-input:focus { outline:none; border-color:rgba(245,158,11,0.5); }
  .stockv2 .ad-notes-pin-input:disabled { opacity:0.6; cursor:wait; }
  /* @-mention autocomplete (internal notes) */
  .stockv2 .ad-mention-wrap { position:relative; flex:1; display:flex; }
  .stockv2 .ad-mention-wrap .ad-notes-pin-input { width:100%; }
  .stockv2 .ad-mention-menu {
    position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:30;
    background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:9px;
    box-shadow:0 10px 28px rgba(0,0,0,0.38); overflow:hidden auto; max-height:240px;
  }
  .stockv2 .ad-mention-opt {
    display:flex; align-items:center; gap:9px; width:100%; text-align:left;
    padding:7px 11px; background:transparent; border:0; cursor:pointer;
    color:var(--b2-text); font-size:13px; font-family:inherit;
  }
  .stockv2 .ad-mention-opt:hover, .stockv2 .ad-mention-opt.active { background:rgba(110,168,254,0.16); }
  .stockv2 .ad-mention-opt-ava .ad-ava { width:22px; height:22px; }
  .stockv2 .ad-mention-opt-ava .ad-ava-ini { font-size:9px; }
  .stockv2 .ad-mention-opt-name { font-weight:600; }
  .stockv2 .ad-mention-opt-email { margin-left:auto; color:var(--b2-text-3); font-size:11px; }
  /* Inline @mention tag inside a note body — Slack-style accent pill. */
  .stockv2 .ad-mention-tag { display:inline-block; position:relative; color:#6ea8fe; font-weight:600; background:rgba(110,168,254,0.12); border-radius:4px; padding:0 3px; cursor:default; outline:none; }
  /* Hover profile card — pure tooltip, revealed on hover/focus of the tag. */
  .stockv2 .ad-mention-card {
    display:none; position:absolute; bottom:calc(100% + 6px); left:0; z-index:60;
    pointer-events:none; min-width:200px; max-width:280px;
    background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,0.4); padding:10px 12px;
    align-items:center; gap:10px; color:var(--b2-text);
  }
  .stockv2 .ad-mention-tag:hover .ad-mention-card,
  .stockv2 .ad-mention-tag:focus .ad-mention-card { display:flex; }
  .stockv2 .ad-mca-circle {
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:38px; height:38px; border-radius:50%; overflow:hidden;
    background:var(--ad-ava-color, #3a4252); color:#fff; font-weight:700;
  }
  .stockv2 .ad-mca-circle img { width:100%; height:100%; object-fit:cover; }
  .stockv2 .ad-mca-ini { font-size:13px; }
  .stockv2 .ad-mention-card-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .stockv2 .ad-mention-card-name { font-weight:700; font-size:13px; color:var(--b2-text); }
  .stockv2 .ad-mention-card-role { font-size:11.5px; color:var(--b2-text-2, var(--b2-text-3)); font-weight:600; }
  .stockv2 .ad-mention-card-email { font-size:11px; color:var(--b2-text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stockv2 .ad-notes-pin-send {
    flex-shrink:0; padding:0 16px; height:34px; border-radius:7px;
    background:#f59e0b; border:0; color:#1a1a1a; cursor:pointer;
    font-size:12.5px; font-weight:700; letter-spacing:.02em;
  }
  .stockv2 .ad-notes-pin-send:hover { background:#fbbf24; }
  .stockv2 .ad-notes-pin-send:disabled { opacity:0.5; cursor:not-allowed; }
  .stockv2 .ad-notes-pin-item { display:flex; gap:10px; align-items:flex-start; }
  .stockv2 .ad-notes-pin-ava { flex-shrink:0; padding-top:1px; }
  .stockv2 .ad-notes-pin-ava .ad-ava { width:28px; height:28px; }
  .stockv2 .ad-notes-pin-ava .ad-ava-ini { font-size:10.5px; }
  .stockv2 .ad-notes-pin-content { flex:1; min-width:0; }
  .stockv2 .ad-notes-pin-meta { display:flex; align-items:baseline; gap:8px; }
  .stockv2 .ad-notes-pin-meta strong { font-size:12.5px; font-weight:600; color:var(--b2-text); }
  .stockv2 .ad-notes-pin-time { font-size:11px; color:var(--b2-text-3); }
  .stockv2 .ad-notes-pin-body { font-size:13px; color:var(--b2-text-2, var(--b2-text)); margin-top:2px; line-height:1.45; word-break:break-word; }
  .stockv2 .ad-notes-pin-mention { font-size:11px; color:#6ea8fe; margin-top:3px; }
  /* Admin Desk timeline */
  .stockv2 .ad-timeline { display:flex; flex-direction:column; gap:8px; }
  .stockv2 .ad-tl-empty { color:var(--b2-text-3); font-size:12px; padding:8px 2px; }
  /* Timeline load skeleton — shimmer bars shown while the first events fetch
     is in flight, then the real timeline eases in (replaces the old
     "Loading…" text pop + the flicker from re-rendering on every broadcast). */
  .stockv2 .ad-tl-skel { padding:2px 0; }
  .stockv2 .ad-skel-row { height:46px; border-radius:8px; margin:8px 0; background:linear-gradient(90deg, var(--b2-surface-1) 25%, var(--b2-hairline) 37%, var(--b2-surface-1) 63%); background-size:400% 100%; animation: adShimmer 1.15s ease-in-out infinite; }
  @keyframes adShimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
  .stockv2 #adTimeline.ad-reveal { animation: adReveal 0.24s ease-out; }
  @keyframes adReveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) { .stockv2 .ad-skel-row { animation:none; } .stockv2 #adTimeline.ad-reveal { animation:none; } }
  .stockv2 .ad-tl-item { padding:9px 11px; border-radius:8px; background:var(--b2-surface-1); border:1px solid var(--b2-hairline); border-left:3px solid var(--b2-hairline-strong); }
  .stockv2 .ad-tl-head { display:flex; align-items:center; gap:8px; }
  .stockv2 .ad-tl-kind { font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:1px 6px; border-radius:5px; background:rgba(255,255,255,0.07); color:var(--b2-text-2, var(--b2-text)); }
  .stockv2 .ad-tl-kind.ad-tl-customermessage { background:rgba(45,212,191,0.16); color:#2dd4bf; }
  .stockv2 .ad-tl-kind.ad-tl-reassignment { background:rgba(236,72,153,0.16); color:#ec4899; }
  .stockv2 .ad-tl-kind.ad-tl-statuschange { background:rgba(245,158,11,0.16); color:#f59e0b; }
  .stockv2 .ad-tl-kind.ad-tl-reply { background:rgba(110,168,254,0.16); color:#6ea8fe; }
  .stockv2 .ad-tl-author { font-size:12px; font-weight:600; color:var(--b2-text); }
  /* Customer email beside the name on a customer message — muted, selectable. */
  .stockv2 .ad-tl-author-email { margin-left:6px; font-weight:500; font-size:11.5px; color:var(--b2-text-3); user-select:all; }
  .stockv2 .ad-tl-time { font-size:11px; color:var(--b2-text-3); margin-left:auto; }
  .stockv2 .ad-tl-body { font-size:12.5px; color:var(--b2-text-2, var(--b2-text)); margin-top:4px; line-height:1.45; cursor:text; -webkit-user-select:text; user-select:text; }
  /* Show full message toggle — link-style button under a truncated body.
     Subtle so it doesn't compete with the message text; click-target
     stays generous via vertical padding. */
  .stockv2 .ad-tl-body-toggle {
    display:block; margin-top:6px; padding:2px 0;
    background:transparent; border:0; cursor:pointer;
    color:#6ea8fe; font-size:11.5px; font-weight:600;
    text-decoration:underline; text-underline-offset:2px;
  }
  .stockv2 .ad-tl-body-toggle:hover { color:#8fbaff; }
  .stockv2 .ad-tl-body-full { white-space:pre-wrap; }
  /* Long-body expand affordance — cursor signals the whole body is
     click-to-expand; hover lifts the body text color a hair so it reads
     as interactive without a heavy treatment. */
  .stockv2 .ad-tl-body-clickable { cursor:pointer; }
  .stockv2 .ad-tl-body-clickable:hover { color:var(--b2-text); }
  /* Mark as read — neutral ack action next to Reply. Intentionally low-key
     (no green "done"/completion cue): it only clears the new-message badge,
     it does not finish the ticket. Closing the ticket is the red action. */
  .stockv2 .ad-tl-action.ad-tl-action-read {
    background:rgba(255,255,255,0.04); border-color:var(--b2-border); color:var(--b2-text-2, var(--b2-text));
  }
  .stockv2 .ad-tl-action.ad-tl-action-read:hover { background:rgba(255,255,255,0.08); color:var(--b2-text); }
  .stockv2 .ad-tl-action.ad-tl-action-read svg { opacity:0.85; }
  /* Mark as unread — amber "needs attention again" cue. Distinct from the
     neutral read action and the red close action. */
  .stockv2 .ad-tl-action.ad-tl-action-unread {
    background:rgba(245,180,66,0.10); border-color:rgba(245,180,66,0.32); color:#f5b442;
  }
  .stockv2 .ad-tl-action.ad-tl-action-unread:hover { background:rgba(245,180,66,0.18); border-color:rgba(245,180,66,0.5); }
  .stockv2 .ad-tl-action.ad-tl-action-unread svg { opacity:0.9; }
  /* Use template — distinct violet "compose from this" action. */
  .stockv2 .ad-tl-action.ad-tl-action-template {
    background:rgba(168,108,255,0.12); border-color:rgba(168,108,255,0.4); color:#b98cff;
  }
  .stockv2 .ad-tl-action.ad-tl-action-template:hover { background:rgba(168,108,255,0.2); border-color:rgba(168,108,255,0.6); }
  /* Template-send composer — violet accent + prefilled-subject input. */
  .stockv2 .ad-reply-composer.ad-reply-template { border-color:rgba(168,108,255,0.45); }
  .stockv2 .ad-tpl-banner { background:rgba(168,108,255,0.1); border-color:rgba(168,108,255,0.3); }
  .stockv2 input.ad-tpl-subject { min-height:0; height:auto; resize:none; font:inherit; }
  .stockv2 .ad-tl-mention { font-size:11px; color:#6ea8fe; margin-top:3px; }
  .stockv2 .ad-tl-summary { font-size:12.5px; color:var(--b2-text-2, var(--b2-text)); margin-top:4px; line-height:1.45; }
  /* Per-message actions row — hover-revealed on read items, always visible
     on unread items (the reply prompt belongs front-of-mind there). */
  .stockv2 .ad-tl-actions { display:flex; gap:6px; margin-top:8px; opacity:0; transition: opacity 0.12s ease; }
  .stockv2 .ad-tl-item:hover .ad-tl-actions, .stockv2 .ad-tl-item.ad-tl-unread .ad-tl-actions { opacity:1; }
  .stockv2 .ad-tl-action {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 9px; border-radius:6px;
    background:rgba(110,168,254,0.10); border:1px solid rgba(110,168,254,0.32);
    color:#6ea8fe; font-size:11.5px; font-weight:600; cursor:pointer;
    letter-spacing:.01em;
  }
  .stockv2 .ad-tl-action:hover { background:rgba(110,168,254,0.18); border-color:rgba(110,168,254,0.5); }
  .stockv2 .ad-tl-action svg { width:13px; height:13px; }
  /* Attachment thumbnails + file chips on timeline events. Images first as
     80 px tiles (click to open full size); files render as pill chips with
     paperclip + name + size. Wraps to multiple rows when the count is high. */
  .stockv2 .ad-tl-attachments { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .stockv2 .ad-tl-att-thumb {
    display:inline-block; width:80px; height:80px; border-radius:7px; overflow:hidden;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline);
    transition: transform 0.12s ease, border-color 0.12s ease;
  }
  .stockv2 .ad-tl-att-thumb:hover { transform:scale(1.04); border-color:var(--b2-hairline-strong); }
  .stockv2 .ad-tl-att-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .stockv2 .ad-tl-att-chip {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px; border-radius:14px;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline);
    color:var(--b2-text-2, var(--b2-text)); font-size:11.5px; line-height:1.2;
    text-decoration:none; max-width:260px;
  }
  .stockv2 .ad-tl-att-chip:hover { background:var(--b2-surface-1); border-color:var(--b2-hairline-strong); color:var(--b2-text); }
  .stockv2 .ad-tl-att-icon { opacity:0.7; }
  .stockv2 .ad-tl-att-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stockv2 .ad-tl-att-size { color:var(--b2-text-3); font-weight:500; }
  /* Attachment preview modal — opens in the dashboard instead of a new tab.
     Images use <img>, PDFs use the browser's built-in iframe viewer. The
     bar carries the filename + open-in-tab + download + close so the user
     keeps the option to bail out to a real download if they need to. */
  .ad-att-preview-overlay { padding:24px; }
  .stockv2 .ad-att-preview-shell {
    position:relative;
    width:auto; max-width:min(96vw, 1400px); max-height:92vh;
    display:flex; flex-direction:column;
    background:var(--b2-surface-1);
    border:1px solid var(--b2-hairline);
    border-radius:10px; overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,0.55);
  }
  .stockv2 .ad-att-preview-bar {
    display:flex; align-items:center; gap:8px;
    padding:9px 12px;
    background:var(--b2-surface-2);
    border-bottom:1px solid var(--b2-hairline);
    flex-shrink:0;
  }
  .stockv2 .ad-att-preview-name {
    flex:1; min-width:0;
    font-size:13px; font-weight:600; color:var(--b2-text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .stockv2 .ad-att-preview-action,
  .stockv2 .ad-att-preview-close {
    width:30px; height:30px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; color:var(--b2-text-2, var(--b2-text));
    border:1px solid var(--b2-hairline); cursor:pointer;
    font-size:14px; text-decoration:none; line-height:1;
  }
  .stockv2 .ad-att-preview-action:hover,
  .stockv2 .ad-att-preview-close:hover {
    background:var(--b2-surface-1); color:var(--b2-text); border-color:var(--b2-hairline-strong);
  }
  .stockv2 .ad-att-preview-body {
    flex:1; min-height:0; display:flex;
    /* `safe center` keeps the image centered when it fits, but falls back
       to start alignment when it's bigger than the body — without `safe`
       the overflow region above/left of center is unreachable by scroll. */
    align-items:safe center; justify-content:safe center;
    background:#0b0b0b; overflow:auto;
  }
  .stockv2 .ad-att-preview-img {
    /* Default: scale down to fit viewport, keep aspect ratio. */
    max-width:min(92vw, 1380px); max-height:84vh;
    width:auto; height:auto;
    display:block; object-fit:contain;
    cursor:zoom-in; transition: max-width 0.18s ease, max-height 0.18s ease;
  }
  .stockv2 .ad-att-preview-img.zoomed {
    /* Click → native pixels. Body's overflow:auto + safe centering lets
       the user pan around when the image exceeds the viewport. */
    max-width:none; max-height:none; cursor:zoom-out;
  }
  .stockv2 .ad-att-preview-frame {
    width:88vw; max-width:1380px; height:85vh; border:0; background:#fff;
  }
  /* Unread customer message — click to acknowledge */
  .stockv2 .ad-tl-item.ad-tl-unread {
    cursor:pointer;
    background:rgba(110,168,254,0.08);
    border-color:rgba(110,168,254,0.45);
    border-left-color:#6ea8fe;
    box-shadow:0 0 0 0 rgba(110,168,254,0.45);
    animation: ad-tl-unread-pulse 1.8s ease-in-out infinite;
  }
  .stockv2 .ad-tl-item.ad-tl-unread:hover {
    background:rgba(110,168,254,0.14);
  }
  .stockv2 .ad-tl-mark-hint {
    margin-top:6px; padding-top:6px;
    border-top:1px dashed rgba(110,168,254,0.3);
    font-size:11px; font-weight:600; color:#6ea8fe;
    letter-spacing:.02em;
  }
  @keyframes ad-tl-unread-pulse {
    0%   { box-shadow: inset 3px 0 0 #6ea8fe, 0 0 0 0 rgba(110,168,254,0.45); }
    70%  { box-shadow: inset 3px 0 0 #6ea8fe, 0 0 0 4px rgba(110,168,254,0); }
    100% { box-shadow: inset 3px 0 0 #6ea8fe, 0 0 0 0 rgba(110,168,254,0); }
  }
  /* Sent-as attribution on Reply events */
  .stockv2 .ad-tl-sentas { font-weight:500; color:var(--b2-text-3); font-style:italic; }
  /* Small avatar inline with the timeline-head label so the signer's face
     is the primary attribution (customer-perspective). Sized down from
     the default 34 px to match the kind-chip line height. */
  .stockv2 .ad-tl-author-ava { display:inline-flex; align-items:center; }
  .stockv2 .ad-tl-author-ava .ad-ava { width:22px; height:22px; }
  .stockv2 .ad-tl-author-ava .ad-ava-ini { font-size:9px; }
  /* Unread customer-message indicator on queue rows. Replaces the old
     colored status dot in the leftmost cell — Status is still visible
     in the chip on the right, so the left cell now belongs to the
     count of new customer messages waiting on the user. */
  .stockv2 .ad-row { cursor:pointer; }
  .stockv2 .ad-row:hover { background:rgba(255,255,255,0.025); }
  /* Close ticket — red X (final action). Distinct from any green/neutral cue
     so it never reads as "mark read"; pairs with the confirm dialog. */
  .stockv2 .ad-iconbtn.ad-iconbtn-close { color:var(--b2-text-3); }
  .stockv2 .ad-iconbtn.ad-iconbtn-close:hover { color:#ef4444; border-color:rgba(239,68,68,0.45); background:rgba(239,68,68,0.10); }
  /* Mark-ticket-unread row icon — amber on hover, matching the timeline action. */
  .stockv2 .ad-iconbtn.ad-iconbtn-unread { color:var(--b2-text-3); }
  .stockv2 .ad-iconbtn.ad-iconbtn-unread:hover { color:#f5b442; border-color:rgba(245,180,66,0.45); background:rgba(245,180,66,0.10); }
  /* Danger button — used by the Close-ticket confirmation. */
  .stockv2 .ad-btn-danger { background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.45); color:#ef4444; }
  .stockv2 .ad-btn-danger:hover { background:#ef4444; border-color:#ef4444; color:#fff; }
  /* Confirm-dialog body text (Close ticket). */
  .stockv2 .ad-confirm-text { margin:2px 0 4px; font-size:13.5px; line-height:1.55; color:var(--b2-text-2, var(--b2-text)); }
  .stockv2 .ad-unread-banner {
    display:flex; align-items:center; gap:12px;
    margin-bottom:12px; padding:7px 8px 7px 13px;
    background:rgba(110,168,254,0.10); border:1px solid rgba(110,168,254,0.35);
    border-radius:8px; color:var(--b2-text); font-size:12.5px;
  }
  .stockv2 .ad-unread-banner .ad-unread-done { padding:4px 12px; font-size:12px; }
  .stockv2 .ad-unread-banner strong { color:#6ea8fe; }
  .stockv2 .ad-unread-banner .ad-unread-done { margin-left:auto; flex-shrink:0; }
  .stockv2 .ad-row.ad-new-activity { background:rgba(110,168,254,0.05); }
  .stockv2 .ad-row.ad-new-activity:hover { background:rgba(110,168,254,0.09); }
  .stockv2 .ad-row.ad-new-activity .row-sku { color:var(--b2-text); }
  .stockv2 .ad-unread-cell { padding-right:6px !important; text-align:center; }
  .stockv2 .ad-unread-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 6px;
    border-radius:10px;
    background:#6ea8fe; color:#0b1530;
    font-size:11px; font-weight:800; line-height:1;
    box-shadow:0 0 0 0 rgba(110,168,254,0.55);
    animation: ad-new-pulse 1.8s ease-in-out infinite;
  }
  @keyframes ad-new-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(110,168,254,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(110,168,254,0); }
    100% { box-shadow: 0 0 0 0 rgba(110,168,254,0); }
  }
  /* Inline row action icons */
  .stockv2 .ad-row { cursor:default; }
  .stockv2 .ad-rowactions { white-space:nowrap; width:1%; }
  .stockv2 .ad-actbtns { display:inline-flex; align-items:center; gap:2px; }
  .stockv2 .ad-iconbtn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--b2-text-3); cursor:pointer; }
  .stockv2 .ad-iconbtn:hover { background:var(--b2-surface-2); border-color:var(--b2-hairline); color:var(--b2-text); }
  .stockv2 .ad-iconbtn-ghost { color:var(--b2-text-3); opacity:0.7; }
  /* Assignment avatars */
  .stockv2 .ad-assign-cell { white-space:nowrap; }
  .stockv2 .ad-ava-row { display:inline-flex; align-items:center; gap:8px; vertical-align:middle; }
  .stockv2 .ad-ava-pick { gap:6px; }
  /* outer wrapper: positioning context for tip + check badge, no overflow clip */
  .stockv2 .ad-ava { position:relative; display:inline-block; width:34px; height:34px; flex-shrink:0; vertical-align:middle; }
  .stockv2 .ad-ava[role="button"] { cursor:pointer; }
  /* the visible circle: clips the photo + carries the color outline/glow */
  .stockv2 .ad-ava-circle {
    width:100%; height:100%;
    border-radius:50%; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    background:var(--b2-surface-2);
    box-shadow: 0 0 0 2px var(--ad-ava-color, var(--b2-hairline-strong));
    transition: box-shadow .15s ease, opacity .18s ease, filter .18s ease, transform .2s ease;
  }
  .stockv2 .ad-ava-circle img { width:100%; height:100%; object-fit:cover; display:block; }
  .stockv2 .ad-ava-ini { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--b2-text-2, var(--b2-text)); }
  /* dim state: muted until you hover, then lights up with the user's color */
  .stockv2 .ad-ava-dim .ad-ava-circle { opacity:0.38; filter:grayscale(0.55); box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
  .stockv2 .ad-ava-dim:hover .ad-ava-circle {
    opacity:1; filter:none;
    box-shadow: 0 0 0 2px var(--ad-ava-color, var(--b2-hairline-strong)), 0 0 14px var(--ad-ava-color, rgba(255,255,255,0.18));
    transform: scale(1.1);
  }
  .stockv2 .ad-ava-dim:hover { z-index:2; }
  /* name tip on hover (replaces the slow browser tooltip) */
  .stockv2 .ad-ava-tip {
    position:absolute; left:50%; top:calc(100% + 6px);
    transform: translateX(-50%) translateY(-3px);
    background:var(--b2-surface-1); color:var(--b2-text);
    font-size:11px; font-weight:600; letter-spacing:.01em;
    padding:3px 9px; border-radius:6px;
    border:1px solid var(--b2-hairline);
    white-space:nowrap; pointer-events:none;
    opacity:0; transition: opacity .14s ease, transform .14s ease;
    z-index:5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  }
  .stockv2 .ad-ava:hover .ad-ava-tip { opacity:1; transform: translateX(-50%) translateY(0); }
  .stockv2 .ad-ava-name { font-size:13px; color:var(--b2-text-2, var(--b2-text)); }
  /* the "+" picker for assigning outside the primary set */
  .stockv2 .ad-ava-more {
    width:28px; height:28px; border-radius:50%;
    border:1px dashed var(--b2-hairline-strong);
    background:transparent; color:var(--b2-text-3); cursor:pointer;
    font-size:16px; line-height:1; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    transition: opacity .28s ease, transform .28s ease, color .15s ease, border-color .15s ease;
  }
  .stockv2 .ad-ava-more:hover { color:var(--b2-text); border-color:var(--b2-text-2, var(--b2-text)); }
  .stockv2 .ad-assign-btn { background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px; color:var(--b2-text); font:inherit; font-size:12px; font-weight:600; padding:5px 11px; cursor:pointer; }
  .stockv2 .ad-assign-btn:hover { border-color:var(--b2-hairline-strong); }
  /* Shared-queue model: claiming happens by OPENING a ticket, so the queue
     row carries no buttons — it just shows who has it (owner chip) or that
     it's up for grabs ("Unclaimed"). Reassignment lives in the open ticket. */
  .stockv2 .ad-owner-chip { display:inline-flex; align-items:center; gap:7px; }
  .stockv2 .ad-unclaimed-tag { font-size:12px; font-weight:600; color:var(--b2-text-3, var(--b2-text-2, #8a8a8e)); }
  /* "Assigned to you" confirm — layered above the ticket modal (z 5000). */
  .ad-assigned-overlay { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); opacity:0; transition:opacity .14s ease; padding:20px; }
  .ad-assigned-overlay.visible { opacity:1; }
  .ad-assigned-card { background:var(--b2-surface, #1c1c1e); border:1px solid var(--b2-hairline); border-radius:14px; max-width:380px; width:100%; padding:22px 22px 18px; box-shadow:0 18px 50px rgba(0,0,0,0.5); transform:translateY(8px) scale(.98); transition:transform .16s ease; }
  .ad-assigned-overlay.visible .ad-assigned-card { transform:translateY(0) scale(1); }
  .ad-assigned-card .ad-assigned-title { font-size:16px; font-weight:700; color:var(--b2-text); margin-bottom:7px; }
  .ad-assigned-card .ad-assigned-msg { font-size:13px; line-height:1.5; color:var(--b2-text-2, var(--b2-text)); margin-bottom:18px; }
  .ad-assigned-card .ad-assigned-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; flex-wrap:wrap; row-gap:10px; }
  .ad-assigned-card .ad-assigned-link { background:transparent; border:none; color:var(--b2-blue); font:inherit; font-size:13px; font-weight:600; padding:8px 2px; cursor:pointer; margin-right:auto; }
  .ad-assigned-card .ad-assigned-link:hover { text-decoration:underline; }
  .ad-assigned-card .ad-assigned-primary { background:var(--b2-blue); border:1px solid var(--b2-blue); border-radius:8px; color:#fff; font:inherit; font-size:13px; font-weight:600; padding:8px 18px; cursor:pointer; }
  .ad-assigned-card .ad-assigned-primary:hover { filter:brightness(1.08); }
  .ad-assigned-card .ad-assigned-secondary { background:transparent; border:1px solid var(--b2-hairline); border-radius:8px; color:var(--b2-text-2, var(--b2-text)); font:inherit; font-size:13px; font-weight:600; padding:8px 16px; cursor:pointer; }
  .ad-assigned-card .ad-assigned-secondary:hover { border-color:var(--b2-hairline-strong); color:var(--b2-text); }
  /* click animation: confirm + collapse the others */
  .stockv2 .ad-ava-check {
    position:absolute; right:-3px; bottom:-3px;
    width:16px; height:16px; border-radius:50%;
    background:#22c55e; color:#0b1530;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:800; line-height:1;
    opacity:0; transform: scale(0);
    transition: opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    border:2px solid var(--b2-surface-1);
    z-index:3;
  }
  .stockv2 .ad-ava-selected .ad-ava-check { opacity:1; transform: scale(1); }
  .stockv2 .ad-ava-selected .ad-ava-circle {
    opacity:1 !important; filter:none !important;
    box-shadow: 0 0 0 2px var(--ad-ava-color, #22c55e), 0 0 18px var(--ad-ava-color, #22c55e) !important;
    animation: ad-ava-pop .35s ease both;
  }
  @keyframes ad-ava-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1.08); }
  }
  .stockv2 .ad-ava-row.ad-ava-committing .ad-ava-dim:not(.ad-ava-selected) {
    opacity:0; transform: scale(0.5);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events:none;
  }
  .stockv2 .ad-ava-row.ad-ava-committing .ad-ava-more {
    opacity:0; transform: scale(0.5); pointer-events:none;
  }
  /* Quick-action modal */
  .ad-quick { width:min(440px, 94vw); max-height:calc(100vh - 48px); display:flex; flex-direction:column; background:var(--b2-surface-1); border:1px solid var(--b2-hairline-strong); border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); transform:translateY(12px); transition:transform .2s ease; }
  .bom-overlay.visible .ad-quick { transform:translateY(0); }
  .ad-quick-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 18px 12px; border-bottom:1px solid var(--b2-hairline); }
  .ad-quick-title { font-size:16px; font-weight:700; color:var(--b2-text); }
  .ad-quick-sub { font-size:12px; color:var(--b2-text-3); margin-top:3px; }
  .ad-quick-body { padding:16px 18px 18px; overflow:auto; display:flex; flex-direction:column; }
  .stockv2 .ad-quick-actions { display:flex; align-items:center; gap:8px; margin-top:14px; }
  .stockv2 .ad-quick-to { font-size:13px; color:var(--b2-text); padding:6px 0 2px; }
  /* Editable To field on the reply modal. Same visual weight as the
     reply textarea so the recipient feels equally editable — the To
     line was previously read-only text, which hid the override-for-
     forwarded-tickets capability. */
  .stockv2 .ad-quick-to-input {
    width:100%; box-sizing:border-box;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px;
    color:var(--b2-text); font:inherit; font-size:13px;
    padding:8px 10px; margin-top:4px;
  }
  .stockv2 .ad-quick-to-input:focus { outline:none; border-color:#6ea8fe; }
  .stockv2 .ad-quick-to-input:disabled { opacity:0.55; cursor:not-allowed; }
  /* Chip-field recipient inputs (To / Cc / Bcc). Each email becomes a
     removable pill; an inline input at the end accepts typing. Pill
     uses the same accent palette as the channel/tag chips so the
     visual language stays consistent. */
  .stockv2 .ad-chip-field {
    width:100%; box-sizing:border-box;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px;
    padding:5px 8px; margin-top:4px;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
    min-height:36px; cursor:text;
    transition: border-color 0.12s ease;
  }
  .stockv2 .ad-chip-field:focus-within { border-color:#6ea8fe; }
  .stockv2 .ad-chip-field.is-disabled { opacity:0.55; cursor:not-allowed; }
  .stockv2 .ad-chip-pill {
    display:inline-flex; align-items:center; gap:2px;
    padding:2px 2px 2px 10px; border-radius:14px;
    background:rgba(110,168,254,0.16); border:1px solid rgba(110,168,254,0.32);
    font-size:12px; color:var(--b2-text);
    white-space:nowrap; max-width:100%;
  }
  .stockv2 .ad-chip-text { overflow:hidden; text-overflow:ellipsis; max-width:280px; }
  .stockv2 .ad-chip-x {
    background:transparent; border:0; padding:0 6px; margin-left:2px;
    color:rgba(110,168,254,0.85); font-size:15px; line-height:1;
    cursor:pointer; border-radius:50%;
  }
  .stockv2 .ad-chip-x:hover { background:rgba(110,168,254,0.28); color:var(--b2-text); }
  .stockv2 .ad-chip-input {
    flex:1; min-width:140px;
    background:transparent; border:0; outline:none;
    color:var(--b2-text); font:inherit; font-size:13px;
    padding:3px 2px;
  }
  .stockv2 .ad-chip-input::placeholder { color:var(--b2-text-3); }
  .stockv2 .ad-chip-input:disabled { cursor:not-allowed; }
  /* Cc / Bcc rows in the reply modal — same input styling as To, just
     stacked under it. The Bcc row hides until the agent clicks the
     "Add Bcc" link so the common reply case keeps a tight 2-line
     recipient block. */
  .stockv2 .ad-quick-cc-row,
  .stockv2 .ad-quick-bcc-row { margin-top:6px; }
  .stockv2 .ad-quick-bcc-toggle {
    margin-top:6px; padding:2px 0; background:transparent; border:0;
    color:#6ea8fe; font-size:11.5px; font-weight:600; cursor:pointer;
    text-decoration:underline; text-underline-offset:2px;
  }
  .stockv2 .ad-quick-bcc-toggle:hover { color:#8fbaff; }
  /* Recipient suggestion chips — emails parsed from the original
     forwarded headers that aren't currently in To or Cc. Each chip
     has + To / + Cc shortcut buttons. Sits between the recipient
     fields and the reply textarea so it's right there in the flow
     of building the recipient list, not buried somewhere else. */
  .stockv2 .ad-quick-suggest-row {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px;
  }
  .stockv2 .ad-quick-suggest-label {
    font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:var(--b2-text-3); margin-right:2px;
  }
  .stockv2 .ad-quick-suggest-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 5px 3px 9px; border-radius:12px;
    background:rgba(255,255,255,0.04); border:1px solid var(--b2-hairline);
    font-size:11.5px; color:var(--b2-text-2, var(--b2-text));
  }
  .stockv2 .ad-quick-suggest-email { margin-right:2px; }
  .stockv2 .ad-quick-suggest-add {
    background:transparent; border:0; padding:2px 6px; border-radius:6px;
    color:#6ea8fe; font:inherit; font-size:10.5px; font-weight:700; cursor:pointer;
    line-height:1;
  }
  .stockv2 .ad-quick-suggest-add:hover { background:rgba(110,168,254,0.16); color:#8fbaff; }
  .stockv2 .ad-quick-banner { font-size:12px; line-height:1.45; color:#f59e0b; background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.3); border-radius:8px; padding:9px 11px; margin-bottom:12px; }
  /* Signing-as picker + signature preview (Respond modal) */
  .stockv2 .ad-sig-row { display:flex; align-items:center; gap:8px; }
  .stockv2 .ad-sig-row .ad-select { flex:1; min-width:0; }
  .stockv2 .ad-sig-preview {
    margin-top:8px; padding:9px 11px;
    background:var(--b2-surface-2); border:1px solid var(--b2-hairline); border-radius:7px;
    font-size:12px; line-height:1.5; color:var(--b2-text-2, var(--b2-text));
    white-space:pre-wrap; word-break:break-word;
    max-height:140px; overflow:auto;
  }
  .stockv2 .ad-sig-sep { color:var(--b2-text-3); display:block; }
  .stockv2 .ad-sig-empty { color:var(--b2-text-3); font-style:italic; }
  .stockv2 .ad-sig-fromline { color:var(--b2-text-2, var(--b2-text)); font-size:11.5px; padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid var(--b2-hairline); }
  .stockv2 .ad-sig-fromline strong { color:var(--b2-text); }
  .stockv2 .ad-sig-fromline.ad-sig-warn { color:#f59e0b; }
  .stockv2 .ad-sig-body { white-space:pre-wrap; }
  /* Rendered HTML signature inside the preview block. Outlook signatures are
     wide nested tables — clamp them so the preview can scroll instead of
     pushing the modal layout. We deliberately don't normalize fonts here
     because the preview should look like the actual email. */
  .stockv2 .ad-sig-html { white-space:normal; max-width:100%; overflow-x:auto; }
  .stockv2 .ad-sig-html img { max-width:100%; height:auto; }
  .stockv2 .ad-sig-html table { max-width:100%; }
  .stockv2 .ad-sig-pickwrap { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .stockv2 .ad-sig-hub-toggle { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:var(--b2-text-2, var(--b2-text)); cursor:pointer; user-select:none; }
  .stockv2 .ad-sig-hub-toggle input { margin:0; cursor:pointer; }
  .stockv2 .ad-sig-meta { margin-top:8px; font-size:11.5px; color:var(--b2-text-2, var(--b2-text)); }
  .stockv2 .ad-sig-meta .ad-sig-fromline { margin-bottom:0; padding-bottom:0; border-bottom:0; }
  .stockv2 .ad-sig-toggle {
    margin-top:6px; align-self:flex-start; background:transparent; border:0; padding:2px 0;
    color:var(--b2-accent, #3b82f6); font-size:11.5px; cursor:pointer; text-decoration:underline;
  }
  .stockv2 .ad-sig-toggle:hover { opacity:0.85; }
  /* Takeover-consent prompt — appears only when a Send would reassign
     from one named owner to a different signer. Amber so it reads as
     "heads up, decide" rather than an error. */
  .stockv2 .ad-takeover-slot:empty { display:none; }
  .stockv2 .ad-takeover-prompt {
    display:flex; align-items:flex-start; gap:8px; margin-top:10px;
    padding:9px 11px; border-radius:7px;
    background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.32);
    color:#f59e0b; font-size:12px; line-height:1.45; cursor:pointer; user-select:none;
  }
  .stockv2 .ad-takeover-prompt input { margin-top:2px; cursor:pointer; }
  .stockv2 .ad-takeover-prompt strong { color:var(--b2-text); }

/* ───────────────────────────────────────────────────────────────
 * <style> block #1 extracted from LIVEFILE.html
 * ─────────────────────────────────────────────────────────── */
.health-badge{position:relative;display:inline-flex;flex:0 0 auto;outline:none;--hb:#30d158;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;}
.health-badge.level-operational{--hb:#30d158;}
.health-badge.level-degraded{--hb:#ffd60a;}
.health-badge.level-connecting{--hb:#ffd60a;}
.health-badge.level-offline{--hb:#ff453a;}
.health-badge-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;background:color-mix(in srgb,var(--hb) 11%,#242427);border:1px solid color-mix(in srgb,var(--hb) 28%,rgba(255,255,255,.07));border-radius:8px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;user-select:none;cursor:default;transition:border-color .12s,background .12s,box-shadow .12s;}
.health-badge:hover .health-badge-pill{border-color:color-mix(in srgb,var(--hb) 48%,rgba(255,255,255,.07));background:color-mix(in srgb,var(--hb) 18%,#242427);}
.health-badge:focus-visible .health-badge-pill{box-shadow:0 0 0 2px color-mix(in srgb,var(--hb) 50%,transparent);}
.health-badge-label{line-height:1;color:var(--hb);}
.health-dot{width:7px;height:7px;border-radius:999px;background:var(--hb);box-shadow:0 0 6px var(--hb);flex:0 0 auto;}
.health-badge.level-operational .health-dot{animation:health-pulse 2s ease-in-out infinite;}
@keyframes health-pulse{0%,100%{box-shadow:0 0 3px var(--hb);}50%{box-shadow:0 0 9px var(--hb);}}
.health-tooltip{position:absolute;top:calc(100% + 9px);right:0;left:auto;width:300px;max-width:calc(100vw - 32px);background:#16181a;border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:6000;opacity:0;transform:translateY(-6px) scale(.99);transform-origin:top right;pointer-events:none;transition:opacity .14s ease,transform .14s ease;}
.health-badge:hover .health-tooltip,.health-badge:focus-within .health-tooltip{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.health-tooltip::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px;}
.health-tooltip::after{content:'';position:absolute;top:-6px;right:28px;left:auto;width:11px;height:11px;background:#16181a;border-left:1px solid rgba(255,255,255,.1);border-top:1px solid rgba(255,255,255,.1);transform:rotate(45deg);}
.health-tt-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
.health-tt-head-icon{color:var(--hb);display:inline-flex;}
.health-tt-head-title{flex:1 1 auto;font-size:13.5px;font-weight:650;color:#f5f5f7;letter-spacing:.01em;}
.health-pill-mini{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--hb);padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--hb) 14%,transparent);border:1px solid color-mix(in srgb,var(--hb) 34%,transparent);}
.health-tt-body{padding:13px 14px 14px;}
.health-rows{display:flex;flex-direction:column;gap:13px;}
.health-row{display:flex;gap:9px;--rs:#6e6e73;}
.health-row.state-good{--rs:#30d158;}
.health-row.state-warn{--rs:#ffd60a;}
.health-row.state-bad{--rs:#ff453a;}
.health-row.state-idle{--rs:#6e6e73;}
.health-row-icon{flex:0 0 auto;color:var(--rs);margin-top:1px;}
.health-row-main{min-width:0;}
.health-row-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#f5f5f7;}
.health-row-tag{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--rs);}
.health-row-sub{font-size:11px;color:#8e8e95;line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.health-row-sub::before{content:'└ ';opacity:.55;}
/* System-status block inside the account dropdown (relocated health badge). */
.acct-status{--hb:#ffd60a;padding:13px 14px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
.acct-status.level-operational{--hb:#30d158;}
.acct-status.level-degraded{--hb:#ffd60a;}
.acct-status.level-connecting{--hb:#ffd60a;}
.acct-status.level-offline{--hb:#ff453a;}
.acct-status-head{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:12px;}
.acct-status.level-operational .health-dot{animation:health-pulse 2s ease-in-out infinite;}
/* Avatar status dot — mirrors the system-status level color. */
.avatar-status-dot{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:999px;border:2px solid var(--app-shell-bg,#1c1c1e);background:#ffd60a;box-shadow:0 0 5px rgba(0,0,0,.4);}
.avatar-status-dot.level-operational{background:#30d158;}
.avatar-status-dot.level-degraded{background:#ffd60a;}
.avatar-status-dot.level-connecting{background:#ffd60a;}
.avatar-status-dot.level-offline{background:#ff453a;}
.user-avatar-wrap{position:relative;}
@media (prefers-reduced-motion:reduce){.acct-status.level-operational .health-dot{animation:none;}}

/* ───────────────────────────────────────────────────────────────
 * <style> block #2 extracted from LIVEFILE.html
 * ─────────────────────────────────────────────────────────── */
/* Flows directly under the sticky header (which is position:sticky;top:0).
   Kept in normal flow so it never overlaps the header. */
.banner-stack{position:relative;z-index:40;display:flex;flex-direction:column;}
.banner-stack:empty{display:none;}
.eca-banner{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;font-size:13.5px;color:#0b0b0c;border-bottom:1px solid rgba(0,0,0,.14);animation:banner-in .22s ease;}
@keyframes banner-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.eca-banner.sev-info{background:#cfe3ff;}
.eca-banner.sev-success{background:#c8f0d4;}
.eca-banner.sev-warning{background:#ffe9b3;}
.eca-banner.sev-critical{background:#ffd0cc;}
.eca-banner.sev-update{background:linear-gradient(90deg,#dde6ff,#eef2ff);}
.eca-banner-icon{flex:0 0 auto;margin-top:1px;color:rgba(0,0,0,.62);}
.eca-banner-body{flex:1 1 auto;min-width:0;}
.eca-banner-msg{font-weight:560;line-height:1.5;}
.eca-banner-msg code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(0,0,0,.1);padding:1px 5px;border-radius:4px;}
.eca-banner-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.eca-banner-btn{appearance:none;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;padding:6px 13px;border-radius:7px;border:1px solid rgba(0,0,0,.24);background:rgba(255,255,255,.55);color:#0b0b0c;transition:background .12s;}
.eca-banner-btn:hover{background:rgba(255,255,255,.9);}
.eca-banner-btn.primary{background:#0b0b0c;color:#fff;border-color:#0b0b0c;}
.eca-banner-btn.primary:hover{background:#262626;}
.eca-banner-dismiss{appearance:none;flex:0 0 auto;background:none;border:0;cursor:pointer;color:rgba(0,0,0,.5);padding:3px;border-radius:5px;line-height:0;}
.eca-banner-dismiss:hover{color:#0b0b0c;background:rgba(0,0,0,.1);}

/* ───────────────────────────────────────────────────────────────
 * <style> block #3 extracted from LIVEFILE.html
 * ─────────────────────────────────────────────────────────── */
.cl-overlay{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.cl-overlay.open{display:flex;}
.cl-modal{display:flex;flex-direction:column;width:min(720px,100%);max-height:min(82vh,820px);background:#16181a;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.6);overflow:hidden;}
.cl-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto;}
.cl-head-titles{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0;}
.cl-title{font-size:16px;font-weight:680;color:#f5f5f7;letter-spacing:.01em;}
.cl-sub{font-size:11.5px;color:#8e8e95;}
.cl-close{appearance:none;flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#c7c7cc;cursor:pointer;transition:background .12s,color .12s;}
.cl-close:hover{background:rgba(255,255,255,.12);color:#f5f5f7;}
.cl-body{padding:18px 20px 22px;overflow-y:auto;color:#d6d6db;font-size:13.5px;line-height:1.62;}
.cl-state{color:#8e8e95;font-size:13px;padding:18px 0;text-align:center;}
/* Team Activity (Super Admin) — pulse icon by the version stamp + digest modal */
.ta-btn{appearance:none;flex:0 0 auto;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:#8f9294;cursor:pointer;margin-left:2px;transition:color .12s,border-color .12s;}
.ta-btn:hover{color:var(--role-cta-primary,#ffd60a);border-color:rgba(255,214,10,.4);}
.ta-modal{width:min(640px,100%);}
.ta-refresh{appearance:none;flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#c7c7cc;cursor:pointer;margin-right:8px;transition:background .12s,color .12s;}
.ta-refresh:hover{background:rgba(255,255,255,.12);color:#f5f5f7;}
.ta-person{padding:14px 0 6px;border-top:1px solid rgba(255,255,255,.07);}
.ta-person:first-child{border-top:0;padding-top:2px;}
.ta-phead{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.ta-ava{width:26px;height:26px;border-radius:50%;flex:0 0 auto;object-fit:cover;}
.ta-ava-init{display:inline-flex;align-items:center;justify-content:center;background:#2c2f30;color:#b8babb;font-size:10.5px;font-weight:800;}
.ta-pname{font-size:14px;font-weight:700;color:#f5f5f7;}
.ta-pcounts{font-size:11.5px;color:#8e8e95;font-variant-numeric:tabular-nums;}
.ta-sec{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8e8e95;margin:9px 0 4px;}
.ta-sec-wip{color:var(--role-cta-primary,#ffd60a);}
.ta-row{display:flex;align-items:baseline;gap:8px;padding:4px 6px;margin:0 -6px;border-radius:7px;color:#c7c7cc;font-size:12.5px;text-decoration:none;}
.ta-row:hover{background:rgba(255,255,255,.05);color:#f5f5f7;}
.ta-repo{flex:0 0 auto;font-size:10px;font-weight:700;color:#8f9294;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:5px;padding:1px 6px;white-space:nowrap;}
.ta-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ta-draft{flex:0 0 auto;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#8e8e95;border:1px solid rgba(255,255,255,.14);border-radius:5px;padding:1px 5px;}
.ta-when{flex:0 0 auto;font-size:10.5px;color:#6e6e73;white-space:nowrap;}
.ta-errs{margin-top:14px;font-size:11px;color:#ff9f0a;line-height:1.5;}
.ta-foot{margin-top:12px;font-size:10.5px;color:#6e6e73;border-top:1px solid rgba(255,255,255,.07);padding-top:10px;}
.cl-body h1{font-size:18px;font-weight:700;color:#f5f5f7;margin:0 0 12px;}
.cl-body h2{font-size:15px;font-weight:680;color:#f5f5f7;margin:22px 0 8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);}
.cl-body h2:first-child{border-top:0;padding-top:0;margin-top:0;}
.cl-body h3{font-size:13.5px;font-weight:660;color:#e6e6ea;margin:14px 0 6px;}
.cl-body p{margin:0 0 10px;}
.cl-body ul{margin:0 0 12px;padding-left:20px;}
.cl-body li{margin:0 0 5px;}
.cl-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;color:#e6e6ea;}
.cl-body a{color:#6ea8fe;text-decoration:none;}
.cl-body a:hover{text-decoration:underline;}
.cl-body hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:16px 0;}
.cl-body strong{color:#f5f5f7;font-weight:660;}
.cl-date{font-size:12px;font-weight:640;text-transform:uppercase;letter-spacing:.06em;color:#8e8e95;margin:20px 0 10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);}
.cl-date:first-child{border-top:0;padding-top:0;margin-top:0;}
.cl-entry{border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.03);margin:0 0 8px;overflow:hidden;}
.cl-entry[open]{background:rgba(255,255,255,.05);}
.cl-entry-sum{list-style:none;display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:13.5px;font-weight:640;color:#e6e6ea;user-select:none;}
.cl-entry-sum::-webkit-details-marker{display:none;}
.cl-entry-sum:hover{background:rgba(255,255,255,.04);}
.cl-entry-title{flex:1 1 auto;min-width:0;}
.cl-entry-ver{flex:0 0 auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-weight:600;color:#8e8e95;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);padding:1px 6px;border-radius:999px;white-space:nowrap;}
.cl-entry-chev{flex:0 0 auto;width:8px;height:8px;border-right:1.6px solid #8e8e95;border-bottom:1.6px solid #8e8e95;transform:rotate(45deg);transition:transform .15s ease;margin-left:2px;}
.cl-entry[open] .cl-entry-chev{transform:rotate(-135deg);}
.cl-entry-body{padding:2px 14px 12px;border-top:1px solid rgba(255,255,255,.06);color:#c7c7cc;font-size:13px;line-height:1.6;}
.cl-entry-body>*:first-child{margin-top:10px;}
.cl-entry-body p:last-child,.cl-entry-body ul:last-child{margin-bottom:0;}
/* Super Admin page */
.admin-page{max-width:1040px;margin:0 auto;padding:26px 36px 48px;}
.admin-head{margin-bottom:22px;}
.admin-title{font-size:24px;font-weight:720;color:#f5f5f7;margin:0 0 6px;letter-spacing:-.01em;}
.admin-sub{font-size:13.5px;color:#8e8e95;margin:0;max-width:680px;line-height:1.55;}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start;}
.admin-card{background:#1a1c1e;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:20px;}
.admin-card-title{font-size:15px;font-weight:680;color:#f5f5f7;margin:0 0 14px;}
.admin-card-desc{font-size:12.5px;color:#9a9aa0;line-height:1.6;margin:0 0 16px;}
.admin-card-desc code,.admin-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:rgba(255,255,255,.09);padding:1px 5px;border-radius:4px;color:#d6d6db;}
.admin-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.admin-label{font-size:12px;font-weight:650;color:#c7c7cc;letter-spacing:.01em;}
.admin-hint{font-size:11px;color:#7c7c83;font-weight:500;}
.admin-input{width:100%;box-sizing:border-box;background:#0f1112;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#f5f5f7;font:inherit;font-size:13px;padding:9px 11px;transition:border-color .12s,box-shadow .12s;}
.admin-input:focus{outline:none;border-color:rgba(120,160,255,.6);box-shadow:0 0 0 2px rgba(120,160,255,.22);}
textarea.admin-input{resize:vertical;line-height:1.5;}
/* Selects: suppress the native control (Chromium AND Arc/Dia-family browsers
   theme it with their own chevron, which stacked a second arrow on top of the
   OS one) and draw a single custom chevron — same treatment as .audit-filter
   select. padding-right leaves room so the value never runs under the icon. */
select.admin-input{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px;
}
.admin-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.admin-expiry{display:grid;grid-template-columns:1fr 1.15fr;gap:8px;}
.admin-input:disabled{opacity:.45;cursor:not-allowed;}
.admin-action-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:center;}
.admin-action-remove{appearance:none;background:rgba(255,69,58,.12);border:1px solid rgba(255,69,58,.3);color:#ff6b61;width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:18px;line-height:1;}
.admin-action-remove:hover{background:rgba(255,69,58,.2);}
.admin-btn-ghost{appearance:none;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2);color:#c7c7cc;font:inherit;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer;margin-top:2px;}
.admin-btn-ghost:hover{background:rgba(255,255,255,.1);}
.admin-actions{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap;}
.admin-toggle-row{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap;}
.admin-toggle-state{font-size:13px;color:#c7c7cc;}
.admin-toggle-state strong{color:#f5f5f7;}
.admin-btn-primary{appearance:none;background:#2f6bff;border:0;color:#fff;font:inherit;font-size:13px;font-weight:680;padding:10px 18px;border-radius:9px;cursor:pointer;transition:background .12s;}
.admin-btn-primary:hover{background:#1f57e6;}
.admin-btn-update{background:#7c5cff;}
.admin-btn-update:hover{background:#6847e6;}
.admin-result{font-size:12.5px;font-weight:600;}
.admin-result.ok{color:#30d158;}
.admin-result.err{color:#ff6b61;}
/* Users card: spans the full admin grid width */
.admin-card-wide{grid-column:1/-1;}
.admin-users-count{display:inline-block;margin-left:6px;font-size:12px;font-weight:680;color:#9a9aa0;background:rgba(255,255,255,.08);border-radius:20px;padding:1px 9px;vertical-align:middle;}
.admin-users-empty{font-size:13px;color:#8e8e95;padding:14px 2px;}
.admin-users-wrap{border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;}
.admin-users-table{width:100%;border-collapse:collapse;font-size:13px;}
.admin-users-table thead tr{background:rgba(255,255,255,.035);text-align:left;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8e8e95;font-weight:700;}
.admin-users-table th{padding:10px 14px;}
.admin-users-table th.c,.admin-users-table td.c{text-align:center;}
.admin-users-table tbody tr{border-top:1px solid rgba(255,255,255,.05);}
.admin-users-table tbody tr:hover{background:rgba(255,255,255,.03);}
.admin-users-table td{padding:9px 14px;color:#d6d6db;vertical-align:middle;}
.admin-uname-wrap{display:flex;align-items:center;gap:10px;}
.admin-uname-btn{cursor:pointer;border-radius:8px;padding:2px 6px;margin:-2px -6px;transition:background .12s;}
.admin-uname-btn:hover{background:rgba(255,255,255,0.06);}
.admin-uname-btn:hover .admin-uname{color:var(--role-cta-primary);}
.admin-uname-btn:focus-visible{outline:2px solid var(--role-cta-primary);outline-offset:1px;}
.admin-uname{font-weight:650;color:#f5f5f7;}
.admin-uavatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;}
.admin-uavatar-fallback{background:rgba(255,255,255,.1);color:#c7c7cc;font-size:11px;font-weight:700;letter-spacing:.02em;}
.admin-urole{display:inline-block;font-size:11px;font-weight:680;padding:2px 9px;border-radius:6px;background:rgba(255,255,255,.08);color:#c7c7cc;}
.admin-urole-super-admin{background:rgba(124,92,255,.18);color:#b9a6ff;}
.admin-urole-admin{background:rgba(47,107,255,.16);color:#8fb1ff;}
.admin-uflag{font-size:11.5px;font-weight:650;}
.admin-uflag.on{color:#30d158;}
.admin-uflag.off{color:#5c5c63;}

/* =====================================================================   HELP DESK REFRESH (v2) — refined 3-pane layout. Scoped under .hd2 so none of
   this leaks to other pages. Fonts served locally from /v1/fonts/.
   ============================================================================ */
@font-face{font-family:"Avenir Next";src:url("/v1/fonts/AvenirNext-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/v1/fonts/AvenirNext-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/v1/fonts/AvenirNext-DemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Avenir Next";src:url("/v1/fonts/AvenirNext-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

.hd2{--hd-bg:#1c1d1e;--hd-rail:#1a1b1c;--hd-pane:#212324;--hd-line:#3b3e40;--hd-line2:#34373a;--hd-line3:#303334;
  --hd-fg:#fff;--hd-fg2:#b8babb;--hd-fg3:#8f9294;--hd-fg4:#7f8284;--hd-surf:#262829;--hd-surf2:#2c2f30;
  --hd-yellow:var(--role-cta-primary);--hd-cyan:#3ec8da;--hd-green:#4ccf7a;--hd-purple:#a86cff;--hd-red:#ff6b6b;
  font-family:"Avenir Next","Nunito Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--hd-fg);background:var(--hd-bg);display:flex;min-height:0;overflow:hidden;position:fixed;top:var(--ec-topbar-h,54px);left:0;right:0;height:calc(100vh - var(--ec-topbar-h,54px));height:calc(100dvh - var(--ec-topbar-h,54px));z-index:60;}
.hd2 *{box-sizing:border-box;}
.hd2 button{font-family:inherit;}
/* Row hover preview — read-only peek before the click that claims. Mounted on
   <body>, so it carries its own dark palette (hd2 tokens don't reach here).
   The card is hoverable (no pointer-events:none) so it stays open while read. */
.hd2-hoverprev{position:fixed;z-index:2000;width:400px;max-width:calc(100vw - 16px);
  background:#212324;border:1px solid #43474a;border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  font-family:"Avenir Next","Nunito Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  color:#fff;padding:14px 16px 13px;
  opacity:0;transform:translateY(4px) scale(.985);transform-origin:left top;
  transition:opacity .13s ease,transform .13s ease;pointer-events:none;}
.hd2-hoverprev.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
/* Header: avatar + subject + ticket id */
.hd2-hp-head{display:flex;gap:11px;align-items:flex-start;
  border-bottom:1px solid #34373a;padding-bottom:11px;margin-bottom:11px;}
.hd2-hp-ava{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;}
.hd2-hp-ava.unc{width:34px;height:34px;border-radius:50%;background:rgba(249,205,120,.14);color:#f9cd78;border:1px solid rgba(249,205,120,.4);}
/* adAvatarHtml renders .ad-ava; its sizing/ring CSS is scoped to .hd2/.stockv2,
   and this card lives on <body>, so re-declare what it needs here. */
.hd2-hoverprev .ad-ava{position:relative;display:inline-block;width:34px;height:34px;flex:0 0 auto;}
.hd2-hoverprev .ad-ava-circle{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#2c2f30;box-shadow:0 0 0 2px var(--ad-ava-color,#34373a);}
.hd2-hoverprev .ad-ava-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.hd2-hoverprev .ad-ava-ini{font-size:12px;font-weight:700;letter-spacing:.02em;color:#e8e8e7;}
.hd2-hoverprev .ad-ava-check,.hd2-hoverprev .ad-ava-tip{display:none;}
.hd2-hp-htext{flex:1;min-width:0;}
.hd2-hp-title{font-size:15px;font-weight:600;line-height:1.3;color:#fff;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hd2-hp-tid{font-size:11.5px;color:#8f9294;margin-top:4px;}
.hd2-hp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
.hd2-hoverprev .hd2-chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:8px;line-height:1.5;}
/* Fact grid: label / value pairs */
.hd2-hp-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:baseline;
  margin-bottom:12px;font-size:12.5px;}
.hd2-hp-grid .k{color:#7f8284;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  white-space:nowrap;padding-top:1px;}
.hd2-hp-grid .v{color:#e6e7e8;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.hd2-hp-grid .v .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}
.hd2-hp-grid .v .sub{color:#8f9294;font-size:11.5px;width:100%;}
.hd2-hp-grid .v .unc{color:#f9cd78;font-weight:600;}
.hd2-hp-grid .v .unread{background:#e2564f;color:#fff;font-size:10px;font-weight:700;
  padding:1px 7px;border-radius:9px;line-height:1.5;}
/* Latest message */
.hd2-hp-dir{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7f8284;margin-bottom:5px;}
.hd2-hp-dir .t{color:#6a6d6f;font-weight:600;letter-spacing:0;text-transform:none;}
.hd2-hp-msg{font-size:12.5px;line-height:1.55;color:#c9cbcc;white-space:pre-wrap;word-break:break-word;
  max-height:170px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent);}
.hd2-hp-empty{font-size:12.5px;color:#7f8284;font-style:italic;}
.hd2-hp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid #34373a;font-size:11px;color:#8f9294;}
.hd2-hp-foot .unc{color:#f9cd78;font-weight:600;}
.hd2-hp-foot .hint{color:#b8babb;}
.hd2-hp-foot .hint::before{content:"↵ ";opacity:.6;}
.hd2 ::-webkit-scrollbar{width:9px;height:9px;}
.hd2 ::-webkit-scrollbar-thumb{background:#3b3e40;border-radius:6px;}
.hd2 ::-webkit-scrollbar-track{background:transparent;}
.hd2 input::placeholder,.hd2 textarea::placeholder{color:#6f7274;}

/* Nav rail */
.hd2-rail{flex:0 0 60px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0 16px;background:var(--hd-rail);border-right:1px solid var(--hd-line3);position:relative;}
.hd2-rail-back{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:0;cursor:pointer;background:transparent;color:var(--hd-fg3);transition:color .12s,background .12s;}
.hd2-rail-back:hover{color:#fff;background:#2a2c2d;}
.hd2-rail-logo{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;opacity:.9;transition:opacity .12s,transform .12s;}
.hd2-rail-logo:hover{opacity:1;transform:scale(1.06);}
.hd2-rail-logo svg{width:30px;height:30px;display:block;}
.hd2-rail button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:0;cursor:pointer;background:transparent;color:var(--hd-fg4);transition:color .12s,background .12s;}
.hd2-rail button:hover{color:#fff;background:#2a2c2d;}
.hd2-rail button.active{background:rgba(var(--b2-yellow-rgb),0.13);color:var(--hd-yellow);}
.hd2-rail button.active::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--hd-yellow);}

/* Queue pane */
.hd2-queue{flex:0 0 466px;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--hd-pane);border-right:1px solid var(--hd-line);}
.hd2-qhead{flex:0 0 auto;padding:18px 22px 12px;}
.hd2-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-cyan);font-weight:700;margin-bottom:6px;}
.hd2-title{margin:0;font-size:27px;font-weight:700;letter-spacing:-0.02em;line-height:1;}
.hd2-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:transparent;border:1px solid var(--hd-line2);color:var(--hd-fg3);cursor:pointer;}
.hd2-iconbtn:hover{background:#303334;color:#fff;}
.hd2-lens{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--hd-yellow);background:rgba(var(--b2-yellow-rgb),0.1);border:1px solid rgba(var(--b2-yellow-rgb),0.3);border-radius:9px;padding:6px 11px;}
.hd2-tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:15px;}
.hd2-tile{text-align:left;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:13px;padding:12px 14px 15px;cursor:pointer;color:var(--hd-fg);transition:border-color .12s;}
.hd2-tile:hover{border-color:#4a4d4f;}
.hd2-tile.on{border-color:var(--hd-yellow);}
.hd2-tile-row{display:flex;align-items:center;gap:6px;}
.hd2-tile-dot{width:7px;height:7px;border-radius:50%;}
.hd2-tile-label{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#9a9d9e;font-weight:700;}
.hd2-tile-num{margin-top:11px;font-size:29px;font-weight:700;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1;color:#fff;}

/* Filters */
.hd2-filters{flex:0 0 auto;padding:0 22px 12px;display:flex;flex-direction:column;gap:9px;}
.hd2-frow{display:flex;gap:8px;align-items:center;}
.hd2-tabs{display:inline-flex;gap:3px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:10px;padding:3px;}
.hd2-tab{border:0;background:transparent;color:var(--hd-fg4);font-size:12px;font-weight:700;padding:6px 11px;border-radius:8px;cursor:pointer;transition:color .12s,background .12s;}
.hd2-tab:hover{color:#fff;}
.hd2-tab.on{background:#34373a;color:#fff;}
.hd2-search{flex:1;position:relative;display:flex;align-items:center;}
.hd2-search svg{position:absolute;left:11px;color:var(--hd-fg4);pointer-events:none;}
.hd2-search input{width:100%;height:34px;padding:0 12px 0 32px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:10px;color:#fff;font-family:inherit;font-size:13px;outline:0;}
.hd2-search input:focus{border-color:var(--hd-yellow);}
.hd2-frow2{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.hd2-selwrap{position:relative;display:inline-flex;align-items:center;}
.hd2-selwrap select{appearance:none;-webkit-appearance:none;height:30px;padding:0 26px 0 10px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg2);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;}
.hd2-selwrap select:hover{border-color:#4a4d4f;}
.hd2-selwrap svg{position:absolute;right:9px;pointer-events:none;color:var(--hd-fg4);opacity:.7;}
.hd2-ownerbtn{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg3);font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;}
.hd2-ownerbtn:hover{border-color:#4a4d4f;color:#fff;}
.hd2-ownerbtn.on{background:rgba(var(--b2-yellow-rgb),0.13);border-color:rgba(var(--b2-yellow-rgb),0.4);color:var(--hd-yellow);}
.hd2-ownerstrip{display:flex;flex-wrap:wrap;gap:6px;padding:9px 10px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:11px;}
.hd2-ownerchip{display:inline-flex;align-items:center;gap:7px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:999px;padding:3px 11px 3px 4px;color:var(--hd-fg);font-size:12px;font-weight:600;cursor:pointer;}
.hd2-ownerchip:hover{border-color:#4a4d4f;}
.hd2-ownerchip.on{background:rgba(var(--b2-yellow-rgb),0.13);border-color:var(--hd-yellow);}
.hd2-ownerchip .ava{position:relative;display:inline-flex;}
.hd2-ownerchip .ava > span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#1c1d1e;}
.hd2-ownerchip .cnt{position:absolute;bottom:-3px;right:-4px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--hd-cyan);color:#0b2429;font-size:9.5px;font-weight:800;border-radius:999px;border:2px solid var(--hd-surf);}
.hd2-ownerclear{background:0;border:0;color:#9a9d9e;font-size:11.5px;font-weight:600;cursor:pointer;}
.hd2-ownerclear:hover{color:#fff;}

/* List */
.hd2-listlabel{flex:0 0 auto;padding:2px 22px 8px;display:flex;align-items:center;justify-content:space-between;}
.hd2-listlabel .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg4);font-weight:700;}
.hd2-listlabel .c{font-size:11px;color:var(--hd-fg4);font-weight:600;}
.hd2-list{flex:1;min-height:0;overflow-y:auto;padding:0 12px 90px;}
.hd2-empty{padding:40px 20px;text-align:center;color:var(--hd-fg4);font-size:13px;}
.hd2-row{position:relative;padding:13px 14px;border-radius:13px;cursor:pointer;margin-bottom:2px;transition:background .12s;}
.hd2-row:hover{background:#282a2b;}
.hd2-row.sel{background:#2b2e2f;}
.hd2-row-bar{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;}
.hd2-row-main{display:flex;gap:12px;align-items:flex-start;}
.hd2-avaslot{position:relative;flex:0 0 auto;width:34px;height:34px;}
.hd2-ava{position:absolute;inset:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#1c1d1e;transition:opacity .12s;}
.hd2-ava.unclaimed{background:transparent;border:1.5px dashed #55585a;color:var(--hd-fg4);}
.hd2-check{position:absolute;inset:0;border-radius:9px;border:1.5px solid #55585a;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s;color:transparent;}
.hd2-row:hover .hd2-check{opacity:1;}
.hd2-row:hover .hd2-ava{opacity:0;}
.hd2-row.selbulk .hd2-check{opacity:1;border-color:var(--hd-yellow);background:var(--hd-yellow);color:#1c1d1e;}
.hd2-row.selbulk .hd2-ava{opacity:0;}
.hd2-rtitle-row{display:flex;align-items:baseline;gap:8px;}
.hd2-rtitle{flex:1;min-width:0;font-size:13.5px;color:#fff;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hd2-rage{flex:0 0 auto;font-size:11px;color:var(--hd-fg4);font-weight:600;}
.hd2-rflags{margin-top:5px;display:flex;gap:5px;flex-wrap:wrap;}
.hd2-flag{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;display:inline-flex;align-items:center;gap:3px;}
.hd2-flag.rem{background:var(--hd-green);color:#06301a;}
.hd2-flag.asg{background:var(--hd-purple);color:#190833;}
.hd2-rprev{margin-top:3px;font-size:12px;line-height:1.45;color:var(--hd-fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hd2-rmeta{margin-top:7px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hd2-rmeta .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#a6a9aa;font-weight:600;}
.hd2-rmeta .st .dot{width:6px;height:6px;border-radius:50%;}
.hd2-rmeta .sep{color:#4a4d4f;}
.hd2-rmeta .cust{font-size:11px;color:var(--hd-fg3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px;}
.hd2-rmeta .remin{font-size:11px;font-weight:600;color:var(--hd-green);}
.hd2-chip{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:1px 6px;border-radius:5px;}
.hd2-unread{flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--hd-yellow);color:#1c1d1e;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}

/* Detail pane */
.hd2-detail{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--hd-bg);}
.hd2-detail-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#55585a;text-align:center;}
.hd2-detail-empty .t{font-size:15px;font-weight:700;color:var(--hd-fg2);}
.hd2-detail-empty .s{font-size:13px;color:var(--hd-fg4);margin-top:4px;}
/* ── First-visit branded loader ── */
.hd2.hd2-loading{align-items:center;justify-content:center;}
/* Loader now renders inside the shell (rail stays); this wrap fills the space
   beside the rail and centers the loader card. */
.hd2-loadwrap{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;background:var(--hd-bg);}
.hd2-load-card{display:flex;flex-direction:column;align-items:center;text-align:center;animation:hd2LoadIn .5s cubic-bezier(0.16,1,0.3,1);}
.hd2-load-mark{width:72px;height:72px;border-radius:20px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(var(--b2-yellow-rgb),0.22);animation:hd2LoadPulse 1.7s ease-in-out infinite;}
.hd2-load-mark svg{width:44px;height:44px;display:block;}
.hd2-load-eyebrow{margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--hd-cyan);}
.hd2-load-title{margin-top:7px;font-size:23px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
.hd2-load-sub{margin-top:8px;font-size:13.5px;color:var(--hd-fg3);}
.hd2-load-dots i{font-style:normal;opacity:0;animation:hd2LoadDot 1.4s infinite;}
.hd2-load-dots i:nth-child(2){animation-delay:.2s;}
.hd2-load-dots i:nth-child(3){animation-delay:.4s;}
.hd2-load-bar{margin-top:22px;width:220px;height:4px;border-radius:999px;background:var(--hd-line2);overflow:hidden;}
.hd2-load-bar span{display:block;height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,var(--hd-cyan),var(--hd-yellow));animation:hd2LoadBar 1.25s ease-in-out infinite;}
@keyframes hd2LoadPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
@keyframes hd2LoadDot{0%,80%,100%{opacity:0;}40%{opacity:1;}}
@keyframes hd2LoadBar{0%{transform:translateX(-130%);}100%{transform:translateX(330%);}}
@keyframes hd2LoadIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.hd2-load-mark,.hd2-load-bar span,.hd2-load-dots i,.hd2-load-card{animation:none;}.hd2-load-dots i{opacity:1;}}

/* ── Help Desk v2 — inline detail: header + chat-bubble thread (Phase 2) ── */
/* padding:0 overrides the .stockv2 page wrapper's padding-bottom:60px, which
   would otherwise leave dead space below the fixed composer. */
.hd2 .hd2-detail-body{display:flex;flex-direction:column;overflow:hidden;padding:0;}
.hd2 #adTicketHead{flex:0 0 auto;background:var(--hd-pane);border-bottom:1px solid var(--hd-line);}
.hd2 .hd2-dhead{padding:18px 28px 14px;}
.hd2 .hd2-dtop{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.hd2 .hd2-deyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-cyan);font-weight:700;margin-bottom:5px;}
.hd2 .hd2-dtitle{margin:0;font-size:21px;font-weight:700;letter-spacing:-0.015em;line-height:1.2;}
.hd2 .hd2-dmeta{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--hd-fg2);}
.hd2 .hd2-dmeta .who{color:#fff;font-weight:700;}
.hd2 .hd2-dmeta .sep{color:#4a4d4f;margin:0 8px;}
.hd2 .hd2-dmeta .ord{color:var(--hd-cyan);cursor:pointer;}
.hd2 .hd2-dmeta .ord:hover{text-decoration:underline;}
.hd2 .hd2-dactions{flex:0 0 auto;display:flex;gap:6px;}
.hd2 .hd2-dactbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:transparent;border:1px solid var(--hd-line);color:var(--hd-fg2);cursor:pointer;transition:.12s;}
.hd2 .hd2-dactbtn:hover{background:#303334;color:#fff;}
.hd2 .hd2-dactbtn.on{background:rgba(var(--b2-yellow-rgb),0.14);border-color:rgba(var(--b2-yellow-rgb),0.4);color:var(--hd-yellow);}
.hd2 .hd2-dactbtn.danger:hover{background:rgba(255,107,107,0.1);border-color:rgba(255,107,107,0.45);color:var(--hd-red);}
.hd2 .hd2-dctl{margin-top:13px;display:flex;flex-wrap:wrap;align-items:center;gap:9px;}
.hd2 .hd2-statuspill{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 10px;border-radius:9px;border:1px solid var(--hd-line2);}
.hd2 .hd2-statuspill .dot{width:7px;height:7px;border-radius:50%;}
.hd2 .hd2-statuspill select{appearance:none;-webkit-appearance:none;background:transparent;border:0;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;outline:0;padding-right:2px;}
.hd2 .hd2-statuspill svg{pointer-events:none;}
.hd2 .hd2-ownerpill{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:9px;background:#262829;border:1px solid var(--hd-line2);color:#e4e4e3;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;}
.hd2 .hd2-ownerpill:hover{border-color:#4a4d4f;}
.hd2 .hd2-ownerpill .av{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:#1c1d1e;}
.hd2 .hd2-ownerpill .av.unassigned{background:transparent;border:1.5px dashed #55585a;color:var(--hd-fg4);}
.hd2 .hd2-ownerpill .muted{color:var(--hd-fg3);}
.hd2 .hd2-tagbtn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--hd-fg3);background:transparent;border:1px dashed #45484a;border-radius:9px;padding:5px 11px;cursor:pointer;}
.hd2 .hd2-tagbtn:hover{color:#fff;border-color:#6f7274;}
.hd2 .hd2-remchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--hd-green);background:rgba(76,207,122,0.12);border:1px solid rgba(76,207,122,0.4);border-radius:999px;padding:4px 10px;}
.hd2 .hd2-remchip button{background:0;border:0;color:var(--hd-green);cursor:pointer;font-size:12px;line-height:1;padding:0;}
/* thread — the ONLY scroll region in the detail pane */
.hd2 .hd2-thread{flex:1;min-height:0;overflow-y:auto;padding:22px 28px 8px;}
.hd2 .hd2-thread-empty{padding:40px;text-align:center;color:var(--hd-fg4);font-size:13px;}
.hd2 .hd2-tl-event{display:flex;align-items:center;gap:12px;margin:2px 0 18px;}
.hd2 .hd2-tl-event .ln{flex:1;height:1px;background:var(--hd-line3);}
.hd2 .hd2-tl-event .t{font-size:11px;color:var(--hd-fg4);font-weight:600;white-space:nowrap;}
.hd2 .hd2-note{max-width:680px;margin:0 0 18px;background:rgba(var(--b2-yellow-rgb),0.09);border:1px solid rgba(var(--b2-yellow-rgb),0.28);border-radius:12px;padding:12px 15px;}
.hd2 .hd2-note-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.hd2 .hd2-note-top .lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--hd-yellow);}
.hd2 .hd2-note-top .au{font-size:12px;font-weight:700;color:#fff;}
.hd2 .hd2-note-top .wh{font-size:11px;color:#8f8266;}
.hd2 .hd2-note-body{font-size:13px;line-height:1.55;color:#eadfb6;}
.hd2 .hd2-msg{display:flex;gap:12px;margin-bottom:18px;}
.hd2 .hd2-msg.out{flex-direction:row-reverse;}
.hd2 .hd2-msg-ava{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;}
/* ── Real photo avatars w/ per-user colored ring (mirrors the live app). The
   base .ad-ava rules are .stockv2-scoped, but the rail/queue/owner-strip live
   outside .stockv2, so redefine the essentials under .hd2 too. ── */
.hd2 .ad-ava{position:relative;display:inline-block;width:34px;height:34px;flex:0 0 auto;vertical-align:middle;}
.hd2 .ad-ava[role="button"]{cursor:pointer;}
.hd2 .ad-ava-circle{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--hd-surf2);box-shadow:0 0 0 2px var(--ad-ava-color,var(--hd-line2));}
.hd2 .ad-ava-circle img{width:100%;height:100%;object-fit:cover;display:block;}
.hd2 .ad-ava-ini{font-size:12px;font-weight:700;letter-spacing:.02em;color:#e8e8e7;}
.hd2 .ad-ava-check{display:none;}
.hd2 .ad-ava-tip{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%) translateY(-3px);background:#101112;color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;border:1px solid var(--hd-line);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s ease,transform .14s ease;z-index:8;box-shadow:0 4px 12px rgba(0,0,0,0.4);}
.hd2 .ad-ava:hover .ad-ava-tip{opacity:1;transform:translateX(-50%) translateY(0);}
/* per-context sizing */
.hd2 .hd2-msg .ad-ava{width:34px;height:34px;}
.hd2 .hd2-avaslot .ad-ava-photo{position:absolute;inset:0;transition:opacity .12s;}
.hd2 .hd2-avaslot .ad-ava{width:34px;height:34px;}
.hd2 .hd2-row:hover .hd2-ava-photo,.hd2 .hd2-row.selbulk .hd2-ava-photo{opacity:0;}
.hd2 .hd2-ownerpill .ad-ava{width:24px;height:24px;}
.hd2 .hd2-ownerpill .ad-ava-ini{font-size:9.5px;}
.hd2 .hd2-ownerchip .ava .ad-ava{width:24px;height:24px;}
.hd2 .hd2-ownerchip .ava .ad-ava-ini{font-size:9px;}
.hd2 .hd2-note-top .ad-ava{width:20px;height:20px;}
.hd2 .hd2-note-top .ad-ava-ini{font-size:8.5px;}
.hd2 .hd2-note-top .ad-ava-circle{box-shadow:0 0 0 1.5px var(--ad-ava-color,var(--hd-line2));}
.hd2 .hd2-msg-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.hd2 .hd2-msg.out .hd2-msg-col{align-items:flex-end;}
.hd2 .hd2-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;flex-wrap:wrap;}
.hd2 .hd2-msg-meta .au{font-size:13px;font-weight:700;color:#fff;}
.hd2 .hd2-msg-meta .frm{font-size:11px;color:#6f7274;}
.hd2 .hd2-msg-meta .wh{font-size:11px;color:var(--hd-fg4);}
.hd2 .hd2-msg-meta .rep{font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--hd-cyan);}
.hd2 .hd2-bubble{max-width:640px;font-size:13.5px;line-height:1.6;color:#e6e6e5;background:#2c2f30;border:1px solid #383b3c;border-radius:4px 14px 14px 14px;padding:13px 16px;}
.hd2 .hd2-msg.out .hd2-bubble{color:#e9f6f8;background:rgba(17,153,171,0.16);border-color:rgba(62,200,218,0.28);border-radius:14px 4px 14px 14px;}
.hd2 .hd2-bubble .ad-tl-body{margin:0;color:inherit;}
.hd2 .hd2-bubble .ad-tl-body-toggle{margin-top:6px;background:0;border:0;color:var(--hd-cyan);font-size:12px;font-weight:700;cursor:pointer;padding:0;}
.hd2 .hd2-msg-links{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap;}
.hd2 .hd2-msg.out .hd2-msg-links{justify-content:flex-end;}
.hd2 .hd2-linkchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--hd-cyan);background:#262829;border:1px solid var(--hd-line2);border-radius:7px;padding:3px 9px;cursor:pointer;}
.hd2 .hd2-msg-actions{margin-top:6px;display:flex;gap:6px;opacity:0;transition:opacity .12s;}
.hd2 .hd2-msg:hover .hd2-msg-actions{opacity:1;}
.hd2 .hd2-msg-actions button{font-size:11px;font-weight:700;color:var(--hd-fg3);background:transparent;border:1px solid var(--hd-line2);border-radius:7px;padding:3px 9px;cursor:pointer;}
.hd2 .hd2-msg-actions button:hover{color:#fff;border-color:#6f7274;}
/* Outbound reply: delivery confirmation + recipient (right-aligned under bubble) */
.hd2 .hd2-sent{display:flex;align-items:center;gap:8px;margin-top:6px;justify-content:flex-end;}
.hd2 .hd2-sent-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.01em;}
.hd2 .hd2-sent-badge.ok{color:var(--hd-green);}
.hd2 .hd2-sent-badge.issue{color:var(--hd-yellow);}
.hd2 .hd2-sent-to{display:inline-flex;align-items:center;gap:3px;font-family:inherit;font-size:11.5px;color:var(--hd-fg3);background:0;border:0;cursor:pointer;padding:0;}
.hd2 .hd2-sent-to:hover{color:#fff;}
.hd2 .hd2-sent-to svg{opacity:.7;}
.hd2 .hd2-sent-det{align-self:flex-end;margin-top:5px;max-width:640px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;padding:8px 12px;font-size:12px;}
.hd2 .hd2-sent-det[hidden]{display:none;}
.hd2 .hd2-sent-det .row{display:flex;gap:8px;}
.hd2 .hd2-sent-det .k{flex:0 0 auto;color:var(--hd-fg4);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.05em;padding-top:1px;}
.hd2 .hd2-sent-det .v{color:var(--hd-fg2);word-break:break-all;}
.hd2 .hd2-sent-det .row + .row{margin-top:5px;}
.hd2 .hd2-sent-det .note{margin-top:6px;font-size:11px;color:var(--hd-fg4);font-style:italic;}
/* ── unified bottom composer (Phase 2b): Reply | Internal note tabs ── */
/* Fixed to the bottom of the detail pane via flex (never scrolls). The thread
   above is the scroll region, so the bar is always pinned regardless of length. */
.hd2 .hd2-composer{flex:0 0 auto;background:var(--hd-pane);border-top:1px solid var(--hd-line);box-shadow:0 -8px 20px -12px rgba(0,0,0,0.55);}
/* Collapsed slim bar: tabs + a click-to-write prompt on one line. */
.hd2 .hd2-comp-bar{display:flex;align-items:center;gap:12px;padding:9px 28px;}
.hd2 .hd2-comp-bar .hd2-comptabs{margin:0;flex:0 0 auto;}
.hd2 .hd2-comp-prompt{flex:1;text-align:left;font-family:inherit;font-size:13px;color:var(--hd-fg4);background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;padding:9px 14px;cursor:text;transition:.12s;}
.hd2 .hd2-comp-prompt:hover{border-color:var(--hd-cyan);color:var(--hd-fg3);}
/* Expanded: full fields, capped so it can never swallow the thread. The footer
   grows up from the slim bar on mount (rendered fresh each expand → plays once).
   Animating max-height makes the whole bar visibly slide/grow, not just nudge. */
.hd2 .hd2-comp-inner{display:flex;flex-direction:column;max-height:52vh;overflow:hidden;padding:10px 28px 16px;transform-origin:bottom;animation:hd2CompRise .42s cubic-bezier(0.16,1,0.3,1);}
@keyframes hd2CompRise{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:translateY(26px);}40%{opacity:1;}100%{opacity:1;max-height:52vh;transform:translateY(0);}}
@keyframes hd2CompFall{0%{opacity:1;max-height:52vh;transform:translateY(0);}100%{opacity:0;max-height:0;padding-top:0;padding-bottom:0;transform:translateY(20px);}}
@media (prefers-reduced-motion:reduce){.hd2 .hd2-comp-inner{animation:none;}}
.hd2 .hd2-comp-body{flex:1;min-height:0;overflow-y:auto;padding-right:2px;}
.hd2 .hd2-comp-collapse{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:transparent;border:1px solid var(--hd-line2);color:var(--hd-fg3);cursor:pointer;}
.hd2 .hd2-comp-collapse:hover{color:#fff;background:var(--hd-surf);}
.hd2 .hd2-comptabs{display:flex;align-items:center;gap:4px;margin-bottom:11px;}
.hd2 .hd2-comptab{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--hd-fg3);background:transparent;border:1px solid transparent;border-radius:9px;padding:6px 13px;cursor:pointer;transition:.12s;}
.hd2 .hd2-comptab:hover{color:#fff;background:var(--hd-surf);}
.hd2 .hd2-comptab svg{opacity:.85;}
.hd2 .hd2-comptab.active{color:var(--hd-cyan);background:rgba(62,200,218,0.12);border-color:rgba(62,200,218,0.32);}
.hd2 .hd2-comptab-hint{margin-left:8px;font-size:11px;color:var(--hd-fg4);}
.hd2 .hd2-comp-body{display:flex;flex-direction:column;}
/* the note tab shares the reply-tab's field frame */
.hd2 .hd2-comp-body .ad-notes-pin-compose{display:flex;gap:9px;align-items:flex-end;margin:0;padding:0;border:0;}
.hd2 .hd2-comp-body .ad-mention-wrap{flex:1;position:relative;}
.hd2 .hd2-comp-body .ad-notes-pin-input{width:100%;min-height:40px;max-height:120px;resize:none;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font:inherit;font-size:13px;padding:10px 12px;outline:0;}
.hd2 .hd2-comp-body .ad-notes-pin-input:focus{border-color:var(--hd-cyan);}
.hd2 .hd2-comp-body .ad-notes-pin-send{flex:0 0 auto;background:var(--hd-cyan);border:0;border-radius:9px;color:#08222a;font:inherit;font-size:12.5px;font-weight:700;padding:0 16px;height:40px;cursor:pointer;}
.hd2 .hd2-comp-body .ad-notes-pin-send:hover{filter:brightness(1.06);}
/* Internal-note mode → yellow accent (matches the note cards) instead of the
   reply tab's cyan. Applies to the active tab, the textarea focus ring, the
   Send button, and the collapsed prompt. */
.hd2 .hd2-comp-note .hd2-comptab.active{color:var(--hd-yellow);background:rgba(var(--b2-yellow-rgb),0.14);border-color:rgba(var(--b2-yellow-rgb),0.42);}
.hd2 .hd2-comp-note .hd2-comp-prompt:hover{border-color:var(--hd-yellow);}
.hd2 .hd2-comp-note .ad-notes-pin-input:focus{border-color:var(--hd-yellow);}
.hd2 .hd2-comp-note .ad-notes-pin-send{background:var(--hd-yellow);color:#2a2400;}
/* The @-mention autocomplete drops UP above the note textarea (bottom:100%).
   The composer's own scroll clipping (.hd2-comp-inner overflow:hidden +
   .hd2-comp-body overflow-y:auto) would hide it, which is why tagging appeared
   dead in the redesigned note composer. Note mode is short (one textarea + Send),
   so let it overflow — the reply tab keeps its clipping/scroll untouched. */
.hd2 .hd2-comp-inner.hd2-comp-note{overflow:visible;}
.hd2 .hd2-comp-note .hd2-comp-body{overflow:visible;}
/* reply-tab field polish inside the composer */
.hd2 .hd2-comp-body .ad-act-label{display:block;margin:0 0 4px;}
/* To / Cc / Bcc on one compact line, inline labels, chip fields flex to fill. */
.hd2 .hd2-reciprow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.hd2 .hd2-recip{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:8px;}
.hd2 .hd2-recip-lbl{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--hd-fg3);}
.hd2 .hd2-recip .ad-chip-field{flex:1;min-width:0;margin:0;}
.hd2 .hd2-reciprow .ad-quick-bcc-toggle{flex:0 0 auto;margin:0;align-self:center;background:0;border:0;color:var(--hd-cyan);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;white-space:nowrap;}
.hd2 .hd2-comp-body .ad-reply-bar{display:flex;align-items:center;gap:9px;margin-top:12px;}
.hd2 .hd2-comp-body .ad-btn-primary{background:var(--hd-cyan);border-color:var(--hd-cyan);color:#08222a;}
.hd2 .hd2-comp-body .ad-quick-bcc-toggle{margin-top:6px;background:0;border:0;color:var(--hd-cyan);font-size:11.5px;font-weight:700;cursor:pointer;padding:0;}
.hd2 .hd2-tpl-cancel{margin-left:8px;background:0;border:0;color:var(--hd-cyan);font-weight:700;font-size:12px;cursor:pointer;padding:0;text-decoration:underline;}

/* ── Approvals screen (Bug Bot review surface) — reuses the hd2 shell tokens ── */
.hd2 .appr-tabn{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:5px;border-radius:999px;background:rgba(255,255,255,0.12);color:#fff;font-size:10px;font-weight:800;vertical-align:middle;}
.hd2 .hd2-tab.on .appr-tabn{background:rgba(0,0,0,0.28);}
.hd2 .appr-liststrip{margin:8px 2px 4px;padding:9px 12px;border-radius:9px;background:rgba(255,107,107,0.12);border:1px solid rgba(255,107,107,0.4);color:var(--hd-red);font-size:12px;font-weight:600;}

/* Queue rows */
.hd2 .appr-row{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px 13px;border-radius:12px;margin-bottom:2px;cursor:pointer;transition:background .12s;color:var(--hd-fg);}
.hd2 .appr-row:hover{background:#282a2b;}
.hd2 .appr-row.sel{background:#2b2e2f;}
.hd2 .appr-row-top{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;}
.hd2 .appr-row-title{flex:1;min-width:0;font-size:13.5px;font-weight:600;line-height:1.35;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hd2 .appr-row-sub{margin-top:7px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.hd2 .appr-req{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--hd-fg3);}
/* Terse "what it needs" line on a Your-turn list row + the waiting-age chip. */
.hd2 .appr-row-ask{margin-top:6px;font-size:11.5px;font-weight:700;color:#f5b13d;display:flex;gap:5px;align-items:flex-start;line-height:1.4;}
.hd2 .appr-age{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.06);color:var(--hd-fg3);white-space:nowrap;}

/* Prominent "waiting on you" ask strip at the top of a Your-turn detail pane. */
.hd2 .appr-ask{margin:0 0 18px;padding:12px 14px;border-radius:11px;display:flex;gap:9px;align-items:flex-start;font-size:14px;font-weight:700;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.42);color:#f5b13d;}
.hd2 .appr-ask-go{background:rgba(62,200,218,0.12);border-color:rgba(62,200,218,0.42);color:var(--hd-cyan);}
.hd2 .appr-ask-info{background:rgba(168,108,255,0.13);border-color:rgba(168,108,255,0.42);color:var(--hd-purple);}
.hd2 .appr-ask-human{background:rgba(244,63,94,0.12);border-color:rgba(244,63,94,0.44);color:#fb7185;}
.hd2 .appr-ask-ic{flex:0 0 auto;font-size:15px;line-height:1.4;}
.hd2 .appr-ask-body{min-width:0;}
.hd2 .appr-ask-text{line-height:1.45;}
.hd2 .appr-ask-held{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--hd-fg2);white-space:pre-wrap;word-break:break-word;}
.hd2 .appr-askq{margin:8px 0 0 18px;padding:0;font-size:13px;font-weight:600;color:var(--hd-fg);line-height:1.6;}
.hd2 .appr-askq li{margin:2px 0;}

/* Chips */
.hd2 .appr-chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.07);color:var(--hd-fg2);white-space:nowrap;}
.hd2 .appr-type{background:rgba(255,255,255,0.07);color:var(--hd-fg2);}
.hd2 .appr-st-amber,.hd2 .appr-sev-amber{background:rgba(245,158,11,0.16);color:#f5b13d;}
.hd2 .appr-st-cyan{background:rgba(62,200,218,0.16);color:var(--hd-cyan);}
.hd2 .appr-st-purple{background:rgba(168,108,255,0.18);color:var(--hd-purple);}
.hd2 .appr-st-green{background:rgba(76,207,122,0.16);color:var(--hd-green);}
.hd2 .appr-st-muted{background:rgba(255,255,255,0.06);color:var(--hd-fg3);}
.hd2 .appr-sev-red{background:rgba(255,107,107,0.16);color:var(--hd-red);}
.hd2 .appr-sev-muted{background:rgba(255,255,255,0.06);color:var(--hd-fg3);}
.hd2 .appr-effort{background:rgba(62,200,218,0.14);color:var(--hd-cyan);}
.hd2 .appr-diff{background:rgba(255,255,255,0.07);color:var(--hd-fg2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.hd2 .appr-chiprow{display:flex;gap:6px;flex-wrap:wrap;}

/* Detail pane */
.hd2 .appr-scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;}
.hd2 .appr-dhead{flex:0 0 auto;padding:22px 30px 16px;background:var(--hd-pane);border-bottom:1px solid var(--hd-line);}
.hd2 .appr-deyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-cyan);font-weight:700;margin-bottom:6px;}
.hd2 .appr-dtitle{margin:0;font-size:21px;font-weight:700;letter-spacing:-0.015em;line-height:1.25;color:#fff;}
.hd2 .appr-dchips{margin-top:11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.hd2 .appr-dbody{padding:20px 30px 8px;}
.hd2 .appr-ctx{font-size:12.5px;color:var(--hd-fg2);line-height:1.6;margin-bottom:18px;}
.hd2 .appr-ctx b{color:#fff;font-weight:700;}
.hd2 .appr-sec{margin-bottom:18px;}
.hd2 .appr-sec-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hd-fg4);font-weight:800;margin-bottom:7px;}
.hd2 .appr-sec-b{font-size:13.5px;color:var(--hd-fg);line-height:1.55;}
.hd2 .appr-pre{white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.6;color:var(--hd-fg);background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:10px;padding:11px 13px;}
.hd2 .appr-trailtoggle{background:0;border:0;color:var(--hd-cyan);font-size:12px;font-weight:700;cursor:pointer;padding:0;margin-bottom:8px;text-decoration:underline;}
.hd2 .appr-prlink{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--hd-cyan);text-decoration:none;padding:7px 13px;border:1px solid rgba(62,200,218,0.4);border-radius:9px;}
.hd2 .appr-prlink:hover{background:rgba(62,200,218,0.1);}
.hd2 .appr-prnum{font-size:13px;font-weight:700;color:var(--hd-fg2);}

/* Action bar (docked at the foot of the detail pane) */
.hd2 .appr-actionbar{flex:0 0 auto;display:flex;gap:9px;align-items:center;padding:14px 30px;border-top:1px solid var(--hd-line);background:var(--hd-pane);flex-wrap:wrap;}
.hd2 .appr-readonly{font-size:12.5px;color:var(--hd-fg3);font-style:italic;}
.hd2 .appr-btn{border:1px solid var(--hd-line);background:var(--hd-surf);color:var(--hd-fg);font-size:13px;font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer;transition:.12s;}
.hd2 .appr-btn:hover{background:#303334;}
.hd2 .appr-btn:disabled{opacity:.5;cursor:default;}
.hd2 .appr-btn.ok{background:var(--hd-green);border-color:var(--hd-green);color:#06301a;}
.hd2 .appr-btn.ok:hover{filter:brightness(1.06);background:var(--hd-green);}
.hd2 .appr-btn.danger{color:var(--hd-red);border-color:rgba(255,107,107,0.4);}
.hd2 .appr-btn.danger:hover{background:rgba(255,107,107,0.1);}
@media (max-width:760px){.hd2 .appr-queue{flex-basis:100%;}.hd2 .appr-dhead,.hd2 .appr-dbody,.hd2 .appr-actionbar{padding-left:18px;padding-right:18px;}}

/* Approvals — "All" tab: full-width Airtable mirror + right-side detail drawer */
.hd2.appr-shell-all .appr-allmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;min-height:0;background:var(--hd-bg);}
.hd2 .appr-alltoolbar{flex:0 0 auto;display:flex;gap:9px;align-items:center;padding:0 22px 12px;flex-wrap:wrap;}
.hd2 .appr-allq{flex:1 1 260px;min-width:0;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font-size:13px;font-weight:600;padding:8px 12px;font-family:inherit;}
.hd2 .appr-allq:focus{outline:none;border-color:var(--hd-cyan);}
.hd2 .appr-allstatus{flex:0 0 auto;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font-size:12.5px;font-weight:700;padding:8px 30px 8px 12px;font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f9294' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
.hd2 .appr-allstatus:focus{outline:none;border-color:var(--hd-cyan);}
.hd2 .appr-alltablewrap{flex:1 1 auto;min-height:0;overflow:auto;padding:0 22px 40px;}
.hd2 .appr-allcount{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--hd-fg4);padding:2px 2px 10px;position:sticky;top:0;background:var(--hd-bg);z-index:3;}
.hd2 .appr-alltable{width:100%;border-collapse:collapse;font-size:12.5px;}
.hd2 .appr-alltable thead th{position:sticky;top:26px;z-index:2;background:var(--hd-pane);text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg4);font-weight:800;padding:9px 12px;border-bottom:1px solid var(--hd-line);white-space:nowrap;cursor:pointer;user-select:none;}
.hd2 .appr-alltable thead th:hover{color:#fff;}
.hd2 .appr-alltable thead th.on{color:var(--hd-cyan);}
.hd2 .appr-alltable tbody td{padding:9px 12px;border-bottom:1px solid var(--hd-line2);color:var(--hd-fg2);vertical-align:middle;}
.hd2 .appr-tr{cursor:pointer;transition:background .1s;}
.hd2 .appr-tr:hover td{background:#282a2b;}
.hd2 .appr-tr.sel td{background:#2b2e2f;}
.hd2 .appr-td-req{font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--hd-fg3);white-space:nowrap;}
.hd2 .appr-td-title{color:#fff;font-weight:600;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hd2 .appr-td-rep{white-space:nowrap;}
.hd2 .appr-td-age{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--hd-fg3);}
.hd2 .appr-td-pr{display:inline-flex;align-items:center;gap:2px;color:var(--hd-cyan);text-decoration:none;font-weight:700;white-space:nowrap;}
.hd2 .appr-td-pr:hover{text-decoration:underline;}
.hd2 .appr-td-pr-empty{color:var(--hd-fg4);}
.hd2 .appr-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity .16s;z-index:70;}
.hd2 .appr-drawer-backdrop.open{opacity:1;pointer-events:auto;}
.hd2 .appr-drawer{position:absolute;top:0;right:0;bottom:0;width:min(560px,92%);background:var(--hd-bg);border-left:1px solid var(--hd-line);box-shadow:-18px 0 48px rgba(0,0,0,0.4);transform:translateX(100%);transition:transform .2s ease;z-index:71;display:flex;flex-direction:column;min-height:0;}
.hd2 .appr-drawer.open{transform:translateX(0);}
.hd2 .appr-drawer-close{position:absolute;top:14px;right:16px;z-index:2;width:30px;height:30px;border-radius:9px;border:1px solid var(--hd-line2);background:var(--hd-surf);color:var(--hd-fg2);font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.hd2 .appr-drawer-close:hover{background:#303334;color:#fff;}
.hd2 .appr-drawer-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
@media (max-width:760px){.hd2 .appr-alltoolbar{padding-left:18px;padding-right:18px;}.hd2 .appr-alltablewrap{padding-left:12px;padding-right:12px;}.hd2 .appr-td-title{max-width:180px;}}

/* ═══════════════════════════════════════════════════════════════════════════
   Elite Core app shell (v2) — dark, left-rail frame rolling out across the app.
   Shares the Help Desk (hd2) design tokens. First migrated view: Home.
   ═══════════════════════════════════════════════════════════════════════════ */
.ec-shell{
  --hd-bg:#1c1d1e;--hd-rail:#1a1b1c;--hd-pane:#212324;--hd-line:#3b3e40;--hd-line2:#34373a;--hd-line3:#303334;
  --hd-fg:#fff;--hd-fg2:#b8babb;--hd-fg3:#8f9294;--hd-fg4:#7f8284;--hd-surf:#262829;--hd-surf2:#2c2f30;
  --hd-yellow:var(--role-cta-primary);--hd-cyan:#3ec8da;--hd-green:#4ccf7a;--hd-purple:#a86cff;--hd-red:#ff6b6b;
  font-family:"Avenir Next","Nunito Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  color:var(--hd-fg);background:var(--hd-bg);display:flex;position:fixed;top:var(--ec-topbar-h,54px);left:0;right:0;height:calc(100vh - var(--ec-topbar-h,54px));height:calc(100dvh - var(--ec-topbar-h,54px));z-index:60;overflow:hidden;
}
.ec-shell *{box-sizing:border-box;}
/* The global top bar stays as the utility bar (search, notifications, user
   menu); the left rail replaces its page-nav, and the shells dock beneath it.
   Lift it above the shells so its downward dropdowns aren't clipped. */
.app-pagenav{display:none;}
.app-shell{z-index:80;}
/* left rail — global nav */
.ec-rail{flex:0 0 80px;display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0 14px;background:var(--hd-rail);border-right:1px solid var(--hd-line3);min-height:0;overflow-y:auto;overflow-x:visible;scrollbar-width:thin;scrollbar-color:var(--hd-line3) transparent;overscroll-behavior:contain;}
.ec-rail::-webkit-scrollbar{width:6px;}
.ec-rail::-webkit-scrollbar-thumb{background:var(--hd-line3);border-radius:3px;}
.ec-rail::-webkit-scrollbar-track{background:transparent;}
.ec-rail-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:70px;padding:6px 2px;flex:0 0 auto;border:0;background:transparent;color:var(--hd-fg3);cursor:pointer;border-radius:12px;font-family:inherit;transition:color .14s ease,transform .18s cubic-bezier(0.22,1,0.36,1);}
.ec-rail-item:hover{color:#fff;transform:translateX(2px);}
.ec-rail-item.active{color:var(--sec-accent,var(--hd-yellow));transform:none;}
.ec-rail-item.active::before{content:"";position:absolute;left:-9px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--sec-accent,var(--hd-yellow));}
.ec-rail-lbl{font-size:9px;font-weight:700;letter-spacing:.01em;color:inherit;text-align:center;line-height:1.12;max-width:64px;min-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.ec-rail-item.active .ec-rail-lbl{color:#fff;}
.ec-rail-chev{position:absolute;top:6px;right:8px;width:9px;height:9px;opacity:.45;pointer-events:none;}
.ec-rail-logo{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;opacity:.9;transition:opacity .12s,transform .12s;}
.ec-rail-logo:hover{opacity:1;transform:scale(1.06);}
.ec-rail-logo svg{width:30px;height:30px;display:block;}
/* grouped rail item (e.g. Production) with a hover flyout of children */
.ec-rail-group{position:relative;width:100%;flex:0 0 auto;display:flex;justify-content:center;}
.ec-rail-flyout{position:fixed;left:-9999px;top:0;min-width:184px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,0.5);opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .14s ease,transform .14s ease;z-index:5200;}
.ec-rail-flyout::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:12px;} /* invisible bridge so the hover survives the gap */
.ec-rail-group:hover .ec-rail-flyout,.ec-rail-group:focus-within .ec-rail-flyout,.ec-rail-group.ec-open .ec-rail-flyout{opacity:1;visibility:visible;transform:translateX(0);}
.ec-rail-flyout-title{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sec-accent,var(--hd-fg4));font-weight:800;padding:6px 10px 8px;}
.ec-rail-flyout-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;color:var(--hd-fg2);font-family:inherit;font-size:13px;font-weight:600;border-radius:8px;cursor:pointer;text-align:left;transition:background .1s,color .1s;}
.ec-rail-flyout-item:hover{background:var(--hd-surf2);color:#fff;}
.ec-rail-flyout-item.active{color:var(--sec-accent,var(--hd-yellow));background:rgba(255,255,255,0.06);}
.ec-rail-flyout-item svg{width:16px;height:16px;flex:0 0 auto;}
/* Rail sections (config-driven): a tiny uppercase label + a colored accent bar
   down the left of the whole section; section items hover to the section accent.
   Absent in the default rail (no section name). */
.ec-rail-sec{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;}
.ec-rail-seclabel{font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6a6d6f;margin:10px 0 2px;line-height:1;text-align:center;}
.ec-rail-secitems{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;}
.ec-rail-sec.has-accent::before{content:"";position:absolute;left:6px;top:6px;bottom:5px;width:2.5px;border-radius:2px;background:var(--sec-accent,transparent);opacity:.85;}
.ec-rail-sec.has-accent .ec-rail-item:hover,.ec-rail-sec.has-accent .ec-rail-group:hover .ec-rail-item{color:var(--sec-accent);}
/* current-page group master: tint to the section accent (not the gold active bg) */
.ec-rail-gmaster-active{color:var(--sec-accent,var(--hd-yellow));}
.ec-rail-gmaster-active .ec-rail-lbl{color:inherit;}
/* Navigation editor (Admin › Navigation card) — drag-and-drop rail builder. */
.nav-ed-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.nav-ed-danger{color:var(--role-danger,#ff453a);}
.nav-ed-armed{color:var(--role-danger,#ff453a)!important;border-color:var(--role-danger,#ff453a)!important;}
.nav-ed{display:grid;grid-template-columns:210px minmax(0,1fr) 250px;gap:14px;margin-top:12px;align-items:start;}
@media (max-width:900px){.nav-ed{grid-template-columns:1fr;}}
.nav-ed-col{min-width:0;}
.nav-ed-h{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg4,#7f8284);margin-bottom:8px;}
.nav-ed-palette{display:flex;flex-direction:column;gap:6px;min-height:44px;padding:8px;border:1px dashed var(--b2-hairline-strong,rgba(255,255,255,0.12));border-radius:12px;}
.nav-ed-chip{display:flex;align-items:center;gap:8px;background:var(--b2-surface-2,#242427);border:1px solid var(--b2-hairline,rgba(255,255,255,0.07));border-radius:8px;padding:6px 8px;font-size:12.5px;color:var(--b2-text,#f5f5f7);cursor:grab;}
.nav-ed-chip:active{cursor:grabbing;}
.nav-ed-dragging{opacity:.4;}
.nav-ed-chip .nav-ed-ico{width:18px;height:18px;flex:0 0 auto;color:var(--hd-fg2,#b8babb);display:inline-flex;}
.nav-ed-chip .nav-ed-ico svg{width:18px;height:18px;}
.nav-ed-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.nav-ed-x{border:0;background:transparent;color:var(--hd-fg4,#7f8284);cursor:pointer;font-size:15px;line-height:1;padding:0 3px;border-radius:5px;}
.nav-ed-x:hover{color:#fff;background:rgba(255,255,255,0.1);}
.nav-ed-secs{display:flex;flex-direction:column;gap:12px;}
.nav-ed-sec{border:1px solid var(--b2-hairline,rgba(255,255,255,0.07));border-radius:14px;overflow:hidden;background:var(--b2-surface-1,#1c1c1f);}
.nav-ed-sec-h{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--b2-surface-2,#242427);border-left:5px solid transparent;flex-wrap:wrap;}
.nav-ed-name{font:inherit;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--b2-text,#f5f5f7);padding:4px 6px;width:118px;}
.nav-ed-name:hover{border-color:var(--b2-hairline-strong,rgba(255,255,255,0.12));}
.nav-ed-name:focus{outline:none;border-color:var(--hd-yellow);background:var(--b2-surface-3,#2c2c30);}
.nav-ed-name::placeholder{color:var(--hd-fg4,#7f8284);text-transform:none;letter-spacing:0;font-weight:600;}
.nav-ed-sws{display:flex;gap:4px;margin-left:auto;}
.nav-ed-sw{width:15px;height:15px;border-radius:50%;border:2px solid transparent;cursor:pointer;}
.nav-ed-sw.on{border-color:#fff;}
.nav-ed-sec-tools{display:flex;gap:3px;}
.nav-ed-tbtn{border:1px solid var(--b2-hairline,rgba(255,255,255,0.07));background:var(--b2-surface-2,#242427);color:var(--hd-fg2,#b8babb);cursor:pointer;font:inherit;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;}
.nav-ed-tbtn:hover{color:#fff;border-color:var(--b2-hairline-strong,rgba(255,255,255,0.12));}
.nav-ed-sec-body{padding:10px;display:flex;flex-direction:column;gap:7px;min-height:40px;}
.nav-ed-over{outline:2px dashed var(--hd-yellow);outline-offset:2px;border-radius:8px;}
.nav-ed-empty,.nav-ed-gempty{font-size:11px;color:var(--hd-fg4,#7f8284);font-style:italic;text-align:center;padding:8px;border:1px dashed var(--b2-hairline-strong,rgba(255,255,255,0.12));border-radius:8px;}
.nav-ed-grp{border:1px solid var(--b2-hairline-strong,rgba(255,255,255,0.12));border-radius:8px;background:var(--b2-surface-2,#242427);}
.nav-ed-grp-h{display:flex;align-items:center;gap:6px;padding:6px 8px;flex-wrap:wrap;}
.nav-ed-tag{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-yellow);border:1px solid rgba(var(--b2-yellow-rgb),0.4);border-radius:5px;padding:1px 5px;}
.nav-ed-gtag{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--hd-fg2,#b8babb);}
.nav-ed-gtag svg{width:16px;height:16px;}
.nav-ed-mini.nav-ed-gicon{display:inline-flex;align-items:center;justify-content:center;padding:3px 5px;}
.nav-ed-mini svg{width:11px;height:11px;display:block;}
.nav-ed-gname{font:inherit;font-size:12px;font-weight:700;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--b2-text,#f5f5f7);padding:2px 5px;flex:1;min-width:0;}
.nav-ed-gname:hover{border-color:var(--b2-hairline-strong,rgba(255,255,255,0.12));}
.nav-ed-gname:focus{outline:none;border-color:var(--hd-yellow);background:var(--b2-surface-1,#1c1c1f);}
.nav-ed-mini{border:1px solid var(--b2-hairline,rgba(255,255,255,0.07));background:transparent;color:var(--hd-fg3,#8f9294);cursor:pointer;font:inherit;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;}
.nav-ed-mini:hover{color:#fff;}
.nav-ed-gbody{padding:7px 8px 8px;display:flex;flex-direction:column;gap:6px;min-height:32px;}
.nav-ed-hint{font-size:11px;color:var(--hd-fg4,#7f8284);margin-top:8px;line-height:1.5;}
/* Per-app rename + icon picker */
.nav-ed-edit-btn{flex:0 0 auto;border:0;background:transparent;color:var(--hd-fg4,#7f8284);cursor:pointer;padding:2px 4px;border-radius:5px;display:inline-flex;align-items:center;}
.nav-ed-edit-btn:hover{color:#fff;background:var(--b2-surface-3,#2c2c30);}
.nav-ed-chip-editing{border-color:var(--hd-yellow)!important;}
.nav-ed-edit{background:var(--b2-surface-2,#242427);border:1px solid var(--b2-hairline-strong,rgba(255,255,255,0.12));border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:5px;}
.nav-ed-edit-l{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg4,#7f8284);}
.nav-ed-relabel{font:inherit;font-size:12.5px;background:var(--b2-surface-1,#1c1c1f);border:1px solid var(--b2-hairline-strong,rgba(255,255,255,0.12));border-radius:8px;color:var(--b2-text,#f5f5f7);padding:6px 9px;}
.nav-ed-relabel:focus{outline:none;border-color:var(--hd-yellow);}
.nav-ed-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:5px;max-height:132px;overflow-y:auto;}
.nav-ed-iconbtn{display:flex;align-items:center;justify-content:center;height:30px;border:1px solid var(--b2-hairline,rgba(255,255,255,0.07));background:var(--b2-surface-1,#1c1c1f);color:var(--hd-fg2,#b8babb);border-radius:7px;cursor:pointer;}
.nav-ed-iconbtn:hover{color:#fff;border-color:var(--b2-hairline-strong,rgba(255,255,255,0.12));}
.nav-ed-iconbtn.on{color:var(--hd-yellow);border-color:var(--hd-yellow);background:rgba(255,214,10,0.1);}
.nav-ed-iconbtn svg{width:16px;height:16px;}
.nav-ed-editfoot{display:flex;justify-content:space-between;gap:8px;margin-top:2px;}
.nav-ed-done{color:var(--hd-yellow);border-color:var(--hd-yellow);}
.nav-ed-prev{background:var(--hd-rail,#1a1b1c);border:1px solid var(--hd-line3,#303334);border-radius:14px;padding:8px 0 14px;display:flex;flex-direction:column;gap:2px;}
.nav-ed-prev-lbl{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-fg4,#7f8284);text-align:center;margin:10px 0 4px;}
.nav-ed-prev-sec{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;}
.nav-ed-prev-sec[style*="--a"]::before{content:"";position:absolute;left:10px;top:1px;bottom:1px;width:3px;border-radius:3px;background:var(--a,transparent);}
.nav-ed-prev-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;color:var(--b2-text,#f5f5f7);}
.nav-ed-prev-item svg{width:20px;height:20px;}
.nav-ed-prev-item span{font-size:10px;font-weight:600;}
.nav-ed-prev-chev{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--hd-fg4,#7f8284);font-size:12px;}
.nav-ed-prev-child{display:flex;align-items:center;gap:6px;padding:2px 10px 2px 34px;color:var(--hd-fg3,#8f9294);}
.nav-ed-prev-child svg{width:13px;height:13px;flex:0 0 auto;}
.nav-ed-prev-child span{font-size:10px;}
/* content area — provides the page padding migrated views expect */
.ec-content{flex:1;min-width:0;overflow-y:auto;padding:26px 32px 44px;}
/* ── Quotes (Instaquote) — native list + iframed editor ──────────────────── */
/* Frame subview: back bar + the standalone editor filling the rest edge-to-edge. */
/* Full-bleed wash behind the quotes LIST — same teal→plum gradient the editor
   (#iqxEditorHost) carries, so list + editor read as one section. Negative
   margins cancel .ec-content's padding to reach the pane edges; the padding is
   restored here so the centered .iqx-wrap keeps its breathing room. */
.iqx-listwrap{margin:-26px -32px -44px;padding:26px 32px 44px;min-height:calc(100% + 70px);
  background:linear-gradient(180deg,#262829 0%,rgba(38,193,195,0.086) 50%,rgba(115,24,120,0.094) 100%),var(--b2-bg);}
@media (max-width:560px){.iqx-listwrap{margin:-20px -16px;padding:20px 16px;min-height:calc(100% + 40px);}}
.iqx-framewrap{display:flex;flex-direction:column;margin:-26px -32px -44px;height:calc(100% + 70px);overflow:hidden;}
.iqx-framewrap iframe{display:block;width:100%;flex:1;border:0;background:#101014;}
.iqx-backbar{flex:0 0 auto;padding:10px 16px;border-bottom:1px solid var(--hd-line3);background:var(--hd-rail);}
.iqx-back{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg2);font:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:border-color .14s,color .14s;}
.iqx-back:hover{border-color:var(--hd-yellow);color:#fff;}
/* Native list — visual language from the Claude Design "Instaquote Refined"
   handoff (dc.html prototype): b2-style grays + semantic palette, gradient KPI
   cards with glow dots, pill status chips, initials tiles, gradient rep
   avatars. Surfaces stay on the shell's hd gray family (the shell bg is
   #1c1d1e, not the prototype's #141416) so relative contrast matches. */
.iqx-wrap{max-width:1440px;margin:0 auto;
  --iqx-s0:#1a1b1c;--iqx-s1:#262829;--iqx-s2:#2c2f30;--iqx-s3:#34373a;
  --iqx-line:rgba(255,255,255,0.07);--iqx-line2:rgba(255,255,255,0.13);
  --iqx-fg:#f5f5f7;--iqx-fg2:#a1a1a6;--iqx-fg3:#8e8e95;--iqx-fg4:#6e6e73;
  --iqx-gold:#ffd60a;--iqx-on-gold:#1a1300;}
.iqx-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px;}
.iqx-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--iqx-fg3);font-weight:700;}
.iqx-h1{margin:8px 0 0;font-size:32px;font-weight:700;letter-spacing:-0.02em;color:var(--iqx-fg);}
.iqx-headactions{display:flex;align-items:center;gap:10px;}
.iqx-vt-group{display:inline-flex;gap:4px;background:var(--iqx-s1);border:1px solid var(--iqx-line2);border-radius:12px;padding:4px;}
.iqx-vt{display:inline-flex;align-items:center;gap:8px;height:34px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--iqx-fg3);font:inherit;font-size:13px;font-weight:600;padding:0 16px;cursor:pointer;transition:background .14s,color .14s;}
.iqx-vt.active{background:var(--iqx-s3);color:var(--iqx-fg);border-color:var(--iqx-line2);}
.iqx-vt .ct{font-size:11px;font-weight:700;background:var(--iqx-s3);border-radius:999px;padding:2px 7px;color:var(--iqx-fg2);font-variant-numeric:tabular-nums;}
.iqx-vt.active .ct{background:rgba(255,214,10,0.16);color:var(--iqx-gold);}
.iqx-ghostbtn{background:none;border:1px solid var(--iqx-line2);border-radius:11px;color:var(--iqx-fg2);font:inherit;font-size:13px;font-weight:600;padding:9px 16px;cursor:pointer;transition:border-color .14s,color .14s;}
.iqx-ghostbtn:hover{border-color:var(--iqx-gold);color:#fff;}
/* KPI status-filter cards: per-card semantic RGB triplet in --kc (set inline) */
.iqx-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px;}
@media (max-width:1080px){.iqx-kpis{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.iqx-kpis{grid-template-columns:repeat(2,1fr);}}
.iqx-kpi{--kc:184,186,187;position:relative;text-align:left;cursor:pointer;font:inherit;color:var(--iqx-fg);border-radius:16px;padding:15px 17px;
  background:linear-gradient(145deg,rgba(var(--kc),0.17) 0%,rgba(var(--kc),0.03) 50%,rgba(28,28,31,0) 100%),var(--iqx-s1);
  border:1px solid rgba(var(--kc),0.24);transition:box-shadow .14s,transform .1s;}
.iqx-kpi:hover{transform:translateY(-1px);}
.iqx-kpi.active{border-color:rgba(var(--kc),0.65);box-shadow:0 0 0 1px rgba(var(--kc),0.65),0 6px 20px rgba(var(--kc),0.15);}
.iqx-kpi .top{display:flex;align-items:center;gap:8px;margin-bottom:13px;}
.iqx-kpi .dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--kc));box-shadow:0 0 9px rgba(var(--kc),0.75);}
.iqx-kpi .lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--iqx-fg2);}
.iqx-kpi .val{margin-top:0;font-size:32px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--iqx-fg);font-variant-numeric:tabular-nums;}
.iqx-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.iqx-search{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--iqx-s2);border:1px solid var(--iqx-line2);border-radius:12px;padding:0 14px;color:var(--iqx-fg3);}
.iqx-search input{flex:1;background:none;border:0;outline:0;color:var(--iqx-fg);font:inherit;font-size:13.5px;padding:12px 0;}
.iqx-search input::placeholder{color:var(--iqx-fg4);}
.iqx-select{height:42px;background:var(--iqx-s2);border:1px solid var(--iqx-line2);border-radius:12px;color:var(--iqx-fg);font:inherit;font-size:13.5px;font-weight:600;padding:0 34px 0 14px;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%238e8e95" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 12px center;}
.iqx-newbtn{display:inline-flex;align-items:center;gap:7px;height:42px;background:var(--iqx-gold);border:0;border-radius:12px;color:var(--iqx-on-gold);font:inherit;font-size:13.5px;font-weight:700;padding:0 18px;cursor:pointer;white-space:nowrap;}
.iqx-newbtn:hover{filter:brightness(1.06);}
.iqx-newbtn svg{flex:0 0 auto;}
/* table (no overflow:hidden — assign menus must escape the box) */
.iqx-table{background:var(--iqx-s1);border:1px solid var(--iqx-line);border-radius:18px;}
.iqx-thead,.iqx-row{display:grid;grid-template-columns:118px minmax(180px,1.9fr) 108px 64px 110px minmax(140px,150px);gap:10px;align-items:center;padding:11px 18px;}
.iqx-thead{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--iqx-fg3);border-bottom:1px solid var(--iqx-line);background:var(--iqx-s0);border-radius:18px 18px 0 0;}
.iqx-row{padding:12px 18px;border-bottom:1px solid var(--iqx-line);cursor:pointer;transition:background .12s;}
.iqx-row:hover{background:var(--iqx-s2);}
.iqx-row .qn .num{font-weight:700;color:var(--iqx-fg);font-size:13.5px;font-variant-numeric:tabular-nums;}
.iqx-row .qn .exp{font-size:11.5px;color:var(--iqx-fg3);margin-top:3px;font-variant-numeric:tabular-nums;}
.iqx-row .qn .exp.soon{color:#ff9f0a;}
.iqx-row .cust{display:flex;align-items:center;gap:11px;min-width:0;}
.iqx-row .cust .tile{width:32px;height:32px;flex:0 0 auto;border-radius:9px;background:var(--iqx-s3);border:1px solid var(--iqx-line2);display:grid;place-items:center;color:var(--iqx-fg2);font-weight:700;font-size:11px;}
.iqx-row .cust .who{min-width:0;}
.iqx-row .cust .nm{font-weight:600;font-size:13.5px;color:var(--iqx-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.iqx-row .cust .em{font-size:11.5px;color:var(--iqx-fg3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iqx-row .r,.iqx-thead .r{text-align:right;justify-self:end;}
.iqx-row .muted{color:var(--iqx-fg2);font-size:13px;font-variant-numeric:tabular-nums;}
.iqx-row .strong{font-weight:600;color:var(--iqx-fg);font-size:13.5px;font-variant-numeric:tabular-nums;}
/* status chips — semantic families from the prototype's chip() map */
.iqx-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:capitalize;border-radius:999px;padding:4px 10px;border:1px solid;}
.iqx-chip .cd{width:7px;height:7px;border-radius:50%;background:currentColor;}
.iqx-chip.pending{color:#ff9f0a;border-color:rgba(255,159,10,.32);background:rgba(255,159,10,.12);}
.iqx-chip.info{color:#0a84ff;border-color:rgba(10,132,255,.34);background:rgba(10,132,255,.14);}
.iqx-chip.success{color:#30d158;border-color:rgba(48,209,88,.30);background:rgba(48,209,88,.14);}
.iqx-chip.ordered{color:#1199ab;border-color:rgba(17,153,171,.34);background:rgba(17,153,171,.14);}
.iqx-chip.danger{color:#ff453a;border-color:rgba(255,69,58,.32);background:rgba(255,69,58,.12);}
.iqx-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--iqx-s3);color:var(--iqx-fg3);font-weight:700;overflow:hidden;flex:0 0 auto;}
.iqx-avatar.grad{color:var(--iqx-on-gold);}
.iqx-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.iqx-assign{position:relative;}
.iqx-assign-btn{display:inline-flex;align-items:center;gap:7px;width:138px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--iqx-fg2);font:inherit;font-size:12.5px;font-weight:600;padding:4px 6px;cursor:pointer;max-width:100%;}
.iqx-assign-btn:hover{background:var(--iqx-s3);border-color:var(--iqx-line2);}
.iqx-hist-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;background:transparent;border:1px solid transparent;border-radius:7px;color:var(--iqx-fg2);cursor:pointer;padding:0;}
.iqx-hist-btn:hover{background:var(--iqx-s3);border-color:var(--iqx-line2);}
.iqx-assign-btn .nm{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iqx-assign-btn .chev{flex:0 0 auto;color:var(--iqx-fg4);display:inline-flex;}
.iqx-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:216px;background:var(--iqx-s1);border:1px solid var(--iqx-line2);border-radius:13px;padding:6px;box-shadow:0 14px 44px rgba(0,0,0,.6);animation:iqxPop .14s cubic-bezier(.22,1,.36,1);}
@keyframes iqxPop{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:none;}}
.iqx-menu .ttl{padding:8px 10px 5px;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--iqx-fg3);text-transform:uppercase;}
.iqx-menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:9px;color:var(--iqx-fg);font:inherit;font-size:13px;font-weight:600;padding:7px 10px;cursor:pointer;text-align:left;}
.iqx-menu button:hover{background:var(--iqx-s3);}
.iqx-menu button svg{flex:0 0 auto;color:var(--iqx-fg2);}
.iqx-menu .on{margin-left:auto;color:var(--iqx-gold);}
.iqx-menu .sep{height:1px;background:var(--iqx-line);margin:4px;}
.iqx-pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px;font-size:12.5px;color:var(--iqx-fg3);}
.iqx-pager span{font-variant-numeric:tabular-nums;}
.iqx-pager button{background:var(--iqx-s2);border:1px solid var(--iqx-line2);border-radius:9px;color:var(--iqx-fg2);font:inherit;font-size:12.5px;font-weight:600;padding:6px 14px;cursor:pointer;}
.iqx-pager button:disabled{opacity:.4;cursor:default;}
.iqx-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 20px;text-align:center;color:var(--iqx-fg3);font-size:13.5px;}
.iqx-empty svg{color:var(--iqx-fg4);}
.iqx-empty .t{font-size:14px;font-weight:600;color:var(--iqx-fg2);}
.iqx-empty .s{font-size:12.5px;color:var(--iqx-fg3);max-width:340px;}
@media (max-width:900px){.iqx-thead{display:none;}.iqx-row{grid-template-columns:1fr 1fr;gap:8px;}.iqx-row .r{justify-self:start;text-align:left;}.iqx-assign-btn{width:auto;}}
@media (max-width:560px){.iqx-framewrap{margin:-20px -16px;height:calc(100% + 40px);}}
/* home launcher (padding rebalanced since .ec-content pads the frame) */
.ec-home{max-width:1080px;margin:0 auto;padding:8px 12px 20px;}
.ec-home .ec-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-cyan);font-weight:700;}
.ec-home-title{margin:9px 0 6px;font-size:40px;font-weight:700;letter-spacing:-0.025em;line-height:1.05;color:#fff;}
.ec-home-sub{font-size:15px;color:var(--hd-fg3);}
.ec-home-section{margin:44px 0 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hd-fg4);font-weight:700;}
.ec-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.ec-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;text-align:left;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:16px;padding:20px;cursor:pointer;color:var(--hd-fg);font-family:inherit;transition:border-color .14s,transform .14s,background .14s;}
.ec-card:hover{border-color:var(--hd-yellow);transform:translateY(-2px);background:var(--hd-surf2);}
.ec-card-ico{width:46px;height:46px;border-radius:13px;background:rgba(var(--b2-yellow-rgb),0.12);display:flex;align-items:center;justify-content:center;color:var(--hd-yellow);margin-bottom:2px;}
.ec-card-svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ec-card-name{font-size:16.5px;font-weight:700;color:#fff;}
.ec-card-desc{font-size:13px;color:var(--hd-fg3);}
.ec-card-foot{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hd-fg2);}
.ec-card-foot b{color:#fff;font-weight:700;}
.ec-card-dot{width:7px;height:7px;border-radius:50%;background:var(--hd-fg4);flex:0 0 auto;}
.ec-card-dot.calm{background:var(--hd-green);}
.ec-card-dot.warn{background:var(--hd-yellow);}
.ec-card-dot.crit{background:var(--hd-red);}
.ec-card-dot.info{background:var(--hd-cyan);}
.ec-card-flag{margin-left:6px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid transparent;background:rgba(255,255,255,0.06);color:var(--hd-fg2);}
.ec-card-flag.calm{background:rgba(76,207,122,0.14);color:var(--hd-green);border-color:rgba(76,207,122,0.32);}
.ec-card-flag.warn{background:rgba(var(--b2-yellow-rgb),0.14);color:var(--hd-yellow);border-color:rgba(var(--b2-yellow-rgb),0.34);}
.ec-card-flag.crit{background:rgba(255,107,107,0.14);color:var(--hd-red);border-color:rgba(255,107,107,0.34);}
.ec-card-flag.info{background:rgba(62,200,218,0.14);color:var(--hd-cyan);border-color:rgba(62,200,218,0.32);}
@media (max-width:560px){.ec-content{padding:20px 16px;}.ec-home-title{font-size:30px;}.ec-home-grid{grid-template-columns:1fr;}.ec-rail{flex:0 0 66px;}.ec-rail-item{width:56px;}}
/* ── Home launcher (design handoff): grouped, color-zoned workspaces ── */
.hl{position:relative;min-height:100%;}
.hl-inner{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:4px 8px 40px;}
.hl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hl-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-cyan);}
.hl-title{margin:6px 0 3px;font-size:26px;font-weight:700;letter-spacing:-0.02em;color:#fff;}
.hl-sub{margin:0;font-size:13.5px;color:var(--hd-fg3);}
.hl-search{display:flex;align-items:center;gap:9px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:11px;padding:0 13px;height:40px;width:260px;color:var(--hd-fg4);}
.hl-search svg{flex:0 0 auto;}
.hl-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:inherit;font-size:13px;}
.hl-search input::placeholder{color:var(--hd-fg4);}
.hl-group{margin-top:24px;}
.hl-group:first-child{margin-top:26px;}
.hl-ghead{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.hl-glabel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--a,var(--hd-yellow));}
.hl-gcount{font-size:11px;font-weight:700;color:var(--hd-fg4);font-variant-numeric:tabular-nums;}
.hl-gline{flex:1;height:1px;background:var(--hd-line3);}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:8px;}
.hl-card{display:flex;align-items:center;gap:11px;padding:9px 12px;background:var(--hd-surf);border:1px solid rgba(255,255,255,0.05);border-radius:13px;color:#fff;min-height:54px;cursor:pointer;font-family:inherit;text-align:left;transition:box-shadow .16s ease,background .16s ease,transform .16s ease;}
.hl-card:hover{background:var(--hd-surf2);transform:translateY(-2px);box-shadow:inset 2px 0 0 var(--a,var(--hd-yellow)),0 8px 22px rgba(0,0,0,0.28);}
.hl-ico{width:33px;height:33px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--a-bg,rgba(255,214,10,0.12));color:var(--a,var(--hd-yellow));}
.hl-svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.hl-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.hl-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-desc{font-size:11.5px;color:var(--hd-fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hl-empty{margin-top:44px;text-align:center;color:var(--hd-fg3);font-size:14px;font-weight:600;}
@media (max-width:560px){.hl-grid{grid-template-columns:1fr;}.hl-head{gap:14px;}.hl-search{width:100%;}}
/* On narrow screens the flyout would run off the right edge — anchor it to the
   rail's right and cap its width so it stays on-screen. */
@media (max-width:560px){.ec-rail-flyout{min-width:0;width:calc(100vw - 78px);max-width:230px;}}

/* ═══ Orders workspace (dashboardMode 'orders') ══════════════════════════════
   Rides the hd2 shell (queue + detail panes, shared rail). ord-* classes are
   the orders-specific skin: row layout, status pills, detail sections, the
   line-items table with variant options, and the comment thread. */
.ord-queue{flex:0 0 420px;}
.ord-row{display:flex;flex-direction:column;gap:4px;}
.ord-row-top{display:flex;align-items:center;gap:8px;}
.ord-num{font-weight:800;font-size:13.5px;color:var(--hd-fg);letter-spacing:.01em;min-width:54px;}
.ord-row-date{margin-left:auto;font-size:11px;color:var(--hd-fg3);white-space:nowrap;}
.ord-row-who{font-size:12.5px;color:var(--hd-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ord-row-foot{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--hd-fg3);}
.ord-row-total{font-weight:700;color:var(--hd-fg2);}
.ord-cmtpip{display:inline-flex;align-items:center;gap:3px;margin-left:auto;color:var(--hd-cyan);font-weight:700;}
.ord-paychip{font-size:10px;font-weight:700;padding:1px 7px;border-radius:8px;background:rgba(245,181,68,0.14);color:#f5b442;border:1px solid rgba(245,181,68,0.3);white-space:nowrap;}
.ord-status{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:9px;white-space:nowrap;letter-spacing:.01em;}
.ord-status-good{background:rgba(76,207,122,0.13);color:var(--hd-green);border:1px solid rgba(76,207,122,0.3);}
.ord-status-bad{background:rgba(255,107,107,0.12);color:var(--hd-red);border:1px solid rgba(255,107,107,0.3);}
.ord-status-warn{background:rgba(245,181,68,0.13);color:#f5b442;border:1px solid rgba(245,181,68,0.3);}
.ord-status-info{background:rgba(62,200,218,0.12);color:var(--hd-cyan);border:1px solid rgba(62,200,218,0.3);}
.ord-status-flow{background:rgba(168,108,255,0.12);color:var(--hd-purple);border:1px solid rgba(168,108,255,0.28);}
.ord-limit{background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg2);border-radius:10px;font-size:12px;font-weight:600;padding:0 8px;cursor:pointer;}
.ord-list-msg{padding:26px 18px;text-align:center;color:var(--hd-fg3);font-size:12.5px;line-height:1.5;}
.ord-btn{background:var(--hd-surf);border:1px solid var(--hd-line);color:var(--hd-fg2);border-radius:10px;font-size:12px;font-weight:700;padding:7px 14px;cursor:pointer;transition:background .12s,color .12s;}
.ord-btn:hover{background:var(--hd-surf2);color:var(--hd-fg);}
.ord-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--hd-line);border-top-color:var(--hd-yellow);animation:ordspin .8s linear infinite;}
@keyframes ordspin{to{transform:rotate(360deg);}}

/* Detail pane — flex column: content scrolls, composer stays pinned below. */
.ord-detail{display:flex;flex-direction:column;flex:1;min-height:0;}
.ord-detail-scroll{flex:1;min-height:0;overflow-y:auto;padding:22px 28px 20px;}
.ord-dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--hd-line3);}
.ord-deyebrow{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hd-fg4);}
.ord-dtitle-row{display:flex;align-items:center;gap:10px;margin:4px 0 6px;}
.ord-dtitle{font-size:26px;font-weight:800;color:var(--hd-fg);letter-spacing:-.01em;}
.ord-dmeta{font-size:13px;color:var(--hd-fg2);margin-top:2px;}
.ord-dmeta.dim{color:var(--hd-fg3);font-size:12px;}
.ord-mail{color:var(--hd-cyan);text-decoration:none;}
.ord-mail:hover{text-decoration:underline;}
.ord-dhead-r{display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.ord-dtotal{font-size:22px;font-weight:800;color:var(--hd-fg);}
.ord-sec{margin-top:18px;}
.ord-sec-title{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg3);margin-bottom:8px;}
.ord-sec-hint{font-weight:600;letter-spacing:0;text-transform:none;color:var(--hd-fg4);font-size:11px;margin-left:6px;}
.ord-sec-sub{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hd-fg4);margin-bottom:6px;}
/* Info band — billing / shipping / shipments / totals share one row of cards. */
.ord-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.ord-info-card{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:12px;padding:12px 14px;min-width:0;border-top:2px solid var(--hd-line3);}
.ord-card-gap{height:10px;}
/* Per-card identity: icon + accent so the band doesn't read as one gray blur. */
.ord-card-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px;}
.ord-card-billing{border-top-color:rgba(168,108,255,0.55);}
.ord-card-shipping{border-top-color:rgba(62,200,218,0.55);}
.ord-card-shipments{border-top-color:rgba(76,207,122,0.55);}
.ord-card-totals{border-top-color:rgba(var(--b2-yellow-rgb),0.55);}
.ord-ch-billing{color:var(--hd-purple);}
.ord-ch-shipping{color:var(--hd-cyan);}
.ord-ch-shipments{color:var(--hd-green);}
.ord-ch-totals{color:var(--hd-yellow);}
.ord-trow{display:flex;justify-content:space-between;gap:18px;font-size:12px;color:var(--hd-fg2);padding:2px 0;}
.ord-trow.strong{font-weight:800;color:var(--hd-fg);border-top:1px solid var(--hd-line3);margin-top:5px;padding-top:7px;font-size:13px;}
.ord-trow.bad{color:var(--hd-red);}
.ord-addr{min-width:0;}
.ord-addr-body{font-size:12px;color:var(--hd-fg2);line-height:1.5;}
.ord-addr-body.dim{color:var(--hd-fg4);}
.ord-addr-method{margin-top:5px;font-size:11px;color:var(--hd-cyan);font-weight:700;}
.ord-items{width:100%;border-collapse:collapse;}
.ord-items th{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg4);text-align:left;padding:5px 10px;border-bottom:1px solid var(--hd-line3);}
.ord-items th.r,.ord-items td.r{text-align:right;}
.ord-items td{padding:8px 10px;border-bottom:1px solid var(--hd-line3);vertical-align:top;font-size:12.5px;color:var(--hd-fg2);}
.ord-items td.ok{color:var(--hd-green);font-weight:700;}
.ord-item-row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ord-item-sku-main{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:13px;color:var(--hd-fg);letter-spacing:.01em;}
.ord-item-name-sub{font-size:11.5px;color:var(--hd-fg3);margin-top:1px;}
/* Labeling / customization badge — THE per-line question, answered up front. */
.ord-lblbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:1.5px 8px;border-radius:9px;white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis;}
.ord-lblbadge.yes{background:rgba(245,181,68,0.14);color:#f5b442;border:1px solid rgba(245,181,68,0.35);}
/* Variant options — collapsed table module (count toggle → label/value rows). */
.ord-optsmod{margin-top:5px;}
.ord-opts-toggle{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;padding:0;font-size:11px;font-weight:800;color:var(--hd-fg4);cursor:pointer;font-family:inherit;transition:color .12s;}
.ord-opts-toggle:hover{color:var(--hd-cyan);}
.ord-opts-toggle svg{transition:transform .15s;}
.ord-optsmod.open .ord-opts-toggle{color:var(--hd-cyan);}
.ord-optsmod.open .ord-opts-toggle svg{transform:rotate(90deg);}
.ord-opts-table{display:none;margin-top:6px;border:1px solid var(--hd-line3);border-radius:10px;overflow:hidden;max-width:560px;}
.ord-optsmod.open .ord-opts-table{display:block;}
.ord-optrow{display:grid;grid-template-columns:minmax(130px,38%) 1fr;}
.ord-optrow + .ord-optrow{border-top:1px solid var(--hd-line3);}
.ord-optrow .k{padding:5px 12px;font-size:11px;font-weight:700;color:var(--hd-fg4);background:var(--hd-surf);border-right:1px solid var(--hd-line3);}
.ord-optrow .v{padding:5px 12px;font-size:11.5px;color:var(--hd-fg2);word-break:break-word;}
.ord-ship{display:flex;gap:10px;align-items:baseline;font-size:12px;color:var(--hd-fg2);padding:2px 0;flex-wrap:wrap;}
.ord-ship .dim{color:var(--hd-fg4);}
.ord-track{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--hd-cyan);font-size:11.5px;word-break:break-all;}
.ord-note{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--hd-fg2);line-height:1.55;margin-bottom:8px;}
/* Header comments chip — the thread's front door. */
.ord-cmt-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:rgba(62,200,218,0.12);color:var(--hd-cyan);border:1px solid rgba(62,200,218,0.3);cursor:pointer;font-family:inherit;white-space:nowrap;}
.ord-cmt-chip:hover{background:rgba(62,200,218,0.2);}
.ord-cmt-chip.none{background:transparent;color:var(--hd-fg4);border-color:var(--hd-line);}
.ord-cmt-chip.none:hover{color:var(--hd-fg2);border-color:var(--hd-fg4);}

/* Comment thread */
.ord-cmt-list{display:flex;flex-direction:column;gap:12px;max-height:420px;overflow-y:auto;padding:2px;}
.ord-cmt{display:flex;gap:10px;}
.ord-cmt-ava{flex:0 0 auto;padding-top:2px;}
.ord-cmt-main{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:12px;padding:9px 13px;flex:1;min-width:0;}
.ord-cmt-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--hd-fg2);margin-bottom:3px;}
.ord-cmt-meta strong{color:var(--hd-fg);}
.ord-rolechip{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 7px;border-radius:8px;background:rgba(62,200,218,0.12);color:var(--hd-cyan);border:1px solid rgba(62,200,218,0.28);}
.ord-cmt-time{margin-left:auto;font-size:10.5px;color:var(--hd-fg4);white-space:nowrap;}
.ord-cmt-body{font-size:13px;color:var(--hd-fg2);line-height:1.55;word-break:break-word;}
/* Pinned composer bar (Help-Desk-style): sits below the scroll area, always
   visible while reading an order. The @-mention menu anchors above the box. */
.ord-composer-bar{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:12px 30px 16px;border-top:1px solid var(--hd-line3);background:var(--hd-pane);}
.ord-composer-row{display:flex;gap:10px;align-items:flex-end;}
.ord-mention-wrap{position:relative;flex:1;display:flex;}
.ord-composer-bar textarea{width:100%;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:12px;color:var(--hd-fg);font-size:13px;font-family:inherit;line-height:1.4;padding:10px 13px;resize:none;min-height:40px;max-height:120px;}
.ord-composer-bar textarea:focus{outline:none;border-color:var(--hd-yellow);}
.ord-composer-bar textarea:disabled{opacity:.6;cursor:wait;}
.ord-send{background:var(--hd-yellow);border-color:var(--hd-yellow);color:#1a1b1c;}
.ord-send:hover{background:#ffdf66;color:#1a1b1c;}
.ord-send:disabled{opacity:.6;cursor:default;}
.ord-mention-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:30;background:var(--hd-surf2);border:1px solid var(--hd-line);border-radius:9px;box-shadow:0 10px 28px rgba(0,0,0,0.38);overflow:hidden auto;max-height:240px;}
.ord-mention-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 11px;background:transparent;border:0;cursor:pointer;color:var(--hd-fg);font-size:13px;font-family:inherit;}
.ord-mention-opt:hover,.ord-mention-opt.active{background:rgba(110,168,254,0.16);}
.ord-mention-opt-ava .ad-ava{width:22px;height:22px;}
.ord-mention-opt-ava .ad-ava-ini{font-size:9px;}
.ord-mention-opt-name{font-weight:600;}
.ord-mention-opt-role{margin-left:auto;color:var(--hd-fg3);font-size:11px;}

@media (max-width:900px){.ord-queue{flex:0 0 320px;}}

/* Mention tags inside order comments — same Slack-style pill + hover card as
   Help Desk notes, re-scoped because those rules live under .stockv2 and the
   orders thread renders in the hd2 shell instead. hd-* surface vars here. */
.ord-cmt-body .ad-mention-tag { display:inline-block; position:relative; color:#6ea8fe; font-weight:600; background:rgba(110,168,254,0.12); border-radius:4px; padding:0 3px; cursor:default; outline:none; }
.ord-cmt-body .ad-mention-card {
  display:none; position:absolute; bottom:calc(100% + 6px); left:0; z-index:60;
  pointer-events:none; min-width:200px; max-width:280px;
  background:var(--hd-surf2); border:1px solid var(--hd-line); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,0.4); padding:10px 12px;
  align-items:center; gap:10px; color:var(--hd-fg);
}
.ord-cmt-body .ad-mention-tag:hover .ad-mention-card,
.ord-cmt-body .ad-mention-tag:focus .ad-mention-card { display:flex; }
.ord-cmt-body .ad-mca-circle {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:50%; overflow:hidden;
  background:var(--ad-ava-color, #3a4252); color:#fff; font-weight:700;
}
.ord-cmt-body .ad-mca-circle img { width:100%; height:100%; object-fit:cover; }
.ord-cmt-body .ad-mca-ini { font-size:13px; }
.ord-cmt-body .ad-mention-card-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ord-cmt-body .ad-mention-card-name { font-weight:700; font-size:13px; color:var(--hd-fg); }
.ord-cmt-body .ad-mention-card-role { font-size:11.5px; color:var(--hd-fg2); font-weight:600; }
.ord-cmt-body .ad-mention-card-email { font-size:11px; color:var(--hd-fg3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ Customers workspace ═════════════════════════════════════════════════
   Rides the same hd2 shell + ord-* skin as Orders; cus-* covers the deltas. */
.cus-name{font-weight:800;font-size:13.5px;color:var(--hd-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;}
.cus-hist-row{cursor:pointer;transition:background .1s;}
.cus-hist-row:hover td{background:var(--hd-surf);}
.ord-dhead-btns{display:flex;gap:8px;}
.ord-ch-contact{color:var(--hd-purple);}
.ord-ch-group{color:var(--hd-cyan);}
.ord-ch-activity{color:var(--hd-green);}
.ord-ch-trend{color:var(--hd-yellow);}

/* Proofs — thumbnails in line items, the order Proofs section, and the
   per-customer "old proofs" gallery. Thumbs open the shared proof modal. */
.ord-line-proofs{display:flex;flex-wrap:wrap;gap:6px;}
.ord-line-proofs:not(:empty){margin-top:6px;}
.ord-proof{display:inline-flex;width:44px;height:44px;border-radius:8px;overflow:hidden;border:1px solid var(--hd-line);cursor:zoom-in;background:#0e0f10;transition:border-color .12s,transform .12s;}
.ord-proof:hover{border-color:var(--hd-cyan);transform:scale(1.04);}
.ord-proof img{width:100%;height:100%;object-fit:cover;display:block;}
.ord-proof.big{width:84px;height:84px;border-radius:10px;}
.ord-proofrows{display:flex;flex-direction:column;gap:6px;}
.ord-proofrow{display:flex;align-items:center;gap:10px;background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:10px;padding:6px 10px;}
.ord-proofname{flex:1;min-width:0;font-size:12px;color:var(--hd-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.ord-proofdl{text-decoration:none;padding:4px 10px;font-size:13px;}
/* Customer "old proofs" — photo-stack cards, one per order: the newest proof
   is the card face, extras fan out behind, order # stamped on the image,
   +N badge for the rest. Clicking opens the tray below with the full set. */
.cus-proofstrip{position:relative;}
.cus-proofdeck{display:flex;flex-wrap:nowrap;gap:18px;align-items:flex-start;padding:4px 6px 8px 2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;}
.cus-proofnav{position:absolute;top:42px;z-index:6;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--hd-surf2);border:1px solid var(--hd-line);color:var(--hd-fg2);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.45);transition:color .12s,border-color .12s;}
.cus-proofnav:hover{color:var(--hd-fg);border-color:var(--hd-cyan);}
.cus-proofnav.left{left:-10px;}
.cus-proofnav.right{right:-10px;}
.cus-proofcard{position:relative;flex:0 0 auto;width:104px;height:104px;background:transparent;border:0;padding:0;cursor:pointer;font-family:inherit;}
.cus-proofcard-stack{position:absolute;inset:0;}
.cus-proofcard-stack img{position:absolute;top:0;left:0;width:92px;height:92px;object-fit:cover;border-radius:10px;border:1px solid var(--hd-line);background:#0e0f10;box-shadow:0 3px 10px rgba(0,0,0,0.35);}
.cus-proofcard-stack img.s0{z-index:3;}
.cus-proofcard-stack img.s1{z-index:2;transform:translate(6px,4px) rotate(2deg);filter:brightness(.75);}
.cus-proofcard-stack img.s2{z-index:1;transform:translate(12px,8px) rotate(4deg);filter:brightness(.55);}
.cus-proofcard:hover .cus-proofcard-stack img.s0{border-color:var(--hd-cyan);}
.cus-proofcard.open .cus-proofcard-stack img.s0{border-color:var(--hd-yellow);box-shadow:0 0 0 2px rgba(var(--b2-yellow-rgb),0.35);}
.cus-proofcard-num{position:absolute;left:5px;bottom:7px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;background:rgba(0,0,0,0.66);padding:2px 6px 2.5px;border-radius:6px;max-width:80px;}
.cus-proofcard-num .n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:800;color:#fff;letter-spacing:.02em;line-height:1.25;}
.cus-proofcard-num .d{font-size:8.5px;font-weight:700;color:rgba(255,255,255,0.75);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68px;}
.cus-proofcard-more{position:absolute;top:-6px;right:2px;z-index:4;font-size:10px;font-weight:800;color:#1a1b1c;background:var(--hd-yellow);padding:1.5px 7px;border-radius:999px;box-shadow:0 2px 6px rgba(0,0,0,0.4);}
.cus-prooftray{display:none;margin-top:12px;padding:12px 14px;border:1px solid var(--hd-line3);border-radius:12px;background:var(--hd-surf);}
.cus-prooftray.open{display:block;}
.cus-prooftray-head{display:flex;gap:12px;align-items:center;margin-bottom:10px;font-size:12px;color:var(--hd-fg3);}
.cus-prooftray-thumbs{display:flex;flex-wrap:wrap;gap:8px;}

/* ── Customer Chat (storefront livechat console) ─────────────────────────── */
.app-pagenav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 4px; margin-left: 6px;
  background: #e5484d; border-radius: 9px;
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
}
.cchat { display: flex; flex-direction: column; width: 100%; height: calc(100vh - 140px); min-height: 420px; }
/* Inside the ec-shell the content column pads the frame; size against it. */
.ec-content .cchat { height: calc(100vh - var(--ec-topbar-h, 56px) - 90px); }
.cchat-top { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 12px; }
.cchat-title { font-size: 18px; font-weight: 800; color: var(--white); }
.cchat-title-sub { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.45); margin-left: 8px; }
.cchat-tabs { display: flex; gap: 8px; }
.cchat-tab {
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
  color: var(--white); font-size: 12px; font-weight: 600;
}
.cchat-tab.active { background: var(--yellow); border-color: var(--yellow); color: #1a1503; }
.cchat-body {
  flex: 1; display: flex; min-height: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.cchat-queue { width: 280px; flex: none; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.1); }
.cchat-queue-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent; color: var(--white); font: inherit;
}
.cchat-queue-item:hover { background: rgba(255,255,255,0.05); }
.cchat-queue-item.selected { background: rgba(var(--b2-yellow-rgb),0.12); box-shadow: inset 3px 0 0 var(--yellow); }
.cchat-queue-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cchat-queue-top b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cchat-queue-time { font-size: 10px; color: rgba(255,255,255,0.4); flex: none; }
.cchat-queue-preview {
  display: block; font-size: 12px; color: rgba(255,255,255,0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.cchat-queue-meta { display: block; font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.cchat-thread { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cchat-thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cchat-thread-id b { font-size: 14px; }
.cchat-thread-email { margin-left: 8px; font-size: 12px; color: rgba(255,255,255,0.5); }
.cchat-thread-page { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
.cchat-close-btn {
  flex: none; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(229,72,77,0.5); background: rgba(229,72,77,0.12);
  color: #ff8589; font-size: 12px; font-weight: 600;
}
.cchat-close-btn:hover { background: rgba(229,72,77,0.22); }
.cchat-feed { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cchat-row { display: flex; align-items: flex-end; gap: 7px; max-width: 74%; }
.cchat-row.me { align-self: flex-end; }
.cchat-row.them { align-self: flex-start; }
.cchat-msg {
  padding: 8px 12px; border-radius: 12px; font-size: 13px;
  white-space: pre-wrap; word-break: break-word; min-width: 0;
}
.cchat-row.me .cchat-msg { background: rgba(var(--b2-yellow-rgb),0.16); border: 1px solid rgba(var(--b2-yellow-rgb),0.25); }
.cchat-row.them .cchat-msg { background: rgba(255,255,255,0.07); }
.cchat-msg-who { display: block; font-size: 10px; color: rgba(255,255,255,0.45); margin-bottom: 3px; }
.cchat-msg-avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }
.cchat-sys { align-self: center; font-size: 11px; font-style: italic; color: rgba(255,255,255,0.4); }
.cchat-composer { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.cchat-input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
  color: var(--white); font: inherit; font-size: 13px;
}
.cchat-input:focus { outline: none; border-color: var(--yellow); }
.cchat-send {
  flex: none; padding: 9px 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--yellow); color: #1a1503; font-weight: 700; font-size: 13px;
}
.cchat-send:disabled { opacity: 0.5; cursor: default; }
.cchat-closed-note { padding: 10px; text-align: center; font-size: 11px; color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.1); }
.cchat-empty { padding: 18px; font-size: 13px; color: rgba(255,255,255,0.45); text-align: center; }

/* ── Customer Chat: rail badge + nudge, queue triage states ──────────────── */
.ec-rail-item { overflow: visible; }
.ec-rail-badge {
  position: absolute; top: 4px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #e5484d; border-radius: 8px;
  font-size: 9px; font-weight: 800; color: #fff; line-height: 1;
  box-shadow: 0 0 0 2px var(--hd-rail);
}
@keyframes cchat-nudge {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-9deg); }
  30% { transform: rotate(8deg); }
  45% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
}
.ec-rail-item.cchat-nudge svg { animation: cchat-nudge 0.7s ease; transform-origin: 50% 40%; }
@media (prefers-reduced-motion: reduce) {
  .ec-rail-item.cchat-nudge svg { animation: none; }
}

/* Unclaimed chats jump out of the queue: amber edge + tinted row. */
.cchat-queue-item.unclaimed {
  background: rgba(var(--b2-yellow-rgb),0.07);
  box-shadow: inset 3px 0 0 var(--yellow);
}
.cchat-queue-item.unclaimed:hover { background: rgba(var(--b2-yellow-rgb),0.12); }
.cchat-queue-item.unclaimed.selected { background: rgba(var(--b2-yellow-rgb),0.16); }
.cchat-unclaimed-pill {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--yellow); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cchat-queue-meta { display: flex !important; align-items: center; gap: 6px; }
.cchat-queue-avatar {
  width: 16px; height: 16px; border-radius: 50%; flex: none; object-fit: cover;
}
.cchat-queue-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.15); color: var(--white);
  font-size: 9px; font-weight: 700;
}

/* ── Customer Chat round 3: side tabs, ringing state, hero stats ─────────── */
.cchat-side { width: 280px; flex: none; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.1); min-height: 0; }
.cchat-side .cchat-queue { width: auto; flex: 1; border-right: 0; }
.cchat-side .cchat-tabs {
  display: flex; gap: 4px; padding: 8px; flex: none;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cchat-side .cchat-tab { flex: 1; text-align: center; padding: 6px 4px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.cchat-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--yellow); color: #1a1503; font-size: 10px; font-weight: 800;
}
.cchat-tab.active .cchat-tab-count { background: #1a1503; color: var(--yellow); }

/* Ringing: amber halo on the rail icon while any chat sits unclaimed. */
.ec-rail-item.cchat-ringing svg { color: var(--hd-yellow); filter: drop-shadow(0 0 6px rgba(var(--b2-yellow-rgb),0.55)); }
/* …but when the item is active or hovered, the icon takes the SECTION accent
   (Sam 2026-07-10) — the unclaimed-chat amber shouldn't beat the highlight
   color, and the flyout's red dot now shows where the unread actually is.
   Ordered after the ringing rule so it wins at equal specificity. */
.ec-rail-item.active svg,
.ec-rail-gmaster-active svg,
.ec-rail-sec.has-accent .ec-rail-group:hover .ec-rail-item svg {
  color: var(--sec-accent, var(--hd-yellow)); filter: none;
}
/* Flyout child pip — red dot + count next to the exact sub-item a group's
   badge is pointing at. */
.ec-rail-flyout-item { position: relative; }
.ec-rail-flyout-dot {
  margin-left: auto; flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff;
  background: #ff3b30; border-radius: 999px;
}
/* AmEx "uncoded charges" badge — a gold/amber pill (matches the Team Chat
   launcher), set apart from the red notification badges. Applies to the
   standalone rail leaf badge and the AmEx flyout dot; the group-master
   aggregate stays the default red since it can also fold in Approvals. */
#amxRailBadge { background: var(--role-cta-primary); color: #1c1d1e; }
.ec-rail-flyout-dot.amx-flyout-dot { background: var(--role-cta-primary); color: #1c1d1e; }

/* Thread-pane empty state: live snapshot instead of dead space. */
.cchat-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.cchat-hero-stats { display: flex; gap: 14px; }
.cchat-stat {
  min-width: 110px; padding: 18px 10px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
}
.cchat-stat b { display: block; font-size: 30px; line-height: 1.1; color: var(--white); }
.cchat-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.45); }
.cchat-stat.hot { border-color: rgba(var(--b2-yellow-rgb),0.5); background: rgba(var(--b2-yellow-rgb),0.08); }
.cchat-stat.hot b { color: var(--yellow); }
.cchat-hero-tip { font-size: 13px; color: rgba(255,255,255,0.45); }

/* Thread header chips (status + started time) + clickable page link. */
.cchat-thread-chip {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55);
}
.cchat-thread-chip.open { background: rgba(76,207,122,0.15); color: #4ccf7a; }
.cchat-thread-chip.closed { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); }
.cchat-thread-page a { color: rgba(62,200,218,0.75); text-decoration: none; }
.cchat-thread-page a:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   SALES DASHBOARD (mode 'salesDash') — Geckoboard-replacement board in the
   ec-shell. Inherits the hd-* tokens from .ec-shell. Dense card grid, big
   numbers, gold accents.
   ═══════════════════════════════════════════════════════════════════════════ */
.sdash { max-width: 1380px; margin: 0 auto; }
.sdash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sdash-title { margin: 6px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sdash-head-right { display: flex; align-items: center; gap: 10px; }
.sdash-updated { font-size: 12px; color: var(--hd-fg3); }
.sdash-updated.sdash-stale { color: var(--hd-red); }
.sdash-btn { background: var(--hd-surf); border: 1px solid var(--hd-line2); color: var(--hd-fg2); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: border-color .12s, color .12s; }
.sdash-btn:hover { border-color: var(--hd-yellow); color: #fff; }
.sdash-btn[disabled] { opacity: .55; cursor: default; }
.sdash-btn-primary { background: var(--hd-yellow); border-color: var(--hd-yellow); color: #1c1d1e; }
.sdash-loading { padding: 60px 0; text-align: center; color: var(--hd-fg3); font-size: 14px; }

/* card grid */
.sdash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.sdash-card { background: var(--hd-pane); border: 1px solid var(--hd-line3); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.sdash-card-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hd-fg3); margin-bottom: 10px; }
.sdash-projections { grid-column: span 3; grid-row: span 2; }
.sdash-today { grid-column: span 5; }
.sdash-buckets { grid-column: span 4; }
.sdash-chart { grid-column: span 5; }
.sdash-newcust { grid-column: span 4; }
.sdash-mtd { grid-column: span 3; }
.sdash-largest { grid-column: span 9; }
.sdash-aov { grid-column: span 3; }
.sdash-split { grid-column: span 4; }
.sdash-cats { grid-column: span 5; }

/* big numbers */
.sdash-big { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.05; }
.sdash-big2 { font-size: 30px; font-weight: 800; letter-spacing: -0.015em; color: #fff; line-height: 1.1; }
.sdash-big-sub { font-size: 12.5px; color: var(--hd-fg3); margin-top: 4px; }

/* projections */
.sdash-proj-block { padding: 6px 0 14px; text-align: center; }
.sdash-proj-block + .sdash-proj-block { border-top: 1px solid var(--hd-line3); padding-top: 16px; }
.sdash-proj-lbl { font-size: 13px; font-weight: 700; color: var(--hd-fg2); text-align: left; margin-bottom: 4px; }
.sdash-gauge { width: 100%; max-width: 210px; display: block; margin: 0 auto; }
.sdash-gauge-lbl { font-size: 10px; fill: var(--hd-fg4); font-weight: 700; }
.sdash-proj-num { font-size: 30px; font-weight: 800; color: #fff; margin-top: 4px; }
.sdash-proj-sub { font-size: 11.5px; color: var(--hd-fg4); margin-top: 2px; }

/* today hero */
.sdash-today.sd-behind { border-color: rgba(255,107,107,0.55); background: linear-gradient(180deg, rgba(255,107,107,0.07), rgba(255,107,107,0.02)), var(--hd-pane); }
.sdash-today.sd-ahead { border-color: rgba(76,207,122,0.5); background: linear-gradient(180deg, rgba(76,207,122,0.06), rgba(76,207,122,0.02)), var(--hd-pane); }
.sdash-today-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.sdash-delta { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 10px; font-size: 16px; font-weight: 800; }
.sdash-delta.sd-red { color: var(--hd-red); }
.sdash-delta.sd-green { color: var(--hd-green); }
.sdash-delta-sub { font-size: 11px; font-weight: 600; color: var(--hd-fg4); }

/* large-order buckets */
.sdash-bucket-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sdash-bucket { background: var(--hd-surf); border: 1px solid var(--hd-line2); border-radius: 10px; padding: 10px 8px; text-align: center; }
.sdash-bucket.sd-hot { background: rgba(76,207,122,0.13); border-color: rgba(76,207,122,0.6); }
.sdash-bucket.sd-hot .sdash-bucket-n { color: var(--hd-green); }
.sdash-bucket-n { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.sdash-bucket-lbl { font-size: 10.5px; color: var(--hd-fg4); font-weight: 700; margin-top: 2px; }

/* chart */
.sdash-chartsvg { width: 100%; display: block; }
.sdash-axis { font-size: 10.5px; fill: var(--hd-fg4); font-weight: 600; }

/* new customers */
.sdash-nc-row { display: flex; gap: 40px; padding-top: 4px; }

/* largest orders */
.sdash-largest-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.sdash-lo-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--hd-line3); font-size: 14px; }
.sdash-lo-name { color: var(--hd-fg2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdash-lo-amt { color: #fff; font-weight: 800; flex: 0 0 auto; }
.sdash-empty { color: var(--hd-fg4); font-size: 13px; padding: 10px 0; }

/* goals modal */
.sdash-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 400; display: flex; align-items: center; justify-content: center; }
.sdash-modal { background: var(--hd-pane, #212324); border: 1px solid var(--hd-line2, #34373a); border-radius: 14px; padding: 22px 24px; width: min(420px, calc(100vw - 40px)); color: #fff; font-family: "Avenir Next","Nunito Sans",system-ui,sans-serif; box-shadow: 0 18px 50px rgba(0,0,0,0.55); }
.sdash-modal h3 { margin: 0 0 4px; font-size: 18px; }
.sdash-modal-sub { margin: 0 0 14px; font-size: 12.5px; color: #8f9294; }
.sdash-modal label { display: block; font-size: 12px; font-weight: 700; color: #b8babb; margin-bottom: 12px; }
.sdash-modal input { display: block; width: 100%; margin-top: 5px; background: #1c1d1e; border: 1px solid #3b3e40; border-radius: 8px; color: #fff; font: inherit; font-size: 15px; padding: 8px 10px; box-sizing: border-box; }
.sdash-modal input:focus { outline: none; border-color: var(--role-cta-primary); }
.sdash-modal-err { color: #ff6b6b; font-size: 12.5px; margin-bottom: 10px; }
.sdash-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* responsive collapse */
@media (max-width: 1150px) {
  .sdash-projections { grid-column: span 4; grid-row: span 2; }
  .sdash-today { grid-column: span 8; }
  .sdash-buckets { grid-column: span 8; }
  .sdash-chart { grid-column: span 8; }
  .sdash-newcust { grid-column: span 6; }
  .sdash-mtd { grid-column: span 6; }
  .sdash-largest { grid-column: span 12; }
}
@media (max-width: 760px) {
  .sdash-grid > .sdash-card { grid-column: span 12 !important; grid-row: auto; }
  .sdash-largest-grid { grid-template-columns: 1fr; }
}

/* ── Admin: Users & Access toggle grid ─────────────────────────────────── */
.admin-aa-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.admin-aa-table{min-width:900px;}
.admin-users-wrap{overflow-x:auto;user-select:none;-webkit-user-select:none;}

/* ── Admin console (tabbed — Claude Design 1B) ─────────────────────────── */
.ec-content.ec-flush{padding:0;display:flex;flex-direction:column;}
.admin-console{display:flex;flex-direction:column;min-height:100%;}
.admin-tabbar{display:flex;align-items:stretch;gap:2px;padding:0 26px;background:var(--b2-surface-0);border-bottom:1px solid rgba(255,255,255,.09);position:sticky;top:0;z-index:3;}
.admin-tab{display:inline-flex;align-items:center;gap:8px;padding:15px 16px;appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;font-size:13.5px;font-weight:650;color:#8e8e95;cursor:pointer;transition:color .12s;}
.admin-tab svg{flex:none;}
.admin-tab:hover{color:#c7c7cc;}
.admin-tab.is-active{color:#fff;border-bottom-color:var(--role-cta-primary);}
.admin-tabwrap{padding:24px 34px 48px;width:100%;max-width:1240px;margin:0 auto;box-sizing:border-box;}
.admin-tabhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;}
.admin-tabhead h2{margin:0 0 4px;font-size:19px;font-weight:740;color:var(--b2-text);letter-spacing:-.01em;}
.admin-tabhead p{margin:0;font-size:13px;color:#8e8e95;line-height:1.5;max-width:560px;}
.admin-tabhead .admin-btn-ghost{white-space:nowrap;margin-top:0;flex:none;}
.nav-ed-toolbar-head{justify-content:flex-end;margin-bottom:14px;}
@media (max-width:700px){.admin-tabbar{padding:0 10px;overflow-x:auto;}.admin-tab{padding:13px 11px;}.admin-tabwrap{padding:18px 16px 40px;}.admin-tabhead{flex-direction:column;}}
.admin-aa-table th.c,.admin-aa-table td.c{text-align:center;padding:6px 6px;}
.admin-aa-cell{width:30px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:#fff;font-size:13px;font-weight:800;cursor:pointer;transition:background .1s,border-color .1s;line-height:1;}
.admin-aa-cell:hover{border-color:var(--role-cta-primary);}
.admin-aa-cell.on{background:rgba(76,207,122,.18);border-color:rgba(76,207,122,.65);color:#4ccf7a;}
.admin-aa-cell.notes{background:rgba(var(--b2-yellow-rgb),.16);border-color:rgba(var(--b2-yellow-rgb),.6);color:var(--role-cta-primary);font-size:11px;}
.admin-aa-cell.inherited{color:#8e8e95;border-style:dashed;}
.admin-aa-cell.busy{opacity:.45;cursor:default;}
.admin-aa-cell.err{border-color:#ff6b6b;background:rgba(255,107,107,.15);}

/* ── Users & Access usability layer ─────────────────────────────────────
   Sticky header + sticky user column keep context while scrolling the wide
   matrix; the toolbar filters it; .aa-hi is the column crosshair. Sticky
   cells need OPAQUE backgrounds (they paint over scrolling content). */
.admin-aa-table{position:relative;}
.admin-card-wide .admin-users-wrap{overflow:auto;max-height:70vh;}
.admin-aa-table thead th{position:sticky;top:0;z-index:3;background:#232326;}
.admin-aa-table th:first-child,.admin-aa-table td:first-child{position:sticky;left:0;z-index:2;background:var(--b2-surface-1);box-shadow:2px 0 0 rgba(255,255,255,.06);white-space:nowrap;}
.admin-aa-table thead th:first-child{z-index:4;background:#232326;}
.admin-aa-table tbody tr:hover td:first-child{background:#242427;}
/* Column crosshair — header lights up + a soft wash down the column. */
.admin-aa-table td.aa-hi{background:rgba(255,255,255,.045);}
.admin-aa-table tbody tr:hover td.aa-hi{background:rgba(255,255,255,.075);}
.admin-aa-table thead th.aa-hi{color:var(--b2-text);background:#2c2c30;}

.aa-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;}
.aa-toolbar-search{display:flex;align-items:center;gap:8px;background:var(--b2-surface-2);border:1px solid var(--b2-hairline-strong);border-radius:10px;padding:7px 12px;color:var(--b2-text-3);min-width:220px;}
.aa-toolbar-search input{background:transparent;border:0;outline:0;color:var(--b2-text);font-size:13px;width:100%;font-family:inherit;}
.aa-toolbar-search input::placeholder{color:var(--b2-text-4);}
.aa-toolbar-search:focus-within{border-color:rgba(var(--b2-yellow-rgb),.55);box-shadow:0 0 0 3px rgba(var(--b2-yellow-rgb),.12);}
.aa-chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.aa-chip{border-radius:999px;border:1px solid var(--b2-hairline-strong);background:transparent;color:var(--b2-text-2);font-size:11px;font-weight:700;padding:5px 12px;cursor:pointer;font-family:inherit;transition:background .1s,border-color .1s,color .1s;}
.aa-chip:hover{color:var(--b2-text);border-color:rgba(255,255,255,.25);}
.aa-chip.active{background:rgba(var(--b2-yellow-rgb),.14);border-color:rgba(var(--b2-yellow-rgb),.55);color:var(--role-cta-primary);}
.aa-shown{font-size:11.5px;color:var(--b2-text-3);margin:0 0 8px;}
.aa-shown strong{color:var(--b2-text);}
.admin-uname-col{display:flex;flex-direction:column;gap:1px;min-width:0;}
.aa-count{font-size:10.5px;color:var(--b2-text-4);font-weight:600;font-variant-numeric:tabular-nums;}
.admin-aa-super{color:var(--role-cta-primary);font-weight:800;margin-left:4px;}
.aa-plan{max-height:280px;overflow-y:auto;border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:8px 12px;margin-bottom:12px;}
.aa-plan-row{padding:5px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px;color:#d8d8dc;}
.aa-plan-row:last-child{border-bottom:0;}
.aa-plan-role{color:#8e8e95;font-size:12px;}

/* Meta chips (ship-by / priority / held) in the order header. */
.ord-chipset{display:inline-flex;gap:6px;align-items:center;}

/* Header proof-status badge — bigger than a pill; the whole team reads it. */
.ord-artbadge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.01em;white-space:nowrap;}

/* ── Unified order badge (header + queue rows) ──────────────────────────────
   Category icon + semantic color; SOLID reserved for exception flags. */
.ord-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;white-space:nowrap;letter-spacing:.01em;border:1px solid transparent;font-family:inherit;line-height:1.35;vertical-align:middle;}
.ord-badge svg{flex:0 0 auto;opacity:.8;}
.ord-badge-sm{font-size:10px;padding:1.5px 7px;gap:4px;border-radius:7px;}
button.ord-badge{cursor:pointer;transition:filter .12s;}
button.ord-badge:hover{filter:brightness(1.18);}
.ord-tone-good{background:rgba(76,207,122,0.13);color:var(--hd-green);border-color:rgba(76,207,122,0.32);}
.ord-tone-bad{background:rgba(255,107,107,0.12);color:var(--hd-red);border-color:rgba(255,107,107,0.32);}
.ord-tone-warn{background:rgba(245,181,68,0.13);color:#f5b442;border-color:rgba(245,181,68,0.32);}
.ord-tone-info{background:rgba(62,200,218,0.12);color:var(--hd-cyan);border-color:rgba(62,200,218,0.3);}
.ord-tone-flow{background:rgba(168,108,255,0.13);color:var(--hd-purple);border-color:rgba(168,108,255,0.3);}
.ord-tone-calm{background:var(--hd-surf2);color:var(--hd-fg3);border-color:var(--hd-line);}
/* Exception flags — heavier fill so they pop over the tinted state badges. */
.ord-badge-solid{font-weight:800;border-color:transparent;}
.ord-badge-solid svg{opacity:1;}
.ord-badge-solid.ord-tone-bad{background:var(--hd-red);color:#3a0d0d;}
.ord-badge-solid.ord-tone-warn{background:#f5b442;color:#3a2a05;}
/* Proof-count pill inside the header proof badge. */
.ord-badge-count{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding-left:7px;border-left:1px solid currentColor;opacity:.9;font-weight:800;}
.ord-badge-count svg{opacity:.9;}
.ord-dtitle-row{flex-wrap:wrap;row-gap:6px;}

/* ── All-proofs modal (header badge → overlay) ──────────────────────────────
   Redeclares the hd2 tokens because the overlay mounts on <body>, outside .hd2. */
.ord-proofs-overlay{--hd-bg:#1c1d1e;--hd-line:#3b3e40;--hd-line3:#303334;--hd-fg:#fff;--hd-fg2:#b8babb;--hd-fg3:#8f9294;--hd-fg4:#7f8284;--hd-surf:#262829;--hd-surf2:#2c2f30;--hd-cyan:#3ec8da;align-items:flex-start;padding:6vh 40px;}
.ord-proofs-modal{background:#1c1d1e;border:1px solid #303334;border-radius:16px;max-width:760px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.6);padding:20px 22px;}
.ord-proofs-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.ord-proofs-modal-title{font-size:16px;font-weight:800;color:#fff;}
.ord-proofs-modal-sub{font-size:12px;color:#8f9294;margin-top:3px;}
.ord-proofs-modal .proof-modal-close{position:static;flex:0 0 auto;}
.ord-proofs-modal-empty{padding:30px 10px;text-align:center;color:#8f9294;font-size:13px;}
.ord-proofs-modal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.ord-proofs-modal-cell{display:flex;flex-direction:column;gap:7px;}
.ord-proofs-modal-cell .ord-proof.big{width:100%;height:150px;border-radius:10px;}
.ord-proofs-modal-meta{display:flex;align-items:center;gap:8px;}
.ord-proofs-modal-meta .ord-proofname{flex:1;min-width:0;font-size:11px;color:#b8babb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.ord-proofs-modal-meta .ord-proofdl{flex:0 0 auto;text-decoration:none;padding:4px 10px;font-size:13px;background:#262829;border:1px solid #3b3e40;color:#b8babb;border-radius:8px;}
.ord-proofs-modal-meta .ord-proofdl:hover{color:#fff;border-color:#3ec8da;}

/* Comment attachments — attach button, pending tray, thread render. */
.ord-attach-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg3);cursor:pointer;transition:color .12s,border-color .12s;}
.ord-attach-btn:hover{color:var(--hd-fg);border-color:var(--hd-cyan);}
.ord-cmt-tray{display:flex;flex-wrap:wrap;gap:8px;}
.ord-attach-chip{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:220px;padding:4px 8px 4px 4px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:10px;}
.ord-attach-chip.uploading{opacity:.7;}
.ord-attach-chip img{width:30px;height:30px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#0e0f10;}
.ord-attach-doc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:#0e0f10;color:var(--hd-cyan);font-size:8.5px;font-weight:800;flex:0 0 auto;}
.ord-attach-name{font-size:11.5px;color:var(--hd-fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ord-attach-x{flex:0 0 auto;background:0;border:0;color:var(--hd-fg4);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;}
.ord-attach-x:hover{color:var(--hd-red);}
.ord-attach-spin{flex:0 0 auto;width:13px;height:13px;border-radius:50%;border:2px solid var(--hd-line);border-top-color:var(--hd-cyan);animation:ordspin .8s linear infinite;}
.ord-cmt-attach{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.ord-cmt-attach .ord-proof{width:88px;height:88px;border-radius:10px;}
.ord-cmt-file{display:inline-flex;align-items:center;gap:8px;max-width:240px;padding:6px 11px 6px 6px;background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:10px;text-decoration:none;}
.ord-cmt-file:hover{border-color:var(--hd-cyan);}
.ord-cmt-file .ord-attach-name{color:var(--hd-fg2);}

/* ── Customer Chat: mobile (master-detail) ──────────────────────────────── */
.cchat-back {
  display: none; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-right: 4px;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--white);
  font-size: 20px; line-height: 1; font-weight: 700;
}
.cchat-back:hover { background: rgba(255,255,255,0.14); }
@media (max-width: 760px) {
  .cchat { height: calc(100dvh - var(--ec-topbar-h, 56px) - 110px); min-height: 320px; }
  .cchat-body { position: relative; }
  .cchat-side { width: 100%; border-right: 0; }
  .cchat-thread { display: none; }
  .cchat.thread-open .cchat-side { display: none; }
  .cchat.thread-open .cchat-thread { display: flex; }
  .cchat-back { display: inline-flex; }
  .cchat-thread-head { flex-wrap: wrap; row-gap: 6px; }
  .cchat-thread-page { max-width: 100%; }
  .cchat-hero-stats { flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 10px; }
  .cchat-stat { min-width: 88px; padding: 12px 8px; }
  .cchat-stat b { font-size: 22px; }
  .cchat-hero-tip { text-align: center; padding: 0 16px; }
  .cchat-row { max-width: 88%; }
}

/* ── Help Desk (Admin Desk): mobile master-detail ───────────────────────── */
.hd2-mob-back {
  display: none; align-items: center; justify-content: center;
  position: absolute; top: 10px; left: 58px; z-index: 40;
  width: 36px; height: 36px; border: 1px solid var(--hd-line2); border-radius: 10px;
  background: var(--hd-surf); color: var(--hd-fg); cursor: pointer;
  font-size: 20px; line-height: 1; font-weight: 700;
}
@media (max-width: 760px) {
  /* .hd2 stays position:fixed on mobile — a position:relative here turned its
     top:var(--ec-topbar-h) into a downward shift and offset the whole shell. */
  /* Queue owns the screen; detail swaps in when a ticket is open. */
  .hd2-queue { flex: 1 1 auto; border-right: 0; }
  .hd2-detail { display: none; }
  .hd2.ticket-open .hd2-queue { display: none; }
  .hd2.ticket-open .hd2-detail { display: flex; }
  .hd2.ticket-open .hd2-mob-back { display: inline-flex; }
  /* Tighter chrome so three tiles + search fit a phone. */
  .hd2-rail { flex: 0 0 48px; }
  .hd2-qhead { padding: 14px 14px 10px; }
  .hd2-tiles { gap: 6px; }
  .hd2-tile { padding: 9px 10px 11px; border-radius: 11px; }
  .hd2-tile-num { font-size: 22px; margin-top: 7px; }
  .hd2-filters { padding: 0 14px 10px; }
  .hd2-frow, .hd2-frow2 { flex-wrap: wrap; }
  .hd2-search { min-width: 0; flex: 1 1 140px; }
  .hd2-list { padding: 0 8px 90px; }
  .hd2-lens { flex-wrap: wrap; }
  /* Ticket body: bubbles and cards fill the narrow pane. */
  .hd2 .hd2-bubble, .hd2 .hd2-note, .hd2 .hd2-sent-det { max-width: 100%; }
  .hd2-rmeta .cust { max-width: 90px; }
}

/* ── Orders + Customers: mobile master-detail ───────────────────────────── */
.ordcus-mob-back {
  display: none; align-items: center; justify-content: center;
  position: absolute; top: 10px; z-index: 40;
  width: 36px; height: 36px; border: 1px solid var(--hd-line2); border-radius: 10px;
  background: var(--hd-surf); color: var(--hd-fg); cursor: pointer;
  font-size: 20px; line-height: 1; font-weight: 700;
}
@media (max-width: 760px) {
  /* Queue owns the content column; detail swaps in on open. Scoped to these
     two shells so the shared .hd2-detail rule from Help Desk doesn't strand
     them (they have no .ticket-open toggle). */
  .ord-shell .ord-queue, .cus-shell .ord-queue {
    flex: 1 1 auto; width: 100%; border-right: 0;
  }
  .ord-shell .hd2-detail, .cus-shell .hd2-detail { display: none; }
  .ord-shell.detail-open .ord-queue, .cus-shell.detail-open .ord-queue { display: none; }
  .ord-shell.detail-open .hd2-detail, .cus-shell.detail-open .hd2-detail { display: flex; }
  .ord-shell.detail-open .ord-mob-back,
  .cus-shell.detail-open .cus-mob-back { display: inline-flex; }
  .ordcus-mob-back { left: 84px; }        /* just inside the 78px ec-rail */
  /* Order/customer detail cards + comment threads fill the narrow pane. */
  .ord-detail, .hd2-detail { min-width: 0; }
  .ord-dhead { flex-wrap: wrap; row-gap: 8px; }
  .ord-cmt-main { min-width: 0; }
}
@media (max-width: 560px) {
  .ordcus-mob-back { left: 72px; }        /* ec-rail shrinks to 66px here */
}

/* Touch devices keep :hover stuck on the last-tapped element — on the nav rail
   that painted a stray grey box on a non-active icon. Reset it where there's
   no real hover; .active styling is preserved. */
@media (hover: none) {
  .ec-rail-item:hover:not(.active) { background: transparent; color: var(--hd-fg4); }
  .ec-rail-flyout-item:hover:not(.active) { background: transparent; color: var(--hd-fg2); }
}

/* ── Sales Dashboard round 2: states, detail modals, settings ─────────── */
.sdash-click{cursor:pointer;transition:border-color .12s;}
.sdash-click:hover{border-color:rgba(var(--b2-yellow-rgb),.5);}
.sdash-proj-block.sdash-click{border:1px solid transparent;border-radius:10px;}
.sdash-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:800;letter-spacing:.02em;text-transform:none;vertical-align:middle;}
.sd-chip-green{background:rgba(76,207,122,.15);color:#4ccf7a;border:1px solid rgba(76,207,122,.5);}
.sd-chip-red{background:rgba(255,107,107,.15);color:#ff6b6b;border:1px solid rgba(255,107,107,.5);}
.sd-chip-gold{background:rgba(var(--b2-yellow-rgb),.12);color:var(--role-cta-primary);border:1px solid rgba(var(--b2-yellow-rgb),.45);}
.sdash-proj-num.sd-red{color:#ff6b6b;}
.sdash-proj-num.sd-green{color:#4ccf7a;}
/* Gauge state now lives on the arc itself (Geckoboard-style) — no card tint. */
/* Today: three states */
.sdash-today.sd-t-behind{border-color:rgba(255,107,107,.55);background:linear-gradient(180deg,rgba(255,107,107,.07),rgba(255,107,107,.02)),var(--hd-pane);}
.sdash-today.sd-t-met{border-color:rgba(76,207,122,.35);}
.sdash-today.sd-t-success{border-color:rgba(76,207,122,.75);background:linear-gradient(180deg,rgba(76,207,122,.10),rgba(76,207,122,.03)),var(--hd-pane);box-shadow:0 0 24px rgba(76,207,122,.12);}
.sd-box-good{border:1px solid rgba(76,207,122,.45);border-radius:12px;padding:10px 14px;background:rgba(76,207,122,.07);}
.sd-check{color:#4ccf7a;margin-right:8px;}
.sdash-bucket-tgt{font-size:10px;color:var(--hd-fg4);margin-top:1px;}
button.sdash-bucket{font-family:inherit;color:inherit;}
/* detail modal chrome */
.sdash-modal-wide{width:min(640px,calc(100vw - 40px));}
/* User profile editor modal */
/* ── Edit User modal (Users & Access) — design handoff, 2026-07-10 ──────────
   600px panel, sectioned form, toggle rows, Preview/HTML signature switch.
   Values per the high-fidelity handoff (panel #212324, fields #1a1b1c,
   borders #34373a, CTA #ffd60a). */
.up2-backdrop{background:rgba(8,8,9,.62);align-items:flex-start;padding:44px 20px;overflow:auto;}
.up-modal{width:600px;max-width:100%;background:#212324;border:1px solid #34373a;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);color:#f5f5f7;margin:0 auto;}
.up-hd{padding:22px 24px 18px;border-bottom:1px solid #34373a;}
.up-hd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.up-eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffd60a;}
.up-x{width:30px;height:30px;border-radius:8px;border:1px solid #34373a;background:transparent;color:#8f9294;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}
.up-x:hover{color:#fff;border-color:#4a4d50;}
.up-head{display:flex;align-items:center;gap:14px;}
.up-ava-btn{position:relative;border:0;background:transparent;padding:0;cursor:pointer;border-radius:50%;flex:0 0 auto;line-height:0;}
.up-ava-btn:focus-visible{outline:2px solid #ffd60a;outline-offset:2px;}
.up-ava-cam{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:#1a1b1c;border:1px solid #34373a;display:inline-flex;align-items:center;justify-content:center;color:#8f9294;}
.up-ava-btn:hover .up-ava-cam{color:#ffd60a;border-color:#4a4d50;}
.up-ava-btn.busy{opacity:.5;pointer-events:none;}
.up-ava{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.up-ava-fb{display:inline-flex;align-items:center;justify-content:center;color:#0e0e0f;font-weight:800;font-size:15px;}
.up-head-col{min-width:0;}
.up-head-row{display:flex;align-items:center;gap:9px;}
.up-head-name{font-size:18px;font-weight:760;color:#f5f5f7;letter-spacing:-.01em;}
.up-rolepill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;background:rgba(47,107,255,.16);color:#8fb1ff;white-space:nowrap;}
.up-head-sub{font-size:12.5px;color:#8f9294;margin-top:2px;}
.up-body{padding:20px 24px 6px;}
.up-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.up-grid-2{margin-top:16px;align-items:start;}
.up-f{min-width:0;}
.up-lab{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8f9294;margin-bottom:7px;}
.up-in{width:100%;height:40px;padding:0 13px;background:#1a1b1c;border:1px solid #34373a;border-radius:9px;color:#f5f5f7;font:inherit;font-size:13.5px;box-sizing:border-box;}
.up-in:focus{outline:none;border-color:#ffd60a;}
select.up-in{cursor:pointer;padding-right:34px;-webkit-appearance:none;appearance:none;}
.up-sel-wrap{position:relative;display:block;}
.up-sel-chev{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8f9294;display:inline-flex;}
.up-warn{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:#e0a13a;line-height:1.35;}
.up-sws{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:40px;}
.up-sw{width:22px;height:22px;border-radius:50%;flex:0 0 auto;cursor:pointer;padding:0;border:2px solid transparent;}
.up-sw.sel{border:2px solid #fff;box-shadow:0 0 0 2px #212324,0 0 0 3px var(--sw);}
.up-hex{margin-left:2px;font-size:12px;font-weight:700;color:#8f9294;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.up-sect{margin-top:22px;}
.up-card{border:1px solid #34373a;border-radius:11px;overflow:hidden;background:#1a1b1c;}
.up-tgl-row{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;}
.up-tgl-row + .up-tgl-row{border-top:1px solid #2b2e30;}
.up-tgl-txt{min-width:0;padding-right:16px;}
.up-tgl-label{font-size:13.5px;font-weight:650;color:#f5f5f7;}
.up-tgl-desc{font-size:12px;color:#8f9294;margin-top:2px;line-height:1.4;}
.up-tgl-state{display:none;}
.up-switch{position:relative;width:42px;height:24px;border-radius:999px;border:0;cursor:pointer;flex:0 0 auto;padding:0;transition:background .15s;background:#3a3d3f;}
.up-switch.on{background:#30d158;}
.up-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.4);}
.up-switch.on .up-knob{left:21px;}
.up-sig-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.up-seg{display:inline-flex;background:#1a1b1c;border:1px solid #34373a;border-radius:8px;padding:2px;gap:2px;}
.up-seg-btn{appearance:none;border:0;font:inherit;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:6px;cursor:pointer;background:transparent;color:#8f9294;}
.up-seg-btn.on{background:#34373a;color:#f5f5f7;}
.up-sig-preview{background:#f4f4f2;border:1px solid #34373a;border-radius:11px;padding:18px 20px;min-height:118px;color:#1a1a1a;overflow:auto;box-sizing:border-box;}
.up-sig-preview.empty{display:flex;align-items:center;justify-content:center;}
.up-sig-empty{font-size:12.5px;color:#71757a;}
.up-sig-ta{height:118px;padding:12px 13px;border-radius:11px;color:#c8cbcd;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;line-height:1.55;resize:vertical;}
.up-sec{margin-top:22px;padding-top:20px;border-top:1px solid #34373a;}
.up-sec-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;}
.up-pin-lab{display:block;font-size:12.5px;font-weight:650;color:#e6e6ea;margin-bottom:7px;}
.up-pin-lab span{font-weight:500;color:#8f9294;}
#upPin{letter-spacing:.06em;}
.up-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-top:1px solid #34373a;margin-top:8px;}
.up-foot-hint{font-size:11.5px;color:#71757a;max-width:230px;line-height:1.4;}
.up-foot-btns{display:flex;align-items:center;gap:10px;}
.up-btn-ghost{appearance:none;background:transparent;border:1px solid #34373a;color:#c7c7cc;font:inherit;font-size:13px;font-weight:650;padding:9px 16px;border-radius:9px;cursor:pointer;}
.up-btn-ghost:hover{color:#fff;border-color:#4a4d50;}
.up-btn-save{appearance:none;border:0;font:inherit;font-size:13px;font-weight:750;padding:9px 20px;border-radius:9px;cursor:pointer;background:#ffd60a;color:#1a1b1c;}
.up-btn-save:hover{background:#ffe14d;}
.up-btn-save:disabled{opacity:.6;cursor:default;}
.up-modal .sdash-modal-err{margin:14px 0 4px;}
@media (max-width:560px){.up-grid{grid-template-columns:1fr;}}
.sdash-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.sdash-modal-head h3{margin:0;}
.sdash-modal-x{background:0;border:0;color:#8f9294;font-size:22px;cursor:pointer;line-height:1;padding:2px 6px;}
.sdash-modal-x:hover{color:#fff;}
.sdash-dtl-sect{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8f9294;margin:16px 0 8px;}
.sdash-dtl-scroll{max-height:320px;overflow-y:auto;border:1px solid rgba(255,255,255,.09);border-radius:9px;}
.sdash-dtl-table{width:100%;border-collapse:collapse;font-size:13px;}
.sdash-dtl-table th{position:sticky;top:0;background:#26282a;text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#8f9294;padding:8px 12px;}
.sdash-dtl-table td{padding:7px 12px;border-top:1px solid rgba(255,255,255,.06);color:#d8d8dc;}
.sdash-dtl-table .r{text-align:right;}
.sdash-dtl-kv{width:100%;border-collapse:collapse;font-size:13.5px;}
.sdash-dtl-kv td{padding:7px 2px;border-bottom:1px solid rgba(255,255,255,.07);color:#d8d8dc;vertical-align:top;}
.sdash-dtl-kv td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.sdash-dtl-hint{font-size:11px;color:#8f9294;margin-top:2px;font-weight:400;}
.sdash-dtl-note{font-size:12px;color:#8f9294;margin:10px 0 0;line-height:1.5;}
/* settings modal */
.sdash-set-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.sdash-set-row4{grid-template-columns:repeat(4,1fr);}
.sdash-set-field{display:block;font-size:12px;font-weight:700;color:#b8babb;margin-bottom:12px;}
.sdash-set-field input,.sdash-set-field textarea{display:block;width:100%;margin-top:5px;background:#1c1d1e;border:1px solid #3b3e40;border-radius:8px;color:#fff;font:inherit;font-size:14px;padding:8px 10px;box-sizing:border-box;}
.sdash-set-field input:focus,.sdash-set-field textarea:focus{outline:none;border-color:var(--role-cta-primary);}
@media (max-width:700px){.sdash-set-row,.sdash-set-row4{grid-template-columns:1fr;}}

/* Line-item product thumbnail — leading identity photo. */
.ord-item-cell{display:flex;gap:12px;align-items:flex-start;}
.ord-item-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:10px;overflow:hidden;border:1px solid var(--hd-line3);background:#fff;display:flex;align-items:center;justify-content:center;cursor:zoom-in;transition:border-color .12s;}
.ord-item-thumb:hover{border-color:var(--hd-cyan);}
.ord-item-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.ord-item-thumb-empty{background:var(--hd-surf);color:var(--hd-fg4);cursor:default;}
.ord-item-thumb-empty:hover{border-color:var(--hd-line3);}
.ord-item-text{flex:1;min-width:0;}

/* Customer detail — CoreCentral account panels (terms/shipping/notes). */
.cus-flagrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.cus-shipacct{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 12px;background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:10px;margin-bottom:6px;}
.cus-shipacct-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:13px;color:var(--hd-fg);}
.cus-shipacct-freight{font-size:12px;color:var(--hd-fg2);}
.cus-shipacct-notes{font-size:12px;color:var(--hd-fg3);}
.cus-ccnotes{display:flex;flex-direction:column;gap:8px;}
.cus-ccnote{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:10px;padding:9px 13px;}
.cus-ccnote-meta{font-size:11px;color:var(--hd-fg4);margin-bottom:3px;}
.cus-ccnote-body{font-size:12.5px;color:var(--hd-fg2);line-height:1.5;}

/* Customer account file — editable sections. */
.cus-edit-btn{margin-left:8px;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg2);border-radius:8px;font-size:11px;font-weight:700;padding:2px 10px;cursor:pointer;font-family:inherit;vertical-align:middle;}
.cus-edit-btn:hover{color:var(--hd-fg);border-color:var(--hd-cyan);}
.cus-empty{font-size:12px;color:var(--hd-fg4);padding:6px 0;}
.cus-kv{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:8px;}
.cus-kv-row{display:flex;gap:8px;font-size:12.5px;}
.cus-kv-row span:first-child{color:var(--hd-fg4);font-weight:700;}
.cus-kv-row span:last-child{color:var(--hd-fg);}
.cus-form{display:flex;flex-wrap:wrap;gap:10px 14px;background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:12px;padding:14px;}
.cus-form label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--hd-fg3);flex:1;min-width:150px;}
.cus-form-wide{flex-basis:100%;}
.cus-form input,.cus-form textarea{background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:8px;color:var(--hd-fg);font:inherit;font-size:13px;font-weight:400;padding:7px 10px;}
.cus-form input:focus,.cus-form textarea:focus{outline:none;border-color:var(--hd-yellow);}
.cus-form-flags{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 16px;}
.cus-flagck{flex-direction:row;align-items:center;gap:6px;font-weight:600;color:var(--hd-fg2);min-width:0;}
.cus-form-actions{flex-basis:100%;display:flex;gap:8px;}
.cus-notecompose{display:flex;gap:8px;margin-bottom:10px;}
.cus-notecompose input{flex:1;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:10px;color:var(--hd-fg);font:inherit;font-size:13px;padding:9px 12px;}
.cus-notecompose input:focus{outline:none;border-color:var(--hd-yellow);}
.cus-x{background:0;border:0;color:var(--hd-fg4);font-size:15px;line-height:1;cursor:pointer;margin-left:auto;padding:0 2px;}
.cus-x:hover{color:var(--hd-red);}
.cus-ccnote-meta{display:flex;align-items:center;}
.cus-shipacct .cus-x{margin-left:auto;}

/* Customer Chat: header action buttons (→ ticket, close) */
.cchat-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.cchat-ticket-btn {
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(62,200,218,0.5); background: rgba(62,200,218,0.12);
  color: #6fdcea; font-size: 12px; font-weight: 600;
}
.cchat-ticket-btn:hover { background: rgba(62,200,218,0.2); }
.cchat-ticket-btn:disabled { opacity: 0.55; cursor: default; }

/* Customer Chat: convert-to-ticket modal */
.cchat-modal-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.cchat-modal { width: 100%; max-width: 460px; background: var(--hd-pane, #212324); border: 1px solid var(--hd-line2, #34373a); border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); }
.cchat-modal-title { font-size: 16px; font-weight: 800; color: var(--white); }
.cchat-modal-sub { font-size: 12.5px; color: rgba(255,255,255,0.55); margin: 6px 0 14px; line-height: 1.5; }
.cchat-modal-ta { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: var(--white); font: inherit; font-size: 13px; padding: 10px 12px; resize: vertical; }
.cchat-modal-ta:focus { outline: none; border-color: var(--yellow); }
.cchat-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cchat-modal-cancel { padding: 8px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--white); font-weight: 600; font-size: 13px; cursor: pointer; }
.cchat-modal-cancel:hover { background: rgba(255,255,255,0.07); }
.cchat-modal-create { padding: 8px 18px; border-radius: 9px; border: 0; background: var(--yellow); color: #1a1503; font-weight: 700; font-size: 13px; cursor: pointer; }
.cchat-modal-create:disabled { opacity: 0.55; cursor: default; }

/* Customer Chat ticket modal: labels + subject input */
.cchat-modal-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 12px 0 5px; }
.cchat-modal-in { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: var(--white); font: inherit; font-size: 13px; padding: 9px 12px; }
.cchat-modal-in:focus { outline: none; border-color: var(--yellow); }

/* ============================================================================
   Orders & Customers detail redesign (Claude Design handoff, 2026-07-04)
   Refined vitals/pay/proof (Orders) + hero/vitals/standards/audit (Customers).
   Rules are ordered as authored; later 'round N' blocks intentionally override
   earlier ones — do not reorder. Some base classes (.ord-info-card recolor,
   .cus-proofcard) are re-declared here to override the originals above.
   ============================================================================ */
/* ============ REFINED: order vitals strip ============ */
.ord-vitals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:16px;background:var(--hd-line3);border:1px solid var(--hd-line3);border-radius:13px;overflow:hidden;}
.ord-vital{background:var(--hd-pane);padding:11px 14px 12px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.ord-vital-lbl{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hd-fg4);}
.ord-vital-lbl svg{width:12px;height:12px;opacity:.85;}
.ord-vital-val{font-size:13.5px;font-weight:700;color:var(--hd-fg);line-height:1.2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.ord-vital-sub{font-size:11px;font-weight:600;color:var(--hd-fg3);}
/* ship-by urgency */
.ord-shipby{display:inline-flex;align-items:center;gap:6px;}
.ord-shipby .d{font-size:14px;font-weight:800;}
.ord-shipby.due-ok .d{color:var(--hd-green);}
.ord-shipby.due-soon .d{color:#f5b442;}
.ord-shipby.due-over .d{color:var(--hd-red);}
.ord-shipby .rel{font-size:10px;font-weight:800;padding:1.5px 7px;border-radius:999px;white-space:nowrap;}
.ord-shipby.due-ok .rel{background:rgba(76,207,122,.14);color:var(--hd-green);}
.ord-shipby.due-soon .rel{background:rgba(245,181,68,.16);color:#f5b442;}
.ord-shipby.due-over .rel{background:rgba(255,107,107,.16);color:var(--hd-red);}
.ord-vital.v-ship{background:linear-gradient(180deg,rgba(var(--b2-yellow-rgb),.05),transparent 70%);}
.ord-vproof-thumb{width:26px;height:26px;border-radius:6px;border:1px solid var(--hd-line);background:#0e0f10;display:inline-flex;align-items:center;justify-content:center;color:var(--hd-fg4);flex:0 0 auto;}

/* ============ REFINED: customer hero + standards + spark ============ */
.cus-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding-bottom:16px;border-bottom:1px solid var(--hd-line3);}
.cus-hero-l{min-width:0;}
.cus-hero-name{font-size:27px;font-weight:800;color:#fff;letter-spacing:-.015em;line-height:1.05;}
.cus-hero-row{display:flex;align-items:center;gap:9px;margin:7px 0 0;flex-wrap:wrap;}
.cus-hero-co{font-size:13.5px;font-weight:700;color:var(--hd-fg2);}
.cus-hero-meta{margin-top:6px;font-size:12px;color:var(--hd-fg3);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.cus-hero-meta a{color:var(--hd-cyan);text-decoration:none;}
.cus-hero-r{flex:0 0 auto;text-align:right;}
.cus-hero-ltv{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;}
.cus-hero-ltv-lbl{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--hd-fg4);margin-top:5px;}
.cus-hero-sub{font-size:12px;color:var(--hd-fg3);margin-top:6px;}
/* big trend badge */
.cus-trend{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.01em;}
.cus-trend svg{width:13px;height:13px;}
.cus-trend-up{background:rgba(76,207,122,.14);color:var(--hd-green);border:1px solid rgba(76,207,122,.34);}
.cus-trend-steady{background:rgba(62,200,218,.12);color:var(--hd-cyan);border:1px solid rgba(62,200,218,.3);}
.cus-trend-down{background:rgba(245,181,68,.14);color:#f5b442;border:1px solid rgba(245,181,68,.34);}
.cus-trend-dropped{background:rgba(255,107,107,.14);color:var(--hd-red);border:1px solid rgba(255,107,107,.34);}

/* vitals row for customer */
.cus-vitals{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;margin-top:16px;}
@media (max-width:1180px){.cus-vitals{grid-template-columns:1fr 1fr;}}
.cus-vkv span:last-child{white-space:nowrap;}
.cus-vcard{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:12px;padding:13px 15px;min-width:0;}
.cus-vcard-lbl{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg4);margin-bottom:8px;}
.cus-vcard-spark{display:flex;align-items:flex-end;gap:3px;height:34px;}
.cus-vcard-spark i{flex:1;background:linear-gradient(180deg,var(--hd-cyan),rgba(62,200,218,.35));border-radius:2px 2px 0 0;min-height:3px;}
.cus-spark-foot{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:var(--hd-fg3);}
.cus-spark-foot b{color:var(--hd-fg);font-weight:700;}
.cus-vkv{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--hd-fg2);padding:2.5px 0;}
.cus-vkv span:last-child{font-weight:700;color:var(--hd-fg);}

/* standards callout — the anti-burying card */
.cus-standards{margin-top:16px;background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:14px;border-top:3px solid var(--hd-yellow);padding:15px 17px;}
.cus-standards-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.cus-standards-head svg{width:16px;height:16px;color:var(--hd-yellow);}
.cus-standards-head .t{font-size:13px;font-weight:800;letter-spacing:.02em;color:#fff;}
.cus-standards-head .cus-edit-btn{margin-left:auto;}
.cus-stdflags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.cus-stdflag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#fff;background:rgba(var(--b2-yellow-rgb),.1);border:1px solid rgba(var(--b2-yellow-rgb),.34);border-radius:9px;padding:7px 12px;}
.cus-stdflag svg{width:14px;height:14px;color:var(--hd-yellow);flex:0 0 auto;}
.cus-stdreq{background:var(--hd-bg);border:1px solid var(--hd-line3);border-radius:10px;padding:11px 13px;margin-bottom:8px;}
.cus-stdreq .k{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-yellow);margin-bottom:4px;}
.cus-stdreq .v{font-size:12.5px;color:var(--hd-fg);line-height:1.55;}
.cus-std-terms{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:4px;}
.cus-std-terms .kv{display:flex;gap:8px;font-size:12.5px;}
.cus-std-terms .kv span:first-child{color:var(--hd-fg4);font-weight:700;}
.cus-std-terms .kv span:last-child{color:#fff;font-weight:700;}

/* ===== round 2 ===== */
/* distinct vitals band — darker inset with cyan lead so it reads as the glance strip, not another card */
.ord-vitals{background:#141517;border:1px solid var(--hd-line2);box-shadow:inset 3px 0 0 var(--hd-cyan);}
.ord-vital{background:#141517;}
.ord-vital.v-ship{background:linear-gradient(180deg,rgba(var(--b2-yellow-rgb),.06),transparent 70%);}
/* payment pots */
.ord-pay-pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;line-height:1.15;}
.ord-pay-pill svg{width:16px;height:16px;flex:0 0 auto;}
.ord-pay-good{color:var(--hd-green);}
.ord-pay-await{color:var(--hd-red);}
.ord-pay-sub{font-size:11px;font-weight:600;color:var(--hd-fg3);margin-top:2px;}
.ord-paybar{margin-top:8px;}
.ord-paynote{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.32);border-radius:10px;padding:9px 12px;font-size:12px;color:#ffcfcf;line-height:1.5;}
.ord-paynote .lbl{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-red);margin-bottom:4px;}
.ord-paynote .lbl svg{width:12px;height:12px;}
.ord-paynote .lbl button{margin-left:auto;background:0;border:0;color:var(--hd-fg3);font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;}
.ord-paynote .lbl button:hover{color:#fff;}
.ord-paynote-add{display:inline-flex;align-items:center;gap:6px;background:rgba(255,107,107,.1);border:1px dashed rgba(255,107,107,.42);color:var(--hd-red);border-radius:9px;font-size:11.5px;font-weight:700;padding:7px 12px;cursor:pointer;font-family:inherit;}
.ord-paynote-add:hover{background:rgba(255,107,107,.16);}
.ord-paynote-form{display:flex;gap:7px;}
.ord-paynote-form input{flex:1;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font:inherit;font-size:12.5px;padding:8px 11px;}
.ord-paynote-form input:focus{outline:none;border-color:var(--hd-red);}
.ord-paynote-form button{background:var(--hd-red);border:0;color:#3a0d0d;font-weight:800;font-size:12px;border-radius:9px;padding:0 14px;cursor:pointer;font-family:inherit;}

/* standards — 3 groups */
.cus-std-group{margin-bottom:14px;}
.cus-std-group:last-child{margin-bottom:0;}
.cus-std-grouphead{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg3);margin-bottom:9px;padding-bottom:7px;border-bottom:1px solid var(--hd-line3);}
.cus-std-grouphead svg{width:14px;height:14px;color:var(--hd-yellow);flex:0 0 auto;}
.cus-std-kv{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.cus-std-kvrow{display:flex;gap:12px;font-size:12.5px;}
.cus-std-kvrow .k{color:var(--hd-fg4);font-weight:700;min-width:112px;flex:0 0 auto;}
.cus-std-kvrow .v{color:#fff;}
.cus-attach-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.cus-attach-chip{display:inline-flex;align-items:center;gap:8px;background:var(--hd-bg);border:1px solid var(--hd-line3);border-radius:9px;padding:6px 12px 6px 7px;font-size:12px;color:var(--hd-fg2);}
.cus-attach-chip .doc{width:26px;height:26px;border-radius:6px;background:#0e0f10;display:inline-flex;align-items:center;justify-content:center;color:var(--hd-cyan);font-size:8px;font-weight:800;flex:0 0 auto;}
.cus-attach-add{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px dashed var(--hd-line);color:var(--hd-fg3);border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
.cus-attach-add:hover{color:var(--hd-cyan);border-color:var(--hd-cyan);}

/* (The mockup's wrapping "past proofs deck" CSS is intentionally omitted —
   the shipped single-line horizontal strip + nav arrows lives above at
   .cus-proofstrip / .cus-proofdeck and clicking a stack opens the proofs
   modal, per Brennan's follow-up.) */

/* compact notes */
.cus-ccnote{padding:8px 12px;}
.cus-ccnote-meta{font-size:10.5px;margin-bottom:2px;}
.cus-ccnote-body{font-size:12px;line-height:1.45;}
.cus-notecompose input{padding:8px 11px;}
.cus-notes-more{margin-top:8px;background:0;border:0;color:var(--hd-cyan);font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:0;}

/* account editable + audit */
.cus-vcard-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.cus-vcard-hd .cus-vcard-lbl{margin-bottom:0;}
.cus-vcard-edit{background:transparent;border:0;color:var(--hd-fg4);cursor:pointer;padding:1px;display:inline-flex;}
.cus-vcard-edit svg{width:13px;height:13px;}
.cus-vcard-edit:hover{color:var(--hd-cyan);}
.cus-acct-form{display:flex;flex-direction:column;gap:8px;}
.cus-acct-form label{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--hd-fg4);display:flex;flex-direction:column;gap:3px;}
.cus-acct-form input{background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:7px;color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:6px 9px;}
.cus-acct-form input:focus{outline:none;border-color:var(--hd-yellow);}
.cus-acct-formbtns{display:flex;gap:6px;margin-top:3px;}
.cus-auditlink{margin-top:10px;display:inline-flex;align-items:center;gap:5px;background:0;border:0;color:var(--hd-fg3);font-size:10.5px;font-weight:700;cursor:pointer;padding:0;font-family:inherit;}
.cus-auditlink svg{width:12px;height:12px;}
.cus-auditlink:hover{color:var(--hd-cyan);}
.cus-audit{margin-top:10px;border-top:1px solid var(--hd-line3);padding-top:10px;display:flex;flex-direction:column;gap:9px;}
.cus-audit-row{font-size:11px;line-height:1.45;}
.cus-audit-row .top{color:#fff;font-weight:700;}
.cus-audit-row .chg{color:var(--hd-fg2);}
.cus-audit-row .chg .to{color:var(--hd-green);font-weight:700;}
.cus-audit-row .who{color:var(--hd-fg4);}

/* ===== round 3: standards 3-up cards + modal ===== */
.cus-std3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:720px){.cus-std3{grid-template-columns:1fr;}}
.cus-std3card{text-align:left;background:var(--hd-bg);border:1px solid var(--hd-line3);border-radius:12px;padding:13px 14px;cursor:pointer;color:var(--hd-fg);font-family:inherit;transition:border-color .12s,transform .12s;display:flex;flex-direction:column;gap:9px;min-height:126px;}
.cus-std3card:hover{border-color:var(--hd-yellow);transform:translateY(-2px);}
.cus-std3card-hd{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;}
.cus-std3card-hd svg{width:15px;height:15px;color:var(--hd-yellow);flex:0 0 auto;}
.cus-std3card-sum{flex:1;font-size:12px;color:var(--hd-fg2);line-height:1.5;overflow:hidden;}
.cus-std3card-sum .muted{color:var(--hd-fg4);}
.cus-std3card-foot{font-size:11px;font-weight:700;color:var(--hd-cyan);display:flex;align-items:center;gap:4px;}
.cus-std3card-foot svg{opacity:.9;}
.cus-std3chips{display:flex;flex-wrap:wrap;gap:5px;}
.cus-std3chip{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:7px;background:rgba(var(--b2-yellow-rgb),.1);color:var(--hd-yellow);border:1px solid rgba(var(--b2-yellow-rgb),.3);}
/* modal */
.ec-modal-ov{position:fixed;inset:0;background:rgba(18,19,20,.74);display:flex;align-items:flex-start;justify-content:center;padding:64px 24px;z-index:300;animation:ecModalIn .16s ease;}
@keyframes ecModalIn{from{opacity:0}to{opacity:1}}
.ec-modal{background:#1c1d1e;border:1px solid var(--hd-line);border-radius:16px;max-width:580px;width:100%;max-height:calc(100% - 128px);overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.6);}
.ec-modal-hd{display:flex;align-items:center;gap:9px;padding:16px 20px;border-bottom:1px solid var(--hd-line3);position:sticky;top:0;background:#1c1d1e;z-index:2;}
.ec-modal-hd svg{width:17px;height:17px;color:var(--hd-yellow);flex:0 0 auto;}
.ec-modal-hd .t{font-size:14px;font-weight:800;color:#fff;}
.ec-modal-x{margin-left:auto;background:0;border:0;color:var(--hd-fg3);cursor:pointer;font-size:22px;line-height:1;padding:0 2px;}
.ec-modal-x:hover{color:#fff;}
.ec-modal-body{padding:16px 20px 20px;}

/* ===== round 4: yellow vitals + editable modals ===== */
.ord-vitals{background:linear-gradient(180deg,rgba(var(--b2-yellow-rgb),.11),rgba(var(--b2-yellow-rgb),.03));border:1px solid rgba(var(--b2-yellow-rgb),.30);box-shadow:inset 3px 0 0 var(--hd-yellow);gap:0;}
.ord-vital{background:transparent;border-right:1px solid rgba(var(--b2-yellow-rgb),.15);}
.ord-vital:last-child{border-right:0;}
.ord-vital.v-ship{background:transparent;}
.ord-vital-lbl{color:#cdb768;}
.ord-vital-lbl svg{color:#cdb768;opacity:.95;}
.ec-modal-edit{margin-left:auto;display:inline-flex;align-items:center;gap:5px;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg2);border-radius:8px;font-size:11px;font-weight:700;padding:4px 11px;cursor:pointer;font-family:inherit;}
.ec-modal-edit:hover{color:#fff;border-color:var(--hd-yellow);}
.ec-modal-edit svg{opacity:.9;}
.cus-acct-form textarea{background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:7px;color:#fff;font:inherit;font-size:12.5px;font-weight:400;padding:7px 9px;resize:vertical;min-height:54px;line-height:1.45;}
.cus-acct-form textarea:focus{outline:none;border-color:var(--hd-yellow);}
.cus-ck{flex-direction:row!important;align-items:center;gap:9px;font-size:12.5px!important;font-weight:600!important;color:var(--hd-fg2)!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer;}
.cus-ck input{width:16px;height:16px;accent-color:var(--hd-yellow);flex:0 0 auto;}
.cus-modal-audit{margin-top:16px;border-top:1px solid var(--hd-line3);padding-top:12px;}
.cus-modal-audit .h{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg4);margin-bottom:9px;}

/* ===== round 5: proof-status caricature + proof modal ===== */
.ord-vital.v-proof .ord-vital-val{display:block;}
.ord-proofmini{display:block;width:100%;text-align:left;cursor:pointer;background:#fff;border:1px solid rgba(var(--b2-yellow-rgb),.6);border-radius:8px;padding:0;overflow:hidden;font-family:inherit;transition:transform .12s,box-shadow .12s;box-shadow:0 2px 8px rgba(0,0,0,.28);}
.ord-proofmini:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.36);}
.ord-proofmini-hd{display:flex;align-items:center;gap:5px;padding:4px 6px;border-bottom:2px solid var(--hd-yellow);}
.ord-proofmini-e{width:14px;height:14px;border-radius:3px;background:#1c1d1e;color:var(--hd-yellow);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ord-proofmini-ord{font-size:8px;font-weight:800;color:#1c1d1e;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ord-proofmini-tag{margin-left:auto;font-size:7px;font-weight:800;color:#0b6b78;background:rgba(17,153,171,.16);padding:1px 5px;border-radius:3px;flex:0 0 auto;}
.ord-proofmini-body{position:relative;padding:11px 8px 15px;display:flex;align-items:center;justify-content:center;min-height:42px;}
.ord-proofmini-status{font-size:11px;font-weight:800;text-align:center;line-height:1.15;padding:4px 9px;border-radius:6px;max-width:100%;}
.ord-proofmini-cable{position:absolute;left:8px;right:8px;bottom:6px;height:2px;background:#1c1d1e;border-radius:2px;}
.ord-proofmini-cable::before{content:"";position:absolute;left:0;top:-3px;width:13px;height:8px;border-radius:2px;background:#2a2c2d;}
.ord-proofmini-cable::after{content:"";position:absolute;right:0;top:-2px;width:9px;height:6px;border-radius:2px;background:#8f9294;}
/* proof modal sheets */
.ord-proofsheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:600px){.ord-proofsheet-grid{grid-template-columns:1fr;}}
.ord-proofsheet{background:#fff;border-radius:10px;overflow:hidden;border:1px solid #e2e3e5;box-shadow:0 2px 8px rgba(0,0,0,.3);color:#1c1d1e;}
.ord-proofsheet .ps-hd{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:2px solid var(--hd-yellow);}
.ps-e{width:16px;height:16px;border-radius:4px;background:#1c1d1e;color:var(--hd-yellow);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.ps-ord{font-size:9px;font-weight:800;letter-spacing:.03em;color:#1c1d1e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-body{padding:16px 12px;text-align:center;min-height:78px;}
.ps-sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:800;color:#1c1d1e;}
.ps-label{margin-top:7px;display:inline-block;max-width:100%;background:#1c1d1e;color:#fff;font-size:11px;font-weight:800;padding:3px 11px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ps-cable{margin:16px 4px 0;height:2px;background:#1c1d1e;position:relative;border-radius:2px;}
.ps-cable::before{content:"";position:absolute;left:0;top:-4px;width:16px;height:9px;border-radius:2px;background:#2a2c2d;}
.ps-ft{display:flex;justify-content:space-between;padding:6px 11px;border-top:1px solid #eee;font-size:9.5px;font-weight:800;color:#0b6b78;}

/* ===== round 6: status-colored vitals tiles ===== */
.ord-vitals{background:none!important;border:0!important;box-shadow:none!important;gap:8px!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important;}
.ord-vital{border-right:0!important;border:1px solid var(--hd-line3);border-radius:12px;background:var(--hd-surf);padding:12px 14px;}
.ord-vital-lbl{color:inherit!important;opacity:.72;}
.ord-vital-lbl svg{color:inherit!important;opacity:.9;}
.ord-vital.tone-good{background:rgba(76,207,122,.13);border-color:rgba(76,207,122,.34);color:var(--hd-green);}
.ord-vital.tone-warn{background:rgba(245,181,68,.14);border-color:rgba(245,181,68,.36);color:#f5b442;}
.ord-vital.tone-bad{background:rgba(255,107,107,.13);border-color:rgba(255,107,107,.34);color:var(--hd-red);}
.ord-vital.tone-info{background:rgba(62,200,218,.12);border-color:rgba(62,200,218,.32);color:var(--hd-cyan);}
.ord-vital.tone-flow{background:rgba(168,108,255,.13);border-color:rgba(168,108,255,.32);color:var(--hd-purple);}
.ord-vital.v-proof{background:transparent!important;border:0!important;padding:5px!important;}
.ord-vital-status{font-size:15px;font-weight:800;line-height:1.18;display:flex;align-items:center;gap:7px;color:inherit;}
.ord-vital-status .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.07);}
/* on colored tiles the ship/pay values inherit; drop their own tinted pill bg so it's not doubled */
.ord-vital .ord-shipby .d{font-size:15px;color:inherit;}
.ord-vital .ord-shipby .rel{background:rgba(0,0,0,.16);color:inherit;}
.ord-vital .ord-pay-pill{color:inherit;}
.ord-vital .ord-pay-sub{color:inherit;opacity:.72;}

/* ===== round 7: bigger proof mini, degray info cards ===== */
.ord-vital.v-proof{padding:0!important;}
.ord-proofmini{height:100%;display:flex;flex-direction:column;}
.ord-proofmini-hd{padding:5px 9px;}
.ord-proofmini-e{width:15px;height:15px;font-size:9.5px;}
.ord-proofmini-ord{font-size:9px;}
.ord-proofmini-tag{font-size:7.5px;padding:1px 6px;}
.ord-proofmini-body{flex:1;min-height:56px;padding:14px 8px 18px;}
.ord-proofmini-status{font-size:12.5px;padding:5px 12px;}
/* Option A: totals stays yellow, the rest go neutral gray */
.ord-card-billing,.ord-card-shipping,.ord-card-shipments{border-top-color:var(--hd-line3)!important;}
.ord-ch-billing,.ord-ch-shipping,.ord-ch-shipments{color:var(--hd-fg3)!important;}

/* Customer Chat: availability gear + control */
.cchat-gear { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: var(--white); font-size: 16px; cursor: pointer; }
.cchat-gear:hover { background: rgba(255,255,255,0.1); }
.cchat-top { display: flex; align-items: center; gap: 12px; }
.cchat-av-modes { display: flex; gap: 6px; }
.cchat-av-mode { flex: 1; padding: 8px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: var(--white); font-weight: 600; font-size: 13px; cursor: pointer; }
.cchat-av-mode.on { background: var(--yellow); border-color: var(--yellow); color: #1a1503; }
.cchat-av-modehint { font-size: 12px; color: rgba(255,255,255,0.5); margin: 8px 0 4px; min-height: 16px; }
.cchat-av-hours { margin-top: 8px; transition: opacity .15s; }
.cchat-av-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--white); margin-bottom: 10px; }
.cchat-av-days { display: flex; gap: 4px; margin-bottom: 10px; }
.cchat-av-day { flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.6); font-size: 11px; font-weight: 700; cursor: pointer; }
.cchat-av-day.on { background: rgba(var(--b2-yellow-rgb),0.18); border-color: var(--yellow); color: var(--yellow); }
.cchat-av-times { display: flex; gap: 14px; }
.cchat-av-times label { font-size: 12px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.cchat-av-times input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: var(--white); padding: 5px 8px; font: inherit; font-size: 12px; }

/* ── Sales Dashboard settings: nightly email controls ─────────────────── */
.sdash-set-check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#d8d8dc;margin-bottom:12px;cursor:pointer;}
.sdash-set-check input{width:16px;height:16px;accent-color:var(--role-cta-primary);}
.sdash-set-field select{display:block;width:100%;margin-top:5px;background:#1c1d1e;border:1px solid #3b3e40;border-radius:8px;color:#fff;font:inherit;font-size:14px;padding:8px 10px;box-sizing:border-box;}
.sdash-set-sendrow{display:flex;align-items:center;gap:12px;margin:6px 0 4px;}
.sdash-set-sendmsg{font-size:12.5px;color:#8f9294;}
.sdash-set-sendmsg.ok{color:#4ccf7a;}
.sdash-set-sendmsg.err{color:#ff6b6b;}

/* Customer detail — Top categories (by spend) bars. */
.cus-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 26px;}
.cus-cat{min-width:0;}
.cus-cat-top{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-bottom:5px;align-items:baseline;}
.cus-cat-name{font-weight:700;color:var(--hd-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cus-cat-rev{font-weight:800;color:var(--hd-fg);white-space:nowrap;}
.cus-cat-bar{height:8px;border-radius:999px;background:var(--hd-surf2);overflow:hidden;}
.cus-cat-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--hd-cyan),rgba(62,200,218,.45));}
.cus-cat-sub{font-size:11px;color:var(--hd-fg4);margin-top:4px;}

/* Comment-thread follow bell (email notifications: all replies vs mentions-only). */
.cmt-subbell{display:inline-flex;align-items:center;gap:5px;margin-left:10px;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg3);border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.01em;text-transform:none;padding:2.5px 10px;cursor:pointer;font-family:inherit;vertical-align:middle;transition:color .12s,border-color .12s,background .12s;}
.cmt-subbell:hover{color:var(--hd-fg);border-color:var(--hd-cyan);}
.cmt-subbell.on{background:rgba(62,200,218,0.12);color:var(--hd-cyan);border-color:rgba(62,200,218,0.32);}

/* Ghost orders (BC Incomplete/Pending — checkout never went through). The row
   is amber-washed with a warning stripe; the detail pane leads with a banner. */
.ord-row-ghost{background:rgba(245,181,68,0.07);box-shadow:inset 3px 0 0 #f5b442;}
.ord-row-ghost:hover{background:rgba(245,181,68,0.12);}
.ord-row-ghost.sel{background:rgba(245,181,68,0.16);}
.ord-row-ghost .ord-num,.ord-row-ghost .ord-row-who{color:var(--hd-fg3);}
.ord-ghost-banner{display:flex;gap:11px;align-items:flex-start;background:rgba(245,181,68,0.13);border:1px solid rgba(245,181,68,0.4);border-left:4px solid #f5b442;border-radius:12px;padding:12px 15px;margin-bottom:16px;font-size:13px;color:var(--hd-fg);line-height:1.5;}
.ord-ghost-banner svg{flex:0 0 auto;color:#f5b442;margin-top:1px;}
.ord-ghost-banner b{color:#f5b442;}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM CHAT — rail-docked panel (Option A "Roster" redesign)

   A fixed layer on <body> (survives every render()), for EVERY logged-in user.
   The panel is a full-height drawer docked to the nav rail, in the app's own
   dark/yellow language (not the old blue "Messages Widget"). The launcher is a
   real rail item at the foot of the ec-rail with a yellow unread badge; the E
   logo sits below it. Views: inbox (roster-first, Pinned/Channels/DMs sections
   with an Active-now strip), an in-panel New Message picker, and the conversation
   view (feed + inline composer). Modals/popovers/toasts keep the --wg-* tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
.tchat-layer {
  position: fixed; inset: 0; z-index: 4000; pointer-events: none;
}
/* Design tokens. Defined on the layer AND on the chat surfaces that live
   outside .tchat-layer in the DOM (.tchat-pop popovers + .tchat-modal-ov
   modals) — without this they'd inherit nothing and var(--wg-*) would resolve
   transparent (the emoji picker showed the panel text bleeding through). The
   --wg-* set is now the dark/yellow palette (accent moved blue → yellow). */
.tchat-layer, .tchat-pop, .tchat-modal-ov {
  /* Accent: the app's yellow. */
  --chat-accent: var(--role-cta-primary);
  --chat-accent-hover: #ffe066;
  --chat-accent-active: #e6c133;
  --chat-accent-fg: #1c1d1e;
  /* Surfaces (dark). */
  --wg-bg: #212324;         /* panel */
  --wg-page: #1c1d1e;       /* feed / inputs */
  --wg-header: #262829;     /* raised chips / bubbles */
  --wg-raised: #262829;
  --wg-divider: #34373a;
  --wg-text: #ffffff;
  --wg-text-2: #8f9294;
  --wg-text-3: #6f7274;
  /* Presence dots. */
  --dot-online: #4ccf7a;
  --dot-away: var(--role-cta-primary);
  --dot-offline: #6f7274;
  --chat-unread: var(--role-cta-primary);
  --wg-radius: 0;
  --chat-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
}
.tchat-layer > * { pointer-events: auto; }
/* Hidden entirely while the login overlay is up. */
body:has(#loginOverlay) .tchat-layer { display: none; }

/* ── Rail launcher + unread badge ──────────────────────────────────────────
   The launcher is a real .ec-rail-item (icon + "Chat" label), pinned to the
   rail foot via the base .ec-rail-item's flow; the .tchat-rail-item modifier
   just adds margin-top:auto + relative positioning for the badge. The E logo
   follows it — the +sibling rule overrides its default margin-top:auto so it
   sits 8px below the chat item instead of fighting for the bottom. */
.tchat-rail-item { position: relative; margin-top: auto; overflow: visible; }
.tchat-rail-item.active { background: rgba(var(--b2-yellow-rgb), 0.13); color: var(--role-cta-primary); }
/* Chat is an overlay, not a page — no "current page" bar (per the handoff). */
.tchat-rail-item.active::before { display: none; }
.tchat-rail-item + .ec-rail-logo { margin-top: 8px; }
.tchat-rail-badge {
  position: absolute; top: 2px; right: 6px;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--role-cta-primary); color: #1c1d1e; font-weight: 800; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #1a1b1c;
}

/* ── Panel shell — full-height drawer docked to the rail ───────────────── */
.tchat-panel {
  position: fixed; left: 79px; top: var(--ec-topbar-h, 53px); bottom: 0; right: auto;
  z-index: 5001; width: 412px; height: auto;
  background: #212324; border-right: 1px solid #3b3e40; border-radius: 0;
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; overflow: hidden;
  color: #fff; font-family: inherit;
  opacity: 0; transform: translateX(-26px);
  transition: opacity 260ms var(--chat-ease), transform 260ms var(--chat-ease);
}
.tchat-panel-in { opacity: 1; transform: translateX(0); }

/* ── Draggable panel (REQ-URSNR) — drag any header bar to lift the docked
   drawer into a free-floating, viewport-clamped window; double-click a header
   to re-dock. Position is remembered in localStorage. Desktop only (the panel
   is full-bleed at ≤480px, where dragging is disabled). ─────────────────── */
@media (min-width: 481px) {
  .tchat-panel .tchat-inbox-head,
  .tchat-panel .tchat-conv-head,
  .tchat-panel .tchat-view-head { cursor: grab; }
  .tchat-panel--dragging .tchat-inbox-head,
  .tchat-panel--dragging .tchat-conv-head,
  .tchat-panel--dragging .tchat-view-head { cursor: grabbing; }
}
.tchat-panel--float {
  border: 1px solid #3b3e40;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.tchat-panel--dragging { transition: none !important; user-select: none; }

/* ── Inbox header (eyebrow + title + new/close) ────────────────────────── */
.tchat-inbox-head { flex: none; padding: 18px 20px 0; }
.tchat-eyebrow {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #3ec8da; font-weight: 700; margin-bottom: 6px;
}
.tchat-inbox-head-row { display: flex; align-items: center; gap: 10px; }
.tchat-inbox-title {
  margin: 0; font-size: 27px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1; flex: 1; color: #fff;
}
.tchat-new-btn {
  flex: none; width: 36px; height: 36px; border: none; border-radius: 11px;
  background: var(--role-cta-primary); color: #1c1d1e; cursor: pointer; display: grid; place-items: center;
  font-family: inherit; transition: background 140ms, transform 100ms;
}
.tchat-new-btn:hover { background: #ffe066; }
.tchat-new-btn:active { background: #e6c133; transform: translateY(1px); }
.tchat-close-btn {
  flex: none; width: 36px; height: 36px; border: 1px solid #34373a; border-radius: 11px;
  background: transparent; color: #8f9294; cursor: pointer; display: grid; place-items: center;
  font-family: inherit; transition: background 140ms, color 140ms;
}
.tchat-close-btn:hover { background: #303334; color: #fff; }
/* "Report a bug" — outlined like Close, sits between New message and Close. */
.tchat-bug-btn {
  flex: none; width: 36px; height: 36px; border: 1px solid #34373a; border-radius: 11px;
  background: transparent; color: #8f9294; cursor: pointer; display: grid; place-items: center;
  font-family: inherit; transition: background 140ms, color 140ms;
}
.tchat-bug-btn:hover { background: #303334; color: #fff; }

/* ── "Active now" strip ────────────────────────────────────────────────── */
.tchat-active-strip { flex: none; padding: 16px 20px 0; }
.tchat-active-label {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #7f8284; font-weight: 700; margin-bottom: 9px;
}
.tchat-active-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.tchat-active-user {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 56px; flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  padding: 4px 0; border-radius: 10px; font-family: inherit; transition: background 130ms;
}
.tchat-active-user:hover { background: #282a2b; }
.tchat-active-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.tchat-active-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--chat-accent); color: #1c1d1e; font-weight: 800; font-size: 14px;
  object-fit: cover; user-select: none;
}
/* NOTE: _tchatAvatar puts the base class AND -fallback on the SAME element
   (initials span), with an <img> sibling only when a photo exists — so the
   fallback selector must not override the base sizing/radius. */
.tchat-active-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; }
.tchat-active-avatar-wrap .tchat-dot { width: 11px; height: 11px; border-width: 2.5px; }
.tchat-active-name {
  font-size: 10.5px; font-weight: 600; color: #b8babb; max-width: 56px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Search (inbox + new message) ──────────────────────────────────────── */
.tchat-search-wrap { flex: none; padding: 10px 20px 4px; position: relative; }
.tchat-search-wrap-new { padding: 12px 16px 4px; }
.tchat-search-icon { position: absolute; left: 31px; top: 20px; color: #7f8284; pointer-events: none; }
.tchat-search-wrap-new .tchat-search-icon { left: 27px; top: 22px; }
.tchat-search {
  width: 100%; height: 34px; box-sizing: border-box; padding: 0 12px 0 32px;
  background: #1c1d1e; border: 1px solid #34373a; border-radius: 10px;
  color: #fff; font-family: inherit; font-size: 13px; outline: 0;
  transition: border-color 130ms;
}
.tchat-search::placeholder { color: #7f8284; }
.tchat-search:focus { border-color: var(--role-cta-primary); }

/* ── View header (New message / back rows) ─────────────────────────────── */
.tchat-view-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #34373a;
}
.tchat-view-title { font-size: 16px; font-weight: 700; color: #fff; }
.tchat-back-btn {
  flex: none; width: 32px; height: 32px; border: 0; background: transparent;
  color: #8f9294; border-radius: 9px; display: grid; place-items: center;
  cursor: pointer; font-family: inherit; transition: background 130ms, color 130ms;
}
.tchat-back-btn:hover { background: #303334; color: #fff; }

/* ── Footer disclaimer ─────────────────────────────────────────────────── */
.tchat-footer {
  flex: none; text-align: center; color: #6f7274;
  font-size: 11px; line-height: 1.35; padding: 8px 20px 12px;
  border-top: 1px solid #303334;
}

/* ── Avatars ───────────────────────────────────────────────────────────── */
.tchat-avatar-wrap, .tchat-msg-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.tchat-avatar, .tchat-msg-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; overflow: hidden; background: var(--chat-accent); color: #1c1d1e;
  font-weight: 800; letter-spacing: -0.01em; user-select: none; object-fit: cover;
}
.tchat-avatar { width: 38px; height: 38px; font-size: 13px; }
.tchat-msg-avatar { width: 26px; height: 26px; font-size: 10.5px; }
/* Same-element fallback (see note above) — no sizing overrides here. */
.tchat-avatar-fallback, .tchat-msg-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
}
/* Group tile: a rounded-square # in the yellow-tint language. */
.tchat-avatar-group { border-radius: 11px; background: rgba(var(--b2-yellow-rgb), 0.12); color: var(--role-cta-primary); font-size: 16px; }
.tchat-avatar-wrap:has(.tchat-avatar-group) { border-radius: 11px; }
/* Bug Bot tile: a robot glyph on a distinct teal so it reads as "not a person". */
.tchat-avatar-bot { background: #177e89; color: #fff; }
.tchat-dot {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 999px; border: 2.5px solid #212324; box-sizing: border-box;
}
/* Presence dots. Active (green) / Away (yellow, preserved) / Offline (hollow
   grey ring). Legacy in_chat kept as a green alias for safety. */
.tchat-dot-active, .tchat-dot-in_chat { background: var(--dot-online); }
.tchat-dot-away { background: var(--dot-away); }
.tchat-dot-offline { background: transparent; box-shadow: inset 0 0 0 2px var(--dot-offline); }

/* ── Inbox list (Pinned / Channels / Direct messages) ──────────────────── */
.tchat-rooms { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.tchat-rooms-list { padding: 6px 12px 16px; }
.tchat-rooms::-webkit-scrollbar,
.tchat-feed::-webkit-scrollbar,
.tchat-picker-list::-webkit-scrollbar { width: 9px; }
.tchat-rooms::-webkit-scrollbar-thumb,
.tchat-feed::-webkit-scrollbar-thumb,
.tchat-picker-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
.tchat-rooms::-webkit-scrollbar-thumb:hover,
.tchat-feed::-webkit-scrollbar-thumb:hover,
.tchat-picker-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18); background-clip: padding-box;
}
.tchat-section-label {
  padding: 14px 10px 6px; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #7f8284; font-weight: 700;
}
.tchat-section-label.tchat-section-first { padding-top: 10px; }
.tchat-room {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 10px; border: none; background: transparent; border-radius: 12px;
  cursor: pointer; text-align: left; transition: background 130ms; font: inherit; color: inherit;
}
.tchat-room:hover { background: #282a2b; }
.tchat-room-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.tchat-room-top { display: flex; align-items: baseline; gap: 8px; }
.tchat-room-name {
  font-weight: 600; font-size: 13.5px; color: #e6e7e8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.tchat-room.has-unread .tchat-room-name { font-weight: 700; color: #fff; }
.tchat-room-star { flex: none; color: var(--role-cta-primary); }
.tchat-room-time { font-size: 11px; color: #7f8284; font-weight: 600; margin-left: auto; flex: none; }
.tchat-room-preview { font-size: 12px; color: #8f9294; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchat-room-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--role-cta-primary); color: #1c1d1e; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.tchat-empty { padding: 28px 22px; text-align: center; color: var(--wg-text-3); font-size: 14px; line-height: 1.5; }
.tchat-empty strong { color: var(--wg-text-2); }

/* ── New Message picker (in-panel roster) ──────────────────────────────── */
.tchat-picker-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 12px 12px; }
.tchat-picker-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px;
  border: none; background: transparent; border-radius: 12px;
  cursor: pointer; text-align: left; transition: background 130ms; font: inherit; color: inherit;
}
.tchat-picker-row:hover { background: #282a2b; }
.tchat-picker-name { font-weight: 600; font-size: 14px; color: #fff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-picker-status { font-size: 12px; font-weight: 600; flex: none; }
.tchat-picker-status-active { color: #4ccf7a; }
.tchat-picker-status-away { color: var(--role-cta-primary); }
.tchat-picker-status-offline { color: #7f8284; }
.tchat-picker-foot { padding: 14px 10px 4px; font-size: 11.5px; color: #6f7274; text-align: center; }
.tchat-picker-foot-btn { display: block; width: 100%; border: 0; background: transparent; color: var(--role-cta-primary); cursor: pointer; font-family: inherit; }
.tchat-picker-foot-btn:hover { text-decoration: underline; }
.tchat-picker-check { cursor: pointer; }
/* The native checkbox stays in the DOM for keyboard/screen-reader semantics
   but is visually replaced by the .tchat-check-ind ring on the row's right
   (the big white squares read as another app entirely). */
.tchat-picker-check input[type=checkbox] {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.tchat-check-ind {
  margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--wg-divider); display: inline-flex; align-items: center;
  justify-content: center; font-size: 12px; font-weight: 800; color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.tchat-picker-check input:checked ~ .tchat-check-ind {
  background: var(--chat-accent); border-color: var(--chat-accent); color: #fff;
}
.tchat-check-ind::before { content: '✓'; line-height: 1; }
.tchat-picker-check:has(input:checked) { background: rgba(var(--b2-yellow-rgb), 0.10); border-radius: 12px; }
.tchat-picker-check input:focus-visible ~ .tchat-check-ind { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.tchat-member-rm {
  flex: none; border: 1px solid var(--wg-divider); background: transparent; color: #ff8077;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 9px; cursor: pointer; font-family: inherit;
}
.tchat-member-rm:hover { background: rgba(255, 59, 48, 0.14); border-color: rgba(255, 59, 48, 0.4); }

/* ── Message thread ────────────────────────────────────────────────────── */
.tchat-feed {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; background: #1c1d1e;
  display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 10px;
}
.tchat-load-earlier {
  align-self: center; margin: 2px 0; height: 28px; padding: 0 14px; border-radius: 999px;
  border: 1px solid #34373a; background: #262829; color: #8f9294;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.tchat-load-earlier:hover { color: #fff; }
.tchat-typing-strip { flex: none; padding: 4px 18px 0; font-size: 12px; color: var(--wg-text-2); font-style: italic; }

/* Day divider */
.tchat-day { display: flex; align-items: center; gap: 14px; color: #8f9294; margin: 2px 0; }
.tchat-day::before, .tchat-day::after { content: ""; flex: 1; height: 1px; background: #303334; }
.tchat-day span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: #262829; color: #8f9294; padding: 4px 12px; border-radius: 999px;
}

/* Message block — avatar + name + time on top, body below. No bubble bg. */
.tchat-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 84%; }
.tchat-row.me { align-self: flex-end; align-items: flex-end; }
.tchat-msg-meta { display: flex; align-items: center; gap: 8px; }
.tchat-msg-meta-avatar { flex: none; }
.tchat-msg-author { font-weight: 700; font-size: 13px; color: #fff; }
.tchat-msg-time { font-size: 11px; color: #7f8284; font-weight: 600; }
.tchat-msg-bubble-wrap { position: relative; max-width: 100%; }
.tchat-msg-bubble-wrap > .tchat-image-embed:first-child,
.tchat-msg-bubble-wrap > .tchat-file-embed:first-child { margin-top: 0; }
.tchat-msg {
  font-size: 14px; line-height: 1.5; color: #e6e7e8; margin: 0;
  text-align: left; white-space: pre-wrap; word-break: break-word;
}
.tchat-row.me .tchat-msg { text-align: right; }
.tchat-msg strong { font-weight: 800; }
.tchat-msg em { font-style: italic; }
.tchat-code {
  display: inline; padding: 1px 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
}
.tchat-chip {
  display: inline-flex; align-items: baseline; padding: 0 6px; margin: 0 1px;
  border: 0; border-radius: 6px; font-family: inherit; font-size: 12px; font-weight: 700;
  line-height: 19px; white-space: nowrap; vertical-align: baseline;
}
.tchat-chip-order { background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--role-cta-primary); cursor: pointer; }
.tchat-chip-order:hover { background: rgba(var(--b2-yellow-rgb), 0.24); }
.tchat-chip-mention { background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--role-cta-primary); }
.tchat-msg-link {
  color: var(--role-cta-primary); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(var(--b2-yellow-rgb), 0.5); word-break: break-word;
}
.tchat-msg-link:hover { text-decoration-color: currentColor; }
.tchat-row.me .tchat-msg-link { color: #ffe066; text-decoration-color: rgba(255, 224, 102, 0.55); }

/* Reaction strip (below the message) */
.tchat-reactions { display: flex; flex-wrap: wrap; gap: 5px; }
.tchat-row.me .tchat-reactions { justify-content: flex-end; }
.tchat-reaction {
  display: inline-flex; align-items: center; gap: 4px; background: #262829;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 2px 9px;
  font-size: 13px; line-height: 1.2; cursor: pointer; color: #fff; font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.tchat-reaction:hover { border-color: rgba(255, 255, 255, 0.2); }
.tchat-reaction.on { border-color: var(--role-cta-primary); background: rgba(var(--b2-yellow-rgb), 0.14); }
.tchat-reaction-count { font-weight: 700; font-size: 11.5px; color: #b8babb; }

/* Hover react button over a message — a single circle at top-right. */
.tchat-msg-actions {
  position: absolute; top: -18px; right: 0; display: none; gap: 2px;
  z-index: 3;
}
.tchat-row.me .tchat-msg-actions { right: 0; left: auto; }
.tchat-msg-bubble-wrap:hover .tchat-msg-actions { display: flex; }
.tchat-msg-action {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #34373a; background: #262829; color: #8f9294; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer; font-family: inherit; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tchat-msg-action:hover:not(:disabled) { color: var(--role-cta-primary); border-color: var(--role-cta-primary); }
.tchat-msg-action:disabled { opacity: 0.4; cursor: default; }

/* ── Image attachment embed (GIF / image — no frame) ───────────────────── */
.tchat-image-embed {
  position: relative; display: block; margin-top: 6px; border-radius: 14px;
  overflow: hidden; text-decoration: none; max-width: 300px; line-height: 0;
}
.tchat-image-embed img {
  display: block; width: auto; max-width: 100%; max-height: 280px; height: auto;
  object-fit: contain; border-radius: 14px;
}
.tchat-image-embed-pill {
  position: absolute; right: 8px; bottom: 7px; padding: 2px 7px; border-radius: 4px;
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ── File attachment embed ─────────────────────────────────────────────── */
.tchat-file-embed {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px;
  background: #262829; border: 1px solid #34373a; border-radius: 14px;
  text-decoration: none; color: inherit; min-width: 220px; max-width: 320px; transition: background 0.12s ease;
}
.tchat-file-embed:hover { background: #2e3132; }
.tchat-file-embed-icon {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; background: rgba(255, 255, 255, 0.05); border-radius: 9px; flex-shrink: 0;
}
.tchat-file-embed-body { flex: 1; display: inline-flex; flex-direction: column; min-width: 0; gap: 2px; }
.tchat-file-embed-name { font-weight: 700; font-size: 14px; color: var(--wg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-file-embed-size { font-size: 12px; color: var(--wg-text-3); }

/* ── Composer — single box with an action row below the textarea ───────── */
.tchat-composer { flex: none; padding: 12px 14px 14px; border-top: 1px solid #34373a; background: #212324; }
.tchat-composer-box {
  background: #262829; border: 1px solid #34373a; border-radius: 14px; padding: 10px 12px 8px;
  transition: border-color 150ms;
}
.tchat-composer-box:focus-within { border-color: var(--role-cta-primary); }
.tchat-input {
  width: 100%; border: none; background: transparent; outline: none; color: #fff;
  font-family: inherit; font-size: 14px; line-height: 1.45; min-height: 24px; max-height: 140px;
  overflow-y: auto; resize: none; display: block;
}
.tchat-input::placeholder { color: #7f8284; }
.tchat-composer-row { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.tchat-composer-spacer { flex: 1; }
.tchat-tool {
  position: relative; border: none; background: transparent; cursor: pointer; color: #8f9294;
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  font-family: inherit; font-weight: 700; font-size: 15px; transition: background 130ms, color 130ms;
}
.tchat-tool:hover:not(:disabled) { background: #303334; color: #fff; }
.tchat-tool:disabled { opacity: 0.5; cursor: default; }
.tchat-tool-on { background: rgba(var(--b2-yellow-rgb), 0.16); color: var(--role-cta-primary); }
.tchat-tool-gif { width: auto; height: 28px; padding: 0 7px; font-size: 12px; font-weight: 800; }
.tchat-send {
  flex: none; display: flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 13.5px; padding: 8px 16px; border-radius: 10px;
  background: var(--role-cta-primary); color: #1c1d1e;
  transition: background 160ms, transform 100ms, opacity 140ms;
}
.tchat-send:hover:not(:disabled) { background: #ffe066; }
.tchat-send:active:not(:disabled) { background: #e6c133; transform: translateY(1px); }
.tchat-send:disabled { opacity: 0.45; cursor: default; transform: none; }

/* Pending-attachment preview — a real thumbnail with a corner X, inside the box. */
.tchat-staged { display: flex; margin-bottom: 8px; }
.tchat-pending-embed { position: relative; display: inline-block; }
.tchat-pending-thumb {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: 12px; object-fit: cover; background: #1c1d1e; border: 1px solid #34373a;
  overflow: hidden; font-size: 22px; line-height: 1;
}
.tchat-pending-remove {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #303334; border: 2px solid #212324; border-radius: 50%;
  color: #fff; cursor: pointer; padding: 0; font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease;
}
.tchat-pending-remove:hover { background: #ff453a; color: #fff; }

/* ── Conversation header ───────────────────────────────────────────────── */
.tchat-conv-head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-bottom: 1px solid #34373a;
}
.tchat-conv-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tchat-conv-name {
  font-size: 16px; font-weight: 700; color: #fff; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tchat-conv-sub { font-size: 12px; color: #8f9294; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchat-head-btn {
  flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: #8f9294;
  border-radius: 9px; display: grid; place-items: center; cursor: pointer; font-family: inherit;
  transition: background 130ms, color 130ms;
}
.tchat-head-btn:hover { background: #303334; color: #fff; }
.tchat-pin-btn { color: #7f8284; }
.tchat-pin-btn.on { color: var(--role-cta-primary); }
.tchat-pin-btn.on:hover { color: var(--role-cta-primary); }

/* ── Popovers (reaction picker / emoji / GIF) ──────────────────────────── */
.tchat-pop {
  position: fixed; z-index: 5100; background: var(--wg-header, #2d2f31);
  border: 1px solid var(--wg-divider); border-radius: 999px; padding: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); display: inline-flex; gap: 2px;
}
.tchat-reaction-pop { border-radius: 999px; }
.tchat-emoji-pop {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tchat-pop-emoji {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 999px; font-size: 16px; line-height: 1;
  cursor: pointer; font-family: inherit; transition: background 0.1s ease, transform 0.1s ease;
}
.tchat-emoji-pop .tchat-pop-emoji { width: 30px; height: 30px; border-radius: 8px; font-size: 18px; }
.tchat-pop-emoji:hover { background: rgba(255, 255, 255, 0.09); transform: scale(1.18); }
.tchat-gif-pop {
  display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 8px 10px 10px;
  background: var(--wg-raised, #202223); border: 1px solid var(--wg-divider); border-radius: 12px; max-height: 340px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tchat-gif-search { display: flex; align-items: center; gap: 6px; }
.tchat-gif-input {
  flex: 1; padding: 7px 10px; background: var(--wg-bg); border: 1px solid var(--wg-divider);
  border-radius: 8px; color: var(--wg-text); font: inherit; font-size: 13px; appearance: none; -webkit-appearance: none; outline: 0;
}
.tchat-gif-input:focus { border-color: var(--chat-accent); }
.tchat-gif-input::-webkit-search-cancel-button { display: none; }
.tchat-gif-close {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 7px; color: var(--wg-text-3); cursor: pointer; font-size: 12px; font-family: inherit;
}
.tchat-gif-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--wg-text); }
.tchat-gif-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  /* Explicit row height. aspect-ratio on grid items doesn't feed back into
     auto-sized implicit rows inside a scrolling container, so the rows
     collapsed below the image height and tiles stacked on top of each
     other. A fixed auto-row height keeps them in a clean grid. */
  grid-auto-rows: 84px; gap: 4px; padding: 2px;
  flex: 1; min-height: 0; overflow-y: auto; margin: 0 -2px;
}
.tchat-gif-tile {
  position: relative; display: block; width: 100%; height: 100%; padding: 0;
  background: var(--wg-bg); border: 1px solid var(--wg-divider); border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: transform 0.1s ease, border-color 0.12s ease;
}
.tchat-gif-tile:hover { transform: scale(1.02); border-color: var(--chat-accent); }
.tchat-gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tchat-gif-status { grid-column: 1 / -1; padding: 24px 12px; text-align: center; color: var(--wg-text-3); font-size: 12px; font-style: italic; }
.tchat-gif-err { color: #ff8077; font-style: normal; font-weight: 600; }
.tchat-gif-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 4px; border-top: 1px solid var(--wg-divider); font-size: 10px; color: var(--wg-text-3); letter-spacing: 0.04em; }
.tchat-gif-foot strong { color: var(--wg-text-2); font-weight: 800; letter-spacing: 0.06em; }

/* ── Out-of-panel toasts ───────────────────────────────────────────────── */
.tchat-toast-stack {
  position: fixed; right: 22px; bottom: 24px; z-index: 5002;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  max-width: calc(100vw - 32px); pointer-events: none;
}
/* No panel-open shift needed on desktop anymore — the panel opens on the
   LEFT (anchored to the rail launcher) and the toasts stack on the right. */
.tchat-toast {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 11px 13px;
  width: 320px; max-width: 100%; background: var(--wg-header); border: 1px solid var(--wg-divider);
  border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); color: var(--wg-text);
  font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease;
  animation: tchat-toast-in 0.2s ease-out;
}
.tchat-toast:hover { background: #34373a; transform: translateY(-1px); }
@keyframes tchat-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.tchat-toast .tchat-avatar-wrap { flex-shrink: 0; }
.tchat-toast .tchat-avatar { width: 36px; height: 36px; font-size: 14px; }
.tchat-toast-body { flex: 1; display: inline-flex; flex-direction: column; min-width: 0; gap: 2px; }
.tchat-toast-head { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.tchat-toast-name { font-weight: 700; font-size: 14px; color: var(--wg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-toast-room { font-size: 11px; color: var(--wg-text-3); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-toast-snippet {
  font-size: 13px; color: var(--wg-text-2); overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-word;
}
.tchat-toast-unread {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--chat-unread);
  color: #fff; font-weight: 800; font-size: 11px; line-height: 22px; text-align: center; flex-shrink: 0;
}
.tchat-toast-x {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--wg-text-3);
  font-size: 12px; cursor: pointer; font-family: inherit;
}
.tchat-toast-x:hover { background: rgba(255, 255, 255, 0.09); color: var(--wg-text); }

/* ── Modals (New chat / New group / Members) ─────────────────────────────
   v1-only surfaces (v2 has no equivalent) — styled in the widget language. */
.tchat-modal-ov {
  position: fixed; inset: 0; z-index: 5200; background: rgba(6, 6, 7, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.tchat-modal {
  width: 412px; max-width: 100%; max-height: 82vh; overflow-y: auto;
  background: var(--wg-bg, #161718); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px;
  padding: 22px; color: var(--wg-text); box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6);
}
.tchat-modal-title { font-size: 19px; font-weight: 700; }
.tchat-modal-sub { font-size: 13px; color: var(--wg-text-2); margin: 4px 0 14px; }
.tchat-modal-label { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--wg-text-3); font-weight: 700; margin: 14px 0 6px; }
.tchat-modal-in {
  width: 100%; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--wg-divider);
  background: var(--wg-raised); color: var(--wg-text); font-family: inherit; font-size: 15px; outline: 0;
}
.tchat-modal-in:focus { border-color: var(--chat-accent); }
.tchat-picker { margin-top: 8px; max-height: 320px; overflow-y: auto; }
.tchat-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.tchat-modal-cancel, .tchat-modal-create {
  height: 38px; padding: 0 18px; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.tchat-modal-cancel { border: 1px solid var(--wg-divider); background: transparent; color: var(--wg-text-2); }
.tchat-modal-cancel:hover { background: rgba(255, 255, 255, 0.06); color: var(--wg-text); }
.tchat-modal-create { border: 0; background: var(--chat-accent); color: var(--chat-accent-fg); }
.tchat-modal-create:hover:not(:disabled) { background: var(--chat-accent-hover); }
.tchat-modal-create:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Mobile ────────────────────────────────────────────────────────────── */
/* The rail narrows to 66px under 560px — keep the drawer snug against it. */
@media (max-width: 560px) {
  .tchat-panel { left: 67px; }
}
@media (max-width: 480px) {
  /* Full-bleed drawer to the left edge (rail overlaps). */
  .tchat-panel { left: 0; right: 0; width: auto; }
  .tchat-toast-stack { right: 12px; left: 12px; bottom: 16px; }
  .tchat-panel-open .tchat-toast-stack { right: 12px; left: 12px; bottom: auto; top: 12px; }
}
/* Comment provenance chip — the only comment tag: migrated CoreCentral history. */
.ord-rolechip-cc{background:var(--hd-surf2);color:var(--hd-fg4);border-color:var(--hd-line);}
/* Pre-Production backfill provenance — same muted family as the CoreCentral
   tag, purple-tinted so the two migrations read apart at a glance. */
.ord-rolechip-pp{background:rgba(168,108,255,0.10);color:var(--hd-purple);border-color:rgba(168,108,255,0.30);}

/* ── Order Attachments section (CoreCentral ✏️ Attachments shared store) ── */
.ord-attach-title{display:flex;align-items:center;gap:10px;}
.ord-attach-title .ord-attach-add{width:26px;height:26px;border-radius:8px;}
.ord-attach-title .ord-attach-add svg{width:13px;height:13px;}
.ord-attach-grid{margin-top:2px;}
.ord-attach-item{position:relative;display:inline-flex;}
.ord-attach-item .ord-attach-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;display:none;align-items:center;justify-content:center;border-radius:50%;background:var(--hd-surf);border:1px solid var(--hd-line2);font-size:13px;padding:0;z-index:2;}
.ord-attach-item:hover .ord-attach-del{display:inline-flex;}

/* ── Inventory Reconciliation sentinel rows (audit hardening) ── */
.recon-sentinel-block{margin:10px 0 14px;border:1px solid rgba(245,166,35,.45);border-radius:12px;padding:10px 12px;background:rgba(245,166,35,.06);}
.recon-sentinel-head{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#f5a623;margin-bottom:4px;}
.recon-sentinel-head svg{width:13px;height:13px;}
.recon-sentinel-row .row-fam{color:#c9974a;}

/* Orders queue pager — Newer/Older through the recent feed. */
.ord-pager{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;border-top:1px solid var(--hd-line3);background:var(--hd-pane);}
.ord-pager:empty{display:none;}
.ord-pagebtn{display:inline-flex;align-items:center;gap:5px;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg2);border-radius:9px;font-size:12px;font-weight:700;padding:5px 12px;cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s;}
.ord-pagebtn:hover:not(:disabled){color:var(--hd-fg);border-color:var(--hd-cyan);}
.ord-pagebtn:disabled{opacity:.38;cursor:default;}
.ord-pageinfo{font-size:11.5px;font-weight:700;color:var(--hd-fg3);min-width:56px;text-align:center;}

/* ── Instaquote native editor — ported admin.css + eca-theme.css, scoped ──
   The quote editor transcribed from instaquote/web/admin (fold-in phase 2)
   renders inside #iqxEditorHost. Every selector below is prefixed with
   #iqxEditorHost so nothing leaks into the rest of v1. Excluded from the
   port: the keypad login screen (.iq-login*/.iq-pin*/.iq-key*/.iq-signin)
   and the sticky top-nav (.iq-nav*/.iq-account*) — the shell provides
   session + chrome. The iqBlink/iqRise keyframes belonged to the login
   screen only and are not ported. */

/* eca-theme.css :root tokens, re-scoped: custom properties inherit, so
   declaring them on the host element themes the whole editor subtree. The
   v1 sheet already defines the --b2-* surface/palette tokens but NOT the
   --role-*/--eca-* bindings the admin rules reference. */
#iqxEditorHost {

  /* ─── Layer 1: Surface tokens (no semantic colors). */
  --b2-bg: #141416;
  --b2-surface-0: #1a1a1d;
  --b2-surface-1: #1c1c1f;
  --b2-surface-2: #242427;
  --b2-surface-3: #2c2c30;
  --b2-hairline: rgba(255,255,255,0.07);
  --b2-hairline-strong: rgba(255,255,255,0.12);
  --b2-text: #f5f5f7;
  --b2-text-2: #a1a1a6;
  --b2-text-3: #8e8e95; /* a11y: clears WCAG AA 4.5:1 on dark surface */
  --b2-text-4: #6e6e73; /* decorative fills only, not body text */

  /* ─── Layer 2: Palette RGB triplets — SOURCE OF TRUTH. Presets override
     these and the change cascades through every layer below. */
  --b2-red-rgb:    255, 69, 58;
  --b2-amber-rgb:  255, 159, 10;
  --b2-blue-rgb:   10, 132, 255;
  --b2-teal-rgb:   17, 153, 171;
  --b2-green-rgb:  48, 209, 88;
  --b2-yellow-rgb: 255, 214, 10;
  --b2-purple-rgb: 192, 132, 252;
  --b2-orange-rgb: 251, 146, 60;
  --b2-pink-rgb:   236, 72, 153;

  /* ─── Layer 3: Palette solids + tints + borders, derived from triplets. */
  --b2-red:           rgb(var(--b2-red-rgb));
  --b2-red-bg:        rgba(var(--b2-red-rgb), 0.12);
  --b2-red-border:    rgba(var(--b2-red-rgb), 0.32);
  --b2-amber:         rgb(var(--b2-amber-rgb));
  --b2-amber-bg:      rgba(var(--b2-amber-rgb), 0.12);
  --b2-amber-border:  rgba(var(--b2-amber-rgb), 0.32);
  --b2-blue:          rgb(var(--b2-blue-rgb));
  --b2-blue-bg:       rgba(var(--b2-blue-rgb), 0.14);
  --b2-blue-border:   rgba(var(--b2-blue-rgb), 0.34);
  --b2-teal:          rgb(var(--b2-teal-rgb));
  --b2-teal-bg:       rgba(var(--b2-teal-rgb), 0.14);
  --b2-teal-border:   rgba(var(--b2-teal-rgb), 0.34);
  --b2-green:         rgb(var(--b2-green-rgb));
  --b2-green-bg:      rgba(var(--b2-green-rgb), 0.14);
  --b2-green-border:  rgba(var(--b2-green-rgb), 0.30);
  --b2-yellow:        rgb(var(--b2-yellow-rgb));
  --b2-yellow-bg:     rgba(var(--b2-yellow-rgb), 0.12);
  --b2-yellow-border: rgba(var(--b2-yellow-rgb), 0.32);
  --b2-purple:        rgb(var(--b2-purple-rgb));
  --b2-purple-bg:     rgba(var(--b2-purple-rgb), 0.12);
  --b2-purple-border: rgba(var(--b2-purple-rgb), 0.32);
  --b2-orange:        rgb(var(--b2-orange-rgb));
  --b2-orange-bg:     rgba(var(--b2-orange-rgb), 0.12);
  --b2-orange-border: rgba(var(--b2-orange-rgb), 0.32);
  --b2-pink:          rgb(var(--b2-pink-rgb));
  --b2-pink-bg:       rgba(var(--b2-pink-rgb), 0.14);
  --b2-pink-border:   rgba(var(--b2-pink-rgb), 0.36);

  /* ─── Layer 4: Role bindings — the portal references THESE. Semantic
     roles relevant to a returns flow are mapped from the shared palette. */
  --role-cta-primary:        var(--b2-yellow);   /* primary action (gold) */
  --role-cta-primary-bg:     var(--b2-yellow-bg);
  --role-cta-primary-border: var(--b2-yellow-border);
  --role-danger:             var(--b2-red);      /* reject / destructive */
  --role-danger-bg:          var(--b2-red-bg);
  --role-danger-border:      var(--b2-red-border);
  --role-success:            var(--b2-green);    /* resolved / refunded */
  --role-success-bg:         var(--b2-green-bg);
  --role-success-border:     var(--b2-green-border);
  --role-pending:            var(--b2-amber);    /* awaiting / in review */
  --role-pending-bg:         var(--b2-amber-bg);
  --role-pending-border:     var(--b2-amber-border);
  --role-info:               var(--b2-blue);     /* in transit / links */
  --role-info-bg:            var(--b2-blue-bg);
  --role-info-border:        var(--b2-blue-border);
  --role-warranty:           var(--b2-teal);     /* warranty claims */
  --role-warranty-bg:        var(--b2-teal-bg);
  --role-warranty-border:    var(--b2-teal-border);

  /* Brand-mark — LOCKED (matches the dashboard; not user-themeable). */
  --brand-mark-1: #ffd60a;
  --brand-mark-2: #ffb84d;

  /* ─── Layer 5: Legacy bridges (parity with the dashboard's older surfaces). */
  --yellow:     var(--role-cta-primary);
  --dark-gray:  var(--b2-bg);
  --teal:       var(--b2-teal);
  --white:      var(--b2-text);

  /* ─── Portal-specific aliases (semantic names the portal markup uses). */
  --eca-font: 'Avenir Next', 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --eca-on-primary: #1a1300;          /* dark text on gold (matches skip-link) */
  --eca-radius-control: 12px;         /* buttons / inputs */
  --eca-radius-surface: 20px;         /* cards / modals */
  --eca-radius-chip: 7px;
  --eca-shadow-modal: 0 24px 56px rgba(20,20,22,0.55), 0 2px 8px rgba(20,20,22,0.40);
  --eca-logo-url: url("https://store-hl2y6bk82c.mybigcommerce.com/content/EC%20Logo%20-%20Full%20Color%20-%20Horizontal_Sticker.svg");
}

/* The editor fills the shell content area: #iqxEditorHost sits inside
   .iqx-framewrap (flex column, below the back bar) and scrolls its own
   content — same posture as the iframe it replaces. The standalone app's
   body margins/background are reproduced here. */
#iqxEditorHost {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Design handoff: the editor carries a faint teal→plum wash over the base
     gray (prototype: linear-gradient(180deg,#262829,#26C1C316,#73187818)). */
  background: linear-gradient(180deg, #262829 0%, rgba(38, 193, 195, 0.086) 50%, rgba(115, 24, 120, 0.094) 100%), var(--b2-bg);
  color: var(--b2-text);
}

/* admin.css — Instaquote staff app, reworked to the Elite Core design system
   (matches the Returns admin + Stock Central). App layer on top of eca-theme.css;
   references only --b2-* / --role-* / --eca-* tokens (no raw hexes) so theme
   presets and rebrands cascade for free. Surfaces: keypad login, sticky nav,
   dashboard (KPI filter cards + quote table w/ quick-assign), quote editor.

   Dropdown-hover note (from the design handoff): row buttons carry NO inline
   background — hover is driven by a real CSS :hover rule so it can't be lost to
   a native gray button face. eca-theme already resets button backgrounds. */
/* Buttons default to a transparent face so dropdown-row :hover rules win over the
   native gray button background (per the design handoff). Themed buttons set their
   own background explicitly. Bare `button` (specificity 0,0,1) so any class-based
   background wins over this reset. */
#iqxEditorHost button { background-color: transparent; }
/* primary nav links */
/* account dropdown */
#iqxEditorHost .iq-menu-sep { height: 1px; background: var(--b2-hairline); margin: 4px 4px; }
#iqxEditorHost .iq-menu-item.danger { color: var(--role-danger); }
#iqxEditorHost .iq-menu-item.danger:hover { background: var(--role-danger-bg); }
#iqxEditorHost .iq-menu-item svg { flex: 0 0 auto; }
/* avatars (rep gradients set inline from name) */
#iqxEditorHost .iq-avatar { flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--eca-on-primary, #1a1300); font-weight: 700; }
#iqxEditorHost img.iq-avatar { display: block; object-fit: cover; background: var(--b2-surface-3); }
/* ─── Dashboard ───────────────────────────────────────────────────────────── */
#iqxEditorHost .iq-main { max-width: 1400px; margin: 0 auto; padding: 30px 32px 80px; }
/* Editor pages cap tighter than the dashboard's 1400px — two columns read
   sparse past ~1240px (inherits .iq-main's margin:auto for centring). */
#iqxEditorHost .iq-editor-main { padding-top: 20px; max-width: 1440px; }
#iqxEditorHost .iq-page-head { margin-bottom: 24px; }
#iqxEditorHost .iq-page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
#iqxEditorHost .iq-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--b2-text-3); margin-bottom: 8px; }
#iqxEditorHost .iq-h1 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
/* Active/Archived toggle */
#iqxEditorHost .iq-viewtoggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; flex: 0 0 auto; }
#iqxEditorHost .iq-vt { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--b2-text-3); transition: background .14s, color .14s; }
#iqxEditorHost .iq-vt svg { width: 14px; height: 14px; }
#iqxEditorHost .iq-vt.active { background: var(--b2-surface-3); color: var(--b2-text); border-color: var(--b2-hairline-strong); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
#iqxEditorHost .iq-vt .ct { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--b2-surface-3); color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-vt.active .ct { background: rgba(var(--b2-yellow-rgb), 0.16); color: var(--role-cta-primary); }
/* Auto-archive rules card */
#iqxEditorHost .iq-ar-card { border: 1px solid var(--b2-hairline-strong); border-radius: 16px; background: var(--b2-surface-1); padding: 18px 20px; margin-bottom: 18px; }
#iqxEditorHost .iq-ar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
#iqxEditorHost .iq-ar-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; }
#iqxEditorHost .iq-ar-title svg { color: var(--role-cta-primary); }
#iqxEditorHost .iq-badge-admin { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--role-cta-primary); border: 1px solid var(--role-cta-primary-border); }
#iqxEditorHost .iq-ar-sub { font-size: 12.5px; color: var(--b2-text-3); margin-top: 6px; max-width: 520px; }
#iqxEditorHost .iq-ar-rules { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; border-top: 1px solid var(--b2-hairline); padding-top: 6px; }
#iqxEditorHost .iq-ar-rule { display: flex; align-items: center; gap: 12px; padding: 10px 2px; transition: opacity .16s; }
#iqxEditorHost .iq-ar-rule .lbl { flex: 1; font-size: 13.5px; color: var(--b2-text-2); }
#iqxEditorHost .iq-ar-rule .lbl strong { color: var(--b2-text); font-weight: 600; }
#iqxEditorHost .iq-ar-days { width: 64px; height: 34px; text-align: center; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-ar-days:disabled { opacity: .55; }
#iqxEditorHost .iq-ar-rule .unit { font-size: 13px; color: var(--b2-text-3); width: 36px; }
/* toggle switch */
#iqxEditorHost .iq-switch { flex: 0 0 auto; width: 38px; height: 22px; border: 0; border-radius: 999px; cursor: pointer; padding: 0; position: relative; background: var(--b2-surface-3); transition: background .16s; }
#iqxEditorHost .iq-switch.on { background: var(--role-cta-primary); }
#iqxEditorHost .iq-switch .knob { position: absolute; top: 3px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.4); transform: translateX(3px); transition: transform .16s; }
#iqxEditorHost .iq-switch.on .knob { transform: translateX(17px); }
#iqxEditorHost .iq-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1080px) {
  #iqxEditorHost .iq-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  #iqxEditorHost .iq-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* --kc = the card's semantic RGB triplet, set inline per card */
#iqxEditorHost .iq-kpi {
  position: relative; text-align: left; cursor: pointer; font: inherit;
  border-radius: 16px; padding: 16px 18px;
  background: linear-gradient(145deg, rgba(var(--kc), 0.17) 0%, rgba(var(--kc), 0.03) 50%, rgba(28, 28, 31, 0) 100%), var(--b2-surface-1);
  border: 1px solid rgba(var(--kc), 0.24); transition: box-shadow .14s, transform .1s; }
#iqxEditorHost .iq-kpi:hover { transform: translateY(-1px); }
#iqxEditorHost .iq-kpi.active { box-shadow: 0 0 0 2px rgba(var(--kc), 0.65), 0 6px 20px rgba(var(--kc), 0.15); }
#iqxEditorHost .iq-kpi .top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
#iqxEditorHost .iq-kpi .dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--kc)); box-shadow: 0 0 9px rgba(var(--kc), 0.75); }
#iqxEditorHost .iq-kpi .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--b2-text-2); text-transform: uppercase; }
#iqxEditorHost .iq-kpi .val { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--b2-text); }
#iqxEditorHost .iq-kpi-x { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--kc), 0.16); border: 1px solid rgba(var(--kc), 0.4); color: rgb(var(--kc)); cursor: pointer; }
#iqxEditorHost .iq-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
#iqxEditorHost .iq-tb-search { position: relative; flex: 1 1 240px; color: var(--b2-text-3); }
#iqxEditorHost .iq-tb-search .mag { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }
#iqxEditorHost .iq-tb-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; }
#iqxEditorHost .iq-tb-search input:focus { border-color: var(--role-cta-primary-border); box-shadow: 0 0 0 2px rgba(var(--b2-yellow-rgb), 0.18); outline: none; }
#iqxEditorHost .iq-select-wrap { position: relative; }
#iqxEditorHost .iq-select { height: 44px; padding: 0 38px 0 14px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer; }
#iqxEditorHost .iq-select:focus { outline: none; border-color: var(--role-cta-primary-border); }
#iqxEditorHost .iq-select-wrap .chev { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--b2-text-3); }
/* table (no overflow:hidden — assign menus must escape) */
#iqxEditorHost .iq-table { border: 1px solid var(--b2-hairline); border-radius: 20px; background: var(--b2-surface-1); }
#iqxEditorHost .iq-thead, #iqxEditorHost .iq-row { display: grid; grid-template-columns: 120px 1.8fr 1fr 64px 1fr 1.3fr; gap: 10px; padding: 13px 18px; }
#iqxEditorHost .iq-thead { border-bottom: 1px solid var(--b2-hairline); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--b2-text-3); font-weight: 700; background: var(--b2-surface-0); border-radius: 20px 20px 0 0; }
#iqxEditorHost .iq-thead .r, #iqxEditorHost .iq-row .r { text-align: right; }
#iqxEditorHost .iq-row { padding: 15px 18px; border-bottom: 1px solid var(--b2-hairline); align-items: center; cursor: pointer; transition: background .12s; }
#iqxEditorHost .iq-row:hover { background: var(--b2-surface-2); }
#iqxEditorHost .iq-row .qn .num { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-row .qn .exp { font-size: 11.5px; color: var(--b2-text-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-row .cust { min-width: 0; }
#iqxEditorHost .iq-row .cust .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-row .cust .em { font-size: 11.5px; color: var(--b2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-row .items { font-size: 13px; color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-row .total { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* empty state (archived / filtered) */
#iqxEditorHost .iq-empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; }
#iqxEditorHost .iq-empty-state .t { font-size: 14px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-empty-state .s { font-size: 12.5px; color: var(--b2-text-3); max-width: 340px; }
/* status chip (semantic families) */
#iqxEditorHost .iq-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-transform: capitalize; }
#iqxEditorHost .iq-chip .cd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
#iqxEditorHost .iq-chip.info { color: var(--b2-blue); background: var(--b2-blue-bg); border: 1px solid var(--b2-blue-border); }
#iqxEditorHost .iq-chip.success { color: var(--b2-green); background: var(--b2-green-bg); border: 1px solid var(--b2-green-border); }
#iqxEditorHost .iq-chip.pending { color: var(--b2-amber); background: var(--b2-amber-bg); border: 1px solid var(--b2-amber-border); }
#iqxEditorHost .iq-chip.danger { color: var(--b2-red); background: var(--b2-red-bg); border: 1px solid var(--b2-red-border); }
#iqxEditorHost .iq-chip.ordered { color: var(--b2-teal); background: var(--b2-teal-bg); border: 1px solid var(--b2-teal-border); }
/* quick-assign control + dropdown */
#iqxEditorHost .iq-assign { position: relative; }
#iqxEditorHost .iq-assign.r { display: flex; justify-content: flex-end; }
#iqxEditorHost .iq-assign-btn { display: inline-flex; align-items: center; gap: 7px; width: 132px; background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; color: var(--b2-text-2); font: inherit; padding: 4px 6px; }
#iqxEditorHost .iq-assign-btn:hover { background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }
#iqxEditorHost .iq-assign-btn .nm { flex: 1; min-width: 0; text-align: left; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-assign-btn .chev { flex: 0 0 auto; color: var(--b2-text-4); }
#iqxEditorHost .iq-menu-scrim { position: fixed; inset: 0; z-index: 55; }
#iqxEditorHost .iq-menu { position: absolute; z-index: 60; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 13px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.6); padding: 6px; }
#iqxEditorHost .iq-menu.row { right: 0; top: calc(100% + 6px); width: 220px; }
#iqxEditorHost .iq-menu-title { padding: 8px 10px 5px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--b2-text-3); text-transform: uppercase; }
#iqxEditorHost .iq-menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px; cursor: pointer; color: var(--b2-text); font: inherit; text-align: left; background: transparent; transition: background .12s; }
#iqxEditorHost .iq-menu-item:hover { background: var(--b2-surface-3); }
#iqxEditorHost .iq-menu-item .nm { flex: 1; font-size: 13px; font-weight: 600; }
#iqxEditorHost .iq-menu-note { margin-top: 4px; padding: 10px 11px 4px; border-top: 1px solid var(--b2-hairline); font-size: 11px; color: var(--b2-text-3); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
#iqxEditorHost .iq-menu-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--role-cta-primary); }
#iqxEditorHost .iq-pager { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 16px; color: var(--b2-text-3); font-size: 13px; border-radius: 0 0 20px 20px; }
#iqxEditorHost .iq-pager button { height: 36px; padding: 0 16px; background: var(--b2-surface-2); color: var(--b2-text); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
#iqxEditorHost .iq-pager button:disabled { opacity: .45; cursor: default; }
#iqxEditorHost .iq-pager span { font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-empty { padding: 48px 16px; text-align: center; color: var(--b2-text-2); }
/* ─── Editor ──────────────────────────────────────────────────────────────── */
#iqxEditorHost .iq-back { display: inline-flex; align-items: center; gap: 6px; color: var(--b2-text-2); cursor: pointer; background: transparent; border: 0; font: inherit; font-size: 14px; margin-bottom: 14px; }
#iqxEditorHost .iq-back:hover { color: var(--b2-text); }
#iqxEditorHost .iq-ed-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
#iqxEditorHost .iq-ed-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-ed-saved { font-size: 12.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-assignee { margin-left: auto; position: relative; }
#iqxEditorHost .iq-assignee-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 5px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 999px; cursor: pointer; color: var(--b2-text); font: inherit; }
#iqxEditorHost .iq-assignee-btn:hover { background: var(--b2-surface-3); }
#iqxEditorHost .iq-assignee-btn .meta { text-align: left; line-height: 1.15; }
#iqxEditorHost .iq-assignee-btn .meta .k { display: block; font-size: 9px; font-weight: 700; letter-spacing: .09em; color: var(--b2-text-3); text-transform: uppercase; }
#iqxEditorHost .iq-assignee-btn .meta .n { display: block; font-size: 13px; font-weight: 600; }
#iqxEditorHost .iq-menu.assignee { right: 0; top: calc(100% + 8px); width: 264px; text-align: left; }
#iqxEditorHost .iq-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 900px) {
  #iqxEditorHost .iq-editor { grid-template-columns: 1fr; }
}
#iqxEditorHost .iq-col-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
#iqxEditorHost .iq-card { background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-radius: 18px; padding: 18px 20px; }
#iqxEditorHost .iq-card-title { font-size: 12px; font-weight: 700; color: var(--b2-text-2); text-transform: uppercase; letter-spacing: .04em; }
#iqxEditorHost .iq-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* Design handoff: main-column cards carry a colored left accent (box-shadow so
   the border-radius stays clean); the totals card gets a soft white glow. */
#iqxEditorHost .iq-card-cust { box-shadow: -5px 0px 0px 0px #1f459d; }
#iqxEditorHost .iq-card-lines { border-color: transparent; box-shadow: -5px 0px 0px 0px #b79514; }
#iqxEditorHost .iq-card-notes { box-shadow: -5px 0px 0px 0px #6b3d6c; }
#iqxEditorHost #iq-totals { box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.235); }
/* Icon-badged card titles (Customer / Line Items / Notes & Terms) */
#iqxEditorHost .iq-ttl { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--b2-text); }
#iqxEditorHost .iq-ttl .ic { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; }
#iqxEditorHost .iq-ttl .ic.blue { background: rgba(var(--b2-blue-rgb), 0.14); color: var(--b2-blue); }
#iqxEditorHost .iq-ttl .ic.gold { background: rgba(var(--b2-yellow-rgb), 0.13); color: var(--role-cta-primary); }
#iqxEditorHost .iq-ttl .ic.purple { background: rgba(var(--b2-purple-rgb), 0.13); color: var(--b2-purple); }
#iqxEditorHost .iq-ttl .ctpill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--b2-surface-3); color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-ttl .ctpill:empty { display: none; }
#iqxEditorHost .iq-lbl-hint { color: var(--b2-text-3); font-weight: 400; }
/* BigCommerce connection chip (linked state) */
#iqxEditorHost .iq-bc-chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 6px 5px 11px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 999px; }
#iqxEditorHost .iq-bc-chip .dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--b2-green); box-shadow: 0 0 0 3px rgba(var(--b2-green-rgb), 0.16); }
#iqxEditorHost .iq-bc-chip .lbl { font-size: 11.5px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-bc-chip .bid { font-size: 11.5px; font-weight: 600; color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-bc-chip .dc { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--b2-text-3); cursor: pointer; transition: color .12s, background .12s; }
#iqxEditorHost .iq-bc-chip .dc:hover { color: var(--role-danger); background: var(--role-danger-bg); }
/* customer search-first */
#iqxEditorHost .iq-cust-search { position: relative; margin-bottom: 14px; color: var(--b2-text-3); }
#iqxEditorHost .iq-cust-search .mag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
#iqxEditorHost .iq-cust-search input { width: 100%; height: 44px; padding: 0 14px 0 40px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; }
#iqxEditorHost .iq-cust-search input:focus { border-color: var(--role-cta-primary-border); box-shadow: 0 0 0 2px rgba(var(--b2-yellow-rgb), 0.18); outline: none; }
#iqxEditorHost .iq-cust-menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); padding: 6px; max-height: 288px; overflow-y: auto; }
#iqxEditorHost .iq-cust-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 0; border-radius: 10px; cursor: pointer; color: var(--b2-text); font: inherit; text-align: left; background: transparent; transition: background .12s; }
#iqxEditorHost .iq-cust-item:hover { background: var(--b2-surface-3); }
#iqxEditorHost .iq-cust-item .tile { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; background: var(--b2-surface-3); border: 1px solid var(--b2-hairline-strong); display: grid; place-items: center; color: var(--b2-text-2); font-weight: 700; font-size: 11px; }
#iqxEditorHost .iq-cust-item .co { display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-cust-item .sub { display: block; font-size: 11.5px; color: var(--b2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-cust-item .bcid { font-size: 10px; font-weight: 700; color: var(--b2-text-4); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-cust-manual { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 10px 11px; border: 0; border-top: 1px solid var(--b2-hairline); border-radius: 0 0 10px 10px; cursor: pointer; color: var(--b2-text-2); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; background: transparent; transition: background .12s; }
#iqxEditorHost .iq-cust-manual:hover { background: var(--b2-surface-3); }
/* picked-customer summary row (design handoff): tile · company · contact ·
   ship-to line, with the detail fields collapsed behind "Edit details" */
#iqxEditorHost .iq-cust-summary { display: flex; align-items: flex-start; gap: 13px; animation: iqReveal .25s ease; }
@keyframes iqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#iqxEditorHost .iq-cust-summary .tile { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px; background: var(--b2-surface-3); border: 1px solid var(--b2-hairline-strong); display: grid; place-items: center; color: var(--b2-text); font-weight: 700; font-size: 14px; }
#iqxEditorHost .iq-cust-summary .meta { flex: 1; min-width: 0; }
#iqxEditorHost .iq-cust-summary .co { font-size: 15px; font-weight: 700; }
#iqxEditorHost .iq-cust-summary .ct { font-size: 12.5px; color: var(--b2-text-2); margin-top: 2px; }
#iqxEditorHost .iq-cust-summary .ct .em { color: var(--role-info); }
#iqxEditorHost .iq-cust-summary .ad { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--b2-text-3); margin-top: 6px; flex-wrap: wrap; }
#iqxEditorHost .iq-cust-summary .ad svg { flex: 0 0 auto; }
#iqxEditorHost .iq-cust-summary .shiptag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; color: var(--b2-teal); background: rgba(var(--b2-teal-rgb), 0.14); border: 1px solid rgba(var(--b2-teal-rgb), 0.34); }
#iqxEditorHost .iq-cust-editbtn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 32px; padding: 0 12px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .12s, background .12s; }
#iqxEditorHost .iq-cust-editbtn:hover { color: var(--b2-text); background: var(--b2-surface-3); }
#iqxEditorHost .iq-cust-summary + .iq-cust-reveal.open { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--b2-hairline); }
/* progressive reveal: detail fields slide open once a customer is chosen */
#iqxEditorHost .iq-cust-reveal { overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); transition: max-height .36s ease, opacity .3s ease, transform .3s ease; }
#iqxEditorHost .iq-cust-reveal.open { max-height: 1600px; opacity: 1; transform: none; }
#iqxEditorHost .iq-cust-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
/* quote-discount footer row inside the line-items table (design mockup) with
   the running subtotal inline */
#iqxEditorHost .iq-li-foot { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--b2-surface-0); }
#iqxEditorHost .iq-li-foot .lbl { min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-li-foot .lbl .s { color: var(--b2-text-3); font-weight: 400; }
#iqxEditorHost .iq-li-foot .sp { flex: 1; }
#iqxEditorHost .iq-li-foot .subl { font-size: 12.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-li-foot .subv { font-size: 13.5px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-li-foot .iq-gdisc-val { display: flex; align-items: center; height: 34px; width: 112px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; overflow: hidden; }
#iqxEditorHost .iq-li-foot .iq-gdisc-val input { flex: 1; min-width: 0; height: 100%; padding: 0 6px; text-align: right; background: transparent; border: 0; color: var(--b2-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; outline: none; }
#iqxEditorHost .iq-li-foot .iq-gdisc-val button { flex: 0 0 auto; height: 100%; min-width: 30px; padding: 0 7px; background: transparent; border: 0; border-left: 1px solid var(--b2-hairline); color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; transition: background .12s, color .12s; }
#iqxEditorHost .iq-li-foot .iq-gdisc-val button:hover { background: var(--b2-surface-3); color: var(--b2-text); }
@media (max-width: 560px) {
  #iqxEditorHost .iq-cust-fields { grid-template-columns: 1fr; }
}
#iqxEditorHost .iq-lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--b2-text-2); margin-bottom: 5px; }
#iqxEditorHost .iq-in { width: 100%; height: 40px; padding: 0 13px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; }
#iqxEditorHost .iq-in:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost textarea.iq-in { height: auto; padding: 10px 13px; resize: vertical; line-height: 1.5; }
#iqxEditorHost .iq-addr-title { margin-top: 16px; }
#iqxEditorHost .iq-addr-title .iq-addr-sub { font-weight: 600; color: var(--b2-text-3); letter-spacing: 0; text-transform: none; }
/* billing section header carries the "Same as shipping" toggle inline */
#iqxEditorHost .iq-bill-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#iqxEditorHost .iq-sameship { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
#iqxEditorHost .iq-sameship > span { font-size: 12px; font-weight: 600; color: var(--b2-text-2); }
/* saved-address cards — a compact horizontally-scrollable row that handles
   many addresses without inflating this already-dense card */
#iqxEditorHost .iq-addrcards-wrap { margin: 10px 0 12px; }
#iqxEditorHost .iq-addrcards-lbl { font-size: 11px; font-weight: 600; color: var(--b2-text-3); margin-bottom: 6px; }
#iqxEditorHost .iq-addrcards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
#iqxEditorHost .iq-addrcards::-webkit-scrollbar { height: 6px; }
#iqxEditorHost .iq-addrcards::-webkit-scrollbar-thumb { background: var(--b2-surface-3); border-radius: 3px; }
#iqxEditorHost .iq-addrcard { flex: 0 0 auto; width: 172px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; color: var(--b2-text); font: inherit; cursor: pointer; transition: transform .12s, border-color .12s, background .12s, box-shadow .12s; }
#iqxEditorHost .iq-addrcard:hover { transform: translateY(-1px); background: var(--b2-surface-3); box-shadow: 0 4px 12px rgba(0,0,0,0.28); }
#iqxEditorHost .iq-addrcard.sel { border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.10); }
#iqxEditorHost .iq-addrcard .ac-co { font-size: 12.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#iqxEditorHost .iq-addrcard .ac-st { font-size: 11.5px; color: var(--b2-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#iqxEditorHost .iq-addrcard .ac-ln { font-size: 11px; color: var(--b2-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* line items */
#iqxEditorHost .iq-li-table { border: 1px solid var(--b2-hairline); border-radius: 14px; overflow: hidden; position: relative; }
#iqxEditorHost .iq-li-head, #iqxEditorHost .iq-li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 92px 88px 78px 84px 60px 46px; gap: 7px; align-items: center; padding: 9px 14px; }
#iqxEditorHost .iq-li-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--b2-text-3); font-weight: 700; background: var(--b2-surface-0); border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-li-head .r { text-align: right; }
#iqxEditorHost .iq-li-head .c { text-align: center; }
#iqxEditorHost .iq-li { border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-li .cell { min-width: 0; display: flex; align-items: center; gap: 11px; }
#iqxEditorHost .iq-li .cbody { flex: 1; min-width: 0; }
/* 38px product thumb (design mockup) — catalog image when the session has one,
   initials tile otherwise (saved lines don't persist an image URL) */
#iqxEditorHost .li-thumb { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--b2-hairline-strong); background: var(--b2-surface-3) center/cover no-repeat; }
#iqxEditorHost .li-thumb.init { display: grid; place-items: center; color: var(--b2-text-2); font-weight: 700; font-size: 11px; }
#iqxEditorHost .iq-li .nm { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-li .sku { font-size: 11.5px; color: var(--b2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-li input, #iqxEditorHost .iq-li .li-unit, #iqxEditorHost .iq-li .li-disc, #iqxEditorHost .iq-li .li-qtybox { height: 34px; }
#iqxEditorHost .iq-li input { padding: 0 8px; text-align: right; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; width: 100%; }
#iqxEditorHost .iq-li input:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-li input.li-name { text-align: left; }
/* qty stepper (design handoff): − input + in one bordered pill */
#iqxEditorHost .iq-li .li-qtybox { display: flex; align-items: center; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; overflow: hidden; }
#iqxEditorHost .iq-li .li-qtybox .li-step { width: 26px; height: 100%; flex: 0 0 auto; border: 0; background: transparent; color: var(--b2-text-2); font: inherit; font-size: 15px; cursor: pointer; display: grid; place-items: center; padding: 0; }
#iqxEditorHost .iq-li .li-qtybox .li-step:hover { background: var(--b2-surface-3); color: var(--b2-text); }
#iqxEditorHost .iq-li input.li-qty { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; text-align: center; padding: 0 2px; font-weight: 600; }
/* custom-line unit cost: compact inline field under the description (staff only) */
#iqxEditorHost .iq-li .li-cost { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
#iqxEditorHost .iq-li .li-cost .lbl { font-size: 11px; font-weight: 600; color: var(--b2-text-3); }
#iqxEditorHost .iq-li .li-cost .pfx { font-size: 12px; color: var(--b2-text-3); }
#iqxEditorHost .iq-li .li-cost input { height: 30px; width: 74px; flex: 0 0 auto; text-align: right; padding: 0 8px; font-size: 12.5px; border-radius: 8px; }
#iqxEditorHost .iq-li .li-cost .hint { font-size: 10.5px; color: var(--b2-text-3); opacity: .8; }
/* unit price with an absolute $ prefix */
#iqxEditorHost .iq-li .li-unit { position: relative; }
#iqxEditorHost .iq-li .li-unit .pfx { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--b2-text-3); pointer-events: none; }
#iqxEditorHost .iq-li .li-unit input { padding: 0 8px 0 17px; }
/* unified discount field: borderless value + hairline-divided %/$ select */
#iqxEditorHost .iq-li .li-disc { display: flex; align-items: center; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; overflow: hidden; }
#iqxEditorHost .iq-li .li-disc input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; border-radius: 0; }
#iqxEditorHost .iq-li .li-disc .li-disc-unit { flex: 0 0 auto; height: 100%; min-width: 27px; padding: 0 7px; background: transparent; border: 0; border-left: 1px solid var(--b2-hairline); color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; transition: background .12s, color .12s; }
#iqxEditorHost .iq-li .li-disc .li-disc-unit:hover { background: var(--b2-surface-3); color: var(--b2-text); }
#iqxEditorHost .iq-li .lt { text-align: right; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-li .li-margin { text-align: right; line-height: 1.2; }
#iqxEditorHost .iq-li .li-margin .pct { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-li .li-margin .amt { font-size: 10.5px; color: var(--b2-text-3); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-li-del { background: transparent; border: 0; color: var(--b2-text); opacity: .5; cursor: pointer; font-size: 17px; line-height: 1; padding: 2px; border-radius: 6px; }
#iqxEditorHost .iq-li-del:hover { color: var(--role-danger); background: var(--role-danger-bg); opacity: 1; }
/* per-row actions cell holds Duplicate + Remove */
#iqxEditorHost .iq-li-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
#iqxEditorHost .iq-li-dup { display: grid; place-items: center; background: transparent; border: 0; color: var(--b2-text); opacity: .5; cursor: pointer; padding: 3px; border-radius: 6px; transition: color .12s, background .12s, opacity .12s; }
#iqxEditorHost .iq-li-dup:hover { color: var(--role-cta-primary); background: rgba(var(--b2-yellow-rgb), 0.14); opacity: 1; }
/* drag-to-reorder: far-left grip handle, lifted row, insertion indicator */
#iqxEditorHost .iq-li-grip { display: grid; place-items: center; width: 100%; height: 40px; padding: 0 4px; color: var(--b2-text-3); opacity: .5; cursor: grab; touch-action: none; border-radius: 6px; transition: color .12s, background .12s, opacity .12s; }
#iqxEditorHost .iq-li-grip:hover { opacity: 1; color: var(--b2-text); background: var(--b2-surface-3); }
#iqxEditorHost .iq-li-grip:active { cursor: grabbing; }
#iqxEditorHost .iq-li.iq-dragging { opacity: .45; background: var(--b2-surface-2); }
#iqxEditorHost .iq-li-dropind { position: absolute; left: 0; right: 0; height: 2px; background: var(--role-cta-primary); box-shadow: 0 0 0 1px rgba(var(--b2-yellow-rgb), 0.4); pointer-events: none; z-index: 5; }
@media (max-width: 720px) {
  /* editor is desktop-tuned; let the line-item table scroll rather than reflow */
  #iqxEditorHost .iq-li-table { overflow-x: auto; }
  #iqxEditorHost .iq-li-head, #iqxEditorHost .iq-li, #iqxEditorHost .iq-li-foot, #iqxEditorHost .iq-li-opts.open { min-width: 600px; }
}
/* add-products row sits ABOVE the line table (design handoff) */
#iqxEditorHost .iq-addrow { display: flex; gap: 10px; margin-bottom: 14px; }
#iqxEditorHost .iq-addrow .search { position: relative; flex: 1; color: var(--b2-text-3); }
#iqxEditorHost .iq-addrow .search .mag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
#iqxEditorHost .iq-addrow input { width: 100%; height: 44px; padding: 0 14px 0 40px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; }
#iqxEditorHost .iq-addrow input:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-addrow .custom { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; height: 44px; padding: 0 16px; background: var(--b2-surface-3); color: var(--b2-text); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
#iqxEditorHost .iq-addrow .custom:hover { filter: brightness(1.25); }
#iqxEditorHost .iq-addrow .custom svg { flex: 0 0 auto; }
/* empty line-items state (dashed box, design handoff) */
#iqxEditorHost .iq-nolines { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 16px; border: 1px dashed var(--b2-hairline-strong); border-radius: 14px; text-align: center; }
#iqxEditorHost .iq-nolines .t { font-size: 13.5px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-nolines .s { font-size: 12.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-results { position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 6px); background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65); max-height: 340px; overflow-y: auto; padding: 6px; }
#iqxEditorHost .iq-result { padding: 9px 11px; cursor: pointer; border-radius: 10px; }
#iqxEditorHost .iq-result:hover, #iqxEditorHost .iq-result.active { background: var(--b2-surface-3); }
#iqxEditorHost .iq-result .name { font-weight: 600; font-size: 14px; }
#iqxEditorHost .iq-result .meta { font-size: 12px; color: var(--b2-text-3); display: flex; gap: 10px; margin-top: 2px; }
/* rich result row (design mockup): 40px thumb · sku/name · price */
#iqxEditorHost .iq-result.rich { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
#iqxEditorHost .iq-result.rich .rthumb { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--b2-hairline-strong); background: var(--b2-surface-3) center/cover no-repeat; }
#iqxEditorHost .iq-result.rich .rthumb.init { display: grid; place-items: center; color: var(--b2-text-2); font-weight: 700; font-size: 11px; }
#iqxEditorHost .iq-result.rich .body { flex: 1; min-width: 0; }
#iqxEditorHost .iq-result.rich .name { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#iqxEditorHost .iq-result.rich .sub { display: block; font-size: 12px; color: var(--b2-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
#iqxEditorHost .iq-result.rich .price { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
#iqxEditorHost .iq-result.rich .price .rstock { font-weight: 600; }
/* Price-list overlay on a search row: the customer price is the prominent
   number; the standard price sits struck-through + muted beside it, with a tiny
   teal "price list" hint. Kept compact so the row layout is unchanged. */
#iqxEditorHost .iq-result.rich .price.has-pl { color: var(--b2-teal, var(--b2-green)); }
#iqxEditorHost .iq-result.rich .price .rbase { margin-left: 5px; font-weight: 500; font-size: 11px; color: var(--b2-text-3); text-decoration: line-through; }
#iqxEditorHost .iq-result.rich .price .rpl { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--b2-teal, var(--b2-green)); }
/* Catalog-exceptions allowlist (Super-Admin curated, storefront-HIDDEN products
   made quotable). An allowlisted product carries a subtle "exception" tag on its
   normal-result name; Super Admins get a × on the tag to revoke it. */
#iqxEditorHost .iq-exc-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 1px 6px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--role-cta-primary); border: 1px solid var(--role-cta-primary-border); }
#iqxEditorHost .iq-exc-x { display: inline-grid; place-items: center; width: 13px; height: 13px; margin: 0 -2px 0 1px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; opacity: .7; }
#iqxEditorHost .iq-exc-x:hover { opacity: 1; background: var(--role-danger-bg); color: var(--role-danger); }
/* "Hidden on storefront · Super Admin" divider + muted hidden rows, shown below
   the normal results only for Super Admins. Hidden rows are NOT keyboard-navigable
   (no data-i) — only their "Allow & add" button is actionable. */
#iqxEditorHost .iq-hidden-sep { display: flex; align-items: center; gap: 6px; margin: 8px 4px 4px; padding-top: 8px; border-top: 1px solid var(--b2-hairline); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b2-text-3); }
#iqxEditorHost .iq-hidden-sep span { font-weight: 700; color: var(--role-cta-primary); letter-spacing: .04em; }
#iqxEditorHost .iq-result.iq-hidden-row { cursor: default; opacity: .72; }
#iqxEditorHost .iq-result.iq-hidden-row:hover { background: var(--b2-surface-2); opacity: .92; }
#iqxEditorHost .iq-allow-btn { flex: 0 0 auto; height: 28px; padding: 0 11px; border: 1px solid var(--role-cta-primary-border); border-radius: 8px; background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--role-cta-primary); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .14s; }
#iqxEditorHost .iq-allow-btn:hover { background: rgba(var(--b2-yellow-rgb), 0.24); }
/* Live stock indicator (DISPLAY-ONLY) — search rows, line rows, options hint.
   green = in stock (≥ qty on lines); amber = still purchasable but short of qty
   (build-to-order, informational not error); red = out of stock. */
#iqxEditorHost .iq-stock { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
#iqxEditorHost .iq-stock.ok { color: var(--b2-green); }
#iqxEditorHost .iq-stock.amber { color: var(--b2-amber); }
#iqxEditorHost .iq-stock.out { color: var(--b2-red); }
#iqxEditorHost .iq-stock.inline { font-size: inherit; font-weight: inherit; }
#iqxEditorHost .iq-li .li-stockrow { margin-top: 2px; line-height: 1.2; }
#iqxEditorHost .iq-li .li-stockrow:empty { display: none; }
/* keyboard hint on the Line Items card head */
#iqxEditorHost .iq-kbdhint { font-size: 12px; color: var(--b2-text-3); }
/* notes */
#iqxEditorHost .iq-staffnote { border-left: 2px solid var(--role-cta-primary-border); padding-left: 12px; margin-bottom: 12px; }
#iqxEditorHost .iq-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; color: var(--b2-amber); background: var(--b2-amber-bg); border: 1px solid var(--b2-amber-border); }
#iqxEditorHost .iq-field { margin-bottom: 12px; }
#iqxEditorHost .iq-field:last-child { margin-bottom: 0; }
#iqxEditorHost .iq-lbl-row { display: flex; align-items: center; gap: 8px; }
/* quick-fill chip row above a field (expiry presets, terms presets) —
   sized to the .iq-merge-chip family */
#iqxEditorHost .iq-chiprow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 7px; }
#iqxEditorHost .iq-chipbtn { height: 32px; padding: 0 12px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 999px; color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
#iqxEditorHost .iq-chipbtn:hover { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.14); }
/* selected chip (design mockup: gold tint) */
#iqxEditorHost .iq-chipbtn.on { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.14); }
/* "+ Custom term" affordance: dashed ghost chip */
#iqxEditorHost .iq-chipbtn.dashed { background: transparent; border-style: dashed; color: var(--b2-text-3); }
#iqxEditorHost .iq-chipbtn.dashed:hover { color: var(--b2-text); border-color: var(--b2-text-3); background: transparent; }
/* resolved expiry date inline after the chips */
#iqxEditorHost .iq-expdate { font-size: 12.5px; font-weight: 600; color: var(--b2-text-2); font-variant-numeric: tabular-nums; padding-left: 4px; }
/* Internal + Customer notes side by side (design mockup) */
#iqxEditorHost .iq-notes2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
#iqxEditorHost .iq-notes2 .iq-staffnote { margin-bottom: 0; }
@media (max-width: 900px) {
  #iqxEditorHost .iq-notes2 { grid-template-columns: 1fr; }
}
#iqxEditorHost .iq-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) {
  #iqxEditorHost .iq-grid2 { grid-template-columns: 1fr; }
}
/* sidebar — sticky against #iqxEditorHost's own scroll (top 74px was for the
   standalone app's fixed nav; the shell back bar sits outside the scroller) */
#iqxEditorHost .iq-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 900px) {
  #iqxEditorHost .iq-side { position: static; }
}
#iqxEditorHost .iq-trow { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; color: var(--b2-text-2); }
#iqxEditorHost .iq-trow .v { font-variant-numeric: tabular-nums; color: var(--b2-text); }
#iqxEditorHost .iq-trow .v.disc { color: var(--b2-green); }
#iqxEditorHost .iq-trow.total { border-top: 1px solid var(--b2-hairline-strong); margin-top: 6px; padding-top: 14px; font-size: 16px; font-weight: 800; color: var(--b2-text); }
#iqxEditorHost .iq-trow.total .v { font-size: 22px; color: var(--role-cta-primary); }
#iqxEditorHost .iq-money { width: 96px; height: 32px; padding: 0 9px 0 19px; text-align: right; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-money:focus { border-color: var(--role-cta-primary-border); outline: none; }
/* manual $ input with an absolute prefix (design mockup) */
#iqxEditorHost .iq-moneywrap { position: relative; display: inline-flex; }
#iqxEditorHost .iq-moneywrap .pfx { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--b2-text-3); pointer-events: none; }
/* Shipping/Tax rows: AUTO/MANUAL segment + status caption under (design mockup) */
#iqxEditorHost .iq-tblock { padding: 8px 0; }
#iqxEditorHost .iq-tblock .iq-trow.tight { padding: 0; }
#iqxEditorHost .iq-tlabel { display: inline-flex; align-items: center; gap: 8px; }
#iqxEditorHost .iq-seg2 { display: inline-flex; padding: 2px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 7px; }
#iqxEditorHost .iq-seg2 button { height: 20px; padding: 0 8px; border: 0; border-radius: 5px; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; background: transparent; color: var(--b2-text-3); transition: background .12s, color .12s; }
#iqxEditorHost .iq-seg2 button.on { background: var(--b2-surface-3); color: var(--b2-text); }
#iqxEditorHost .iq-tsub { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--b2-text-3); margin-top: 3px; }
#iqxEditorHost .iq-tsub .ok { display: inline-flex; color: var(--b2-green); }
/* save gating (design mockup): caption under Save, Ordered pill after convert */
#iqxEditorHost .iq-gate-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-ordered-pill { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--role-success-border); border-radius: 12px; background: var(--role-success-bg); color: var(--role-success); font-size: 12.5px; font-weight: 700; }
#iqxEditorHost .iq-action-row.solo { grid-template-columns: 1fr; }
#iqxEditorHost .iq-disc-inline { display: inline-flex; gap: 4px; align-items: center; }
#iqxEditorHost .iq-disc-inline select { height: 34px; width: 40px; padding: 0 2px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; color: var(--b2-text); font: inherit; -webkit-appearance: none; appearance: none; text-align: center; cursor: pointer; }
#iqxEditorHost .iq-disc-inline input { width: 64px; }
#iqxEditorHost .iq-calctax { text-align: right; margin: -4px 0 4px; }
/* chosen ShipperHQ method beside the Shipping label */
#iqxEditorHost .iq-trow .shipmeth { font-size: 12px; color: var(--b2-text-3); }
/* ShipperHQ method picker (shown when the last save returned rate options) */
#iqxEditorHost .iq-shipmethod { margin: -2px 0 4px; }
#iqxEditorHost .iq-shipmethod select { width: 100%; height: 34px; padding: 0 10px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; color: var(--b2-text); font: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; cursor: pointer; }
#iqxEditorHost .iq-shipmethod select:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#iqxEditorHost #iq-primary { display: flex; flex-direction: column; gap: 6px; }
#iqxEditorHost .iq-btn { width: 100%; height: 46px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#iqxEditorHost .iq-btn svg { flex: 0 0 auto; }
#iqxEditorHost .iq-btn-gold { background: var(--role-cta-primary); color: var(--eca-on-primary, #1a1300); font-weight: 700; box-shadow: 0 6px 20px rgba(var(--b2-yellow-rgb), 0.18); }
#iqxEditorHost .iq-btn-gold:hover { filter: brightness(1.05); }
#iqxEditorHost .iq-btn-sec { height: 42px; background: var(--b2-surface-2); color: var(--b2-text); border: 1px solid var(--b2-hairline-strong); font-size: 13px; }
#iqxEditorHost .iq-btn-sec:hover { background: var(--b2-surface-3); }
/* Send is the teal hero action (design handoff) */
#iqxEditorHost #iq-send { background: var(--b2-teal); color: #fff; border: 0; font-weight: 700; box-shadow: 0 6px 20px rgba(var(--b2-teal-rgb), 0.28); }
#iqxEditorHost #iq-send:hover { filter: brightness(1.12); }
#iqxEditorHost .iq-btn-danger { background: transparent; color: var(--role-danger); border: 1px solid var(--role-danger-border); }
#iqxEditorHost .iq-btn-danger:hover { background: var(--role-danger-bg); }
#iqxEditorHost .iq-btn:disabled { opacity: .6; cursor: default; }
#iqxEditorHost .iq-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#iqxEditorHost .iq-action-del { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--b2-hairline); display: flex; align-items: center; justify-content: center; gap: 4px; }
#iqxEditorHost .iq-action-del .sep { width: 1px; height: 16px; background: var(--b2-hairline-strong); flex: 0 0 auto; }
#iqxEditorHost .iq-btn-del, #iqxEditorHost .iq-btn-arch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--b2-text-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: color .12s, background .12s; }
#iqxEditorHost .iq-btn-del:hover { color: var(--role-danger); background: var(--role-danger-bg); }
#iqxEditorHost .iq-btn-arch:hover { color: var(--b2-text); background: var(--b2-surface-2); }
#iqxEditorHost .iq-btn-arch.restore { color: var(--role-cta-primary); }
#iqxEditorHost .iq-saved-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--role-success); }
/* archived banner + Order Margin box (rep-only, gold-tinted) */
#iqxEditorHost .iq-arch-banner { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; font-size: 12.5px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-arch-banner svg { flex: 0 0 auto; color: var(--b2-text-3); }
#iqxEditorHost .iq-ordermargin { margin-top: 8px; padding: 14px 16px; background: rgba(255, 255, 255, 0.039); border: 1px solid var(--role-cta-primary-border); border-radius: 18px; }
#iqxEditorHost .iq-ordermargin .omhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
#iqxEditorHost .iq-ordermargin .omtitle { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--role-cta-primary); }
#iqxEditorHost .iq-ordermargin .omtitle svg { color: var(--role-cta-primary); }
#iqxEditorHost .iq-ordermargin .omrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#iqxEditorHost .iq-ordermargin .omp { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
#iqxEditorHost .iq-ordermargin .omamt { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px; }
#iqxEditorHost .iq-ordermargin .omalbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--b2-text-3); }
#iqxEditorHost .iq-ordermargin .oma { font-size: 15px; font-weight: 700; color: var(--b2-text); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-ordermargin .omcost { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(var(--b2-yellow-rgb), 0.22); font-size: 11.5px; color: var(--role-cta-primary); }
#iqxEditorHost .iq-ordermargin .omc { color: var(--role-cta-primary); font-variant-numeric: tabular-nums; }
#iqxEditorHost .iq-ordermargin .omnote { font-size: 10.5px; color: var(--role-cta-primary); margin-top: 7px; line-height: 1.4; }
#iqxEditorHost .iq-convert-ok { font-size: 13px; text-align: center; color: var(--role-success); }
#iqxEditorHost .iq-linkbtn { background: transparent; border: 0; color: var(--role-info); cursor: pointer; font: inherit; padding: 0; font-size: 12.5px; }
/* "View past quotes" jump under the customer email */
#iqxEditorHost .iq-pastlink { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; }
#iqxEditorHost .iq-pastlink:hover { text-decoration: underline; }
#iqxEditorHost .iq-ev { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--b2-hairline); font-size: 12.5px; align-items: baseline; color: var(--b2-text-2); }
#iqxEditorHost .iq-ev:last-child { border-bottom: 0; }
#iqxEditorHost .iq-ev .when { color: var(--b2-text-3); white-space: nowrap; flex: 0 0 58px; font-variant-numeric: tabular-nums; }
/* toast */
#iqxEditorHost .iq-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--b2-surface-3); color: var(--b2-text); padding: 12px 20px; border-radius: 12px; border: 1px solid var(--b2-hairline-strong); box-shadow: var(--eca-shadow-modal, 0 24px 56px rgba(20,20,22,0.55), 0 2px 8px rgba(20,20,22,0.40)); z-index: 200; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; }
#iqxEditorHost .iq-toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#iqxEditorHost .iq-toast.err { border-color: var(--role-danger-border); color: var(--role-danger); }
/* ─── Settings → Email Templates ────────────────────────────────────────────── */
#iqxEditorHost .iq-settings { max-width: 900px; }
#iqxEditorHost .iq-settings > #iq-settings-body { max-width: 840px; margin: 0 auto; }
#iqxEditorHost .iq-tpl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
#iqxEditorHost .iq-tpl-sub { font-size: 14px; color: var(--b2-text-2); margin: 6px 0 0; max-width: 54ch; }
#iqxEditorHost .iq-seg { display: inline-flex; padding: 3px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; flex: 0 0 auto; }
#iqxEditorHost .iq-seg-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 15px; border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--b2-text-3); transition: background .12s, color .12s; }
#iqxEditorHost .iq-seg-btn.active { background: var(--role-cta-primary); color: var(--eca-on-primary, #1a1300); }
#iqxEditorHost .iq-tpl-tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-tpl-tab { height: 41px; padding: 0 15px; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--b2-text-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; }
#iqxEditorHost .iq-tpl-tab:hover { color: var(--b2-text); }
#iqxEditorHost .iq-tpl-tab.active { color: var(--b2-text); border-bottom-color: var(--role-cta-primary); }
#iqxEditorHost .iq-tpl-tab.add { display: inline-flex; align-items: center; gap: 6px; color: var(--b2-text-3); }
#iqxEditorHost .iq-tpl-sheet { background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-top: 0; border-radius: 0 0 18px 18px; overflow: hidden; }
#iqxEditorHost .iq-tpl-toolbar { display: flex; align-items: center; gap: 10px; padding: 13px 22px; background: var(--b2-surface-0); border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-tpl-toolbar .dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; }
#iqxEditorHost .iq-tpl-name { min-width: 0; max-width: 280px; font-size: 14px; font-weight: 700; color: var(--b2-text); background: transparent; border: 0; border-bottom: 1px solid transparent; font-family: inherit; padding: 3px 2px; }
#iqxEditorHost .iq-tpl-name:focus { border-bottom-color: var(--b2-hairline-strong); outline: none; }
#iqxEditorHost .iq-tpl-prevlabel { font-size: 13px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-tpl-savebtn { height: 33px; padding: 0 15px; background: var(--role-cta-primary); color: var(--eca-on-primary, #1a1300); border: 0; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#iqxEditorHost .iq-tpl-savebtn:hover { filter: brightness(1.05); }
#iqxEditorHost .iq-tpl-savebtn:disabled { opacity: .6; }
#iqxEditorHost .iq-tpl-sample { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--role-cta-primary); background: rgba(var(--b2-yellow-rgb), 0.13); border: 1px solid var(--role-cta-primary-border); border-radius: 6px; padding: 4px 9px; }
#iqxEditorHost .iq-tpl-meta { padding: 2px 22px 0; }
#iqxEditorHost .iq-tpl-meta .row { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-tpl-meta .k { flex: 0 0 62px; font-size: 12.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-tpl-meta .v { font-size: 13.5px; color: var(--b2-text-2); }
#iqxEditorHost .iq-tpl-subject { flex: 1; min-width: 0; height: 34px; padding: 0 11px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text); font: inherit; font-size: 14px; font-weight: 600; }
#iqxEditorHost .iq-tpl-subject:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-tpl-subject-preview { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--b2-text); }
#iqxEditorHost .iq-tpl-merge { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 12px 22px; background: rgba(0,0,0,0.14); border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-tpl-merge .lbl { font-size: 11px; font-weight: 600; color: var(--b2-text-3); margin-right: 2px; }
#iqxEditorHost .iq-merge-chip { height: 26px; padding: 0 10px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 7px; color: var(--b2-text-2); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
#iqxEditorHost .iq-merge-chip:hover { filter: brightness(1.4); }
#iqxEditorHost .iq-tpl-bodywrap { padding: 20px 22px 6px; }
#iqxEditorHost .iq-tpl-body { width: 100%; padding: 0; background: transparent; border: 0; color: var(--b2-text); font: inherit; font-size: 15px; line-height: 1.65; resize: vertical; outline: none; min-height: 200px; }
#iqxEditorHost .iq-tpl-body-preview { font-size: 15px; color: var(--b2-text); line-height: 1.7; white-space: pre-wrap; min-height: 200px; }
#iqxEditorHost .iq-tpl-sigzone { border-top: 1px solid var(--b2-hairline); background: rgba(0,0,0,0.12); }
#iqxEditorHost .iq-tpl-sighead { display: flex; align-items: center; gap: 9px; padding: 13px 22px; flex-wrap: wrap; color: var(--b2-text-3); }
#iqxEditorHost .iq-tpl-sighead .l { font-size: 12.5px; font-weight: 700; color: var(--b2-text-2); }
#iqxEditorHost .iq-tpl-sighead .s { font-size: 11.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-tpl-sighead .ap { font-size: 12px; color: var(--b2-text-2); }
#iqxEditorHost .iq-tpl-sigbody { padding: 0 22px 18px; }
#iqxEditorHost .iq-tpl-sig { width: 100%; padding: 12px 13px; background: var(--b2-surface-2); border: 1px dashed var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text-2); font: inherit; font-size: 13px; line-height: 1.55; resize: vertical; }
#iqxEditorHost .iq-tpl-sig:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-tpl-sig-preview { font-size: 14px; color: var(--b2-text-2); line-height: 1.6; white-space: pre-wrap; }
#iqxEditorHost .iq-team { margin-top: 16px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline); border-radius: 16px; overflow: hidden; }
#iqxEditorHost .iq-team-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 15px 20px; background: transparent; border: 0; cursor: pointer; font: inherit; text-align: left; }
#iqxEditorHost .iq-team-head:hover { background: var(--b2-surface-2); }
#iqxEditorHost .iq-team-head .t { font-size: 12.5px; font-weight: 700; color: var(--b2-text); }
#iqxEditorHost .iq-team-head .sub { font-size: 11.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-team-head .chev { color: var(--b2-text-3); transition: transform .15s; display: inline-flex; }
#iqxEditorHost .iq-team-list { border-top: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-team-row { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-team-row:last-child { border-bottom: 0; }
#iqxEditorHost .iq-team-row .nm { font-size: 13px; font-weight: 600; }
#iqxEditorHost .iq-team-row .me { color: var(--role-cta-primary); font-weight: 600; }
#iqxEditorHost .iq-team-row .sig { font-size: 12px; color: var(--b2-text-2); line-height: 1.5; white-space: pre-wrap; margin-top: 4px; }
#iqxEditorHost .iq-team-empty { padding: 16px 20px; font-size: 12.5px; color: var(--b2-text-3); }
/* ─── Send preview modal ────────────────────────────────────────────────────── */
#iqxEditorHost .iq-sm-overlay { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 24px; }
#iqxEditorHost .iq-sm-scrim { position: absolute; inset: 0; background: rgba(15, 15, 17, 0.66); }
#iqxEditorHost .iq-sm-card { position: relative; width: 600px; max-width: 100%; max-height: 88vh; overflow-y: auto; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 20px; box-shadow: 0 24px 56px rgba(20, 20, 22, 0.55); }
#iqxEditorHost .iq-sm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-sm-title { font-size: 16px; font-weight: 700; }
#iqxEditorHost .iq-sm-sub { font-size: 12.5px; color: var(--b2-text-3); margin-top: 2px; }
#iqxEditorHost .iq-sm-x { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--b2-text-2); cursor: pointer; background: transparent; }
#iqxEditorHost .iq-sm-x:hover { background: var(--b2-surface-2); }
#iqxEditorHost .iq-sm-body { padding: 20px 22px; }
#iqxEditorHost .iq-sm-label { display: block; font-size: 12px; font-weight: 600; color: var(--b2-text-2); margin-bottom: 7px; }
#iqxEditorHost .iq-sm-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#iqxEditorHost .iq-sm-pill { height: 34px; padding: 0 14px; border: 1px solid var(--b2-hairline-strong); border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--b2-surface-2); color: var(--b2-text-2); }
#iqxEditorHost .iq-sm-pill:hover { filter: brightness(1.15); }
#iqxEditorHost .iq-sm-pill.active { background: var(--role-cta-primary); color: var(--eca-on-primary, #1a1300); border-color: transparent; }
#iqxEditorHost .iq-sm-to { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 13px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; margin-bottom: 14px; }
#iqxEditorHost .iq-sm-to .chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: var(--b2-text); background: var(--b2-surface-3); border: 1px solid var(--b2-hairline-strong); padding: 3px 10px; border-radius: 999px; }
#iqxEditorHost .iq-sm-input { width: 100%; height: 42px; padding: 0 13px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; margin-bottom: 14px; }
#iqxEditorHost .iq-sm-input:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-sm-textarea { width: 100%; padding: 12px 13px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 13.5px; line-height: 1.6; resize: vertical; }
#iqxEditorHost .iq-sm-textarea:focus { border-color: var(--role-cta-primary-border); outline: none; }
/* Send-as rep row + live reply-to caption */
#iqxEditorHost .iq-sm-sendas { margin-bottom: 14px; }
#iqxEditorHost .iq-sm-select { width: 100%; height: 42px; padding: 0 13px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 12px; color: var(--b2-text); font: inherit; font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer; }
#iqxEditorHost .iq-sm-select:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-sm-replyto { font-size: 11.5px; color: var(--b2-text-3); margin-top: 6px; }
/* {{quote_link}} explainer under the message body */
#iqxEditorHost .iq-sm-tokennote { font-size: 11.5px; color: var(--b2-text-3); margin-top: 7px; line-height: 1.5; }
#iqxEditorHost .iq-sm-tokennote code { font-family: inherit; color: var(--b2-text-2); background: var(--b2-surface-2); border: 1px solid var(--b2-hairline); border-radius: 5px; padding: 1px 5px; }
#iqxEditorHost .iq-sm-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--b2-hairline); background: rgba(0, 0, 0, 0.18); }
#iqxEditorHost .iq-sm-cancel { height: 42px; padding: 0 18px; background: var(--b2-surface-3); color: var(--b2-text); border: 0; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#iqxEditorHost .iq-sm-cancel:hover { filter: brightness(1.3); }
#iqxEditorHost .iq-sm-send { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; background: var(--role-cta-primary); color: var(--eca-on-primary, #1a1300); border: 0; border-radius: 11px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(var(--b2-yellow-rgb), 0.26); }
#iqxEditorHost .iq-sm-send:hover { filter: brightness(1.05); }
#iqxEditorHost .iq-sm-send:disabled { opacity: .6; }

/* ── configurable-product options (variant options + customization modifiers) ──
   A compact "Options" toggle under a catalog line's name reveals a full-width
   accent panel spanning the line table. Small controls reuse the editor's
   iq-in / chip family so it reads as one surface. */
#iqxEditorHost .li-optbtn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 9px 3px 6px; background: var(--b2-surface-3); border: 1px solid var(--b2-hairline-strong); border-radius: 999px; color: var(--b2-text-2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
#iqxEditorHost .li-optbtn:hover { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.14); }
#iqxEditorHost .li-optbtn svg { transition: transform .15s; }
#iqxEditorHost .li-optbtn.open { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.14); }
#iqxEditorHost .li-optbtn.open svg { transform: rotate(180deg); }
/* full-width collapsible panel; a sibling of .iq-li inside the table */
#iqxEditorHost .iq-li-opts { display: none; border-bottom: 1px solid var(--b2-hairline); background: var(--b2-surface-0); }
#iqxEditorHost .iq-li-opts.open { display: block; }
#iqxEditorHost .iq-li-opts .iq-opts-body { padding: 12px 14px 13px 63px; }
#iqxEditorHost .iq-opts-empty { font-size: 12.5px; color: var(--b2-text-3); }
#iqxEditorHost .iq-opts-sec { margin-bottom: 12px; }
#iqxEditorHost .iq-opts-sec + .iq-opts-sec { border-top: 1px solid var(--b2-hairline); padding-top: 11px; }
#iqxEditorHost .iq-opts-sec:last-child { margin-bottom: 0; }
/* Section header component — shared by "Variant Options" and "Customization"
   so the two read as sibling stages of building the product. A small icon
   badge + title + optional count chip. Customization (.accent) carries a
   purple tint on its badge and a fine left tick to mark it as a core stage;
   Variant Options carries a neutral/gold badge. Both stay compact. */
#iqxEditorHost .iq-opts-sechead { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 12px; font-weight: 700; color: var(--b2-text); letter-spacing: -.01em; }
#iqxEditorHost .iq-opts-sechead .ttl { line-height: 1; }
#iqxEditorHost .iq-opts-sechead .ic { flex: 0 0 auto; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(var(--b2-yellow-rgb), 0.12); color: var(--b2-yellow); border: 1px solid rgba(var(--b2-yellow-rgb), 0.28); }
#iqxEditorHost .iq-opts-sechead .ic svg { width: 13px; height: 13px; }
/* count chip — small pill next to the title (e.g. "2 of 8 set") */
#iqxEditorHost .iq-opts-sechead .ct { text-transform: none; letter-spacing: 0; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--b2-surface-3); color: var(--b2-text-2); font-variant-numeric: tabular-nums; }
/* Customization: purple accent — a core stage, not an asterisk */
#iqxEditorHost .iq-opts-sechead.accent { position: relative; padding-left: 9px; }
#iqxEditorHost .iq-opts-sechead.accent::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--b2-purple); }
#iqxEditorHost .iq-opts-sechead.accent .ic { background: var(--b2-purple-bg); color: var(--b2-purple); border-color: var(--b2-purple-border); }
#iqxEditorHost .iq-opts-sechead.accent .ct { background: var(--b2-purple-bg); color: var(--b2-purple); border: 1px solid var(--b2-purple-border); }
#iqxEditorHost .iq-opts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; align-items: start; }
#iqxEditorHost .iq-opt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#iqxEditorHost .iq-opt.iq-opt-wide { grid-column: 1 / -1; }
/* one-line label clamp — full storefront text lives in the title attr; the
   required star sits outside the ellipsized span so it never clips away */
#iqxEditorHost .iq-opt > .l { display: flex; align-items: baseline; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 15px; color: var(--b2-text-2); }
#iqxEditorHost .iq-opt > .l .lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#iqxEditorHost .iq-opt .req { flex: 0 0 auto; color: var(--b2-amber); font-weight: 800; }
#iqxEditorHost .iq-opt-sel, #iqxEditorHost select.iq-mod-in { width: 100%; height: 36px; padding: 0 10px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 10px; color: var(--b2-text); font: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; cursor: pointer; }
#iqxEditorHost .iq-opt-sel:focus, #iqxEditorHost select.iq-mod-in:focus { border-color: var(--role-cta-primary-border); outline: none; }
#iqxEditorHost .iq-opt .iq-mod-in.iq-in { height: 36px; font-size: 13px; }
#iqxEditorHost .iq-mod-ck { display: inline-flex; align-items: center; gap: 7px; height: 36px; font-size: 13px; color: var(--b2-text); font-weight: 600; }
#iqxEditorHost .iq-mod-ck input { width: 16px; height: 16px; accent-color: var(--role-cta-primary); cursor: pointer; }
#iqxEditorHost .iq-opts-hint { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11.5px; font-weight: 600; }
#iqxEditorHost .iq-opts-hint.ok { color: var(--b2-green); }
#iqxEditorHost .iq-opts-hint.ok svg { color: var(--b2-green); }
#iqxEditorHost .iq-opts-hint.warn { color: var(--b2-amber); }
#iqxEditorHost .iq-opts-hint.small { margin-top: 3px; font-size: 10.5px; }
/* ghost expander for the hidden (optional + empty) customization options */
#iqxEditorHost .iq-opts-more { display: inline-flex; align-items: center; margin-top: 9px; padding: 3px 11px; background: transparent; border: 1px dashed var(--b2-hairline-strong); border-radius: 999px; color: var(--b2-text-3); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: color .12s, border-color .12s; }
#iqxEditorHost .iq-opts-more:hover { color: var(--b2-text-2); border-color: var(--b2-text-3); }
/* swatch + pill-chip choice affordances (display-type aware options/modifiers) */
#iqxEditorHost .iq-swatchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; }
#iqxEditorHost .iq-swatch { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--b2-hairline-strong); padding: 0; cursor: pointer; background-color: var(--b2-surface-2); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); transition: transform .1s, box-shadow .12s; }
#iqxEditorHost .iq-swatch:hover { transform: scale(1.12); }
#iqxEditorHost .iq-swatch.on { border-color: transparent; box-shadow: 0 0 0 2px var(--b2-surface-0), 0 0 0 4px var(--role-cta-primary); }
#iqxEditorHost .iq-swatch-sel { margin-left: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--b2-text-2); }
#iqxEditorHost .iq-optchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 30px; }
#iqxEditorHost .iq-optchip { height: 28px; padding: 0 11px; font-size: 11.5px; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; }
#iqxEditorHost .iq-optchip .adj { font-weight: 700; color: var(--b2-text-3); }
#iqxEditorHost .iq-optchip.on .adj { color: inherit; opacity: .8; }

/* ── day-one composer-feedback additions ─────────────────────────────── */
/* PO # / Project Name reference row under the editor header */
#iqxEditorHost .iq-ed-meta { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px; margin: -4px 0 16px; }
#iqxEditorHost .iq-ed-metafield { display: flex; flex-direction: column; gap: 5px; }
@media (max-width: 720px) { #iqxEditorHost .iq-ed-meta { grid-template-columns: 1fr; } }

/* per-line customer note: toggle icon by the Options pill + inline field below the row */
#iqxEditorHost .li-cbody-acts { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
#iqxEditorHost .li-cbody-acts .li-optbtn { margin-top: 0; }
#iqxEditorHost .li-notebtn { display: inline-grid; place-items: center; width: 28px; height: 26px; flex: 0 0 auto; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 8px; color: var(--b2-text-3); cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
#iqxEditorHost .li-notebtn:hover { color: var(--b2-text); }
#iqxEditorHost .li-notebtn.open { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); }
#iqxEditorHost .li-notebtn.has { color: var(--role-cta-primary); border-color: var(--role-cta-primary-border); background: rgba(var(--b2-yellow-rgb), 0.14); }
#iqxEditorHost .iq-li-note { display: none; padding: 10px 14px 12px; border-bottom: 1px solid var(--b2-hairline); background: var(--b2-surface-0); }
#iqxEditorHost .iq-li-note.open { display: block; }
#iqxEditorHost .iq-li-note .iq-lbl { margin-bottom: 3px; }
#iqxEditorHost .iq-li-note textarea { width: 100%; resize: vertical; }

/* no-real-SKU alert: loud banner in the Options panel + small tag on the row */
#iqxEditorHost .iq-opts-nosku { margin-top: 10px; padding: 9px 12px; background: var(--role-danger-bg); border: 1px solid var(--role-danger); border-radius: 10px; color: var(--role-danger); font-size: 12px; font-weight: 700; line-height: 1.35; }
#iqxEditorHost .iq-nosku-tag { display: inline-flex; align-items: center; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--role-danger-bg); border: 1px solid var(--role-danger); color: var(--role-danger); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }

/* auto-growing text-modifier textareas (labeling instructions get room) */
#iqxEditorHost textarea.iq-mod-textarea { width: 100%; min-height: 36px; padding: 8px 10px; line-height: 1.4; resize: none; overflow: hidden; font-family: inherit; }

/* labeling quick-select chips pinned atop Customization */
#iqxEditorHost .iq-lbl-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; }
#iqxEditorHost .iq-lbl-quick .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--b2-text-3); }
#iqxEditorHost .iq-lbl-chip { height: 27px; padding: 0 12px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 999px; color: var(--b2-text-2); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: color .12s, background .12s, border-color .12s; }
#iqxEditorHost .iq-lbl-chip:hover { color: var(--b2-text); border-color: var(--role-cta-primary-border); }

/* customer badges (group name + tax exempt) — card summary + search rows */
#iqxEditorHost .iq-cbadges { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-left: 7px; vertical-align: middle; }
#iqxEditorHost .iq-cbadge { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
#iqxEditorHost .iq-cbadge.tax { color: var(--b2-green); border-color: rgba(48, 209, 88, 0.4); background: rgba(48, 209, 88, 0.14); text-transform: uppercase; }

/* sent versions + restore (in the History card) */
#iqxEditorHost .iq-sentver { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--b2-hairline); }
#iqxEditorHost .iq-sentver-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; background: transparent; border: 0; color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#iqxEditorHost .iq-sentver-toggle .chev { display: inline-flex; color: var(--b2-text-3); transition: transform .15s; }
#iqxEditorHost .iq-sentver-toggle.open .chev { transform: rotate(180deg); }
#iqxEditorHost .iq-sentver-list { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
#iqxEditorHost .iq-sentver-empty { font-size: 12px; color: var(--b2-text-3); padding: 4px 0; }
#iqxEditorHost .iq-sentver-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline); border-radius: 10px; }
#iqxEditorHost .iq-sentver-row .sv-when { font-size: 12px; font-weight: 700; color: var(--b2-text); }
#iqxEditorHost .iq-sentver-row .sv-sub { font-size: 11px; color: var(--b2-text-3); margin-top: 1px; }
#iqxEditorHost .iq-sentver-restore { flex: 0 0 auto; height: 28px; padding: 0 12px; background: var(--b2-surface-3); border: 1px solid var(--b2-hairline-strong); border-radius: 8px; color: var(--b2-text); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; }
#iqxEditorHost .iq-sentver-restore:hover { border-color: var(--role-cta-primary-border); color: var(--role-cta-primary); }

/* Paid-but-"Awaiting Payment" sync flag + explainer modal. */
.ord-syncflag{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-top:12px;background:rgba(245,181,68,0.10);border:1px solid rgba(245,181,68,0.34);border-radius:11px;padding:9px 13px;font-size:12.5px;color:var(--hd-fg);cursor:pointer;font-family:inherit;transition:background .12s;}
.ord-syncflag:hover{background:rgba(245,181,68,0.16);}
.ord-syncflag svg{flex:0 0 auto;color:#f5b442;}
.ord-syncflag > span:first-of-type{flex:1;min-width:0;}
.ord-syncflag b{color:#f5b442;font-weight:800;}
.ord-syncflag-more{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--hd-cyan);white-space:nowrap;}
.ord-sync-modal{max-width:520px;}
.ord-sync-lead{margin:0 0 12px;font-size:13.5px;color:var(--hd-fg2);}
.ord-sync-facts{background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:11px;padding:10px 14px;margin-bottom:14px;}
.ord-sync-kv{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-size:13px;}
.ord-sync-kv + .ord-sync-kv{border-top:1px solid var(--hd-line3);}
.ord-sync-kv span:first-child{color:var(--hd-fg4);font-weight:700;}
.ord-sync-kv span:last-child{color:var(--hd-fg);font-weight:700;}
.ord-sync-modal .ec-modal-body p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--hd-fg2);}
.ord-sync-modal .ec-modal-body p:last-child{margin-bottom:0;}
.ord-sync-modal .ec-modal-body b{color:var(--hd-fg);}

/* Comment reactions + replies — one compact foot row; tools fade in on hover. */
.ord-cmt-foot{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:3px;min-height:20px;}
.ord-rx-chip{display:inline-flex;align-items:center;gap:4px;background:var(--hd-surf2);border:1px solid var(--hd-line2);border-radius:999px;padding:0 7px 0 6px;height:20px;font-size:12px;line-height:1;cursor:pointer;font-family:inherit;color:var(--hd-fg2);transition:border-color .1s,background .1s;}
.ord-rx-chip:hover{border-color:var(--hd-line);}
.ord-rx-chip .n{font-size:10.5px;font-weight:800;color:var(--hd-fg3);}
.ord-rx-chip.mine{background:rgba(62,200,218,0.14);border-color:rgba(62,200,218,0.45);}
.ord-rx-chip.mine .n{color:var(--hd-cyan);}
.ord-cmt-tool{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px 0 5px;border:0;background:transparent;color:var(--hd-fg4);font-size:11.5px;font-weight:700;font-family:inherit;cursor:pointer;border-radius:6px;opacity:0;transition:opacity .1s,color .1s,background .1s;}
.ord-cmt-tool svg{width:15px;height:15px;}
.ord-cmt:hover .ord-cmt-tool{opacity:1;}
.ord-cmt-tool:hover{color:var(--hd-cyan);background:var(--hd-surf2);}
.ord-rx-pop{position:fixed;z-index:400;display:flex;gap:2px;background:var(--hd-pane);border:1px solid var(--hd-line);border-radius:12px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.ord-rx-pop button{background:transparent;border:0;font-size:19px;line-height:1;padding:5px 6px;border-radius:8px;cursor:pointer;}
.ord-rx-pop button:hover{background:var(--hd-surf2);}
.ord-cmt-replies{margin:2px 0 0 30px;padding-left:14px;border-left:2px solid var(--hd-line3);display:flex;flex-direction:column;gap:12px;}
.ord-cmt-reply .ec-ava{width:26px;height:26px;font-size:10px;}
.ord-cmt-replybar{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--hd-fg3);background:var(--hd-surf);border:1px solid var(--hd-line3);border-radius:9px;padding:6px 10px;margin-bottom:8px;}
.ord-cmt-replybar svg{color:var(--hd-cyan);flex:0 0 auto;}
.ord-cmt-replybar b{color:var(--hd-fg2);}
.ord-cmt-replybar button{margin-left:auto;background:0;border:0;color:var(--hd-fg4);font-size:16px;line-height:1;cursor:pointer;padding:0 2px;}
.ord-cmt-replybar button:hover{color:var(--hd-red);}

/* Body-mounted floating popovers live OUTSIDE .hd2, where the --hd-* color
   tokens are scoped — so redeclare the palette on them or they render with
   no background/border (see-through). */
.ord-remind-pop, .ord-rx-pop {
  --hd-bg:#1c1d1e; --hd-pane:#212324; --hd-line:#3b3e40; --hd-line2:#34373a; --hd-line3:#303334;
  --hd-fg:#fff; --hd-fg2:#b8babb; --hd-fg3:#8f9294; --hd-fg4:#7f8284; --hd-surf:#262829; --hd-surf2:#2c2f30;
  --hd-yellow:var(--role-cta-primary); --hd-cyan:#3ec8da; --hd-green:#4ccf7a; --hd-purple:#a86cff; --hd-red:#ff6b6b;
}

/* Order follow-up reminder — header pill + "remind me" popover. */
.ord-remind-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(var(--b2-yellow-rgb),0.12);border:1px solid rgba(var(--b2-yellow-rgb),0.4);color:#f5b442;border-radius:10px;font-size:12px;font-weight:700;padding:6px 8px 6px 11px;white-space:nowrap;}
.ord-remind-pill svg{flex:0 0 auto;}
.ord-remind-pill button{background:0;border:0;color:#cdb768;font-size:15px;line-height:1;cursor:pointer;padding:0 2px;}
.ord-remind-pill button:hover{color:var(--hd-red);}
.ord-remind-pop{position:fixed;z-index:400;width:280px;background:var(--hd-pane);border:1px solid var(--hd-line);border-radius:14px;padding:14px;box-shadow:0 16px 44px rgba(0,0,0,.55);}
.ord-remind-title{font-size:13px;font-weight:800;color:var(--hd-fg);margin-bottom:10px;}
.ord-remind-quick{display:flex;gap:6px;margin-bottom:10px;}
.ord-remind-quick button{flex:1;background:var(--hd-surf);border:1px solid var(--hd-line2);color:var(--hd-fg2);border-radius:9px;font-size:11.5px;font-weight:700;padding:8px 4px;cursor:pointer;font-family:inherit;}
.ord-remind-quick button:hover{color:#fff;border-color:var(--hd-yellow);background:var(--hd-surf2);}
.ord-remind-lbl{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg4);margin-bottom:10px;}
.ord-remind-lbl input{display:block;width:100%;margin-top:5px;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:8px;color:#fff;font:inherit;font-size:12.5px;padding:7px 9px;box-sizing:border-box;}
.ord-remind-note{width:100%;background:var(--hd-bg);border:1px solid var(--hd-line2);border-radius:8px;color:#fff;font:inherit;font-size:12.5px;padding:8px 10px;box-sizing:border-box;margin-bottom:10px;}
.ord-remind-note:focus,.ord-remind-lbl input:focus{outline:none;border-color:var(--hd-yellow);}
.ord-remind-foot{display:flex;gap:8px;}

/* ── Sales Dashboard: AOV / New-vs-Returning / Top Categories ─────────── */
.sdash-split-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin: 6px 0 14px; background: var(--hd-surf); }
.sdash-split-bar span { display: block; height: 100%; }
.sd-split-new { background: var(--hd-yellow); }
.sd-split-ret { background: var(--hd-cyan); }
.sdash-split-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--hd-fg2); }
.sdash-split-legend b { color: #fff; }
.sd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.sd-dot-new { background: var(--hd-yellow); }
.sd-dot-ret { background: var(--hd-cyan); }
.sdash-split-amt { color: var(--hd-fg4); margin-left: 6px; }
.sdash-cat-list { display: flex; flex-direction: column; gap: 11px; }
.sdash-cat-head { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 4px; }
.sdash-cat-name { color: var(--hd-fg2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdash-cat-amt { color: #fff; font-weight: 800; flex: 0 0 auto; }
.sdash-cat-track { height: 7px; border-radius: 4px; background: var(--hd-surf); overflow: hidden; }
.sdash-cat-track span { display: block; height: 100%; background: var(--hd-yellow); border-radius: 4px; }
.sdash-cat-note { font-size: 11px; color: var(--hd-fg4); margin-top: 10px; }
@media (max-width: 1150px) {
  .sdash-aov { grid-column: span 4; }
  .sdash-split { grid-column: span 8; }
  .sdash-cats { grid-column: span 12; }
}

/* ═══════════════ EMPLOYEE OF THE MONTH (dashboardMode 'eotm') ═══════════════
   Lives inside .ec-shell, so the --hd-* tokens are in scope. */
.eotm{max-width:980px;margin:0 auto;padding:28px 28px 60px;width:100%;}
.eotm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.eotm-title{margin:4px 0 6px;font-size:26px;font-weight:800;color:var(--hd-fg);}
.eotm-sub{font-size:13.5px;color:var(--hd-fg3);}
.eotm-sub b{color:var(--hd-fg2);}
.eotm-btn{background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg2);font:inherit;font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:border-color .14s,color .14s;}
.eotm-btn:hover:not(:disabled){border-color:var(--hd-yellow);color:var(--hd-fg);}
.eotm-btn:disabled{opacity:.45;cursor:default;}
.eotm-link{background:none;border:none;padding:0;font:inherit;color:var(--hd-yellow);cursor:pointer;text-decoration:underline;}
.eotm-tabs{display:flex;gap:8px;margin-bottom:18px;}
.eotm-tab{background:none;border:1px solid var(--hd-line2);border-radius:999px;color:var(--hd-fg3);font:inherit;font-size:13px;font-weight:600;padding:7px 16px;cursor:pointer;transition:all .14s;}
.eotm-tab:hover{color:var(--hd-fg);}
.eotm-tab.active{background:rgba(var(--b2-yellow-rgb),0.13);border-color:var(--hd-yellow);color:var(--hd-yellow);}
.eotm-tab-lock{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin-left:4px;}
.eotm-loading,.eotm-empty{padding:36px 0;text-align:center;color:var(--hd-fg3);font-size:14px;}
.eotm-editing-note{margin-bottom:14px;padding:10px 14px;border:1px solid rgba(var(--b2-yellow-rgb),0.3);background:rgba(var(--b2-yellow-rgb),0.08);border-radius:10px;font-size:13px;color:var(--hd-fg2);}

/* Voted receipt */
.eotm-voted-card{display:flex;align-items:center;gap:18px;background:var(--hd-surf);border:1px solid rgba(var(--b2-green-rgb),0.35);border-radius:16px;padding:22px;flex-wrap:wrap;}
.eotm-voted-check{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(var(--b2-green-rgb),0.14);color:var(--hd-green);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;}
.eotm-voted-body{flex:1 1 240px;min-width:0;}
.eotm-voted-lbl{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg3);margin-bottom:6px;}
.eotm-voted-who{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--hd-fg);}
.eotm-voted-reason{margin-top:8px;font-size:13.5px;color:var(--hd-fg2);font-style:italic;}

/* Ballot */
.eotm-ballot{background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:16px;padding:22px;}
.eotm-ballot-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.eotm-ballot-title{font-size:16px;font-weight:700;color:var(--hd-fg);}
.eotm-filter{background:var(--hd-pane);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font:inherit;font-size:13px;padding:8px 12px;width:220px;max-width:100%;}
.eotm-filter:focus{outline:none;border-color:var(--hd-yellow);}
.eotm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:44vh;overflow-y:auto;overflow-x:hidden;padding:8px 8px 2px 2px;}
.eotm-person{position:relative;display:flex;align-items:center;gap:10px;background:var(--hd-pane);border:1px solid var(--hd-line3);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--hd-fg2);font:inherit;text-align:left;transition:border-color .12s,background .12s;}
.eotm-person:hover{border-color:var(--hd-line);color:var(--hd-fg);}
.eotm-person.selected{border-color:var(--hd-yellow);background:rgba(var(--b2-yellow-rgb),0.1);color:var(--hd-fg);}
.eotm-person-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.eotm-person-check{position:absolute;top:-7px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--hd-yellow);color:#1c1d1e;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.eotm-avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--hd-surf2);}
.eotm-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:var(--hd-line);}
.eotm-reason-wrap{margin-top:18px;}
.eotm-reason-lbl{display:block;font-size:13px;font-weight:700;color:var(--hd-fg2);margin-bottom:7px;}
.eotm-reason-lbl span{font-weight:500;color:var(--hd-fg4);}
.eotm-reason{width:100%;min-height:76px;resize:vertical;background:var(--hd-pane);border:1px solid var(--hd-line2);border-radius:10px;color:var(--hd-fg);font:inherit;font-size:13.5px;padding:10px 12px;}
.eotm-reason:focus{outline:none;border-color:var(--hd-yellow);}
.eotm-submit-row{margin-top:16px;display:flex;justify-content:flex-end;}
.eotm-submit{background:var(--hd-yellow);border:none;border-radius:10px;color:#1c1d1e;font:inherit;font-size:14px;font-weight:800;padding:11px 22px;cursor:pointer;transition:opacity .14s;}
.eotm-submit:hover:not(:disabled){opacity:.88;}
.eotm-submit:disabled{opacity:.4;cursor:default;}

/* Standings (admin) */
.eotm-stand-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.eotm-viewtoggle{display:flex;gap:8px;}
.eotm-monthnav{display:flex;align-items:center;gap:10px;}
.eotm-monthnav-lbl{font-size:14px;font-weight:700;color:var(--hd-fg);min-width:150px;text-align:center;}
.eotm-stand-total{font-size:12.5px;color:var(--hd-fg3);margin-bottom:10px;}
.eotm-stand-list{display:flex;flex-direction:column;gap:8px;}
.eotm-stand-row{display:flex;align-items:center;gap:12px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:12px;padding:12px 16px;}
.eotm-stand-row.leader{border-color:rgba(var(--b2-yellow-rgb),0.45);}
.eotm-stand-rank{flex:0 0 34px;text-align:center;font-size:14px;font-weight:800;color:var(--hd-fg3);}
.eotm-stand-row.leader .eotm-stand-rank{font-size:18px;}
.eotm-stand-mid{flex:1 1 auto;min-width:0;}
.eotm-stand-name{font-size:14px;font-weight:700;color:var(--hd-fg);margin-bottom:5px;}
.eotm-stand-track{height:6px;border-radius:3px;background:var(--hd-pane);overflow:hidden;}
.eotm-stand-track span{display:block;height:100%;border-radius:3px;background:var(--hd-yellow);}
.eotm-stand-row:not(.leader) .eotm-stand-track span{background:var(--hd-cyan);opacity:.75;}
.eotm-stand-votes{flex:0 0 auto;font-size:18px;font-weight:800;color:var(--hd-fg);font-variant-numeric:tabular-nums;}
.eotm-stand-reasons{margin-top:7px;font-size:12.5px;color:var(--hd-fg3);}
.eotm-stand-reasons summary{cursor:pointer;color:var(--hd-fg2);font-weight:600;}
.eotm-stand-reason{margin-top:5px;padding-left:10px;border-left:2px solid var(--hd-line2);color:var(--hd-fg2);font-style:italic;}
.eotm-history{display:flex;flex-direction:column;gap:6px;}
.eotm-hist-row{display:flex;align-items:center;gap:14px;background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:10px;padding:11px 16px;flex-wrap:wrap;}
.eotm-hist-month{flex:0 0 130px;font-size:13px;font-weight:700;color:var(--hd-fg2);}
.eotm-hist-winner{flex:1 1 auto;font-size:14px;font-weight:700;color:var(--hd-fg);}
.eotm-hist-winner em{font-style:normal;font-weight:600;font-size:12px;color:var(--hd-fg3);}
.eotm-hist-votes{flex:0 0 auto;font-size:12.5px;color:var(--hd-fg3);font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .eotm{padding:18px 14px 50px;}
  .eotm-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
  .eotm-hist-month{flex-basis:100%;}
}


/* ═══════════════════════════════════════════════════════════════════════════
 * AMEX CARD CODING (mode 'amex') — prefix .amx-*  [added 2026-07-08]
 * Self-contained; lives inside .ec-shell so all --hd-* tokens resolve. Charges
 * are business-normal — amounts are never colored red.
 * ═════════════════════════════════════════════════════════════════════════ */
.amx { max-width: 1320px; margin: 0 auto; }

/* ── merchant avatar (shared: list rows, sidecar, desk, coded) ───────────── */
.amx-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; position: relative; flex: 0 0 auto; font-weight: 700; line-height: 1; text-transform: uppercase; }
.amx-av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* view-switch tabs */
.amx-tabs { display: inline-flex; gap: 3px; background: var(--hd-bg); border: 1px solid var(--hd-line2); border-radius: 11px; padding: 3px; margin-bottom: 20px; }
.amx-tab { border: 0; background: transparent; color: var(--hd-fg3); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: color .12s, background .12s; }
.amx-tab:hover { color: var(--hd-fg); }
.amx-tab.active { background: rgba(var(--b2-yellow-rgb), 0.14); color: var(--hd-yellow); }

/* To do / Done segmented control (My Card) — a quiet pill toggle, deliberately
   subordinate to the .amx-tabs page tabs above. Tokens per §07 digital. */
.amx-seg { display: inline-flex; gap: 4px; background: var(--amxc-input, #242427); border-radius: 999px; padding: 4px; margin-bottom: 20px; }
.amx-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; border: 0; background: transparent; color: var(--amxc-fg2, #a1a1a6); font: inherit; font-size: 14px; font-weight: 700; padding: 0 20px; border-radius: 999px; cursor: pointer; transition: background .14s, color .14s; }
.amx-seg-btn:hover { color: var(--amxc-fg, #f5f5f7); }
.amx-seg-btn.active { background: var(--amxc-sec, #2c2c30); color: var(--amxc-fg, #f5f5f7); }
.amx-seg-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--amxc-gold, #ffd60a); color: var(--amxc-gold-ink, #1a1300); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* ghost link under the all-caught-up hero → jumps to Done */
.amx-seelink-wrap { text-align: center; padding: 4px 20px 24px; }
.amx-seelink { border: 0; background: transparent; color: var(--amxc-fg2, #a1a1a6); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 14px; border-radius: 10px; }
.amx-seelink:hover { color: var(--amxc-fg, #f5f5f7); text-decoration: underline; }

.amx-loading { padding: 60px 20px; text-align: center; color: var(--hd-fg4); font-size: 14px; font-weight: 600; }
.amx-loading-sm { padding: 20px; font-size: 13px; }
.amx-inline-err { margin-top: 10px; font-size: 12.5px; color: var(--hd-red); }

/* ── status pills ────────────────────────────────────────────────────────── */
.amx-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: capitalize; border-radius: 999px; padding: 3px 10px; border: 1px solid; white-space: nowrap; }
.amx-pill-new { color: var(--hd-yellow); border-color: rgba(var(--b2-yellow-rgb), .34); background: rgba(var(--b2-yellow-rgb), .12); }
.amx-pill-coded { color: #4aa3ff; border-color: rgba(74, 163, 255, .34); background: rgba(74, 163, 255, .13); }
.amx-pill-reviewed { color: var(--hd-purple); border-color: rgba(168, 108, 255, .34); background: rgba(168, 108, 255, .13); }
.amx-pill-exported { color: var(--hd-green); border-color: rgba(76, 207, 122, .34); background: rgba(76, 207, 122, .13); }
.amx-pill-ignored { color: var(--hd-fg3); border-color: var(--hd-line2); background: var(--hd-surf); }
.amx-lock { font-size: 9px; }

/* ── amounts (never red) ─────────────────────────────────────────────────── */
.amx-amt { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.amx-amt-credit { color: var(--hd-green); }
.amx-amt-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; color: var(--hd-green); opacity: .85; }

/* ── buttons (shared) ────────────────────────────────────────────────────── */
.amx-btn { background: var(--hd-surf); border: 1px solid var(--hd-line2); color: var(--hd-fg2); font: inherit; font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.amx-btn:hover { border-color: var(--hd-yellow); color: #fff; }
.amx-btn[disabled] { opacity: .5; cursor: default; }
.amx-btn[disabled]:hover { border-color: var(--hd-line2); color: var(--hd-fg2); }
.amx-btn-primary { background: var(--hd-yellow); border-color: var(--hd-yellow); color: #1c1d1e; }
.amx-btn-primary:hover { color: #1c1d1e; filter: brightness(1.06); }
.amx-btn-accept { background: rgba(var(--b2-yellow-rgb), .15); border-color: rgba(var(--b2-yellow-rgb), .5); color: var(--hd-yellow); }
.amx-btn-ghost { background: transparent; }
.amx-btn-danger:hover { border-color: var(--hd-red); color: var(--hd-red); }
.amx-btn-sm { font-size: 12px; padding: 6px 11px; border-radius: 8px; }

/* ═══ MY CARD ═════════════════════════════════════════════════════════════
   Elite Core DIGITAL tokens (§07), stated as literals here so the cardholder
   experience is pixel-locked regardless of shell drift. Always dark. */
.amx-card-wrap {
  max-width: 720px; margin: 0 auto;
  --amxc-surface: #1c1c1f;
  --amxc-border: rgba(255,255,255,0.07);
  --amxc-fg: #f5f5f7;
  --amxc-fg2: #a1a1a6;
  --amxc-fg3: #8e8e95;
  --amxc-gold: #ffd60a;
  --amxc-gold-ink: #1a1300;
  --amxc-input: #242427;
  --amxc-input-border: rgba(255,255,255,0.12);
  --amxc-sec: #2c2c30;
  --amxc-green: #30d158;
  --amxc-amber: #ff9f0a;
  --amxc-blue: #0a84ff;
  font-family: 'Avenir Next','Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.amx-hero { margin-bottom: 22px; }
.amx-hero .ec-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hd-cyan); font-weight: 700; }
.amx-hero-title { margin: 8px 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--amxc-fg); }
.amx-hero-sub { font-size: 15px; color: var(--amxc-fg2); line-height: 1.45; }
.amx-softerr { padding: 40px 20px; text-align: center; color: var(--amxc-fg2); font-size: 14.5px; font-weight: 600; }

.amx-allclear { text-align: center; padding: 60px 20px 40px; }
.amx-check-big { width: 92px; height: 92px; margin: 0 auto 20px; border-radius: 50%; background: rgba(48,209,88,.14); color: var(--amxc-green); font-size: 48px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.amx-allclear-t { font-size: 26px; font-weight: 800; color: var(--amxc-fg); }
.amx-allclear-s { font-size: 15px; color: var(--amxc-fg2); margin-top: 8px; }

.amx-list { display: flex; flex-direction: column; gap: 16px; }

/* ── the charge card ─────────────────────────────────────────────────────── */
.amx-charge {
  background: var(--amxc-surface); border: 1px solid var(--amxc-border); border-radius: 20px;
  padding: 22px 22px 20px; transition: transform .16s ease, box-shadow .16s ease, opacity .3s ease, max-height .5s ease, padding .5s ease, margin .5s ease;
}
@media (hover: hover) and (pointer: fine) {
  .amx-charge:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
}
.amx-charge-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.amx-charge-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.amx-charge-merch { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.amx-charge-name { font-size: 18px; font-weight: 700; color: var(--amxc-fg); overflow: hidden; text-overflow: ellipsis; }
.amx-charge-date { font-size: 12.5px; color: var(--amxc-fg3); font-weight: 600; }
.amx-charge-amt { font-size: 22px; flex: 0 0 auto; text-align: right; }
.amx-charge-amt .amx-amt { color: var(--amxc-fg); font-variant-numeric: tabular-nums; }
.amx-charge-amt .amx-amt-credit { color: var(--amxc-green); }
.amx-charge-amt .amx-amt-tag { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; padding: 2px 8px; border-radius: 999px; color: var(--amxc-green); background: rgba(48,209,88,.14); }

.amx-cardpills { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.amx-cardpill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 11px; }
.amx-cardpill-info { color: var(--amxc-blue); background: rgba(10,132,255,.15); }
.amx-cardpill-amber { color: var(--amxc-amber); background: rgba(255,159,10,.15); }
.amx-parked-note { margin-top: 12px; font-size: 13.5px; color: var(--amxc-fg2); line-height: 1.4; }
.amx-charge-parked { opacity: .82; }

/* primary action */
.amx-cardact { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.amx-cta {
  flex: 1 1 auto; min-height: 48px; border: 0; border-radius: 12px;
  background: var(--amxc-gold); color: var(--amxc-gold-ink); font-family: inherit; font-size: 15px; font-weight: 700;
  padding: 11px 24px; cursor: pointer; transition: filter .12s; text-align: center;
}
.amx-cta:hover { filter: brightness(1.06); }
.amx-cta:focus-visible { outline: 2px solid var(--amxc-gold); outline-offset: 2px; }
.amx-relink { border: 0; background: transparent; color: var(--amxc-fg2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px 2px; text-decoration: underline; text-underline-offset: 3px; }
.amx-relink:hover { color: var(--amxc-fg); }
.amx-relink-sm { font-size: 12.5px; padding: 4px 0; }

/* category field — input-styled button that IS the change affordance (taps the
   picker). Separating it from the gold submit stops the mis-click where people
   reach for the CTA meaning to change the category. */
.amx-catfield { margin-top: 18px; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 9px 14px; background: var(--amxc-input); border: 1px solid var(--amxc-input-border); border-radius: 12px; cursor: pointer; text-align: left; box-sizing: border-box; transition: border-color .12s; }
.amx-catfield:hover { border-color: var(--amxc-fg3); }
.amx-catfield:focus-visible { outline: 2px solid var(--amxc-gold); outline-offset: 2px; }
.amx-catfield-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.amx-catfield-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--amxc-fg3); }
.amx-catfield-val { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amx-catfield-name { font-weight: 600; color: var(--amxc-fg); }
.amx-catfield-num { margin-left: 7px; font-size: 12.5px; font-weight: 600; color: var(--amxc-fg3); font-variant-numeric: tabular-nums; }
.amx-catfield-hint { color: var(--amxc-fg3); font-size: 12px; font-weight: 600; }
.amx-catfield-ph { color: var(--amxc-fg3); font-weight: 600; }
.amx-catfield-chev { flex: 0 0 auto; color: var(--amxc-fg3); font-size: 13px; }

/* the gold submit is the ONLY gold element in the stack */
.amx-cta-file { margin-top: 14px; width: 100%; display: block; }
.amx-cta:disabled, .amx-cta-file:disabled { opacity: .4; cursor: default; filter: none; }
.amx-cta:disabled:hover, .amx-cta-file:disabled:hover { filter: none; }

/* note field — .amx-input uses --amxc-* tokens when inside the card/sheet, and
   falls back to the shell --hd-* tokens on the desk so that view is unchanged. */
.amx-notefld { margin-top: 14px; }
.amx-input { width: 100%; height: 46px; padding: 0 14px; background: var(--amxc-input, var(--hd-bg)); border: 1px solid var(--amxc-input-border, var(--hd-line2)); border-radius: 12px; color: var(--amxc-fg, #fff); font-family: inherit; font-size: 15px; outline: 0; box-sizing: border-box; }
.amx-input:focus { border-color: var(--amxc-gold, var(--hd-yellow)); box-shadow: 0 0 0 3px rgba(255,214,10,.22); }
.amx-input::placeholder { color: var(--amxc-fg3, var(--hd-fg4)); }

/* quiet secondary row */
.amx-cardfoot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.amx-cardfoot-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amx-icoact { min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--amxc-input-border); background: transparent; color: var(--amxc-fg2); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 10px; cursor: pointer; }
.amx-icoact:hover { border-color: var(--amxc-fg3); color: var(--amxc-fg); }
.amx-receipt-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--amxc-sec); border: 1px solid var(--amxc-border); border-radius: 999px; padding: 5px 6px 5px 13px; }
.amx-receipt-chip a { color: var(--amxc-blue); text-decoration: none; }
.amx-receipt-chip a:hover { text-decoration: underline; }
.amx-receipt-x { border: 0; background: transparent; color: var(--amxc-fg3); font-size: 17px; line-height: 1; cursor: pointer; padding: 0 5px; min-height: 28px; }
.amx-receipt-x:hover { color: #ff453a; }

/* overflow "⋯" menu */
.amx-ovf { position: relative; }
.amx-ovf-btn { min-width: 40px; font-size: 18px; line-height: 1; padding: 7px 12px; letter-spacing: 1px; }
.amx-ovf-backdrop { position: fixed; inset: 0; z-index: 40; }
.amx-ovf-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 41; width: 280px; background: var(--amxc-input); border: 1px solid var(--amxc-input-border); border-radius: 14px; padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.amx-ovf-menu button { text-align: left; border: 0; background: transparent; color: var(--amxc-fg); font: inherit; font-size: 14px; font-weight: 600; padding: 11px 12px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.amx-ovf-menu button:hover { background: rgba(255,255,255,.06); }
.amx-ovf-warn { color: var(--amxc-amber) !important; }

/* melt-to-filed */
.amx-charge-filing { overflow: hidden; max-height: 72px; padding-top: 16px; padding-bottom: 16px; opacity: 0; transform: translateX(14px); }
.amx-filed-line { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--amxc-green); white-space: nowrap; }
.amx-filed-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(48,209,88,.16); font-size: 15px; }

/* Done this month */
.amx-recent { margin-top: 30px; border-top: 1px solid var(--amxc-border); padding-top: 16px; }
.amx-recent-toggle { border: 0; background: transparent; color: var(--amxc-fg2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 6px 0; }
.amx-recent-toggle:hover { color: var(--amxc-fg); }
.amx-recent-caret { display: inline-block; width: 14px; color: var(--amxc-fg3); }
.amx-recent-empty { padding: 14px 0; color: var(--amxc-fg3); font-size: 13.5px; }
.amx-recent-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.amx-coded { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; background: var(--amxc-surface); border: 1px solid var(--amxc-border); border-radius: 12px; padding: 12px 15px; }
.amx-coded > .amx-av { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.amx-coded-main { grid-column: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.amx-coded-merch { font-size: 14px; font-weight: 700; color: var(--amxc-fg); }
.amx-coded-meta { font-size: 12px; color: var(--amxc-fg3); }
.amx-coded-acct { grid-column: 2; font-size: 12.5px; color: var(--amxc-fg2); overflow: hidden; text-overflow: ellipsis; }
.amx-coded-right { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 9px; }
.amx-coded-done { font-size: 12px; color: var(--amxc-green); font-weight: 700; }

/* ── category picker sheet ───────────────────────────────────────────────── */
.amx-sheet {
  width: 100%; max-width: 480px; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--hd-pane, #212324); border: 1px solid var(--hd-line, #3b3e40); border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 56px rgba(20,20,22,0.55);
  --amxc-fg: #f5f5f7; --amxc-fg2: #a1a1a6; --amxc-fg3: #8e8e95; --amxc-gold: #ffd60a; --amxc-input: #242427; --amxc-input-border: rgba(255,255,255,0.12);
  font-family: 'Avenir Next','Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.amx-sheet-head { position: relative; padding: 18px 52px 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.amx-sheet-title { font-size: 17px; font-weight: 800; color: var(--amxc-fg); }
.amx-sheet-sub { margin-top: 4px; font-size: 13px; color: var(--amxc-fg2); }
.amx-sheet-head .amx-modal-x { position: absolute; top: 14px; right: 14px; }
.amx-sheet-search { padding: 14px 16px 8px; }
.amx-sheet-list { overflow-y: auto; padding: 4px 10px 14px; -webkit-overflow-scrolling: touch; }
.amx-pick-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amxc-fg3); padding: 12px 8px 6px; }
.amx-pick-group { display: flex; flex-direction: column; }
.amx-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; text-align: left; border: 0; background: transparent; color: var(--amxc-fg); font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.amx-pick-row:hover { background: rgba(255,255,255,.06); }
.amx-pick-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.amx-pick-num { flex: 0 0 auto; font-size: 12.5px; color: var(--amxc-fg3); font-variant-numeric: tabular-nums; }
.amx-pick-empty { padding: 28px 12px; text-align: center; color: var(--amxc-fg3); font-size: 14px; }

/* ═══ ACCOUNTING DESK ═════════════════════════════════════════════════════ */
.amx-desk { display: flex; flex-direction: column; gap: 16px; }

.amx-stats { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: flex-start; background: var(--hd-pane); border: 1px solid var(--hd-line3); border-radius: 14px; padding: 16px 18px; }
.amx-stats-loading { color: var(--hd-fg4); font-size: 13px; }
.amx-stat-tiles { display: flex; gap: 20px; flex-wrap: wrap; }
.amx-stat-tile { text-align: left; }
.amx-stat-n { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.amx-stat-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hd-fg4); margin-top: 4px; }
.amx-stat-amt { font-size: 12px; font-weight: 700; color: var(--hd-fg3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.amx-stat-new .amx-stat-n { color: var(--hd-yellow); }
.amx-leader { min-width: 220px; }
.amx-leader-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hd-fg4); margin-bottom: 7px; }
.amx-leader-list { display: flex; flex-direction: column; gap: 4px; }
.amx-leader-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: var(--hd-fg2); font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 7px; cursor: pointer; }
.amx-leader-row:hover { background: var(--hd-surf); color: #fff; }
.amx-leader-n { font-weight: 800; color: var(--hd-yellow); font-variant-numeric: tabular-nums; }
.amx-sync { align-self: center; margin-left: auto; font-size: 11.5px; color: var(--hd-fg4); }

.amx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.amx-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.amx-toolbar-right { display: flex; gap: 8px; flex-wrap: wrap; }
.amx-input-sm { height: 34px; font-size: 12.5px; width: auto; min-width: 120px; padding: 0 10px; border-radius: 9px; }
select.amx-input-sm { padding-right: 26px; }
.amx-chip-toggle { height: 34px; border: 1px solid var(--hd-line2); background: var(--hd-bg); color: var(--hd-fg3); font: inherit; font-size: 12.5px; font-weight: 700; padding: 0 13px; border-radius: 9px; cursor: pointer; }
.amx-chip-toggle.on { background: rgba(var(--b2-yellow-rgb), .13); border-color: var(--hd-yellow); color: var(--hd-yellow); }

.amx-bulkbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: rgba(var(--b2-yellow-rgb), .1); border: 1px solid rgba(var(--b2-yellow-rgb), .3); border-radius: 11px; padding: 9px 14px; }
.amx-bulk-count { font-size: 13px; font-weight: 800; color: var(--hd-yellow); margin-right: 4px; }

/* table */
.amx-table-wrap { overflow-x: auto; border: 1px solid var(--hd-line3); border-radius: 13px; }
.amx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 940px; }
.amx-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hd-fg4); padding: 10px 12px; border-bottom: 1px solid var(--hd-line3); background: var(--hd-pane); position: sticky; top: 0; z-index: 1; }
.amx-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--hd-line3); color: var(--hd-fg2); vertical-align: middle; }
.amx-table tbody tr:hover { background: var(--hd-surf); }
.amx-row-flagged { background: rgba(var(--b2-yellow-rgb), .06); }
.amx-th-amt, .amx-td-amt { text-align: right; }
.amx-th-check, .amx-td-check { width: 34px; text-align: center; }
.amx-td-check input, .amx-th-check input { width: 16px; height: 16px; accent-color: var(--hd-yellow); }
.amx-td-card { color: var(--hd-fg2); white-space: nowrap; }
.amx-td-vendor { font-weight: 600; color: #fff; max-width: 240px; }
.amx-vendcell { display: flex; align-items: center; gap: 9px; min-width: 0; }
.amx-vendcell-txt { min-width: 0; }
.amx-td-bank { font-size: 10.5px; color: var(--hd-fg4); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.amx-td-acct { max-width: 180px; }
.amx-td-empty { text-align: center; padding: 34px 12px; color: var(--hd-fg4); }
.amx-muted { color: var(--hd-fg4); }
.amx-splittag, .amx-sug-inline { font-style: italic; color: var(--hd-cyan); }
.amx-memo-inline { width: 100%; min-width: 120px; height: 30px; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--hd-fg2); font: inherit; font-size: 12.5px; padding: 0 8px; box-sizing: border-box; }
.amx-memo-inline:hover { border-color: var(--hd-line2); }
.amx-memo-inline:focus { border-color: var(--hd-yellow); background: var(--hd-bg); color: #fff; outline: 0; }
.amx-memo-inline[disabled] { opacity: .6; }
.amx-td-flags { white-space: nowrap; }
.amx-flagicon { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; margin-right: 3px; font-size: 10px; font-weight: 800; border-radius: 5px; background: var(--hd-surf2); color: var(--hd-fg3); }
.amx-flag-warn { background: rgba(var(--b2-yellow-rgb), .16); color: var(--hd-yellow); }
.amx-td-act { white-space: nowrap; }
.amx-mini { border: 1px solid var(--hd-line2); background: var(--hd-surf); color: var(--hd-fg2); font: inherit; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 7px; cursor: pointer; margin-left: 4px; }
.amx-mini:first-child { margin-left: 0; }
.amx-mini:hover { border-color: var(--hd-yellow); color: #fff; }
.amx-mini-danger:hover { border-color: var(--hd-red); color: var(--hd-red); }

.amx-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 6px 0; }
.amx-pager-info { font-size: 12px; color: var(--hd-fg4); }

/* ── shared form fields (desk modals + rules manager) ────────────────────── */
.amx-fld { display: flex; flex-direction: column; gap: 5px; }
.amx-fld-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hd-fg4); }
.amx-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--hd-fg2); cursor: pointer; font-weight: 600; }
.amx-check input { width: 18px; height: 18px; accent-color: var(--hd-yellow); }
.amx-check-sm { font-size: 12px; }
.amx-locknote { font-size: 11px; color: var(--hd-fg4); font-style: italic; }

/* ── modal ───────────────────────────────────────────────────────────────── */
.amx-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; z-index: 1200; padding: 20px; }
.amx-modal { width: 100%; max-width: 440px; background: var(--hd-pane); border: 1px solid var(--hd-line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.amx-modal-wide { max-width: 640px; }
.amx-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--hd-line3); }
.amx-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: #fff; }
.amx-modal-x { border: 0; background: transparent; color: var(--hd-fg4); font-size: 22px; line-height: 1; cursor: pointer; }
.amx-modal-x:hover { color: #fff; }
.amx-modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.amx-modal-sub { font-size: 14px; color: var(--hd-fg2); font-weight: 600; }
.amx-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--hd-line3); }

.amx-split-rows { display: flex; flex-direction: column; gap: 8px; }
.amx-split-row { display: grid; grid-template-columns: 1fr 110px 1fr 34px; gap: 8px; align-items: center; }
.amx-split-del { border: 1px solid var(--hd-line2); background: var(--hd-surf); color: var(--hd-fg4); font-size: 16px; line-height: 1; border-radius: 8px; height: 40px; cursor: pointer; }
.amx-split-del:hover:not([disabled]) { border-color: var(--hd-red); color: var(--hd-red); }
.amx-split-remain { margin-top: 6px; font-size: 13px; font-weight: 800; text-align: right; }
.amx-split-remain.ok { color: var(--hd-green); }
.amx-split-remain.under { color: var(--hd-yellow); }
.amx-split-remain.over { color: var(--hd-red); }
.amx-split-row .amx-input { height: 40px; font-size: 13.5px; }

/* ── vendor-rules slide-over ─────────────────────────────────────────────── */
.amx-slideover-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1180; display: flex; justify-content: flex-end; }
.amx-slideover { width: 100%; max-width: 640px; height: 100%; background: var(--hd-pane); border-left: 1px solid var(--hd-line); display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(0, 0, 0, .45); }
.amx-slideover-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--hd-line3); }
.amx-slideover-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #fff; }
.amx-slideover-body { padding: 18px 20px; overflow-y: auto; }
.amx-rule-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.amx-rules-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.amx-rules-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--hd-fg4); padding: 8px 10px; border-bottom: 1px solid var(--hd-line3); }
.amx-rules-table td { padding: 8px 10px; border-bottom: 1px solid var(--hd-line3); color: var(--hd-fg2); vertical-align: middle; }
.amx-rule-usage { text-align: right; color: var(--hd-fg4); }

.amx-check-nocard { background: rgba(255,255,255,.06) !important; color: var(--amxc-fg2) !important; }

/* ═══ MY CARD — desktop two-pane workspace (≥900px) ═══════════════════════ */
.amx-card-wrap.amx-card-desktop { max-width: 1040px; }
.amx-workspace { display: flex; gap: 22px; align-items: flex-start; }
.amx-wsleft { flex: 1 1 auto; min-width: 420px; display: flex; flex-direction: column; }
.amx-wsright { flex: 0 0 400px; width: 400px; position: sticky; top: 16px; }
.amx-wsgroup { display: flex; flex-direction: column; gap: 8px; }
.amx-wsgroup-lbl { margin: 22px 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amxc-fg3); }
.amx-wsgroup-done { opacity: .92; }
.amx-wsrow { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  background: var(--amxc-surface); border: 1px solid var(--amxc-border); border-left: 3px solid transparent;
  border-radius: 14px; padding: 12px 15px; color: var(--amxc-fg); font: inherit; transition: border-color .12s, background .12s; }
.amx-wsrow:hover { border-color: var(--amxc-input-border); }
.amx-wsrow.sel { border-left-color: var(--amxc-gold); background: rgba(255,214,10,.06); }
.amx-wsrow.filed .amx-wsrow-merch, .amx-wsgroup-done .amx-wsrow-merch { color: var(--amxc-fg2); }
.amx-wsrow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.amx-wsrow-merch { font-size: 15px; font-weight: 700; color: var(--amxc-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amx-wsrow-meta { font-size: 12px; color: var(--amxc-fg3); font-weight: 600; }
.amx-wsrow-amt { flex: 0 0 auto; font-size: 15px; font-variant-numeric: tabular-nums; }
.amx-wsrow-amt .amx-amt { color: var(--amxc-fg); }
.amx-wsrow-amt .amx-amt-credit { color: var(--amxc-green); }
.amx-wsrow-cue { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; min-width: 22px; }
.amx-wsrow-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amxc-amber); box-shadow: 0 0 0 3px rgba(255,159,10,.16); }
.amx-wsrow-check { color: var(--amxc-green); font-weight: 800; font-size: 15px; }
.amx-wsrow .amx-cardpill { font-size: 10.5px; padding: 2px 9px; }

/* coding sidecar */
.amx-sidecar { background: var(--amxc-surface); border: 1px solid var(--amxc-border); border-radius: 20px; padding: 22px; }
/* position counter — top-of-sidecar disambiguation cue for identical merchants */
.amx-sc-pos { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amxc-fg2); margin-bottom: 12px; }
/* slide-in whenever the selected charge changes (see _amxCardDesktopHtml) */
@keyframes amxSidecarEnter { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
.amx-sidecar-enter { animation: amxSidecarEnter .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .amx-sidecar-enter { animation: none; } }
.amx-sc-head { display: flex; align-items: center; gap: 14px; }
.amx-sc-headmain { min-width: 0; flex: 1 1 auto; }
.amx-sc-merch { font-size: 19px; font-weight: 700; color: var(--amxc-fg); overflow: hidden; text-overflow: ellipsis; }
.amx-sc-amt { font-size: 22px; margin-top: 2px; }
.amx-sc-amt .amx-amt { color: var(--amxc-fg); }
.amx-sc-amt .amx-amt-credit { color: var(--amxc-green); }
.amx-sc-meta { margin-top: 12px; font-size: 12.5px; color: var(--amxc-fg3); font-weight: 600; line-height: 1.45; }
.amx-sc-body { margin-top: 4px; }
.amx-sc-body .amx-cardact { margin-top: 18px; }
.amx-sc-body .amx-cardpills { margin-top: 14px; }
.amx-sc-filed { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--amxc-green); margin: 16px 0 6px; }
.amx-sidecar-clear { text-align: center; padding: 34px 16px; }
.amx-sidecar-clear .amx-check-big { width: 72px; height: 72px; font-size: 38px; margin-bottom: 16px; }
/* read-only sidecar (Ready / Exported): provenance + lock note */
.amx-sc-prov { margin-top: 8px; font-size: 12.5px; color: var(--amxc-fg3); font-weight: 600; }
.amx-sc-lock { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--amxc-fg2); }
/* "vetted" — a quiet provenance marker on rows accounting already reviewed.
   Deliberately NOT the raw status word; the desk speaks pipeline language. */
.amx-vetted { display: inline-flex; align-items: center; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--amxc-blue, #0a84ff); background: rgba(10,132,255,.15); border-radius: 999px; padding: 1px 8px; }
.amx-vetted-lg { margin-left: 0; font-size: 11.5px; padding: 3px 11px; }
.amx-wsrow-cue .amx-vetted { margin-left: 0; }

/* ═══ ACCOUNTING DESK — the piles ARE the tabs ════════════════════════════
   Tab bar: To code · Ready to export · People · Everything · Rules. The two
   work piles lead and carry live pipeline numbers; the To code / Ready queues
   reuse .amx-card-wrap + the two-pane workspace, so the --amxc-* card tokens
   apply there just like My Card. People / Everything / Rules are auxiliary. */
.amx-deskhead { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.amx-deskseg { margin-bottom: 0; min-width: 0; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.amx-deskseg::-webkit-scrollbar { display: none; }
.amx-deskseg .amx-seg-btn { flex: 0 0 auto; white-space: nowrap; }
/* live number suffix + needs-help dot on the work-pile tabs */
.amx-seg-num { font-weight: 700; opacity: .72; font-variant-numeric: tabular-nums; }
.amx-seg-btn.active .amx-seg-num { opacity: .9; }
.amx-seg-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 999px; background: #ff453a; color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.amx-desk-sync { align-self: center; margin-left: auto; white-space: nowrap; }

/* the two work-pile queues (To code / Ready) — reuse the two-pane workspace */
.amx-deskq { max-width: 1180px; }
.amx-deskq-empty { text-align: center; padding: 56px 20px; font-size: 15.5px; color: var(--amxc-fg2); font-weight: 600; }
.amx-wsrow-holder { color: var(--amxc-fg2); font-weight: 700; }
.amx-wsrow-cat { color: var(--amxc-fg3); }
/* needs-help group — red header pinned at the top of the To code pile */
.amx-wsgroup-help { color: #ff453a; }
.amx-needshelp-hdr { margin: 4px 2px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #ff453a; }
/* Ready-to-export header line + the disabled gold export button (Phase 3) */
.amx-readyhead { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.amx-readyhead-l { font-size: 15px; font-weight: 700; color: var(--hd-fg2); font-variant-numeric: tabular-nums; }
.amx-btn-gold { background: rgba(var(--b2-yellow-rgb), .15); border-color: rgba(var(--b2-yellow-rgb), .5); color: var(--hd-yellow); font-weight: 800; }
.amx-btn-gold[disabled] { opacity: .55; }
.amx-btn-gold[disabled]:hover { border-color: rgba(var(--b2-yellow-rgb), .5); color: var(--hd-yellow); }

/* export → QuickBooks: confirm/success sheet + history table (Phase 3) */
.amx-ex-sheet { max-width: 460px; }
select.amx-input { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23a1a1a6' stroke-width='2'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; }
.amx-ex-body { padding: 16px 20px 6px; display: flex; flex-direction: column; gap: 8px; }
.amx-ex-lbl { font-size: 12px; font-weight: 700; color: var(--amxc-fg2, var(--hd-fg2)); margin-top: 6px; }
.amx-ex-tip { margin-top: 4px; font-size: 12.5px; color: var(--amxc-fg3, var(--hd-fg4)); }
.amx-ex-steps { font-size: 14px; color: var(--amxc-fg, #fff); line-height: 1.45; }
.amx-ex-steps strong { color: var(--amxc-gold, var(--hd-yellow)); }
.amx-ex-raced { margin-top: 6px; font-size: 12.5px; color: var(--amxc-amber, #ff9f0a); }
.amx-ex-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 8px; }

.amx-exhist { margin-top: 26px; }
.amx-exhist-hd { font-size: 13px; font-weight: 800; color: var(--hd-fg2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.amx-exhist-tbl { display: flex; flex-direction: column; border: 1px solid var(--hd-line2); border-radius: 12px; overflow: hidden; }
.amx-exhist-row { display: grid; grid-template-columns: 52px 96px minmax(90px,1fr) 78px 100px minmax(90px,1.4fr) 118px; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: var(--hd-fg2); border-top: 1px solid var(--hd-line2); font-variant-numeric: tabular-nums; }
.amx-exhist-row:first-child { border-top: 0; }
.amx-exhist-head { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--hd-fg4); background: var(--hd-surf); }
.amx-exhist-num { text-align: right; }
.amx-exhist-note { color: var(--hd-fg4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amx-exhist-dl { text-align: right; }
.amx-exhist-dash { color: var(--hd-fg4); }
@media (max-width: 720px) {
  .amx-exhist-row { grid-template-columns: 44px 1fr 84px; grid-auto-rows: auto; }
  .amx-exhist-row > span:nth-child(3), .amx-exhist-row > span:nth-child(6) { display: none; }
}

/* people list */
.amx-people { display: flex; flex-direction: column; gap: 10px; }
.amx-people-empty { text-align: center; }
.amx-prow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  background: var(--hd-pane); border: 1px solid var(--hd-line3); border-radius: 16px; padding: 14px 16px; color: var(--hd-fg); font: inherit; transition: border-color .12s, background .12s, transform .12s; }
.amx-prow:hover { border-color: var(--hd-line); background: var(--hd-surf); }
@media (hover: hover) and (pointer: fine) { .amx-prow:hover { transform: translateY(-1px); } }
.amx-prow.clear { opacity: .62; }
.amx-prow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.amx-prow-name { font-size: 16px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amx-prow-cards { font-size: 12px; color: var(--hd-fg4); font-weight: 600; font-variant-numeric: tabular-nums; }
.amx-prow-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.amx-prow-chev { flex: 0 0 auto; color: var(--hd-fg4); font-size: 20px; line-height: 1; margin-left: 2px; }
.amx-pbadge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amx-pbadge-amber { color: var(--hd-yellow); background: rgba(var(--b2-yellow-rgb), .13); border: 1px solid rgba(var(--b2-yellow-rgb), .3); }
.amx-pbadge-red { color: #ff453a; background: rgba(255,69,58,.13); border: 1px solid rgba(255,69,58,.32); }
.amx-pbadge-blue { color: #4aa3ff; background: rgba(74,163,255,.13); border: 1px solid rgba(74,163,255,.3); }
.amx-pbadge-clear { color: var(--hd-green); background: rgba(76,207,122,.1); border: 1px solid rgba(76,207,122,.26); }

/* person workspace */
.amx-card-wrap.amx-person { max-width: 1040px; }
.amx-back { border: 0; background: transparent; color: var(--amxc-fg2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 6px 4px 6px 0; margin-bottom: 12px; border-radius: 8px; }
.amx-back:hover { color: var(--amxc-fg); }
.amx-person-head { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.amx-person-headmain { min-width: 0; flex: 1 1 auto; }
.amx-person-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--amxc-fg); overflow: hidden; text-overflow: ellipsis; }
.amx-person-cards { margin-top: 3px; font-size: 12.5px; color: var(--amxc-fg3); font-weight: 600; font-variant-numeric: tabular-nums; }
.amx-person-nums { display: flex; gap: 22px; flex: 0 0 auto; }
.amx-pnum { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.amx-pnum-n { font-size: 22px; font-weight: 800; color: var(--amxc-fg); line-height: 1; font-variant-numeric: tabular-nums; }
.amx-pnum-l { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--amxc-fg3); }
.amx-personseg { margin-bottom: 18px; }
.amx-person-monthbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.amx-person-monthnote { font-size: 12.5px; color: var(--amxc-fg3); font-weight: 600; }
.amx-person-empty { text-align: center; }

/* rules tab */
.amx-rulestab { display: flex; flex-direction: column; gap: 16px; }
.amx-rules-intro { font-size: 13px; color: var(--hd-fg3); line-height: 1.5; max-width: 720px; }
.amx-rule-vendor { font-weight: 700; color: #fff; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .amx-hero-title { font-size: 24px; }
  .amx-charge { padding: 18px 16px 16px; border-radius: 18px; }
  .amx-cardact { flex-direction: column; align-items: stretch; }
  .amx-cta { width: 100%; }
  .amx-relink { text-align: center; }
  .amx-split-row { grid-template-columns: 1fr 90px 34px; }
  .amx-split-memo { grid-column: 1 / span 3; }
  .amx-toolbar { flex-direction: column; align-items: stretch; }
  .amx-input-sm { min-width: 0; flex: 1; }
  /* category picker becomes a full-height bottom sheet */
  .amx-modal-overlay:has(.amx-sheet) { padding: 0; align-items: flex-end; }
  .amx-sheet { max-width: none; height: 92vh; max-height: 92vh; border-radius: 20px 20px 0 0; }
  /* auxiliary People roster on phones */
  .amx-prow { align-items: flex-start; flex-wrap: wrap; }
  .amx-prow-chev { display: none; }
  .amx-prow-badges { width: 100%; justify-content: flex-start; padding-left: 58px; }
  .amx-person-head { align-items: flex-start; }
  .amx-person-nums { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 10px 22px; }
  .amx-pnum { flex: 0 0 auto; text-align: left; }
  .amx-pnum-n { font-size: 19px; }
  .amx-pnum-l { white-space: normal; }
}

/* ═══════════════ MEMBERSHIPS (dashboardMode 'membership') ═══════════════
   Reuses .eotm-btn/.eotm-tab/.eotm-filter/.eotm-loading/.eotm-empty utility
   styles; both pages live inside .ec-shell so --hd-* tokens are in scope. */
.mbr{max-width:1180px;margin:0 auto;padding:28px 28px 60px;width:100%;}
.mbr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.mbr-title{margin:4px 0 6px;font-size:26px;font-weight:800;color:var(--hd-fg);}
.mbr-sub{font-size:13.5px;color:var(--hd-fg3);}
.mbr-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.mbr-pills{display:flex;gap:8px;flex-wrap:wrap;}
.mbr-split{display:grid;grid-template-columns:minmax(300px,5fr) minmax(340px,6fr);gap:18px;align-items:start;}
.mbr-list{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto;padding-right:2px;}
.mbr-row{background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--hd-fg2);font:inherit;text-align:left;transition:border-color .12s;}
.mbr-row:hover{border-color:var(--hd-line);}
.mbr-row.selected{border-color:var(--hd-yellow);}
.mbr-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.mbr-row-co{font-size:14px;font-weight:700;color:var(--hd-fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbr-row-sub{font-size:12.5px;color:var(--hd-fg3);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mbr-row-meta{font-size:11.5px;color:var(--hd-fg4);margin-top:3px;}
.mbr-chip{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:3px 9px;border:1px solid var(--hd-line2);color:var(--hd-fg3);}
.mbr-chip-pending{background:rgba(var(--b2-amber-rgb),0.12);border-color:rgba(var(--b2-amber-rgb),0.35);color:var(--b2-amber);}
.mbr-chip-claim{background:rgba(var(--b2-purple-rgb),0.12);border-color:rgba(var(--b2-purple-rgb),0.35);color:var(--b2-purple);}
.mbr-chip-approved{background:rgba(var(--b2-green-rgb),0.12);border-color:rgba(var(--b2-green-rgb),0.35);color:var(--hd-green);}
.mbr-chip-denied{background:rgba(var(--b2-red-rgb),0.12);border-color:rgba(var(--b2-red-rgb),0.35);color:var(--hd-red);}
.mbr-chip-done{background:rgba(var(--b2-teal-rgb),0.12);border-color:rgba(var(--b2-teal-rgb),0.35);color:var(--hd-cyan);}
.mbr-detail{position:sticky;top:0;}
.mbr-card{background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:16px;padding:20px;}
.mbr-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.mbr-card-co{font-size:19px;font-weight:800;color:var(--hd-fg);}
.mbr-card-sub{font-size:12.5px;color:var(--hd-fg3);margin-top:4px;}
.mbr-facts{display:flex;flex-direction:column;gap:7px;padding:12px 0;border-top:1px solid var(--hd-line3);}
.mbr-fact{display:flex;gap:12px;font-size:13px;}
.mbr-fact span{flex:0 0 92px;color:var(--hd-fg4);font-weight:600;}
.mbr-fact b{color:var(--hd-fg2);font-weight:600;min-width:0;overflow-wrap:anywhere;}
.mbr-qual{border-top:1px solid var(--hd-line3);padding:10px 0;font-size:13px;color:var(--hd-fg3);}
.mbr-qual summary{cursor:pointer;font-weight:600;color:var(--hd-fg2);margin-bottom:8px;}
.mbr-stamp{border-top:1px solid var(--hd-line3);padding:10px 0;font-size:12.5px;color:var(--hd-fg3);}
.mbr-stamp b{color:var(--hd-fg2);}
.mbr-stamp-notes{margin-top:5px;font-style:italic;color:var(--hd-fg2);}
.mbr-stamp-done{color:var(--hd-cyan);}
.mbr-note{font-size:12px;color:var(--hd-fg4);margin-top:10px;}
.mbr-act{border-top:1px solid var(--hd-line3);padding-top:14px;margin-top:6px;}
.mbr-act-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hd-fg3);margin-bottom:10px;}
.mbr-act-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.mbr-act-row label{flex:0 0 92px;font-size:12.5px;font-weight:600;color:var(--hd-fg4);}
.mbr-act-row select,.mbr-act-row input{flex:1 1 auto;background:var(--hd-pane);border:1px solid var(--hd-line2);border-radius:9px;color:var(--hd-fg);font:inherit;font-size:13px;padding:8px 10px;min-width:0;}
.mbr-act-row select:focus,.mbr-act-row input:focus{outline:none;border-color:var(--hd-yellow);}
.mbr-act-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.mbr-btn-approve{background:var(--hd-green);border:none;border-radius:9px;color:#12241a;font:inherit;font-size:13.5px;font-weight:800;padding:9px 18px;cursor:pointer;}
.mbr-btn-deny{background:rgba(var(--b2-red-rgb),0.14);border:1px solid rgba(var(--b2-red-rgb),0.4);border-radius:9px;color:var(--hd-red);font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;cursor:pointer;}
.mbr-btn-provision{background:var(--hd-yellow);border:none;border-radius:9px;color:#1c1d1e;font:inherit;font-size:13.5px;font-weight:800;padding:10px 20px;cursor:pointer;}
.mbr-btn-approve:disabled,.mbr-btn-deny:disabled,.mbr-btn-provision:disabled{opacity:.45;cursor:default;}
@media (max-width:900px){
  .mbr{padding:18px 14px 50px;}
  .mbr-split{grid-template-columns:1fr;}
  .mbr-detail{position:static;}
  .mbr-list{max-height:38vh;}
}

/* ═══════════════ TAX REVIEW (dashboardMode 'tax') ═══════════════
   Reuses the .mbr-* layout system; only tax-specific bits live here. */
.tax-bar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tax-sup-toggle{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--hd-fg3);cursor:pointer;white-space:nowrap;}
.tax-chip-pendingreview{background:rgba(var(--b2-amber-rgb),0.12);border-color:rgba(var(--b2-amber-rgb),0.35);color:var(--b2-amber);}
.tax-chip-approved{background:rgba(var(--b2-green-rgb),0.12);border-color:rgba(var(--b2-green-rgb),0.35);color:var(--hd-green);}
.tax-chip-needsmoreinfo,.tax-chip-awaitingcustomerresponse{background:rgba(var(--b2-blue-rgb),0.12);border-color:rgba(var(--b2-blue-rgb),0.35);color:var(--b2-blue);}
.tax-chip-wrongformsent{background:rgba(var(--b2-red-rgb),0.12);border-color:rgba(var(--b2-red-rgb),0.35);color:var(--hd-red);}
.tax-chip-expired{background:rgba(var(--b2-red-rgb),0.08);border-color:var(--hd-line2);color:var(--hd-fg4);}
.tax-bc-ok{color:var(--hd-cyan);font-weight:700;}
.tax-certs{border-top:1px solid var(--hd-line3);padding:12px 0;}
.tax-cert{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hd-cyan);text-decoration:none;padding:6px 0;}
.tax-cert:hover{text-decoration:underline;}
.tax-cert span{color:var(--hd-fg4);font-size:11.5px;}
.tax-upload{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--hd-yellow);cursor:pointer;}
.tax-upload:hover{text-decoration:underline;}
.tax-qb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--hd-fg2);cursor:pointer;}

/* ── Review controls redesign (Claude Design) ─────────────────────────── */
/* Reusable toggle switch — color via --sw-on inline */
.ec-sw{--sw-on:#4ccf7a;position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;border:0;padding:0;cursor:pointer;background:#2a2e31;transition:background .15s;vertical-align:middle;}
.ec-sw.is-on{background:var(--sw-on);}
.ec-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.4);}
.ec-sw.is-on::after{left:21px;}
/* Tax: superseded toggle pill (filter bar) */
.tax-sup-pill{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:6px 14px 6px 8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,.1);background:transparent;color:#8b8f93;}
.tax-sup-pill.on{border-color:rgba(168,108,255,.5);background:rgba(168,108,255,.14);color:#a86cff;}
/* Tax: QuickBooks toggle-row */
.tax-qbrow{border:1px solid rgba(255,255,255,.1);border-radius:12px;background:var(--b2-surface-2,#232629);padding:14px 15px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:4px;}
.tax-qbrow-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#f4f5f6;}
.tax-qbrow-sub{font-size:12px;color:#8b8f93;margin-top:3px;}
/* Fraud: mode choice cards */
.fr-modecards{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.fr-modecard{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border-radius:12px;padding:13px 15px;cursor:pointer;font:inherit;transition:all .14s;border:1px solid rgba(255,255,255,.1);background:var(--b2-surface-2,#232629);}
.fr-modecard.on{border-color:color-mix(in srgb,var(--mc) 50%,transparent);background:color-mix(in srgb,var(--mc) 9%,transparent);}
.fr-modedot{flex:0 0 auto;width:19px;height:19px;border-radius:50%;border:2px solid #4a4f53;transition:border-color .14s;position:relative;}
.fr-modecard.on .fr-modedot{border-color:var(--mc);}
.fr-modecard.on .fr-modedot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mc);}
.fr-modetitle{display:block;font-size:14px;font-weight:700;color:#f4f5f6;}
.fr-modedesc{display:block;font-size:12px;color:#8b8f93;margin-top:2px;}
.fr-modebadge{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#4a9bff;background:rgba(74,155,255,.14);border:1px solid rgba(74,155,255,.35);padding:1px 7px;border-radius:999px;}
.fr-modefoot{font-size:11.5px;color:#6b6f73;margin-top:14px;line-height:1.5;}
/* Fraud: verdict buttons */
.fr-vgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.fr-vbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;padding:11px 8px;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .14s;border:1px solid rgba(255,255,255,.12);background:var(--b2-surface-2,#232629);color:var(--v);}
.fr-vbtn.on{border-color:var(--v);background:var(--v);color:var(--vt);}
.fr-vbtn:disabled{opacity:.5;cursor:default;}

/* Date fields: whole field opens the picker; the native calendar indicator
   inverts to white so it's visible on the dark input. */
.dz-input[type=date]{cursor:pointer;}
.dz-input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.8;cursor:pointer;}

/* Audit-log modal (app_audit timeline) */
.tax-audit-ev{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.tax-audit-ev:last-child{border-bottom:0;}
.tax-audit-top{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#b6b9bc;}
.tax-audit-top span{color:#6b6f73;white-space:nowrap;}
.tax-audit-sum{font-size:13px;color:#e8e9ea;margin-top:3px;line-height:1.45;}
.tax-audit-diff{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tax-audit-chip{font-size:11.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:3px 8px;color:#b6b9bc;}
.tax-audit-chip i{font-style:normal;color:#8b8f93;text-transform:capitalize;}
.ec-audit-dom{display:inline-block;margin-left:7px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(62,200,218,.14);border:1px solid rgba(62,200,218,.35);color:#3ec8da;border-radius:5px;padding:1px 6px;vertical-align:middle;}

/* ═══════════════ RICK-E (dashboardMode 'ricke') ═══════════════
   Reuses .mbr-*/.eotm-* utilities; discount-specific bits only. */
.rk-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rk-pushback{background:rgba(var(--b2-orange-rgb),0.16);border:1px solid rgba(var(--b2-orange-rgb),0.45);border-radius:9px;color:var(--b2-orange);font:inherit;font-size:13px;font-weight:700;padding:8px 15px;cursor:pointer;}
.rk-pushback:hover{background:rgba(var(--b2-orange-rgb),0.26);}
.rk-cats{display:flex;flex-direction:column;gap:16px;max-width:720px;margin:12px auto 0;}
.rk-cat{display:flex;align-items:center;justify-content:space-between;background:var(--hd-surf);border:2px solid var(--hd-line2);border-radius:14px;padding:26px 24px;cursor:pointer;font:inherit;transition:transform .12s,box-shadow .12s;}
.rk-cat:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.rk-cat-name{font-size:22px;font-weight:800;color:var(--hd-fg);}
.rk-cat-arrow{font-size:20px;color:var(--hd-fg3);}
.rk-cat-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 14px;}
.rk-cat-title{margin:0;font-size:22px;font-weight:800;color:var(--hd-fg);flex:1 1 auto;}
.rk-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--hd-line2);}
.rk-table{width:100%;border-collapse:collapse;background:var(--hd-surf);font-variant-numeric:tabular-nums;}
.rk-table th{padding:11px 14px;text-align:center;font-size:12.5px;font-weight:700;color:var(--hd-fg2);border-bottom:1px solid var(--hd-line2);white-space:nowrap;}
.rk-table th:first-child{text-align:left;}
.rk-table td{padding:10px 14px;text-align:center;font-size:13.5px;color:var(--hd-fg2);border-bottom:1px solid var(--hd-line3);}
.rk-table tbody tr:last-child td{border-bottom:none;}
.rk-table tbody tr:nth-child(even){background:rgba(255,255,255,0.02);}
.rk-fam{text-align:left !important;font-weight:600;color:var(--hd-fg) !important;white-space:nowrap;}
.rk-stamp{margin-top:18px;font-size:12.5px;color:var(--hd-fg3);}
.rk-stamp b{color:var(--hd-fg2);}
/* manager */
.rk-globals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px;}
.rk-gcard{background:var(--hd-surf);border:1px solid var(--hd-line2);border-radius:12px;padding:14px 16px;}
.rk-gcard-global{border-color:rgba(var(--b2-green-rgb),0.4);}
.rk-gcard-lbl{font-size:12.5px;font-weight:700;color:var(--hd-fg2);margin-bottom:9px;}
.rk-gcard-row{display:flex;align-items:center;gap:8px;}
.rk-gcard-row input{width:80px;background:var(--hd-pane);border:1px solid var(--hd-line2);border-radius:8px;color:var(--hd-fg);font:inherit;font-size:14px;padding:7px 9px;}
.rk-gcard-row span{color:var(--hd-fg4);font-size:13px;}
.rk-man-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px;}
.rk-newfam{display:flex;gap:8px;flex-wrap:wrap;background:var(--hd-surf);border:1px solid rgba(var(--b2-yellow-rgb),0.4);border-radius:12px;padding:12px;margin-bottom:12px;}
.rk-newfam input{background:var(--hd-pane);border:1px solid var(--hd-line2);border-radius:8px;color:var(--hd-fg);font:inherit;font-size:13px;padding:8px 10px;width:110px;}
.rk-newfam input[type=text]{width:200px;}
.rk-table-edit input{width:66px;background:var(--hd-pane);border:1px solid var(--hd-line3);border-radius:7px;color:var(--hd-fg);font:inherit;font-size:13px;padding:5px 7px;text-align:center;}
.rk-table-edit input:focus{outline:none;border-color:var(--hd-yellow);}
.rk-rowbtns{white-space:nowrap;}
.rk-rowbtns button{margin-left:6px;padding:5px 10px;font-size:12px;}
.rk-row-hidden td{opacity:.5;}
.rk-hidden-tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--hd-fg4);border:1px solid var(--hd-line2);border-radius:999px;padding:1px 7px;margin-left:6px;}
/* pushback drawer */
.rk-drawer-back{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;}
.rk-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--hd-pane, #212324);border-left:1px solid var(--hd-line2, #34373a);z-index:201;padding:22px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;color:#fff;}
.rk-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.rk-drawer-head h2{margin:0;font-size:19px;font-weight:800;}
.rk-drawer-input{width:100%;}
@media (max-width:760px){
  .rk-cat{padding:20px 16px;}
  .rk-globals{grid-template-columns:1fr 1fr;}
}

/* ═══════════════ DESIGN POLISH (dz-*) — Claude Design pass 2026-07-09 ═══════
   Shared language for the EOTM / Memberships / Tax Review / RICK-E pages.
   Page content only — the global shell (rail/topbar) is untouched.
   Palette per the design: surfaces #17191a/#1d1f21/#232629 on #141517,
   gold #ffd60a (on-gold #1a1600), green #4ccf7a, cyan #3ec8da,
   orange #ff9f0a, red #ff6b6b, purple #a86cff, blue #4a9bff. */
@keyframes dzSlideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes dzRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.dz{max-width:1180px;margin:0 auto;padding:30px 34px 72px;width:100%;}
.dz-narrow{max-width:1080px;}
.dz-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#3ec8da;}
.dz-eyebrow-gold{color:#ffd60a;}
.dz-eyebrow-purple{color:#a86cff;}
.dz-title{font-weight:800;font-size:30px;letter-spacing:-.02em;color:#f4f5f6;margin:8px 0 6px;}
.dz-sub{font-size:14px;color:#8b8f93;}
.dz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.dz-headbtns{display:flex;gap:10px;flex-wrap:wrap;}
.dz-btn{background:#232629;border:1px solid rgba(255,255,255,.1);border-radius:11px;color:#b6b9bc;font:inherit;font-size:13px;font-weight:700;padding:9px 16px;cursor:pointer;transition:border-color .12s,color .12s;}
.dz-btn:hover:not(:disabled){border-color:rgba(255,255,255,.25);color:#f4f5f6;}
.dz-btn:disabled{opacity:.45;cursor:default;}
.dz-btn-gold{background:#ffd60a;border:0;border-radius:10px;color:#1a1600;font:inherit;font-size:13.5px;font-weight:800;padding:11px 22px;cursor:pointer;}
.dz-btn-gold:hover:not(:disabled){background:#ffe04d;}
.dz-btn-gold:disabled{background:#2a2e31;color:#6b6f73;cursor:default;}
.dz-btn-green{background:#4ccf7a;border:0;border-radius:10px;color:#0c2417;font:inherit;font-size:13.5px;font-weight:800;padding:10px 20px;cursor:pointer;}
.dz-btn-green:disabled{opacity:.5;cursor:default;}
.dz-btn-red{background:rgba(255,107,107,.14);border:1px solid rgba(255,107,107,.4);border-radius:10px;color:#ff6b6b;font:inherit;font-size:13.5px;font-weight:700;padding:10px 20px;cursor:pointer;}
.dz-btn-orange{background:rgba(255,159,10,.14);border:1px solid rgba(255,159,10,.4);border-radius:11px;color:#ff9f0a;font:inherit;font-size:13px;font-weight:700;padding:9px 15px;cursor:pointer;}
.dz-input,.dz-select,.dz-textarea{background:#232629;border:1px solid rgba(255,255,255,.1);border-radius:9px;color:#f4f5f6;font:inherit;font-size:13px;padding:9px 11px;outline:none;min-width:0;}
.dz-input:focus,.dz-select:focus,.dz-textarea:focus{border-color:#ffd60a;}
.dz-search{border-radius:10px;padding:9px 13px;width:250px;max-width:100%;}
.dz-select{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%238b8f93" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;-webkit-appearance:none;appearance:none;cursor:pointer;}
.dz-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.dz-pills{display:flex;gap:8px;flex-wrap:wrap;}
.dz-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.1);background:transparent;color:#8b8f93;border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:all .12s;}
.dz-pill:hover{color:#f4f5f6;}
.dz-pill.on{border-color:#ffd60a;background:rgba(255,214,10,.12);color:#ffd60a;}
.dz-pill-n{font-size:11px;font-weight:800;background:rgba(255,255,255,.07);border-radius:999px;padding:1px 7px;color:#8b8f93;}
.dz-pill.on .dz-pill-n{background:rgba(255,214,10,.2);color:#ffd60a;}
.dz-chip{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 11px;white-space:nowrap;}
.dz-list{display:flex;flex-direction:column;gap:9px;}
.dz-row{display:grid;gap:16px;align-items:center;text-align:left;background:#1d1f21;border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:15px 18px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s;}
.dz-row:hover{border-color:rgba(255,255,255,.2);}
.dz-row-title{font-size:15px;font-weight:700;color:#f4f5f6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dz-row-sub{font-size:12.5px;color:#8b8f93;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dz-row-meta{font-size:11.5px;color:#6b6f73;margin-top:4px;}
.dz-logo{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:#232629;border:1px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#b6b9bc;}
.dz-empty{padding:48px;text-align:center;color:#6b6f73;font-size:14px;}
.dz-loading{padding:36px 0;text-align:center;color:#6b6f73;font-size:14px;}
/* slide-over */
/* Dock below the fixed top utility bar (like the shells) so the drawer header
   never collides with / hides under it, and the title gets real breathing room
   from the top. --ec-topbar-h is published live by _ecSyncTopbarHeight. */
.dz-over{position:fixed;top:var(--ec-topbar-h,54px);left:0;right:0;bottom:0;background:rgba(0,0,0,.55);z-index:100;display:flex;justify-content:flex-end;}
.dz-panel{width:100%;max-width:520px;height:100%;background:#1a1c1d;border-left:1px solid rgba(255,255,255,.1);box-shadow:-24px 0 60px rgba(0,0,0,.5);display:flex;flex-direction:column;animation:dzSlideIn .26s cubic-bezier(.22,1,.36,1);}
.dz-panel-head{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,.08);}
.dz-panel-title{font-size:22px;font-weight:800;color:#f4f5f6;}
.dz-panel-sub{font-size:12.5px;color:#8b8f93;margin-top:4px;}
.dz-panel-x{background:transparent;border:0;color:#8b8f93;font-size:24px;line-height:1;cursor:pointer;padding:0;}
.dz-panel-body{flex:1;overflow-y:auto;padding:22px 24px;}
/* Activity timeline drawer (Tax / Memberships / …) — slim custom scrollbar. */
.ec-act-scroll{padding:14px 24px 40px;}
.ec-act-scroll::-webkit-scrollbar{width:9px;}
.ec-act-scroll::-webkit-scrollbar-track{background:transparent;}
.ec-act-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:6px;border:2px solid #1a1c1d;}
.dz-sect{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8b8f93;margin-bottom:14px;}
.dz-facts{display:flex;flex-direction:column;gap:9px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);}
.dz-fact{display:flex;gap:14px;font-size:13.5px;}
.dz-fact span{flex:0 0 96px;color:#6b6f73;font-weight:600;}
.dz-fact b{color:#d4d6d8;font-weight:600;min-width:0;overflow-wrap:anywhere;}
.dz-factgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.07);}
.dz-factcell span{display:block;color:#6b6f73;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
.dz-factcell b{color:#d4d6d8;font-weight:600;overflow-wrap:anywhere;font-size:13px;}
.dz-frow{display:flex;align-items:center;gap:12px;}
.dz-frow label{flex:0 0 92px;font-size:12.5px;color:#8b8f93;font-weight:600;}
.dz-frow .dz-input,.dz-frow .dz-select{flex:1;}
.dz-form{display:flex;flex-direction:column;gap:11px;margin-bottom:16px;}
.dz-note{font-size:12px;color:#6b6f73;line-height:1.5;margin-top:12px;}
.dz-done{margin-top:20px;padding:16px 18px;background:rgba(62,200,218,.08);border:1px solid rgba(62,200,218,.28);border-radius:14px;color:#3ec8da;font-size:13px;line-height:1.6;}
.dz-done .dim{color:#8b8f93;}
/* upload zone */
.dz-drop{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;padding:22px 18px;border:1.5px dashed rgba(255,255,255,.16);border-radius:14px;cursor:pointer;text-align:center;transition:border-color .12s,background .12s;}
.dz-drop.drag{border-color:#ffd60a;background:rgba(255,214,10,.07);}
.dz-drop-t{font-size:13px;font-weight:700;color:#d4d6d8;}
.dz-drop-t em{font-style:normal;color:#ffd60a;}
.dz-drop-s{font-size:11.5px;color:#6b6f73;}
.dz-cert{display:flex;align-items:center;gap:9px;font-size:13px;color:#3ec8da;padding:6px 0;text-decoration:none;}
.dz-cert:hover{text-decoration:underline;}
.dz-cert span{color:#6b6f73;font-size:11.5px;}
/* toast (page-local, matches design) */
@keyframes dzToast{0%{opacity:0;transform:translate(-50%,12px);}12%{opacity:1;transform:translate(-50%,0);}88%{opacity:1;transform:translate(-50%,0);}100%{opacity:0;transform:translate(-50%,12px);}}
/* EOTM */
.dz-hero{position:relative;overflow:hidden;border-radius:22px;border:1px solid rgba(255,214,10,.16);background:radial-gradient(120% 140% at 88% -10%,rgba(255,214,10,.16),rgba(255,159,10,.05) 42%,transparent 68%),#1c1e20;padding:26px 28px;margin-bottom:22px;}
.dz-hero h1{font-weight:800;font-size:34px;letter-spacing:-.02em;color:#f4f5f6;margin:8px 0 8px;}
.dz-hero-sub{font-size:14.5px;color:#b6b9bc;max-width:560px;}
.dz-hero-sub b{color:#f4f5f6;}
.dz-tabs{display:flex;gap:9px;margin-top:20px;}
.dz-tab{border:0;border-radius:999px;padding:9px 20px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:#232629;color:#b6b9bc;}
.dz-tab.on{background:#ffd60a;color:#1a1600;}
.dz-tab .lock{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;opacity:.7;margin-left:3px;}
.dz-ballot{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.dz-card{background:#1d1f21;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px;}
.dz-card-title{font-size:17px;font-weight:800;color:#f4f5f6;}
.dz-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:11px;max-height:calc(100vh - 460px);min-height:200px;overflow-y:auto;overflow-x:hidden;padding:8px 8px 4px 2px;}
.dz-person{position:relative;display:flex;align-items:center;gap:10px;background:#232629;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:11px 13px;cursor:pointer;color:#f4f5f6;text-align:left;font:inherit;transition:border-color .12s,background .12s;}
.dz-person.sel{background:rgba(255,214,10,.1);border-color:#ffd60a;}
.dz-person-name{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dz-ava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#4a9bff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#101113;overflow:hidden;}
.dz-ava img{width:100%;height:100%;object-fit:cover;}
.dz-person-check{position:absolute;top:-7px;right:-6px;width:21px;height:21px;border-radius:50%;background:#ffd60a;color:#1a1600;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.dz-side{position:sticky;top:16px;}
.dz-picked{display:flex;align-items:center;gap:12px;padding:14px;background:#232629;border-radius:14px;margin-bottom:16px;}
.dz-picked .k{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b6f73;}
.dz-picked .v{font-size:17px;font-weight:800;color:#f4f5f6;}
.dz-nopick{padding:26px 14px;text-align:center;color:#6b6f73;font-size:13px;border:1px dashed rgba(255,255,255,.12);border-radius:14px;margin-bottom:16px;}
.dz-submit{width:100%;border:0;border-radius:12px;padding:13px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;background:#ffd60a;color:#1a1600;}
.dz-submit:disabled{background:#2a2e31;color:#6b6f73;cursor:default;}
.dz-receipt{display:flex;align-items:center;gap:20px;background:#1d1f21;border:1px solid rgba(76,207,122,.34);border-radius:18px;padding:22px 24px;flex-wrap:wrap;animation:dzRise .3s ease;}
.dz-receipt-check{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:rgba(76,207,122,.14);color:#4ccf7a;display:flex;align-items:center;justify-content:center;font-size:26px;}
.dz-receipt-k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8b8f93;margin-bottom:8px;}
.dz-receipt-name{font-size:22px;font-weight:800;color:#f4f5f6;}
.dz-receipt-reason{margin-top:10px;font-size:13.5px;color:#b6b9bc;font-style:italic;}
.dz-standgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start;}
.dz-standrow{display:flex;align-items:center;gap:13px;background:#1d1f21;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px 16px;}
.dz-standrow.lead{border-color:rgba(255,214,10,.32);}
.dz-standrank{flex:0 0 34px;text-align:center;font-size:14px;font-weight:800;color:#8b8f93;}
.dz-standrow.lead .dz-standrank{font-size:18px;}
.dz-standname{font-size:14px;font-weight:700;color:#f4f5f6;margin-bottom:6px;}
.dz-standtrack{height:7px;border-radius:4px;background:#232629;overflow:hidden;}
.dz-standtrack span{display:block;height:100%;border-radius:4px;background:#3ec8da;}
.dz-standrow.lead .dz-standtrack span{background:#ffd60a;}
.dz-standvotes{flex:0 0 auto;font-size:20px;font-weight:800;color:#f4f5f6;font-variant-numeric:tabular-nums;}
.dz-leader{background:radial-gradient(120% 120% at 50% 0%,rgba(255,214,10,.14),transparent 62%),#1d1f21;border:1px solid rgba(255,214,10,.22);border-radius:20px;padding:26px 24px;text-align:center;}
.dz-leader-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ffd60a;}
.dz-leader-ava{width:66px;height:66px;border-radius:50%;margin:0 auto 12px;background:#4a9bff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#101113;overflow:hidden;}
.dz-leader-ava img{width:100%;height:100%;object-fit:cover;}
.dz-leader-name{font-size:24px;font-weight:800;color:#f4f5f6;}
.dz-leader-sub{font-size:13px;color:#b6b9bc;margin-top:4px;}
.dz-leader-quote{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#b6b9bc;font-style:italic;text-align:left;}
.dz-hist{display:flex;align-items:center;gap:16px;background:#1d1f21;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px;flex-wrap:wrap;}
.dz-hist .m{flex:0 0 140px;font-size:13px;font-weight:700;color:#b6b9bc;}
.dz-hist .w{flex:1 1 auto;font-size:15px;font-weight:700;color:#f4f5f6;}
.dz-hist .n{flex:0 0 auto;font-size:12.5px;color:#6b6f73;}
/* RICK-E */
.dz-tabgroup{display:inline-flex;gap:4px;background:#17191a;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:4px;margin-bottom:22px;}
.dz-tabg{border:0;border-radius:9px;padding:9px 17px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:transparent;color:#8b8f93;}
.dz-tabg.on{background:rgba(255,214,10,.14);color:#ffd60a;}
.dz-catcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.dz-catcard{display:flex;align-items:center;justify-content:space-between;text-align:left;border-radius:16px;padding:22px;cursor:pointer;font:inherit;background:#1d1f21;border:1px solid rgba(255,255,255,.1);transition:transform .12s;}
.dz-catcard:hover{transform:translateY(-2px);}
.dz-catcard .nm{font-size:20px;font-weight:800;}
.dz-catcard .ct{font-size:12px;color:#8b8f93;margin-top:5px;}
.dz-catcard .ar{font-size:20px;color:#6b6f73;}
.dz-tablewrap{overflow-x:auto;border:1px solid rgba(255,255,255,.08);border-radius:14px;}
.dz-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:640px;background:#1d1f21;}
.dz-table th{padding:12px 14px;font-size:12px;font-weight:700;color:#b6b9bc;white-space:nowrap;text-align:center;}
.dz-table th:first-child{text-align:left;padding-left:16px;}
.dz-table td{padding:12px 14px;text-align:center;font-size:13.5px;color:#d4d6d8;border-top:1px solid rgba(255,255,255,.06);}
.dz-table td:first-child{text-align:left;padding-left:16px;font-weight:600;color:#f4f5f6;white-space:nowrap;}
.dz-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.015);}
.dz-calcgrid{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.dz-chiprow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px;}
.dz-chipbtn{border:1px solid rgba(255,255,255,.12);background:#232629;color:#b6b9bc;border-radius:10px;padding:9px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.dz-chipbtn.on{border-color:#ffd60a;background:rgba(255,214,10,.12);color:#ffd60a;}
.dz-result{position:sticky;top:16px;background:radial-gradient(120% 120% at 50% 0%,rgba(168,108,255,.14),transparent 60%),#1d1f21;border:1px solid rgba(168,108,255,.24);border-radius:20px;padding:28px 24px;text-align:center;}
.dz-result-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a86cff;}
.dz-result-n{font-weight:800;font-size:64px;letter-spacing:-.03em;color:#f4f5f6;line-height:1;margin:16px 0 10px;}
.dz-result-s{font-size:13.5px;color:#b6b9bc;min-height:20px;}
.dz-result-rows{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:9px;text-align:left;}
.dz-result-row{display:flex;justify-content:space-between;font-size:13px;color:#8b8f93;}
.dz-result-row b{color:#f4f5f6;font-weight:600;}
.dz-result-row b.gr{color:#4ccf7a;font-weight:700;}
.dz-gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:24px;}
.dz-gcard{background:#1d1f21;border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:15px 16px;}
.dz-gcard .lb{font-size:12.5px;font-weight:700;margin-bottom:11px;color:#b6b9bc;}
.dz-gcard .rw{display:flex;align-items:center;gap:8px;}
.dz-gcard input{width:74px;background:#17191a;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#f4f5f6;font:inherit;font-size:14px;padding:8px 10px;outline:none;}
.dz-gcard input:focus{border-color:#ffd60a;}
.dz-gcard .pc{color:#6b6f73;font-size:13px;}
.dz-gcard .dz-btn{margin-left:auto;padding:7px 13px;font-size:12.5px;border-radius:9px;}
.dz-edit-table input{width:58px;background:#17191a;border:1px solid rgba(255,255,255,.09);border-radius:7px;color:#d4d6d8;font:inherit;font-size:12.5px;padding:6px 4px;text-align:center;outline:none;}
.dz-edit-table input:focus{border-color:#ffd60a;}
.dz-edit-table td{padding:7px 6px;}
.dz-rowbtn{background:#232629;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#b6b9bc;font:inherit;font-size:12px;font-weight:700;padding:6px 11px;cursor:pointer;margin-left:6px;}
.dz-rowbtn:disabled{opacity:.4;cursor:default;}
.dz-hidden-row td{opacity:.5;}
.dz-tag{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#6b6f73;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:1px 7px;margin-left:6px;}
.dz-lastmod{margin-top:18px;font-size:12.5px;color:#8b8f93;}
.dz-lastmod b{color:#b6b9bc;}
@media (max-width:900px){
  .dz{padding:18px 14px 50px;}
  .dz-ballot,.dz-standgrid,.dz-calcgrid{grid-template-columns:1fr;}
  .dz-side,.dz-result{position:static;}
  .dz-people{max-height:44vh;}
}

/* Customer Chat availability: per-day hours rows */
.cchat-av-rows { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.cchat-av-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; }
.cchat-av-row.off { opacity: 0.5; }
.cchat-av-rowlabel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--white); min-width: 78px; }
.cchat-av-rowtimes { display: inline-flex; align-items: center; gap: 6px; }
.cchat-av-rowtimes input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; color: var(--white); padding: 5px 8px; font: inherit; font-size: 12px; }
.cchat-av-rowtimes input:disabled { opacity: 0.45; }
.cchat-av-dash { color: rgba(255,255,255,0.4); }

/* ─────────────────────────────────────────────────────────────────────────
   Items page  (mode 'items') — central SKU registry: browse/search/edit items
   plus manage the category & classification lists. Uses the Elite Core digital
   design-system tokens (--b2-*); scoped to `.items-page` and its modal host.
   ───────────────────────────────────────────────────────────────────────── */
.items-page { padding: 22px 26px 40px; max-width: 1500px; margin: 0 auto; color: var(--b2-text); }
.items-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.items-title { margin: 2px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--b2-text); }
.items-sub { margin: 4px 0 0; font-size: 13px; color: var(--b2-text-2); max-width: 640px; }
.items-head-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.items-ro-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--b2-amber); background: var(--b2-amber-bg); border: 1px solid var(--b2-amber-border); border-radius: 999px; padding: 4px 10px; }

/* Buttons */
.items-btn { background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); color: var(--b2-text-2); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.items-btn:hover { color: var(--b2-text); border-color: var(--b2-text-3); }
.items-btn:disabled { opacity: .5; cursor: default; }
.items-btn:disabled:hover { color: var(--b2-text-2); border-color: var(--b2-hairline-strong); }
.items-btn-primary { background: var(--b2-blue-bg); border-color: var(--b2-blue-border); color: var(--b2-blue); }
.items-btn-primary:hover { color: var(--b2-blue); border-color: var(--b2-blue); }
.items-btn-danger { color: var(--b2-red); border-color: var(--b2-red-border); }
.items-btn-danger:hover { color: var(--b2-red); border-color: var(--b2-red); background: var(--b2-red-bg); }
.items-btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 7px; }

/* Tabs */
.items-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--b2-hairline); margin-bottom: 16px; }
.items-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--b2-text-2); font: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; }
.items-tab:hover { color: var(--b2-text); }
.items-tab.active { color: var(--b2-text); border-bottom-color: var(--b2-blue); }
.items-tab-n { font-size: 11px; font-weight: 700; color: var(--b2-text-3); background: var(--b2-surface-2); border-radius: 999px; padding: 1px 7px; }
.items-tab.active .items-tab-n { color: var(--b2-blue); background: var(--b2-blue-bg); }

/* Controls row */
.items-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 12px; }
.items-search-wrap { position: relative; display: inline-flex; align-items: center; }
.items-search-wrap svg { position: absolute; left: 10px; color: var(--b2-text-3); pointer-events: none; }
.items-search { width: 280px; max-width: 100%; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text); font: inherit; font-size: 13px; padding: 8px 12px 8px 32px; }
.items-search::placeholder { color: var(--b2-text-3); }
.items-search:focus { outline: none; border-color: color-mix(in srgb, var(--b2-blue) 55%, transparent); box-shadow: 0 0 0 2px var(--b2-blue-bg); }
.items-filter { background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 9px; color: var(--b2-text-2); font: inherit; font-size: 12.5px; padding: 8px 10px; cursor: pointer; max-width: 220px; }
.items-filter:focus { outline: none; border-color: color-mix(in srgb, var(--b2-blue) 55%, transparent); color: var(--b2-text); }

/* Count + pager bar */
.items-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.items-count { font-size: 12.5px; color: var(--b2-text-2); font-weight: 600; }
.items-pager { display: flex; gap: 6px; }
.items-pager-btn { background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); color: var(--b2-text-2); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.items-pager-btn:hover:not(:disabled) { color: var(--b2-text); border-color: var(--b2-text-3); }
.items-pager-btn:disabled { opacity: .4; cursor: default; }

/* State blocks */
.items-loading, .items-empty { padding: 40px 20px; text-align: center; color: var(--b2-text-2); font-size: 13.5px; }
.items-error { padding: 14px 16px; background: var(--b2-red-bg); border: 1px solid var(--b2-red-border); border-radius: 10px; color: var(--b2-text); font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Table */
.items-table-wrap { overflow-x: auto; border: 1px solid var(--b2-hairline); border-radius: 12px; background: var(--b2-surface-1); }
.items-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.items-table thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--b2-text-3); padding: 11px 12px; border-bottom: 1px solid var(--b2-hairline); white-space: nowrap; background: var(--b2-surface-2); position: sticky; top: 0; z-index: 1; }
.items-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--b2-hairline); color: var(--b2-text); vertical-align: middle; }
.items-table tbody tr:last-child td { border-bottom: 0; }
.items-table th.r, .items-table td.r { text-align: right; }
.items-table th.c, .items-table td.c { text-align: center; }
.items-th-sort { cursor: pointer; user-select: none; }
.items-th-sort:hover { color: var(--b2-text); }
.items-sort-ar { margin-left: 4px; color: var(--b2-blue); }
.items-row { cursor: pointer; }
.items-row:hover td { background: var(--b2-surface-2); }
.items-sku { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--b2-text); white-space: nowrap; }
.items-desc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--b2-text-2); }
.items-minmax { white-space: nowrap; color: var(--b2-text-2); }

/* Status + source badges */
.items-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.items-badge-ok { color: var(--b2-green); background: var(--b2-green-bg); border-color: var(--b2-green-border); }
.items-badge-wop { color: var(--b2-red); background: var(--b2-red-bg); border-color: var(--b2-red-border); }
.items-badge-over { color: var(--b2-blue); background: var(--b2-blue-bg); border-color: var(--b2-blue-border); }
.items-badge-gray { color: var(--b2-text-2); background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }
.items-src { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; }
.items-src-truth { color: var(--b2-teal); background: var(--b2-teal-bg); border-color: var(--b2-teal-border); }
.items-src-sales { color: var(--b2-purple); background: var(--b2-purple-bg); border-color: var(--b2-purple-border); }
.items-src-manual { color: var(--b2-amber); background: var(--b2-amber-bg); border-color: var(--b2-amber-border); }
.items-src-gray { color: var(--b2-text-3); background: var(--b2-surface-3); border-color: var(--b2-hairline-strong); }

/* Inline grid selects */
.items-inline { background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 7px; color: var(--b2-text); font: inherit; font-size: 12px; padding: 4px 6px; max-width: 150px; cursor: pointer; transition: border-color .15s, box-shadow .4s; }
.items-inline:hover { border-color: var(--b2-text-3); }
.items-inline:focus { outline: none; border-color: color-mix(in srgb, var(--b2-blue) 55%, transparent); }
.items-inline:disabled { opacity: .55; }
.items-inline.items-saved { border-color: var(--b2-green); box-shadow: 0 0 0 2px var(--b2-green-bg); }
.items-inline-ro { color: var(--b2-text-2); font-size: 12px; }

/* Manage tabs (categories / classifications) */
.items-manage-table .items-mrow-new td { background: var(--b2-blue-bg); }
.items-minput { width: 100%; min-width: 80px; background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 7px; color: var(--b2-text); font: inherit; font-size: 12px; padding: 5px 8px; }
.items-minput:focus { outline: none; border-color: color-mix(in srgb, var(--b2-blue) 55%, transparent); }
.items-minput:disabled { opacity: .6; }
.items-minput-n { max-width: 72px; text-align: right; }
.items-mact { white-space: nowrap; display: flex; gap: 5px; }

/* Modal */
.items-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; z-index: 1200; padding: 5vh 20px; overflow-y: auto; }
.items-modal { width: 100%; max-width: 760px; background: var(--b2-surface-1); border: 1px solid var(--b2-hairline-strong); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.items-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--b2-hairline); }
.items-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--b2-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.items-modal-x { border: 0; background: transparent; color: var(--b2-text-3); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.items-modal-x:hover { color: var(--b2-text); }
.items-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: 70vh; overflow-y: auto; }
.items-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--b2-hairline); }
.items-prov { font-size: 12px; color: var(--b2-text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.items-prov-note { color: var(--b2-text-3); }
.items-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
.items-field { display: flex; flex-direction: column; gap: 4px; }
.items-field-full { grid-column: 1 / -1; }
.items-field label { font-size: 11px; font-weight: 700; color: var(--b2-text-3); text-transform: uppercase; letter-spacing: .03em; }
.items-input { background: var(--b2-surface-2); border: 1px solid var(--b2-hairline-strong); border-radius: 8px; color: var(--b2-text); font: inherit; font-size: 13px; padding: 7px 10px; }
.items-input:focus { outline: none; border-color: color-mix(in srgb, var(--b2-blue) 55%, transparent); box-shadow: 0 0 0 2px var(--b2-blue-bg); }
.items-input:disabled { opacity: .6; }
.items-checks { display: flex; gap: 20px; flex-wrap: wrap; }
.items-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--b2-text-2); cursor: pointer; }
.items-ro-block { border: 1px solid var(--b2-hairline); border-radius: 10px; padding: 14px; background: var(--b2-surface-0); }
.items-ro-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--b2-text-3); margin-bottom: 10px; }
.items-ro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.items-ro-cell { display: flex; flex-direction: column; gap: 2px; }
.items-ro-lbl { font-size: 11px; color: var(--b2-text-3); }
.items-ro-val { font-size: 15px; font-weight: 700; color: var(--b2-text); }
.items-sales-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.items-sales-table th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--b2-text-3); padding: 5px 8px; border-bottom: 1px solid var(--b2-hairline); }
.items-sales-table td { padding: 5px 8px; border-bottom: 1px solid var(--b2-hairline); color: var(--b2-text-2); }
.items-sales-table th.r, .items-sales-table td.r { text-align: right; }

/* Column manager (Super Admin) */
.items-cols-btn { display: inline-flex; align-items: center; gap: 6px; }
.items-cols-modal { max-width: 380px; }
.items-cols-hint { margin: 0; font-size: 12px; color: var(--b2-text-3); }
.items-cols-list { display: flex; flex-direction: column; gap: 2px; }
.items-col-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.items-col-row:hover { background: var(--b2-surface-2); }
.items-col-show { flex: 1; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--b2-text); cursor: pointer; min-width: 0; }
.items-col-show input { cursor: pointer; }
.items-col-show input:disabled { cursor: default; }
.items-col-lock { width: 16px; text-align: center; font-size: 12px; color: var(--b2-text-3); flex: none; }
.items-col-arrows { display: inline-flex; gap: 4px; flex: none; }
.items-col-arrows .items-btn { padding: 3px 9px; line-height: 1; }

@media (max-width: 720px) {
  .items-page { padding: 16px 14px 32px; }
  .items-form-grid { grid-template-columns: 1fr; }
  .items-search { width: 100%; }
}

/* ── Push-notification nudge modal (maybeShowPushNudge) ─────────────────── */
.pn-modal {
  background: var(--b2-surface-1);
  border: 1px solid var(--b2-hairline);
  border-radius: 12px;
  width: 440px; max-width: calc(100vw - 32px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  color: var(--b2-text);
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  padding: 22px 22px 18px;
}
.pn-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--b2-accent, #6ea8fe) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--b2-accent, #6ea8fe) 30%, transparent);
  color: var(--b2-accent, #6ea8fe);
  margin-bottom: 12px;
}
.pn-title {
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.pn-body {
  font-size: 12.5px; line-height: 1.55;
  color: var(--b2-text-2);
  margin-bottom: 16px;
}
.pn-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.pn-actions-right { display: inline-flex; gap: 8px; }
.pn-optout {
  background: none; border: 0; padding: 0;
  font: inherit; font-size: 11.5px;
  color: var(--b2-text-3);
  cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.pn-optout:hover { color: var(--b2-text-2); }
@media (max-width: 520px) {
  .pn-actions { flex-direction: column-reverse; align-items: stretch; }
  .pn-actions-right { display: flex; }
  .pn-actions-right .disp-btn { flex: 1; justify-content: center; }
  .pn-optout { padding: 8px 0 0; text-align: center; }
}

/* Bouncing pointer to the browser's own permission prompt (pushNudgeEnable) */
.pn-arrow {
  position: fixed;
  top: 10px; left: 14px;
  z-index: 6000;
  font-size: 42px; line-height: 1;
  color: var(--b2-accent, #6ea8fe);
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  pointer-events: none;
  animation: pn-arrow-bounce 1.1s ease-in-out infinite;
}
@keyframes pn-arrow-bounce {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-6px, -6px); }
}

/* ── Team Chat: typing bubble + read receipts (_tchatPaintTypingStrip) ──── */
.tchat-typing-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 8px;
}
.tchat-typing-bubble {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--b2-surface-2);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 8px 12px;
}
.tchat-typing-bubble i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--b2-text-3);
  animation: tchat-typing-dot 1.2s ease-in-out infinite;
}
.tchat-typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.tchat-typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tchat-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.tchat-typing-name { font-size: 11px; color: var(--b2-text-3); }
.tchat-receipts {
  text-align: right;
  font-size: 10.5px;
  color: var(--b2-text-3);
  padding: 2px 14px 6px;
}

/* ── Comment threads: "X is typing…" (_cmtPaintTyping) ─────────────────── */
.cmt-typing {
  font-size: 11px;
  color: var(--b2-text-3);
  font-style: italic;
  padding: 2px 4px 4px;
}

/* AmEx: note-required nudge (file attempted without a description) */
.amx-note-need { border-color: #ff9f0a !important; box-shadow: 0 0 0 2px rgba(255,159,10,0.35) !important; }

/* Customer note type badge (CoreCentral note_type, e.g. Special Pricing) */
.cus-ccnote-type {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 650;
  background: rgba(255, 200, 60, 0.12);
  color: var(--role-cta-primary, #f5c518);
  border: 1px solid rgba(255, 200, 60, 0.30);
}

/* AmEx: suggested-description offer chip under the note field */
.amx-sugnote { display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:7px 12px; border-radius:999px;
  background:rgba(10,132,255,0.12); border:1px solid rgba(10,132,255,0.30); color:#6db6ff; font-size:12px; font-weight:600;
  cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amx-sugnote:hover { background:rgba(10,132,255,0.2); }

/* AmEx modal host is body-mounted, OUTSIDE .hd2 where the --hd-* tokens are
   scoped — redeclare the palette here or every amx modal/sheet renders with a
   see-through surface (same trap as .ord-remind-pop; Brennan hit it on the
   Desk "Update category" modal 2026-07-13). */
#amxModalHost {
  --hd-bg:#1c1d1e; --hd-pane:#212324; --hd-line:#3b3e40; --hd-line2:#34373a; --hd-line3:#303334;
  --hd-fg:#fff; --hd-fg2:#b8babb; --hd-fg3:#8f9294; --hd-fg4:#7f8284; --hd-surf:#262829; --hd-surf2:#2b2d2f;
}