/* ============================================
   VINTED SELLING ASSISTANT — style.css
   Edit colours/fonts here. Everything visual
   lives in this file.
   ============================================ */

/* --- TOKENS --- */
:root {
  --bg: #0e0d0d;
  --surface: #141414;
  --surface2: #1c1c1c;
  --surface3: #242424;
  --border: #2a2a2a;
  --border2: #333;
  --accent: #00c4a0;
  --accent-dim: #00a085;
  --accent-glow: rgba(0, 196, 160, 0.15);
  --text: #ffffff;
  --text-muted: #c0c0c0;
  --text-soft: #a8a8a8;
  --label-warm: #f5e7c4;
  --red: #ce4b4b;
  --amber: #f5a623;
  --purple: #a78bfa;
  /* NEW 2026-07-06 — Needs Posting status colour, split off from --amber so it no longer looks identical to Relisted */
  --blue: #5b9cf6;
  --green: #4cd964;
  --lime: #c8f135;
  --bundle-bg: #160122;
  --card-tint-alpha: 0.15;
  --card-tint-alpha-muted: 0.15;
  --r: 12px;
  --radius: var(--r);
  --font-head: var(--head);
  --font-body: var(--body);
  --head: 'Sora', sans-serif;
  --body: 'DM Sans', sans-serif;

  /* Clears the bottom nav AND the bug-report/avatar buttons floating above it — never re-tune for the nav alone */
  --fixed-controls-clearance: 150px;

  --c-vinted: #00c4a0;
  --c-ebay: #e53238;
  --c-fb: #1877F2;
  --c-depop: #971400;
  --c-gumtree: #72BF44;
  --c-shpock: #00A3DE;

  /* Brand mark — deliberately separate from --accent, which is the UI accent */
  --brand-mad: #FFFFFF;
  --brand-haul: #D9720B;
  /* Documents the two fills baked into the icon SVG assets; no CSS consumer */
  --brand-icon-bg: #0F0D0B;
  --brand-cream: #F5F1E8;
}

/* --- RESET --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  overscroll-behavior-y: contain;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  min-height: 100vh;
}


/* ==============================================================
   UI PATTERNS — canonical component templates
   Consolidated: 2026-07-06

   Scope: this holds GENERIC, REUSABLE templates only. One-off
   feature-specific states (.btn-primary.saved, .btn-primary.disabled-save,
   .filter-pill-btn.has-active-filters + .filter-active-badge,
   .pill-item.editing, .pill-group + .pill-group.four-per-row) were
   deliberately left in place near their feature — moving those would
   fragment logic that belongs there, not here.

   When you want "a medium Save button" or similar, this is the one
   place to look — check here first before writing new CSS anywhere else.
   ============================================================== */

/* ---------- 1. BUTTONS ---------- */

/* Primary action button (e.g. "Save to Inventory") */
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: var(--accent-dim);
}

.btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Feature-specific extensions .btn-primary.saved and .btn-primary.disabled-save
   are left where they are (not moved) — see scope note above. */

/* Secondary / Cancel button
   NEW VARIANT: .md / .sm sizes added — base was single-size only. */
.btn-secondary {
  background: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--text-muted);
}

.btn-secondary.md {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-secondary.sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* Clear — plain text, no border/fill (the TARGET pattern for Phase B)
   NEW — this is the intended replacement for .btn-clear-light below.
   Do not delete .btn-clear-light until Phase B confirms every call
   site has moved over to this. */
.btn-clear-text {
  background: none;
  border: none;
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 4px;
}

.btn-clear-text.md {
  font-size: 12px;
  padding: 4px 3px;
}

.btn-clear-text.sm {
  font-size: 11px;
  padding: 3px 2px;
}

/* + Add Item (bundle review) — text row and icon-only variant
   NEW — .bundle-review-add-row existed as a class already applied inline
   in JS-rendered markup but had no CSS rule of its own before this move;
   .btn-add-item-icon is a new icon-only companion. */
.bundle-review-add-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}

/* Copy → Copied — listing output copy button
   NEW VARIANT: .icon-only added — base had no icon-only size. */
.listing-copy-btn {
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 4px 10px;
  color: var(--text-soft);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.2s, color 0.2s;
}

.listing-copy-btn:active,
.listing-copy-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
}

.listing-copy-btn.icon-only {
  padding: 5px;
  width: 24px;
  height: 24px;
  justify-content: center;
}

/* Cancel — bulk/AI-call sheet cancel button
   NEW VARIANT: .sm added. */
.basc-cancel {
  background: var(--surface3);
  color: var(--text-soft);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-body);
}

.basc-cancel.sm {
  padding: 4px 8px;
  font-size: 10px;
}

/* Actions sheet row button — default, accent, ghost, and danger variants
   NEW VARIANTS: .md (medium/half size) and .icon-only (circular, row-level
   delete) added — base only had one size before. */
.actions-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.actions-btn:active {
  transform: scale(0.98);
}

.actions-btn.accent {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.actions-btn.danger {
  background: transparent;
  border-color: rgba(206, 75, 75, 0.25);
  color: var(--red);
}

/* Needs Attention row actions — colour matches the status the action produces
   (Listed/Relisted share the blue family; Posted is muted, same as
   lcNextStatusAction's dqm-muted treatment for the identical transition). */
.actions-btn.blue {
  background: rgba(91, 156, 246, 0.15);
  border-color: var(--blue);
  color: var(--blue);
}

.actions-btn.blue .actions-btn-icon {
  background: rgba(91, 156, 246, 0.15);
}

.actions-btn.muted {
  color: var(--text-muted);
}

.actions-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.actions-btn.accent .actions-btn-icon {
  background: rgba(0, 196, 160, 0.15);
}

.actions-btn.danger .actions-btn-icon {
  background: rgba(206, 75, 75, 0.1);
}

.actions-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.actions-btn-label {
  font-size: 14px;
  font-weight: 500;
}

.actions-btn-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 400;
}

.actions-btn.accent .actions-btn-sub {
  color: rgba(0, 196, 160, 0.6);
}

.actions-btn.danger .actions-btn-sub {
  color: rgba(206, 75, 75, 0.5);
}

/* NEW: medium/half-size modifier, for contexts like the bundle Actions sheet
   shortcut where a smaller version of Generate/Delete is wanted */
.actions-btn.md {
  max-width: 280px;
  padding: 9px 10px;
  gap: 8px;
}

.actions-btn.md .actions-btn-icon {
  width: 26px;
  height: 26px;
}

.actions-btn.md .actions-btn-label {
  font-size: 12px;
}

/* NEW: icon-only circular variant, for row-level delete actions
   (bulk delete reuses this — no separate override needed) */
.actions-btn-icon-only {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(206, 75, 75, 0.1);
  border: 1px solid rgba(206, 75, 75, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  cursor: pointer;
}

/* NEW: accent (teal) color variant of the icon-only circle, for affirmative
   actions like AI Suggest — the base rule above is red/danger-only */
.actions-btn-icon-only.accent {
  background: rgba(0, 196, 160, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* NEW: neutral/grey variant of the icon-only circle, for non-destructive,
   non-affirmative icon actions (Photo Editor's Rotate buttons + its
   Auto-Enhance icon's off state) — the base rule is red/danger-only and
   .accent above is teal-only, neither fits a plain neutral icon action */
.actions-btn-icon-only.neutral {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}

/* ---------- 2. TOASTS & MODALS ---------- */

/* Base toast + show/hide toggle + message + undo + progress bar */
.home-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: var(--surface2);
  border: 1px solid #333;
  color: var(--text);
  font-size: 14px;
  padding: 14px 24px;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space: pre-wrap;
  text-align: center;
  max-width: 90vw;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.home-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: all;
}

/* Desktop-site-mode readability (see maybeWarnDesktopMode, app.js). Uses zoom,
   NOT transform: zoom participates in layout, so content re-wraps into the
   narrower coordinate space rather than overflowing a 980px column and forcing
   left/right panning on every line — and the page keeps a correct scroll
   height, which a transform would not. Net effect: text reads at normal size
   with no pinch-zoom and no horizontal scrolling. */
.dm-zoomed {
  zoom: var(--dm-scale, 2.2);
}

/* Attention flash for a deep-linked FAQ answer (initSettingsHelpPage) — two
   quick teal pulses, since a single slow fade is easy to miss on a page the
   browser may be rendering at ~45%. Ring is 3px so it survives that downscale. */
@keyframes faqFlash {
  0% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }

  20% {
    background: var(--accent-glow);
    box-shadow: 0 0 0 3px var(--accent);
  }

  40% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }

  60% {
    background: var(--accent-glow);
    box-shadow: 0 0 0 3px var(--accent);
  }

  100% {
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
}

.settings-nested-panel.faq-flash {
  animation: faqFlash 1.4s ease-in-out;
  border-radius: var(--radius);
}

/* Desktop-site-mode warning ONLY (maybeWarnDesktopMode, app.js) — in that mode
   Chrome shrinks the entire app to ~45%, which would leave the one toast that
   explains how to fix it unreadable. --dm-scale is the measured compensation
   factor (innerWidth / screen.width), set inline at show time, so the toast
   lands back at normal reading size. max-width is divided by the same factor
   so the scaled-up result still fits 90vw. */
.home-toast.desktop-mode-toast {
  transform: translate(-50%, -50%) scale(calc(var(--dm-scale, 2.2) * 0.9));
  max-width: calc(90vw / var(--dm-scale, 2.2));
}

.home-toast.desktop-mode-toast.show {
  transform: translate(-50%, -50%) scale(var(--dm-scale, 2.2));
}

.home-toast-msg {
  flex: 1;
}

.home-toast-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-toast-undo {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 12px;
  padding: 5px 12px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.home-toast-dismiss {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 5px 12px;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.home-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 20px 20px;
  width: 100%;
  transform-origin: left;
}

/* NEW: simple positioning wrapper for the undo toast + progress bar combo */
/* Confirm modal variant + destructive sub-variant
   NOTE: buttons here are intentionally nested (.home-toast.confirm-toast
   .toast-btn-confirm), not standalone classes — kept exactly as real,
   since the nested selector's specificity is load-bearing. */
.home-toast.confirm-toast {
  flex-direction: column;
  padding: 20px;
  max-width: 320px;
  width: 90vw;
  gap: 16px;
}

.home-toast.confirm-toast .home-toast-msg {
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
  text-align: center;
}

.home-toast.confirm-toast .toast-confirm-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
}

.home-toast.confirm-toast .toast-confirm-buttons button {
  flex: 1;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.home-toast.confirm-toast .toast-btn-cancel {
  background: var(--surface3);
  color: var(--text);
  border: 1px solid var(--border) !important;
}

.home-toast.confirm-toast .toast-btn-cancel:active {
  background: var(--surface2);
}

.home-toast.confirm-toast .toast-btn-confirm {
  background: var(--accent);
  color: #000;
}

.home-toast.confirm-toast .toast-btn-confirm:active {
  opacity: 0.8;
}

.home-toast.confirm-toast .toast-btn-confirm:disabled {
  background: var(--surface3);
  color: var(--text-muted);
  cursor: default;
  opacity: 0.6;
}

.home-toast.confirm-toast.danger-toast .toast-btn-confirm {
  background: var(--red);
  color: #fff;
}

.home-toast.confirm-toast .toast-btn-view {
  width: 100%;
  padding: 8px 16px;
  border-radius: 12px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border) !important;
  background: transparent;
  color: var(--accent);
}

.home-toast.confirm-toast .toast-btn-view:active {
  background: var(--surface2);
}

/* AI-unavailable banner
   NEW — currently still an inline style in listing.js / bundle.js.
   Adding the class here now so Phase B has somewhere to point call sites at. */
.amber-banner {
  background: rgba(245, 166, 35, 0.5);
  color: #000;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  grid-column: 1 / -1;
}

/* ---------- 3. LOADING / AI-CALL STATES ---------- */

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 165, 145, 0.1);
  border-left-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Small spinner — this is the one actually used almost everywhere (listing.js,
   bundle.js, most of inventory.js's AI-call buttons). The 40px .spinner above
   is only used once in the real app (pcRunCheck). My earlier invented
   .spinner.sm (18px) never existed in the real app — retired in favour of
   this real class, confirmed 2026-07-06 via /check. Uses currentColor so it
   automatically matches whatever text colour the parent button has. */
.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-left-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* NOTE: several real call sites (editFetchPrice, analyzePriceForActions,
   addItemConfirmScan) override .spinner-small's size inline (12–14px) instead
   of using a shared modifier class. Worth standardizing in Phase B — e.g. a
   .spinner-small.xs modifier — rather than repeating ad-hoc inline overrides
   at each call site. */

/* NEW — general-purpose progress bar, not currently used anywhere real */
/* ---------- 4. BOTTOM SHEET ---------- */

.actions-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: min(650px, 100%);
  transform: translateX(-50%) translateY(100%);
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border2);
  padding-bottom: 34px;
  z-index: 1200;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.actions-sheet.active {
  transform: translateX(-50%) translateY(0);
}

.actions-drag-handle {
  width: 36px;
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 12px auto 0;
}

.actions-sheet-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

/* Item preview shown in the sheet header */
.actions-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.actions-item-name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions-item-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  margin-bottom: 3px;
}

/* Close (X) button — reused on any sheet/modal header */
.actions-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Delete-thumbnail overlay button — standard pattern for any removable photo
   thumbnail (Bulk Add cards, edit-sheet photo gallery, etc.) */
.btn-delete-photo {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 5;
  transition: background 0.2s;
}

.btn-delete-photo:hover,
.btn-delete-photo.armed {
  background: var(--red);
}

/* Mirrors .btn-delete-photo, opposite corner so the two never overlap */
.btn-edit-photo {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.2s;
}

.btn-edit-photo:hover {
  background: var(--accent);
}

/* Photo editor sheet — crop-box overlay + corner drag handles, positioned
   in the same pixel coordinate space as #pe-canvas-inner (see
   _pePositionCropBox in js/photo-editor.js) */
#pe-crop-box {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  touch-action: none;
  cursor: move;
}

.pe-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--text);
  touch-action: none;
}

.pe-handle-tl {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.pe-handle-tr {
  top: 0;
  right: 0;
  left: auto;
  margin-left: 0;
  margin-right: -9px;
  cursor: nesw-resize;
}

.pe-handle-bl {
  bottom: 0;
  left: 0;
  margin-top: 0;
  margin-bottom: -9px;
  cursor: nesw-resize;
}

.pe-handle-br {
  bottom: 0;
  right: 0;
  left: auto;
  margin: -9px;
  cursor: nwse-resize;
}

/* Photo editor's Auto-Enhance/Manual Adjust range sliders — the only
   <input type="range"> in the app, so styled minimally rather than reusing
   an existing component (none exists). accent-color covers the filled
   track/thumb in modern browsers; the thumb rules are a Safari/older-Chrome
   fallback since accent-color support there is inconsistent. */
.pe-slider {
  width: 100%;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
  touch-action: pan-y;
}

.pe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.pe-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.actions-sheet-body {
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mirrors .actions-sheet-body's own gap — these rows used to be its direct
   children before #pc-sheet-fields wrapped them for show/hide toggling. */
#pc-sheet-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.actions-section-label {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 4px;
}

/* Change Status buttons — 2-column grid, one class per status.
   Applied as a SECOND class alongside .actions-status-btn
   (e.g. class="actions-status-btn s-instock"), NOT as a compound
   selector — kept exactly as real. Resting state is a subtle grey
   border; each status's colour only appears on :hover. */
.actions-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.actions-status-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
}

.actions-status-btn:active {
  transform: scale(0.96);
}

.actions-status-btn .s-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.actions-status-btn .s-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.s-instock {
  border-color: rgba(0, 196, 160, 0.2);
}

.s-instock:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.s-instock .s-icon {
  background: rgba(0, 196, 160, 0.12);
  color: var(--accent);
}

.s-instock .s-label {
  color: var(--accent);
}

.s-listed {
  border-color: rgba(91, 156, 246, 0.2);
}

.s-listed:hover {
  border-color: var(--blue);
  background: rgba(91, 156, 246, 0.1);
}

.s-listed .s-icon {
  background: rgba(91, 156, 246, 0.12);
  color: var(--blue);
}

.s-listed .s-label {
  color: var(--blue);
}

.s-sold {
  border-color: rgba(76, 217, 100, 0.2);
}

.s-sold:hover {
  border-color: var(--green);
  background: rgba(76, 217, 100, 0.1);
}

.s-sold .s-icon {
  background: rgba(76, 217, 100, 0.12);
  color: var(--green);
}

.s-sold .s-label {
  color: var(--green);
}

.s-relisted {
  border-color: rgba(91, 156, 246, 0.2);
}

.s-relisted:hover {
  border-color: var(--blue);
  background: rgba(91, 156, 246, 0.1);
}

.s-relisted .s-icon {
  background: rgba(91, 156, 246, 0.12);
  color: var(--blue);
}

.s-relisted .s-label {
  color: var(--blue);
}

.s-needs-shipping {
  border-color: rgba(167, 139, 250, 0.2);
}

.s-needs-shipping:hover {
  border-color: var(--purple);
  background: rgba(167, 139, 250, 0.1);
}

.s-needs-shipping .s-icon {
  background: rgba(167, 139, 250, 0.12);
  color: var(--purple);
}

.s-needs-shipping .s-label {
  color: var(--purple);
}

.s-shipped {
  border-color: rgba(102, 102, 102, 0.2);
}

.s-shipped:hover {
  border-color: var(--text-muted);
  background: rgba(102, 102, 102, 0.08);
}

.s-shipped .s-icon {
  background: rgba(102, 102, 102, 0.1);
  color: var(--text-muted);
}

.s-shipped .s-label {
  color: var(--text-muted);
}

/* Selected state — pins the :hover look so a picked status stays
   visibly active once tapped (used by the Price-tab status picker). */
.actions-status-btn.selected.s-needs-shipping {
  border-color: var(--purple);
  background: rgba(167, 139, 250, 0.1);
}

.actions-status-btn.selected.s-shipped {
  border-color: var(--text-muted);
  background: rgba(102, 102, 102, 0.08);
}

/* Behavioural note (not CSS): when this banner is active, Delete and
   status-change buttons in the same sheet drop to 50% opacity and taps
   show a toast instead of acting — a Phase B JS concern. */

/* Generic small row card — reusable thumbnail + text row, e.g. bulk
   preselect lists. NEW — no shared class existed before this move. */
/* ---------- 5. NAVIGATION & LAYOUT ---------- */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.page-header h1 {
  font-family: var(--font-head);
  font-size: 25px;
  font-weight: 800;
}

.page-header>div:last-child,
.page-header>h1:last-child,
.page-header>h2:last-child {
  margin-left: auto !important;
  text-align: right;
  flex: none !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media (max-width: 600px) {
  .page-header {
    margin-bottom: 16px;
  }

  .page-header h1 {
    font-size: 18px;
  }
}

.inventory-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.search-pill {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 16px;
}

.search-pill input {
  background: transparent;
  border: none !important;
  padding: 10px 8px !important;
  font-size: 14px !important;
}

.search-icon {
  color: var(--text-muted);
}

/* Base rule only — .filter-active-badge and .filter-pill-btn.has-active-filters
   (the notification-dot overlay) stay in place near the filter feature. */
.filter-pill-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
}

.pc-view-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  margin-right: 8px;
}

.pc-view-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-soft);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pc-view-toggle-btn:hover {
  color: var(--text);
  background: var(--surface3);
}

.pc-view-toggle-btn.active {
  color: var(--accent);
  background: rgba(0, 196, 160, 0.1);
}

.pc-view-toggle-btn svg {
  width: 14px;
  height: 14px;
}

.status-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 0 0;
}

.status-tabs .status-tab {
  flex: 1;
  justify-content: center;
  padding: 7px 0;
  font-size: 11.5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.status-tabs .status-tab.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}


/* Status selector pill (e.g. Quick Add) — base rule only;
   .pill-item.editing stays in place near its feature. */
.pill-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 4px;
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  white-space: normal;
  text-align: center;
  flex-grow: 1;
  position: relative;
}

.pill-item:hover {
  border-color: var(--border2);
  color: var(--text);
}

.pill-item.active {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 380px) {
  .pill-item {
    padding: 10px 6px;
    font-size: 12px;
  }
}

.settings-pill-select {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 100px;
  overflow: hidden;
}

.settings-pill-opt {
  padding: 5px 10px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-soft);
  cursor: pointer;
  border: none;
  background: none;
  letter-spacing: 0.3px;
}

.settings-pill-opt.active {
  background: var(--accent);
  color: #000;
  border-radius: 100px;
}

/* NEW — multi-select circle (bulk preselect lists) */
/* NEW — reusable user-guidance banner shell, wording swaps per context */
.guidance-banner {
  background: rgba(0, 196, 160, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.4;
}

/* Shrink-to-content variant, left-aligned — used under .page-header sub-text */
.guidance-banner.gb-right {
  width: fit-content;
  max-width: 100%;
}

/* ---------- 6. STATUS TAGS ---------- */

.lc-status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.lc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lc-dot.lc-is {
  background: var(--accent);
}

.lc-dot.lc-lt {
  background: var(--blue);
}

.lc-dot.lc-np {
  background: var(--purple);
}

.lc-dot.lc-nr {
  background: var(--amber);
}

.lc-dot.lc-sold {
  background: var(--green);
}

.lc-dot.lc-posted {
  background: var(--text-muted);
}

.lc-dot.lc-draft {
  background: var(--text-soft);
}

.lc-status-lbl {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- 7. EMPTY STATES ---------- */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.empty-state-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.empty-state-desc {
  font-size: 13px;
  color: var(--text-soft);
}

/* NEW — icon wrapper; real SVGs per page still need adding to icons.js */
/* ==============================================================
   END UI PATTERNS
   ============================================================== */

/* --- NAV --- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  min-height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-logo {
  font-family: var(--head);
  font-weight: 800;
  font-size: 17px;
  color: var(--brand-mad);
  letter-spacing: 1px;
}

.brand-haul {
  color: var(--brand-haul);
}

.nav-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.nav-stat-value {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.nav-stat-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

.nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
}

.nav-profit .nav-stat-value {
  color: var(--accent);
}

/* --- BOTTOM NAV --- */
#bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 10px 0 18px;
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
  overflow: visible;
}

.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  position: relative;
  overflow: hidden;
}

.bottom-nav-btn::after,
.inventory-card::after,
.actions-btn::after,
.actions-status-btn::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 196, 160, 0.2);
  transform: scale(0);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}

.inventory-card::after,
.actions-btn::after {
  width: 80px;
  height: 80px;
}

.ripple::after {
  transform: scale(1);
  opacity: 1;
  animation: navPulse 0.4s ease forwards;
}

@keyframes navPulse {
  0% {
    transform: scale(0);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.bottom-nav-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.bottom-nav-btn span {
  font-size: 10px;
  font-weight: 500;
  font-family: var(--body);
}

.bottom-nav-btn.active {
  color: var(--accent);
}

/* --- PAGES --- */
.page {
  display: none;
  /* Side padding matches the bottom sheet's inset (edit-sheet-body's 12px)
     so every page's inputs/cards sit as close to the screen edge as the
     edit sheet's — was 24px, read as too much dead margin on mobile. */
  padding: 32px 12px;
  max-width: 650px;
  margin: 0 auto;
}

.page.active {
  display: block;
}

.home-accent-box span {
  font-size: 20px;
  display: block;
}



/* Keeps content clear of every fixed bottom control, not the nav on its own */
body {
  padding-bottom: var(--fixed-controls-clearance);
}

/* --- BOTTOM SHEET --- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* #bottom-sheet/#sheet-overlay share .bottom-sheet/.sheet-overlay with
   #bundle-edit-sheet/#bundle-sheet-overlay (equal z-index) — DOM order alone
   would let the bundle sheet paint on top. Force the single-item sheet above
   it so it opens over the bundle sheet/review page, which stays in place
   underneath. */
#sheet-overlay {
  z-index: 1250;
}

#bottom-sheet {
  z-index: 1300;
}

/* --- INVENTORY CARDS --- */
.inventory-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inventory-card {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.inventory-card:hover {
  border-color: var(--border2);
  background: var(--surface2);
}

.inventory-card.selected {
  background: var(--accent-glow) !important;
  border-color: var(--accent);
}

.card-thumb {
  width: 44px;
  height: 44px;
  background: var(--surface3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* Positions off .inventory-card (position:relative set inline where used) */
.card-thumb-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-thumb img,
.inventory-card.view-grid .card-thumb img {
  image-orientation: from-image;
  display: block;
}

.card-info {
  flex: 1;
  margin-left: 12px;
  min-width: 0;
}

.card-name {
  font-family: var(--head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.card-status {
  margin-top: 7px;
}

.card-price {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.card-profit {
  font-size: 11px;
  font-weight: 600;
}

.profit-pos {
  color: var(--green);
}

.profit-neg {
  color: var(--red);
}

.inventory-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 4px;
}

.inventory-count {
  font-family: var(--head);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 12px;
  font-family: var(--body);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.sort-btn:hover {
  color: var(--accent);
}

.fab-add {
  position: relative;
  bottom: auto;
  right: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  /* Maintained to prevent default button styling */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 196, 160, 0.4);
  translate: 0 -16px;
  flex-shrink: 0;
  cursor: pointer;
  justify-self: center;
  -webkit-tap-highlight-color: transparent;
}

.fab-add:active {
  transform: scale(0.93);
}

/* --- STATUS TABS --- */
.status-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 24px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.status-tabs::-webkit-scrollbar {
  display: none;
}

.status-tab {
  white-space: nowrap;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-family: var(--body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

/* --- SELECTED ITEMS ROW --- */
.selected-items-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 12px;
  margin-top: -4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 64px;
  z-index: 995;
  background: var(--bg);
}

.selected-items-row::-webkit-scrollbar {
  display: none;
}

.selected-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface2);
  flex-shrink: 0;
  position: relative;
  border: 1.5px solid var(--accent);
  cursor: pointer;
  animation: aiStepFadeIn 0.3s ease;
}

.selected-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.status-tab.active {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.status-tab.active .tab-count {
  opacity: 0.6;
}

.tab-count {
  font-size: 11px;
  opacity: 0.4;
}

/* --- BULK MODE STYLES --- */
.bulk-action-bar {
  position: fixed;
  bottom: 84px;
  /* Above bottom nav */
  left: 20px;
  right: 20px;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1001;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bulk-selector-group span {
  font-family: var(--head);
  font-weight: 700;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inventory-table tr.selected {
  background: var(--accent-glow) !important;
  border-left: 3px solid var(--accent);
}

.bulk-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
  z-index: 2;
}

.toolbar-btn svg {
  color: var(--accent);
}

.toolbar-btn span {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.toolbar-btn:hover span {
  color: var(--text-soft);
}

/* --- AI LENS POPUP --- */
.ai-lens-popup {
  position: absolute;
  bottom: 120%;
  /* Sits above the button */
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  width: 140px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  /* Re-enable clicks inside the popup */
}

.inventory-controls input {
  width: 112px;
}

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.btn-icon:hover {
  transform: scale(1.1);
}

.btn-icon.edit {
  color: var(--text-muted);
  font-size: 28px;
  font-weight: bold;
  width: 44px;
  height: 44px;
}

/* --- ITEM CARD --- */
.item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}

.item-card:hover {
  border-color: var(--accent);
}

.tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* --- STATUS COLOR CODING --- */
.tag-in-stock {
  background: rgba(0, 196, 160, 0.15);
  color: var(--accent);
  border-color: rgba(0, 196, 160, 0.3);
  font-weight: 600;
}

.tag-listed {
  background: rgba(91, 156, 246, 0.15);
  color: var(--blue);
  border-color: rgba(91, 156, 246, 0.3);
  font-weight: 600;
}

.tag-sold {
  background: rgba(76, 217, 100, 0.15);
  color: var(--green);
  border-color: rgba(76, 217, 100, 0.3);
  font-weight: 600;
}



.tag-relisted {
  background: rgba(91, 156, 246, 0.15);
  color: var(--blue);
  border-color: rgba(91, 156, 246, 0.3);
  font-weight: 600;
}

.tag-needs-posting {
  background: rgba(167, 139, 250, 0.15);
  color: var(--purple);
  border-color: rgba(167, 139, 250, 0.3);
  font-weight: 600;
}

.tag-posted {
  background: rgba(192, 192, 192, 0.15);
  color: var(--text-muted);
  border-color: rgba(192, 192, 192, 0.3);
  font-weight: 600;
}

.tag-draft {
  background: rgba(168, 168, 168, 0.15);
  color: var(--text-soft);
  border-color: rgba(168, 168, 168, 0.3);
  font-weight: 600;
}

.tag-unknown {
  background: rgba(192, 192, 192, 0.15);
  color: var(--text-muted);
  border-color: rgba(192, 192, 192, 0.3);
  font-weight: 600;
}



/* --- BUTTONS --- */
.btn-danger {
  background: var(--red);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-danger:hover {
  opacity: 0.9;
}

body.light-mode .btn-danger {
  color: #ffffff;
}

/* Specific style for danger text within accent-text pattern */
/* --- MODAL --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 200;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(650px, 95vw);
  /* Default for other modals */
  max-height: 90vh;
  /* Default for other modals */
  overflow-y: auto;
  padding-bottom: env(keyboard-inset-height, 0px);
  z-index: 300;
}

/* Specific styles for the full-page Add Item modal */
.add-item-full-page {
  top: 50% !important;
  left: 50% !important;
  width: calc(100% - 50px) !important;
  max-width: none !important;
  height: calc(100% - 200px) !important;
  max-height: none !important;
  border-radius: 24px !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
  overflow-y: auto !important;
}

/* Modal Section Headers (Darker Row) */
.modal-section-header {
  background: transparent;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Section Boxes to match Listing Generator style — spacing between
   sections comes from the parent .settings-card-inner's flex gap only;
   an extra margin-bottom here used to double up on that gap, pushing each
   heading away from its own fields and making it read as floating in the
   gap above instead of contained with the section below it. Row-to-row gap
   inside a section matches the edit sheet's edit-sheet-body gap (4px). */
.modal-section-container {
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.modal-section-container:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.form-group label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  font-size: 10px;
  /* Smaller font for labels */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  color: var(--text-muted);
}

/* --- PHOTO UPLOAD --- */
.photo-upload-box {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background: var(--surface2);
  transition: border-color 0.2s;
  margin-bottom: 8px;
  grid-column: 1 / -1;
  position: relative;
}

.photo-upload-box:hover {
  border-color: var(--accent);
}

.photo-upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-box .camera-icon {
  color: var(--text-muted);
}

.modal-action-row {
  grid-column: 1 / -1;
  padding: 12px 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.modal-header h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 20px;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface3);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s;
}

.modal-close:hover {
  background: var(--border);
  color: var(--text);
}

.modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- FORMS --- */
input,
select,
textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  /* Increased by 50% from 11px */
  padding: 8px 10px;
  /* Spacing increased by ~20% */
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}

input.error,
select.error,
textarea.error,
.error {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1px rgba(206, 75, 75, 0.15) !important;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select option {
  background: var(--surface2);
  padding: 10px 12px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.3);
  /* 70% transparent dark grey line */
}

select option:last-child {
  border-bottom: none;
}

/* --- SMART DROPDOWN OVERRIDE --- */
select.smart-dropdown-open {
  position: absolute;
  z-index: 1000;
  top: 18px;
  /* Sits exactly below the label */
  left: 0;
  height: auto !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  background: var(--surface2);
  border-color: var(--accent);
}

/* --- LISTING PAGE --- */
.listing-container {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.listing-output {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- UTILS --- */
.hidden {
  display: none !important;
}

/* Native hidden attribute (el.hidden = true/false, used ~46x across
   bundle.js/inventory.js for toggle rows) — without this, any class that
   sets its own display value (e.g. .edit-ai-row's display:flex) silently
   overrides the browser default [hidden]{display:none}, so the row stays
   visibly rendered no matter what JS sets el.hidden to. */
[hidden] {
  display: none !important;
}

/* --- RESPONSIVE TWEAKS --- */
@media (max-width: 600px) {
  .nav {
    padding: 0 12px;
  }

  .nav-logo {
    font-size: 14px;
    letter-spacing: 0.5px;
  }

  /* Ensure stats are visible on mobile by reducing gaps and sizes */
  .nav {
    padding: 0 10px;
    gap: 4px;
  }

  .stat-label {
    font-size: 8px;
  }

  .stat-value {
    font-size: 11px;
  }

  .page {
    padding: 16px 12px;
  }

  .modal {
    width: 95vw;
    max-width: 300px;
    border-radius: 10px;
  }

  .modal-header {
    padding: 12px 12px 0;
  }

  .modal-header h2 {
    font-size: 16px;
  }

  .modal-body {
    padding: 12px;
    gap: 8px;
  }

  .form-group label {
    font-size: 11px;
  }

  input,
  select,
  textarea {
    padding: 6px 10px;
    font-size: 13px;
  }

  .btn-primary,
  .btn-secondary {
    padding: 8px 16px;
    font-size: 13px;
  }

  /* Compact Spreadsheet View */
  .inventory-table th,
  .inventory-table td {
    padding: 6px 8px;
    font-size: 11px;
  }

  .btn-icon.edit {
    font-size: 24px;
  }

  .btn-icon.delete {
    font-size: 12px;
  }

  /* Summary View Logic: Hide columns 4 to 12 on mobile */
  .inventory-table th:nth-child(n+4),
  .inventory-table td:nth-child(n+4) {
    display: none;
  }

  .sheet-content {
    grid-template-columns: 1fr 1fr;
    /* Keep 2 columns on mobile */
  }
}

/* ============================================================
HOME PAGE — NEW LAYOUT
============================================================ */
#page-home.active,
#page-settings.active {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 12px 100px;
  overflow-y: auto;
}

.home-section {
  display: flex;
  flex-direction: column;
}

.home-section .section-label {
  color: var(--text);
}

.home-collapsible {
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  max-height: 2000px;
  opacity: 1;
}

.home-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
}

/* HOME UTILITY ROW (Check / Margin pills + bell) */
.utility-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -2px;
}

.utility-circle-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.utility-circle-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.15s, transform 0.1s;
}

.utility-circle-icon svg {
  stroke: var(--accent);
  flex-shrink: 0;
}

.utility-circle-btn:active .utility-circle-icon {
  transform: scale(0.96);
  border-color: var(--accent);
}

.utility-bell {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 50%;
  cursor: pointer;
  color: var(--amber);
}

/* Home's Drive-backup shortcut — same footprint as .utility-bell but no
   circle chrome (bare icon); .utility-bell no longer carries margin-left:
   auto since this button now pushes the cloud+bell pair to the row's right
   edge together. */
.utility-cloud-btn {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
}

.utility-cloud-btn.on {
  color: var(--accent);
}

.utility-cloud-btn.error {
  color: var(--amber);
}

.utility-cloud-icon-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auto-backup indicator — hidden unless Drive is connected AND auto-backup
   is toggled on (see homeUpdateCloudIcon, app.js). */
.utility-cloud-tick {
  position: absolute;
  top: -5px;
  right: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
}

.utility-cloud-tick.show {
  display: flex;
}

/* Silent auto-backup completion flourish — homeFlashBackupComplete (app.js).
   Manual "Backup Now" already gets its own toast; this is the silent-only
   equivalent, so it stays off the shared #home-toast element entirely. */
.utility-cloud-btn.just-synced .utility-cloud-icon-wrap svg[data-ico="cloud"] {
  animation: cloudSyncPulse 0.5s ease;
}

@keyframes cloudSyncPulse {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1);
  }
}

.utility-cloud-label {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
  pointer-events: none;
  display: none;
  opacity: 0;
}

.utility-cloud-label.show {
  display: block;
  animation: insightFadeIn 0.25s ease forwards;
}

.utility-cloud-label.hide {
  display: block;
  animation: insightFadeOut 0.25s ease forwards;
}

/* Price Check ("pound") + Sourcing Calc ("calculator") circle icons on
   Home only — 1st/2nd buttons in the row. Scoped to .utility-pill-row so
   the shared .utility-circle-icon base (also used by Bulk-mode toggle
   buttons elsewhere) isn't affected. */
.utility-pill-row .utility-circle-btn:nth-child(1) .utility-circle-icon svg,
.utility-pill-row .utility-circle-btn:nth-child(2) .utility-circle-icon svg {
  stroke: #fff;
}

body.light-mode .utility-pill-row .utility-circle-btn:nth-child(1) .utility-circle-icon svg,
body.light-mode .utility-pill-row .utility-circle-btn:nth-child(2) .utility-circle-icon svg {
  stroke: var(--text-muted);
}

/* Bundle shortcut (3rd circle, bundleStack) + the FAB Create sheet's Bundle
   row (same icon) — bundleStack's own polygons hardcode stroke="currentColor"
   on themselves, so a `stroke` override on the wrapping <svg> never reaches
   them; colour must be set via ambient `color` instead. Base keeps both
   teal (matches the old hardcoded inline style this replaces); only the
   Home circle gets a light-mode override — the FAB sheet icon (never named
   in scope) stays teal in both themes. */
[data-ico-full] {
  color: var(--accent);
}

body.light-mode .utility-pill-row [data-ico-full] {
  color: var(--text-muted);
}

/* Bundle page's "+" add button and Drafts-filter icon — colour now set
   here (was inline in index.html) so it can theme. */
#bundle-add-btn,
#bundle-drafts-btn {
  color: #fff;
}

body.light-mode #bundle-add-btn,
body.light-mode #bundle-drafts-btn {
  color: var(--text-muted);
}

.utility-bell:active {
  border-color: var(--accent);
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--head);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ACCOUNT AVATAR — standalone profile icon, fixed bottom-right (index.html,
   near Report-a-Bug). Positioning stays inline on the element itself (matches
   the Report-a-Bug button's own inline-style convention). */
.credits-pill-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid rgba(0, 196, 160, 0.4);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* BELL POPOVER (anchored inside .utility-bell) */
.bell-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1240;
  background: transparent;
  display: none;
}

.bell-pop-backdrop.active {
  display: block;
}

.bell-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 232px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  z-index: 1250;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.bell-pop.active {
  display: block;
}

.bell-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--surface2);
  border-left: 1px solid var(--border2);
  border-top: 1px solid var(--border2);
  transform: rotate(45deg);
}

.bd-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.bd-row:active {
  background: var(--surface3);
}

.bd-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bd-label {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
}

.bd-count {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

/* DRAFT CARD HOLD QUICK MENU — fixed position, top/left set in JS at the
   press point (see lcQuickMenuOpen, inventory.js), unlike .bell-pop which
   anchors via CSS to a single fixed parent. */
.draft-quick-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1240;
  background: transparent;
  display: none;
}

.draft-quick-menu-backdrop.active {
  display: block;
}

#draft-quick-menu {
  position: fixed;
  width: 190px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  z-index: 1250;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  /* Prevents the still-active long-press touch that opened this menu from
     being read as a fresh press on its own label text (native select/copy). */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#draft-quick-menu.active {
  display: block;
}

.dqm-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.dqm-row:active {
  background: var(--surface3);
}

.dqm-row.dqm-danger {
  color: var(--red);
}

.dqm-row.dqm-danger.armed {
  background: var(--red);
  color: #fff;
}

/* Icon + label tint variants — colours match the Action Menu's own
   .actions-btn.accent / .s-listed / .s-sold / .s-needs-shipping / .s-shipped
   (icon svg uses stroke="currentColor", so one color rule tints both). */
.dqm-row.dqm-accent {
  color: var(--accent);
}

.dqm-row.dqm-blue {
  color: var(--blue);
}

.dqm-row.dqm-green {
  color: var(--green);
}

.dqm-row.dqm-purple {
  color: var(--purple);
}

.dqm-row.dqm-muted {
  color: var(--text-muted);
}

.dqm-row.dqm-amber {
  color: var(--amber);
}

/* Icons.bundleStack is a full <svg> wrapper, not an inner path, so it needs
   its own box to match the 15px inline svgs the other rows build. */
.dqm-stack-ico {
  display: flex;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.dqm-stack-ico svg {
  width: 100%;
  height: 100%;
}

/* Account quick-actions popover (avatar tap, bottom-right) — same visual
   treatment as #draft-quick-menu, its own ID since it pops upward from a
   fixed anchor instead of a touch point. Rows reuse .dqm-row as-is. */
#account-quick-menu {
  position: fixed;
  width: 160px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px;
  z-index: 1250;
  display: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#account-quick-menu.active {
  display: block;
}

/* WEEK IN NUMBERS */
.week-strip-v3 {
  background: linear-gradient(135deg, rgba(0, 196, 160, 0.14), rgba(0, 196, 160, 0.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  /* Fixed height (sized for the toggle-on state, which adds a delta line
     under each figure) so toggling the deltas on/off never resizes the
     card — mirrors .insight-strip's fixed-height approach. */
  height: 112px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ws-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  position: relative;
}

.ws-week-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ws-title {
  font-family: var(--head);
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.ws-subtitle {
  font-size: 9px;
  transition: color 0.2s, opacity 0.2s;
}

.ws-subtitle-off {
  color: var(--text-muted);
  opacity: 0.55;
}

.ws-subtitle-on {
  color: var(--text-muted);
  opacity: 1;
}

/* Half-size variant of the shared .settings-toggle pill, scoped to this
   instance only — other .settings-toggle usages (Settings/Activity Log)
   stay full-size. */
#home-week-toggle.settings-toggle {
  width: 20px;
  height: 11px;
}

#home-week-toggle .settings-toggle-thumb {
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
}

#home-week-toggle.settings-toggle.on .settings-toggle-thumb {
  left: 11px;
}

.ws-figs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.ws-fig-col {
  border-right: 1px solid var(--border);
}

.ws-fig-col:last-child {
  border-right: none;
}

.ws-fig-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ws-fig-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.ws-fig-val {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.ws-fig-delta {
  font-size: 10px;
  font-weight: 600;
  transition: opacity 0.2s;
}

/* Toggle-off state: kept in the DOM (not display:none) so it still holds
   its layout space — the value beside/above it never shifts when the
   toggle is flipped, only this fades. */
.ws-fig-delta-hidden {
  opacity: 0;
  pointer-events: none;
}

.ws-fig-delta.up {
  color: var(--green);
}

.ws-fig-delta.down {
  color: var(--red);
}

.ws-fig-delta.flat {
  color: var(--text-muted);
}

/* TOP PERFORMERS */
.performer-strip {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

/* Home's header row + 3-column layout (Brand/Category/Platform) — ID-scoped
   so the .performer-strip base rule (also reused by .settings-card-header)
   stays untouched. Header row reuses .ws-top-row/.ws-title (Week in Numbers'
   pattern); the 3-column row reuses .ws-figs-grid. */
#home-performer-strip {
  display: block;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.07), rgba(167, 139, 250, 0.015));
}

.performer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0 4px;
  border-right: 1px solid var(--border);
}

.performer-col:last-child {
  border-right: none;
}

