:root {
      --bg: #f5f5f5;
      --surface: #ffffff;
      --surface-2: #f0f0f0;
      --surface-3: #e8e8e8;
      --border: #e0e0e0;
      --border-hover: #cccccc;
      --text: #1a1a1a;
      --text-muted: #666;
      --text-dim: #767676; /* was #999; duplicate :root at line 19306 silently overrode to #767676 — align the canonical source */
      --accent: #a67c52;
      --accent-dim: rgba(166, 124, 82, 0.12);
      --green: #16a34a;
      --green-dim: rgba(22, 163, 74, 0.1);
      --red: #dc2626;
      --red-dim: rgba(220, 38, 38, 0.08);
      --yellow: #d97706;
      --yellow-dim: rgba(217, 119, 6, 0.1);
      --blue: #2563eb;
      --blue-dim: rgba(37, 99, 235, 0.08);
      --purple: #7c3aed;
      --purple-dim: rgba(124, 58, 237, 0.08);
      --emerald: #059669;
      --emerald-dim: rgba(5, 150, 105, 0.1);
      --radius: 8px;
      --radius-sm: 4px;
      --radius-lg: 12px;
      --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
      /* Extended color palette — high-frequency literals extracted from rules */
      --green-bright: #22c55e;    /* status indicators, fresh badges, resaleable pills */
      --red-bright: #ef4444;      /* live-mode indicators, error states, escalate hover */
      --slate: #94a3b8;           /* dim metadata, empty-state text, secondary labels */
      --accent-light: #c9a96e;    /* assistant message links, jarvis entity links */
      /* Aliases used by views */
      --text-primary: var(--text);
      --text-secondary: var(--text-muted);
      --surface-1: var(--surface);
      --surface-raised: var(--surface);
      --bg-hover: var(--surface-2);
      --card-bg: var(--surface);
      /* Semantic aliases used by competitor-intel, smart-reorder, etc. */
      --bg-secondary: var(--surface-2);
      --primary: var(--accent);
      --danger: var(--red);
      --danger-dim: var(--red-dim);
      --danger-color: var(--red);
      --success: var(--green);
      --warning: var(--yellow);
      --info: var(--blue);
      --orange: #f97316;
      --orange-dim: rgba(249, 115, 22, 0.1);
      --accent-alpha: rgba(166, 124, 82, 0.15);
      --accent-bg: rgba(166, 124, 82, 0.1);
      --bg-card: var(--surface);
      --bg-primary: var(--bg);
      --bg-tertiary: var(--surface-3);
      --bg2: var(--surface-2);
      --border-color: var(--border);
      --border-light: var(--border);
      --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
      --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
      --surface-hover: var(--surface-2);
      --hover: rgba(0, 0, 0, 0.04);
      /* ─── Z-Index Token Scale (single source of truth) ─── */
      --z-base: 1;            /* inner sticky elements (pseudo-elements, headers within scrollable panels) */
      --z-raised: 2;          /* hover/table-header raises */
      --z-sticky: 10;         /* .header, sticky containers */
      --z-dropdown: 50;       /* .bulk-action-bar, .mobile-bottom-nav */
      --z-nav: 90;            /* sidebar-overlay, floating secondary nav, digest-banner */
      --z-header: 100;        /* .sidebar (mobile responsive) */
      --z-banner: 110;        /* #critical-alert-banner — above sidebar so alerts are always visible */
      --z-overlay: 200;       /* .search-overlay, .quick-jump-overlay, notification overlays, pick-bulk-bar */
      --z-modal: 1000;        /* modal overlays (.hub-modal-overlay, .journey-overlay, .rcv-po-picker-overlay) */
      --z-modal-content: 1001; /* modal panels that sit above their own overlay (.jarvis-notification-panel) */
      --z-palette: 9990;      /* command palette */
      --z-toast: 9999;        /* toast notifications, login overlay */
      --z-jarvis: 10000;      /* Jarvis overlay / page-progress-bar */
      --z-system: 10001;      /* js/ui-components.js final confirm overlay, warehouse shelf picker */
    }

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

    /* Screen-reader-only utility — visually hidden but accessible */

    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
      line-height: 1.5;
      overflow: hidden;
      height: 100vh;
      height: 100dvh;
    }

    /* ─── Layout ─── */
    .app {
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: 56px 1fr;
      height: 100vh;
      height: 100dvh;
    }

    /* ─── Header ─── */
    .header {
      grid-column: 1 / -1;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: var(--z-sticky);
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .logo {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--text);
      text-transform: uppercase;
    }

    .logo-sub {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 400;
      letter-spacing: 0.3px;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .sync-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .sync-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .refresh-btn {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      transition: all 0.15s;
    }

    .refresh-btn:hover,
    .refresh-btn:focus-visible {
      border-color: var(--text);
      color: var(--text);
    }

    .sync-now-btn {
      border-color: var(--blue-dim);
      color: var(--blue);
    }

    .sync-now-btn:hover,
    .sync-now-btn:focus-visible {
      border-color: var(--blue);
      background: var(--blue-dim);
    }

    .sync-now-btn.syncing {
      opacity: 0.5;
      cursor: wait;
      pointer-events: none;
    }

    .sync-dot.syncing {
      background: var(--blue);
      animation: pulse 0.5s infinite;
    }

    .sync-dot.error {
      background: var(--red);
      animation: none;
    }

    /* ─── Global health dot ─── */
    .health-dot-wrap {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
      font: inherit;
    }
    .health-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green);
      transition: background 0.3s;
    }
    .health-dot.degraded {
      background: var(--red);
      animation: healthPulse 1.2s ease-in-out infinite;
    }
    @keyframes healthPulse {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
      50% { opacity: 0.85; box-shadow: 0 0 0 4px rgba(239,68,68,0); }
    }
    .health-popover {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 300px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      z-index: var(--z-toast);
      padding: 14px 16px;
      font-size: 12px;
    }
    .health-popover-title { font-weight: 600; margin-bottom: 10px; font-size: 13px; }
    .health-popover-row { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
    .health-popover-row:last-child { border-bottom: none; }
    .health-popover-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .health-popover-dot.ok { background: var(--green); }
    .health-popover-dot.error { background: var(--red); }
    .health-popover-dot.warn { background: var(--yellow); }
    .health-popover-name { font-weight: 500; }
    .health-popover-detail { color: var(--text-dim); font-size: 11px; margin-top: 1px; }

    /* ─── Data freshness bar ─── */
    .data-freshness {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text-dim);
      margin: -4px 0 16px 0;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      letter-spacing: 0.02em;
    }
    .data-freshness.stale { color: var(--yellow); }
    .data-freshness.very-stale { color: var(--red); }
    .freshness-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
      background: var(--green);
    }
    .freshness-dot.yellow { background: var(--yellow); }
    .freshness-dot.red { background: var(--red); }

    /* ─── Sidebar ─── */
    .sidebar {
      background: var(--surface);
      border-right: 1px solid var(--border);
      padding: 16px 0;
      overflow-y: auto;
    }

    .nav-section {
      padding: 0 16px;
      margin-bottom: 24px;
    }

    .nav-section-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--text-dim);
      margin-bottom: 8px;
      padding: 0 8px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-muted);
      transition: all 0.15s;
      font-size: 13px;
    }

    .nav-item:hover {
      background: var(--surface-2);
      color: var(--text);
    }

    .nav-item:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
      background: var(--surface-2);
      color: var(--text);
    }

    .nav-item.active {
      background: var(--accent-dim);
      color: var(--text);
    }

    .nav-item .icon {
      width: 18px;
      text-align: center;
      font-size: 14px;
    }

    .nav-item .badge {
      margin-left: auto;
      background: var(--red-dim);
      color: var(--red);
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: var(--radius);
    }

    .nav-item .badge.green {
      background: var(--green-dim);
      color: var(--green);
    }

    /* ─── Main Content ─── */
    .main {
      overflow-y: auto;
      padding: 16px 20px;
      background: var(--bg);
    }

    /* ─── Page Header ─── */
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .page-title {
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.3px;
    }

    .page-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ─── Stats Row ─── */
    .stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
    }

    .stat-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .stat-value {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.5px;
      font-family: var(--font-mono);
    }

    .stat-value.green { color: var(--green); }
    .stat-value.red { color: var(--red); }
    .stat-value.yellow { color: var(--yellow); }
    .stat-value.blue { color: var(--blue); }
    .stat-value.accent { color: var(--text); }

    .stat-detail {
      font-size: 11px;
      color: var(--text-dim);
      margin-top: 4px;
    }

    /* ─── Filters / Toolbar ─── */
    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .search-input {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 7px 12px;
      color: var(--text);
      font-size: 12px;
      width: 260px;
      outline: none;
      transition: border-color 0.15s;
    }

    .search-input:focus {
      border-color: var(--text);
    }

    .search-input::placeholder {
      color: var(--text-dim);
    }

    .filter-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s;
    }

    .filter-btn:hover, .filter-btn:focus-visible, .filter-btn.active {
      border-color: var(--text);
      color: var(--text);
      background: var(--accent-dim);
    }

    .filter-select {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 7px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      outline: none;
      cursor: pointer;
    }

    .filter-select option {
      background: var(--surface);
    }

    .issue-status-select {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      outline: none;
      cursor: pointer;
      transition: all 0.15s;
    }
    .issue-status-select.status-open { border-color: rgba(239, 68, 68, 0.4); color: var(--red); }
    .issue-status-select.status-waiting { border-color: rgba(251, 191, 36, 0.4); color: var(--yellow); }
    .issue-status-select.status-resolved { border-color: rgba(74, 222, 128, 0.4); color: var(--green); }
    .issue-status-select option { background: var(--surface); color: var(--text); }

    .toggle-group {
      display: flex;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .toggle-btn {
      background: var(--surface);
      border: none;
      color: var(--text-muted);
      padding: 7px 14px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.15s;
      border-right: 1px solid var(--border);
    }

    .toggle-btn:last-child { border-right: none; }

    .toggle-btn:hover, .toggle-btn:focus-visible { color: var(--text); background: var(--surface-2); }

    .toggle-btn.active {
      background: var(--accent-dim);
      color: var(--text);
      font-weight: 500;
    }

    /* ─── Table ─── */
    .table-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .table-scroll {
      overflow-x: auto;
      max-height: calc(100vh - 320px);
      overflow-y: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      white-space: nowrap;
    }

    thead {
      position: sticky;
      top: 0;
      z-index: var(--z-raised);
    }

    th {
      background: var(--surface-2);
      padding: 7px 12px;
      text-align: left;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      user-select: none;
    }

    th:hover {
      color: var(--text);
    }

    th .sort-arrow {
      margin-left: 4px;
      opacity: 0.4;
    }

    th.sorted .sort-arrow {
      opacity: 1;
      color: var(--text);
    }

    td {
      padding: 7px 12px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }

    tr:hover td {
      background: rgba(255, 255, 255, 0.02);
    }

    tr:last-child td {
      border-bottom: none;
    }

    /* ─── Status Pills ─── */
    .pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--radius);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .pill.unfulfilled { background: var(--yellow-dim); color: var(--yellow); }
    .pill.fulfilled { background: var(--green-dim); color: var(--green); }
    .pill.partially_fulfilled { background: var(--blue-dim); color: var(--blue); }
    .pill.low { background: var(--red-dim); color: var(--red); }
    .pill.ok { background: var(--green-dim); color: var(--green); }
    .pill.out { background: var(--red-dim); color: var(--red); }
    .pill.in_transit { background: var(--blue-dim); color: var(--blue); }
    .pill.arrived { background: var(--green-dim); color: var(--green); }
    .pill.booked { background: var(--yellow-dim); color: var(--yellow); }
    .pill.loading { background: var(--accent-dim); color: var(--text); }
    .pill.high { background: var(--red-dim); color: var(--red); }
    .pill.medium { background: var(--yellow-dim); color: var(--yellow); }
    .pill.claim { background: var(--red-dim); color: var(--red); }
    .pill.chargeback { background: var(--red-dim); color: var(--red); }
    .pill.damage_credit { background: var(--yellow-dim); color: var(--yellow); }
    .pill.return { background: var(--blue-dim); color: var(--blue); }
    .pill.partial_return { background: var(--blue-dim); color: var(--blue); }

    .sku-link {
      cursor: pointer;
      color: var(--text);
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .sku-link:hover {
      text-decoration: underline;
    }

    .text-muted { color: var(--text-muted); }
    .text-green { color: var(--green); }
    .text-red { color: var(--red); }
    .text-yellow { color: var(--yellow); }
    .text-purple { color: var(--purple); }
    .text-accent { color: var(--text); }
    .text-dim { color: var(--text-dim); }
    .text-blue { color: var(--blue); }

    /* ─── Empty State ─── */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
    }

    .empty-state .icon {
      font-size: 48px;
      margin-bottom: 12px;
      opacity: 0.3;
    }

    /* ─── Loading ─── */
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: var(--text-muted);
    }

    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid var(--border);
      border-top-color: var(--text);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-right: 10px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* ─── Pagination ─── */
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--text-muted);
    }

    .pagination-btns {
      display: flex;
      gap: 6px;
    }

    .pagination-btns button {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 4px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
    }

    .pagination-btns button:hover:not(:disabled) {
      border-color: var(--text);
      color: var(--text);
    }

    .pagination-btns button:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* ─── Scrollbar ─── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

    /* ─── Mobile Hamburger ─── */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 20px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      line-height: 1;
      margin-right: 8px;
    }
    .mobile-menu-btn:hover { color: var(--text); background: var(--surface-2); }

    .sidebar-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(8,10,14,0.46);
      z-index: var(--z-nav);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s cubic-bezier(0.32, 0.72, 0, 1);
      -webkit-backdrop-filter: blur(3px) saturate(1.05);
      backdrop-filter: blur(3px) saturate(1.05);
    }
    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
    /* While a finger is dragging the drawer, kill transitions so it tracks 1:1. */
    .sidebar.sb-dragging,
    .sidebar-overlay.sb-dragging { transition: none !important; }

    /* ─── Responsive ─── */
    /* 700–900px: tablet squeeze — keep the sidebar, never show the hamburger
       (feedback_no-hamburger-on-desktop.md). Narrow the rail + nav type so
       columns fit instead of collapsing to a phone layout. */
    @media (min-width: 700px) and (max-width: 900px) {
      .app { grid-template-columns: 180px 1fr; }
      .nav-item { font-size: 12px; padding: 7px 10px; }
      .nav-section-title { font-size: 9px; }
    }

    /* Hamburger + slide-in sidebar are phone-only (≤699px). */
    @media (max-width: 699px) {
      .app { grid-template-columns: 1fr; }

      .mobile-menu-btn { display: block; }

      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        z-index: var(--z-header);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 4px 0 28px rgba(0,0,0,0.28);
        overflow-y: auto;
        will-change: transform;
      }
      .sidebar.mobile-open { transform: translateX(0); }

      .header { padding: 0 12px; gap: 4px; }
      .header-left .logo-sub { display: none; }
      .sync-status, .view-as-switcher, .view-mode-indicator { display: none !important; }
      .live-indicator span { display: none; }
      .refresh-btn:not(.shell-search-btn):not(.sync-now-btn) { display: none; }
      .shell-search-btn .shell-kbd { display: none; }

      .main { padding: 12px; }
      .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .table-container { overflow-x: auto; }
    }

    @media (max-width: 480px) {
      .stat-grid { grid-template-columns: 1fr !important; }
      .header-right { gap: 4px; }
    }

    /* ─── Mobile touch targets + overflow (audit 2026-05-29 F-05/06/07/12/13) ─── */
    @media (max-width: 768px), (pointer: coarse) {
      /* F-06 — close buttons to 44px minimum tap target */
      .close-btn, .stp-close-btn, .mto-detail-close, .journey-close,
      .loc-close-btn, .note-close-btn, .wishlist-modal-close, .ret-btn-close {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      /* F-07 — Jarvis Hub view tabs + channel filter buttons */
      .hub-view-tab { min-height: 44px; padding: 10px 12px; font-size: 12px; }
      .hub-ch-btn { min-height: 44px; min-width: 44px; padding: 10px 8px; }
      /* F-13 — small inline row buttons */
      .btn-sm, .ret-btn-label, .hub-action-btn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 12px;
      }
    }

    @media (max-width: 699px) {
      /* F-05 — expanded row-detail panel must not force horizontal scroll */
      .row-detail-panel { min-width: min(100%, 340px); max-width: 100%; }
    }

    @media (max-width: 480px) {
      /* F-12 — keep FAB + assistant panel clear of the iOS home indicator */
      #assistantBtn { bottom: max(24px, calc(16px + env(safe-area-inset-bottom, 0px))); }
      #assistantPanel { bottom: max(84px, calc(76px + env(safe-area-inset-bottom, 0px))); }
    }

    /* ─── Table row detail expand ─── */
    .expand-btn {
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: 14px;
      padding: 2px 6px;
      border-radius: 3px;
    }
    .expand-btn:hover, .expand-btn:focus-visible { color: var(--text); background: var(--accent-dim); }

    /* ─── Action button ─── */
    .action-btn {
      background: var(--accent-dim);
      border: 1px solid rgba(200, 169, 126, 0.3);
      color: var(--text);
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      transition: all 0.15s;
    }
    .action-btn:hover {
      background: var(--accent);
      color: var(--bg);
    }

    /* ─── Margin bar ─── */
    .margin-bar {
      width: 60px;
      height: 6px;
      background: var(--surface-3);
      border-radius: 3px;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
      margin-right: 6px;
    }
    .margin-bar-fill {
      height: 100%;
      border-radius: 3px;
    }

    /* Tabs for sub-views */
    .tabs {
      display: flex;
      gap: 2px;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--border);
    }
    .tab {
      padding: 8px 16px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.15s;
    }
    .tab:hover, .tab:focus-visible { color: var(--text); outline: 2px solid var(--accent, #6366f1); outline-offset: -2px; border-radius: 2px; }
    .tab.active {
      color: var(--text);
      border-bottom-color: var(--text);
    }

    /* ─── Note Icons & Editor ─── */
    .note-icon {
      cursor: pointer;
      font-size: 14px;
      opacity: 0.4;
      transition: opacity 0.15s;
      display: inline-block;
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      border-radius: var(--radius-sm);
    }
    .note-icon:hover, .note-icon:focus-visible { opacity: 1; background: var(--surface-2); }
    .note-icon.has-note { opacity: 0.9; color: var(--text); }

    .note-editor-popup {
      width: 300px;
      max-width: calc(100vw - 16px);
      background: var(--surface);
      border: 1px solid var(--border-hover);
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      overflow: hidden;
    }
    .note-editor-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border);
    }
    .note-textarea {
      width: 100%;
      min-height: 80px;
      padding: 10px 12px;
      background: var(--surface-2);
      border: none;
      color: var(--text);
      font-family: var(--font);
      font-size: 12px;
      line-height: 1.5;
      resize: vertical;
      outline: none;
    }
    .note-textarea::placeholder { color: var(--text-dim); }
    .note-editor-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      border-top: 1px solid var(--border);
    }
    .note-save-btn {
      padding: 4px 14px;
      background: var(--accent);
      color: #000;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .note-save-btn:hover { opacity: 0.85; }
    .note-save-btn:disabled { opacity: 0.5; cursor: default; }

    /* ─── Expandable Row Detail ─── */
    .expanded-row { background: var(--surface-2) !important; }
    .expandable-detail-row td { padding: 0 !important; border: none !important; }
    .row-detail-panel {
      background: var(--surface-2);
      border-left: 3px solid var(--accent);
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 500px;
      max-width: 800px;
    }
    .row-detail-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .row-detail-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      font-weight: 600;
    }
    .row-detail-note {
      width: 100%;
      min-height: 60px;
      padding: 8px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: var(--font);
      font-size: 12px;
      line-height: 1.5;
      resize: vertical;
      outline: none;
    }
    .row-detail-note:focus { border-color: var(--text); }
    .view-customer-btn {
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--border-hover);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
      align-self: flex-start;
    }
    .view-customer-btn:hover {
      background: var(--accent-dim);
      border-color: var(--text);
    }

    /* ─── Gorgias Ticket Cards ─── */
    .gorgias-ticket-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      margin-bottom: 6px;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .gorgias-ticket-card:hover {
      border-color: var(--text);
    }
    .ticket-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .ticket-channel {
      font-size: 10px;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .sentiment-badge {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 3px;
      font-weight: 600;
    }
    .sentiment-badge.negative {
      background: var(--red-dim);
      color: var(--red);
    }
    .sentiment-badge.positive {
      background: var(--green-dim);
      color: var(--green);
    }
    .ticket-subject {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 4px;
    }
    .ticket-preview {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
      margin-bottom: 4px;
    }
    .ticket-meta {
      font-size: 10px;
      color: var(--text-dim);
    }

    /* Ticket Expansion */
    .ticket-expanded { margin-top: 8px; }
    .ticket-summary {
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .summary-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text);
      margin-bottom: 4px;
      font-weight: 600;
    }
    .summary-text {
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-secondary);
    }
    .summary-expand {
      font-size: 11px;
      color: var(--text);
      cursor: pointer;
      margin-top: 6px;
      opacity: 0.8;
    }
    .summary-expand:hover { opacity: 1; }
    .ticket-messages {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 400px;
      overflow-y: auto;
    }
    .message-bubble {
      padding: 8px 12px;
      border-radius: var(--radius);
      max-width: 85%;
      font-size: 12px;
      line-height: 1.4;
    }
    .message-customer {
      background: var(--surface);
      border: 1px solid var(--border);
      align-self: flex-start;
    }
    .message-agent {
      background: rgba(99, 102, 241, 0.08);
      border: 1px solid rgba(99, 102, 241, 0.2);
      align-self: flex-end;
    }
    .message-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-bottom: 3px;
    }
    .message-body {
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* ─── Side Panel ─── */
    .side-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: var(--z-banner); /* must sit above sidebar (--z-header:100); was var(--z-nav):90 which rendered under sidebar */
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .side-panel-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }
    .side-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 420px;
      height: 100vh;
      height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: var(--z-header);
      transform: translateX(100%);
      transition: transform 0.25s ease;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .side-panel.visible { transform: translateX(0); }
    .side-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 20px 20px 16px;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: var(--z-base);
    }
    .side-panel-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
    }
    .side-panel-email {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .close-btn {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 22px;
      cursor: pointer;
      padding: 0 4px;
      line-height: 1;
    }
    .close-btn:hover, .close-btn:focus-visible { color: var(--text); }
    .side-panel-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border-bottom: 1px solid var(--border);
    }
    .sp-stat {
      background: var(--surface);
      padding: 12px 8px;
      text-align: center;
    }
    .sp-stat-val {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      font-family: var(--font-mono);
    }
    .sp-stat-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      margin-top: 2px;
    }
    .side-panel-section {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
    }
    .sp-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-dim);
      font-weight: 600;
      margin-bottom: 10px;
    }
    .sp-order-card {
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .sp-order-card:last-child { border-bottom: none; }
    .sp-order-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }
    .sp-order-detail {
      font-size: 11px;
      color: var(--text-muted);
    }
    .sp-order-note {
      font-size: 11px;
      color: var(--text);
      margin-top: 4px;
      padding: 4px 8px;
      background: var(--accent-dim);
      border-radius: var(--radius-sm);
    }
    .sp-note-card {
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
    }
    .sp-note-card:last-child { border-bottom: none; }
    .sp-note-order {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .sp-note-text {
      font-size: 12px;
      color: var(--text);
      line-height: 1.5;
    }
    .sp-note-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 4px;
    }

    /* ─── Customers Tab ─── */
    .customer-table-row { cursor: pointer; transition: background 0.1s; }
    .customer-table-row:hover { background: var(--surface-2) !important; }
    .gorgias-sync-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: var(--text-dim);
      padding: 4px 10px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
    }

    /* ─── Activity Feed ─── */
    .feed-item {
      display: flex;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    .feed-item:hover { background: var(--surface-2); }
    .feed-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .feed-icon.shopify { background: var(--green-dim); color: var(--green); }
    .feed-icon.issue { background: var(--red-dim); color: var(--red); }
    .feed-icon.agent { background: var(--blue-dim); color: var(--blue); }
    .feed-icon.note { background: var(--accent-dim); color: var(--text); }
    .feed-icon.sync { background: var(--yellow-dim); color: var(--yellow); }
    .feed-icon.manual { background: var(--surface-3); color: var(--text-muted); }
    .feed-body { flex: 1; min-width: 0; }
    .feed-desc { font-size: 13px; color: var(--text); }
    .feed-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 12px; }
    .feed-agent { font-size: 10px; background: var(--surface-3); color: var(--text); padding: 1px 6px; border-radius: 3px; }
    .feed-filters { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
    .feed-filter-btn {
      padding: 4px 12px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .feed-filter-btn:hover { border-color: var(--text); color: var(--text); }
    .feed-filter-btn.active { background: var(--accent-dim); border-color: var(--text); color: var(--text); }
    .feed-load-more {
      text-align: center;
      padding: 12px;
      color: var(--text);
      cursor: pointer;
      font-size: 12px;
    }
    .feed-load-more:hover { text-decoration: underline; }
    .feed-item { align-items: center; }
    .feed-undo-btn {
      padding: 3px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 10px;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .feed-undo-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }
    .feed-item.undone { opacity: 0.45; }
    .feed-item.undone .feed-desc { text-decoration: line-through; }
    .feed-undone-label {
      font-size: 10px;
      color: var(--red);
      background: var(--red-dim);
      padding: 1px 6px;
      border-radius: 3px;
    }
    .feed-user {
      font-size: 10px;
      background: var(--surface-3);
      color: var(--text-muted);
      padding: 1px 6px;
      border-radius: 3px;
    }
    .feed-user-filter {
      padding: 4px 10px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      margin-left: auto;
    }
    .feed-icon.pick_list { background: var(--accent-dim); color: var(--text); }

    /* ─── Executive Summary Card ─── */
    .exec-summary-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-top: 3px solid var(--accent, #c8a97e);
      border-radius: var(--radius-lg);
      padding: 20px 24px 18px;
      margin-bottom: 20px;
      position: relative;
    }
    .exec-summary-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 12px;
    }
    .exec-summary-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }
    .exec-summary-meta {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .exec-summary-stale-note {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
      margin-left: 4px;
      text-transform: none;
      letter-spacing: 0;
    }
    .exec-summary-narrative {
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
      margin-bottom: 18px;
      padding: 12px 16px;
      background: rgba(200, 169, 126, 0.06);
      border-left: 3px solid var(--accent, #c8a97e);
      border-radius: 0 6px 6px 0;
      overflow-wrap: anywhere;
    }
    .exec-summary-metric-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 18px;
    }
    @media (max-width: 900px) {
      .exec-summary-metric-row { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 540px) {
      .exec-summary-metric-row { grid-template-columns: 1fr; }
    }
    .exec-summary-metric-card {
      background: var(--surface-raised, rgba(255,255,255,0.04));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 14px;
      transition: border-color 0.15s;
    }
    .exec-summary-metric-card:hover {
      border-color: var(--accent, #c8a97e);
    }
    .exec-summary-metric-label {
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 600;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .exec-summary-metric-value {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      display: block;
      margin-bottom: 2px;
    }
    .exec-summary-metric-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .exec-summary-actions-section {
      border-top: 1px solid var(--border);
      padding-top: 14px;
    }
    .exec-summary-actions-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .exec-summary-actions-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .exec-summary-action-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.4;
    }
    .exec-summary-action-num {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent, #c8a97e);
      min-width: 16px;
      flex-shrink: 0;
    }
    .exec-summary-action-text {
      flex: 1;
    }

    /* ─── Morning Brief ─── */
    .brief-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }
    .brief-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }
    .brief-card.full-width { grid-column: 1 / -1; }
    .brief-card.urgent { border-color: var(--red); border-width: 2px; }
    .brief-card.stale { border-color: var(--yellow); opacity: 0.7; }
    .brief-card-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .brief-metric {
      font-size: 28px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }
    .brief-sub { font-size: 12px; color: var(--text-muted); }
    .brief-urgent-list { list-style: none; padding: 0; }
    .brief-urgent-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .brief-urgent-item:last-child { border-bottom: none; }
    .brief-agent-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 8px;
    }
    .brief-agent-dot {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 6px 8px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
    }
    .agent-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .agent-dot.ok { background: var(--green); }
    .agent-dot.stale { background: var(--yellow); }
    .agent-dot.error { background: var(--red); }

    /* ─── Bar Chart (SLA / Product Issues) ─── */
    .bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 160px;
      padding: 0 4px;
    }
    .bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .bar-fill {
      width: 100%;
      border-radius: 4px 4px 0 0;
      min-height: 2px;
      transition: height 0.3s;
    }
    .bar-label {
      font-size: 10px;
      color: var(--text-muted);
      text-align: center;
      white-space: nowrap;
    }
    .bar-value {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
    }

    /* ─── Aging Bands (SLA) ─── */
    .aging-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .aging-label {
      width: 80px;
      font-size: 11px;
      color: var(--text-muted);
      text-align: right;
      flex-shrink: 0;
    }
    .aging-bar-track {
      flex: 1;
      height: 20px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .aging-bar-fill {
      height: 100%;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      padding-left: 6px;
      font-size: 10px;
      font-weight: 600;
      color: var(--bg);
      transition: width 0.3s;
    }

    /* ─── Order Journey Modal ─── */
    .journey-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 100dvh; /* dynamic viewport: shrinks when mobile keyboard opens */
      background: rgba(0,0,0,0.7);
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto; /* allow scroll if modal taller than viewport */
      -webkit-overflow-scrolling: touch;
    }
    .journey-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      width: 90%;
      max-width: 800px;
      max-height: 85vh;
      max-height: 85dvh; /* shrinks with keyboard on mobile */
      overflow-y: auto;
      padding: 24px;
    }
    .journey-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
    }
    .journey-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 20px;
      cursor: pointer;
    }
    .journey-close:hover, .journey-close:focus-visible { color: var(--text); outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; border-radius: 3px; }
    .journey-timeline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      position: relative;
      margin-bottom: 24px;
    }
    .journey-timeline::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 24px;
      right: 24px;
      height: 2px;
      background: var(--border);
      transform: translateY(-50%);
    }
    .journey-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: var(--z-base);
    }
    .journey-dot {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--surface-3);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }
    .journey-dot.completed { background: var(--green-dim); border-color: var(--green); color: var(--green); }
    .journey-dot.active { background: var(--accent-dim); border-color: var(--text); color: var(--text); animation: pulse 2s infinite; }
    .journey-dot.issue { background: var(--red-dim); border-color: var(--red); color: var(--red); }
    .journey-node-label { font-size: 10px; color: var(--text-muted); text-align: center; max-width: 80px; }
    .journey-node-date { font-size: 9px; color: var(--text-dim); }
    /* Stage-specific MTO pill colors */
    .pill.mto-s-awaiting          { background: rgba(239,68,68,0.18); color: var(--red); }
    .pill.mto-s-po_placed         { background: rgba(249,115,22,0.18); color: #fb923c; }
    .pill.mto-s-shipped_from_vendor { background: rgba(234,179,8,0.18); color: var(--yellow); }
    .pill.mto-s-production_complete { background: rgba(168,85,247,0.18); color: var(--purple); }
    .pill.mto-s-at_warehouse      { background: rgba(59,130,246,0.18); color: var(--blue); }
    /* 'delivered' = manual "Closed" tag (Suly 2026-06-23) — muted/archived look */
    .pill.mto-s-delivered         { background: rgba(148,163,184,0.18); color: var(--text-muted); }
    /* legacy stage (removed 2026-06-10; rows migrated to at_warehouse) — style
       any straggler like at_warehouse so it never renders unthemed */
    .pill.mto-s-ready_to_ship     { background: rgba(59,130,246,0.18); color: var(--blue); }
    .pill.mto-s-fulfilled         { background: rgba(168,85,247,0.18); color: var(--purple); }
    /* Legacy aliases kept for any in-flight references */
    .pill.mto-stage-pill { background: rgba(200,169,126,0.15); color: var(--text); }
    .pill.mto-awaiting   { background: rgba(239,68,68,0.18); color: #f87171; }
    .pill.mto-clickable { cursor: pointer; transition: filter 0.15s; }
    .pill.mto-clickable:hover { filter: brightness(1.3); }
    .mto-order-num-link { cursor: pointer; }
    .mto-order-num-link:hover { text-decoration: underline; }
    .mto-tracking-num-cell { cursor: pointer; }
    .mto-detail-customer-link { cursor: pointer; }
    .mto-detail-customer-link:hover { text-decoration: underline; color: var(--accent); }
    .mto-supplier-link { cursor: pointer; }
    .mto-supplier-link:hover { text-decoration: underline; color: var(--accent); }
    .mto-detail-supplier-link { cursor: pointer; }
    .mto-detail-supplier-link:hover { text-decoration: underline; color: var(--accent); }
    tr.mto-row-selected > td { background: rgba(139,92,246,0.08) !important; }
    /* ─── MTO Bulk Action Bar ───
       Docked full-width footer, NOT a floating centered pill. The pill version
       (bottom:28px, left:50%, 526px wide) invisibly swallowed clicks on any
       row checkbox that scrolled behind it — at viewports <~1080px its left
       edge crossed the far-left checkbox column and "the checkboxes stopped
       working" (caught 2026-06-10). A docked opaque footer occupies real
       visual space, and the body.mto-bulk-bar-open spacer below lets every
       row scroll clear of it. */
    .mto-bulk-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      transform: translateY(110%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px 20px;
      background: var(--surface-2);
      border-top: 1px solid var(--accent);
      box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
      z-index: var(--z-palette); /* was 9000 — no clean token; nearest is palette (9990) */
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    .mto-bulk-bar.visible { transform: translateY(0); }
    /* Spacer so the table's last rows can always scroll above the docked bar */
    body.mto-bulk-bar-open #mainContent { padding-bottom: 120px; }
    .mto-bulk-count { font-size: 13px; font-weight: 600; color: var(--accent); }
    .mto-bulk-apply-btn {
      padding: 6px 16px; font-size: 12px; font-weight: 600;
      background: var(--accent); color: #fff; border: none;
      border-radius: var(--radius-sm); cursor: pointer;
    }
    .mto-bulk-apply-btn:hover { filter: brightness(1.15); }
    .mto-bulk-apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .mto-bulk-clear-btn {
      padding: 6px 12px; font-size: 12px;
      background: transparent; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
    }
    .mto-bulk-clear-btn:hover { color: var(--text); border-color: var(--text-dim); }
    /* ─── MTO Order Detail Panel ─── */
    .mto-detail-panel {
      position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 95vw;
      background: var(--surface); border-left: 1px solid var(--border);
      box-shadow: -8px 0 32px rgba(0,0,0,0.5); z-index: var(--z-jarvis);
      display: flex; flex-direction: column; overflow: hidden;
      animation: mto-panel-slide-in 0.2s ease-out;
    }
    @keyframes mto-panel-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
    .mto-detail-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid var(--border);
      background: var(--surface-2); flex-shrink: 0;
    }
    .mto-detail-title { font-size: 15px; font-weight: 600; color: var(--text); }
    .mto-detail-close {
      background: none; border: none; color: var(--text-muted); font-size: 20px;
      cursor: pointer; padding: 0 4px; line-height: 1;
    }
    .mto-detail-close:hover { color: var(--text); }
    .mto-detail-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
    .mto-detail-section { display: flex; flex-direction: column; gap: 4px; }
    .mto-detail-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); font-weight: 600; margin-bottom: 2px; }
    .mto-detail-value { font-size: 13px; color: var(--text); }
    .mto-detail-sub { font-size: 12px; color: var(--text-muted); }
    .mto-detail-copy-btn {
      align-self: flex-start; margin-top: 6px; padding: 4px 10px; font-size: 11px;
      background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); cursor: pointer;
    }
    .mto-detail-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
    .mto-detail-copy-update-btn { background: rgba(200,169,126,0.08); border-color: var(--accent); color: var(--accent); }
    .mto-detail-copy-update-btn:hover { background: rgba(200,169,126,0.18); }
    .mto-eta-input { max-width: 140px; }
    .mto-detail-divider { height: 1px; background: var(--border); margin: 4px 0; }
    .mto-detail-customer-link { cursor: pointer; color: var(--accent); }
    .mto-detail-customer-link:hover { text-decoration: underline; }
    /* ─── MTO Order Summary Panel (all items in one order) ─── */
    .mto-summary-panel { width: 440px; max-width: 95vw; }
    .mto-summary-items { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
    .mto-summary-item {
      border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
      background: var(--surface-2); cursor: pointer; transition: border-color 0.12s, background 0.12s;
      display: flex; flex-direction: column; gap: 4px;
    }
    .mto-summary-item:hover { border-color: var(--accent); background: rgba(200,169,126,0.06); }
    .mto-summary-item-row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
    .mto-summary-item-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; flex: 1; }
    .mto-summary-item-qty { font-size: 12px; color: var(--accent); font-weight: 700; font-family: var(--font-mono); flex-shrink: 0; }
    .mto-summary-item-variant { font-size: 11px; color: var(--text-muted); }
    .mto-summary-item-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11px; }
    .mto-summary-item-sku { color: var(--text-dim); }
    .mto-summary-item-price { color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); }
    .mto-summary-item-row3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
    .mto-summary-item-row3 .pill { font-size: 10px; padding: 2px 8px; }
    .mto-summary-item-track { font-size: 10px; color: var(--text-dim); padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .mto-summary-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 12px; }
    .mto-summary-total-row.mto-summary-total-grand { font-size: 14px; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); padding-top: 8px; margin-top: 4px; }
    .mto-summary-refund { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--border); }
    .mto-summary-refund:last-child { border-bottom: none; }
    .mto-summary-refund-amt { color: var(--red); font-weight: 600; font-family: var(--font-mono); }
    .mto-summary-refund-reason { flex: 1; color: var(--text-muted); }
    .mto-summary-refund-date { font-size: 11px; }
    .mto-customer-intel-arrow { color: var(--accent); font-weight: 700; margin-left: 4px; }
    .mb-show-mobile { display: none; }
    @media (max-width: 768px) {
      .mb-show-mobile { display: inline; }
    }

    /* MTO stage-filter count badges — the per-stage counts live on the filter
       chips themselves (Awaiting PO 18, In Production 48 …) so the big KPI grid
       can be hidden on mobile without losing the at-a-glance numbers. */
    .toggle-group[data-action-group="mto-stage-filter"] .mto-cnt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 17px;
      padding: 0 5px;
      margin-left: 5px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      border-radius: 9px;
      /* Neutral translucent gray reads on both a dark (desktop) and a cream
         (mobile active) chip; text inherits the chip's own already-legible
         label color so the count is never lower-contrast than the label. */
      background: rgba(128,128,128,0.20);
      color: inherit;
      opacity: 0.85;
      vertical-align: middle;
    }
    .toggle-group[data-action-group="mto-stage-filter"] .toggle-btn.active .mto-cnt {
      opacity: 1;
    }

    /* Mobile-only "oldest active" aging pill in the page header — replaces the
       Oldest Active KPI card that gets hidden on mobile. */
    .mto-mobile-aging { display: none; }
    @media (max-width: 768px) {
      .mto-mobile-aging {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex: 0 0 auto;
        padding: 4px 10px;
        border-radius: 999px;
        background: var(--surface-2);
        border: 1px solid var(--border);
        white-space: nowrap;
      }
      .mto-mobile-aging-lbl {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
      }
      .mto-mobile-aging-num {
        font-size: 13px;
        font-weight: 800;
        font-family: var(--font-mono, monospace);
        font-variant-numeric: tabular-nums;
      }
    }

    /* Fulfilled items are dimmed — visually demoted within the items list. */
    .mto-summary-item.is-fulfilled {
      opacity: 0.6;
      background: var(--surface-3, var(--surface));
    }
    .mto-summary-item.is-fulfilled .mto-summary-item-title { font-weight: 500; }

    /* Health badge inline with the Customer label */
    .mto-health-badge {
      display: inline-block;
      margin-left: 6px;
      padding: 1px 8px;
      border-radius: 9px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #fff;
      vertical-align: middle;
    }

    .mto-detail-supplier-link {
      cursor: pointer;
      color: var(--accent);
    }
    .mto-detail-supplier-link:hover { text-decoration: underline; }

    /* ─── Quick-actions footer (fixed at bottom of summary panel) ─── */
    .mto-summary-quickbar {
      display: flex;
      gap: 6px;
      padding: 8px 10px max(8px, env(safe-area-inset-bottom, 8px));
      border-top: 1px solid var(--border);
      background: var(--surface-2);
      flex-shrink: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .mto-summary-quickbar:empty { display: none; }
    .mto-qb-btn {
      flex: 1 1 0;
      min-width: 60px;
      max-width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 8px 4px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.12s, border-color 0.12s, transform 0.08s;
      min-height: 52px;
      box-sizing: border-box;
    }
    .mto-qb-btn:hover:not(.mto-qb-disabled) {
      border-color: var(--accent);
      background: rgba(200,169,126,0.08);
    }
    .mto-qb-btn:active:not(.mto-qb-disabled) { transform: scale(0.96); }
    .mto-qb-btn.mto-qb-primary {
      background: var(--accent);
      color: var(--text);
      border-color: var(--accent);
    }
    .mto-qb-btn.mto-qb-primary:hover { filter: brightness(1.08); }
    .mto-qb-btn.mto-qb-disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .mto-qb-icon { font-size: 18px; line-height: 1; }
    .mto-qb-label { font-size: 11px; line-height: 1.1; }

    .mto-summary-customer-block .mto-detail-value { font-size: 15px; font-weight: 600; }
    /* Tracking number edit inputs */
    .mto-tracking-edit-wrap { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    .pill.mto-tracking-badge { font-size: 10px; padding: 2px 7px; vertical-align: middle; }
    .pill.mto-tracking-transit { background: rgba(99,179,237,0.15); color: var(--blue); }
    .pill.mto-tracking-delivered { background: rgba(72,199,142,0.15); color: var(--green); }
    .mto-tracking-btn { display: inline-flex; align-items: center; vertical-align: middle; padding: 2px 3px; border-radius: 3px; transition: opacity 0.15s; }
    .mto-tracking-btn:hover { opacity: 1 !important; background: rgba(255,255,255,0.08); }
    .mto-dropdown {
      position: fixed; z-index: var(--z-toast);
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,0.5);
      min-width: 140px; overflow: hidden;
    }
    .mto-dropdown-item {
      padding: 8px 14px; font-size: 12px; cursor: pointer;
      color: var(--text); transition: background 0.1s;
    }
    .mto-dropdown-item:hover { background: rgba(200,169,126,0.12); color: var(--text); }
    .mto-stage-control {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 16px; margin: -8px 0 4px 0;
      background: rgba(200,169,126,0.06); border: 1px solid rgba(200,169,126,0.15);
      border-radius: var(--radius-sm); font-size: 12px;
    }
    .mto-stage-label { color: var(--text-muted); white-space: nowrap; }
    .mto-stage-current { color: var(--text); font-weight: 600; flex: 1; }
    .mto-stage-select {
      background: var(--surface); color: var(--text); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; cursor: pointer;
    }
    .mto-stage-select:hover { border-color: var(--text); }
    .journey-items { margin-top: 16px; }
    .order-link-icon {
      cursor: pointer;
      font-size: 12px;
      opacity: 0.6;
      transition: opacity 0.15s;
    }
    .order-link-icon:hover, .order-link-icon:focus-visible { opacity: 1; }

    /* ─── Inventory Matrix ─── */
    .matrix-table { border-collapse: collapse; width: 100%; font-size: 11px; }
    .matrix-table th, .matrix-table td { padding: 5px 6px; border: 1px solid var(--border); white-space: nowrap; }
    .matrix-table thead th { background: var(--surface-2); position: sticky; top: 0; z-index: var(--z-raised); font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); white-space: normal; }
    .matrix-table thead th.loc-col { text-align: center; min-width: 50px; cursor: pointer; }
    .matrix-table tbody td { text-align: center; }
    .matrix-table tbody td.sku-cell { text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--text); }
    /* Parent-composite "of FL-73-x" badge — sits BELOW the SKU on its own
       line so the SKU column can stay compact instead of being forced wide
       by the inline badge. */
    .matrix-table tbody td.sku-cell .sku-parent-of {
      font-size: 10px;
      color: var(--text-muted);
      font-family: var(--font-mono);
      margin-top: 2px;
      line-height: 1.2;
    }
    .matrix-table tbody td.title-cell { text-align: left; max-width: 180px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .matrix-qty { font-family: var(--font-mono); font-weight: 500; font-size: 11px; padding: 4px 4px; }
    .matrix-table thead th.loc-col { padding: 4px 4px; }
    .matrix-qty.has-stock { color: var(--green); }
    .matrix-qty.zero { color: var(--text-dim); }
    .matrix-total { font-weight: 600; color: var(--text); }

    /* ─── Order Map (State Tile Grid) ─── */
    .state-grid { display: grid; gap: 3px; margin: 0 auto; max-width: 760px; }
    .state-tile {
      aspect-ratio: 1;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 600; border-radius: 3px;
      color: var(--text); position: relative; cursor: default;
      transition: transform 0.1s;
    }
    .state-tile:hover { transform: scale(1.15); z-index: var(--z-raised); }
    .state-tile .tile-count {
      position: absolute; bottom: 1px; right: 3px;
      font-size: 8px; font-weight: 400; opacity: 0.8; font-family: var(--font-mono);
    }
    .map-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-muted); }
    .legend-swatch { width: 16px; height: 12px; border-radius: 2px; }
    .warehouse-marker { outline: 2px solid var(--accent); outline-offset: -1px; }
    .map-state-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); }
    .map-state-bar { height: 14px; border-radius: 2px; min-width: 3px; }

    /* ─── Export Button ─── */
    .export-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      transition: all 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .export-btn:hover { border-color: var(--text); color: var(--text); }

    /* ─── Date Range Bar ─── */
    .date-range-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .date-preset-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      transition: all 0.15s;
    }
    .date-preset-btn:hover, .date-preset-btn.active {
      border-color: var(--text);
      color: var(--text);
      background: var(--accent-dim);
    }
    .date-input {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 5px 8px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-family: var(--font-mono);
      outline: none;
    }
    .date-input:focus { border-color: var(--text); }

    /* ─── Segment Chips ─── */
    .segment-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .segment-chip {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 16px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all 0.15s;
    }
    .segment-chip:hover { border-color: var(--text); color: var(--text); }
    .segment-chip.active { background: var(--accent-dim); border-color: var(--text); color: var(--text); font-weight: 500; }
    .segment-chip .chip-count { background: var(--surface-3); padding: 1px 6px; border-radius: var(--radius); font-size: 10px; font-weight: 600; }
    .segment-chip.active .chip-count { background: rgba(200, 169, 126, 0.3); }
    .segment-badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.3px; }
    .segment-badge.vip { background: rgba(200, 169, 126, 0.15); color: var(--text); }
    .segment-badge.growing { background: var(--green-dim); color: var(--green); }
    .segment-badge.one-and-done { background: var(--surface-3); color: var(--text-muted); }
    .segment-badge.at-risk { background: var(--red-dim); color: var(--red); }

    /* ─── Bulk Action Bar ─── */
    .bulk-action-bar {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: var(--surface); border: 1px solid var(--accent);
      border-radius: var(--radius); padding: 10px 20px;
      display: flex; align-items: center; gap: 14px;
      z-index: var(--z-dropdown); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      animation: slideUp 0.2s ease;
    }
    @keyframes slideUp {
      from { transform: translateX(-50%) translateY(20px); opacity: 0; }
      to { transform: translateX(-50%) translateY(0); opacity: 1; }
    }
    .bulk-count { background: var(--accent); color: var(--bg); padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 600; }
    .bulk-btn {
      background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
      padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: all 0.15s;
    }
    .bulk-btn:hover { border-color: var(--text); color: var(--text); }
    .bulk-btn.primary { background: var(--accent-dim); border-color: rgba(200, 169, 126, 0.3); color: var(--text); }
    .bulk-btn.primary:hover { background: var(--accent); color: var(--bg); }
    .bulk-deselect { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 11px; }
    .bulk-deselect:hover { color: var(--red); }
    .row-checkbox { width: 16px; height: 16px; accent-color: var(--text); cursor: pointer; }

    /* ─── Global Search (Cmd+K) ─── */
    .search-overlay {
      position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
      z-index: var(--z-overlay); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh;
    }
    .search-modal {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      width: 90%; max-width: 600px; box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6); overflow: hidden;
      max-height: calc(100dvh - 120px); display: flex; flex-direction: column;
    }
    .search-input-wrap {
      display: flex; align-items: center; padding: 16px 20px;
      border-bottom: 1px solid var(--border); gap: 12px;
    }
    .search-input-wrap .si { font-size: 18px; color: var(--text-muted); }
    .search-modal-input {
      flex: 1; background: none; border: none; color: var(--text);
      font-size: 16px; font-family: var(--font); outline: none;
    }
    .search-modal-input::placeholder { color: var(--text-dim); }
    .search-shortcut { font-size: 10px; color: var(--text-dim); background: var(--surface-3); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); }
    .search-results { max-height: min(400px, calc(100dvh - 200px)); overflow-y: auto; flex: 1; }
    .search-category { padding: 8px 20px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); font-weight: 600; }
    .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; transition: background 0.1s; }
    .search-result-item:hover { background: var(--surface-2); }
    .search-result-icon {
      width: 28px; height: 28px; border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0;
    }
    .search-result-icon.order { background: var(--green-dim); color: var(--green); }
    .search-result-icon.customer { background: var(--blue-dim); color: var(--blue); }
    .search-result-icon.product { background: var(--accent-dim); color: var(--text); }
    .search-result-icon.issue { background: var(--red-dim); color: var(--red); }
    .search-result-icon.nav { background: var(--surface-3); color: var(--text-muted); font-size: 14px; }
    .search-result-item.focused { background: var(--surface-2); outline: 1px solid rgba(200,169,126,0.5); outline-offset: -1px; border-radius: 2px; }
    .search-result-text { flex: 1; min-width: 0; }
    .search-result-title { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-result-sub { font-size: 11px; color: var(--text-muted); }
    .search-empty { padding: 30px 20px; text-align: center; color: var(--text-dim); font-size: 13px; }
    .search-footer { padding: 8px 20px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-dim); display: flex; gap: 16px; }
    .search-nav-enter { font-size: 10px; color: var(--text-dim); padding: 1px 5px; background: var(--surface-3); border-radius: 3px; font-family: var(--font-mono); flex-shrink: 0; }
    /* Live refresh indicator */
    .live-indicator { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-dim); padding: 3px 9px; border-radius: var(--radius); background: var(--surface-2); user-select: none; transition: all 0.4s; }
    .live-indicator.active { color: var(--green); background: var(--green-dim); }
    .live-indicator.refreshing { color: var(--text); background: var(--accent-dim); }
    .live-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .live-indicator.active .live-dot { animation: livePulse 2.5s ease-in-out infinite; }
    @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.65); } }

    /* Warehouse grid layout */
    .wh-grid-search {
      display: flex; align-items: center; gap: 12px; padding: 14px 18px;
      background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
      margin-bottom: 20px; transition: border-color 0.15s;
    }
    .wh-grid-search:focus-within { border-color: var(--text); }
    .wh-grid-search svg { flex-shrink: 0; color: var(--text-muted); }
    .wh-grid-search input {
      flex: 1; background: none; border: none; outline: none; color: var(--text);
      font-size: 15px; font-family: inherit;
    }
    .wh-grid-search input::placeholder { color: var(--text-dim); }
    .wh-grid-search .search-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

    .wh-grid-container { margin-bottom: 24px; }
    .wh-grid-header {
      display: grid; grid-template-columns: 48px repeat(5, 1fr); gap: 6px;
      margin-bottom: 6px; position: sticky; top: 0; z-index: var(--z-raised);
      /* Pad + negative-margin trick so when content scrolls past, the area
         ABOVE the header is also covered by --bg — was: content showed
         transparently above the A/B/C/D/E labels. (Cole 2026-04-25.) */
      background: var(--bg);
      padding: 12px 0 6px 0;
      margin-top: -12px;
      box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.12);
    }
    /* Shelf Management warehouse picker — admin segmented control */
    .shelfmgmt-picker {
      display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; margin-bottom: 4px;
    }
    .shelfmgmt-pick-btn {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text-muted); padding: 6px 14px; border-radius: var(--radius-sm);
      font-size: 13px; cursor: pointer; transition: all 0.15s;
    }
    .shelfmgmt-pick-btn:hover { border-color: var(--text); color: var(--text); }
    .shelfmgmt-pick-btn.active {
      background: var(--text); border-color: var(--text); color: var(--surface); font-weight: 600;
    }
    /* Inline shelf detail — drops below the clicked row, pushes other rows down */
    .wh-shelf-inline-detail {
      grid-column: 1 / -1;
      width: 100%;
      background: var(--surface);
      border: 1px solid var(--accent);
      border-radius: var(--radius);
      margin: 4px 0 10px 0;
      padding: 12px 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .wh-grid-col-label {
      text-align: center; font-size: 13px; font-weight: 700; color: var(--text);
      font-family: var(--font-mono); letter-spacing: 1px;
    }
    .wh-grid-row {
      display: grid; grid-template-columns: 48px repeat(5, 1fr); gap: 6px; margin-bottom: 6px;
    }
    .wh-grid-row-label {
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: var(--text-muted);
      font-family: var(--font-mono);
    }
    .wh-grid-cell {
      padding: 10px 8px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); cursor: pointer; transition: all 0.15s; text-align: center;
      min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .wh-grid-cell:hover { border-color: var(--text); background: var(--surface-2); }
    .wh-grid-cell.selected { border-color: var(--text); background: rgba(232, 197, 71, 0.08); box-shadow: 0 0 0 1px var(--accent); }
    .wh-grid-cell.empty { opacity: 0.4; cursor: pointer; border-style: dashed; }
    .wh-grid-cell.empty:hover { opacity: 0.95; border-color: var(--text); background: var(--surface-2); }
    .wh-grid-cell.empty.wh-grid-cell-creatable .wh-grid-cell-stats { font-size: 10px; opacity: 0; transition: opacity 0.15s; }
    .wh-grid-cell.empty.wh-grid-cell-creatable:hover .wh-grid-cell-stats { opacity: 1; color: var(--accent); font-weight: 600; }
    .wh-grid-cell.has-items { border-color: rgba(74, 222, 128, 0.3); }
    .wh-grid-cell.search-match { border-color: var(--text); background: rgba(232, 197, 71, 0.1); }
    .wh-grid-cell-code { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--text); }
    .wh-grid-cell-stats { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
    .wh-grid-cell-units { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--green); margin-top: 2px; }

    .wh-special-zones { margin-top: 24px; }
    .wh-special-zones h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 10px; }
    .wh-zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }

    .wh-detail-panel {
      margin-top: 16px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); overflow: hidden;
    }
    .wh-detail-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2);
    }
    .wh-detail-header h3 { margin: 0; font-size: 16px; }
    .wh-detail-header .close-btn { cursor: pointer; color: var(--text-muted); font-size: 18px; padding: 4px 8px; border-radius: var(--radius-sm); }
    .wh-detail-header .close-btn:hover { background: var(--surface-3); color: var(--text); }

    /* Inline shelf detail — expands below the shelf row */
    .shelf-inline-detail {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin: 6px 0 10px 0;
      overflow: hidden;
      animation: shelfSlideDown 0.15s ease-out;
    }
    @keyframes shelfSlideDown {
      from { opacity: 0; max-height: 0; transform: translateY(-8px); }
      to { opacity: 1; max-height: 600px; transform: translateY(0); }
    }
    .shelf-inline-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .shelf-inline-detail table { font-size: 12px; }
    .shelf-inline-detail .close-btn:hover { color: var(--text); }

    .scan-container { max-width: 700px; margin: 0 auto; }
    .scan-mode-toggle {
      display: flex; gap: 0; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
      border: 1px solid var(--border); width: fit-content;
    }
    .scan-mode-btn {
      padding: 12px 32px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
      background: var(--surface); color: var(--text-muted); transition: all 0.15s;
    }
    .scan-mode-btn.active.mode-in { background: var(--green); color: #000; }
    .scan-mode-btn.active.mode-out { background: var(--red); color: #fff; }
    .scan-input-wrapper {
      border: 2px solid var(--border); border-radius: var(--radius); padding: 16px;
      margin-bottom: 16px; transition: border-color 0.15s;
    }
    .scan-input-wrapper.mode-in { border-color: var(--green); }
    .scan-input-wrapper.mode-out { border-color: var(--red); }
    .scan-input {
      width: 100%; font-size: 24px; padding: 12px 0; border: none; outline: none;
      background: transparent; color: var(--text); font-family: 'JetBrains Mono', monospace;
    }
    .scan-input::placeholder { color: var(--text-dim); font-size: 18px; }
    .scan-shelf-selector { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
    .scan-shelf-selector label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
    .scan-shelf-selector select {
      padding: 8px 12px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-sm); color: var(--text); font-size: 14px;
    }
    .scan-feedback {
      padding: 14px 18px; border-radius: var(--radius); margin-bottom: 12px; font-size: 14px;
      font-weight: 500; animation: fadeInOut 3s forwards;
    }
    .scan-feedback.success { background: rgba(74,222,128,0.12); color: var(--green); border: 1px solid var(--green); }
    .scan-feedback.error { background: rgba(248,113,113,0.12); color: var(--red); border: 1px solid var(--red); }
    @keyframes fadeInOut { 0%{opacity:0;transform:translateY(-8px)} 10%{opacity:1;transform:translateY(0)} 80%{opacity:1} 100%{opacity:0} }
    .scan-history { margin-top: 20px; }
    .scan-history-item {
      display: flex; align-items: center; gap: 12px; padding: 8px 12px;
      border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .scan-history-item .time { color: var(--text-dim); font-size: 11px; min-width: 60px; }
    .scan-history-item .action-badge {
      padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; text-transform: uppercase;
    }
    .scan-history-item .action-badge.in { background: var(--green-dim); color: var(--green); }
    .scan-history-item .action-badge.out { background: var(--red-dim); color: var(--red); }
    .manage-section { margin-bottom: 24px; }
    .manage-section h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--text); }
    .manage-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
    .manage-form .field { display: flex; flex-direction: column; gap: 4px; }
    .manage-form .field label { font-size: 11px; color: var(--text-muted); }
    .manage-form .field input, .manage-form .field select {
      padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius-sm); color: var(--text); font-size: 13px; min-width: 120px;
    }
    .manage-form button {
      padding: 8px 18px; background: var(--accent); color: var(--bg); border: none;
      border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .manage-form button:hover { opacity: 0.85; }

    /* ─── Pick List System ─── */
    .pick-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin-top: 12px; }
    .pick-list-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
    .pick-list-card:hover { border-color: var(--text); box-shadow: 0 0 0 1px var(--accent-dim); }
    .pick-list-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
    .pick-list-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
    .pick-progress { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin: 8px 0; }
    .pick-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
    .pick-progress-fill.green { background: var(--green); }
    .pick-progress-fill.yellow { background: var(--yellow); }
    .pick-progress-fill.accent { background: var(--accent); }
    .pick-list-card-meta { display: flex; gap: 12px; color: var(--text-muted); font-size: 12px; margin-bottom: 10px; }
    .pick-list-card-actions { display: flex; gap: 8px; margin-top: 8px; }
    .pick-list-card-actions button { padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 500; transition: all 0.15s; }
    .pick-list-card-actions button:hover { border-color: var(--text); color: var(--text); }
    .pick-list-card-actions button.primary { background: var(--accent); color: var(--bg); border-color: var(--text); }
    .pick-list-card-actions button.danger { border-color: var(--red); color: var(--red); }
    .pick-list-card-actions button.danger:hover { background: var(--red-dim); }

    .pill.pick-open { background: var(--blue-dim); color: var(--blue); }
    .pill.pick-in_progress { background: var(--yellow-dim); color: var(--yellow); }
    .pill.pick-completed { background: var(--green-dim); color: var(--green); }
    .pill.pick-cancelled { background: var(--surface-3); color: var(--text-muted); }
    .pill.pick-archived  { background: var(--surface-2); color: var(--text-dim); text-decoration: line-through; }
    .pill.pick-picked { background: var(--green-dim); color: var(--green); }
    .pill.pick-pending { background: var(--yellow-dim); color: var(--yellow); }
    .pill.pick-short { background: var(--red-dim); color: var(--red); }
    .pill.pick-skipped { background: var(--surface-3); color: var(--text-muted); }
    .pill.pick-in_transit { background: rgba(96, 165, 250, 0.12); color: var(--blue); }
    .pill.pick-delivered { background: var(--green-dim); color: var(--green); }
    .pill.pick-archived { background: var(--surface-3); color: var(--text-muted); }

    .pick-detail-row.picked { background: rgba(74, 222, 128, 0.04); }
    .pick-detail-row.short { background: rgba(248, 113, 113, 0.04); }
    .pick-detail-row.skipped { background: rgba(136, 136, 136, 0.04); }

    /* 2026-05-27 — carton-band zebra (Cole's rule: one physical box per
       row). Bands alternate BY CARTON, not by row. A 2-per-box pair shares
       one band color, then the next carton flips. Status backgrounds above
       (picked / short / skipped) take precedence; bands only paint neutral
       rows so we don't fight the status signal. */
    .pick-detail-row.pld-band-a:not(.picked):not(.short):not(.skipped) {
      background: rgba(120, 120, 120, 0.03);
    }
    .pick-detail-row.pld-band-b:not(.picked):not(.short):not(.skipped) {
      background: rgba(120, 120, 120, 0.10);
    }

    /* 2026-05-27 — tight 2-per-box pair: the two rows of one carton
       (shared box_seq, pick_row_seq=1 + pick_row_seq=2) collapse vertically
       into one block. First row drops its bottom padding + border; second
       row drops its top padding + border; carton-end (last row of a carton,
       or any non-paired row) keeps the standard 10px-each + 1px border so
       cartons are visibly separated. */
    .pick-detail-row.pld-pair-first > td {
      padding-bottom: 2px;
      border-bottom: none;
    }
    .pick-detail-row.pld-pair-second > td {
      padding-top: 2px;
      border-top: none;
    }
    /* A left "carton bar" makes the pair physically read as one carton
       even on rows where the status background (picked/short) outranks
       the band color. Falls on the FIRST cell of the pair-first row, and
       extends down through the pair-second row via its absence of a
       border-top. */
    .pick-detail-row.pld-pair-first > td:first-child,
    .pick-detail-row.pld-pair-second > td:first-child {
      box-shadow: inset 3px 0 0 var(--accent, #6b7280);
    }


    .pick-tab-group { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
    .pick-tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; }
    .pick-tab:hover { color: var(--text); }
    .pick-tab.active { color: var(--text); border-bottom-color: var(--text); }

    /* ─────────────────────────────────────────────────────────────────────
     * Hub subtabs (consolidation wrappers: catalog-hub, jarvis-hub, etc.)
     * 2026-05-15 (Cole, R42A2): sticky + role=tablist + visually distinct
     * from inner sub-tab-bars so users can always find the path back to the
     * sibling hub view, even while scrolling long inner tables.
     * Shared installer: js/shared/hub-subtabs.js
     * ──────────────────────────────────────────────────────────────────── */
    .pick-tab-group.hub-subtabs {
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--surface);
      margin: 0 -24px 16px -24px;
      padding: 4px 24px 0 24px;
      box-shadow: 0 1px 0 var(--border);
    }
    /* Buttons inside hub-subtabs use slightly stronger weight than inner
       sub-tab-bars so the nav level is unambiguous. */
    .pick-tab-group.hub-subtabs .hub-subtab {
      appearance: none;
      background: transparent;
      border: none;
      font-weight: 600;
      letter-spacing: 0.01em;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
    }
    .pick-tab-group.hub-subtabs .hub-subtab.active {
      border-bottom-color: var(--accent, #a67c52);
    }
    .pick-tab-group.hub-subtabs .hub-subtab:focus-visible {
      outline: 2px solid var(--accent, #a67c52);
      outline-offset: -2px;
      border-radius: var(--radius-sm);
    }


    /* Composite / Multi-box indicators */
    .freight-carrier-pill { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; background: rgba(192, 132, 252, 0.15); color: #c084fc; margin-left: 4px; vertical-align: middle; }
    .stat-subval { font-size: 14px; font-weight: 400; color: var(--text-muted); }
    .composite-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; background: rgba(124, 58, 237, 0.1); color: var(--purple); white-space: nowrap; }
    .composite-badge .box-icon { font-size: 13px; }
    .composite-banner { background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.25); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
    .composite-banner-title { font-size: 14px; font-weight: 600; color: var(--purple); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
    .composite-sibling { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); margin-top: 6px; }
    .composite-sibling .sib-sku { font-family: var(--font-mono); font-weight: 600; color: var(--text); cursor: pointer; }
    .composite-sibling .sib-sku:hover { text-decoration: underline; }
    .composite-sibling .sib-status { font-size: 12px; }
    .composite-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
    .composite-dot.ok { background: var(--green); }
    .composite-dot.warn { background: var(--yellow); }
    .composite-dot.missing { background: var(--red); }
    .combinable-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; background: var(--blue-dim); color: var(--blue); white-space: nowrap; }

    /* ─── Catalog: coverage banner, composite grouping, source chips ─── */
    .prod-coverage-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 12px 0; }
    .prod-coverage-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
    .prod-coverage-detail { font-size: 12px; color: var(--text-muted); }
    .prod-coverage-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .prod-coverage-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
    .prod-coverage-pill:hover { color: var(--text); border-color: var(--accent); }
    .prod-coverage-pill.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
    .prod-coverage-pill .count { font-family: var(--font-mono); font-weight: 600; }
    .prod-coverage-missing-list { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
    .prod-coverage-missing-head { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .prod-coverage-missing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; font-family: var(--font-mono); font-size: 12px; }
    .prod-coverage-missing-item { padding: 4px 8px; background: var(--surface-2); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s; }
    .prod-coverage-missing-item:hover { background: var(--accent-dim); color: var(--accent); }
    .prod-coverage-missing-more { margin-top: 8px; font-size: 11px; color: var(--text-muted); font-style: italic; }

    .prod-source-chip { display: inline-block; padding: 1px 6px; margin-left: 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
    .prod-source-chip-container { background: rgba(251, 146, 60, 0.12); color: #fb923c; }
    .prod-source-chip-supabase { background: rgba(74, 222, 128, 0.12); color: #4ade80; }

    .table-scroll table tbody tr.composite-child-row td,
    .composite-child-row td { background: var(--surface-2); font-size: 10.5px; line-height: 1.2; color: var(--text-muted); border-top: none !important; padding: 3px 8px; }
    .table-scroll table tbody tr.composite-child-row .prod-sku-td,
    .composite-child-row .prod-sku-td { padding-left: 4px; }
    .composite-child-row .prod-child-affix { color: var(--text-muted); margin-right: 2px; font-family: var(--font-mono); font-size: 9px; opacity: 0.7; }

    /* ─── Product Detail: per-box detail table (Phase 3) ─── */
    .pd-boxes-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pd-boxes-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .pd-boxes-title { font-size: 14px; font-weight: 600; color: var(--text); }
    .pd-boxes-meta { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
    .pd-boxes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .pd-boxes-table th { text-align: left; padding: 6px 10px; background: var(--surface-2); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
    .pd-boxes-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
    .pd-boxes-table tr:last-child td { border-bottom: none; }
    .pd-boxes-table .sib-sku { font-weight: 600; color: var(--text); cursor: pointer; }
    .pd-boxes-table .sib-sku:hover { text-decoration: underline; color: var(--accent); }
    .pd-boxes-sellable { margin-top: 10px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 13px; display: flex; align-items: center; gap: 8px; }
    .pd-boxes-sellable-val { color: var(--green); font-weight: 700; font-size: 15px; }

    /* ─── Bulk Label Generation ─── */

    .bulk-lbl-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-top: 16px; overflow: hidden; }
    .bulk-lbl-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .bulk-lbl-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .bulk-lbl-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
    .bulk-lbl-close:hover { background: var(--surface-3); color: var(--text); }

    .bulk-lbl-warn { padding: 10px 18px; background: rgba(251, 191, 36, 0.08); border-bottom: 1px solid rgba(251, 191, 36, 0.15); font-size: 12px; color: var(--yellow); }
    .bulk-lbl-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; border-bottom: 1px solid var(--border); }
    .bulk-lbl-select-all { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
    .bulk-lbl-select-all input { accent-color: var(--text); width: 16px; height: 16px; cursor: pointer; }
    .bulk-lbl-rate-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent); transition: all 0.15s; }
    .bulk-lbl-rate-btn:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
    .bulk-lbl-rate-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    .bulk-lbl-table { overflow-x: auto; }
    .bulk-lbl-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .bulk-lbl-table th { text-align: left; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .bulk-lbl-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .bulk-lbl-table tr:hover { background: var(--surface-2); }
    .bulk-lbl-table td input[type="checkbox"] { accent-color: var(--text); width: 15px; height: 15px; cursor: pointer; }
    .bulk-lbl-unselected { opacity: 0.35; }

    .bulk-lbl-svc-select { padding: 4px 6px; border-radius: var(--radius-sm); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; max-width: 200px; }
    .bulk-lbl-svc-select:focus { border-color: var(--text); outline: none; }

    .bulk-lbl-generate-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--accent); background: rgba(232, 197, 71, 0.04); }
    .bulk-lbl-total { font-size: 14px; color: var(--text); }
    .bulk-lbl-total strong { color: var(--accent); }
    .bulk-lbl-go-btn { padding: 9px 22px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; border: none; background: var(--accent); color: var(--bg); transition: all 0.15s; }
    .bulk-lbl-go-btn:hover:not(:disabled) { filter: brightness(1.1); }
    .bulk-lbl-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    .bulk-lbl-loading { padding: 40px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .bulk-lbl-empty { padding: 30px 18px; text-align: center; color: var(--text-dim); font-size: 13px; }

    /* ─── Login Overlay ─── */
    .login-overlay {
      position: fixed; inset: 0; z-index: var(--z-toast);
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.3s;
    }
    .login-overlay.hidden { display: none; }

    .login-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 48px 40px;
      width: 360px;
      max-width: calc(100vw - 32px);
      text-align: center;
    }
    .login-logo {
      font-size: 18px; font-weight: 600; letter-spacing: 1px;
      color: var(--text); text-transform: uppercase;
      margin-bottom: 4px;
    }
    .login-subtitle {
      font-size: 12px; color: var(--text-muted); margin-bottom: 32px;
    }
    .login-card input[type="password"] {
      width: 100%; padding: 14px 16px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--radius); color: var(--text);
      font-size: 24px; text-align: center; letter-spacing: 12px;
      font-family: var(--font-mono);
      outline: none; transition: border 0.2s;
    }
    .login-card input[type="password"]:focus {
      border-color: var(--text);
    }
    .login-card input[type="password"]::placeholder {
      letter-spacing: 2px; font-size: 13px; color: var(--text-dim);
    }
    .login-error {
      height: 20px; line-height: 20px;
      font-size: 12px; color: var(--red); margin-top: 12px;
    }
    .login-card button {
      margin-top: 16px; width: 100%; padding: 12px;
      background: var(--accent); color: #000;
      border: none; border-radius: var(--radius);
      font-size: 13px; font-weight: 600; cursor: pointer;
      letter-spacing: 0.5px; text-transform: uppercase;
      transition: opacity 0.15s;
    }
    .login-card button:hover { opacity: 0.85; }
    .login-card button:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ─── User Info in Header ─── */
    .user-info {
      display: flex; align-items: center; gap: 10px;
      padding-left: 16px; border-left: 1px solid var(--border);
    }
    .user-name {
      font-size: 12px; color: var(--text); font-weight: 500;
    }
    .user-role-badge {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      padding: 2px 8px; border-radius: var(--radius); letter-spacing: 0.5px;
    }
    .user-role-badge.admin { background: var(--accent-dim); color: var(--text); }
    .user-role-badge.internal { background: var(--blue-dim); color: var(--blue); }
    .user-role-badge.warehouse { background: var(--green-dim); color: var(--green); }
    .sign-out-btn {
      background: none; border: 1px solid var(--border); color: var(--text-muted);
      padding: 4px 10px; border-radius: var(--radius-sm);
      font-size: 11px; cursor: pointer; transition: all 0.15s;
    }
    .sign-out-btn:hover, .sign-out-btn:focus-visible { border-color: var(--red); color: var(--red); }

    /* ─── View-As Switcher ─── */
    .view-as-switcher {
      display: flex; align-items: center; gap: 4px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 20px; padding: 2px 3px;
    }
    .view-as-btn {
      background: none; border: none; color: var(--text-muted);
      padding: 3px 10px; border-radius: 16px; font-size: 10px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .view-as-btn:hover, .view-as-btn:focus-visible { color: var(--text); }
    .view-as-btn.active-mode {
      color: var(--bg); font-weight: 700;
    }
    .view-as-btn.active-mode.mode-admin { background: var(--accent); }
    .view-as-btn.active-mode.mode-internal { background: var(--blue); }
    .view-as-btn.active-mode.mode-warehouse { background: var(--green); }
    .view-mode-indicator {
      display: none; align-items: center; gap: 6px;
      background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3);
      border-radius: var(--radius-sm); padding: 3px 10px; font-size: 10px; color: var(--red);
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .view-mode-indicator.active { display: flex; }

    /* ─── Form Inputs (Global) ─── */
    .form-input {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: var(--font);
      font-size: 13px;
      padding: 9px 12px;
      width: 100%;
      transition: border-color 0.15s, background 0.15s;
    }
    .form-input:focus {
      outline: none;
      border-color: var(--text);
      background: var(--surface-3);
    }
    .form-input::placeholder { color: var(--text-dim); }
    select.form-input {
      cursor: pointer;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      padding-right: 30px;
    }
    textarea.form-input {
      resize: vertical;
      min-height: 42px;
      line-height: 1.5;
    }

    /* ─── Label Generator ─── */
    .lbl-toolbar {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .lbl-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color 0.15s;
    }
    .lbl-section:hover { border-color: var(--border-hover); }
    .lbl-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      cursor: pointer;
      user-select: none;
      transition: background 0.1s;
    }
    .lbl-section-header:hover { background: var(--surface-2); }
    .lbl-section-title {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .lbl-section-title .icon { font-size: 14px; }
    .lbl-section-summary {
      font-size: 11px;
      color: var(--text-muted);
      margin-left: 12px;
      flex: 1;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 300px;
    }
    .lbl-section-chevron {
      color: var(--text-dim);
      font-size: 10px;
      transition: transform 0.2s;
      margin-left: 8px;
      flex-shrink: 0;
    }
    .lbl-section.collapsed .lbl-section-chevron { transform: rotate(-90deg); }
    .lbl-section-body {
      padding: 0 16px 16px 16px;
      transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
      max-height: 20000px;
      opacity: 1;
      overflow: visible;
    }
    .lbl-section.collapsed .lbl-section-body {
      max-height: 0;
      opacity: 0;
      padding-top: 0;
      padding-bottom: 0;
    }

    .lbl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .lbl-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .lbl-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .lbl-grid-addr { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; margin-bottom: 8px; }

    .lbl-form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .lbl-form-group label {
      font-size: 10px;
      font-weight: 500;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .lbl-form-group label .req { color: var(--text); }

    .lbl-search-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px;
    }
    .lbl-search-card-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .lbl-search-wrap {
      position: relative;
    }
    .lbl-search-wrap .lbl-search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-dim);
      font-size: 12px;
      pointer-events: none;
    }
    .lbl-search-wrap .form-input {
      padding-left: 30px;
    }
    .lbl-search-results {
      margin-top: 4px;
      max-height: 180px;
      overflow-y: auto;
      border-radius: var(--radius-sm);
    }
    .lbl-search-result-item {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      font-size: 12px;
      transition: background 0.1s;
    }
    .lbl-search-result-item:hover { background: var(--surface-2); }
    .lbl-search-result-item:last-child { border-bottom: none; }
    .lbl-search-result-name {
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .lbl-search-result-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .lbl-selected-card {
      margin-top: 8px;
      padding: 10px 12px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .lbl-selected-card .name { font-weight: 600; font-size: 12px; }
    .lbl-selected-card .detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .lbl-selected-card .clear-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 10px;
      padding: 3px 8px;
      cursor: pointer;
      transition: all 0.15s;
      font-family: var(--font);
    }
    .lbl-selected-card .clear-btn:hover { color: var(--red); border-color: var(--red); }

    .lbl-dims-hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .lbl-rate-table { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
    .lbl-rate-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--card-bg, var(--surface));
      transition: border-color 0.15s, background 0.15s;
    }
    .lbl-rate-row.lbl-rate-recommended { border-color: var(--green, #22c55e); }
    /* .lbl-rate-row.lbl-rate-selected — DEAD: lbl-rate-selected has zero JS/HTML references;
       rate selector UI was replaced by lbl-rate-calc-* (confirmed 2026-06-05) */
    .lbl-rate-provider { flex: 1; font-weight: 600; font-size: 13px; }
    .lbl-rate-price { font-size: 17px; font-weight: 700; color: var(--green, #22c55e); min-width: 80px; }
    .lbl-rate-transit { color: var(--text-muted); min-width: 40px; font-size: 12px; text-align: center; }
    .lbl-rate-badge { min-width: 44px; }
    .lbl-badge-rec {
      background: var(--green, #22c55e);
      color: #fff;
      padding: 2px 8px;
      border-radius: var(--radius-lg);
      font-size: 11px;
      font-weight: 600;
    }
    /* .lbl-rate-row.lbl-rate-selected .lbl-rate-select-btn — DEAD: same as above (confirmed 2026-06-05) */
    .lbl-rate-error {
      padding: 10px 14px;
      border-radius: var(--radius);
      font-size: 13px;
      margin: 8px 0;
    }
    .lbl-rate-error { color: var(--red, #ef4444); background: color-mix(in srgb, var(--red, #ef4444) 8%, transparent); }

    .lbl-result {
      margin-top: 16px;
      padding: 16px;
      border-radius: var(--radius);
      animation: fadeSlideIn 0.25s ease;
    }
    .lbl-result.success { background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.3); }
    .lbl-result.error { background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.3); }
    /* .lbl-result.fc-success — DEAD: fc-success class has zero references in JS/HTML (confirmed 2026-06-05) */
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Pick list item states */

    .lbl-provider-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--radius);
      font-size: 11px;
      font-weight: 500;
    }
    .lbl-provider-pill.wjs { background: var(--red-dim); color: var(--red); }
    .lbl-provider-pill.fc { background: var(--purple-dim); color: var(--purple); }
    .lbl-provider-pill.ws { background: var(--blue-dim); color: var(--blue); }

    /* ─── Label Queue Builder (Phase 1) ─── */
    .lbl-phase-nav { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 13px; }
    .lbl-phase-step { color: var(--text-muted); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); transition: all 0.15s; }
    .lbl-phase-step:hover { background: var(--surface-2); }
    .lbl-phase-step.active { color: var(--text); font-weight: 600; background: var(--surface); }
    .lbl-phase-arrow { color: var(--text-dim); font-size: 11px; }

    .lbl-queue-toolbar { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
    .lbl-queue-optA, .lbl-queue-optB { flex: 1; min-width: 280px; }
    .lbl-queue-opt-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
      transition: border-color 0.15s; height: 100%;
    }
    .lbl-queue-opt-card:hover { border-color: var(--border-hover); }
    .lbl-queue-opt-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

    .lbl-queue-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .lbl-queue-table th {
      text-align: left; padding: 8px 10px; font-size: 11px;
      text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border);
      letter-spacing: 0.3px; font-weight: 600;
    }
    .lbl-queue-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .lbl-queue-table tbody tr:hover { background: var(--surface-2); }
    .lbl-queue-remove { cursor: pointer; color: var(--text-muted); opacity: 0.5; font-size: 14px; transition: all 0.15s; }
    .lbl-queue-remove:hover, .lbl-queue-remove:focus-visible { opacity: 1; color: var(--red, #ef4444); }
    .lbl-queue-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .lbl-queue-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
    .lbl-queue-continue-btn {
      padding: 10px 24px; font-size: 13px; font-weight: 600; font-family: var(--font);
      background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius);
      cursor: pointer; transition: all 0.2s; white-space: nowrap;
    }
    .lbl-queue-continue-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .lbl-queue-continue-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
    .lbl-queue-clear-btn {
      padding: 8px 16px; font-size: 12px; font-weight: 500; font-family: var(--font);
      background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    }
    .lbl-queue-clear-btn:hover { border-color: var(--red, #ef4444); color: var(--red, #ef4444); }
    .lbl-queue-back-btn {
      padding: 8px 16px; font-size: 12px; font-weight: 500; font-family: var(--font);
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    }
    .lbl-queue-back-btn:hover { color: var(--text); border-color: var(--border-hover); }

    .lbl-added-pls { margin-top: 8px; font-size: 11px; color: var(--text-muted); }
    .lbl-added-pls span { display: inline-block; background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-sm); margin: 2px 4px 2px 0; font-size: 10px; }

    /* ─── Add Item Panel ─── */
    .lbl-add-panel {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 16px; margin-bottom: 16px; display: none;
    }
    .lbl-add-panel.open { display: block; }

    /* ─── Label Review Table (Phase 2) ─── */
    .lbl-review-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .lbl-review-table th {
      text-align: left; padding: 8px 10px; font-size: 11px;
      text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid var(--border);
      letter-spacing: 0.3px; font-weight: 600; white-space: nowrap;
    }
    .lbl-review-row { cursor: pointer; transition: background 0.1s; }
    .lbl-review-row:hover { background: rgba(255,255,255,0.03); }
    .lbl-review-row td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
    .lbl-review-row.row-done { opacity: 0.6; }
    .lbl-review-row.row-error td { background: rgba(239,68,68,0.08); }
    .lbl-review-row.row-generating td { background: rgba(59,130,246,0.06); }

    /* LTL accessorial panel (inside review expand) */
    .lbl-acc-flag {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; color: var(--text);
      padding: 3px 4px; border-radius: var(--radius-sm); cursor: pointer;
    }
    .lbl-acc-flag input[type="checkbox"] {
      width: 14px; height: 14px; accent-color: var(--accent, #d1a373); cursor: pointer;
    }
    .lbl-acc-flag:hover { background: rgba(255,255,255,0.03); }

    /* Inline expand detail panel */
    .lbl-review-expand { display: none; }
    .lbl-review-expand.open { display: table-row; }
    .lbl-review-expand td {
      padding: 16px 20px; background: var(--surface);
      border-bottom: 2px solid var(--border);
    }

    /* Dropdowns in review table */
    .lbl-review-select {
      font-size: 12px; padding: 3px 6px; border: 1px solid var(--border);
      border-radius: var(--radius-sm); background: var(--bg); color: var(--text); max-width: 220px;
      font-family: var(--font); cursor: pointer;
    }
    .lbl-review-select:focus { border-color: var(--accent); outline: none; }
    .lbl-review-select:disabled { opacity: 0.5; cursor: default; }

    /* Status badges */
    .lbl-q-status { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 600; }
    .lbl-q-status-queued { background: var(--surface-2); color: var(--text-muted); }
    .lbl-q-status-generating { background: rgba(59,130,246,0.2); color: #60a5fa; }
    .lbl-q-status-done { background: rgba(34,197,94,0.2); color: var(--green-bright); }
    .lbl-q-status-error { background: rgba(239,68,68,0.2); color: var(--red-bright); }
    .lbl-review-generate-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
    .lbl-review-generate-btn {
      padding: 12px 28px; font-size: 14px; font-weight: 600; font-family: var(--font);
      background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius);
      cursor: pointer; transition: all 0.2s;
    }
    .lbl-review-generate-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .lbl-review-generate-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
    .lbl-loading-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.6s linear infinite; }

    /* Toast notification */
    .lbl-toast {
      position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 12px 20px; font-size: 13px; color: var(--text); z-index: var(--z-toast);
      box-shadow: 0 4px 12px rgba(0,0,0,0.3); animation: lbl-toast-in 0.25s ease;
    }
    .lbl-toast.success { border-color: rgba(34,197,94,0.4); }
    .lbl-toast.error { border-color: rgba(239,68,68,0.4); }
    .lbl-toast.warn { border-color: rgba(245,158,11,0.4); }
    .lbl-toast.info { border-color: rgba(96,165,250,0.3); }
    .lbl-toast { transition: opacity 0.25s ease; }
    .lbl-toast-show { opacity: 1; }
    @keyframes lbl-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

    /* ─── Pill Color Variants (global) ─── */
    .pill.green { background: var(--green-dim); color: var(--green); }
    .pill.red { background: var(--red-dim); color: var(--red); }
    .pill.yellow { background: var(--yellow-dim); color: var(--yellow); }
    .pill.sm { font-size: 10px; }

    /* ─── User Management ─── */
    .um-create-form {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 20px;
    }
    .um-form-row {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      flex-wrap: wrap;
    }
    .um-form-group { display: flex; flex-direction: column; }
    .um-form-group label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .um-create-btn {
      padding: 8px 20px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.15s;
    }
    .um-create-btn:hover { opacity: 0.85; }
    .um-action-btn {
      padding: 4px 12px;
      font-size: 11px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .um-action-btn:hover { border-color: var(--border-hover); }
    .um-action-btn.warn { background: var(--red-dim); border-color: rgba(248,113,113,0.3); color: var(--red); }
    .um-action-btn.safe { background: var(--green-dim); border-color: rgba(52,211,153,0.3); color: var(--green); }
    .um-action-btn.reset { color: var(--yellow); }
    .um-actions { display: flex; gap: 6px; }
    .um-row-disabled { opacity: 0.5; }
    .um-pin-cell { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; }
    .um-modal-field { margin-bottom: 14px; }
    .um-modal-field label {
      font-size: 11px;
      color: var(--text-muted);
      display: block;
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .um-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 16px;
    }
    .um-modal-cancel {
      padding: 8px 16px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 13px;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .um-modal-cancel:hover { border-color: var(--border-hover); }
    .um-modal-save {
      padding: 8px 20px;
      background: var(--accent);
      color: var(--bg);
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .um-modal-save:hover { opacity: 0.85; }
    .um-modal-save.yellow { background: var(--yellow); color: #000; }
    .um-msg { margin-top: 8px; font-size: 12px; }

    /* ─── SEO & AI Search ─── */
    .seo-section-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .seo-section-header-flex {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .seo-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .seo-section-badge { font-size: 10px; font-weight: 400; color: var(--text-dim); margin-left: 6px; }
    .seo-section-meta { font-size: 11px; color: var(--text-dim); }
    .seo-gsc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
    }
    .seo-text-ellipsis {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .seo-text-ellipsis-wide {
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .seo-ai-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      background: var(--surface-2);
      border-radius: var(--radius);
      transition: background 0.15s;
    }
    .seo-ai-card:hover { background: var(--surface-3); }
    .seo-ai-card-left { display: flex; align-items: center; gap: 8px; }
    .seo-ai-card-right { display: flex; align-items: center; gap: 8px; }
    .seo-ai-engine-name { font-size: 13px; font-weight: 500; }
    .seo-ai-cards-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .seo-ai-setup { margin-top: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
    .seo-ai-setup code {
      background: var(--surface-2);
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 11px;
      color: var(--text-dim);
    }
    .seo-detail-wrapper { border-top: 1px solid var(--border); padding-top: 12px; }
    .seo-detail-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
    .seo-toolbar-note { font-size: 11px; color: var(--text-dim); margin-top: 4px; padding-left: 2px; }
    .seo-content-pad { padding: 16px; }

    /* ── Global utilities ─────────────────────── */
    .d-none { display: none; }
    .td-nowrap { white-space: nowrap; }
    .mb-16 { margin-bottom: 16px; }
    .mt-12 { margin-top: 12px; }

    /* ── Return label modal (.rl-*) ───────────── */
    .rl-section-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
    .rl-section-label-gap { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
    .rl-auto-hint { font-style: italic; }
    .rl-dest-wrapper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 16px; }
    .rl-dest-wrapper .form-input { margin-bottom: 6px; }
    .rl-dest-addr { min-height: 16px; }
    .rl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .rl-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 4px; }
    .rl-dim-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 16px; min-height: 22px; padding: 5px 8px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); }
    .rl-addr-block { margin-bottom: 16px; }
    .rl-success { text-align: center; padding: 16px; }
    .rl-success-icon { font-size: 24px; margin-bottom: 8px; }
    .rl-success-title { font-weight: 600; margin-bottom: 6px; }
    .rl-success-detail { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
    .rl-success-spacer { margin-bottom: 12px; }
    .rl-download-btn { display: inline-block; text-decoration: none; padding: 8px 20px; }
    .rl-processing-msg { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
    .rl-refresh-btn { padding: 8px 20px; }
    .rl-cost-line { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
    .rl-svc-line { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
    .rl-svc-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius); background: #dcfce7; color: var(--green); border: 1px solid #bbf7d0; white-space: nowrap; }
    .rl-svc-badge.rl-svc-warn { background: #fef3c7; color: #b45309; border-color: #fde68a; }
    .rl-girth { font-size: 11px; color: var(--text-muted); }
    .rl-girth-warn { color: #b45309; font-weight: 600; }
    /* ── Return label rate comparison ── */
    .rl-rates-container { margin-bottom: 12px; }
    .rl-rates-loading { font-size: 12px; color: var(--text-muted); padding: 8px 0; }
    .rl-rates-empty { font-size: 11px; color: var(--text-muted); padding: 4px 0; }
    .rl-rates-header { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
    .rl-rates-list { display: flex; flex-direction: column; gap: 4px; }
    .rl-rate-row { display: grid; grid-template-columns: 20px minmax(80px, max-content) 1fr auto auto auto; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; background: var(--surface); transition: border-color 0.15s; }
    .rl-rate-row:hover { border-color: var(--accent, #6366f1); }
    .rl-rate-row:has(input:checked) { border-color: var(--accent, #6366f1); background: color-mix(in srgb, var(--accent, #6366f1) 6%, var(--surface)); }
    .rl-rate-row input[type="radio"] { margin: 0; accent-color: var(--accent, #6366f1); }
    .rl-rate-provider { font-weight: 600; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rl-rate-service { color: var(--text-secondary); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rl-rate-transit { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
    .rl-rate-price { font-weight: 700; font-size: 13px; color: var(--text-primary); white-space: nowrap; }
    .rl-rate-rec { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 6px; border-radius: var(--radius); background: #dcfce7; color: var(--green); border: 1px solid #bbf7d0; white-space: nowrap; }
    .rl-rate-ref { font-size: 9px; color: var(--text-muted); font-style: italic; white-space: nowrap; }
    .rl-rate-ref-only { opacity: 0.65; cursor: default; }
    .rl-rate-ref-only:hover { border-color: var(--border); }
    .rl-rate-conf { font-size: 9px; padding: 0 4px; border-radius: var(--radius-sm); }
    .rl-conf-high { background: #dcfce7; color: var(--green); }
    .rl-conf-med { background: #fef3c7; color: #b45309; }
    .rl-conf-low { background: #fee2e2; color: var(--red); }
    .rl-rates-freight-warn { font-size: 11px; color: #b45309; margin-top: 6px; padding: 4px 8px; background: #fef3c7; border-radius: var(--radius-sm); }
    .rl-rates-note { font-size: 10px; color: var(--text-muted); margin-top: 6px; font-style: italic; }

    /* ── Tools row: Rate Calc + WJS Import side by side ── */
    .lbl-tools-row { display: flex; gap: 16px; margin-bottom: 16px; }
    .lbl-tools-row > * { flex: 1; min-width: 0; margin-bottom: 0 !important; }
    @media (max-width: 900px) { .lbl-tools-row { flex-direction: column; } }

    /* ── Rate Calculator panel (.lbl-rate-calc-*) ── */
    .lbl-rate-calc-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius); margin-bottom: 0; overflow: hidden; }
    .lbl-rate-calc-header { padding: 12px 16px; font-weight: 600; font-size: 14px; cursor: pointer; display: flex; justify-content: space-between; background: var(--card-header-bg, #f9fafb); user-select: none; }
    .lbl-rate-calc-header:hover { background: var(--hover-bg, #f3f4f6); }
    .lbl-rate-calc-body { padding: 12px 16px 16px; }
    .lbl-rate-calc-inputs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
    .lbl-rate-calc-inputs label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-muted); gap: 3px; }
    .lbl-rate-calc-inputs input { padding: 4px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-sm); font-size: 13px; width: 65px; }
    .lbl-panel-inner { background: var(--card-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
    /* @media (max-width: 600px) .lbl-mode-cards — DEAD: lbl-mode-cards has zero references in JS/HTML (confirmed 2026-06-05) */

    /* ── Returns misc (.ret-*) ────────────────── */
    .ret-sc-section { margin-top: 32px; }
    .ret-sc-header { display: flex; justify-content: space-between; align-items: center; }
    .ret-sc-hint { font-size: 11px; color: var(--text-muted); font-weight: 400; }
    .ret-loading { padding: 16px; color: var(--text-muted); font-size: 13px; }
    .ret-error { color: var(--text-muted); font-size: 13px; padding: 12px; }
    .btn-sm-dim { opacity: 0.7; }
    .ret-notes-textarea { resize: vertical; font-family: var(--font-mono); font-size: 13px; }
    .ret-addr-preview { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .ret-addr-label { color: var(--text); }

    /* ── Customer repeat (.cust-*) ────────────── */
    .cust-repeat-grid { display: grid; gap: 16px; margin-bottom: 20px; }
    .cust-repeat-grid-2 { grid-template-columns: 1fr 1fr; }
    .cust-chart-bar { width: 100%; border-radius: var(--radius-sm); min-height: 4px; }

    /* ── Order map (.omap-*) ──────────────────── */
    .omap-range-btn { padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 12px; cursor: pointer; font-weight: 400; }
    .omap-range-btn.active { border-color: var(--text); background: var(--accent-dim); color: var(--text); font-weight: 600; }
    .omap-region-row { display: flex; justify-content: space-between; padding: 2px 0; }
    .omap-region-row.no-wh { color: var(--yellow); }

    /* ── Fleet (.fl-*) ────────────────────────── */
    .fl-tier:not(:last-child) { margin-bottom: 8px; }
    .fl-tier-indent { padding-left: 28px; }

    /* ─── Returns ─── */
    .ret-panel-body,
    .ret-order-summary,
    .ret-order-card,
    .ret-line-item,
    .ret-table,
    .ret-table td,
    .ret-table th,
    .ret-card-title,
    .ret-card-order-name,
    .ret-li-title,
    .ret-li-price-val,
    .ret-sum-title,
    .ret-sum-price,
    .ret-order-name,
    .ret-link,
    .ret-form-label,
    .ret-search-input,
    .ret-condition-select,
    .ret-status-select,
    .ret-type-select {
      color: var(--text);
    }
    .ret-panel-body,
    .ret-order-card,
    .ret-line-item,
    .ret-table td,
    .ret-table th {
      background-clip: padding-box;
    }
    .ret-table th,
    .ret-card-date,
    .ret-card-customer,
    .ret-card-count,
    .ret-card-skus,
    .ret-card-location,
    .ret-li-sku,
    .ret-li-qty,
    .ret-track-sm,
    .ret-track-sm a,
    .ret-cost-est-inline,
    .ret-form-label,
    .ret-section-label,
    .ret-notes-cell.empty {
      color: var(--text-muted);
    }
    .ret-status-select,
    .ret-type-select {
      background-color: var(--surface);
      border: 1px solid var(--border);
    }
    .ret-search-input::placeholder,
    .ret-notes-textarea::placeholder {
      color: var(--text-dim);
    }
    .ret-order-card:hover,
    .ret-line-item:hover:not(.selected),
    .ret-line-item.selected {
      color: var(--text);
    }
    .ret-filter-btn { padding: 5px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-right: 4px; transition: all 0.15s; }
    .ret-filter-btn.active { background: var(--accent); color: #000; border-color: var(--text); }
    .ret-filter-btn:hover:not(.active) { color: var(--text); border-color: var(--text-dim); }
    .ret-link { color: var(--text); }
    .ret-order-num { font-weight: 600; }
    /* Sticky Order# column on mobile — Returns tab tables scroll horizontally,
       pin Order# so the operator always knows which row they're looking at. */
    @media (max-width: 768px) {
      .ret-table th:first-child,
      .ret-table td.ful-td-cb,
      .ret-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface); }
      .ret-table td.ret-order-num,
      .ret-table th:nth-child(2) {
        position: sticky; left: 36px; z-index: 2; background: var(--surface);
        box-shadow: 2px 0 4px -2px rgba(15,23,42,0.12);
      }
      .ret-table tr:hover td.ret-order-num { background: var(--surface-2); }
    }
    /* Returns Stock — sticky SKU column on mobile. Applies to the inline
       Returns Stock sub-tables (wh-returns-table-lg / -sm). */
    @media (max-width: 768px) {
      .wh-returns-table-lg th:first-child,
      .wh-returns-table-lg td:first-child,
      .wh-returns-table-sm th:first-child,
      .wh-returns-table-sm td:first-child {
        position: sticky; left: 0; z-index: 2; background: var(--surface, #fff);
        box-shadow: 2px 0 4px -2px rgba(15,23,42,0.12);
      }
    }
    /* 44px minimum touch target for Returns Stock inline controls on mobile. */
    @media (max-width: 768px) {
      .wh-returns-table-lg select, .wh-returns-table-sm select,
      .wh-returns-table-lg button, .wh-returns-table-sm button,
      .wh-returns-table-lg input[type="number"], .wh-returns-table-lg input[type="text"],
      .wh-returns-table-sm input[type="number"], .wh-returns-table-sm input[type="text"] {
        min-height: 44px;
      }
      /* iOS Safari auto-zooms on inputs with font-size < 16px. Bump the
         two Returns Stock modal textareas + filter pills so the viewport
         doesn't jump on focus. */
      #rs-confirm-note, #rs-move-reason {
        font-size: 16px !important;
      }
      /* Filter pills: WCAG 44px tap target on mobile. */
      .filter-btn, .ret-filter-btn {
        min-height: 44px;
        padding: 10px 14px;
      }
    }

    /* Stuck > 48h tile pulse — a red bordered stat card should ATTRACT
       attention, not blend in. Respects prefers-reduced-motion. */
    @media (prefers-reduced-motion: no-preference) {
      .sup-stat-card.sup-red.sup-pulse {
        animation: sup-stuck-pulse 2.4s ease-in-out infinite;
      }
    }
    @keyframes sup-stuck-pulse {
      0%, 100% { box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04)), 0 0 0 0 rgba(239,68,68,0); }
      50%      { box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,.04)), 0 0 0 6px rgba(239,68,68,0.12); }
    }

    /* Keyboard-shortcut hint inside Confirm modal: useless on touch-only
       devices, takes 14px of vertical budget. Hide when no fine pointer. */
    @media (pointer: coarse) {
      .rs-kbd-hint { display: none; }
    }

    /* Safe-area padding for the bulk action bar so it doesn't hide
       behind the iPhone home indicator. */
    .bulk-action-bar {
      bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    }

    /* Mobile: replace the 6-row stat tile wall with a swipeable
       horizontal tray. Worker sees the table on first paint without
       scrolling past 12 tiles. Scroll snap keeps tiles center-aligned. */
    @media (max-width: 768px) {
      .sup-stats-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: thin;
      }
      .sup-stats-row .sup-stat-card {
        flex: 0 0 auto;
        min-width: 140px;
        scroll-snap-align: start;
      }
    }
    .ret-status-select { font-size: 11px; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font-weight: 600; border: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; padding-right: 18px; }
    .ret-ss-requested { background: rgba(156,163,175,0.15); color: var(--text-muted); }
    .ret-ss-made { background: rgba(194,65,12,0.1); color: #c2410c; }
    .ret-ss-sent { background: rgba(59,130,246,0.1); color: var(--blue); }
    .ret-ss-transit { background: rgba(14,165,233,0.1); color: #0284c7; }
    .ret-ss-delivered { background: rgba(22,163,74,0.1); color: var(--green); }
    .ret-ss-received { background: rgba(124,58,237,0.1); color: var(--purple); }
    .ret-ss-issue { background: rgba(239,68,68,0.1); color: var(--red); }
    .ret-ss-closed { background: rgba(34,197,94,0.15); color: #15803d; }
    .ret-type-select { font-size: 11px; border-radius: var(--radius); padding: 3px 8px; cursor: pointer; font-weight: 600; border: none; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; padding-right: 18px; }
    .ret-condition-select { font-size: 11px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 4px; max-width: 90px; }
    .ret-notes-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; cursor: pointer; color: var(--text-dim); }
    .ret-notes-cell:hover { color: var(--text); text-decoration: underline dotted; }
    .ret-notes-cell.empty { color: var(--text-muted); font-style: italic; }
    /* Returns table — constrain SKU column width */
    .ret-table td.mono, .ret-table th:nth-child(2) { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .ret-delete-btn { margin-left: 4px; color: var(--red); }
    .ret-empty-cell { text-align: center; padding: 32px; color: var(--text-muted); }
    /* Return status pills */
    .pill.ret-trk-sent     { background: rgba(8,145,178,0.1); color: #0891b2; }
    .pill.ret-trk-received { background: rgba(124,58,237,0.1); color: var(--purple); font-weight: 600; }
    .pill.ret-trk-closed   { background: rgba(255,255,255,0.06); color: var(--text-dim); }
    /* .pill.ret-status-final — DEAD: ret-status-final has zero references in JS/HTML (confirmed 2026-06-05) */
    .ret-status-pill-cell { white-space: nowrap; }
    .ret-track-sm { font-size: 11px; margin-top: 3px; color: var(--text-dim); }
    .ret-track-sm a { color: var(--text-dim); text-decoration: none; }
    .ret-track-sm a:hover { color: var(--text); text-decoration: underline; }
    .ret-cost-est-inline { color: var(--text-dim); }
    .ret-cost-est-inline small { font-size: 10px; opacity: 0.7; }
    /* .btn-sm.ret-btn-sent — DEAD: ret-btn-sent has zero references in JS/HTML (confirmed 2026-06-05) */
    .ret-creation-panel { margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .ret-step-indicator { display: flex; background: var(--surface-alt, var(--surface)); border-bottom: 1px solid var(--border); padding: 0; }
    .ret-step { flex: 1; padding: 12px 16px; text-align: center; font-size: 12px; font-weight: 600; border-bottom: 2px solid transparent; color: var(--text-muted); }
    .ret-panel-body { padding: 16px; background: var(--surface); }
    .ret-search-wrapper { position: relative; }
    /* Higher-specificity selector so .form-input's padding (9px 12px) can't
       win the cascade and push input text behind the icon. */
    .ret-search-wrapper .ret-search-input { width: 100%; padding: 10px 14px 10px 40px; font-size: 14px; box-sizing: border-box; }
    .ret-search-wrapper .ret-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center; width:16px; height:16px; color: var(--text-muted); font-size: 14px; line-height: 1; pointer-events: none; }
    .ret-search-wrapper .ret-search-spinner { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
    .ret-search-results { margin-top: 8px; }
    .ret-order-summary { margin-bottom: 12px; padding: 12px; background: var(--bg); border-radius: var(--radius); font-size: 13px; }
    .ret-section-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .ret-btn-row { display: flex; gap: 8px; margin-top: 12px; }
    .ret-form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
    .ret-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
    .ret-form-label { font-size: 11px; font-weight: 600; color: var(--text-muted); display: block; margin-bottom: 4px; }
    .ret-notes-wrap { margin-bottom: 12px; }
    .ret-submit-row { display: flex; gap: 8px; }
    .ret-order-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: all 0.15s; background: var(--bg); }
    .ret-order-card:hover { border-color: var(--primary, var(--accent)); background: var(--surface); }
    .ret-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
    .ret-card-title { font-weight: 600; font-size: 14px; }
    .ret-card-date { font-size: 12px; color: var(--text-muted); }
    .ret-card-sub { display: flex; justify-content: space-between; align-items: center; }
    .ret-card-customer { font-size: 13px; color: var(--text-muted); }
    .ret-card-count { font-size: 11px; color: var(--text-muted); }
    .ret-card-skus { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono, monospace); }
    .ret-card-location { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .ret-line-item { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: all 0.15s; background: var(--bg); display: flex; align-items: center; gap: 12px; }
    .ret-line-item:hover:not(.selected) { border-color: var(--primary, var(--accent)); }
    .ret-line-item.selected { border-color: var(--primary, var(--accent)); background: var(--surface); }
    .ret-li-check { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
    .ret-li-body { flex: 1; min-width: 0; }
    .ret-li-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ret-li-sku { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
    .ret-li-price { text-align: right; flex-shrink: 0; }
    .ret-li-price-val { font-weight: 600; font-size: 13px; }
    .ret-li-qty { font-size: 11px; color: var(--text-muted); }
    .ret-sum-row { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--border); }
    .ret-sum-sku { font-family: var(--font-mono, monospace); font-size: 12px; background: var(--surface-alt, var(--border)); padding: 2px 6px; border-radius: var(--radius-sm); }
    .ret-sum-title { margin-left: 6px; font-size: 13px; }
    .ret-sum-price { font-size: 13px; font-weight: 600; }
    .ret-sum-order { margin-bottom: 4px; }
    .ret-order-name { font-weight: 700; }
    .ret-card-order-header { display: flex; justify-content: space-between; align-items: center; }
    .ret-card-order-name { font-weight: 700; font-size: 15px; }
    .ret-card-order-cust { color: var(--text-muted); margin-left: 6px; }
    .ret-search-error { padding: 12px; color: var(--red); font-size: 13px; }
    .ret-no-results { padding: 16px; font-size: 13px; text-align: center; color: var(--text-muted); }
    .ret-check-mark { color: #fff; font-size: 13px; font-weight: 700; }
    .ret-addr-notice { font-size: 12px; padding: 5px 8px; border-radius: var(--radius-sm); margin-bottom: 8px; }
    .ret-addr-notice.error { background: var(--red-dim); color: var(--red); }
    .ret-addr-notice.ok { background: var(--green-dim); color: var(--green); }
    .ret-addr-notice.cached { color: var(--text-muted); }

    /* ─── Accounting ─── */
    .acc-stats-row-mt { margin-top: 16px; }
    .acc-scroll-full { max-height: calc(100vh - 400px); }
    .acc-low-margin { background: var(--red-dim); }
    .acc-chart-container { margin-bottom: 16px; }
    .acc-section-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
    .acc-chart-body { padding: 16px 16px 12px; display: flex; align-items: flex-end; gap: 6px; height: 200px; }
    .acc-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
    .acc-bar-label { font-size: 10px; color: var(--text-muted); }
    .acc-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; opacity: 0.85; }
    .acc-bar-date { font-size: 10px; color: var(--text-dim); }
    .acc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .acc-scroll { max-height: 400px; }
    .acc-variant-label { color: var(--text); font-size: 11px; }

    /* ─── Marketing Overview ─── */
    .mo-header-right { display: flex; gap: 8px; align-items: center; }
    .mo-sparkline { display: flex; align-items: flex-end; gap: 2px; margin-top: 8px; height: 40px; }
    .mo-spark-bar { background: var(--accent); border-radius: 2px; }
    .mo-section-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .mo-empty-cell { text-align: center; }

    /* ─── Marketing Initiatives ─── */
    .mi-new-btn { background: var(--accent); color: var(--bg); }
    .mi-type-pill { padding: 2px 8px; border-radius: var(--radius); font-size: 11px; color: #fff; }
    .mi-type-sale { background: #27ae60; }
    .mi-type-campaign { background: #3498db; }
    .mi-type-promo { background: #f39c12; }
    .mi-type-launch { background: var(--accent); }
    .mi-type-default { background: var(--surface-hover, var(--surface-2)); color: var(--text-muted); }
    .mi-channel-pill { padding: 1px 6px; border-radius: var(--radius); font-size: 10px; background: var(--surface-hover, var(--surface-2)); color: var(--text-muted); margin: 1px; display: inline-block; }
    .mi-name-cell { font-weight: 500; }
    .mi-row-notes { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    .mi-status-select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 11px; }
    .mi-date-cell { font-family: var(--font-mono, monospace); font-size: 11px; }
    .mi-edit-btn { background: none; border: none; color: var(--text); cursor: pointer; font-size: 11px; }
    .mi-empty-cell { text-align: center; padding: 40px; }
    .mi-add-container { margin-bottom: 16px; padding: 16px; }
    .mi-add-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
    .mi-add-label { font-size: 11px; color: var(--text-dim); display: block; margin-bottom: 2px; }
    .mi-add-input { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; }
    .mi-add-btn-row { display: flex; gap: 4px; align-items: end; }
    .mi-add-submit { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; cursor: pointer; }
    .mi-add-cancel { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; cursor: pointer; }

    /* ─── ShareASale ─── */
    .sa-tab-row { display: flex; gap: 8px; align-items: center; }
    .sa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .sa-section-header { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .sa-section-header-warn { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--red-dim); display: flex; justify-content: space-between; align-items: center; }
    .sa-warn-label { font-size: 12px; font-weight: 600; color: var(--red); }
    .sa-voided-container { margin-bottom: 16px; border-color: var(--red); }
    .sa-mb { margin-bottom: 16px; }
    .sa-scroll-md { max-height: 400px; }
    .sa-scroll-lg { max-height: 500px; }
    .sa-status-body { padding: 16px; }
    .sa-status-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .sa-status-left { display: flex; align-items: center; gap: 8px; }
    .sa-status-right { text-align: right; }
    .sa-commission-sm { font-size: 11px; }
    .sa-top-row { background: var(--surface-2); }
    .sa-rank-cell { font-weight: 600; }
    .sa-partner-name { font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .sa-sales-cell { font-weight: 600; }
    .sa-publisher-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
    .sa-click-ref { font-size: 10px; }
    .sa-empty-cell { text-align: center; padding: 32px; }
    .sa-retry-btn { margin-top: 12px; }

    /* ─── Inventory Matrix ─── */
    .inv-scroll { max-height: calc(100vh - 300px); }
    .inv-th-sku { text-align: left; min-width: 80px; max-width: 130px; cursor: pointer; }
    .inv-th-shelves { text-align: left; min-width: 90px; max-width: 200px; }
    /* Container Tracker — full-width responsive table with inline-edit inputs */
    .ct-fullwidth { width: 100%; max-width: none; }
    .ct-fullwidth .table-scroll { overflow-x: auto; }
    .ct-table { width: 100%; min-width: 980px; border-collapse: collapse; }
    .ct-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
    .ct-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
    .ct-table td.text-right, .ct-table th.text-right { text-align: right; }
    .ct-edit {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
      padding: 4px 8px; font-size: 12px; color: var(--text); transition: border-color 0.15s, background 0.15s;
      font-family: inherit;
    }
    .ct-edit:hover { border-color: var(--accent); }
    .ct-edit:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
    .ct-edit-text { width: 130px; font-family: var(--font-mono); }
    .ct-edit-date { width: 134px; font-family: var(--font-mono); }
    .ct-edit-status { width: 110px; padding-right: 22px; }
    .matrix-table tbody td.inv-shelves-cell {
      text-align: left; font-family: var(--font-mono); font-size: 11px;
      color: var(--accent); max-width: 200px; overflow: hidden;
      text-overflow: ellipsis; white-space: normal; line-height: 1.3;
    }
    .inv-th-dims { text-align: left; min-width: 108px; white-space: nowrap; }
    .inv-th-barcode { text-align: left; min-width: 100px; white-space: nowrap; }
    .inv-th-total { background: var(--surface-3); cursor: pointer; }
    .inv-sort-active { color: var(--text); font-size: 10px; }
    .inv-sort-inactive { color: var(--text-muted); font-size: 9px; }
    .inv-totals-row-top { border-bottom: 2px solid var(--border); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; z-index: var(--z-base); }
    .inv-totals-row-bottom { border-top: 2px solid var(--border); font-weight: 600; background: var(--surface-2); }
    .inv-totals-label { text-align: right; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
    .inv-totals-label-sm { text-align: right; color: var(--text-muted); }
    .inv-grand-total { color: var(--text); }

    /* ─── Product Detail ─── */
    .pd-wrapper { max-width: 1200px; }
    .pd-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; color: var(--text-muted); }
    .pd-back-link { cursor: pointer; color: var(--text); }
    .pd-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
    .pd-hero-img-wrap { flex-shrink: 0; width: 150px; height: 150px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; justify-content: center; text-decoration: none; }
    .pd-hero-img { width: 150px; height: 150px; object-fit: contain; display: block; }
    .pd-hero-img-placeholder { color: var(--text-dim); }
    .pd-notes-card { margin-bottom: 20px; }
    .pd-note-textarea { width: 100%; min-height: 96px; resize: vertical; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: 13px; font-family: inherit; box-sizing: border-box; line-height: 1.5; }
    .pd-note-textarea:focus { outline: none; border-color: var(--accent); }
    .pd-notes-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
    .pd-note-status { font-size: 12px; color: var(--text-muted); }
    .pd-title { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
    .pd-variant { font-size: 15px; color: var(--text-dim); margin-bottom: 4px; }
    .pd-meta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
    .pd-sku-badge { font-family: var(--font-mono, monospace); font-size: 13px; background: var(--surface-2); padding: 2px 8px; border-radius: var(--radius-sm); }
    .pd-meta-label { font-size: 12px; color: var(--text-muted); }
    .pd-type-badge { font-size: 12px; background: var(--surface-3); padding: 2px 8px; border-radius: var(--radius-sm); }
    .pd-comp-group-label { font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 8px; }
    .pd-comp-sku { color: var(--purple); font-weight: 600; }
    .pd-sibling-shelf { font-size: 12px; color: var(--text-muted); }
    .pd-stats-row { margin-bottom: 20px; }
    .pd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
    .pd-card { padding: 16px; }
    .pd-card-mb { margin-bottom: 16px; }
    .pd-card-mb20 { margin-bottom: 20px; }
    .pd-card-title { font-weight: 600; font-size: 14px; margin-bottom: 12px; }
    .pd-table-flush { margin: 0; }
    .pd-th-right { text-align: right; }
    .pd-loc-row { cursor: pointer; }
    .pd-loc-name { font-weight: 600; }
    .pd-qty-cell { text-align: right; font-weight: 600; font-family: var(--font-mono, monospace); }
    .pd-eta-cell { font-size: 12px; color: var(--text-muted); }
    .pd-inv-empty { text-align: center; color: var(--text-muted); padding: 16px; }
    .pd-totals-row { font-weight: 600; border-top: 1px solid var(--border); }
    .pd-totals-qty { text-align: right; font-family: var(--font-mono, monospace); }
    .pd-breakdown-row { font-size: 12px; color: var(--text-muted); }
    .pd-shelf-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
    .pd-shelf-heading { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
    .pd-shelf-code-badge { background: var(--surface-3); padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600; font-size: 12px; }
    .pd-shelf-desc { font-size: 11px; color: var(--text-dim); }
    .pd-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .pd-price-val-green { font-size: 18px; font-weight: 700; color: var(--green); }
    .pd-price-val { font-size: 18px; font-weight: 700; }
    .pd-specs-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
    .pd-spec-label { color: var(--text-muted); }
    .pd-days-val { font-weight: 600; }
    .pd-inner-stats-row { margin-bottom: 16px; }
    .pd-inner-card { border: 1px solid var(--border); }
    .pd-section-label { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
    .pd-date-cell { font-size: 12px; }
    .pd-order-num { font-weight: 600; }
    .pd-cust-cell { font-size: 12px; }
    .pd-mono-right { text-align: right; font-family: var(--font-mono, monospace); }
    .pd-empty-orders { text-align: center; color: var(--text-muted); padding: 20px; }

    /* ─── Product Detail: Cross-Sell Panel ─── */
    #pd-cross-sell-panel { margin-bottom: 20px; }
    .pd-cs-loading-row { padding: 4px 0; }
    .pd-cs-empty {
      color: var(--text-muted);
      font-size: 13px;
      padding: 12px 0;
      text-align: center;
    }
    .pd-cs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 10px;
    }
    .pd-cs-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .pd-cs-card:hover {
      border-color: var(--accent, #6366f1);
      background: var(--surface-3, var(--surface-2));
    }
    .pd-cs-sku {
      font-size: 11px;
      font-family: var(--font-mono, monospace);
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }
    .pd-cs-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
    }
    .pd-cs-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
      flex-wrap: wrap;
    }
    .pd-cs-price {
      font-size: 12px;
      font-weight: 600;
      color: var(--green);
      font-family: var(--font-mono, monospace);
    }
    .pd-cs-count {
      font-size: 11px;
      color: var(--text-muted);
    }
    .pd-cs-footer {
      font-size: 11px;
      color: var(--text-dim, var(--text-muted));
      margin-top: 10px;
      text-align: right;
    }

    /* ─── SLA Tracking ─── */
    .sla-header-right { display: flex; gap: 8px; align-items: center; }
    .sla-compliance-card { margin-bottom: 16px; }
    .sla-compliance-row { display: flex; gap: 24px; flex-wrap: wrap; padding: 8px 0; }
    .sla-compliance-item { flex: 1; min-width: 120px; text-align: center; }
    .sla-compliance-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .sla-progress-track { position: relative; height: 8px; background: var(--surface-3); border-radius: var(--radius-sm); overflow: hidden; }
    .sla-compliance-pct { font-size: 16px; font-weight: 700; margin-top: 4px; }
    .sla-title-note { color: var(--text-dim); font-weight: 400; }
    .sla-aging-footer { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }
    .sla-volume-chart { display: flex; align-items: flex-end; gap: 2px; height: 100px; padding: 8px 0; }
    .sla-vol-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
    .sla-vol-bar { width: 100%; background: var(--accent); border-radius: 2px 2px 0 0; min-width: 4px; opacity: 0.8; }
    .sla-date-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); padding-top: 4px; }
    .sla-legend-right { display: flex; align-items: center; gap: 12px; }
    .sla-legend-dot { display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 2px; }
    .sla-tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .sla-tag-name { width: 130px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sla-tag-track { flex: 1; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
    .sla-tag-count { font-size: 11px; color: var(--text-muted); min-width: 32px; text-align: right; }
    .sla-empty-note { color: var(--text-dim); font-size: 12px; padding: 8px 0; }
    .sla-agent-name { font-weight: 500; }
    .sla-center-cell { text-align: center; }
    .sla-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
    .sla-perf-item { text-align: center; }
    .sla-perf-label { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
    .sla-sentiment-bar { display: flex; height: 12px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
    .sla-sentiment-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; }
    .sla-vol-compare { display: flex; gap: 16px; justify-content: center; }
    .sla-vol-num { font-size: 18px; font-weight: 700; }
    .sla-vol-period { font-size: 10px; color: var(--text-dim); }
    .sla-big-num { font-size: 24px; font-weight: 700; }
    .sla-sub-detail { font-size: 11px; color: var(--text-dim); }

    /* ─── Location Browse ─── */
    .loc-search-results { margin-bottom: 16px; }
    .loc-special-cell { min-height: 52px; }
    .loc-special-code { font-size: 12px; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
    .loc-special-units { font-size: 11px; }
    .loc-shelf-hd-inner { display: flex; align-items: center; gap: 10px; }
    .loc-shelf-hd-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    .loc-shelf-code-lg { font-weight: 600; font-size: 14px; }
    .loc-shelf-desc-sm { font-size: 12px; color: var(--text-muted); }
    .loc-close-btn { cursor: pointer; color: var(--text-muted); font-size: 16px; }
    .loc-transfer-items-btn { font-size: 12px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; }
    .loc-transfer-items-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Inline barcode scanner (Scan In/Out subtab) — embeds the camera between
       the scan input and the scan history so the recent scans stay visible. */
    .loc-inline-scanner-slot { margin-top: 8px; }
    .loc-inline-scanner { display: flex; gap: 12px; align-items: stretch; padding: 10px; background: var(--surface-alt, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); flex-wrap: wrap; }
    .loc-inline-scanner-video-wrap { position: relative; width: 280px; height: 180px; background: #000; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
    .loc-inline-scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
    .loc-inline-scanner-video-wrap .wh-scanner-reticle { position: absolute; left: 50%; top: 50%; width: 70%; height: 30%; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,0.8); border-radius: var(--radius-sm); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,0.15); }
    .loc-inline-scanner-controls { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 1; min-width: 160px; }
    .loc-inline-scanner-status { font-size: 12px; color: var(--text-muted); }
    .loc-inline-scanner-status.wh-scanner-status-err { color: var(--red); }
    /* Inline scanner inside the Add/Remove + Transfer modals — landscape, full-width */
    .loc-modal-scanner-slot { margin-top: 10px; padding: 10px; background: var(--surface-alt, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); }
    .loc-modal-scanner-inner { display: flex; flex-direction: column; gap: 8px; }
    .loc-modal-scanner-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 260px; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
    .loc-modal-scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
    .loc-modal-scanner-video-wrap .wh-scanner-reticle { position: absolute; left: 50%; top: 50%; width: 70%; height: 35%; transform: translate(-50%, -50%); border: 2px dashed rgba(255,255,255,0.85); border-radius: var(--radius-sm); pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,0.18); }
    .loc-modal-scanner-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .wh-scan-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Shelf transfer modal */
    .stp-modal { width: min(720px, 95vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
    .stp-select-all { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 8px 10px; background: var(--surface-alt, var(--surface)); border-radius: var(--radius-sm); cursor: pointer; }
    .stp-choose-summary { margin-bottom: 8px; }
    .stp-choose-list { max-height: 50vh; overflow-y: auto; }
    /* Inline shelf transfer panel */
    .stp-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface-alt, var(--surface)); border-bottom: 1px solid var(--border); }
    .stp-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .stp-close-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); }
    .stp-close-btn:hover { color: var(--text); background: var(--border); }
    .stp-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
    .stp-mode-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .stp-mode-pill { padding: 5px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; transition: all 0.15s; }
    .stp-mode-pill:hover { border-color: var(--accent); color: var(--accent); }
    .stp-pill-active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
    .stp-mode-content { min-height: 32px; }
    .stp-choose-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
    .stp-choose-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; }
    .stp-choose-row:hover { background: var(--surface-alt, var(--surface)); }
    .stp-choose-sku { min-width: 80px; font-size: 12px; }
    .stp-choose-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
    .stp-choose-sep { color: var(--text-muted); }
    .stp-choose-avail { font-size: 11px; }
    .stp-qty-input { width: 54px; text-align: right; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; }
    .stp-scan-area { display: flex; flex-direction: column; gap: 8px; }
    .stp-scan-row { display: flex; gap: 8px; align-items: center; }
    .stp-scan-input { flex: 1; padding: 7px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; }
    .stp-scan-add-btn { padding: 7px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
    .stp-scan-empty { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 8px 0; }
    .stp-scan-table { width: 100%; font-size: 13px; border-collapse: collapse; }
    .stp-scan-table th { padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); text-align: left; }
    .stp-scan-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
    .stp-dest-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
    .stp-field { display: flex; flex-direction: column; gap: 4px; }
    .stp-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
    .stp-select { min-width: 180px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; }
    .stp-footer { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 4px; border-top: 1px solid var(--border); }
    .stp-msg { font-size: 12px; flex: 1; }
    .stp-cancel-btn { padding: 7px 14px; font-size: 13px; }

    /* ── Aesthetic polish for Transfer + Add/Remove modals (2026-04-29) ──
       Layers extra refinement on the existing .stp-* rules without touching
       the originals — same selectors, later in cascade. */
    .stp-modal { border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25); border: 1px solid var(--border); }
    .stp-header {
      padding: 14px 18px;
      background: linear-gradient(180deg, var(--surface-2, var(--surface-alt)) 0%, var(--surface-alt, var(--surface)) 100%);
      border-bottom: 1px solid var(--border);
    }
    .stp-title { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
    .stp-close-btn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); transition: background .15s, color .15s; }
    .stp-close-btn:hover { background: var(--border); color: var(--text); }
    .stp-body { padding: 18px; gap: 14px; }
    .stp-mode-pill {
      padding: 7px 14px; font-size: 12px; font-weight: 500;
      border-radius: 999px; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    }
    .stp-mode-pill:hover { background: var(--surface-alt, var(--surface)); }
    .stp-pill-active { box-shadow: 0 1px 3px rgba(232,197,71,0.25); }
    .stp-scan-row { gap: 10px; }
    .stp-scan-input {
      padding: 10px 14px; font-size: 14px; border-radius: var(--radius);
      transition: border-color .15s, box-shadow .15s;
    }
    .stp-scan-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,197,71,0.18); }
    .stp-scan-input::placeholder { color: var(--text-muted); opacity: 0.7; }
    .stp-scan-add-btn {
      padding: 10px 18px; font-size: 13px; font-weight: 600;
      border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,0.18);
      transition: transform .1s, box-shadow .15s;
    }
    .stp-scan-add-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.25); }
    .stp-scan-add-btn:active { transform: translateY(0); }
    .stp-qty-input { padding: 6px 8px; border-radius: var(--radius-sm); transition: border-color .15s; }
    .stp-qty-input:focus { outline: none; border-color: var(--accent); }
    .stp-scan-table { font-size: 13px; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
    .stp-scan-table thead tr { background: var(--surface-alt, var(--surface)); }
    .stp-scan-table th { padding: 9px 12px; font-weight: 600; }
    .stp-scan-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
    .stp-scan-table tbody tr { transition: background .12s; }
    .stp-scan-table tbody tr:hover { background: var(--surface-alt, var(--surface)); }
    .stp-scan-table tbody tr:last-child td { border-bottom: none; }
    .stp-scan-empty { padding: 18px; text-align: center; background: var(--surface-alt, var(--surface)); border: 1px dashed var(--border); border-radius: var(--radius); }
    .stp-footer {
      padding: 14px 18px; gap: 12px;
      background: var(--surface-alt, var(--surface));
      border-top: 1px solid var(--border);
      margin: 0 -18px -18px;
    }
    .stp-cancel-btn {
      padding: 9px 16px; border-radius: var(--radius); font-weight: 500;
      background: transparent; border: 1px solid var(--border); color: var(--text-muted);
      transition: border-color .15s, color .15s, background .15s;
    }
    .stp-cancel-btn:hover { border-color: var(--text); color: var(--text); background: var(--surface); }
    /* Scanner button — nicer hover + active state */
    .wh-scan-btn {
      width: 38px; height: 38px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius); transition: background .15s, border-color .15s, color .15s, transform .1s;
    }
    .wh-scan-btn:hover { transform: translateY(-1px); }
    .wh-scan-btn.active { box-shadow: 0 0 0 3px rgba(232,197,71,0.22); }
    /* Inline scanner — polished landscape container */
    .loc-modal-scanner-slot {
      padding: 12px;
      background: var(--surface-alt, var(--surface));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      animation: locModalScannerSlideIn .18s ease-out;
    }
    @keyframes locModalScannerSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
    .loc-modal-scanner-video-wrap {
      aspect-ratio: 16 / 9;
      max-height: 280px;
      border-radius: var(--radius);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.25);
    }
    .loc-modal-scanner-video-wrap .wh-scanner-reticle {
      width: 75%; height: 38%;
      border: 2px dashed rgba(255,255,255,0.9);
      border-radius: var(--radius);
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.28);
    }
    .loc-modal-scanner-controls {
      padding: 4px 2px 0;
    }
    .loc-modal-scanner-controls .btn-sm {
      padding: 6px 14px; font-size: 12px; font-weight: 500;
      border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); color: var(--text);
      cursor: pointer; transition: border-color .15s, background .15s;
    }
    .loc-modal-scanner-controls .btn-sm:hover { border-color: var(--text); background: var(--surface-alt, var(--surface)); }
    /* Empty-shelf header buttons (Add Items + Delete Shelf) — slightly punchier */
    .loc-add-remove-btn { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
    /* Modal footer CTAs (Add (N) → / Transfer →) — vertically center icon + text */
    .stp-footer .action-btn { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
    .stp-footer .action-btn svg { display: block; }
    .loc-empty-shelf {
      padding: 24px;
      background: var(--surface-alt, var(--surface));
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      margin-top: 8px;
      font-style: normal;
    }
    .loc-shelf-count { font-size: 11px; color: var(--green); font-weight: 600; }
    .loc-table-full { width: 100%; }
    .loc-shelf-th { padding: 8px 14px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .loc-shelf-th-right { text-align: right; }
    .loc-empty-shelf { padding: 20px; text-align: center; color: var(--text-muted); font-size: 12px; }
    .loc-item-row { border-bottom: 1px solid var(--border); }
    .loc-td { padding: 8px 14px; }
    .loc-qty-td { padding: 8px 14px; text-align: right; }
    .loc-barcode-td { padding: 8px 14px; font-size: 11px; color: var(--text-dim); }
    .loc-action-td { padding: 8px 14px; text-align: right; }
    .loc-no-results { padding: 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
    .loc-results-panel { margin-top: 0; }
    .loc-results-hd-inner { display: flex; align-items: center; gap: 12px; }
    .loc-results-title { margin: 0; }
    .loc-results-count { font-size: 12px; color: var(--text-muted); }
    .loc-results-body { padding: 0; }
    .loc-search-th { padding: 10px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .loc-search-th-right { text-align: right; }
    .loc-search-row { border-bottom: 1px solid var(--border); }
    .loc-search-td { padding: 10px 16px; }
    .loc-search-td-top { padding: 10px 16px; vertical-align: top; }
    .loc-search-td-right { padding: 10px 16px; text-align: right; }
    .loc-search-product-td { padding: 10px 16px; vertical-align: top; color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
    .loc-shelf-badge { background: var(--surface-3); padding: 3px 10px; border-radius: 5px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: var(--font-mono, monospace); }
    .loc-total-td { padding: 10px 16px; text-align: right; vertical-align: top; font-weight: 600; color: var(--green); }

    /* Label Generator additions */
    .lbl-empty-history { text-align: center; padding: 24px; color: var(--text-muted); }
    .lbl-status-created { color: var(--yellow); }
    .lbl-status-ready { color: var(--emerald); }
    .lbl-status-shipped { color: var(--blue); }
    .lbl-status-cancelled { color: var(--text-muted); text-decoration: line-through; }
    .lbl-track-link { color: var(--text); font-family: var(--font-mono, monospace); font-size: 11px; }
    .lbl-label-link { color: var(--text); }
    .lbl-order-td { font-weight: 600; }
    .lbl-sku-td { font-family: var(--font-mono, monospace); font-size: 12px; }
    .lbl-grid-2-mb { margin-bottom: 12px; }
    .lbl-search-empty { padding: 8px; color: var(--text-muted); font-size: 12px; }
    .lbl-search-error { padding: 8px; color: var(--red); font-size: 12px; }
    .lbl-result-hd { display: flex; justify-content: space-between; align-items: center; }
    .lbl-result-name-max { max-width: 70%; }
    .lbl-result-sku { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); flex-shrink: 0; margin-left: 8px; }
    .lbl-result-addr-count { font-size: 11px; color: var(--text-muted); }
    .lbl-result-order-badge { font-size: 11px; font-weight: 600; color: var(--blue); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--radius); padding: 1px 7px; }
    .lbl-selected-sku { font-family: var(--font-mono, monospace); background: var(--surface-3); padding: 2px 6px; border-radius: var(--radius-sm); }
    .lbl-selected-dims { margin-left: 8px; }
    .lbl-selected-nodims { margin-left: 8px; color: var(--yellow); }
    .lbl-addr-hd { font-weight: 600; font-size: 12px; margin-bottom: 8px; color: var(--text-muted); }
    .lbl-addr-card { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; }
    .lbl-addr-line { font-size: 12px; }

    /* Pick List Detail */
    .pld-title-row { display: flex; align-items: center; gap: 12px; }
    .pld-back-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; padding: 4px; }
    .pld-header-actions { display: flex; gap: 8px; align-items: center; }
    .pld-add-items-btn { padding: 8px 16px; background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
    .pld-add-items-btn:hover { opacity: 0.85; }
    .pld-pick-all-btn { padding: 8px 20px; background: var(--green); color: var(--bg); border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; }
    .pld-progress-mb { margin-bottom: 16px; }
    .pld-th-status { width: 90px; }
    .pld-th-actions { width: 160px; }
    .pld-comp-warn-red { font-size: 10px; color: var(--red); margin-top: 2px; }
    .pld-comp-warn-yellow { font-size: 10px; color: var(--yellow); margin-top: 2px; }
    .pld-comp-warn-green { font-size: 10px; color: var(--green); margin-top: 2px; }
    .pld-combine-hint { font-size: 10px; color: var(--blue); margin-top: 2px; }
    .pld-tpb-badge { background: rgba(34, 197, 94, 0.12); color: var(--green); }
    /* 2026-05-26: factory-carton-pairing hints on picklist 2-per-box rows */
    .pld-carton-pair { background: rgba(59, 130, 246, 0.14); color: var(--blue); font-weight: 600; }
    .pld-product-td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pld-variant-tag { color: var(--text); font-size: 10px; }
    .pld-qty-td { font-weight: 600; }
    /* .box-count-hint — DEAD: zero references in JS/HTML (confirmed 2026-06-05) */
    .pld-shelf-code { font-weight: 600; color: var(--text); }
    .pld-customer-td { text-transform: capitalize; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pld-pick-btn { padding: 3px 10px; font-size: 11px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius-sm); color: var(--green); cursor: pointer; font-weight: 600; margin-right: 4px; }
    .pld-skip-btn { padding: 3px 10px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
    .pld-remove-btn { padding: 3px 10px; font-size: 14px; background: none; border: none; color: var(--red); cursor: pointer; }
    .pld-empty-row { text-align: center; padding: 40px; }
    .pld-footer-actions { display: flex; gap: 8px; margin-top: 12px; padding: 0 4px; }
    .pld-complete-btn { padding: 8px 16px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius-sm); color: var(--green); cursor: pointer; font-weight: 600; font-size: 13px; }
    .pld-cancel-btn { padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 13px; }
    .pld-reopen-btn { padding: 8px 16px; background: var(--yellow-dim); border: 1px solid var(--yellow); border-radius: var(--radius-sm); color: var(--yellow); cursor: pointer; font-weight: 600; font-size: 13px; }
    .pld-reopen-btn:hover { background: rgba(217, 119, 6, 0.18); }
    .pld-undo-btn { padding: 3px 10px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-weight: 500; }
    .pld-undo-btn:hover { border-color: var(--yellow); color: var(--yellow); }
    .pld-deliver-btn { padding: 3px 10px; font-size: 11px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius-sm); color: var(--green); cursor: pointer; font-weight: 500; }
    .pld-deliver-btn:hover { background: rgba(74, 222, 128, 0.2); }
    .pld-shelf-edit-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; vertical-align: middle; opacity: 0.6; }
    .pld-shelf-edit-btn:hover, .pld-shelf-edit-btn:focus-visible { color: var(--text); opacity: 1; }
    .pld-note-td { max-width: 220px; }
    .pld-note-btn { max-width: 210px; padding: 3px 9px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
    .pld-note-btn:hover, .pld-note-btn:focus-visible { border-color: var(--yellow); color: var(--yellow); }
    .pld-note-btn.has-note { background: var(--yellow-dim, rgba(217,119,6,0.12)); border-color: var(--yellow); color: var(--yellow); font-weight: 700; }
    .pld-note-input { min-height: 104px; resize: vertical; line-height: 1.45; }
    /* Picklist row — fallback indicators when shelf assignment is missing.
       Three states: cross-warehouse (yellow info), last-seen (muted), and
       needs-shelf (red action). Always visible so the warehouse worker
       never sees a bare dash. */
    .pld-sku-missing { font-weight: 700; color: var(--red); background: rgba(239,68,68,0.1); border: 1px solid var(--red); border-radius: var(--radius-sm); padding: 1px 6px; font-size: 11px; letter-spacing: 0.04em; }
    .pld-shelf-cross { display: inline-block; font-size: 12px; color: var(--yellow); background: var(--yellow-dim, rgba(217,119,6,0.12)); border: 1px solid var(--yellow); border-radius: var(--radius-sm); padding: 1px 6px; }
    .pld-shelf-cross .mono { color: var(--yellow); font-weight: 600; }
    .pld-shelf-lastseen { display: inline-block; font-size: 12px; color: var(--text-muted); font-style: italic; }
    .pld-shelf-lastseen .mono { font-style: normal; font-weight: 600; }
    .pld-shelf-needs-btn { padding: 3px 10px; font-size: 11px; background: rgba(239,68,68,0.1); border: 1px solid var(--red); border-radius: var(--radius-sm); color: var(--red); cursor: pointer; font-weight: 700; letter-spacing: 0.02em; }
    .pld-shelf-needs-btn:hover, .pld-shelf-needs-btn:focus-visible { background: rgba(239,68,68,0.2); }
    .pld-shelf-hard-blocked { color: var(--orange, #f97316); background: rgba(249,115,22,0.1); border-radius: 3px; padding: 1px 5px; }
    .shelf-picker-opt.shelf-hard-blocked { opacity: 0.55; font-style: italic; }

    /* ── New Pick List (NPL) modal ── */
    .modal-680 { width: min(680px, 96vw); }
    .npl-modal-scroll { max-height: 70vh; overflow-y: auto; padding-right: 2px; }

    /* Items section */
    .npl-section { margin-bottom: 12px; }
    .npl-section-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .npl-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
    .npl-section-badge { font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text); border-radius: var(--radius); padding: 1px 8px; }
    .npl-item-row td { padding: 5px 8px; font-size: 12px; border-bottom: 1px solid var(--surface-3); }
    .npl-custom-badge { font-size: 9px; font-weight: 700; background: rgba(124,58,237,0.1); color: var(--purple); border-radius: 3px; padding: 1px 5px; margin-left: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
    .npl-stock-badge { font-size: 9px; font-weight: 700; background: rgba(16,185,129,0.1); color: #10b981; border-radius: 3px; padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.04em; }
    .npl-remove-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 4px; line-height: 1; }
    .npl-remove-btn:hover { color: var(--red); }
    /* 2/box grouping in confirm modal */
    .npl-2box-skus { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
    .npl-2box-sku-line { line-height: 1.4; }
    .npl-2box-name-line { line-height: 1.35; font-size: 12px; }
    .npl-2box-btn { margin: 1px 0; }

    /* Accordion */
    .npl-accordion { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
    .npl-accordion-trigger { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface-2); border: none; text-align: left; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); }
    .npl-accordion-trigger:hover { background: var(--surface-3); }
    .npl-accordion-icon { margin-left: auto; font-size: 10px; color: var(--text-dim); transition: transform 0.15s; }
    .npl-accordion-trigger.open .npl-accordion-icon { transform: rotate(180deg); }
    .npl-accordion-panel { display: none; padding: 12px 14px; background: var(--surface); border-top: 1px solid var(--border); }
    .npl-accordion-panel.open { display: block; }
    .npl-addr-preview { font-size: 11px; color: var(--text-dim); margin-left: 4px; font-weight: 400; }
    .pl-custom-btn { margin-top: 8px; padding: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; font-size: 13px; }
    .pl-custom-btn:hover { border-color: var(--accent); color: var(--accent); }
    .pl-custom-inline-btn { white-space: nowrap; }

    /* Manual entry toggle inside Add Custom Pick */
    .npl-manual-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 0; margin-top: 6px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-muted); border-top: 1px solid var(--border); }
    .npl-manual-toggle:hover { color: var(--text); }
    .npl-manual-toggle .npl-accordion-icon { font-size: 10px; color: var(--text-dim); }

    /* Search results */
    .npl-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
    .npl-search-results { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
    .npl-search-order { border-bottom: 1px solid var(--border); }
    .npl-search-order:last-child { border-bottom: none; }
    .npl-search-order-header { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--surface-3); font-size: 11px; font-weight: 700; color: var(--text-muted); }
    .npl-add-all-btn { margin-left: auto; padding: 2px 8px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
    .npl-add-all-btn:hover { border-color: var(--text); color: var(--text); }
    .npl-search-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--surface-3); }
    .npl-search-item:last-child { border-bottom: none; }
    .npl-search-item-title { font-size: 12px; color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .npl-add-btn { padding: 3px 10px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
    .npl-add-btn:hover { border-color: var(--green); color: var(--green); }
    .npl-add-btn.added { background: rgba(34,197,94,0.1); border-color: var(--green); color: var(--green); cursor: default; }

    /* Custom item form */
    .npl-custom-form { display: flex; flex-direction: column; gap: 8px; }
    .npl-row { display: flex; gap: 8px; }
    .npl-row-align { display: flex; align-items: center; gap: 8px; }
    .npl-grow { flex: 1; }
    .npl-sm { width: 70px; flex-shrink: 0; }
    .npl-xs { width: 54px; flex-shrink: 0; }

    /* Address form */
    .npl-addr-form { display: flex; flex-direction: column; gap: 8px; }
    .npl-autofill-btn { padding: 4px 10px; font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
    .npl-autofill-btn:hover { border-color: var(--text); color: var(--text); }

    /* Small button variants */
    .btn-accent-sm { padding: 6px 14px; font-size: 12px; font-weight: 600; background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); cursor: pointer; }
    .btn-accent-sm:hover { opacity: 0.9; }
    .btn-outline-sm { padding: 6px 14px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
    .btn-outline-sm:hover { border-color: var(--text-muted); color: var(--text); }

    /* Delivery address card in detail view */
    .npl-addr-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; display: inline-block; min-width: 200px; }
    .npl-addr-card-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 6px; }
    .npl-addr-name { font-size: 14px; font-weight: 600; color: var(--text); }

    /* Pick confirm modal */
    .pck-item-preview { padding: 14px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
    .pck-item-sku { font-size: 22px; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--text); letter-spacing: 0.02em; }
    .pck-item-product { font-size: 13px; color: var(--text-muted); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pck-item-meta { font-size: 12px; color: var(--text-dim); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
    .pck-qty-badge { background: var(--surface-3); border-radius: var(--radius-sm); padding: 1px 7px; font-weight: 600; color: var(--text); }
    .pck-warehouse-note { margin: -2px 0 16px; padding: 14px 16px; border: 2px solid var(--yellow); border-radius: var(--radius); background: var(--yellow-dim, rgba(217,119,6,0.14)); box-shadow: 0 0 0 3px rgba(217,119,6,0.08); }
    .pck-warehouse-note-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow); margin-bottom: 6px; }
    .pck-warehouse-note-text { color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.45; white-space: pre-wrap; }
    .pck-shelf-field { margin: 0; }
    .pck-shelf-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 6px; }
    .pck-confirm-footer { display: flex; gap: 8px; margin-top: 16px; }
    .pck-confirm-footer .btn-outline { flex: 1; padding: 10px; font-size: 13px; }
    .pck-confirm-btn { flex: 2; padding: 10px 16px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius-sm); color: var(--green); font-weight: 700; font-size: 14px; cursor: pointer; }
    .pck-confirm-btn:hover { background: var(--green); color: #000; }

    /* Pick completion modal */
    .pck-done-modal { text-align: center; padding: 0 !important; overflow: hidden; }
    .pck-done-modal .modal-body-pad { padding: 28px 24px 24px; }
    .pck-done-header { background: var(--green-dim); border-bottom: 1px solid var(--green); padding: 28px 24px 20px; }
    .pck-done-icon { font-size: 40px; color: var(--green); line-height: 1; margin-bottom: 8px; }
    .pck-done-title { font-size: 20px; font-weight: 700; color: var(--green); }
    .pck-done-name { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .pck-done-stats { display: flex; gap: 0; justify-content: center; padding: 20px 0 12px; }
    .pck-done-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; border-right: 1px solid var(--border); }
    .pck-done-stat:last-child { border-right: none; }
    .pck-done-stat strong { font-size: 28px; font-weight: 700; line-height: 1; }
    .pck-done-stat span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .pck-done-stat.green strong { color: var(--green); }
    .pck-done-stat.red strong { color: var(--red); }
    .pck-done-stat.muted strong { color: var(--text-muted); }
    .pck-done-warning { margin: 0 24px 12px; padding: 10px 12px; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); border-radius: var(--radius-sm); font-size: 12px; color: var(--red); }
    .pck-done-close-btn { display: block; width: calc(100% - 48px); margin: 4px 24px 24px; padding: 12px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius); color: var(--green); font-weight: 700; font-size: 15px; cursor: pointer; }
    .pck-done-close-btn:hover { background: var(--green); color: #000; }

    /* Product Issues */
    .pi-err-detail { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .pi-breakdown-col { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 11px; }
    .pi-breakdown-row { display: flex; align-items: center; gap: 6px; }
    .pi-count-right { margin-left: auto; }
    .pi-tags-bar { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
    .pi-tags-label { font-size: 11px; color: var(--text-dim); padding: 6px 0; }
    .pi-tag-pill { font-size: 10px; }
    .pi-table-card { overflow-x: auto; }
    .pi-th-expand { width: 28px; }
    .pi-th-sort { cursor: pointer; }
    .pi-th-sort-c { cursor: pointer; text-align: center; }
    .pi-row-expand { cursor: pointer; }
    .pi-expand-td { text-align: center; font-size: 10px; color: var(--text-dim); }
    .pi-product-td { font-weight: 600; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pi-center-sm { text-align: center; font-size: 11px; }
    .pi-issues-td { text-align: center; font-weight: 600; }
    .pi-open-count { color: var(--red); font-size: 10px; }
    .pi-tags-td { font-size: 11px; }
    .pi-pill-xs { font-size: 9px; margin: 1px; }
    .pi-center-td { text-align: center; }
    .pi-rate-bar-track { width: 60px; height: 4px; background: var(--surface-3); border-radius: 2px; margin-top: 3px; }
    .pi-variant-row { background: var(--surface-2); }
    .pi-variant-sku-td { padding-left: 20px; font-size: 11px; }
    .pi-tags-sm-td { font-size: 10px; }
    .pi-date-td { font-size: 11px; }
    .pi-date-sm { font-size: 10px; }

    /* Customers */
    .cust-ret-card { padding: 16px; }
    .cust-ret-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
    .cust-rev-chart { display: flex; gap: 20px; align-items: flex-end; height: 160px; }
    .cust-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .cust-chart-val-accent { font-size: 11px; color: var(--text); font-family: var(--font-mono, monospace); }
    .cust-chart-val-blue { font-size: 11px; color: var(--blue); font-family: var(--font-mono, monospace); }
    .cust-chart-val-muted { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
    .cust-chart-label { font-size: 10px; color: var(--text-muted); }
    .cust-freq-chart { display: flex; gap: 8px; align-items: flex-end; height: 160px; }
    .cust-table-title { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
    .cust-header-right { display: flex; gap: 8px; align-items: center; }
    .cust-sync-meta { font-size: 10px; color: var(--text-dim); }
    .cust-th-sort { cursor: pointer; }
    .cust-th-segment { width: 50px; }
    .cust-empty-row { text-align: center; padding: 30px; }
    .cust-name-td { font-weight: 500; }
    .cust-email-td { font-size: 11px; }
    .cust-ticket-pill { font-size: 10px; }
    .cust-view-link { color: var(--text); font-size: 11px; }

    /* Revenue */
    .rev-header-right { display: flex; gap: 8px; align-items: center; }
    .rev-toolbar { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .rev-toolbar-right { display: flex; gap: 6px; align-items: center; }
    .rev-comparison-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); cursor: pointer; }
    .rev-comparison-cb { accent-color: var(--text); }
    .rev-card-mb { margin-bottom: 20px; }
    .rev-chart-title-row { display: flex; justify-content: space-between; align-items: center; }
    .rev-compare-legend { font-size: 11px; color: var(--text-dim); }
    .rev-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .rev-bar-val { font-size: 9px; }
    .rev-bar-lbl { font-size: 8px; }
    .rev-table-mt { margin-top: 16px; }
    .rev-table-title { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .rev-table-scroll { max-height: 400px; }
    /* Create Pick List */
    .cpl-filter-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
    .cpl-name-input { max-width: 280px; font-weight: 600; font-size: 13px; }
    .pld-label-bar { position: sticky; bottom: 0; background: var(--bg-card); border-top: 2px solid var(--accent); padding: 10px 16px; display: flex; align-items: center; gap: 12px; z-index: var(--z-sticky); /* was 20 — nearest lower token */ border-radius: 0 0 12px 12px; box-shadow: 0 -2px 8px rgba(0,0,0,.15); }
    .pld-label-bar-btn { background: var(--accent); color: #fff; border: none; padding: 8px 18px; border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; }
    .pld-label-bar-btn:hover { opacity: .85; }
    .pld-pick-selected-btn { background: var(--green); color: #fff; border: none; padding: 8px 18px; border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; }
    .pld-pick-selected-btn:hover { background: #15803d; }
    #pld-label-bar-count { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; }
    .pld-item-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
    .cpl-search { flex: 1; min-width: 200px; }
    .cpl-selected-val { color: var(--text); }
    .cpl-th-cb { width: 36px; }
    .cpl-th-sort { cursor: pointer; }
    .cpl-tpb-badge { background: rgba(34, 197, 94, 0.12); color: var(--green); }
    .cpl-product-td { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .cpl-variant-td { color: var(--text); font-size: 11px; }
    .cpl-qty-td { font-size: 16px; font-weight: 600; }
    .cpl-shelf-btn { background: var(--accent-dim, rgba(99,102,241,0.1)); border: 1px solid var(--accent, #6366f1); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; color: var(--text); line-height: 1.4; }
    .cpl-shelf-btn:hover { background: var(--accent, #6366f1); color: #fff; }
    .cpl-shelf-btn.has-more { border-style: dashed; }
    .cpl-shelf-btn--missing { animation: cplShelfFlashMissing 2.4s ease-out; }
    @keyframes cplShelfFlashMissing {
      0%, 30% { background: var(--red, #ef4444); color: #fff; box-shadow: 0 0 0 3px var(--red, #ef4444); }
      100% { background: var(--accent-dim, rgba(99,102,241,0.1)); color: var(--text); box-shadow: 0 0 0 0 transparent; }
    }
    .fulf-shelf-row--unset td { background: rgba(245,158,11,0.10); }
    .fulf-shelf-row--empty td { background: rgba(239,68,68,0.10); }
    .fulf-shelf-row--flash td { animation: fulfShelfFlash 2.4s ease-out; }
    @keyframes fulfShelfFlash {
      0%, 30% { background: rgba(239,68,68,0.55); }
      100% { background: rgba(245,158,11,0.10); }
    }
    .fulf-shelf-select { padding: 4px 6px; font-size: 12px; min-width: 120px; }
    .cpl-shelf-caret { font-size: 9px; opacity: 0.65; }
    .shelf-picker-dropdown { background: var(--card-bg, #1e1e2e); border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,0.25); min-width: 140px; overflow: hidden; }
    .shelf-picker-opt { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font-size: 12px; cursor: pointer; gap: 12px; }
    .shelf-picker-opt:hover { background: var(--hover-bg, rgba(255,255,255,0.06)); }
    .shelf-picker-opt.sel { background: var(--accent-dim, rgba(99,102,241,0.12)); font-weight: 600; }
    .shelf-picker-qty { color: var(--text-muted); font-size: 11px; }
    .cpl-customer-td { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
    .cpl-item-row { display: flex; gap: 8px; align-items: center; padding: 1px 0; }
    .cpl-unit-row td { border-top: 1px solid var(--border, rgba(255,255,255,0.06)); }
    .cpl-order-first-row td { border-top: 2px solid var(--text-muted, #6b7280) !important; }
    .cpl-sku-min { min-width: 90px; }
    .cpl-badge-xs { font-size: 10px; padding: 1px 5px; }
    /* Creation view split toggle button */
    .cpl-split-toggle { font-size: 10px; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid rgba(34,197,94,0.3); background: rgba(34,197,94,0.1); color: var(--green); cursor: pointer; font-weight: 600; white-space: nowrap; }
    .cpl-split-toggle:hover { background: rgba(34,197,94,0.2); }
    .cpl-split-toggle.cpl-split-active { border-color: rgba(251,146,60,0.4); background: rgba(251,146,60,0.12); color: #fb923c; }
    .cpl-split-toggle.cpl-split-active:hover { background: rgba(251,146,60,0.22); }
    /* Inline 2/box layout: [SKUs col] [📦 icon centered] [names col] — no extra rows */
    .cpl-2box-inline { display: flex; align-items: center; gap: 6px; }
    .cpl-2box-sku-col, .cpl-2box-name-col { display: flex; flex-direction: column; gap: 1px; }
    .cpl-2box-sku-row, .cpl-2box-name-row { line-height: 1.4; }
    .cpl-merge-btn { background: var(--card-bg, #fff) !important; color: var(--text, #374151) !important; border: 1px solid var(--border, #d1d5db) !important; }
    .cpl-merge-btn:hover { background: var(--hover-bg, #f3f4f6) !important; }
    /* Detail view split/merge buttons */
    .pld-split-btn, .pld-merge-btn { font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); white-space: nowrap; }
    .pld-split-btn:hover { background: rgba(251,146,60,0.12); color: #fb923c; border-color: rgba(251,146,60,0.3); }
    .pld-merge-btn:hover { background: rgba(34,197,94,0.12); color: var(--green); border-color: rgba(34,197,94,0.3); }
    .cpl-item-name { color: var(--text-muted); font-size: 11px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
    .cpl-variant-xs { color: var(--text); font-size: 10px; }
    .cpl-loc-pill { font-size: 10px; padding: 1px 6px; }
    .cpl-add-select { padding: 7px 12px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
    /* Reorder Recs */
    .rr-th-r { text-align: right; }
    .rr-th-c { text-align: center; }
    .rr-title-td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .rr-variant-td { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
    .rr-td-r { text-align: right; }
    .rr-td-r-bold { text-align: right; font-weight: 600; }
    .rr-td-r-muted { text-align: right; color: var(--text-muted); }
    .rr-td-c { text-align: center; }
    .rr-loc-td { font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
    .rr-pagination-btns { display: flex; gap: 8px; }
    /* Action Items + Negative Customers */
    .ai-btn-primary { background: var(--accent); color: var(--bg); }
    .ai-filter-select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 12px; }
    .ai-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
    .ai-status-select { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 11px; }
    .ai-done-btn { background: var(--green); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 2px 8px; font-size: 11px; cursor: pointer; }
    .ai-del-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; }
    .ai-empty-td { text-align: center; padding: 40px; }
    .ai-name-td { font-weight: 500; }
    .ai-sm { font-size: 11px; }
    .ai-ext-link { color: var(--text); font-size: 11px; text-decoration: none; }
    /* Order Map */
    .omap-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
    .omap-sep { color: var(--text-dim); font-size: 12px; margin: 0 4px; }
    .omap-date-input { padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12px; }
    .omap-to-label { color: var(--text-dim); font-size: 12px; }
    .omap-apply-btn { padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 12px; cursor: pointer; }
    .omap-range-label { font-size: 11px; color: var(--text-dim); margin-left: 8px; }
    .omap-title-row { display: flex; justify-content: space-between; align-items: center; }
    .omap-legend-low { background: rgba(74, 222, 128, 0.08); }
    .omap-legend-med { background: rgba(74, 222, 128, 0.35); }
    .omap-legend-high { background: rgba(74, 222, 128, 0.6); }
    .omap-legend-wh { background: var(--accent-dim); width: 18px; }
    .omap-state-list { display: flex; flex-direction: column; gap: 4px; }
    .omap-bar-track { flex: 1; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
    .omap-count-num { width: 30px; text-align: right; font-size: 11px; }
    .omap-coverage { padding: 8px 0; font-size: 12px; line-height: 1.8; }
    .omap-wh-star { color: var(--text); font-size: 10px; }
    .omap-note { margin-top: 8px; padding: 8px; background: var(--surface-3); border-radius: var(--radius-sm); font-size: 11px; color: var(--text-muted); }
    /* Preorder Notes */
    .pn-card-mb { margin-bottom: 16px; }
    .pn-card-title { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-muted); }
    .pn-card-body { padding: 16px; line-height: 1.8; font-size: 13px; }
    .pn-intro { margin-bottom: 12px; color: var(--text-muted); font-size: 11px; }
    .pn-code { background: var(--surface-hover); padding: 2px 6px; border-radius: 3px; font-size: 11px; }
    .pn-name-td { font-weight: 500; }
    .pn-date-td { font-size: 12px; white-space: nowrap; }
    .pn-empty-td { text-align: center; padding: 20px; }
    .pn-eta-badge { font-size: 11px; color: var(--text-muted); font-weight: 400; }

    /* Pick List History */
    .plh-filter-bar { padding: 12px 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
    .plh-date-row { display: flex; align-items: center; gap: 8px; }
    .plh-date-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
    .plh-date-input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; color: var(--text); font-size: 12px; font-family: inherit; }
    .plh-clear-btn { padding: 4px 10px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
    .plh-spacer { flex: 1; }
    .plh-summary { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); }
    .plh-strong-val { color: var(--text); }
    .plh-empty-state { padding: 60px 0; }
    .plh-empty-icon { font-size: 48px; }
    .plh-empty-p { font-size: 15px; color: var(--text-muted); margin-top: 12px; }
    .plh-name-td { font-weight: 500; }
    .plh-view-btn { padding: 3px 10px; font-size: 11px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; }
    .plh-reopen-btn { padding: 3px 10px; font-size: 11px; background: var(--yellow-dim); border: 1px solid var(--yellow); border-radius: var(--radius-sm); color: var(--yellow); cursor: pointer; margin-left: 6px; font-weight: 500; }
    .plh-reopen-btn:hover { background: rgba(217, 119, 6, 0.18); }
    .plh-archive-btn { padding: 3px 10px; font-size: 11px; background: transparent; border: 1px solid rgba(220,38,38,0.35); border-radius: var(--radius-sm); color: var(--red); cursor: pointer; margin-left: 6px; }
    .plh-archive-btn:hover { background: rgba(239,68,68,0.12); }
    .plh-action-td { white-space: nowrap; }

    /* Fleet */
    .fl-agent-card { padding: 12px 16px; }
    .fl-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .fl-agent-name { font-size: 14px; font-weight: 600; }
    .fl-status-pill { font-size: 10px; }
    .fl-role-row { display: flex; gap: 16px; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
    .fl-schedule { margin-left: auto; font-family: var(--font-mono); font-size: 10px; }
    .fl-stats-row { display: flex; gap: 16px; font-size: 11px; margin-bottom: 6px; }
    .fl-finding { font-size: 11px; color: var(--text-secondary); line-height: 1.4; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
    .fl-tiers-wrapper { position: relative; padding: 0 0 24px; }
    .fl-tier { position: relative; }
    .fl-tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .fl-tier-connector { position: absolute; left: 13px; top: -8px; width: 2px; height: 20px; background: var(--border); }
    .fl-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .fl-tier-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
    .fl-tier-desc { font-size: 11px; color: var(--text-dim); margin-left: 8px; }
    .fl-agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }
    .mb-stale-dot { font-size: 10px; margin-left: 6px; }
    .mb-flex-1 { flex: 1; }
    .mb-no-urgent { padding: 8px 0; }
    .mb-urgent-hint { font-size: 11px; color: var(--text-muted); }
    .mb-card-clickable { cursor: pointer; }
    .mb-sub-mt { margin-top: 2px; }

    /* SEO */
    .seo-title-td { font-weight: 500; }
    .seo-pill-unchecked { background: var(--surface-3); color: var(--text-muted); }
    .seo-table-mb { margin-bottom: 16px; }
    .seo-empty-td { text-align: center; padding: 32px; }
    .seo-scroll-400 { max-height: 400px; }
    .seo-scroll-300 { max-height: 300px; }

    /* Customer Issues */
    .ci-th-action { width: 100px; }
    .ci-th-notes { width: 40px; }
    .ci-empty-td { text-align: center; padding: 30px; }
    .ci-issue-row { cursor: pointer; }
    .ci-gorgias-link { display: block; font-size: 10px; color: var(--text-muted); }
    .ci-customer-td { cursor: pointer; }
    .ci-email-div { font-size: 10px; }
    .ci-priority-span { font-weight: 600; font-size: 11px; }
    .ci-products-td { max-width: 200px; white-space: normal; font-size: 11px; }
    .ci-summary-td { max-width: 250px; white-space: normal; font-size: 11px; }
    .ci-resolution-td { max-width: 180px; white-space: normal; font-size: 11px; }

    /* AI Responder */
    .responder-layout { display: flex; gap: 16px; height: calc(100vh - 180px); }
    .responder-sidebar { width: 320px; flex-shrink: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
    .responder-main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
    .responder-case-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
    .responder-case-row:hover { border-color: var(--text); }
    .responder-case-row.selected { border-color: var(--text); background: var(--accent-dim); }
    .responder-case-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
    .responder-case-subject { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .responder-case-excerpt { font-size: 11px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .responder-confidence { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); margin-left: 8px; }
    .responder-confidence-high { background: rgba(22,163,74,0.1); color: var(--green); }
    .responder-confidence-med { background: rgba(217,119,6,0.1); color: #d97706; }
    .responder-confidence-low { background: rgba(239,68,68,0.15); color: var(--danger); }
    .responder-sync-note { font-size: 10px; color: var(--text-muted); padding: 4px 0 8px; }
    .responder-group-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 0 6px; }
    .responder-ticket-link { font-size: 11px; color: var(--text-muted); text-decoration: none; }
    .responder-ticket-link:hover { color: var(--text); }

    /* Support Inbox — Customer Hub */
    .hub-container { display: flex; gap: 0; height: calc(100vh - 140px); overflow: hidden; }

    /* Left sidebar */
    .hub-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--surface-1); }
    /* Compact sidebar header — Cole 2026-05-07: collapsed 4 stacked rows
      (header / view-tabs / channel-bar / search) into 2 tight rows so
      the ticket list lands well above-the-fold. */
    .hub-sidebar-compact { border-bottom: 1px solid var(--border); }
    .hub-sidebar-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
    }
    .hub-sidebar-row + .hub-sidebar-row {
      border-top: 1px solid var(--border-soft, rgba(0,0,0,0.05));
    }
    .hub-sidebar-row-tabs { gap: 6px; }
    .hub-title { font-size: 12px; font-weight: 700; flex-shrink: 0; }
    .hub-header-stats { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; flex-shrink: 0; }
    .hub-stat-badge { font-weight: 700; font-size: 11px; }
    .hub-stat-badge.priority { color: var(--red); }
    .hub-stat-badge.open { color: var(--text); }
    .hub-stat-label { color: var(--text-muted); font-size: 10px; }
    .hub-stat-sep { color: var(--border); }
    .hub-search-inline {
      flex: 1;
      min-width: 0;
      padding: 4px 8px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text-primary);
      font-size: 11px;
      box-sizing: border-box;
    }
    .hub-search-inline:focus { outline: none; border-color: var(--text); }

    /* View tabs — inline within the compact strip */
    .hub-view-tabs { display: inline-flex; gap: 2px; flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
    .hub-view-tabs::-webkit-scrollbar { display: none; }
    .hub-view-tab { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .hub-view-tab:hover { color: var(--text-primary); background: var(--surface-2); }
    .hub-view-tab.active { background: var(--accent); color: #fff; border-color: var(--text); }

    /* Channel filter — icon-only buttons inline next to tabs */
    .hub-channel-bar { display: inline-flex; gap: 2px; flex-shrink: 0; }
    .hub-ch-btn { padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; opacity: 0.45; transition: all 0.15s; display: inline-flex; align-items: center; line-height: 1; }
    .hub-ch-btn:hover { opacity: 0.85; background: var(--surface-2); }
    .hub-ch-btn.active { opacity: 1; background: var(--surface-2); border-color: var(--border); }

    /* Jarvis triage one-liner — Cole 2026-05-07: was a 3-row card eating
       ~80px above the ticket list. Now a single muted-line summary;
       full text in tooltip. */
    .hub-jarvis-line {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05));
      background: var(--accent-dim, rgba(170, 138, 100, 0.06));
      font-size: 11px;
      color: var(--text-muted);
      cursor: help;
    }
    .hub-jarvis-line-icon { color: var(--accent, #aa8a64); flex-shrink: 0; }
    .hub-jarvis-line-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Legacy classes kept so other consumers don't break (dashboards using
       .hub-sidebar-header etc. — search analytics, etc.). */
    .hub-sidebar-header { padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
    .hub-search { width: 100%; box-sizing: border-box; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); font-size: 11px; }
    .hub-search:focus { outline: none; border-color: var(--text); }

    /* Ticket list */
    .hub-ticket-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
    .hub-ticket-row { padding: 10px 11px; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--surface-1); }
    .hub-ticket-row:hover { border-color: var(--text); background: var(--surface-2); }
    .hub-ticket-row.selected { border-color: var(--text); background: var(--surface-2); }
    .hub-ticket-row.priority { border-left: 3px solid #ef4444; }

    .hub-tr-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
    .hub-tr-channel { font-size: 12px; }
    .hub-tr-priority-badge { font-size: 9px; font-weight: 800; background: #ef4444; color: #fff; border-radius: 3px; padding: 1px 4px; }
    .hub-tr-name { font-size: 11px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hub-tr-age { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
    .hub-tr-age.age-fresh { color: var(--green); }
    .hub-tr-age.age-warn  { color: #d97706; }
    .hub-tr-age.age-old   { color: var(--red); }
    .hub-tr-subject { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-tr-excerpt { font-size: 10px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
    .hub-tr-bottom { display: flex; flex-wrap: wrap; gap: 3px; }
    .hub-tag { font-size: 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; color: var(--text-muted); }
    .hub-tag.draft-tag { color: #d97706; border-color: rgba(217,119,6,0.3); }
    .hub-tag.snooze-tag { color: var(--purple); border-color: rgba(124,58,237,0.3); }

    /* Center thread */
    .hub-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
    .hub-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
    .hub-empty-icon { font-size: 32px; opacity: 0.3; }
    .hub-empty-text { font-size: 12px; color: var(--text-muted); }
    .hub-thread-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    /* Thread header */
    .hub-thread-header { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-1); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
    .hub-th-left { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
    .hub-th-channel { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
    .hub-th-subject { font-size: 13px; font-weight: 600; }
    .hub-th-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .hub-th-right { flex-shrink: 0; }
    .hub-gorgias-link { font-size: 11px; color: var(--text-muted); text-decoration: none; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .hub-gorgias-link:hover { color: var(--text); border-color: var(--text); }

    /* Messages */
    .hub-thread-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .hub-msg { border-radius: var(--radius); padding: 12px 14px; border: 1px solid var(--border); }
    .hub-msg.customer { background: var(--surface-1); }
    .hub-msg.agent    { background: var(--surface-2); border-color: var(--text)44; }
    .hub-msg.internal { background: rgba(124,58,237,0.05); border-color: rgba(124,58,237,0.2); }
    .hub-msg-header { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
    .hub-msg-avatar { font-size: 14px; }
    .hub-msg-sender { font-size: 12px; font-weight: 600; }
    .hub-msg-internal-badge { font-size: 9px; font-weight: 700; background: #8b5cf6; color: #fff; border-radius: 3px; padding: 1px 5px; }
    .hub-msg-channel { font-size: 11px; }
    .hub-msg-time { font-size: 10px; color: var(--text-muted); margin-left: auto; }
    .hub-msg-body { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
    .hub-msg-body p { margin: 0 0 6px; }

    /* Compose area */
    .hub-compose { border-top: 1px solid var(--border); background: var(--surface-1); flex-shrink: 0; }

    /* Mode bar */
    .hub-mode-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); transition: background 0.2s; }
    .hub-mode-bar.draft { background: rgba(234, 179, 8, 0.08); }
    .hub-mode-bar.live  { background: rgba(239, 68, 68, 0.12); }
    .hub-mode-indicator { display: flex; align-items: center; gap: 7px; }
    .hub-mode-bar.draft .hub-mode-indicator { color: #a37c00; }
    .hub-mode-bar.live  .hub-mode-indicator { color: var(--red-bright); }
    .hub-mode-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .hub-mode-toggle { font-size: 10px; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid currentColor; background: transparent; cursor: pointer; color: inherit; font-weight: 600; }
    .hub-mode-toggle:hover { opacity: 0.8; }

    /* Compose top actions */
    .hub-compose-top { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .hub-compose-btn { font-size: 11px; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
    .hub-compose-btn:hover { border-color: var(--text); color: var(--text-primary); }
    .hub-assignee-wrap { margin-left: auto; }
    .hub-assignee-select { font-size: 11px; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; }

    /* Textarea */
    .hub-textarea { width: 100%; box-sizing: border-box; min-height: 100px; max-height: 200px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); font-size: 13px; line-height: 1.5; resize: vertical; outline: none; font-family: inherit; }

    /* Compose bottom */
    .hub-compose-bottom { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 8px; }
    .hub-compose-left { display: flex; gap: 6px; }
    .hub-action-btn { font-size: 11px; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; }
    .hub-action-btn:hover { border-color: var(--text); color: var(--text-primary); }
    .hub-action-btn.escalate:hover { border-color: var(--red-bright); color: var(--red-bright); }
    .hub-action-btn.resolve:hover  { border-color: var(--green-bright); color: var(--green-bright); }

    /* Send button */
    .hub-send-btn { font-size: 12px; font-weight: 700; padding: 7px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: all 0.2s; letter-spacing: 0.02em; }
    .hub-send-btn.draft { background: rgba(234, 179, 8, 0.15); color: #a37c00; border: 1px solid rgba(234, 179, 8, 0.4); }
    .hub-send-btn.draft:hover { background: rgba(234, 179, 8, 0.25); }
    .hub-send-btn.live  { background: rgba(239, 68, 68, 0.15); color: var(--red-bright); border: 1px solid rgba(239, 68, 68, 0.5); }
    .hub-send-btn.live:hover  { background: rgba(239, 68, 68, 0.25); }

    /* Right: customer panel */
    .hub-customer-panel { width: 260px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface-1); overflow-y: auto; }
    .hub-customer-empty { display: flex; align-items: center; justify-content: center; height: 100%; }
    .hub-cp-inner { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
    .hub-cp-section { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
    .hub-cp-section:last-child { border-bottom: none; }
    .hub-cp-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
    .hub-cp-name  { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
    .hub-cp-email { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; word-break: break-all; }
    .hub-cp-phone { font-size: 11px; color: var(--text-muted); }
    .hub-cp-joined { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
    .hub-cp-stats-row { display: flex; gap: 12px; }
    .hub-cp-stat { flex: 1; }
    .hub-cp-stat-value { font-size: 14px; font-weight: 700; }
    .hub-cp-stat-label { font-size: 10px; color: var(--text-muted); }
    .hub-cp-order-row { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--border)44; }
    .hub-cp-order-row:last-child { border-bottom: none; }
    .hub-cp-order-name { flex: 1; color: var(--text-secondary); }
    .hub-cp-order-status { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
    .hub-cp-order-status.fulfilled   { background: #16a34a22; color: var(--green); }
    .hub-cp-order-status.unfulfilled { background: #f59e0b22; color: #f59e0b; }
    .hub-cp-order-status.partial     { background: #8b5cf622; color: #8b5cf6; }
    .hub-cp-order-total { font-size: 11px; font-weight: 600; }
    .hub-judgeme-btn { width: 100%; font-size: 11px; padding: 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-weight: 600; transition: all 0.15s; }
    .hub-judgeme-btn:hover { background: var(--surface-2); border-color: var(--text-dim); color: var(--text); }
    .hub-judgeme-excluded { font-size: 11px; color: var(--green-bright); font-weight: 600; }
    .hub-cp-note { display: flex; gap: 5px; align-items: flex-start; font-size: 11px; padding: 5px 0; border-bottom: 1px solid var(--border)33; }
    .hub-cp-note:last-child { border-bottom: none; }
    .hub-cp-note-dot { flex-shrink: 0; }
    .hub-cp-note-time { color: var(--text-muted); font-size: 10px; white-space: nowrap; margin-left: auto; }
    .hub-cp-add-note-btn { font-size: 10px; font-weight: 600; color: var(--text); background: none; border: none; cursor: pointer; padding: 0; }
    .hub-note-input { width: 100%; box-sizing: border-box; min-height: 60px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); color: var(--text-primary); font-size: 11px; resize: vertical; outline: none; }
    .hub-note-save-btn { margin-top: 5px; font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: transparent; color: var(--text); cursor: pointer; font-weight: 600; }

    /* Modals */
    .hub-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
    .hub-modal { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); width: 480px; max-width: 90vw; max-height: 70vh; display: flex; flex-direction: column; }
    .hub-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
    .hub-modal-close { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: var(--radius-sm); }
    .hub-modal-close:hover, .hub-modal-close:focus-visible { color: var(--text); background: var(--surface-2); outline: 2px solid var(--accent); outline-offset: 2px; }
    .hub-modal-body { overflow-y: auto; padding: 12px; flex: 1; }
    .hub-macro-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 6px 6px 4px; }
    .hub-macro-row { padding: 10px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; margin-bottom: 3px; }
    .hub-macro-row:hover { background: var(--surface-2); border-color: var(--text); }
    .hub-macro-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
    .hub-macro-preview { font-size: 11px; color: var(--text-muted); }

    /* Snooze modal */
    .hub-snooze-options { display: flex; flex-direction: column; gap: 6px; }
    .hub-snooze-opt { font-size: 12px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; text-align: left; transition: all 0.15s; font-weight: 500; }
    .hub-snooze-opt:hover { border-color: var(--text); color: var(--text-primary); }
    .hub-snooze-custom { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
    .hub-snooze-custom label { font-size: 11px; color: var(--text-muted); }
    .hub-snooze-custom input[type="date"] { font-size: 11px; padding: 4px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); }
    .hub-snooze-custom .hub-snooze-opt { padding: 5px 10px; font-size: 11px; flex-shrink: 0; }

    /* Misc */
    .hub-loading-msg { font-size: 12px; color: var(--text-muted); padding: 16px; text-align: center; }
    .hub-empty-list  { font-size: 12px; color: var(--text-muted); padding: 20px; text-align: center; }
    .hub-error { font-size: 11px; color: var(--red-bright); padding: 12px; }

    /* Hub Analytics View */
    .hub-analytics-wrap { flex: 1; overflow-y: auto; }
    .hub-analytics-inner { padding: 4px 2px 20px; }
    .hub-analytics-kpi-row { display: flex; gap: 12px; margin-bottom: 16px; }
    .hub-analytics-kpi { flex: 1; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
    .hub-analytics-kpi-value { font-size: 28px; font-weight: 700; margin-bottom: 2px; }
    .hub-analytics-kpi-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
    .hub-analytics-kpi-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
    .hub-analytics-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    .hub-analytics-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
    .hub-analytics-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; }
    .hub-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .hub-bar-label { font-size: 11px; color: var(--text-secondary); width: 150px; flex-shrink: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
    .hub-bar-track { flex: 1; height: 9px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
    .hub-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; }
    .hub-bar-count { font-size: 11px; font-weight: 600; width: 22px; text-align: right; flex-shrink: 0; }
    .hub-aging-row { display: flex; gap: 12px; }
    .hub-aging-bucket { flex: 1; text-align: center; padding: 14px 8px; border-radius: var(--radius); }
    .hub-aging-bucket.fresh { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.25); }
    .hub-aging-bucket.warn  { background: rgba(234,179,8,0.08);  border: 1px solid rgba(234,179,8,0.25); }
    .hub-aging-bucket.late  { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.3); }
    .hub-aging-bucket.old   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.35); }
    .hub-aging-count { font-size: 30px; font-weight: 700; margin-bottom: 2px; }
    .hub-aging-bucket.fresh .hub-aging-count { color: var(--green-bright); }
    .hub-aging-bucket.warn  .hub-aging-count { color: #ca8a04; }
    .hub-aging-bucket.late  .hub-aging-count { color: #f97316; }
    .hub-aging-bucket.old   .hub-aging-count { color: var(--red-bright); }
    .hub-aging-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
    .hub-aging-sub   { font-size: 9px; color: var(--text-muted); margin-top: 2px; }
    .hub-agent-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .hub-agent-table th { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px 8px 0; border-bottom: 1px solid var(--border); text-align: left; }
    .hub-agent-table th:not(:first-child) { text-align: right; }
    .hub-agent-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .hub-agent-table tr:last-child td { border-bottom: none; }

    /* Hub Analytics — Period selector */
    .hub-period-section { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
    .hub-period-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
    .hub-period-header .hub-analytics-card-title { margin-bottom: 0; }
    .hub-period-btns { display: flex; gap: 4px; }
    .hub-period-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.15s; }
    .hub-period-btn:hover { background: var(--surface-2); }
    .hub-period-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .hub-period-summary { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; padding: 10px 14px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
    .hub-period-summary strong { color: var(--text); }

    /* Daily volume sparkline chart */
    .hub-vol-chart { display: flex; align-items: flex-end; gap: 3px; height: 80px; padding: 0 2px; overflow: hidden; }
    .hub-vol-chart-labeled { height: 96px; }
    .hub-vol-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; cursor: default; }
    .hub-vol-bar { width: 100%; min-height: 0; background: var(--accent); border-radius: 2px 2px 0 0; transition: opacity 0.15s; opacity: 0.75; }
    .hub-vol-bar-wrap:hover .hub-vol-bar { opacity: 1; }
    .hub-vol-label { font-size: 9px; color: var(--text-muted); white-space: nowrap; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }

    /* Agent stats expanded table */
    .hub-agent-stats-table th, .hub-agent-stats-table td { font-size: 11px; }
    .hub-agent-stats-table td:not(:first-child) { text-align: right; color: var(--text-secondary); }
    .hub-agent-stats-table td:first-child { font-weight: 600; color: var(--text); }
    /* Show-full-message toggle */
    .hub-show-quoted-btn { font-size: 11px; line-height: 1; color: var(--text-muted); background: rgba(255,255,255,0.7); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; }
    .hub-show-quoted-btn:hover { color: var(--text-secondary); border-color: var(--text-muted); background: rgba(255,255,255,0.95); }

    /* Start Return button in thread header */
    .hub-start-return-btn { font-size: 11px; font-weight: 500; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15s; }
    .hub-start-return-btn:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg-hover); }

    /* Return flow modal overlay */
    .hub-return-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
    .hub-return-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); width: 520px; max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
    .hub-return-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .hub-return-modal-hdr h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
    .hub-return-modal-hdr button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; }
    .hub-return-modal-hdr button:hover { color: var(--text); }
    .hub-return-step { padding: 20px; overflow-y: auto; flex: 1; }
    .hub-ret-input { flex: 1; background: var(--bg-input, var(--bg-hover)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; }
    .hub-ret-input:focus { border-color: var(--accent, #6c8ebf); }
    .hub-ret-btn { background: var(--accent, #6c8ebf); border: none; border-radius: var(--radius-sm); color: #fff; font-size: 13px; font-weight: 500; padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s; }
    .hub-ret-btn:hover { opacity: 0.85; }
    .hub-ret-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .hub-ret-btn-ghost { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 8px 16px; cursor: pointer; transition: all 0.15s; }
    .hub-ret-btn-ghost:hover { border-color: var(--text-muted); color: var(--text); }
    /* Order search results */
    .hub-ret-results { display: flex; flex-direction: column; gap: 6px; }
    .hub-ret-order-row { border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; }
    .hub-ret-order-row:hover { border-color: var(--accent, #6c8ebf); background: var(--bg-hover); }
    .hub-ret-order-row strong { font-size: 13px; font-weight: 600; color: var(--text); }
    .hub-ret-order-row span { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
    .hub-ret-order-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
    /* Items step */
    .hub-ret-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .hub-ret-item-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 7px; padding: 10px 14px; cursor: pointer; transition: all 0.15s; }
    .hub-ret-item-row:hover { background: var(--bg-hover); }
    .hub-ret-item-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent, #6c8ebf); cursor: pointer; flex-shrink: 0; }
    .hub-ret-item-row label { font-size: 12px; color: var(--text); cursor: pointer; flex: 1; }
    .hub-ret-item-sku { font-size: 10px; color: var(--text-muted); }
    /* Details step */
    .hub-ret-form { display: flex; flex-direction: column; gap: 12px; }
    .hub-ret-form label { font-size: 11px; color: var(--text-muted); font-weight: 500; display: block; margin-bottom: 4px; }
    .hub-ret-select { width: 100%; background: var(--bg-input, var(--bg-hover)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; }
    .hub-ret-textarea { width: 100%; background: var(--bg-input, var(--bg-hover)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; resize: vertical; min-height: 70px; }
    .hub-ret-btn-row { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; }
    .hub-ret-done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px 0 20px; text-align: center; }
    .hub-ret-done-icon { font-size: 36px; }
    .hub-ret-done h4 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
    .hub-ret-done p { font-size: 12px; color: var(--text-muted); margin: 0; }

    /* Follow-up queue tab badge */
    .hub-fu-badge { background: #e84040; color: #fff; font-size: 9px; font-weight: 700; border-radius: var(--radius); padding: 1px 5px; margin-left: 4px; vertical-align: middle; line-height: 1.4; }

    /* Follow-up full-width panel */
    .hub-fu-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
    .hub-fu-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .hub-fu-title { font-size: 14px; font-weight: 700; color: var(--text); }
    .hub-fu-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
    .hub-fu-actions { display: flex; gap: 8px; align-items: center; }
    .hub-fu-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
    .hub-fu-loading { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 0; }
    .hub-fu-error { color: #e84040; font-size: 12px; padding: 20px 0; text-align: center; }
    .hub-fu-empty { text-align: center; padding: 40px 0; }
    .hub-fu-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
    /* Follow-up main area (replaces thread area) */
    .hub-fu-main-area { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); }
    .hub-fu-empty-center { display: flex; flex-direction: column; align-items: center; }
    /* Follow-up rows */
    .hub-fu-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; transition: border-color 0.15s; }
    .hub-fu-row:hover { border-color: var(--text-muted); }
    .hub-fu-row-due { border-color: #e84040; background: rgba(232,64,64,0.04); }
    .hub-fu-row-left { display: flex; gap: 12px; flex: 1; min-width: 0; }
    .hub-fu-row-date { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; min-width: 50px; padding-top: 2px; }
    .hub-fu-date-due { color: #e84040; }
    .hub-fu-row-content { flex: 1; min-width: 0; }
    .hub-fu-row-subject { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-fu-row-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; }
    .hub-fu-email { font-style: italic; }
    .hub-fu-row-reason { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hub-fu-row-btns { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
    .hub-fu-open-btn, .hub-fu-done-btn { font-size: 11px; padding: 4px 10px; }

    /* Toast notification */
    .hub-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 20px; font-size: 13px; color: var(--text); box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: var(--z-toast); opacity: 0; transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
    .hub-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ─── Shared UI Components ────────────────────────────────────────────── */
    .btn-primary { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.82rem; transition: opacity 0.15s; }
    .btn-primary:hover { opacity: 0.85; }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
    .analytics-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th, .data-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
    .data-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }

    /* ─── Pinterest Campaign Wizard ───────────────────────────────────────── */
    .pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; padding: 4px; }
    .pin-card { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
    .pin-card:hover { border-color: var(--text-dim); }
    .pin-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
    .pin-card-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-1); }
    .pin-card-body { padding: 8px; }
    .pin-card-title { font-size: 0.75rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
    .pin-card-metrics { display: flex; gap: 8px; font-size: 0.65rem; color: var(--text-dim); }
    .pin-card-metric { display: flex; align-items: center; gap: 2px; }
    .wizard-step { margin-bottom: 20px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
    .wizard-step-header { font-size: 0.82rem; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
    .wizard-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
    .wizard-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    .wizard-toggle-btn { padding: 6px 14px; font-size: 0.75rem; border: none; background: none; cursor: pointer; color: var(--text-dim); transition: all 0.15s; }
    .wizard-toggle-btn.active { background: var(--accent); color: var(--bg); font-weight: 600; }
    .wizard-summary { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; font-size: 0.78rem; }
    .wizard-summary-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
    .wizard-summary-row:last-child { border-bottom: none; }
    .wizard-summary-label { color: var(--text-dim); }

    /* ─── Finance Tabs ─────────────────────────────────────────────────────── */
    .fin-loading-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 40px auto; }

    /* Income tab */
    .fin-income-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
    @media (max-width: 1200px) { .fin-income-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 700px)  { .fin-income-grid { grid-template-columns: 1fr; } }
    .fin-income-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
    .fin-card-accent { border-color: var(--accent); }
    .fin-card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
    .fin-card-gross { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
    .fin-card-meta { font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
    .fin-deductions { border-top: 1px solid var(--border); padding-top: 8px; margin-bottom: 8px; }
    .fin-deduction-row { display: flex; align-items: baseline; gap: 4px; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .fin-deduct-label { flex: 1; }
    .fin-deduct-note { font-size: 10px; color: var(--text-dim); }
    .fin-deduct-value { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .fin-net-line { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; }
    .fin-net-value { font-size: 15px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
    .fin-chart-container { margin-bottom: 16px; }
    .fin-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .fin-summary-table th { padding: 8px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); }
    .fin-summary-table td { padding: 8px 16px; border-bottom: 1px solid var(--border-subtle, var(--border)); }
    .fin-deduct-tr td { color: var(--text-muted); font-size: 12px; }
    .fin-total-tr td { border-top: 2px solid var(--border); padding-top: 10px; }
    .fin-disclaimer { font-size: 11px; color: var(--text-dim); padding: 8px 16px; font-style: italic; }
    .tar { text-align: right; }

    /* Expenses tab */
    .fin-exp-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
    @media (max-width: 900px) { .fin-exp-layout { grid-template-columns: 1fr; } }
    .fin-exp-form-col { display: flex; flex-direction: column; gap: 0; }
    .fin-exp-form-card { flex-shrink: 0; }
    .fin-form-body { padding: 16px; }
    .fin-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .fin-form-row label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
    .fin-input { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; color: var(--text); width: 100%; box-sizing: border-box; }
    .fin-input:focus { outline: none; border-color: var(--accent); }
    .fin-select { cursor: pointer; }
    .fin-save-btn { width: 100%; padding: 9px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 4px; }
    .fin-save-btn:hover { opacity: 0.88; }
    .fin-cat-chart { padding: 16px; }
    .fin-cat-bars { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
    .fin-cat-row { display: grid; grid-template-columns: 130px 1fr 80px; align-items: center; gap: 8px; font-size: 12px; }
    .fin-cat-name { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fin-cat-bar-wrap { background: var(--bg); border-radius: 3px; height: 6px; overflow: hidden; }
    .fin-cat-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; }
    .fin-cat-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
    .fin-cat-total { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); text-align: right; }
    .fin-exp-total-badge { background: rgba(var(--accent-rgb, 99,102,241), 0.12); color: var(--accent); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
    .fin-empty-expenses { text-align: center; padding: 40px 16px; color: var(--text-muted); font-size: 13px; }
    .fin-cat-tag { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 11px; white-space: nowrap; }
    .fin-del-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); font-size: 12px; }
    .fin-del-btn:hover { color: #e84040; background: rgba(232,64,64,0.08); }

    /* P&L tab */
    .fin-pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    @media (max-width: 1200px) { .fin-pl-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 700px)  { .fin-pl-grid { grid-template-columns: 1fr; } }
    .fin-pl-card { padding: 0; overflow: hidden; }
    .fin-pl-period-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 14px 8px; border-bottom: 1px solid var(--border); }
    .fin-pl-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .fin-pl-section-hdr td { font-size: 9px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 14px 4px; background: rgba(0,0,0,0.03); }
    .fin-pl-row td { padding: 5px 14px; border-bottom: 1px solid rgba(var(--border-rgb, 255,255,255), 0.04); color: var(--text-muted); }
    .fin-pl-total td { padding: 7px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(0,0,0,0.02); }
    .fin-pl-indent { padding-left: 24px !important; font-size: 11px !important; color: var(--text-dim) !important; }
    .fin-pl-margins { display: flex; justify-content: space-between; padding: 10px 14px 12px; font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--border); gap: 8px; flex-wrap: wrap; }

    /* HR Tab */
    .hr-payroll-banner { display: flex; align-items: center; gap: 12px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13px; }
    .hr-payroll-banner-urgent { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); }
    .hr-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .hr-banner-body strong { font-weight: 700; }
    .hr-payroll-action-btn { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
    .hr-summary-body { padding: 12px 16px; }
    .hr-summary-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
    .hr-summary-row:last-child { border-bottom: none; }
    .hr-summary-note span:first-child { color: var(--text-muted); font-size: 12px; }
    .hr-emp-name { font-weight: 500; }
    .hr-badge-inactive { display: inline-block; font-size: 10px; font-weight: 600; background: rgba(156,163,175,0.15); color: var(--text-dim); border-radius: var(--radius-sm); padding: 1px 5px; margin-left: 4px; vertical-align: middle; }
    .hr-row-inactive td { opacity: 0.55; }
    .hr-edit-btn { font-size: 11px; padding: 2px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); margin-right: 4px; }
    .hr-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
    .hr-toggle-btn { font-size: 11px; padding: 2px 7px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); margin-right: 4px; }
    .hr-toggle-btn:hover { color: var(--yellow); border-color: var(--yellow); }
    .hr-edit-row td { background: rgba(var(--accent-rgb,99,102,241),0.04); }
    .hr-inline-input { padding: 3px 6px; font-size: 12px; width: 120px; }
    .hr-total-row td { font-weight: 600; border-top: 2px solid var(--border); padding: 8px 14px !important; background: var(--bg-card); }
    /* HR in Morning Brief */
    .mb-hr-reminder { border-color: rgba(245,158,11,0.4); }
    .mb-hr-body { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; }
    .mb-hr-stat { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
    .mb-hr-detail { flex: 1; display: flex; flex-direction: column; gap: 8px; }
    .mb-hr-warning { font-size: 13px; font-weight: 600; }
    .mb-hr-emp-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .mb-hr-emp-chip { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-size: 11px; color: var(--text-muted); }
    .mb-hr-done { font-size: 12px; color: var(--green); }
    .mb-hr-action-btn { font-size: 12px; padding: 5px 12px; }

    /* User Management */
    .um-form-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
    .um-input-name { width: 180px; }
    .um-input-role { width: 140px; }
    .um-input-pin { width: 120px; }
    .um-name-td { font-weight: 600; }
    .um-pin-dash { font-style: italic; letter-spacing: normal; }
    .um-pin-dots { letter-spacing: 2px; color: var(--text-muted); }
    .um-pin-eye { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 13px; padding: 0 2px; opacity: 0.5; transition: opacity 0.15s; line-height: 1; margin-left: 4px; vertical-align: middle; }
    .um-pin-eye:hover, .um-pin-eye-active { opacity: 1; color: var(--text); }
    .um-pill-disabled { background: var(--surface-3); color: var(--text-muted); }
    .um-portal-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .um-portal-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
    .um-portal-url { font-size: 13px; color: var(--text); flex: 1; min-width: 200px; }
    .um-portal-copy-btn { background: var(--accent-dim); color: var(--text); border: none; border-radius: var(--radius-sm); padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
    .um-portal-copy-btn:hover { background: var(--accent); color: #000; }

    /* Locations Directory */
    .ldir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 8px; }
    .ldir-loc-card { cursor: pointer; border: 1px solid var(--border); transition: border-color 0.15s, background 0.15s; }
    .ldir-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .ldir-loc-name { font-size: 16px; font-weight: 600; color: var(--text); }
    .ldir-type-badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: var(--radius-sm); }
    .ldir-location { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
    .ldir-stats-row { display: flex; gap: 16px; font-size: 13px; }
    .ldir-eta { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

    /* Fulfillment */
    .ful-th-cb { width: 36px; text-align: center; }
    .ful-th-notes { width: 40px; }
    .ful-th-ship { width: 50px; }
    .ful-item-row { cursor: pointer; }
    .ful-td-cb { width: 36px; min-width: 36px; max-width: 36px; text-align: center; box-sizing: border-box; }
    .ful-tpb-badge { background: rgba(34, 197, 94, 0.12); color: var(--green); }
    .ful-product-td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .ful-variant { color: var(--text); font-size: 11px; }
    .ful-customer-td { max-width: 130px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
    .ful-customer-td.is-clickable { cursor: pointer; }
    .ful-customer-td.is-clickable:hover { color: var(--accent); }
    .ful-shipto-td { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ful-tracking-td { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ful-selected-label { font-size: 12px; color: var(--text-muted); }
    /* Tracking status pills */
    .pill.trk-not-made      { background: rgba(255,255,255,0.06); color: var(--text-dim); }
    .pill.trk-not-live      { background: rgba(251,146,60,0.15); color: #fb923c; }
    .pill.trk-label-created { background: rgba(245,158,11,0.18); color: #f59e0b; }
    .pill.trk-in-transit    { background: rgba(59,130,246,0.15); color: #60a5fa; }
    .pill.trk-out-delivery  { background: rgba(168,85,247,0.15); color: #c084fc; font-weight: 600; }
    .pill.trk-issue         { background: rgba(239,68,68,0.18); color: #f87171; font-weight: 700; letter-spacing: 0.04em; }
    .pill.trk-delivered     { background: rgba(34,197,94,0.15); color: #4ade80; }
    .pill.trk-cancelled     { background: rgba(255,255,255,0.06); color: var(--text-dim); }
    .pill.trk-picked        { background: rgba(251,191,36,0.18); color: #fbbf24; }
    .pill.pill-hold         { background: rgba(239,68,68,0.18); color: #f87171; font-weight: 700; letter-spacing: 0.04em; }
    .pill.pill-click        { cursor: pointer; border: none; }
    .pill.pill-click:hover  { filter: brightness(1.1); }
    .action-btn.action-btn-dim { opacity: 0.55; }
    .action-btn.action-btn-dim:hover { opacity: 1; }
    /* Lifecycle filter group */
    .lf-filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .fb-count { font-size: 0.8em; opacity: 0.65; margin-left: 3px; }
    .stat-card-active { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }

    /* Pro Tag Series */
    .pts-add-btn { background: var(--accent); color: var(--bg); }
    .pts-hidden { display: none; }
    .pts-series-row { cursor: pointer; }
    .pts-name-td { font-weight: 500; }
    .pts-desc-td { font-size: 11px; color: var(--text-dim); max-width: 300px; }
    .pts-edit-btn { background: none; border: none; color: var(--text); cursor: pointer; font-size: 11px; }
    .pts-del-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; }
    .pts-empty-td { text-align: center; padding: 40px; }
    /* Collections */
    .coll-thumb { height: 20px; border-radius: 3px; vertical-align: middle; margin-left: 4px; }
    /* Products */
    .prod-th-right { text-align: right; }
    .prod-badge-sm { font-size: 10px; padding: 1px 5px; }
    .prod-badge-tpb { font-size: 10px; padding: 1px 5px; background: rgba(34,197,94,0.12); color: var(--green); }
    .prod-title-td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
    .prod-variant-name { color: var(--text); font-size: 11px; }
    .prod-num-td { text-align: right; }
    /* MTO */
    .mto-th-notes { width: 40px; }
    .mto-row { cursor: pointer; }
    .mto-product-td { max-width: 220px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
    .mto-customer-td { max-width: 130px; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
    .mto-customer-td.is-clickable { cursor: pointer; }
    .mto-customer-td.is-clickable:hover { color: var(--accent); }
    /* Containers */
    .con-row { cursor: pointer; }
    .con-code-link { text-decoration: underline; text-underline-offset: 3px; }
    .con-empty-td { text-align: center; padding: 40px; }
    /* Global utilities */
    .shell-search-btn { gap: 6px; display: flex; align-items: center; }
    .shell-kbd { opacity: 0.5; font-size: 10px; font-family: var(--font-mono); }
    .access-denied { padding: 80px 0; text-align: center; }
    .access-denied-icon { font-size: 48px; margin-bottom: 16px; }
    .access-denied-msg { color: var(--text-muted); font-size: 14px; }
    .pill-unknown { background: var(--surface-2); color: var(--text-muted); }
    .date-sep { color: var(--text-dim); font-size: 11px; }
    .date-apply { background: var(--accent); color: var(--bg); }
    .search-loading { padding: 20px; }
    .spinner-center { margin: 0 auto; }
    .input-full { width: 100%; }
    .form-label-sm { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
    /* Modals + Editors + Loaders */
    /* Modal widths use min(W, 96vw) so they shrink on narrow phones
       instead of overflowing the viewport. (Mobile audit 2026-04-30.) */
    .modal-480 { width: min(480px, 96vw); padding: 24px; }
    .modal-420 { width: min(420px, 96vw); }
    .modal-380 { width: min(380px, 96vw); }
    .modal-320 { width: min(320px, 96vw); }
    .modal-title { font-size: 16px; font-weight: 600; }
    .modal-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
    .modal-body-col { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
    .modal-body-col-lg { display: flex; flex-direction: column; gap: 16px; }
    .modal-body-pad { padding: 20px; }
    .modal-h2 { font-size: 18px; font-weight: 600; }
    .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
    .manage-form-col { flex-direction: column; align-items: stretch; }
    .warning-notice { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--yellow-dim); border-radius: var(--radius-sm); font-size: 12px; color: var(--yellow); }
    .note-close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; }
    .note-footer-hint { font-size: 10px; }
    .ticket-loader { padding: 8px; font-size: 11px; color: var(--text-dim); }
    .ticket-load-error { padding: 8px; font-size: 11px; color: var(--red); }
    /* Pick List + User Mgmt */
    .text-center { text-align: center; }
    .icon-lg { font-size: 48px; }
    .pl-empty { padding: 60px 0; }
    .pl-empty-msg { font-size: 15px; color: var(--text-muted); margin-top: 12px; }
    .pl-create-btn { margin-top: 16px; padding: 10px 24px; background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; }
    .warning-box { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); border-radius: var(--radius-sm); padding: 12px; }
    .warning-box-title { font-size: 13px; font-weight: 600; color: var(--red); margin-bottom: 6px; }
    .scroll-table-sm { max-height: 250px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .cpl-table { font-size: 12px; }
    .cpl-confirm-btn { padding: 12px; background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; }

    /* Locations + Shelves + Scan + Warehouse */
    .breadcrumb-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
    .breadcrumb-back { cursor: pointer; color: var(--text-muted); font-size: 14px; }
    .breadcrumb-sep { color: var(--border); }
    .breadcrumb-cur { font-size: 14px; color: var(--text-muted); }
    .breadcrumb-heading { margin: 0; font-size: 20px; }
    .tabs-mb { margin-bottom: 16px; }
    .transfer-from-label { margin-bottom: 12px; color: var(--text-muted); }
    .mt-8 { margin-top: 8px; }
    .scan-history-title { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
    .scan-shelf-label { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
    .manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .btn-danger { background: var(--red); }
    .activity-scroll { max-height: 500px; overflow-y: auto; }
    .table-sm { font-size: 12px; }
    .td-nowrap { white-space: nowrap; }
    .empty-td { text-align: center; padding: 40px; }
    .wh-footer { padding: 12px 16px; color: var(--text-muted); font-size: 12px; }

    /* Activity Feed + Overview + Labels + Expansions + ProTag Form */
    .card-flush { padding: 0; }
    .overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .panel-header { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 13px; font-weight: 600; }
    .expansion-td { padding: 12px 24px; background: var(--surface); }
    .expansion-header { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
    .expansion-tag { display: inline-block; padding: 3px 10px; margin: 2px; border-radius: var(--radius-sm); background: var(--surface-hover); font-size: 11px; }
    .expansion-tag-mono { display: inline-block; padding: 3px 10px; margin: 2px; border-radius: var(--radius-sm); background: var(--surface-hover); font-size: 11px; font-family: var(--font-mono); }
    .dim-xs { color: var(--text-dim); font-size: 11px; }
    .pts-add-form { margin-bottom: 16px; padding: 16px; }
    .pts-form-grid { display: grid; grid-template-columns: 1fr 2fr 2fr auto; gap: 8px; align-items: end; }
    .pts-form-label { font-size: 11px; color: var(--text-dim); }
    .pts-form-input { width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; font-size: 12px; }
    .flex-gap-4 { display: flex; gap: 4px; }
    .pts-submit-btn { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; cursor: pointer; }
    .pts-cancel-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; cursor: pointer; }
    .input-upper { text-transform: uppercase; }

    /* Final Static Cleanup */
    .svg-responsive { width: 100%; height: auto; display: block; }
    .td-borderless { padding: 0; border: none; }
    .ticket-empty { font-size: 11px; padding: 8px 0; }
    .pill-sm { font-size: 11px; }
    .pill-lg { font-size: 13px; }
    .ml-auto { margin-left: auto; }
    .mt-12 { margin-top: 12px; }
    .mt-16 { margin-top: 16px; }
    .ml-8 { margin-left: 8px; }
    .td-right { text-align: right; }
    .empty-td-sm { text-align: center; padding: 32px; }
    .shimmer-h { height: 40px; }
    .opacity-50 { opacity: 0.5; }
    .note-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
    .issues-heading { font-size: 13px; color: var(--red); margin-bottom: 8px; }
    .issue-item { padding: 8px 12px; background: var(--red-dim); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12px; }
    .mto-stage-hint { color: var(--text); font-size: 10px; }
    .mono-xs { font-size: 11px; }
    .mono-xxs { font-size: 10px; }
    .sp-history-meta { display: flex; gap: 16px; padding: 0 16px 12px; font-size: 10px; color: var(--text-dim); }
    .error-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
    .pl-progress-label { font-size: 13px; color: var(--text); font-weight: 500; }
    .order-note-text { font-size: 12px; padding: 6px 10px; background: var(--surface); border-radius: var(--radius-sm); white-space: pre-wrap; }
  /* ─── Marketing Module: API Status Banner ─── */
  .mo-status-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; }
  .mo-status-grid { display: flex; flex-direction: column; gap: 8px; }
  .mo-status-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-sm); }
  .mo-status-degraded { background: rgba(239,68,68,0.07); border: 1px solid rgba(239,68,68,0.2); }
  .mo-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .mo-status-dot.degraded { background: var(--red); box-shadow: 0 0 6px var(--red-dim); animation: pulse-red 2s infinite; }
  .mo-status-dot.ok { background: #22c55e; }
  @keyframes pulse-red { 0%,100% { box-shadow: 0 0 4px rgba(239,68,68,0.4); } 50% { box-shadow: 0 0 10px rgba(239,68,68,0.8); } }
  .mo-status-info { flex: 1; }
  .mo-status-name { font-size: 13px; font-weight: 500; }
  .mo-status-detail { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
  .mo-reconnect-btn { padding: 4px 12px; font-size: 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent); color: var(--text); background: transparent; cursor: pointer; white-space: nowrap; }
  .mo-reconnect-btn:hover { background: var(--accent); color: #000; }
  .mo-reconnect-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
  .mo-reconnect-step { display: flex; gap: 12px; align-items: flex-start; }
  .mo-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #000; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .mo-step-title { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .mo-step-detail { font-size: 12px; color: var(--text-muted); }
  .mo-step-detail code { background: var(--surface-raised, rgba(255,255,255,0.06)); padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
  .mo-reconnect-note { font-size: 12px; color: var(--text-muted); padding: 10px 14px; background: var(--surface-raised, rgba(255,255,255,0.04)); border-radius: var(--radius-sm); margin-bottom: 8px; line-height: 1.5; }
  /* ─── WJS Import Section in Labels ─── */
  .wjs-import-zone { border: 2px dashed var(--border); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; position: relative; }
  .wjs-import-zone:hover, .wjs-import-zone.drag-over { border-color: var(--text); background: rgba(var(--accent-rgb, 250,204,21), 0.04); }
  .wjs-import-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .wjs-import-icon { font-size: 28px; margin-bottom: 8px; }
  .wjs-import-label { font-size: 13px; color: var(--text-muted); }
  .wjs-import-label strong { color: var(--text); }
  .wjs-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
  .wjs-preview-table th { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-muted); text-transform: uppercase; }
  .wjs-preview-table td { padding: 5px 10px; border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05)); }
  .wjs-badge-new { background: rgba(34,197,94,0.15); color: var(--green-bright); padding: 2px 7px; border-radius: var(--radius); font-size: 11px; font-weight: 500; }
  .wjs-badge-skip { background: rgba(255,255,255,0.08); color: var(--text-muted); padding: 2px 7px; border-radius: var(--radius); font-size: 11px; }
  .wjs-import-summary { display: flex; gap: 16px; padding: 12px 0; font-size: 13px; }
  .wjs-import-summary .wjs-sum-item { display: flex; align-items: center; gap: 6px; }
  .wjs-import-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .wjs-run-btn { padding: 8px 20px; background: var(--accent); color: #000; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; }
  .wjs-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .wjs-clear-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 12px; }
  /* ─── Returns: New elements ─── */
  .ret-pill-defective { background: var(--red-dim); color: var(--red); padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 500; }
  .ret-pill-resaleable { background: rgba(34,197,94,0.12); color: var(--green-bright); padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 500; }
  .ret-btn-label { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-sm); border: 1px solid var(--accent); color: var(--text); background: transparent; cursor: pointer; white-space: nowrap; }
  .ret-btn-label:hover { background: var(--accent); color: #000; }
  .ret-btn-close { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-sm); border: 1px solid #a78bfa; color: #a78bfa; background: transparent; cursor: pointer; white-space: nowrap; }
  .ret-btn-close:hover { background: #a78bfa; color: #000; }
  .btn-sm { padding: 3px 8px; font-size: 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--text); }
  .btn-sm:hover { background: var(--surface-raised, rgba(255,255,255,0.06)); }
  .ret-label-addr-block { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; }

/* ─── AI Assistant Widget ─── */

    /* Floating button */
    #assistantBtn {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--accent);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      z-index: var(--z-modal-content); /* must float above modal overlays; was var(--z-modal):1000 which rendered under overlays */
      transition: transform 0.2s, background 0.2s;
    }
    #assistantBtn:hover, #assistantBtn:focus-visible { transform: scale(1.08); background: var(--accent-hover, #5a7fff); outline: 2px solid var(--accent, #6366f1); outline-offset: 2px; }
    #assistantBtn.open { background: var(--surface-3); }

    /* Chat panel */
    #assistantPanel {
      position: fixed;
      bottom: 84px;
      right: 24px;
      width: 360px;
      max-height: 520px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      display: flex;
      flex-direction: column;
      z-index: var(--z-modal);
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      overflow: hidden;
      transform: scale(0.95) translateY(8px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.2s, opacity 0.2s;
    }
    #assistantPanel.open {
      transform: scale(1) translateY(0);
      opacity: 1;
      pointer-events: all;
    }

    /* Header */
    .asst-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .asst-header-icon { font-size: 16px; }
    .asst-header-title { font-size: 13px; font-weight: 600; flex: 1; }
    .asst-header-sub { font-size: 10px; color: var(--text-dim); }
    .asst-clear-btn {
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: 11px;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      transition: color 0.15s;
    }
    .asst-clear-btn:hover { color: var(--text-muted); }

    /* Message thread */
    .asst-messages {
      flex: 1;
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      scroll-behavior: smooth;
    }
    .asst-msg {
      max-width: 88%;
      padding: 8px 11px;
      border-radius: var(--radius);
      font-size: 12.5px;
      line-height: 1.5;
      word-break: break-word;
    }
    .asst-msg.user {
      background: var(--accent);
      color: #fff;
      align-self: flex-end;
      border-bottom-right-radius: 3px;
    }
    .asst-msg.assistant {
      background: var(--surface-2);
      color: var(--text);
      align-self: flex-start;
      border-bottom-left-radius: 3px;
    }
    .asst-msg.assistant p { margin: 0 0 6px 0; }
    .asst-msg.assistant p:last-child { margin-bottom: 0; }
    .asst-msg.assistant ul, .asst-msg.assistant ol {
      margin: 4px 0 4px 16px;
      padding: 0;
    }
    .asst-msg.assistant li { margin-bottom: 2px; }
    .asst-msg.assistant code {
      background: var(--surface-3);
      padding: 1px 4px;
      border-radius: 3px;
      font-size: 11px;
    }
    .asst-msg.assistant strong { color: var(--text); }
    .asst-typing {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 12px;
      background: var(--surface-2);
      border-radius: var(--radius);
      border-bottom-left-radius: 3px;
      align-self: flex-start;
    }
    .asst-typing span {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--text-dim);
      animation: asstBounce 1s infinite;
    }
    .asst-typing span:nth-child(2) { animation-delay: 0.15s; }
    .asst-typing span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes asstBounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-4px); }
    }
    .asst-empty {
      color: var(--text-dim);
      font-size: 12px;
      text-align: center;
      padding: 24px 12px;
      line-height: 1.7;
    }
    .asst-suggestion-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      padding: 4px 0;
      justify-content: center;
    }
    .asst-pill {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 4px 10px;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      transition: border-color 0.15s, color 0.15s;
    }
    .asst-pill:hover { border-color: var(--text); color: var(--text); }

    /* Input area */
    .asst-input-row {
      display: flex;
      gap: 7px;
      padding: 10px 14px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    #assistantInput {
      flex: 1;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-size: 12.5px;
      padding: 7px 10px;
      resize: none;
      outline: none;
      height: 36px;
      max-height: 96px;
      overflow-y: auto;
      transition: border-color 0.15s;
      font-family: inherit;
    }
    #assistantInput:focus { border-color: var(--text); }
    #assistantInput::placeholder { color: var(--text-dim); }
    #assistantSend {
      background: var(--accent);
      border: none;
      border-radius: var(--radius);
      color: #fff;
      padding: 0 12px;
      cursor: pointer;
      font-size: 14px;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    #assistantSend:hover { background: var(--accent-hover, #5a7fff); }
    #assistantSend:disabled { opacity: 0.4; cursor: not-allowed; }

    @media (max-width: 480px) {
      #assistantPanel { width: calc(100vw - 32px); right: 16px; max-height: calc(100dvh - 100px); }
      #assistantBtn { bottom: 16px; right: 16px; }
    }

/* ── Action Items Kanban Board ── */
.ai2-board { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:start; }
@media(max-width:900px) { .ai2-board { grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px) { .ai2-board { grid-template-columns:1fr; } }
.ai2-col { background:var(--bg-secondary); border-radius:var(--radius); min-height:200px; transition:background 0.15s, box-shadow 0.15s; }
.ai2-col.ai2-col-over { background:color-mix(in srgb, var(--accent) 12%, var(--bg-secondary)); box-shadow:inset 0 0 0 2px var(--accent); }
.ai2-col-header { padding:10px 14px; font-size:13px; font-weight:600; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
.ai2-col-count { margin-left:auto; font-size:11px; background:var(--border); border-radius:var(--radius); padding:1px 7px; font-weight:500; }
.ai2-col-body { padding:8px; display:flex; flex-direction:column; gap:6px; }
.ai2-col-empty { padding:24px 12px; text-align:center; color:var(--text-muted); font-size:12px; border:1px dashed var(--border); border-radius:var(--radius-sm); }
.ai2-card { background:var(--bg-primary,var(--bg)); border-radius:var(--radius-sm); padding:10px 12px; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:box-shadow 0.15s, opacity 0.15s; user-select:none; }
.ai2-card:hover { box-shadow:0 3px 8px rgba(0,0,0,.14); }
.ai2-card-title { font-size:13px; font-weight:600; margin-bottom:6px; line-height:1.4; }
.ai2-card-meta { display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:6px; flex-wrap:wrap; }
.ai2-card-due { color:var(--text-muted); }
.ai2-priority-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ai2-card-actions { margin-top:6px; }
.ai2-card-sel { font-size:11px; padding:2px 6px; }

/* ── Action Items List view ── */
.ai2-row { transition:background 0.1s; }
.ai2-row:hover { background:var(--bg-secondary); }
.ai2-row-done td { opacity:0.55; }
.ai2-title-td { display:flex; align-items:center; gap:4px; }
.ai-expand-btn { cursor:pointer; color:var(--text-muted); display:inline-flex; align-items:center; flex-shrink:0; }
.ai-expand-btn:hover { color:var(--text-primary); }
.ai2-assignee-name { font-size:12px; }
.ai2-avatar { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.ai2-priority-pill { font-size:10px; font-weight:600; padding:1px 7px; border-radius:var(--radius); }
.ai2-cat-pill { font-size:11px; color:var(--text-muted); background:var(--bg-secondary); border-radius:var(--radius); padding:1px 8px; }
.ai2-due-badge { font-size:11px; font-weight:600; padding:1px 7px; border-radius:var(--radius); }
.ai2-quick-add { display:flex; align-items:center; gap:8px; padding:10px; background:var(--bg-secondary); border-radius:var(--radius); flex-wrap:wrap; margin-bottom:8px; }
.ai2-qa-title { flex:1; min-width:200px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-primary,var(--bg)); color:var(--text-primary); font-size:13px; }
.ai2-qa-cancel { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; }
.ai2-empty { display:flex; flex-direction:column; align-items:center; gap:8px; padding:48px; color:var(--text-muted); }
.ai2-subtask-progress { height:3px; background:var(--border); border-radius:2px; overflow:hidden; flex:1; }
.ai2-subtask-fill { height:100%; background:var(--accent); border-radius:2px; }
.ai2-subtask-count { font-size:10px; color:var(--text-muted); }
.ai2-group-header { font-size:12px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; padding:6px 0; border-bottom:1px solid var(--border); margin-bottom:8px; }

/* ── Reorder Recs selected row ── */
.sr-row-selected { background:color-mix(in srgb, var(--accent) 8%, transparent) !important; }
.sr-supplier-chip { padding:1px 6px; background:var(--bg-secondary); border-radius:var(--radius); font-size:11px; transition:background 0.1s; }
.sr-supplier-chip:hover { background:color-mix(in srgb, var(--accent) 15%, var(--bg-secondary)); }

/* ═══════════════════════════════════════════════════════════════════════
   Jarvis Intelligence CSS — merged from 16 worktrees
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Jarvis Logistics Intelligence Panel ─── */
.jarvis-logistics-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 20px;
  overflow: hidden;
}
.jarvis-logistics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.jarvis-logistics-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-logistics-icon {
  font-size: 15px;
  color: var(--accent);
}
.jarvis-logistics-body {
  padding: 16px;
}
.jarvis-logistics-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.jarvis-lstat {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}
.jarvis-lstat-value {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.2;
}
.jarvis-lstat-value.red { color: var(--red); }
.jarvis-lstat-value.green { color: var(--green); }
.jarvis-lstat-value.yellow { color: var(--yellow); }
.jarvis-lstat-value.blue { color: var(--blue); }
.jarvis-lstat-value.accent { color: var(--accent); }
.jarvis-lstat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.jarvis-logistics-recs {
  margin-bottom: 16px;
}
.jarvis-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.jarvis-rec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 4px;
}
.jarvis-rec-icon {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.4;
}
.jarvis-logistics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .jarvis-logistics-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.jarvis-logistics-section {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 12px;
  overflow: hidden;
}
.jarvis-logistics-section .jarvis-section-label {
  margin-bottom: 8px;
}
.jarvis-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.jarvis-mini-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.jarvis-mini-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.jarvis-mini-table tr:last-child td { border-bottom: none; }
.container-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.container-status.overdue { background: var(--red-dim); color: var(--red); }
.container-status.arriving { background: var(--yellow-dim); color: var(--yellow); }
.container-status.on-track { background: var(--green-dim); color: var(--green); }
.container-status.delivered { background: var(--emerald-dim); color: var(--emerald); }
.container-status.unknown { background: var(--surface-3); color: var(--text-dim); }
.mto-risk-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mto-risk-badge.critical { background: var(--red-dim); color: var(--red); }
.mto-risk-badge.high { background: var(--yellow-dim); color: var(--yellow); }
.mto-risk-badge.elevated { background: var(--blue-dim); color: var(--blue); }
.mto-risk-badge.normal { background: var(--green-dim); color: var(--green); }

/* ─── Jarvis Customer Risk Intelligence ─── */
.jarvis-customer-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.jarvis-customer-panel .jcp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jarvis-customer-panel .jcp-title {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jarvis-customer-panel .jcp-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}
.jcp-summary-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.jcp-summary-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  min-width: 100px;
}
.jcp-summary-card .jcp-count {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.jcp-summary-card.churn { background: var(--red-dim); color: var(--red); }
.jcp-summary-card.escalation { background: var(--yellow-dim); color: var(--yellow); }
.jcp-summary-card.vip { background: rgba(212, 175, 55, 0.1); color: #b8860b; }
.jcp-summary-card.new { background: var(--blue-dim); color: var(--blue); }
.jcp-profiles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.jcp-profile-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--border);
  transition: background 0.15s;
}
.jcp-profile-card:hover { background: var(--surface-3); }
.jcp-profile-card.churn { border-left-color: var(--red); }
.jcp-profile-card.escalation { border-left-color: var(--yellow); }
.jcp-profile-card.vip { border-left-color: #d4af37; }
.jcp-profile-card.new { border-left-color: var(--blue); }
.jcp-profile-info { flex: 1; min-width: 0; }
.jcp-profile-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jcp-profile-email {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jcp-profile-story {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.jcp-profile-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.jcp-profile-meta span {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 3px;
}
.jcp-profile-rec {
  font-size: 10.5px;
  color: var(--text);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}
.customer-risk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.customer-risk.churn { background: var(--red-dim); color: var(--red); }
.customer-risk.escalation { background: var(--yellow-dim); color: var(--yellow); }
.customer-risk.vip { background: rgba(212, 175, 55, 0.1); color: #b8860b; }
.customer-risk.new { background: var(--blue-dim); color: var(--blue); }

/* ─── VIP Tier Badges ─── */
.vip-tier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  vertical-align: middle;
}
.vip-tier-platinum {
  background: rgba(147, 112, 219, 0.15);
  color: #9b59b6;
  border: 1px solid rgba(147, 112, 219, 0.3);
}
.vip-tier-gold {
  background: rgba(212, 175, 55, 0.15);
  color: #b8860b;
  border: 1px solid rgba(212, 175, 55, 0.3);
}
.vip-tier-silver {
  background: rgba(160, 160, 160, 0.12);
  color: #888;
  border: 1px solid rgba(160, 160, 160, 0.25);
}

/* ─── VIP Summary Cards in Intelligence Panel ─── */
.jcp-summary-card.vip-platinum { background: rgba(147, 112, 219, 0.1); color: #9b59b6; }
.jcp-summary-card.vip-gold { background: rgba(212, 175, 55, 0.1); color: #b8860b; }
.jcp-summary-card.vip-at-risk { background: var(--red-dim); color: var(--red); }

/* ─── VIP Outreach Panel ─── */
.vip-outreach-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.vip-outreach-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.vip-outreach-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vip-outreach-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.vip-outreach-list {
  display: flex;
  flex-direction: column;
}
.vip-outreach-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s;
}
.vip-outreach-row:last-child { border-bottom: none; }
.vip-outreach-row:hover { background: var(--surface-2); }
.vip-outreach-identity { flex: 1; min-width: 0; }
.vip-outreach-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vip-outreach-email {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.vip-outreach-flags {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.vip-outreach-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
}
.vip-outreach-flag.churn { background: var(--red-dim); color: var(--red); }
.vip-outreach-flag.return { background: var(--yellow-dim); color: var(--yellow); }
.vip-outreach-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.vip-outreach-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─── Listing Generator Modal ─── */
.listing-generator-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: lgm-fade-in 0.15s ease;
}
@keyframes lgm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.listing-generator-panel {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 780px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  animation: lgm-slide-up 0.2s ease;
}
@keyframes lgm-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.listing-gen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.listing-gen-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.listing-gen-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.listing-gen-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.listing-gen-close:hover, .listing-gen-close:focus-visible { background: var(--surface-2); color: var(--text); }
.listing-gen-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.listing-gen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  gap: 16px;
}
.listing-gen-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: lgm-spin 0.8s linear infinite;
}
@keyframes lgm-spin { to { transform: rotate(360deg); } }
.listing-gen-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.listing-gen-loading-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.listing-gen-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  text-align: center;
  gap: 8px;
}
.listing-gen-error-icon { color: var(--red); }
.listing-gen-error-text { font-size: 14px; font-weight: 600; color: var(--text); }
.listing-gen-error-detail { font-size: 12px; color: var(--text-muted); max-width: 400px; }
.listing-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.listing-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.listing-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listing-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.listing-field-value {
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  line-height: 1.6;
  word-break: break-word;
}
.listing-field-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -2px;
}
.listing-desc-preview {
  font-size: 13px;
  line-height: 1.7;
}
.listing-desc-preview p { margin-bottom: 12px; }
.listing-desc-preview strong { font-weight: 600; }
.listing-fields-row {
  display: flex;
  gap: 16px;
}
@media (max-width: 640px) {
  .listing-fields-row { flex-direction: column; }
}
.listing-copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.listing-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
.listing-copy-btn.copied { border-color: var(--green); color: var(--green); }
.listing-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.listing-tag {
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-lg);
  font-weight: 500;
}
.listing-gen-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}
.listing-gen-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid transparent;
  font-weight: 600;
}
.listing-gen-btn:hover {
  background: var(--accent);
  color: #fff;
}
.listing-push-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
}
.listing-push-btn:hover { opacity: 0.9; }

/* ─── Jarvis Marketing Intelligence Panel ─── */
.jarvis-marketing-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}
.jarvis-marketing-panel .jm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.jarvis-marketing-panel .jm-header:hover {
  background: rgba(var(--accent-rgb, 74, 111, 255), 0.04);
}
.jarvis-marketing-panel .jm-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jarvis-marketing-panel .jm-header-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
}
.jarvis-marketing-panel .jm-header-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.jarvis-marketing-panel .jm-chevron {
  transition: transform 0.2s;
  color: var(--text-secondary);
  font-size: 14px;
}
.jarvis-marketing-panel.collapsed .jm-chevron {
  transform: rotate(-90deg);
}
.jarvis-marketing-panel.collapsed .jm-body {
  display: none;
}
.jarvis-marketing-panel .jm-body {
  padding: 16px 18px;
}
.jarvis-marketing-panel .jm-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(var(--accent-rgb, 74, 111, 255), 0.05);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.jm-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.channel-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s;
}
.channel-card:hover {
  border-color: var(--accent);
}
.channel-card .cc-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.channel-card .cc-roas {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.channel-card .cc-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.roas-indicator.good { color: var(--success, #22c55e); }
.roas-indicator.warning { color: var(--warning-color, #f59e0b); }
.roas-indicator.poor { color: var(--danger-color, #ef4444); }
.jm-recs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.jm-rec-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}
.jm-rec-card .jm-rec-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.jm-rec-card .jm-rec-icon.sev-high { background: var(--danger-color, #ef4444); }
.jm-rec-card .jm-rec-icon.sev-medium { background: var(--warning-color, #f59e0b); }
.jm-rec-card .jm-rec-icon.sev-low { background: var(--success, #22c55e); }
.jm-rec-card .jm-rec-body { flex: 1; }
.jm-rec-card .jm-rec-channel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.jm-rec-card .jm-rec-action {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.jm-rec-card .jm-rec-rationale {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.jm-rec-card .jm-rec-metrics {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.jm-data-window {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 8px;
  margin-bottom: 12px;
}
.jm-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 4px;
}
.jm-warning-banner {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 13px;
  color: var(--warning-color, #f59e0b);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ─── Jarvis Financial Intelligence Panel ─── */
.jarvis-finance-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.jarvis-finance-panel .jfp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(166,124,82,0.04) 0%, transparent 60%);
}
.jarvis-finance-panel .jfp-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-finance-panel .jfp-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.jarvis-finance-panel .jfp-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.jarvis-finance-panel .jfp-timestamp {
  font-size: 10px;
  color: var(--text-dim);
}
.jarvis-finance-panel .jfp-body {
  padding: 16px;
}
.jarvis-finance-panel .jfp-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.jarvis-finance-panel .jfp-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.jarvis-finance-panel .jfp-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.jarvis-finance-panel .jfp-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.jarvis-finance-panel .jfp-metric-value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
}
.jarvis-finance-panel .jfp-metric-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.jarvis-finance-panel .jfp-alerts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jarvis-finance-panel .jfp-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.jarvis-finance-panel .jfp-alert.critical {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(220, 38, 38, 0.15);
}
.jarvis-finance-panel .jfp-alert.warning {
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px solid rgba(217, 119, 6, 0.15);
}
.jarvis-finance-panel .jfp-alert.info {
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid rgba(37, 99, 235, 0.15);
}
.jarvis-finance-panel .jfp-alert-icon {
  flex-shrink: 0;
  font-size: 14px;
}
.jarvis-finance-panel .jfp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.jarvis-finance-panel .jfp-product-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.jarvis-finance-panel .jfp-product-sku {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-dim);
  margin-bottom: 2px;
}
.jarvis-finance-panel .jfp-product-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jarvis-finance-panel .jfp-product-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.trend-up { color: var(--green); }
.trend-down { color: var(--red); }
.trend-flat { color: var(--text-dim); }
.margin-health {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.margin-health.healthy {
  color: var(--green);
  background: var(--green-dim);
}
.margin-health.caution {
  color: var(--yellow);
  background: var(--yellow-dim);
}
.margin-health.critical {
  color: var(--red);
  background: var(--red-dim);
}

/* ─── Jarvis Daily P&L Snapshot Panel ─── */
.jarvis-pnl-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.jarvis-pnl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.jarvis-pnl-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jarvis-pnl-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.jarvis-pnl-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.jarvis-pnl-ts {
  font-size: 11px;
  color: var(--text-dim);
}
.jarvis-pnl-toggles {
  display: flex;
  gap: 4px;
}
.jarvis-pnl-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.jarvis-pnl-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.jarvis-pnl-toggle.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.jarvis-pnl-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jarvis-pnl-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .jarvis-pnl-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .jarvis-pnl-cards {
    grid-template-columns: 1fr;
  }
}
.jarvis-pnl-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.jarvis-pnl-card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.jarvis-pnl-card-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.jarvis-pnl-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.pnl-trend-up {
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
}
.pnl-trend-down {
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
}
.pnl-trend-flat {
  color: var(--text-dim);
  font-size: 11px;
}
.jarvis-pnl-narrative {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.jarvis-pnl-narrative-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}
.jarvis-pnl-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.jarvis-pnl-waterfall {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.jarvis-pnl-wf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.jarvis-pnl-wf-label {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 120px;
  text-align: right;
  flex-shrink: 0;
}
.jarvis-pnl-wf-bar-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-pnl-wf-bar {
  height: 16px;
  border-radius: 3px;
  min-width: 4px;
  transition: width 0.3s ease;
}
.pnl-wf-rev { background: color-mix(in srgb, var(--accent) 60%, transparent); }
.pnl-wf-net { background: var(--accent); }
.pnl-wf-cost { background: color-mix(in srgb, var(--red) 50%, transparent); }
.pnl-wf-profit { background: color-mix(in srgb, var(--green) 55%, transparent); }
.pnl-wf-ad { background: color-mix(in srgb, var(--yellow) 55%, transparent); }
.pnl-wf-contribution { background: var(--green); }
.jarvis-pnl-wf-val {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
.jarvis-pnl-skus {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.jarvis-pnl-sku-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-faint, var(--border));
}
.jarvis-pnl-sku-row:last-child {
  border-bottom: none;
}
.jarvis-pnl-sku-id {
  font-family: monospace;
  color: var(--text-muted);
}
.jarvis-pnl-sku-rev {
  font-weight: 600;
  color: var(--text);
}
.jarvis-pnl-support-note {
  font-size: 12px;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* ─── Customer Story Panel ─── */
.customer-story-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: csOverlayIn 0.2s ease-out;
}
@keyframes csOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.customer-story-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 680px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: csPanelIn 0.25s ease-out;
}
@keyframes csPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.cs-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.cs-panel-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.cs-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.cs-panel-close:hover {
  color: var(--text);
  background: var(--surface-2);
}
.cs-panel-body {
  padding: 20px 24px 24px;
}
.cs-loading {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 13px;
}
.cs-loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: csSpin 0.7s linear infinite;
  margin-bottom: 12px;
}
@keyframes csSpin {
  to { transform: rotate(360deg); }
}
.customer-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.cs-metric-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: center;
}
.cs-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.cs-metric-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}
.cs-risk-badge.risk-low { background: var(--green-dim); color: var(--green); }
.cs-risk-badge.risk-medium { background: var(--yellow-dim); color: var(--yellow); }
.cs-risk-badge.risk-high { background: var(--red-dim); color: var(--red); }
.cs-risk-badge.risk-unknown { background: var(--surface-2); color: var(--text-muted); }
.cs-risk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cs-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.cs-narrative {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.customer-timeline {
  position: relative;
  padding-left: 24px;
  margin-bottom: 20px;
}
.customer-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
  border-radius: 1px;
}
.timeline-event {
  position: relative;
  padding-bottom: 14px;
  padding-left: 8px;
}
.timeline-event:last-child {
  padding-bottom: 0;
}
.timeline-event::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  z-index: var(--z-base);
}
.timeline-event[data-type="order"]::before { border-color: var(--accent); background: var(--accent); }
.timeline-event[data-type="refund"]::before { border-color: var(--red); background: var(--red); }
.timeline-event[data-type="return"]::before { border-color: var(--yellow); background: var(--yellow); }
.timeline-event[data-type="ticket"]::before { border-color: var(--blue); background: var(--blue); }
.timeline-event[data-type="cancelled"]::before { border-color: var(--text-muted); background: var(--text-muted); }
.timeline-event-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 1px;
}
.timeline-event-desc {
  font-size: 12px;
  color: var(--text);
}
.timeline-event-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
}
.timeline-event-type.type-order { background: var(--accent-dim); color: var(--accent); }
.timeline-event-type.type-refund { background: var(--red-dim); color: var(--red); }
.timeline-event-type.type-return { background: var(--yellow-dim); color: var(--yellow); }
.timeline-event-type.type-ticket { background: var(--blue-dim); color: var(--blue); }
.timeline-event-type.type-cancelled { background: var(--surface-2); color: var(--text-muted); }
.cs-recommendations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.cs-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.cs-rec-bullet {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.ct-story-btn {
  padding: 4px 12px;
  border-radius: 5px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.ct-story-btn:hover {
  background: var(--accent);
  color: #000;
}
.ct-story-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
@media (max-width: 600px) {
  .customer-metrics-row { grid-template-columns: repeat(2, 1fr); }
  .customer-story-panel { border-radius: var(--radius); }
}

/* ─── Jarvis Fulfillment Risk Panel ─── */
.jarvis-fulfillment-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.jarvis-fulfillment-panel .jarvis-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.jarvis-fulfillment-panel .jarvis-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.jarvis-fulfillment-panel .jarvis-panel-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--purple-dim);
  color: var(--purple);
}
.jarvis-fulfillment-panel .jarvis-risk-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.jarvis-fulfillment-panel .jarvis-risk-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.high { background: var(--red); }
.jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.medium { background: var(--yellow); }
.jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.low { background: var(--green); }
.jarvis-fulfillment-panel .jarvis-anomalies {
  list-style: none;
  padding: 0;
  margin: 0;
}
.jarvis-fulfillment-panel .jarvis-anomalies li {
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jarvis-fulfillment-panel .jarvis-anomalies li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
}
.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.risk-badge.high {
  background: var(--red-dim);
  color: var(--red);
}
.risk-badge.medium {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.risk-badge.low {
  background: var(--green-dim);
  color: var(--green);
}
.risk-badge .risk-score {
  font-size: 9px;
  opacity: 0.7;
}

/* ─── Jarvis Exception Intelligence Panel ─── */
.jarvis-exception-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.jarvis-exception-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.jarvis-exception-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.jarvis-exception-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.jarvis-exception-autoresolved-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: var(--green-dim);
  color: var(--green);
  white-space: nowrap;
}
.jarvis-exception-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  flex-wrap: wrap;
}
/* ── Type breakdown cards ── */
.jarvis-exception-type-cards {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.jarvis-exception-type-card {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
}
.jarvis-exception-type-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.jarvis-exception-icon {
  font-size: 13px;
  line-height: 1;
}
.jarvis-exception-type-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.jarvis-exception-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius);
}
.jarvis-exception-type-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.jarvis-exception-sev-row {
  margin-top: 6px;
}
.jarvis-exception-sev {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
}
.jarvis-exception-sev.critical {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-exception-sev.warning {
  background: var(--yellow-dim);
  color: var(--yellow);
}
/* ── Critical list table ── */
.jarvis-exception-critical-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.jarvis-exception-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.jarvis-exception-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.jarvis-exception-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.jarvis-exception-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
}
.jarvis-exception-row:last-child td {
  border-bottom: none;
}
.jarvis-exception-order {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.jarvis-exception-type-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--purple-dim);
  color: var(--purple);
  text-transform: capitalize;
  white-space: nowrap;
}
.jarvis-exception-desc-td {
  color: var(--text-muted);
  max-width: 320px;
}
.jarvis-exception-age {
  white-space: nowrap;
  font-size: 11px;
}
.jarvis-exception-actions {
  white-space: nowrap;
  display: flex;
  gap: 4px;
  align-items: center;
}
.jarvis-exception-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  background: var(--bg);
  color: var(--text);
}
.jarvis-exception-btn.resolve:hover {
  background: var(--green-dim);
  color: var(--green);
  border-color: var(--green);
}
.jarvis-exception-btn.escalate:hover {
  background: var(--red-dim);
  color: var(--red);
  border-color: var(--red);
}
.jarvis-exception-btn.escalated {
  background: var(--red-dim);
  color: var(--red);
  border-color: var(--red);
}
.jarvis-exception-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ── Sparkline ── */
.jarvis-sparkline {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  margin-left: 8px;
}
.jarvis-spark-bar {
  width: 6px;
  border-radius: 2px 2px 0 0;
  background: var(--border);
  display: inline-block;
  transition: background 0.15s;
}
.jarvis-spark-bar.critical { background: var(--red); opacity: 0.7; }
.jarvis-spark-bar.warning  { background: var(--yellow); opacity: 0.7; }
.jarvis-spark-bar.ok       { background: var(--green); opacity: 0.5; }

@media (max-width: 768px) {
  .jarvis-exception-type-cards { flex-direction: column; }
  .jarvis-exception-type-card { max-width: 100%; }
  .jarvis-exception-panel-header { flex-direction: column; }
  .jarvis-exception-desc-td { max-width: 180px; }
  .jarvis-sparkline { display: none; }
}

/* ─── Jarvis Entity Deep Links (Global Chat) ─── */
.jg-entity-link:hover {
  color: var(--accent-light);
  text-decoration-style: solid;
}
.jg-sku-link::before {
  content: '\25A0';
  font-size: 0.65em;
  margin-right: 2px;
  opacity: 0.6;
  vertical-align: middle;
}
.jg-order-link::before {
  content: '\2192';
  font-size: 0.8em;
  margin-right: 2px;
  opacity: 0.6;
}
.jv-msg-assistant .jg-entity-link,
.jg-msg-assistant .jg-entity-link {
  color: var(--accent);
}
.jv-msg-assistant .jg-entity-link:hover,
.jg-msg-assistant .jg-entity-link:hover {
  color: var(--accent-light);
}
.jv-msg-assistant .jg-dollar,
.jg-msg-assistant .jg-dollar {
  color: var(--green-bright);
}
.jv-msg-user .jg-entity-link,
.jg-msg-user .jg-entity-link {
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.5);
}
.jv-msg-user .jg-dollar,
.jg-msg-user .jg-dollar {
  color: #fff;
  font-weight: 700;
}

/* ─── Signal Health Grid ─── */
@media (max-width: 640px) {
}

/* ─── Jarvis Notification Bell ─── */
.jarvis-notification-bell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.jarvis-notification-bell:hover {
  background: var(--surface-2);
  color: var(--text);
}
.jarvis-notification-bell.has-notifications {
  color: var(--text);
}
.jarvis-notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: var(--radius);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  pointer-events: none;
  animation: jarvis-badge-pop 0.3s ease;
}
@keyframes jarvis-badge-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.jarvis-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.jarvis-notif-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.jarvis-notif-dismiss-all {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.jarvis-notif-dismiss-all:hover {
  background: var(--surface-2);
  color: var(--text);
}
.jarvis-notif-panel-body {
  overflow-y: auto;
  flex: 1;
  max-height: 420px;
}
.jarvis-notif-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}
.jarvis-notification-item {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  cursor: default;
  position: relative;
}
.jarvis-notification-item:last-child {
  border-bottom: none;
}
.jarvis-notification-item:hover {
  background: var(--surface-2);
}
.jarvis-notification-item.unread {
  background: rgba(37, 99, 235, 0.03);
}
.jarvis-notif-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 2px;
}
.jarvis-notif-icon.priority-critical {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-notif-icon.priority-warning {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jarvis-notif-icon.priority-info {
  background: var(--blue-dim);
  color: var(--blue);
}
.jarvis-notif-content {
  flex: 1;
  min-width: 0;
}
.jarvis-notif-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jarvis-notif-message {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jarvis-notif-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
}
.jarvis-notif-dismiss-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.jarvis-notification-item:hover .jarvis-notif-dismiss-btn {
  opacity: 1;
}
.jarvis-notif-dismiss-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}
@keyframes jarvis-notif-slide-in {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.jarvis-notification-item.new-item {
  animation: jarvis-notif-slide-in 0.25s ease;
}

/* ── Cluster notification styles ── */
.jarvis-notif-cluster {
  border-left: 3px solid var(--blue);
  background: rgba(37, 99, 235, 0.04);
}
.jarvis-notif-cluster.priority-critical {
  border-left-color: var(--red);
  background: rgba(239, 68, 68, 0.04);
}
.jarvis-notif-cluster.priority-warning {
  border-left-color: var(--yellow);
  background: rgba(234, 179, 8, 0.04);
}
.jarvis-notif-cluster-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.jarvis-notif-cluster-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.jarvis-notif-cluster.priority-critical .jarvis-notif-cluster-badge {
  background: var(--red);
}
.jarvis-notif-cluster.priority-warning .jarvis-notif-cluster-badge {
  background: var(--yellow);
  color: #111;
}
.jarvis-notif-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 11px;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
.jarvis-notif-expand-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}
.jarvis-notif-cluster-items {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.jarvis-notif-cluster-items.expanded {
  display: flex;
}
.jarvis-notif-cluster-item {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .jarvis-notification-panel {
    width: calc(100vw - 32px);
    right: -60px;
  }
}
@media (max-width: 480px) {
  .jarvis-notification-panel {
    width: calc(100vw - 16px);
    right: -80px;
  }
}

/* ─── Jarvis Stockout Predictions (Inventory) ─── */
.jarvis-inventory-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.jarvis-inventory-panel .jip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.jarvis-inventory-panel .jip-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-inventory-panel .jip-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.jip-summary-badges {
  display: flex;
  gap: 10px;
  align-items: center;
}
.jip-summary-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
}
.jip-summary-badge.critical {
  background: var(--red-dim);
  color: var(--red);
}
.jip-summary-badge.warning {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jip-recs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.jip-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
}
.jip-rec-row .jip-sku {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  min-width: 120px;
  flex-shrink: 0;
  cursor: pointer;
}
.jip-rec-row .jip-sku:hover {
  text-decoration: underline;
}
.jip-rec-row .jip-rec-text {
  flex: 1;
  color: var(--text-muted);
}
.jip-rec-row .jip-days {
  font-family: var(--font-mono);
  font-weight: 600;
  min-width: 50px;
  text-align: right;
  flex-shrink: 0;
}
.jip-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.jip-toggle:hover {
  border-color: var(--text-muted);
}
.jip-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 8px 0;
}
.stockout-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 6px;
}
.stockout-badge.critical {
  background: var(--red-dim);
  color: var(--red);
}
.stockout-badge.warning {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.stockout-badge.ok {
  background: var(--green-dim);
  color: var(--green);
}
.stockout-badge.overstock {
  background: var(--blue-dim);
  color: var(--blue);
}
.stockout-badge.no-data {
  background: var(--surface-3);
  color: var(--text-dim);
}

/* ─── Jarvis Product Health Intelligence ─── */
.health-grade {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px; border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
  flex-shrink: 0;
}
.health-grade.a { background: rgba(34,197,94,0.15); color: var(--green); }
.health-grade.b { background: rgba(59,130,246,0.15); color: var(--blue, #3b82f6); }
.health-grade.c { background: rgba(245,158,11,0.15); color: var(--yellow, #f59e0b); }
.health-grade.d { background: rgba(249,115,22,0.15); color: var(--orange, #f97316); }
.health-grade.f { background: rgba(239,68,68,0.15); color: var(--red); }
.jarvis-health-summary {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 14px 18px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px;
}
.jarvis-health-summary .jhs-stat {
  display: flex; align-items: center; gap: 6px;
}
.jarvis-health-summary .jhs-val {
  font-weight: 700; font-size: 16px;
}
.jarvis-health-summary .jhs-label {
  color: var(--text-muted); font-size: 12px;
}
.jarvis-health-summary .jhs-grades {
  display: flex; gap: 4px; margin-left: auto;
}
.jarvis-health-summary .jhs-grade-count {
  display: flex; align-items: center; gap: 3px; font-size: 12px;
  padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600;
}
.jarvis-product-analysis {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); margin: 4px 0 2px 0; overflow: hidden;
  transition: max-height 0.2s ease;
}
.jarvis-product-analysis .jpa-content {
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.jarvis-product-analysis .jpa-signals {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.signal-gauge {
  display: flex; flex-direction: column; gap: 3px; min-width: 110px;
  padding: 8px 10px; background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border); flex: 1;
}
.signal-gauge .sg-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); font-weight: 600;
}
.signal-gauge .sg-bar {
  width: 100%; height: 5px; background: var(--border); border-radius: 3px;
  overflow: hidden;
}
.signal-gauge .sg-fill {
  height: 100%; border-radius: 3px; transition: width 0.3s ease;
}
.signal-gauge .sg-fill.high { background: var(--green); }
.signal-gauge .sg-fill.mid { background: var(--yellow, #f59e0b); }
.signal-gauge .sg-fill.low { background: var(--red); }
.signal-gauge .sg-fill.none { background: var(--text-dim); width: 0 !important; }
.signal-gauge .sg-detail {
  font-size: 11px; color: var(--text-secondary); line-height: 1.3;
}
.jpa-flags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.jpa-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
  background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.15);
}
.jpa-flag.positive {
  background: rgba(34,197,94,0.08); color: var(--green); border-color: rgba(34,197,94,0.15);
}
.jpa-recs {
  display: flex; flex-direction: column; gap: 4px;
}
.jpa-rec {
  font-size: 12px; color: var(--text-secondary); padding-left: 14px;
  position: relative; line-height: 1.4;
}
.jpa-rec::before {
  content: '\2192'; position: absolute; left: 0; color: var(--text-muted);
}

/* ─── Jarvis Returns Intelligence Panel ─── */
.jarvis-returns-panel {
  margin: 0 0 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: var(--radius);
  overflow: hidden;
}
.jarvis-returns-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.jarvis-returns-header:hover { background: rgba(124, 58, 237, 0.06); }
.jarvis-returns-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-returns-brand .jarvis-dot {
  width: 8px; height: 8px;
  background: #a78bfa;
  border-radius: 50%;
  animation: jarvisPulse 2s ease-in-out infinite;
}
@keyframes jarvisPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; box-shadow: 0 0 6px #a78bfa; }
}
.jarvis-returns-brand span {
  font-size: 13px;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.5px;
}
.jarvis-returns-toggle {
  font-size: 11px;
  color: var(--slate);
  transition: transform 0.2s;
}
.jarvis-returns-toggle.expanded { transform: rotate(180deg); }
.jarvis-returns-body {
  padding: 0 16px 16px;
  display: none;
}
.jarvis-returns-body.open { display: block; }
.jarvis-returns-summary {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--radius-sm);
}
.jarvis-ret-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .jarvis-ret-grid { grid-template-columns: 1fr; }
}
.jarvis-ret-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.jarvis-ret-card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.jarvis-ret-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.jarvis-ret-stat-row:last-child { border-bottom: none; }
.jarvis-ret-stat-label {
  font-size: 11px;
  color: var(--slate);
}
.jarvis-ret-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
}
.jarvis-ret-product-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.jarvis-ret-product-row:last-child { border-bottom: none; }
.jarvis-ret-sku {
  font-size: 11px;
  color: #a78bfa;
  font-family: var(--font-mono);
  min-width: 100px;
}
.jarvis-ret-product-title {
  font-size: 11px;
  color: var(--slate);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jarvis-ret-product-rate {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  min-width: 44px;
  text-align: right;
}
.return-trend-up {
  color: var(--red);
}
.return-trend-up::before {
  content: '\25B2 ';
  font-size: 9px;
}
.return-trend-down {
  color: var(--green);
}
.return-trend-down::before {
  content: '\25BC ';
  font-size: 9px;
}
.return-trend-stable {
  color: var(--slate);
}
.return-trend-stable::before {
  content: '\2014 ';
  font-size: 9px;
}
.product-flag {
  display: inline-block;
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.jarvis-ret-returner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.jarvis-ret-returner-row:last-child { border-bottom: none; }
.jarvis-ret-returner-name {
  font-size: 11px;
  color: var(--text);
  flex: 1;
}
.jarvis-ret-returner-count {
  font-size: 11px;
  font-weight: 600;
  color: #f87171;
  font-family: var(--font-mono);
}
.jarvis-ret-returner-risk {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.jarvis-ret-risk-high {
  background: rgba(220, 38, 38, 0.15);
  color: #f87171;
}
.jarvis-ret-risk-medium {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}
.jarvis-ret-risk-low {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}
.jarvis-ret-loading {
  text-align: center;
  padding: 20px;
  color: var(--slate);
  font-size: 12px;
}

/* ─── Jarvis Reorder Intelligence Panel ─── */
.jarvis-reorder-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.jarvis-reorder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.jarvis-stat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  background: var(--bg-hover, var(--surface-2));
  border-radius: var(--radius-sm);
}
.confidence-bar {
  position: relative;
  width: 100%;
  min-width: 70px;
  height: 16px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.confidence-bar-fill {
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.3s ease;
}
.confidence-bar-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text);
  mix-blend-mode: difference;
}
.velocity-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}
.velocity-sparkline-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.velocity-sparkline-bar {
  width: 5px;
  min-height: 2px;
  border-radius: 1px;
}
.jarvis-approve-btn,
.jarvis-reject-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s;
}
.jarvis-approve-btn:hover {
  background: var(--green-dim);
  border-color: var(--green);
  color: var(--green);
}
.jarvis-reject-btn:hover {
  background: var(--red-dim);
  border-color: var(--red);
  color: var(--red);
}

/* ─── Jarvis Ask Buttons (Morning Brief) ─── */
.jarvis-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
  background: transparent;
  border: 1px solid var(--border, #334155);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
}
.jarvis-ask-btn:hover {
  color: var(--accent, #c8a97e);
  border-color: var(--accent, #c8a97e);
  background: rgba(200, 169, 126, 0.08);
}
.jarvis-ask-btn svg { opacity: 0.7; transition: opacity 0.2s; }
.jarvis-ask-btn:hover svg { opacity: 1; }
.jarvis-ask-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #334155);
}
.jarvis-ask-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.3;
}
.jarvis-ask-inline:hover {
  color: var(--accent, #c8a97e);
  border-color: var(--accent, #c8a97e);
  background: rgba(200, 169, 126, 0.08);
}

/* ─── Decisions Dashboard v2 ─────────────────────────────────────────────── */
.decisions-wrap {
  padding: 24px;
  max-width: 1280px;
}
.decisions-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.decisions-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.decisions-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}
.decisions-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.decisions-select {
  padding: 5px 10px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.decisions-select:focus { outline: none; border-color: var(--accent); }

/* Summary cards */
.decisions-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .decisions-summary-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .decisions-summary-cards { grid-template-columns: 1fr; } }

.decisions-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.decisions-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.decisions-card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.decisions-card-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* Status row */
.decisions-status-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .decisions-status-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .decisions-status-row { grid-template-columns: repeat(2, 1fr); } }

.decisions-status-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.decisions-status-card:hover { border-color: var(--accent); }
.decisions-status-card-active { box-shadow: 0 0 0 1px currentColor; }
.decisions-status-name { margin-bottom: 6px; }
.decisions-status-count {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}
.decisions-status-pct {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.decisions-status-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}

/* Action type badge (color-coded) */
.decision-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--surface-2);
  color: var(--text-muted);
}
.decision-type-badge[data-type="pricing_recommendation"],
.decision-type-badge[data-type="price_change"] {
  background: var(--blue-dim);
  color: var(--blue);
}
.decision-type-badge[data-type="reorder_recommendation"] {
  background: var(--green-dim);
  color: var(--green);
}
.decision-type-badge[data-type="support_response"],
.decision-type-badge[data-type="support_draft"] {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.decision-type-badge[data-type="meta_budget_change"],
.decision-type-badge[data-type="google_budget_change"],
.decision-type-badge[data-type="ad_budget"] {
  background: var(--purple-dim);
  color: var(--purple);
}
.decision-type-badge[data-type="meta_campaign_toggle"],
.decision-type-badge[data-type="campaign_pause"],
.decision-type-badge[data-type="campaign_resume"] {
  background: rgba(124, 58, 237, 0.06);
  color: var(--purple);
}
.decision-type-badge[data-type="listing_update"],
.decision-type-badge[data-type="listing_publish"] {
  background: var(--accent-dim);
  color: var(--accent);
}
/* Status badge (auto_approved + existing statuses) */
.decision-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}
.decision-status-badge[data-status="pending"] { background: var(--yellow-dim); color: var(--yellow); }
.decision-status-badge[data-status="approved"] { background: var(--green-dim); color: var(--green); }
.decision-status-badge[data-status="rejected"] { background: var(--red-dim); color: var(--red); }
.decision-status-badge[data-status="executed"] { background: var(--blue-dim); color: var(--blue); }
.decision-status-badge[data-status="auto_approved"] { background: var(--purple-dim); color: var(--purple); }
.decision-status-badge[data-status="execution_failed"] { background: var(--red-dim); color: var(--red); }
.decision-status-badge[data-status="expired"] { background: var(--surface-2); color: var(--text-dim); }

/* ─── Unified Status Badge System (R3-C) ───────────────────────────────────
 * Single palette for all badge dialects across the dashboard.
 * Usage: <span class="status-badge" data-severity="success|info|warning|danger|neutral">
 *          <span class="status-badge__icon" aria-hidden="true">●</span>
 *          <span class="status-badge__label">Label text</span>
 *        </span>
 * WCAG AA: all color pairs verified ≥4.5:1 against their dim backgrounds.
 * ──────────────────────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.status-badge__icon {
  font-size: 8px;
  line-height: 1;
  flex-shrink: 0;
}
/* success — green: var(--green) on rgba(22,163,74,0.12) ≈ 5.2:1 */
.status-badge[data-severity="success"] {
  background: rgba(22, 163, 74, 0.12);
  color: var(--green);
}
/* info — blue: var(--blue) on rgba(37,99,235,0.10) ≈ 5.5:1 */
.status-badge[data-severity="info"] {
  background: rgba(37, 99, 235, 0.10);
  color: var(--blue);
}
/* warning — amber: #d97706 on rgba(217,119,6,0.12) ≈ 4.6:1 */
.status-badge[data-severity="warning"] {
  background: rgba(217, 119, 6, 0.12);
  color: var(--yellow);
}
/* danger — red: var(--red) on rgba(220,38,38,0.10) ≈ 5.0:1 */
.status-badge[data-severity="danger"] {
  background: rgba(220, 38, 38, 0.10);
  color: var(--red);
}
/* neutral — gray: #555 on var(--surface-2) (--surface-2) ≈ 5.7:1 */
.status-badge[data-severity="neutral"] {
  background: var(--surface-2);
  color: var(--text-muted);
}
/* Mobile: enforce 14px min, larger touch target */
@media (max-width: 768px) {
  .status-badge {
    font-size: 14px;
    padding: 4px 10px;
    min-height: 24px;
  }
  .status-badge__icon { font-size: 10px; }
}

/* ── Alias maps: old class names → new severity tokens ─────────────────── */
/* decision-status-badge aliases (already styled above; forward-compat) */
/* pb-badge-* (decision-playbook) */
/* dl-badge-* (command-palette customer detail) */
/* si-badge-* (support-insights) */
/* oex-badge-* (order-exceptions) */
/* dq-badge-* (data-quality) */
/* badge-* (refunds / shipping-claims generic) */
/* shipping-claims color names */
.badge-green  { background: rgba(22, 163, 74, 0.12);   color: var(--green);  } /* → success */
.badge-blue   { background: rgba(37, 99, 235, 0.10);   color: var(--blue);   } /* → info    */
.badge-yellow { background: rgba(217, 119, 6, 0.12);   color: var(--yellow); } /* → warning */
.badge-red    { background: rgba(220, 38, 38, 0.10);   color: var(--red);    } /* → danger  */
.badge-gray,
.badge-purple { background: var(--surface-2); color: var(--text-muted); } /* → neutral / kept as alias */

/* Panel */
.decisions-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.decisions-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.decisions-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.decisions-panel-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-left: auto;
}

/* Agent performance */
.decisions-agent-list { padding: 8px 0; }
.decisions-agent-row {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.decisions-agent-row:last-child { border-bottom: none; }
.decisions-agent-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}
.decisions-agent-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--text);
}
.decisions-agent-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.decisions-agent-bar-wrap {
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.decisions-agent-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Outcome panel */
.decisions-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
@media (max-width: 768px) { .decisions-outcome-grid { grid-template-columns: repeat(2, 1fr); } }

.decisions-outcome-card {
  padding: 16px 20px;
  background: var(--surface);
}
.decisions-outcome-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.decisions-outcome-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 6px;
}
.decisions-outcome-sub {
  font-size: 11px;
  color: var(--text-dim);
}
.decisions-outcome-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.decisions-outcome-bar > div {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s;
}

/* Filters */
.decisions-filters {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.decisions-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  display: block;
  margin-bottom: 6px;
}
.decisions-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.decisions-pill {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.decisions-pill:hover { border-color: var(--accent); color: var(--accent); }
.decisions-pill-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}
.decisions-filter-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.decisions-filter-group { display: flex; flex-direction: column; min-width: 160px; }

/* Decision feed cards */
.decisions-feed { padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.decisions-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

.decisions-card-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.decisions-card-item:hover { border-color: var(--border-hover); }
.decisions-card-item[data-status="pending"] { border-left: 3px solid var(--yellow); }
.decisions-card-item[data-status="approved"] { border-left: 3px solid var(--green); }
.decisions-card-item[data-status="rejected"] { border-left: 3px solid var(--red); }
.decisions-card-item[data-status="executed"] { border-left: 3px solid var(--blue); }
.decisions-card-item[data-status="auto_approved"] { border-left: 3px solid var(--purple); }

.decisions-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.decisions-card-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.decisions-card-timestamp {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.decisions-card-summary {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.4;
}
.decisions-card-reason {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.decisions-card-error {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--red);
}
.decisions-card-outcome {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.decisions-outcome-badge {
  font-size: 12px;
  font-weight: 600;
}
.decisions-outcome-metric {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: capitalize;
}
.decisions-outcome-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.decisions-card-outcome-notes {
  font-size: 11px;
  color: var(--text-muted);
  width: 100%;
  line-height: 1.4;
}
.decisions-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.decisions-btn-approve,
.decisions-btn-reject {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.decisions-btn-approve {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.decisions-btn-approve:hover { opacity: 0.85; }
.decisions-btn-approve:disabled { opacity: 0.45; cursor: not-allowed; }
.decisions-btn-reject {
  background: transparent;
  color: var(--red);
  border-color: var(--red);
}
.decisions-btn-reject:hover { background: var(--red-dim); }
.decisions-btn-reject:disabled { opacity: 0.45; cursor: not-allowed; }

/* Trend chart */
.decisions-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  padding: 12px 20px;
}
.decisions-trend-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}
.decisions-trend-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}
.decisions-trend-label {
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ─── Compound Risk Cards (Spec 7) ──────────────────────────────────────── */
.decisions-compound-panel { border-top: 3px solid var(--red); }
.decisions-compound-list { padding: 12px 20px; display: flex; flex-direction: column; gap: 10px; }
.decisions-compound-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.decisions-compound-card:hover { border-color: var(--red); }
.decisions-compound-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.decisions-compound-sku-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.decisions-compound-sku {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.decisions-compound-severity {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,60,60,0.12);
}
.decisions-compound-score {
  font-size: 12px;
  color: var(--text-dim);
}
.decisions-compound-score strong { color: var(--text); }
.decisions-compound-signal-count {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1px 7px;
}
.decisions-compound-ts {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}
.decisions-compound-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.decisions-compound-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: capitalize;
}
.decisions-compound-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 8px;
}
.decisions-compound-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.decisions-compound-action-text {
  font-size: 11px;
  color: var(--yellow);
}
.decisions-compound-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.decisions-compound-link:hover { text-decoration: underline; }

/* Agent performance bar (legacy class kept for compatibility) */

/* Decisions table (legacy, kept for backward compat) */

/* ═══════════════════════════════════════════════════════════════════════════
   JARVIS INTELLIGENCE PLATFORM — Consolidated Styles
   ═══════════════════════════════════════════════════════════════════════════ */

    /* ─── Jarvis Ask Buttons (Morning Brief) ─── */
    .jarvis-ask-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary, #94a3b8);
      background: transparent;
      border: 1px solid var(--border, #334155);
      border-radius: var(--radius-lg);
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      line-height: 1.4;
    }
    .jarvis-ask-btn:hover {
      color: var(--accent, #c8a97e);
      border-color: var(--accent, #c8a97e);
      background: rgba(200, 169, 126, 0.08);
    }
    .jarvis-ask-btn svg { opacity: 0.7; transition: opacity 0.2s; }
    .jarvis-ask-btn:hover svg { opacity: 1; }

    .jarvis-ask-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid var(--border, #334155);
    }

    .jarvis-ask-inline {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-secondary, #94a3b8);
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius);
      cursor: pointer;
      transition: all 0.2s ease;
      margin-left: 6px;
      vertical-align: middle;
      line-height: 1.3;
    }
    .jarvis-ask-inline:hover {
      color: var(--accent, #c8a97e);
      border-color: var(--accent, #c8a97e);
      background: rgba(200, 169, 126, 0.08);
    }

    /* ─── Jarvis Fulfillment Risk Panel ─── */
    .jarvis-fulfillment-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 16px;
    }
    .jarvis-fulfillment-panel .jarvis-panel-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    .jarvis-fulfillment-panel .jarvis-panel-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .jarvis-fulfillment-panel .jarvis-panel-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--radius);
      background: var(--purple-dim);
      color: var(--purple);
    }
    .jarvis-fulfillment-panel .jarvis-risk-summary {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .jarvis-fulfillment-panel .jarvis-risk-stat {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-muted);
    }
    .jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.high { background: var(--red); }
    .jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.medium { background: var(--yellow); }
    .jarvis-fulfillment-panel .jarvis-risk-stat .risk-dot.low { background: var(--green); }
    .jarvis-fulfillment-panel .jarvis-anomalies {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .jarvis-fulfillment-panel .jarvis-anomalies li {
      font-size: 12px;
      color: var(--text-muted);
      padding: 3px 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .jarvis-fulfillment-panel .jarvis-anomalies li::before {
      content: '';
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--yellow);
      flex-shrink: 0;
    }

    /* ─── Risk Badges on Order Rows ─── */
    .risk-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: var(--radius);
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .risk-badge.high {
      background: var(--red-dim);
      color: var(--red);
    }
    .risk-badge.medium {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .risk-badge.low {
      background: var(--green-dim);
      color: var(--green);
    }
    .risk-badge .risk-score {
      font-size: 9px;
      opacity: 0.7;
    }

    /* ─── Jarvis Logistics Intelligence Panel ─── */
    .jarvis-logistics-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-top: 20px;
      overflow: hidden;
    }
    .jarvis-logistics-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
    }
    .jarvis-logistics-title {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .jarvis-logistics-icon {
      font-size: 15px;
      color: var(--accent);
    }
    .jarvis-logistics-body {
      padding: 16px;
    }

    /* Stats row inside Jarvis panel */
    .jarvis-logistics-stats {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    .jarvis-lstat {
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      text-align: center;
    }
    .jarvis-lstat-value {
      font-size: 20px;
      font-weight: 700;
      font-family: var(--font-mono);
      line-height: 1.2;
    }
    .jarvis-lstat-value.red { color: var(--red); }
    .jarvis-lstat-value.green { color: var(--green); }
    .jarvis-lstat-value.yellow { color: var(--yellow); }
    .jarvis-lstat-value.blue { color: var(--blue); }
    .jarvis-lstat-value.accent { color: var(--accent); }
    .jarvis-lstat-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 2px;
    }

    /* Recommendations */
    .jarvis-logistics-recs {
      margin-bottom: 16px;
    }
    .jarvis-section-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .jarvis-rec {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      line-height: 1.5;
      margin-bottom: 4px;
    }
    .jarvis-rec-icon {
      flex-shrink: 0;
      font-size: 13px;
      line-height: 1.4;
    }

    /* Grid layout for tables */
    .jarvis-logistics-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    @media (min-width: 900px) {
      .jarvis-logistics-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    .jarvis-logistics-section {
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      padding: 12px;
      overflow: hidden;
    }
    .jarvis-logistics-section .jarvis-section-label {
      margin-bottom: 8px;
    }

    /* Mini tables inside Jarvis panel */
    .jarvis-mini-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11.5px;
    }
    .jarvis-mini-table th {
      text-align: left;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--text-muted);
      padding: 4px 6px;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
    }
    .jarvis-mini-table td {
      padding: 5px 6px;
      border-bottom: 1px solid rgba(0,0,0,0.04);
      white-space: nowrap;
    }
    .jarvis-mini-table tr:last-child td { border-bottom: none; }

    /* Container status badges */
    .container-status {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: var(--radius);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .container-status.overdue { background: var(--red-dim); color: var(--red); }
    .container-status.arriving { background: var(--yellow-dim); color: var(--yellow); }
    .container-status.on-track { background: var(--green-dim); color: var(--green); }
    .container-status.delivered { background: var(--emerald-dim); color: var(--emerald); }
    .container-status.unknown { background: var(--surface-3); color: var(--text-dim); }

    /* MTO risk badges */
    .mto-risk-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 7px;
      border-radius: var(--radius);
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .mto-risk-badge.critical { background: var(--red-dim); color: var(--red); }
    .mto-risk-badge.high { background: var(--yellow-dim); color: var(--yellow); }
    .mto-risk-badge.elevated { background: var(--blue-dim); color: var(--blue); }
    .mto-risk-badge.normal { background: var(--green-dim); color: var(--green); }

    /* ─── Jarvis Customer Risk Intelligence ─── */
    .jarvis-customer-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 16px;
    }
    .jarvis-customer-panel .jcp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .jarvis-customer-panel .jcp-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .jarvis-customer-panel .jcp-subtitle {
      font-size: 11px;
      color: var(--text-muted);
    }
    .jcp-summary-row {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }
    .jcp-summary-card {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      min-width: 100px;
    }
    .jcp-summary-card .jcp-count {
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
    }
    .jcp-summary-card.churn { background: var(--red-dim); color: var(--red); }
    .jcp-summary-card.escalation { background: var(--yellow-dim); color: var(--yellow); }
    .jcp-summary-card.vip { background: rgba(212, 175, 55, 0.1); color: #b8860b; }
    .jcp-summary-card.new { background: var(--blue-dim); color: var(--blue); }
    .jcp-profiles-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 320px;
      overflow-y: auto;
    }
    .jcp-profile-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      border-left: 3px solid var(--border);
      transition: background 0.15s;
    }
    .jcp-profile-card:hover { background: var(--surface-3); }
    .jcp-profile-card.churn { border-left-color: var(--red); }
    .jcp-profile-card.escalation { border-left-color: var(--yellow); }
    .jcp-profile-card.vip { border-left-color: #d4af37; }
    .jcp-profile-card.new { border-left-color: var(--blue); }
    .jcp-profile-info { flex: 1; min-width: 0; }
    .jcp-profile-name {
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .jcp-profile-email {
      font-size: 10.5px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .jcp-profile-story {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 3px;
      line-height: 1.4;
    }
    .jcp-profile-meta {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 4px;
    }
    .jcp-profile-meta span {
      font-size: 10px;
      color: var(--text-muted);
      background: var(--surface);
      padding: 1px 6px;
      border-radius: 3px;
    }
    .jcp-profile-rec {
      font-size: 10.5px;
      color: var(--text);
      margin-top: 4px;
      font-style: italic;
      line-height: 1.4;
    }

    /* Risk badges on ticket rows */
    .customer-risk {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
    }
    .customer-risk.churn { background: var(--red-dim); color: var(--red); }
    .customer-risk.escalation { background: var(--yellow-dim); color: var(--yellow); }
    .customer-risk.vip { background: rgba(212, 175, 55, 0.1); color: #b8860b; }
    .customer-risk.new { background: var(--blue-dim); color: var(--blue); }

    /* ─── Listing Generator Modal ─── */
    .listing-generator-modal {
      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      animation: lgm-fade-in 0.15s ease;
    }
    @keyframes lgm-fade-in { from { opacity: 0; } to { opacity: 1; } }

    .listing-generator-panel {
      background: var(--surface);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 780px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      animation: lgm-slide-up 0.2s ease;
    }
    @keyframes lgm-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

    .listing-gen-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid var(--border);
    }
    .listing-gen-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }
    .listing-gen-subtitle {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .listing-gen-close {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-muted);
      padding: 4px;
      border-radius: var(--radius-sm);
      transition: background 0.15s;
    }
    .listing-gen-close:hover, .listing-gen-close:focus-visible { background: var(--surface-2); color: var(--text); }

    .listing-gen-body {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    /* Loading state */
    .listing-gen-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 24px;
      gap: 16px;
    }
    .listing-gen-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: lgm-spin 0.8s linear infinite;
    }
    @keyframes lgm-spin { to { transform: rotate(360deg); } }
    .listing-gen-loading-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .listing-gen-loading-sub {
      font-size: 12px;
      color: var(--text-muted);
    }

    /* Error state */
    .listing-gen-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 48px 24px;
      text-align: center;
      gap: 8px;
    }
    .listing-gen-error-icon { color: var(--red); }
    .listing-gen-error-text { font-size: 14px; font-weight: 600; color: var(--text); }
    .listing-gen-error-detail { font-size: 12px; color: var(--text-muted); max-width: 400px; }

    /* Preview */
    .listing-preview {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .listing-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .listing-field-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .listing-field-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
    }
    .listing-field-value {
      font-size: 13px;
      color: var(--text);
      background: var(--surface-2);
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      line-height: 1.6;
      word-break: break-word;
    }
    .listing-field-meta {
      font-size: 11px;
      color: var(--text-dim);
      margin-top: -2px;
    }

    .listing-desc-preview {
      font-size: 13px;
      line-height: 1.7;
    }
    .listing-desc-preview p { margin-bottom: 12px; }
    .listing-desc-preview strong { font-weight: 600; }

    .listing-fields-row {
      display: flex;
      gap: 16px;
    }
    @media (max-width: 640px) {
      .listing-fields-row { flex-direction: column; }
    }

    .listing-copy-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-muted);
      font-size: 11px;
      padding: 3px 8px;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.15s;
    }
    .listing-copy-btn:hover { border-color: var(--accent); color: var(--accent); }
    .listing-copy-btn.copied { border-color: var(--green); color: var(--green); }

    .listing-tags-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 10px 12px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .listing-tag {
      background: var(--accent-dim);
      color: var(--accent);
      font-size: 11px;
      padding: 3px 8px;
      border-radius: var(--radius-lg);
      font-weight: 500;
    }

    .listing-gen-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding: 16px 24px;
      border-top: 1px solid var(--border);
    }
    .listing-gen-btn {
      background: var(--accent-dim);
      color: var(--accent);
      border: 1px solid transparent;
      font-weight: 600;
    }
    .listing-gen-btn:hover {
      background: var(--accent);
      color: #fff;
    }
    .listing-push-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      font-weight: 600;
    }
    .listing-push-btn:hover { opacity: 0.9; }

    /* ─── Jarvis Marketing Intelligence Panel ─── */
    .jarvis-marketing-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
      overflow: hidden;
    }
    .jarvis-marketing-panel .jm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      cursor: pointer;
      user-select: none;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
    }
    .jarvis-marketing-panel .jm-header:hover {
      background: rgba(var(--accent-rgb, 74, 111, 255), 0.04);
    }
    .jarvis-marketing-panel .jm-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .jarvis-marketing-panel .jm-header-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--text-primary);
    }
    .jarvis-marketing-panel .jm-header-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: var(--radius);
      background: var(--accent);
      color: #fff;
      font-weight: 600;
    }
    .jarvis-marketing-panel .jm-chevron {
      transition: transform 0.2s;
      color: var(--text-secondary);
      font-size: 14px;
    }
    .jarvis-marketing-panel.collapsed .jm-chevron {
      transform: rotate(-90deg);
    }
    .jarvis-marketing-panel.collapsed .jm-body {
      display: none;
    }
    .jarvis-marketing-panel .jm-body {
      padding: 16px 18px;
    }
    .jarvis-marketing-panel .jm-summary {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 16px;
      padding: 12px 14px;
      background: rgba(var(--accent-rgb, 74, 111, 255), 0.05);
      border-radius: var(--radius);
      border-left: 3px solid var(--accent);
    }

    /* Channel cards grid */
    .jm-channel-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }
    .channel-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      transition: border-color 0.15s;
    }
    .channel-card:hover {
      border-color: var(--accent);
    }
    .channel-card .cc-name {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }
    .channel-card .cc-roas {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .channel-card .cc-detail {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* ROAS indicator colors */
    .roas-indicator.good { color: var(--success, #22c55e); }
    .roas-indicator.warning { color: var(--warning-color, #f59e0b); }
    .roas-indicator.poor { color: var(--danger-color, #ef4444); }

    /* Budget recommendation cards */
    .jm-recs {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }
    .jm-rec-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--bg);
    }
    .jm-rec-card .jm-rec-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
    }
    .jm-rec-card .jm-rec-icon.sev-high { background: var(--danger-color, #ef4444); }
    .jm-rec-card .jm-rec-icon.sev-medium { background: var(--warning-color, #f59e0b); }
    .jm-rec-card .jm-rec-icon.sev-low { background: var(--success, #22c55e); }
    .jm-rec-card .jm-rec-body { flex: 1; }
    .jm-rec-card .jm-rec-channel {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    .jm-rec-card .jm-rec-action {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .jm-rec-card .jm-rec-rationale {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .jm-rec-card .jm-rec-metrics {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    /* Data window notice */
    .jm-data-window {
      font-size: 11px;
      color: var(--text-muted);
      text-align: right;
      margin-top: 8px;
      margin-bottom: 12px;
    }

    /* Section sub-headers within the Jarvis panel */
    .jm-section-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 10px;
      margin-top: 4px;
    }

    /* Warning banner for insufficient data */
    .jm-warning-banner {
      padding: 10px 14px;
      border-radius: var(--radius);
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.25);
      font-size: 13px;
      color: var(--warning-color, #f59e0b);
      margin-bottom: 14px;
      line-height: 1.5;
    }

    /* Generic loading spinner (used by Jarvis panels) */
    .loading-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }

    /* ─── Customer Story Panel ─── */

    .customer-story-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: csOverlayIn 0.2s ease-out;
    }

    @keyframes csOverlayIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .customer-story-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      width: 680px;
      max-width: calc(100vw - 48px);
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
      animation: csPanelIn 0.25s ease-out;
    }

    @keyframes csPanelIn {
      from { opacity: 0; transform: translateY(12px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .cs-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px 16px;
      border-bottom: 1px solid var(--border);
    }

    .cs-panel-header h3 {
      font-size: 16px;
      font-weight: 700;
      margin: 0;
    }

    .cs-panel-close {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      padding: 4px;
      border-radius: var(--radius-sm);
    }

    .cs-panel-close:hover {
      color: var(--text);
      background: var(--surface-2);
    }

    .cs-panel-body {
      padding: 20px 24px 24px;
    }

    .cs-loading {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
      font-size: 13px;
    }

    .cs-loading-spinner {
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: csSpin 0.7s linear infinite;
      margin-bottom: 12px;
    }

    @keyframes csSpin {
      to { transform: rotate(360deg); }
    }

    /* Metrics row */
    .customer-metrics-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 20px;
    }

    .cs-metric-card {
      background: var(--surface-2);
      border-radius: var(--radius);
      padding: 12px 14px;
      text-align: center;
    }

    .cs-metric-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }

    .cs-metric-label {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    /* Risk badge */
    .cs-risk-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: var(--radius-lg);
      margin-bottom: 16px;
    }

    .cs-risk-badge.risk-low { background: var(--green-dim); color: var(--green); }
    .cs-risk-badge.risk-medium { background: var(--yellow-dim); color: var(--yellow); }
    .cs-risk-badge.risk-high { background: var(--red-dim); color: var(--red); }
    .cs-risk-badge.risk-unknown { background: var(--surface-2); color: var(--text-muted); }

    .cs-risk-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }

    /* Narrative */
    .cs-section-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 8px;
    }

    .cs-narrative {
      font-size: 13px;
      line-height: 1.65;
      color: var(--text);
      margin-bottom: 20px;
      white-space: pre-wrap;
    }

    /* Timeline */
    .customer-timeline {
      position: relative;
      padding-left: 24px;
      margin-bottom: 20px;
    }

    .customer-timeline::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 4px;
      bottom: 4px;
      width: 2px;
      background: var(--border);
      border-radius: 1px;
    }

    .timeline-event {
      position: relative;
      padding-bottom: 14px;
      padding-left: 8px;
    }

    .timeline-event:last-child {
      padding-bottom: 0;
    }

    .timeline-event::before {
      content: '';
      position: absolute;
      left: -21px;
      top: 5px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--surface);
      border: 2px solid var(--border);
      z-index: var(--z-base);
    }

    .timeline-event[data-type="order"]::before { border-color: var(--accent); background: var(--accent); }
    .timeline-event[data-type="refund"]::before { border-color: var(--red); background: var(--red); }
    .timeline-event[data-type="return"]::before { border-color: var(--yellow); background: var(--yellow); }
    .timeline-event[data-type="ticket"]::before { border-color: var(--blue); background: var(--blue); }
    .timeline-event[data-type="cancelled"]::before { border-color: var(--text-muted); background: var(--text-muted); }

    .timeline-event-date {
      font-size: 10px;
      color: var(--text-muted);
      font-weight: 500;
      margin-bottom: 1px;
    }

    .timeline-event-desc {
      font-size: 12px;
      color: var(--text);
    }

    .timeline-event-type {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 1px 5px;
      border-radius: 3px;
      margin-right: 4px;
    }

    .timeline-event-type.type-order { background: var(--accent-dim); color: var(--accent); }
    .timeline-event-type.type-refund { background: var(--red-dim); color: var(--red); }
    .timeline-event-type.type-return { background: var(--yellow-dim); color: var(--yellow); }
    .timeline-event-type.type-ticket { background: var(--blue-dim); color: var(--blue); }
    .timeline-event-type.type-cancelled { background: var(--surface-2); color: var(--text-muted); }

    /* Recommendations */
    .cs-recommendations {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 8px;
    }

    .cs-rec-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--text);
      padding: 8px 12px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      line-height: 1.5;
    }

    .cs-rec-bullet {
      color: var(--accent);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* View Story button */
    .ct-story-btn {
      padding: 4px 12px;
      border-radius: 5px;
      border: 1px solid var(--accent);
      background: transparent;
      color: var(--accent);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }

    .ct-story-btn:hover {
      background: var(--accent);
      color: #000;
    }

    .ct-story-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    @media (max-width: 600px) {
      .customer-metrics-row { grid-template-columns: repeat(2, 1fr); }
      .customer-story-panel { border-radius: var(--radius); }
    }

    /* ─── Jarvis Entity Deep Links ─── */
    .jg-entity-link {
      color: var(--accent);
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 2px;
      cursor: pointer;
      transition: color 0.15s, text-decoration-color 0.15s;
      font-weight: 500;
    }
    .jg-entity-link:hover {
      color: var(--accent-light);
      text-decoration-style: solid;
    }
    .jg-sku-link::before {
      content: '\25A0';
      font-size: 0.65em;
      margin-right: 2px;
      opacity: 0.6;
      vertical-align: middle;
    }
    .jg-order-link::before {
      content: '\2192';
      font-size: 0.8em;
      margin-right: 2px;
      opacity: 0.6;
    }
    .jg-dollar {
      font-weight: 600;
      color: var(--green-bright);
    }
    /* Ensure entity links inside assistant bubbles inherit readable colors */
    .jv-msg-assistant .jg-entity-link,
    .jg-msg-assistant .jg-entity-link {
      color: var(--accent);
    }
    .jv-msg-assistant .jg-entity-link:hover,
    .jg-msg-assistant .jg-entity-link:hover {
      color: var(--accent-light);
    }
    .jv-msg-assistant .jg-dollar,
    .jg-msg-assistant .jg-dollar {
      color: var(--green-bright);
    }
    /* Inside user bubbles (white text on gold bg), keep links readable */
    .jv-msg-user .jg-entity-link,
    .jg-msg-user .jg-entity-link {
      color: #fff;
      text-decoration-color: rgba(255,255,255,0.5);
    }
    .jv-msg-user .jg-dollar,
    .jg-msg-user .jg-dollar {
      color: #fff;
      font-weight: 700;
    }

    /* ─── Signal Health Grid ─── */

    @media (max-width: 640px) {
    }

    /* ─── Jarvis Notification Bell ─── */
    .jarvis-notification-bell {
      position: relative;
    }

    /* ─── Jarvis Global Chat Panel ─── */
    .jarvis-global-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
      z-index: var(--z-palette); /* was 9998 — nearest lower token */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .jarvis-global-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .jarvis-global-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 400px;
      height: 100vh;
      height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: var(--z-toast);
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    }
    .jarvis-global-panel.active {
      transform: translateX(0);
    }

    .jg-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      background: var(--surface);
    }
    .jg-header-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      letter-spacing: -0.5px;
    }
    .jg-header-info {
      flex: 1;
    }
    .jg-header-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }
    .jg-header-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .jg-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .jg-header-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      cursor: pointer;
      padding: 5px 8px;
      font-size: 11px;
      font-weight: 600;
      transition: all 0.15s;
      font-family: var(--font);
    }
    .jg-header-btn:hover {
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--border-hover);
    }

    #jg-messages {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      -webkit-overflow-scrolling: touch;
    }

    .jg-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-dim);
      gap: 8px;
      padding: 40px 20px;
    }
    .jg-empty-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -1px;
      opacity: 0.7;
    }
    .jg-empty-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .jg-empty-text {
      font-size: 13px;
      text-align: center;
      line-height: 1.6;
      color: var(--text-dim);
    }

    .jg-msg {
      display: flex;
      flex-direction: column;
      max-width: 85%;
      animation: jgFadeIn 0.2s ease-out;
    }
    @keyframes jgFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .jg-msg-user {
      align-self: flex-end;
      align-items: flex-end;
    }
    .jg-msg-assistant {
      align-self: flex-start;
      align-items: flex-start;
    }
    .jg-msg-bubble {
      padding: 10px 14px;
      border-radius: var(--radius-lg);
      font-size: 13px;
      line-height: 1.6;
      word-break: break-word;
      counter-reset: jg-ol;
    }
    .jg-msg-user .jg-msg-bubble {
      background: var(--accent);
      color: #fff;
      border-bottom-right-radius: 4px;
    }
    .jg-msg-assistant .jg-msg-bubble {
      background: var(--surface-2);
      color: var(--text);
      border-bottom-left-radius: 4px;
    }
    .jg-msg-bubble code.jg-inline-code {
      background: rgba(0, 0, 0, 0.08);
      padding: 1px 5px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-family: var(--font-mono);
    }
    .jg-msg-user .jg-msg-bubble code.jg-inline-code {
      background: rgba(0, 0, 0, 0.15);
    }
    .jg-msg-bubble pre.jg-code-block {
      background: rgba(0, 0, 0, 0.1);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      line-height: 1.5;
      overflow-x: auto;
      margin: 6px 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-family: var(--font-mono);
    }
    .jg-msg-user .jg-msg-bubble pre.jg-code-block {
      background: rgba(0, 0, 0, 0.2);
    }
    .jg-msg-bubble pre.jg-code-block code {
      background: none;
      padding: 0;
      border-radius: 0;
      font-size: 11px;
    }
    .jg-msg-bubble .jg-h1 { font-size: 16px; font-weight: 700; margin: 6px 0 3px; }
    .jg-msg-bubble .jg-h2 { font-size: 14px; font-weight: 700; margin: 5px 0 2px; }
    .jg-msg-bubble .jg-h3 { font-size: 13px; font-weight: 700; margin: 4px 0 2px; opacity: 0.9; }
    .jg-msg-bubble .jg-li {
      padding-left: 14px;
      position: relative;
      margin: 2px 0;
    }
    .jg-msg-bubble .jg-li::before {
      content: '\2022';
      position: absolute;
      left: 3px;
      color: inherit;
      opacity: 0.5;
    }
    .jg-msg-bubble .jg-li.jg-li-ord {
      counter-increment: jg-ol;
    }
    .jg-msg-bubble .jg-li.jg-li-ord::before {
      content: counter(jg-ol) '.';
      font-size: 11px;
    }

    .jg-msg-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 3px;
      padding: 0 4px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .jg-msg-status {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-weight: 600;
    }
    .jg-msg-status.pending { color: var(--yellow); }
    .jg-msg-status.processing { color: var(--blue); }
    .jg-msg-status.error { color: var(--red); }

    .jg-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px;
    }
    .jg-suggested-action {
      background: rgba(166, 124, 82, 0.1);
      border: 1px solid rgba(166, 124, 82, 0.25);
      border-radius: var(--radius-lg);
      padding: 4px 12px;
      font-size: 11px;
      color: var(--accent);
      cursor: pointer;
      transition: all 0.15s;
      font-family: var(--font);
      font-weight: 500;
    }
    .jg-suggested-action:hover {
      background: rgba(166, 124, 82, 0.2);
      border-color: var(--accent);
    }

    .jg-data-card {
      margin-top: 8px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .jg-data-card-title {
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .jg-data-card-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 3px 0;
      font-size: 12px;
    }
    .jg-data-card-label {
      color: var(--text-muted);
    }
    .jg-data-card-value {
      font-weight: 600;
      color: var(--text);
    }

    .jg-typing {
      align-self: flex-start;
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 10px 14px;
      background: var(--surface-2);
      border-radius: var(--radius-lg);
      border-bottom-left-radius: 4px;
    }
    .jg-typing-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text-dim);
      animation: jgBounce 1.4s ease-in-out infinite;
    }
    .jg-typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .jg-typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes jgBounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-5px); }
    }

    .jg-input-area {
      padding: 14px 20px;
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      background: var(--surface);
    }
    .jg-input-row {
      display: flex;
      gap: 8px;
      align-items: flex-end;
    }
    .jg-input {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.5;
      resize: none;
      min-height: 40px;
      max-height: 120px;
      background: var(--surface);
      color: var(--text);
      font-family: var(--font);
      outline: none;
      transition: border-color 0.15s;
    }
    .jg-input:focus {
      border-color: var(--accent);
    }
    .jg-input::placeholder {
      color: var(--text-dim);
    }
    .jg-send-btn {
      width: 40px;
      height: 40px;
      border-radius: var(--radius);
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--radius);
      color: var(--text-muted);
      transition: background 0.15s, color 0.15s;
    }
    .jarvis-notification-bell:hover {
      background: var(--surface-2);
      color: var(--text);
    }
    .jarvis-notification-bell.has-notifications {
      color: var(--text);
    }

    /* Badge */
    .jarvis-notification-badge {
      position: absolute;
      top: 2px;
      right: 2px;
      min-width: 16px;
      height: 16px;
      border-radius: var(--radius);
      background: var(--red);
      color: #fff;
      font-size: 10px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      line-height: 1;
      pointer-events: none;
      animation: jarvis-badge-pop 0.3s ease;
    }
    @keyframes jarvis-badge-pop {
      0% { transform: scale(0); }
      60% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    /* Panel */
    .jarvis-notification-panel {
      position: absolute;
      top: 48px;
      right: 0;
      width: 380px;
      max-height: 480px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      z-index: var(--z-modal-content);
      display: flex;
      flex-direction: column;
      transform: scale(0.95) translateY(-4px);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.2s ease, opacity 0.15s ease;
    }
    .jarvis-notification-panel.open {
      transform: scale(1) translateY(0);
      opacity: 1;
      pointer-events: all;
    }

    .jarvis-notif-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .jarvis-notif-panel-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .jarvis-notif-dismiss-all {
      background: none;
      border: none;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      transition: background 0.15s;
    }
    .jarvis-notif-dismiss-all:hover {
      background: var(--surface-2);
      color: var(--text);
    }

    .jarvis-notif-panel-body {
      overflow-y: auto;
      flex: 1;
      max-height: 420px;
    }

    .jarvis-notif-empty {
      padding: 40px 16px;
      text-align: center;
      color: var(--text-dim);
      font-size: 12px;
    }

    /* Individual notification items */
    .jarvis-notification-item {
      display: flex;
      gap: 10px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      transition: background 0.15s;
      cursor: default;
      position: relative;
    }
    .jarvis-notification-item:last-child {
      border-bottom: none;
    }
    .jarvis-notification-item:hover {
      background: var(--surface-2);
    }
    .jarvis-notification-item.unread {
      background: rgba(37, 99, 235, 0.03);
    }

    .jarvis-notif-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      margin-top: 2px;
    }
    .jarvis-notif-icon.priority-critical {
      background: var(--red-dim);
      color: var(--red);
    }
    .jarvis-notif-icon.priority-warning {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .jarvis-notif-icon.priority-info {
      background: var(--blue-dim);
      color: var(--blue);
    }

    .jarvis-notif-content {
      flex: 1;
      min-width: 0;
    }
    .jarvis-notif-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .jarvis-notif-message {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.4;
      margin-top: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .jarvis-notif-meta {
      font-size: 10px;
      color: var(--text-dim);
      margin-top: 3px;
    }

    .jarvis-notif-dismiss-btn {
      position: absolute;
      top: 8px;
      right: 10px;
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      font-size: 14px;
      padding: 2px 4px;
      border-radius: var(--radius-sm);
      opacity: 0;
      transition: opacity 0.15s, background 0.15s;
    }
    .jarvis-notification-item:hover .jarvis-notif-dismiss-btn {
      opacity: 1;
    }
    .jarvis-notif-dismiss-btn:hover {
      background: var(--surface-3);
      color: var(--text);
    }

    /* New notification slide-in animation */
    @keyframes jarvis-notif-slide-in {
      from {
        opacity: 0;
        transform: translateX(8px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    .jarvis-notification-item.new-item {
      animation: jarvis-notif-slide-in 0.25s ease;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .jarvis-notification-panel {
        width: calc(100vw - 32px);
        right: -60px;
      }
    }
    @media (max-width: 480px) {
      .jarvis-notification-panel {
        width: calc(100vw - 16px);
        right: -80px;
      }
    }

    /* ─── Jarvis Stockout Predictions ─── */
    .jarvis-inventory-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-bottom: 16px;
    }
    .jarvis-inventory-panel .jip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .jarvis-inventory-panel .jip-title {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .jarvis-inventory-panel .jip-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .jip-summary-badges {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .jip-summary-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: var(--radius-lg);
    }
    .jip-summary-badge.critical {
      background: var(--red-dim);
      color: var(--red);
    }
    .jip-summary-badge.warning {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .jip-recs {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 220px;
      overflow-y: auto;
    }
    .jip-rec-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: var(--surface-2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      line-height: 1.4;
    }
    .jip-rec-row .jip-sku {
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--accent);
      min-width: 120px;
      flex-shrink: 0;
      cursor: pointer;
    }
    .jip-rec-row .jip-sku:hover {
      text-decoration: underline;
    }
    .jip-rec-row .jip-rec-text {
      flex: 1;
      color: var(--text-muted);
    }
    .jip-rec-row .jip-days {
      font-family: var(--font-mono);
      font-weight: 600;
      min-width: 50px;
      text-align: right;
      flex-shrink: 0;
    }
    .jip-toggle {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 11px;
      padding: 3px 10px;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .jip-toggle:hover {
      border-color: var(--text-muted);
    }
    .jip-empty {
      font-size: 12px;
      color: var(--text-dim);
      padding: 8px 0;
    }

    /* Stockout badges inline in inventory rows */
    .stockout-badge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 10px;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 3px;
      white-space: nowrap;
      vertical-align: middle;
      margin-left: 6px;
    }
    .stockout-badge.critical {
      background: var(--red-dim);
      color: var(--red);
    }
    .stockout-badge.warning {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .stockout-badge.ok {
      background: var(--green-dim);
      color: var(--green);
    }
    .stockout-badge.overstock {
      background: var(--blue-dim);
      color: var(--blue);
    }
    .stockout-badge.no-data {
      background: var(--surface-3);
      color: var(--text-dim);
    }

    /* ─── Jarvis Product Health Intelligence ──────────────────────────── */
    .health-grade {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 22px; border-radius: 5px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
      flex-shrink: 0;
    }
    .health-grade.a { background: rgba(34,197,94,0.15); color: var(--green); }
    .health-grade.b { background: rgba(59,130,246,0.15); color: var(--blue, #3b82f6); }
    .health-grade.c { background: rgba(245,158,11,0.15); color: var(--yellow, #f59e0b); }
    .health-grade.d { background: rgba(249,115,22,0.15); color: var(--orange, #f97316); }
    .health-grade.f { background: rgba(239,68,68,0.15); color: var(--red); }

    .jarvis-health-summary {
      display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
      padding: 14px 18px; margin-bottom: 16px;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--radius); font-size: 13px;
    }
    .jarvis-health-summary .jhs-stat {
      display: flex; align-items: center; gap: 6px;
    }
    .jarvis-health-summary .jhs-val {
      font-weight: 700; font-size: 16px;
    }
    .jarvis-health-summary .jhs-label {
      color: var(--text-muted); font-size: 12px;
    }
    .jarvis-health-summary .jhs-grades {
      display: flex; gap: 4px; margin-left: auto;
    }
    .jarvis-health-summary .jhs-grade-count {
      display: flex; align-items: center; gap: 3px; font-size: 12px;
      padding: 2px 8px; border-radius: var(--radius-sm); font-weight: 600;
    }

    .jarvis-product-analysis {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: var(--radius); margin: 4px 0 2px 0; overflow: hidden;
      transition: max-height 0.2s ease;
    }
    .jarvis-product-analysis .jpa-content {
      padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
    }
    .jarvis-product-analysis .jpa-signals {
      display: flex; gap: 10px; flex-wrap: wrap;
    }
    .signal-gauge {
      display: flex; flex-direction: column; gap: 3px; min-width: 110px;
      padding: 8px 10px; background: var(--bg); border-radius: var(--radius-sm);
      border: 1px solid var(--border); flex: 1;
    }
    .signal-gauge .sg-label {
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
      color: var(--text-muted); font-weight: 600;
    }
    .signal-gauge .sg-bar {
      width: 100%; height: 5px; background: var(--border); border-radius: 3px;
      overflow: hidden;
    }
    .signal-gauge .sg-fill {
      height: 100%; border-radius: 3px; transition: width 0.3s ease;
    }
    .signal-gauge .sg-fill.high { background: var(--green); }
    .signal-gauge .sg-fill.mid { background: var(--yellow, #f59e0b); }
    .signal-gauge .sg-fill.low { background: var(--red); }
    .signal-gauge .sg-fill.none { background: var(--text-dim); width: 0 !important; }
    .signal-gauge .sg-detail {
      font-size: 11px; color: var(--text-secondary); line-height: 1.3;
    }
    .jpa-flags {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .jpa-flag {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
      background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.15);
    }
    .jpa-flag.positive {
      background: rgba(34,197,94,0.08); color: var(--green); border-color: rgba(34,197,94,0.15);
    }
    .jpa-recs {
      display: flex; flex-direction: column; gap: 4px;
    }
    .jpa-rec {
      font-size: 12px; color: var(--text-secondary); padding-left: 14px;
      position: relative; line-height: 1.4;
    }
    .jpa-rec::before {
      content: '\2192'; position: absolute; left: 0; color: var(--text-muted);
    }

    /* ─── Jarvis Returns Intelligence Panel ─── */
    .jarvis-returns-panel {
      margin: 0 0 20px;
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      border: 1px solid rgba(124, 58, 237, 0.25);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .jarvis-returns-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      cursor: pointer;
      user-select: none;
    }
    .jarvis-returns-header:hover { background: rgba(124, 58, 237, 0.06); }
    .jarvis-returns-brand {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .jarvis-returns-brand .jarvis-dot {
      width: 8px; height: 8px;
      background: #a78bfa;
      border-radius: 50%;
      animation: jarvisPulse 2s ease-in-out infinite;
    }
    @keyframes jarvisPulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; box-shadow: 0 0 6px #a78bfa; }
    }
    .jarvis-returns-brand span {
      font-size: 13px;
      font-weight: 700;
      color: #a78bfa;
      letter-spacing: 0.5px;
    }
    .jarvis-returns-toggle {
      font-size: 11px;
      color: var(--slate);
      transition: transform 0.2s;
    }
    .jarvis-returns-toggle.expanded { transform: rotate(180deg); }
    .jarvis-returns-body {
      padding: 0 16px 16px;
      display: none;
    }
    .jarvis-returns-body.open { display: block; }
    .jarvis-returns-summary {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 16px;
      padding: 10px 12px;
      background: rgba(255,255,255,0.04);
      border-radius: var(--radius-sm);
    }
    .jarvis-ret-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px;
    }
    @media (max-width: 768px) {
      .jarvis-ret-grid { grid-template-columns: 1fr; }
    }
    .jarvis-ret-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(124, 58, 237, 0.15);
      border-radius: var(--radius-sm);
      padding: 12px;
    }
    .jarvis-ret-card-title {
      font-size: 10px;
      font-weight: 600;
      color: var(--slate);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    .jarvis-ret-stat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .jarvis-ret-stat-row:last-child { border-bottom: none; }
    .jarvis-ret-stat-label {
      font-size: 11px;
      color: var(--slate);
    }
    .jarvis-ret-stat-value {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      font-family: var(--font-mono);
    }
    .jarvis-ret-product-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .jarvis-ret-product-row:last-child { border-bottom: none; }
    .jarvis-ret-sku {
      font-size: 11px;
      color: #a78bfa;
      font-family: var(--font-mono);
      min-width: 100px;
    }
    .jarvis-ret-product-title {
      font-size: 11px;
      color: var(--slate);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .jarvis-ret-product-rate {
      font-size: 11px;
      font-weight: 600;
      font-family: var(--font-mono);
      min-width: 44px;
      text-align: right;
    }
    .return-trend-up {
      color: var(--red);
    }
    .return-trend-up::before {
      content: '\25B2 ';
      font-size: 9px;
    }
    .return-trend-down {
      color: var(--green);
    }
    .return-trend-down::before {
      content: '\25BC ';
      font-size: 9px;
    }
    .return-trend-stable {
      color: var(--slate);
    }
    .return-trend-stable::before {
      content: '\2014 ';
      font-size: 9px;
    }
    .product-flag {
      display: inline-block;
      background: rgba(220, 38, 38, 0.15);
      color: #f87171;
      font-size: 9px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .jarvis-ret-returner-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .jarvis-ret-returner-row:last-child { border-bottom: none; }
    .jarvis-ret-returner-name {
      font-size: 11px;
      color: var(--text);
      flex: 1;
    }
    .jarvis-ret-returner-count {
      font-size: 11px;
      font-weight: 600;
      color: #f87171;
      font-family: var(--font-mono);
    }
    .jarvis-ret-returner-risk {
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 3px;
      font-weight: 600;
    }
    .jarvis-ret-risk-high {
      background: rgba(220, 38, 38, 0.15);
      color: #f87171;
    }
    .jarvis-ret-risk-medium {
      background: rgba(217, 119, 6, 0.15);
      color: #fbbf24;
    }
    .jarvis-ret-risk-low {
      background: rgba(22, 163, 74, 0.15);
      color: #4ade80;
    }
    .jarvis-ret-loading {
      text-align: center;
      padding: 20px;
      color: var(--slate);
      font-size: 12px;
    }

    /* ─── Jarvis Reorder Intelligence Panel ─── */

    .jarvis-reorder-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .jarvis-reorder-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap;
      gap: 8px;
    }

    .jarvis-stat-chip {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 6px 16px;
      background: var(--bg-hover, var(--surface-2));
      border-radius: var(--radius-sm);
    }

    .confidence-bar {
      position: relative;
      width: 100%;
      min-width: 70px;
      height: 16px;
      background: var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .confidence-bar-fill {
      height: 100%;
      border-radius: var(--radius);
      transition: width 0.3s ease;
    }

    .confidence-bar-label {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 10px;
      font-weight: 600;
      line-height: 16px;
      color: var(--text);
      mix-blend-mode: difference;
    }

    .velocity-sparkline {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 24px;
    }

    .velocity-sparkline-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
    }

    .velocity-sparkline-bar {
      width: 5px;
      min-height: 2px;
      border-radius: 1px;
    }

    .jarvis-approve-btn,
    .jarvis-reject-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      transition: all 0.15s;
    }

    .jarvis-approve-btn:hover {
      background: var(--green-dim);
      border-color: var(--green);
      color: var(--green);
    }

    .jarvis-reject-btn:hover {
      background: var(--red-dim);
      border-color: var(--red);
      color: var(--red);
    }

    /* ─── Decision Audit Dashboard ─── */
    .decisions-summary-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    @media (max-width: 768px) {
      .decisions-summary-cards { grid-template-columns: repeat(2, 1fr); }
    }

    .decision-status-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--radius);
      font-size: 11px;
      font-weight: 600;
      text-transform: capitalize;
    }
    .decision-status-badge[data-status="pending"] {
      background: var(--yellow-dim);
      color: var(--yellow);
    }
    .decision-status-badge[data-status="approved"] {
      background: var(--green-dim);
      color: var(--green);
    }
    .decision-status-badge[data-status="rejected"] {
      background: var(--red-dim);
      color: var(--red);
    }
    .decision-status-badge[data-status="executed"] {
      background: var(--blue-dim);
      color: var(--blue);
    }

    /* ─── Jarvis Financial Intelligence Panel ─── */
    .jarvis-finance-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 16px;
      overflow: hidden;
    }

    .jarvis-finance-panel .jfp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(135deg, rgba(166,124,82,0.04) 0%, transparent 60%);
    }

    .jarvis-finance-panel .jfp-header-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .jarvis-finance-panel .jfp-badge {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-dim);
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }

    .jarvis-finance-panel .jfp-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .jarvis-finance-panel .jfp-timestamp {
      font-size: 10px;
      color: var(--text-dim);
    }

    .jarvis-finance-panel .jfp-body {
      padding: 16px;
    }

    .jarvis-finance-panel .jfp-summary {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 14px;
      padding: 10px 12px;
      background: var(--bg);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--accent);
    }

    .jarvis-finance-panel .jfp-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }

    .jarvis-finance-panel .jfp-metric {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
    }

    .jarvis-finance-panel .jfp-metric-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-dim);
      margin-bottom: 4px;
    }

    .jarvis-finance-panel .jfp-metric-value {
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-mono);
    }

    .jarvis-finance-panel .jfp-metric-detail {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .jarvis-finance-panel .jfp-alerts {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .jarvis-finance-panel .jfp-alert {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      font-size: 12px;
    }

    .jarvis-finance-panel .jfp-alert.critical {
      background: var(--red-dim);
      color: var(--red);
      border: 1px solid rgba(220, 38, 38, 0.15);
    }

    .jarvis-finance-panel .jfp-alert.warning {
      background: var(--yellow-dim);
      color: var(--yellow);
      border: 1px solid rgba(217, 119, 6, 0.15);
    }

    .jarvis-finance-panel .jfp-alert.info {
      background: var(--blue-dim);
      color: var(--blue);
      border: 1px solid rgba(37, 99, 235, 0.15);
    }

    .jarvis-finance-panel .jfp-alert-icon {
      flex-shrink: 0;
      font-size: 14px;
    }

    .jarvis-finance-panel .jfp-products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .jarvis-finance-panel .jfp-product-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
    }

    .jarvis-finance-panel .jfp-product-sku {
      font-size: 10px;
      font-weight: 600;
      font-family: var(--font-mono);
      color: var(--text-dim);
      margin-bottom: 2px;
    }

    .jarvis-finance-panel .jfp-product-title {
      font-size: 12px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .jarvis-finance-panel .jfp-product-stats {
      display: flex;
      gap: 8px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .trend-up { color: var(--green); }
    .trend-down { color: var(--red); }
    .trend-flat { color: var(--text-dim); }

    .margin-health {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
    }

    .margin-health.healthy {
      color: var(--green);
      background: var(--green-dim);
    }

    .margin-health.caution {
      color: var(--yellow);
      background: var(--yellow-dim);
    }

    .margin-health.critical {
      color: var(--red);
      background: var(--red-dim);
    }

/* ─── Jarvis Revenue Attribution Panel ─── */
.jarvis-attribution-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 20px;
  overflow: hidden;
}
.jarvis-attribution-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.jarvis-attribution-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-attribution-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.jarvis-attribution-ts {
  font-size: 11px;
  color: var(--text-dim);
}
.jarvis-attribution-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.jarvis-attribution-summary {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Donut chart + channel grid */
.jarvis-attribution-top {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .jarvis-attribution-top {
    grid-template-columns: 1fr;
  }
}

/* Pure CSS donut chart */
.jarvis-donut-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.jarvis-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(var(--jarvis-donut-bg, var(--bg-alt)) 0% 100%);
}
.jarvis-donut::after {
  content: '';
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  background: var(--surface);
}
.jarvis-donut-center {
  position: absolute;
  inset: 36px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-base);
  pointer-events: none;
}
.jarvis-donut-center-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.jarvis-donut-center-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.jarvis-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.jarvis-donut-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-muted);
}
.jarvis-donut-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Channel contribution margin cards */
.jarvis-attribution-channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.jarvis-attribution-channel-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jarvis-attribution-channel-card.top-channel {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-alt));
}
.jarvis-attribution-channel-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.jarvis-attribution-channel-revenue {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.jarvis-attribution-channel-pct {
  font-size: 11px;
  color: var(--text-dim);
}
.jarvis-attribution-cm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.jarvis-attribution-cm-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.jarvis-attribution-cm-value.positive { color: var(--green); }
.jarvis-attribution-cm-value.negative { color: var(--red); }
.jarvis-attribution-cm-value.neutral  { color: var(--text-dim); }

/* Gems + ad-dependent lists */
.jarvis-attribution-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .jarvis-attribution-lists {
    grid-template-columns: 1fr;
  }
}
.jarvis-attribution-list-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.jarvis-attribution-list-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-attribution-list-header .list-icon {
  font-size: 13px;
}
.jarvis-attribution-gem-icon { color: var(--green); }
.jarvis-attribution-dep-icon { color: var(--yellow); }
.jarvis-attribution-list-empty {
  padding: 16px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.jarvis-attribution-list-item {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.jarvis-attribution-list-item:last-child { border-bottom: none; }
.jarvis-attribution-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.jarvis-attribution-item-sku {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
}
.jarvis-attribution-item-title {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.jarvis-attribution-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.jarvis-attribution-item-rev {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.jarvis-attribution-item-meta {
  font-size: 10px;
  color: var(--text-dim);
}
.jarvis-attribution-item-paid-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--yellow);
}

/* ─── Jarvis Ad Intelligence Panel ──────────────────────────────────────────── */

.jarvis-ad-intel-section {
  margin-top: 32px;
}

/* Portfolio ROAS gauge */
.jarvis-ad-intel-gauge {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  margin-bottom: 24px;
}

.jarvis-ad-intel-gauge-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.jarvis-ad-intel-gauge-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 4px;
}

.jarvis-ad-intel-gauge-meta {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.jarvis-ad-intel-gauge-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jarvis-ad-intel-gauge-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.jarvis-ad-intel-gauge-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ROAS tier badges */
.roas-tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.roas-tier-S {
  background: rgba(255, 200, 0, 0.18);
  color: #f5c518;
  border: 1px solid rgba(255, 200, 0, 0.3);
}

.roas-tier-A {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.roas-tier-B {
  background: rgba(59, 130, 246, 0.15);
  color: var(--blue);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.roas-tier-C {
  background: rgba(234, 179, 8, 0.12);
  color: var(--yellow);
  border: 1px solid rgba(234, 179, 8, 0.22);
}

.roas-tier-D {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.22);
}

/* Tier distribution bar */
.jarvis-ad-intel-tier-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.jarvis-ad-intel-tier-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
}

/* Two-column performers grid */
.jarvis-ad-intel-performers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

@media (max-width: 900px) {
  .jarvis-ad-intel-performers {
    grid-template-columns: 1fr;
  }
}

.jarvis-ad-intel-performers-card {
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.jarvis-ad-intel-performers-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-tertiary);
}

.jarvis-ad-intel-sku-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
  transition: background 0.1s;
}

.jarvis-ad-intel-sku-row:last-child {
  border-bottom: none;
}

.jarvis-ad-intel-sku-row:hover {
  background: var(--surface-hover);
}

.jarvis-ad-intel-sku-name {
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jarvis-ad-intel-sku-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.jarvis-ad-intel-roas-val {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.jarvis-ad-intel-spend {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Budget recommendation cards */
.jarvis-ad-intel-recs {
  margin-bottom: 24px;
}

.jarvis-ad-intel-recs-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.jarvis-ad-intel-rec-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  margin-bottom: 10px;
  transition: border-color 0.15s;
}

.jarvis-ad-intel-rec-card:hover {
  border-color: var(--border-medium);
}

/* .jarvis-ad-intel-rec-card.action-{pause,scale,review,hold} — DEAD:
   action-pause/scale/review/hold classes have zero JS/HTML references;
   jm-rec-card (the live replacement) uses sev-${severity} coloring instead.
   Confirmed 2026-06-05. */

.jarvis-ad-intel-rec-body {
  flex: 1;
  min-width: 0;
}

.jarvis-ad-intel-rec-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jarvis-ad-intel-rec-rationale {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.jarvis-ad-intel-rec-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.jarvis-ad-intel-rec-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.jarvis-ad-intel-rec-metric-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.jarvis-ad-intel-rec-metric-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.jarvis-ad-intel-rec-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Action badge */
.ad-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ad-action-badge.pause {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ad-action-badge.scale {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.ad-action-badge.review {
  background: rgba(234, 179, 8, 0.1);
  color: var(--yellow);
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.ad-action-badge.hold {
  background: var(--surface-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* Channel cards */
.jarvis-ad-intel-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .jarvis-ad-intel-channels {
    grid-template-columns: 1fr;
  }
}

.jarvis-ad-intel-channel-card {
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.jarvis-ad-intel-channel-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.jarvis-ad-intel-channel-roas {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.jarvis-ad-intel-channel-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jarvis-ad-intel-channel-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jarvis-ad-intel-channel-stat-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.jarvis-ad-intel-channel-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Data health bar */
.jarvis-ad-intel-health {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 12px;
  color: var(--text-muted);
}

.jarvis-ad-intel-health-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Pause safety notice */
.jarvis-ad-intel-pause-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(234, 179, 8, 0.06);
  border: 1px solid rgba(234, 179, 8, 0.18);
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.jarvis-ad-intel-pause-notice-icon {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ─── Jarvis Container Intelligence ────────────────────────────────────────── */

.jarvis-container-intel-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 20px;
  overflow: hidden;
}
.jarvis-container-intel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.jarvis-container-intel-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-container-intel-icon {
  font-size: 15px;
  color: var(--accent);
}
.jarvis-container-intel-body {
  padding: 16px;
}
.jarvis-container-intel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.jarvis-container-intel-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.jarvis-container-intel-urgency-bar {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 4px;
}
.jarvis-container-intel-urgency-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.jarvis-container-intel-urgency-num {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  vertical-align: middle;
}
.jarvis-container-intel-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.jarvis-container-intel-badge.delayed {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-container-intel-badge.overdue {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-container-intel-badge.soon {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jarvis-container-intel-badge.cascade {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-container-intel-badge.warn {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jarvis-container-intel-cascade-banner {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-size: 12px;
  margin-bottom: 14px;
}
@media (max-width: 640px) {
  .jarvis-container-intel-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Jarvis Stockout Forecast Panel ─────────────────────────────────────── */
.jarvis-stockout-forecast-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 16px 0;
}
.jsf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.jsf-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.jsf-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.jsf-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.jsf-threshold-label {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.jsf-threshold-slider {
  width: 100px;
  accent-color: var(--accent);
  cursor: pointer;
}
.jsf-threshold-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  min-width: 36px;
  text-align: right;
}
.jsf-summary-badges {
  display: flex;
  gap: 6px;
  align-items: center;
}
.jsf-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.jsf-badge.red {
  background: var(--red-dim);
  color: var(--red);
}
.jsf-badge.orange {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jsf-badge.yellow {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
}
.jsf-toggle-btn {
  font-size: 12px;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-muted);
}
.jsf-toggle-btn:hover {
  background: var(--surface-3);
}
/* Grid table */
.jsf-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.jsf-grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
}
.jsf-grid td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--surface-2);
  vertical-align: middle;
}
.jsf-grid tr:last-child td {
  border-bottom: none;
}
.jsf-sku-link {
  color: var(--blue);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 12px;
}
.jsf-sku-link:hover {
  text-decoration: underline;
}
.jsf-days-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
}
.jsf-days-badge.red {
  background: var(--red-dim);
  color: var(--red);
}
.jsf-days-badge.orange {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.jsf-days-badge.yellow {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
}
.jsf-days-badge.green {
  background: var(--green-dim);
  color: var(--green);
}
.jsf-days-badge.gray {
  background: var(--surface-2);
  color: var(--text-muted);
}
.jsf-confidence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.jsf-confidence-dot.high { background: var(--green); }
.jsf-confidence-dot.low  { background: var(--yellow); }
.jsf-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px;
  font-size: 13px;
}
.jsf-footer {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   Jarvis Competitor Price Tracker
   ═══════════════════════════════════════════════════════════════════ */

.jarvis-competitor-loading {
  animation: jarvis-competitor-fade-in 0.2s ease-out;
}

.jarvis-competitor-summary,
.jarvis-competitor-matrix,
.jarvis-competitor-moves,
.jarvis-competitor-opps,
.jarvis-competitor-ceilings,
.jarvis-competitor-elasticity,
.jarvis-competitor-gaps {
  animation: jarvis-competitor-fade-in 0.35s ease-out;
}

@keyframes jarvis-competitor-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jarvis-competitor-cat-card,
.jarvis-competitor-opp-card,
.jarvis-competitor-move-card {
  transition: box-shadow 0.15s ease;
}
.jarvis-competitor-cat-card:hover,
.jarvis-competitor-opp-card:hover,
.jarvis-competitor-move-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.jarvis-competitor-bubble:hover {
  opacity: 1 !important;
  z-index: var(--z-sticky);
}

.jarvis-competitor-scatter {
  user-select: none;
}

#jarvis-gap-table thead th:hover {
  background: var(--bg-tertiary, var(--bg-secondary));
  color: var(--primary);
}

/* ─── Jarvis Supplier Scorecard ─── */
.jarvis-supplier-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 20px;
  overflow: hidden;
}
.jarvis-supplier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.jarvis-supplier-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-supplier-icon {
  font-size: 15px;
  color: var(--accent);
}
.jarvis-supplier-body {
  padding: 16px;
}
.jarvis-supplier-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.jarvis-supplier-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 280px;
  flex: 1 1 340px;
}
.jarvis-supplier-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.jarvis-supplier-vendor {
  font-size: 14px;
  font-weight: 600;
}
.jarvis-supplier-grade-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.jarvis-supplier-grade {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
}
.jarvis-supplier-grade.grade-a { color: var(--green); }
.jarvis-supplier-grade.grade-b { color: var(--blue); }
.jarvis-supplier-grade.grade-c { color: var(--yellow); }
.jarvis-supplier-grade.grade-d { color: var(--orange, #f59e0b); }
.jarvis-supplier-grade.grade-f { color: var(--red); }
.jarvis-supplier-score-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.jarvis-supplier-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 600;
}
.jarvis-supplier-trend.improving {
  background: var(--green-dim);
  color: var(--green);
}
.jarvis-supplier-trend.declining {
  background: var(--red-dim);
  color: var(--red);
}
.jarvis-supplier-trend.stable {
  background: var(--surface-3, var(--bg-secondary));
  color: var(--text-muted);
}
.jarvis-supplier-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.jarvis-supplier-metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.jarvis-supplier-metric-label {
  width: 88px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.jarvis-supplier-bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-secondary, rgba(255,255,255,0.06));
  border-radius: 3px;
  overflow: hidden;
}
.jarvis-supplier-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.jarvis-supplier-bar-fill.green { background: var(--green); }
.jarvis-supplier-bar-fill.blue  { background: var(--blue); }
.jarvis-supplier-bar-fill.yellow { background: var(--yellow); }
.jarvis-supplier-bar-fill.red   { background: var(--red); }
.jarvis-supplier-metric-val {
  width: 36px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text);
}
.jarvis-supplier-worst-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}
.jarvis-supplier-worst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.jarvis-supplier-worst-table th {
  color: var(--text-muted);
  font-weight: 500;
  text-align: left;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}
.jarvis-supplier-worst-table td {
  padding: 4px 4px;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.jarvis-supplier-worst-table .mono {
  font-family: var(--font-mono);
  font-size: 10px;
}
.jarvis-supplier-worst-table .complaint-high { color: var(--red); }
.jarvis-supplier-worst-table .complaint-med  { color: var(--yellow); }
.jarvis-supplier-worst-table .complaint-ok   { color: var(--text-muted); }

/* ─── Jarvis Launch Readiness Panel ──────────────────────────────────────── */

.jarvis-readiness-panel {
  margin: 0 0 24px;
  background: linear-gradient(135deg, #0f1a2e 0%, #0d1a26 100%);
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
}

.jarvis-readiness-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.15);
  flex-wrap: wrap;
  gap: 10px;
}

.jarvis-readiness-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jarvis-readiness-title {
  font-size: 14px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.01em;
}

.jarvis-readiness-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.jarvis-readiness-refresh-btn {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.jarvis-readiness-refresh-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
}

/* Stats row inside readiness panel */
.jarvis-readiness-stats {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(59, 130, 246, 0.12);
}

.jarvis-readiness-stat {
  flex: 1;
  padding: 14px 18px;
  border-right: 1px solid rgba(59, 130, 246, 0.1);
  text-align: center;
}

.jarvis-readiness-stat:last-child {
  border-right: none;
}

.jarvis-readiness-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.jarvis-readiness-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Donut chart area */
.jarvis-readiness-donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
  flex-wrap: wrap;
}

.jarvis-readiness-donut-chart {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.jarvis-readiness-donut-svg {
  width: 96px;
  height: 96px;
  transform: rotate(-90deg);
}

.jarvis-readiness-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.jarvis-readiness-donut-pct {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.jarvis-readiness-donut-label {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* Grade legend */
.jarvis-readiness-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  min-width: 140px;
}

.jarvis-readiness-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background 0.12s;
}

.jarvis-readiness-legend-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.jarvis-readiness-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.jarvis-readiness-legend-count {
  font-weight: 700;
  margin-left: auto;
  font-size: 13px;
}

/* Grade A ready banner */

/* Top issues section */
.jarvis-readiness-issues {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.jarvis-readiness-issues-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 10px;
}

.jarvis-readiness-issue-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 12px;
}

.jarvis-readiness-issue-label {
  flex: 1;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.jarvis-readiness-issue-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.jarvis-readiness-issue-fill {
  height: 100%;
  border-radius: 3px;
  background: rgba(239, 68, 68, 0.55);
}

.jarvis-readiness-issue-count {
  font-size: 11px;
  color: var(--text-muted);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* Not-ready SKUs table */
.jarvis-readiness-table-wrap {
  padding: 0 18px 18px;
}

.jarvis-readiness-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 8px;
}

.jarvis-readiness-table-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.jarvis-readiness-grade-filters {
  display: flex;
  gap: 4px;
}

.jarvis-readiness-grade-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.jarvis-readiness-grade-btn.active,
.jarvis-readiness-grade-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

.jarvis-readiness-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.jarvis-readiness-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.jarvis-readiness-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}

.jarvis-readiness-table tr:last-child td {
  border-bottom: none;
}

.jarvis-readiness-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

/* Score badge */
.jrr-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.jrr-score.grade-a { background: rgba(34,197,94,0.18); color: var(--green); }
.jrr-score.grade-b { background: rgba(59,130,246,0.18); color: var(--blue); }
.jrr-score.grade-c { background: rgba(245,158,11,0.18); color: var(--yellow); }
.jrr-score.grade-f { background: rgba(239,68,68,0.15); color: var(--red); }

/* Failing check badges */
.jrr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.jrr-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(239,68,68,0.1);
  color: rgba(239,68,68,0.85);
  border: 1px solid rgba(239,68,68,0.18);
  font-weight: 500;
  white-space: nowrap;
}

/* Fix action button */
.jrr-fix-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgba(59,130,246,0.3);
  background: rgba(59,130,246,0.1);
  color: #93c5fd;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.jrr-fix-btn:hover {
  background: rgba(59,130,246,0.2);
  color: #bfdbfe;
}

/* Ready to Launch banner (grade A section) */
.jarvis-readiness-launch-banner {
  margin: 10px 18px 14px;
  padding: 10px 16px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.18);
  border-radius: var(--radius);
}

.jarvis-readiness-launch-banner-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jarvis-readiness-launch-sku-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jarvis-readiness-launch-sku {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: rgba(34,197,94,0.12);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.2);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}

.jarvis-readiness-launch-sku:hover {
  background: rgba(34,197,94,0.2);
}

@media (max-width: 768px) {
  .jarvis-readiness-stats {
    flex-wrap: wrap;
  }
  .jarvis-readiness-stat {
    flex: 0 0 50%;
    border-bottom: 1px solid rgba(59,130,246,0.1);
  }
  .jarvis-readiness-donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .jarvis-readiness-issue-label {
    max-width: 140px;
  }
}

/* ─── Jarvis SEO Health Panel ─────────────────────────────────────── */

.jarvis-seo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.jarvis-seo-summary-cards {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.jarvis-seo-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  min-width: 120px;
}

.jarvis-seo-card-wide {
  flex: 1;
  min-width: 260px;
}

.jarvis-seo-card-val {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.jarvis-seo-card-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Grade badges */
.jarvis-seo-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.seo-grade-a { background: var(--green); color: #000; }
.seo-grade-b { background: #2196f3; color: #fff; }
.seo-grade-c { background: var(--yellow); color: #000; }
.seo-grade-f { background: var(--red); color: #fff; }

/* Score bar */
.jarvis-seo-score-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
}
.jarvis-seo-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.seo-bar-a { background: var(--green); }
.seo-bar-b { background: #2196f3; }
.seo-bar-c { background: var(--yellow); }
.seo-bar-f { background: var(--red); }

/* Distribution bar */
.jarvis-seo-dist-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  gap: 2px;
  margin-bottom: 8px;
}
.jarvis-seo-dist-seg {
  height: 100%;
  border-radius: 2px;
}
.jarvis-seo-dist-legend {
  display: flex;
  gap: 12px;
  align-items: center;
}
.jarvis-seo-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Toolbar */
.jarvis-seo-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.jarvis-seo-grade-filters {
  display: flex;
  gap: 4px;
}

.jarvis-seo-filter-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.jarvis-seo-filter-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.jarvis-seo-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}
.jarvis-seo-filter-count {
  background: rgba(255,255,255,.15);
  border-radius: var(--radius);
  padding: 1px 5px;
  font-size: 10px;
}
.jarvis-seo-filter-btn.active .jarvis-seo-filter-count {
  background: rgba(0,0,0,.15);
}

.jarvis-seo-sort-group {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: auto;
}
.jarvis-seo-sort-btn {
  padding: 5px 10px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}
.jarvis-seo-sort-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* Table */
.jarvis-seo-table {
  width: 100%;
  border-collapse: collapse;
}
.jarvis-seo-table thead th {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.jarvis-seo-table tbody tr:hover > td {
  background: var(--surface-2);
}
.jarvis-seo-table tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: middle;
  font-size: 13px;
}

/* Issue tags */
.jarvis-seo-issues-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.jarvis-seo-issue-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: rgba(239,68,68,.12);
  color: var(--red-bright);
  border: 1px solid rgba(239,68,68,.2);
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jarvis-seo-more-issues {
  font-size: 10px;
  color: var(--text-muted);
  padding: 2px 5px;
}

/* Fix suggestions */
.jarvis-seo-fix-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all .15s;
}
.jarvis-seo-fix-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.jarvis-seo-fixes-panel {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: 2px;
}
.jarvis-seo-fix-row {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.jarvis-seo-fix-row:last-child { margin-bottom: 0; }
.jarvis-seo-fix-label {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 80px;
}
.jarvis-seo-fix-val {
  color: var(--text-primary);
}
.jarvis-seo-fix-priority {
  color: var(--accent);
  font-weight: 600;
}

/* Bulk fix button */
.jarvis-seo-bulk-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.jarvis-seo-bulk-btn:hover { opacity: .85; }

.jarvis-seo-loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

@media (max-width: 768px) {
  .jarvis-seo-summary-cards { gap: 8px; }
  .jarvis-seo-card { min-width: 100px; }
  .jarvis-seo-sort-group { margin-left: 0; }
}

/* ─── Jarvis Churn Risk Panel ──────────────────────────────────────────────── */
.jarvis-churn-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px 24px;
}
.jarvis-churn-header {
  margin-bottom: 20px;
}
.jarvis-churn-header h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.jarvis-churn-header p {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.jarvis-churn-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.jarvis-churn-card {
  background: var(--surface-2, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.jarvis-churn-card-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.jarvis-churn-card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.jarvis-churn-card-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.jarvis-churn-card.at-risk .jarvis-churn-card-value { color: var(--red, #ef4444); }
.jarvis-churn-card.cooling .jarvis-churn-card-value { color: #f59e0b; }
.jarvis-churn-card.healthy .jarvis-churn-card-value { color: var(--green, #22c55e); }

.jarvis-churn-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.jarvis-churn-table-wrap {
  background: var(--surface-2, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius);
  overflow: hidden;
}
.jarvis-churn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.jarvis-churn-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border, #2a2a3e);
  background: var(--surface-3, #151520);
}
.jarvis-churn-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
  vertical-align: middle;
}
.jarvis-churn-table tr:last-child td { border-bottom: none; }
.jarvis-churn-table tr:hover td { background: var(--surface-3, #151520); }


.jarvis-churn-score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-churn-score-bar-track {
  flex: 1;
  height: 4px;
  background: var(--border, #2a2a3e);
  border-radius: 2px;
  overflow: hidden;
  min-width: 50px;
}
.jarvis-churn-score-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.jarvis-churn-score-bar-fill.high { background: #ef4444; }
.jarvis-churn-score-bar-fill.med  { background: #f59e0b; }
.jarvis-churn-score-bar-fill.low  { background: #22c55e; }

.jarvis-churn-action-cell {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 220px;
}
.jarvis-churn-win-back-btn {
  background: transparent;
  border: 1px solid var(--border, #2a2a3e);
  border-radius: var(--radius-sm);
  color: var(--text, #e0e0e0);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.jarvis-churn-win-back-btn:hover {
  border-color: var(--accent, #6b7fff);
  color: var(--accent, #6b7fff);
}
.jarvis-churn-win-back-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.jarvis-churn-win-back-btn.queued {
  border-color: var(--green-bright);
  color: var(--green-bright);
}

.jarvis-churn-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.jarvis-churn-revenue-at-risk {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13px;
}
.jarvis-churn-revenue-at-risk .amount {
  font-size: 18px;
  font-weight: 700;
  color: var(--red-bright);
}

@media (max-width: 768px) {
  .jarvis-churn-cards { grid-template-columns: 1fr 1fr; }
  .jarvis-churn-table th:nth-child(4),
  .jarvis-churn-table td:nth-child(4) { display: none; }
}

/* ─── Jarvis Pricing Intelligence ─────────────────────────────────────────── */
@media (max-width: 768px) {
}
/* ─── Jarvis Global Chat Panel ─── */
.jarvis-global-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: var(--z-palette); /* was 9998 — nearest lower token */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.jarvis-global-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.jarvis-global-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.jarvis-global-panel.active {
  transform: translateX(0);
}
.jg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.jg-header-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.jg-header-info {
  flex: 1;
}
.jg-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.jg-header-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.jg-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.jg-header-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s;
  font-family: var(--font);
}
.jg-header-btn:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-hover);
}
#jg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.jg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  gap: 8px;
  padding: 40px 20px;
}
.jg-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  opacity: 0.7;
}
.jg-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
}
.jg-empty-text {
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  color: var(--text-dim);
}
/* Context chips shown in empty state — per-view suggested prompts */
.jg-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.jg-context-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  text-align: left;
}
.jg-context-chip:hover {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--accent);
}
.jg-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: jgFadeIn 0.2s ease-out;
}
@keyframes jgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.jg-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}
.jg-msg-assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.jg-msg-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  counter-reset: jg-ol;
}
.jg-msg-user .jg-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.jg-msg-assistant .jg-msg-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.jg-msg-bubble code.jg-inline-code {
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-mono);
}
.jg-msg-user .jg-msg-bubble code.jg-inline-code {
  background: rgba(0, 0, 0, 0.15);
}
.jg-msg-bubble pre.jg-code-block {
  background: rgba(0, 0, 0, 0.1);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
}
.jg-msg-user .jg-msg-bubble pre.jg-code-block {
  background: rgba(0, 0, 0, 0.2);
}
.jg-msg-bubble pre.jg-code-block code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
}
.jg-msg-bubble .jg-h1 { font-size: 16px; font-weight: 700; margin: 6px 0 3px; }
.jg-msg-bubble .jg-h2 { font-size: 14px; font-weight: 700; margin: 5px 0 2px; }
.jg-msg-bubble .jg-h3 { font-size: 13px; font-weight: 700; margin: 4px 0 2px; opacity: 0.9; }
.jg-msg-bubble .jg-li {
  padding-left: 14px;
  position: relative;
  margin: 2px 0;
}
.jg-msg-bubble .jg-li::before {
  content: '\2022';
  position: absolute;
  left: 3px;
  color: inherit;
  opacity: 0.5;
}
.jg-msg-bubble .jg-li.jg-li-ord {
  counter-increment: jg-ol;
}
.jg-msg-bubble .jg-li.jg-li-ord::before {
  content: counter(jg-ol) '.';
  font-size: 11px;
}
.jg-msg-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jg-msg-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.jg-msg-status.pending { color: var(--yellow); }
.jg-msg-status.processing { color: var(--blue); }
.jg-msg-status.error { color: var(--red); }
/* Suggested action chips (from Jarvis suggested_actions) */
.jg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.jg-suggested-action {
  background: rgba(166, 124, 82, 0.1);
  border: 1px solid rgba(166, 124, 82, 0.25);
  border-radius: var(--radius-lg);
  padding: 4px 12px;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  font-weight: 500;
}
.jg-suggested-action:hover {
  background: rgba(166, 124, 82, 0.2);
  border-color: var(--accent);
}
/* Nav chips — appear when Jarvis mentions a section */
.jg-nav-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.jg-nav-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 4px 12px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  font-weight: 500;
}
.jg-nav-chip:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--accent);
}
/* Data cards — structured metric cards returned by Jarvis */
.jg-data-card {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.jg-data-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.jg-data-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}
.jg-data-card-label {
  color: var(--text-muted);
}
.jg-data-card-value {
  font-weight: 600;
  color: var(--text);
}
/* Entity deep links */
.jg-entity-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s, text-decoration-color 0.15s;
  font-weight: 500;
}
.jg-entity-link:hover {
  color: var(--accent-light);
  text-decoration-style: solid;
}
.jg-sku-link::before {
  content: '\25A0';
  font-size: 0.65em;
  margin-right: 2px;
  opacity: 0.6;
  vertical-align: middle;
}
.jg-order-link::before {
  content: '\2192';
  font-size: 0.8em;
  margin-right: 2px;
  opacity: 0.6;
}
.jg-dollar {
  font-weight: 600;
  color: var(--green-bright);
}
.jg-msg-assistant .jg-entity-link { color: var(--accent); }
.jg-msg-assistant .jg-entity-link:hover { color: var(--accent-light); }
.jg-msg-assistant .jg-dollar { color: var(--green-bright); }
.jg-msg-user .jg-entity-link {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.jg-msg-user .jg-dollar { color: #fff; font-weight: 700; }
/* Typing indicator */
.jg-typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: 4px;
}
.jg-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: jgBounce 1.4s ease-in-out infinite;
}
.jg-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.jg-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes jgBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}
/* Input area */
.jg-input-area {
  padding: 14px 20px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.jg-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.jg-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}
.jg-input:focus { border-color: var(--accent); }
.jg-input::placeholder { color: var(--text-dim); }
.jg-send-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.jg-send-btn:hover:not(:disabled) { background: #8b6841; }
.jg-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jg-shortcut-hint {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 6px;
}
.jg-shortcut-hint kbd {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 10px;
  font-family: var(--font-mono);
}
/* Floating Jarvis button */
.jarvis-floating-btn {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: var(--z-palette); /* was 9997 — nearest token preserving position below toast */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -1px;
  box-shadow: 0 4px 16px rgba(166, 124, 82, 0.35);
  transition: all 0.2s ease;
}
.jarvis-floating-btn:hover,
.jarvis-floating-btn:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(166, 124, 82, 0.45);
  outline: 2px solid var(--accent, #c8a97e);
  outline-offset: 3px;
}
.jarvis-floating-btn:active { transform: scale(0.95); }
.jarvis-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
  animation: jarvis-badge-pop 0.3s ease;
}
@keyframes jarvis-badge-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
@media (max-width: 600px) {
  .jarvis-global-panel { width: 100vw; border-left: none; }
  .jarvis-floating-btn { bottom: 76px; right: 16px; width: 48px; height: 48px; font-size: 18px; }
}

/* ─── Event Log View ─────────────────────────────────────────────────────── */
.el-root { padding: 24px 28px; max-width: 1400px; }
.el-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.el-title { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.el-subtitle { font-size: 13px; color: var(--text-dim); margin: 0; }

/* Summary Cards */
.el-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.el-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  min-width: 140px;
  flex: 1;
}
.el-card-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.el-card-value { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1; }
.el-card-ai    .el-card-value, .el-card-ai    { color: var(--accent); }
.el-card-revert .el-card-value                { color: var(--yellow, #f59e0b); }

/* Filters */
.el-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.el-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
}
.el-check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.el-check-label input { cursor: pointer; }

/* Buttons */
.el-btn-refresh, .el-btn-sm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.el-btn-refresh:hover, .el-btn-sm:hover { background: var(--hover); color: var(--text); }
.el-btn-revert {
  background: transparent;
  border: 1px solid var(--red, #ef4444);
  border-radius: 5px;
  color: var(--red, #ef4444);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.el-btn-revert:hover { background: var(--red, #ef4444); color: #fff; }

/* Table */
.el-table-wrap { overflow-x: auto; }
.el-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.el-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.el-table tbody .el-row td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}
.el-row:hover td { background: var(--hover); }
.el-row-reverted td { opacity: 0.5; }
.el-row-reverted:hover td { opacity: 0.7; }

.el-cell-date { white-space: nowrap; font-size: 12px; color: var(--text-dim); }
.el-cell-state code { font-size: 11px; color: var(--text-dim); font-family: monospace; word-break: break-all; }
.el-cell-approved { font-size: 12px; color: var(--text-dim); }
.el-cell-actions { white-space: nowrap; }

.el-actor-name { font-size: 12px; }
.el-entity-name { font-size: 12px; font-weight: 500; }
.el-entity-id   { font-size: 11px; color: var(--text-dim); }

/* Badges */
.el-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.el-badge-ai     { background: rgba(99,102,241,0.15); color: #6366f1; }
.el-badge-claude { background: rgba(166,124,82,0.15); color: var(--accent, #a67c52); }
.el-badge-task   { background: rgba(16,185,129,0.12); color: #10b981; }
.el-badge-human  { background: rgba(59,130,246,0.12); color: #3b82f6; }

.el-action-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--text);
}
.el-action-revert { color: var(--text-dim); font-style: italic; }

.el-reverted-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(239,68,68,0.12);
  color: var(--red, #ef4444);
  font-weight: 600;
  margin-left: 6px;
}

/* Load more */
.el-load-more { text-align: center; padding: 16px 0; }

/* Empty */
.el-empty { padding: 40px; text-align: center; color: var(--text-dim); font-size: 14px; }

@media (max-width: 900px) {
  .el-root { padding: 16px; }
  .el-cards { gap: 8px; }
  .el-card { min-width: 110px; padding: 10px 12px; }
  .el-card-value { font-size: 20px; }
}

/* ── Jarvis Container ROI Panel ─────────────────────────────────────────── */
.jarvis-container-roi-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.jarvis-container-roi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.jarvis-container-roi-title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jarvis-container-roi-icon {
  font-size: 15px;
  color: var(--green);
}
.jarvis-container-roi-portfolio {
  font-size: 12px;
  color: var(--text-dim);
}
.jarvis-container-roi-body {
  padding: 0;
}
/* Cash flow mini-bar */
.roi-cashflow-bar {
  display: flex;
  gap: 2px;
  width: 72px;
  height: 16px;
  align-items: center;
  cursor: default;
}
.roi-cashflow-seg {
  flex: 1;
  height: 100%;
  border-radius: 2px;
  min-width: 14px;
}
@media (max-width: 640px) {
  .jarvis-container-roi-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Jarvis SKU Retirement Advisor ───────────────────────────────────────── */

.ra-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px 60px;
}

.ra-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.ra-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.ra-subtitle {
  font-size: 13px;
  color: var(--text-dim);
}

.ra-header-actions { display: flex; gap: 8px; align-items: center; }

/* Cards */
.ra-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ra-card {
  background: var(--surface, #1a1a1a);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 140px;
  flex: 1;
}

.ra-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.ra-card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.ra-card-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* Filter tabs */
.ra-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ra-tab {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border, #333);
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.ra-tab:hover {
  background: var(--surface, #1a1a1a);
  color: var(--text);
}

.ra-tab-active {
  background: var(--surface, #1a1a1a);
  color: var(--text);
  border-color: var(--text-dim);
  font-weight: 600;
}

/* Table */
.ra-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border, #333);
}

.ra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ra-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border, #333);
  background: var(--surface, #1a1a1a);
  white-space: nowrap;
}

.ra-cell {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.05));
  color: var(--text);
  vertical-align: middle;
}

.ra-row:last-child .ra-cell { border-bottom: none; }

.ra-row:hover .ra-cell { background: var(--surface-hover, rgba(255,255,255,0.03)); }

.ra-sku { font-family: monospace; font-size: 12px; white-space: nowrap; }
.ra-score { font-size: 16px; }
.ra-num { text-align: right; white-space: nowrap; }
.ra-title-col { max-width: 180px; }
.ra-reason-col { max-width: 240px; font-size: 12px; color: var(--text-dim); }

/* Badges */
.ra-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.ra-badge-retire {
  background: rgba(239,68,68,0.15);
  color: var(--red, #ef4444);
  border: 1px solid rgba(239,68,68,0.3);
}

.ra-badge-markdown {
  background: rgba(249,115,22,0.15);
  color: var(--orange, #f97316);
  border: 1px solid rgba(249,115,22,0.3);
}

.ra-badge-monitor {
  background: rgba(234,179,8,0.12);
  color: var(--yellow, #eab308);
  border: 1px solid rgba(234,179,8,0.25);
}

/* Action buttons */
.ra-actions { white-space: nowrap; }

.ra-btn-approve {
  background: rgba(34,197,94,0.12);
  color: var(--green, #22c55e);
  border-color: rgba(34,197,94,0.3);
  margin-right: 4px;
}

.ra-btn-approve:hover { background: rgba(34,197,94,0.22); }

.ra-btn-dismiss {
  background: rgba(156,163,175,0.1);
  color: var(--text-dim);
  border-color: var(--border, #333);
}

.ra-btn-dismiss:hover { background: rgba(156,163,175,0.18); }

/* Done badges */
.ra-done-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.ra-approved-badge {
  background: rgba(34,197,94,0.12);
  color: var(--green, #22c55e);
}

.ra-dismissed-badge {
  background: rgba(156,163,175,0.1);
  color: var(--text-dim);
}

/* Empty state */
.ra-empty {
  padding: 48px 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

/* Footer */
.ra-footer {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}

.ra-footer code {
  background: var(--surface, #1a1a1a);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .ra-wrap { padding: 16px; }
  .ra-cards { gap: 10px; }
  .ra-card { min-width: 100px; padding: 12px 14px; }
  .ra-card-value { font-size: 22px; }
  .ra-table { font-size: 12px; }
}

/* ─── API Health Header Indicator ─────────────────────────────────────────── */
.api-health-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.api-health-wrap:hover,
.api-health-wrap:focus-visible {
  border-color: var(--border-hover);
  background: var(--surface-2);
  outline: 2px solid var(--accent, #c8a97e);
  outline-offset: 1px;
}

.api-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-dim); /* default: unknown */
  transition: background 0.3s;
}
.api-health-dot--unknown { background: var(--text-dim); }


.api-health-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.api-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius);
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Dropdown panel */
.api-health-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 440px;
  max-height: 520px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: var(--z-modal);
  padding: 16px;
}
.api-health-panel--open {
  display: block;
}

@media (max-width: 600px) {
  .api-health-panel { width: calc(100vw - 24px); right: -12px; }
  .api-health-label { display: none; }
}

/* ── SKU Duplicates View ───────────────────────────────────────────────────── */
.sd-root { padding: 24px; max-width: 1400px; margin: 0 auto; }

.sd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.sd-title { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sd-subtitle { font-size: 13px; color: var(--text-dim); }
.sd-header-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Cards */
.sd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.sd-card-value { font-size: 24px; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.sd-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 3px; }
.sd-card-sub { font-size: 11px; color: var(--text-dim); }

/* Filters */
.sd-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sd-filter-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.sd-filter-btn {
  padding: 4px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sd-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.sd-filter-active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Table */
.sd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.sd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sd-th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sd-row:hover { background: var(--surface-2); }
.sd-row:not(:last-child) .sd-cell { border-bottom: 1px solid var(--border); }
.sd-cell { padding: 10px 14px; vertical-align: top; color: var(--text); }
.sd-cell-product { min-width: 180px; max-width: 260px; }
.sd-cell-conf { text-align: center; }
.sd-cell-actions { white-space: nowrap; }

.sd-sku { font-size: 11px; font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 2px; font-weight: 600; }
.sd-title-text { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 240px; }
.sd-price { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sd-notes { font-size: 11px; color: var(--text-dim); margin-top: 4px; font-style: italic; max-width: 220px; }

/* Match type badges */
.sd-match-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Confidence badge */
.sd-conf-badge { font-size: 13px; font-weight: 700; }

/* Action buttons */
.sd-btn-dismiss {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
  margin-right: 4px;
}
.sd-btn-dismiss:hover { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.sd-btn-flag {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}
.sd-btn-flag:hover { background: var(--yellow-dim); color: var(--yellow); border-color: var(--yellow); }

/* Empty / dismissed note */
.sd-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
}
.sd-empty-icon { font-size: 32px; margin-bottom: 12px; color: var(--green); }
.sd-empty-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.sd-dismissed-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .sd-root { padding: 16px; }
  .sd-cards { gap: 8px; }
  .sd-card { padding: 10px 12px; }
  .sd-card-value { font-size: 20px; }
  .sd-cell-product { min-width: 130px; }
}

/* ── Jarvis Return Risk Predictor ─────────────────────────────────────────── */
.rr-risk-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0 6px;
  flex-shrink: 0;
}
.rr-badge-high {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(220,38,38,0.25);
}
.rr-badge-medium {
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px solid rgba(217,119,6,0.25);
}
.rr-badge-low {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(22,163,74,0.2);
}

.rr-order-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.rr-order-row:last-child { border-bottom: none; }
.rr-order-row-medium { opacity: 0.85; }

.rr-order-num {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
}
.rr-customer-name {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rr-order-value {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text);
}

.rr-factors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.rr-factor-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(220,38,38,0.15);
}
.rr-factor-pill-medium {
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px solid rgba(217,119,6,0.15);
}

.rr-action-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rr-action-checkin {
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid rgba(37,99,235,0.2);
}
.rr-action-flag {
  background: var(--yellow-dim);
  color: var(--yellow);
  border: 1px solid rgba(217,119,6,0.2);
}

.rr-status-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
}

.rr-flag-btn {
  margin-top: 6px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  transition: opacity 0.15s;
}
.rr-flag-btn:hover { opacity: 0.75; }

.rr-show-medium-btn {
  margin-top: 6px;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.rr-show-medium-btn:hover {
  color: var(--text);
  border-color: var(--border-hover);
}

/* ── Data Quality View ─────────────────────────────────────────────────────── */

.dq-wrap {
  padding: 24px 28px;
  max-width: 1400px;
}

.dq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.dq-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px 0;
}

.dq-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

.dq-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Summary Cards ── */
.dq-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 900px) {
  .dq-cards { grid-template-columns: repeat(2, 1fr); }
}

.dq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.dq-card-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.dq-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.dq-card-sub {
  font-size: 11px;
  color: var(--text-dim);
}

/* ── Panels ── */
.dq-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.dq-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.dq-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

/* ── Issue Type Breakdown ── */
.dq-type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 18px;
}

.dq-type-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2, var(--surface-3));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
}

.dq-type-name {
  color: var(--text-muted);
  text-transform: capitalize;
}

.dq-type-count {
  font-weight: 700;
  color: var(--text);
}

/* ── Filter Pills ── */
.dq-filter-pills {
  display: flex;
  gap: 4px;
}

.dq-pill {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.dq-pill:hover { background: var(--surface-3); color: var(--text); }

.dq-pill-active { background: var(--surface-3); color: var(--text); border-color: var(--text-dim); }

/* ── Issue Table ── */
.dq-table-wrap {
  overflow-x: auto;
}

.dq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dq-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  background: var(--surface-3, var(--surface));
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dq-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
  vertical-align: top;
}

.dq-table tr:last-child td {
  border-bottom: none;
}

.dq-row:hover td { background: var(--surface-2, rgba(255,255,255,0.02)); }

/* Row accent by severity */

/* ── Severity Badges ── */
.dq-severity-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Table Cell Widths ── */
.dq-sku-cell  { font-family: monospace; white-space: nowrap; color: var(--text-muted); }
.dq-sku-cell code { background: var(--surface-3, rgba(255,255,255,0.05)); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.dq-title-cell { max-width: 180px; color: var(--text); }
.dq-type-cell  { white-space: nowrap; text-transform: capitalize; color: var(--text-muted); }
.dq-desc-cell  { max-width: 280px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.dq-action-cell { white-space: nowrap; }
.dq-info-action { color: var(--text-dim); }

/* ── Action Buttons ── */
.dq-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.dq-fix-btn {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--red-dim, rgba(239,68,68,0.15));
  color: var(--red, #ef4444);
  border: 1px solid var(--red, #ef4444);
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-block;
}
.dq-fix-btn:hover { background: var(--red, #ef4444); color: #fff; }

.dq-dismiss-btn {
  font-size: 10px;
  padding: 3px 8px;
}

.dq-dismiss-info-btn {
  font-size: 11px;
  padding: 4px 10px;
  margin-left: auto;
}

/* ── Empty State ── */
.dq-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.dq-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }

.dq-empty p { margin: 0 0 8px; }

.dq-empty-hint { font-size: 11px; color: var(--text-dim); }
.dq-empty-hint code { background: var(--surface-3, rgba(255,255,255,0.05)); padding: 1px 6px; border-radius: 3px; font-size: 10px; }

/* ─────────────────────────────────────────────────────────────────────────────
   Collection Intelligence
   ───────────────────────────────────────────────────────────────────────────── */

.ci-root {
  padding: 24px 28px;
  max-width: 1400px;
}

.ci-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.ci-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.ci-subtitle {
  font-size: 13px;
  color: var(--text-dim);
}

.ci-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ci-freshness {
  font-size: 12px;
  color: var(--text-dim);
}

/* ── Summary Cards ── */
.ci-summary-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

@media (max-width: 1200px) { .ci-summary-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .ci-summary-cards { grid-template-columns: repeat(2, 1fr); } }

.ci-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.ci-card-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}

.ci-card-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ci-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ── Section title ── */
.ci-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
}

/* ── Health Grid ── */
.ci-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.ci-health-card {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s;
}

.ci-health-card--has-recs {
  border-color: var(--yellow, #f59e0b);
}

.ci-health-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.ci-health-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ── Health Badge ── */
.ci-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.ci-badge-green { background: rgba(34,197,94,0.15); color: var(--green, #22c55e); }
.ci-badge-yellow { background: rgba(245,158,11,0.15); color: var(--yellow, #f59e0b); }
.ci-badge-red { background: rgba(239,68,68,0.15); color: var(--red, #ef4444); }

/* ── Health Metrics ── */
.ci-health-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-bottom: 10px;
}

.ci-metric {
  display: flex;
  flex-direction: column;
}

.ci-metric-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ci-metric-val {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.ci-health-card-recs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ci-rec-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
}

.ci-rec-add    { background: rgba(59,130,246,0.15); color: var(--blue, #3b82f6); }
.ci-rec-remove { background: rgba(239,68,68,0.15);  color: var(--red, #ef4444); }

/* ── Suggestions List ── */
.ci-suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.ci-suggestion {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow, #f59e0b);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: opacity 0.2s;
}

.ci-suggestion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ci-suggestion-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 120px;
}

.ci-suggestion-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-suggestion-ago {
  font-size: 11px;
  color: var(--text-dim);
}

.ci-suggestion-actions {
  display: flex;
  gap: 8px;
}

.ci-btn-dismiss {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.ci-btn-dismiss:hover {
  border-color: var(--red, #ef4444);
  color: var(--red, #ef4444);
}

.ci-suggestion-reasoning {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.5;
}

.ci-suggestion-section {
  margin-top: 12px;
}

.ci-suggestion-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.ci-candidates {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ci-candidate {
  display: grid;
  grid-template-columns: 160px 200px 1fr;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg, var(--surface-2, rgba(255,255,255,0.03)));
  font-size: 12px;
}

.ci-candidate--remove {
  background: rgba(239,68,68,0.04);
}

.ci-cand-sku {
  font-weight: 600;
  color: var(--accent, #6366f1);
  font-family: monospace;
  font-size: 11px;
}

.ci-cand-title {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-cand-reason {
  color: var(--text-dim);
  font-size: 11px;
}

.ci-candidates-more {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 8px;
}

.ci-empty {
  padding: 48px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
}

@media (max-width: 900px) {
  .ci-root { padding: 16px; }
  .ci-health-grid { grid-template-columns: 1fr 1fr; }
  .ci-candidate { grid-template-columns: 120px 1fr; }
  .ci-cand-reason { display: none; }
}

@media (max-width: 600px) {
  .ci-health-grid { grid-template-columns: 1fr; }
  .ci-candidate { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Jarvis Break-Even ROAS Panel
   ═══════════════════════════════════════════════════════════════════════════ */

/* Safety notice banner */
.roas-breakeven-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  background: var(--surface-2, rgba(255,255,255,0.04));
  border-left: 3px solid var(--blue, #3b82f6);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  border-radius: 0 4px 4px 0;
}
.roas-breakeven-notice-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--blue, #3b82f6);
}

/* Hero gauge */
.roas-breakeven-gauge {
  padding: 0 14px 14px;
}

.roas-breakeven-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.roas-breakeven-target,
.roas-breakeven-actual {
  text-align: center;
  min-width: 110px;
}

.roas-breakeven-target-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-secondary);
  line-height: 1;
}
.roas-breakeven-target-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 4px;
}
.roas-breakeven-target-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.roas-breakeven-actual-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}
.roas-breakeven-actual-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: 4px;
}
.roas-breakeven-actual-sub {
  margin-top: 4px;
}

.roas-breakeven-separator {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 500;
  padding: 0 4px;
}

/* Gauge bar */
.roas-gauge-bar-wrap {
  margin-bottom: 16px;
}
.roas-gauge-bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--surface-2, rgba(255,255,255,0.06));
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 4px;
}
.roas-gauge-bar-be {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--text-dim, rgba(255,255,255,0.2));
  border-radius: var(--radius-sm);
  opacity: 0.5;
}
.roas-gauge-bar-act {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--green, #22c55e);
  border-radius: var(--radius-sm);
  transition: width 0.4s ease;
  opacity: 0.85;
}
.roas-gauge-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  padding: 0 2px;
}

/* Counts row */
.roas-breakeven-counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  padding-top: 12px;
}

.roas-breakeven-count {
  text-align: center;
  min-width: 64px;
}
.roas-breakeven-count-n {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.roas-breakeven-count-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 3px;
}
.roas-breakeven-count.profitable .roas-breakeven-count-n { color: var(--green, #22c55e); }
.roas-breakeven-count.at-risk    .roas-breakeven-count-n { color: var(--yellow, #eab308); }
.roas-breakeven-count.losing     .roas-breakeven-count-n { color: var(--red, #ef4444); }
.roas-breakeven-count.spend      .roas-breakeven-count-n { color: var(--text); font-size: 14px; }

/* Campaign table wrapper */
.roas-breakeven-table-wrap {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-top: 4px;
}

/* Status badges */
.roas-status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.roas-status-profitable {
  background: var(--green-dim, rgba(34,197,94,0.15));
  color: var(--green, #22c55e);
}
.roas-status-at-risk {
  background: var(--yellow-dim, rgba(234,179,8,0.15));
  color: var(--yellow, #eab308);
}
.roas-status-losing {
  background: var(--red-dim, rgba(239,68,68,0.15));
  color: var(--red, #ef4444);
}
.roas-status-unknown {
  background: var(--surface-2, rgba(255,255,255,0.06));
  color: var(--text-dim);
}

/* Collapsed panel handling */
.jarvis-breakeven-section.collapsed .jm-body { display: none; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .roas-breakeven-hero {
    gap: 12px;
  }
  .roas-breakeven-target-value,
  .roas-breakeven-actual-value {
    font-size: 22px;
  }
  .roas-breakeven-counts {
    gap: 8px;
  }
}

/* ─── Decision Playbook ────────────────────────────────────────────────────── */

.pb-wrap {
  padding: 24px 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.pb-header { margin-bottom: 20px; }

.pb-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pb-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Metrics bar */
.pb-metrics-bar {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.pb-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  border-right: 1px solid var(--border);
}

.pb-metric:last-child { border-right: none; }

.pb-metric-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.pb-metric-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.pb-metric-approved .pb-metric-value { color: var(--green, #22c55e); }
.pb-metric-pending  .pb-metric-value { color: var(--yellow, #f59e0b); }
.pb-metric-rejected .pb-metric-value { color: var(--red, #ef4444); }
.pb-metric-rate     .pb-metric-value { color: var(--blue, #3b82f6); }

/* Executive summary card */
.pb-exec-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent, #6366f1);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
}

.pb-exec-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.pb-exec-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

.pb-exec-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 12px;
}

/* Data quality flags */
.pb-flags-section { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }

.pb-flag {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border-left: 3px solid;
}

/* Sections accordion */
.pb-sections-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pb-sections-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.pb-expand-all-btn {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.pb-expand-all-btn:hover { background: var(--surface-2); }

.pb-sections { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }

.pb-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.pb-section-open { border-color: var(--accent, #6366f1); }

.pb-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}

.pb-section-header:hover { background: var(--surface-2); }

.pb-section-arrow { font-size: 10px; color: var(--text-dim); width: 12px; }
.pb-section-title { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; }
.pb-section-count { font-size: 12px; color: var(--text-dim); }

.pb-section-badges { display: flex; gap: 6px; }

.pb-sec-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius);
}

.pb-section-body { padding: 0 16px 14px; }

.pb-sec-empty { font-size: 13px; color: var(--text-dim); padding: 10px 0; }

/* Items table */
.pb-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}

.pb-items-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.pb-items-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.pb-items-table tr:last-child td { border-bottom: none; }
.pb-items-table tr:hover td { background: var(--surface-2); }

.pb-sku-cell code { font-size: 11px; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
.pb-agent-cell { color: var(--text-dim); font-size: 11px; }
.pb-reason-cell { color: var(--text-dim); max-width: 280px; }

/* Status badges */
.pb-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

/* Priority badges */
.pb-priority-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

/* Agents row */
.pb-agents-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 12px;
  color: var(--text-dim);
}

.pb-agents-label { font-weight: 600; white-space: nowrap; }
.pb-agents-list { display: flex; flex-wrap: wrap; gap: 4px; }

.pb-agent-chip {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-dim);
}

/* History section */
.pb-history-section { margin-top: 28px; }

.pb-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.pb-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pb-history-table th {
  text-align: left;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.pb-history-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.pb-history-table tr:last-child td { border-bottom: none; }
.pb-history-table tr:hover td { background: var(--surface-2); }
.pb-hist-date { color: var(--text-dim); font-size: 12px; }

/* Export button */
.pb-export-btn {
  font-size: 12px;
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}

.pb-export-btn:hover { background: var(--surface-2); }

/* Empty state */
.pb-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
  font-size: 15px;
}

.pb-empty-icon { font-size: 40px; margin-bottom: 12px; }
.pb-empty-hint { font-size: 13px; margin-top: 6px; color: var(--text-dim); }
.pb-no-sections { padding: 20px; text-align: center; color: var(--text-dim); font-size: 13px; }

@media (max-width: 900px) {
  .pb-wrap { padding: 16px; }
  .pb-metrics-bar { flex-wrap: wrap; }
  .pb-metric { min-width: 90px; }
  .pb-items-table { font-size: 11px; }
  .pb-reason-cell { max-width: 180px; }
}

/* ─── Cash Flow Dashboard ──────────────────────────────────────────────────── */

/* Panel (used in accounting-overview and standalone view) */
.cf-panel {
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.cf-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.cf-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cf-ts {
  font-size: 11px;
  color: var(--text-dim);
}

.cf-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Summary cards */
.cf-summary-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cf-card {
  flex: 1;
  min-width: 140px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.cf-card-net {
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(99, 102, 241, 0.04);
}

.cf-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.cf-card-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.cf-card-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
}

.cf-inflow-color { color: var(--green, #22c55e); }
.cf-outflow-color { color: var(--red, #ef4444); }

/* Bar chart */
.cf-chart-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cf-chart-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cf-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
  padding: 0 2px;
}

.cf-bar-chart-lg {
  height: 120px;
}

.cf-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

.cf-bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  min-height: 3px;
  transition: opacity 0.15s;
}

.cf-bar-col:hover .cf-bar { opacity: 0.75; }

.cf-bar-label {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 3px;
  white-space: nowrap;
}

.cf-bar-axis {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-dim);
  padding: 0 2px;
}

/* Breakdown table */
.cf-breakdown-section {
  overflow-x: auto;
}

.cf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cf-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.cf-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(var(--border-rgb, 255,255,255), 0.05);
  color: var(--text);
  vertical-align: top;
}

.cf-section-header td {
  background: var(--bg);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 5px 10px;
}

.cf-subtotal-row td {
  font-weight: 600;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.cf-total-row td {
  font-weight: 700;
  font-size: 13px;
  border-top: 2px solid var(--border);
  background: var(--bg-alt);
}

.cf-bk-label { font-weight: 500; }
.cf-bk-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-bk-note { font-size: 11px; color: var(--text-dim); }

.cf-inflow  { color: var(--green, #22c55e); }
.cf-outflow { color: var(--red,   #ef4444); }

/* Meta stats row */
.cf-meta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cf-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 120px;
}

.cf-meta-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.cf-meta-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Standalone view root */
.cf-view-root {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
}

.cf-view-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cf-view-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
}

.cf-view-sub {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cf-source-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.cf-source-badge.cached {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green, #22c55e);
}

.cf-source-badge.live {
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
}

.cf-section {
  background: var(--bg-card, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.cf-section-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -4px;
}

.cf-footnote {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (max-width: 768px) {
  .cf-summary-row { gap: 8px; }
  .cf-card { min-width: 120px; padding: 10px 12px; }
  .cf-card-value { font-size: 16px; }
  .cf-view-root { padding: 16px; }
  .cf-meta-row { gap: 8px; }
}

/* ── Jarvis Ad-Inventory Alignment Panel ──────────────────────────────────── */

.jarvis-ad-inventory-section {
  margin-bottom: 12px;
}

/* Safety notice */
.ai-inv-safety-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}

.ai-inv-safety-icon {
  flex-shrink: 0;
  color: #6366f1;
  margin-top: 1px;
}

/* Summary stats row */
.ai-inv-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.ai-inv-stat {
  flex: 1 1 auto;
  min-width: 80px;
  padding: 10px 14px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  text-align: center;
}

.ai-inv-stat-critical {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

.ai-inv-stat-high {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

.ai-inv-stat-opp {
  background: rgba(16, 185, 129, 0.07);
  border-color: rgba(16, 185, 129, 0.2);
}

.ai-inv-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.ai-inv-stat-lbl {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Section headers */
.ai-inv-section-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
  margin-top: 18px;
}

.ai-inv-header-critical { color: var(--red, #ef4444); }
.ai-inv-header-high     { color: var(--yellow, #f59e0b); }
.ai-inv-header-warn     { color: #a16207; }
.ai-inv-header-opp      { color: var(--green, #10b981); }

/* Mismatch cards */
.ai-inv-card {
  border-radius: 9px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}

.ai-inv-card:hover {
  border-color: var(--border-medium, var(--border));
}

.ai-inv-card-critical {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.2);
}

.ai-inv-card-critical:hover {
  border-color: rgba(239, 68, 68, 0.4);
}

.ai-inv-card-high {
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.2);
}

.ai-inv-card-high:hover {
  border-color: rgba(245, 158, 11, 0.35);
}

.ai-inv-card-warn {
  background: rgba(234, 179, 8, 0.05);
  border-color: rgba(234, 179, 8, 0.2);
}

.ai-inv-card-opp {
  background: rgba(16, 185, 129, 0.05);
  border-color: rgba(16, 185, 129, 0.2);
}

.ai-inv-card-opp:hover {
  border-color: rgba(16, 185, 129, 0.35);
}

.ai-inv-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.ai-inv-card-sku {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-inv-card-sku code {
  font-size: 12px;
  background: var(--surface-tertiary, var(--surface));
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.ai-inv-card-title {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.ai-inv-card-spend {
  font-size: 14px;
  font-weight: 700;
  color: var(--red, #ef4444);
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-inv-card-margin {
  font-size: 14px;
  font-weight: 700;
  color: var(--green, #10b981);
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-inv-card-detail {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.ai-inv-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Inline severity badges */
.ai-inv-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.ai-inv-badge-critical {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red, #ef4444);
}

.ai-inv-badge-high {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.ai-inv-badge-warn {
  background: rgba(234, 179, 8, 0.12);
  color: #a16207;
}

.ai-inv-badge-opp {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green, #10b981);
}

/* Flag for review button */
.ai-inv-flag-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.ai-inv-flag-btn:hover:not(:disabled) {
  background: var(--surface-hover, var(--surface-secondary));
  border-color: var(--border-medium, var(--border));
  color: var(--text-primary);
}

.ai-inv-flag-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.ai-inv-flag-btn-done {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: var(--green, #10b981) !important;
}

/* Panel header badge variants */
.ai-inv-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 5px;
}

.ai-inv-badge-critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red, #ef4444);
}

.ai-inv-badge-high {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.ai-inv-badge-opp {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green, #10b981);
}

.ai-inv-badge-ok {
  background: rgba(16, 185, 129, 0.1);
  color: var(--green, #10b981);
}

.ai-inv-badge-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red, #ef4444);
}

/* Responsive */
@media (max-width: 700px) {
  .ai-inv-summary-row {
    gap: 8px;
  }
  .ai-inv-stat {
    min-width: 70px;
    padding: 8px 10px;
  }
  .ai-inv-card-top {
    flex-direction: column;
    gap: 4px;
  }
  .ai-inv-card-spend,
  .ai-inv-card-margin {
    font-size: 13px;
  }
}

/* ─── Revenue Forecast View ──────────────────────────────────────────────── */
.rf-root {
  padding: 24px;
  max-width: 1200px;
}

.rf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.rf-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}

.rf-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim, #94a3b8);
}

.rf-horizon-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.rf-horizon-btn {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid #334155;
  background: #0f172a;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
}

.rf-horizon-btn:hover { background: #1e293b; color: var(--text); }
.rf-horizon-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }

/* ─── Scenario Cards ──────────────────────────────────────────────────────── */
.rf-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 800px) {
  .rf-cards-row { grid-template-columns: 1fr; }
}

.rf-card {
  background: #1a1a2e;
  border: 1px solid #1e293b;
  border-radius: var(--radius-lg);
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.rf-card:hover { border-color: #334155; }
.rf-card--active { border-color: #6366f1; }

.rf-card-horizon {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin-bottom: 8px;
}

.rf-card-base {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.rf-card-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.rf-card-empty {
  font-size: 14px;
  color: var(--text-muted);
  margin: 12px 0;
}

/* Range bar */
.rf-range-bar { margin-bottom: 12px; }

.rf-range-track {
  position: relative;
  height: 6px;
  background: #0f172a;
  border-radius: 3px;
  margin-bottom: 6px;
  overflow: visible;
}

.rf-range-fill {
  position: absolute;
  top: 0; left: 0;
  height: 6px;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 50%, #22c55e 100%);
  border-radius: 3px;
}

.rf-range-base-marker {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
}

.rf-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
}

.rf-range-mid { color: var(--slate); font-weight: 500; }

.rf-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rf-scenario-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.rf-scenario-cons { background: rgba(59,130,246,0.15); color: #93c5fd; }
.rf-scenario-opt  { background: rgba(34,197,94,0.15);  color: #86efac; }

.rf-card-ts {
  margin-top: 8px;
  font-size: 10px;
  color: #475569;
}

/* ─── Sections ────────────────────────────────────────────────────────────── */
.rf-section {
  background: #1a1a2e;
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.rf-section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rf-avg-acc {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
  background: rgba(99,102,241,0.15);
  color: #a5b4fc;
  border-radius: var(--radius-sm);
}

/* ─── Signal Bars ─────────────────────────────────────────────────────────── */
.rf-signals { display: flex; flex-direction: column; gap: 12px; }

.rf-signal-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 12px;
}

.rf-signal-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.rf-signal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rf-signal-val {
  font-size: 11px;
  color: var(--slate);
  margin-left: 4px;
}

.rf-signal-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rf-signal-bar {
  height: 8px;
  border-radius: var(--radius-sm);
  min-width: 4px;
}

.rf-signal-pct {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.rf-confidence-note {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.rf-conf-high { background: #22c55e; }
.rf-conf-med  { background: #eab308; }

/* ─── Tables ──────────────────────────────────────────────────────────────── */
.rf-table-wrap { overflow-x: auto; }

.rf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rf-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid #1e293b;
}

.rf-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #0f172a;
  color: var(--text-muted);
  vertical-align: middle;
}

.rf-table tbody tr:last-child td { border-bottom: none; }
.rf-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.rf-num { color: #475569; font-size: 12px; }
.rf-sku { font-family: monospace; font-size: 12px; color: var(--slate); }
.rf-title-cell { color: var(--text); }
.rf-revenue { font-weight: 600; color: var(--text); }
.rf-err { color: var(--slate); font-size: 12px; }

.rf-share-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rf-share-bar {
  height: 6px;
  background: #6366f1;
  border-radius: 3px;
  min-width: 2px;
}

.rf-share-pct {
  font-size: 11px;
  color: var(--slate);
  white-space: nowrap;
}

/* Confidence badges */
.rf-conf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: lowercase;
}

.rf-conf-badge-high { background: rgba(34,197,94,0.15);  color: #86efac; }
.rf-conf-badge-med  { background: rgba(234,179,8,0.15);  color: #fde047; }
.rf-conf-badge-low  { background: rgba(148,163,184,0.1); color: var(--slate); }

/* Accuracy badges */
.rf-acc-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.rf-acc-good { background: rgba(34,197,94,0.15);  color: #86efac; }
.rf-acc-warn { background: rgba(234,179,8,0.15);  color: #fde047; }
.rf-acc-bad  { background: rgba(239,68,68,0.15);  color: #fca5a5; }

/* ─── Risks & Opportunities ─────────────────────────────────────────────── */
.rf-risks-opps .rf-ros-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .rf-risks-opps .rf-ros-cols { grid-template-columns: 1fr; }
}

.rf-ros-heading {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.rf-risk-heading { color: #fca5a5; }
.rf-opp-heading  { color: #86efac; }

.rf-ros-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.6;
}

/* ─── Empty / No Data ─────────────────────────────────────────────────────── */
.rf-no-data {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.rf-no-data-icon { font-size: 40px; margin-bottom: 12px; }
.rf-no-data code { font-family: monospace; background: #0f172a; padding: 2px 6px; border-radius: var(--radius-sm); }
.rf-no-data-sub { font-size: 13px; margin-top: 8px; }

.rf-acc-empty {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px;
  line-height: 1.6;
}

/* ─── Seasonal Alerts Panel ──────────────────────────────────────────────────── */

.seasonal-alerts-card {
  padding: 0;
  overflow: hidden;
}

.seasonal-alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.seasonal-alerts-empty {
  padding: 20px 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Severity badges */
.seasonal-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  white-space: nowrap;
}

.seasonal-badge-urgent {
  background: rgba(239, 68, 68, 0.15);
  color: var(--red, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.seasonal-badge-plan-ahead {
  background: rgba(245, 158, 11, 0.12);
  color: var(--yellow, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.seasonal-badge-monitor {
  background: rgba(59, 130, 246, 0.1);
  color: var(--blue, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Season Calendar */
.seasonal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.seasonal-calendar-card {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color 0.15s;
}

.seasonal-calendar-card-active {
  border-color: var(--accent, #6366f1);
  background: rgba(99, 102, 241, 0.06);
}

.seasonal-calendar-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.seasonal-calendar-months {
  font-size: 11px;
  color: var(--accent, #6366f1);
  font-weight: 500;
  margin-bottom: 4px;
}

.seasonal-calendar-reason {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

.seasonal-active-now {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent, #6366f1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  .seasonal-calendar-grid {
    grid-template-columns: 1fr;
  }
  .seasonal-alerts-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ─── Launch Readiness View (standalone lr-* classes) ─────────────────────── */

.lr-root {
  padding: 24px;
  max-width: 1100px;
}

/* Header */
.lr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 10px;
}
.lr-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lr-header-icon {
  font-size: 22px;
  color: var(--accent);
}
.lr-header-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.lr-header-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.lr-cached-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.lr-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lr-gen-time {
  font-size: 12px;
  color: var(--text-dim);
}
.lr-refresh-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lr-refresh-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

/* Stats row */
.lr-stats {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.lr-stat {
  flex: 1;
  padding: 14px 18px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.lr-stat:last-child { border-right: none; }
.lr-stat-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.lr-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Section card */
.lr-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.lr-section-green {
  border-color: rgba(22,163,74,0.25);
  background: rgba(22,163,74,0.04);
}
.lr-section-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lr-section-icon { font-size: 14px; }

/* Quick wins */
.lr-quickwins { display: flex; flex-direction: column; gap: 10px; }
.lr-quickwin-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.lr-qw-left { flex: 1; min-width: 0; }
.lr-qw-sku {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
.lr-qw-title {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lr-qw-fixes {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lr-qw-fix {
  font-size: 11px;
  color: var(--text-muted);
}
.lr-qw-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Publish candidates */
.lr-publish-list { display: flex; flex-direction: column; gap: 8px; }
.lr-publish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(22,163,74,0.06);
  border: 1px solid rgba(22,163,74,0.15);
  border-radius: var(--radius-sm);
}
.lr-pub-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.lr-pub-sku {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
.lr-pub-title {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}
.lr-pub-score {
  font-size: 12px;
  font-weight: 700;
}
.lr-pub-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid rgba(22,163,74,0.35);
  background: rgba(22,163,74,0.12);
  color: var(--green);
  white-space: nowrap;
  transition: background 0.12s;
  flex-shrink: 0;
}
.lr-pub-btn:hover { background: rgba(22,163,74,0.22); }
.lr-pub-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tier badges */
.lr-tier-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Score bar */
.lr-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 100px;
}
.lr-score-num {
  font-size: 14px;
  font-weight: 800;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-mono);
}
.lr-score-track {
  flex: 1;
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}
.lr-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* SKU chip */
.lr-sku-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Status tags */
.lr-status-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: lowercase;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

/* Search input */
.lr-search-input {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  width: 180px;
  outline: none;
  transition: border-color 0.15s;
}
.lr-search-input:focus { border-color: var(--accent); }

@media (max-width: 768px) {
  .lr-root { padding: 12px; }
  .lr-stats { flex-wrap: wrap; }
  .lr-stat { flex: 0 0 50%; border-bottom: 1px solid var(--border); }
  .lr-search-input { width: 120px; }
  .lr-pub-title { max-width: 160px; }
}

/* ─── Price Guard Panel ─── */

/* Stat cards */

/* Subtabs */

/* Violation cards */

/* Card sections */

/* Badges */

/* Text elements */

/* Price rows */

/* Near floor progress bar */

/* Empty / error states */

@media (max-width: 900px) {
}

/* ─── Customer Personas View ──────────────────────────────────────────────── */

.cp-root {
  padding: 24px 28px;
  max-width: 1300px;
}

.cp-error {
  padding: 40px;
  text-align: center;
  color: var(--red, #ef4444);
  font-size: 14px;
}

/* Page header */
.cp-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cp-page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text);
}
.cp-page-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  max-width: 520px;
  line-height: 1.5;
}
.cp-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cp-data-source {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cp-data-source.cp-cached {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}
.cp-data-source.cp-live {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
}
.cp-last-updated {
  font-size: 11px;
  color: var(--text-muted);
}
.cp-refresh-btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.cp-refresh-btn:hover { background: var(--surface-3); }

/* Top section: donut + rules */
.cp-top-section {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  margin-bottom: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .cp-top-section { grid-template-columns: 1fr; }
}

.cp-distribution-panel,
.cp-rules-panel {
  background: var(--surface-1, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 20px;
}
.cp-panel-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* Donut chart */
.cp-donut-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cp-donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-donut-hole {
  width: 80px;
  height: 80px;
  background: var(--surface-1, var(--surface));
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.cp-donut-total {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.cp-donut-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cp-donut-legend {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cp-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.cp-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-legend-icon { font-size: 13px; }
.cp-legend-label { flex: 1; color: var(--text); font-weight: 500; }
.cp-legend-pct { font-weight: 700; color: var(--text); min-width: 36px; text-align: right; }
.cp-legend-count { color: var(--text-muted); font-size: 11px; }
.cp-donut-empty { color: var(--text-muted); font-size: 13px; }

/* Rules panel */
.cp-rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cp-rule-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cp-rule-icon { font-size: 20px; line-height: 1; padding-top: 1px; }
.cp-rule-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.cp-rule-cond {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.cp-rule-cond em { font-style: normal; font-weight: 600; color: var(--text-secondary, var(--text)); }

/* Persona cards grid */
.cp-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.cp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .cp-cards-grid { grid-template-columns: 1fr; }
}

.cp-unclassified-row .cp-cards-grid,
.cp-unclassified-row {
  /* Unclassified appears below main grid, full width */
}
.cp-unclassified-row .cp-persona-card {
  max-width: 340px;
}

/* Persona card */
.cp-persona-card {
  background: var(--surface-1, var(--surface));
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius, 8px);
  padding: 16px;
  transition: box-shadow 0.15s;
}
.cp-persona-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.cp-persona-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.cp-persona-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.cp-persona-title-group { flex: 1; min-width: 0; }
.cp-persona-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.cp-persona-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.cp-persona-count {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

/* Stats row */
.cp-persona-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--surface-2, rgba(0,0,0,0.03));
  border-radius: var(--radius-sm);
}
.cp-stat { text-align: center; }
.cp-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.cp-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* Categories row */
.cp-categories-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
  font-size: 11px;
}
.cp-cats-label {
  color: var(--text-muted);
  white-space: nowrap;
}
.cp-cat-tag {
  background: var(--surface-3, rgba(0,0,0,0.06));
  color: var(--text-secondary, var(--text));
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}
.cp-no-cats { color: var(--text-muted); }

/* Card footer */
.cp-card-footer { text-align: right; }
.cp-view-btn {
  font-size: 11px;
  color: var(--accent, #a67c52);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cp-view-btn:hover { color: var(--accent-hover, #8a5e3a); }
.cp-view-btn--disabled {
  color: var(--text-muted);
  font-size: 11px;
  text-decoration: none;
}

/* ── Jarvis Pricing Explainer — Explanation Panel & Signal Cards ─────────── */

/* Explanation panel (wraps headline + signals + confidence) */
.px-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  animation: px-fade-in 0.2s ease;
}

.px-panel-collapsed { display: none; }

@keyframes px-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Headline row */
.px-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.px-headline-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

/* Signal cards row */
.px-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.px-signal-card {
  flex: 1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-left: 3px solid;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Impact color coding */
.px-signal-card[data-impact="high"] {
  border-left-color: var(--red-bright);
  background: rgba(239, 68, 68, 0.03);
}
.px-signal-card[data-impact="medium"] {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.03);
}
.px-signal-card[data-impact="low"] {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.03);
}

.px-signal-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.px-signal-card[data-impact="high"]   .px-signal-name { color: var(--red-bright); }
.px-signal-card[data-impact="medium"] .px-signal-name { color: #f59e0b; }
.px-signal-card[data-impact="low"]    .px-signal-name { color: #10b981; }

.px-signal-detail {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Impact dot */
.px-impact-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Confidence bar */
.px-confidence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.px-confidence-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  min-width: 70px;
}

.px-confidence-track {
  flex: 1;
  height: 6px;
  background: var(--bg-tertiary, var(--border));
  border-radius: 3px;
  overflow: hidden;
}

.px-confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* Confidence colour ramp */
.px-conf-low    { background: #ef4444; } /* < 50 */
.px-conf-medium { background: #f59e0b; } /* 50–74 */
.px-conf-high   { background: #10b981; } /* 75+ */

.px-confidence-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 32px;
  text-align: right;
}

/* Risk + outcome footer */
.px-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light, var(--border));
}

.px-footer-item {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
  min-width: 180px;
}

.px-footer-label {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.px-footer-value {
  color: var(--text-secondary);
  line-height: 1.4;
}

/* "Why?" toggle button (inline with the details cell) */
.px-why-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-left: 4px;
  transition: border-color 0.12s, background 0.12s;
}

.px-why-btn:hover {
  border-color: var(--accent);
  background: var(--accent-dim, rgba(166,124,82,0.08));
}

.px-why-btn.active {
  background: var(--accent-dim, rgba(166,124,82,0.08));
  border-color: var(--accent);
}

/* Loading skeleton inside panel */
.px-loading {
  color: var(--text-muted);
  font-size: 12px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .px-signal-card { min-width: 120px; }
  .px-footer-item { min-width: 140px; }
}

/* ─── SUPPLIER INTELLIGENCE SCORECARD ─────────────────────────────────────── */

.sc-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.sc-header {
  margin-bottom: 24px;
}

.sc-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}

/* Dimension color coding */

.sc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  transition: border-color 0.15s;
}

.sc-card:hover { border-color: var(--accent); }

.sc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}

.sc-card-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Score ring */

/* Tier badge */

/* Radar chart */

/* Score bars */

/* Metric chips */

/* Worst SKUs */

/* Delivery trend mini chart */

.sc-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 40px 20px;
  font-size: 14px;
}

@media (max-width: 600px) {
  .sc-card-header { flex-direction: column; }
}

/* ─── Collection Margin View ─────────────────────────────────────────────── */

/* ── Summary Grid ── */

/* ── Toolbar ── */


/* ── Table ── */

/* Row tints for margin flags */

/* ── Flag badges ── */

/* ── Sort indicators ── */


@media (max-width: 768px) {
}

/* ─── Agent Calibration ───────────────────────────────────────────────── */
.cal-wrap {
  padding: 24px 28px;
  max-width: 1100px;
}

.cal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.cal-title-row { display: flex; flex-direction: column; gap: 4px; }
.cal-title { font-size: 20px; font-weight: 600; margin: 0; color: var(--text); }
.cal-meta { font-size: 12px; color: var(--text-dim); }

.cal-summary-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cal-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-width: 72px;
  text-align: center;
}

.cal-pill--good  { border-color: #22c55e40; background: #22c55e10; }
.cal-pill--warn  { border-color: #f5a62340; background: #f5a62310; }
.cal-pill--dim   { border-color: var(--border); background: var(--surface2, #1a1a1a); }

.cal-pill-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.cal-pill-label { font-size: 11px; color: var(--text-dim); margin-top: 3px; }

.cal-note {
  background: var(--surface2, #1a1a1a);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.cal-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cal-empty {
  grid-column: 1/-1;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  padding: 40px 0;
}

/* ── Card ── */
.cal-card {
  background: var(--surface, #141414);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-card--good    { border-color: #22c55e30; }
.cal-card--warn    { border-color: #f5a62350; box-shadow: 0 0 0 1px #f5a62320; }
.cal-card--neutral { border-color: var(--border); }
.cal-card--dim     { border-color: var(--border); opacity: 0.75; }

.cal-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cal-card-agent   { font-size: 14px; font-weight: 600; color: var(--text); }
.cal-card-metric  { font-size: 11px; color: var(--text-dim); margin-top: -6px; }
.cal-card-sample  { font-size: 11px; color: var(--text-muted); }

/* badges */
.cal-card-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.cal-badge--overconfident    { background: #f5a62320; color: #f5a623; border: 1px solid #f5a62350; }

.cal-insufficient {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── Bars ── */
.cal-bars { display: flex; flex-direction: column; gap: 6px; }

.cal-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-bar-label {
  font-size: 11px;
  color: var(--text-dim);
  width: 56px;
  flex-shrink: 0;
}

.cal-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface2, #222);
  border-radius: 3px;
  overflow: hidden;
}

.cal-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.cal-bar-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Calibration error gauge ── */
.cal-gauge-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cal-gauge-label {
  font-size: 11px;
  color: var(--text-dim);
}

.cal-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-gauge-track {
  flex: 1;
  height: 6px;
  background: var(--surface2, #222);
  border-radius: 3px;
  overflow: hidden;
}

.cal-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.cal-gauge--excellent { background: #22c55e; color: #4ade80; }
.cal-gauge--good      { background: #4ade80; color: #4ade80; }
.cal-gauge--fair      { background: #facc15; color: #facc15; }
.cal-gauge--poor      { background: #f87171; color: #f87171; }
.cal-gauge--unknown   { color: var(--text-muted); }

.cal-gauge-val {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.cal-gauge-badge {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.8;
}

/* ── Confidence row ── */
.cal-conf-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cal-conf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 110px;
}

.cal-conf-label { font-size: 10px; color: var(--text-muted); }

.cal-conf-val {
  font-size: 14px;
  font-weight: 700;
}

.cal-conf-val--good { color: #4ade80; }
.cal-conf-val--bad  { color: #f87171; }

/* ── Trend sparkline ── */
.cal-trend { display: flex; flex-direction: column; gap: 4px; }
.cal-trend-label { font-size: 10px; color: var(--text-muted); }

.cal-sparkline {
  width: 100%;
  height: 40px;
  overflow: visible;
}

.cal-trend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-muted);
}

/* ── Insight panel ── */
.cal-insight-panel {
  background: var(--surface, #141414);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cal-insight-title { font-size: 13px; font-weight: 600; color: var(--text); }
.cal-insight-meta  { font-size: 11px; color: var(--text-dim); }

.cal-insight-warn {
  background: #f5a62315;
  border: 1px solid #f5a62340;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  color: #f5a623;
}

.cal-insight-agents {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cal-insight-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.cal-insight-row:last-child { border-bottom: none; }

.cal-insight-agent  { flex: 1; color: var(--text); font-weight: 500; }
.cal-insight-n      { color: var(--text-muted); min-width: 50px; }
.cal-insight-precision.good { color: #4ade80; font-weight: 600; }
.cal-insight-precision.bad  { color: #f87171; font-weight: 600; }
.cal-insight-recall { color: var(--text-dim); }

.cal-badge--overconfident { background: #f5a62320; color: #f5a623; border: 1px solid #f5a62340; border-radius: var(--radius-sm); padding: 2px 6px; font-size: 10px; }
.cal-badge--lowdata       { background: var(--surface2, #1a1a1a); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 10px; }

@media (max-width: 768px) {
  .cal-wrap { padding: 16px 14px; }
  .cal-cards-grid { grid-template-columns: 1fr; }
  .cal-header { flex-direction: column; }
}

/* ── Markdown Optimizer ──────────────────────────────────────────────── */

.md-root {
  padding: 24px 28px;
  max-width: 1400px;
}

.md-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.md-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.md-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

.md-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Summary cards */
.md-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.md-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.md-card-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.md-card-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

/* Criteria note */
.md-criteria-note {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Table */
.md-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.md-table thead th {
  background: var(--surface-2);
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.md-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

.md-table tbody tr:last-child {
  border-bottom: none;
}

.md-table tbody tr:hover {
  background: var(--bg-hover);
}

.md-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

.md-row-approved {
  opacity: 0.55;
}

.md-cell-sku { min-width: 140px; }
.md-cell-price { white-space: nowrap; }
.md-cell-discount { white-space: nowrap; }
.md-cell-days { white-space: nowrap; }
.md-cell-clear { white-space: nowrap; }
.md-cell-margin { white-space: nowrap; }
.md-cell-lift { white-space: nowrap; }
.md-cell-actions { white-space: nowrap; }

.md-sku {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.md-title-sm {
  font-size: 12px;
  color: var(--text-dim);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-price-current {
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: line-through;
}

.md-price-markdown {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.md-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Discount badges */
.md-discount-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-badge-gentle {
  background: rgba(59,130,246,0.13);
  color: var(--blue, #3b82f6);
}

.md-badge-moderate {
  background: rgba(245,158,11,0.14);
  color: var(--yellow, #f59e0b);
}

.md-badge-aggressive {
  background: rgba(239,68,68,0.13);
  color: var(--red, #ef4444);
}

@media (max-width: 900px) {
  .md-root { padding: 16px 14px; }
  .md-summary-cards { grid-template-columns: 1fr 1fr; }
  .md-card-value { font-size: 18px; }
  .md-title-sm { max-width: 120px; }
}

/* ── Support Forecast Widget ─────────────────────────────────────────────── */

.support-forecast-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 20px;
}

.support-forecast-volume {
  flex: 0 0 auto;
}

.support-forecast-big-num {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text, #111);
  font-variant-numeric: tabular-nums;
}

.support-forecast-big-label {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.support-forecast-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.support-forecast-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  width: fit-content;
}

.support-forecast-period {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
}

/* Category bar chart */
.support-forecast-cats {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-forecast-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-forecast-cat-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-forecast-cat-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--border, #e5e7eb);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.support-forecast-cat-bar {
  height: 100%;
  background: var(--accent, #c8a97e);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.support-forecast-cat-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 80px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.support-forecast-cat-count {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  background: var(--surface-2, #f0f0f0);
  padding: 1px 6px;
  border-radius: var(--radius);
  font-variant-numeric: tabular-nums;
}

/* Risk factor badges */
.support-forecast-risk-badge {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--text, #111);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
  max-width: 100%;
}

.support-forecast-risk-badge-ok {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
}

@media (max-width: 700px) {
  .support-forecast-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .support-forecast-big-num {
    font-size: 40px;
  }
  .support-forecast-cat-label {
    width: 100px;
  }
}
    .jg-send-btn:hover:not(:disabled) {
      background: #8b6841;
    }
    .jg-send-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .jg-shortcut-hint {
      font-size: 10px;
      color: var(--text-dim);
      text-align: center;
      margin-top: 6px;
    }
    .jg-shortcut-hint kbd {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 3px;
      padding: 1px 4px;
      font-size: 10px;
      font-family: var(--font-mono);
    }

    /* Floating button */
    .jarvis-floating-btn {
      position: fixed;
      bottom: 88px;
      right: 24px;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent) 0%, #c9a96e 100%);
      color: #fff;
      border: none;
      cursor: pointer;
      z-index: var(--z-palette); /* was 9997 — nearest token preserving position below toast */
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -1px;
      box-shadow: 0 4px 16px rgba(166, 124, 82, 0.35);
      transition: all 0.2s ease;
    }
    .jarvis-floating-btn:hover,
    .jarvis-floating-btn:focus-visible {
      transform: scale(1.08);
      box-shadow: 0 6px 24px rgba(166, 124, 82, 0.45);
      outline: 2px solid var(--accent, #c8a97e);
      outline-offset: 3px;
    }
    .jarvis-floating-btn:active {
      transform: scale(0.95);
    }
    .jarvis-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background: var(--red);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      border: 2px solid var(--bg);
    }

    /* Mobile responsive */
    @media (max-width: 600px) {
      .jarvis-global-panel {
        width: 100vw;
        border-left: none;
      }
      .jarvis-floating-btn {
        bottom: 76px;
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: 18px;
      }
    }
    /* ─── B3/B4: Reason codes + camera scanner (warehouse) ───────────── */
    .wh-req { color: var(--red); font-weight: 700; }
    .wh-reason-select {
      width: 100%;
      padding: 8px 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-size: 14px;
    }
    .wh-reason-select:focus {
      outline: none;
      border-color: var(--accent);
    }
    .wh-sku-input-wrap {
      display: flex;
      gap: 6px;
      align-items: stretch;
    }
    .wh-sku-input-wrap input {
      flex: 1;
    }
    .wh-scan-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }
    .wh-scan-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .wh-scan-btn-lg {
      padding: 0 14px;
      min-width: 44px;
      min-height: 44px;
    }
    .scan-input-wrapper { position: relative; display: flex; align-items: center; gap: 8px; }
    .scan-input-wrapper .scan-input { flex: 1; }
    .wh-scanner-overlay .journey-modal { max-width: 440px; }
    .wh-scanner-video-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      background: #000;
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .wh-scanner-video-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .wh-scanner-reticle {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      height: 30%;
      border: 2px dashed rgba(255,255,255,0.75);
      border-radius: var(--radius);
      pointer-events: none;
    }
    .wh-scanner-status {
      margin-top: 8px;
      font-size: 13px;
      color: var(--text-muted);
      text-align: center;
    }
    .wh-scanner-status-err { color: var(--red); }

    /* ═══════════════════════════════════════════════════════════
       2026 Top-bar refresh — unified .icon-btn, segmented font-scale
       control, modern sign-out. Uses !important on structural props
       so we reliably override older .mobile-menu-btn, .refresh-btn,
       .theme-toggle-btn, .shell-search-btn, .sign-out-btn rules in
       the index.html inline <style> block + media-query overrides.
       ═══════════════════════════════════════════════════════════ */
    .icon-btn,
    .mobile-menu-btn.icon-btn,
    .theme-toggle-btn.icon-btn,
    .shell-search-btn.icon-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px;
      background: transparent;
      border: none;
      color: var(--text-muted);
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      min-height: 40px !important;
      padding: 0 !important;
      margin: 0;
      border-radius: var(--radius);
      cursor: pointer;
      line-height: 1 !important;
      font-size: 0; /* strips any leftover text glyph */
      transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }
    .icon-btn:hover {
      background: var(--surface-2);
      color: var(--text);
    }
    .icon-btn:active { transform: scale(0.94); }
    .icon-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    .icon-btn svg {
      flex-shrink: 0;
      display: block;
    }
    /* Search button: icon + ⌘K hint side-by-side on desktop */
    .icon-btn.shell-search-btn {
      width: auto !important;
      min-width: 40px !important;
      padding: 0 12px !important;
      gap: 8px;
    }
    .icon-btn .shell-kbd {
      font-size: 11px;
      color: var(--text-muted);
      font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
      letter-spacing: 0;
      line-height: 1;
    }

    /* Segmented A- / A+ font-scale control — clean pill, no divider */
    .font-scale-group {
      display: inline-flex !important;
      align-items: stretch !important;
      background: var(--surface-2);
      border: none;
      border-radius: var(--radius);
      padding: 0;
      height: 40px;
      overflow: hidden;
      flex-shrink: 0;
    }
    .font-scale-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: transparent !important;
      border: none !important;
      color: var(--text-muted);
      font-size: 13px !important;
      font-weight: 600;
      font-family: inherit;
      width: 36px !important;
      height: 100% !important;
      min-height: 0 !important;
      min-width: 0 !important;
      padding: 0 !important;
      margin: 0;
      line-height: 1 !important;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .font-scale-btn:hover {
      background: var(--surface) !important;
      color: var(--text);
    }
    .font-scale-btn:active { background: var(--surface); }
    .font-scale-btn:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }

    /* Modern sign-out — text-button feel, danger hint only on hover */
    .sign-out-btn {
      display: inline-flex !important;
      align-items: center !important;
      background: transparent !important;
      border: none !important;
      color: var(--text-muted);
      padding: 8px 12px !important;
      border-radius: var(--radius);
      font-size: 13px !important;
      font-weight: 500;
      letter-spacing: 0 !important;
      text-transform: none !important;
      line-height: 1 !important;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
    }
    .sign-out-btn:hover {
      background: var(--red-dim, rgba(239, 68, 68, 0.08));
      color: var(--red);
    }

    /* Mobile layout: tighter header on narrow screens */
    @media (max-width: 640px) {
      .icon-btn,
      .mobile-menu-btn.icon-btn,
      .theme-toggle-btn.icon-btn,
      .shell-search-btn.icon-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 9px;
      }
      .font-scale-group { height: 44px; border-radius: 9px; }
      .font-scale-btn { width: 38px !important; font-size: 13px !important; }
      .sign-out-btn { padding: 7px 10px !important; font-size: 12px !important; }
      .icon-btn .shell-kbd { display: none; }
      .icon-btn.shell-search-btn { width: 44px !important; padding: 0 !important; gap: 0; }
    }

    /* ─── Layout ─── */

    /* ─── Header ─── */

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
      white-space: nowrap;
    }

    .refresh-btn {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Global health dot ─── */
    .health-dot-wrap {
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 4px;
    }

    /* ─── Header data freshness dot ─── */
    .header-freshness-wrap {
      display: flex;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      position: relative;
    }
    /* Tooltip is click-only — hover-open made it pop open whenever the cursor
       drifted near the header dot (Cole's complaint 2026-04-27). */
    #data-freshness-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
      background: var(--text-muted);
      transition: background 0.3s;
      flex-shrink: 0;
    }
    .freshness-ok { background: #22c55e !important; }
    .freshness-warning { background: #f59e0b !important; animation: freshnessWarn 2s ease-in-out infinite; }
    .freshness-critical { background: var(--red) !important; animation: freshnessCrit 1s ease-in-out infinite; }
    @keyframes freshnessWarn {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    @keyframes freshnessCrit {
      0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
      50% { opacity: 0.85; box-shadow: 0 0 0 4px rgba(220,38,38,0); }
    }
    .freshness-tooltip {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 280px;
      max-height: 360px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
      z-index: var(--z-toast);
      padding: 12px 14px 10px;
      font-size: 12px;
      color: var(--text);
    }
    .freshness-tooltip-title { font-weight: 600; margin-bottom: 10px; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); }
    .freshness-tooltip-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); }
    .freshness-tooltip-row:first-of-type { border-top: none; }
    .freshness-tooltip-name { color: var(--text); font-size: 12px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .freshness-tooltip-status { font-weight: 500; font-size: 11px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
    .freshness-tooltip-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
    .freshness-tooltip-status.ok { color: var(--green); }
    .freshness-tooltip-status.warn { color: var(--yellow); }
    .freshness-tooltip-status.stale, .freshness-tooltip-status.error, .freshness-tooltip-status.never { color: var(--red); }

    /* ─── Critical alerts banner (global header) ─── */
    .critical-alert-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .critical-alert-body {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }
    .critical-alert-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 2px 6px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .critical-alert-badge.critical { background: rgba(0,0,0,0.3); color: #fca5a5; }
    .critical-alert-badge.warning { background: rgba(0,0,0,0.2); color: #fde68a; }
    .critical-alert-text { font-size: 12px; line-height: 1.4; }
    .critical-alert-title { font-weight: 600; }
    .critical-alert-msg { opacity: 0.85; font-size: 11px; margin-top: 1px; }
    .critical-alert-ts { font-size: 10px; opacity: 0.65; flex-shrink: 0; }
    .critical-alert-dismiss {
      background: rgba(255,255,255,0.15);
      border: none;
      color: white;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 2px 6px;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .critical-alert-dismiss:hover { background: rgba(255,255,255,0.3); }
    .critical-alert-link { color: rgba(255,255,255,0.9); text-decoration: underline; cursor: pointer; font-size: 11px; flex-shrink: 0; }

    /* ─── Data freshness bar ─── */

    /* ─── Sidebar ─── */

    .nav-section {
      padding: 0;
      margin-bottom: 4px;
    }

    .nav-section-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--text-dim);
      margin-bottom: 0;
      padding: 0;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--text-muted);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      font-size: 13px;
    }

    /* ─── Main Content ─── */
    .main {
      overflow-y: auto;
      padding: 16px 20px;
      padding-bottom: 90px;
      background: var(--bg);
    }

    /* ─── Page Header ─── */

    /* ─── Stats Row ─── */

    /* Compact variant — used on views with 6+ stat cards where vertical space matters */
    .stats-row.stats-row-compact {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    .stats-row.stats-row-compact .stat-card { padding: 8px 10px; }
    .stats-row.stats-row-compact .stat-label { font-size: 10px; margin-bottom: 2px; }
    .stats-row.stats-row-compact .stat-value { font-size: 18px; letter-spacing: -0.5px; }
    .stats-row.stats-row-compact .stat-detail { font-size: 10px; margin-top: 2px; }
    /* Mobile: pack stat cards 3-up so 6 cards fit in 2 rows instead of 6 stacked */
    @media (max-width: 600px) {
      .stats-row.stats-row-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 10px;
      }
      .stats-row.stats-row-compact .stat-card { padding: 8px 8px; min-width: 0; min-height: 78px; display: flex; flex-direction: column; justify-content: space-between; }
      /* Allow labels to wrap to 2 lines so longer KPI names ("SKUs in Stock",
         "Fulfillable Units", "Avg Days to Ship", "Oldest Unshipped") fit
         cleanly at 3-up on a 375px iPhone instead of truncating with ellipsis. */
      .stats-row.stats-row-compact .stat-label { font-size: 9px; letter-spacing: 0.15px; line-height: 1.2; min-height: 22px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
      .stats-row.stats-row-compact .stat-value { font-size: 16px; line-height: 1.1; }
      .stats-row.stats-row-compact .stat-detail { font-size: 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    }

    /* ─── Filters / Toolbar ─── */

    .filter-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .filter-select:hover { border-color: var(--border-hover); }
    .filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.15); }

    .issue-status-select {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 4px 8px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      outline: none;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .toggle-btn {
      background: var(--surface);
      border: none;
      color: var(--text-muted);
      padding: 7px 14px;
      font-size: 12px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      border-right: 1px solid var(--border);
    }

    /* ─── Table ─── */

    tr:hover td {
      background: var(--hover, rgba(0, 0, 0, 0.03));
    }

    /* ─── Status Pills ─── */

    .sku-link {
      color: var(--text);
      text-decoration: none;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .mono {
      font-family: var(--font-mono);
      font-size: 11px;
    }
    .sku-link {
      cursor: pointer;
      color: var(--text);
      text-decoration: none;
    }
    .text-danger { color: var(--red); }
    .text-success { color: var(--green); }

    /* ─── Skeleton Loading Blocks ─── */
    .skeleton-block {
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.5s infinite;
      border-radius: var(--radius-sm);
    }
    .loading-skeleton { padding: 32px; display: flex; flex-direction: column; gap: 16px; }
    .skeleton-line { height: 16px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; width: 100%; }
    .skeleton-line.w60 { width: 60%; }
    .skeleton-row { display: flex; gap: 12px; }
    .view-skeleton { padding: 20px 24px; display: flex; flex-direction: column; gap: 0; }
    @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ─── Card (generic container) ─── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 500;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .btn:hover { border-color: var(--text-muted); }
    .btn-secondary { background: var(--surface-2); }
    .btn-secondary:hover { background: var(--surface-3); }

    /* ─── Pill blue variant ─── */
    .pill.blue { background: var(--blue-dim); color: var(--blue); }

    /* ─── Badge (standalone, outside nav-item) ─── */
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: var(--radius-sm);
      font-size: 11px;
      font-weight: 600;
      background: var(--surface-2);
      color: var(--text-muted);
    }
    .badge.warning { background: var(--yellow-dim); color: var(--yellow); }
    .badge.danger { background: var(--red-dim); color: var(--red); }
    .badge.success { background: var(--green-dim); color: var(--green); }

    /* ─── View Header (competitor-intel style) ─── */
    .view-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .view-header h1 {
      font-size: 22px;
      font-weight: 600;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ─── Tab Bar ─── */
    .tab-bar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
      overflow-x: auto;
    }
    .tab-btn {
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      color: var(--text);
      border-bottom-color: var(--accent);
      font-weight: 600;
    }

    /* ─── Stat Cards (competitor-intel style) ─── */
    .stat-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }
    .stat-cards .stat-card.warning { border-left: 3px solid var(--yellow); }
    .stat-cards .stat-card.success { border-left: 3px solid var(--green); }

    /* ─── Section ─── */
    .section { margin-bottom: 16px; }
    .section h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
    .section h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }

    /* ─── Spacing Utilities ─── */
    .mt-24 { margin-top: 24px; }

    /* ─── Error Hint ─── */
    .error-hint { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

    /* ─── Empty State ─── */

    /* ─── Loading ─── */

    /* ─── Pagination ─── */

    /* ─── Scrollbar ─── */

    /* ─── Mobile Hamburger ─── */
    .mobile-menu-btn {
      display: none;
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 22px;
      cursor: pointer;
      padding: 8px 10px;
      border-radius: var(--radius-sm);
      line-height: 1;
      margin-right: 4px;
      min-height: 44px;
      min-width: 44px;
      align-items: center;
      justify-content: center;
    }

    /* ─── Responsive: Tablet (1024px) ─── */
    @media (max-width: 1024px) {
      .app { grid-template-columns: 200px 1fr; }
      .main { padding: 16px; }
      .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
      .stat-value { font-size: 24px; }
      .page-title { font-size: 18px; }

      /* Ensure tables scroll horizontally on tablet */
      .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    }

    /* ─── Responsive: Mobile (768px) ─── */
    @media (max-width: 768px) {
      body { font-size: 14px; }

      .app { grid-template-columns: 1fr; }

      .mobile-menu-btn { display: block; }

      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: var(--z-header);
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
        overflow-y: auto;
        padding-top: 12px;
      }
      .sidebar.mobile-open { transform: translateX(0); }

      /* Touch-friendly nav items */
      .nav-item {
        padding: 12px 16px;
        min-height: 44px;
        font-size: 14px;
      }
      .nav-section-header {
        padding: 12px 16px;
        min-height: 44px;
      }

      .header { padding: 0 12px; gap: 4px; }
      .header-left .logo-sub { display: none; }
      .sync-status, .view-as-switcher, .view-mode-indicator { display: none !important; }
      .live-indicator span { display: none; }
      .refresh-btn:not(.shell-search-btn):not(.sync-now-btn):not(.lang-toggle-btn) { display: none; }
      .shell-search-btn .shell-kbd { display: none; }

      /* Header buttons touch-friendly */
      .refresh-btn, .sync-now-btn { min-height: 44px; min-width: 44px; padding: 8px 12px; }
      .header-right { gap: 6px; }

      .main { padding: 12px; padding-bottom: 90px; }
      .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .stats-row { grid-template-columns: repeat(2, 1fr) !important; }

      /* Tables: horizontal scroll, no forced min-width on mobile */
      .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .table-scroll { max-height: none; }
      .main table {
        display: table;
        width: max-content;
        min-width: 100%;
        max-width: none;
        table-layout: auto;
      }
      .main table td, .main table th { word-break: break-word; }

      /* Toolbar and search */
      .toolbar { gap: 6px; flex-direction: column; align-items: stretch; }
      .search-input { width: 100%; }
      .filter-btn, .filter-select, .toggle-btn { min-height: 44px; font-size: 13px; }

      .page-title { font-size: 16px; }
      /* Keep page-header on a single row at mobile so action buttons
         (Refresh, Save, Export, etc.) sit next to the title instead of
         dropping to a second row that wastes ~50px of scarce vertical space. */
      .page-header { flex-wrap: nowrap; gap: 8px; align-items: center; }
      .page-header > div:first-child { min-width: 0; flex: 1 1 auto; }
      .page-header > div:not(:first-child) { flex: 0 0 auto; }

      /* Touch-friendly buttons throughout */
      .btn, .action-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
      .expand-btn { min-height: 44px; min-width: 44px; font-size: 16px; }
      /* Sub-view tabs and bulk-bar buttons: bump to comfortable tap size */
      .tab { min-height: 44px; padding: 11px 16px; display: inline-flex; align-items: center; }
      .bulk-btn { min-height: 44px; padding: 10px 16px; }

      /* Cards stack */
      .card { margin-bottom: 12px; }

      /* User info compact */
      .user-info { padding-left: 8px; gap: 6px; }
      .user-name { display: none; }
      .user-role-badge { display: none; }
      .sign-out-btn { min-height: 44px; padding: 8px 12px; }

      /* Modals and popovers */
      .health-popover {
        width: min(260px, calc(100vw - 16px));
        right: 0;
        left: auto;
      }

      /* Right-anchored slide-in panel: cap to viewport so the 420px
         desktop width doesn't overflow narrow phones. */
      .side-panel { width: min(420px, 100vw); }

      .main input:not([type="checkbox"]):not([type="radio"]),
      .main select,
      .main textarea,
      .search-modal-input,
      .jg-input,
      #pinInput,
      #assistantInput,
      #globalSearchInput {
        font-size: 16px !important;
      }

      /* Grid layouts in views should stack */
      [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
      [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* ─── Responsive: Small Mobile (480px) ─── */
    @media (max-width: 480px) {
      .stat-grid { grid-template-columns: 1fr !important; }
      .stats-row { grid-template-columns: 1fr !important; }
      /* Compact variant stays 3-up on mobile so 6+ KPI cards don't waste vertical space */
      .stats-row.stats-row-compact { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
      .header-right { gap: 4px; }
      .stat-value { font-size: 22px; }

      /* Single column everything */
      [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
      [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }

      /* Sidebar full-width on very small screens */
      .sidebar { width: 100%; }

      /* Hide sync button on very small screens */
      .sync-now-btn { display: none !important; }

      /* Compact header */
      .logo { font-size: 13px; }

      /* Data freshness bar wrap */
      .data-freshness { flex-wrap: wrap; }
    }

    /* ─── Table row detail expand ─── */

    /* ─── Action button ─── */
    .action-btn {
      background: var(--accent-dim);
      border: 1px solid rgba(200, 169, 126, 0.3);
      color: var(--text);
      padding: 4px 10px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Margin bar ─── */

    /* Tabs for sub-views */
    .tab {
      padding: 8px 16px;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .tab:hover { color: var(--text); }

    /* ─── Note Icons & Editor ─── */
    .note-icon:hover { opacity: 1; background: var(--surface-2); }

    /* ─── Expandable Row Detail ─── */
    .view-customer-btn {
      padding: 6px 14px;
      background: transparent;
      border: 1px solid var(--border-hover);
      color: var(--text);
      border-radius: var(--radius-sm);
      font-size: 11px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      align-self: flex-start;
    }

    /* ─── Gorgias Ticket Cards ─── */

    /* Ticket Expansion */

    /* ─── Side Panel ─── */
    .side-panel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: var(--z-banner); /* was 109 — nearest token above sidebar (--z-header:100) */
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .side-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: 420px;
      height: 100vh;
      height: 100dvh;
      background: var(--surface);
      border-left: 1px solid var(--border);
      z-index: var(--z-banner); /* was 110 — matches --z-banner (110) exactly */
      transform: translateX(100%);
      transition: transform 0.25s ease;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    /* ─── Customers Tab ─── */

    /* ─── Activity Feed ─── */
    .feed-filter-btn {
      padding: 4px 12px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 11px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .feed-undo-btn {
      padding: 3px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text-muted);
      font-size: 10px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* ─── Morning Brief ─── */

    /* ─── Bar Chart (SLA / Product Issues) ─── */
    .bar-fill {
      width: 100%;
      border-radius: 4px 4px 0 0;
      min-height: 2px;
      transition: height 0.3s;
      will-change: height;
    }

    /* ─── Aging Bands (SLA) ─── */
    .aging-bar-fill {
      height: 100%;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      padding-left: 6px;
      font-size: 10px;
      font-weight: 600;
      color: var(--bg);
      transition: width 0.3s;
      will-change: width;
    }

    /* ─── Order Journey Modal ─── */
    .journey-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      height: 100dvh; /* dynamic viewport: shrinks when mobile keyboard opens */
      background: rgba(0,0,0,0.7);
      z-index: var(--z-modal);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-y: auto; /* allow scroll if modal taller than viewport */
      -webkit-overflow-scrolling: touch;
    }
    .journey-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      width: 90%;
      max-width: 800px;
      max-height: 85vh;
      overflow-y: auto;
      padding: 24px;
    }
    .pill.mto-awaiting { background: rgba(255,255,255,0.06); color: var(--text-muted); }
    .order-link-icon:hover { opacity: 1; }

    /* ─── Inventory Matrix ─── */

    /* ─── Order Map (State Tile Grid) ─── */

    /* ─── Export Button ─── */
    .export-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 7px 14px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 12px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* ─── Date Range Bar ─── */
    .date-preset-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 5px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 11px;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Segment Chips ─── */
    .segment-chip {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 16px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--text-muted); font-size: 12px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Bulk Action Bar ─── */
    .bulk-action-bar {
      position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
      background: var(--surface); border: 1px solid var(--accent);
      border-radius: var(--radius); padding: 8px 16px;
      display: flex; align-items: center; gap: 10px;
      z-index: var(--z-dropdown); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
      animation: slideUp 0.2s ease; white-space: nowrap;
    }
    .bulk-btn {
      background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
      padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Global Search (Cmd+K) ─── */
    /* Live refresh indicator */
    .live-indicator { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-dim); padding: 3px 9px; border-radius: var(--radius); background: var(--surface-2); user-select: none; transition: background 0.4s, color 0.4s; }

    /* Warehouse grid layout */
    .wh-grid-header {
      display: grid; grid-template-columns: 48px repeat(5, 1fr); gap: 6px;
      margin-bottom: 6px; position: sticky; top: 0; z-index: var(--z-raised);
      background: var(--bg); padding-bottom: 4px;
    }
    .wh-grid-cell {
      padding: 10px 8px; background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--radius); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; text-align: center;
      min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }

    /* Locations drilldown KPI bar */
    .wh-kpi-row { display: flex; gap: 12px; flex-wrap: wrap; }
    .wh-kpi-row-mb { margin-bottom: 20px; }
    .wh-kpi-card {
      background: var(--surface-1, #f8fafc); border: 1px solid var(--border, #e2e8f0);
      border-radius: var(--radius); padding: 14px 20px; flex: 1; min-width: 120px;
    }
    .wh-kpi-card-clickable { cursor: pointer; transition: border-color .15s; }
    .wh-kpi-card-clickable:hover { border-color: var(--blue); }
    .wh-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary, #1e293b); line-height: 1; }
    .wh-kpi-label { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 4px; display: flex; align-items: center; gap: 4px; }

    /* Shelf detail panel — renders below the full grid, not mid-grid */
    .shelf-inline-detail {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-top: 16px;
      overflow: hidden;
      animation: shelfSlideDown 0.15s ease-out;
    }
    .scan-mode-btn {
      padding: 12px 32px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
      background: var(--surface); color: var(--text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Pick List System ─── */
    .pick-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; will-change: width; }
    .pick-list-card-actions button { padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 500; transition: background 0.15s, color 0.15s, border-color 0.15s; }


    .pick-tab-group { display: flex; gap: 0; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .pick-tab-group::-webkit-scrollbar { display: none; }
    .pick-tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; flex: 0 0 auto; white-space: nowrap; }


    /* Composite / Multi-box indicators */

    /* ─── Bulk Label Generation ─── */
    .bulk-lbl-rate-btn { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent); transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .bulk-lbl-go-btn { padding: 9px 22px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; cursor: pointer; border: none; background: var(--accent); color: var(--bg); transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* ─── Inventory Receiving ─── */
    .rcv-container { max-width: 1100px; }
    .rcv-steps { display: flex; align-items: center; gap: 0; margin: 16px 0 24px; }
    .rcv-step { display: flex; align-items: center; gap: 8px; }
    .rcv-step-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface); }
    .rcv-step-label { font-size: 13px; font-weight: 500; color: var(--text-muted); }
    .rcv-step-active .rcv-step-num { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
    .rcv-step-active .rcv-step-label { color: var(--text); font-weight: 600; }
    .rcv-step-done .rcv-step-num { border-color: var(--green); color: var(--bg); background: var(--green); }
    .rcv-step-done .rcv-step-label { color: var(--text-muted); }
    .rcv-step-line { flex: 1; height: 1px; background: var(--border); margin: 0 8px; min-width: 24px; }
    .rcv-step-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 8px; }
    .rcv-step-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
    .rcv-back-link { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 0; margin-bottom: 16px; display: inline-flex; align-items: center; gap: 4px; }
    .rcv-back-link:hover { color: var(--text); }
    .rcv-empty-state { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; color: var(--text-muted); }
    /* Warehouse card grid */
    .rcv-wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
    .rcv-wh-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .rcv-wh-card:hover { border-color: var(--accent); background: var(--accent-dim); }
    .rcv-wh-selected { border-color: var(--accent) !important; background: var(--accent-dim) !important; }
    .rcv-wh-icon { color: var(--text-muted); }
    .rcv-wh-info { flex: 1; }
    .rcv-wh-name { font-size: 14px; font-weight: 600; color: var(--text); }
    .rcv-wh-code { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
    .rcv-wh-arrow { color: var(--text-dim); }
    /* Shelf */
    .rcv-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 6px; }
    .rcv-shelf-box { max-width: 480px; }
    .rcv-shelf-input { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 14px; box-sizing: border-box; }
    .rcv-shelf-input:focus { border-color: var(--accent); outline: none; }
    @media (max-width: 640px) {
      .rcv-step-body { padding: 16px 12px; }
      .rcv-shelf-box { max-width: 100%; }
      .rcv-shelf-input { font-size: 16px; padding: 12px 14px; min-height: 44px; }
      #rcv-new-shelf-toggle { min-height: 44px; font-size: 14px !important; padding: 10px 14px !important; }
      #rcv-new-shelf-code, #rcv-new-shelf-zone { width: 100% !important; font-size: 16px !important; min-height: 44px; }
      #rcv-new-shelf-panel .action-btn, #rcv-new-shelf-panel .btn { min-height: 44px; width: 100%; }
      #rcv-new-shelf-panel > div:nth-child(2) { flex-direction: column; gap: 10px !important; align-items: stretch !important; }
      #rcv-new-shelf-panel > div:nth-child(2) > div { width: 100%; }
    }
    /* Scan area */
    .rcv-scan-context { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; flex-wrap: wrap; }
    .rcv-switch-btn { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; padding: 3px 10px; cursor: pointer; }
    .rcv-switch-btn:hover { border-color: var(--text); color: var(--text); }
    .rcv-scan-area { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; transition: background 0.15s; }
    .rcv-scan-row { display: flex; gap: 8px; align-items: center; }
    .rcv-scan-input-lg { flex: 1; padding: 10px 14px; font-size: 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: var(--font-mono, monospace); letter-spacing: 0.05em; }
    .rcv-scan-input-lg:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-dim); }
    .rcv-add-btn { white-space: nowrap; }
    .rcv-feedback { font-size: 13px; margin-top: 8px; min-height: 20px; display: flex; align-items: center; gap: 6px; }
    .rcv-feedback-ok { color: var(--green); }
    .rcv-feedback-error { color: var(--red); }
    .rcv-flash-ok { background: rgba(22, 163, 74, 0.06) !important; border-color: var(--green) !important; }
    @keyframes rcvShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }
    .rcv-shake { animation: rcvShake 0.35s ease; }
    /* Tally / item list */
    .rcv-tally { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
    .rcv-tally-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .rcv-tally-title { font-size: 13px; font-weight: 600; color: var(--text); }
    .rcv-clear-btn { background: none; border: none; color: var(--text-muted); font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
    .rcv-clear-btn:hover { color: var(--red); background: var(--red-dim); }
    .rcv-item-list { display: flex; flex-direction: column; gap: 0; }
    .rcv-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
    .rcv-item:last-child { border-bottom: none; }
    .rcv-item-sku { font-size: 12px; font-weight: 600; min-width: 100px; color: var(--text); }
    .rcv-item-title { flex: 1; font-size: 12px; color: var(--text-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .rcv-item-qty { display: flex; align-items: center; gap: 4px; }
    .rcv-qty-btn { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }
    @media (max-width: 640px) { .rcv-qty-btn { min-width: 44px; min-height: 44px; width: auto; height: auto; padding: 0 8px; } }
    .rcv-qty-btn:hover { border-color: var(--text); background: var(--surface-3); }
    .rcv-qty-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; }
    .rcv-remove-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: 3px; }
    .rcv-remove-btn:hover { color: var(--red); }
    .rcv-empty-scan { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 24px; color: var(--text-dim); }
    /* Commit row */
    .rcv-commit-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 4px; }
    .rcv-cancel-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; padding: 7px 16px; cursor: pointer; }
    .rcv-cancel-btn:hover { border-color: var(--red); color: var(--red); }
    .rcv-commit-btn { min-width: 160px; }
    /* Summary */
    .rcv-summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
    .rcv-summary-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
    .rcv-summary-stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 18px; min-width: 80px; }
    .rcv-summary-val { font-size: 22px; font-weight: 700; color: var(--text); }
    .rcv-summary-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
    .rcv-summary-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }

    /* ─── PO Link / Compare (Receiving) ─── */
    .rcv-po-link-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .rcv-link-po-btn { background: none; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .rcv-link-po-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
    .rcv-po-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--accent-dim); border: 1px solid rgba(166,124,82,0.3); border-radius: var(--radius-sm); font-size: 12px; color: var(--accent); }
    .rcv-po-badge-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px 3px; border-radius: 3px; display: inline-flex; align-items: center; }
    .rcv-po-badge-clear:hover { color: var(--red); }
    .rcv-po-hint { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12px; padding: 12px 0; }
    /* Two-column layout when PO is linked in Step 3 */
    .rcv-body-cols { display: block; }
    .rcv-body-cols.rcv-has-po { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
    @media (max-width: 900px) { .rcv-body-cols.rcv-has-po { grid-template-columns: 1fr; } }
    .rcv-col-scan { min-width: 0; }
    .rcv-col-po { min-width: 0; }
    /* PO panel */
    .rcv-po-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .rcv-po-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
    .rcv-po-panel-title { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
    .rcv-po-panel-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
    .rcv-po-progress-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .rcv-po-progress-bar { flex: 1; height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
    .rcv-po-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.3s; will-change: width; }
    .rcv-po-progress-label { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
    .rcv-po-alerts { display: flex; align-items: center; gap: 6px; padding: 6px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
    .rcv-po-alert-ok { font-size: 11px; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 3px; }
    .rcv-po-alert-over { font-size: 11px; font-weight: 600; color: var(--yellow); display: flex; align-items: center; gap: 3px; }
    .rcv-po-alert-under { font-size: 11px; font-weight: 600; color: var(--text-muted); display: flex; align-items: center; gap: 3px; }
    .rcv-po-table-wrap { overflow-x: auto; max-height: 400px; overflow-y: auto; }
    .rcv-po-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .rcv-po-table th { text-align: left; padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border); background: var(--surface-2); position: sticky; top: 0; z-index: var(--z-base); }
    .rcv-po-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .rcv-po-table tr:last-child td { border-bottom: none; }
    .rcv-po-table tr.rcv-po-over { background: rgba(217, 119, 6, 0.04); }
    .rcv-po-table tr.rcv-po-under { background: var(--surface); }
    /* PO picker modal */
    .rcv-po-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
    .rcv-po-picker-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 480px; max-width: calc(100vw - 32px); max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
    .rcv-po-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .rcv-po-picker-title { font-size: 15px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 7px; }
    #rcv-po-picker-body { overflow-y: auto; flex: 1; }
    .rcv-po-picker-loading { padding: 32px; text-align: center; color: var(--text-muted); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .rcv-po-picker-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
    .rcv-po-picker-list { display: flex; flex-direction: column; }
    .rcv-po-picker-row { padding: 12px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
    .rcv-po-picker-row:hover { background: var(--surface-2); }
    .rcv-po-picker-row:last-child { border-bottom: none; }
    .rcv-po-picker-row-main { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
    .rcv-po-picker-row-sub { font-size: 12px; color: var(--text-muted); }
    /* Summary PO variance section */
    .rcv-summary-po-section { margin-bottom: 20px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .rcv-summary-po-header { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 7px; background: var(--surface-3); }

    /* ─── Login Overlay ─── */

    /* ─── User Info in Header ─── */
    .sign-out-btn {
      background: none; border: 1px solid var(--border); color: var(--text-muted);
      padding: 4px 10px; border-radius: var(--radius-sm);
      font-size: 11px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── View-As Switcher ─── */
    .view-as-btn {
      background: none; border: none; color: var(--text-muted);
      padding: 3px 10px; border-radius: 16px; font-size: 10px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
      cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; white-space: nowrap;
    }

    /* ─── Form Inputs (Global) ─── */

    /* ─── Label Generator ─── */
    .lbl-selected-card .clear-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 10px;
      padding: 3px 8px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
      font-family: var(--font);
    }

    /* Pick list item states */

    /* ─── Signature Required Badge ─── */
    .lbl-sig-badge {
      display: inline-block;
      padding: 1px 6px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      background: rgba(147, 130, 220, 0.15);
      color: #7c6bc4;
      border: 1px solid rgba(147, 130, 220, 0.3);
      border-radius: 3px;
      margin-left: 4px;
      vertical-align: middle;
    }
    .lbl-sig-notice {
      padding: 10px 14px;
      margin-bottom: 12px;
      background: rgba(147, 130, 220, 0.08);
      border: 1px solid rgba(147, 130, 220, 0.2);
      border-radius: var(--radius-sm);
      font-size: 12px;
      color: #7c6bc4;
    }
    .lbl-sig-notice strong { font-weight: 600; }

    /* ─── Label Queue Builder (Phase 1) ─── */
    .lbl-phase-step { color: var(--text-muted); cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .lbl-queue-remove { cursor: pointer; color: var(--text-muted); opacity: 0.5; font-size: 14px; transition: opacity 0.15s, color 0.15s; }
    .lbl-queue-remove:hover { opacity: 1; color: var(--red, #ef4444); }
    .lbl-queue-continue-btn {
      padding: 10px 24px; font-size: 13px; font-weight: 600; font-family: var(--font);
      background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius);
      cursor: pointer; transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
    }
    .lbl-queue-clear-btn {
      padding: 8px 16px; font-size: 12px; font-weight: 500; font-family: var(--font);
      background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .lbl-queue-back-btn {
      padding: 8px 16px; font-size: 12px; font-weight: 500; font-family: var(--font);
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
      color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    /* ─── Add Item Panel ─── */

    /* ─── Label Review Table (Phase 2) ─── */

    /* Inline expand detail panel */

    /* Dropdowns in review table */

    /* Status badges */
    .lbl-review-generate-btn {
      padding: 12px 28px; font-size: 14px; font-weight: 600; font-family: var(--font);
      background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius);
      cursor: pointer; transition: opacity 0.2s, transform 0.2s;
    }
    .lbl-loading-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: lbl-spin 0.6s linear infinite; }
    @keyframes lbl-spin { to { transform: rotate(360deg); } }

    /* Toast notification */

    /* ─── Pill Color Variants (global) ─── */

    /* ─── User Management ─── */

    /* ─── SEO & AI Search ─── */

    /* ── Global utilities ─────────────────────── */

    /* ── Return label modal (.rl-*) ───────────── */
    .rl-dest-wrapper .form-input { margin-bottom: 8px; }
    /* ── Return label rate comparison ── */
    .rl-rate-row { display: grid; grid-template-columns: 20px 70px 1fr auto auto auto; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; background: var(--surface); transition: border-color 0.15s; }
    .rl-rate-provider { font-weight: 600; font-size: 11px; white-space: nowrap; }

    /* ── Tools row: Rate Calc + WJS Import side by side ── */

    /* ── Rate Calculator panel (.lbl-rate-calc-*) ── */

    /* ── Returns misc (.ret-*) ────────────────── */

    /* ── Customer repeat (.cust-*) ────────────── */

    /* ── Order map (.omap-*) ──────────────────── */

    /* ── Fleet (.fl-*) ────────────────────────── */

    /* ─── Returns ─── */
    .ret-filter-btn { padding: 5px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); margin-right: 4px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    /* Returns table — constrain SKU column width */
    .ret-table td.mono, .ret-table th:nth-child(3) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
    .ret-table td.mono { white-space: normal; }
    /* Composite return rows */
    .ret-composite-first td { border-bottom: none; }
    .ret-composite-cont td { border-top: none; padding-top: 2px; }
    .ret-composite-cont td.mono { padding-left: 12px; }
    .ret-comp-dims { display: block; font-size: 9px; color: var(--text-muted); font-family: var(--font-mono, monospace); white-space: nowrap; }
    .ret-comp-dims:empty { display: none; }
    .ret-li-box-tag { display: inline-block; font-size: 10px; font-weight: 600; background: rgba(124,58,237,0.1); color: var(--purple); padding: 1px 6px; border-radius: var(--radius); margin-left: 4px; vertical-align: middle; }
    .ret-li-component { border-left: 3px solid rgba(124,58,237,0.3); }
    /* Return status pills */
    .ret-search-input { width: 100%; padding: 10px 14px 10px 48px; font-size: 14px; }
    .ret-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); display:flex; align-items:center; justify-content:center; width:18px; height:18px; color: var(--text-muted); font-size: 14px; line-height: 1; pointer-events: none; }
    .ret-search-spinner { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; }
    .ret-order-card { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; background: var(--bg); }
    .ret-line-item { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; background: var(--bg); display: flex; align-items: center; gap: 12px; }
    .ret-li-check { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    @media (max-width: 640px) { .ret-li-check { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: var(--radius); } }

    /* ─── Accounting ─── */

    /* ─── Marketing Overview ─── */

    /* ─── Marketing Initiatives ─── */
    @media (max-width: 768px) {
      .sa-grid-2 { grid-template-columns: 1fr; }
      .mi-add-grid { grid-template-columns: 1fr 1fr; }
      .mo-header-right { flex-wrap: wrap; gap: 6px; }
    }
    @media (max-width: 480px) {
      .mi-add-grid { grid-template-columns: 1fr; }
    }

    /* ─── ShareASale ─── */

    /* ─── Inventory Matrix ─── */
    .inv-th-sku { text-align: left; min-width: 60px; cursor: pointer; }

    /* ─── Product Detail ─── */
    .pd-header-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }

    /* ─── SLA Tracking ─── */

    /* ─── Location Browse ─── */

    /* Label Generator additions */

    /* Pick List Detail */
    .pld-shelf-edit-btn:hover { color: var(--text); opacity: 1; }

    /* ── New Pick List (NPL) modal ── */

    /* Items section */
    /* 2/box grouping in confirm modal */

    /* Accordion */

    /* Manual entry toggle inside Add Custom Pick */

    /* Search results */

    /* Custom item form */

    /* Address form */

    /* Small button variants */

    /* Delivery address card in detail view */

    /* Pick confirm modal */

    /* Pick completion modal */

    /* Product Issues */

    /* Customers */

    /* Revenue */
    /* Create Pick List */
    /* Creation view split toggle button */
    /* Inline 2/box layout: [SKUs col] [📦 icon centered] [names col] — no extra rows */
    /* Detail view split/merge buttons */
    .cpl-add-select { padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
    /* Reorder Recs */
    /* Action Items + Negative Customers */
    /* Order Map */
    /* Preorder Notes */

    /* Pick List History */

    /* Fleet */

    /* ─── Morning Brief P&L Card ─── */
    /* .mb-pl-{grid,item,label,val} — DEAD: zero references in JS/HTML;
       P&L card was redesigned to use different class names. Confirmed 2026-06-05. */

    /* ─── Morning Brief Top 3 Card ─── */
    .mb-top3-container {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 4px solid var(--accent, #a67c52);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin-bottom: 20px;
    }
    .mb-top3-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .mb-top3-title {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mb-top3-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .mb-top3-timestamp {
      font-size: 11px;
      color: var(--text-muted);
    }
    .mb-top3-refresh-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 4px 8px;
      cursor: pointer;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .mb-top3-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
    .mb-top3-refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    .mb-top3-body { display: flex; flex-direction: column; gap: 8px; }

    .mb-top3-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .mb-top3-item:hover { border-color: var(--accent); background: var(--accent-dim); }

    .mb-top3-rank {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-muted);
      min-width: 20px;
      text-align: center;
    }
    .mb-top3-icon { display: flex; align-items: center; }
    .mb-top3-content { flex: 1; min-width: 0; }
    .mb-top3-item-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
    }
    .mb-top3-item-detail {
      font-size: 11px;
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .mb-top3-badge {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #fff;
      padding: 2px 8px;
      border-radius: var(--radius);
      white-space: nowrap;
    }
    .mb-top3-chevron { color: var(--text-muted); display: flex; }
    .mb-top3-empty {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px;
      color: var(--green);
      font-size: 14px;
      font-weight: 500;
    }
    .mb-top3-error {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .mb-top3-loading { display: flex; flex-direction: column; gap: 10px; }

    /* Top 3 Supplement panels */
    .mb-top3-supplements {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .mb-top3-supplements:empty { display: none; }
    .mb-top3-supp-card {
      display: flex;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .mb-top3-supp-card:hover { border-color: var(--accent); background: var(--accent-dim); }
    .mb-top3-supp-icon {
      display: flex;
      align-items: flex-start;
      padding-top: 2px;
      color: var(--text-muted);
    }
    .mb-top3-supp-body { flex: 1; min-width: 0; }
    .mb-top3-supp-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .mb-top3-supp-metric {
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 2px;
    }
    .mb-top3-supp-sub {
      font-size: 11px;
      color: var(--text-muted);
    }
    .mb-top3-alert-badge {
      display: inline-block;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      padding: 1px 6px;
      border-radius: var(--radius);
      margin-left: 4px;
    }
    .mb-top3-alert-badge.critical { background: var(--red-dim); color: var(--red); }
    .mb-top3-alert-badge.high { background: var(--yellow-dim); color: var(--yellow); }
    .mb-top3-sw-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 3px 0;
      font-size: 12px;
    }
    .mb-top3-sw-sku {
      font-family: var(--font-mono, monospace);
      font-size: 11px;
      font-weight: 500;
      color: var(--text);
      min-width: 80px;
    }

    @media (max-width: 768px) {
      .mb-top3-container { padding: 16px; }
      .mb-top3-item { padding: 10px 12px; }
      .mb-top3-item-detail { white-space: normal; }
      .mb-top3-supplements { grid-template-columns: 1fr; }
    }

    /* SEO */

    /* Customer Issues */

    /* AI Responder */

    /* Support Inbox — Customer Hub */

    /* Left sidebar */
    .hub-sidebar-header { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
    .hub-title { font-size: 13px; font-weight: 700; display: block; margin-bottom: 4px; }
    .hub-header-stats { display: flex; align-items: center; gap: 4px; font-size: 11px; }
    .hub-stat-label { color: var(--text-muted); }

    /* View tabs */
    .hub-view-tabs { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .hub-view-tab { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Channel filter */
    .hub-channel-bar { display: flex; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
    .hub-ch-btn { font-size: 14px; padding: 3px 6px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; opacity: 0.4; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; display: flex; flex-direction: column; align-items: center; gap: 1px; }
    .hub-ch-label { font-size: 9px; line-height: 1; letter-spacing: 0.02em; }
    .hub-ch-btn:hover { opacity: 0.8; background: var(--surface-2); }

    /* Ticket list */

    /* Center thread */

    /* Thread header */

    /* Messages */

    /* Compose area */

    /* Mode bar */

    /* Compose top actions */
    .hub-compose-btn { font-size: 11px; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Textarea */

    /* AI Feedback Bar */
    .hub-ai-feedback-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--surface-2); border-top: 1px solid var(--border); gap: 8px; flex-wrap: wrap; }
    .hub-ai-fb-left { display: flex; align-items: center; gap: 8px; }
    .hub-ai-fb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; color: #000; }
    .hub-ai-fb-detail { font-size: 10px; color: var(--text-muted); }
    .hub-ai-fb-actions { display: flex; align-items: center; gap: 4px; }
    .hub-ai-fb-btn { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-size: 10px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .hub-ai-fb-btn:hover { background: var(--surface-3); color: var(--text-primary); }
    .hub-ai-fb-btn.good:hover { color: var(--green); border-color: var(--green); }
    .hub-ai-fb-btn.bad:hover { color: var(--red); border-color: var(--red); }
    .hub-ai-fb-divider { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }

    /* Compose bottom */
    .hub-action-btn { font-size: 11px; padding: 4px 9px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Send button */
    .hub-send-btn { font-size: 12px; font-weight: 700; padding: 7px 18px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; letter-spacing: 0.02em; }

    /* Right: customer panel */
    .hub-judgeme-btn { width: 100%; font-size: 11px; padding: 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; font-weight: 600; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Modals */

    /* Snooze modal */
    .hub-snooze-opt { font-size: 12px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s, border-color 0.15s; font-weight: 500; }
    @media (max-width: 640px) {
      .hub-snooze-custom label { font-size: 14px; }
      .hub-snooze-custom input[type="date"] { font-size: 16px; padding: 8px 10px; }
      .hub-snooze-custom .hub-snooze-opt { font-size: 14px; min-height: 44px; padding: 10px 14px; }
    }

    /* Misc */

    /* Hub Analytics View */
    .hub-bar-fill { height: 100%; border-radius: 5px; transition: width 0.5s ease; will-change: width; }

    /* Hub Analytics — Period selector */
    .hub-period-btn { font-size: 11px; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Daily volume sparkline chart */

    /* Agent stats expanded table */
    /* Show-full-message toggle */
    .hub-show-quoted-btn { font-size: 10px; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 8px; cursor: pointer; margin-top: 6px; display: inline-block; }
    .hub-show-quoted-btn:hover { color: var(--text-secondary); border-color: var(--text-muted); }

    /* Start Return button in thread header */
    .hub-start-return-btn { font-size: 11px; font-weight: 500; color: var(--text-secondary); background: none; border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* Return flow modal overlay */
    .hub-ret-btn-ghost { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; font-weight: 500; padding: 8px 16px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    /* Order search results */
    .hub-ret-order-row { border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    /* Items step */
    .hub-ret-item-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 7px; padding: 10px 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    /* Details step */

    /* Follow-up queue tab badge */

    /* Follow-up full-width panel */
    /* Follow-up main area (replaces thread area) */
    /* Follow-up rows */

    /* Toast notification */

    /* ─── Notification Bell Component ─────────────────────────────────────── */
    .notification-bell-container { position: relative; display: inline-block; }
    .notification-bell-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 8px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; }
    .notification-bell-btn:hover, .notification-bell-btn:focus-visible { background: var(--surface-2); color: var(--text); }
    .notification-badge { position: absolute; top: 2px; right: 2px; background: var(--red); color: white; border-radius: 50%; font-size: 10px; font-weight: bold; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
    .notification-panel { position: absolute; right: 0; top: 100%; width: 360px; max-height: 400px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: var(--z-modal); margin-top: 4px; }
    .notification-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 14px; }
    .notification-panel-close { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 18px; padding: 0; line-height: 1; }
    .notification-panel-close:hover, .notification-panel-close:focus-visible { color: var(--text); }
    .notification-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 12px; align-items: flex-start; }
    .notification-item:hover { background: var(--surface-2); }
    .notification-priority-stripe { width: 3px; border-radius: 2px; flex-shrink: 0; min-height: 40px; background: var(--border); }
    .priority-critical .notification-priority-stripe { background: var(--red); }
    .priority-high .notification-priority-stripe { background: var(--orange); }
    .priority-medium .notification-priority-stripe { background: var(--blue); }
    .priority-low .notification-priority-stripe { background: var(--text-dim); }
    .notification-content { flex: 1; min-width: 0; }
    .notification-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .notification-message { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
    .notification-time { font-size: 11px; color: var(--text-dim); }
    .notification-dismiss { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 16px; padding: 0; flex-shrink: 0; line-height: 1; }
    .notification-dismiss:hover { color: var(--red); }
    .notification-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

    /* ─── Shared UI Components ────────────────────────────────────────────── */

    /* ─── Pinterest Campaign Wizard ───────────────────────────────────────── */
    @media (max-width: 640px) { .wizard-step-num { min-width: 44px; min-height: 44px; width: 44px; height: 44px; font-size: 1rem; } }
    .wizard-toggle-btn { padding: 6px 14px; font-size: 0.75rem; border: none; background: none; cursor: pointer; color: var(--text-dim); transition: background 0.15s, color 0.15s, border-color 0.15s; }

    /* ─── Finance Tabs ─────────────────────────────────────────────────────── */
    .fin-loading-spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: fin-spin 0.7s linear infinite; margin: 40px auto; }
    @keyframes fin-spin { to { transform: rotate(360deg); } }

    /* Income tab */

    /* Expenses tab */
    .fin-cat-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; will-change: width; }

    /* P&L tab */

    /* HR Tab */
    /* HR in Morning Brief */

    /* User Management */

    /* Locations Directory */

    /* Fulfillment */
    .ful-td-cb { text-align: center; }
    .ful-customer-td { max-width: 130px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--text); }
    /* Tracking status pills — use CSS vars so they work in light + dark mode */
    .pill.trk-not-made      { background: var(--surface-2); color: var(--text-dim); }
    .pill.trk-not-live      { background: var(--yellow-dim); color: var(--yellow); }
    .pill.trk-label-created { background: var(--yellow-dim); color: var(--yellow); }
    .pill.trk-in-transit    { background: var(--blue-dim); color: var(--blue); }
    .pill.trk-out-delivery  { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
    .pill.trk-issue         { background: var(--red-dim); color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
    .pill.trk-delivered     { background: var(--green-dim); color: var(--green); }
    .pill.trk-cancelled     { background: var(--surface-2); color: var(--text-dim); }
    .pill.trk-picked        { background: var(--yellow-dim); color: var(--yellow); }
    .pill.pill-hold         { background: var(--red-dim); color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
    /* Lifecycle filter group */
    @media (max-width: 768px) {
      .ful-product-td { max-width: 140px; }
      .ful-customer-td { max-width: 90px; }
      .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-height: none; }
      /* No forced min-width on mobile — let cells wrap */
    }
    @media (min-width: 641px) {
      .table-scroll table { min-width: 700px; }
    }

    /* Pro Tag Series */
    /* Collections */
    /* Products */
    /* MTO */
    .mto-customer-td { max-width: 130px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--text); }
    /* Containers */
    /* Global utilities */
    /* Modals + Editors + Loaders */
    /* Modal widths use min(W, 96vw) so they shrink on narrow phones
       instead of overflowing the viewport. (Mobile audit 2026-04-30.) */
    /* Pick List + User Mgmt */

    /* Locations + Shelves + Scan + Warehouse */

    /* Activity Feed + Overview + Labels + Expansions + ProTag Form */

    /* Final Static Cleanup */
  /* ─── Marketing Module: API Status Banner ─── */
  @media (max-width: 640px) { .mo-step-num { min-width: 44px; min-height: 44px; width: 44px; height: 44px; font-size: 1rem; } }
  /* ─── WJS Import Section in Labels ─── */
  .wjs-run-btn { padding: 8px 20px; background: var(--accent); color: #000; border: none; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity 0.15s; }
  .wjs-run-btn:hover { opacity: 0.85; }
  /* ─── Returns: New elements ─── */
  .ret-photo-chip { padding: 2px 7px; font-size: 11px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(99,102,241,0.10); color: var(--text); cursor: pointer; white-space: nowrap; margin-left: 4px; }
  .ret-photo-chip:hover { background: rgba(99,102,241,0.22); }
  /* Received-but-not-refunded flag — paired with the priority sort that
     floats these rows to the top. Faded red background + left-border so the
     row reads as "needs CS action" at a glance without overwhelming the
     table. Nested-cell background uses !important to beat stripe rules. */
  tr.ret-row-needs-refund { background: rgba(254, 226, 226, 0.45) !important; box-shadow: inset 3px 0 0 var(--red); }
  tr.ret-row-needs-refund > td { background: transparent !important; }
  tr.ret-row-needs-refund:hover { background: rgba(254, 202, 202, 0.55) !important; }
  /* ─── Skip Nav (Accessibility) ─── */
  .skip-nav {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: var(--z-toast);
    padding: 8px 16px;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }
  .skip-nav:focus-visible {
    position: fixed;
    left: 16px;
    top: 16px;
    width: auto;
    height: auto;
    overflow: visible;
  }

/* ─── A11y: focus-visible for keyboard-interactive elements missing outline ─── */

/* Collapsible sidebar section headers (role=button, tabindex=0) */
.nav-section-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Header status widgets (data freshness dot, health dot) — role=button divs */
.header-freshness-wrap:focus-visible,
.health-dot-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Jarvis global panel action buttons */
.jg-header-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.jg-send-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Assistant suggestion pills (role=button spans) */
.asst-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--text);
  color: var(--text);
}

/* Assistant send + clear buttons */
#assistantSend:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.asst-clear-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text);
}

/* Notification panel close button */
.notification-panel-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─── Button focus-visible: action-btn, note-save-btn, view-customer-btn ─── */
/* These buttons had :hover but no :focus-visible — keyboard users had no
   visible indicator. All match the same pattern as the hover style. */
.action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent);
  color: var(--bg);
}

.note-save-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.view-customer-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent-dim);
  border-color: var(--text);
}

/* User management + hub action buttons */
.um-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--border-hover);
}

.hub-action-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--text);
  color: var(--text-primary);
}
.hub-action-btn.escalate:focus-visible {
  outline-color: var(--red-bright);
  border-color: var(--red-bright);
  color: var(--red-bright);
}
.hub-action-btn.resolve:focus-visible {
  outline-color: var(--green-bright);
  border-color: var(--green-bright);
  color: var(--green-bright);
}

/* Activity feed filter + load-more (are <button> elements) */
.feed-filter-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--text);
  color: var(--text);
}

/* Pagination buttons */
.pagination-btns button:focus-visible:not(:disabled) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--text);
  color: var(--text);
}

/* Label queue action buttons */
.lbl-queue-continue-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lbl-queue-clear-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--red, #ef4444);
  color: var(--red, #ef4444);
}
.lbl-queue-back-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  color: var(--text);
  border-color: var(--border-hover);
}

/* Global search result items (role=option divs — keyboard navigation via
   onkeydown on each item activates on Enter/Space). */
.search-result-item:focus-visible {
  outline: 2px solid var(--accent, #c8a97e);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* ─── End a11y additions ─── */

    /* Compact catalog filter row — single horizontal line, category labels
       stacked above each control. Falls back to horizontal scroll on narrow
       screens. (Cole 2026-04-28: removed Save-Filter button, condensed all
       filters into one row to save vertical space.)
       !important on flex-direction + align-items to override the
       max-width:480px .toolbar column flip — the catalog filter row is
       always-row regardless of viewport. */
    /* Catalog filter rows. Two stacked rows: row-1 = Search + Category,
       row-2 = Mode + Data + Shopify + Composites. Each row is a horizontal
       flex with labels stacked above their controls. */
    .prod-catalog-toolbar-compact-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }
    .toolbar.prod-catalog-toolbar-compact {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap !important;
      align-items: flex-end;
      gap: 16px;
      overflow-x: auto;
      padding: 0 0 4px;
      margin-bottom: 0;
    }
    .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;     /* center the label over its control */
      justify-content: flex-end;
      gap: 4px;
      flex: 0 0 auto;
      width: max-content;
      height: auto !important;
      align-self: auto !important;
    }
    .toolbar.prod-catalog-toolbar-compact > .prod-filter-cluster-search {
      flex: 1 1 240px;
      min-width: 160px;
      width: auto;
    }
    .toolbar.prod-catalog-toolbar-compact .prod-filter-cluster-label {
      display: block !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--text-muted);
      line-height: 1 !important;
      height: auto !important;
      width: auto !important;
      flex: none !important;          /* override .prod-filter-cluster-label { flex: 0 0 90px } from original sidebar layout */
      flex-basis: auto !important;
      white-space: nowrap;
      padding: 0 !important;
      margin: 0 !important;
    }
    .toolbar.prod-catalog-toolbar-compact .filter-pills {
      display: flex !important;
      flex-direction: row !important;
      gap: 4px;
      flex-wrap: nowrap;
      padding: 0;
    }
    .toolbar.prod-catalog-toolbar-compact .filter-pill,
    .toolbar.prod-catalog-toolbar-compact .prod-filter-pill {
      font-size: 11px;
      padding: 4px 10px;
      white-space: nowrap;
    }
    .toolbar.prod-catalog-toolbar-compact .filter-select {
      font-size: 12px;
      padding: 5px 10px;
      min-width: 0;
      width: auto;
      flex: none !important;
    }
    .toolbar.prod-catalog-toolbar-compact .search-input {
      font-size: 12px;
      padding: 6px 12px;
      width: 100% !important;
      min-width: 140px !important;
      flex: 1 1 auto !important;
    }

    /* ─── Universal autocomplete popover (window.attachAutocomplete) ──── */
    .autocomplete-popover { position: absolute; z-index: 9999; background: var(--bg, #fff); border: 1px solid var(--border, #d1d5db); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: 280px; overflow-y: auto; min-width: 200px; max-width: 480px; }
    .autocomplete-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04)); font-size: 13px; }
    .autocomplete-row:last-child { border-bottom: 0; }
    .autocomplete-row:hover, .autocomplete-row.active { background: var(--bg-accent-soft, rgba(37,99,235,0.08)); }
    .autocomplete-label { font-weight: 500; color: var(--text, #111); }
    .autocomplete-label mark { background: rgba(245,200,80,0.45); color: inherit; padding: 0; border-radius: 2px; }
    .autocomplete-sublabel { color: var(--text-muted, #6b7280); font-size: 11px; margin-top: 2px; }
    .autocomplete-sublabel mark { background: rgba(245,200,80,0.30); padding: 0; border-radius: 2px; color: inherit; }
    .autocomplete-badge { display: inline-block; margin-left: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; padding: 1px 5px; border-radius: 3px; background: var(--bg-soft, #f3f4f6); color: var(--text-muted, #6b7280); vertical-align: middle; font-weight: 600; }
    .autocomplete-empty { padding: 10px 12px; color: var(--text-muted, #6b7280); font-size: 12px; font-style: italic; }

    /* ─── Inline shelf-item edit row (locations.js) ─────────────────────
       Replaces the prior overlay-modal flow (Transfer + Remove buttons →
       full-screen modals) with a single Edit button that expands an inline
       row directly under the item. The form does move-to-shelf, +/- qty,
       remove-entirely, and Confirm in one place. */
    .loc-item-row.is-editing { background: var(--bg-soft, rgba(0,0,0,0.02)); }
    .loc-item-edit-row td { padding: 14px 14px 16px 14px; background: var(--bg-soft, rgba(0,0,0,0.025)); border-bottom: 1px solid var(--border); }
    .loc-edit-grid { display: grid; grid-template-columns: minmax(180px,1fr) minmax(160px,1fr) minmax(220px,1fr); gap: 14px 18px; align-items: start; }
    @media (max-width: 720px) { .loc-edit-grid { grid-template-columns: 1fr; } }
    .loc-edit-field { display: flex; flex-direction: column; gap: 4px; }
    .loc-edit-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; }
    .loc-edit-shelf-input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: var(--bg); color: var(--text); }
    .loc-edit-qty-row { display: flex; align-items: center; gap: 6px; }
    .loc-edit-qty-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
    .loc-edit-qty-btn:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); }
    .loc-edit-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .loc-edit-qty-input { width: 60px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; text-align: center; background: var(--bg); color: var(--text); }
    .loc-edit-qty-current { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
    .loc-edit-reason { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; background: var(--bg); color: var(--text); }
    .loc-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .loc-edit-actions .loc-edit-spacer { flex: 1; }
    .loc-edit-remove-link { background: transparent; border: 0; color: var(--red, #c33); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
    .loc-edit-remove-link:hover { opacity: 0.85; }
    .loc-edit-confirm { padding: 6px 14px; background: var(--accent, #2563eb); color: #fff; border: 0; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; }
    .loc-edit-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
    .loc-edit-cancel { padding: 6px 12px; background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
    .loc-edit-error { color: var(--red, #c33); font-size: 12px; margin-top: 6px; }
    .loc-edit-helper { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
    .loc-edit-btn { padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
    .loc-edit-btn:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); }
    .loc-item-row.is-editing .loc-edit-btn { background: var(--bg-accent-soft, rgba(37,99,235,0.12)); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

    /* ─── Picklist Add-Items search-result conflict pills (Ask 5, 2026-05-05)
       Surfaced on each search row when the server flags it as already
       fulfilled in Shopify or already on another active pick list. Click
       + Add still works but routes through `addItemsFromSearchWithConfirm`
       which fires a two-step warning modal before pushing to the buffer. */
    .npl-flag-pill { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; border-radius: 3px; vertical-align: middle; line-height: 1.4; }
    .npl-flag-fulfilled { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.25); }
    .npl-flag-picked { background: rgba(217, 119, 6, 0.12); color: #b45309; border: 1px solid rgba(217, 119, 6, 0.25); }

    /* ─── Correct-pick button on picked/short rows (Ask 4, 2026-05-05) ── */
    .pld-correct-btn { padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
    .pld-correct-btn:hover { background: var(--bg-soft, rgba(0,0,0,0.04)); border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }

    /* ─── Extracted inline-style utilities (R17 agent, 2026-05-07) ────────
       These replace repeating inline style="..." attributes across the 5
       main view files. Do NOT edit the rule bodies without also updating
       the corresponding class="" in the JS files. ── */
    .flex-row-center-8  { display: flex; gap: 8px; align-items: center; }
    .flex-row-center-6  { display: flex; align-items: center; gap: 6px; }
    .flex-row-sb        { display: flex; justify-content: space-between; }
    .panel-loading-dim  { padding: 24px; text-align: center; color: var(--text-dim); font-size: 12px; }
    .panel-empty-sm     { padding: 16px; color: var(--text-dim); font-size: 12px; text-align: center; }
    .th-left-pad        { text-align: left; padding: 8px 10px; }
    .th-right-muted     { text-align: right; padding: 4px 8px; color: var(--text-muted); }
    .form-field-label   { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
    .text-body-msg      { font-size: 13px; line-height: 1.5; }
    .text-muted-11      { font-size: 11px; color: var(--text-muted); }
    .pad-32             { padding: 32px; }

    /* ─── Inbox / Responder — Gorgias-style conversation thread
      (Cole 2026-05-07: "look like a real professional inbox setting,
       all in chronological order").
       The classes were referenced from JS but never styled — render was
       a wall of unformatted text. ── */

    /* Conversation panel wrapper.
       Cole 2026-05-08: flex-shrink:0 + flex-basis:auto so the parent
       .responder-main flex-column doesn't squeeze the content panels
       to ~17px. Same fix on .cust-ctx-panel below. */
    .responder-thread-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      flex: 0 0 auto;
    }
    .responder-thread-empty {
      padding: 28px 16px;
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
    }

    /* Chronological message thread — oldest at top, newest at bottom.
       Customer messages left-aligned with neutral surface; agent
       messages right-aligned with brand-tan tint to mirror Gorgias. */
    .responder-thread-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px;
      max-height: 60vh;
      overflow-y: auto;
    }
    /* Cole 2026-05-08: bubbles were "super huge and long and show entire
       links etc and ruin the format" — tighten width cap, force URL wrap
       via overflow-wrap:anywhere, and clamp body height to ~12 lines with
       fade overlay. Click the bubble to expand. */
    .responder-message {
      max-width: min(72%, 540px);
      padding: 8px 12px 10px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      cursor: pointer;
    }
    .responder-message-top {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 3px;
    }
    .responder-message-author {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
    }
    .responder-message-time {
      font-size: 10px;
      color: var(--text-muted);
    }
    .responder-message-syncing {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 999px;
      background: var(--yellow-dim, rgba(217, 119, 6, 0.12));
      color: var(--yellow, #c97a06);
      border: 1px solid var(--yellow, #c97a06);
      font-weight: 600;
    }
    .responder-message-body {
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--text);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      position: relative;
      max-height: 220px;
      overflow: hidden;
    }
    /* Fade-out overlay on long bodies — hidden once expanded. */
    .responder-message-body::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 36px;
      background: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        var(--surface-2) 100%);
      pointer-events: none;
    }
    .responder-message-agent .responder-message-body::after {
      background: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%,
        var(--accent-dim, rgba(170, 138, 100, 0.12)) 100%);
    }
    .responder-message.expanded {
      max-width: min(82%, 720px);
    }
    .responder-message.expanded .responder-message-body {
      max-height: none;
      overflow: visible;
    }
    .responder-message.expanded .responder-message-body::after {
      display: none;
    }
    /* Inline link rendering inside a bubble. We render plain-text bodies, but
       any long token (URL, ID) gets forced to wrap. Compact the visible URL
       length when collapsed so a 400-char Klaviyo link doesn't dominate. */
    .responder-message-body a {
      color: var(--accent, #aa8a64);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      word-break: break-all;
    }
    .responder-message-body img {
      max-width: 100%;
      border-radius: var(--radius-sm);
      margin-top: 6px;
    }
    /* "Tap to expand" hint — only shown when collapsed AND content overflows.
       The class .has-overflow is added by JS post-render; CSS-only won't work
       because we need to know if scrollHeight > clientHeight. */
    .responder-message:not(.expanded) .responder-message-body.has-overflow + .responder-message-toggle {
      display: inline-block;
    }
    .responder-message-toggle {
      display: none;
      margin-top: 4px;
      font-size: 10px;
      font-weight: 600;
      color: var(--accent, #aa8a64);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
    }
    .responder-message.expanded .responder-message-toggle {
      display: inline-block;
    }
    .responder-message.expanded .responder-message-toggle::before {
      content: '↑ Show less';
    }
    .responder-message:not(.expanded) .responder-message-toggle::before {
      content: '↓ Show more';
    }

    /* ── Customer Context panel — stats row + recent orders + past issues
       Renders into #custCtxBody after loadCustomerContext() resolves. ── */
    .cust-ctx-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      flex: 0 0 auto;
    }
    .cust-ctx-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      user-select: none;
    }
    .cust-ctx-toggle:hover { background: var(--surface-3, rgba(0,0,0,0.04)); }
    .cust-ctx-arrow {
      margin-left: auto;
      font-size: 10px;
      color: var(--text-muted);
      transition: transform 0.15s;
    }
    .cust-ctx-arrow.open { transform: rotate(180deg); }
    .cust-ctx-body {
      padding: 14px 16px;
      display: block;
    }
    .cust-ctx-body.collapsed { display: none; }
    .cust-ctx-loading,
    .cust-ctx-empty {
      padding: 12px 0;
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
    }
    .cust-ctx-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .cust-ctx-stat {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .cust-ctx-stat-val {
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }
    .cust-ctx-stat-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .cust-ctx-section-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 14px 0 6px;
    }
    .cust-ctx-orders,
    .cust-ctx-issues {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .cust-ctx-order-row,
    .cust-ctx-issue-row {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      gap: 10px;
      padding: 6px 8px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      background: var(--surface-2);
      border: 1px solid var(--border-soft, rgba(0,0,0,0.06));
    }
    .cust-ctx-order-row .text-dim,
    .cust-ctx-issue-row .text-dim {
      color: var(--text-muted);
      font-size: 11px;
    }

    /* ════════════════════════════════════════════════════════════════
       Gorgias-shape 3-pane inbox (Cole 2026-05-08)
       Left: ticket list (existing .responder-sidebar)
       Center: ticket header + scrollable thread + sticky composer
       Right: customer card + context + past tickets (.responder-context-rail)
       ════════════════════════════════════════════════════════════════ */

    /* Override the older 2-column layout — add the rail as a 3rd flex item.
       Parent stays display:flex so the legacy sidebar/main rules still apply. */
    .responder-layout {
      display: flex;
      gap: 14px;
      height: calc(100vh - 160px);
      align-items: stretch;
    }
    /* The center pane no longer auto-scrolls itself; the inner
       .responder-thread-scroll does. This pins the composer at the bottom
       and keeps the ticket header + Jarvis banner above the scrollable
       conversation. */
    .responder-main {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Right rail — fixed 300px, scrollable on its own. */
    .responder-context-rail {
      width: 300px;
      flex: 0 0 300px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 2px; /* room for scrollbar */
    }

    /* Phone: the 3-column responder (ticket list | conversation | context rail)
       can't fit below ~720px. Stack vertically — ticket list capped + scrollable
       on top, conversation full-width below, context rail hidden (its data is
       reachable from the customer link). */
    @media (max-width: 699px) {
      .responder-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 160px);
        min-height: calc(100dvh - 160px);
      }
      .responder-sidebar {
        width: 100%;
        max-height: 38vh;
        flex: 0 0 auto;
      }
      .responder-main {
        flex: 1 1 auto;
        overflow: visible;
      }
      .responder-context-rail { display: none; }
    }

    .responder-context-rail .rail-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 36px 16px;
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: var(--radius);
    }

    /* Rail customer card — avatar + name + email + Wishlist button. */
    .rail-customer-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 18px 14px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      flex: 0 0 auto;
    }
    .rail-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--accent-dim, rgba(170, 138, 100, 0.14));
      color: var(--accent, #aa8a64);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
      border: 1px solid rgba(170, 138, 100, 0.28);
    }
    .rail-customer-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      text-align: center;
      word-break: break-word;
    }
    .rail-customer-email {
      font-size: 11px;
      color: var(--text-muted);
      word-break: break-all;
      text-align: center;
      line-height: 1.4;
    }
    .rail-wishlist-btn {
      margin-top: 8px;
      margin-left: 0;
    }

    /* Section blocks within the rail (e.g. Past tickets). */
    .rail-section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      flex: 0 0 auto;
    }
    .rail-section-label {
      padding: 10px 12px 6px;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05));
    }
    .rail-past-list {
      display: flex;
      flex-direction: column;
    }
    .rail-past-row {
      padding: 8px 12px;
      cursor: pointer;
      border-top: 1px solid var(--border-soft, rgba(0,0,0,0.04));
      transition: background 0.12s;
    }
    .rail-past-row:first-child { border-top: 0; }
    .rail-past-row:hover {
      background: var(--surface-2);
    }
    .rail-past-subject {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .rail-past-meta {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* Compact Jarvis intelligence card for the rail. Full Jarvis panel
       used to render above the conversation thread, eating half a screen
       of vertical space. Now the summary + urgency/escalation pills live
       in the rail; the actionable AI draft is still inline above the
       composer where the agent uses it. */
    .rail-jarvis {
      border-color: rgba(167, 139, 250, 0.32);
    }
    .rail-jarvis-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px 4px;
    }
    .rail-jarvis-brand {
      font-size: 10px;
      font-weight: 800;
      color: #a78bfa;
      letter-spacing: 0.08em;
    }
    .rail-jarvis-refresh {
      padding: 2px 4px;
      font-size: 10px;
      line-height: 1;
      border-radius: var(--radius-sm);
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
    }
    .rail-jarvis-refresh:hover { color: var(--text); }
    .rail-jarvis-body {
      padding: 4px 12px 12px;
    }
    .rail-jarvis-summary {
      font-size: 12px;
      line-height: 1.45;
      color: var(--text);
      margin-bottom: 8px;
      overflow-wrap: anywhere;
    }
    .rail-jarvis-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .rail-jarvis-pill {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid;
      text-transform: capitalize;
      letter-spacing: 0.02em;
      background: var(--surface-2);
    }

    /* Center pane — ticket header sits at the top (not scrolling). */
    .responder-ticket-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      flex: 0 0 auto;
    }
    .responder-ticket-headline { min-width: 0; flex: 1 1 auto; }
    .responder-ticket-subject {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 4px;
      word-break: break-word;
    }
    .responder-ticket-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 11px;
      color: var(--text-muted);
    }
    .responder-ticket-customer {
      font-size: 11px;
      color: var(--text);
      font-weight: 500;
    }
    .responder-ticket-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    /* Scrollable middle area — the conversation + Jarvis suggestion live here.
       The composer below it is sticky to the bottom of .responder-main. */
    .responder-thread-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 2px;
    }
    /* Inside the scroll, the conversation panel no longer caps its own
       height — the SCROLL container does. */
    .responder-thread-scroll .responder-thread-list {
      max-height: none;
      overflow-y: visible;
    }

    /* Sticky composer — pinned to the bottom of the center pane. */
    .responder-composer {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 12px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 -2px 6px rgba(15, 23, 42, 0.04);
    }
    .responder-composer-textarea {
      width: 100%;
      box-sizing: border-box;
      min-height: 84px;
      max-height: 240px;
      resize: vertical;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.5;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface-2);
      color: var(--text);
    }
    .responder-composer-textarea:focus {
      outline: none;
      border-color: var(--accent, #aa8a64);
      background: var(--surface);
    }
    .responder-feedback-hidden { display: none !important; }
    .responder-composer-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .composer-spacer { flex: 1 1 auto; }

    .composer-suggest,
    .composer-send,
    .composer-send-close {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      padding: 7px 12px;
      border-radius: 7px;
      cursor: pointer;
      white-space: nowrap;
      border: 1px solid transparent;
      transition: filter 0.12s, background 0.12s, border-color 0.12s;
    }
    .composer-suggest {
      background: var(--accent-dim, rgba(170, 138, 100, 0.12));
      color: var(--accent, #aa8a64);
      border-color: rgba(170, 138, 100, 0.32);
    }
    .composer-suggest:hover { background: rgba(170, 138, 100, 0.22); }
    .composer-send-close {
      background: var(--surface-2);
      color: var(--text);
      border-color: var(--border);
    }
    .composer-send-close:hover { border-color: var(--text); }
    .composer-send {
      background: var(--green, #16a34a);
      color: #fff;
      border-color: var(--green, #16a34a);
    }
    .composer-send:hover { filter: brightness(0.94); }

    /* Composer overflow "More" menu — built on <details>/<summary>. */
    .composer-more {
      position: relative;
    }
    .composer-more > summary {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 600;
      padding: 7px 10px;
      border-radius: 7px;
      cursor: pointer;
      list-style: none;
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border);
    }
    .composer-more > summary::-webkit-details-marker { display: none; }
    .composer-more > summary:hover { border-color: var(--text); }
    .composer-more[open] > summary {
      border-color: var(--accent, #aa8a64);
      color: var(--accent, #aa8a64);
    }
    .composer-more-menu {
      position: absolute;
      bottom: calc(100% + 6px);
      right: 0;
      min-width: 220px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 9999;
    }
    .composer-more-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 7px 10px;
      font-size: 12px;
      color: var(--text);
      background: transparent;
      border: 0;
      border-radius: var(--radius-sm);
      text-align: left;
      cursor: pointer;
      text-decoration: none;
      width: 100%;
    }
    .composer-more-item:hover { background: var(--surface-2); }
    .composer-more-snooze {
      display: flex;
      align-items: stretch;
      gap: 4px;
      padding: 4px;
      border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.05));
      margin-bottom: 4px;
    }
    .composer-more-snooze-select {
      flex: 1 1 auto;
      font-size: 12px;
      padding: 5px 7px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface-2);
      color: var(--text);
    }
    .composer-more-snooze .composer-more-item {
      flex: 0 0 auto;
      background: var(--yellow-dim, rgba(217, 119, 6, 0.12));
      color: var(--yellow, #c97a06);
      font-weight: 600;
    }
    .composer-more-snooze .composer-more-item:hover {
      background: var(--yellow, #c97a06);
      color: #fff;
    }
    /* Macros menu repositioned to render inside the More menu instead of
       floating absolute. JS toggles display:none/block. */
    .composer-more-menu .macros-menu {
      position: static;
      display: none;
      width: 100%;
      box-shadow: none;
      border: 1px solid var(--border-soft, rgba(0,0,0,0.06));
      margin-top: 4px;
      max-height: 280px;
      overflow-y: auto;
    }

    /* Jarvis-prepared draft suggestion card — sits between thread + composer. */
    .jarvis-draft-suggestion {
      padding: 12px 14px;
      background: var(--surface-2);
      border: 1px solid color-mix(in srgb, var(--accent, #aa8a64) 35%, var(--border));
      border-radius: var(--radius);
      flex: 0 0 auto;
    }
    .jarvis-draft-suggestion-head {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
    }
    .jarvis-draft-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--accent, #aa8a64);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .jarvis-draft-body {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text);
      white-space: pre-wrap;
      max-height: 180px;
      overflow-y: auto;
      margin-bottom: 10px;
    }
    .jarvis-draft-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .jarvis-draft-use {
      font-size: 12px;
      padding: 5px 12px;
      white-space: nowrap;
    }
    .jarvis-draft-refine-input {
      flex: 1 1 160px;
      min-width: 160px;
      font-size: 12px;
      padding: 5px 9px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 5px;
      color: var(--text);
    }
    .jarvis-draft-refine {
      font-size: 12px;
      white-space: nowrap;
    }

    /* Responsive: stack the rail below the center pane on narrow screens.
       The sidebar is also already responsive elsewhere. */
    @media (max-width: 1180px) {
      .responder-context-rail { display: none; }
    }

    /* ─── Wishlist add button + modal (Cole 2026-05-07) ───────────
       Surfaces in any ticket header next to the customer email so an
       agent can add a product to the customer's wishlist on the spot.
       wishlist_monitor.py picks it up daily and fires Klaviyo
       restock / price-drop notifications. ── */
    .wishlist-add-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 600;
      color: var(--accent, #aa8a64);
      background: var(--accent-dim, rgba(170, 138, 100, 0.12));
      border: 1px solid rgba(170, 138, 100, 0.35);
      border-radius: 999px;
      cursor: pointer;
      margin-left: 6px;
      white-space: nowrap;
    }
    .wishlist-add-btn:hover {
      background: rgba(170, 138, 100, 0.22);
      border-color: var(--accent, #aa8a64);
    }
    .wishlist-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 20px;
    }
    .wishlist-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      width: 100%;
      max-width: 560px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
      overflow: hidden;
    }
    .wishlist-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .wishlist-modal-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .wishlist-modal-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 3px;
    }
    .wishlist-modal-close {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 5px 7px;
      cursor: pointer;
      color: var(--text-muted);
    }
    .wishlist-modal-close:hover { color: var(--text); border-color: var(--text); }
    .wishlist-modal-body {
      padding: 14px 16px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .wishlist-current { font-size: 12px; }
    .wishlist-current-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .wishlist-current-items {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    .wishlist-current-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      font-size: 11px;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text);
    }
    .wishlist-search-row { padding-top: 4px; }
    .wishlist-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      font-size: 13px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      color: var(--text);
    }
    .wishlist-search-input:focus { outline: none; border-color: var(--accent, #aa8a64); }
    .wishlist-search-results {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 50vh;
      overflow-y: auto;
    }
    .wishlist-result-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .wishlist-result-img {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: var(--surface-2);
      flex-shrink: 0;
    }
    .wishlist-result-info { flex: 1; min-width: 0; }
    .wishlist-result-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wishlist-result-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .wishlist-add-row-btn {
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 600;
      background: var(--accent, #aa8a64);
      color: var(--accent-contrast, #fff);
      border: 1px solid var(--accent, #aa8a64);
      border-radius: var(--radius-sm);
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .wishlist-add-row-btn:hover:not(:disabled) { filter: brightness(0.92); }
    .wishlist-add-row-btn:disabled { opacity: 0.6; cursor: default; }
    .wishlist-add-row-btn--done {
      background: var(--green, #10a04a) !important;
      border-color: var(--green, #10a04a) !important;
    }

    /* ─── Inbox filter bar — labeled, segmented sections (Cole 2026-05-07).
       Replaces the previous flat strip-with-hairline-separators. Each
       section (Source / Status / Assignee / Intent) gets its own labeled
       bordered container so the worker can read the filter state at a
       glance. ── */
    .inbox-filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 16px;
      padding: 10px 12px;
      background: var(--surface-1, var(--surface));
      border: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .inbox-filter-section {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 10px;
      background: var(--surface-2);
      border: 1px solid var(--border-soft, rgba(0,0,0,0.06));
      border-radius: var(--radius);
      min-width: 0;
    }
    .inbox-filter-section-label {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding-left: 2px;
    }
    .inbox-filter-section-chips {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }
    .inbox-filter-chip {
      padding: 5px 10px !important;
      font-size: 12px !important;
    }

    /* ─── Inline-style utility extractions (audit-loop Round 3, Agent 4) ─── */
    /* warehouse/returns.js table headers */
    .ret-th-sm { padding: 5px 8px; text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 600; }
    .ret-th-xs { padding: 6px 8px; text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; }
    .ret-field-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
    /* reviews-moderation.js table headers */
    .rev-th-md { padding: 8px 10px; font-size: 11px; letter-spacing: .05em; color: #8b949e; }
    .rev-th-sm { padding: 6px 8px; font-size: 11px; letter-spacing: .05em; color: #8b949e; }

    /* ─── Inline-style utility extractions (audit-loop, Agent C) ───────────
       These classes replace the highest-frequency inline style="..." strings
       found across js/views/*.js template literals (grepped 2026-06-05).
       JS files are NOT edited here — flagged for a future safe-swap pass.
       ──────────────────────────────────────────────────────────────────── */

    /* u-clickable — 238 occurrences of style="cursor:pointer"
       Future swap: replace style="cursor:pointer" → class="u-clickable"
       Top files: pricing.js (67), analytics.js (36), products.js (25),
                  logistics.js (20), fulfillment.js (13), labels.js (12),
                  bulk-orders.js (12), brief.js (11) */
    .u-clickable { cursor: pointer; }

    /* u-hint — ~545 occurrences of style="color:var(--text-muted);font-size:12px"
       and style="color:var(--text-muted);font-size:11px" (plus semicoloned variants).
       Covers the two most common muted small-text patterns.
       Future swap: replace matching style="" → class="u-hint" (12px) or "u-hint u-hint--xs" (11px)
       Top files: system.js (31), products.js (31), support.js (29),
                  cost-chain.js (26), storefront-health.js (25),
                  order-exceptions.js (25), inventory-history.js (19) */
    .u-hint { color: var(--text-muted); font-size: 12px; }
    .u-hint--xs { color: var(--text-muted); font-size: 11px; }

    /* u-empty-state — ~101 occurrences of style="text-align:center;padding:32px(or 40px);color:var(--text-muted)"
       Used for "no results" / empty table body messages.
       Future swap: replace matching style="" → class="u-empty-state"
       Top files: team-projects.js (11), control-plane.js (11),
                  inventory-history.js (10), products.js (8),
                  analytics-dash.js (6), smart-reorder.js (5),
                  returns.js (5), customer-hub.js (5) */
    .u-empty-state { text-align: center; padding: 40px 32px; color: var(--text-muted); }

    /* u-section-label — 16 occurrences of the exact rgba uppercase label pattern
       style="color:rgba(226,232,240,0.5);margin-bottom:4px;font-size:11px;
              text-transform:uppercase;letter-spacing:0.5px"
       Future swap: all 16 in dependency-graph.js */
    .u-section-label {
      color: rgba(226, 232, 240, 0.5);
      margin-bottom: 4px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }