/*
 * room_remix — Apple-style minimal UI (clean rewrite)
 * =========================================================
 * Light by default, dark via prefers-color-scheme.
 * SF Pro typography, generous whitespace, subtle shadows,
 * pill buttons, real-wizard step visibility.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
*, *::before, *::after { -webkit-font-smoothing: antialiased; }

:root {
  --bg:           #f5f5f7;
  --surface:      #ffffff;
  --surface-2:    #fbfbfd;
  --canvas:       #1d1d1f;
  --fg:           #1d1d1f;
  --fg-2:         #424245;
  --muted:        #86868b;
  --line:         rgba(0, 0, 0, 0.08);
  --line-2:       rgba(0, 0, 0, 0.14);
  /* Project accent — rose pink (Tailwind rose-500 #EC4899) */
  --accent:       #ff6a3d;
  --accent-hover: #db2777;
  --accent-fg:    #ffffff;
  --accent-soft:  rgba(255, 106, 61, 0.10);
  --ok:           #30d158;
  --warn:         #ff9f0a;
  --err:          #ff3b30;
  --shadow-1:     0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2:     0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-3:     0 16px 48px rgba(0, 0, 0, 0.10);
  --r-sm:         8px;
  --r:            12px;
  --r-lg:         16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #000000;
    --surface:      #1c1c1e;
    --surface-2:    #2c2c2e;
    --canvas:       #0a0a0a;
    --fg:           #f5f5f7;
    --fg-2:         #d2d2d7;
    --muted:        #98989d;
    --line:         rgba(255, 255, 255, 0.10);
    --line-2:       rgba(255, 255, 255, 0.20);
    --accent:       #f472b6;
    --accent-hover: #ff6a3d;
    --accent-soft:  rgba(244, 114, 182, 0.18);
    --shadow-1:     0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2:     0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-3:     0 16px 48px rgba(0, 0, 0, 0.7);
  }
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Helvetica Neue",
               "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* ── Header ─────────────────────────────────────────────────────── */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
header .brand h1 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
header .brand p {
  font-size: 13px; color: var(--muted); margin-top: 2px;
}
#device-tag {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px; padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 980px;
  color: var(--muted);
}

/* ── Stepper (dots + connecting line) ───────────────────────────── */
#stepper {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 24px 32px;
}
#stepper ol {
  display: flex; max-width: 1100px; margin: 0 auto;
  list-style: none;
  position: relative;
  counter-reset: step;
}
#stepper ol::before {
  content: "";
  position: absolute; top: 14px; left: 14px; right: 14px;
  height: 1px; background: var(--line);
  z-index: 0;
}
#stepper .step {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
#stepper .step .dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#stepper .step .lbl {
  font-size: 11px; color: var(--muted);
  font-weight: 500; letter-spacing: 0.01em;
  transition: color 0.2s;
}
#stepper .step.active .dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
#stepper .step.active .lbl { color: var(--fg); font-weight: 600; }
#stepper .step.done .dot {
  background: var(--ok); border-color: var(--ok); color: white;
}
#stepper .step.done .lbl { color: var(--fg-2); }

/* ── Main / wizard step container ───────────────────────────────── */
main {
  max-width: 1080px; margin: 0 auto;
  padding: 28px 32px 80px;
}
.wizard-step { animation: stepIn 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-header { margin-bottom: 24px; }
.step-header h2 {
  font-size: 32px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.step-header p {
  font-size: 15px; color: var(--muted); max-width: 640px;
}

/* ── Buttons ────────────────────────────────────────────────────── */
button {
  font-family: inherit;
  padding: 9px 20px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 980px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
button:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
button:active:not(:disabled) { transform: translateY(0) scale(0.97); }
button:disabled { opacity: 0.32; cursor: not-allowed; }

button.primary {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
}
button.primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
button.ghost {
  background: transparent; color: var(--muted); border-color: var(--line);
}
button.ghost:hover:not(:disabled) {
  background: var(--surface-2); color: var(--fg);
}

/* ── Inputs ─────────────────────────────────────────────────────── */
input[type="text"], select {
  font-family: inherit;
  padding: 9px 14px;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: all 0.15s;
}
input[type="text"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px;
}
input[type="range"] {
  accent-color: var(--accent);
  flex: 1; max-width: 280px;
}
label { font-size: 13px; color: var(--fg-2); font-weight: 500; }
label.check { font-weight: 400; color: var(--fg); cursor: pointer; }

/* ── Mask confirmation panel (Step 6 two-step flow) ─────────────── */
.confirm-panel {
  display: none;
  margin: 12px 0;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  animation: confirm-in 0.18s ease-out;
}
.confirm-panel.open { display: block; }
@keyframes confirm-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.confirm-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--accent);
}
.confirm-row {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--fg);
}
.confirm-row.hint {
  color: var(--fg-2);
  font-size: 12px;
}
.confirm-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Per-card strength controls (Step 4 multi-grid) ────────────── */
.strength-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.multi-controls {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.multi-chips { display: flex; gap: 4px; }
.mini-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-2);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: all 0.12s;
}
.mini-chip:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.rerender-btn {
  margin-left: auto;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.12s;
}
.rerender-btn:hover { background: var(--accent); color: white; }

/* ── Scene-caption editor (Step 2) ─────────────────────────────── */
.caption-row {
  margin: 18px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
}
.caption-row label {
  font-size: 13px;
  color: var(--fg);
  font-weight: 500;
}
.caption-row input[type="text"],
.caption-row textarea#scene-caption {
  flex: 1 1 auto;
  font-size: 14px;
  padding: 10px 14px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;            /* user can drag if they want even more room */
  min-height: 44px;            /* ≈ one line + padding, matches old input */
  max-height: 320px;           /* cap so it never eats the whole step */
  overflow-y: auto;            /* scrollbar appears past the cap */
  width: 100%;
  box-sizing: border-box;
  word-break: break-word;
  white-space: pre-wrap;
}
.caption-input-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;     /* keep button glued to the top of textarea */
  width: 100%;
}
.caption-input-row #enhance-caption-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13px;
  padding: 0 16px;
  min-height: 44px;            /* match textarea baseline so they align */
}

/* ── Common helpers ─────────────────────────────────────────────── */
.hidden { display: none !important; }
.hint { font-size: 12px; color: var(--muted); }
.row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.step-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 32px;
  padding-top: 20px; border-top: 1px solid var(--line);
}
.step-nav-right { display: flex; gap: 10px; }

/* ── Step 1 — upload ────────────────────────────────────────────── */
#upload-drop {
  background: var(--surface);
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
  padding: 80px 30px;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  transition: all 0.2s;
}
#upload-drop.drag {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.preview {
  margin-top: 20px;
  max-width: 100%; max-height: 60vh;
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  display: block;
}

/* ── Step 2 / 4 dual-pane ───────────────────────────────────────── */
.dual-pane {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.dual-pane > div {
  background: var(--surface);
  border-radius: var(--r);
  padding: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.dual-pane h4 {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.dual-pane img {
  width: 100%; max-height: 50vh; object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--canvas);
  display: block;
}
.placeholder {
  height: 50vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 13px; gap: 4px;
  background: var(--canvas); color: rgba(255,255,255,0.7);
  border-radius: var(--r-sm);
}

/* Spinner ring for the Generating overlay */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Stable progress overlay — no layout jitter as text changes */
#stylize-pending { gap: 12px; padding: 0 24px; }
#stylize-phase {
  min-height: 20px;
  font-size: 14px; font-weight: 600;
  text-align: center;
}
#stylize-elapsed {
  font-variant-numeric: tabular-nums;     /* fixed-width digits */
  font-feature-settings: "tnum";
  min-width: 100px; text-align: center;
}
.confirm-img {
  width: 100%; max-height: 60vh; object-fit: contain;
  border-radius: var(--r);
  background: var(--canvas);
  box-shadow: var(--shadow-2);
}

/* Multi-style results grid (Step 4 + Step 5) */
.multi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  .multi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .multi-grid { grid-template-columns: 1fr; }
}
.multi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.2s;
}
.multi-card.selectable { cursor: pointer; }
.multi-card.selectable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.multi-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
}
.multi-card .multi-name {
  font-size: 13px; font-weight: 600;
}
.multi-card .multi-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-sm); background: var(--canvas);
}
.multi-card .multi-status {
  font-size: 11px; color: var(--muted); min-height: 16px;
}
.multi-card .multi-pending {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--canvas);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 11px; gap: 8px;
}

/* ── Step 3 — categorised style gallery ─────────────────────────── */
#style-gallery {
  display: block;     /* sections stack vertically; grid is per-section */
}
.style-section { margin-bottom: 36px; }
.style-section.hidden { display: none; }

/* Section header */
.style-section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  .style-section-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
}
.style-section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f0f0f;
}
@media (prefers-color-scheme: dark) {
  .style-section-title { color: #fafafa; }
}
.style-section-blurb {
  font-size: 13px;
  color: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  .style-section-blurb { color: #a0a0a0; }
}

/* Per-section grid */
.style-section-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .style-section-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .style-section-grid { grid-template-columns: 1fr; }
}

/* Filter tabs above the gallery */
.style-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  width: fit-content;
}
@media (prefers-color-scheme: dark) {
  .style-tabs {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
}
.style-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #525252;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.style-tab:hover { color: #0f0f0f; background: rgba(255, 255, 255, 0.6); }
.style-tab.active {
  background: #ffffff;
  color: #0f0f0f;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  .style-tab { color: #a0a0a0; }
  .style-tab:hover { color: #fafafa; background: rgba(255, 255, 255, 0.06); }
  .style-tab.active {
    background: #1c1c1e;
    color: #fafafa;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
.style-tab .tab-count {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  background: rgba(0, 0, 0, 0.08);
  color: #525252;
  border-radius: 999px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.style-tab.active .tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  .style-tab .tab-count {
    background: rgba(255, 255, 255, 0.08);
    color: #a0a0a0;
  }
}
.style-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.style-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-2);
}
.style-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1);
}
.style-card .name {
  font-size: 15px; font-weight: 600; margin-bottom: 4px;
}
.style-card .cat {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.style-card .prompt {
  font-size: 12px; color: var(--muted);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Step 4 — form grid ─────────────────────────────────────────── */
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-top: 24px;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
}
.slider-row {
  display: flex; align-items: center; gap: 12px;
}

/* Intensity quick-presets — chip group */
.intensity-presets {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.preset-chip {
  padding: 5px 14px; font-size: 12px; font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 980px;
  cursor: pointer;
  transition: all 0.15s;
}
.preset-chip:hover { color: var(--accent); border-color: var(--accent); }
.preset-chip.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
}
.readout {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px; color: var(--accent);
  min-width: 50px; text-align: right;
}

/* ── Step 6 — Undo / Back nav row ────────────────────────────────── */
.step6-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
  flex-wrap: wrap;
}
.step6-nav .hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
#undo-btn:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
#undo-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Step 6 — action tabs (segmented control) ───────────────────── */
.action-tabs {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 3px;
  margin-bottom: 20px;
}
.action-tabs .tab {
  position: relative;
  padding: 6px 18px;
  border-radius: 980px;
  cursor: pointer;
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  transition: all 0.18s;
}
.action-tabs .tab input { display: none; }
.action-tabs .tab:has(input:checked) {
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-1);
}

/* ── Step 6 — pane layout ───────────────────────────────────────── */
#layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 70vh; min-height: 520px;
  margin-top: 14px;
}
.pane {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pane-header {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--fg-2);
}
.pane-header > span:first-child { flex: 1; }
.pane-header button { padding: 6px 14px; font-size: 12px; }

#src-stage, #viewer-stage {
  flex: 1; position: relative;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
#src-canvas, #overlay-canvas {
  position: absolute;
  max-width: 100%; max-height: 100%;
  pointer-events: none;
}
#overlay-canvas { pointer-events: auto; cursor: crosshair; }
#viewer-canvas { width: 100%; height: 100%; display: block; }
#viewer-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.5); font-size: 13px;
  pointer-events: none;
}
#erase-result { max-width: 100%; max-height: 100%; }

#src-controls {
  padding: 14px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}

/* Modifier-key hint above the controls */
.multiselect-hint {
  padding: 8px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.multiselect-hint kbd {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--fg);
}
#viewer-stats {
  padding: 10px 18px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* Classify-banner override controls — small "✎ change" link next to the
   auto-classified label, plus a dropdown that's hidden until clicked.
   Lets the user fix CLIP's mistake without re-running anything. */
.classify-edit-btn {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 10px;
}
.classify-override {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.classify-override select {
  min-width: 220px;
  padding: 4px 8px;
  font-size: 13px;
}

/* TripoSR multi-view debug grid (under the splat viewer).  Each tile is
   a 256×256 PNG straight from the model's native triplane render; we
   show them at responsive sizes so 8 fit per row on wide screens but
   wrap to 4×2 / 2×4 on narrow ones. */
#triposr-views {
  padding: 10px 18px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.triposr-views-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}
@media (max-width: 1100px) {
  .triposr-views-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .triposr-views-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.triposr-views-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #1a1a1a; border-radius: 4px; display: block;
}

/* ── Replace mode prompt input row ──────────────────────────────── */
#replace-row {
  background: var(--accent-soft);
  border: 1px solid rgba(255, 106, 61, 0.2);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-bottom: 16px;
}
#replace-row input { flex: 1; min-width: 200px; }
#replace-row input#replace-style-hint { max-width: 240px; flex: 0 1 240px; }