.performer-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(0, 196, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.performer-icon svg {
  stroke: var(--accent);
}

.performer-label {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.performer-name {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.performer-figs {
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.performer-figs span {
  display: block;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 400;
  color: var(--text-muted);
}

/* RECENT ITEMS GRID */
.home-item-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.home-item-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
}

.home-item-card:active {
  transform: scale(0.97);
}

.home-item-photo {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  overflow: hidden;
}

.home-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-item-name {
  font-family: var(--head);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 8px 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-item-meta {
  font-size: 9px;
  color: var(--text-muted);
  padding: 0 8px 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* INSIGHT BAND — full-bleed strip above Week in Numbers, bleeds past
   .page's 12px side padding via negative margin. Flat surface-colour
   background at low opacity (deliberately untinted, unlike the teal/purple
   cards below it) — only the icon carries a per-tone accent colour. */
.insight-strip {
  height: 56px;
  box-sizing: border-box;
  margin: 0 -12px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.insight-strip.insight-clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.insight-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.insight-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tone-positive .insight-icon {
  background: rgba(0, 196, 160, 0.14);
  color: var(--accent);
}

.tone-improve .insight-icon {
  background: rgba(245, 166, 35, 0.14);
  color: var(--amber);
}

.tone-neutral .insight-icon {
  background: rgba(160, 160, 160, 0.14);
  color: var(--text-soft);
}

.insight-text {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-muted);
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.insight-body.insight-fade-out {
  animation: insightFadeOut 0.25s ease forwards;
}

.insight-body.insight-fade-in {
  animation: insightFadeIn 0.25s ease;
}

@keyframes insightFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes insightFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* NEEDS ATTENTION PAGE — inline URL save (Needs URL tab only) */
.aq-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.aq-url-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
  color: var(--text);
  font-family: var(--body);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}

.aq-url-input:focus {
  border-color: var(--accent);
}

.aq-url-save {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 0 16px;
  height: 34px;
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

/* FAB CREATE SHEET rows (sheet itself is a standard .actions-sheet) */
.fab-create-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: var(--body);
}

.fab-create-row:last-child {
  border-bottom: none;
}

.fab-create-row:active {
  background: var(--surface2);
}

.fab-create-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 196, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fab-create-icon svg {
  stroke: var(--accent);
}

.fab-create-name {
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
}

.fab-create-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* New styles for pill-based selection */
.pill-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  /* Flexible columns by default */
  gap: 8px;
  grid-column: 1 / -1;
  /* Span full width */
  margin-top: 4px;
  /* Space from label */
}

.pill-group.four-per-row {
  grid-template-columns: repeat(4, 1fr);
  /* Strict 4 columns */
}

@media (max-width: 380px) {
  .pill-group.four-per-row {
    grid-template-columns: repeat(3, 1fr);
    /* 3 per row on very small screens */
  }

}

/* TOAST */
/* CONFIRM TOAST VARIANT */
/* ============================================================
ADD ITEM MODAL — REBUILT LAYOUT
============================================================ */
#add-item-page-body.modal-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px 16px !important;
}

.add-photo-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  background: var(--surface2);
  border: 1.5px dashed var(--border2, #333);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s;
}

.add-photo-thumb:active {
  border-color: var(--accent);
}

.add-photo-thumb svg {
  stroke: var(--text-muted);
}

.add-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add-photo-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.add-photo-cta {
  flex: 1;
  background: var(--surface2);
  border: 1.5px dashed var(--border2, #333);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  cursor: pointer;
}

.add-photo-cta-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.4;
}

.add-photo-cta-text span {
  color: var(--accent);
  font-weight: 600;
}

.section-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 2px;
  display: block;
}

.add-section-label {
  font-family: var(--head);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.add-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Required-field marker for .edit-field-row inputs — pinned to the input
   box's top-right corner instead of inline after the label. */
.edit-field-required {
  position: absolute;
  top: 6px;
  right: 10px;
  color: var(--label-warm);
  font-size: 12px;
  line-height: 1;
}

/* Inline "+ Add" shortcut for category fields — pinned top-right like
   .edit-field-required, but a real button. */
.field-addcat-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--head);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
}

.field-addcat-btn:active {
  opacity: 0.7;
}

.add-price-wrap {
  position: relative;
}

.add-price-wrap input {
  padding-left: 26px;
}

.add-price-prefix {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text-soft);
  pointer-events: none;
}

/* Highlight fields filled by AI */
.ai-filled {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.ai-optional {
  border-color: var(--amber) !important;
  opacity: 0.7;
}

.category-edit-btn {
  color: var(--accent);
  cursor: pointer;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  transition: all 0.2s;
}

.category-edit-btn:hover {
  background: var(--accent-glow);
}

@keyframes pillWiggle {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-1deg);
  }

  75% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.pill-item.editing {
  animation: pillWiggle 0.3s infinite;
  border-color: var(--accent-dim);
  cursor: default;
}

/* --- GRID VIEW MODE (3 PER ROW) --- */
.inventory-grid.view-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* --- 5-COLUMN GRID VIEW (BUILD-28) --- */
.inventory-grid.view-grid5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* ============================================================
   ACTIONS SHEET — N1 rebuild
   ============================================================ */

@keyframes actionsSlideUp {
  from {
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

#actions-modal-overlay {
  z-index: 1100;
}

/* #actions-modal shares .actions-sheet's base z-index (1200) with
   #bundle-edit-sheet (.bottom-sheet, also 1200) — DOM order alone would let
   the bundle sheet paint on top since it comes later. Force Actions above it
   so tapping Actions on a member item (opened from inside the Bundle Edit
   Sheet) doesn't render underneath the still-open bundle sheet. Stays below
   #listing-sheet (1220) so the existing tie above is unaffected. */
#actions-modal {
  z-index: 1210;
}

/* #listing-sheet shares .actions-sheet's z-index (1200) with #actions-modal
   and #bundle-actions-sheet, and DOM order alone would let #actions-modal
   paint on top since it comes later — force the listing sheet above them all
   so View/Generate Listing opens over an open Actions sheet, which now stays
   open underneath instead of closing. Also above #bottom-sheet (1300, the
   single-item edit sheet) so tapping its "Last Generated Listing" box opens
   over it rather than underneath. */
#listing-sheet-overlay {
  z-index: 1320;
}

#listing-sheet {
  z-index: 1325;
}

.actions-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Cross-posting strip (renderAcUrlSection + renderBundleAcUrlSection). The
   AC_PLATFORMS icons are full-<svg> wrappers carrying a viewBox but no
   width/height, and their flex:1 button never stretches them (align-items:
   center), so without this they size off the column width — ~36px on a phone,
   ~300px each on a desktop-width sheet. 36px pins the phone rendering as the
   cap; shrink is deliberately left enabled so a narrow device still scales
   them down rather than overflowing the strip. */
.actions-platform-strip button svg {
  width: 36px;
  height: 36px;
}

/* ── EDIT SHEET (N4) ── */

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: min(650px, 100%);
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border2);
  z-index: 1200;
  max-height: 92%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(32px + env(keyboard-inset-height, 0px));
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottom-sheet.active {
  transform: translateX(-50%) translateY(0);
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}

.sheet-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

/* ── CENTERED BOX MODAL (Bulk Mode) ── */
.bottom-sheet.centered-box {
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.9) !important;
  width: min(380px, 92vw) !important;
  border-radius: 19px !important;
  padding: 19px !important;
  max-height: 90vh !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.bottom-sheet.centered-box.active {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1;
  pointer-events: all;
}

.bottom-sheet.centered-box .sheet-handle,
.bottom-sheet.centered-box .sheet-header,
.bottom-sheet.centered-box .modal-footer {
  display: none !important;
}

.bottom-sheet::-webkit-scrollbar {
  width: 3px;
}

.bottom-sheet::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

.edit-drag-handle {
  width: 32px;
  height: 3px;
  background: var(--border2);
  border-radius: 2px;
  margin: 9px auto 0;
}

.edit-sheet-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  gap: 10px;
}

.edit-thumb {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: var(--surface3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s;
}

.edit-thumb:hover {
  border-color: var(--border2);
}

.edit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-thumb-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.edit-thumb:hover .edit-thumb-overlay {
  display: flex;
}

.edit-sheet-header-info {
  flex: 1;
  min-width: 0;
}

.edit-sheet-name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-sheet-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  margin-bottom: 3px;
}

.edit-sheet-header-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.edit-sheet-body {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.edit-section-label {
  font-family: var(--font-head);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 3px 1px;
}

/* field row */
.edit-field-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  transition: border-color 0.15s;
}

.edit-field-row:focus-within {
  border-color: var(--accent);
}

.edit-field-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-field-icon svg {
  stroke: var(--text-muted);
}

.edit-field-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.edit-field-label {
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}

.edit-field-value {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.edit-field-value.empty {
  color: var(--text-muted);
}

.edit-field-value.price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
}

.edit-field-value.sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

.edit-field-input {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
}

.edit-field-select {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.edit-field-select option {
  background: var(--surface2);
}

.edit-field-textarea {
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  width: 100%;
  padding: 3px 0 0;
  line-height: 1.45;
  min-height: 42px;
}

/* AI recommended row */
.edit-ai-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid rgba(0, 196, 160, 0.25);
  background: rgba(0, 196, 160, 0.06);
}

.edit-ai-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-ai-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.edit-ai-label {
  font-size: 9px;
  color: rgba(0, 196, 160, 0.6);
}

.edit-ai-value {
  font-size: 13px;
  color: var(--accent);
}

.edit-ai-value.empty {
  color: rgba(0, 196, 160, 0.35);
}

.edit-ai-btn {
  font-family: var(--font-head);
  font-size: 8px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent-glow);
  color: var(--accent);
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid rgba(0, 196, 160, 0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

/* profit row */
.edit-profit-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid rgba(76, 217, 100, 0.2);
  background: rgba(76, 217, 100, 0.06);
}

.edit-profit-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(76, 217, 100, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.edit-profit-content {
  flex: 1;
}

.edit-profit-label {
  font-size: 9px;
  color: var(--text-muted);
}

.edit-profit-val {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
}

/* notes rows */
.edit-notes-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  padding: 8px 11px;
  display: flex;
  gap: 9px;
}

.edit-notes-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.edit-notes-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.edit-notes-text {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.45;
}

.edit-buyer-notes-row {
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.04);
  padding: 8px 11px;
  display: flex;
  gap: 9px;
}

.edit-buyer-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(245, 166, 35, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.notes-copy-btn {
  background: none;
  border: none;
  padding: 2px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.edit-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.edit-divider {
  height: 1px;
  background: var(--border);
  margin: 3px 0;
}

/* photo popup */
.edit-photo-popup {
  position: absolute;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
  min-width: 155px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92) translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  transform-origin: top left;
}

.edit-photo-popup.open {
  opacity: 1;
  pointer-events: all;
  transform: scale(1) translateY(0);
}

.info-banner {
  background: rgba(0, 196, 160, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--accent);
  line-height: 1.5;
}

.listing-search-wrap {
  position: relative;
  margin-bottom: 8px;
}

.listing-search-wrap .listing-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.listing-search-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 14px 13px 40px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

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

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

.listing-results {
  display: none;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  margin-top: 4px;
  overflow: hidden;
}

.listing-results.open {
  display: block;
}

.listing-result-item {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.listing-result-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 12px;
}

.listing-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-result-item:last-child {
  border-bottom: none;
}

.listing-result-item:active {
  background: var(--surface3);
}

.listing-result-name {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.listing-result-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.listing-result-price {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

.listing-selected-card {
  display: none;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 20px;
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.listing-selected-card.visible {
  display: block;
}

.listing-selected-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.listing-selected-tag {
  font-size: 9px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 3px 8px;
  border-radius: 20px;
}

.listing-selected-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.listing-selected-clear:active {
  color: var(--red);
}

.listing-selected-name {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.listing-selected-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.listing-detail-pill {
  font-size: 11px;
  color: var(--text-soft);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
}

.listing-detail-pill span {
  color: var(--text);
  font-weight: 500;
}

.listing-selected-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listing-selected-price {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.listing-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.listing-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.listing-divider-text {
  font-size: 10px;
  font-family: 'Sora', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.listing-quick-field input,
.listing-quick-field select {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 0;
}

.listing-quick-field input:-webkit-autofill,
.listing-quick-field input:-webkit-autofill:hover,
.listing-quick-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

.listing-quick-field input::placeholder {
  color: var(--text-soft);
}

.listing-quick-field select option {
  background: var(--surface2);
}

.vsa-field {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s;
}

.vsa-field:focus-within {
  border-color: var(--accent);
}

.vsa-field-label {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  line-height: 1;
}

/* Small icon chip inline before a .vsa-field-label's text — mirrors the
   edit sheet's .edit-field-icon chip, scaled down to sit inline with the
   9px label rather than beside a full field row. */
.vsa-field input,
.vsa-field select,
.vsa-field textarea {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  width: 100%;
}

.vsa-field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.vsa-field textarea {
  resize: none;
  min-height: 80px;
  line-height: 1.5;
}

.vsa-field input::placeholder,
.vsa-field textarea::placeholder {
  color: var(--text-soft);
  font-weight: 400;
}

.vsa-field-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.vsa-field-select-wrap select {
  padding-right: 20px;
  -webkit-appearance: none;
  appearance: none;
}

.vsa-field-select-wrap::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.vsa-field-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vsa-field-prefix span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.vsa-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vsa-field input:-webkit-autofill,
.vsa-field input:-webkit-autofill:hover,
.vsa-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset;
  -webkit-text-fill-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

.listing-loading-bar {
  display: none;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 24px;
  margin-top: -20px;
}

.listing-loading-bar.active {
  display: block;
}

.listing-loading-bar-inner {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  animation: listingLoadSlide 1.4s ease-in-out infinite;
}

@keyframes listingLoadSlide {
  0% {
    width: 0%;
    margin-left: 0;
  }

  50% {
    width: 60%;
    margin-left: 20%;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}

/* Two-step progress for the listing page loading state (describe-and-generate).
   Determinate width-driven bar — .listing-loading-bar-inner is an indeterminate
   keyframe animation and can't show a real step position. */
#listing-loading-steps {
  width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#listing-step-progress-wrap {
  width: 100%;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

#listing-step-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

@keyframes listingFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.listing-output-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 10px;
}

.listing-output-block-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listing-output-block-label {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.listing-output-block-body {
  padding: 14px;
}

.listing-output-title-text {
  font-family: 'Sora', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.listing-output-desc-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}

.listing-hashtag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px;
}

.listing-hashtag-pill {
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  color: var(--accent);
  background: var(--accent-glow);
  border: 1px solid rgba(0, 196, 160, 0.2);
  border-radius: 20px;
  padding: 4px 10px;
}

.listing-price-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.listing-price-label {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.listing-price-value {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.listing-price-range {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}

/* Scan Line Animation (moved from inventory.js) */
@keyframes scanLine {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(100%);
  }
}

@keyframes aiStepFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary.saved {
  background: var(--green) !important;
  color: var(--bg) !important;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 0 20px rgba(76, 217, 100, 0.2);
}

.listing-tips-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 100%;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 4px;
}

.listing-tips-toggle:active {
  border-color: var(--border2);
}

.listing-tips-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.listing-tips-body {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  padding: 14px;
  margin-top: -4px;
  margin-bottom: 10px;
}

.listing-tips-body.open {
  display: block;
}

.listing-tip-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.listing-tip-row:last-child {
  margin-bottom: 0;
}

.listing-tip-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 6px;
}

.listing-tip-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
}

.listing-tip-text strong {
  color: var(--text-soft);
  font-weight: 500;
}

/* STATS PAGE */
.stats-page {
  padding: 16px 12px 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-section-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0px;
}

.stats-hero {
  background: linear-gradient(135deg, rgba(0, 196, 160, 0.14), rgba(0, 196, 160, 0.03));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
}

.stats-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 16px 16px 0 0;
}

.stats-hero-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stats-hero-amount {
  font-family: var(--font-body);
  font-size: 44px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin: 4px 0;
}

.stats-hero-sub {
  font-size: 12px;
  color: var(--text-soft);
}

.stats-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.stats-mini-label {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stats-mini-val {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.stats-mini-val.green {
  color: var(--green);
}

.stats-mini-val.red {
  color: var(--red);
}

.stats-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.stats-status-count {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.stats-status-name {
  font-size: 10px;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.2;
}

/* MONTHLY TABLE — no graph, just month + value rows */
.stats-month-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.stats-month-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-month-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.stats-month-peak {
  font-size: 11px;
  color: var(--text-soft);
}

.stats-month-peak span {
  color: var(--accent);
  font-weight: 500;
}

.stats-month-row {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.stats-month-row:last-child {
  border-bottom: none;
}

.stats-month-row.peak-row .stats-month-name {
  color: var(--accent);
}

.stats-month-row.peak-row .stats-month-val {
  color: var(--accent);
}

.stats-month-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  width: 40px;
  flex-shrink: 0;
}

.stats-month-track {
  flex: 1;
  height: 3px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}

.stats-month-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  opacity: 0.35;
}

.stats-month-row.peak-row .stats-month-fill {
  opacity: 1;
}

.stats-month-val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  min-width: 44px;
  text-align: right;
}

.stats-month-items {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 36px;
  text-align: right;
}

.stats-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
}

.stats-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.stats-metric-label {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.stats-metric-val {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}

.stats-metric-sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}

.stats-brand-row {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.stats-brand-row:last-child {
  border-bottom: none;
}

.stats-brand-rank {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  width: 18px;
  flex-shrink: 0;
}

.stats-brand-rank.gold {
  color: var(--amber);
}

.stats-brand-body {
  flex: 1;
}

.stats-brand-name {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.stats-brand-track {
  height: 4px;
  background: var(--surface3);
  border-radius: 100px;
  overflow: hidden;
}

.stats-brand-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 100px;
  opacity: 0.6;
}

.stats-brand-fill.gold {
  background: var(--amber);
  opacity: 1;
}

.stats-brand-profit {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}

.stats-brand-items {
  font-size: 11px;
  color: var(--text-soft);
  text-align: right;
  margin-top: 2px;
}

.stats-cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.stats-cat-row {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.stats-cat-row:last-child {
  border-bottom: none;
}

.stats-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stats-cat-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.stats-cat-count {
  font-size: 11px;
  color: var(--text-soft);
}

.stats-cat-profit {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  min-width: 48px;
  text-align: right;
}

.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}

.stats-period-pill {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 100px;
  overflow: hidden;
}

.stats-period-pill button {
  background: none;
  border: none;
  color: var(--text-soft);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  cursor: pointer;
  letter-spacing: 0.4px;
}

.stats-period-pill button.active {
  background: var(--accent);
  color: #000;
  border-radius: 100px;
}

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

.stats-empty-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.stats-hero.compact {
  padding: 12px 20px;
  gap: 2px;
}

.stats-hero.compact .stats-hero-amount {
  font-size: 32px;
  margin: 2px 0;
}

.stats-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.stats-trio .stats-mini {
  padding: 10px;
}

.stats-trio .stats-mini-val {
  font-size: 18px;
}

.stats-status-strip {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.stats-status-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  border-right: 1px solid var(--border);
}

.stats-status-chip:last-child {
  border-right: none;
}

.stats-status-chip .stats-status-dot {
  width: 6px;
  height: 6px;
}

.stats-status-chip .stats-status-count {
  font-size: 15px;
}

.stats-status-chip .stats-status-name {
  font-size: 8.5px;
}

.stats-metrics-grid.row-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.stats-metrics-grid.row-4 .stats-metric-card {
  padding: 9px 8px;
}

.stats-metrics-grid.row-4 .stats-metric-val {
  font-size: 16px;
}

.stats-metrics-grid.row-4 .stats-metric-sub {
  font-size: 9.5px;
  margin-top: 0;
}

.stats-metrics-grid.row-4 .stats-metric-top {
  margin-bottom: 3px;
}

.stats-tabset {
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
}

.stats-tabset .status-tab {
  flex: 1;
  justify-content: center;
  padding: 7px 0;
  font-size: 11.5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.stats-tabset .status-tab.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Needs Attention page's tabset only — Stats page's Brands/Category/Platform tabs keep the base 11.5px.
   Count moved out of the label into a corner badge (position:relative anchor), so the label can run
   bigger than the old inline-count 9.5px without crowding. */
#attention-tabset {
  gap: 8px;
}

#attention-tabset .status-tab {
  position: relative;
  font-size: 11px;
}

.stats-tab-panel {
  display: none;
}

.stats-tab-panel.active {
  display: block;
}


/* SETTINGS PAGE */
.settings-page {
  padding: 0 12px 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-section-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0px;
}

/* Main flat Settings page only (#page-settings) — tightened grouping so
   sections read as compact clusters rather than spaced-out cards. Does not
   touch the Data & Backup / Help & FAQ / Categories sub-pages, which use
   the base .settings-page/.settings-row/.settings-card-inner rules as-is. */
#page-settings .settings-page {
  gap: 4px;
  /* Just enough to clear the fixed bottom nav — the base 100px left a screen
     of dead space under the last section here. */
  padding-bottom: 80px;
}

#page-settings .settings-section-label {
  font-size: 14px;
  color: var(--accent);
}

#page-settings .settings-card-inner {
  gap: 6px;
  padding-bottom: 4px;
}

/* Help & FAQ page only (#page-settings-help) — category headings teal to
   match #page-settings' own section-label treatment; FAQ answer text bumped
   +1px over the base .settings-row-sub for readability on longer answers. */
#page-settings-help .settings-section-label {
  color: var(--accent);
}

