/* ============================================================
   TAUBMANS DESIGN SYSTEM v5
   Loaded AFTER taubmans-theme.css, only when [data-theme="taubmans"].
   This file defines canonical components for the workspace UI:
   buttons, cards, form controls, labels, icons, top toolbar,
   sidebars, and status indicators.

   Scope-locked: does NOT touch image canvas, overlay labels,
   modals, brochure, wizard, admin, or mobile breakpoints.
   ============================================================ */
/* TB_DS_V5_MARKER */

[data-theme="taubmans"] {
  /* ─────────────────────────────────────────────
     1. DESIGN TOKENS (re-declare for guaranteed access)
     ───────────────────────────────────────────── */
  --tb-green:        #0F3D2E;
  --tb-green-deep:   #0A2A20;
  --tb-green-soft:   #E6EDEA;
  --tb-teal:         #0E9384;
  --tb-teal-hover:   #0B776A;
  --tb-teal-soft:    #DDF1EE;
  --tb-cream:        #F5F1EA;
  --tb-stone:        #F4F4F2;
  --tb-line:         #E5E3DD;
  --tb-line-strong:  #D4D2CC;
  --tb-ink:          #1a1a1a;
  --tb-text:         #2A2D33;
  --tb-muted:        #6B6F76;
  --tb-muted-soft:   #9CA0A8;
  --tb-bg:           #FFFFFF;
  --tb-bg-subtle:    #FAFAF8;
  --tb-orange:       #E8753F;
  --tb-radius-card:  4px;
  --tb-radius-btn:   4px;
  --tb-arch-clip:    inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0);
}

/* ─────────────────────────────────────────────
   2. APP BACKGROUND & SIDEBAR SHELLS
   ───────────────────────────────────────────── */
[data-theme="taubmans"] body { background: var(--tb-bg) !important; }
[data-theme="taubmans"] .app { background: var(--tb-bg) !important; }
[data-theme="taubmans"] .sidebar,
[data-theme="taubmans"] .left-sidebar,
[data-theme="taubmans"] .right-sidebar,
[data-theme="taubmans"] aside.sidebar {
  background: var(--tb-bg) !important;
  border-right: 1px solid var(--tb-line) !important;
}
[data-theme="taubmans"] .right-sidebar,
[data-theme="taubmans"] aside.sidebar.right {
  border-right: none !important;
  border-left: 1px solid var(--tb-line) !important;
}

/* ─────────────────────────────────────────────
   3. BUTTONS
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .btn,
[data-theme="taubmans"] button.btn,
[data-theme="taubmans"] a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  border-radius: var(--tb-radius-btn) !important;
  border: 1.5px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

/* Primary — solid teal */
[data-theme="taubmans"] .btn-primary,
[data-theme="taubmans"] .btn.btn-primary {
  background: var(--tb-teal) !important;
  color: #fff !important;
  border-color: var(--tb-teal) !important;
}
[data-theme="taubmans"] .btn-primary:hover {
  background: var(--tb-teal-hover) !important;
  border-color: var(--tb-teal-hover) !important;
  transform: translateY(-1px);
}

/* Secondary — dark green outline */
[data-theme="taubmans"] .btn-secondary,
[data-theme="taubmans"] .btn-outline,
[data-theme="taubmans"] .btn-outline-dark {
  background: transparent !important;
  color: var(--tb-green) !important;
  border-color: var(--tb-line-strong) !important;
}
[data-theme="taubmans"] .btn-secondary:hover,
[data-theme="taubmans"] .btn-outline:hover,
[data-theme="taubmans"] .btn-outline-dark:hover {
  border-color: var(--tb-green) !important;
  background: var(--tb-stone) !important;
}

/* Tertiary / link — text only */
[data-theme="taubmans"] .btn-tertiary,
[data-theme="taubmans"] .btn-link,
[data-theme="taubmans"] .btn-text {
  background: transparent !important;
  color: var(--tb-teal) !important;
  border-color: transparent !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
[data-theme="taubmans"] .btn-tertiary:hover,
[data-theme="taubmans"] .btn-link:hover {
  color: var(--tb-teal-hover) !important;
  background: var(--tb-teal-soft) !important;
}

/* Small button modifier */
[data-theme="taubmans"] .btn.btn-sm,
[data-theme="taubmans"] .btn-sm {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
}

/* The "+ ADD" button (image picker) — quiet outline pill */
[data-theme="taubmans"] .add-btn,
[data-theme="taubmans"] button.add-btn,
[data-theme="taubmans"] .btn-add,
[data-theme="taubmans"] [class*="add-image"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: transparent !important;
  color: var(--tb-teal) !important;
  border: 1.5px solid var(--tb-teal) !important;
  border-radius: var(--tb-radius-btn) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
[data-theme="taubmans"] .add-btn:hover {
  background: var(--tb-teal-soft) !important;
}

/* "Reset Selections" — quiet outline button */
[data-theme="taubmans"] #resetSelectionsBtn,
[data-theme="taubmans"] .reset-selections,
[data-theme="taubmans"] .btn-reset {
  background: #ffffff !important;
  color: var(--tb-text) !important;
  border: 1.5px solid var(--tb-line-strong) !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  width: 100% !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.875rem !important;
}
[data-theme="taubmans"] #resetSelectionsBtn:hover {
  border-color: var(--tb-green) !important;
  background: var(--tb-stone) !important;
}

/* "READY TO PAINT" — primary CTA, full width */
[data-theme="taubmans"] .ready-to-paint,
[data-theme="taubmans"] .btn-ready-to-paint,
[data-theme="taubmans"] [class*="paint-btn"],
[data-theme="taubmans"] .ai-paint-btn,
[data-theme="taubmans"] #generateBtn,
[data-theme="taubmans"] #aiPaintBtn {
  background: var(--tb-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 14px 24px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: background 0.15s !important;
}
[data-theme="taubmans"] .ready-to-paint:hover { background: var(--tb-teal-hover) !important; }

/* ─────────────────────────────────────────────
   4. CARDS — white + thin Taubmans-line border, no shadow
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .section,
[data-theme="taubmans"] .bucket,
[data-theme="taubmans"] .preset-card,
[data-theme="taubmans"] .preset-trigger-card,
[data-theme="taubmans"] .result-row,
[data-theme="taubmans"] .scheme-card,
[data-theme="taubmans"] .image-thumb,
[data-theme="taubmans"] .image-card {
  background: var(--tb-bg) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-card) !important;
  box-shadow: none !important;
}
[data-theme="taubmans"] .bucket {
  padding: 16px !important;
  margin-bottom: 12px !important;
}
[data-theme="taubmans"] .preset-trigger-card {
  padding: 14px !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}
[data-theme="taubmans"] .preset-trigger-card:hover {
  border-color: var(--tb-line-strong) !important;
  background: var(--tb-stone) !important;
}

/* Active scheme card (highlighted) */
[data-theme="taubmans"] .active-scheme-card {
  border: 1.5px solid var(--tb-teal) !important;
  background: var(--tb-teal-soft) !important;
  border-radius: var(--tb-radius-card) !important;
  padding: 14px !important;
}

/* Image thumbnail in left sidebar */
[data-theme="taubmans"] .image-thumb,
[data-theme="taubmans"] .image-card {
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid var(--tb-line) !important;
}
[data-theme="taubmans"] .image-thumb img,
[data-theme="taubmans"] .image-card img {
  display: block;
  width: 100%;
  height: auto;
}
[data-theme="taubmans"] .image-thumb.selected,
[data-theme="taubmans"] .image-card.selected,
[data-theme="taubmans"] .image-thumb.active {
  border-color: var(--tb-teal) !important;
  box-shadow: 0 0 0 1px var(--tb-teal) !important;
}

/* ─────────────────────────────────────────────
   5. FORM CONTROLS
   ───────────────────────────────────────────── */
[data-theme="taubmans"] input[type="text"],
[data-theme="taubmans"] input[type="email"],
[data-theme="taubmans"] input[type="password"],
[data-theme="taubmans"] input[type="number"],
[data-theme="taubmans"] input[type="search"],
[data-theme="taubmans"] textarea,
[data-theme="taubmans"] select {
  background: var(--tb-bg) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 10px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--tb-text) !important;
  transition: border-color 0.15s !important;
  width: 100%;
  box-sizing: border-box;
}
[data-theme="taubmans"] input:focus,
[data-theme="taubmans"] textarea:focus,
[data-theme="taubmans"] select:focus {
  outline: none !important;
  border-color: var(--tb-teal) !important;
  box-shadow: 0 0 0 3px var(--tb-teal-soft) !important;
}
[data-theme="taubmans"] textarea {
  min-height: 80px !important;
  resize: vertical !important;
  font-family: 'DM Sans', sans-serif !important;
}
[data-theme="taubmans"] input::placeholder,
[data-theme="taubmans"] textarea::placeholder {
  color: var(--tb-muted-soft) !important;
}

/* Finish dropdown specific */
[data-theme="taubmans"] .finish-select,
[data-theme="taubmans"] select.finish {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D2E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  padding-right: 32px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* ─────────────────────────────────────────────
   6. EYEBROW LABELS / SECTION HEADINGS
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .section-label,
[data-theme="taubmans"] .preset-label,
[data-theme="taubmans"] .images-label,
[data-theme="taubmans"] .results-label,
[data-theme="taubmans"] [class*="-eyebrow"] {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--tb-muted) !important;
  margin-bottom: 12px !important;
}

/* Section titles ("Advanced Painting", "Notes for this Element", "Colour Presets") */
[data-theme="taubmans"] .section-title,
[data-theme="taubmans"] h3.section-title,
[data-theme="taubmans"] .panel-title {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--tb-muted) !important;
  margin: 24px 0 12px !important;
}

/* Bucket name (Walls, Trim, Features) — main heading inside the card */
[data-theme="taubmans"] .bucket-name {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
[data-theme="taubmans"] .bucket-desc {
  font-size: 0.78rem !important;
  color: var(--tb-muted) !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* "X of Y selected" count — Taubmans dark green */
[data-theme="taubmans"] .bucket-count,
[data-theme="taubmans"] [class*="count-selected"],
[data-theme="taubmans"] [class*="-selected-count"] {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--tb-green) !important;
  margin: 4px 0 6px !important;
  letter-spacing: 0.01em !important;
}

/* "ALL PROJECTS" back link in left sidebar */
[data-theme="taubmans"] .back-link,
[data-theme="taubmans"] a.back-link,
[data-theme="taubmans"] .all-projects-link {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--tb-teal) !important;
  text-decoration: none !important;
}
[data-theme="taubmans"] .back-link:hover { color: var(--tb-teal-hover) !important; }

/* Project name heading in left sidebar — bumped to serif for brand presence */
[data-theme="taubmans"] .project-name,
[data-theme="taubmans"] h2.project-title,
[data-theme="taubmans"] .sidebar h2 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: var(--tb-green) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 8px 0 16px !important;
}

/* ─────────────────────────────────────────────
   7. ICONS — chevrons, plus, X, expand
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .chevron,
[data-theme="taubmans"] .preset-chevron,
[data-theme="taubmans"] .preset-trigger-chevron,
[data-theme="taubmans"] [class*="chevron"]:not(.user-btn *) {
  color: var(--tb-muted) !important;
  font-size: 1.2rem !important;
}
[data-theme="taubmans"] .preset-trigger-card:hover .preset-trigger-chevron {
  color: var(--tb-green) !important;
}

/* Bucket reset (X close) — keep but restyle from red to neutral */
[data-theme="taubmans"] .bucket-reset-btn {
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  color: var(--tb-muted) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
[data-theme="taubmans"] .bucket-reset-btn:hover {
  border-color: var(--tb-green) !important;
  color: var(--tb-green) !important;
  background: var(--tb-stone) !important;
}

/* Hide the project-delete trash button entirely (per direction — deletion lives on dashboard) */
[data-theme="taubmans"] .delete-project-btn,
[data-theme="taubmans"] .btn-delete-project,
[data-theme="taubmans"] [data-action="delete-project"],
[data-theme="taubmans"] .project-delete,
[data-theme="taubmans"] .trash-btn,
[data-theme="taubmans"] [class*="delete"][class*="project"] {
  display: none !important;
}

/* ─────────────────────────────────────────────
   8. TOP TOOLBAR — Original / Compare / Result tabs + Labels + Download + Open
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .top-toolbar,
[data-theme="taubmans"] .image-toolbar,
[data-theme="taubmans"] .view-toolbar,
[data-theme="taubmans"] .canvas-toolbar {
  background: var(--tb-stone) !important;
  border-bottom: 1px solid var(--tb-line) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* View tabs (Original / Compare / Result) — segmented control look */
[data-theme="taubmans"] .view-tabs,
[data-theme="taubmans"] .view-toggle,
[data-theme="taubmans"] .compare-tabs,
[data-theme="taubmans"] .image-mode-tabs {
  display: inline-flex !important;
  background: var(--tb-bg) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 2px !important;
  gap: 0 !important;
}
[data-theme="taubmans"] .view-tabs button,
[data-theme="taubmans"] .view-toggle button,
[data-theme="taubmans"] .compare-tabs button,
[data-theme="taubmans"] .image-mode-tabs button {
  background: transparent !important;
  border: none !important;
  color: var(--tb-muted) !important;
  padding: 7px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.15s !important;
}
[data-theme="taubmans"] .view-tabs button:hover,
[data-theme="taubmans"] .view-toggle button:hover,
[data-theme="taubmans"] .compare-tabs button:hover {
  color: var(--tb-green) !important;
}
[data-theme="taubmans"] .view-tabs button.active,
[data-theme="taubmans"] .view-tabs button.selected,
[data-theme="taubmans"] .view-toggle button.active,
[data-theme="taubmans"] .compare-tabs button.active,
[data-theme="taubmans"] .image-mode-tabs button.active {
  background: var(--tb-green) !important;
  color: #fff !important;
}

/* Labels toggle */
[data-theme="taubmans"] .labels-toggle,
[data-theme="taubmans"] #labelsToggle,
[data-theme="taubmans"] .toggle-labels-btn {
  background: var(--tb-bg) !important;
  color: var(--tb-text) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 7px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
[data-theme="taubmans"] .labels-toggle.active,
[data-theme="taubmans"] .labels-toggle[aria-pressed="true"] {
  background: var(--tb-green) !important;
  color: #fff !important;
  border-color: var(--tb-green) !important;
}

/* Download / Open buttons — ensure they have proper spacing & don't overlap.
   Wrapping container should use flex with gap. */
[data-theme="taubmans"] .toolbar-actions,
[data-theme="taubmans"] .image-actions,
[data-theme="taubmans"] .top-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
}
[data-theme="taubmans"] .download-btn,
[data-theme="taubmans"] .open-btn,
[data-theme="taubmans"] #downloadBtn,
[data-theme="taubmans"] #openBtn,
[data-theme="taubmans"] [class*="download"][class*="btn"],
[data-theme="taubmans"] [class*="open"][class*="btn"] {
  background: var(--tb-bg) !important;
  color: var(--tb-text) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-btn) !important;
  padding: 7px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
[data-theme="taubmans"] .download-btn:hover,
[data-theme="taubmans"] .open-btn:hover {
  border-color: var(--tb-green) !important;
  color: var(--tb-green) !important;
}

/* ─────────────────────────────────────────────
   9. DOWNLOAD/OPEN OVERLAP FIX (general safety)
   The screenshot showed text reading "DownloadOpen" suggesting
   two elements with no gap. Force whitespace and prevent overlap.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .top-toolbar > *,
[data-theme="taubmans"] .image-toolbar > *,
[data-theme="taubmans"] .canvas-toolbar > * {
  flex-shrink: 0;
}
[data-theme="taubmans"] .top-toolbar a + a,
[data-theme="taubmans"] .top-toolbar button + a,
[data-theme="taubmans"] .top-toolbar button + button,
[data-theme="taubmans"] .image-toolbar a + a,
[data-theme="taubmans"] .image-toolbar button + a,
[data-theme="taubmans"] .image-toolbar button + button {
  margin-left: 8px !important;
}

/* ─────────────────────────────────────────────
   10. STATUS / BADGES
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .badge,
[data-theme="taubmans"] .pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-radius: 12px !important;
  background: var(--tb-teal-soft) !important;
  color: var(--tb-teal-hover) !important;
}
[data-theme="taubmans"] .badge.warn,
[data-theme="taubmans"] .badge-warning {
  background: #FFF4E5 !important;
  color: #B85B14 !important;
}

/* RESULTS counter pill */
[data-theme="taubmans"] .results-count,
[data-theme="taubmans"] .results-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 11px;
  background: var(--tb-stone);
  color: var(--tb-muted);
}