/* ── GraCo granularity slider ───────────────────────────────────── */
.gran-row {
  background: var(--accent-soft);
  border: 1px solid rgba(255, 106, 61, 0.2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.gran-anchor {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
#gran-slider { flex: 1; }

/* ── Classify banner ────────────────────────────────────────────── */
.banner {
  background: var(--accent-soft);
  border: 1px solid rgba(255, 106, 61, 0.2);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.banner strong {
  color: var(--accent);
  font-weight: 600;
  text-transform: capitalize;
}

/* ── Composite popover ──────────────────────────────────────────── */
#composite-pane {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  width: min(900px, 92vw); max-height: 85vh;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column;
  z-index: 100;
  animation: stepIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#composite-pane #composite-img {
  max-width: 100%;
  max-height: calc(85vh - 60px);
  margin: 16px auto; display: block;
  border-radius: var(--r-sm);
}

/* ── Footer ─────────────────────────────────────────────────────── */
footer {
  padding: 16px 32px;
  text-align: center;
  font-size: 12px; color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #stepper { padding: 16px; overflow-x: auto; }
  #stepper ol { min-width: 540px; }
  main { padding: 20px 16px 60px; }
  .step-header h2 { font-size: 26px; }
  .dual-pane { grid-template-columns: 1fr; }
  #layout { grid-template-columns: 1fr; height: auto; }
  #layout .pane { height: 50vh; min-height: 360px; }
}

/* ═════════════════════════════════════════════════════════════════════
   REFINED POLISH LAYER  ·  Linear / Anthropic / Vercel-style restraint
   ─────────────────────────────────────────────────────────────────────
   Goal: keep the animations + interactions (hover lifts, transitions,
   smooth focus rings, stepper glow, button feedback) but strip out the
   "candy-coloured AI startup" look — no rainbow brand gradients, no
   triple-radial pink+purple+gold wash, no shimmer-stripe on buttons.
   Replace with: monochrome ink, ONE warm cream wash, accent used
   sparingly, sophisticated neutral cards.
   Delete this entire block to revert to baseline.
   ═════════════════════════════════════════════════════════════════════ */

/* — Body: ONE warm neutral wash, not a rainbow — */
html, body {
  background:
    radial-gradient(1400px 800px at 50% -10%,
      rgba(245, 240, 235, 0.6), transparent 60%),
    #fafaf9;          /* warm cream-white — Anthropic-ish */
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  html, body {
    background:
      radial-gradient(1400px 800px at 50% -10%,
        rgba(40, 38, 35, 0.6), transparent 60%),
      #0a0a0a;
    background-attachment: fixed;
  }
}

/* — Header: frosted glass, sticky.  Brand text is SOLID INK — — */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px 32px;
  background: rgba(250, 250, 249, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  header {
    background: rgba(10, 10, 10, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
}
header .brand h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  /* No gradient — solid ink, sophisticated.  The single "_" subtle accent
     is the only flourish; rest stays editorial. */
  color: #0f0f0f;
}
@media (prefers-color-scheme: dark) {
  header .brand h1 { color: #fafafa; }
}
header .brand p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0;
}
#device-tag {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
@media (prefers-color-scheme: dark) {
  #device-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* — Stepper: frosted glass.  Subtler dot glow. — */
#stepper {
  position: sticky;
  top: 68px;
  z-index: 40;
  background: rgba(250, 250, 249, 0.7);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 18px 32px;
}
@media (prefers-color-scheme: dark) {
  #stepper {
    background: rgba(10, 10, 10, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
}
#stepper .step.active .dot {
  /* Subtler glow — not the flashy multi-shadow before */
  box-shadow:
    0 0 0 4px var(--accent-soft),
    0 2px 8px rgba(255, 106, 61, 0.18);
}

/* Position-based depth ramp — each step gets progressively darker so the
   user reads the bar as a left-to-right "depth gradient" of progress.
   These set the BASE colour; .active and .done states layer on top. */
#stepper .step:nth-child(1) .dot { background: #f5f5f4; border-color: #d6d3d1; color: #78716c; }
#stepper .step:nth-child(2) .dot { background: #e7e5e4; border-color: #a8a29e; color: #57534e; }
#stepper .step:nth-child(3) .dot { background: #a8a29e; border-color: #78716c; color: #ffffff; }
#stepper .step:nth-child(4) .dot { background: #57534e; border-color: #44403c; color: #ffffff; }
#stepper .step:nth-child(5) .dot { background: #292524; border-color: #1c1917; color: #ffffff; }
#stepper .step:nth-child(6) .dot { background: #0f0f0f; border-color: #000000; color: #ffffff; }
@media (prefers-color-scheme: dark) {
  #stepper .step:nth-child(1) .dot { background: #1c1917; border-color: #292524; color: #a8a29e; }
  #stepper .step:nth-child(2) .dot { background: #292524; border-color: #44403c; color: #d6d3d1; }
  #stepper .step:nth-child(3) .dot { background: #57534e; border-color: #78716c; color: #ffffff; }
  #stepper .step:nth-child(4) .dot { background: #a8a29e; border-color: #d6d3d1; color: #1c1917; }
  #stepper .step:nth-child(5) .dot { background: #d6d3d1; border-color: #e7e5e4; color: #1c1917; }
  #stepper .step:nth-child(6) .dot { background: #fafaf9; border-color: #ffffff; color: #0f0f0f; }
}

/* Active state — pink ring on top of whatever depth color the step has */
#stepper .step.active .dot {
  box-shadow:
    0 0 0 3px var(--bg),
    0 0 0 6px var(--accent),
    0 4px 14px rgba(255, 106, 61, 0.25);
  transform: scale(1.1);
}

/* Done state — keep the position-based depth (no green override).  This
   means progress is read as "depth fills left-to-right" instead of
   "green dots stack up", which matches the user's mental model. */
#stepper .step.done .dot {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

/* The connecting line gets a matching gradient — light on the left,
   dark on the right — reinforcing the progression. */
#stepper ol::before {
  background: linear-gradient(90deg,
    #d6d3d1 0%,
    #a8a29e 25%,
    #78716c 50%,
    #44403c 75%,
    #0f0f0f 100%);
  height: 2px;
  opacity: 0.6;
}
@media (prefers-color-scheme: dark) {
  #stepper ol::before {
    background: linear-gradient(90deg,
      #292524 0%,
      #57534e 25%,
      #a8a29e 50%,
      #d6d3d1 75%,
      #fafaf9 100%);
  }
}

/* — H2 step titles: solid ink, NOT gradient — */
.step-header h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #0f0f0f;
  -webkit-text-fill-color: initial;
  background: none;
}
@media (prefers-color-scheme: dark) {
  .step-header h2 { color: #fafafa; }
}
.step-header p {
  font-size: 15px;
  color: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  .step-header p { color: #a0a0a0; }
}

/* — Cards: cleaner, more refined shadows.  Lift animation kept. — */
.dual-pane > div,
#upload-drop,
.confirm-panel,
.style-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s;
}
.dual-pane > div:hover,
.style-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.07);
}
@media (prefers-color-scheme: dark) {
  .dual-pane > div,
  #upload-drop,
  .confirm-panel,
  .style-card {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

/* — Primary button: solid ink (deep slate-black) with hover lift — */
button.primary {
  background: #1a1a1a;
  color: #fafafa;
  border-color: #1a1a1a;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
}
button.primary:hover:not(:disabled) {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 22px rgba(0, 0, 0, 0.12);
}
button.primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
  button.primary {
    background: #fafafa;
    color: #0a0a0a;
    border-color: #fafafa;
  }
  button.primary:hover:not(:disabled) {
    background: #ffffff;
    color: #000000;
  }
}

/* — Depth viewer image: rounded — */
.dual-pane img,
#depth-img {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* — H4 column labels: refined small-caps, NOT gradient — */
.dual-pane h4 {
  font-size: 10px;
  font-weight: 600;
  color: #8b8b8b;
  -webkit-text-fill-color: initial;
  background: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* — Input focus: clean accent ring — */
input[type="text"]:focus,
.caption-row textarea#scene-caption:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* — Style card selection: clean ring, no pink halo — */
.style-card.selected {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1.5px var(--accent),
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* — Subtle scrollbar — */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
  background-clip: content-box;
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    background-clip: content-box;
  }
}

/* — Hint text typographic refinement — */
.hint, .step-header p {
  letter-spacing: -0.003em;
}

/* — Universal smooth transitions (kept from previous polish) — */
button, input, select, textarea, .style-card, .mini-chip,
.dual-pane > div {
  transition-property: background-color, border-color, color, box-shadow,
                       transform, opacity;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* — Click-to-compare viewport: cards become clickable; selected card gets
     a pink accent border so the user knows which one is "in" the top
     comparison pane. — */
.multi-card { cursor: pointer; }
.multi-card.compare-active {
  border-color: var(--accent);
  box-shadow:
    0 0 0 2px var(--accent),
    0 1px 3px rgba(255, 106, 61, 0.15),
    0 12px 32px rgba(255, 106, 61, 0.18);
  transform: translateY(-2px);
}

/* — Upscale overlay: shown while the picked style re-renders at 1536px — */
#upscale-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  animation: fade-in 0.18s ease-out;
}
#upscale-overlay.visible { display: flex; }
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.upscale-card {
  width: min(90vw, 460px);
  padding: 32px 28px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.18);
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .upscale-card {
    background: #161616;
    color: #fafafa;
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.6),
      0 24px 60px rgba(0, 0, 0, 0.6);
  }
}
.upscale-spinner {
  width: 36px; height: 36px;
  margin: 0 auto 18px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@media (prefers-color-scheme: dark) {
  .upscale-spinner { border-color: rgba(255, 255, 255, 0.10); border-top-color: var(--accent); }
}
@keyframes spin { to { transform: rotate(360deg); } }
.upscale-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.upscale-style {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 22px;
}
.upscale-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.upscale-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .upscale-progress-bar { background: rgba(255, 255, 255, 0.08); }
}
.upscale-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff6a3d 0%, #ff8557 100%);
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.upscale-progress-pct {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  min-width: 36px;
  text-align: right;
}
.upscale-phase {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  font-family: "SF Mono", ui-monospace, monospace;
}
.upscale-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* — Step 4 top-pane placeholder: "Click any version below" — */
#stylize-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  text-align: center;
}
#stylize-pending .placeholder-icon {
  font-size: 38px;
  font-weight: 300;
  color: var(--accent);
  opacity: 0.7;
  animation: bounce-arrow 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
#stylize-pending .placeholder-sub {
  font-size: 12px;
  color: var(--muted);
  max-width: 280px;
}

/* — Header right-side meta cluster (GitHub link + device tag) — */
.header-meta { display: flex; align-items: center; gap: 14px; }
.meta-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.meta-link:hover {
  background: #0f0f0f; color: #fafafa;
  border-color: #0f0f0f;
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
  .meta-link {
    color: #d2d2d7;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .meta-link:hover {
    background: #fafafa; color: #0a0a0a;
    border-color: #fafafa;
  }
}

/* — BYOK panel (Anthropic API key, user-supplied) —————————————————————
   Collapsed by default; pasted key persists in localStorage and is sent
   with each Enhance with Claude request.  Stylish but unobtrusive. */
.byok-panel {
  margin-top: 10px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.byok-panel > .byok-summary {
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  color: var(--fg-2);
  list-style: none;
  padding: 4px 0;
}
.byok-panel > .byok-summary::-webkit-details-marker { display: none; }
.byok-panel > .byok-summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
  margin-right: 4px;
}
.byok-panel[open] > .byok-summary::before { transform: rotate(90deg); }
.byok-content { margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08); }
.byok-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.byok-row #byok-input {
  flex: 1; min-width: 240px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--fg);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}
.byok-row #byok-input:focus { outline: none;
  border-color: var(--accent); }
.byok-row button { padding: 6px 12px; font-size: 11px; }
#byok-status { display: block; margin-top: 4px; font-size: 11px; }
.byok-disclaimer { margin-top: 6px; font-size: 11px; line-height: 1.4; opacity: 0.7; }
.byok-disclaimer code {
  padding: 1px 5px; font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

/* — Cloud-demo CPU banner ——————————————————————————————————————————
   Conditional warning shown only when running on HF Spaces free tier
   (device: cpu).  Amber, full-width, attention-grabbing but not
   obnoxious.  Hidden by default — JS reveals after /api/health probe. */
.cpu-banner {
  padding: 10px 24px;
  font-size: 13px; line-height: 1.5;
  text-align: center;
  color: #2d1b00;
  background: linear-gradient(90deg, #ffd17a 0%, #ffb04d 50%, #ffd17a 100%);
  border-bottom: 1px solid #e09020;
}
.cpu-banner strong { font-weight: 700; }
.cpu-banner a {
  color: #2d1b00;
  text-decoration: underline;
  font-weight: 600;
}
.cpu-banner a:hover { color: #000; }
.cpu-banner.hidden { display: none; }
@media (prefers-color-scheme: dark) {
  .cpu-banner {
    color: #1a0f00;
    background: linear-gradient(90deg, #ffb04d 0%, #ff8c1a 50%, #ffb04d 100%);
    border-bottom-color: #c66f00;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   HERO SECTION  ·  research-project-page treatment
   ═════════════════════════════════════════════════════════════════════ */

.hero {
  padding: 56px 32px 36px;
  background:
    radial-gradient(800px 400px at 20% 10%,
      rgba(255, 106, 61, 0.08), transparent 60%),
    radial-gradient(700px 400px at 90% 30%,
      rgba(99, 102, 241, 0.06), transparent 60%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(800px 400px at 20% 10%,
        rgba(244, 114, 182, 0.10), transparent 60%),
      radial-gradient(700px 400px at 90% 30%,
        rgba(129, 140, 248, 0.10), transparent 60%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* Course / institution tag */
.hero-tag {
  display: inline-block;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(255, 106, 61, 0.2);
  border-radius: 999px;
  margin-bottom: 20px;
}

/* Headline */
.hero-title {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #0f0f0f;
  margin-bottom: 18px;
  max-width: 820px;
}
.hero-title-accent {
  background: linear-gradient(120deg, #ff6a3d 0%, #ff8557 60%, #ffb088 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-color-scheme: dark) {
  .hero-title { color: #fafafa; }
}

/* Subtitle / abstract */
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: #525252;
  max-width: 720px;
  margin-bottom: 28px;
  letter-spacing: -0.005em;
}
@media (prefers-color-scheme: dark) {
  .hero-sub { color: #a8a8a8; }
}

/* Tech stack pills — strict 3×3 grid so 9 pills fill 3 even rows
   instead of breaking awkwardly with an orphan pill on the last row. */
.hero-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .hero-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hero-stack { grid-template-columns: 1fr; }
}
/* Stripe / Linear "feature card" style — tiny accent label on top,
   model name on bottom in mono.  Stacked layout means long model names
   wrap to 2 lines instead of getting clipped. */
.stack-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 400;
  color: #475569;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0;
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.stack-pill:hover {
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
  .stack-pill {
    color: #cbd5e1;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .stack-pill:hover {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(255, 255, 255, 0.14);
  }
}
.stack-pill b {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1px;
}
.stack-pill b {
  font-weight: 600;
  color: #0f0f0f;
  margin-right: 6px;
}
@media (prefers-color-scheme: dark) {
  .stack-pill {
    color: #a8a8a8;
    background: #161616;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .stack-pill b { color: #fafafa; }
}

/* Pipeline flow — 5 steps spread across full width with connector arrows */
.hero-pipeline {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 6px 24px rgba(0, 0, 0, 0.05);
  margin-bottom: 28px;
  font-family: "SF Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  .hero-pipeline {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.08);
  }
}
.pl-step {
  flex: 1 1 0;                    /* equal share of horizontal space */
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #525252;
  background: #fafafa;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
  .pl-step { background: #0a0a0a; color: #a8a8a8; }
}
.pl-step .pl-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  flex-shrink: 0;
  background: #0f0f0f;
  color: #ffffff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  font-family: -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .pl-step .pl-num { background: #fafafa; color: #0a0a0a; }
}
.pl-step.pl-final {
  flex: 1.6 1 0;                  /* final step gets a bit more width since
                                     its label is "Rotate / Erase / Replace" */
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(99, 102, 241, 0.08) 100%);
  color: var(--accent);
  font-weight: 600;
}
.pl-step.pl-final .pl-num {
  background: var(--accent);
  color: #ffffff;
}
.pl-arrow {
  flex: 0 0 28px;                 /* fixed width arrow gutter */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-family: -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  .pl-arrow { color: rgba(255, 255, 255, 0.25); }
}

@media (max-width: 760px) {
  /* On mobile collapse to a vertical stack — horizontal is too cramped */
  .hero-pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .pl-step, .pl-step.pl-final { flex: 1 1 auto; }
  .pl-arrow { transform: rotate(90deg); flex-basis: 18px; }
}

/* Example scenes strip */
.hero-examples { margin-bottom: 36px; }
.hero-examples-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8b8b8b;
  margin-bottom: 12px;
}
.hero-examples-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.hero-examples-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  background: #f0f0f0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-examples-strip img:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* CTA */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fafafa;
  background: #0f0f0f;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 6px 16px rgba(0, 0, 0, 0.08);
}
.hero-btn-primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.14);
}
@media (prefers-color-scheme: dark) {
  .hero-btn-primary {
    background: #fafafa;
    color: #0a0a0a;
  }
  .hero-btn-primary:hover { background: #ffffff; }
}
.hero-cta-hint {
  font-size: 12px;
  color: #8b8b8b;
}

/* Hero responsive */
@media (max-width: 760px) {
  .hero { padding: 36px 20px 24px; }
  .hero-title { font-size: 36px; }
  .hero-sub { font-size: 15px; }
  .hero-examples-strip { grid-template-columns: repeat(3, 1fr); }
  .hero-pipeline { font-size: 10px; padding: 10px; }
  .pl-step { padding: 4px 8px; font-size: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════
   TYPOGRAPHY + VISUAL POLISH (final layer — overrides earlier rules)
   ─────────────────────────────────────────────────────────────────────
   Goal: kill the "blocky" system-font rendering and replace with the
   exact stack Linear/Vercel/Stripe ship — Inter for sans, JetBrains
   Mono for code & numbers, with OpenType features tuned for refined
   glyph shapes (cv11 for friendlier a/g, ss01 for restrained R, tnum
   for tabular figures inside number-heavy UI like the stepper).
   ═════════════════════════════════════════════════════════════════════ */

:root {
  --font-sans:
    'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei',
    sans-serif;
  --font-mono:
    'JetBrains Mono', 'SF Mono', ui-monospace, 'Cascadia Code',
    'Consolas', monospace;
  --shadow-xs:    0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04),
                  0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 1px 2px rgba(15, 23, 42, 0.05),
                  0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-lg:    0 1px 2px rgba(15, 23, 42, 0.05),
                  0 16px 40px rgba(15, 23, 42, 0.10);
  --shadow-xl:    0 1px 2px rgba(15, 23, 42, 0.06),
                  0 24px 60px rgba(15, 23, 42, 0.14);
}

/* — Global font + smoothing override — */
html, body, button, input, select, textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* OpenType features:
       cv11 — friendlier single-storey 'a' and 'g'
       ss01 — restrained, slightly-narrowed 'R'
       cv02 — open-tail 'l'
       tnum — tabular figures (so numbers don't wiggle in tables)
       calt — contextual alternates
   */
  font-feature-settings: 'cv11' on, 'ss01' on, 'cv02' on, 'calt' on;
}

body {
  font-weight: 400;
  letter-spacing: -0.011em;
}

/* — Heading hierarchy — Inter Display tracks tighter at large sizes — */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11' on, 'ss01' on, 'cv02' on;
}
.hero-title {
  font-weight: 800;
  letter-spacing: -0.045em;            /* very tight = display feel */
  line-height: 1.02;
}
.step-header h2 {
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.12;
}
header .brand h1 {
  font-weight: 700;
  letter-spacing: -0.028em;
}
.style-section-title {
  font-weight: 700;
  letter-spacing: -0.024em;
}

/* — Code / mono / technical — JetBrains Mono with tabular figures — */
code, pre, kbd, samp,
.stack-pill, .stack-pill b,
.pl-step, .pl-arrow,
#device-tag,
.upscale-progress-pct, .upscale-phase,
.style-tab .tab-count {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'zero' on, 'cv03' on, 'ss02' on;
}

/* Stepper numbers — tabular so the dots stay visually centered */
#stepper .step .dot,
.pl-step .pl-num {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'zero' on;
  font-weight: 600;
  letter-spacing: 0;
}

/* — Refined card system — consistent radii + new shadow scale — */
.dual-pane > div,
#upload-drop,
.confirm-panel,
.style-card,
.multi-card,
.hero-pipeline {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition:
    transform     0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow    0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color  0.20s cubic-bezier(0.4, 0, 0.2, 1);
}
.dual-pane > div:hover,
.style-card:hover,
.multi-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

/* — Body links / muted text refinement — */
.hint, .step-header p, .hero-sub, .style-section-blurb {
  letter-spacing: -0.006em;
  line-height: 1.55;
}
.hero-sub { font-weight: 400; }

/* — Buttons — slightly taller touch target + refined letter-spacing — */
button {
  font-weight: 500;
  letter-spacing: -0.005em;
  font-feature-settings: 'cv11' on, 'ss01' on;
}
button.primary {
  font-weight: 600;
  letter-spacing: -0.008em;
}

/* — Inputs / selects — same letter-spacing as buttons for visual unity — */
input[type="text"], select, textarea {
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* — Step header subtitle — slightly larger, tighter tracking — */
.step-header p { font-size: 15px; }

/* — Refined focus ring — uses --accent-soft + small accent border — */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;        /* the input's box-shadow ring already handles this */
}

/* — Selection colour matches accent — */
::selection {
  background: rgba(255, 106, 61, 0.22);
  color: inherit;
}

/* — Decimal/numeric pill (e.g. "0.85" strength chip on multi-cards) — */
.strength-pill,
.multi-status,
.tab-count,
#strength-readout {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on, 'zero' on;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* — Hero examples strip caption — uppercase mono for label feel — */
.hero-examples-label,
.dual-pane h4,
#stepper .step .lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* — Style category section title gets a leading dot for editorial feel — */
.style-section-title {
  font-size: 24px;
}
.style-section-blurb { font-size: 13.5px; }

/* — Refined stepper: bigger dots, sharper number rendering — */
#stepper .step .dot {
  width: 30px; height: 30px;
  font-size: 12.5px;
}

/* — Hero subtitle: slight serif-of-thought via paragraph spacing — */
.hero-sub {
  font-size: 18px;
  line-height: 1.55;
  max-width: 680px;
}
@media (max-width: 760px) {
  .hero-sub { font-size: 15px; }
}

/* — Pipeline flow: Inter for labels, mono for the step numbers — */
.hero-pipeline { font-family: var(--font-sans); }
.pl-step { font-family: var(--font-sans); font-weight: 500; }
.pl-step .pl-num { font-family: var(--font-mono); }

/* — Tighter, prettier scrollbar — */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.28);
  background-clip: content-box;
}
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    background-clip: content-box;
  }
}

/* — Subtle 1-pixel sharpening on small UI text everywhere — */
.hint, label, .lbl, .pl-step, .stack-pill, .multi-status,
.style-section-blurb, .step-header p {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* — Optional VFX depth export button (Step 2) — */
.depth-download-row {
  margin: 16px 0 4px;
  display: flex;
  justify-content: flex-start;
}
.depth-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-xs);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.depth-dl-btn:hover {
  border-color: var(--accent);
  box-shadow:
    0 1px 2px rgba(255, 106, 61, 0.12),
    0 8px 22px rgba(255, 106, 61, 0.10);
  transform: translateY(-1px);
}
.depth-dl-btn .dl-icon {
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
.depth-dl-btn .dl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.depth-dl-btn .dl-fmt {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f0f0f;
}
.depth-dl-btn .dl-desc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0;
}
@media (prefers-color-scheme: dark) {
  .depth-dl-btn {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.10);
  }
  .depth-dl-btn .dl-fmt   { color: #fafafa; }
  .depth-dl-btn .dl-desc  { color: #98a3b3; }
}

/* ═════════════════════════════════════════════════════════════════════
   STEPPER — refined.  Fixes (a) the connecting line overlapping label
   text and (b) the overall ugliness of the previous design.
   Strategy: explicit z-index layers, larger gap between dot and label,
   line constrained to dot-row only, circles bigger and more refined.
   ═════════════════════════════════════════════════════════════════════ */

#stepper {
  padding: 22px 32px 18px;
}
#stepper ol {
  position: relative;
  padding: 0 32px;        /* keep line away from page edges */
}
#stepper .step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px !important;   /* MUCH bigger gap → label clearly below line */
  position: relative;
  z-index: 2;             /* dots + labels on top of line */
}

