/* ════════════════════════════════════════════════════════════════
   Pixel-faithful clone of kiosk UnifiedEditorScreen
   Source: /AndroidStudioProjects/AutoStyleAI copy/app/src/main/java/
           com/example/autostyleai/editor/{UnifiedEditorScreen,
           EditorTheme, EditorServiceTabs, WrapOptionsDrawer,
           TintingOptionsDrawer, MainImageViewer, HistoryThumbnailStrip,
           ModificationsPanel}.kt
   dp → px (1:1), Color(0xFFXXXXXX) → #XXXXXX, alphas → rgba()
   ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex; flex-direction: column;
  overflow: hidden;
  --grad-green: #229B64;
  --grad-blue: #14A0E6;
  --grad: linear-gradient(90deg, #229B64, #14A0E6);
}
/* Light theme (default) */
body[data-theme="light"] {
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --topbar: #FFFFFF;
  --drawer: #F8F8F8;
  --text: #1A1A1A;
  --text-secondary: #888888;
  --text-muted: #AAAAAA;
  --border: #E0E0E0;
  --border-soft: rgba(0,0,0,0.08);
  --image-border: #E0E0E0;
  --image-bg: #F0F0F0;
  --card-bg: #FFFFFF;
  --card-selected-bg: #F5F5F5;
  --card-border: #E0E0E0;
  --finish-pill-bg: #FFFFFF;
  --finish-pill-text: #888888;
  --tab-bar-bg: #FFFFFF;
  --tab-unselected-text: #888888;
  --tab-prompt-text: #AAAAAA;
  --logo-src: url('../images/brands/autostyleai_logo_black.png');
  --threem-src: url('../images/brands/threem_logo_black.png');
  --teckwrap-src: url('../images/brands/teckwrap_logo_black.png');
  --xpel-src: url('../images/brands/xpel_logo_black.png');
  --error-bg: rgba(211,47,47,0.10);
  --error-text: #D32F2F;
  --button-secondary-bg: #EEEEEE;
  --history-thumb-border: #DDDDDD;
}
/* Dark theme */
body[data-theme="dark"] {
  --bg: #000000;
  --surface: #111111;
  --topbar: #0A0A0A;
  --drawer: #0A0A0A;
  --text: #FFFFFF;
  --text-secondary: #808080;
  --text-muted: #606060;
  --border: #2A2A2A;
  --border-soft: rgba(255,255,255,0.08);
  --image-border: #2A2A2A;
  --image-bg: #0A0A0A;
  --card-bg: #111111;
  --card-selected-bg: #1A1A1A;
  --card-border: #2A2A2A;
  --finish-pill-bg: #111111;
  --finish-pill-text: #808080;
  --tab-bar-bg: #0A0A0A;
  --tab-unselected-text: #808080;
  --tab-prompt-text: #606060;
  --logo-src: url('../images/brands/autostyleai_logo.png');
  --threem-src: url('../images/brands/three_m_logo_white.png');
  --teckwrap-src: url('../images/brands/teckwrap_logo.png');
  --xpel-src: url('../images/brands/xpel_logo.png');
  --error-bg: rgba(255,68,68,0.15);
  --error-text: #FF4444;
  --button-secondary-bg: #1A1A1A;
  --history-thumb-border: #333333;
}
body { background: var(--bg); color: var(--text); }
button { font-family: inherit; cursor: pointer; }
input[type=file] { display: none; }
img { display: block; }
.icon-btn-svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

/* ════ TOP BAR (40dp tall, kiosk Lines 554-712) ════ */
.topbar {
  height: 56px;          /* 40dp design + 8dp top + 8dp bottom for breathing room */
  background: var(--topbar);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 10;
}
/* Topbar brand block. Empty by default; js/shop.js fills it with a
   shop's <img class="shop-logo"> when ?shop=<uid> is present and that
   shop has uploaded a logo. With no shop / no logo, the :empty rule
   collapses the element so the topbar buttons sit flush left rather
   than leaving a "ghost" gap from the flex layout.

   The class name dates back to the Forge Custom Auto demo — kept as
   an internal alias to avoid touching every selector in the codebase.

   It's a <div>, not an <a>. Visual identity only; not clickable. Inside
   the iframe contexts where this lives (every real embed), a clickable
   logo would navigate the iframe to autostyle-3m-wrap.web.app/ and surprise
   visitors with the Forge demo page. */
.forge-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.8px;
  color: var(--text);
  text-transform: uppercase;
}
/* When js/shop.js hasn't injected a logo (no shop, no uploaded logo,
   or Firestore unreachable), this rule hides the empty block so the
   topbar doesn't have a 10px ghost gap on the left. */
.forge-brand:empty { display: none; }
/* When js/shop.js swaps the topbar branding for a shop's logo it adds
   .shop-branded to the anchor. The inner mark + span are replaced with
   a single .shop-logo <img>. Cap the height so a tall logo doesn't
   blow out the topbar layout; let width auto-scale to preserve aspect. */
.forge-brand.shop-branded { gap: 0; }
.shop-logo {
  height: 32px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
.title-dash { flex: 1; height: 1px; }

.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}
.tb-btn:hover:not(:disabled) { border-color: var(--grad-green); }
.tb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tb-btn .arrow { width: 18px; height: 18px; fill: currentColor; }
/* Rotate icon (replaces the chevron on the Angles button). It's a white-on-
   transparent PNG, so we invert it to black in light theme and leave it
   white in dark theme. Sized to roughly match the chevron's optical weight. */
.tb-btn .rotate-icon {
  height: 12px; width: auto;
  flex-shrink: 0;
  display: inline-block;
}
body[data-theme="light"] .tb-btn .rotate-icon { filter: invert(1); }
.tb-btn .ic { width: 16px; height: 16px; fill: currentColor; }
.tb-btn.share {
  border: none;
  color: #FFFFFF;
  background: var(--grad);
}
.tb-btn.share:hover { filter: brightness(1.08); }
.tb-btn.before-after.disabled { opacity: 0.55; cursor: not-allowed; }

/* Fullscreen toggle is a mobile-only affordance — desktop browsers already
   have native fullscreen (F11) and the embedded iframe is large enough that
   it isn't needed. Hide the button at desktop widths even if main.js
   reveals it for iframe context. */
@media (min-width: 821px) {
  .tb-btn-fullscreen { display: none !important; }
}

/* ════ DELETE CURRENT IMAGE — desktop topbar button + mobile floating overlay ════
   Both elements live in markup; CSS picks the right one for the viewport.
   - Desktop: .tb-btn-delete in the topbar (visible). Overlay hidden.
   - Mobile: overlay shown in image-frame top-right. Topbar button hidden.
   - When no image is loaded: both get .disabled and stay hidden. */
.tb-btn-delete.disabled { display: none; }
.tb-btn-delete:hover:not(:disabled) {
  border-color: rgba(220, 38, 38, 0.7);
  color: #ef4444;
}
.delete-current-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  z-index: 10;
  display: none;             /* hidden on desktop by default */
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
  padding: 0;
}
.delete-current-overlay svg { width: 18px; height: 18px; fill: currentColor; }
.delete-current-overlay:hover, .delete-current-overlay:active {
  background: rgba(220, 38, 38, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}
.delete-current-overlay.disabled { display: none !important; }

/* ════ MAIN IMAGE AREA (kiosk MainImageViewer) ════ */
.main-area {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  padding: 8px;
  min-height: 0;
}
.image-frame {
  width: 100%; height: 100%;
  border: 1px solid var(--image-border);
  background: var(--image-bg);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
}
.image-frame img.car {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}
.image-frame img.car.fade-out { opacity: 0; }
.image-frame img.car.hidden { display: none; }

/* Start screen: side-by-side Upload / Select cards.
   On wide viewports they sit horizontally; on narrow they stack with an
   OR pill between them. Either card fills the image-frame without
   overflowing because each card flex-grows from a small min-height. */
/* Start screen: prominent Upload card with a smaller, less-emphasized
   "Select a Car" button tucked below it. Upload is the primary CTA;
   the picker is a quieter secondary affordance. */
.upload-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  max-height: 100%;
}
.upload-stack[hidden] { display: none; }