/* ─────────────────────────────────────────────
   11. DIVIDERS
   ───────────────────────────────────────────── */
[data-theme="taubmans"] hr,
[data-theme="taubmans"] .divider {
  border: none !important;
  height: 1px !important;
  background: var(--tb-line) !important;
  margin: 16px 0 !important;
}

/* ─────────────────────────────────────────────
   12. RESULT ROWS (saved recolours in left sidebar)
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .result-row {
  display: flex !important;
  gap: 12px !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
  cursor: pointer !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: var(--tb-radius-card) !important;
  background: var(--tb-bg) !important;
  transition: border-color 0.15s, background 0.15s !important;
}
[data-theme="taubmans"] .result-row:hover {
  border-color: var(--tb-line-strong) !important;
  background: var(--tb-stone) !important;
}
[data-theme="taubmans"] .result-row img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 2px;
}
[data-theme="taubmans"] .result-row .result-title {
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  color: var(--tb-ink) !important;
}
[data-theme="taubmans"] .result-row .result-meta,
[data-theme="taubmans"] .result-row .result-date {
  font-size: 0.75rem !important;
  color: var(--tb-muted) !important;
}

/* ─────────────────────────────────────────────
   13. FALLBACK / OVERRIDE — kill bright PE colors
   that are common but not in Taubmans palette
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .text-success { color: var(--tb-green) !important; }
[data-theme="taubmans"] .text-danger,
[data-theme="taubmans"] .text-error { color: #B85B14 !important; }
[data-theme="taubmans"] .text-warning { color: #B85B14 !important; }
[data-theme="taubmans"] .text-info { color: var(--tb-teal) !important; }

/* ─────────────────────────────────────────────
   14. END OF FIRST PASS
   Anything still showing PE-original styling needs
   a v5.1 follow-up. Send screenshots → we patch.
   ───────────────────────────────────────────── */
/* ============================================================
   TAUBMANS DESIGN SYSTEM v6 — workspace card redesign
   Appends to taubmans-design-system.css (loaded after it).
   Matches the user's mockup screenshot for Walls/Trim/Features
   bucket cards and the 2-/3-Colour Scheme preset trigger cards.
   ============================================================ */
/* TB_DS_V6_MARKER */

/* ─────────────────────────────────────────────
   1. PRESET TRIGGER CARDS (2-Colour / 3-Colour Scheme)
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: 'DM Sans', sans-serif !important;
}
[data-theme="taubmans"] .preset-trigger-card:hover {
  border-color: var(--tb-line-strong) !important;
  background: var(--tb-stone) !important;
}

/* Number tile ("2-" / "3-") */
[data-theme="taubmans"] .preset-trigger-card .preset-number-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--tb-stone);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--tb-ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

/* Text column */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: var(--tb-muted) !important;
}

/* Preview area — make the arches LARGE (was tiny mini stripes) */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-preview {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: flex-end !important;
}
/* Each .preset-trigger-mini becomes a single arched colour swatch */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  height: 64px !important;
  gap: 6px !important;
  background: transparent !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 48px !important;
  height: 64px !important;
  flex: 0 0 48px !important;
  display: block !important;
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
}

/* Chevron at the right edge */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-chevron {
  font-size: 1.4rem !important;
  color: var(--tb-muted) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   2. BUCKET CARDS (Walls / Trim / Features)
   The injected markup is:
     <div class="bucket">
       <div class="bucket-header">
         <span class="bucket-icon">SVG</span>      ← injected (sibling of bucket-info)
         <div class="bucket-info">...</div>
         <div class="bucket-controls">...</div>
       </div>
       <span class="bucket-chevron">›</span>        ← injected (sibling of bucket-header)
       <div class="bucket-children"></div>
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "header chevron"
    "children children" !important;
  align-items: center !important;
  gap: 0 16px !important;
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
  position: relative;
}
[data-theme="taubmans"] .bucket-header {
  grid-area: header !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
[data-theme="taubmans"] .bucket-children {
  grid-area: children !important;
}
[data-theme="taubmans"] .bucket-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--tb-green-soft);
  color: var(--tb-green);
  flex-shrink: 0;
  margin-top: 2px;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

/* Text/info column */
[data-theme="taubmans"] .bucket-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .bucket-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

/* "X of Y selected" — refined pill with checkmark */
[data-theme="taubmans"] .bucket-count {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  align-self: flex-start !important;
  padding: 4px 10px !important;
  background: var(--tb-green-soft) !important;
  color: var(--tb-green) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
}
/* Inject a checkmark via ::before — no markup change needed */
[data-theme="taubmans"] .bucket-count::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230F3D2E'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
/* Hide bucket-count if it's empty (no selection yet) */
[data-theme="taubmans"] .bucket-count:empty {
  display: none !important;
}

[data-theme="taubmans"] .bucket-desc {
  font-size: 0.88rem !important;
  font-weight: 400 !important;
  color: var(--tb-muted) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  max-width: 220px;
}

/* Reset X button */
[data-theme="taubmans"] .bucket-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}
[data-theme="taubmans"] .bucket-controls .bucket-reset-btn {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  color: var(--tb-muted) !important;
  border-radius: 50% !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin: 4px 0 0 0 !important;
  flex-shrink: 0;
  padding: 0 !important;
}
[data-theme="taubmans"] .bucket-controls .bucket-reset-btn:hover {
  border-color: var(--tb-green) !important;
  color: var(--tb-green) !important;
}

/* Bucket display (chip + name) — already styled in v4.2 but tighten the layout here */
[data-theme="taubmans"] .bucket-controls .bucket-display {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0;
}
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 96px !important;
  height: 100px !important;
  min-width: 96px !important;
  min-height: 100px !important;
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: var(--chip-bg, #e2e8f0) !important;
  background-color: var(--chip-bg, #e2e8f0) !important;
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  cursor: pointer !important;
}
[data-theme="taubmans"] .bucket-color-name {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--tb-muted) !important;
  text-align: center !important;
  max-width: 110px !important;
  word-break: break-word !important;
  display: block !important;
}
[data-theme="taubmans"] .bucket-color-name[data-empty="1"] {
  font-style: italic !important;
  color: var(--tb-muted) !important;
}
/* When a colour IS set, show in dark/non-italic */
[data-theme="taubmans"] .bucket-color-name:not([data-empty="1"]) {
  font-style: normal !important;
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
}

/* The whole-card chevron at the right edge */
[data-theme="taubmans"] .bucket-chevron {
  grid-area: chevron !important;
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  color: var(--tb-muted);
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  align-self: center;
  margin-right: 4px;
}

/* Bucket children rows (per-element) — keep simple, untouched */
[data-theme="taubmans"] .bucket-children { margin-top: 16px; }

/* ─────────────────────────────────────────────
   3. RESPONSIVE — fall back to stack on narrow widths
   ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  [data-theme="taubmans"] .bucket-header {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "icon  info  controls"
      "icon  display display";
  }
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v6.1 — Round 1 fixes
   Targets visible in Image 1 mockup that are wrong in current state.
   ============================================================ */
/* TB_DS_V6_1_MARKER */

/* ─────────────────────────────────────────────
   1. KILL THE "2-" / "3-" NUMBER TILES
   The mockup doesn't have them. JS still renders them but we
   hide via CSS — keeps the JS edit reversible.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card .preset-number-tile {
  display: none !important;
}
/* Reset the grid back to 3 columns: text + preview + chevron */
[data-theme="taubmans"] .preset-trigger-card {
  grid-template-columns: 1fr auto auto !important;
  padding: 18px 20px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 1.05rem !important;
  white-space: nowrap !important;
}

/* ─────────────────────────────────────────────
   2. RIGHT SIDEBAR — cream tint
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.sidebar.right,
[data-theme="taubmans"] .sidebar.right,
[data-theme="taubmans"] .right-sidebar,
[data-theme="taubmans"] .right-panel,
[data-theme="taubmans"] .controls-sidebar,
[data-theme="taubmans"] aside[class*="right"] {
  background: var(--tb-cream) !important;
  border-left: 1px solid var(--tb-line) !important;
}
/* Cards INSIDE the cream sidebar stay white — already set in v5/v6 */

/* ─────────────────────────────────────────────
   3. RIGHT SIDEBAR LAYOUT — more spacious, no chevron clipping
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .right-sidebar,
[data-theme="taubmans"] aside.sidebar.right,
[data-theme="taubmans"] aside[class*="right"] {
  padding: 24px 20px !important;
  min-width: 360px !important;
  width: 380px !important;
}
[data-theme="taubmans"] .right-sidebar .section,
[data-theme="taubmans"] aside.sidebar.right .section {
  margin-bottom: 24px !important;
}

/* Bucket cards — grid columns relaxed so chevron doesn't clip */
[data-theme="taubmans"] .bucket {
  grid-template-columns: 1fr auto !important;
  gap: 0 12px !important;
  padding: 18px !important;
}
[data-theme="taubmans"] .bucket-header {
  grid-template-columns: auto 1fr auto auto !important;
  gap: 12px !important;
}
/* Force descriptions to clamp to one line and truncate (target image hides them, this is the
   compromise: keep them but stop them eating space) */
[data-theme="taubmans"] .bucket-desc {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  max-width: 180px !important;
}

/* Smaller bucket icon on the cramped sidebar */
[data-theme="taubmans"] .bucket-icon {
  width: 44px !important;
  height: 44px !important;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* Smaller chip on the cramped sidebar (was 96×100) */
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 76px !important;
  height: 80px !important;
  min-width: 76px !important;
  min-height: 80px !important;
}