/* Connecting line — repositioned to exactly the centre of the 32-px dots,
   trimmed inside the 32-px-padded ol so it never extends past first/last
   dot, and pushed behind everything via z-index 0. */
#stepper ol::before {
  content: "";
  position: absolute;
  top: 17px;              /* (32 / 2) + 1 = exact dot vertical centre */
  left: calc(8.33% + 16px);   /* centre of 1st of 6 step columns */
  right: calc(8.33% + 16px);  /* centre of 6th of 6 step columns */
  height: 1px;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.10) 0%,
    rgba(15, 23, 42, 0.20) 50%,
    rgba(15, 23, 42, 0.10) 100%);
  z-index: 0;             /* well behind dots and labels */
  border-radius: 999px;
}
@media (prefers-color-scheme: dark) {
  #stepper ol::before {
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.20) 50%,
      rgba(255, 255, 255, 0.12) 100%);
  }
}

/* Refined circles — slightly bigger, cleaner mono numbering */
#stepper .step .dot {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;             /* always on top of line */
  border: 1.5px solid;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default (pending) dot — light, hollow */
#stepper .step:not(.active):not(.done) .dot {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: #8b8b8b;
}
@media (prefers-color-scheme: dark) {
  #stepper .step:not(.active):not(.done) .dot {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: #8b8b8b;
  }
}

/* Done dot — solid ink fill */
#stepper .step.done .dot {
  background: #0f0f0f !important;
  border-color: #0f0f0f !important;
  color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  #stepper .step.done .dot {
    background: #fafafa !important;
    border-color: #fafafa !important;
    color: #0a0a0a !important;
  }
}

/* Active dot — pink ring + scale */
#stepper .step.active .dot {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  transform: scale(1.12);
  box-shadow:
    0 0 0 5px var(--accent-soft),
    0 4px 14px rgba(255, 106, 61, 0.30);
}
@media (prefers-color-scheme: dark) {
  #stepper .step.active .dot {
    background: #1c1c1e !important;
  }
}

/* Labels — uppercase ink mono, clear spacing from line above */
#stepper .step .lbl {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b8b8b;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  background: transparent;  /* no opaque box hiding the line; line is below */
}
#stepper .step.active .lbl {
  color: var(--accent);
  font-weight: 700;
}
#stepper .step.done .lbl {
  color: #0f0f0f;
}
@media (prefers-color-scheme: dark) {
  #stepper .step.done .lbl { color: #fafafa; }
}

/* Kill the older position-based progressive-darkening rules from the polish
   layer above — they conflict with this clean state-based system. */
#stepper .step:nth-child(1) .dot,
#stepper .step:nth-child(2) .dot,
#stepper .step:nth-child(3) .dot,
#stepper .step:nth-child(4) .dot,
#stepper .step:nth-child(5) .dot,
#stepper .step:nth-child(6) .dot {
  /* Reset — let the .active / .done / default rules above take over */
}

/* ════════════════════════════════════════════════════════════════════════ */
/* VERCEL / LINEAR UPGRADE LAYER · v5                                       */
/* ──────────────────────────────────────────────────────────────────────── */
/* Visual + interaction overhaul. Layered on top of all existing rules so   */
/* it overrides selectively without breaking the existing wizard flow.     */
/*   1. Refined dark palette + cyan/pink gradient accents                   */
/*   2. Body-wide subtle dot grid + ambient gradient orbs                   */
/*   3. Glassmorphism card primitive                                        */
/*   4. Hero re-skin (gradient title, stat counter row, typewriter)         */
/*   5. Style-card 3D tilt host (perspective + transform-style)             */
/*   6. Scroll-reveal default-hidden + revealed states                      */
/*   7. Skeleton shimmer for long tasks                                     */
/*   8. Step6 frosted compare-slider handle                                 */
/* ════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Deepen background; widen gradient palette */
    --bg-deep:        #07070b;
    --bg-base:        #0a0a10;
    --bg-elev1:       #11111a;
    --bg-elev2:       #16161f;
    --glass-bg:       rgba(255, 255, 255, 0.035);
    --glass-bg-hi:    rgba(255, 255, 255, 0.06);
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-border-hi:rgba(255, 255, 255, 0.16);
    --txt-strong:     #f5f5fa;
    --txt-base:       #c5c6d0;
    --txt-mute:       #7a7c8a;
    --txt-faint:      #4a4c5a;
    --grad-pink:      #ff6a3d;
    --grad-violet:    #ff8557;
    --grad-cyan:      #ffb088;
    --grad-cyan-hi:   #ffd0b0;
    --grad-line:      linear-gradient(135deg, var(--grad-pink), var(--grad-violet) 40%, var(--grad-cyan));
    --grad-soft:      linear-gradient(135deg, rgba(255, 77, 141, 0.18), rgba(78, 203, 255, 0.18));
    --shadow-glow:    0 0 0 1px var(--glass-border-hi),
                      0 8px 24px rgba(0, 0, 0, 0.4),
                      0 0 32px rgba(196, 79, 255, 0.08);
  }

  /* Body — pitch dark base + subtle dot grid + two ambient gradient orbs.
     Pure CSS, no images. The orbs are radial gradients on body::before
     (top-left pink) and body::after (bottom-right cyan), positioned
     fixed so they stay in view as the user scrolls. */
  body {
    background: var(--bg-deep) !important;
    color: var(--txt-base);
    background-image:
      radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
    background-attachment: fixed !important;
    position: relative;
  }
  body::before, body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: 0;
    width: 65vw;
    height: 65vw;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
  }
  body::before {
    top: -25vw;
    left: -20vw;
    background: radial-gradient(circle at center,
                rgba(255, 77, 141, 0.45) 0%,
                rgba(255, 77, 141, 0) 60%);
  }
  body::after {
    bottom: -30vw;
    right: -25vw;
    background: radial-gradient(circle at center,
                rgba(78, 203, 255, 0.32) 0%,
                rgba(78, 203, 255, 0) 60%);
  }
  /* Make sure all real content sits above the orb layer */
  header, .hero, main, nav#stepper { position: relative; z-index: 1; }
}

/* ─── Glassmorphism primitive ────────────────────────────────────────── */
.glass-v5 {
  background: var(--glass-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.35);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.glass-v5:hover {
  border-color: var(--glass-border-hi, rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--glass-border-hi);
}

/* ─── Hero re-skin (V5) ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .hero { padding: 72px 24px 48px !important; }

  .hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-base);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    margin-bottom: 24px;
  }
  .hero-tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--grad-cyan);
    box-shadow: 0 0 8px var(--grad-cyan);
    animation: v5-pulse 2.4s ease-in-out infinite;
  }
  @keyframes v5-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
  }

  .hero-title {
    font-size: clamp(48px, 7vw, 88px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
    font-weight: 700 !important;
    margin: 0 0 24px 0 !important;
    color: var(--txt-strong);
  }
  .hero-title-accent {
    background: var(--grad-line);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: v5-grad-shift 8s ease-in-out infinite;
  }
  @keyframes v5-grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  .hero-sub {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--txt-base) !important;
    max-width: 720px;
    margin-bottom: 36px !important;
  }
  /* Typewriter caret */
  .hero-sub[data-typewriter]::after {
    content: "▍";
    color: var(--grad-cyan);
    animation: v5-blink 0.8s steps(1) infinite;
    margin-left: 2px;
  }
  .hero-sub[data-typewriter].typewriter-done::after { display: none; }
  @keyframes v5-blink { 50% { opacity: 0; } }

  /* Stat counter row — 4 metrics, glass cards */
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 32px 0 32px 0;
    max-width: 760px;
  }
  @media (max-width: 720px) {
    .hero-stats { grid-template-columns: repeat(2, 1fr); }
  }
  .hero-stat {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 18px 18px 16px;
    backdrop-filter: blur(10px);
    transition: border-color .25s ease, transform .25s ease;
    position: relative;
    overflow: hidden;
  }
  .hero-stat::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--grad-line);
    border-radius: inherit;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
    filter: blur(8px);
  }
  .hero-stat:hover {
    border-color: var(--glass-border-hi);
    transform: translateY(-2px);
  }
  .hero-stat:hover::before { opacity: 0.45; }
  .hero-stat-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;
    color: var(--txt-strong);
    letter-spacing: -0.02em;
    background: var(--grad-line);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero-stat-lbl {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--txt-mute);
  }

  /* Stack pills — V5 frost */
  .hero-stack { gap: 8px !important; margin-bottom: 28px !important; }
  .stack-pill {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    color: var(--txt-base) !important;
    transition: border-color .2s ease, transform .2s ease;
  }
  .stack-pill:hover {
    border-color: var(--glass-border-hi) !important;
    transform: translateY(-1px);
  }
  .stack-pill b {
    background: var(--grad-line);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 6px;
    font-weight: 600;
  }

  /* CTA button — gradient primary */
  .hero-btn-primary {
    background: var(--grad-line) !important;
    background-size: 150% 150% !important;
    color: #08080d !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    box-shadow:
      0 8px 24px rgba(255, 77, 141, 0.25),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    transition: transform .2s ease, box-shadow .2s ease, background-position .4s ease !important;
  }
  .hero-btn-primary:hover {
    transform: translateY(-2px);
    background-position: 100% 100% !important;
    box-shadow:
      0 12px 32px rgba(255, 77, 141, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
  }
}

/* ─── Style gallery: 3D tilt host ─────────────────────────────────────── */
#style-gallery, .multi-grid {
  perspective: 1400px;
}
.style-card, .multi-cell, #confirm-grid > * {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1),
              box-shadow .35s ease,
              border-color .25s ease !important;
  will-change: transform;
  position: relative;
}
/* Cursor halo — fades in on hover, follows mouse via JS-set CSS vars */
.style-card::before, .multi-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 77, 141, 0.18),
    rgba(78, 203, 255, 0.10) 35%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  z-index: 1;
}
.style-card:hover::before, .multi-cell:hover::before { opacity: 1; }
.style-card:hover, .multi-cell:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--glass-border-hi, rgba(255, 255, 255, 0.18));
}
/* Make sure card content stays above the halo */
.style-card > *, .multi-cell > * { position: relative; z-index: 2; }