/* Upload card — same compact dimensions as the earlier side-by-side
   layout, just centered as a single card with the small Select button
   tucked below. Doesn't fill the whole frame. */
.upload-zone {
  width: 90%;
  max-width: 520px;
  min-height: 220px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  border: 2px dashed rgba(34,155,100,0.45);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(34,155,100,0.04), rgba(20,160,230,0.04));
  cursor: pointer;
  padding: 24px 20px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.upload-zone:hover {
  border-color: var(--grad-green);
  background: linear-gradient(135deg, rgba(34,155,100,0.10), rgba(20,160,230,0.08));
  transform: translateY(-2px);
}
.upload-zone.dragover {
  border-color: var(--grad-blue);
  background: linear-gradient(135deg, rgba(20,160,230,0.14), rgba(34,155,100,0.10));
}
.upload-zone .uz-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(34,155,100,0.30);
  flex-shrink: 0;
}
.upload-zone .uz-icon svg { width: 30px; height: 30px; fill: #fff; }
.uz-title {
  font-size: 18px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}
.uz-sub {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.4;
}

.select-car-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.select-car-btn:hover {
  border-color: var(--grad-green);
  color: var(--text);
  background: linear-gradient(135deg, rgba(34,155,100,0.05), rgba(20,160,230,0.04));
}
.select-car-btn svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 640px) {
  .upload-stack { padding: 8px; gap: 10px; }
  .upload-zone {
    width: 96%;
    min-height: 160px;
    padding: 18px 14px;
    gap: 10px;
  }
  .upload-zone .uz-icon { width: 48px; height: 48px; }
  .upload-zone .uz-icon svg { width: 22px; height: 22px; }
  .uz-title { font-size: 15px; }
  .uz-sub { font-size: 12px; }
  .select-car-btn { font-size: 12px; padding: 8px 14px; }
}

.upload-zone .uz-cta {
  margin-top: 4px;
  padding: 10px 22px;
  background: var(--grad);
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(34,155,100,0.30);
}

/* Loading overlay */
.image-loading {
  position: absolute; inset: 0;
  background: var(--image-bg);
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  z-index: 4;
}
body[data-theme="light"] .image-loading { background: rgba(255,255,255,0.80); }
body[data-theme="dark"]  .image-loading { background: rgba(0,0,0,0.70); }

.spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(34,155,100,0.18);
  border-top-color: var(--grad-green);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.image-loading .text {
  font-size: 16px; font-weight: 500; color: var(--text);
}
.image-loading .progress-track {
  width: 50%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.image-loading .progress-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 4px;
  transition: width 0.3s linear;
}

/* Slow-connection hint inside the loading overlay. Hidden by default; the
   MutationObserver in js/main.js adds .show after 10s of active loading. */
.loading-slow-hint {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  max-width: 300px;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body[data-theme="light"] .loading-slow-hint {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}
.loading-slow-hint.show {
  opacity: 1;
  transform: translateY(0);
}
.loading-slow-hint svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Modifications panel (top-left overlay) */
.mod-panel {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  z-index: 3;
}
.mod-panel-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 200px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body[data-theme="light"] .mod-panel-content { background: rgba(255,255,255,0.55); border-color: rgba(0,0,0,0.08); backdrop-filter: blur(4px); }
body[data-theme="dark"]  .mod-panel-content { background: rgba(0,0,0,0.45); border-color: rgba(255,255,255,0.08); backdrop-filter: blur(4px); }
.mod-panel-content.collapsed { display: none; }
.mod-row { display: flex; align-items: center; gap: 8px; }
.mod-row .mod-icon { width: 16px; height: 16px; fill: var(--grad-green); flex-shrink: 0; }
.mod-row-text { display: flex; flex-direction: column; gap: 1px; }
.mod-label { font-size: 10px; line-height: 12px; font-weight: 500; color: var(--text-secondary); }
.mod-value { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--text); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.mod-toggle {
  width: 22px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 3px;
  border-radius: 8px;
  border: 1px solid;
  background: transparent;
  color: var(--text);
}
body[data-theme="light"] .mod-toggle { background: rgba(255,255,255,0.45); border-color: rgba(0,0,0,0.08); }
body[data-theme="dark"]  .mod-toggle { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.08); }
.mod-toggle svg { width: 16px; height: 16px; fill: currentColor; opacity: 0.7; }

/* History thumbnail strip (bottom-left overlay) */
.history-strip {
  position: absolute;
  bottom: 6px; left: 8px; right: 8px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 3;
  /* Don't grab clicks on the empty stretch between the toggle and the image edge */
  pointer-events: none;
}
.history-strip > * { pointer-events: auto; }
.history-toggle {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
body[data-theme="light"] .history-toggle { background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.08); }
body[data-theme="dark"]  .history-toggle { background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.08); }
.history-toggle svg { width: 20px; height: 20px; fill: currentColor; transition: transform 0.2s; }
.history-toggle.collapsed svg { transform: rotate(180deg); }
.history-thumbs {
  display: flex; align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  /* min-width:0 lets the flex item shrink below content width so overflow-x can scroll */
  min-width: 0;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.history-thumbs::-webkit-scrollbar { display: none; }
.history-thumbs.collapsed { display: none; }
.history-thumb {
  width: 64px; height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--history-thumb-border);
  background: var(--card-bg);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.history-thumb.selected {
  border: 2px solid transparent;
  background: var(--grad) padding-box, var(--grad) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
}
.history-thumb.selected::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: var(--grad);
  z-index: -1;
}
.history-thumb img { width: 100%; height: 100%; object-fit: cover; }
.history-empty {
  font-size: 13px; color: var(--text-secondary);
  padding: 3px 8px;
  background: rgba(128,128,128,0.05);
  border-radius: 10px;
}

/* ════ ERROR ROW ════ */
.error-banner {
  margin: 2px 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--error-bg);
  color: var(--error-text);
  font-size: 13px;
  display: none;
}
.error-banner.show { display: block; }

/* ════ DRAWER (250dp, animated) ════ */
.drawer {
  height: 0;
  overflow: hidden;
  background: var(--drawer);
  transition: height 0.25s ease;
  flex-shrink: 0;
}
.drawer.open { height: 250px; }
.drawer-inner {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
}
/* Cross-slide between services. Each pane stacks in the same coord space
   so the outgoing pane can slide out while the incoming slides in. The JS
   in setService() sets transform + transition inline; these defaults handle
   the resting state. */
.drawer-inner > .drawer-wraps,
.drawer-inner > .drawer-tint,
.drawer-inner > .drawer-blackouts {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ─── WRAPS DRAWER ─── */
.drawer-wraps { display: flex; flex-direction: column; height: 100%; padding: 0 2px; gap: 8px; }
.brand-strip {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 16px;
  flex-shrink: 0;
}
.brand-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  /* Brand pills snap on tap — no easing. The grid below carries the visual
     transition (slides horizontally on brand change). */
}
.brand-btn .brand-img {
  height: 28px;
  width: auto;
  object-fit: contain;
}
.brand-btn[data-brand="3m"]    .brand-img { content: var(--threem-src); }
.brand-btn[data-brand="teckwrap"] .brand-img { content: var(--teckwrap-src); }
.brand-btn[data-brand="xpel"] .brand-img { content: var(--xpel-src); }
.brand-btn.selected {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}
body[data-theme="light"] .brand-btn.selected {
  background:
    linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    var(--grad) border-box;
}
body[data-theme="dark"] .brand-btn.selected {
  background:
    linear-gradient(#0A0A0A, #0A0A0A) padding-box,
    var(--grad) border-box;
}
.brand-btn.disabled { opacity: 0.45; cursor: not-allowed; }

.drawer-divider { height: 1px; background: var(--border); margin: 0 8px; flex-shrink: 0; }

.wraps-body {
  flex: 1;
  display: flex;
  gap: 16px;
  padding: 0 8px 8px;
  min-height: 0;
}
.finish-col {
  width: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
/* Finish pills — vertical card with a 3D-shaded sphere swatch on top
   that visually communicates the finish (sharp specular highlight for
   gloss, matte uniform for satin/matte) and a confident bold caps
   label below. Reads instantly without needing to read the words. */
.finish-pill {
  width: 100%;
  padding: 9px 8px 7px;
  border-radius: 14px;
  border: 1.5px solid var(--card-border);
  background: var(--finish-pill-bg);
  color: var(--finish-pill-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  cursor: pointer;
  /* Finish pills snap on tap (no easing on selection state). The grid below
     carries the visual transition (slides vertically on finish change).
     Hover transform/shadow keep their own short tween. */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.finish-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.finish-pill.selected {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--finish-pill-bg), var(--finish-pill-bg)) padding-box,
    var(--grad) border-box;
  padding: 8px 7px 6px;
  box-shadow: 0 0 0 3px rgba(34, 155, 100, 0.14);
}
.finish-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
/* Glossy paint-chip sphere: dark base + a sharp specular highlight in
   the upper-left, plus a faint reflected-light arc along the bottom edge
   to read as a true mirror finish. */
.finish-swatch.gloss {
  background:
    radial-gradient(ellipse 42% 28% at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 25%, rgba(255,255,255,0) 70%),
    radial-gradient(circle at 55% 80%, rgba(120,140,160,0.18) 0%, rgba(120,140,160,0) 35%),
    radial-gradient(circle at 50% 50%, #50525a 0%, #1c1d23 65%, #0a0b10 100%);
  box-shadow:
    inset 0 -4px 7px rgba(0,0,0,0.50),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 3px 8px rgba(0,0,0,0.35);
}
/* Matte/satin paint-chip sphere: same shape, NO specular highlight,
   uniform soft directional shading so it reads as flat / non-reflective. */
.finish-swatch.matte {
  background:
    radial-gradient(circle at 50% 38%, #303138 0%, #1d1e25 60%, #14151b 100%);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.35),
    inset 0 1px 1px rgba(255,255,255,0.04),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 2px 5px rgba(0,0,0,0.20);
}
.finish-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.finish-label-sub {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--text-secondary);
  white-space: nowrap;
}

.color-grid-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.color-grid {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));   /* minmax(0,1fr) lets rows shrink to fit container */
  grid-auto-flow: column;
  grid-auto-columns: 90px;
  gap: 6px 10px;
  padding: 4px 4px 10px;                           /* extra bottom space leaves room for the custom scrollbar */
  overflow-x: auto;
  overflow-y: hidden;                              /* never let vertical overflow appear */
  scrollbar-width: none;
}
.color-grid::-webkit-scrollbar { display: none; }

/* Always-visible custom scrollbar — sits along the bottom of .color-grid-wrap.
   We ship our own because native overlay scrollbars on macOS auto-hide, and
   the user wants something reliably grabbable. The grid still scrolls
   normally via trackpad/wheel — this just mirrors that scroll and accepts
   drag input back. js/color-scrollbar.js injects the elements and wires up
   the syncing. */
.color-scrollbar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 3px;
  height: 4px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.10);
  z-index: 2;
}
.color-scrollbar.hidden { display: none; }
.color-scrollbar-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 24px;
  border-radius: 2px;
  background: rgba(128, 128, 128, 0.4);
  cursor: grab;
  transition: background 0.15s;
  touch-action: none;
}
.color-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.6); }
.color-scrollbar-thumb.dragging {
  background: rgba(128, 128, 128, 0.75);
  cursor: grabbing;
  transition: none;
}
.color-card {
  width: 90px;
  height: 100%;            /* fill the grid row exactly — no fixed height */
  min-height: 0;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.18s, border 0.18s;
}
.color-card:hover { border-color: var(--grad-green); }
.color-card.selected {
  background: var(--card-selected-bg);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--card-selected-bg), var(--card-selected-bg)) padding-box,
    var(--grad) border-box;
  padding: 3px;
}
.color-card-img {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
}
.color-card-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.color-card-name {
  font-size: 11px;
  line-height: 1.15;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  flex-shrink: 0;
}

.coming-soon {
  flex: 1;
  display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-secondary);
}

/* ─── TINTING DRAWER ─── three big window-tint level cards (Light / Medium / Dark).
     Each card renders a stylized side-window pane with the tint applied so the
     darkness is immediately visible. Tap a card to apply — no Apply button,
     no side-vs-windshield split, just one decision. */