#page-settings-help .settings-row-sub {
  font-size: 12px;
}

#page-settings .settings-row {
  padding: 8px 0;
  border-bottom: none;
}

.settings-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-row-icon {
  width: 32px;
  height: 32px;
  background: var(--surface2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Teal row icons (not the .settings-section-label header icons) hardcode
   stroke="var(--accent)" per-svg in settings.js — override by theme here
   instead of touching every string. Attribute-matched so the bundle-icon
   rows (currentColor-based, see the ambient `color` rule below) are
   unaffected by this specific selector. */
.settings-row-icon svg[stroke="var(--accent)"] {
  stroke: #fff;
}

body.light-mode .settings-row-icon svg[stroke="var(--accent)"] {
  stroke: var(--text-muted);
}

/* Bundle Colours / Bundle Colour Palette row icons (bundleStack) — every
   shape inside hardcodes stroke="currentColor" on itself, so it needs an
   ambient `color` override rather than `stroke` (same mechanism as the
   Home/FAB bundleStack fix above). Harmless no-op for every other row
   icon here, since none of them rely on currentColor for their stroke. */
.settings-row-icon svg {
  color: #fff;
}

body.light-mode .settings-row-icon svg {
  color: var(--text-muted);
}

/* Needs Relisting (amber) + Missing Vinted URL (red) row icons — also
   unified to the same white/surface3 theme pair, overriding their
   semantic colour per explicit request. */
.settings-row-icon svg[stroke="var(--amber)"],
.settings-row-icon svg[stroke="var(--red)"] {
  stroke: #fff;
}

body.light-mode .settings-row-icon svg[stroke="var(--amber)"],
body.light-mode .settings-row-icon svg[stroke="var(--red)"] {
  stroke: var(--text-muted);
}

.settings-row-body {
  flex: 1;
}

.settings-row-label {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.settings-row-sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}

.settings-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.settings-stepper {
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  overflow: hidden;
}

.settings-stepper-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  font-family: var(--font-head);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-stepper-btn:active {
  background: var(--surface3);
}

.settings-stepper-val {
  min-width: 28px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}

.settings-toggle {
  width: 40px;
  height: 22px;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.settings-toggle.on {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}

body.light-mode .settings-toggle-thumb {
  background: var(--surface3);
}

.settings-toggle.on .settings-toggle-thumb {
  left: 20px;
}

.settings-relist-note-text strong {
  font-family: var(--font-head);
  font-weight: 700;
}

.settings-categories-card {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.settings-categories-header {
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-categories-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.settings-add-cat-btn {
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px 12px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-cat-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 10px;
  border-bottom: 1px solid var(--border);
}

.settings-cat-item:last-child {
  border-bottom: none;
}

.settings-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.settings-cat-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

.settings-cat-delete {
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--border2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-muted);
}

.settings-cat-delete.armed {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.settings-add-cat-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
}

.settings-add-cat-input {
  flex: 1;
  background: var(--surface3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  outline: none;
}

.settings-add-cat-input::placeholder {
  color: var(--text-muted);
}

.settings-add-cat-input:focus {
  border-color: var(--accent);
}

.settings-add-cat-save {
  background: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
}

.settings-danger-label {
  color: var(--red);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  display: block;
}

.settings-cat-drag-handle {
  cursor: grab;
  padding-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-cat-drag-handle:active {
  cursor: grabbing;
}

.settings-cat-item.dragging {
  opacity: 0.4;
  background: var(--surface2);
}

.settings-cat-item.drag-over {
  background: var(--surface3) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* --- THEME SUPPORT --- */
body.light-mode {
  --bg: #f2f3f5;
  --surface: #ffffff;
  --surface2: #fcfcfc;
  --surface3: #f5f5f5;
  --border: #e0e0e0;
  --border2: #d1d1d1;
  --text: #1a1a1a;
  --text-muted: #737373;
  --text-soft: #444;
  --accent: #00bfa5;
  --accent-dim: #009688;
  --accent-glow: rgba(0, 191, 165, 0.1);
  --label-warm: #000000;
  --brand-mad: #1A1815;
}

/* Bundle pages keep a hardcoded dark bg (#09090e) app-wide — theme it in
   light mode instead of staying black/blue. */
body.light-mode.bundle-active,
body.light-mode .bundle-page-bg {
  background: var(--bg) !important;
}

/* Component refinements for Light Mode contrast */
body.light-mode .btn-primary {
  color: #000;
}

/* ══════════════════════════════
   BUNDLE PAGE (N-Bundle)
══════════════════════════════ */

/* ── Bundle picker (Bundle Existing) ── */
.bundle-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.bundle-picker-item.selected {
  border-color: var(--accent);
  background: rgba(0, 196, 160, 0.06);
}

.bundle-picker-thumb {
  width: 36px;
  height: 36px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bundle-picker-info {
  flex: 1;
  min-width: 0;
}

.bundle-picker-name {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bundle-picker-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.bundle-picker-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 0.05px solid rgba(0, 196, 160, 0.5);
  background: rgba(0, 196, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}

.bundle-picker-item.selected .bundle-picker-check {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Selection bar ── */
.bundle-selection-bar {
  position: fixed;
  bottom: 84px;
  left: 12px;
  right: 12px;
  background: var(--surface2);
  border: 1px solid var(--accent);
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transform: translateY(200%);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.bundle-selection-bar.visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.bundle-sel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.bundle-sel-thumbs {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.bundle-sel-thumbs::-webkit-scrollbar {
  display: none;
}

.bundle-sel-thumb-sm {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bundle-sel-count {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.bundle-sel-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bundle-sel-price-block {
  flex: 1;
}

.bundle-sel-price-label {
  font-size: 9px;
  color: var(--text-muted);
}

.bundle-sel-price-val {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.bundle-sel-saving {
  font-size: 10px;
  color: var(--green);
}

.bundle-sel-review-btn {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 20px;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Review screen ── */
.bundle-review-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.bundle-review-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bundle-review-name {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.bundle-review-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.bundle-review-item:last-child {
  border-bottom: none;
}

.bundle-review-item-thumb {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bundle-review-item-info {
  flex: 1;
  min-width: 0;
}

.bundle-review-item-name {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.bundle-review-item-meta {
  font-size: 10px;
  color: var(--text-muted);
}

.bundle-review-item-price {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  flex-shrink: 0;
}

.bundle-price-input {
  flex: 1;
  min-width: 0;
  /* prevents overflow */
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.bundle-ai-badge {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(0, 196, 160, 0.25);
  white-space: nowrap;
  flex-shrink: 0;
  /* always visible, never squeezed */
  cursor: pointer;
  letter-spacing: 0.3px;
}

.bundle-profit-val {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
}

/* ── Bundle new item rows ── */
.bundle-new-item-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
}

.bundle-new-item-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bundle-new-item-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
}

.bundle-new-item-input::placeholder {
  color: var(--text-muted);
}

.bundle-new-item-price {
  width: 48px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  text-align: right;
  flex-shrink: 0;
}

.bundle-add-item-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px dashed var(--border2);
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  width: 100%;
  font-family: var(--font-body);
  font-size: 12px;
  transition: border-color 0.15s, color 0.15s;
}

.bundle-add-item-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.back-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
}

/* Photo Lightbox */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.photo-lightbox.hidden {
  opacity: 0;
  pointer-events: none;
}

.photo-lightbox img {
  max-width: 94vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r);
  display: block;
}

/* Wraps the img + .lightbox-actions in a column so the action row sits
   right below the photo's actual rendered edge — previously the actions
   were absolutely positioned at a fixed viewport offset, leaving a large
   gap under shorter (non-portrait-filling) photos. */
.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-height: 94vh;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--text);
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-actions {
  display: flex;
  gap: 14px;
}

.lightbox-action-btn {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-grid .card-edit-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 11;
}

/* --- ITEM HISTORY LOG (Edit Sheet) --- */
.edit-history-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.edit-history-item:last-child {
  border-bottom: none;
}

.edit-history-date {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 90px;
  flex-shrink: 0;
}

.edit-history-change {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}

.edit-history-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* History Indicator (Inventory Cards) */
/* --- BOTTOM SHEET TOOLBAR --- */
.edit-toolbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 10px;
  padding: 0 2px;
}

#es-top-actions .edit-toolbar,
#bes-top-actions .edit-toolbar {
  grid-template-columns: repeat(5, 1fr);
}

.edit-toolbar-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 0.2s ease;
  gap: 7px;
}

.edit-toolbar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.edit-toolbar-item:active,
.edit-toolbar-item.active,
.edit-toolbar-item.save-mode {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.edit-toolbar-item.placeholder {
  opacity: 0.25;
  cursor: default;
}

/* AI Lens Manual Entry Indicators */
#ai-size,
#ai-measurements,
#ai-price-paid {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px dashed var(--border2) !important;
}

/* ── BULK ADD PAGE ─────────────────────────────────────── */

/* Sticky strips container sits directly below top bar */
#bulk-add-strips {
  position: fixed;
  top: 64px;
  /* Height of the main nav bar */
  left: 0;
  right: 0;
  width: 100%;
  z-index: 990;
  /* Sit above page content but below modals/nav */
  background: var(--bg);
}

/* Selection bar */
#bulk-add-sel-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: rgba(0, 196, 160, 0.1);
  border-bottom: 1px solid rgba(0, 196, 160, 0.2);
}

#bulk-add-sel-bar.visible {
  display: flex;
}

#bulk-add-sel-bar-text {
  flex: 1;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

/* Scan confirm strip */
#bulk-add-scan-confirm {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border2);
}

#bulk-add-scan-confirm.visible {
  display: flex;
}

.basc-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 196, 160, 0.25);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.basc-text {
  flex: 1;
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.3;
}

.basc-text strong {
  display: block;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

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

/* Scan progress bar */
#bulk-add-progress-wrap {
  height: 2px;
  background: transparent;
  overflow: hidden;
}

#bulk-add-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.5s ease;
}

.page-header-top h1 {
  margin-bottom: 0;
  font-size: 28px;
}

.bulk-add-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Cards list — no side padding here; #page-bulk-add's own base .page
   padding (12px) already supplies the inset, matching Bundle Create New's
   #bundle-create-new-cards which has none of its own either. An extra
   0 12px here used to stack on top of the page's 12px, doubling the inset
   to 24px and reading as visually inconsistent next to Bundle New. */
#bulk-add-cards {
  padding: 0;
}

/* Individual item card */
.ba-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ba-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-glow);
}

.ba-card.scanning {
  border-color: var(--accent);
  animation: baScanPulse 1.1s ease-in-out infinite;
}

@keyframes baScanPulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px var(--accent-glow);
  }

  50% {
    box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.07);
  }
}