/* ─── Scroll reveal: hidden → visible on enter viewport ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1),
              transform .7s cubic-bezier(.2, .8, .2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger via inline --d (delay in ms) on each child */
.reveal[style*="--d"] { transition-delay: var(--d); }

/* ─── Skeleton shimmer (long task placeholders) ──────────────────────── */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev1, #11111a);
  border-radius: 12px;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 25%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 75%
  );
  background-size: 250% 100%;
  animation: v5-shimmer 1.6s infinite;
}
@keyframes v5-shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -150% 0; }
}

/* ─── Step6 frosted compare slider ───────────────────────────────────── */
.compare-handle, #compare-slider .handle, .step6-compare .handle {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(20, 20, 30, 0.55) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border-hi, rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 0 0 4px rgba(255, 77, 141, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  display: grid !important;
  place-items: center;
  cursor: ew-resize;
  transition: transform .2s ease, box-shadow .2s ease;
}
.compare-handle:hover, #compare-slider .handle:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 0 6px rgba(255, 77, 141, 0.22),
    0 12px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.compare-handle::before, #compare-slider .handle::before {
  content: "⇆";
  font-size: 16px;
  color: var(--txt-strong);
  letter-spacing: -2px;
  font-weight: 600;
}
/* Vertical split line: white/cyan animated pulse */
.compare-divider, #compare-slider .divider, .step6-compare .divider {
  width: 2px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 15%,
    var(--grad-cyan, #ffb088) 50%,
    rgba(255, 255, 255, 0.6) 85%,
    transparent 100%) !important;
  box-shadow: 0 0 12px rgba(78, 203, 255, 0.5);
  animation: v5-divider-pulse 2.5s ease-in-out infinite;
}
@keyframes v5-divider-pulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 12px rgba(78, 203, 255, 0.5); }
  50%      { opacity: 1.0;  box-shadow: 0 0 20px rgba(78, 203, 255, 0.8); }
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible,
  .style-card, .multi-cell,
  .hero-title-accent, .hero-tag::before,
  .compare-divider, .skeleton::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  .reveal { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* V6 · MONO + SIGNAL ORANGE (filmic) — overrides v5 pink/violet/cyan rainbow */
/* ──────────────────────────────────────────────────────────────────────── */
/* Single-hue orange story (#ff6a3d core, #ff8557 mid, #ffb088 highlight),  */
/* cool steel-blue counter-orb, monochrome text hierarchy. Reads "film grading suite / Arri colour science" rather than "2019 SaaS landing page".          */
/* All overrides via !important to selectively beat the v5 layer above.    */
/* ════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Reuse v5 var names so existing rules keep working — just swap the
       hex values to a single-hue orange ramp. */
    --grad-pink:      #ff6a3d;     /* core signal orange */
    --grad-violet:    #ff8557;     /* mid orange */
    --grad-cyan:      #ffb088;     /* warm peach highlight */
    --grad-cyan-hi:   #ffd0b0;
    --grad-line:      linear-gradient(120deg, #ff6a3d 0%, #ff8a55 60%, #ffb088 100%);
    --grad-soft:      linear-gradient(135deg, rgba(255, 106, 61, 0.18), rgba(255, 176, 136, 0.10));
    --shadow-glow:    0 0 0 1px var(--glass-border-hi),
                      0 8px 24px rgba(0, 0, 0, 0.45),
                      0 0 32px rgba(255, 106, 61, 0.08);
  }

  /* Replace pink (top-left) + cyan (bottom-right) orbs with cool steel
     (top-left, low-chroma counterweight) + warm orange (bottom-right). */
  body::before {
    background: radial-gradient(circle at center,
                rgba(50, 70, 100, 0.45) 0%,
                rgba(50, 70, 100, 0) 60%) !important;
    opacity: 0.45 !important;
  }
  body::after {
    background: radial-gradient(circle at center,
                rgba(255, 106, 61, 0.30) 0%,
                rgba(255, 106, 61, 0) 60%) !important;
    opacity: 0.40 !important;
  }
}

/* ─── Hero title accent (tonal orange, not rainbow) ─────────────────────── */
.hero-title-accent {
  background: linear-gradient(120deg, #ff6a3d 0%, #ff9870 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-size: 200% 200% !important;
}

/* ─── Hero tag dot — orange pulse ──────────────────────────────────────── */
.hero-tag::before {
  background: #ff6a3d !important;
  box-shadow: 0 0 8px rgba(255, 106, 61, 0.8) !important;
}

/* ─── Stat numbers — solid signal orange, no rainbow ───────────────────── */
.hero-stat-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ff6a3d !important;
  color: #ff6a3d !important;
  text-shadow: 0 0 24px rgba(255, 106, 61, 0.18);
}

/* Hero stat hover glow halo — orange only */
.hero-stat::before {
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8557 100%) !important;
}

/* ─── Stack pill bold highlight — solid orange ─────────────────────────── */
.stack-pill b {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ff8557 !important;
  color: #ff8557 !important;
}

/* ─── CTA primary — orange filled ──────────────────────────────────────── */
.hero-btn-primary {
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8557 60%, #ffa070 100%) !important;
  background-size: 180% 180% !important;
  color: #0a0a0e !important;
  box-shadow:
    0 8px 24px rgba(255, 106, 61, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
}
.hero-btn-primary:hover {
  box-shadow:
    0 12px 32px rgba(255, 106, 61, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.20) inset !important;
}

/* ─── Typewriter caret — orange ────────────────────────────────────────── */
.hero-sub[data-typewriter]::after {
  color: #ff6a3d !important;
}

/* ─── Card cursor halo — orange single-hue ─────────────────────────────── */
.style-card::before, .multi-cell::before {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 106, 61, 0.22),
    rgba(255, 133, 87, 0.08) 35%,
    transparent 62%
  ) !important;
}
.style-card:hover, .multi-cell:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 36px rgba(255, 106, 61, 0.10) !important;
}

/* ─── Compare slider — orange, not cyan ────────────────────────────────── */
.compare-handle, #compare-slider .handle, .step6-compare .handle {
  box-shadow:
    0 0 0 4px rgba(255, 106, 61, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.compare-handle:hover, #compare-slider .handle:hover {
  box-shadow:
    0 0 0 6px rgba(255, 106, 61, 0.22),
    0 12px 32px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.compare-divider, #compare-slider .divider, .step6-compare .divider {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.7) 15%,
    #ff6a3d 50%,
    rgba(255, 255, 255, 0.7) 85%,
    transparent 100%) !important;
  box-shadow: 0 0 12px rgba(255, 106, 61, 0.55) !important;
}
@keyframes v5-divider-pulse {
  0%, 100% { opacity: 0.85; box-shadow: 0 0 12px rgba(255, 106, 61, 0.55); }
  50%      { opacity: 1.0;  box-shadow: 0 0 22px rgba(255, 106, 61, 0.85); }
}

/* ─── Subtle filmic vignette (4 corners darken slightly) ───────────────── */
@media (prefers-color-scheme: dark) {
  body::before, body::after { mix-blend-mode: screen; }
}

/* ─── Stepper colour → v6 signal orange (was v5 pink) ──────────────────── */
@media (prefers-color-scheme: dark) {
  #stepper .step.active .dot {
    background: #ff6a3d !important;
    color: #0a0a0e !important;
    border-color: #ff6a3d !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 61, 0.18) !important;
  }
  #stepper .step.active .lbl {
    color: #ff6a3d !important;
  }
  #stepper .step.done .dot {
    background: rgba(255, 106, 61, 0.7) !important;
    border-color: rgba(255, 106, 61, 0.7) !important;
    color: #0a0a0e !important;
  }
  /* Connecting line — neutral grey, with active portion orange */
  #stepper::before, #stepper .progress-line {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  #stepper .progress-line.fill,
  #stepper::after {
    background: #ff6a3d !important;
  }
}

/* ─── FIX: stepper label vs step heading overlap ───────────────────────── */
/* Stepper labels sit below the numbered dots; the very next element is the
   first .wizard-step's <h2>.  Without breathing room they collide vertically.
   Push the wizard headings down and pad the stepper bottom so labels can
   render without overlapping the H2. */
nav#stepper {
  margin-bottom: 32px !important;
  padding-bottom: 18px !important;
}
.wizard-step .step-header {
  margin-top: 24px !important;
}
.wizard-step .step-header h2 {
  margin-top: 0 !important;
  padding-top: 8px;
}
/* The first step (#try anchor lands here) needs even more breathing room
   because it has no preceding wizard-step header to space it. */
.wizard-step[data-step="1"] {
  padding-top: 12px;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* HERO PIPELINE · Yellow→Red heat ramp                                    */
/* ──────────────────────────────────────────────────────────────────────── */
/* Mirror the colour-coding used by Strava heart-rate zones, GitHub heat   */
/* graph, thermal cameras: cool start → hot finish, communicating that     */
/* each step layers more compute/generation intensity onto the previous.   */
/* 5 stops (matplotlib "YlOrRd"-flavoured):                                */
/*   1 #ffc94d golden yellow                                               */
/*   2 #ffa83a amber                                                       */
/*   3 #ff8638 warm orange                                                 */
/*   4 #f96638 red-orange  (≈ v6 brand orange)                             */
/*   5 #e0382c deep signal red  (climax)                                   */
/* ════════════════════════════════════════════════════════════════════════ */

.hero-pipeline {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  backdrop-filter: blur(10px);
}

.pl-step {
  background: var(--glass-bg, rgba(255, 255, 255, 0.035));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 10px 16px 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform .25s ease, border-color .25s ease,
              background .25s ease, box-shadow .25s ease;
  position: relative;
}
.pl-step:hover { transform: translateY(-1px); }

.pl-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #0a0a0e;
  flex-shrink: 0;
  transition: box-shadow .25s ease, transform .25s ease;
}
.pl-lbl {
  color: var(--txt-strong, #f5f5fa);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.pl-arrow {
  font-size: 16px;
  font-weight: 300;
  user-select: none;
  transition: color .25s ease;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* V6.1 · FORCE DARK MODE GLOBALLY                                          */
/* ──────────────────────────────────────────────────────────────────────── */
/* Earlier v5 / v6 rules were gated by @media (prefers-color-scheme: dark)  */
/* so users on Mac/Windows light-mode saw the legacy v4 light palette       */
/* (pink hero-tag, pink stepper dots) leaking through.  This block forces   */
/* the page into dark appearance regardless of system preference and        */
/* re-applies the orange-theme overrides UNCONDITIONALLY (no @media).      */
/* The design is dark-only by intent — same approach as Linear, Vercel,    */
/* Pitch, Arc.                                                             */
/* ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  /* Re-state the dark palette tokens at top level so any cascade that     */
  /* references them gets the dark values regardless of @media match.      */
  --bg-deep:        #07070b;
  --bg-base:        #0a0a10;
  --bg-elev1:       #11111a;
  --bg-elev2:       #16161f;
  --glass-bg:       rgba(255, 255, 255, 0.035);
  --glass-bg-hi:    rgba(255, 255, 255, 0.06);
  --glass-border:   rgba(255, 255, 255, 0.08);
  --glass-border-hi:rgba(255, 255, 255, 0.16);
  --txt-strong:     #f5f5fa;
  --txt-base:       #c5c6d0;
  --txt-mute:       #7a7c8a;
  --txt-faint:      #4a4c5a;
  --grad-pink:      #ff6a3d;
  --grad-violet:    #ff8557;
  --grad-cyan:      #ffb088;
  --grad-cyan-hi:   #ffd0b0;
  --grad-line:      linear-gradient(120deg, #ff6a3d 0%, #ff8a55 60%, #ffb088 100%);
  --accent:         #ff6a3d;
}

html, body {
  background: #07070b !important;
  color: #c5c6d0 !important;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-attachment: fixed !important;
}

/* Re-apply the ambient orbs unconditionally */
body::before, body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
}
body::before {
  top: -25vw; left: -20vw;
  background: radial-gradient(circle at center,
              rgba(50, 70, 100, 0.45) 0%,
              rgba(50, 70, 100, 0) 60%) !important;
  opacity: 0.45 !important;
}
body::after {
  bottom: -30vw; right: -25vw;
  background: radial-gradient(circle at center,
              rgba(255, 106, 61, 0.30) 0%,
              rgba(255, 106, 61, 0) 60%) !important;
  opacity: 0.40 !important;
}

/* Header / hero / main always above the orb layer */
header, .hero, main, nav#stepper { position: relative; z-index: 1; }

/* ── Hero tag (the "MSC GENERATIVE AI FOR MEDIA · NCCA" pill) ─────────── */
/* Was rendering pink-on-pink in light mode. Force orange-themed glass.   */
.hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #c5c6d0 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 24px !important;
}
.hero-tag::before {
  content: "" !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: #ff6a3d !important;
  box-shadow: 0 0 8px rgba(255, 106, 61, 0.85) !important;
  animation: v5-pulse 2.4s ease-in-out infinite !important;
}