.drawer-tint {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 12px 18px;
  gap: 10px;
  align-items: center;
}
.tint-header {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.tint-header::before, .tint-header::after {
  content: ''; width: 36px; height: 1px;
  background: var(--border);
  opacity: 0.6;
}

/* Retry banner — shown only after a tint has been applied. Discreet
   reminder that FLUX results vary slightly per run, with a one-tap retry. */
.tint-retry-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  max-width: 520px;
  width: fit-content;
  margin: 0 auto;
  flex-shrink: 0;
}
body[data-theme="light"] .tint-retry-banner {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}
.tint-retry-banner[hidden] { display: none; }
.tint-retry-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.7;
}
.tint-retry-text {
  flex: 1;
  min-width: 0;
}
.tint-retry-btn {
  flex-shrink: 0;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.tint-retry-btn:hover { transform: translateY(-1px); }
.tint-retry-btn:active { transform: translateY(0); }

.tint-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  flex: 1;
  min-height: 0;
}
.tint-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  padding: 14px 10px 14px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.18s, border-color 0.18s, background 0.18s;
  position: relative;
}
.tint-card:hover {
  transform: translateY(-2px);
}
.tint-card:hover .tint-card-vis {
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.45));
}
.tint-card.selected {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
}
.tint-card[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Window-shaped tint visualization. The icon PNG is used as a CSS mask so
   the gradient + highlight only paint inside the window silhouette. The
   element's aspect ratio matches the icon (118 × 77) so mask-size: contain
   fills the box edge-to-edge. */
.tint-card-vis {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 118 / 77;
  -webkit-mask: url('../images/icons/window_icon.png') center / contain no-repeat;
          mask: url('../images/icons/window_icon.png') center / contain no-repeat;
  background:
    /* Diagonal glass highlight — clipped by the mask to the window shape */
    linear-gradient(125deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 38%),
    /* Faint secondary reflection lower-right */
    linear-gradient(305deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 28%),
    /* Glass body — top-to-bottom gradient, level-specific via CSS vars */
    linear-gradient(180deg, var(--tint-vis-top), var(--tint-vis-base));
  transition: filter 0.18s ease;
}
/* Old ::before/::after rules no longer needed — the mask + layered gradient
   on .tint-card-vis itself does all the work. */
.tint-card-vis::before, .tint-card-vis::after { display: none; }
.tint-card-name {
  font-size: 18px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  text-align: center;
  color: var(--text);
}
.tint-card-sub {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.8px;
  text-align: center;
  color: var(--text-secondary);
  margin-top: -6px;  /* tighten under the bold name */
}

.apply-btn {
  width: 300px;
  height: 44px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(128,128,128,0.12);
  background: rgba(128,128,128,0.06);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.apply-btn:hover:not(:disabled) { background: rgba(128,128,128,0.12); }
.apply-btn.active {
  background: var(--grad);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(34,155,100,0.30);
}
.apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.apply-btn .ic { width: 20px; height: 20px; fill: currentColor; }

/* ─── BLACKOUTS / RIMS PLACEHOLDER ─── */
.drawer-soon {
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 500;
}

/* ════ SERVICE TABS BOTTOM (kiosk EditorServiceTabs) ════ */
/* Service prompt — expands+fades in when no service is selected, shrinks+
   fades out when one becomes selected. Mirrors the kiosk Compose spec
   (expand 100ms / fade 80ms on entry, shrink 80ms / fade 60ms on exit).
   Don't switch back to display:none — those properties can't transition. */
.service-prompt {
  width: 100%;
  text-align: center;
  background: var(--tab-bar-bg);
  color: var(--tab-prompt-text);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  max-height: 40px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.1s ease, opacity 0.08s ease, padding 0.1s ease;
}
.service-prompt.hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.08s ease, opacity 0.06s ease, padding 0.08s ease;
}

.service-tabs {
  width: 100%;
  height: 72px;
  background: var(--tab-bar-bg);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-shrink: 0;
  transition: height 0.25s ease;
}
.service-tabs.collapsed { height: 38px; }
.service-tab-slot {
  flex: 1;
  display: flex;
  align-items: center; justify-content: center;
}
.service-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--tab-unselected-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  isolation: isolate;             /* keeps ::before stacking below tab content */
  /* font-size + padding tween with the bar collapse (250ms). color tween is
     symmetric (200ms both directions) — text color reading "white → gray" feels
     natural even when the gradient bg snaps off via the ::before opacity. */
  transition: color 0.2s ease, font-size 0.25s ease, padding 0.25s ease;
  white-space: nowrap;
}
/* Gradient background lives on ::before so we can animate opacity (gradients
   themselves can't be smoothly interpolated — `background-image` animates
   discretely). Asymmetric: snaps to 1 when selected (instant feedback),
   fades to 0 over 200ms when deselected. */
.service-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: -1;
  pointer-events: none;
}
.service-tab.selected::before {
  opacity: 1;
  transition: opacity 0s;
}
.service-tabs.collapsed .service-tab {
  font-size: 12px;
  padding: 5px 12px;
}
.service-tab .tab-icon { width: 26px; height: 26px; transition: width 0.25s, height 0.25s; }
.service-tabs.collapsed .service-tab .tab-icon { width: 16px; height: 16px; }
.service-tab.selected {
  color: #FFFFFF;
  font-weight: 600;
  /* Color snaps to white instantly — the ::before fade carries the visual. */
  transition: color 0s, font-size 0.25s ease, padding 0.25s ease;
}
.service-tab .tab-icon img,
.service-tab .tab-icon svg {
  width: 100%; height: 100%; object-fit: contain;
}
/* Force ALL service-tab icons (wraps + tinting) through identical filters
   so the tinting icon matches the wraps icon color exactly. */