/* "Enter Manually"/"Show Details" accordion inside a Bulk Add card
   (baaCardHTML, inventory.js) or a Bundle Create New card (bnCardHTML,
   bundle.js) — NOT Settings-page markup despite the class names; these were
   originally Settings' nested-panel classes, reused here, and must stay
   even though the old Settings accordion sections that first introduced
   them are gone. */
.settings-nested-panel {
  border: none;
  border-radius: 0;
  background: none;
  margin-top: 8px;
  overflow: visible;
}

.settings-nested-header {
  padding: 10px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.settings-nested-header:hover {
  color: var(--text);
}

.settings-nested-content {
  padding: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  overflow: hidden;
}

.settings-nested-content.collapsed {
  max-height: 0;
  opacity: 0;
}

.settings-nested-content.open {
  padding: 12px 0 0;
  max-height: 1000px;
}

/* Card header row */
.ba-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Checkbox circle */
.ba-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  cursor: pointer;
}

.ba-check.on {
  border-color: var(--accent);
  background: var(--accent);
}

.ba-check svg {
  display: none;
}

.ba-check.on svg {
  display: block;
}

/* Thumbnail */
.ba-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface3);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-orientation: from-image;
}

/* Card meta text */
.ba-meta {
  flex: 1;
  min-width: 0;
}

.ba-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ba-name.dim {
  color: var(--text-muted);
}

.ba-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badges */
.ba-badges {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ba-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 9px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ba-badge-ai {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(0, 196, 160, 0.25);
}

.ba-badge-photo {
  background: rgba(91, 156, 246, 0.1);
  color: var(--blue);
  border: 1px solid rgba(91, 156, 246, 0.2);
}

/* Delete button */
.ba-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

/* Nudged away from the chevron/edge so it's not caught by an
   expand/collapse tap on the card header. */
.ba-del-trash {
  margin-right: 6px;
}

.ba-del:hover {
  color: var(--red);
  background: rgba(206, 75, 75, 0.1);
}

.ba-del.armed {
  color: #fff;
  background: var(--red);
}

/* Chevron */
.ba-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.ba-chevron.open {
  transform: rotate(-180deg);
}

/* Card body */
.ba-card-body {
  display: none;
  padding: 0 16px 16px;
}

.ba-card-body.open {
  display: block;
}

/* Scanning state inside card body */
.ba-scan-state {
  text-align: center;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ba-spin {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: baSpin 0.75s linear infinite;
}

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

.ba-scan-lbl {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.ba-scan-sublbl {
  font-size: 11px;
  color: var(--text-muted);
}

/* Scan preference toggle */
.ba-scan-choice button {
  flex: 1;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.ba-scan-choice button.active {
  background: var(--surface3);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Analyse with AI button */
.ba-analyse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 196, 160, 0.28);
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}

.ba-analyse-btn:hover {
  background: rgba(0, 196, 160, 0.22);
}

/* Fields grid — vertical stack of edit-field-row / edit-two-col groups
   (Bulk Add + Bundle Create New cards, mirrored 1:1 across inventory.js's
   baaCardHTML and bundle.js's bnCardHTML) */
.ba-fields-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

/* Save to Inventory button */
.ba-save-btn {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ba-save-btn:hover {
  background: var(--accent-dim);
}

body.light-mode .ba-save-btn {
  color: #000;
}

/* Pagination */
.ba-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 0 4px;
}

.ba-page-nav {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 6px 14px;
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}

.ba-page-nav:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ba-page-nav:disabled {
  opacity: 0.25;
  cursor: default;
}

.ba-page-label {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Fixed action bar above bottom nav */
#bulk-add-action-bar {
  position: fixed;
  bottom: 64px;
  /* Default baseline shift fallback */
  left: 0;
  right: 0;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 999;
  /* Sit just below bottom-nav (1000) */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

#bulk-add-action-bar.visible {
  display: flex;
}

/* Empty state */
.ba-empty h3 {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-soft);
  margin: 12px 0 6px;
}

.ba-empty p {
  font-size: 12px;
}

/* ══════════════════════════════════════════
   BUILD-27: FILTER MODAL & SORT MODAL
   Centered premium glassmorphism modals
   ══════════════════════════════════════════ */

/* Shared overlay backdrop */
.adv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.adv-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* Shared modal panel */
.adv-modal-panel {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 24px;
  width: min(480px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: scale(0.92) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  opacity: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.adv-modal-overlay.open .adv-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.adv-modal-panel::-webkit-scrollbar {
  width: 3px;
}

.adv-modal-panel::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

/* Modal header */
.adv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 2;
  border-radius: 24px 24px 0 0;
}

.adv-modal-title {
  font-family: var(--head);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}

.adv-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  flex-shrink: 0;
}

.adv-modal-close:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border2);
}

/* Modal body */
.adv-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* Section label inside modal */
/* Multi-select pill grid */
.adv-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adv-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--body);
  background: var(--surface3);
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  white-space: nowrap;
}

.adv-filter-pill:hover {
  border-color: var(--border2);
  color: var(--text-soft);
}

.adv-filter-pill.active {
  background: rgba(0, 196, 160, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 196, 160, 0.08);
}

.adv-filter-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Colour pill swatch */
.adv-filter-pill .colour-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Date range presets */
.adv-date-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.adv-date-preset {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface3);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--body);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s ease;
}

.adv-date-preset:hover {
  border-color: var(--border2);
  color: var(--text-soft);
}

.adv-date-preset.active {
  background: rgba(0, 196, 160, 0.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* Custom date range inputs */
.adv-date-custom {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.adv-date-custom input[type="date"] {
  flex: 1;
  background: var(--surface3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 12px;
  font-family: var(--body);
  color-scheme: dark;
  transition: border-color 0.2s;
}

.adv-date-custom input[type="date"]:focus {
  border-color: var(--accent);
  outline: none;
}

.adv-date-custom-sep {
  color: var(--text-muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── SORT MODAL specific ── */
.sort-modal-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface3);
  cursor: pointer;
  transition: all 0.18s ease;
  gap: 12px;
}

.sort-modal-option:hover {
  border-color: var(--border2);
  background: var(--surface);
}

.sort-modal-option.active {
  border-color: var(--accent);
  background: rgba(0, 196, 160, 0.1);
}

.sort-modal-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sort-modal-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--body);
}

.sort-modal-option.active .sort-modal-option-label {
  color: var(--accent);
}

.sort-modal-option-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.sort-modal-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}

.sort-modal-option.active .sort-modal-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.sort-modal-radio::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  opacity: 0;
  transition: opacity 0.15s;
}

.sort-modal-option.active .sort-modal-radio::after {
  opacity: 1;
}

/* ── VSA DROPDOWN — custom trigger + anchored panel over a hidden native
   <select>, replacing the OS's native picker UI. The select stays in the DOM
   untouched (value, onchange, option-population code all unchanged); only
   its rendering is taken over. See js/app.js's vsaInitDropdowns family. ── */
.vsa-dropdown {
  position: relative;
  display: flex;
  width: 100%;
}

.vsa-dropdown select {
  display: none;
}

.vsa-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
}

.vsa-dropdown-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vsa-dropdown-value.empty {
  color: var(--text-muted);
}

.vsa-dropdown-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.vsa-dropdown-trigger.open .vsa-dropdown-chevron {
  transform: rotate(180deg);
}

#vsa-dropdown-panel {
  position: fixed;
  z-index: 10050;
  background: var(--surface3);
  border: 1.5px solid var(--border2);
  border-radius: 14px;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  gap: 2px;
}

#vsa-dropdown-panel.active {
  display: flex;
}

.vsa-dropdown-option {
  flex-shrink: 0;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vsa-dropdown-option:hover {
  background: var(--surface);
}

.vsa-dropdown-option.active {
  color: var(--accent);
  background: rgba(0, 196, 160, 0.1);
  font-weight: 600;
}

/* ── Active filter badge on funnel button ── */
.filter-active-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: 1.5px solid var(--bg);
  animation: badgePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

/* Active funnel button highlight */
.filter-pill-btn.has-active-filters {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 196, 160, 0.1);
}

/* Source filter section */
.adv-source-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adv-source-filter-wrap .vsa-dropdown-trigger {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface3);
  color: var(--text);
  font-size: 13px;
  font-family: var(--body);
  color-scheme: dark;
  transition: border-color 0.2s;
}


/* --- SETTINGS REDESIGN --- */
.settings-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.settings-card {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 2px;
  overflow: visible;
  scroll-margin-top: 125px;
  /* Offset for sticky navbar + global nav */
}

.settings-card-header {
  padding: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  transition: background 0.2s;
}

.settings-card-header.performer-strip {
  justify-content: space-between;
  margin-bottom: 0;
}

.settings-card-header:hover {
  background: var(--surface2);
}

.settings-card-title {
  font-family: var(--head);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.settings-card-chevron {
  transition: transform 0.3s ease;
  color: var(--text-muted);
}

.settings-card-chevron.collapsed {
  transform: rotate(-90deg);
}

.settings-card-content {
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 2px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, padding 0.3s ease;
  overflow: hidden;
  opacity: 1;
  max-height: 2000px;
}

.settings-card-content.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  margin-top: 0;
}

.settings-card-inner {
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Settings-card reused on Listing/Sourcing Calc/Add Item — header and
   content are fused into one seamless bordered box (header keeps the
   shared surface background + border, content drops its own top border/
   radius) instead of the header sitting as plain text above a separate
   box, which read as the title/section labels floating outside it. */
#page-listing .settings-card-header,
#page-sourcing-calculator .settings-card-header,
#page-price-check .settings-card-header,
#page-add-item .settings-card-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: 8px;
}

#page-listing .settings-card-content,
#page-sourcing-calculator .settings-card-content,
#page-price-check .settings-card-content,
#page-add-item .settings-card-content {
  padding-top: 4px;
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Add Item and Listing zero out .page's own 12px side margin here because
   their content wrapper supplies its own 24px horizontal inset instead
   (Add Item: #add-item-page-body's base .modal-body padding, 20px 24px;
   Listing: the inline padding on its outer content div) — stacking both
   would double the inset to 36px. Net result is a single, consistent 24px
   gap from the screen edge on both pages, matching. (Sourcing Calc will
   get the same treatment once confirmed.) */
#page-add-item,
#page-listing {
  padding-left: 0;
  padding-right: 0;
}

/* .page-header is a direct child, not wrapped by either page's own 24px-
   inset content wrapper — zeroing .page's 12px above left it flush to the
   screen edge, unlike every other page's header. Restore that 12px here. */
#page-add-item .page-header,
#page-listing .page-header {
  padding: 0 12px;
}

/* Field labels app-wide — Combo D ("Warm Gold") chosen from the colour
   review, 1px larger for legibility. Unified 20/07 across every surface
   that uses .edit-field-label (Add Item/Listing/Sourcing Calc/Bulk Add/
   Bundle Create New PLUS the 3 sheets previously left on the base style:
   single-item edit sheet, Bundle edit sheet, Price Check sheet).
   .vsa-field-label (Add Item's Status pill group) stays white — only the
   text/select field labels use the warm colour. */
#page-add-item .vsa-field-label {
  color: var(--text);
  font-size: 10px;
}

#page-add-item .edit-field-label,
#page-listing .edit-field-label,
#page-sourcing-calculator .edit-field-label,
#page-bulk-add .edit-field-label,
#bundle-create-new .edit-field-label,
#bottom-sheet .edit-field-label,
#bundle-edit-sheet .edit-field-label,
#pc-sheet .edit-field-label,
#bundle-review .edit-field-label {
  color: var(--label-warm);
  font-size: 14px;
}

/* Dense toggle grid classes for filter sheet */
.tgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.tgrid.tgrid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.tcell {
  height: 30px;
  border-radius: 7px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4px;
  line-height: 1.1;
}

.tcell.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #04120e;
  font-weight: 700;
}

.tcell.status-sel {
  background: var(--amber);
  border-color: var(--amber);
  color: #1a1200;
  font-weight: 700;
}

/* Filter Sheet Overrides for transparent settings-card */
.actions-sheet .settings-card {
  background: transparent !important;
  border: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.actions-sheet .settings-card-header {
  padding: 8px 0 !important;
  background: transparent !important;
}

.actions-sheet .settings-card-header:hover {
  background: transparent !important;
}

.actions-sheet .settings-card-content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  /* Base rule's 2000px ceiling made the collapse transition interpolate
     mostly empty range before the (much shorter) real content visibly
     moved, reading as laggy — tightened to a ceiling closer to real group
     heights. */
  max-height: 800px !important;
}

.actions-sheet .settings-card-content.collapsed {
  max-height: 0 !important;
}

.actions-sheet .settings-card-inner {
  padding-bottom: 12px !important;
  gap: 8px !important;
}


/* Danger Zone Wrapper */
.settings-danger-zone {
  background: rgba(206, 75, 75, 0.05);
  border: 1px solid rgba(206, 75, 75, 0.2);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
}

.inv-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 196, 160, 0.1);
  border: 1px solid rgba(0, 196, 160, 0.3);
  color: var(--accent);
  border-radius: 20px;
  padding: 2px 7px 2px 5px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.inv-badge svg {
  width: 10px;
  height: 10px;
  stroke: var(--accent);
}

/* --- PAYMENTS PAGE: pack cards, free-tier hero --- */

.packs-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pack-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
}

.pack-eyebrow {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-haul);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pack-buys {
  font-family: var(--font-head);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 12px;
}

.pack-row-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
}

.pack-left {
  display: flex;
  flex-direction: column;
}

.pack-price-lg {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
}

.pack-credits-sm {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 3px;
  white-space: nowrap;
}

.pack-detail-list {
  list-style: none;
  margin: 0;
  padding-left: 15px;
  border-left: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.5;
}

.pack-detail-list li { margin-bottom: 4px; }
.pack-detail-list li:last-child { margin-bottom: 0; }

/* Brighter than .pack-detail-list beside it, dimmer than .pack-buys's white. */
.pack-blurb {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
}

.pack-buy-btn {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  border-radius: var(--r);
  background: var(--accent-glow);
  border: 1px solid rgba(0, 196, 160, 0.35);
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.pack-buy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.free-hero-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.free-hero-price {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.free-hero-buys {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Purchase return sheet (maybeShowPurchaseReturn, app.js). Top of the z-index ladder. */
#purchase-return-overlay {
  z-index: 1490;
}

#purchase-return-sheet {
  z-index: 1500;
}

.pr-body {
  padding: 28px 20px 8px;
}

.pr-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.pr-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.pr-sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
}