/* ── Hero title — always white strong, accent always orange ───────────── */
.hero-title { color: #f5f5fa !important; }
.hero-sub   { color: #c5c6d0 !important; }

/* ── Stepper dots — 6-step yellow→deep-red heat ramp ──────────────────── */
/* Same metaphor as hero-pipeline: each step owns a distinct colour on   */
/* the thermal ramp, escalating toward the climax (Step 6 — Interact).   */
/* CSS custom prop --heat is set per :nth-child, then active/done states */
/* read it via color-mix so we never repeat hex literals.                */
#stepper .step:nth-child(1) { --heat: #ffc94d; }   /* golden yellow  */
#stepper .step:nth-child(2) { --heat: #ffa83a; }   /* amber          */
#stepper .step:nth-child(3) { --heat: #ff8638; }   /* warm orange    */
#stepper .step:nth-child(4) { --heat: #f96638; }   /* red-orange     */
#stepper .step:nth-child(5) { --heat: #ec4a30; }   /* coral red      */
#stepper .step:nth-child(6) { --heat: #d62820; }   /* deep red — climax */

#stepper .step.active .dot {
  background: var(--heat, #ff6a3d) !important;
  color: #0a0a0e !important;
  border-color: var(--heat, #ff6a3d) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--heat, #ff6a3d) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--heat, #ff6a3d) 38%, transparent) !important;
}
#stepper .step.active .lbl {
  color: var(--heat, #ff6a3d) !important;
}
#stepper .step.done .dot {
  background: color-mix(in srgb, var(--heat, #ff6a3d) 70%, transparent) !important;
  border-color: color-mix(in srgb, var(--heat, #ff6a3d) 70%, transparent) !important;
  color: #0a0a0e !important;
}
#stepper .step.done .lbl {
  color: color-mix(in srgb, var(--heat, #ff6a3d) 80%, transparent) !important;
}

/* Fallback for browsers without color-mix (Safari < 16.4, Firefox < 113) */
@supports not (color: color-mix(in srgb, red, blue)) {
  #stepper .step.active .dot,
  #stepper .step.done .dot {
    background: var(--heat, #ff6a3d) !important;
    border-color: var(--heat, #ff6a3d) !important;
  }
  #stepper .step.done .dot { opacity: 0.7; }
  #stepper .step.active .lbl,
  #stepper .step.done .lbl {
    color: var(--heat, #ff6a3d) !important;
  }
}
#stepper .step:not(.active):not(.done) .dot {
  /* Opaque background that matches body so the connector line behind  */
  /* the dot is properly occluded — fixes "line crosses 2-6 dot" bug.         */
  background: #07070b !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #c5c6d0 !important;
  z-index: 2 !important;
  position: relative;
}
#stepper .step:not(.active):not(.done) .lbl {
  color: #7a7c8a !important;
}
/* Active and done dots also need to be opaque to occlude the line.    */
#stepper .step.active .dot,
#stepper .step.done .dot {
  z-index: 2 !important;
  position: relative;
}
/* Connector line — keep behind dots */
#stepper ol::before {
  z-index: 0 !important;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.10) 100%) !important;
}

/* ── Hero stat numbers (still need explicit override outside @media) ──── */
.hero-stat-num {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #ff6a3d !important;
  color: #ff6a3d !important;
  text-shadow: 0 0 24px rgba(255, 106, 61, 0.18);
}
.hero-stat-lbl { color: #7a7c8a !important; }
.hero-stat {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* ── Stack pill highlight (CAPTION/DEPTH/STYLIZE/etc.) — orange ───────── */
.stack-pill b {
  background: none !important;
  -webkit-text-fill-color: #ff8557 !important;
  color: #ff8557 !important;
}
.stack-pill {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #c5c6d0 !important;
}

/* ── Hero typography + layout (was @media dark only — now universal) ──── */
/* These rules govern the visual structure of the hero, NOT colour, so    */
/* they must apply in both light- and dark-system-mode for the design to  */
/* render the same.  In light mode the page is forced dark above; without */
/* these rules the 4 stat cards stretch to full row width (broken).       */
.hero {
  padding: 72px 24px 48px !important;
  position: relative;
  z-index: 1;
}
.hero-title {
  font-size: clamp(48px, 7vw, 88px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
  margin: 0 0 24px 0 !important;
}
.hero-sub {
  font-size: 18px !important;
  line-height: 1.6 !important;
  max-width: 720px;
  margin-bottom: 36px !important;
  /* Honour the &#10; (literal \n) inside the data-typewriter string so the */
  /* lead sentence "A single-image indoor scene editor." sits on its own   */
  /* line and the workflow flow gets line 2.  pre-line collapses runs of   */
  /* spaces but preserves explicit newlines.                                */
  white-space: pre-line !important;
}

/* 4-column grid — the missing fix from the light-mode bug report.
   No max-width — let it span the full hero-inner width so the right
   edge aligns with the stack pills, pipeline, and example strip below. */
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 32px 0 32px 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.hero-stat {
  border-radius: 14px !important;
  padding: 18px 18px 16px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.hero-stat:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
}
.hero-stat-num {
  display: block !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.hero-stat-lbl {
  display: block !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
@media (max-width: 720px) {
  .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Hero stack — outer container spacing (was inside @media too) */
.hero-stack {
  margin-bottom: 28px !important;
}

/* ── Uniform width for all hero sections — fixes ragged right edge ── */
/* All sub-sections inside hero-inner now share the same width so the    */
/* right edges form a clean vertical line (hero-stats / hero-stack /     */
/* hero-pipeline / hero-examples).  hero-inner itself is the canonical   */
/* container — we widen its cap so 5 example images breathe.             */
.hero-inner {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto;
}
.hero-stats,
.hero-stack,
.hero-pipeline,
.hero-examples,
.hero-examples-strip {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Pipeline keeps its 3×6 = 5-step layout but stretches to the same width */
.hero-pipeline {
  justify-content: space-between;
}
/* Example scenes strip — 5 images, equal-width grid */
.hero-examples-strip {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.hero-examples-strip img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
@media (max-width: 720px) {
  .hero-examples-strip { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
  .hero-examples-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* CTA hint text under the button */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-cta-hint {
  color: #7a7c8a !important;
  font-size: 13px;
}

/* ── Stack pill grid: enforce equal-width 3×3 (responsive 2×4 / 1×9) ──── */
/* No max-width here either — let the grid fill parent so the right edge */
/* aligns with hero-stats above and hero-pipeline / examples strip below. */
.hero-stack {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
}
.hero-stack .stack-pill {
  width: 100% !important;
  min-width: 0 !important;
  /* Vertical layout inside each cell: orange label on top, model list  */
  /* below.  flex column + center keeps short cards visually balanced   */
  /* with two-line cards (e.g. STYLIZE: "Realistic Vision V5.1 + ...").  */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  /* Allow text to wrap inside each fixed-width cell */
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.45;
}
.hero-stack .stack-pill b {
  display: block;
  margin: 0 0 6px 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600 !important;
}

/* Responsive: 720px → 2 cols, 480px → 1 col */
@media (max-width: 720px) {
  .hero-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .hero-stack {
    grid-template-columns: 1fr !important;
  }
}

/* ── Stack pills are now clickable (button) — affordance + hover state ── */
button.stack-pill {
  cursor: pointer !important;
  font: inherit !important;
  text-align: left !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
}
button.stack-pill:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 106, 61, 0.30) !important;
  transform: translateY(-1px);
}
button.stack-pill:focus-visible {
  border-color: rgba(255, 106, 61, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.22) !important;
}
/* Tiny "click for source" affordance — top-right corner ↗ icon */
button.stack-pill::after {
  content: "↗";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.25);
  transition: color .2s ease, transform .2s ease;
  font-family: ui-monospace, monospace;
  pointer-events: none;
}
button.stack-pill:hover::after {
  color: #ff8557;
  transform: translate(2px, -2px);
}

/* ── Paper popover ────────────────────────────────────────────────────── */
.stack-pill-popover {
  position: absolute;
  z-index: 10000;
  background: rgba(15, 15, 22, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity .18s cubic-bezier(.2,.8,.2,1),
    transform .18s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  max-width: min(420px, 92vw);
}
.stack-pill-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.popover-row {
  padding: 10px 12px 12px;
  border-radius: 10px;
}
.popover-row + .popover-row {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
  padding-top: 14px;
}
.popover-row-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #ff8557;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  text-transform: none;
}
.popover-row-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.popover-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  color: #c5c6d0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
  font-weight: 500;
}
.popover-link:hover {
  background: rgba(255, 106, 61, 0.10);
  border-color: rgba(255, 106, 61, 0.40);
  color: #ffaa80;
  transform: translateY(-1px);
}
.popover-link svg {
  flex-shrink: 0;
}
.popover-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  font-style: italic;
}
.popover-link.disabled:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
  color: #c5c6d0;
  transform: none;
}

/* ── Arrow pointer (CSS triangle from popover → trigger) ──────────────── */
.popover-arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
.stack-pill-popover[data-placement="below"] .popover-arrow {
  top: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(15, 15, 22, 0.94);
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.10));
}
.stack-pill-popover[data-placement="above"] .popover-arrow {
  bottom: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(15, 15, 22, 0.94);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10));
}

/* ── Active state — open trigger gets orange edge highlight ───────────── */
.stack-pill.is-popover-open,
.hero-stat.is-popover-open {
  background: rgba(255, 106, 61, 0.08) !important;
  border-color: rgba(255, 106, 61, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 61, 0.30) inset,
              0 8px 24px rgba(255, 106, 61, 0.12) !important;
}
.stack-pill.is-popover-open::after {
  color: #ff6a3d !important;
  transform: rotate(45deg) translate(2px, -2px) !important;
}

/* ── Hero stat: clickable button affordance ───────────────────────────── */
button.hero-stat {
  cursor: pointer !important;
  text-align: left !important;
  font: inherit !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
button.hero-stat:focus-visible {
  border-color: rgba(255, 106, 61, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(255, 106, 61, 0.22) !important;
}
.hero-stat-cue {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.22);
  font-family: ui-monospace, monospace;
  transition: color .2s ease, transform .2s ease;
  pointer-events: none;
}
button.hero-stat:hover .hero-stat-cue {
  color: #ff8557;
  transform: translate(2px, -2px);
}
button.hero-stat.is-popover-open .hero-stat-cue {
  color: #ff6a3d;
  transform: rotate(135deg);   /* ↗ → ↙ — visual cue: now closes */
}

/* ── Stat-popover specific styling (different rows than paper-popover) ── */
.stack-pill-popover.stat-popover {
  max-width: min(440px, 92vw);
  padding: 4px;
}
.popover-header {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ff8557;
  font-weight: 600;
  padding: 10px 14px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}
.popover-stat-row {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: default;
  transition: background .15s ease;
}
.popover-stat-row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.popover-stat-name {
  font-size: 13px;
  color: #f5f5fa;
  font-weight: 500;
  margin-bottom: 4px;
}
.popover-stat-detail {
  font-size: 12px;
  color: #9a9ca8;
  line-height: 1.45;
}

/* ── Brush cursor — circle outline that follows mouse on overlay-canvas ── */
#brush-cursor {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px dashed #ff6a3d;
  background: rgba(255, 106, 61, 0.10);
  transform: translate(-50%, -50%);
  transition: opacity .12s ease;
  z-index: 12;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
#brush-cursor[data-mode="remove"] {
  border-color: #ff6a6a;
  background: rgba(255, 106, 106, 0.10);
}
#brush-cursor[data-mode="remove"]::before,
#brush-cursor[data-mode="remove"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 2px;
  background: #ff6a6a;
  transform: translate(-50%, -50%) rotate(45deg);
}
#brush-cursor[data-mode="remove"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
#brush-cursor.hidden { opacity: 0; }
#brush-cursor:not(.hidden) { opacity: 1; }

/* ── Brush size slider row ──────────────────────────────────────────── */
.brush-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px 0;
  padding: 6px 0;
  font-size: 12px;
  color: #9a9ca8;
}
.brush-size-row label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8557;
  font-weight: 600;
  min-width: 50px;
}
.brush-size-row input[type="range"] {
  flex: 1;
  max-width: 240px;
  accent-color: #ff6a3d;
}
.brush-size-row .readout {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #c5c6d0;
  min-width: 60px;
}

/* ── Lift preview thumbnail (what TripoSR will receive) ──────────────── */
.lift-preview {
  margin-top: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.lift-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.lift-preview-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff8557;
  font-weight: 600;
}
.lift-preview-meta {
  font-size: 11px;
  color: #7a7c8a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
#lift-preview-canvas {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  background:
    linear-gradient(45deg, #1a1a23 25%, transparent 25%),
    linear-gradient(-45deg, #1a1a23 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1a1a23 75%),
    linear-gradient(-45deg, transparent 75%, #1a1a23 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Quality recommendation hint (TripoSR soft-object failure mode) ──── */
.quality-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0;
  background: linear-gradient(90deg,
              rgba(255, 106, 61, 0.10) 0%,
              rgba(255, 106, 61, 0.04) 100%);
  border: 1px solid rgba(255, 106, 61, 0.30);
  border-radius: 12px;
  font-size: 13px;
  color: #c5c6d0;
  flex-wrap: wrap;
}
.quality-hint .qh-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.quality-hint .qh-text {
  flex: 1;
  min-width: 200px;
  line-height: 1.5;
}
.quality-hint .qh-text strong {
  color: #ff8557;
  font-weight: 600;
}
.quality-hint .qh-cta {
  flex-shrink: 0;
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* ── Silent-fallback warning (Best Quality → TripoSR fallback) ────────── */
.fallback-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  background: linear-gradient(90deg,
              rgba(255, 200, 80, 0.08) 0%,
              rgba(255, 200, 80, 0.03) 100%);
  border: 1px solid rgba(255, 200, 80, 0.30);
  border-radius: 12px;
  font-size: 13px;
  color: #c5c6d0;
}
.fallback-banner.hidden { display: none; }
.fallback-banner .fb-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #ffd060;
}
.fallback-banner .fb-text {
  flex: 1;
  line-height: 1.6;
}
.fallback-banner .fb-text strong {
  color: #ffd060;
  font-weight: 600;
}
.fallback-banner code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  padding: 1px 6px;
  color: #ff8557;
}

/* ── Classify override panel — free-text label input + dropdown ────────── */
.classify-override {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-top: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.classify-override .hint {
  font-size: 12px;
  color: #9a9ca8;
  margin-bottom: 4px;
}
.classify-override-input {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #f5f5fa !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s ease, background .2s ease;
  margin-bottom: 4px;
}
.classify-override-input:focus {
  border-color: rgba(255, 106, 61, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.15) !important;
}
.classify-override-input::placeholder {
  color: rgba(255, 255, 255, 0.30);
  font-style: italic;
}
#classify-override-select {
  width: 100% !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #f5f5fa !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  margin-bottom: 4px;
  cursor: pointer;
}
.classify-override-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* ── Replace mode panel — explicit 3-step flow + Generate button ──────── */
#replace-row {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  margin: 12px 0 16px 0;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.replace-flow-hint {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #9a9ca8;
}
.replace-flow-hint .step-pip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.replace-flow-hint .step-pip b {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 106, 61, 0.15);
  color: #ff8557;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}
.replace-inputs {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 10px;
  align-items: center;
}
@media (max-width: 720px) {
  .replace-inputs { grid-template-columns: 1fr; }
}
.replace-inputs input[type="text"] {
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #f5f5fa !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
}
.replace-inputs input[type="text"]:focus {
  border-color: rgba(255, 106, 61, 0.55) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.15) !important;
}
.replace-inputs input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.32);
  font-style: italic;
}
#replace-generate-btn {
  white-space: nowrap;
  padding: 10px 18px !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8557 100%) !important;
  color: #0a0a0e !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-size: 14px !important;
  box-shadow:
    0 4px 12px rgba(255, 106, 61, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
  transition: transform .15s ease, box-shadow .2s ease;
}
#replace-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(255, 106, 61, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}
#replace-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.replace-status {
  font-size: 13px;
  color: #9a9ca8;
  padding-top: 4px;
}
.replace-status strong {
  color: #ff8557;
  font-weight: 600;
}
.replace-status .error {
  color: #ff6a6a;
  font-weight: 500;
}

/* ── Mask coverage warnings (small/tiny → AI SR fires) ────────────────── */
#gran-readout.small-mask {
  color: #ffb088 !important;
}
#gran-readout.tiny-mask {
  color: #ff6a6a !important;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* MOBILE OPTIMISATION (≤ 720 px)                                            */
/* ──────────────────────────────────────────────────────────────────────── */
/* Phone screens are 380-430 px wide.  Compress vertical / horizontal       */
/* paddings, shrink the wizard stepper to a 6-dot ribbon (no labels        */
/* below dots — just the active label), shrink hero typography by ~30%,   */
/* and rein in any element that was tuned for 1180 px desktop.            */