/* ─────────────────────────────────────────────
   4. SECTION LABEL — make the rename graceful even if PHP edit
      didn't catch all places. We override via attribute selector
      where possible.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .section-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--tb-muted) !important;
  margin: 0 0 14px !important;
}

/* ─────────────────────────────────────────────
   5. TOP BAR — Download / Open overlap fix
   The original bug: text reads "DownloadOpen" because two anchor
   buttons sit too close. Force gap and full text visibility.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .toolbar,
[data-theme="taubmans"] .top-toolbar,
[data-theme="taubmans"] .image-toolbar,
[data-theme="taubmans"] .canvas-toolbar,
[data-theme="taubmans"] .compare-bar {
  gap: 12px !important;
  padding: 12px 16px !important;
  flex-wrap: wrap !important;
}

/* Right-aligned action group on the toolbar */
[data-theme="taubmans"] .toolbar-actions,
[data-theme="taubmans"] .image-actions,
[data-theme="taubmans"] .top-actions,
[data-theme="taubmans"] .compare-actions {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Download / Open buttons — match target: outlined dark green pills */
[data-theme="taubmans"] .download-btn,
[data-theme="taubmans"] .open-btn,
[data-theme="taubmans"] #downloadBtn,
[data-theme="taubmans"] #openBtn,
[data-theme="taubmans"] a[href*="download"],
[data-theme="taubmans"] a[href*="open"],
[data-theme="taubmans"] [class*="download-btn"],
[data-theme="taubmans"] [class*="open-btn"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .download-btn:hover,
[data-theme="taubmans"] .open-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* Generic safety: ANY two adjacent action buttons in the top toolbar get gap.
   This catches cases where my class-name guesses miss but elements are still
   adjacent. */
[data-theme="taubmans"] .header + * .download-btn + .open-btn,
[data-theme="taubmans"] .toolbar > * + *,
[data-theme="taubmans"] .top-toolbar > * + *,
[data-theme="taubmans"] [class*="toolbar"] > a + a,
[data-theme="taubmans"] [class*="toolbar"] > button + a,
[data-theme="taubmans"] [class*="toolbar"] > button + button {
  margin-left: 8px !important;
}

/* ─────────────────────────────────────────────
   6. PRESET CARD — preview area sized for the cramped sidebar
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  height: 56px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 36px !important;
  height: 56px !important;
  flex: 0 0 36px !important;
}

/* ─────────────────────────────────────────────
   END v6.1
   ───────────────────────────────────────────── */
/* ============================================================
   TAUBMANS DESIGN SYSTEM v7 — Round 2
   With CORRECT selectors (right sidebar = .controls, not .right-sidebar)
   ============================================================ */
/* TB_DS_V7_MARKER */

/* ─────────────────────────────────────────────
   1. RIGHT SIDEBAR — actually targets aside.controls now
   Cream background, wider, more breathing room.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls {
  background: var(--tb-cream) !important;
  border-left: 1px solid var(--tb-line) !important;
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] aside.controls .controls-scroll {
  padding: 24px 20px !important;
  background: transparent !important;
}
[data-theme="taubmans"] aside.controls .section {
  margin-bottom: 24px !important;
}

/* ─────────────────────────────────────────────
   2. BUCKET CARDS — uncrame, give room for chevron + pill text
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket {
  grid-template-columns: 1fr auto !important;
  gap: 0 12px !important;
  padding: 18px 16px !important;
}
[data-theme="taubmans"] .bucket-header {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
/* Title can now wrap or fit comfortably */
[data-theme="taubmans"] .bucket-name {
  font-size: 1.05rem !important;
  white-space: normal !important;
  word-break: keep-all !important;
}
/* "X of Y selected" pill */
[data-theme="taubmans"] .bucket-count {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* Description: visible again, but with sensible max-width */
[data-theme="taubmans"] .bucket-desc {
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
}
/* Smaller icon for cramped vertical alignment */
[data-theme="taubmans"] .bucket-icon {
  width: 44px !important;
  height: 44px !important;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 20px !important;
  height: 20px !important;
}
/* Chip stays at 76×80 in cramped layout, name caption tighter */
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 76px !important;
  height: 80px !important;
  min-width: 76px !important;
  min-height: 80px !important;
}
/* Chevron — make sure visible at right edge */
[data-theme="taubmans"] .bucket-chevron {
  font-size: 1.5rem !important;
  margin-right: 0 !important;
  padding-left: 4px !important;
}

/* ─────────────────────────────────────────────
   3. PRESET TRIGGER CARDS — preview area sized right for 420 sidebar
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  height: 60px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 38px !important;
  height: 60px !important;
  flex: 0 0 38px !important;
}

/* ─────────────────────────────────────────────
   4. LEFT SIDEBAR (aside.sidebar) — Round 2 enhancements
   Project info layout, Presentations dark green, no trash button
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.sidebar {
  background: #fff !important;
  border-right: 1px solid var(--tb-line) !important;
  padding: 20px 18px !important;
}

/* Project info head — title + actions */
[data-theme="taubmans"] .project-info {
  margin-bottom: 24px !important;
}
[data-theme="taubmans"] .project-info-head {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* Project H1 — bigger, brand-y serif */
[data-theme="taubmans"] .editable-name[data-type="project"],
[data-theme="taubmans"] h1.editable-name {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 1.65rem !important;
  font-weight: 400 !important;
  color: var(--tb-green) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  margin: 8px 0 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  cursor: pointer !important;
  position: relative;
}
/* Pencil icon AFTER the H1 text via ::after — visual hint only.
   Click still routes to the H1's existing rename behaviour. */
[data-theme="taubmans"] .editable-name[data-type="project"]::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
  transition: opacity 0.15s;
}
[data-theme="taubmans"] .editable-name[data-type="project"]:hover::after {
  opacity: 1;
}

/* Address subtitle if present */
[data-theme="taubmans"] .project-info-head p {
  font-size: 0.85rem !important;
  color: var(--tb-muted) !important;
  margin: 4px 0 0 !important;
}

/* Presentations button → dark green
   The PHP has inline background:#1a1a1a — so we use !important and add
   layered selectors. The deploy script also strips the inline style. */
[data-theme="taubmans"] .btn-brochure-create,
[data-theme="taubmans"] a.btn-brochure-create {
  background: var(--tb-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
[data-theme="taubmans"] .btn-brochure-create:hover {
  background: var(--tb-green-deep) !important;
}
/* Hide the rainbow gradient bottom-bar on the presentations button — was a PE design touch */
[data-theme="taubmans"] .btn-brochure-create > span:first-child[style*="linear-gradient"] {
  display: none !important;
}

/* Hide the project-delete-form (trash icon) — deletion stays on dashboard */
[data-theme="taubmans"] .project-delete-form {
  display: none !important;
}
/* Defensive override in case any .icon-btn.danger exists outside the form */
[data-theme="taubmans"] .icon-btn.danger {
  display: none !important;
}

/* ─────────────────────────────────────────────
   5. IMAGE THUMBNAILS (.img-thumb-wrap)
   Bigger, with active checkmark badge.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .images-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
[data-theme="taubmans"] .img-thumb-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.15s, background 0.15s !important;
}
[data-theme="taubmans"] .img-thumb-wrap:hover {
  border-color: var(--tb-line-strong) !important;
  background: var(--tb-stone) !important;
}
/* Active thumbnail (markup uses an attribute called 'active' — see project.php line 265) */
[data-theme="taubmans"] .img-thumb-wrap[active],
[data-theme="taubmans"] .img-thumb-wrap.active {
  border: 2px solid var(--tb-teal) !important;
  background: var(--tb-teal-soft) !important;
  padding: 7px !important; /* offset the +1 border */
}
/* Thumbnail image */
[data-theme="taubmans"] .img-thumb-wrap .img-thumb,
[data-theme="taubmans"] .img-thumb-wrap a.img-thumb {
  display: block !important;
  flex-shrink: 0 !important;
  width: 64px !important;
  height: 50px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  text-decoration: none !important;
}
[data-theme="taubmans"] .img-thumb-wrap .img-thumb img,
[data-theme="taubmans"] .img-thumb-wrap a.img-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* Active checkmark badge — bottom right of active thumbnail */
[data-theme="taubmans"] .img-thumb-wrap[active]::after,
[data-theme="taubmans"] .img-thumb-wrap.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #fff;
}

/* ─────────────────────────────────────────────
   6. RESULT ROWS — bigger, formatted
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
[data-theme="taubmans"] .result-row {
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}
[data-theme="taubmans"] .result-item {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
}
[data-theme="taubmans"] .result-item:hover { background: var(--tb-stone) !important; }
[data-theme="taubmans"] .result-item.disabled { opacity: 0.5 !important; cursor: not-allowed !important; }
[data-theme="taubmans"] .result-thumb {
  flex-shrink: 0 !important;
  width: 64px !important;
  height: 50px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: var(--tb-stone);
}
[data-theme="taubmans"] .result-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
[data-theme="taubmans"] .result-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .result-title {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  color: var(--tb-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}
[data-theme="taubmans"] .result-sub {
  font-size: 0.78rem !important;
  color: var(--tb-muted) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
[data-theme="taubmans"] .result-sub .status-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--tb-stone);
  color: var(--tb-muted);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────
   7. NEXT-STEP CARD — bottom of left sidebar
   Markup is injected by the deploy script; JS populates it.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .next-step-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 14px !important;
  background: var(--tb-cream) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  text-align: left !important;
  width: 100% !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color 0.15s !important;
}
[data-theme="taubmans"] .next-step-card:hover {
  border-color: var(--tb-teal) !important;
}
[data-theme="taubmans"] .next-step-card[hidden] { display: none !important; }
[data-theme="taubmans"] .next-step-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tb-teal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tb-teal);
}
[data-theme="taubmans"] .next-step-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-theme="taubmans"] .next-step-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tb-muted);
}
[data-theme="taubmans"] .next-step-title {
  font-size: 0.92rem !important;
  font-weight: 600;
  color: var(--tb-ink);
}
[data-theme="taubmans"] .next-step-target {
  font-weight: 700;
  color: var(--tb-green);
}
[data-theme="taubmans"] .next-step-chevron {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--tb-muted);
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v7.2 — Round 2 fixes
   - Image thumbnail layout (was over-constrained)
   - Result row truncation relaxed
   - Right sidebar cream slightly deeper for visibility
   - Bucket card chip no longer clips at sidebar edge
   ============================================================ */
/* TB_DS_V7_2_MARKER */

/* ─────────────────────────────────────────────
   1. RIGHT SIDEBAR — slightly deeper cream so it's actually visible
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls {
  background: #EDE7DC !important;  /* slightly warmer than #F5F1EA */
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
}

/* ─────────────────────────────────────────────
   2. BUCKET CARDS — fix chip clipping at sidebar edge
   The 420px sidebar minus 20+20 padding = 380px content.
   Card content: 44 icon + 12 gap + flex text + 12 gap + reset btn + 12 gap + chip + chevron.
   Reducing chip to 80×84 and tightening padding so it all fits.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket {
  padding: 14px 14px !important;
  gap: 0 8px !important;
}
[data-theme="taubmans"] .bucket-header {
  gap: 10px !important;
}
[data-theme="taubmans"] .bucket-controls {
  gap: 10px !important;
}
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 72px !important;
  height: 76px !important;
  min-width: 72px !important;
  min-height: 76px !important;
}
[data-theme="taubmans"] .bucket-color-name {
  font-size: 0.74rem !important;
  max-width: 80px !important;
}
[data-theme="taubmans"] .bucket-icon {
  width: 40px !important;
  height: 40px !important;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 18px !important;
  height: 18px !important;
}
[data-theme="taubmans"] .bucket-name {
  font-size: 1rem !important;
}
[data-theme="taubmans"] .bucket-desc {
  font-size: 0.78rem !important;
}
[data-theme="taubmans"] .bucket-controls .bucket-reset-btn {
  width: 24px !important;
  height: 24px !important;
}
[data-theme="taubmans"] .bucket-chevron {
  font-size: 1.3rem !important;
  padding-left: 2px !important;
}

/* ─────────────────────────────────────────────
   3. IMAGE THUMBNAIL — relax over-constrained sizing
   Original markup is roughly:
     <div class="img-thumb-wrap" active>
       <a class="img-thumb"><img></a>
       <text label somewhere — could be span, p, or sibling div>
     </div>
   v7 forced it to flex-row at 64×50, which fought the natural layout.
   Reset to a more flexible structure that lets the markup breathe.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .img-thumb-wrap {
  position: relative !important;
  display: block !important;            /* was flex — let internals lay out naturally */
  padding: 0 !important;                /* let inner anchor own padding */
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  cursor: pointer !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
[data-theme="taubmans"] .img-thumb-wrap:hover {
  border-color: var(--tb-line-strong) !important;
}
[data-theme="taubmans"] .img-thumb-wrap[active],
[data-theme="taubmans"] .img-thumb-wrap.active {
  border: 2px solid var(--tb-teal) !important;
  padding: 0 !important;
}

/* The thumbnail anchor itself — let it be its natural size */
[data-theme="taubmans"] .img-thumb-wrap .img-thumb,
[data-theme="taubmans"] .img-thumb-wrap a.img-thumb {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  max-height: 120px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  flex-shrink: unset !important;
}
[data-theme="taubmans"] .img-thumb-wrap .img-thumb img,
[data-theme="taubmans"] .img-thumb-wrap a.img-thumb img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 120px !important;
  object-fit: cover !important;
}

/* Active checkmark badge — lower-right of the active thumbnail */
[data-theme="taubmans"] .img-thumb-wrap[active]::after,
[data-theme="taubmans"] .img-thumb-wrap.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #fff;
  z-index: 2;
  pointer-events: none;
}

/* Whatever text label exists inside the wrap — make it visible */
[data-theme="taubmans"] .img-thumb-wrap > *:not(.img-thumb):not(a.img-thumb):not(img) {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--tb-ink) !important;
  background: #fff !important;
  line-height: 1.3 !important;
}
[data-theme="taubmans"] .img-thumb-wrap[active] > *:not(.img-thumb):not(a.img-thumb):not(img),
[data-theme="taubmans"] .img-thumb-wrap.active > *:not(.img-thumb):not(a.img-thumb):not(img) {
  background: var(--tb-teal-soft) !important;
}

/* ─────────────────────────────────────────────
   4. RESULT ROW — relax truncation, allow 2-line title
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .result-item {
  align-items: flex-start !important;
  padding: 10px !important;
}
[data-theme="taubmans"] .result-thumb {
  flex-shrink: 0 !important;
  width: 56px !important;
  height: 44px !important;
}
[data-theme="taubmans"] .result-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
[data-theme="taubmans"] .result-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  line-height: 1.25 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;          /* re-enable for line-clamp */
}
[data-theme="taubmans"] .result-sub {
  white-space: normal !important;
  font-size: 0.72rem !important;
  color: var(--tb-muted) !important;
  line-height: 1.4 !important;
}
[data-theme="taubmans"] .result-sub .status-chip {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 0;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--tb-stone);
  color: var(--tb-muted);
  text-transform: lowercase;
}

/* ─────────────────────────────────────────────
   END v7.2
   ───────────────────────────────────────────── */
/* ============================================================
   TAUBMANS DESIGN SYSTEM v7.3 — Round 2 cleanup II
   - Reduce arch swatch + chevron to fit cleanly in 420px sidebar
   - Force preset cards to also fit
   - Surface the Next-step card by default (no JS-dependent visibility)
   ============================================================ */
/* TB_DS_V7_3_MARKER */

/* ─────────────────────────────────────────────
   1. BUCKET CARDS — shrink the right-side cluster
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket {
  padding: 14px 12px !important;
}
[data-theme="taubmans"] .bucket-header {
  gap: 8px !important;
}
[data-theme="taubmans"] .bucket-controls {
  gap: 6px !important;
}
/* Smaller chip — 60×64 */
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 60px !important;
  height: 64px !important;
  min-width: 60px !important;
  min-height: 64px !important;
}
[data-theme="taubmans"] .bucket-color-name {
  font-size: 0.7rem !important;
  max-width: 70px !important;
  line-height: 1.2 !important;
}
/* Chevron 1rem — slimmer */
[data-theme="taubmans"] .bucket-chevron {
  font-size: 1rem !important;
  padding-left: 0 !important;
  margin-right: 2px !important;
  align-self: center !important;
}
/* Reset btn slightly smaller */
[data-theme="taubmans"] .bucket-controls .bucket-reset-btn {
  width: 22px !important;
  height: 22px !important;
  font-size: 0.85rem !important;
}
/* Bucket icon: keep at 40px */
[data-theme="taubmans"] .bucket-icon {
  width: 40px !important;
  height: 40px !important;
}