.pr-pill {
  margin-top: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
}

.pr-tick,
.pr-clock {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-tick {
  background: var(--accent-glow);
  animation: prPulse 0.9s ease-out 0.45s 1;
}

.pr-tick svg {
  width: 32px;
  height: 32px;
  stroke: var(--accent);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: prDraw 0.45s ease-out 0.1s forwards;
}

.pr-clock {
  background: rgba(245, 166, 35, 0.12);
}

.pr-clock svg {
  width: 30px;
  height: 30px;
  stroke: var(--amber);
}

.pr-plus {
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  animation: prScaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.pr-balance-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: var(--r);
  background: var(--surface2);
  font-family: var(--font-body);
}

.pr-balance-label {
  font-size: 12px;
  color: var(--text-soft);
}

.pr-balance-old {
  font-size: 13px;
  color: var(--text-soft);
  text-decoration: line-through;
}

.pr-balance-new {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.pr-gets-wrap {
  width: 100%;
  margin-top: 8px;
}

.pr-gets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.pr-gets-cell {
  padding: 10px 6px;
  border-radius: var(--r);
  background: var(--surface2);
  border: 1px solid var(--border);
}

.pr-gets-num {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.pr-gets-label {
  font-size: 11px;
  color: var(--text-soft);
}

.pr-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.pr-foot {
  font-size: 11px;
  color: var(--text-soft);
}

@keyframes prDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes prPulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent-glow);
  }

  100% {
    box-shadow: 0 0 0 18px transparent;
  }
}

@keyframes prScaleIn {
  from {
    transform: scale(0.6);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pr-tick,
  .pr-tick svg,
  .pr-plus,
  #purchase-return-sheet .spinner {
    animation: none;
  }

  .pr-tick svg {
    stroke-dashoffset: 0;
  }

  #purchase-return-sheet {
    transition: none;
  }
}

.pc-mode-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.3);
  color: var(--amber);
  border-radius: 20px;
  padding: 2px 7px 2px 5px;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-mode-badge svg {
  width: 10px;
  height: 10px;
  stroke: var(--amber);
}

/* Which marketplace an AI result was priced/written for (vsaMarketplaceBadgeHTML,
   app.js). Mark only, no label — the colour is per-platform so it comes in as an
   inline --mp-colour rather than being baked in here. */
.marketplace-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mp-tint, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--mp-colour, var(--border2));
  color: var(--mp-colour, var(--text-muted));
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
}

/* The 6 platform icons are full-<svg> wrappers carrying their own viewBox, with
   no intrinsic size — same constraint as .actions-platform-strip button svg.
   14px because the mark is now the sole identifier: four of the six are a
   letter glyph inside a circle, which turns to mush below that. */
.marketplace-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Credit-cost notice inside an AI-trigger confirm toast (vsaCreditBadgeHTML,
   app.js). Its own line directly above the button row. Alignment is inherited,
   so it centres in the toast's centred column but stays left-aligned in the
   picker rows that embed it. */
/* One-off marketplace override inside an AI-trigger confirm. Sibling of
   .credit-notice-line — same 'extra line above the toast buttons' role, but
   holds a control, so it can't reuse that rule's amber nowrap text styling. */
.marketplace-notice-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
}

.marketplace-notice-line .vsa-dropdown {
  width: auto;
  max-width: 60%;
}

.marketplace-notice-line .vsa-dropdown-trigger {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: 11px;
}

.credit-notice-line {
  display: block;
  margin-top: 10px;
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
  text-align: inherit;
  white-space: nowrap;
}

.credit-notice-line svg {
  width: 10px;
  height: 10px;
  stroke: var(--amber);
  vertical-align: -1px;
  margin-right: 4px;
}

.pc-mode-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface2);
  padding: 10px 12px;
  cursor: pointer;
}

.pc-mode-row.selected {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.pc-mode-row-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pc-mode-row-icon.accent {
  background: rgba(0, 196, 160, 0.1);
  color: var(--accent);
}

.pc-mode-row-icon.amber {
  background: rgba(245, 166, 35, 0.1);
  color: var(--amber);
}

.pc-mode-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.pc-mode-row-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

.btn-primary.disabled-save {
  background: var(--surface3);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: default;
  pointer-events: none;
}

.history-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Inline confirm bar — shared component */
.confirm-bar {
  background: var(--surface2);
  border: 1px solid var(--red);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.confirm-bar.is-action {
  border-color: var(--accent);
}

.confirm-bar p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.confirm-actions button {
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.confirm-cancel {
  background: var(--surface3);
  color: var(--text-soft);
}

.confirm-confirm {
  background: var(--red);
  color: #fff;
}

.confirm-bar.is-action .confirm-confirm {
  background: var(--accent);
  color: #06140f;
}

/* Scan mode toggle buttons */
.scan-btn {
  flex: 1 !important;
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 12px 10px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--text-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}

.scan-btn.active {
  background: rgba(0, 196, 160, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

.scan-btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.verdict-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r);
  font-family: var(--font-head);
}

.verdict-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.verdict-icon svg {
  width: 20px;
  height: 20px;
}

.verdict-label {
  font-weight: 800;
  font-size: 16px;
}

.verdict-margin {
  margin-left: auto;
  font-weight: 700;
  font-size: 13px;
  opacity: 0.8;
  flex-shrink: 0;
}

.history-tier {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
}

.tier-bad {
  color: var(--red);
}

.tier-fair {
  color: var(--amber);
}

.tier-good {
  color: var(--green);
}

.tier-excellent {
  color: var(--accent);
}

.tier-buynow {
  color: var(--lime);
}

.tier-failed {
  color: var(--red);
}

.verdict-badge.tier-bad {
  background: rgba(206, 75, 75, .18);
  border: 1px solid var(--red);
}

.verdict-badge.tier-fair {
  background: rgba(245, 166, 35, .18);
  border: 1px solid var(--amber);
}

.verdict-badge.tier-good {
  background: rgba(76, 217, 100, .18);
  border: 1px solid var(--green);
}

.verdict-badge.tier-excellent {
  background: rgba(0, 196, 160, .18);
  border: 1px solid var(--accent);
}

.verdict-badge.tier-buynow {
  background: rgba(200, 241, 53, .18);
  border: 1px solid var(--lime);
}

.verdict-badge.tier-failed {
  background: rgba(206, 75, 75, .18);
  border: 1px solid var(--red);
}

.view-list .history-tier {
  white-space: nowrap;
  flex-shrink: 0;
}

.pc-retry-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Price Check Photo Preview Container */
.pc-photo-preview {
  position: relative;
  border-radius: var(--r);
  border: 1.5px dashed var(--border);
  background: var(--surface2);
  overflow: hidden;
  margin-bottom: 12px;
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pc-photo-preview:hover {
  border-color: var(--accent);
  background: rgba(0, 196, 160, 0.03);
}

.pc-photo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r);
}

.pc-photo-placeholder svg {
  stroke: var(--text-muted);
}

/* Clear Photo Button */
.pc-photo-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10 !important;
  transition: background 0.15s ease, transform 0.15s ease;
}

.pc-photo-clear:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.pc-photo-clear svg {
  stroke: currentColor;
}

/* Add-to-inventory bottom sheet safe area padding */
/* Price Check main clear button style */
#pc-clear-btn {
  width: 100%;
  margin-top: 8px;
}

/* Base card rules */
.history-card {
  position: relative;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
}

.history-card:hover {
  border-color: var(--accent);
}

.history-thumb {
  background: var(--surface3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-thumb svg {
  stroke: var(--text-muted);
}

/* List view layouts */
#pc-history-list.view-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-list .history-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.view-list .history-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}

.view-list .history-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.view-list .history-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.view-list .history-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Its own row, always — keeps card height consistent instead of only
   appearing here when the meta row above wraps. */
.view-list .history-time {
  font-size: 11px;
  color: var(--text-muted);
}

.view-list .history-price {
  font-weight: 700;
  color: var(--accent);
}

.view-list .history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.view-list .history-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Grid view layouts */
#pc-history-list.view-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#pc-history-list.view-grid5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.view-grid3 .history-card,
.view-grid5 .history-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.view-grid3 .history-thumb,
.view-grid5 .history-thumb {
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.view-grid3 .history-thumb {
  height: 96px;
}

.view-grid5 .history-thumb {
  height: 60px;
}

.view-grid3 .history-mid,
.view-grid5 .history-mid {
  padding: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.view-grid3 .history-desc,
.view-grid5 .history-desc {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
  height: 30px;
}

.view-grid5 .history-desc {
  font-size: 9.5px;
  height: 24px;
}

.view-grid3 .history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  width: 100%;
}

.view-grid5 .history-meta {
  display: none;
}

.view-grid3 .history-price,
.view-grid5 .history-price {
  font-weight: 700;
  color: var(--accent);
  font-size: 11px;
}

.view-grid5 .history-price {
  font-size: 9.5px;
}

.view-grid3 .history-tier,
.view-grid5 .history-tier {
  font-size: 9px;
}

.view-grid3 .history-time,
.view-grid5 .history-time {
  font-size: 9px;
}

.view-grid5 .history-time {
  font-size: 8px;
}

.view-grid3 .history-actions,
.view-grid5 .history-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

/* Hide chevron in grid mode */
.view-grid3 .history-chevron,
.view-grid5 .history-chevron {
  display: none;
}

/* Delete + Retry card-action buttons — same size/position in list AND grid
   views (previously list rendered a bare icon, grid a bordered circle;
   sizing/spacing unified so the pair lines up identically everywhere).
   Shared two-tap delete pattern (also reused by the Edit Sheet's single
   history-row delete, see .pc-del-btn usage in inventory.js's history list):
   bare muted icon by default, solid red circle only once armed (2nd tap
   confirms). Retry stays a bare icon with only a hover highlight. */
.pc-del-btn,
.pc-retry-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.pc-del-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  margin-right: 4px;
}

.pc-retry-icon-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.pc-del-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

.pc-retry-icon-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

.pc-del-btn.armed {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ── List Card v5 ── */
.lcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  /* Prevents mobile browsers from selecting the card's text (or showing the
     long-press callout menu) during the hold-to-quick-actions gesture. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.lcard.lcard-selected {
  background: var(--accent-glow) !important;
  border-color: var(--accent);
}

.lcard::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 1;
}

.lcard.lc-is::before {
  background: var(--accent);
}

.lcard.lc-lt::before {
  background: var(--blue);
}

.lcard.lc-np::before {
  background: var(--purple);
}

.lcard.lc-nr::before {
  background: var(--amber);
}

.lcard.lc-sold::before {
  background: var(--green);
}

.lcard.lc-posted::before {
  background: var(--text-muted);
}

.lcard.lc-draft::before {
  background: var(--text-soft);
}

/* Faint left-to-right status tint, layered over the base surface colour.
   Opacity is controlled app-wide by --card-tint-alpha / --card-tint-alpha-muted (:root, ~line 29). */
.lcard.lc-is {
  background: linear-gradient(90deg, rgba(0, 196, 160, var(--card-tint-alpha)) 0%, rgba(0, 196, 160, 0) 65%), var(--surface);
}

.lcard.lc-lt {
  background: linear-gradient(90deg, rgba(91, 156, 246, var(--card-tint-alpha)) 0%, rgba(91, 156, 246, 0) 65%), var(--surface);
}

.lcard.lc-np {
  background: linear-gradient(90deg, rgba(167, 123, 250, var(--card-tint-alpha)) 0%, rgba(167, 123, 250, 0) 65%), var(--surface);
}

.lcard.lc-nr {
  background: linear-gradient(90deg, rgba(245, 166, 35, var(--card-tint-alpha)) 0%, rgba(245, 166, 35, 0) 65%), var(--surface);
}

.lcard.lc-sold {
  background: linear-gradient(90deg, rgba(76, 217, 100, var(--card-tint-alpha)) 0%, rgba(76, 217, 100, 0) 65%), var(--surface);
}

.lcard.lc-posted {
  background: linear-gradient(90deg, rgba(192, 192, 192, var(--card-tint-alpha-muted)) 0%, rgba(192, 192, 192, 0) 65%), var(--surface);
}

.lcard.lc-draft {
  background: linear-gradient(90deg, rgba(168, 168, 168, var(--card-tint-alpha-muted)) 0%, rgba(168, 168, 168, 0) 65%), var(--surface);
}

.lcard.lc-collapsed .lcard-body {
  display: none;
}

.lcard.lc-collapsed .lcard-footer {
  display: none;
}

.lcard.lc-collapsed .lcard-collapsed-row {
  display: flex;
}

/* Bundle-membership tint — per-bundle colour (js: getBundleTintColor).
   List card: 3px strip on the right edge, mirroring the left status stripe
   (.lcard::before). Grid card: 3px strip along the bottom edge, mirroring
   the top status bar (.gcard-photo-wrap::after). */
.lcard.lc-bundled::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bundle-tint-color, transparent);
  z-index: 1;
}

.gcard.gcard-bundled::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--bundle-tint-color, transparent);
  z-index: 1;
}

/* Collapsed bundle group cards — a bundle's members rendered as one stacked
   card. The fan is built entirely inside the photo box (both .lcard and
   .gcard set overflow:hidden, so layers cannot spill outside the card). */
.lcbg-photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  position: relative;
}

.lcbg-layer,
.lcbg-front {
  position: absolute;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--bundle-tint-color, var(--border2));
}

.lcbg-layer-back {
  top: 0;
  left: 10px;
  right: 0;
  bottom: 10px;
  opacity: 0.7;
}

.lcbg-layer-mid {
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  opacity: 0.85;
}

.lcbg-front {
  top: 10px;
  left: 0;
  right: 10px;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pill + stack glyph, deliberately unlike .lc-qty-badge's bare 4px square: the
   two sit in the same photo corner and a bare number reads as a quantity. */
.lcbg-count {
  position: absolute;
  bottom: -3px;
  left: -3px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bundle-tint-color, var(--purple));
  color: #000;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  padding: 1px 5px 1px 4px;
  border-radius: 20px;
  line-height: 1.6;
  z-index: 3;
}

/* Full-<svg> wrapper with no intrinsic size — same constraint as
   .marketplace-badge svg. Its stroke is currentColor, so the badge's own
   colour reaches it with no override. */
.lcbg-count svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.lcbg-expand {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-soft);
  cursor: pointer;
}

.lcbg-expand svg {
  width: 16px;
  height: 16px;
}

.lcbg-expand:hover {
  color: var(--accent);
}

.gcbg-layer,
.gcbg-front {
  position: absolute;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--bundle-tint-color, var(--border2));
}

.gcbg-layer-back {
  top: 8px;
  left: 22px;
  right: 8px;
  bottom: 22px;
  opacity: 0.7;
}

.gcbg-layer-mid {
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  opacity: 0.85;
}

.gcbg-front {
  top: 22px;
  left: 8px;
  right: 22px;
  bottom: 8px;
  overflow: hidden;
}

.gcbg-count {
  bottom: 6px;
  left: auto;
  right: 6px;
}