@media (max-width: 720px) {
  /* Header band */
  header {
    padding: 12px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
  }
  header h1 {
    font-size: 18px !important;
  }
  header p, .header-meta {
    font-size: 12px !important;
  }

  /* Hero region — collapse padding, shrink title */
  .hero {
    padding: 32px 16px 28px !important;
  }
  .hero-title {
    font-size: clamp(36px, 9vw, 56px) !important;
    letter-spacing: -0.025em !important;
  }
  .hero-sub {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }
  .hero-tag {
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 16px !important;
  }
  .hero-stats {
    gap: 8px !important;
    margin: 20px 0 !important;
  }
  .hero-stat {
    padding: 12px !important;
  }
  .hero-stat-num {
    font-size: 24px !important;
  }
  .hero-stat-lbl {
    font-size: 10px !important;
  }
  .hero-stat-cue {
    top: 8px !important;
    right: 10px !important;
    font-size: 11px !important;
  }
  .hero-stack {
    gap: 6px !important;
    margin-bottom: 20px !important;
  }
  .stack-pill {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  button.stack-pill::after {
    top: 8px !important;
    right: 10px !important;
    font-size: 11px !important;
  }
  .hero-pipeline {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 12px !important;
  }
  .hero-pipeline > .pl-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
  .pl-step {
    width: 100%;
    justify-content: flex-start;
  }

  /* ── Wizard stepper: 6 dots in a row, no overflow ──────────────────── */
  /* Desktop has 32×32 dots + labels below; on phones the labels collide */
  /* into a grey blur.  Compress to 24px dots, hide non-active labels,   */
  /* show only the active step label below the ribbon.                   */
  nav#stepper {
    margin-bottom: 16px !important;
    padding: 8px 12px 16px !important;
  }
  #stepper ol {
    gap: 0 !important;
    padding: 0 8px !important;
  }
  #stepper .step .dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
  #stepper .step .lbl {
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
    /* Hide labels for inactive steps; only the active one remains */
    display: none;
  }
  #stepper .step.active .lbl,
  #stepper .step.done .lbl {
    display: block;
  }
  /* Connector line — center it with the smaller dots */
  #stepper ol::before {
    top: 14px !important;
  }

  /* Wizard step containers */
  .wizard-step {
    padding: 0 14px !important;
  }
  .wizard-step .step-header h2 {
    font-size: 24px !important;
  }
  .wizard-step .step-header p {
    font-size: 14px !important;
  }

  /* Dual-pane (Photo + Depth, Original + Stylized) → stack vertically */
  .dual-pane {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Step 6 layout: source pane and viewer pane stack vertically */
  #layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #src-stage, #viewer-stage {
    aspect-ratio: 1 / 1 !important;
  }

  /* Multi-grid (3 stylized results + multi-view debug) → 1 col on phone */
  .multi-grid {
    grid-template-columns: 1fr !important;
  }
  /* TripoSR debug 8 views in mobile → 4 cols */
  #triposr-views > div:last-child {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Replace panel — stack inputs */
  .replace-inputs {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .replace-flow-hint {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Stretch panel — keep horizontal on phone but tighter */
  .stretch-axis {
    grid-template-columns: 20px 1fr 50px !important;
    gap: 8px !important;
  }

  /* Fallback / quality-hint banners — wrap content cleanly */
  .quality-hint, .fallback-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .quality-hint .qh-cta {
    width: 100% !important;
  }

  /* Popovers — full-width on phone, no side margins */
  .stack-pill-popover {
    max-width: calc(100vw - 16px) !important;
  }

  /* Example hero strip — fewer columns */
  .hero-examples-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── Force dark on ALL native controls (light-mode white-bleed fix) ────── */
/* iOS Safari and some macOS Safari versions render native controls       */
/* (text inputs, file pickers, selects, scrollbars, dialogs) using OS    */
/* light defaults even when our body bg is dark.  These rules force a    */
/* uniform dark appearance regardless of system preference.              */
html {
  color-scheme: dark !important;
  background: #07070b !important;
}
input, textarea, select, button {
  color-scheme: dark !important;
}
/* Webkit scrollbars (Safari + Chrome) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: #07070b;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border: 3px solid #07070b;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 106, 61, 0.4);
}
::-webkit-scrollbar-corner {
  background: #07070b;
}
/* Safari iOS: cover the rubber-band overscroll area in dark too */
@supports (-webkit-touch-callout: none) {
  html, body {
    background-color: #07070b !important;
  }
}
/* iPhone notch / safe area: extend dark bg to safe-area-inset */
body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ════════════════════════════════════════════════════════════════════════ */
/* V6.2 · FINAL FORCE-DARK FOR LEGACY CONTAINERS                           */
/* ──────────────────────────────────────────────────────────────────────── */
/* The v6.1 force-dark caught hero/stepper/popovers but missed several    */
/* legacy container classes that hard-coded `background: #ffffff` in the  */
/* original light-mode-only CSS (#upload-drop, .pane, .dual-pane>div,     */
/* .confirm-panel, .style-card, .upscale-card, etc.).  In light system    */
/* preference these still rendered as huge white boxes around the step    */
/* content.  This block force-overrides them all to v6 dark glass.        */
/* ════════════════════════════════════════════════════════════════════════ */

/* Stepper sticky bar — was rgba(250,250,249,0.7) in light system mode */
nav#stepper {
  background: rgba(7, 7, 11, 0.85) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Step 1 — Upload drop zone */
#upload-drop {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px dashed rgba(255, 255, 255, 0.18) !important;
  color: var(--txt-base, #c5c6d0) !important;
}
#upload-drop:hover, #upload-drop.dragover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 106, 61, 0.45) !important;
}

/* Step 2 / Step 4 — dual pane (Photo+Depth, Original+Stylized) wrapper divs */
.dual-pane > div {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  color: var(--txt-base, #c5c6d0) !important;
}
.dual-pane > div h4 {
  color: var(--txt-mute, #7a7c8a) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  margin: 0 0 8px 0 !important;
}

/* Step 5 — Confirm panel */
.confirm-panel {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-base, #c5c6d0) !important;
}

/* Step 3 — Style cards */
.style-card {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-base, #c5c6d0) !important;
}
.style-card:hover {
  border-color: rgba(255, 106, 61, 0.30) !important;
}

/* Step 6 — Source pane and Result pane */
.pane, #src-pane, #viewer-pane {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: var(--txt-base, #c5c6d0) !important;
  /* Internal scroll: when content (image + controls + classify + confirm
     panel) exceeds viewport height, scroll within the pane instead of
     pushing the bottom controls off-screen. */
  max-height: calc(100vh - 180px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 106, 61, 0.45) rgba(255, 255, 255, 0.04);
}

/* Webkit (Safari + Chrome) scrollbar — orange thumb on dark track.
   Cover ALL scrollbar pseudo-elements including track + corner so the
   default OS-white never shows up at the corner of the pane. */
.pane::-webkit-scrollbar,
#src-pane::-webkit-scrollbar,
#viewer-pane::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: rgba(7, 7, 11, 0.95) !important;
}
.pane::-webkit-scrollbar-track,
#src-pane::-webkit-scrollbar-track,
#viewer-pane::-webkit-scrollbar-track {
  background: rgba(7, 7, 11, 0.95) !important;
  border-radius: 8px;
}
.pane::-webkit-scrollbar-corner,
#src-pane::-webkit-scrollbar-corner,
#viewer-pane::-webkit-scrollbar-corner {
  background: rgba(7, 7, 11, 0.95) !important;
}
.pane::-webkit-scrollbar-thumb,
#src-pane::-webkit-scrollbar-thumb,
#viewer-pane::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 61, 0.40);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.pane::-webkit-scrollbar-thumb:hover,
#src-pane::-webkit-scrollbar-thumb:hover,
#viewer-pane::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 106, 61, 0.65);
  background-clip: padding-box;
}

/* Quality select — was rendering empty / white because select option
   had no styling.  Force dark background + visible orange text. */
#quality-select, .src-controls select, #src-controls select {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--txt-strong, #f5f5fa) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  appearance: menulist;
  -webkit-appearance: menulist;
  cursor: pointer;
}
#quality-select:hover, #src-controls select:hover {
  border-color: rgba(255, 106, 61, 0.45) !important;
}
#quality-select option, #src-controls select option {
  background: #11111a !important;
  color: var(--txt-strong, #f5f5fa) !important;
}

/* "Use this mask →" — the primary action in Step 6 source pane.
   Make it stand out so users find it after clicking an object.
   This was rendering as default white button before; now orange. */
#gran-confirm {
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8557 100%) !important;
  color: #0a0a0e !important;
  border: none !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-size: 14px !important;
  box-shadow:
    0 4px 12px rgba(255, 106, 61, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
  transition: transform .15s ease, box-shadow .2s ease;
  margin-top: 8px;
}
#gran-confirm:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 20px rgba(255, 106, 61, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.20) inset !important;
}

/* Step 6 — inner panels of Source pane that previously rendered white */
.multiselect-hint, #src-controls, #viewer-stage {
  background: transparent !important;
  color: var(--txt-base, #c5c6d0) !important;
}
.multiselect-hint kbd {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-strong, #f5f5fa) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
}
#src-controls .row {
  background: transparent !important;
  color: var(--txt-base, #c5c6d0) !important;
}
#src-controls label {
  color: var(--txt-mute, #7a7c8a) !important;
}

/* Granularity row */
.gran-row {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
.gran-anchor {
  color: var(--txt-mute, #7a7c8a) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
}

/* Classify banner */
#classify-banner, .banner {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-base, #c5c6d0) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
#classify-label {
  color: #ff8557 !important;
  font-weight: 600 !important;
}
#classify-cat, #classify-note, #undo-hint {
  color: var(--txt-mute, #7a7c8a) !important;
}

/* Replace-row HIDDEN class fix: my `display: flex !important` was beating
   the .hidden { display: none } cascade.  Force hidden to win. */
#replace-row.hidden {
  display: none !important;
}