/* ─────────────────────────────────────────────
   2. PRESET CARDS — reduce preview area
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card {
  padding: 14px 12px !important;
  gap: 12px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  height: 52px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 32px !important;
  height: 52px !important;
  flex: 0 0 32px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-chevron {
  font-size: 1.1rem !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 0.95rem !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  font-size: 0.78rem !important;
}

/* ─────────────────────────────────────────────
   3. RIGHT SIDEBAR — slightly tighter inner padding
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls .controls-scroll {
  padding: 22px 16px !important;
}

/* ─────────────────────────────────────────────
   4. NEXT-STEP CARD — surface by default
   The card markup has hidden="" by default. We override it
   so the card is visible with a default state, even if JS hasn't
   populated it yet. JS will refine the bucket name when state loads.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .next-step-card {
  display: flex !important; /* override [hidden] for this round */
}
[data-theme="taubmans"] .next-step-card[hidden] {
  display: flex !important; /* explicitly override the HTML hidden attribute */
}
/* If JS later determines all buckets are coloured, it adds .all-set class which hides the card */
[data-theme="taubmans"] .next-step-card.all-set,
[data-theme="taubmans"] .next-step-card[data-state="hidden"] {
  display: none !important;
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v8 — Round 3 (toolbar + tip)
   ============================================================ */
/* TB_DS_V8_MARKER */

/* ─────────────────────────────────────────────
   1. CANVAS TOOLBAR — black floating pill
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .canvas-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px !important;
  margin: 16px auto 0 !important;
  background: #1a1a1a !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18) !important;
  position: relative;
  z-index: 5;
}
[data-theme="taubmans"] .canvas-toolbar-wrap {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  pointer-events: none;
}
[data-theme="taubmans"] .canvas-toolbar-wrap .canvas-toolbar {
  pointer-events: auto;
}

/* Toolbar buttons */
[data-theme="taubmans"] .canvas-toolbar button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
[data-theme="taubmans"] .canvas-toolbar button:hover {
  background: rgba(255,255,255,0.1) !important;
}
[data-theme="taubmans"] .canvas-toolbar button.active {
  background: var(--tb-green) !important;
}
[data-theme="taubmans"] .canvas-toolbar button svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
  display: block;
}

/* ─────────────────────────────────────────────
   2. TIP CALLOUT — cream strip with lightbulb
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .tip-callout {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 14px 16px 0 !important;
  padding: 14px 18px !important;
  background: var(--tb-cream) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--tb-text) !important;
}
[data-theme="taubmans"] .tip-callout[hidden],
[data-theme="taubmans"] .tip-callout.tip-dismissed {
  display: none !important;
}
[data-theme="taubmans"] .tip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #FFF4D6 !important;
  color: #E0A800 !important;
}
[data-theme="taubmans"] .tip-icon svg {
  width: 16px !important;
  height: 16px !important;
}
[data-theme="taubmans"] .tip-text {
  flex: 1 1 auto !important;
  line-height: 1.45 !important;
}
[data-theme="taubmans"] .tip-text strong {
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
}
[data-theme="taubmans"] .tip-dismiss {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  color: var(--tb-muted) !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .tip-dismiss:hover {
  background: rgba(0,0,0,0.04) !important;
  color: var(--tb-ink) !important;
}

/* ─────────────────────────────────────────────
   3. PAN MODE — visual feedback on canvas
   ───────────────────────────────────────────── */
[data-theme="taubmans"].tb-pan-mode .preview-canvas,
[data-theme="taubmans"] body.tb-pan-mode .preview-canvas,
body[data-theme="taubmans"].tb-pan-mode .preview-canvas {
  cursor: grab !important;
}
[data-theme="taubmans"].tb-pan-mode .preview-canvas.tb-panning,
[data-theme="taubmans"] body.tb-pan-mode .preview-canvas.tb-panning,
body[data-theme="taubmans"].tb-pan-mode .preview-canvas.tb-panning {
  cursor: grabbing !important;
}
/* During pan mode, suppress click-to-select on labels */
[data-theme="taubmans"].tb-pan-mode .pe-label,
body[data-theme="taubmans"].tb-pan-mode .pe-label {
  pointer-events: none !important;
  cursor: grab !important;
}

/* The wrap that gets transformed during pan */
[data-theme="taubmans"] .compare-wrap {
  transform-origin: center center;
  will-change: transform;
}

/* Fullscreen mode — ensure compare-wrap fills the screen */
[data-theme="taubmans"] .compare-wrap:fullscreen,
[data-theme="taubmans"] .compare-wrap:-webkit-full-screen {
  background: #000;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="taubmans"] .compare-wrap:fullscreen img,
[data-theme="taubmans"] .compare-wrap:-webkit-full-screen img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v8.1 — Round 3 cleanup
   - Toolbar + Tip layout fix
   - Right sidebar tightening
   - Bucket-desc hidden (target shows minimal copy)
   ============================================================ */
/* TB_DS_V8_1_MARKER */

/* ─────────────────────────────────────────────
   1. CANVAS / TOOLBAR / TIP LAYOUT FIX
   The .preview-canvas was enlarging to fill available height,
   pushing the toolbar to the bottom. Constrain it to fit content.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preview {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
[data-theme="taubmans"] .preview-canvas {
  flex: 0 0 auto !important;       /* don't grow to fill remaining space */
  height: auto !important;
  min-height: 0 !important;
}

/* Toolbar wrap — sits below canvas, full-width centred, NO extra height */
[data-theme="taubmans"] .canvas-toolbar-wrap {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
  padding: 0 16px !important;
}
[data-theme="taubmans"] .canvas-toolbar {
  margin: 0 auto !important;       /* override v8's auto-top margin */
}

/* Tip callout — directly below toolbar, hugs full width minus padding */
[data-theme="taubmans"] .tip-callout {
  margin: 14px 16px 16px !important;
}

/* ─────────────────────────────────────────────
   2. RIGHT SIDEBAR — tighten everything
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
}
[data-theme="taubmans"] aside.controls .controls-scroll {
  padding: 18px 14px !important;
}
[data-theme="taubmans"] aside.controls .section {
  margin-bottom: 18px !important;
}
[data-theme="taubmans"] aside.controls .section-title {
  margin: 0 0 10px !important;
  font-size: 0.7rem !important;
}

/* ─────────────────────────────────────────────
   3. PRESET CARDS — tighter, single preview tile
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card {
  padding: 14px !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 0.95rem !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  font-size: 0.75rem !important;
  margin-top: 2px !important;
}
/* Hide all but the first preset-trigger-mini in the preview area
   This is a CSS-only fallback in case JS edit misses */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-preview .preset-trigger-mini ~ .preset-trigger-mini {
  display: none !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  height: 56px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 34px !important;
  height: 56px !important;
  flex: 0 0 34px !important;
}

/* ─────────────────────────────────────────────
   4. BUCKET CARDS — hide bucket-desc by default
   Target mockup shows minimal copy; descriptions take up too much space.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket-desc {
  display: none !important;
}
/* If user wants the description back later, an .expanded class on .bucket would show it.
   For now: hidden everywhere. */

/* Tighter bucket card overall */
[data-theme="taubmans"] .bucket {
  padding: 14px 12px !important;
  margin-bottom: 8px !important;
}
[data-theme="taubmans"] .bucket-header {
  gap: 10px !important;
  align-items: center !important;
}
[data-theme="taubmans"] .bucket-info {
  gap: 6px !important;
}
[data-theme="taubmans"] .bucket-name {
  font-size: 1rem !important;
  margin: 0 !important;
}
[data-theme="taubmans"] .bucket-count {
  font-size: 0.74rem !important;
  padding: 3px 8px !important;
}
[data-theme="taubmans"] .bucket-icon {
  width: 38px !important;
  height: 38px !important;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 17px !important;
  height: 17px !important;
}
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 64px !important;
  height: 68px !important;
  min-width: 64px !important;
  min-height: 68px !important;
}
[data-theme="taubmans"] .bucket-color-name {
  font-size: 0.7rem !important;
  max-width: 70px !important;
}
[data-theme="taubmans"] .bucket-controls .bucket-reset-btn {
  width: 22px !important;
  height: 22px !important;
}

/* ─────────────────────────────────────────────
   5. NOTES textarea — tighter
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls textarea {
  min-height: 60px !important;
  font-size: 0.85rem !important;
}

/* ─────────────────────────────────────────────
   6. RESET / READY-TO-PAINT BUTTONS — tighter
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls #resetSelectionsBtn {
  padding: 10px 16px !important;
}
[data-theme="taubmans"] aside.controls .ready-to-paint,
[data-theme="taubmans"] aside.controls [class*="paint-btn"],
[data-theme="taubmans"] aside.controls #generateBtn {
  padding: 12px 20px !important;
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v8.2 — precise target match
   - Restore bucket-desc visibility (rolled back from v8.1)
   - Hide '8 schemes available' subtitle (target shows none)
   - Sidebar sizing for ~1200px viewport
   ============================================================ */
/* TB_DS_V8_2_MARKER */

/* ─────────────────────────────────────────────
   1. ROLLBACK — bucket-desc visible (target shows it)
   v8.1 hid this; revert.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .bucket-desc {
  display: block !important;
  font-size: 0.78rem !important;
  color: var(--tb-muted) !important;
  line-height: 1.4 !important;
  margin: 4px 0 0 !important;
}

/* ─────────────────────────────────────────────
   2. PRESET CARDS — hide subtitle, match target
   ───────────────────────────────────────────── */