.lcard-body {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 8px 10px 13px;
  gap: 8px;
}

.lc-chevron {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  z-index: 2;
}

.lc-chevron svg {
  width: 13px;
  height: 13px;
}

.lc-photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  position: relative;
}

.lc-photo-inner {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
}

.lc-qty-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  background: var(--accent);
  color: #000;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.6;
  z-index: 2;
}

.lc-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start;
  padding-top: 3px;
  padding-right: 28px;
}

.lc-title {
  font-family: 'Sora', sans-serif;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.lc-meta {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Names the collapsed bundle group card in words — the stacked photo and the
   tint edge alone still read as an ordinary item card at a glance. Shape
   follows .inv-badge, but the colour is per-bundle so it arrives as an inline
   --bundle-tint-color, and it is inline-flex because .lc-meta is a
   nowrap/ellipsis text line a block-level chip would break. */
.lc-bundle-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid var(--bundle-tint-color, var(--border2));
  color: var(--bundle-tint-color, var(--text-muted));
  border-radius: 20px;
  padding: 1px 6px 1px 5px;
  font-family: 'Sora', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lc-bundle-chip svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.lc-edit-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
}

.lc-edit-btn svg {
  width: 16px;
  height: 16px;
}

.lc-edit-btn:hover {
  color: var(--accent);
}

.lcard-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding: 6px 10px 6px 16px;
  min-height: 34px;
}

.lc-foot-pricing {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  row-gap: 2px;
  flex-shrink: 1;
  min-width: 0;
}

.lc-fp-pair {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.lc-fp-lbl {
  font-size: 9px;
  color: var(--text-muted);
}

.lc-fp-val {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.lc-fp-val-sold {
  font-size: 10px;
}

.lc-fp-dot {
  color: var(--border2);
  font-size: 10px;
}

.lc-fp-profit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.lc-profit-pos {
  color: var(--green);
}

.lc-profit-neg {
  color: var(--red);
}

.lc-profit-nil {
  color: var(--text-muted);
  opacity: 0.4;
}

.lc-foot-icons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.lc-cross-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border2);
  cursor: pointer;
  flex-shrink: 0;
}

.lc-cross-ico svg {
  width: 16px;
  height: 16px;
}

.lc-cross-ico.lc-ico-active.lc-ico-ebay {
  color: var(--c-ebay);
}

.lc-cross-ico.lc-ico-active.lc-ico-fb {
  color: var(--c-fb);
}

.lc-cross-ico.lc-ico-active.lc-ico-depop {
  color: var(--c-depop);
}

.lc-cross-ico.lc-ico-active.lc-ico-gumtree {
  color: var(--c-gumtree);
}

.lc-cross-ico.lc-ico-active.lc-ico-shpock {
  color: var(--c-shpock);
}

.lc-fi-sep {
  width: 1px;
  height: 14px;
  background: var(--border2);
  margin: 0 4px;
  flex-shrink: 0;
}

.lc-item-ico {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border2);
  cursor: pointer;
  flex-shrink: 0;
}

.lc-item-ico svg {
  width: 16px;
  height: 16px;
}

.lc-item-ico.lc-ico-active.lc-ico-vinted {
  color: var(--c-vinted);
}

.lc-item-ico.lc-ico-active.lc-ico-clock {
  color: var(--text-soft);
}

.lc-item-ico.lc-ico-active.lc-ico-bundle {
  color: var(--amber);
}

.lc-item-ico.lc-ico-active.lc-ico-listing {
  color: var(--accent);
}

.lc-item-ico.lc-ico-active.lc-ico-listing.lc-ico-template {
  color: var(--text-muted);
}

.lc-item-ico.lc-ico-active.lc-ico-bundle.lc-ico-template {
  color: var(--text-muted);
}

.lcard-collapsed-row {
  display: none;
  align-items: center;
  padding: 0 10px 0 13px;
  height: 46px;
  gap: 8px;
}

.lc-cc-photo {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
}

.lc-cc-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.lc-cc-qty {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.lc-cc-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lc-cc-ico {
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-cc-ico svg {
  width: 12px;
  height: 12px;
}

.lc-cc-profit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.lc-cc-chevron {
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

.lc-cc-chevron svg {
  width: 13px;
  height: 13px;
}

/* ── Icon Map ── */
.im-section {
  padding: 12px 14px;
}

.im-section+.im-section {
  border-top: 1px solid var(--border);
}

.im-heading {
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.im-two-col {
  display: flex;
  align-items: flex-start;
}

.im-col {
  flex: 1;
  min-width: 0;
}

.im-col-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 0 14px;
  flex-shrink: 0;
}

.im-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: var(--text-soft);
  margin-bottom: 7px;
}

.im-row:last-child {
  margin-bottom: 0;
}

.im-row-name {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 600;
  line-height: 1.3;
}

.im-row-desc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 1px;
}

.im-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.im-ico {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.im-ico svg {
  width: 13px;
  height: 13px;
}

.im-cp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 4px;
}

/* ── Grid Card v2 ── */
.gcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Prevents mobile browsers from selecting the card's text (or showing the
     long-press callout menu) during the hold-to-quick-actions gesture. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Status bar — top of photo */
.gcard-photo-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 2;
}

.gcard-is .gcard-photo-wrap::after {
  background: var(--accent);
}

.gcard-lt .gcard-photo-wrap::after {
  background: var(--blue);
}

.gcard-np .gcard-photo-wrap::after {
  background: var(--purple);
}

.gcard-nr .gcard-photo-wrap::after {
  background: var(--amber);
}

.gcard-sold .gcard-photo-wrap::after {
  background: var(--green);
}

.gcard-posted .gcard-photo-wrap::after {
  background: var(--text-muted);
}

/* Faint top-to-bottom status tint (grid cards only — list cards stay left-to-right
   above). Applied to .gcard-content, not .gcard itself — .gcard-photo-wrap sits on
   top with its own opaque background and would hide a tint painted on the parent.
   Opacity shared via --card-tint-alpha / --card-tint-alpha-muted (:root, ~line 29). */
.gcard-is .gcard-content {
  background: linear-gradient(180deg, rgba(0, 196, 160, var(--card-tint-alpha)) 0%, rgba(0, 196, 160, 0) 100%);
}

.gcard-lt .gcard-content {
  background: linear-gradient(180deg, rgba(91, 156, 246, var(--card-tint-alpha)) 0%, rgba(91, 156, 246, 0) 100%);
}

.gcard-np .gcard-content {
  background: linear-gradient(180deg, rgba(167, 123, 250, var(--card-tint-alpha)) 0%, rgba(167, 123, 250, 0) 100%);
}

.gcard-nr .gcard-content {
  background: linear-gradient(180deg, rgba(245, 166, 35, var(--card-tint-alpha)) 0%, rgba(245, 166, 35, 0) 100%);
}

.gcard-sold .gcard-content {
  background: linear-gradient(180deg, rgba(76, 217, 100, var(--card-tint-alpha)) 0%, rgba(76, 217, 100, 0) 100%);
}

.gcard-posted .gcard-content {
  background: linear-gradient(180deg, rgba(192, 192, 192, var(--card-tint-alpha-muted)) 0%, rgba(192, 192, 192, 0) 100%);
}

.gcard-draft .gcard-content {
  background: linear-gradient(180deg, rgba(168, 168, 168, var(--card-tint-alpha-muted)) 0%, rgba(168, 168, 168, 0) 100%);
}

/* Photo wrap */
.gcard-photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--surface2);
  flex-shrink: 0;
}

.gcard-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gcard-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--border2);
}

.gcard-photo-placeholder svg {
  width: 32px;
  height: 32px;
}

/* Edit button — top right of photo, darker */
.gcard-edit {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-soft);
  cursor: pointer;
  z-index: 3;
  border: none;
}

.gcard-edit svg {
  width: 13px;
  height: 13px;
}

/* Qty badge */
.gcard-qty {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: var(--accent);
  color: #000;
  font-family: 'Sora', sans-serif;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.6;
  z-index: 4;
}

/* Content area — shared */
.gcard-content {
  padding: 8px 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.gcard-title {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  line-height: 1.25;
}

.gcard-meta {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.gcard-status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

.gcard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gcard-dot.gd-is {
  background: var(--accent);
}

.gd-lt {
  background: var(--blue);
}

.gd-np {
  background: var(--purple);
}

.gd-nr {
  background: var(--amber);
}

.gd-sold {
  background: var(--green);
}

.gd-posted {
  background: var(--text-muted);
}

.gd-draft {
  background: var(--text-soft);
}

.gcard-status-lbl {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3-grid icons — active only */
.gcard-icons {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  margin-top: 2px;
  min-height: 16px;
}

.gcard-ico {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gcard-ico svg {
  width: 11px;
  height: 11px;
}

.gcard-fi-sep {
  width: 1px;
  height: 10px;
  background: var(--border2);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Pricing — 3-grid */
.gcard-pricing {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gcard-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  flex-wrap: wrap;
  row-gap: 1px;
}

.gcard-price-item {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.gcard-plbl {
  font-size: 9px;
  color: var(--text-muted);
}

.gcard-pval {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.gcard-pval-sold {
  font-size: 11px;
}

.gcard-profit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  min-height: 14px;
}

.gcard-profit.gp-pos {
  color: var(--green);
}

.gcard-profit.gp-neg {
  color: var(--red);
}

.gcard-profit.gp-nil {
  color: var(--text-muted);
  opacity: 0.4;
}

/* Pricing — 5-grid (single line) */
.gcard-price-single {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  margin-top: 3px;
}

.gcard-price-single.gp-pos {
  color: var(--green);
}

.gcard-price-single.gp-neg {
  color: var(--red);
}

/* Grid Card v2 Layout Fixes (Mobile Scroll & Box Height Alignments) */
.inventory-grid.view-grid>div,
.inventory-grid.view-grid5>div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Scoped to the real inventory grid-view cards only — a bare .gcard rule
   here previously cascaded onto every .gcard-classed element app-wide,
   including the fixed-148px bundle-member mini cards in the horizontal
   scrollers (bundle.js's bundleSheetItemCardHTML), whose flex-basis:0%
   (from this rule's flex:1) overrode their inline width and made them
   shrink as more items were added instead of scrolling at a fixed width. */
.inventory-grid.view-grid>div .gcard,
.inventory-grid.view-grid5>div .gcard {
  width: 100%;
  height: 100%;
  flex: 1;
}

.bundle-page-bg {
  background: var(--bundle-bg) !important;
}

body.bundle-active {
  background: var(--bundle-bg) !important;
}

#bulk-toggle-btn.active .utility-circle-icon {
  color: var(--accent) !important;
  background: rgba(0, 196, 160, 0.1) !important;
  border-color: var(--accent) !important;
}

#page-inventory.bulk-active {
  padding-bottom: 380px !important;
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fee-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 5px;
  font-size: 12px;
  color: var(--text-soft);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  padding: 4px 0;
}

.fee-toggle:hover {
  color: var(--text);
}

.fee-toggle .chev {
  transition: transform 0.25s ease;
  color: var(--text-muted);
}

.fee-toggle.open .chev {
  transform: rotate(180deg);
}

.seller-fee-block {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.seller-fee-block.open {
  max-height: 200px;
  opacity: 1;
}

.breakdown-bar {
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: var(--surface3);
  border: 1px solid var(--border);
}

.breakdown-bar span {
  height: 100%;
  transition: width 0.2s ease;
}

.seg-cost {
  background: var(--text-muted);
}

.seg-fee {
  background: var(--amber);
}

.seg-profit {
  background: var(--green);
}

.breakdown-legend {
  display: flex;
  gap: 12px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.breakdown-legend .item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-soft);
}

.breakdown-legend .sw {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.result-value {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
}

.result-value.neg {
  color: var(--red);
}

.test-row .vsa-field {
  flex: 1;
}

#vsa-print-summary {
  display: none;
}

/* The report's own chrome lives outside @media print so the month-report
   sheet's on-screen preview and the printed page render from one source —
   the preview is literally what prints. */
/* Fixed page width so the preview lays out like the printed page — app.js
   scales it to the sheet with CSS zoom (MONTH_REPORT_PAGE_WIDTH). */
#month-report-paper {
  width: 680px;
  background: #ffffff;
  color: #111111;
  font-family: 'DM Sans', sans-serif;
  padding: 20px;
  border-radius: 12px;
}

#vsa-print-summary .print-header,
#month-report-paper .print-header {
  border-bottom: 2px solid #00a085;
  padding-bottom: 12px;
  margin-bottom: 24px;
}

#vsa-print-summary .print-grid,
#month-report-paper .print-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

#vsa-print-summary .print-card,
#month-report-paper .print-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background: #f9f9f9;
}

#vsa-print-summary .print-card-title,
#month-report-paper .print-card-title {
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 4px;
}

#vsa-print-summary .print-card-value,
#month-report-paper .print-card-value {
  font-size: 20px;
  font-weight: bold;
  color: #111;
}

#vsa-print-summary .print-table,
#month-report-paper .print-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
}

#vsa-print-summary .print-table th,
#vsa-print-summary .print-table td,
#month-report-paper .print-table th,
#month-report-paper .print-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
  font-size: 13px;
}

#vsa-print-summary .print-table th,
#month-report-paper .print-table th {
  background: #f4f4f4;
  font-weight: 600;
}

#vsa-print-summary .print-chart-row,
#month-report-paper .print-chart-row {
  display: grid;
  grid-template-columns: 70px 1fr 150px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #333;
}

#vsa-print-summary .print-chart-track,
#month-report-paper .print-chart-track {
  background: #f0f0f0;
  border-radius: 3px;
}

/* Browsers drop background colours when printing unless told otherwise —
   without this the bars print as empty tracks. */
#vsa-print-summary .print-chart-bar,
#month-report-paper .print-chart-bar {
  height: 14px;
  min-width: 2px;
  border-radius: 3px;
  background: #00a085;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@media print {
  body>*:not(#vsa-print-summary) {
    display: none !important;
  }

  #vsa-print-summary {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #ffffff !important;
    color: #111111 !important;
    padding: 24px;
    font-family: 'DM Sans', sans-serif;
  }

  #vsa-print-summary .print-table {
    page-break-inside: auto;
  }

  #vsa-print-summary .print-table tr {
    page-break-inside: avoid;
  }
}

/* ============================================================
   LOGIN GATE (see js/auth.js)
   ============================================================ */
#vsa-login-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#vsa-login-overlay.hidden {
  display: none !important;
}

#vsa-login-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#vsa-login-tabs {
  display: flex;
  gap: 10px;
}

#vsa-login-tabs button {
  flex: 1;
  padding: 10px;
  background: var(--surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#vsa-login-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

#vsa-login-error {
  font-size: 12px;
  color: var(--red);
  text-align: center;
  display: none;
}

#vsa-login-status {
  font-size: 12px;
  color: var(--accent);
  text-align: center;
  display: none;
}

#vsa-login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 12px;
}

#vsa-login-divider::before,
#vsa-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.vsa-login-pw-toggle {
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vsa-login-pw-toggle:hover {
  color: var(--text);
}