/* ── Confirm panel inline label edit ──────────────────────────────────── */
.confirm-obj-label {
  color: var(--txt-mute, #7a7c8a) !important;
  font-weight: 500;
  margin-right: 8px;
}
.confirm-obj-input {
  display: inline-block !important;
  width: auto !important;
  min-width: 200px !important;
  max-width: 320px !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ff8557 !important;
  background: rgba(255, 106, 61, 0.08) !important;
  border: 1px solid rgba(255, 106, 61, 0.30) !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  vertical-align: middle;
}
.confirm-obj-input:focus {
  border-color: rgba(255, 106, 61, 0.65) !important;
  background: rgba(255, 106, 61, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(255, 106, 61, 0.18) !important;
}
.confirm-obj-input::placeholder {
  color: rgba(255, 106, 61, 0.45);
  font-style: italic;
}
.confirm-obj-meta {
  color: var(--txt-mute, #7a7c8a) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  margin-left: 12px;
  white-space: nowrap;
}
.confirm-helper {
  color: var(--txt-mute, #7a7c8a) !important;
  font-size: 12px !important;
  font-style: italic;
  opacity: 0.85;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.5 · src-stage canvas always visible + lift-preview as PIP             */
/* ──────────────────────────────────────────────────────────────────────── */
/* Bug: after clicking on the source image to segment, the canvas was      */
/* collapsing to 0 height because nothing held it open while the lift-     */
/* preview thumbnail (which appears below) pushed everything down. Plus    */
/* the lift-preview was eating ~280 px of vertical space — enough to make */
/* the user feel like the source image had "disappeared".                  */
/*                                                                          */
/* Fix design (Figma / Adobe minimap pattern):                             */
/*   1. Force #src-stage to a guaranteed minimum height + 1:1 aspect      */
/*   2. Reposition #lift-preview as a 140×140 floating PIP in the          */
/*      bottom-right corner of #src-stage — it OVERLAPS the source         */
/*      instead of pushing it down                                         */
/*   3. PIP gets a frosted-glass border + drop shadow so it reads as      */
/*      "secondary information overlay" not "primary content"             */
/* ════════════════════════════════════════════════════════════════════════ */

/* 1. src-stage shows the source image at its natural aspect ratio.
   The canvas inside has explicit pixel dimensions matching the image,
   so the stage's height is determined by the image — not forced square.
   min-height keeps the stage visible when no image is loaded yet. */
#src-stage {
  position: relative !important;
  width: 100% !important;
  min-height: 320px !important;
  background: rgba(0, 0, 0, 0.40) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
  /* aspect-ratio: auto — let canvas natural size dictate height */
}
#src-canvas, #overlay-canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}
#overlay-canvas {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

/* viewer-stage matches src-stage height when both panes are in a grid;
   if no splat is loaded yet it falls back to a sensible 1:1 placeholder. */
#viewer-stage {
  position: relative !important;
  width: 100% !important;
  min-height: 320px !important;
  background: rgba(0, 0, 0, 0.40) !important;
  border-radius: 12px !important;
  /* On desktop the layout grid + align-items: stretch keeps it level
     with the source pane.  When no result yet, use 1:1 as placeholder. */
  aspect-ratio: 1 / 1;
}
/* If source has loaded a splat, viewer keeps actual canvas size */
.viewer-loaded #viewer-stage {
  aspect-ratio: auto;
}

/* 2. lift-preview as a floating PIP in src-stage's bottom-right corner */
.lift-preview {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  width: 144px !important;
  height: auto !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  padding: 8px !important;
  background: rgba(15, 15, 22, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  transition: opacity .2s ease;
}
.lift-preview-header {
  margin-bottom: 4px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px;
}
.lift-preview-title {
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
}
.lift-preview-meta {
  font-size: 9px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 128px;
}
#lift-preview-canvas {
  width: 128px !important;
  height: 128px !important;
  max-width: 128px !important;
  border-radius: 6px !important;
}
/* On hover, slight lift to show it's interactive (it isn't, but visual feedback) */
.lift-preview:hover {
  border-color: rgba(255, 106, 61, 0.30) !important;
}

/* JS appends .lift-preview right after #src-stage; we need to MOVE it
   inside #src-stage visually — but DOM structure is locked.  Workaround:
   parent .pane uses position:relative, lift-preview uses absolute relative
   to that.  Hijack the bottom-right of the SOURCE PANE itself instead of
   src-stage (close enough — overlaps the source canvas's bottom corner). */
.pane {
  position: relative !important;
}
.lift-preview {
  /* Anchor to source-pane (which is the closest positioned ancestor) */
  bottom: 200px !important;       /* leave room for keyboard hints + brush slider */
  right: 16px !important;
}
@media (max-width: 720px) {
  .lift-preview {
    bottom: 160px !important;
    width: 100px !important;
  }
  #lift-preview-canvas {
    width: 84px !important;
    height: 84px !important;
  }
  .lift-preview-meta { display: none !important; }
}
.pane-header {
  color: var(--txt-strong, #f5f5fa) !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Upscale modal (the "going to 1536px" card) */
.upscale-card {
  background: rgba(15, 15, 22, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--txt-base, #c5c6d0) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Style tab active state (when picking categories) */
.style-tab.active {
  background: rgba(255, 106, 61, 0.15) !important;
  color: #ff8557 !important;
  border-color: rgba(255, 106, 61, 0.40) !important;
}
.style-tab:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--txt-strong, #f5f5fa) !important;
}

/* Lift preview thumbnail wrapper (seen in screenshots) */
.lift-preview {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Status bar / placeholder text */
#status-bar, #stylize-status, #viewer-placeholder {
  color: var(--txt-mute, #7a7c8a) !important;
  background: transparent !important;
}

/* Placeholder boxes (e.g. "Not yet rendered.") */
.placeholder, #stylize-pending {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px dashed rgba(255, 255, 255, 0.15) !important;
  color: var(--txt-mute, #7a7c8a) !important;
}

/* Multi-grid cells (3 stylized results, confirm thumbnails) — both
   class names: legacy .multi-cell + actual .multi-card from app.js  */
.multi-cell, .multi-card, #confirm-grid > * {
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-base, #c5c6d0) !important;
}
/* Inner placeholder + status line + chip controls inside a multi-card */
.multi-card .multi-name {
  color: var(--txt-strong, #f5f5fa) !important;
}
.multi-card .multi-pending {
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--txt-mute, #7a7c8a) !important;
}
.multi-card .multi-status {
  color: var(--txt-mute, #7a7c8a) !important;
  background: transparent !important;
}
.multi-card .strength-pill {
  background: rgba(255, 106, 61, 0.15) !important;
  color: #ff8557 !important;
  border: 1px solid rgba(255, 106, 61, 0.30) !important;
}
.multi-card .mini-chip,
.multi-card .download-btn,
.multi-card .rerender-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--txt-base, #c5c6d0) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.multi-card .rerender-btn:hover,
.multi-card .mini-chip:hover {
  background: rgba(255, 106, 61, 0.10) !important;
  border-color: rgba(255, 106, 61, 0.30) !important;
  color: #ff8557 !important;
}

/* Wizard step containers — make sure they don't render white frames */
.wizard-step {
  background: transparent !important;
}

/* Caption row (Step 2) */
.caption-row {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 14px !important;
}
.caption-row label, .caption-row .hint {
  color: var(--txt-mute, #7a7c8a) !important;
}
.caption-row textarea, #scene-caption {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: var(--txt-strong, #f5f5fa) !important;
  border-radius: 8px !important;
}

/* Form selects, inputs, buttons that might have white in light mode */
select, .select, input[type="text"], input[type="number"], textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--txt-strong, #f5f5fa) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
select option {
  background: #11111a !important;
  color: var(--txt-strong, #f5f5fa) !important;
}

/* Ghost buttons (Back, Cancel, etc.) */
button.ghost, .ghost {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--txt-base, #c5c6d0) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
button.ghost:hover, .ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--txt-strong, #f5f5fa) !important;
}

/* Step nav row (Continue / Back buttons at bottom of each step) */
.step-nav, .step6-nav {
  background: transparent !important;
}

/* Intensity preset chips (Subtle / Balanced / Bold) */
.preset-chip {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--txt-base, #c5c6d0) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.preset-chip.active {
  background: rgba(255, 106, 61, 0.15) !important;
  color: #ff8557 !important;
  border-color: rgba(255, 106, 61, 0.40) !important;
}

/* Checkbox label */
label.check {
  color: var(--txt-base, #c5c6d0) !important;
}

/* Action tabs (3D rotate / Erase / Replace pills) */
.action-tabs {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.action-tabs .tab {
  color: var(--txt-mute, #7a7c8a) !important;
}
.action-tabs input[type="radio"]:checked + span {
  color: var(--txt-strong, #f5f5fa) !important;
}
.action-tabs .tab:has(input:checked) {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Extra-small phones (≤ 380 px iPhone SE etc.) */
@media (max-width: 400px) {
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero-stack {
    grid-template-columns: 1fr !important;
  }
  /* Stepper dots get even smaller */
  #stepper .step .dot {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  #stepper ol::before {
    top: 12px !important;
  }
}

/* ── Stretch row (viewer-side perspective foreshortening fix) ──────────── */
.stretch-row {
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.stretch-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.stretch-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #ff8557;
  font-weight: 600;
}
.stretch-grid {
  display: grid;
  gap: 8px;
}
.stretch-axis {
  display: grid;
  grid-template-columns: 24px 1fr 60px;
  gap: 12px;
  align-items: center;
}
.stretch-axis-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #c5c6d0;
  text-align: center;
}
.stretch-axis input[type="range"] {
  width: 100%;
  accent-color: #ff6a3d;
}
.stretch-axis-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #ff8557;
  text-align: right;
}
.stretch-help {
  margin-top: 10px;
  color: #7a7c8a;
  font-size: 12px;
}
#stretch-reset {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
}

/* ── Hero title accent (orange in both modes) ─────────────────────────── */
.hero-title-accent {
  background: linear-gradient(120deg, #ff6a3d 0%, #ff9870 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── CTA primary button — orange ──────────────────────────────────────── */
.hero-btn-primary {
  background: linear-gradient(135deg, #ff6a3d 0%, #ff8557 60%, #ffa070 100%) !important;
  color: #0a0a0e !important;
  border: none !important;
  box-shadow:
    0 8px 24px rgba(255, 106, 61, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset !important;
}

/* ── Typewriter caret — orange ────────────────────────────────────────── */
.hero-sub[data-typewriter]::after { color: #ff6a3d !important; }

/* ── Header band — dark ───────────────────────────────────────────────── */
header {
  background: rgba(8, 8, 14, 0.7) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #c5c6d0 !important;
}
header h1 { color: #f5f5fa !important; }
header p, .header-meta, .header-meta a, .meta-link { color: #7a7c8a !important; }
.meta-link:hover { color: #ff6a3d !important; }
#device-tag {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #c5c6d0 !important;
}

/* ── Step 1 · Golden Yellow ───────────────────────────────────────────── */
.hero-pipeline .pl-step:nth-of-type(1) .pl-num {
  background: #ffc94d;
  box-shadow: 0 0 0 4px rgba(255, 201, 77, 0.10),
              0 0 12px rgba(255, 201, 77, 0.18);
}
.hero-pipeline .pl-step:nth-of-type(1):hover {
  border-color: rgba(255, 201, 77, 0.45);
  box-shadow: 0 8px 24px rgba(255, 201, 77, 0.12);
}

/* ── Step 2 · Amber ───────────────────────────────────────────────────── */
.hero-pipeline .pl-step:nth-of-type(2) .pl-num {
  background: #ffa83a;
  box-shadow: 0 0 0 4px rgba(255, 168, 58, 0.10),
              0 0 14px rgba(255, 168, 58, 0.20);
}
.hero-pipeline .pl-step:nth-of-type(2):hover {
  border-color: rgba(255, 168, 58, 0.45);
  box-shadow: 0 8px 24px rgba(255, 168, 58, 0.14);
}

/* ── Step 3 · Warm Orange ─────────────────────────────────────────────── */
.hero-pipeline .pl-step:nth-of-type(3) .pl-num {
  background: #ff8638;
  box-shadow: 0 0 0 4px rgba(255, 134, 56, 0.12),
              0 0 16px rgba(255, 134, 56, 0.22);
}
.hero-pipeline .pl-step:nth-of-type(3):hover {
  border-color: rgba(255, 134, 56, 0.45);
  box-shadow: 0 8px 24px rgba(255, 134, 56, 0.16);
}

/* ── Step 4 · Red-Orange (≈ v6 brand) ─────────────────────────────────── */
.hero-pipeline .pl-step:nth-of-type(4) .pl-num {
  background: #f96638;
  box-shadow: 0 0 0 4px rgba(249, 102, 56, 0.14),
              0 0 18px rgba(249, 102, 56, 0.26);
}
.hero-pipeline .pl-step:nth-of-type(4):hover {
  border-color: rgba(249, 102, 56, 0.5);
  box-shadow: 0 8px 24px rgba(249, 102, 56, 0.18);
}

/* ── Step 5 · Deep Red — climax, final emphasis ───────────────────────── */
.hero-pipeline .pl-step.pl-final {
  background: linear-gradient(135deg,
              rgba(224, 56, 44, 0.10) 0%,
              rgba(224, 56, 44, 0.04) 100%) !important;
  border-color: rgba(224, 56, 44, 0.32) !important;
}
.hero-pipeline .pl-step.pl-final .pl-num,
.hero-pipeline .pl-step:nth-of-type(5) .pl-num {
  background: #e0382c;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(224, 56, 44, 0.20),
              0 0 24px rgba(224, 56, 44, 0.50);
  animation: v6-final-pulse 2.6s ease-in-out infinite;
}
.hero-pipeline .pl-step.pl-final .pl-lbl {
  color: #ff7064;
  font-weight: 600;
}
.hero-pipeline .pl-step.pl-final:hover {
  border-color: rgba(224, 56, 44, 0.55) !important;
  box-shadow: 0 12px 32px rgba(224, 56, 44, 0.22),
              0 0 0 1px rgba(224, 56, 44, 0.4);
}
@keyframes v6-final-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(224, 56, 44, 0.20),
                          0 0 24px rgba(224, 56, 44, 0.50); }
  50%      { box-shadow: 0 0 0 6px rgba(224, 56, 44, 0.28),
                          0 0 36px rgba(224, 56, 44, 0.75); }
}

/* ── Arrows brighten as they approach the climax ──────────────────────── */
.hero-pipeline > .pl-arrow:nth-of-type(1) { color: rgba(255, 168, 58, 0.50); }
.hero-pipeline > .pl-arrow:nth-of-type(2) { color: rgba(255, 134, 56, 0.62); }
.hero-pipeline > .pl-arrow:nth-of-type(3) { color: rgba(249, 102, 56, 0.78); }
.hero-pipeline > .pl-arrow:nth-of-type(4) { color: rgba(224, 56, 44, 0.92); }

/* Reduce-motion: kill the climax pulse */
@media (prefers-reduced-motion: reduce) {
  .hero-pipeline .pl-step.pl-final .pl-num,
  .hero-pipeline .pl-step:nth-of-type(5) .pl-num {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* PIPELINE V2 · Neutral steps, coloured arrows only                       */
/* ──────────────────────────────────────────────────────────────────────── */
/* Refinement on user request: the heat ramp is too noisy when applied to */
/* steps + arrows simultaneously.  Move the thermal narrative purely to    */
/* the 4 connecting arrows; let the 5 steps read as flat neutral chips so */
/* the eye reads them as equal stations and follows the warming arrows    */
/* between them as the journey signal.                                    */
/* ════════════════════════════════════════════════════════════════════════ */

/* Reset ALL step number circles to a neutral white-on-grey treatment.   */
/* Override every :nth-of-type rule above with high-specificity selector. */
.hero-pipeline .pl-step .pl-num,
.hero-pipeline .pl-step:nth-of-type(1) .pl-num,
.hero-pipeline .pl-step:nth-of-type(2) .pl-num,
.hero-pipeline .pl-step:nth-of-type(3) .pl-num,
.hero-pipeline .pl-step:nth-of-type(4) .pl-num,
.hero-pipeline .pl-step:nth-of-type(5) .pl-num,
.hero-pipeline .pl-step.pl-final .pl-num {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5fa !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Final step pill — strip the red gradient background + border + label.  */
.hero-pipeline .pl-step.pl-final {
  background: var(--glass-bg, rgba(255, 255, 255, 0.035)) !important;
  border-color: var(--glass-border, rgba(255, 255, 255, 0.08)) !important;
}
.hero-pipeline .pl-step.pl-final .pl-lbl,
.hero-pipeline .pl-step:nth-of-type(5) .pl-lbl {
  color: var(--txt-strong, #f5f5fa) !important;
  font-weight: 500 !important;
}

/* Hover — reset all per-step coloured halos to a single neutral glow.    */
.hero-pipeline .pl-step:nth-of-type(1):hover,
.hero-pipeline .pl-step:nth-of-type(2):hover,
.hero-pipeline .pl-step:nth-of-type(3):hover,
.hero-pipeline .pl-step:nth-of-type(4):hover,
.hero-pipeline .pl-step:nth-of-type(5):hover,
.hero-pipeline .pl-step.pl-final:hover {
  border-color: rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Arrows — KEEP the thermal yellow→red ramp.  Re-stating here to ensure  */
/* the per-arrow colours win against any subsequent generic rule.        */
.hero-pipeline > .pl-arrow:nth-of-type(1) { color: rgba(255, 168, 58, 0.65) !important; }
.hero-pipeline > .pl-arrow:nth-of-type(2) { color: rgba(255, 134, 56, 0.78) !important; }
.hero-pipeline > .pl-arrow:nth-of-type(3) { color: rgba(249, 102, 56, 0.88) !important; }
.hero-pipeline > .pl-arrow:nth-of-type(4) { color: rgba(224, 56, 44, 0.98) !important; }

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.7 · Always-visible right-side scrollbar on source pane               */
/* ──────────────────────────────────────────────────────────────────────── */
/* User pain: on narrow / mobile viewports, the source pane has more       */
/* content (image + hints + brush + quality + flat + confirm panel + gran  */
/* slider + classify banner + status) than fits in the available height.   */
/* The pane already had `overflow-y: auto`, but a 10 px auto-hide          */
/* scrollbar is invisible on a phone and hard to grab on a trackpad — the  */
/* user said "I can't see the scrollbar, the text just disappears below".  */
/*                                                                          */
/* Fix:                                                                     */
/*   1. overflow-y: scroll  → reserves space + always shows the track       */
/*   2. width 14 px         → easy to grab; reads as intentional UI         */
/*   3. orange thumb (0.55 alpha) on dark track → visible at a glance      */
/*   4. inset border-radius + padding via background-clip                  */
/*   5. 100dvh on mobile (vs 100vh) — iOS Safari subtracts the URL bar     */
/*      from dvh, so we don't run off-screen when the toolbar shows        */
/*   6. lift-preview PIP nudged up so it never sits on the brush slider    */
/* ════════════════════════════════════════════════════════════════════════ */

/* 1 + 2 + 3.  Force the scrollbar to be permanently rendered, wider, and  */
/* high-contrast on the source pane specifically.  Keep viewer-pane on its */
/* own (smaller) scrollbar so 3D viewport doesn't get a chunky band.       */
#src-pane {
  overflow-y: scroll !important;     /* not auto — always reserve + show */
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: auto !important;  /* Firefox: thicker than `thin`    */
  scrollbar-color: rgba(255, 106, 61, 0.65) rgba(20, 20, 28, 0.95) !important;
  /* Use dynamic viewport units so iOS toolbar doesn't eat the bottom.    */
  max-height: calc(100dvh - 160px) !important;
}

/* Webkit (Safari + Chrome) — chunky orange thumb, dark track, no corner  */
/* gap.  Higher specificity than the 10px rules earlier in the file.      */
#src-pane::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
  background: rgba(20, 20, 28, 0.95) !important;
}
#src-pane::-webkit-scrollbar-track {
  background: rgba(20, 20, 28, 0.95) !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
}
#src-pane::-webkit-scrollbar-corner {
  background: rgba(20, 20, 28, 0.95) !important;
}
#src-pane::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
                rgba(255, 134, 56, 0.85) 0%,
                rgba(255, 106, 61, 0.75) 100%) !important;
  border-radius: 10px !important;
  border: 3px solid rgba(20, 20, 28, 0.95) !important;
  background-clip: padding-box !important;
  min-height: 40px !important;
  box-shadow: 0 0 0 1px rgba(255, 106, 61, 0.30) inset !important;
}
#src-pane::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
                rgba(255, 168, 58, 0.95) 0%,
                rgba(249, 102, 56, 0.95) 100%) !important;
  background-clip: padding-box !important;
}
#src-pane::-webkit-scrollbar-thumb:active {
  background: rgba(224, 56, 44, 0.95) !important;
  background-clip: padding-box !important;
}

/* On very narrow viewports, give the pane the full available height      */
/* (minus a small reserve for the bottom of the page) so the user has the */
/* most scroll room possible — and the scrollbar is the dominant control. */
@media (max-width: 720px) {
  #src-pane {
    max-height: calc(100dvh - 80px) !important;
  }
  /* Reposition the lift-preview PIP higher up so it can never sit on top */
  /* of the brush slider readout (`36 px`) or the keyboard hint chips.    */
  /* Move it INTO src-stage so it overlaps the source image, not the      */
  /* controls below — this is the Figma minimap pattern.                  */
  .lift-preview {
    bottom: auto !important;
    top: 12px !important;            /* anchor to top-right of source pane */
    right: 12px !important;
    width: 110px !important;
  }
  #lift-preview-canvas {
    width: 94px !important;
    height: 94px !important;
  }
}

/* Even on desktop, never let the PIP sit in front of the brush-size row */
/* — bottom: 200px was tuned for one specific screen height.  Use top    */
/* anchoring so it always lives in the source-image area regardless of   */
/* how tall the controls below grow.                                     */
@media (min-width: 721px) {
  .lift-preview {
    bottom: auto !important;
    top: 60px !important;             /* below pane-header */
    right: 16px !important;
  }
}

/* Page-level scrollbar (window) — also bump width + orange so the user  */
/* gets a visible scroll affordance even when scrolling the whole page.  */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
                rgba(255, 134, 56, 0.70) 0%,
                rgba(255, 106, 61, 0.60) 100%) !important;
  border-radius: 10px !important;
  border: 3px solid rgba(7, 7, 11, 0.95) !important;
  background-clip: padding-box !important;
  min-height: 40px !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(7, 7, 11, 0.95) !important;
}
html, body {
  scrollbar-width: auto !important;
  scrollbar-color: rgba(255, 106, 61, 0.55) rgba(7, 7, 11, 0.95) !important;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.8 · Force-dark :root variables (root-cause white-leak fix)            */
/* ──────────────────────────────────────────────────────────────────────── */
/* Diagnosis: every remaining "white bar" / "white container" leak traces  */
/* back to ONE source — the original :root block (line ~12) sets light-    */
/* mode values like `--surface: #ffffff`, and the dark equivalents only    */
/* apply inside @media (prefers-color-scheme: dark).  CSS color-scheme:    */
/* dark on <html> only flips browser-native controls (scrollbars, native   */
/* buttons) — it does NOT change the value of CSS custom properties.       */
/*                                                                          */
/* So if the user's macOS is set to Light Appearance, every rule like      */
/*   #viewer-stats { background: var(--surface); }                          */
/* renders as #ffffff, blowing a white strip through our otherwise-dark    */
/* layout.  v6.1–v6.7 patched these one selector at a time; v6.8 fixes it  */
/* at the source by overriding :root itself with dark values.              */
/* ════════════════════════════════════════════════════════════════════════ */
:root {
  --bg:           #07070b !important;
  --surface:      #14141a !important;        /* was #ffffff */
  --surface-2:    #1c1c24 !important;
  --canvas:       #0a0a0e !important;
  --fg:           #f5f5fa !important;
  --fg-2:         #d4d4dc !important;
  --muted:        #9a9aa4 !important;
  --line:         rgba(255, 255, 255, 0.08) !important;
  --line-2:       rgba(255, 255, 255, 0.16) !important;
  --accent:       #ff6a3d !important;        /* lock the orange */
  --accent-hover: #ff8557 !important;
  --accent-fg:    #ffffff !important;
  --accent-soft:  rgba(255, 106, 61, 0.12) !important;
  --shadow-1:     0 1px 2px rgba(0, 0, 0, 0.40) !important;
  --shadow-2:     0 4px 14px rgba(0, 0, 0, 0.50) !important;
  --shadow-3:     0 16px 48px rgba(0, 0, 0, 0.70) !important;
}

/* Belt-and-braces specific selectors — even if some descendant rule       */
/* re-asserts the original light values, these win on the elements the     */
/* user actually pointed at.                                               */
#viewer-stats {
  background: rgba(20, 20, 28, 0.95) !important;
  color: var(--fg-2, #d4d4dc) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 18px !important;
  font-size: 12px !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: 0.02em !important;
}
#viewer-stats:empty { display: none !important; }

/* TripoSR debug grid container — was showing on a light --surface band */
#triposr-views {
  background: rgba(20, 20, 28, 0.85) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.triposr-views-grid img {
  background: rgba(7, 7, 11, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* ── Lift-preview PIP — shrunk + low-opacity by default ──────────────── */
/* User feedback: the 144 px floating thumbnail blocked too much of the   */
/* source-image area.  Shrink to 96 px, lower default opacity to 0.55, */
/* brighten to 1.0 on hover, add a ✕ close button (wired in app.js).     */
.lift-preview {
  width: 96px !important;
  padding: 6px !important;
  opacity: 0.55 !important;
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease !important;
  top: 16px !important;            /* anchor near the top of the source pane */
  right: 16px !important;
  bottom: auto !important;
}
.lift-preview:hover,
.lift-preview:focus-within {
  opacity: 1 !important;
  transform: scale(1.04);
  border-color: rgba(255, 106, 61, 0.50) !important;
}
.lift-preview-header {
  margin-bottom: 4px !important;
  padding-right: 16px !important;  /* leave room for the × button */
}
.lift-preview-title {
  font-size: 8px !important;
  letter-spacing: 0.05em !important;
}
.lift-preview-meta {
  font-size: 8px !important;
  display: block !important;
}
#lift-preview-canvas {
  width: 84px !important;
  height: 84px !important;
}
.lift-preview-close {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border: none !important;
  font-size: 12px !important;
  line-height: 14px !important;
  cursor: pointer !important;
  z-index: 6 !important;
}
.lift-preview-close:hover {
  background: rgba(224, 56, 44, 0.85) !important;
  color: #ffffff !important;
}
@media (max-width: 720px) {
  .lift-preview {
    width: 80px !important;
  }
  #lift-preview-canvas {
    width: 68px !important;
    height: 68px !important;
  }
}

/* ── Soft-object quality-promotion banner — make it BIG and warm ─────── */
/* The current banner is too quiet — users blow past it and lift their    */
/* sofa cushion on TripoSR (→ hollow shell).  Pump up size + colour so it */
/* reads as a primary recommendation, not an aside.                       */
.quality-hint {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 14px 0 !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg,
              rgba(255, 134, 56, 0.18) 0%,
              rgba(224, 56, 44, 0.10) 100%) !important;
  border: 1px solid rgba(255, 106, 61, 0.45) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(224, 56, 44, 0.18) !important;
}
.quality-hint .qh-icon {
  font-size: 20px !important;
  flex: 0 0 auto !important;
}
.quality-hint .qh-text {
  flex: 1 1 auto !important;
  color: var(--fg, #f5f5fa) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}
.quality-hint .qh-text strong {
  color: #ff8557 !important;
}
.quality-hint .qh-cta {
  flex: 0 0 auto !important;
  background: linear-gradient(135deg, #ff8638 0%, #ff6a3d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}
.quality-hint .qh-cta:hover {
  background: linear-gradient(135deg, #ffa83a 0%, #ff8638 100%) !important;
  box-shadow: 0 4px 14px rgba(255, 134, 56, 0.45) !important;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.9 · Hero example tiles — clickable, no-upload starting points         */
/* ──────────────────────────────────────────────────────────────────────── */
/* Each tile loads a curated reference image into the pipeline as if the   */
/* user had uploaded it.  The ⓘ badge reveals the Claude-engineered prompt */
/* that produced the image — both as educational content and as a paper   */
/* reproducibility artifact.  Aesthetic: glass card, generous shadow on   */
/* hover, name slides up from the bottom on hover, ⓘ stays visible always.*/
/* ════════════════════════════════════════════════════════════════════════ */

.hero-examples-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
}
.hero-examples-label > span:first-child {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--fg, #f5f5fa) !important;
}
.hero-examples-sub {
  font-size: 12px !important;
  color: var(--muted, #9a9aa4) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  max-width: 640px !important;
}
.hero-examples-sub kbd {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: #ff8557;
}

.hero-examples-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
@media (max-width: 900px) {
  .hero-examples-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .hero-examples-strip { grid-template-columns: 1fr !important; }
}

.hero-example-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(20, 20, 28, 0.85);
  cursor: pointer;
  padding: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              border-color .25s ease,
              box-shadow .25s ease;
  font: inherit;
  color: inherit;
  text-align: left;
  outline: none;
}
.hero-example-tile:hover,
.hero-example-tile:focus-visible {
  transform: translateY(-3px) scale(1.015);
  border-color: rgba(255, 106, 61, 0.55);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 106, 61, 0.20),
    0 0 24px rgba(255, 106, 61, 0.18);
}
.hero-example-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .25s ease;
  filter: saturate(0.95);
}
.hero-example-tile:hover .hero-example-img {
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.04);
}

/* Bottom gradient overlay — name + tagline.  Slides up on hover. */
.hero-example-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(7, 7, 11, 0.65) 55%,
    rgba(7, 7, 11, 0.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateY(0);
  transition: transform .25s ease, padding .25s ease;
}
.hero-example-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg, #f5f5fa);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.hero-example-tag {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Use-this-scene CTA appears on hover from the bottom */
.hero-example-cta {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 14px);
  background: linear-gradient(135deg, #ff8638 0%, #ff6a3d 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1),
              opacity .25s ease;
  box-shadow: 0 6px 18px rgba(255, 106, 61, 0.45);
  letter-spacing: 0.01em;
}
.hero-example-tile:hover .hero-example-cta,
.hero-example-tile:focus-visible .hero-example-cta {
  transform: translate(-50%, 0);
  opacity: 1;
}
.hero-example-tile:hover .hero-example-overlay {
  transform: translateY(8px);
}

/* Info badge — top-right, always visible, ⓘ icon */
.hero-example-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(7, 7, 11, 0.78);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 26px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
  z-index: 3;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.hero-example-info-btn:hover {
  background: rgba(255, 106, 61, 0.85);
  color: #ffffff;
  transform: scale(1.10);
}

/* ── Prompt popover (revealed by ⓘ) ──────────────────────────────────── */
.hero-example-popover {
  position: absolute;
  z-index: 1000;
  background: rgba(15, 15, 22, 0.97);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 106, 61, 0.30);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 106, 61, 0.15),
    0 0 40px rgba(255, 106, 61, 0.18);
  color: var(--fg, #f5f5fa);
  animation: hep-pop-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes hep-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.hep-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
}
.hep-close:hover {
  background: rgba(224, 56, 44, 0.85);
  color: #ffffff;
}
.hep-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg, #f5f5fa);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  padding-right: 24px;
}
.hep-tagline {
  font-size: 12px;
  color: #ff8557;
  margin-bottom: 14px;
  font-style: italic;
}
.hep-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.50);
  margin: 10px 0 6px;
}
.hep-prompt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(7, 7, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
  white-space: normal;
}
.hep-prompt::-webkit-scrollbar { width: 6px; }
.hep-prompt::-webkit-scrollbar-thumb {
  background: rgba(255, 106, 61, 0.45);
  border-radius: 4px;
}
.hep-prompt-neg {
  border-color: rgba(255, 100, 100, 0.18);
  color: rgba(255, 200, 200, 0.78);
}
.hep-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.hep-kw {
  display: inline-block;
  font-size: 10.5px;
  padding: 3px 8px;
  background: rgba(255, 106, 61, 0.12);
  border: 1px solid rgba(255, 106, 61, 0.30);
  color: #ff9974;
  border-radius: 999px;
}
.hep-lifts {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.70);
}
.hep-lifts code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: #d4d4dc;
}
.hep-copy, .hep-use {
  margin-top: 12px;
  padding: 8px 14px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--fg, #f5f5fa);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}
.hep-copy { margin-right: 8px; }
.hep-copy:hover {
  background: rgba(255, 255, 255, 0.10);
}
.hep-use {
  background: linear-gradient(135deg, #ff8638 0%, #ff6a3d 100%);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
}
.hep-use:hover {
  background: linear-gradient(135deg, #ffa83a 0%, #ff8638 100%);
  box-shadow: 0 4px 14px rgba(255, 134, 56, 0.45);
}

/* Mobile: popover takes the full width minus a small margin */
@media (max-width: 540px) {
  .hero-example-popover {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    padding: 14px;
  }
  .hep-prompt {
    font-size: 10.5px;
    max-height: 140px;
  }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.10 · Step-header text legibility (root-cause-tail fix)                */
/* ──────────────────────────────────────────────────────────────────────── */
/* Same media-query trap as v6.8: .step-header h2 was hard-coded to        */
/* color: #0f0f0f and only flipped to #fafafa inside                       */
/*   @media (prefers-color-scheme: dark) { ... }                           */
/* — which doesn't fire when our force-dark relies on color-scheme: dark   */
/* on <html> instead of the OS setting.  Result: on a Mac in Light mode,   */
/* the "Depth map" / "Style" / "Generate" / "Confirm" h2 renders near-     */
/* black on our dark background → invisible.                               */
/*                                                                          */
/* Same fix shape as v6.8: assert the bright values unconditionally with   */
/* !important so the original light-mode rule and any later overrides     */
/* both lose to v6.10.                                                     */
/* ════════════════════════════════════════════════════════════════════════ */
.step-header h2,
.wizard-step .step-header h2 {
  color: #f5f5fa !important;
  -webkit-text-fill-color: #f5f5fa !important;
  background: none !important;
}
.step-header p,
.wizard-step .step-header p {
  color: #c5c6d0 !important;     /* WCAG AA against #07070b at 13px+ */
  opacity: 1 !important;
}
/* Also bridge the same bug for the smaller pane labels ("PHOTO" / "DEPTH"
   / "ORIGINAL" / "STYLIZED" — all .pane-header > span:first-child).      */
.pane-header,
.pane-header > span:first-child {
  color: #d4d4dc !important;
}
/* The wizard hero h1 / brand h1 — not affected in screenshots but same
   media-query pattern, fix proactively so we don't get a third report.   */
header .brand h1,
.hero-eyebrow,
.hero-title {
  color: #f5f5fa !important;
}
/* Fallback / quality-hint banners that quote dark inline colour → keep   */
/* them legible on the now-dark pane backgrounds.                         */
.fallback-banner .fb-text,
.quality-hint .qh-text,
.replace-flow-hint,
.replace-status {
  color: #d4d4dc !important;
}
/* Generic .hint that still uses the old --muted (#86868b → too dim on
   the deep navy bg).  Bump it without losing its "secondary" rank.      */
.hint, .style-section-blurb {
  color: #b5b5bd !important;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.11 · Multi-card "selected" state — make it OBVIOUSLY clicked         */
/* ──────────────────────────────────────────────────────────────────────── */
/* Bug: the original `.multi-card.selected` rule (line ~483) only adds a   */
/* 1 px accent border + a 3 px soft shadow.  On the dark theme the soft   */
/* shadow uses `--accent-soft` which is rgba(255,106,61,0.12) — basically */
/* invisible on near-black background.  Users click a card and have no    */
/* feedback that the selection registered.                                 */
/*                                                                          */
/* Fix: 4 px hard accent border + 24 px outer glow + ✓ badge top-right.   */
/* The badge also doubles as an at-a-glance "this is the chosen one"      */
/* indicator after the user has scrolled away and come back.               */
/* ════════════════════════════════════════════════════════════════════════ */
.multi-card {
  position: relative !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              box-shadow .25s ease !important;
}
.multi-card.selectable:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 106, 61, 0.40) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45),
              0 0 0 1px rgba(255, 106, 61, 0.20) !important;
}
.multi-card.selected {
  border: 2px solid #ff6a3d !important;
  box-shadow:
    0 0 0 3px rgba(255, 106, 61, 0.25),
    0 0 28px rgba(255, 106, 61, 0.40),
    0 8px 24px rgba(0, 0, 0, 0.55) !important;
  transform: translateY(-3px) scale(1.015) !important;
}
.multi-card.selected::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8638 0%, #ff6a3d 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(255, 106, 61, 0.55),
              0 0 0 2px rgba(7, 7, 11, 0.85);
  z-index: 4;
  animation: v6-card-tick-in .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes v6-card-tick-in {
  0%   { opacity: 0; transform: scale(.4) rotate(-90deg); }
  60%  { transform: scale(1.18) rotate(0); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* The card's name bar gets a subtle accent tint when selected so the    */
/* name itself reads as "active" alongside the badge.                    */
.multi-card.selected .multi-name {
  color: #ff8557 !important;
}
@media (prefers-reduced-motion: reduce) {
  .multi-card.selected,
  .multi-card.selected::after { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* v6.12 · Auto-detect gallery (paper §5.62)                               */
/* ──────────────────────────────────────────────────────────────────────── */
/* Renders 12 thumbnails of SAM 2 + CLIP detected objects in Step 6.       */
/* Click a tile → its mask becomes the working selection → confirm + lift. */
/* Default-collapsible header so power-users who prefer click-to-segment   */
/* can hide the gallery without losing the affordance.                     */
/* ════════════════════════════════════════════════════════════════════════ */

.auto-gallery {
  margin: 12px 0 18px;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 106, 61, 0.30);
  border-radius: 12px;
  position: relative;
}
.auto-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.auto-gallery-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg, #f5f5fa);
  display: flex;
  align-items: center;
  gap: 8px;
}
.auto-gallery-icon {
  font-size: 16px;
  filter: hue-rotate(320deg) saturate(1.2);
}
.auto-gallery-count {
  color: #ff8557;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.auto-gallery-toggle {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: rgba(255, 255, 255, 0.75);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 22px;
  padding: 0;
}
.auto-gallery-toggle:hover {
  background: rgba(255, 106, 61, 0.20);
  color: #ff8557;
}
.auto-gallery.collapsed .auto-gallery-grid,
.auto-gallery.collapsed .auto-gallery-sub {
  display: none;
}
.auto-gallery.collapsed .auto-gallery-toggle {
  transform: rotate(-90deg);
}
.auto-gallery-sub {
  font-size: 12px;
  color: var(--muted, #9a9aa4);
  margin-bottom: 12px;
  line-height: 1.45;
}
.auto-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) {
  .auto-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 480px) {
  .auto-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.auto-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(20, 20, 28, 0.95) 0%, rgba(15, 15, 22, 0.95) 100%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.04) 0% 25%, transparent 0% 50%) 50% / 14px 14px;
  cursor: pointer;
  padding: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              box-shadow .25s ease;
  font: inherit;
  color: inherit;
  text-align: left;
  outline: none;
  display: flex;
  flex-direction: column;
}
.auto-tile:hover,
.auto-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 61, 0.55);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.40),
    0 0 0 1px rgba(255, 106, 61, 0.20),
    0 0 18px rgba(255, 106, 61, 0.18);
}
.auto-tile-canvas {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  background: transparent;
}
.auto-tile-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: linear-gradient(180deg,
    rgba(7, 7, 11, 0.55) 0%,
    rgba(7, 7, 11, 0.92) 100%);
  font-size: 11px;
  gap: 6px;
}
.auto-tile-label {
  color: var(--fg, #f5f5fa);
  font-weight: 500;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-tile-conf {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.auto-tile-conf--high {
  background: rgba(48, 209, 88, 0.20);
  color: #5fd97c;
}
.auto-tile-conf--mid {
  background: rgba(255, 159, 10, 0.20);
  color: #ffb672;
}
.auto-tile-conf--low {
  background: rgba(255, 255, 255, 0.10);
  color: #9a9aa4;
}

/* Loading state — shown while /api/auto_detect is in flight */
.auto-gallery-loading {
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(255, 106, 61, 0.06);
  border: 1px dashed rgba(255, 106, 61, 0.25);
  border-radius: 10px;
  color: var(--fg-2, #d4d4dc);
  font-size: 12px;
  display: flex;
  align-items: center;
}