/* ── CSS Variables ── */
    :root {
      --sidebar-bg: #1a1f2e;
      --sidebar-width: 200px;
      --sidebar-text: #a0aec0;
      --sidebar-text-active: #ffffff;
      --sidebar-accent: #3b82f6;
      --sidebar-hover: #2d3748;
      --topbar-bg: #ffffff;
      --topbar-border: #e2e8f0;
      --content-bg: #f7f9fc;
      --card-bg: #ffffff;
      --card-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
      --text-primary: #1a202c;
      --text-secondary: #4a5568;
      --text-muted: #718096;
      --border: #e2e8f0;
      --border-focus: #3b82f6;
      --btn-primary: #3b82f6;
      --btn-primary-hover: #2563eb;
      --btn-danger: #ef4444;
      --btn-danger-hover: #dc2626;
      --btn-secondary: #f1f5f9;
      --btn-secondary-hover: #e2e8f0;
      --success: #10b981;
      --error: #ef4444;
      --warn: #f59e0b;
      --table-header-bg: #f8fafc;
      --table-row-hover: #f0f7ff;
      --radius: 8px;
      --radius-sm: 4px;
      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: var(--font);
      font-size: 14px;
      color: var(--text-primary);
      background: var(--content-bg);
      display: flex;
      flex-direction: column;
    }

    /* ── Top Bar ── */
    #topbar {
      height: 52px;
      background: var(--topbar-bg);
      border-bottom: 1px solid var(--topbar-border);
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 16px;
      z-index: 100;
      flex-shrink: 0;
    }
    #topbar h1 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }
    #topbar h1 span {
      color: var(--sidebar-accent);
    }
    #fx-display {
      margin-left: auto;
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    #fx-display .fx-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--success);
    }
    #auth-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--text-muted);
    }
    #auth-user-label {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── App Shell ── */
    #app {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* ── Sidebar ── */
    #sidebar {
      width: var(--sidebar-width);
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      padding: 16px 0;
    }
    .nav-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #4a5568;
      padding: 0 16px 8px;
    }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 16px;
      cursor: pointer;
      color: var(--sidebar-text);
      font-size: 13.5px;
      font-weight: 500;
      border-left: 3px solid transparent;
      transition: background 0.12s, color 0.12s;
      position: relative;
      user-select: none;
    }
    .nav-item:hover { background: var(--sidebar-hover); color: #cbd5e0; }
    .nav-item.active {
      color: var(--sidebar-text-active);
      background: rgba(59,130,246,0.12);
      border-left-color: var(--sidebar-accent);
    }
    .nav-item svg { flex-shrink: 0; opacity: 0.8; }
    .nav-item.active svg { opacity: 1; }
    .nav-badge {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--sidebar-accent);
      margin-left: auto;
      display: none;
    }
    .nav-badge.visible { display: block; }

    /* ── Content Area ── */
    #content {
      flex: 1;
      overflow-y: auto;
      padding: 24px;
    }

    /* ── Tab Panels ── */
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── Page Header ── */
    .page-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .page-header h2 {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .page-header p {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* ── Card ── */
    .card {
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      border: 1px solid var(--border);
      overflow: hidden;
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.12s, transform 0.05s;
      white-space: nowrap;
      font-family: var(--font);
    }
    .btn:active { transform: scale(0.98); }
    .btn-primary { background: var(--btn-primary); color: #fff; }
    .btn-primary:hover { background: var(--btn-primary-hover); }
    .btn-danger { background: var(--btn-danger); color: #fff; }
    .btn-danger:hover { background: var(--btn-danger-hover); }
    .btn-secondary { background: var(--btn-secondary); color: var(--text-secondary); }
    .btn-secondary:hover { background: var(--btn-secondary-hover); }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ── Tables ── */
    .table-wrap { overflow-x: auto; }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13.5px;
    }
    thead th {
      background: var(--table-header-bg);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 10px 14px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }
    tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background 0.1s;
    }
    tbody tr:last-child { border-bottom: none; }
    tbody tr:hover { background: var(--table-row-hover); }
    tbody tr.new-row { background: #fffbeb; }
    td {
      padding: 9px 14px;
      color: var(--text-primary);
      vertical-align: middle;
    }
    td[contenteditable="true"] {
      outline: none;
      cursor: text;
    }
    td[contenteditable="true"]:focus {
      background: #eff6ff;
      box-shadow: inset 0 0 0 2px var(--border-focus);
      border-radius: 2px;
    }
    .actions-cell {
      white-space: nowrap;
      text-align: right;
    }
    .table-footer {
      padding: 10px 14px;
      background: var(--table-header-bg);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .total-row td {
      font-weight: 600;
      background: var(--table-header-bg);
      border-top: 2px solid var(--border);
    }

    /* ── Inline Add Row ── */
    .add-row td {
      padding: 8px 14px;
      background: #f0fdf4;
    }
    .add-row input, .add-row select {
      width: 100%;
      padding: 5px 8px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font);
      background: #fff;
      color: var(--text-primary);
      outline: none;
    }
    .add-row input:focus, .add-row select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
    }

    /* ── Select Input ── */
    select.inline-select {
      padding: 3px 6px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: var(--font);
      background: #fff;
      cursor: pointer;
      outline: none;
    }
    select.inline-select:focus { border-color: var(--border-focus); }

    /* ── Error / Notice ── */
    .error-msg {
      color: var(--error);
      font-size: 12.5px;
      padding: 8px 14px;
      background: #fef2f2;
      border-left: 3px solid var(--error);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      margin-top: 8px;
    }
    .error-msg + .error-msg,
    .ops-warn + .ops-warn { margin-top: 8px; }
    /* ── BOM Tab ── */
    #bom-selector-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    #bom-selector-wrap label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }
    #bom-product-select {
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      background: #fff;
      min-width: 200px;
      outline: none;
      cursor: pointer;
    }
    #bom-product-select:focus { border-color: var(--border-focus); }

    /* ── Chat Tab ── */
    .chat-card {
      overflow: hidden;
    }
    .chat-model-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .chat-model-wrap label {
      font-weight: 600;
    }
    .chat-model-wrap select {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: #fff;
      color: var(--text-primary);
      padding: 7px 10px;
      font: inherit;
      min-width: 110px;
      outline: none;
    }
    .chat-model-wrap select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }
    #chat-panel {
      display: flex;
      flex-direction: column;
      height: min(720px, calc(100vh - 180px));
      height: min(720px, calc(100dvh - 180px));
    }
    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .chat-msg {
      display: flex;
      flex-direction: column;
      max-width: 75%;
    }
    .chat-msg.user { align-self: flex-end; align-items: flex-end; }
    .chat-msg.assistant { align-self: flex-start; align-items: flex-start; }
    .chat-bubble {
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 13.5px;
      line-height: 1.55;
      word-break: break-word;
    }
    .chat-bubble > :first-child { margin-top: 0; }
    .chat-bubble > :last-child { margin-bottom: 0; }
    .chat-bubble p,
    .chat-bubble ul,
    .chat-bubble ol,
    .chat-bubble pre,
    .chat-bubble h1,
    .chat-bubble h2,
    .chat-bubble h3,
    .chat-bubble h4 {
      margin: 0 0 0.7em;
    }
    .chat-bubble ul,
    .chat-bubble ol {
      padding-left: 1.2em;
    }
    .chat-bubble li + li {
      margin-top: 0.2em;
    }
    .chat-bubble h1,
    .chat-bubble h2,
    .chat-bubble h3,
    .chat-bubble h4 {
      line-height: 1.3;
    }
    .chat-bubble h1 { font-size: 1.1em; }
    .chat-bubble h2 { font-size: 1.03em; }
    .chat-bubble h3,
    .chat-bubble h4 { font-size: 0.98em; }
    .chat-bubble code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.92em;
      background: rgba(15, 23, 42, 0.08);
      border-radius: 6px;
      padding: 0.1em 0.35em;
    }
    .chat-bubble pre {
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      overflow-x: auto;
    }
    .chat-bubble pre code {
      background: transparent;
      padding: 0;
      border-radius: 0;
      font-size: 0.9em;
    }
    .chat-bubble a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.15em;
    }
    .chat-msg.user .chat-bubble {
      background: var(--sidebar-accent);
      color: #fff;
      border-bottom-right-radius: 3px;
    }
    .chat-msg.assistant .chat-bubble {
      background: var(--card-bg);
      color: var(--text-primary);
      border: 1px solid var(--border);
      border-bottom-left-radius: 3px;
    }
    .chat-msg.user .chat-bubble code {
      background: rgba(255,255,255,0.18);
    }
    .chat-msg.user .chat-bubble pre {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.18);
    }
    .chat-meta {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      padding: 0 2px;
    }
    .chat-db-notice {
      font-size: 11.5px;
      color: var(--success);
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: var(--radius-sm);
      padding: 4px 10px;
      margin-top: 4px;
      display: inline-block;
    }
    .chat-action-panel {
      margin-top: 8px;
      background: #fffbeb;
      border: 1px solid #fcd34d;
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-size: 12px;
      max-width: 100%;
    }
    .chat-action-label {
      font-weight: 600;
      color: #92400e;
      margin-bottom: 5px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .chat-action-summary {
      color: var(--text-secondary);
      white-space: pre-wrap;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    .chat-action-btns { display: flex; gap: 8px; }
    .chat-action-status {
      font-size: 11.5px;
      color: var(--text-muted);
    }
    .typing-indicator {
      display: none;
      align-self: flex-start;
    }
    .typing-indicator.visible { display: flex; }
    .typing-dots {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      gap: 5px;
      align-items: center;
    }
    .typing-dots span {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--text-muted);
      animation: bounce 1.2s infinite;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes bounce {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-6px); }
    }
    #chat-input-wrap {
      padding: 14px 16px;
      background: var(--card-bg);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    #chat-textarea {
      flex: 1;
      resize: none;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 9px 12px;
      font-size: 13.5px;
      font-family: var(--font);
      line-height: 1.5;
      min-height: 40px;
      max-height: 140px;
      outline: none;
      overflow-y: auto;
      color: var(--text-primary);
      background: #fff;
    }
    #chat-textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
    #chat-textarea::placeholder { color: var(--text-muted); }
    #chat-send-btn {
      flex-shrink: 0;
      padding: 9px 18px;
    }

    /* ── Empty State ── */
    .empty-state {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
    }
    .empty-state svg { margin-bottom: 12px; opacity: 0.4; }
    .empty-state p { font-size: 14px; }

    /* ── Loading Overlay ── */
    #loading-overlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.85);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      flex-direction: column;
      gap: 12px;
    }
    #loading-overlay.hidden { display: none; }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--sidebar-accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loading-overlay p { font-size: 13px; color: var(--text-muted); }
    #auth-overlay {
      position: fixed;
      inset: 0;
      background: rgba(26, 31, 46, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1100;
      padding: 24px;
    }
    #auth-overlay.hidden { display: none; }
    #auth-card {
      width: min(420px, 100%);
      background: var(--card-bg);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
      padding: 28px;
      display: grid;
      gap: 12px;
    }
    #auth-card h2 {
      font-size: 20px;
      margin: 0;
    }
    #auth-card p {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 4px;
    }
    #auth-card label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    #auth-card input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font: inherit;
    }
    #auth-card input:focus {
      outline: none;
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }
    #auth-error {
      color: var(--error);
      font-size: 13px;
    }

    /* ── Part Images ── */
    .part-thumb {
      width: 40px; height: 40px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      cursor: pointer;
      display: block;
    }
    .img-cell { display: flex; align-items: center; gap: 6px; }
    /* Image lightbox */
    #img-lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    #img-lightbox.open { display: flex; }
    #img-lightbox img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: var(--radius);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    }

    /* ── Confirm Modal ── */
    #confirm-modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 1500;
      align-items: center;
      justify-content: center;
    }
    #confirm-modal.open { display: flex; }
    .confirm-modal-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 24px;
      max-width: 480px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .confirm-modal-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text-primary); }
    .confirm-modal-list { margin: 0 0 12px; padding-left: 18px; font-size: 13px; color: var(--text-primary); line-height: 1.7; }
    .confirm-modal-warning {
      background: #fef9c3;
      border: 1px solid #fde047;
      border-radius: var(--radius);
      padding: 10px 12px;
      font-size: 12px;
      color: #854d0e;
      margin-bottom: 12px;
    }
    .confirm-modal-warning strong { display: block; margin-bottom: 4px; }
    .confirm-modal-warning ul { margin: 0; padding-left: 16px; line-height: 1.7; }
    .confirm-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #a0aec0; }

    /* ── Part Lookup Tab ── */
    .partview-search-wrap { margin-bottom: 16px; }
    #partview-search {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font);
      background: #fff;
      outline: none;
      transition: border-color 0.12s, box-shadow 0.12s;
    }
    #partview-search:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
    }
    #partview-results {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 16px;
    }
    .partview-result-item {
      padding: 9px 14px;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: background 0.1s;
    }
    .partview-result-item:hover { background: var(--table-row-hover); }
    .partview-result-item.selected { border-color: var(--border-focus); background: #eff6ff; }
    .partview-result-id { font-weight: 600; font-size: 13px; color: var(--sidebar-accent); min-width: 80px; }
    .partview-result-desc { font-size: 13px; color: var(--text-secondary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .partview-result-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
    .partview-detail-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      padding: 24px;
    }
    .partview-detail-header {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 24px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--border);
    }
    .partview-detail-image {
      width: 120px; height: 120px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border);
      cursor: pointer;
      flex-shrink: 0;
    }
    .partview-detail-image-placeholder {
      width: 120px; height: 120px;
      background: var(--table-header-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 12px;
      flex-shrink: 0;
    }
    .partview-detail-title { flex: 1; }
    .partview-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 32px;
    }
    .partview-field { display: flex; flex-direction: column; gap: 4px; }
    .partview-field label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
    }
    .partview-field input,
    .partview-field select {
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      color: var(--text-primary);
      background: #fff;
      outline: none;
    }
    .partview-field input:focus,
    .partview-field select:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
    }
    .partview-field textarea {
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 13.5px;
      font-family: var(--font);
      color: var(--text-primary);
      background: #fff;
      resize: vertical;
      outline: none;
      line-height: 1.55;
    }
    .partview-field textarea:focus {
      border-color: var(--border-focus);
      box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
    }
    .shopify-field-stack {
      display:flex;
      align-items:center;
      gap:8px;
    }
    .shopify-field-stack input {
      flex:1;
      min-width:0;
    }
    .partview-form-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .partview-save-status { font-size: 12px; color: var(--success); }
    .partview-used-in {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }
    .partview-used-in h4 {
      font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
    }
    .partview-used-in-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .partview-bom-tag {
      padding: 3px 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      font-size: 12px; font-weight: 600;
      color: var(--sidebar-accent);
    }
    .partview-files-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .partview-files-section h4 {
      font-size: 12px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px;
    }
    .partview-file-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
    }
    .partview-file-label {
      width: 100px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .partview-file-name {
      color: var(--text-secondary);
      font-size: 13px;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .partview-file-actions { display: flex; align-items: center; gap: 8px; flex: 1; }
    #pv-drawing-viewer {
      margin-top: 8px;
      max-height: 600px;
      overflow-y: auto;
      background: var(--table-header-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px;
    }

    /* ── Scan Tab ── */
    .scan-card {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 760px;
      padding: 16px 20px;
      background: var(--card-bg);
    }
    .scan-reader-wrap {
      border: 1px solid #1e293b;
      border-radius: var(--radius);
      overflow: hidden;
      background: #0f172a;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
    }
    #scan-reader {
      width: 100%;
      min-height: 280px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #scan-reader video {
      width: 100%;
      height: auto;
      max-height: 62vh;
      object-fit: cover;
      display: block;
    }
    .scan-placeholder {
      color: #cbd5e1;
      font-size: 13px;
      padding: 28px;
      text-align: center;
      line-height: 1.45;
    }
    .scan-placeholder-title {
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: 11px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #7dd3fc;
    }
    .scan-placeholder-copy {
      font-size: 13px;
      font-weight: 500;
      color: #cbd5e1;
    }
    .scan-frame {
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(68vw, 260px);
      height: min(68vw, 260px);
      transform: translate(-50%, -50%);
      border: 2px solid rgba(125, 211, 252, 0.85);
      border-radius: 18px;
      box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.24), inset 0 0 0 1px rgba(14, 165, 233, 0.55);
      pointer-events: none;
      opacity: 0.7;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    .scan-reader-caption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 8px 12px;
      font-size: 11px;
      color: #e2e8f0;
      background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.82));
      text-align: center;
      letter-spacing: 0.03em;
    }
    .scan-controls {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
    .scan-controls .btn { min-width: 128px; }
    .scan-feedback {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .scan-status {
      font-size: 13px;
      color: var(--text-secondary);
      background: var(--table-header-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 10px 12px;
      font-weight: 600;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .scan-status.success {
      background: #ecfdf5;
      border-color: #86efac;
      color: #166534;
    }
    .scan-status.error {
      background: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }
    .scan-result {
      min-height: 18px;
      color: var(--text-muted);
      font-size: 12px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: var(--radius-sm);
      padding: 8px 10px;
      line-height: 1.35;
    }
    .scan-manual {
      margin-top: 4px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .scan-manual label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .scan-manual-row {
      display: flex;
      gap: 8px;
    }
    .scan-manual-row input {
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: var(--font);
      background: #fff;
      outline: none;
    }
    .scan-manual-row input:focus { border-color: var(--border-focus); }
    .scan-tips {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-top: 4px;
      border-top: 1px solid var(--border);
    }
    .scan-tip {
      font-size: 11px;
      color: var(--text-muted);
      padding: 3px 0;
    }
    .scan-tip::before {
      content: '· ';
      color: var(--border-focus);
      font-weight: 700;
    }
    .scan-card.is-running .scan-frame {
      border-color: rgba(34, 197, 94, 0.88);
      box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.2), inset 0 0 0 1px rgba(34, 197, 94, 0.72);
      opacity: 1;
      animation: scanPulse 1.8s ease-in-out infinite;
    }
    .scan-card.is-running .scan-status {
      background: #ecfeff;
      border-color: #67e8f9;
      color: #0e7490;
    }
    @keyframes scanPulse {
      0%, 100% { box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.2), inset 0 0 0 1px rgba(34, 197, 94, 0.72); }
      50% { box-shadow: 0 0 0 999px rgba(2, 6, 23, 0.2), inset 0 0 0 3px rgba(34, 197, 94, 0.72); }
    }

    /* ── Hamburger Button (hidden on desktop) ── */
    #menu-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      color: var(--text-primary);
      border-radius: var(--radius-sm);
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 4px;
    }
    #menu-btn:hover { background: var(--btn-secondary); }

    /* ── Sidebar Overlay (hidden on desktop) ── */
    #sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 150;
    }

    /* ── Mobile Responsive ── */
    @media (max-width: 640px) {
      /* Show hamburger */
      #menu-btn { display: flex; }

      /* Sidebar becomes off-canvas drawer */
      #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        padding-top: 52px;
      }
      #sidebar.open { transform: translateX(0); }
      #sidebar-overlay.open { display: block; }

      /* Tighter content padding */
      #content { padding: 16px; }

      /* Chat panel: use dynamic viewport height for mobile browser chrome */
      #chat-panel {
        height: min(640px, calc(100vh - 210px));
        height: min(640px, calc(100dvh - 210px));
      }

      /* Prevent iOS auto-zoom on input focus (requires font-size >= 16px) */
      input, select, textarea,
      .partview-field input,
      .partview-field select,
      .partview-field textarea,
      .add-row input, .add-row select,
      #partview-search,
      #chat-textarea,
      #bom-product-select,
      #prod-assembly-select,
      #prod-qty,
      #ops-assembly-select,
      #ops-qty,
      #ops-reason,
      #tx-note,
      #tx-extra-charges-cad,
      #logs-search,
      #logs-type-filter,
      #logs-source-filter,
      select.inline-select { font-size: 16px; }

      /* Collapse 2-column form grid to single column */
      .partview-form-grid { grid-template-columns: 1fr; }

      /* Part detail header: let image wrap below title if needed */
      .partview-detail-header { flex-wrap: wrap; }

      /* BOM selector: full-width select */
      #bom-selector-wrap { flex-wrap: wrap; }
      #bom-product-select { min-width: 0; width: 100%; }

      /* Page header stacks on small screens */
      .page-header { flex-wrap: wrap; gap: 10px; }
      .chat-model-wrap {
        width: 100%;
        justify-content: space-between;
      }
      .chat-model-wrap select {
        min-width: 0;
        flex: 0 0 140px;
      }

      /* Larger tap targets */
      .btn { min-height: 44px; }
      .nav-item { padding: 14px 16px; }

      /* Wider chat bubbles */
      .chat-msg { max-width: 90%; }

      /* Compact topbar */
      #topbar { padding: 0 12px; }

      /* File rows wrap so buttons don't overflow */
      .partview-file-row { flex-wrap: wrap; }
      .partview-file-actions { flex-wrap: wrap; }

      /* Chat input area: stack on very small screens */
      #chat-input-wrap { padding: 10px 12px; gap: 8px; }
      .scan-controls { flex-direction: column; }
      .scan-controls .btn { width: 100%; }
      #scan-reader { min-height: 320px; }
      .scan-manual-row { flex-direction: column; }
      .scan-frame {
        width: min(74vw, 240px);
        height: min(74vw, 240px);
      }
    }

    /* ── Pick List Tab ── */
    /* ── Pick List Controls ── */
    .prod-controls-card { margin-bottom:20px; padding:16px 20px; }
    #prod-controls { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; }
    .prod-control-group { display:flex; flex-direction:column; gap:5px; }
    .prod-control-group label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
    #prod-assembly-select { padding:7px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font); background:#fff; min-width:240px; outline:none; cursor:pointer; }
    #prod-assembly-select:focus { border-color:var(--border-focus); }
    #prod-qty { width:80px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; font-family:var(--font); background:#fff; outline:none; text-align:center; }
    #prod-qty:focus { border-color:var(--border-focus); }
    /* ── Pick List Table ── */
    .prod-pick-table { width:100%; border-collapse:collapse; font-size:13px; }
    .prod-pick-table thead th { background:var(--table-header-bg); color:var(--text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
    .prod-pick-table tbody tr { border-bottom:1px solid var(--border); transition:background .08s; }
    .prod-pick-table tbody tr:last-child { border-bottom:none; }
    .prod-pick-table tbody tr:hover { background:var(--table-row-hover); }
    .prod-pick-table tbody tr.prod-row-short { background:#fff5f5; }
    .prod-pick-table tbody tr.prod-row-short:hover { background:#fee2e2; }
    .prod-pick-table td { padding:8px 12px; vertical-align:middle; }
    .prod-thumb { width:44px; height:44px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); display:block; cursor:pointer; }
    .prod-thumb-placeholder { width:44px; height:44px; background:var(--table-header-bg); border:1px solid var(--border); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
    .prod-part-id { white-space:nowrap; }
    .prod-desc { color:var(--text-primary); }
    .prod-location-badge { display:inline-block; padding:2px 9px; border-radius:10px; font-size:11.5px; font-weight:600; background:#fef3c7; color:#92400e; border:1px solid #fde68a; white-space:nowrap; }
    .prod-location-empty { color:var(--text-muted); font-style:italic; }
    .prod-td-center { text-align:center; }
    .prod-onhand-ok { font-weight:700; color:var(--success); }
    .prod-onhand-short { font-weight:700; color:var(--btn-danger); }
    .prod-unit { font-size:11px; color:var(--text-muted); }
    .prod-qty-needed { font-size:15px; font-weight:800; color:var(--text-primary); text-align:center; }
    .prod-qty-short { color:var(--btn-danger); }
    .prod-empty { padding:40px 24px; text-align:center; color:var(--text-muted); font-size:13.5px; }

    /* ── Inventory Section (part detail) ── */
    .inv-section { border-top:1px solid var(--border); margin-top:20px; padding-top:16px; }
    .inv-section h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:12px; }
    .inv-onhand { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
    .inv-onhand span { color:var(--sidebar-accent); }
    .inv-adj-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
    .inv-adj-row input[type="number"] { width:80px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:#fff; outline:none; text-align:center; }
    .inv-adj-row input[type="number"]:focus { border-color:var(--border-focus); }
    .inv-adj-row input[type="text"] { flex:1; min-width:140px; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:#fff; outline:none; }
    .inv-adj-row input[type="text"]:focus { border-color:var(--border-focus); }
    .inv-log-list { max-height:180px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--table-header-bg); margin-top:8px; }
    .inv-log-empty { padding:12px; font-size:12px; color:var(--text-muted); font-style:italic; text-align:center; }
    .inv-log-entry { display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); font-size:12px; }
    .inv-log-entry:last-child { border-bottom:none; }
    .inv-log-ts { color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .inv-log-reason { color:var(--text-secondary); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .inv-log-after { color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .inv-log-type { display:inline-block; padding:1px 7px; border-radius:8px; font-size:11px; font-weight:700; color:#1e3a8a; background:#dbeafe; flex-shrink:0; }
    .inv-delta-pos { display:inline-block; padding:1px 6px; border-radius:8px; font-size:11px; font-weight:700; background:#d1fae5; color:#065f46; flex-shrink:0; }
    .inv-delta-neg { display:inline-block; padding:1px 6px; border-radius:8px; font-size:11px; font-weight:700; background:#fee2e2; color:#991b1b; flex-shrink:0; }

    /* ── Scale Reconciliation ── */
    .inv-scale-section { border-top:1px solid var(--border); margin-top:14px; padding-top:12px; }
    .inv-scale-section h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:10px; }
    .inv-scale-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
    .inv-scale-row label { font-size:12px; color:var(--text-secondary); white-space:nowrap; }
    .inv-scale-row input[type="number"] { width:90px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font); background:#fff; outline:none; text-align:center; }
    .inv-scale-row input[type="number"]:focus { border-color:var(--border-focus); }
    .inv-scale-result { font-size:13px; color:var(--text-secondary); margin-bottom:10px; }
    .inv-scale-result strong { color:var(--text-primary); }
    .inv-scale-disabled { font-size:12px; color:var(--text-muted); font-style:italic; padding:4px 0; }

    /* ── Assembly Availability Card (Pick List tab) ── */
    #prod-avail-card { margin-bottom:20px; }
    .prod-card-label { padding:12px 16px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
    .avail-table { width:100%; border-collapse:collapse; font-size:13px; }
    .avail-table thead th { background:var(--table-header-bg); color:var(--text-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
    .avail-th-num { text-align:center !important; }
    .avail-table tbody tr { border-bottom:1px solid var(--border); transition:background .08s; }
    .avail-table tbody tr:last-child { border-bottom:none; }
    .avail-table tbody tr:hover { background:var(--table-row-hover); }
    .avail-table td { padding:8px 12px; vertical-align:middle; }
    .avail-num { text-align:center; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
    .avail-can-build { font-size:18px; font-weight:800; color:var(--sidebar-accent); text-align:center; font-variant-numeric:tabular-nums; }
    .avail-can-build.zero { color:var(--btn-danger); }
    .avail-assembly-id { font-size:11px; color:var(--text-muted); margin-left:6px; }
    .avail-bottleneck { font-size:12px; color:var(--text-secondary); display:flex; align-items:baseline; gap:5px; }
    .avail-bottleneck-id { font-size:11px; color:var(--text-muted); }
    .avail-bottleneck-none { font-style:italic; color:var(--text-muted); }
    /* ── Operations Tab ─────────────────────────────────────── */
    .ops-mode-btns { display:flex; gap:0; margin-bottom:20px; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; width:fit-content; }
    .ops-mode-btn { padding:8px 20px; font-size:13px; font-weight:600; background:var(--table-header-bg); color:var(--text-secondary); border:none; cursor:pointer; font-family:var(--font); transition:background .15s,color .15s; }
    .ops-mode-btn:not(:last-child) { border-right:1px solid var(--border); }
    .ops-mode-btn.active { background:var(--sidebar-accent); color:#fff; }
    .ops-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-bottom:16px; }
    .ops-controls label { font-size:11px; font-weight:700; color:var(--text-muted); display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; }
    .ops-controls select, .ops-controls input[type="number"], .ops-controls input[type="text"] { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); background:#fff; outline:none; }
    .ops-controls select:focus, .ops-controls input:focus { border-color:var(--border-focus); }
    .ops-controls select { min-width:220px; }
    .ops-controls input[type="number"] { width:80px; }
    .ops-controls input[type="text"] { min-width:240px; flex:1; }
    .ops-reason-wrap { flex:1; }
    #ops-reason { width:100%; box-sizing:border-box; }
    .ops-preview { margin-bottom:16px; }
    .ops-preview-table { width:100%; border-collapse:collapse; font-size:13px; }
    .ops-preview-table th { text-align:left; padding:6px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--table-header-bg); border-bottom:1px solid var(--border); }
    .ops-preview-table td { padding:7px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .ops-preview-table tr:last-child td { border-bottom:none; }
    .ops-change-pos { font-weight:700; color:var(--success); }
    .ops-change-neg { font-weight:700; color:var(--btn-danger); }
    .ops-warn { padding:8px 12px; background:#fffbeb; border:1px solid #fcd34d; border-radius:var(--radius-sm); font-size:12px; color:#92400e; margin-bottom:12px; }
    .ops-empty { color:var(--text-muted); font-size:13px; font-style:italic; padding:12px 0; }
    .ops-footer { display:flex; justify-content:flex-end; }

    /* ── Transactions Tab ── */
    .tx-form { padding:16px 20px; display:flex; flex-direction:column; gap:14px; overflow:visible; }
    .tx-note-row { display:flex; flex-direction:column; gap:4px; }
    .tx-note-row label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
    .tx-note-row input,
    .tx-note-row select { padding:8px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font); background:#fff; outline:none; width:100%; box-sizing:border-box; }
    .tx-note-row input:focus,
    .tx-note-row select:focus { border-color:var(--border-focus); }
    .tx-extra-header-controls { display:flex; gap:8px; }
    .tx-extra-header-controls input { flex:1; }
    .tx-extra-header-controls select { width:80px; flex-shrink:0; }
    .tx-lines-table { width:100%; border-collapse:collapse; font-size:13px; }
    .tx-lines-table th { text-align:left; padding:6px 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); background:var(--table-header-bg); border-bottom:1px solid var(--border); }
    .tx-lines-table td { padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .tx-lines-table tr:last-child td { border-bottom:none; }
    .tx-table-input { padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); font-size:16px; outline:none; background:#fff; }
    .tx-table-input:focus { border-color:var(--border-focus); }
    .tx-qty-input { width:70px; text-align:center; }
    .tx-cost-input { width:110px; text-align:right; }
    .tx-extra-input { width:100px; text-align:right; }
    .tx-currency-select { font-size:14px; padding:6px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); outline:none; background:#fff; }
    .tx-currency-select:focus { border-color:var(--border-focus); }
    .tx-remove-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:16px; line-height:1; padding:2px 6px; }
    .tx-remove-btn:hover { color:var(--btn-danger); }
    .tx-preview { margin-bottom:16px; }
    .tx-receive-summary { padding:10px 12px 0; font-size:12px; color:var(--text-muted); }
    .tx-footer { display:flex; justify-content:flex-end; margin-top:4px; }
    .tx-history-link { border-top:1px solid var(--border); margin-top:28px; padding-top:18px; color:var(--text-muted); font-size:13px; }
    .tx-date-header { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); padding:10px 0 4px; }
    .tx-log-entry { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; flex-wrap:wrap; }
    .tx-log-entry:last-child { border-bottom:none; }
    .tx-type-sell { display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:700; background:#fee2e2; color:#991b1b; flex-shrink:0; }
    .tx-type-receive { display:inline-block; padding:2px 8px; border-radius:8px; font-size:11px; font-weight:700; background:#d1fae5; color:#065f46; flex-shrink:0; }
    .tx-log-ts { color:var(--text-muted); white-space:nowrap; flex-shrink:0; font-size:12px; }
    .tx-log-part { color:var(--text-primary); flex:1; min-width:120px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tx-delta-pos { display:inline-block; padding:1px 6px; border-radius:8px; font-size:11px; font-weight:700; background:#d1fae5; color:#065f46; flex-shrink:0; }
    .tx-delta-neg { display:inline-block; padding:1px 6px; border-radius:8px; font-size:11px; font-weight:700; background:#fee2e2; color:#991b1b; flex-shrink:0; }
    .tx-log-reason { color:var(--text-muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
    .tx-history-empty { padding:30px 0; text-align:center; color:var(--text-muted); font-size:13px; font-style:italic; }
    .tx-part-wrap { position:relative; }
    .tx-part-search { padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); background:#fff; outline:none; width:100%; box-sizing:border-box; }
    .tx-part-search:focus { border-color:var(--border-focus); }
    .tx-part-dropdown { position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); max-height:200px; overflow-y:auto; z-index:100; display:none; box-shadow:0 4px 12px rgba(0,0,0,.08); }
    .tx-part-dropdown.open { display:block; }
    .tx-part-option { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; cursor:pointer; }
    .tx-part-option:hover { background:var(--table-row-hover); }
    .tx-part-option-desc { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
    .tx-part-option-id { font-size:11px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
    .tx-part-option-empty { color:var(--text-muted); font-size:12px; font-style:italic; justify-content:center; cursor:default; }

    /* ── Logs Tab ── */
    .logs-panel { padding:18px 20px; }
    .logs-controls { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end; }
    .logs-filter-group, .logs-search-group { display:flex; flex-direction:column; gap:4px; }
    .logs-filter-group label, .logs-search-group label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
    .logs-filter-group select, .logs-search-group input {
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:#fff;
      outline:none;
    }
    .logs-search-group { flex:1; min-width:220px; }
    .logs-filter-group select:focus, .logs-search-group input:focus { border-color:var(--border-focus); }
    .logs-event {
      width:100%;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      background:#fff;
      padding:12px 14px;
      text-align:left;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:8px 14px;
      cursor:pointer;
      margin-bottom:10px;
      font-family:var(--font);
    }
    .logs-event.open { border-color:#bfd7ff; box-shadow:0 0 0 1px rgba(59,130,246,.08); }
    .logs-event-main { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; }
    .logs-event-summary { font-size:13px; font-weight:600; color:var(--text-primary); }
    .logs-event-meta, .logs-event-ref { font-size:12px; color:var(--text-muted); }
    .logs-event-toggle { font-size:12px; font-weight:700; color:var(--sidebar-accent); margin-left:auto; }
    .logs-event-details {
      margin:-4px 0 12px;
      padding:12px 14px;
      border:1px solid var(--border);
      border-top:none;
      border-radius:0 0 var(--radius-sm) var(--radius-sm);
      background:var(--table-header-bg);
    }
    .logs-event-reference { font-size:12px; color:var(--text-secondary); margin-bottom:10px; }
    .logs-line-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:6px 0; border-bottom:1px solid var(--border); }
    .logs-line-row:last-child { border-bottom:none; }
    .logs-line-entity { font-size:12.5px; font-weight:600; color:var(--text-primary); }
    .logs-line-action, .logs-line-qty { font-size:12px; color:var(--text-muted); }
    .audit-type-sell { background:#fee2e2; color:#991b1b; }
    .audit-type-receive { background:#d1fae5; color:#065f46; }
    .audit-type-manual_adjustment { background:#fef3c7; color:#92400e; }
    .audit-type-assemble, .audit-type-disassemble { background:#e0e7ff; color:#3730a3; }
    .audit-type-part_edit, .audit-type-bom_edit, .audit-type-supplier_edit, .audit-type-account_edit { background:#e2e8f0; color:#334155; }

    /* ── Settings Tab ── */
    .settings-card { padding:18px 20px; }
    .settings-title {
      margin:0 0 6px;
      font-size:16px;
      font-weight:700;
      color:var(--text-primary);
      letter-spacing:-0.01em;
    }
    .settings-subtext { margin:0 0 14px; font-size:13px; color:var(--text-muted); }
    .settings-section + .settings-section {
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid var(--border);
    }
    .settings-row { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:flex-end; }
    .settings-row:last-child { margin-bottom:0; }
    .settings-row input {
      flex:1;
      min-width:220px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:#fff;
      outline:none;
    }
    .settings-row select {
      min-width:140px;
      padding:8px 10px;
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      font-size:14px;
      font-family:var(--font);
      background:#fff;
      outline:none;
    }
    .settings-row input:focus,
    .settings-row select:focus { border-color:var(--border-focus); }
    .settings-input-narrow { flex:0 0 auto !important; width:160px; }
    .settings-list-item {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      padding:12px 0;
      border-bottom:1px solid var(--border);
    }
    .settings-list-item:last-child { border-bottom:none; }
    .settings-list-main { min-width:0; flex:1; }
    .settings-list-name { font-size:13px; color:var(--text-primary); font-weight:600; line-height:1.4; }
    .settings-list-meta {
      margin-top:3px;
      font-size:12px;
      color:var(--text-muted);
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .settings-account-type { text-transform:capitalize; }
    .settings-account-status {
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
      background:#d1fae5;
      color:#065f46;
    }
    .settings-account-status.inactive {
      background:#fee2e2;
      color:#991b1b;
    }
    .settings-list-actions { display:flex; gap:6px; }
    .settings-backup-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
      margin-bottom:10px;
      flex-wrap:wrap;
    }
    .settings-backup-subtext {
      font-size:12px;
      color:var(--text-muted);
      margin-top:2px;
    }
    .settings-backup-status {
      font-size:12px;
      color:var(--text-secondary);
      margin-bottom:10px;
    }
    .settings-backup-item {
      padding:12px 0;
      border-bottom:1px solid var(--border);
    }
    .settings-backup-item:last-child { border-bottom:none; }
    .settings-backup-main { min-width:0; }
    .settings-backup-badge {
      display:inline-block;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
    }
    .settings-backup-badge--success {
      background:#d1fae5;
      color:#065f46;
    }
    .settings-backup-badge--failed {
      background:#fee2e2;
      color:#991b1b;
    }
    .settings-backup-badge--started {
      background:#e0e7ff;
      color:#3730a3;
    }
    .settings-backup-meta {
      margin-top:6px;
      font-size:12px;
      color:var(--text-muted);
      line-height:1.5;
    }
    .settings-backup-error {
      margin-top:6px;
      font-size:12px;
      color:#b91c1c;
      line-height:1.5;
      word-break:break-word;
    }

    /* ── Shopify Tab ── */
    .shopify-header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .shopify-token-state { font-size:12px; color:var(--text-muted); margin-right:auto; }
    .shopify-summary { margin-bottom:12px; }
    .shopify-summary-card {
      padding:12px 16px;
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      gap:10px 16px;
      align-items:end;
      font-size:13px;
      color:var(--text-secondary);
    }
    .shopify-summary-card > div:not(.shopify-summary-meta) {
      min-width:0;
    }
    .shopify-summary-card strong { color:var(--text-primary); }
    .shopify-summary-meta { justify-self:end; color:var(--text-muted); font-size:12px; white-space:nowrap; }
    .shopify-work-summary-card { margin-top:10px; padding:14px 16px; }
    .shopify-publish-card { margin:0 0 12px; padding:14px 16px; }
    .shopify-build-summary-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
    .shopify-build-summary-head h3 { margin:0; font-size:14px; color:var(--text-primary); }
    .shopify-build-summary-head span { color:var(--text-muted); font-size:12px; font-weight:600; }
    .shopify-summary-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-left:auto; }
    .shopify-build-summary-toggle { margin:0 0 12px; padding-top:2px; }
    .shopify-build-summary-toggle label { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); font-weight:500; }
    .shopify-build-summary-toggle input { width:14px; height:14px; }
    .shopify-build-summary-empty { color:var(--text-muted); font-size:13px; padding:2px 0 4px; }
    .shopify-pick-section { margin-top:14px; }
    .shopify-pick-section:first-of-type { margin-top:0; }
    .shopify-pick-section + .shopify-pick-section { padding-top:14px; border-top:1px solid var(--border); }
    .shopify-pick-section h4 { margin:0 0 10px; font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; }
    .shopify-order-card { margin-bottom:12px; padding:14px 16px; }
    .shopify-order-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
    .shopify-order-name { font-size:15px; font-weight:700; color:var(--text-primary); }
    .shopify-order-meta { font-size:12px; color:var(--text-muted); margin-top:3px; }
    .shopify-status-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; }
    .shopify-status-ready { background:#dcfce7; color:#166534; }
    .shopify-status-blocked { background:#fee2e2; color:#991b1b; }
    .shopify-status-executed { background:#e0e7ff; color:#3730a3; }
    .shopify-status-fulfilled { background:#dbeafe; color:#1d4ed8; }
    .shopify-status-warning { background:#fef9c3; color:#854d0e; }
    .shopify-section-heading { font-size:15px; font-weight:700; color:var(--text-primary); margin:24px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border-color); }
    .shopify-lines-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:0; table-layout:fixed; }
    .shopify-lines-table th { background:var(--table-header-bg); font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; padding:7px 10px; border-bottom:1px solid var(--border); text-align:left; }
    .shopify-lines-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
    .shopify-lines-table tbody tr:last-child td { border-bottom:none; }
    .shopify-lines-table th:last-child,
    .shopify-lines-table td:last-child { text-align:right; }
    .shopify-lines-table th:nth-child(4),
    .shopify-lines-table td:nth-child(4),
    .shopify-lines-table th:nth-child(5),
    .shopify-lines-table td:nth-child(5),
    .shopify-lines-table th:nth-child(6),
    .shopify-lines-table td:nth-child(6) { text-align:right; }
    .shopify-subsection { margin-top:8px; font-size:13px; color:var(--text-secondary); }
    .shopify-subsection strong { display:block; margin-bottom:4px; color:var(--text-primary); }
    .shopify-subsection ul { margin:0; padding-left:18px; }
    .shopify-subsection li { margin:2px 0; }
    .shopify-order-actions { display:flex; justify-content:flex-end; margin-top:10px; }
    .shopify-publish-meta {
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap:8px 16px;
      margin-bottom:12px;
      font-size:12px;
      color:var(--text-secondary);
    }
    .shopify-publish-table td:last-child,
    .shopify-publish-table th:last-child { text-align:left; }
    .shopify-publish-reasons {
      margin-top:4px;
      font-size:11px;
      color:var(--text-muted);
      line-height:1.4;
    }
    .part-link-btn {
      background:none;
      border:none;
      padding:0;
      margin:0;
      color:var(--sidebar-accent);
      font:inherit;
      font-weight:600;
      cursor:pointer;
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .part-link-btn:hover { color:var(--btn-primary-hover); }

    @media print {
      body.printing-shopify-picks {
        background:#fff;
      }
      body.printing-shopify-picks #topbar,
      body.printing-shopify-picks #sidebar,
      body.printing-shopify-picks #sidebar-overlay,
      body.printing-shopify-picks #img-lightbox,
      body.printing-shopify-picks #loading-overlay,
      body.printing-shopify-picks #shopify-error,
      body.printing-shopify-picks #shopify-orders,
      body.printing-shopify-picks .nav-item,
      body.printing-shopify-picks .tx-footer,
      body.printing-shopify-picks .btn {
        display:none !important;
      }
      body.printing-shopify-picks #app,
      body.printing-shopify-picks #content,
      body.printing-shopify-picks main {
        display:block !important;
        overflow:visible !important;
        padding:0 !important;
      }
      body.printing-shopify-picks .tab-panel {
        display:none !important;
      }
      body.printing-shopify-picks #panel-shopify {
        display:block !important;
      }
      body.printing-shopify-picks .page-header {
        margin-bottom:14px;
      }
      body.printing-shopify-picks .card {
        box-shadow:none !important;
        border:1px solid #d1d5db !important;
        break-inside:avoid;
      }
      body.printing-shopify-picks .shopify-summary {
        margin-bottom:0;
      }
      body.printing-shopify-picks .shopify-summary-card,
      body.printing-shopify-picks .shopify-work-summary-card {
        margin-top:0;
        margin-bottom:12px;
      }
      body.printing-shopify-picks .shopify-summary-card {
        grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      }
      body.printing-shopify-picks .shopify-lines-table th,
      body.printing-shopify-picks .shopify-lines-table td {
        padding:6px 8px;
        font-size:11px;
      }
      body.printing-shopify-picks .shopify-build-summary-toggle {
        display:none !important;
      }
    }

/* ── QZ Tray Status ─────────────────────────────────── */
.qz-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.qz-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aaa;
  flex-shrink: 0;
}
.qz-status--connected .qz-status-dot { background: #22c55e; }
.qz-status--connecting .qz-status-dot { background: #f59e0b; }
.qz-status--disconnected .qz-status-dot { background: #aaa; }
.qz-status--error .qz-status-dot { background: #ef4444; }

.qz-printer-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  min-width: 160px;
}
.qz-printer-select:disabled { opacity: 0.5; }

/* ── Labels Tab ─────────────────────────────────────── */
.labels-search-wrap {
  margin-bottom: 12px;
}
.labels-search-input {
  width: 100%;
  max-width: 360px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
#labels-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.label-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.label-check-row:hover {
  background: var(--bg-secondary);
}
.label-check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.label-check-id {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  min-width: 100px;
}
.label-check-desc {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Label Sheet (screen preview) ──────────────────── */
.label-sheet {
  display: flex;
  flex-wrap: wrap;
}
.label-item {
  width: 3in;
  height: 2in;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.12in 0.15in;
  box-sizing: border-box;
  border: 1px dashed #bbb;
  gap: 0.12in;
  break-inside: avoid;
  page-break-inside: avoid;
}
.label-qr {
  width: 1.5in;
  height: 1.5in;
  flex-shrink: 0;
}
.label-qr img,
.label-qr canvas {
  width: 1.5in !important;
  height: 1.5in !important;
}
.label-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.label-part-num {
  font-size: 13pt;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
  word-break: break-all;
}
.label-desc {
  font-size: 7.5pt;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* ── Inventory Health Tab ──────────────────────────────────────────────────── */
.inv-summary-card {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 16px;
}
.inv-summary-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.inv-summary-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.inv-summary-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.inv-stat-critical { color: var(--btn-danger, #dc2626); }
.inv-stat-low { color: var(--warn, #d97706); }

.inv-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.inv-health-table th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.inv-health-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}
.inv-health-table tr:last-child td { border-bottom: none; }
.inv-health-table tr:hover td { background: var(--hover-bg, rgba(0,0,0,.03)); }
.inv-health-row-link {
  background: none;
  border: none;
  color: var(--sidebar-accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.inv-health-row-link:hover { text-decoration: underline; }

.inv-health-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inv-health-chip--ok { background: #dcfce7; color: #166534; }
.inv-health-chip--low { background: #fef9c3; color: #854d0e; }
.inv-health-chip--critical { background: #fee2e2; color: #991b1b; }

.inv-assemblies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.inv-assembly-card {
  background: var(--table-header-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.inv-assembly-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.inv-assembly-rec {
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 2px;
  padding: 5px 10px;
  border-radius: 6px;
}
.inv-assembly-rec--needed {
  background: #fef9c3;
  color: #854d0e;
}
.inv-assembly-rec--ok {
  background: #dcfce7;
  color: #166534;
}
.inv-assembly-rec-reason {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.inv-assembly-divider {
  border-top: 1px solid var(--border);
  margin: 8px 0;
}
.inv-assembly-stat { font-size: 12px; color: var(--text-muted); margin: 2px 0; }
.inv-assembly-stat span { font-weight: 600; color: var(--text-primary); }
.inv-assembly-stat--orders { color: var(--text-primary); font-weight: 500; }
.inv-assembly-stat--orders span { color: #d97706; }
.inv-bottleneck-label { font-size: 11px; color: var(--text-muted); margin-top: 6px; }
.inv-bottleneck-label span { color: var(--btn-danger, #dc2626); font-weight: 600; }

.inv-report-panel { margin-top: 20px; }
.inv-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.inv-report-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.inv-report-body {
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--table-header-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.inv-report-body h2 { font-size: 16px; font-weight: 700; margin: 18px 0 6px; }
.inv-report-body h3 { font-size: 14px; font-weight: 700; margin: 14px 0 4px; color: var(--text-secondary); }
.inv-report-body h4 { font-size: 13px; font-weight: 700; margin: 10px 0 3px; }
.inv-report-body ul { padding-left: 20px; margin: 6px 0; }
.inv-report-body ol { padding-left: 20px; margin: 6px 0; }
.inv-report-body li { margin: 3px 0; }
.inv-report-body strong { font-weight: 700; }
.inv-report-body em { font-style: italic; }
.inv-report-body p { margin: 6px 0; }
.inv-report-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .inv-summary-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .inv-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

    /* ── On Order inventory indicators ── */
    .inv-onorder { font-size: 13px; color: var(--text-secondary); margin-top: 4px; margin-bottom: 8px; }
    .inv-onorder span:first-child { font-weight: 600; color: #1d4ed8; }
    .inv-onorder-pos { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
    .inv-po-link { background: none; border: none; cursor: pointer; color: var(--sidebar-accent); font-size: 12px; padding: 0; text-decoration: underline; }
    .inv-po-link:hover { color: var(--btn-primary-hover); }
    .inv-onorder-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 600; white-space: nowrap; }

    /* ── Purchase Orders ── */
    .po-list-table { width: 100%; border-collapse: collapse; }
    .po-list-table th { background: var(--table-header-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
    .po-list-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
    .po-list-row { cursor: pointer; transition: background 0.1s; }
    .po-list-row:hover { background: var(--table-row-hover); }
    .po-list-actions { white-space: nowrap; text-align: right; }
    .po-status-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
    .po-status-draft { background: #e2e8f0; color: #4a5568; }
    .po-status-sent { background: #dbeafe; color: #1d4ed8; }
    .po-status-received { background: #d1fae5; color: #065f46; }
    .po-status-cancelled { background: #fee2e2; color: #991b1b; }
    .po-detail-wrap { display: flex; flex-direction: column; gap: 16px; }
    .po-detail-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .po-detail-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; }
    .po-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .po-header-card { padding: 16px 20px; }
    .po-header-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; }
    .po-field { display: flex; flex-direction: column; gap: 4px; }
    .po-field label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
    .po-field input, .po-field select { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); font-size: 13px; }
    .po-field input:focus, .po-field select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
    .po-field-full { grid-column: 1 / -1; }
    .po-lines-card { overflow: visible; }
    .po-lines-card .table-wrap { overflow: visible; }
    .po-lines-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .po-lines-table { width: 100%; border-collapse: collapse; }
    .po-lines-table th { background: var(--table-header-bg); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
    .po-lines-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
    .po-desc-cell { color: var(--text-secondary); max-width: 200px; }
    .po-extended-cell { white-space: nowrap; }
    .po-total-row td { background: var(--table-header-bg); font-weight: 700; border-top: 2px solid var(--border); }
    .po-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 20px; }
    .po-meta-item { display: flex; flex-direction: column; gap: 4px; }
    .po-meta-full { grid-column: 1 / -1; }
    .po-brand-block { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(135deg, #f8fbff, #eef6fb); }
    .po-brand-logo { width: 34px; height: 34px; color: #16324f; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; flex: 0 0 34px; overflow: hidden; }
    .po-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
    .po-brand-copy { min-width: 0; }
    .po-brand-name { font-size: 14px; font-weight: 800; color: var(--text-primary); }
    .po-brand-meta { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
    .po-inline-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .po-inline-edit input { min-width: 0; width: 100%; max-width: 170px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-primary); font-size: 13px; }
    .po-inline-edit input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
    .po-meta-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }
    .po-meta-value { font-size: 13px; color: var(--text-primary); }
    @media (max-width: 640px) {
      .po-header-grid { grid-template-columns: 1fr 1fr; }
      .po-meta-grid { grid-template-columns: 1fr 1fr; }
      .po-detail-header { flex-direction: column; align-items: flex-start; }
      .po-brand-block { align-items: flex-start; }
    }

    @media (max-width: 900px) {
      .shopify-summary-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .shopify-header-actions {
        width:100%;
      }
      .shopify-summary-meta {
        justify-self:start;
      }
      .shopify-summary-actions {
        justify-content:flex-start;
        margin-left:0;
      }
      .shopify-publish-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

/* ── Packing Tab ─────────────────────────────────────────────────────────── */
.packing-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.packing-lookup-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.packing-order-input {
  width: 100%;
  max-width: 320px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px; /* 16px prevents iOS zoom */
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.packing-order-input:focus {
  outline: none;
  border-color: var(--sidebar-accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 99,102,241), .15);
}
.packing-order-card {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.packing-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.packing-order-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-right: 8px;
}
.packing-order-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.packing-unmapped-warn {
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.4);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.packing-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.packing-lines-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
}
.packing-lines-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
  line-height: 1.3;
}
.packing-lines-table tbody tr { cursor: pointer; }
.packing-lines-table tr:last-child td { border-bottom: none; }
.packing-row-active { background: rgba(59,130,246,.06); }
.packing-row-active td:first-child { border-left: 3px solid var(--sidebar-accent); }
.packing-row-confirmed { opacity: 0.6; }
.packing-row-confirmed td:first-child { border-left: 3px solid #16a34a; }
.packing-check-cell {
  width: 32px;
  text-align: center;
  font-size: 16px;
}
.packing-col-sku { font-family: monospace; font-size: 12px; color: var(--text-secondary); }
.packing-col-num { text-align: right; white-space: nowrap; font-size: 16px; font-weight: 600; }
.packing-weight-warning {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(234,179,8,.15);
  color: #92400e;
  border: 1px solid rgba(234,179,8,.35);
}
.packing-weight-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 6px 8px;
  background: rgba(234,179,8,.08);
  border-radius: 6px;
}
.packing-weight-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .packing-weight-section { grid-template-columns: 1fr; }
}
.packing-box-card,
.packing-scale-card {
  padding: 14px 16px;
}
.packing-box-label,
.packing-scale-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.packing-box-presets {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.packing-box-btn {
  padding: 5px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.packing-box-btn:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }
.packing-box-btn.active {
  background: var(--sidebar-accent);
  color: #fff;
  border-color: var(--sidebar-accent);
}
.packing-box-custom-input {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.packing-expected-weight {
  font-size: 14px;
  color: var(--text-primary);
}
.packing-expected-breakdown {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}
.packing-scale-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.packing-scale-waiting {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.packing-scale-source,
.count-scale-source {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.packing-weight-indicator {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.packing-weight--ok {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.4);
}
.packing-weight--ok .packing-scale-value,
.packing-weight--ok .packing-weight-indicator { color: #15803d; }
.packing-weight--close {
  background: rgba(234,179,8,.1);
  border-color: rgba(234,179,8,.4);
}
.packing-weight--close .packing-scale-value,
.packing-weight--close .packing-weight-indicator { color: #92400e; }
.packing-weight--off {
  background: rgba(239,68,68,.08);
  border-color: rgba(239,68,68,.35);
}
.packing-weight--off .packing-scale-value,
.packing-weight--off .packing-weight-indicator { color: #b91c1c; }
.packing-counted-cell {
  text-align: right;
  white-space: nowrap;
  font-size: 22px;
  font-weight: 700;
  width: 80px;
}
.packing-counted-na {
  text-align: right;
  color: var(--text-muted);
}
.packing-counted--ok {
  color: #15803d;
  background: rgba(34,197,94,.08);
}
.packing-counted--off {
  color: #b91c1c;
  background: rgba(239,68,68,.07);
}
.packing-focus-panel {
  margin-top: 12px;
  padding: 16px;
}
.packing-focus-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.packing-focus-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.packing-focus-item {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.packing-focus-meta {
  font-size: 13px;
  color: var(--text-muted);
}
.packing-focus-count-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 14px 0 16px;
}
.packing-focus-count-status {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}
.packing-focus-count {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.packing-focus-count--match { color: #16a34a; }
.packing-focus-count--off { color: #dc2626; }
.packing-focus-count--na {
  color: var(--text-muted);
  font-size: 32px;
}
.packing-focus-needed {
  font-size: 18px;
  color: var(--text-secondary);
}
.packing-focus-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.packing-focus-all-done {
  font-size: 15px;
  font-weight: 600;
  color: #16a34a;
  padding: 8px 0;
}
.packing-focus-empty {
  font-size: 14px;
  color: var(--text-muted);
}
.packing-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.packing-execute-btn {
  min-width: 160px;
}
.packing-execute-btn--warning {
  border-color: rgba(234,179,8,.45);
  background: rgba(234,179,8,.14);
  color: #92400e;
}
.packing-execute-btn--warning:hover {
  background: rgba(234,179,8,.2);
}
.packing-error-msg {
  padding: 10px 14px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius);
  color: #b91c1c;
  font-size: 13px;
  margin-bottom: 12px;
}
.packing-success-msg {
  padding: 10px 14px;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.35);
  border-radius: var(--radius);
  color: #15803d;
  font-size: 13px;
  margin-bottom: 12px;
}
.scale-bridge-panel {
  display: none;
  margin: 0 0 12px;
  padding: 14px 16px;
}
.scale-bridge-panel.open {
  display: block;
}
.scale-bridge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.scale-bridge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.scale-bridge-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.scale-bridge-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.scale-bridge-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.scale-bridge-role-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  padding: 10px 12px;
}
.scale-bridge-role-card.active {
  border-color: var(--sidebar-accent);
  background: rgba(59,130,246,.08);
}
.scale-bridge-role-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.scale-bridge-role-copy {
  font-size: 12px;
  color: var(--text-muted);
}
.scale-bridge-input {
  min-width: 220px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--input-bg, var(--bg-secondary));
  color: var(--text-primary);
}
.scale-bridge-status-row {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.scale-bridge-live-wrap {
  margin-top: 12px;
}
.scale-bridge-live-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.scale-bridge-live-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scale-bridge-live-station {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
}
.scale-bridge-live-station:hover {
  background: var(--hover-bg, rgba(0,0,0,.06));
}
.scale-bridge-live-name {
  font-size: 13px;
  font-weight: 700;
}
.scale-bridge-live-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.scale-bridge-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 10px 0;
}
.scale-bridge-status {
  font-size: 12px;
  color: var(--text-secondary);
}
.scale-bridge-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
  font-weight: 700;
}
.scale-bridge-recent {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.scale-bridge-chip {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.scale-bridge-chip:hover {
  background: var(--hover-bg, rgba(0,0,0,.06));
}
.scale-bridge-meta--strong {
  margin-top: 8px;
  color: var(--text-secondary);
}
@media (max-width: 700px) {
  .scale-bridge-role-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Count Tab ────────────────────────────────────────────────────────────── */
.count-header-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.count-wrap { max-width:980px; }
.count-picker-wrap { position:relative; margin-bottom:20px; max-width:980px; }
.count-part-search {
  width:100%;
  font-size:18px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--input-bg); color:var(--text-primary);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.count-part-search::placeholder { color: var(--text-muted); }
.count-part-dropdown {
  position:absolute; top:100%; left:0; width:100%;
  background:var(--card-bg); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius-sm) var(--radius-sm);
  max-height:220px; overflow-y:auto; z-index:100;
  display:none; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.count-part-dropdown.open { display:block; }
.count-part-option { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; cursor:pointer; }
.count-part-option:hover { background:var(--table-row-hover); }
.count-part-option-desc { font-size:13px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.count-part-option-id { font-size:11px; color:var(--text-muted); white-space:nowrap; flex-shrink:0; }
.count-part-option-empty { color:var(--text-muted); font-size:12px; font-style:italic; justify-content:center; cursor:default; }

.count-part-card {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  padding:18px 20px;
}
.count-part-info { flex:1; }
.count-part-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.count-part-id { font-size:13px; color:var(--text-muted); margin-bottom:4px; }
.count-part-desc { font-size:22px; line-height:1.15; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
.count-part-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:14px;
  color:var(--text-secondary);
}
.count-part-meta span {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(148,163,184,.12);
}
.count-part-actions {
  display:flex;
  align-items:flex-start;
  flex-shrink:0;
}
.count-no-weight { color:#b45309; font-weight:500; }

.count-weight-set {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:16px; padding:10px 14px;
  background:rgba(234,179,8,.08); border-color:rgba(234,179,8,.35);
}
.count-weight-set-label { font-size:13px; color:var(--text-secondary); }
.count-weight-input {
  width:90px; padding:6px 8px; font-size:14px; font-size:16px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--input-bg);
}

.count-scale-panel {
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;
}
@media (max-width:600px) { .count-scale-panel { grid-template-columns:1fr; } }

.count-scale-card, .count-manual-card {
  padding:20px;
  border-radius: 20px;
}
.count-scale-label, .count-manual-label {
  font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin-bottom:8px;
}
.count-scale-reading {
  font-size:32px; font-weight:700; color:var(--text-primary);
  line-height:1; margin-bottom:12px;
}
.count-tare-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.count-tare-label { font-size:13px; color:var(--text-secondary); white-space:nowrap; }
.count-tare-input {
  width:80px; padding:5px 8px; font-size:14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--input-bg);
}
.count-scale-calc { font-size:13px; color:var(--text-secondary); }

.count-manual-input {
  width:100%; padding:14px 16px; font-size:28px; font-weight:700;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--input-bg); color:var(--text-primary); margin-bottom:8px;
}
.count-manual-note { font-size:12px; color:var(--text-muted); }

.count-result-row {
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px; padding:16px; background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius);
}
.count-result-cell { flex:1; text-align:center; }
.count-result-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:4px; }
.count-result-value { font-size:28px; font-weight:700; color:var(--text-primary); }
.count-result-arrow { font-size:20px; color:var(--text-muted); flex-shrink:0; }
.count-delta { }
.count-delta--zero { color:var(--text-muted) !important; }
.count-delta--pos { color:#15803d !important; }
.count-delta--neg { color:#b91c1c !important; }

.count-actions { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.count-reason-input {
  flex:1; max-width:360px; padding:8px 10px; font-size:14px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--input-bg);
}
@media (max-width: 900px) {
  .count-part-card {
    flex-direction: column;
  }
  .count-part-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 700px) {
  .count-header-actions {
    justify-content: flex-start;
  }
  .count-wrap,
  .count-picker-wrap {
    max-width: 100%;
  }
  .count-part-desc {
    font-size: 18px;
  }
  .count-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .count-reason-input {
    max-width: none;
  }
}