body[data-theme="light"] .service-tab:not(.selected) .tab-icon img {
  filter: brightness(0) saturate(100%) invert(54%);
}
body[data-theme="dark"] .service-tab:not(.selected) .tab-icon img {
  filter: brightness(0) saturate(100%) invert(56%);
}
.service-tab.selected .tab-icon img { filter: brightness(0) invert(1); }
.service-tab .tab-arrow {
  width: 16px; height: 16px;
  fill: currentColor;
  margin-left: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.service-tab.selected .tab-arrow { opacity: 0.7; }
.service-tabs.collapsed .service-tab.selected .tab-arrow { display: none; }

/* ════ DROPDOWN (Angles) ════
   Positioned dynamically by JS so it sits directly under the trigger
   button on every viewport. Frosted-glass background reads as an overlay
   floating above the image instead of a stuck-on panel. */
.al-dropdown {
  position: fixed;
  top: 56px; left: 16px;        /* placeholders — toggleAnglesLighting() rewrites these */
  width: 280px;
  padding: 16px 16px 14px;
  background: rgba(18, 18, 18, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 50;
  display: none;
  font-family: 'Antonio', sans-serif;
}
body[data-theme="light"] .al-dropdown {
  background: rgba(252, 252, 252, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.al-dropdown.show {
  display: block;
  animation: alFadeIn 0.18s ease-out both;
}
@keyframes alFadeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Small triangle pointer at the top, visually anchoring the dropdown to its button.
   --al-pointer-x is set by toggleAnglesLighting so the arrow lines up with the
   trigger even when the dropdown gets clamped against the viewport edge. */
.al-dropdown::before {
  content: '';
  position: absolute;
  top: -7px; left: var(--al-pointer-x, 22px);
  width: 12px; height: 12px;
  background: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}
body[data-theme="light"] .al-dropdown::before {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.al-section { margin-bottom: 12px; }
.al-section:last-child { margin-bottom: 0; }
.al-section-label {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 10px;
  padding-left: 2px;
}
.al-row { display: flex; gap: 8px; flex-wrap: wrap; }
.al-btn {
  width: 50px; height: 50px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  padding: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
body[data-theme="light"] .al-btn {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}
.al-btn:hover {
  border-color: var(--grad-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.al-btn.selected {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.04)) padding-box,
    var(--grad) border-box;
  padding: 4px;
  box-shadow: 0 0 0 3px rgba(34, 155, 100, 0.22);
}
body[data-theme="light"] .al-btn.selected {
  background:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)) padding-box,
    var(--grad) border-box;
}
.al-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.al-btn img { width: 100%; height: 100%; object-fit: contain; }
body[data-theme="light"] .al-btn:not(.selected) img {
  filter: invert(0.8) brightness(0.7);
}

/* ════ SETUP MODAL (current car color) ════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-width: 460px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.modal-title { font-size: 22px; font-weight: 600; color: var(--text); margin-bottom: 6px; letter-spacing: -0.2px; }
.modal-sub { font-size: 13px; color: var(--text-secondary); margin-bottom: 22px; }
.modal-section { margin-bottom: 16px; }
.modal-section-label {
  font-size: 11px; font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 10px;
}
.color-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.color-swatches .sw {
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.15s;
}
.color-swatches .sw:hover { transform: scale(1.10); }
.color-swatches .sw.selected {
  border-color: var(--grad-green);
  box-shadow: 0 0 0 3px rgba(34,155,100,0.20);
}
.finish-pills-row { display: flex; gap: 8px; }
.finish-pills-row .fp {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.finish-pills-row .fp:hover { color: var(--text); border-color: var(--grad-green); }
.finish-pills-row .fp.selected {
  background: var(--grad);
  color: #FFFFFF;
  border-color: transparent;
}
.modal-cta {
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  background: var(--grad);
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.modal-cta:hover:not(:disabled) { filter: brightness(1.10); }
.modal-cta:disabled { background: var(--button-secondary-bg); color: var(--text-secondary); cursor: not-allowed; }

/* Two-button confirm row used by the "Start Over" modal */
.confirm-actions {
  display: flex; gap: 10px; margin-top: 18px;
}
.confirm-btn {
  flex: 1;
  padding: 13px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.confirm-btn.primary {
  background: var(--grad);
  color: #fff;
}
.confirm-btn.primary:hover { filter: brightness(1.10); }
.confirm-btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.confirm-btn.secondary:hover { border-color: var(--grad-green); }

/* Result label under top-left mods */
.result-label {
  font-size: 10px; color: var(--text-secondary);
}

/* ════ Responsive ════ */
@media (max-width: 820px) {
  .topbar { height: 54px; padding: 0 10px; gap: 6px; }
  .forge-brand { font-size: 14px; letter-spacing: 0.5px; padding: 4px 6px; }
  /* Let the brand block shrink when buttons fight for room so the
     topbar buttons stay visible on narrow viewports. min-width: 0
     overrides the flex-item minimum-content-size that would otherwise
     prevent shrinking below the image's intrinsic width. */
  .forge-brand.shop-branded { flex-shrink: 1; min-width: 0; }
  .shop-logo { height: 26px; max-width: 110px; }  /* mobile: keep shop logo within topbar height */
  .tb-btn { padding: 8px 10px; font-size: 12px; gap: 4px; }
  .tb-btn span { display: none; }
  .tb-btn .arrow, .tb-btn .ic { width: 18px; height: 18px; }
  .title-dash { min-width: 4px; }

  /* Mobile: hide the topbar Delete button (the floating overlay below
     handles delete on phones), show the floating overlay when an image is
     loaded (i.e. when not .disabled). */
  #deleteImageBtn { display: none !important; }
  .delete-current-overlay:not(.disabled) { display: flex; }

  .main-area { padding: 6px; }
  .image-frame { border-radius: 12px; }

  .drawer.open { height: 240px; }
  .drawer-inner { height: 240px; }

  /* Brand strip — horizontal scroll on phones so all logos remain reachable */
  .brand-strip {
    gap: 18px;
    padding: 0 12px;
    height: 46px;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brand-strip::-webkit-scrollbar { display: none; }
  .brand-btn { padding: 6px 8px; border-radius: 8px; flex-shrink: 0; }
  .brand-btn .brand-img { height: 24px; }

  /* Wraps drawer — stack finish row on top, color grid below (saves left column) */
  .wraps-body { flex-direction: column; gap: 6px; padding: 0 8px 8px; }
  .finish-col {
    width: 100%;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
    justify-content: stretch;
    flex-shrink: 0;
  }
  /* Mobile: drop the sphere swatch — the GLOSS/MATTE label alone is enough.
     Frees vertical space so the color grid below gets more room. */
  .finish-pill {
    flex: 1;
    padding: 5px 8px;
    border-radius: 8px;
    gap: 0;
  }
  .finish-pill.selected { padding: 4px 7px; }
  .finish-swatch { display: none; }
  .finish-label { font-size: 11px; letter-spacing: 1px; }
  .finish-label-sub { font-size: 7.5px; letter-spacing: 0.7px; }
  .color-grid-wrap { width: 100%; flex: 1; }

  /* Smaller color tiles so more fit per scroll */
  .color-grid { gap: 5px 6px; grid-auto-columns: 68px; padding: 2px; }
  .color-card { width: 68px; height: auto; padding: 3px; gap: 3px; }
  .color-card.selected { padding: 2px; }
  .color-card-img { border-radius: 10px; }
  .color-card-name { font-size: 10px; line-height: 1.1; padding: 0 1px; }

  /* Mobile: tint cards ~2/3 size — smaller window-icon visualization,
     tighter padding, scaled fonts. Frees vertical space in the drawer. */
  .drawer-tint { padding: 6px 10px 8px; gap: 4px; }
  .tint-header { font-size: 9px; letter-spacing: 1.6px; gap: 8px; }
  .tint-header::before, .tint-header::after { width: 20px; }
  .tint-retry-banner { padding: 5px 8px 5px 10px; gap: 7px; font-size: 10.5px; max-width: 320px; }
  .tint-retry-icon { width: 12px; height: 12px; }
  .tint-retry-btn { padding: 3px 10px; font-size: 10px; }
  .tint-row { gap: 4px; max-width: 360px; }
  .tint-card { padding: 4px 4px 6px; gap: 3px; border-radius: 10px; border-width: 1px; }
  .tint-card-vis { max-width: 74px; }
  .tint-card-name { font-size: 10px; letter-spacing: 0.8px; }
  .tint-card-sub { font-size: 7.5px; letter-spacing: 0.4px; margin-top: -2px; }

  .service-tabs { height: 60px; border-radius: 18px 18px 0 0; }
  .service-tabs.collapsed { height: 34px; }
  .service-tab { padding: 5px 10px; font-size: 13px; gap: 4px; }
  .service-tabs.collapsed .service-tab { font-size: 11px; padding: 4px 8px; }
  .service-tab .tab-icon { width: 22px; height: 22px; }
  .service-tabs.collapsed .service-tab .tab-icon { width: 14px; height: 14px; }

  .al-dropdown { width: calc(100vw - 16px); max-width: 320px; padding: 12px; }
  .al-btn { width: 46px; height: 46px; padding: 4px; }
  .al-section-label { font-size: 10px; letter-spacing: 1.5px; }

  .mod-panel-content { max-width: 160px; padding: 10px; }
  .mod-value { font-size: 11px; max-width: 130px; }

  .history-strip { left: 6px; right: 6px; bottom: 4px; height: 42px; }
  .history-thumb { width: 56px; height: 35px; }
}

/* Very-small phones (iPhone SE / mini): tighten further */
@media (max-width: 400px) {
  .topbar { padding: 0 8px; gap: 4px; }
  .tb-btn { padding: 7px 8px; }
  .tb-btn .arrow, .tb-btn .ic { width: 16px; height: 16px; }
  .shop-logo { height: 24px; max-width: 80px; }
}

/* Tiny phones (iPhone SE 1st gen at 320px width, etc.) — shrink the
   logo further so all five topbar icon buttons (Angles, Crop, Before &
   After, New Image, Share) still fit alongside the brand block. */
@media (max-width: 360px) {
  .shop-logo { height: 22px; max-width: 60px; }
  .topbar { gap: 3px; padding: 0 6px; }
  .tb-btn { padding: 6px 6px; }
}

/* Keep the unrelated 400px-breakpoint rules below — re-open the media
   query so .brand-strip / .brand-btn / etc. still get their tweaks. */
@media (max-width: 400px) {
  .brand-strip { gap: 14px; padding: 0 10px; }
  .brand-btn { padding: 4px 6px; }
  .brand-btn .brand-img { height: 22px; }
  .finish-pill { padding: 8px 4px 6px; border-radius: 10px; gap: 4px; }
  .finish-pill.selected { padding: 7px 3px 5px; }
  .finish-swatch { width: 30px; height: 30px; }
  .finish-label { font-size: 11px; letter-spacing: 1.2px; }
  .finish-label-sub { font-size: 8px; letter-spacing: 0.8px; }
  .color-grid { grid-auto-columns: 60px; gap: 4px 5px; }
  .color-card { width: 60px; padding: 2px; gap: 2px; }
  .color-card.selected { padding: 1px; }
  .color-card-name {
    font-size: 9.5px;
    line-height: 1.15;
    /* Stay on a single line — JS autoFitColorNames() shrinks per-label
       font-size when the text would overflow, so the icon position
       stays consistent across the row. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .service-tab { font-size: 12px; padding: 5px 8px; }
}

@supports (padding: max(0px)) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* ═══════════════════════════════════════════════════════════════════════
   CAR PICKER — pick a stock car from Firebase Storage instead of uploading
   ═══════════════════════════════════════════════════════════════════════ */
.cp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  z-index: 9998;
  display: none;
  align-items: stretch; justify-content: center;
  padding: 0;
}
.cp-overlay.open { display: flex; }
.cp-modal {
  background: var(--bg);
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  font-family: 'Antonio', sans-serif;
}
@media (min-width: 768px) {
  .cp-overlay { padding: 24px; align-items: center; }
  .cp-modal {
    max-width: 1100px; max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
}
.cp-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-back {
  width: 36px; height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.cp-back:hover { border-color: var(--grad-green); }
.cp-back svg { width: 18px; height: 18px; fill: currentColor; }
.cp-back[hidden] { display: none; }
.cp-title {
  flex: 1;
  font-size: 16px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-crumb {
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.cp-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(128,128,128,0.15);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.cp-close:hover { background: rgba(128,128,128,0.25); }
.cp-close svg { width: 18px; height: 18px; fill: currentColor; }

.cp-search-row {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cp-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
.cp-search:focus { outline: none; border-color: var(--grad-green); }

.cp-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px 18px;
}
.cp-loading, .cp-empty, .cp-error {
  text-align: center; padding: 60px 20px;
  font-size: 14px;
  color: var(--text-secondary);
}
.cp-error { color: #d33; }

/* Brand / model list — vertical list of large tappable rows */
.cp-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.cp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}
.cp-row:hover {
  background: linear-gradient(90deg, rgba(34,155,100,0.06), rgba(20,160,230,0.04));
  border-color: var(--grad-green);
}
.cp-row-name { flex: 1; }
.cp-row-count {
  font-size: 12px; font-weight: 500;
  color: var(--text-secondary);
  background: rgba(128,128,128,0.10);
  padding: 3px 10px;
  border-radius: 10px;
}
.cp-row-arrow svg { width: 16px; height: 16px; fill: var(--text-secondary); }

/* Car image grid */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
@media (max-width: 600px) {
  .cp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}
.cp-tile {
  display: flex; flex-direction: column; gap: 6px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(128,128,128,0.05);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.cp-tile:hover {
  transform: translateY(-2px);
  border-color: var(--grad-green);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}
.cp-tile-img {
  width: 100%; aspect-ratio: 16 / 10;
  background: rgba(128,128,128,0.10);
  display: block;
  overflow: hidden;
}
.cp-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-tile-label {
  font-size: 12px; font-weight: 500;
  color: var(--text);
  padding: 6px 10px 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-tile.loading {
  pointer-events: none;
  opacity: 0.6;
}

/* ═══ BEFORE & AFTER OVERLAY (port of Android BeforeAfterRevealScreen.kt) ═══ */
.ba-overlay {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9999;
  display: none;
  flex-direction: column;
  font-family: 'Antonio', sans-serif;
  color: #fff;
}
.ba-overlay.open { display: flex; }
.ba-topbar {
  height: 40px;
  padding: 0 16px;
  display: flex; align-items: center;
  flex-shrink: 0;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ba-topbar .forge-brand { color: #fff; }
.ba-topbar .forge-brand span {
  font-weight: 700; letter-spacing: 1.5px; font-size: 13px;
}
.ba-spacer { flex: 1; }
.ba-back, .ba-share {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-left: 8px;
}
.ba-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.ba-share {
  background: linear-gradient(90deg, #229B64, #14A0E6);
  border: none;
  color: #fff;
}
.ba-back svg, .ba-share svg { width: 14px; height: 14px; fill: currentColor; }

.ba-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: #000;
}
.ba-mode-content {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.ba-mode-content.active { opacity: 1; pointer-events: auto; }

/* Slider (diagonal wipe) */
.ba-slider-bg, .ba-slider-after-clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.ba-slider-bg img, .ba-slider-after-clip img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.ba-slider-divider {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  margin-left: -1.5px;
  transform-origin: center center;
  pointer-events: none;
  background: linear-gradient(180deg, #229B64, #14A0E6);
  box-shadow: 0 0 32px 6px rgba(34,155,100,0.35), 0 0 32px 12px rgba(20,160,230,0.35);
}
.ba-slider-handle {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 28px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(90deg, #229B64, #14A0E6);
  border: 1.5px solid rgba(255,255,255,0.35);
  display: none; flex-direction: column; gap: 3px;
  align-items: center; justify-content: center;
  pointer-events: none;
}
.ba-slider-handle.visible { display: flex; }
.ba-slider-handle .grip {
  width: 12px; height: 2px;
  background: rgba(255,255,255,0.9);
  border-radius: 1px;
}
.ba-label {
  position: absolute;
  font-size: 16px; font-weight: 700; letter-spacing: 3px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 6px 12px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
}
.ba-label.show { opacity: 1; }
.ba-label-tl { top: 16px; left: 24px; }
.ba-label-br { bottom: 16px; right: 24px; }
.ba-label-bc { bottom: 16px; left: 50%; transform: translateX(-50%); opacity: 1; }

/* Side-by-Side */
.ba-side {
  display: flex; flex-direction: row;
  width: 100%; height: 100%;
}
.ba-side-half {
  flex: 1;
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ba-side-half img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.ba-side-scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  pointer-events: none;
}
.ba-side-divider {
  width: 3px;
  background: linear-gradient(180deg, #229B64, #14A0E6);
  flex-shrink: 0;
}

/* Tap-to-toggle */
.ba-tap {
  position: relative; width: 100%; height: 100%;
  cursor: pointer;
}
.ba-tap img {
  width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0;
  transition: opacity 0.4s ease;
}
.ba-tap img.hidden { opacity: 0; }
.ba-tap-hint {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 16px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 16px; font-weight: 500; letter-spacing: 1px;
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s;
}
.ba-tap-hint.fade { opacity: 0; }
.ba-tap-hint svg { width: 24px; height: 24px; fill: #fff; }

/* Floating control bar */
.ba-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 6px;
  border-radius: 14px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ba-mode-btn, .ba-pick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.5);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ba-mode-btn.selected, .ba-pick-btn.active {
  background: linear-gradient(90deg, #229B64, #14A0E6);
  color: #fff;
  font-weight: 600;
}
.ba-mode-btn svg, .ba-pick-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ba-ctrl-sep {
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.15);
  margin: 0 2px;
}
.ba-reset-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 10px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
}
.ba-reset-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ba-reset-btn[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   BLACKOUTS DRAWER — compact row layout.
   Top: a slim Full Blackout banner (icon + title + Apply on the right).
   Below: a single tight row of 6 chrome-target tiles, all visible at once
   on desktop. No vertical scrolling; each tile fits in one cell.
   Icons render as gradient-tinted MASKS so they're visible on both light
   and dark themes without flipping to pure white. The icon's pixel data
   is used as a mask shape, and the gradient fills it.
   ═══════════════════════════════════════════════════════════════════════ */
.drawer-blackouts {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 8px 14px;
  gap: 10px;
  overflow: hidden;
}
.bo-full-card {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  flex-shrink: 0;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
.bo-full-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.18); }
.bo-full-card[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.bo-full-icon {
  width: 80px; height: 52px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}
.bo-full-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bo-full-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bo-full-title { font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }
.bo-full-sub   { font-size: 12px; color: var(--text-secondary); }
.bo-full-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(34,155,100,0.25);
}
.bo-full-cta svg { width: 14px; height: 14px; fill: currentColor; }

.bo-section-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1.4px; text-transform: uppercase;
  margin: 2px 2px 0;
  flex-shrink: 0;
}

.bo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  flex-shrink: 0;
}
.bo-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 5px 4px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  min-width: 0;
}
.bo-card:hover {
  border-color: var(--grad-green);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.bo-card.selected {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  padding: 4px 3px;
}
.bo-card[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.bo-card-icon {
  width: 100%;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  padding: 2px;
  box-sizing: border-box;
}
.bo-card-icon img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bo-card-name {
  font-size: 10.5px; font-weight: 600;
  text-align: center;
  letter-spacing: 0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%;
}

/* Tablet: 3 cols */
@media (max-width: 900px) {
  .bo-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .bo-card-name { font-size: 11px; }
}
/* Phone: keep 3 cols but tighten */
@media (max-width: 640px) {
  .drawer-blackouts { padding: 6px 10px; gap: 8px; }
  .bo-full-card { padding: 12px 14px; gap: 12px; }
  .bo-full-icon { width: 60px; height: 40px; }
  .bo-full-title { font-size: 15px; }
  .bo-full-sub { font-size: 11px; }
  .bo-full-cta { padding: 7px 13px; font-size: 12px; }
  .bo-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .bo-card { padding: 4px 3px; gap: 2px; }
  .bo-card-icon { height: 30px; }
  .bo-card-name { font-size: 10px; }
}

/* Standalone Pick Images action at top-right of the stage. */
.ba-pick-fab {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  z-index: 4;
}
.ba-pick-fab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #229B64, #14A0E6);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ba-pick-fab-btn:hover { filter: brightness(1.06); }
.ba-pick-fab-btn.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.4) inset, 0 4px 14px rgba(0,0,0,0.45); }
.ba-pick-fab-btn svg { width: 16px; height: 16px; fill: currentColor; }
.ba-pick-fab .ba-reset-btn {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 9px;
}

/* Compare picker */
.ba-picker {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  flex-direction: column;
  padding: 16px 24px;
  z-index: 3;
}
.ba-picker.open { display: flex; }
.ba-picker-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.ba-picker-title {
  font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #fff;
}
.ba-picker-close {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ba-picker-close svg { width: 18px; height: 18px; fill: currentColor; }
.ba-picker-slots {
  display: flex; gap: 12px; margin-bottom: 8px;
}
.ba-slot-card {
  flex: 1;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color 0.18s;
}
.ba-slot-card.active {
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)) padding-box,
    linear-gradient(90deg, #229B64, #14A0E6) border-box;
  padding: 7px;
}
.ba-slot-label {
  font-size: 11px; font-weight: 700; letter-spacing: 2px;
  color: rgba(255,255,255,0.5);
}
.ba-slot-card.active .ba-slot-label { color: #fff; }
.ba-slot-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ba-slot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-slot-thumb-empty { font-size: 11px; color: rgba(255,255,255,0.3); }
.ba-picker-hint {
  font-size: 12px; color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.ba-picker-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding-bottom: 8px;
}
.ba-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
}
.ba-tile.b { border: 2px solid #229B64; }
.ba-tile.a { border: 2px solid #14A0E6; }
.ba-tile.ba {
  border: 2px solid transparent;
  background:
    rgba(0,0,0,0) padding-box,
    linear-gradient(90deg, #229B64, #14A0E6) border-box;
}
.ba-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-tile-badges {
  position: absolute; top: 4px; left: 4px;
  display: flex; gap: 4px;
}
.ba-tile-badge {
  font-size: 10px; font-weight: 700; color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}
.ba-tile-badge.b { background: #229B64; }
.ba-tile-badge.a { background: #14A0E6; }
.ba-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  padding: 4px 6px;
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ═══════════════════════════════════════════════════════════════════════
   CROP OVERLAY — full-screen modal that lets the user crop whatever
   image is currently being shown (lastResult.image, or carB64 if no
   prior generation). Outside the crop rectangle is darkened with a
   massive box-shadow trick so the crop area "punches through" the
   shade. 8 handles (4 corners + 4 edges) for resize, drag the body
   to move. Pointer events so it works for mouse and touch.
   ═══════════════════════════════════════════════════════════════════════ */
.crop-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 9999;
  display: none;
  flex-direction: column;
  font-family: 'Antonio', sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
.crop-overlay.open { display: flex; }
.crop-topbar {
  height: 54px;
  padding: 0 16px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #000;
}
.crop-title {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.4px;
}
.crop-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crop-spacer { flex: 1; }
.crop-cancel, .crop-apply {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.crop-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
}
.crop-cancel:hover { border-color: rgba(255,255,255,0.4); }
.crop-apply {
  background: linear-gradient(90deg, #229B64, #14A0E6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(20,160,230,0.30);
}
.crop-apply:hover { filter: brightness(1.06); }
.crop-cancel svg, .crop-apply svg { width: 14px; height: 14px; fill: currentColor; }

.crop-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  padding: 24px;
  overflow: hidden;
  touch-action: none;  /* keep the page from pan/zooming while we handle drag */
}
.crop-img-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
}
.crop-img-wrap img {
  display: block;
  max-width: 100%; max-height: calc(100vh - 110px);
  width: auto; height: auto;
  user-select: none; -webkit-user-drag: none;
  pointer-events: none;
}
.crop-rect {
  position: absolute;
  top: 0; left: 0;
  border: 2px solid #fff;
  /* The big box-shadow simulates a darkening overlay outside the rect. */
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  cursor: move;
  touch-action: none;
}
/* Rule-of-thirds grid lines inside the crop rect for composition help */
.crop-rect::before, .crop-rect::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.30);
  pointer-events: none;
}
.crop-rect::before {
  top: 0; bottom: 0; left: 33.33%;
  width: 1px;
  box-shadow: calc(100% / 3 * 2) 0 0 0 rgba(255,255,255,0.30);
}
.crop-rect::after {
  left: 0; right: 0; top: 33.33%;
  height: 1px;
  box-shadow: 0 calc(100% / 3 * 2) 0 0 rgba(255,255,255,0.30);
}
.crop-handle {
  position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.45);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  touch-action: none;
}
.crop-handle.nw { top: -10px; left: -10px; cursor: nwse-resize; }
.crop-handle.n  { top: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.ne { top: -10px; right: -10px; cursor: nesw-resize; }
.crop-handle.e  { top: 50%; right: -10px; transform: translateY(-50%); cursor: ew-resize; }
.crop-handle.se { bottom: -10px; right: -10px; cursor: nwse-resize; }
.crop-handle.s  { bottom: -10px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.crop-handle.sw { bottom: -10px; left: -10px; cursor: nesw-resize; }
.crop-handle.w  { top: 50%; left: -10px; transform: translateY(-50%); cursor: ew-resize; }

@media (max-width: 600px) {
  .crop-topbar { height: 48px; padding: 0 10px; gap: 6px; }
  .crop-title { font-size: 13px; }
  .crop-sub { display: none; }
  .crop-cancel, .crop-apply { padding: 7px 12px; font-size: 12px; }

  /* Mobile crop stage:
     - Pad the LEFT edge so the crop rect can't reach x=0, where iOS Safari's
       edge-swipe-back gesture intercepts touches before our handlers see them.
     - Pad the BOTTOM by env(safe-area-inset-bottom) + a buffer so Safari's
       floating URL bar doesn't sit on top of the bottom handles. */
  .crop-stage {
    padding: 12px 12px max(72px, calc(env(safe-area-inset-bottom) + 64px)) 28px;
  }
  /* Use the dynamic / small viewport height units so the image fits within
     the area Safari actually reveals (excluding the URL bar). */
  .crop-img-wrap img { max-height: calc(100svh - 150px); max-height: calc(100dvh - 150px); }

  .crop-handle { width: 22px; height: 22px; }   /* easier to grab on touch */
  .crop-handle.nw { top: -12px; left: -12px; }
  .crop-handle.ne { top: -12px; right: -12px; }
  .crop-handle.sw { bottom: -12px; left: -12px; }
  .crop-handle.se { bottom: -12px; right: -12px; }
  .crop-handle.n  { top: -12px; }
  .crop-handle.s  { bottom: -12px; }
  .crop-handle.w  { left: -12px; }
  .crop-handle.e  { right: -12px; }
}

.ba-confirm {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  cursor: not-allowed;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ba-confirm.enabled {
  color: #fff;
  background: linear-gradient(90deg, #229B64, #14A0E6);
  cursor: pointer;
}
.ba-confirm svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 600px) {
  .ba-back span, .ba-share span { display: none; }
  .ba-mode-btn span, .ba-pick-btn span { display: none; }
  .ba-mode-btn, .ba-pick-btn { padding: 7px 10px; }
  .ba-label-tl { top: 8px; left: 12px; }
  .ba-label-br { bottom: 8px; right: 12px; }
  .ba-tap-hint { font-size: 14px; padding: 12px 18px; }
  .ba-topbar .forge-brand span { font-size: 12px; letter-spacing: 1px; }
  .ba-picker { padding: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Lead-capture modal (controlled by js/lead-gate.js). Shown only when
   the shop has leadsEnabled and the visitor hasn't already submitted
   a lead on this device. Aesthetic matches the landing's LeadFormModal
   (dark surface, cyan accent, subtle glow).
   ══════════════════════════════════════════════════════════════════════ */
.lg-overlay[hidden] { display: none; }
.lg-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 14px;
  /* Lighter dim + minimal blur so the configurator stays visible
     behind the gate — the visitor can see what they're about to use. */
  background: rgba(3, 3, 6, 0.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lg-overlay.is-open { opacity: 1; }
.lg-modal {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 24px auto;
  padding: 22px 22px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, #14151d 0%, #0c0d13 100%);
  /* Branded accents pull from the shop's chosen accent gradient
     (--grad / --grad-green / --grad-blue, set on <body> by shop.js).
     Each rule keeps a sensible cyan fallback for the no-shop demo. */
  border: 1px solid color-mix(in srgb, var(--grad-green, #06B6D4) 28%, transparent);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 36px color-mix(in srgb, var(--grad-blue, #06B6D4) 14%, transparent);
  color: #f4f4f5;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  transform: translateY(12px);
  transition: transform 0.22s cubic-bezier(0.34, 1.16, 0.64, 1);
  /* Flex column so we can `align-self: center` the header block while
     letting the form keep its natural left-aligned labels/inputs. */
  display: flex;
  flex-direction: column;
}
.lg-overlay.is-open .lg-modal { transform: translateY(0); }

/* Shop logo at the top of the modal — populated by lead-gate.js from
   shopDoc.logoUrl. Hidden when the shop has no logo set. */
.lg-logo {
  display: block;
  margin: 0 auto 14px;
  max-height: 38px;
  max-width: 200px;
  width: auto;
}
.lg-logo[hidden] { display: none; }

.lg-eyebrow {
  /* align-self centers the inline-flex pill within the flex-column
     modal without forcing the form below to inherit centered text. */
  align-self: center;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--grad-blue, #06B6D4) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--grad-blue, #06B6D4) 30%, transparent);
  color: var(--grad-blue, #22D3EE);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lg-eyebrow svg { width: 12px; height: 12px; }

.lg-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #f4f4f5;
  font-family: 'Antonio', 'Inter', sans-serif;
  text-align: center;
}
.lg-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: rgba(244, 244, 245, 0.72);
  line-height: 1.5;
  text-align: center;
}

.lg-form { display: flex; flex-direction: column; gap: 11px; }
.lg-field { display: flex; flex-direction: column; gap: 5px; }
.lg-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 244, 245, 0.75);
  display: flex; align-items: center; gap: 6px;
}
.lg-field .lg-opt {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(244, 244, 245, 0.45);
}
.lg-field input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #f4f4f5;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lg-field input::placeholder { color: rgba(244, 244, 245, 0.35); }
.lg-field input:focus {
  border-color: color-mix(in srgb, var(--grad-blue, #06B6D4) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--grad-blue, #06B6D4) 18%, transparent);
}
.lg-error {
  margin: 0;
  font-size: 12.5px;
  color: #f87171;
  min-height: 18px;
}
.lg-submit {
  width: 100%;
  margin-top: 4px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  /* Shop's accent gradient. Cyan fallback if no --grad is set (demo). */
  background: var(--grad, linear-gradient(90deg, #06B6D4, #22D3EE));
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--grad-blue, #06B6D4) 28%, transparent);
  transition: filter 0.15s, transform 0.05s;
}
.lg-submit:hover:not(:disabled) { filter: brightness(1.08); }
.lg-submit:active:not(:disabled) { transform: translateY(1px); }
.lg-submit:disabled { opacity: 0.65; cursor: progress; }
.lg-fine {
  margin: 9px 0 0;
  font-size: 11px;
  text-align: center;
  color: rgba(244, 244, 245, 0.42);
}

@media (max-width: 480px) {
  .lg-modal { padding: 18px 18px 16px; border-radius: 14px; margin: 12px auto; max-width: 360px; }
  .lg-title { font-size: 18px; }
  .lg-logo { max-height: 32px; max-width: 170px; margin-bottom: 10px; }
}

/* Light-theme variant — shop.js sets body[data-theme="light"] from
   shopDoc.theme. Mirrors the dark default with light surfaces + dark
   text so the modal matches the configurator the visitor sees behind
   it. Branded accents (eyebrow, focus ring, submit button) reuse the
   same --grad-* vars and look right on either surface. */
body[data-theme="light"] .lg-modal {
  background: linear-gradient(160deg, #ffffff 0%, #f6f7fa 100%);
  border-color: color-mix(in srgb, var(--grad-green, #06B6D4) 32%, transparent);
  box-shadow:
    0 22px 60px rgba(15, 23, 42, 0.16),
    0 0 36px color-mix(in srgb, var(--grad-blue, #06B6D4) 12%, transparent);
  color: #14151d;
}
body[data-theme="light"] .lg-title { color: #0c0d13; }
body[data-theme="light"] .lg-sub { color: rgba(20, 21, 29, 0.66); }
body[data-theme="light"] .lg-field label { color: rgba(20, 21, 29, 0.7); }
body[data-theme="light"] .lg-field .lg-opt { color: rgba(20, 21, 29, 0.42); }
body[data-theme="light"] .lg-field input {
  color: #14151d;
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
}
body[data-theme="light"] .lg-field input::placeholder { color: rgba(20, 21, 29, 0.4); }
body[data-theme="light"] .lg-fine { color: rgba(20, 21, 29, 0.5); }