/* TB_V11_31B_PRESET_FIX */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  display: block !important;
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}
/* Title centred vertically since subtitle is gone */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-text {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

/* ─────────────────────────────────────────────
   3. SIDEBAR SIZING — for 1206px viewport
   Left sidebar ~270px + right sidebar 380px = 650px chrome
   Leaves ~556px for canvas. Comfortable.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] aside.controls {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  flex-shrink: 0 !important;
}

/* Bucket cards — comfortable, with desc shown */
[data-theme="taubmans"] .bucket {
  padding: 16px 14px !important;
  margin-bottom: 10px !important;
}
[data-theme="taubmans"] .bucket-info {
  gap: 6px !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .bucket-name {
  font-size: 1.05rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
[data-theme="taubmans"] .bucket-count {
  font-size: 0.74rem !important;
  padding: 3px 8px !important;
  white-space: nowrap !important;
}
[data-theme="taubmans"] .bucket-icon {
  width: 38px !important;
  height: 38px !important;
}
[data-theme="taubmans"] .bucket-icon svg {
  width: 17px !important;
  height: 17px !important;
}
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 64px !important;
  height: 68px !important;
  min-width: 64px !important;
  min-height: 68px !important;
}
[data-theme="taubmans"] .bucket-color-name {
  font-size: 0.7rem !important;
  max-width: 70px !important;
  font-style: italic !important;
}

/* Right sidebar inner padding */
[data-theme="taubmans"] aside.controls .controls-scroll {
  padding: 18px 14px !important;
}

/* TB_DS_V8_3_MARKER — sidebar widen to 440px */
[data-theme="taubmans"] aside.controls {
  width: 440px !important;
  min-width: 440px !important;
  max-width: 440px !important;
}
[data-theme="taubmans"] aside.controls .controls-scroll {
  padding: 20px 16px !important;
}
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 76px !important;
  height: 80px !important;
  min-width: 76px !important;
  min-height: 80px !important;
}

/* TB_DS_V8_4_MARKER — force-fit cards inside sidebar */
[data-theme="taubmans"] aside.controls,
[data-theme="taubmans"] aside.controls * {
  box-sizing: border-box !important;
}
[data-theme="taubmans"] aside.controls .controls-scroll {
  overflow-x: hidden !important;
}
[data-theme="taubmans"] aside.controls .section,
[data-theme="taubmans"] aside.controls .bucket,
[data-theme="taubmans"] aside.controls .preset-trigger-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Force bucket header to never overflow */
[data-theme="taubmans"] .bucket-header {
  overflow: hidden !important;
}
/* Shrink chip a touch more if needed */
[data-theme="taubmans"] .bucket-controls .color-chip[data-color-for] {
  width: 64px !important;
  height: 68px !important;
  min-width: 64px !important;
  min-height: 68px !important;
}
[data-theme="taubmans"] .bucket-color-name {
  max-width: 64px !important;
}

/* TB_DS_V8_5_MARKER — kill horizontal overflow */
[data-theme="taubmans"] html, 
[data-theme="taubmans"] body { 
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
[data-theme="taubmans"] .app {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
[data-theme="taubmans"] main.editor,
[data-theme="taubmans"] .main-area {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}
/* The canvas image - allow it to scale down rather than force layout wide */
[data-theme="taubmans"] .preview-canvas img,
[data-theme="taubmans"] .compare-wrap img {
  max-width: 100% !important;
  height: auto !important;
}


/* TB_DS_V8_7_MARKER — let canvas shrink so right sidebar fits */
[data-theme="taubmans"] .preview,
[data-theme="taubmans"] .preview-canvas,
[data-theme="taubmans"] .compare-wrap {
  min-width: 0 !important;
}


/* TB_DS_V8_9_MARKER — fix grid math on .main-area (the actual preview+controls container) */
[data-theme="taubmans"] .main-area {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 440px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .main-area > .preview {
  min-width: 0 !important;
  width: 100% !important;
}
[data-theme="taubmans"] .main-area > aside.controls {
  width: 440px !important;
  flex-shrink: 0 !important;
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v9 — match target exactly
   1. Header overhaul: tabs centred, Download/Open at right
   2. Preset cards: arches in own row below title
   3. Canvas labels: neutral until clicked
   4. Active label: dark green
   ============================================================ */
/* TB_DS_V9_MARKER */

/* ─────────────────────────────────────────────
   1. TOP HEADER — slot tabs in centre, download/open at right
   JS will move .view-tabs and .preview-btns into the header
   on page load. We just style them.
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .header {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 0 28px !important;
  gap: 24px !important;
}
[data-theme="taubmans"] .header .header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
[data-theme="taubmans"] .header .header-center {
  display: flex;
  justify-content: center;
}
[data-theme="taubmans"] .header .header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
}

/* The tabs that get teleported into the header */
[data-theme="taubmans"] .header .view-tabs {
  display: inline-flex !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 4px !important;
}
[data-theme="taubmans"] .header .view-tabs button {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 8px 22px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.15s !important;
}
[data-theme="taubmans"] .header .view-tabs button:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.08) !important;
}
[data-theme="taubmans"] .header .view-tabs button.active {
  background: #fff !important;
  color: var(--tb-green) !important;
}

/* Download / Open buttons in header — outline white pills */
[data-theme="taubmans"] .header .preview-btns {
  display: inline-flex !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .header .preview-btns[hidden] {
  display: none !important;
}
[data-theme="taubmans"] .header #downloadBtn,
[data-theme="taubmans"] .header #openBtn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
[data-theme="taubmans"] .header #downloadBtn:hover,
[data-theme="taubmans"] .header #openBtn:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
[data-theme="taubmans"] .header #downloadBtn svg,
[data-theme="taubmans"] .header #openBtn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hide the OLD preview-bar in the canvas area now that contents moved away */
[data-theme="taubmans"] .preview-bar {
  display: none !important;
}

/* ─────────────────────────────────────────────
   2. PRESET CARDS — arches inline row, no chevron clipping
   ───────────────────────────────────────────── */
[data-theme="taubmans"] .preset-trigger-card {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "title chevron"
    "preview chevron" !important;
  gap: 12px 14px !important;
  align-items: center !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
}
[data-theme="taubmans"] .preset-trigger-card:hover {
  border-color: var(--tb-line-strong) !important;
  background: var(--tb-stone) !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-text {
  grid-area: title !important;
  display: block !important;
  height: auto !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  line-height: 1.2 !important;
}
/* TB_V11_31B_PRESET_FIX */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  display: block !important;
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-preview {
  grid-area: preview !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: flex-end !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  width: auto !important;
  height: 28px !important;
  background: transparent !important;
  border-radius: 0 !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 22px !important;
  height: 28px !important;
  flex: 0 0 22px !important;
  display: block !important;
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-chevron {
  grid-area: chevron !important;
  font-size: 1.4rem !important;
  color: var(--tb-muted) !important;
  font-weight: 300 !important;
  align-self: center !important;
}

/* Hide any extra preview tiles beyond the first (defensive — JS edit also fixes) */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-preview .preset-trigger-mini ~ .preset-trigger-mini {
  display: none !important;
}
}

/* TB_DS_V9_1_MARKER — right sidebar bg + transparent section headers */
[data-theme="taubmans"] aside.controls {
  background: var(--tb-stone) !important;
}
[data-theme="taubmans"] aside.controls .section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="taubmans"] aside.controls .section-title {
  background: transparent !important;
  padding-left: 0 !important;
}
[data-theme="taubmans"] aside.controls .preset-trigger-card,
[data-theme="taubmans"] aside.controls .bucket,
[data-theme="taubmans"] aside.controls .active-scheme-card,
[data-theme="taubmans"] aside.controls textarea {
  background: #fff !important;
}
[data-theme="taubmans"] aside.controls .controls-footer {
  background: var(--tb-stone) !important;
}

/* TB_DS_V9_2_MARKER — make sidebar grey more obviously grey */
[data-theme="taubmans"] aside.controls {
  background: #F7F7F5 !important;
}
[data-theme="taubmans"] aside.controls .controls-footer {
  background: #F7F7F5 !important;
}

/* TB_DS_V9_3_MARKER — sidebar 440 -> 400 */
[data-theme="taubmans"] aside.controls {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
}
[data-theme="taubmans"] .main-area {
  grid-template-columns: minmax(0, 1fr) 400px !important;
}
[data-theme="taubmans"] .main-area > aside.controls {
  width: 400px !important;
}

/* TB_DS_V9_3_MARKER — sidebar 440 -> 400 */
[data-theme="taubmans"] aside.controls {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
}
[data-theme="taubmans"] .main-area {
  grid-template-columns: minmax(0, 1fr) 400px !important;
}
[data-theme="taubmans"] .main-area > aside.controls {
  width: 400px !important;
}

/* TB_DS_V9_4_MARKER — superseded by TB_V11_31C_PRESET_FIX (smaller cards) */
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  height: 28px !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 22px !important;
  height: 28px !important;
  flex: 0 0 22px !important;
}

/* TB_DS_V9_5_MARKER — arch ALL preset/scheme swatches */

/* 1. Active scheme card swatches (sidebar) */
[data-theme="taubmans"] .asc-swatch {
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 32px !important;
  display: inline-block !important;
}

/* 2. Preset grid modal — scheme card swatches */
[data-theme="taubmans"] .preset-card .walls-swatch,
[data-theme="taubmans"] .preset-card .trim-swatch,
[data-theme="taubmans"] .preset-card .features-swatch,
[data-theme="taubmans"] .preset-archived-row .walls-swatch,
[data-theme="taubmans"] .preset-archived-row .trim-swatch,
[data-theme="taubmans"] .preset-archived-row .features-swatch {
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* The container for those swatches — use flex with gap so arches sit side-by-side */
[data-theme="taubmans"] .preset-swatches {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: flex-end !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
[data-theme="taubmans"] .preset-card .walls-swatch,
[data-theme="taubmans"] .preset-card .trim-swatch,
[data-theme="taubmans"] .preset-card .features-swatch {
  flex: 1 1 0 !important;
  height: 64px !important;
  min-width: 0 !important;
}

/* 3. Edit modal — top preview banners */
[data-theme="taubmans"] .scheme-preview-block,
[data-theme="taubmans"] .walls-preview,
[data-theme="taubmans"] .trim-preview,
[data-theme="taubmans"] .features-preview {
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
/* Preview banner row container */
[data-theme="taubmans"] .preset-edit-preview {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: flex-end !important;
  background: transparent !important;
}
[data-theme="taubmans"] .preset-edit-preview .scheme-preview-block {
  flex: 1 1 0 !important;
  height: 80px !important;
  min-width: 0 !important;
}

/* TB_DS_V9_7_MARKER — header tabs in pill group */

/* Wrap the .view-tabs as a pill container */
[data-theme="taubmans"] .header .view-tabs {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 6px !important;
  gap: 4px !important;
}
[data-theme="taubmans"] .header .view-tabs button {
  padding: 9px 22px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #fff !important;
}
[data-theme="taubmans"] .header .view-tabs button:hover {
  background: rgba(255,255,255,0.10) !important;
}
[data-theme="taubmans"] .header .view-tabs button.active {
  background: #fff !important;
  color: var(--tb-ink) !important;
}

/* Header overall — slightly taller, gradient for depth (matches reference) */
[data-theme="taubmans"] .header {
  height: 72px !important;
  background: linear-gradient(135deg, #0F3D2E, #0A2A20) !important;
}

/* TB_DS_V9_8_MARKER — header layout fix */

/* Right slot: user pill must be at far right, preview-btns to its left */
[data-theme="taubmans"] .header .header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
/* Force user nav to come AFTER preview-btns visually */
[data-theme="taubmans"] .header .header-right .preview-btns {
  order: 1 !important;
}
[data-theme="taubmans"] .header .header-right .header-nav {
  order: 2 !important;
}

/* Download / Open — solid pill styling, override inline icon-btn class */
[data-theme="taubmans"] .header #downloadBtn,
[data-theme="taubmans"] .header #openBtn,
[data-theme="taubmans"] .header .preview-btns a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
}
[data-theme="taubmans"] .header #downloadBtn:hover,
[data-theme="taubmans"] .header #openBtn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
[data-theme="taubmans"] .header #downloadBtn svg,
[data-theme="taubmans"] .header #openBtn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .header .preview-btns {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* TB_DS_V9_8_MARKER — header layout fix */

/* Right slot: user pill must be at far right, preview-btns to its left */
[data-theme="taubmans"] .header .header-right {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
/* Force user nav to come AFTER preview-btns visually */
[data-theme="taubmans"] .header .header-right .preview-btns {
  order: 1 !important;
}
[data-theme="taubmans"] .header .header-right .header-nav {
  order: 2 !important;
}

/* Download / Open — solid pill styling, override inline icon-btn class */
[data-theme="taubmans"] .header #downloadBtn,
[data-theme="taubmans"] .header #openBtn,
[data-theme="taubmans"] .header .preview-btns a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 16px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
}
[data-theme="taubmans"] .header #downloadBtn:hover,
[data-theme="taubmans"] .header #openBtn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.40) !important;
}
[data-theme="taubmans"] .header #downloadBtn svg,
[data-theme="taubmans"] .header #openBtn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .header .preview-btns {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* TB_DS_V9_9_MARKER — kill .icon-btn defaults inside header for Download/Open */
[data-theme="taubmans"] .header .preview-btns a.icon-btn,
[data-theme="taubmans"] .header a#downloadBtn.icon-btn,
[data-theme="taubmans"] .header a#openBtn.icon-btn {
  /* Reset everything from .icon-btn */
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 999px !important;

  /* Apply target pill styling */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  margin: 0 !important;
  cursor: pointer !important;
  text-indent: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}
[data-theme="taubmans"] .header .preview-btns a.icon-btn:hover,
[data-theme="taubmans"] .header a#downloadBtn.icon-btn:hover,
[data-theme="taubmans"] .header a#openBtn.icon-btn:hover {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
[data-theme="taubmans"] .header .preview-btns a.icon-btn svg,
[data-theme="taubmans"] .header a#downloadBtn.icon-btn svg,
[data-theme="taubmans"] .header a#openBtn.icon-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Container — flex with gap */
[data-theme="taubmans"] .header .preview-btns {
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
/* ============================================================
   TAUBMANS DESIGN SYSTEM v11 — LEFT SIDEBAR REDESIGN (project.php)
   Header (folder icon + project title + Updated timestamp)
   Source Image card (Active badge, menu, caption row)
   Recent Results (clean rows, Current badge, chevron + 3-dots)
   Next Step card (mint bg, door icon, Continue pill)
   ============================================================ */
/* TB_DS_V11_MARKER */

/* ───── PROJECT HEADER ───── */
[data-theme="taubmans"] .sidebar .project-info {
  padding: 0 !important;
  margin-bottom: 18px !important;
}
[data-theme="taubmans"] .sidebar .project-info-head {
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
/* Folder icon tile */
[data-theme="taubmans"] .sidebar .project-info-head::before {
  content: '' !important;
  grid-row: 1 !important;
  grid-column: 1 !important;
  width: 56px !important;
  height: 56px !important;
  background: #E6F1ED !important;
  border-radius: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23087766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 28px !important;
}
[data-theme="taubmans"] .sidebar .project-info-head > div:first-child {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
[data-theme="taubmans"] .sidebar .project-info h1 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
[data-theme="taubmans"] .sidebar .project-info h1::after {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg>") !important;
  display: inline-block !important;
  background-size: 14px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .project-info p {
  font-size: 0.78rem !important;
  color: var(--tb-muted) !important;
  margin: 0 !important;
}
/* Hide the old project-header-actions buttons (Presentations + delete) */
[data-theme="taubmans"] .sidebar .project-header-actions {
  display: none !important;
}

/* New full-width Presentations button (injected via PHP/JS) */
[data-theme="taubmans"] .sidebar .tb-presentations-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--tb-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif !important;
  margin: 0 0 18px !important;
  cursor: pointer !important;
}
[data-theme="taubmans"] .sidebar .tb-presentations-btn:hover {
  background: var(--tb-green-deep) !important;
}
[data-theme="taubmans"] .sidebar .tb-presentations-btn .tb-pres-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
[data-theme="taubmans"] .sidebar .tb-presentations-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* Hide the side-divider line between header and images section */
[data-theme="taubmans"] .sidebar .side-divider {
  display: none !important;
}

/* ───── SOURCE IMAGE PANEL ───── */
[data-theme="taubmans"] .sidebar .images-panel .panel-head {
  padding: 0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
/* Rewrite IMAGES → SOURCE IMAGE via CSS pseudo */
[data-theme="taubmans"] .sidebar .images-panel .panel-head > span:first-child {
  font-size: 0 !important;
}
[data-theme="taubmans"] .sidebar .images-panel .panel-head > span:first-child::before {
  content: 'SOURCE IMAGE' !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--tb-muted) !important;
}
/* "+ Add image" — outlined teal pill (currently uppercase ADD) */
[data-theme="taubmans"] .sidebar .images-panel .add-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 1px solid var(--tb-teal) !important;
  border-radius: 999px !important;
  color: var(--tb-teal) !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
[data-theme="taubmans"] .sidebar .images-panel .add-btn::before {
  content: '+ Add image' !important;
  font-size: 0.78rem !important;
}
[data-theme="taubmans"] .sidebar .images-panel .add-btn svg {
  display: none !important;
}
[data-theme="taubmans"] .sidebar .images-panel .add-btn:hover {
  background: var(--tb-teal) !important;
  color: #fff !important;
}

/* Image card layout */
[data-theme="taubmans"] .sidebar .images-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}
[data-theme="taubmans"] .sidebar .img-thumb-wrap {
  position: relative !important;
  background: #fff !important;
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .sidebar .img-thumb-wrap[active],
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active {
  border-color: var(--tb-green) !important;
}
[data-theme="taubmans"] .sidebar .img-thumb {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}
[data-theme="taubmans"] .sidebar .img-thumb img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  display: block !important;
}
/* Active badge — top left */
[data-theme="taubmans"] .sidebar .img-thumb-wrap[active]::before,
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  content: 'Active' !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(255,255,255,0.96) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
/* 3-dots menu — top right (use existing img-delete-btn re-styled) */
[data-theme="taubmans"] .sidebar .img-delete-btn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.96) !important;
  color: var(--tb-ink) !important;
  border: none !important;
  font-size: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
[data-theme="taubmans"] .sidebar .img-delete-btn::before {
  content: '⋮' !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
[data-theme="taubmans"] .sidebar .img-delete-btn:hover {
  background: #fff !important;
}
/* Hide the redetect button (clutter) */
[data-theme="taubmans"] .sidebar .img-redetect-btn {
  display: none !important;
}
/* Hide the existing img-meta that overlays the thumb */
[data-theme="taubmans"] .sidebar .img-thumb .img-meta {
  display: none !important;
}
/* Caption row injected via JS as .tb-img-caption */
[data-theme="taubmans"] .sidebar .tb-img-caption {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border-top: 1px solid var(--tb-line) !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-icon {
  width: 36px !important;
  height: 36px !important;
  background: var(--tb-stone) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-muted) !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-text {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-name {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-sub {
  font-size: 0.74rem !important;
  color: var(--tb-muted) !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-check {
  width: 22px !important;
  height: 22px !important;
  background: var(--tb-green) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

/* ───── RECENT RESULTS ───── */
[data-theme="taubmans"] .sidebar .results-panel .panel-head {
  padding: 0 !important;
  margin: 0 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
[data-theme="taubmans"] .sidebar .results-panel .panel-head > span:first-child {
  font-size: 0 !important;
}
[data-theme="taubmans"] .sidebar .results-panel .panel-head > span:first-child::before {
  content: 'RECENT RESULTS' !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--tb-muted) !important;
}
/* Hide the count pill (replaced by "View all" link injected via JS) */
[data-theme="taubmans"] .sidebar .results-panel .panel-head .pill {
  display: none !important;
}
/* "View all" link injected via JS */
[data-theme="taubmans"] .sidebar .tb-view-all {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--tb-teal) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
}

/* Result row redesign */
[data-theme="taubmans"] .sidebar .results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
[data-theme="taubmans"] .sidebar .result-row {
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 10px !important;
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .sidebar .result-row.is-current {
  border-left: 3px solid var(--tb-green) !important;
}
[data-theme="taubmans"] .sidebar .result-row .result-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  padding: 10px 6px 10px 10px !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
  cursor: pointer !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .sidebar .result-thumb {
  width: 64px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--tb-stone) !important;
}
[data-theme="taubmans"] .sidebar .result-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
[data-theme="taubmans"] .sidebar .result-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
[data-theme="taubmans"] .sidebar .result-title {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
[data-theme="taubmans"] .sidebar .result-sub {
  font-size: 0.72rem !important;
  color: var(--tb-muted) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hide the existing status-chip and finish/speed bullets in sub */
[data-theme="taubmans"] .sidebar .result-sub .status-chip {
  display: none !important;
}
/* "Current" badge — injected via JS as .tb-current-badge */
[data-theme="taubmans"] .sidebar .tb-current-badge {
  display: inline-block !important;
  margin-top: 2px !important;
  padding: 2px 7px !important;
  background: #E6F4EE !important;
  color: var(--tb-green) !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}
/* Right-side actions: chevron + 3-dots (replaces ✕ delete) */
[data-theme="taubmans"] .sidebar .result-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding-right: 6px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .result-chevron,
[data-theme="taubmans"] .sidebar .result-menu-btn {
  width: 26px !important;
  height: 26px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--tb-muted) !important;
  border-radius: 6px !important;
}
[data-theme="taubmans"] .sidebar .result-chevron:hover,
[data-theme="taubmans"] .sidebar .result-menu-btn:hover {
  background: var(--tb-stone) !important;
  color: var(--tb-ink) !important;
}
/* Hide existing delete form */
[data-theme="taubmans"] .sidebar .result-delete-form {
  display: none !important;
}

/* 3-dots dropdown menu */
[data-theme="taubmans"] .tb-result-menu {
  position: absolute !important;
  background: #fff !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 6px !important;
  min-width: 160px !important;
  z-index: 100 !important;
  display: none !important;
}
[data-theme="taubmans"] .tb-result-menu.show {
  display: block !important;
}
[data-theme="taubmans"] .tb-result-menu button {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 8px 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 6px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--tb-ink) !important;
  cursor: pointer !important;
}
[data-theme="taubmans"] .tb-result-menu button:hover {
  background: var(--tb-stone) !important;
}
[data-theme="taubmans"] .tb-result-menu button.danger {
  color: #B72E2E !important;
}
[data-theme="taubmans"] .tb-result-menu button.danger:hover {
  background: #FCEBEB !important;
}

/* ───── NEXT STEP CARD — mint bg, door icon, Continue pill ───── */
[data-theme="taubmans"] .sidebar .next-step-card {
  display: grid !important;
  grid-template-columns: 44px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  background: #DFF1EC !important;
  border: 1px solid #C5E2D9 !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  margin-top: 16px !important;
  width: 100% !important;
  text-align: left !important;
}
[data-theme="taubmans"] .sidebar .next-step-card:hover {
  background: #D4EAE3 !important;
}
[data-theme="taubmans"] .sidebar .next-step-icon {
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.65) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-green) !important;
  /* Replace the inline sparkle SVG content with a door icon via background-image */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23087766' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 22V4a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v18'/><path d='M2 22h20'/><circle cx='15' cy='12' r='1'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* Hide the inline sparkle SVG since door comes from CSS background */
[data-theme="taubmans"] .sidebar .next-step-icon svg {
  display: none !important;
}
[data-theme="taubmans"] .sidebar .next-step-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .sidebar .next-step-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: var(--tb-green) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
[data-theme="taubmans"] .sidebar .next-step-title {
  font-size: 0.82rem !important;
  color: var(--tb-ink) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
[data-theme="taubmans"] .sidebar .next-step-target {
  font-weight: 700 !important;
  display: block !important;
}
/* Replace the chevron arrow with a "Continue >" pill */
[data-theme="taubmans"] .sidebar .next-step-chevron {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 7px 14px !important;
  background: #fff !important;
  border: 1px solid var(--tb-teal) !important;
  border-radius: 999px !important;
  color: var(--tb-teal) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  font-family: 'DM Sans', sans-serif !important;
}
[data-theme="taubmans"] .sidebar .next-step-chevron::before {
  content: 'Continue' !important;
}
[data-theme="taubmans"] .sidebar .next-step-chevron::after {
  content: '›' !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
}

/* TB_DS_V11_1_MARKER — widen left sidebar to 400px */
[data-theme="taubmans"] main.editor {
  grid-template-columns: 400px 1fr !important;
}
[data-theme="taubmans"] aside.sidebar {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
}

/* TB_DS_V11_2_MARKER — show full image + reposition redetect/delete */

/* Show full image — use aspect-ratio not fixed height */
[data-theme="taubmans"] .sidebar .img-thumb img {
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Re-detect button — small icon, top-left INSIDE the image (not overlapping caption) */
[data-theme="taubmans"] .sidebar .img-redetect-btn {
  display: flex !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(255,255,255,0.96) !important;
  border: none !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  color: var(--tb-ink) !important;
  z-index: 3 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  cursor: pointer !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .sidebar .img-redetect-btn:hover {
  background: #fff !important;
}

/* Active badge needs to move right to make room for redetect button */
[data-theme="taubmans"] .sidebar .img-thumb-wrap[active]::before,
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  left: 50px !important;  /* shift right to clear redetect button at left:10 */
}

/* Caption row — make sure no overlap with anything */
[data-theme="taubmans"] .sidebar .tb-img-caption {
  position: relative !important;
  z-index: 1 !important;
}

/* TB_DS_V11_2_MARKER — show full image + reposition redetect/delete */

/* Show full image — use aspect-ratio not fixed height */
[data-theme="taubmans"] .sidebar .img-thumb img {
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Re-detect button — small icon, top-left INSIDE the image (not overlapping caption) */
[data-theme="taubmans"] .sidebar .img-redetect-btn {
  display: flex !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(255,255,255,0.96) !important;
  border: none !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  color: var(--tb-ink) !important;
  z-index: 3 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  cursor: pointer !important;
  padding: 0 !important;
}
[data-theme="taubmans"] .sidebar .img-redetect-btn:hover {
  background: #fff !important;
}

/* Active badge needs to move right to make room for redetect button */
[data-theme="taubmans"] .sidebar .img-thumb-wrap[active]::before,
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  left: 50px !important;  /* shift right to clear redetect button at left:10 */
}

/* Caption row — make sure no overlap with anything */
[data-theme="taubmans"] .sidebar .tb-img-caption {
  position: relative !important;
  z-index: 1 !important;
}

/* TB_DS_V11_3_MARKER — bigger result thumbs, full image, action buttons in caption row */

/* Result row thumbs — bigger */
[data-theme="taubmans"] .sidebar .result-thumb {
  width: 88px !important;
  height: 66px !important;
}

/* Source image — show full, no crop */
[data-theme="taubmans"] .sidebar .img-thumb img {
  height: auto !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  object-fit: contain !important;
  background: var(--tb-stone) !important;
  max-height: 280px !important;
  display: block !important;
}

/* Move redetect button OFF image, into caption row at the right */
[data-theme="taubmans"] .sidebar .img-redetect-btn {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--tb-stone) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-muted) !important;
  font-size: 0.95rem !important;
  z-index: auto !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .img-redetect-btn:hover {
  background: #fff !important;
  color: var(--tb-ink) !important;
}

/* Move delete button OFF image, into caption row */
[data-theme="taubmans"] .sidebar .img-delete-btn {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--tb-stone) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-muted) !important;
  z-index: auto !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .img-delete-btn::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}
[data-theme="taubmans"] .sidebar .img-delete-btn:hover {
  background: #fff !important;
  border-color: #B72E2E !important;
}
[data-theme="taubmans"] .sidebar .img-delete-btn:hover::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B72E2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/></svg>") !important;
}

/* Active badge can return to top-left now (no buttons there) */
[data-theme="taubmans"] .sidebar .img-thumb-wrap[active]::before,
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  left: 10px !important;
}

/* TB_DS_V11_4_MARKER — fix delete button visibility + ensure caption flex */

/* Force caption to be flex row with all children visible */
[data-theme="taubmans"] .sidebar .tb-img-caption {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Make the delete form transparent — children flow into caption */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-form {
  display: contents !important;
  margin: 0 !important;
}

/* Ensure delete button itself is visible — fight any !important hiding rule from earlier */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn,
[data-theme="taubmans"] .sidebar .img-delete-form .img-delete-btn {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--tb-stone) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-muted) !important;
  cursor: pointer !important;
  font-size: 0 !important;  /* hide ✕ char */
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  box-shadow: none !important;
  z-index: auto !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn::before,
[data-theme="taubmans"] .sidebar .img-delete-form .img-delete-btn::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn:hover {
  background: #fff !important;
  border-color: #B72E2E !important;
}

/* Make sure redetect is also in row layout */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-redetect-btn {
  position: static !important;
  margin: 0 !important;
}

/* "Active" badge — also style the .is-active variant (in addition to existing [active]) */
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active {
  border-color: var(--tb-green) !important;
}
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  content: 'Active' !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(255,255,255,0.96) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* TB_DS_V11_4_MARKER — fix delete button visibility + ensure caption flex */

/* Force caption to be flex row with all children visible */
[data-theme="taubmans"] .sidebar .tb-img-caption {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Make the delete form transparent — children flow into caption */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-form {
  display: contents !important;
  margin: 0 !important;
}

/* Ensure delete button itself is visible — fight any !important hiding rule from earlier */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn,
[data-theme="taubmans"] .sidebar .img-delete-form .img-delete-btn {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  background: var(--tb-stone) !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--tb-muted) !important;
  cursor: pointer !important;
  font-size: 0 !important;  /* hide ✕ char */
  padding: 0 !important;
  flex-shrink: 0 !important;
  position: static !important;
  box-shadow: none !important;
  z-index: auto !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn::before,
[data-theme="taubmans"] .sidebar .img-delete-form .img-delete-btn::before {
  content: '' !important;
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
[data-theme="taubmans"] .sidebar .tb-img-caption .img-delete-btn:hover {
  background: #fff !important;
  border-color: #B72E2E !important;
}

/* Make sure redetect is also in row layout */
[data-theme="taubmans"] .sidebar .tb-img-caption .img-redetect-btn {
  position: static !important;
  margin: 0 !important;
}

/* "Active" badge — also style the .is-active variant (in addition to existing [active]) */
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active {
  border-color: var(--tb-green) !important;
}
[data-theme="taubmans"] .sidebar .img-thumb-wrap.is-active::before {
  content: 'Active' !important;
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(255,255,255,0.96) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--tb-ink) !important;
  z-index: 2 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* TB_DS_V11_5_MARKER — final override: source image fully visible, no crop */
[data-theme="taubmans"] .sidebar .img-thumb-wrap .img-thumb,
[data-theme="taubmans"] .sidebar .img-thumb-wrap a.img-thumb {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
[data-theme="taubmans"] .sidebar .img-thumb-wrap .img-thumb img,
[data-theme="taubmans"] .sidebar .img-thumb-wrap a.img-thumb img {
  height: auto !important;
  max-height: 280px !important;
  width: 100% !important;
  object-fit: contain !important;
  background: var(--tb-stone) !important;
  display: block !important;
  aspect-ratio: auto !important;
}

/* TB_DS_V11_6_MARKER — bigger result thumbs + wider meta column */
[data-theme="taubmans"] .sidebar .result-thumb {
  width: 120px !important;
  height: 90px !important;
}
[data-theme="taubmans"] .sidebar .result-row .result-item {
  gap: 14px !important;
  padding: 10px 4px 10px 10px !important;
}
[data-theme="taubmans"] .sidebar .result-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
[data-theme="taubmans"] .sidebar .result-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
[data-theme="taubmans"] .sidebar .result-sub {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.74rem !important;
}
[data-theme="taubmans"] .sidebar .result-actions {
  gap: 0 !important;
  padding-right: 4px !important;
  flex-shrink: 0 !important;
}
[data-theme="taubmans"] .sidebar .result-chevron,
[data-theme="taubmans"] .sidebar .result-menu-btn {
  width: 24px !important;
  height: 24px !important;
}

/* TB_DS_V11_7_MARKER — make result-item itself grow to fill row width */
[data-theme="taubmans"] .sidebar .result-row {
  align-items: stretch !important;
}
[data-theme="taubmans"] .sidebar .result-row .result-item {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* TB_DS_V11_8_MARKER — buttons need explicit width:0 to flex-grow properly */
[data-theme="taubmans"] .sidebar .result-row {
  gap: 0 !important;
}
[data-theme="taubmans"] .sidebar .result-row > button.result-item {
  width: 0 !important;
  flex: 1 1 0 !important;
}

/* TB_DS_V11_8_2_MARKER — kill the max-width: 200px on result-item button */
[data-theme="taubmans"] .sidebar .result-row > button.result-item,
[data-theme="taubmans"] .sidebar .result-item {
  max-width: none !important;
  width: 0 !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

/* TB_DS_V11_9_MARKER — drop chevron, Current pill on own line under date */

/* Hide chevron */
[data-theme="taubmans"] .sidebar .result-actions .result-chevron {
  display: none !important;
}

/* Result meta — vertical stack: title / date / current pill */
[data-theme="taubmans"] .sidebar .result-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-start !important;
}

/* Current pill — block on its own line, not inline with date */
[data-theme="taubmans"] .sidebar .tb-current-badge {
  display: inline-block !important;
  margin-top: 2px !important;
  align-self: flex-start !important;
}

/* TB_DS_V11_10_MARKER — strip extras from result-sub, keep date/time only */
[data-theme="taubmans"] .sidebar .result-sub .status-chip {
  display: none !important;
}
/* Hide everything in result-sub EXCEPT the leading text node (date) */
[data-theme="taubmans"] .sidebar .result-sub > * {
  display: none !important;
}

/* TB_DS_V11_12_MARKER — restyle bucket-reset-btn from icon to text pill */
[data-theme="taubmans"] .bucket-reset-btn {
  width: auto !important;
  height: auto !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 999px !important;
  color: var(--tb-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
}
[data-theme="taubmans"] .bucket-reset-btn:hover {
  background: #fff !important;
  border-color: var(--tb-teal) !important;
  color: var(--tb-teal) !important;
}

/* TB_DS_V11_13_MARKER — Reset button positioned in top-right of bucket card */

/* Bucket card needs relative positioning so absolute Reset button anchors to it */
[data-theme="taubmans"] .bucket-card {
  position: relative !important;
}

/* Reset button — top-right corner */
[data-theme="taubmans"] .bucket-card .bucket-reset-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 999px !important;
  color: var(--tb-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  z-index: 5 !important;
  /* Kill any inherited circle/icon-button styles */
  border-radius: 999px !important;
  box-shadow: none !important;
  outline: none !important;
}
[data-theme="taubmans"] .bucket-card .bucket-reset-btn:hover {
  background: #fff !important;
  border-color: var(--tb-teal) !important;
  color: var(--tb-teal) !important;
}

/* TB_DS_V11_14_MARKER — Reset pill in top-right of .bucket card (correct selector) */
[data-theme="taubmans"] .bucket {
  position: relative !important;
}
[data-theme="taubmans"] .bucket .bucket-reset-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 999px !important;
  color: var(--tb-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  z-index: 5 !important;
  box-shadow: none !important;
  outline: none !important;
}
[data-theme="taubmans"] .bucket .bucket-reset-btn:hover {
  background: #fff !important;
  border-color: var(--tb-teal) !important;
  color: var(--tb-teal) !important;
}

/* TB_DS_V11_14_MARKER — Reset button top-right of .bucket card (correct selector) */

[data-theme="taubmans"] .bucket {
  position: relative !important;
}

[data-theme="taubmans"] .bucket .bucket-reset-btn {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  padding: 5px 12px !important;
  background: transparent !important;
  border: 1px solid var(--tb-line) !important;
  border-radius: 999px !important;
  color: var(--tb-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  z-index: 5 !important;
  box-shadow: none !important;
  outline: none !important;
}
[data-theme="taubmans"] .bucket .bucket-reset-btn:hover {
  background: #fff !important;
  border-color: var(--tb-teal) !important;
  color: var(--tb-teal) !important;
}

/* TB_DS_V11_15_MARKER — hide bucket chevron (no longer needed, card is clickable) */
[data-theme="taubmans"] .bucket .bucket-chevron {
  display: none !important;
}


/* TB_DS_V11_17_MARKER — Reset button as icon (circular arrow) */
[data-theme="taubmans"] .bucket:not(.bucket--v2) .bucket-reset-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;  /* hide any text */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
}
[data-theme="taubmans"] .bucket:not(.bucket--v2) .bucket-reset-btn:hover {
  background-color: #fff !important;
  border-color: var(--tb-teal) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E9384' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/><path d='M3 3v5h5'/></svg>") !important;
}

/* ============================================================
   TB_DS_V11_18 — img caption row: icon | text | buttons inline
   ============================================================ */
.images-list .tb-img-caption {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
}

.images-list .tb-img-caption-icon {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-radius: 6px !important;
}

.images-list .tb-img-caption-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.images-list .tb-img-caption-text {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

.images-list .tb-img-caption-name {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.images-list .tb-img-caption-sub {
  font-size: 0.7rem !important;
  color: #6b7280 !important;
}

/* Override the inline absolute positioning on the redetect button */
.images-list .tb-img-caption .img-redetect-btn {
  position: static !important;
  flex: 0 0 auto !important;
  bottom: auto !important;
  left: auto !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  color: #0d9488 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.images-list .tb-img-caption .img-redetect-btn:hover {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
}

/* Delete button: keep form as a flex item, style the X button */
.images-list .tb-img-caption .img-delete-form {
  display: inline-flex !important;
  flex: 0 0 auto !important;
}

.images-list .tb-img-caption .img-delete-btn {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.images-list .tb-img-caption .img-delete-btn:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}
/* END TB_DS_V11_18 */

/* ============================================================
   TB_DS_V11_19 — fix v11_18 wrap: form must be display:contents
   so the redetect + delete buttons share the caption flex row
   instead of wrapping. Also ensures form has zero margin.
   ============================================================ */
.images-list .tb-img-caption .img-delete-form {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* END TB_DS_V11_19 */

/* ============================================================
   TB_DS_V11_20 — caption row FINAL FIX
   Beats [data-theme=taubmans] .img-thumb-wrap > :not(...) {display:block}
   which has specificity (0,4,1) and was killing every flex rule.
   Adds extra class to win at (0,5,0)+ and forces delete-btn opacity.
   ============================================================ */
[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  flex-wrap: nowrap !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .tb-img-caption-icon {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #f3f4f6 !important;
  border-radius: 6px !important;
  color: #6b7280 !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .tb-img-caption-text {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-delete-form {
  display: contents !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-redetect-btn,
[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-delete-btn {
  position: static !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;          /* override styles.css default opacity:0 */
  transform: none !important;
  visibility: visible !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-redetect-btn {
  color: #0d9488 !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-delete-btn {
  color: #6b7280 !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-redetect-btn:hover {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
}

[data-theme="taubmans"] .sidebar .images-list .img-thumb-wrap .tb-img-caption .img-delete-btn:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  color: #dc2626 !important;
}
/* END TB_DS_V11_20 */


/* ==============================================
   TB_V11_21_RESULTS_ROW_CSS
   ============================================== */
[data-theme="taubmans"] .results-row {
  display: flex; gap: 12px; padding: 16px 8px; margin-top: 12px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  border-top: 1px solid var(--tb-line, #e5e7eb);
}
[data-theme="taubmans"] .results-row[hidden] { display: none !important; }
[data-theme="taubmans"] .results-row-item { flex: 0 0 auto; width: 160px; cursor: grab; }
[data-theme="taubmans"] .results-row-item:active { cursor: grabbing; }
[data-theme="taubmans"] .results-row-item--ghost { opacity: 0.4; }
[data-theme="taubmans"] .results-row .result-item {
  display: block; width: 100%; background: #fff;
  border: 1px solid var(--tb-line, #e5e7eb); border-radius: 10px;
  padding: 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
[data-theme="taubmans"] .results-row .result-item:hover {
  border-color: var(--tb-green, #0d9488);
  box-shadow: 0 4px 12px rgba(13,148,136,0.08);
}
[data-theme="taubmans"] .results-row .result-item.disabled { opacity: .5; cursor: not-allowed; }
[data-theme="taubmans"] .results-row .result-thumb {
  width: 100%; height: 100px; border-radius: 6px; overflow: hidden;
  background: #f3f4f6; display: flex; align-items: center; justify-content: center;
}
[data-theme="taubmans"] .results-row .result-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-theme="taubmans"] .results-row .result-meta {
  padding: 8px 4px 2px; font-size: .78rem; line-height: 1.3;
}
[data-theme="taubmans"] .results-row .result-title {
  font-weight: 600; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="taubmans"] .results-row .result-sub { color: #6b7280; font-size: .7rem; }
@media (max-width: 768px) { [data-theme="taubmans"] .results-row { display: none; } }
/* END TB_V11_21_RESULTS_ROW_CSS */


/* TB_V11_22_RESULTS_ROW_CSS — Apple Photos style */
[data-theme="taubmans"] .results-row {
  display: flex; gap: 14px; padding: 18px 8px 22px;
  margin-top: 8px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  border-top: 0;
}
[data-theme="taubmans"] .results-row::-webkit-scrollbar { height: 6px; }
[data-theme="taubmans"] .results-row::-webkit-scrollbar-track { background: transparent; }
[data-theme="taubmans"] .results-row::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
[data-theme="taubmans"] .results-row[hidden] { display: none !important; }
[data-theme="taubmans"] .results-row-item {
  flex: 0 0 auto; width: 120px; cursor: grab;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background: transparent;
  border: 0;
  padding: 0;
}
[data-theme="taubmans"] .results-row-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15,23,42,0.10);
}
[data-theme="taubmans"] .results-row-item:active { cursor: grabbing; }
[data-theme="taubmans"] .results-row-item--ghost { opacity: 0.35; }
[data-theme="taubmans"] .results-row .result-item {
  display: block; width: 100%; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  text-align: left;
  box-shadow: none;
}
[data-theme="taubmans"] .results-row .result-item:hover {
  background: transparent;
  box-shadow: none;
  border: 0;
}
[data-theme="taubmans"] .results-row .result-item.disabled { opacity: 0.45; cursor: not-allowed; }
[data-theme="taubmans"] .results-row .result-thumb {
  width: 120px; height: 80px;
  border-radius: 10px; overflow: hidden;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
}
[data-theme="taubmans"] .results-row .result-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-theme="taubmans"] .results-row .result-meta {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px 0;
}
[data-theme="taubmans"] .results-row .result-swatches {
  display: inline-flex; gap: 3px; flex: 0 0 auto;
}
[data-theme="taubmans"] .results-row .result-swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
[data-theme="taubmans"] .results-row .result-date {
  font-size: 0.7rem; color: #6b7280; line-height: 1;
  white-space: nowrap;
}
[data-theme="taubmans"] .results-row .result-title { display: none; }
[data-theme="taubmans"] .results-row .result-sub { display: none; }
@media (max-width: 768px) {
  [data-theme="taubmans"] .results-row { display: none; }
}
/* END TB_V11_22_RESULTS_ROW_CSS */


/* TB_V11_23_CARD_CSS — result row cards mirror source image card structure */
[data-theme="taubmans"] .results-row { padding: 16px 8px 20px; gap: 14px; }
[data-theme="taubmans"] .results-row-item.rrc-card {
  width: 200px;
  background: #fff;
  border: 1px solid var(--tb-line, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  padding: 0;
  display: flex;
  flex-direction: column;
}
[data-theme="taubmans"] .results-row-item.rrc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15,23,42,0.10);
  border-color: var(--tb-green, #0d9488);
}
[data-theme="taubmans"] .results-row-item.rrc-card:active { cursor: grabbing; }
[data-theme="taubmans"] .rrc-thumb-btn {
  display: block; width: 100%; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
[data-theme="taubmans"] .rrc-thumb-btn.disabled { opacity: 0.45; cursor: not-allowed; }
[data-theme="taubmans"] .rrc-thumb {
  width: 100%; aspect-ratio: 4/3;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
[data-theme="taubmans"] .rrc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
[data-theme="taubmans"] .rrc-thumb-fallback { color: #9ca3af; font-size: 1.25rem; }
[data-theme="taubmans"] .rrc-caption {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid #f3f4f6;
}
[data-theme="taubmans"] .rrc-icon {
  display: flex; flex: 0 0 auto;
  width: 28px; height: 28px;
  background: #f3f4f6; border-radius: 6px;
  align-items: center; justify-content: center;
  gap: 2px; padding: 0 4px;
}
[data-theme="taubmans"] .rrc-swatch {
  width: 6px; height: 14px; border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.08);
}
[data-theme="taubmans"] .rrc-text {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; line-height: 1.2;
}
[data-theme="taubmans"] .rrc-title {
  font-size: 0.78rem; font-weight: 600; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text;
}
[data-theme="taubmans"] .rrc-sub {
  font-size: 0.68rem; color: #6b7280;
}
[data-theme="taubmans"] .rrc-delete-form { display: contents; }
[data-theme="taubmans"] .rrc-action {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  color: #6b7280; cursor: pointer; padding: 0;
  transition: all 0.15s;
}
[data-theme="taubmans"] .rrc-action:hover { background: #f9fafb; }
[data-theme="taubmans"] .rrc-rename:hover { color: #0d9488; border-color: #0d9488; }
[data-theme="taubmans"] .rrc-delete:hover { color: #dc2626; border-color: #dc2626; background: #fef2f2; }
/* END TB_V11_23_CARD_CSS */


/* TB_V11_24_HIDE_SIDEBAR_RESULTS — sidebar Recent Results panel duplicates the
   horizontal row under the main image. Hidden, not removed, for easy revert. */
[data-theme="taubmans"] .sidebar .results-panel { display: none !important; }
/* END TB_V11_24_HIDE_SIDEBAR_RESULTS */


/* TB_V11_25_LABEL_STYLE — light pill labels with AI colour dot */
[data-theme="taubmans"] .pe-label,
.pe-label {
  background: #ffffff !important;
  color: #2d2a26 !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
  padding: 5px 10px 5px 8px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 180px !important;
}
[data-theme="taubmans"] .pe-label .pe-label-dot,
.pe-label .pe-label-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="taubmans"] .pe-label .pe-label-text,
.pe-label .pe-label-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="taubmans"] .pe-label:hover,
.pe-label:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28) !important;
}
[data-theme="taubmans"] .pe-label.pe-label-active,
.pe-label.pe-label-active {
  color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.4), 0 3px 12px rgba(0,0,0,0.25) !important;
}
[data-theme="taubmans"] .pe-label.pe-label-active .pe-label-dot,
.pe-label.pe-label-active .pe-label-dot {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
/* END TB_V11_25_LABEL_STYLE */


/* TB_V11_25B_LABEL_POLISH — refine to match target reference */
[data-theme="taubmans"] .pe-label,
.pe-label {
  padding: 7px 14px 7px 12px !important;
  gap: 9px !important;
  font-weight: 500 !important;
  color: #3f3f46 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06) !important;
}
[data-theme="taubmans"] .pe-label .pe-label-dot,
.pe-label .pe-label-dot {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
}
[data-theme="taubmans"] .pe-label:hover,
.pe-label:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 6px 18px rgba(0,0,0,0.10) !important;
}
/* END TB_V11_25B_LABEL_POLISH */


/* TB_V11_25C_LASSO_BTN — lasso pill button matching header style */
[data-theme="taubmans"] .lasso-slot {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}
[data-theme="taubmans"] .lasso-toggle-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, transform 0.12s;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  white-space: nowrap;
}
[data-theme="taubmans"] .lasso-toggle-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.30) !important;
}
[data-theme="taubmans"] .lasso-toggle-btn:active {
  transform: translateY(1px);
}
[data-theme="taubmans"] .lasso-toggle-btn.lasso-active {
  background: var(--tb-green, #0d9488) !important;
  border-color: var(--tb-green, #0d9488) !important;
  color: #fff !important;
}
[data-theme="taubmans"] .lasso-toggle-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
[data-theme="taubmans"] .lasso-toggle-btn .lasso-btn-label {
  display: inline-block;
}
/* END TB_V11_25C_LASSO_BTN */


/* TB_V11_25F_LASSO_ACTIVE — invert active state to stand out on dark header */
[data-theme="taubmans"] .lasso-toggle-btn.lasso-active {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--tb-green-dark, #064e3b) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 4px 12px rgba(0,0,0,0.20) !important;
}
[data-theme="taubmans"] .lasso-toggle-btn.lasso-active:hover {
  background: #f9fafb !important;
  border-color: #f9fafb !important;
}
[data-theme="taubmans"] .lasso-toggle-btn.lasso-active svg {
  stroke: var(--tb-green-dark, #064e3b);
}
/* END TB_V11_25F_LASSO_ACTIVE */


/* TB_V11_27_IMAGES_SCROLL — vertical scroll on source image list */
[data-theme="taubmans"] .sidebar .images-list {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
  /* small breathing room so scrollbar doesn't sit flush with cards */
  padding-right: 4px;
}
[data-theme="taubmans"] .sidebar .images-list:hover,
[data-theme="taubmans"] .sidebar .images-list:focus-within {
  scrollbar-color: rgba(15,23,42,0.20) transparent;
}
/* WebKit (Chrome, Safari, Edge) */
[data-theme="taubmans"] .sidebar .images-list::-webkit-scrollbar {
  width: 6px;
}
[data-theme="taubmans"] .sidebar .images-list::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="taubmans"] .sidebar .images-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.2s ease;
}
[data-theme="taubmans"] .sidebar .images-list:hover::-webkit-scrollbar-thumb,
[data-theme="taubmans"] .sidebar .images-list:focus-within::-webkit-scrollbar-thumb {
  background: rgba(15,23,42,0.20);
}
[data-theme="taubmans"] .sidebar .images-list::-webkit-scrollbar-thumb:hover {
  background: rgba(15,23,42,0.35);
}
/* END TB_V11_27_IMAGES_SCROLL */


/* TB_V11_27B_IMAGES_NOSHRINK — stop flex from squishing cards into fit */
[data-theme="taubmans"] .sidebar .images-list > * {
  flex-shrink: 0 !important;
}
/* END TB_V11_27B_IMAGES_NOSHRINK */


/* TB_V11_28_PRESET_FADE — fade the 2/3 colour trigger cards when an active
 * scheme card is present in the preset grid. Pure CSS via :has(). */
[data-theme="taubmans"] #presetGrid:has(#activeSchemeCard) .preset-trigger-card {
  opacity: 0.45;
  filter: grayscale(0.6);
  pointer-events: auto;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
[data-theme="taubmans"] #presetGrid:has(#activeSchemeCard) .preset-trigger-card:hover {
  opacity: 0.85;
  filter: grayscale(0.2);
}
/* END TB_V11_28_PRESET_FADE */


/* TB_V11_29_LABELS_HIDE_FIX — restore the hide-labels button. v25 added
 * !important to .pe-label display, which broke the existing toggle. This
 * adds a higher-specificity hide rule that wins over v25. */
[data-theme="taubmans"] .label-overlay.labels-hidden .pe-label,
.label-overlay.labels-hidden .pe-label {
  display: none !important;
}
/* END TB_V11_29_LABELS_HIDE_FIX */


/* TB_V11_30_LABEL_AUTO_COLLAPSE — pin-style dot for collapsed labels;
 * hover/focus expands back to full pill (existing v25 styling kicks back in). */
[data-theme="taubmans"] .pe-label.pe-collapsed,
.pe-label.pe-collapsed {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  justify-content: center !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
  transition: width 0.15s ease, padding 0.15s ease, box-shadow 0.15s ease, border-radius 0.15s ease;
}
[data-theme="taubmans"] .pe-label.pe-collapsed .pe-label-dot,
.pe-label.pe-collapsed .pe-label-dot {
  width: 11px !important;
  height: 11px !important;
}
[data-theme="taubmans"] .pe-label.pe-collapsed .pe-label-text,
.pe-label.pe-collapsed .pe-label-text {
  display: none !important;
}
/* Hover/focus expand — restore pill, show text again, raise z-index. */
[data-theme="taubmans"] .pe-label.pe-collapsed:hover,
[data-theme="taubmans"] .pe-label.pe-collapsed:focus,
.pe-label.pe-collapsed:hover,
.pe-label.pe-collapsed:focus {
  width: auto !important;
  padding: 7px 14px 7px 12px !important;
  gap: 9px !important;
  border-radius: 999px !important;
  z-index: 30 !important;
  box-shadow: 0 4px 14px rgba(15,23,42,0.28) !important;
}
[data-theme="taubmans"] .pe-label.pe-collapsed:hover .pe-label-text,
[data-theme="taubmans"] .pe-label.pe-collapsed:focus .pe-label-text,
.pe-label.pe-collapsed:hover .pe-label-text,
.pe-label.pe-collapsed:focus .pe-label-text {
  display: inline-block !important;
}
[data-theme="taubmans"] .pe-label.pe-collapsed:hover .pe-label-dot,
[data-theme="taubmans"] .pe-label.pe-collapsed:focus .pe-label-dot,
.pe-label.pe-collapsed:hover .pe-label-dot,
.pe-label.pe-collapsed:focus .pe-label-dot {
  width: 10px !important;
  height: 10px !important;
}
/* END TB_V11_30_LABEL_AUTO_COLLAPSE */


/* TB_V11_31_PRESET_TRIGGER_COMPACT — shrink the 2/3 colour trigger cards
 * and surface count + intent more clearly. */
[data-theme="taubmans"] .preset-trigger-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: left !important;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  order: 2;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.2;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-sub {
  font-size: 0.75rem !important;
  color: #6b7280 !important;
  font-weight: 400;
  line-height: 1.2;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-preview {
  flex: 0 0 auto !important;
  order: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini {
  display: inline-flex;
  gap: 2px;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-mini .ptm-swatch {
  width: 18px !important;
  height: 22px !important;
  border-radius: 18px 18px 4px 4px !important;
  border: 1px solid rgba(0,0,0,0.08);
  display: inline-block;
}
[data-theme="taubmans"] .preset-trigger-card .preset-trigger-chevron {
  flex: 0 0 auto;
  order: 3;
  font-size: 1.2rem;
  color: #9ca3af;
  line-height: 1;
}
[data-theme="taubmans"] .preset-trigger-card:hover .preset-trigger-chevron {
  color: var(--tb-green, #0d9488);
  transform: translateX(2px);
  transition: transform 0.15s ease, color 0.15s ease;
}
/* END TB_V11_31_PRESET_TRIGGER_COMPACT */


/* TB_V11_32_ACTIVE_SCHEME_LOUD — unmistakable active state */
[data-theme="taubmans"] .active-scheme-card {
  position: relative !important;
  background: linear-gradient(180deg, #ecfdf5 0%, #f0fdfa 100%) !important;
  border: 2px solid var(--tb-green, #0d9488) !important;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.12), 0 4px 14px rgba(13,148,136,0.18) !important;
  padding: 18px 16px 16px !important;
  border-radius: 10px !important;
}
[data-theme="taubmans"] .active-scheme-card::before {
  content: "ACTIVE";
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--tb-green, #0d9488);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(13,148,136,0.35);
  z-index: 1;
}
[data-theme="taubmans"] .active-scheme-card .asc-eyebrow {
  display: none !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-name {
  color: #064e3b !important;
  font-weight: 700 !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-clear {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(13,148,136,0.3) !important;
  color: var(--tb-green, #0d9488) !important;
  border-radius: 50% !important;
  width: 28px !important; height: 28px !important;
  font-size: 1.1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.15s !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-clear:hover {
  background: #ffffff !important;
  transform: scale(1.05) !important;
}
/* END TB_V11_32_ACTIVE_SCHEME_LOUD */


/* TB_V11_32B_ACTIVE_LAYOUT — mirror trigger card layout: swatches left */
[data-theme="taubmans"] .active-scheme-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-swatches {
  order: 1 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: center !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-swatch {
  width: 28px !important;
  height: 36px !important;
  flex: 0 0 28px !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-text {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-clear {
  order: 3 !important;
}
[data-theme="taubmans"] .active-scheme-card .asc-colors {
  font-size: 0.72rem !important;
  color: #047857 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* END TB_V11_32B_ACTIVE_LAYOUT */

/* TB_V11_55_RESULTS_GRID — replace horizontal scroll strip with auto-fill grid, cap at 2 rows */
[data-theme="taubmans"] .results-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  overflow-x: visible !important;
  overflow-y: hidden !important;
  padding: 16px 8px 20px !important;
  scroll-snap-type: none !important;
}
[data-theme="taubmans"] .results-row.is-collapsed {
  max-height: calc((180px * 0.75 + 90px) * 2) !important;
  /* thumb height ≈ 135px (180×0.75 aspect) + meta block ≈ 90px, ×2 rows */
  overflow: hidden !important;
}
[data-theme="taubmans"] .results-row-item.rrc-card {
  width: auto !important;
  flex: initial !important;
  min-width: 0 !important;
}
[data-theme="taubmans"] .results-row-toggle {
  display: none;
  margin: 8px auto 16px;
  padding: 8px 18px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #047857;
  cursor: pointer;
  transition: all 0.15s ease;
}
[data-theme="taubmans"] .results-row-toggle:hover {
  background: #ecfdf5;
  border-color: #047857;
}
[data-theme="taubmans"] .results-row-toggle.is-visible { display: block; }
[data-theme="taubmans"] .results-row-toggle-wrap { text-align: center; }
@media (max-width: 768px) {
  [data-theme="taubmans"] .results-row {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    display: grid !important;
  }
}
/* END TB_V11_55_RESULTS_GRID */

/* TB_V11_55B_RRC_TITLE_FIT — let title wrap to 2 lines instead of truncating */
[data-theme="taubmans"] .rrc-title {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}
/* END TB_V11_55B_RRC_TITLE_FIT */

/* TB_V11_55C_RRC_TITLE_FULLWIDTH — title gets its own row above swatches+actions */
[data-theme="taubmans"] .rrc-card .rrc-caption {
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "title title title title"
    "swatches . rename delete" !important;
  gap: 6px 6px !important;
  align-items: center !important;
  padding: 8px 10px !important;
}
[data-theme="taubmans"] .rrc-card .rrc-text {
  grid-area: title !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
}
[data-theme="taubmans"] .rrc-card .rrc-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
  font-size: 0.78rem !important;
}
[data-theme="taubmans"] .rrc-card .rrc-sub {
  flex: 0 0 auto !important;
  font-size: 0.66rem !important;
  color: #6b7280 !important;
  white-space: nowrap !important;
}
[data-theme="taubmans"] .rrc-card .rrc-icon { grid-area: swatches !important; }
[data-theme="taubmans"] .rrc-card .rrc-rename { grid-area: rename !important; }
[data-theme="taubmans"] .rrc-card .rrc-delete-form { grid-area: delete !important; }
/* END TB_V11_55C_RRC_TITLE_FULLWIDTH */

/* TB_V11_55D_RRC_ARCHED_SWATCHES — arched colour swatches matching scheme cards */
[data-theme="taubmans"] .rrc-card .rrc-icon {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  gap: 3px !important;
  border-radius: 0 !important;
}
[data-theme="taubmans"] .rrc-card .rrc-swatch {
  width: 14px !important;
  height: 22px !important;
  border-radius: 7px 7px 2px 2px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
  flex: 0 0 14px !important;
}
/* END TB_V11_55D_RRC_ARCHED_SWATCHES */

/* TB_V11_55E_RRC_SWATCH_BIGGER — wider swatches, lighter border so colour shows */
[data-theme="taubmans"] .rrc-card .rrc-swatch {
  width: 22px !important;
  height: 28px !important;
  flex: 0 0 22px !important;
  border-radius: 11px 11px 3px 3px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
[data-theme="taubmans"] .rrc-card .rrc-icon {
  gap: 4px !important;
}
/* END TB_V11_55E_RRC_SWATCH_BIGGER */

/* TB_V11_55G_RRC_ARCH_PROPER — match .ptm-swatch arch shape exactly */
[data-theme="taubmans"] .rrc-card .rrc-swatch {
  width: 22px !important;
  height: 28px !important;
  flex: 0 0 22px !important;
  display: block !important;
  clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 0 / 50% 50% 0 0) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="taubmans"] .rrc-card .rrc-icon {
  display: flex !important;
  gap: 4px !important;
  align-items: flex-end !important;
}
/* END TB_V11_55G_RRC_ARCH_PROPER */

/* TB_V11_55H_RRC_SWATCH_RESCALE — match .color-chip proportions at 28×30 */
[data-theme="taubmans"] .rrc-card .rrc-swatch {
  width: 28px !important;
  height: 30px !important;
  flex: 0 0 28px !important;
  min-width: 28px !important;
  min-height: 30px !important;
}
/* END TB_V11_55H_RRC_SWATCH_RESCALE */

/* TB_V11_55I_SOURCE_RENAME_BTN — pencil rename button on source image card */
[data-theme="taubmans"] .img-rename-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: all 0.15s;
}
[data-theme="taubmans"] .img-rename-btn:hover {
  background: #ecfdf5;
  border-color: #0d9488;
  color: #0d9488;
}
/* END TB_V11_55I_SOURCE_RENAME_BTN */