/* ═══════════════════════════════════════════════════════════
   ProBroker AI — Dark Studio Workspace
   Design System  ·  Navy / Cyan / Electric Blue AI Theme
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --bg:            #030814;
  --bg-elevated:   #050B18;
  --surface:       #080F1C;
  --card:          #0A1220;
  --card-hover:    #0D1628;
  --border:        rgba(120,150,190,0.18);
  --border-strong: rgba(120,150,190,0.30);

  --accent:        #34C6F4;
  --accent-bright: #00C8FF;
  --accent-dim:    rgba(52,198,244,0.45);
  --accent-glow:   rgba(52,198,244,0.15);
  --accent-subtle: rgba(52,198,244,0.08);

  --cyan:          #34C6F4;
  --cyan-dim:      rgba(52,198,244,0.35);
  --cyan-glow:     rgba(52,198,244,0.12);
  --blue:          #1688D8;
  --blue-bright:   #00C8FF;

  /* ProBroker AI brand aliases */
  --ll-bg-main:      #030814;
  --ll-bg-panel:     #07111F;
  --ll-bg-card:      rgba(10,18,32,0.88);
  --ll-border-subtle:rgba(95,130,170,0.22);
  --ll-border-active:rgba(52,198,244,0.65);
  --ll-cyan:         #34C6F4;
  --ll-blue:         #1688D8;
  --ll-blue-bright:  #00C8FF;
  --ll-text-main:    #F4F7FB;
  --ll-text-muted:   #93A3B8;
  --ll-success:      #37C987;
  --ll-error:        #B85A5A;

  --text:          #F4F7FB;
  --text-sec:      rgba(147,163,184,0.92);
  --text-dim:      rgba(147,163,184,0.55);
  --text-inv:      #07090F;

  --success:       #37C987;
  --success-bg:    rgba(55,201,135,0.10);
  --success-border:rgba(55,201,135,0.20);
  --error:         #B85A5A;
  --error-bg:      rgba(184,90,90,0.10);
  --error-border:  rgba(184,90,90,0.22);
  --warn:          #E8B84B;

  --radius:        10px;
  --radius-sm:     7px;
  --radius-xs:     4px;
  --radius-pill:   999px;

  --shadow-sm:     0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.6);

  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --t:             0.18s;

  --header-h:      52px;
  --sidebar-w:     56px;
  --sidebar-exp:   196px;
  --right-w:       260px;

  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Mode color identity — same tokens shared with landing page ── */
  --mode-editor:          #E8C866;
  --mode-editor-soft:     rgba(232, 200, 102, 0.14);
  --mode-editor-border:   rgba(232, 200, 102, 0.42);
  --mode-editor-glow:     rgba(232, 200, 102, 0.22);

  --mode-creative:        #A970FF;
  --mode-creative-soft:   rgba(169, 112, 255, 0.14);
  --mode-creative-border: rgba(169, 112, 255, 0.42);
  --mode-creative-glow:   rgba(169, 112, 255, 0.24);

  --mode-interior:        #35D8F2;
  --mode-interior-soft:   rgba(53, 216, 242, 0.14);
  --mode-interior-border: rgba(53, 216, 242, 0.42);
  --mode-interior-glow:   rgba(53, 216, 242, 0.26);

  /* ── ProBroker blue — unified Apple-style interaction accent ─── */
  --pb-black:        #000000;
  --pb-surface:      #05070c;
  --pb-surface-2:    #0a0d14;
  --pb-border:       rgba(238, 238, 238, 0.10);
  --pb-border-strong:rgba(238, 238, 238, 0.18);
  --pb-text:         #eeeeee;
  --pb-text-muted:   #979797;
  --pb-text-soft:    #666666;
  --pb-blue:         #0088cc;
  --pb-blue-soft:    rgba(0, 136, 204, 0.14);
  --pb-blue-border:  rgba(0, 136, 204, 0.36);
  --pb-blue-glow:    rgba(0, 136, 204, 0.20);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
}

img { display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input  { font-family: inherit; }

.hidden { display: none !important; }

/* ── Workspace Grid ─────────────────────────────────────────── */
.workspace {
  display: none;
  height: 100vh;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  grid-template-areas:
    "header  header  header"
    "sidebar center  right";
  background: var(--bg);
  transition: grid-template-columns 0.18s ease-out;
}
body.studio-ready .workspace {
  display: grid;
}
@media (min-width: 768px) {
  .workspace.sidebar-expanded {
    grid-template-columns: var(--sidebar-exp) 1fr var(--right-w);
  }
  .workspace.sidebar-expanded .ws-header-logo {
    width: var(--sidebar-exp);
    justify-content: flex-start;
    padding: 0 16px;
  }
  .workspace.sidebar-expanded .logo-name { display: block; }
}

/* ── Header ─────────────────────────────────────────────────── */
.ws-header {
  grid-area: header;
  display: flex;
  align-items: center;
  padding: 0 16px 0 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  z-index: 50;
  gap: 0;
}

.ws-header-logo {
  width: 92px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 12px;
  border-right: 1px solid var(--border);
  height: 100%;
  transition: width 0.18s ease-out;
  overflow: visible;
  position: relative;
}
.logo-icon {
  width: 130px;
  height: auto;
  max-width: none;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* Expanded sidebar — show slightly larger wordmark */
.workspace.sidebar-expanded .logo-icon {
  width: 160px;
  height: auto;
}

/* Wrapper keeps badge anchored to the logo, not floating between logo and title */
.logo-beta-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.logo-badge {
  position: absolute;
  top: -5px;
  right: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #34c6f4;
  background: rgba(5, 14, 28, 0.85);
  border: 1px solid rgba(52, 198, 244, 0.55);
  border-radius: 999px;
  padding: 2px 7px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

a.ws-header-logo {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.ws-header-logo:hover .logo-icon {
  opacity: 0.80;
  transition: opacity 0.15s ease;
}

.ws-header-center {
  flex: 1;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ws-breadcrumb {
  font-size: 13px;
  font-weight: 500;
  color: rgba(220, 230, 244, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-breadcrumb strong {
  color: var(--text);
  font-weight: 500;
}

/* ── Header auth area (populated by auth.js) ────────────────── */
#auth-user-area {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 0 10px;
}

/* ── Sidebar (Film Strip) ───────────────────────────────────── */
.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  z-index: 30;
  transition: box-shadow 0.18s ease-out, background 0.18s ease-out;
}
@media (min-width: 768px) {
  .sidebar.expanded {
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
    background: rgba(5,11,24,0.96);
  }
}

.sidebar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-toolbar-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.52);
}

/* ── Queue Drop Zone (sidebar) ────────────────────────────── */
.sidebar-drop-zone {
  position: relative;
  margin: 10px 10px 6px;
  padding: 10px;
  border: 1.5px dashed rgba(255,255,255,0.16);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
  flex-shrink: 0;
}
.sidebar-drop-zone:hover,
.sidebar-drop-zone.drag-over {
  border-color: var(--ll-cyan);
  background: var(--accent-subtle);
}
.sidebar-drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.sidebar-drop-zone span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  pointer-events: none;
}
.sidebar-drop-zone .drop-icon {
  font-size: 13px;
  color: var(--text-dim);
  pointer-events: none;
}

/* ── Queue List ─────────────────────────────────────────────── */
.listing-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.listing-name-row .listing-name-input { flex: 1; min-width: 0; }
.btn-new-listing {
  flex-shrink: 0;
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.queue-list::-webkit-scrollbar { width: 4px; }
.queue-list::-webkit-scrollbar-track { background: transparent; }
.queue-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }

/* ── Queue Item ─────────────────────────────────────────────── */
.qi {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  position: relative;
  transition: background var(--t) var(--ease);
  border-radius: 0;
  user-select: none;
}
.qi:hover { background: rgba(255,255,255,0.04); }
.qi.active {
  background: rgba(52,198,244,0.08);
}
.qi.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Thumbnail */
.qi-thumb {
  position: relative;
  width: 48px;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
}
.qi-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.qi-thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--text-dim);
}

/* Status badge on thumb */
.qi-badge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 7px;
}
.qi[data-status="uploading"]    .qi-badge { background: var(--text-dim); animation: pulse 1.2s ease infinite; }
.qi[data-status="uploaded"]     .qi-badge { background: var(--accent); }
.qi[data-status="queued"]       .qi-badge { background: var(--text-dim); }
.qi[data-status="processing"]   .qi-badge { background: transparent; border-color: var(--accent); animation: spin 1s linear infinite; }
.qi[data-status="retrying"]     .qi-badge { background: transparent; border-color: #f59e0b; animation: spin 1.6s linear infinite; }
.qi[data-status="done"]         .qi-badge { background: var(--success); }
.qi[data-status="error"]        .qi-badge { background: var(--error); }
.qi[data-status="failed_final"] .qi-badge { background: var(--error); }

@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Meta text */
.qi-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qi-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.qi-status-text {
  font-size: 11px;
  color: var(--text-sec);
  white-space: nowrap;
}
.qi[data-status="processing"]   .qi-status-text { color: var(--accent); }
.qi[data-status="retrying"]     .qi-status-text { color: #f59e0b; }
.qi[data-status="done"]         .qi-status-text { color: var(--success); }
.qi[data-status="error"]        .qi-status-text { color: var(--error); }
.qi[data-status="failed_final"] .qi-status-text { color: var(--error); }
.qi[data-status="queued"]       .qi-status-text { color: var(--text-dim); }
.qi[data-status="uploaded"]     .qi-status-text { color: var(--text-sec); }

/* Per-thumbnail download button (done images only) */
.qi-dl {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  border-radius: 3px;
  background: rgba(0,0,0,0.62);
  color: rgba(255,255,255,0.82);
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--t) var(--ease), background var(--t) var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.qi[data-status="done"]:hover .qi-dl { opacity: 1; }
.qi-dl:hover { background: var(--accent) !important; color: #000; }

/* Remove button */
.qi-remove {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(245,245,247,0.40);
  flex-shrink: 0;
  opacity: 0;
  transition: all var(--t) var(--ease);
}
.qi:hover .qi-remove { opacity: 1; }
.qi-remove:hover { color: var(--error); background: var(--error-bg); }

/* ── Sidebar Footer ─────────────────────────────────────────── */
.sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
}
.sb-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.queue-counter {
  font-size: 11px;
  color: var(--text-sec);
}
.queue-counter strong { color: var(--text); }
.sb-dl-all {
  font-size: 11px;
  padding: 3px 8px;
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 5px);
  height: auto;
  line-height: 1.4;
}
.sb-dl-all:not(:disabled):hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: var(--accent-subtle);
}
.sb-dl-all:disabled { opacity: 0.28; cursor: not-allowed; }
.sb-clear-done {
  font-size: 11px;
  color: var(--text-sec);
  padding: 3px 6px;
}
.sb-clear-done:disabled { opacity: 0.32; cursor: not-allowed; }

/* ── Center Workspace ───────────────────────────────────────── */
.ws-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}

/* Empty state */
.center-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.center-drop-zone {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 60px 40px;
  border: 2px dashed rgba(52,198,244,0.40);
  border-radius: var(--radius);
  background: rgba(5,14,28,0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.center-drop-zone:hover,
.center-drop-zone.drag-over {
  border-color: var(--ll-cyan);
  background: rgba(10,35,55,0.75);
  box-shadow: 0 0 24px rgba(52,198,244,0.18);
}
.center-drop-zone input[type="file"] {
  position: absolute;
  inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.cz-icon {
  width: 56px; height: 56px;
  background: rgba(52,198,244,0.07);
  border: 1px solid rgba(52,198,244,0.30);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  color: var(--ll-cyan);
}
.cz-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.cz-sub {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.5;
  max-width: 300px;
}
.cz-retention-notice {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  margin-top: 6px;
  margin-bottom: 2px;
}
.cz-formats {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 2px;
}
.cz-fmt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ll-text-muted);
  background: rgba(10,18,32,0.88);
  border: 1px solid rgba(52,198,244,0.22);
  border-radius: 3px;
  padding: 3px 6px;
}

/* No-selection state */
.center-no-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-dim);
}
.center-no-selection .ns-icon { font-size: 28px; }
.center-no-selection .ns-text { font-size: 13px; }

/* ── Viewer ─────────────────────────────────────────────────── */
.center-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* ── Compare Wrap ───────────────────────────────────────────── */
.compare-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;          /* stacking context: compare-divider stays inside this layer */
  overflow: hidden;
  background: var(--surface);
  cursor: default;
  user-select: none;
  --split: 50%;
}

.compare-before {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: filter 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Soft blur + dim during AI processing — removed via class toggle when done */
.compare-before.is-processing {
  filter: blur(7px) brightness(0.68);
}
.compare-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  clip-path: inset(0 0 0 var(--split));
}

/* Small spinner shown while a done-image result is loading for the first time.
   Disappears instantly for cached images; appears briefly for uncached ones. */
.compare-wrap.result-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation: result-spin 0.55s linear infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes result-spin {
  to { transform: rotate(360deg); }
}

.compare-divider {
  position: absolute;
  top: 0;
  left: var(--split);
  transform: translateX(-50%);
  height: 100%;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}
.compare-line {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 100%;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.compare-grip {
  display: none;
}

.compare-pill {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: white;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  pointer-events: none;
  z-index: 10;
  top: 14px;
}
.compare-pill-before { left: 14px; }
.compare-pill-after  { right: 14px; }

/* ── Viewer Overlay ─────────────────────────────────────────── */
.viewer-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Uploading */
.ov-uploading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-sec);
  font-size: 13px;
}
.ov-spinner {
  width: 36px; height: 36px;
  border: 2.5px solid rgba(255,255,255,0.08);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

/* Ready to enhance */
.ov-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.ov-image-preview {
  width: 100%; height: 100%;
  object-fit: contain;
  position: absolute;
  inset: 0;
}
.ov-enhance-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 32px;
  background: rgba(5,10,20,0.68);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  text-align: center;
}
.ov-enhance-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ov-enhance-sub {
  font-size: 12px;
  color: var(--text-sec);
}

/* ══════════════════════════════════════════════════════════════
   IMMERSIVE LOADER — SVG turbulence displacement, no video
   ══════════════════════════════════════════════════════════════ */

/* Fade in/out via opacity — ID specificity beats .hidden { display:none !important } */
#ov-processing {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s 0s;
}
#ov-processing.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

/* ── WebGL canvas: primary effect layer ──────────────────────── */
.ildr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* ── Fallback: blurred photo (shown only when WebGL unavailable) */
.ildr-photo-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(0.44) saturate(0.58);
  transform: scale(1.08);
  display: none; /* activated by JS when WebGL init fails */
}
.ildr-photo-base.ildr-fb {
  display: block;
}

/* ── Vignette: transparent center, dark luxury edges ─────────── */
.ildr-glass {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse 78% 68% at 50% 44%,
    rgba(0, 0, 0, 0.04)  0%,
    rgba(0, 0, 0, 0.48) 62%,
    rgba(0, 0, 0, 0.78) 100%
  );
  pointer-events: none;
}

/* ── Bottom-anchored HUD: pct + bar + label + pills ──────────── */
.ildr-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(220px, 40%, 340px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  padding: 0 24px;
}

/* Large percentage counter */
.ildr-pct {
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}

/* Thin progress bar */
.ildr-bar-wrap {
  width: 180px;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 14px;
}
.ildr-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: 1px;
  transition: width 0.5s var(--ease-out);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(52, 198, 244, 0.50);
}
.ildr-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: ildrShimmer 1.6s linear infinite;
}
@keyframes ildrShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(300%); }
}

/* Step label — small caps, muted */
.ildr-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* ── Reduced motion: freeze turbulence, keep static warp ─────── */
@media (prefers-reduced-motion: reduce) {
  /* JS will not start RAF loop; SVG filter stays at initial static seed */
  .ildr-bar-fill           { transition: none; }
  .ildr-bar-fill::after    { animation: none; }
  #ov-processing,
  #ov-processing.hidden    { transition: none; }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ildr-hud      { width: clamp(200px, 88%, 320px); }
  .ildr-pct      { font-size: 44px; margin-bottom: 12px; }
  .ildr-bar-wrap { width: 140px; margin-bottom: 12px; }
}

/* Error overlay */
.ov-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 32px;
  background: rgba(5,10,20,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--error-border);
  border-radius: var(--radius);
  max-width: 360px;
  text-align: center;
}
.ov-error-icon { font-size: 28px; }
.ov-error-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ov-error-msg {
  font-size: 12px;
  color: var(--text-sec);
  line-height: 1.5;
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  max-width: 300px;
  word-break: break-word;
}
/* Plan-limit upgrade variant — calm, not a red alarm */
.ov-error--upgrade {
  border-color: rgba(52,198,244,0.20);
}
.ov-error--upgrade .ov-error-msg {
  background: var(--accent-subtle);
  border-color: rgba(52,198,244,0.18);
}
.ov-error-icon img.plan-limit-logo {
  width: 200px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 0.92;
}
@media (max-width: 480px) {
  .ov-error-icon img.plan-limit-logo { width: 160px; }
}

/* ── Object selection banner (AI Creative · non-blocking) ──── */
.ov-select-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 12.5px;
  color: var(--text-sec);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.ov-select-banner .ov-select-icon {
  font-size: 15px;
  color: var(--accent);
}

/* ── AI Interior Design — generating overlay ─────────────────── */
.ov-id-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 340px;
  padding: 24px 28px;
  background: rgba(0,0,0,0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.ov-id-gen-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.ov-id-gen-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
}
.ov-id-gen-steps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  width: 100%;
}
.ov-id-gen-step {
  font-size: 10.5px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.01em;
  text-align: left;
}
.ov-id-gen-step::before {
  content: '✓ ';
  color: var(--accent);
  font-weight: 600;
}

/* Progress bar — inside generating overlay */
.ov-id-gen-progress-wrap {
  width: 100%;
  margin-top: 4px;
}
.ov-id-gen-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}
.ov-id-gen-stage-text {
  font-size: 11px;
  color: rgba(245,245,247,0.62);
  line-height: 1.3;
  flex: 1;
  text-align: left;
}
.ov-id-gen-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
}
.ov-id-gen-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.09);
  border-radius: 2px;
  overflow: hidden;
}
.ov-id-gen-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(52,198,244,0.85), rgba(88,120,255,0.85));
  border-radius: 2px;
  transition: width 0.55s cubic-bezier(0.4,0,0.2,1);
}

/* ── Mask Canvas ─────────────────────────────────────────────── */
.mask-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 14;
  cursor: crosshair;
  touch-action: none;
}

/* ── Mask Toolbar ────────────────────────────────────────────── */
.mask-toolbar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  pointer-events: all;
  white-space: nowrap;
}
.mask-toolbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}
/* Paint / Erase segmented control */
.mask-tool-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 2px;
}
.mask-mode-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mask-mode-btn:hover { color: var(--text); }
.mask-mode-btn.active {
  background: rgba(52, 198, 244, 0.18);
  color: var(--accent);
}
/* Brush size */
.mask-size-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  user-select: none;
}
.mask-size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.mask-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(52,198,244,0.25);
}
.mask-size-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}
.mask-size-readout {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  min-width: 20px;
  text-align: left;
  user-select: none;
}
/* Clear button */
.mask-toolbar-btn {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.mask-toolbar-btn:hover { color: var(--error, #e05c5c); }

/* ── Action Bar ─────────────────────────────────────────────── */
.viewer-action-bar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  gap: 8px;
  flex-shrink: 0;
}
.action-bar-filename {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  flex-shrink: 0;
}
.action-bar-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}
.action-bar-spacer { flex: 1; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--ll-cyan), var(--ll-blue));
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  transition: all var(--t) var(--ease);
  box-shadow: 0 1px 10px rgba(52,198,244,0.25);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  box-shadow: 0 3px 16px rgba(52,198,244,0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: none; }
.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  transition: all var(--t) var(--ease);
  white-space: nowrap;
}
.btn-secondary:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.12);
}
.btn-secondary:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(245,245,247,0.68);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: all var(--t) var(--ease);
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.btn-ghost:disabled { opacity: 0.3; cursor: not-allowed; }

/* Large overlay enhance button */
.btn-enhance-lg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: linear-gradient(135deg, var(--ll-cyan), var(--ll-blue));
  border-radius: var(--radius-sm);
  padding: 13px 28px;
  box-shadow: 0 4px 24px rgba(52,198,244,0.30);
  transition: all 0.2s var(--ease);
}
.btn-enhance-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(52,198,244,0.40);
}

/* ── Right Panel (Lab Console) ──────────────────────────────── */
.right-panel {
  grid-area: right;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: rgba(5,10,22,0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  overflow: hidden;
}

.rp-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.rp-scroll::-webkit-scrollbar { width: 3px; }
.rp-scroll::-webkit-scrollbar-track { background: transparent; }
.rp-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border-radius: 4px; }

.rp-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--text-sec);
  padding: 40px;
  text-align: center;
  font-size: 12px;
}

.rp-section {
  padding: 14px 16px;
  border-bottom: none;
}

/* ── Shared premium Studio section headline ─────────────────────────────── */
.studio-section-title {
  text-align: center;
  color: var(--pb-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.rp-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-text);
  text-align: center;
  margin-bottom: 14px;
}

/* File info */
.rp-filename {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
  margin-bottom: 10px;
  line-height: 1.4;
}
.rp-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.rp-meta-row .k { color: var(--text-sec); }
.rp-meta-row .v { color: var(--text); font-weight: 500; }

/* Status */
.rp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 4px 9px;
}
.rp-status-badge.uploaded   { color: var(--ll-cyan); background: rgba(52,198,244,0.08); border: 1px solid rgba(52,198,244,0.35); }
.rp-status-badge.processing { color: var(--ll-cyan); background: rgba(52,198,244,0.08); border: 1px solid rgba(52,198,244,0.35); }
.rp-status-badge.done       { color: var(--success); background: var(--success-bg); border: 1px solid var(--success-border); }
.rp-status-badge.error      { color: var(--error); background: var(--error-bg); border: 1px solid var(--error-border); }
.rp-status-badge.uploading  { color: var(--text-sec); background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); }

/* Mini progress */
.rp-progress-wrap {
  margin-top: 10px;
}
.rp-progress-label {
  font-size: 11px;
  color: var(--text-sec);
  margin-bottom: 6px;
  min-height: 14px;
}
.rp-progress-track {
  height: 3px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.rp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  border-radius: var(--radius-pill);
  transition: width 0.5s var(--ease-out);
}

/* Plan tags */
.plan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.plan-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-sec);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 7px;
  line-height: 1.4;
}
.plan-tag .tk { color: var(--text-dim); font-size: 10px; margin-right: 1px; }
.plan-tag .tv { color: var(--text); }
.plan-tag.warn { color: var(--warn); background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); }

/* Mode selector cards */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mode-card {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.mode-card:hover:not(.disabled) {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.11);
}
.mode-card.active {
  border-color: var(--pb-blue-border);
  background: linear-gradient(180deg, rgba(0,136,204,0.14), rgba(0,136,204,0.05)), rgba(5,7,12,0.88);
  box-shadow: 0 0 0 1px rgba(0,136,204,0.22), 0 18px 44px rgba(0,136,204,0.14);
}
.mode-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.mode-card-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.mode-card.active .mode-card-name {
  color: var(--pb-text);
}
.mode-card-desc {
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.45;
}
.mode-card-warn {
  font-size: 10px;
  color: var(--warn, #f59e0b);
  margin-top: 4px;
}
.mode-card-cs.disabled {
  opacity: 0.60;
}
.mode-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mode-cs-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.mode-cs-msg {
  font-size: 10px;
  color: var(--text-sec);
  line-height: 1.45;
  margin-top: 5px;
  font-style: italic;
}

/* AI Creative tools panel */
.creative-subtitle {
  font-size: 11.5px;
  color: var(--text-sec);
  margin: -4px 0 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.creative-opts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.creative-opt-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.creative-opt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.creative-opt-label {
  font-size: 12px;
  color: var(--text-sec);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.creative-select {
  flex: 1;
  max-width: 148px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, opacity 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.creative-select:focus {
  border-color: var(--accent);
}
.creative-select:disabled {
  opacity: 0.28;
  cursor: default;
}
/* Sky group when Night is active — whole group softens, not just select */
.creative-group-managed .creative-opt-label {
  opacity: 0.4;
}
.creative-group-managed .creative-select {
  opacity: 0.28;
}
/* Shared field hint (sky + object removal) */
.creative-field-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  padding-left: 1px;
  transition: opacity 0.15s;
}
/* Creative panel: inline Enhance button (Object Removal workflow) */
.btn-creative-enhance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(135deg, #34C6F4 0%, #1688D8 100%);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-creative-enhance:hover {
  box-shadow: 0 4px 18px rgba(52, 198, 244, 0.40);
  transform: translateY(-1px);
}
.btn-creative-enhance:active { transform: none; box-shadow: none; }

/* Toggle switch — slightly larger and more prominent */
.creative-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.creative-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.creative-toggle-track {
  width: 38px;
  height: 21px;
  background: rgba(255,255,255,0.10);
  border-radius: 11px;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  border: 1px solid rgba(255,255,255,0.10);
}
.creative-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,0.40);
  transition: transform 0.2s, background 0.2s;
}
.creative-toggle input:checked + .creative-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.creative-toggle input:checked + .creative-toggle-track::after {
  transform: translateX(17px);
  background: #fff;
}

/* Manual controls coming soon */
.rp-coming-soon {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.07);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rp-cs-title { font-size: 12px; font-weight: 600; color: var(--text-sec); }
.rp-cs-desc  { font-size: 11px; color: var(--text-dim); line-height: 1.5; }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  min-width: 240px;
  max-width: 340px;
  animation: toastIn 0.25s var(--ease) both;
}
.toast.success { border-color: var(--success-border); }
.toast.error   { border-color: var(--error-border); }
@keyframes toastIn  { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(12px); } }

/* ── Right Panel: content wrapper ──────────────────────────── */
.rp-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* rp-scroll is now the inner scrollable area, not the outer wrapper */
.rp-content > .rp-scroll {
  flex: 1;
  min-height: 0;
}

/* ── Creative Tabs ──────────────────────────────────────────── */
.ctabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border-radius: 7px;
  padding: 3px;
  margin-bottom: 14px;
}
.ctab {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: none;
  border-radius: 5px;
  padding: 5px 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ctab:hover { color: var(--text-sec); }
.ctab.active {
  color: var(--text);
  background: rgba(255,255,255,0.09);
}

/* ── AI Creative Mode Selector ──────────────────────────────── */
.creative-mode-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.creative-mode-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid var(--pb-border);
  background: rgba(5, 7, 12, 0.70);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.creative-mode-btn:hover {
  border-color: var(--pb-blue-border);
  background: rgba(0, 136, 204, 0.05);
}
.creative-mode-btn.active {
  border-color: var(--pb-blue-border);
  background: linear-gradient(180deg, rgba(0,136,204,0.12), rgba(0,136,204,0.05));
  box-shadow: 0 0 0 1px rgba(0,136,204,0.16), 0 4px 16px rgba(0,136,204,0.12);
}
.creative-mode-btn--trial-exhausted {
  opacity: 0.5;
  cursor: default;
}
.creative-mode-btn--trial-exhausted:hover {
  background: rgba(5, 7, 12, 0.70);
  border-color: var(--pb-border);
}
.creative-trial-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--pb-blue);
  background: var(--pb-blue-soft);
  border: 1px solid var(--pb-blue-border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1.4;
}
.creative-trial-badge--used {
  color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
.creative-mode-panel {
  margin-bottom: 8px;
}
.creative-text-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 5px;
  color: var(--text);
  font-size: 11.5px;
  padding: 5px 8px;
  outline: none;
}
.creative-text-input::placeholder { color: rgba(245,245,247,0.35); }
.creative-text-input:focus { border-color: var(--accent); }

/* ── AI Director Panel ──────────────────────────────────────── */
.director-idle {
  font-size: 11.5px;
  color: var(--text-sec);
  line-height: 1.55;
  padding: 4px 0 2px;
}

.director-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.director-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.director-kv .dk {
  font-size: 11px;
  color: var(--text-sec);
  flex-shrink: 0;
}
.director-kv .dv {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  word-break: break-word;
}

.director-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.director-flag {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--warn);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.18);
  border-radius: 4px;
  padding: 2px 7px;
  line-height: 1.5;
}

/* ── Primary Action (sticky bottom) ────────────────────────── */
.rp-primary {
  padding: 16px 16px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
  background: rgba(3,8,20,0.40);
}
.rp-btn-main {
  width: 100%;
  justify-content: center;
  font-size: 13px;
  padding: 11px 20px;
  letter-spacing: 0;
}
.rp-primary-secondary {
  display: flex;
  gap: 6px;
}
.rp-primary-secondary .btn-secondary,
.rp-primary-secondary .btn-ghost {
  flex: 1;
  justify-content: center;
  font-size: 11px;
  padding: 7px 6px;
}

/* ── AI Interior Design dev preview notice ───────────────────── */
.rp-id-dev-notice {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(123,97,255,0.08);
  border: 1px solid rgba(123,97,255,0.18);
}
.rp-id-dev-notice-msg {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.rp-id-dev-notice-sub {
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.45;
}
.rp-id-dev-notice.hidden { display: none; }

/* ── Compact file metadata (inside safety block) ────────────── */
.rp-compact-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.05);
  gap: 4px;
}
.rp-compact-meta .rp-meta-row { font-size: 11px; }
.rp-filename-compact {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: right;
  font-size: 11px !important;
}

/* ctab-panel spacing */
.ctab-panel .creative-opt-row { margin-top: 2px; }
.ctab-panel .creative-opt-group { margin-top: 4px; }

/* ── AI Full Enhance Controls ───────────────────────────────── */
.fe-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Scene Family / Branch Mode pill blocks */
.fe-family-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fe-family-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.52);
}
.fe-pill-group {
  display: flex;
  gap: 4px;
}
.fe-pill {
  flex: 1;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-align: center;
}
.fe-pill:hover {
  background: rgba(255,255,255,0.13);
  color: var(--text);
}
.fe-pill[aria-pressed="true"] {
  background: rgba(52,198,244,0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Luxury strength slider group */
.fe-slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fe-readout {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}
.fe-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.fe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(52,198,244,0.25);
}
.fe-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* Safety preservation tags */
.fe-safety-block {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.fe-safety-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}

/* Fallback note shown in Enhancement Applied section */
.fe-fallback-note {
  font-size: 10.5px;
  color: var(--warn);
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.15);
  border-radius: 4px;
  padding: 5px 8px;
  margin-top: 6px;
  line-height: 1.45;
}

/* ── Geometry Correction Global Block ────────────────────────── */
.geo-global-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.geo-reset-btn {
  font-size: 11px;
  color: var(--text-dim);
  text-align: left;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.geo-reset-btn:hover { color: var(--text-sec); }

/* ── Per-photo geometry chip ──────────────────────────────────── */
.qi-geo {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.4;
  align-self: flex-start;
  transition: all var(--t) var(--ease);
}
.qi-geo:hover                    { border-color: var(--border-strong); color: var(--text-sec); }
.qi-geo.qi-geo--on               { border-color: var(--accent-dim); color: var(--accent); background: var(--accent-subtle); }
.qi-geo.qi-geo--off              { border-color: var(--error-border); color: var(--error); background: var(--error-bg); }
.qi-geo.qi-geo--default          { border-color: var(--border); color: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   PREMIUM EDITOR PANEL REDESIGN
   Right-panel visual hierarchy, spacing, and component styles.
   All original IDs/selectors are preserved; only visuals change.
   ══════════════════════════════════════════════════════════════ */

/* Section spacing and subtle separators */
.rp-section { padding: 16px 18px; }
.rp-scroll .rp-section + .rp-section {
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* Refined section title — matches .studio-section-title shared premium style */
.rp-section-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-text);
  text-align: center;
  margin-bottom: 14px;
}

/* ── Mode Cards ────────────────────────────────────────────── */
.mode-cards { gap: 5px; }

.mode-card {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
.mode-card:hover:not(.disabled) {
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
}
.mode-card.active {
  border-color: var(--pb-blue-border);
  background: linear-gradient(180deg, rgba(0,136,204,0.14), rgba(0,136,204,0.05)), rgba(5,7,12,0.88);
  box-shadow: 0 0 0 1px rgba(0,136,204,0.22), 0 18px 44px rgba(0,136,204,0.14);
}
.mode-card.disabled { opacity: 0.42; cursor: not-allowed; }

/* Mode card header row */
.mode-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* Card name */
.mode-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 0;
}
.mode-card.active .mode-card-name { color: var(--pb-text); }

/* Card description */
.mode-card-desc {
  font-size: 11px;
  color: rgba(147,163,184,0.65);
  line-height: 1.5;
}
.mode-card.active .mode-card-desc { color: rgba(147,163,184,0.80); }

/* Recommended badge */
.mode-card-badge-rec {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(52,198,244,0.10);
  border: 1px solid rgba(52,198,244,0.28);
  border-radius: 3px;
  padding: 2px 5px;
  opacity: 0.75;
  transition: opacity 0.18s;
}
.mode-card.active .mode-card-badge-rec { opacity: 1; }

/* Coming soon badge keeps existing look */
.mode-cs-badge { margin-left: auto; flex-shrink: 0; }

/* ── Geometry compact row ──────────────────────────────────── */
.geo-global-block { margin-top: 0; gap: 6px; }

.geo-compact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.geo-compact-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sec);
  flex-shrink: 0;
}
.geo-compact-pills {
  flex: 0 0 auto;
  gap: 3px;
}
.geo-compact-pills .fe-pill {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 5px 12px;
  font-size: 11px;
}
.geo-reset-btn {
  font-size: 10px;
  color: rgba(147,163,184,0.40);
  padding: 0;
  letter-spacing: 0.01em;
}
.geo-reset-btn:hover { color: rgba(147,163,184,0.70); }

/* ── Enhancement Settings — inner groups ───────────────────── */
.fe-controls { gap: 0; }

.fe-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fe-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pb-text);
  text-align: center;
  margin-bottom: 8px;
}

/* Internal divider between groups */
.fe-section-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 12px 0;
}

/* Cleaner pill styles */
.fe-pill {
  padding: 6px 4px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  color: var(--text-sec);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fe-pill:hover:not([aria-pressed="true"]) {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.fe-pill[aria-pressed="true"] {
  background: rgba(52,198,244,0.12);
  border-color: rgba(52,198,244,0.48);
  color: var(--accent);
  font-weight: 600;
}
.fe-family-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.40);
}
.fe-family-block { gap: 5px; }

/* ── Camera / Angle option cards ──────────────────────────────────────── */
.fe-edit-type-group {
  flex-direction: column;
  gap: 7px;
}

.fe-edit-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1.5px solid rgba(100,130,170,0.18);
  background: rgba(255,255,255,0.03);
  text-align: left;
  flex: none;
  width: 100%;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.fe-edit-pill:hover:not([aria-pressed="true"]) {
  border-color: rgba(140,170,210,0.28);
  background: rgba(255,255,255,0.056);
}
.fe-edit-pill[aria-pressed="true"] {
  border-color: rgba(52,198,244,0.48);
  background: rgba(52,198,244,0.07);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.10), 0 2px 12px rgba(52,198,244,0.09);
}

/* Icon container */
.fe-edit-pill-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(190,210,235,0.55);
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.fe-edit-pill[aria-pressed="true"] .fe-edit-pill-icon {
  border-color: rgba(52,198,244,0.28);
  background: rgba(52,198,244,0.09);
  color: rgba(52,198,244,0.88);
}

/* Text body */
.fe-edit-pill-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fe-edit-pill-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(230,235,245,0.86);
  transition: color 0.18s;
}
.fe-edit-pill-desc {
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(147,163,184,0.46);
  line-height: 1.38;
  transition: color 0.15s;
}

/* Micro-badge (Regular / Correction) */
.fe-edit-pill-badge {
  display: inline-block;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(147,163,184,0.52);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.fe-edit-pill[aria-pressed="true"] .fe-edit-pill-badge {
  color: rgba(52,198,244,0.72);
  border-color: rgba(52,198,244,0.22);
}

/* Hover states */
.fe-edit-pill:hover:not([aria-pressed="true"]) .fe-edit-pill-name { color: rgba(245,245,247,0.96); }
.fe-edit-pill:hover:not([aria-pressed="true"]) .fe-edit-pill-desc { color: rgba(147,163,184,0.66); }

/* Selected states */
.fe-edit-pill[aria-pressed="true"] .fe-edit-pill-name { color: rgba(52,198,244,0.97); }
.fe-edit-pill[aria-pressed="true"] .fe-edit-pill-desc { color: rgba(52,198,244,0.56); }

/* Pro Camera Fix note (shown on selection) */
.fe-pcf-note {
  font-size: 10.5px;
  color: rgba(147,163,184,0.55);
  line-height: 1.4;
  padding: 5px 3px 0;
  letter-spacing: 0.01em;
}

/* ── Protection / Safety Locks ─────────────────────────────── */
/* Hide legacy safety block; use grid layout instead */
.fe-safety-block { display: none; }

/* Protection group is always-on internally — no user action needed.
   Hide it globally to reduce UI noise; protections stay active in payloads. */
.fe-group:has(.fe-safety-grid)                             { display: none !important; }
#rp-full-enhance-section .fe-section-divider:last-of-type  { display: none !important; }

.fe-safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.fe-lock-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(55,201,135,0.05);
  border: 1px solid rgba(55,201,135,0.12);
  border-radius: 7px;
  cursor: default;
  transition: background 0.15s, border-color 0.15s;
}
.fe-lock-badge:hover {
  background: rgba(55,201,135,0.08);
  border-color: rgba(55,201,135,0.20);
}
.fe-lock-icon-svg {
  width: 12px;
  height: 12px;
  color: var(--success);
  flex-shrink: 0;
  opacity: 0.80;
}
.fe-lock-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(55,201,135,0.75);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ── Action area top spacing ───────────────────────────────── */
.rp-primary { padding-top: 4px; }

/* ── Mobile touch-target improvements ─────────────────────── */
@media (max-width: 767px) {
  .fe-pill     { min-height: 40px; }
  .fe-edit-pill { min-height: 52px; padding: 10px 13px; }
  .mode-card   { padding: 13px 14px; }
  .rp-section  { padding: 14px 16px; }
  .fe-lock-badge { padding: 8px 10px; }
}

/* ── Perspective Correction support note ──────────────────── */
.geo-support-note {
  margin: 5px 0 2px;
  font-size: 11px;
  color: rgba(245,245,247,0.32);
  line-height: 1.45;
}

/* ── AI Creative tool cards with descriptions ──────────────── */
.creative-btn-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--pb-border);
  background: rgba(238, 238, 238, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-text-muted);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.creative-mode-btn:hover .creative-btn-icon,
.creative-mode-btn.active .creative-btn-icon {
  border-color: var(--pb-blue-border);
  background: var(--pb-blue-soft);
  color: var(--pb-blue);
}
.creative-btn-body {
  flex: 1;
  min-width: 0;
}
.creative-btn-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--pb-text);
  line-height: 1.3;
}
.creative-btn-desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--pb-text-muted);
  line-height: 1.4;
  margin-top: 2px;
  transition: color 0.15s;
}
.creative-mode-btn:hover .creative-btn-desc {
  color: rgba(151, 151, 151, 0.85);
}
.creative-mode-btn.active .creative-btn-desc {
  color: var(--pb-text-muted);
}
.creative-mode-btn--trial-exhausted .creative-btn-desc {
  opacity: 0.4;
}

/* ── AI Creative Mood Cards — image-led premium cards ───────── */
.creative-mood-cards {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
.creative-mood-card {
  position: relative;
  overflow: hidden;
  height: 130px;
  border-radius: 10px;
  border: 1.5px solid rgba(100,130,170,0.18);
  background: rgba(20,24,32,0.70);
  width: 100%;
  cursor: pointer;
  display: block;
  text-align: left;
  padding: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.creative-mood-card:hover:not([aria-pressed="true"]) {
  border-color: rgba(140,170,210,0.35);
}
.creative-mood-card[aria-pressed="true"] {
  border-color: rgba(52,198,244,0.55);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.12), 0 2px 16px rgba(52,198,244,0.14);
}
.creative-mood-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}
.creative-mood-card[aria-pressed="true"]::after {
  background: linear-gradient(to bottom, rgba(0,20,40,0.10) 0%, rgba(0,20,40,0.22) 45%, rgba(0,20,40,0.76) 100%);
}
.creative-mood-card-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.creative-mood-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.26s ease;
}
.creative-mood-card:hover .creative-mood-card-photo img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .creative-mood-card:hover .creative-mood-card-photo img { transform: none; }
}
.creative-mood-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.creative-mood-card-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(245,245,247,0.97);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 5px rgba(0,0,0,0.60);
}
.creative-mood-card-desc {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: rgba(210,225,240,0.70);
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.creative-mood-card:hover:not([aria-pressed="true"]) .creative-mood-card-title {
  color: rgba(255,255,255,1);
}
.creative-mood-card:hover:not([aria-pressed="true"]) .creative-mood-card-desc {
  color: rgba(220,235,250,0.82);
}
.creative-mood-card[aria-pressed="true"] .creative-mood-card-title {
  color: rgba(52,198,244,1);
  text-shadow: 0 1px 6px rgba(52,198,244,0.40), 0 1px 5px rgba(0,0,0,0.55);
}
.creative-mood-card[aria-pressed="true"] .creative-mood-card-desc {
  color: rgba(52,198,244,0.78);
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.creative-mood-card:focus-visible {
  outline: 2px solid rgba(52,198,244,0.82);
  outline-offset: 2px;
}

/* ── Right-panel OC mode hint ──────────────────────────────── */
.creative-oc-hint {
  margin: 6px 0 8px;
  font-size: 11.5px;
  color: rgba(245,245,247,0.40);
  line-height: 1.5;
}

/* ── AI Interior Design panel ──────────────────────────────── */
.id-subtitle {
  margin: 0 0 12px;
  font-size: 11.5px;
  color: rgba(245,245,247,0.45);
  line-height: 1.5;
}
.id-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.id-control-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.id-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pb-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  display: block;
  margin-bottom: 6px;
}
.id-label-hint {
  font-size: 10.5px;
  color: rgba(245,245,247,0.35);
  margin: 2px 0 5px;
  line-height: 1.35;
}
.id-select {
  width: 100%;
  padding: 7px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(245,245,247,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.id-select:focus {
  border-color: rgba(52,198,244,0.45);
}
.id-select option {
  background: #0f1825;
  color: var(--text);
}
.id-arch-lock-notice {
  margin: 8px 0 10px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(52,198,244,0.06);
  border: 1px solid rgba(52,198,244,0.18);
  font-size: 11px;
  color: rgba(52,198,244,0.75);
  line-height: 1.55;
}
.id-plan-lock {
  margin: 6px 0 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.22);
  font-size: 11.5px;
  color: rgba(245,190,60,0.85);
  line-height: 1.5;
}
.id-plan-lock.hidden { display: none; }
.id-generate-btn {
  width: 100%;
  padding: 10px 16px;
  margin-top: 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(52,198,244,0.80), rgba(88,120,255,0.80));
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
}
.id-generate-btn:hover:not(:disabled) { opacity: 0.88; }
.id-generate-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.id-placeholder-msg {
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  color: rgba(245,245,247,0.60);
  line-height: 1.5;
}
.id-placeholder-msg.hidden { display: none; }

/* ─── Dimension mode segmented control ─────────────────────────────────────── */
.id-dim-hint {
  margin: 2px 0 6px;
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  line-height: 1.5;
}
.id-dim-mode {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  width: 100%;
}
.id-dim-mode-btn {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(245,245,247,0.50);
  font-size: 12px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  outline: none;
}
.id-dim-mode-btn + .id-dim-mode-btn {
  border-left: 1px solid rgba(255,255,255,0.10);
}
.id-dim-mode-btn--active {
  background: rgba(52,198,244,0.14);
  color: rgba(52,198,244,0.95);
  font-weight: 600;
}
.id-dim-mode-btn:hover:not(.id-dim-mode-btn--active) {
  background: rgba(255,255,255,0.05);
  color: rgba(245,245,247,0.75);
}
/* Dimension fields panel */
.id-dim-fields {
  margin-top: 8px;
  padding: 10px 11px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
}
.id-dim-fields.hidden { display: none; }
.id-dim-fields-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.id-dim-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.id-dim-field--unit { flex: 0 0 58px; }
.id-dim-field-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(245,245,247,0.50);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.id-dim-input {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font);
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.id-dim-input::-webkit-outer-spin-button,
.id-dim-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.id-dim-input:focus { border-color: rgba(52,198,244,0.45); }
.id-dim-input::placeholder { color: rgba(245,245,247,0.22); }
.id-dim-select {
  width: 100%;
  padding: 6px 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: var(--text);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(245,245,247,0.4)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  box-sizing: border-box;
}
.id-dim-select:focus { border-color: rgba(52,198,244,0.45); }
.id-dim-select option { background: #0f1825; color: var(--text); }
/* More details collapsed area */
.id-dim-more {
  margin-top: 9px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 8px;
}
.id-dim-more-summary {
  font-size: 11px;
  font-weight: 600;
  color: rgba(245,245,247,0.40);
  cursor: pointer;
  letter-spacing: 0.04em;
  list-style: none;
  user-select: none;
  padding: 2px 0;
}
.id-dim-more-summary::-webkit-details-marker { display: none; }
.id-dim-more-summary::before {
  content: '+ ';
  font-size: 11px;
  color: rgba(52,198,244,0.55);
}
details.id-dim-more[open] .id-dim-more-summary::before { content: '− '; }
.id-dim-more-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.id-dim-more-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.id-dim-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(245,245,247,0.55);
  cursor: pointer;
}
.id-dim-checkbox-label input[type="checkbox"] {
  accent-color: rgba(52,198,244,0.9);
  width: 13px;
  height: 13px;
  cursor: pointer;
}

/* Dev-only result area */
.id-dev-result {
  margin-top: 10px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(52,198,244,0.22);
  background: rgba(52,198,244,0.03);
}
.id-dev-result.hidden { display: none; }
.id-dev-result-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 220px;
  object-fit: cover;
}
.id-dev-result-actions {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid rgba(52,198,244,0.12);
}
.id-dev-result-open {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,165,0,0.85);
  text-decoration: none;
  letter-spacing: 0.01em;
  opacity: 0.9;
  transition: opacity 0.15s;
}
.id-dev-result-open:hover { opacity: 1; text-decoration: underline; }

/* Style guide */
.id-style-guide-header { margin: 12px 0 4px; }
.id-style-guide-hint {
  margin: 0 0 10px;
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  line-height: 1.5;
}

/* Selected style hero preview */
.id-style-hero {
  position: relative;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1.5px solid rgba(52,198,244,0.25);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.08), 0 4px 20px rgba(0,0,0,0.38);
}
.id-style-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.id-style-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
}
.id-style-hero-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 2px;
}
.id-style-hero-desc {
  font-size: 10px;
  color: rgba(255,255,255,0.68);
  line-height: 1.45;
  margin-bottom: 4px;
}
.id-style-hero-best-for {
  font-size: 10px;
  color: rgba(255,255,255,0.48);
  line-height: 1.4;
}
.id-style-hero-best-for-label {
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(52,198,244,0.80);
  margin-right: 3px;
}

/* Compact 2-column style picker */
.id-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 8px;
}
.id-style-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  font-family: var(--font);
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
}
.id-style-card:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 3px 12px rgba(0,0,0,0.30);
  transform: translateY(-1px);
}
.id-style-card.active {
  border-color: rgba(52,198,244,0.60);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.18), 0 3px 16px rgba(52,198,244,0.12);
}

/* Preview gradient area — taller for more visual impact */
.id-style-preview {
  position: relative;
  height: 68px;
  overflow: hidden;
  flex-shrink: 0;
}
/* Diagonal texture overlay for CSS-only placeholder richness */
.id-style-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.00) 0,
    rgba(255,255,255,0.00) 3px,
    rgba(255,255,255,0.015) 3px,
    rgba(255,255,255,0.015) 6px
  );
  pointer-events: none;
  z-index: 1;
}
/* Bottom gradient fade to blend into card body */
.id-style-preview::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.40));
  z-index: 2;
  pointer-events: none;
}
.id-style-preview-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.72;
  z-index: 3;
}
.id-style-preview-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
  z-index: 0;
}
/* Color palette swatches */
.id-style-preview-swatches {
  position: absolute;
  bottom: 7px;
  right: 8px;
  display: flex;
  gap: 3px;
  z-index: 4;
}
.id-style-preview-swatch {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
}

/* Card body (kept for backward-compat; compact cards append name directly) */
.id-style-card-body {
  padding: 7px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.id-style-card-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  padding: 5px 7px 6px;
}
.id-style-card.active .id-style-card-name { color: var(--accent); }
.id-style-card-desc {
  font-size: 11px;
  color: rgba(245,245,247,0.52);
  line-height: 1.5;
}
.id-style-card-best-for {
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  line-height: 1.45;
  margin-top: 2px;
}
.id-style-best-for-label {
  font-weight: 700;
  font-size: 9px;
  color: rgba(245,245,247,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Selected style summary */
.id-style-summary {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(52,198,244,0.04);
  border: 1px solid rgba(52,198,244,0.12);
}
.id-style-summary-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(52,198,244,0.55);
  margin-bottom: 2px;
}
.id-style-summary-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.id-style-summary-desc {
  font-size: 11px;
  color: rgba(245,245,247,0.48);
  line-height: 1.5;
  margin: 0;
}
.id-style-summary-best-for-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(52,198,244,0.45);
  margin-top: 7px;
  margin-bottom: 2px;
}
.id-style-summary-best-for {
  font-size: 11px;
  color: rgba(245,245,247,0.45);
  line-height: 1.5;
  margin: 0;
}

/* Guidance block */
.id-guidance-block {
  margin: 8px 0 10px;
  padding: 10px 11px;
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
}
.id-guidance-title {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(245,245,247,0.60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 7px;
}
.id-guidance-can,
.id-guidance-cannot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.5;
}
.id-guidance-can  { color: rgba(90,210,130,0.75); margin-bottom: 5px; }
.id-guidance-cannot { color: rgba(245,245,247,0.43); }
.id-guidance-icon {
  flex-shrink: 0;
  font-size: 10px;
  margin-top: 2px;
  font-style: normal;
}

/* Mobile: ensure no horizontal overflow and compact card images are visible */
@media (max-width: 767px) {
  .id-style-grid { overflow-x: hidden; }
  .id-style-preview { display: block; position: relative; }
  .id-style-preview-img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    z-index: 0;
  }
}

/* Premium Download Design Preview button */
.btn-id-dl-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(10,18,30,0.65);
  border: 1px solid rgba(52,198,244,0.28);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.btn-id-dl-primary:hover {
  background: rgba(52,198,244,0.07);
  border-color: rgba(52,198,244,0.52);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.12), 0 4px 14px rgba(52,198,244,0.08);
}
.btn-id-dl-primary.hidden { display: none; }
.btn-id-dl-icon {
  font-size: 20px;
  color: rgba(52,198,244,0.85);
  flex-shrink: 0;
  line-height: 1;
  font-weight: 300;
}
.btn-id-dl-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.btn-id-dl-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.btn-id-dl-hint {
  font-size: 10.5px;
  color: rgba(245,245,247,0.40);
  line-height: 1.45;
}

/* Design goal visual cards */
/* ── Design Goal cards (premium numbered compact) ── */
/* ── Design Goal cards — premium photo-card layout ─────────────── */
.id-goal-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.id-goal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  border: 1.5px solid rgba(120,150,190,0.14);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.id-goal-card:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
}
.id-goal-card--active,
.id-goal-card[aria-pressed="true"] {
  border-color: rgba(52,198,244,0.62);
  background: rgba(52,198,244,0.05);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.14), 0 0 14px rgba(52,198,244,0.07);
}
.id-goal-card:focus-visible {
  outline: 2px solid rgba(52,198,244,0.65);
  outline-offset: 2px;
}

/* Image area */
.id-goal-img-wrap {
  position: relative;
  width: 100%;
  height: 78px;
  overflow: hidden;
  flex-shrink: 0;
}
.id-goal-img-wrap--hidden { display: none; }
.id-goal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transition: transform 0.32s ease;
}
.id-goal-card:hover .id-goal-img { transform: scale(1.04); }
.id-goal-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12,15,22,0.06) 0%,
    rgba(12,15,22,0.38) 100%
  );
  pointer-events: none;
  transition: background 0.18s;
}
.id-goal-card--active .id-goal-img-overlay,
.id-goal-card[aria-pressed="true"] .id-goal-img-overlay {
  background: linear-gradient(
    to bottom,
    rgba(12,15,22,0.04) 0%,
    rgba(12,15,22,0.30) 55%,
    rgba(52,198,244,0.10) 100%
  );
}

/* Body: number badge + text */
.id-goal-body {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px 10px;
}
.id-goal-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: var(--font);
  flex-shrink: 0;
  padding-top: 1px;
  min-width: 20px;
  opacity: 0.90;
}
.id-goal-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(245,245,247,0.90);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.id-goal-card--active .id-goal-name,
.id-goal-card[aria-pressed="true"] .id-goal-name { color: rgba(245,245,247,0.98); }
.id-goal-desc {
  font-size: 10px;
  color: rgba(245,245,247,0.42);
  line-height: 1.4;
  margin-top: 2px;
  font-weight: 400;
}
.id-goal-label-col { display: flex; flex-direction: column; gap: 1px; flex: 1; }

/* ── Space Type chips ────────────────────────────────────────── */
.id-space-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.id-space-chip {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(238, 238, 238, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: var(--pb-text-muted);
  font-size: 11.5px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.id-space-chip:hover {
  border-color: var(--pb-blue-border);
  background: var(--pb-blue-soft);
  color: var(--pb-text);
}
.id-space-chip--active,
.id-space-chip[aria-pressed="true"] {
  border-color: var(--pb-blue-border);
  background: var(--pb-blue-soft);
  color: var(--pb-blue);
  font-weight: 600;
}
.id-space-chip:focus-visible { outline: 2px solid var(--pb-blue-border); outline-offset: 2px; }
.id-space-more { margin-top: 6px; width: 100%; }
.id-space-more.hidden { display: none; }

/* ── Furnishing Level visual cards ───────────────────────────── */
/* ── Furnishing Level — premium staging density selector ─────── */
.id-staging-density {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}
.id-density-seg {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 9px;
  border-radius: 10px;
  border: 1.5px solid rgba(120,150,190,0.16);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  text-align: center;
  font-family: var(--font);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.id-density-seg:hover {
  border-color: rgba(52,198,244,0.30);
  background: rgba(52,198,244,0.04);
}
.id-density-seg--active,
.id-density-seg[aria-pressed="true"] {
  border-color: rgba(52,198,244,0.60);
  background: rgba(52,198,244,0.08);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.12);
}
.id-density-seg:focus-visible { outline: 2px solid rgba(52,198,244,0.65); outline-offset: 2px; }

/* Density visualization — top-down room floor-plan silhouette */
.id-density-room {
  display: block;
  position: relative;
  width: 40px;
  height: 32px;
  border: 1.5px solid rgba(180,200,225,0.35);
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.id-density-room span {
  position: absolute;
  background: rgba(180,200,225,0.38);
  border-radius: 1.5px;
  transition: background 0.15s;
}
/* Sofa — wide piece along bottom edge */
.id-fp-sofa  { width: 20px; height: 7px; bottom: 4px; left: 50%; transform: translateX(-50%); border-radius: 2px; }
/* Coffee table — small oval in center */
.id-fp-table { width: 8px; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 3px; }
/* Side chairs — flanking the center */
.id-fp-chair-l { width: 6px; height: 6px; top: 50%; left: 5px; transform: translateY(-50%); }
.id-fp-chair-r { width: 6px; height: 6px; top: 50%; right: 5px; transform: translateY(-50%); }
/* Side tables / accent pieces — top corners */
.id-fp-side-l  { width: 5px; height: 5px; top: 4px; left: 4px; }
.id-fp-side-r  { width: 5px; height: 5px; top: 4px; right: 4px; }
/* Stool for Light option — single accent near sofa */
.id-fp-stool   { width: 5px; height: 5px; bottom: 6px; right: 7px; border-radius: 50%; }

.id-density-seg--active .id-density-room,
.id-density-seg[aria-pressed="true"] .id-density-room {
  border-color: rgba(52,198,244,0.50);
  background: rgba(52,198,244,0.04);
}
.id-density-seg--active .id-density-room span,
.id-density-seg[aria-pressed="true"] .id-density-room span {
  background: rgba(52,198,244,0.68);
}

.id-density-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(245,245,247,0.80);
  letter-spacing: 0.01em;
}
.id-density-seg--active .id-density-name,
.id-density-seg[aria-pressed="true"] .id-density-name { color: rgba(52,198,244,0.97); }
.id-density-desc {
  font-size: 9.5px;
  color: rgba(245,245,247,0.36);
  line-height: 1.3;
}

/* ── Color Mood — professional interior palette picker ────────── */
.id-palette-picker {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  flex-wrap: nowrap;
}
.id-palette-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 7px;
  border-radius: 10px;
  border: 1.5px solid rgba(120,150,190,0.16);
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  font-family: var(--font);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.id-palette-chip:hover {
  border-color: rgba(52,198,244,0.30);
  background: rgba(52,198,244,0.04);
}
.id-palette-chip--active,
.id-palette-chip[aria-pressed="true"] {
  border-color: rgba(52,198,244,0.60);
  background: rgba(52,198,244,0.07);
  box-shadow: 0 0 0 1px rgba(52,198,244,0.12);
}
.id-palette-chip:focus-visible { outline: 2px solid rgba(52,198,244,0.65); outline-offset: 2px; }

/* 5-swatch material strip */
.id-palette-swatches {
  display: flex;
  gap: 1.5px;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 16px;
  flex-shrink: 0;
}
.id-palette-swatches span {
  flex: 1;
  display: block;
}
.id-palette-name {
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(245,245,247,0.55);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.id-palette-chip--active .id-palette-name,
.id-palette-chip[aria-pressed="true"] .id-palette-name { color: rgba(52,198,244,0.95); }


/* ── AI Interior Design: Spatial Fit badge ──────────────────── */
.id-spatial-fit {
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  line-height: 1.5;
}
.id-spatial-fit-status {
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.id-spatial-fit-message {
  margin: 0;
  color: rgba(245,245,247,0.60);
  font-size: 11px;
}

.id-spatial-fit--pass {
  border-color: rgba(55,201,135,0.30);
  background: rgba(55,201,135,0.06);
}
.id-spatial-fit--pass .id-spatial-fit-status {
  color: var(--success, #37C987);
}

.id-spatial-fit--conflict {
  border-color: rgba(232,184,75,0.40);
  background: rgba(232,184,75,0.07);
}
.id-spatial-fit--conflict .id-spatial-fit-status {
  color: var(--warn, #E8B84B);
}

.id-spatial-fit--warning {
  border-color: rgba(232,184,75,0.25);
  background: rgba(232,184,75,0.05);
}
.id-spatial-fit--warning .id-spatial-fit-status {
  color: var(--warn, #E8B84B);
}

.id-spatial-fit--fail {
  border-color: rgba(184,90,90,0.30);
  background: rgba(184,90,90,0.06);
}
.id-spatial-fit--fail .id-spatial-fit-status {
  color: var(--error, #B85A5A);
}

.id-spatial-fit--unknown {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.id-spatial-fit--unknown .id-spatial-fit-status {
  color: rgba(245,245,247,0.45);
}

/* ── AI Interior Design — identity label in result area ──────────────────── */
.id-concept-identity {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(52,198,244,0.15);
}
.id-concept-identity-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(52,198,244,0.85);
}
.id-concept-identity-sep {
  color: rgba(245,245,247,0.25);
  font-size: 11px;
}
.id-concept-identity-type {
  font-size: 10px;
  color: rgba(245,245,247,0.50);
  letter-spacing: 0.04em;
}

/* ── AI Interior Design — dimension conflict disclaimer ───────────────────── */
.id-conflict-disclaimer {
  padding: 7px 10px;
  font-size: 11px;
  color: rgba(232,184,75,0.90);
  background: rgba(232,184,75,0.08);
  border-bottom: 1px solid rgba(232,184,75,0.20);
  line-height: 1.5;
}
.id-conflict-disclaimer.hidden { display: none; }

/* ── AI Interior Design — save concept button ────────────────────────────── */
.btn-id-save-concept {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: rgba(52,198,244,0.08);
  border: 1.5px solid rgba(52,198,244,0.30);
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: background 0.18s, border-color 0.18s;
  margin-top: 8px;
}
.btn-id-save-concept:hover:not(:disabled) {
  background: rgba(52,198,244,0.14);
  border-color: rgba(52,198,244,0.50);
}
.btn-id-save-concept:disabled {
  opacity: 0.55;
  cursor: default;
}
.btn-id-save-concept.hidden { display: none; }
.btn-id-save-icon {
  font-size: 16px;
  color: rgba(52,198,244,0.75);
  flex-shrink: 0;
}
.btn-id-save-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.btn-id-save-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.btn-id-save-hint {
  font-size: 10.5px;
  color: rgba(245,245,247,0.40);
  line-height: 1.45;
}

/* ── My Listings — AI Interior Design concepts section ───────────────────── */
.idc-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(52,198,244,0.12);
}
.idc-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
}
.idc-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(52,198,244,0.80);
}
.idc-section-badge {
  font-size: 10px;
  font-weight: 600;
  background: rgba(52,198,244,0.12);
  color: rgba(52,198,244,0.70);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
}
.idc-section-sub {
  font-size: 10.5px;
  color: rgba(245,245,247,0.35);
  margin: 0 0 10px;
  line-height: 1.4;
}
.idc-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.idc-card {
  display: flex;
  gap: 10px;
  background: rgba(52,198,244,0.04);
  border: 1px solid rgba(52,198,244,0.14);
  border-radius: 10px;
  overflow: hidden;
  padding: 8px;
  align-items: flex-start;
}
.idc-thumb-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.idc-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.idc-thumb--error {
  opacity: 0.25;
}
.idc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idc-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.idc-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.idc-conflict-badge {
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(232,184,75,0.90);
  background: rgba(232,184,75,0.12);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.idc-spatial-badge {
  font-size: 9.5px;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  color: rgba(245,245,247,0.55);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
}
.idc-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 10.5px;
  color: rgba(245,245,247,0.38);
}
.idc-dot { opacity: 0.5; }
.idc-params { color: rgba(245,245,247,0.45); }
.idc-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}
.idc-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-family: var(--font);
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.idc-btn:hover { background: rgba(255,255,255,0.11); }
.idc-del-btn {
  display: flex;
  align-items: center;
  padding: 3px 6px;
  font-size: 10px;
  background: none;
  border: none;
  color: rgba(245,245,247,0.35);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.idc-del-btn:hover { color: rgba(255,90,90,0.85); background: rgba(255,90,90,0.08); }
.idc-conflict-note {
  font-size: 10px;
  color: rgba(232,184,75,0.70);
  line-height: 1.4;
  margin-top: 2px;
}

.mode-card--locked {
  position: relative;
  opacity: 0.65;
}
.mode-card--locked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}

/* ── OC preset chips / category tabs ──────────────────────── */
.oc-step-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(245,245,247,0.45);
  line-height: 1.5;
}
.oc-presets-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oc-presets-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-presets-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.28);
}
.oc-presets-clear {
  font-size: 11px;
  font-weight: 500;
  color: rgba(245,245,247,0.35);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.15s;
}
.oc-presets-clear:hover { color: rgba(245,245,247,0.70); }

/* Category tab bar */
.oc-cat-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 1px;
  flex-shrink: 0;
}
.oc-cat-tabs::-webkit-scrollbar { display: none; }
.oc-cat-tab {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(245,245,247,0.45);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.oc-cat-tab:hover {
  color: rgba(245,245,247,0.75);
  background: rgba(255,255,255,0.09);
}
.oc-cat-tab.active {
  background: rgba(52,198,244,0.10);
  border-color: rgba(52,198,244,0.30);
  color: var(--accent);
}
.oc-tab-badge {
  display: none;
  margin-left: 5px;
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #07162a;
  border-radius: 8px;
  padding: 1px 5px;
  vertical-align: middle;
  line-height: 1.4;
}
.oc-cat-panels { display: block; }
.oc-cat-panel  { display: block; }
.oc-cat-panel.hidden { display: none; }

/* Chip grid */
.oc-presets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 4px;
}
.oc-preset-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(245,245,247,0.60);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.oc-preset-chip:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(245,245,247,0.85);
}
.oc-preset-chip.active {
  background: rgba(52,198,244,0.10);
  border-color: rgba(52,198,244,0.40);
  color: var(--accent);
}

/* ── Watermark ownership confirmation ──────────────────────── */
.oc-wm-confirm-row {
  margin-top: 8px;
  padding: 9px 11px;
  background: rgba(255,210,0,0.03);
  border: 1px solid rgba(255,210,0,0.14);
  border-radius: 8px;
}
.oc-wm-confirm-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: rgba(245,245,247,0.55);
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}
.oc-wm-confirm-label input[type="checkbox"] {
  flex-shrink: 0;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Mask toolbar connected styling ───────────────────────── */
.mask-toolbar {
  border-color: rgba(52,198,244,0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 0 1px rgba(52,198,244,0.06);
}

/* ══════════════════════════════════════════════════════════════
   FILM STRIP — collapsed (56px) / expanded (196px) states
   ══════════════════════════════════════════════════════════════ */

/* Collapsed film strip — desktop only */
@media (min-width: 768px) {
  .sidebar:not(.expanded) .sidebar-toolbar {
    padding: 8px 0;
    justify-content: center;
    border-bottom: 1px solid var(--border);
  }
  .sidebar:not(.expanded) .sidebar-toolbar-title { display: none; }
  .sidebar:not(.expanded) .sidebar-drop-zone { display: none; }
  .sidebar:not(.expanded) .qi {
    padding: 6px 0;
    justify-content: center;
    gap: 0;
  }
  .sidebar:not(.expanded) .qi-thumb { width: 40px; height: 30px; }
  .sidebar:not(.expanded) .qi-meta { display: none; }
  .sidebar:not(.expanded) .qi-remove { display: none; }
  .sidebar:not(.expanded) .qi-geo { display: none; }
  .sidebar:not(.expanded) .sidebar-footer { display: none; }
  .sidebar:not(.expanded) #btn-add-more { font-size: 16px; padding: 4px; }
}

/* ══════════════════════════════════════════════════════════════
   STAGE GHOST ACTIONS — overlay buttons on image hover
   ══════════════════════════════════════════════════════════════ */

.stage-ghost-actions {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 15;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.compare-wrap:hover .stage-ghost-actions {
  opacity: 1;
  pointer-events: auto;
}
/* Hide ghost actions unless image is loaded */
.stage-ghost-actions.ghost-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.ghost-action-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(8,8,13,0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,0.80);
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ghost-action-btn:hover {
  background: rgba(255,255,255,0.14);
  color: white;
  transform: scale(1.06);
}
.ghost-action-btn:active { transform: scale(0.94); }
.ghost-action-btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════
   MONOSPACE DATA TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */

.ildr-pct {
  font-family: var(--font-mono);
}
.rp-filename-compact {
  font-family: var(--font-mono);
}
.rp-meta-row .v {
  font-family: var(--font-mono);
  font-size: 11px;
}
.ildr-label {
  font-family: var(--font-mono);
}

/* ── Bottom-sheet drag handle ───────────────────────────── */
.sheet-handle {
  display: none; /* shown only on mobile via media query */
  flex-shrink: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: pan-y;
}
.sheet-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* ── Micro-interactions ─────────────────────────────────── */

/* Remove tap highlight on all interactive elements */
button, .qi, .mode-card, .sidebar-drop-zone {
  -webkit-tap-highlight-color: transparent;
}

/* Touch press: scale feedback (only on touch devices) */
@media (hover: none) {
  .btn-primary:active  { transform: scale(0.97) !important; transition: transform 0.08s ease; }
  .btn-secondary:active{ transform: scale(0.97) !important; transition: transform 0.08s ease; }
  .btn-ghost:active    { transform: scale(0.96) !important; transition: transform 0.08s ease; }
  .qi:active           { background: rgba(255,255,255,0.08) !important; }
  .mode-card:active:not(.disabled) { transform: scale(0.99); }
  .qi-dl:active        { transform: scale(0.88); }
}

/* Desktop: smooth hover lift on cards */
@media (hover: hover) {
  .mode-card:hover:not(.disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.28);
    transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
  }
  .mode-card { transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease),
                           border-color 0.15s, background 0.15s; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE LAYOUT
   Desktop ≥ 1200px | Tablet 768–1199px | Mobile ≤ 767px
   ══════════════════════════════════════════════════════════ */

/* ── Drawer infrastructure (hidden on desktop) ─────────── */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 18px;
  padding: 0;
  flex-shrink: 0;
  color: var(--text-sec);
  border-radius: var(--radius-sm);
}
.nav-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 98;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0s 0.28s;
}
.nav-backdrop.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.28s ease, visibility 0s 0s;
}

/* ── Tablet (768px – 1199px) ────────────────────────────── */
@media (max-width: 1199px) {
  :root {
    --right-w: 240px;
  }
  .workspace {
    grid-template-columns: var(--sidebar-w) 1fr var(--right-w);
  }
  .qi-name        { max-width: 90px; }
  .rp-section     { padding: 12px 14px; }
  .rp-primary     { padding: 14px 14px 20px; }
  .rp-btn-main    { font-size: 12px; padding: 10px 14px; }
  .btn-enhance-lg { font-size: 13px; padding: 11px 22px; }
}

/* ── Object Cleanup Command Panel ──────────────────────────────────────────── */

.oc-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 92vw);
  min-width: 520px;
  min-height: 480px;
  max-height: calc(100vh - 40px);
  background: rgba(4,10,22,0.94);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(0,200,255,0.06);
  z-index: 200;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.oc-panel.hidden    { display: none; }
.oc-panel.minimized .oc-panel-body    { display: none; }
.oc-panel.minimized .oc-resize-handle { display: none; }

.oc-panel-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
}
.oc-panel-header:active { cursor: grabbing; }

.oc-panel-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oc-panel-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(245,245,247,0.96);
  line-height: 1.2;
}

.oc-panel-subtitle {
  font-size: 11px;
  font-weight: 400;
  color: rgba(245,245,247,0.38);
  letter-spacing: 0.01em;
}

.oc-panel-controls { display: flex; gap: 6px; }

.oc-ctrl-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,245,247,0.55);
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.oc-ctrl-btn:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.oc-panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* ── Three-column body layout ───────────────────────────────────────────────── */
.oc-panel-columns {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* LEFT: category navigation rail */
.oc-col-nav {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 6px 12px 8px;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.oc-col-nav::-webkit-scrollbar       { width: 3px; }
.oc-col-nav::-webkit-scrollbar-track { background: transparent; }
.oc-col-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Navigation items — rectangular, clearly distinct from chips */
#oc-nav-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oc-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px 8px 10px;
  border-radius: 7px;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  color: rgba(245,245,247,0.50);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  gap: 6px;
}
.oc-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(245,245,247,0.84);
}
.oc-nav-item.active {
  background: rgba(0,200,255,0.10);
  color: rgba(245,245,247,0.97);
  border-left-color: rgba(0,200,255,0.72);
  font-weight: 600;
}
.oc-nav-label {
  flex: 1;
  text-align: left;
}
.oc-nav-item .oc-tab-badge {
  background: rgba(0,200,255,0.85);
  color: rgba(255,255,255,0.96);
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.6;
  flex-shrink: 0;
}

/* MIDDLE: chip grid for active category */
.oc-col-chips {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 14px 14px;
  border-right: 1px solid rgba(255,255,255,0.07);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.oc-col-chips::-webkit-scrollbar       { width: 3px; }
.oc-col-chips::-webkit-scrollbar-track { background: transparent; }
.oc-col-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* RIGHT: selected chips + generated instruction + textarea */
.oc-col-right {
  flex: 0 0 270px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 14px 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.oc-col-right::-webkit-scrollbar       { width: 3px; }
.oc-col-right::-webkit-scrollbar-track { background: transparent; }
.oc-col-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Section headings inside columns */
.oc-col-hdr {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.38);
  margin-bottom: 8px;
}
.oc-col-hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.oc-col-hdr-row .oc-col-hdr { margin-bottom: 0; }

/* ── Selected targets area ──────────────────────────────────────────────────── */
.oc-selected-section { flex: 0 0 auto; }

.oc-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 26px;
}

.oc-selected-empty {
  font-size: 11px;
  color: rgba(245,245,247,0.25);
  font-style: italic;
  padding: 2px 0;
}
.oc-selected-empty.hidden { display: none; }

.oc-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0,200,255,0.12);
  border: 1px solid rgba(0,200,255,0.25);
  color: rgba(245,245,247,0.88);
  border-radius: 20px;
  padding: 3px 6px 3px 9px;
  font-size: 11px;
  line-height: 1.4;
}
.oc-selected-chip-remove {
  background: none;
  border: none;
  color: rgba(245,245,247,0.38);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.oc-selected-chip-remove:hover {
  color: rgba(245,245,247,0.90);
  background: rgba(255,255,255,0.10);
}

/* ── Generated instruction preview ─────────────────────────────────────────── */
.oc-generated-section { flex: 0 0 auto; }

.oc-generated-preview {
  background: rgba(0,200,255,0.04);
  border: 1px solid rgba(0,200,255,0.10);
  border-radius: 8px;
  padding: 9px 11px;
  min-height: 54px;
  max-height: 120px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.oc-generated-preview::-webkit-scrollbar       { width: 3px; }
.oc-generated-preview::-webkit-scrollbar-track { background: transparent; }
.oc-generated-preview::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.oc-gen-line {
  margin: 0;
  font-size: 11px;
  color: rgba(245,245,247,0.72);
  line-height: 1.65;
}
.oc-gen-line + .oc-gen-line { margin-top: 2px; }

.oc-generated-placeholder {
  font-size: 11px;
  color: rgba(245,245,247,0.25);
  font-style: italic;
}
.oc-generated-placeholder--custom {
  color: rgba(0,200,255,0.55);
  font-style: normal;
  font-weight: 500;
}

.oc-regen-btn {
  background: none;
  border: none;
  color: rgba(0,200,255,0.55);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0;
  transition: color 0.12s;
  white-space: nowrap;
}
.oc-regen-btn:hover { color: rgba(0,200,255,0.90); }

/* ── Additional instruction area ────────────────────────────────────────────── */
.oc-additional-section {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Panel footer (sticky action bar) ──────────────────────────────────────── */
.oc-panel-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(4,10,22,0.30);
}

/* Legacy — kept so any remaining selectors don't error */
.oc-panel-scroll { display: contents; }
.oc-panel-bottom { display: contents; }

.oc-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(245,245,247,0.45);
  line-height: 1.5;
}

.oc-large-item-warning {
  margin: 6px 0 4px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,190,0,0.08);
  border: 1px solid rgba(255,190,0,0.20);
  font-size: 12px;
  color: rgba(255,200,60,0.85);
  line-height: 1.5;
}
.oc-large-item-warning.hidden { display: none; }

.oc-custom-hint {
  margin: 0;
  font-size: 11px;
  color: rgba(245,245,247,0.35);
  line-height: 1.45;
  font-style: italic;
}

.oc-validation-hint {
  margin: 0;
  padding: 6px 10px;
  border-radius: 7px;
  background: rgba(255,190,0,0.06);
  border: 1px solid rgba(255,190,0,0.16);
  font-size: 12px;
  color: rgba(255,200,60,0.75);
  line-height: 1.45;
}
.oc-validation-hint.hidden { display: none; }

.oc-noop-warning {
  margin: 6px 0 2px;
  padding: 8px 11px;
  border-radius: 8px;
  background: rgba(255,190,0,0.07);
  border: 1px solid rgba(255,190,0,0.18);
  font-size: 12px;
  color: rgba(255,200,60,0.80);
  line-height: 1.5;
}
.oc-noop-warning.hidden { display: none; }

.oc-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  padding: 11px 13px;
  resize: vertical;
  outline: none;
  line-height: 1.6;
  min-height: 130px;
  transition: border-color 0.15s, background 0.15s;
}
.oc-textarea:focus        { border-color: rgba(0,200,255,0.35); background: rgba(0,200,255,0.03); }
.oc-textarea::placeholder { color: rgba(245,245,247,0.22); }

.oc-textarea-hint {
  margin: 0;
  font-size: 11px;
  color: rgba(245,245,247,0.30);
  line-height: 1.5;
}

.oc-panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.oc-btn-cancel {
  padding: 9px 16px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,245,247,0.60);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.oc-btn-cancel:hover { background: rgba(255,255,255,0.11); color: rgba(245,245,247,0.80); }

.oc-btn-apply {
  padding: 9px 22px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,190,240,0.82), rgba(0,155,215,0.72));
  border: 1px solid rgba(0,200,255,0.42);
  color: rgba(255,255,255,0.96);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,180,240,0.22);
  transition: background 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.oc-btn-apply:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(0,210,255,0.90), rgba(0,175,235,0.82));
  box-shadow: 0 4px 18px rgba(0,200,255,0.35);
}
.oc-btn-apply:disabled { opacity: 0.28; cursor: default; }

.oc-resize-handle {
  position: absolute;
  bottom: 0; right: 0;
  width: 18px; height: 18px;
  cursor: se-resize;
}
.oc-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px; right: 4px;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,0.16);
  border-bottom: 2px solid rgba(255,255,255,0.16);
  border-radius: 1px;
}

/* ── OC Tag Section ─────────────────────────────────────────────────────────── */

.oc-tags-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oc-tags-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.oc-tags-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.45);
}

.oc-tags-clear {
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.oc-tags-clear:hover { color: rgba(245,245,247,0.75); }

/* Each room group */
.oc-tag-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oc-tag-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.oc-tag-group-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245,245,247,0.68);
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.oc-tag-group-name::before {
  content: '▸';
  font-size: 10px;
  transition: transform 0.15s;
  color: rgba(245,245,247,0.35);
}
.oc-tag-group.open .oc-tag-group-name::before { transform: rotate(90deg); }

.oc-tag-add-all {
  font-size: 11px;
  color: rgba(0,200,255,0.55);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: color 0.15s;
}
.oc-tag-add-all:hover { color: rgba(0,200,255,0.90); }

/* Pills row — wraps on desktop, scrolls on mobile */
.oc-tag-pills {
  display: none;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 4px;
}
.oc-tag-group.open .oc-tag-pills { display: flex; }

.oc-tag-pill {
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.4;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  color: rgba(245,245,247,0.58);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
  user-select: none;
}
.oc-tag-pill:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(245,245,247,0.82);
  border-color: rgba(255,255,255,0.20);
}
.oc-tag-pill.active {
  background: rgba(0,200,255,0.12);
  border-color: rgba(0,200,255,0.38);
  color: rgba(130,225,248,0.95);
}
.oc-tag-pill.active:hover {
  background: rgba(0,200,255,0.20);
  border-color: rgba(0,200,255,0.55);
}

.oc-tag-safety-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(245,200,100,0.55);
  line-height: 1.5;
  font-style: italic;
  display: none;
}
.oc-tag-group.open .oc-tag-safety-note { display: block; }

/* Ownership confirmation row — Logo/Watermark Removal category */
.oc-tag-confirm-row {
  display: none;
  align-items: flex-start;
  gap: 8px;
  margin: 7px 0 2px;
  padding: 8px 11px;
  border-radius: 6px;
  background: rgba(255,180,50,0.07);
  border: 1px solid rgba(255,180,50,0.22);
  cursor: pointer;
  font-size: 12px;
  color: rgba(245,245,247,0.72);
  line-height: 1.5;
  user-select: none;
}
.oc-tag-group.open .oc-tag-confirm-row { display: flex; }
.oc-tag-confirm-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: rgb(0,200,255);
  cursor: pointer;
  width: 14px;
  height: 14px;
}

/* Mobile: horizontal scroll per group */
@media (max-width: 767px) {
  .oc-tag-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .oc-tag-pills::-webkit-scrollbar { display: none; }
}

/* ── Mobile-only UI components (hidden on desktop) ─────── */
.mob-bar            { display: none; }
.mob-queue-strip    { display: none; }
.mob-settings-header { display: none; }
.mob-tab-bar        { display: none; }

/* ── Mobile (≤ 767px) ───────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --sidebar-w: min(280px, 83vw);
    --right-w:   min(300px, 90vw);
    --header-h:  44px;
  }

  /* Safe-area support (iOS notch / home bar) */
  html { padding-top: env(safe-area-inset-top); }

  /* ── CSS variables ── */
  :root {
    --mob-bar-h:      68px;
    --mob-deck-min-h: 140px;
  }

  /* ── Grid: header + center only. Deck is inside .ws-center. ── */
  .workspace {
    height: calc(100dvh - var(--mob-bar-h) - env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) 1fr;
    grid-template-areas:
      "header"
      "center";
  }

  /* ── Header ── */
  .ws-header {
    padding-left:  env(safe-area-inset-left);
    padding-right: calc(4px + env(safe-area-inset-right));
  }
  .ws-header-logo {
    width: auto;
    border-right: none;
    padding: 0 6px 0 8px;
    flex-shrink: 0;
  }
  .logo-icon {
    height: 26px;
    max-width: 140px;
  }
  .logo-badge {
    font-size: 8px;
    height: 14px;
    padding: 1px 6px;
    letter-spacing: 0.10em;
    top: -4px;
    right: 1px;
  }
  .ws-breadcrumb { display: none; }

  /* ── Show nav toggles — slim on mobile ── */
  .nav-toggle { display: inline-flex; min-width: 40px; min-height: 40px; font-size: 17px; }

  /* ── Left sidebar → fixed slide-in drawer ── */
  .sidebar {
    grid-area: unset;
    position: fixed;
    left: 0;
    top: var(--header-h);
    bottom: 0;
    width: var(--sidebar-w);
    z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-right: 1px solid var(--border-strong);
    padding-bottom: env(safe-area-inset-bottom);
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    will-change: transform;
    background: rgba(4,10,22,0.96);
  }
  .sidebar.drawer-open { transform: translateX(0); }

  /* Queue items: full detail inside drawer */
  .qi         { padding: 8px 12px 8px 14px; justify-content: flex-start; }
  .qi-meta    { display: flex; }
  .qi-remove  { display: flex; opacity: 0; }
  .qi:hover .qi-remove  { opacity: 1; }
  .qi-thumb   { width: 48px; height: 36px; }
  .qi-name    { max-width: 140px; font-size: 12px; }
  .sidebar-toolbar-title  { display: block; }
  .sidebar-drop-zone      { margin: 10px 10px 6px; padding: 10px; }
  .sidebar-drop-zone span { display: inline; }
  .sidebar-footer  { padding: 10px 12px; flex-direction: row; gap: 8px; }
  .queue-counter   { display: block; }

  /* ── Right panel → full-screen settings overlay ── */
  .right-panel {
    grid-area: unset;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 110;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    will-change: transform;
    background: var(--bg-elevated);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .right-panel.mob-settings-open {
    transform: translateX(0);
  }
  .sheet-handle { display: none; }

  /* Settings header */
  .mob-settings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 12px;
    padding-top: calc(14px + env(safe-area-inset-top));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: rgba(5, 10, 22, 0.97);
  }
  .mob-settings-back {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(245, 245, 247, 0.80);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-settings-back:active { background: rgba(255, 255, 255, 0.12); }
  .mob-settings-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
  }
  .mob-settings-title {
    font-size: 17px;
    font-weight: 700;
    color: rgba(245, 245, 247, 0.96);
    letter-spacing: -0.01em;
  }
  .mob-settings-sub {
    font-size: 11px;
    color: rgba(245, 245, 247, 0.38);
  }
  .mob-settings-gap { width: 44px; flex-shrink: 0; }

  /* Settings tab bar */
  .mob-tab-bar {
    display: flex;
    gap: 2px;
    padding: 10px 12px 0;
    flex-shrink: 0;
    background: rgba(5, 10, 22, 0.97);
    border-bottom: 1px solid var(--border);
  }
  .mob-tab {
    flex: 1;
    padding: 9px 6px 11px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: rgba(245, 245, 247, 0.42);
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-tab.active { color: var(--cyan); }
  .mob-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--cyan);
    border-radius: 2px 2px 0 0;
  }

  /* Bigger touch targets for settings controls */
  .rp-section        { padding: 16px 18px; }
  .mode-card         { padding: 14px 16px; }
  .mode-card-name    { font-size: 14px; }
  .mode-card-desc    { font-size: 13px; line-height: 1.5; }
  .fe-pill           { min-height: 48px; padding: 8px 0; font-size: 13px; }
  .fe-family-label   { font-size: 12px; }
  .creative-mode-btn { min-height: 52px; padding: 14px 16px; font-size: 14px; }

  /* ── Header: hide credit/plan badges — keep only avatar button ── */
  .auth-credit-badge { display: none !important; }
  .auth-plan-badge   { display: none !important; }

  /* ── Center ── */
  .ws-center {
    grid-area: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
    position: relative;   /* anchor for absolute-positioned deck overlay */
  }

  /* Image viewer fills the full center height — deck overlays from below. */
  .center-viewer {
    flex: 1 1 0;
    min-height: 100px;
    overflow: hidden;
  }

  /* Keep top-of-room visible above deck overlay */
  .compare-before,
  .compare-after {
    object-position: top center;
  }

  /* No-image-selected: top-align so queue strip anchors the layout */
  .center-no-selection {
    align-items: center;
    justify-content: flex-start;
    padding-top: 32px;
  }

  /* On mobile the bottom action bar owns the primary refine CTA.
     Hide the floating card entirely so there is no duplicate action. */
  #ov-ready { display: none !important; }

  /* On mobile, btn-id-generate-rp (bottom CTA) handles Generate Design Concept.
     Hide the inner Studio panel button to prevent a duplicate on mobile. */
  #id-generate-btn { display: none !important; }
  .ov-enhance-overlay { padding: 12px 18px; gap: 8px; }
  .ov-enhance-title   { font-size: 13px; }
  .ov-enhance-sub     { font-size: 11px; }

  /* During processing, collapse the command deck so the processing overlay fills
     the full center area — creates the cinematic full-screen effect on phone. */
  #mob-deck.mob-deck--processing {
    display: none !important;
  }

  /* Mobile processing overlay — premium card style */
  .ov-id-generating {
    max-width: calc(100vw - 32px);
    padding: 28px 22px 24px;
    border-radius: 20px;
    border: 1px solid rgba(0, 136, 204, 0.22);
    background: rgba(5, 9, 18, 0.94);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0,136,204,0.12);
  }

  /* ── Mobile bottom action bar ── */
  .mob-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: rgba(4,10,22,0.97);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border-top: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.45);
  }
  .mob-bar-side {
    flex: 0 0 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    border-radius: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(245,245,247,0.50);
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bar-side:active { background: rgba(255,255,255,0.07); color: var(--text); }
  .mob-bar-icon  { font-size: 18px; line-height: 1.1; display: block; }
  .mob-bar-label { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-top: 1px; }
  .mob-bar-cta {
    flex: 1;
    max-width: 65%;
    min-height: 50px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--ll-cyan), var(--ll-blue));
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 18px rgba(52,198,244,0.28);
    transition: box-shadow 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bar-cta:active  { transform: scale(0.97); }
  .mob-bar-cta:disabled { opacity: 0.26; cursor: not-allowed; transform: none; box-shadow: none; }
  .mob-bar-cta.cta-dl {
    background: linear-gradient(135deg, rgba(0,195,245,0.92), rgba(0,150,220,0.82));
    box-shadow: 0 3px 18px rgba(0,185,245,0.26);
  }

  /* ── Mobile horizontal queue strip ── */
  .mob-queue-strip {
    display: flex;
    flex-shrink: 0;
    height: 64px;
    align-items: center;
    background: rgba(5,10,22,0.92);
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
    gap: 6px;
    overflow: hidden;
  }
  .mob-queue-strip.hidden { display: none !important; }
  .mob-strip-list {
    display: flex;
    flex: 1;
    overflow-x: auto;
    gap: 6px;
    padding: 6px 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .mob-strip-list::-webkit-scrollbar { display: none; }
  .mob-strip-item {
    flex-shrink: 0;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 2px solid transparent;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mob-strip-item.active {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px var(--cyan);
  }
  .mob-strip-dot {
    position: absolute;
    bottom: 3px; right: 3px;
    width: 9px; height: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.55);
    pointer-events: none;
  }
  .mob-strip-item[data-status="done"]       .mob-strip-dot { background: var(--success); }
  .mob-strip-item[data-status="error"]      .mob-strip-dot { background: var(--error); }
  .mob-strip-item[data-status="processing"] .mob-strip-dot { background: transparent; border-color: var(--accent); animation: spin 1s linear infinite; }
  .mob-strip-item[data-status="uploaded"]   .mob-strip-dot { background: var(--accent); }
  .mob-strip-item[data-status="uploading"]  .mob-strip-dot { background: var(--text-dim); animation: pulse 1.2s ease infinite; }
  .mob-strip-add {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 9px;
    background: rgba(255,255,255,0.05);
    border: 1.5px dashed rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.55);
    font-size: 20px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-strip-add:active { background: rgba(255,255,255,0.10); }

  /* ── Top queue strip delete: two-tap confirm ── */
  .mob-strip-del {
    display: none; /* hidden by default; pending-delete state shows it */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(200,30,30,0.90);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-strip-item--pending-delete .mob-strip-del { display: flex; }
  .mob-strip-item--pending-delete .mob-strip-del::after { content: 'Delete'; }
  .mob-strip-item--pending-delete img,
  .mob-strip-item--pending-delete .mob-strip-dot { opacity: 0; }

  /* ── Touch-friendly tap targets ── */
  .btn-primary, .btn-secondary, .btn-ghost { min-height: 44px; }
  .rp-btn-main { min-height: 50px; font-size: 15px; padding: 13px 20px; }
  .rp-primary  { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .rp-primary-secondary .btn-secondary,
  .rp-primary-secondary .btn-ghost { min-height: 44px; }

  /* ── View switcher — bigger touch targets ── */
  .vs-btn { font-size: 12px; padding: 9px 16px; min-height: 40px; }

  /* ── Ghost actions — always visible on mobile, no hover needed ── */
  .compare-wrap .stage-ghost-actions { opacity: 1; pointer-events: auto; }
  .ghost-action-btn { width: 44px; height: 44px; font-size: 16px; }

  /* ── Action bar ── */
  .viewer-action-bar {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    padding: 8px 14px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .action-bar-filename { max-width: 120px; font-size: 11px; }
  .action-bar-sep      { display: none; }

  /* ── Loader ── */
  .ildr-hud      { width: clamp(180px, 80%, 300px); }
  .ildr-pct      { font-size: 38px; margin-bottom: 10px; }
  .ildr-bar-wrap { width: 120px; margin-bottom: 10px; }
  .ildr-label    { font-size: 10px; }

  /* ── Center drop zone ── */
  .center-empty { align-items: center; justify-content: flex-start; padding: 24px 16px; }
  .center-drop-zone { max-width: 100%; padding: 32px 20px; }
  .cz-title { font-size: 15px; }
  .cz-sub   { font-size: 12px; }

  /* ── Mask toolbar — bigger touch targets ── */
  .mask-toolbar      { padding: 7px 12px; gap: 8px; white-space: normal; }
  .mask-size-slider  { width: 60px; }
  .mask-mode-btn     { padding: 7px 13px; min-height: 38px; font-size: 12px; }
  .mask-toolbar-btn  { padding: 6px 10px; min-height: 38px; font-size: 12px; }

  /* ── Toast — offset above mobile bar ── */
  #toast-container {
    bottom: calc(68px + env(safe-area-inset-bottom));
    right: 12px;
    left: 12px;
    align-items: stretch;
  }
  .toast { min-width: 0; max-width: 100%; }

  /* ── Object Cleanup panel: full-height bottom sheet on mobile ── */
  .oc-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    min-width: unset;
    /* dvh = dynamic viewport height — shrinks when Safari browser chrome appears */
    max-height: calc(100dvh - env(safe-area-inset-top) - 20px);
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    z-index: 220; /* above mob-bar */
    display: flex;
    flex-direction: column;
  }
  /* Panel body scrolls internally — footer stays sticky at the bottom */
  .oc-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .oc-panel-columns {
    flex-direction: column;
    flex: 0 0 auto; /* don't stretch — let col-right grow naturally */
    overflow: visible;
  }
  /* Nav becomes a horizontal scroll strip on mobile */
  .oc-col-nav {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 10px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.015);
    max-height: unset;
    gap: 0;
  }
  #oc-nav-section {
    flex-direction: row;
    gap: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .oc-nav-item {
    flex: 0 0 auto;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    padding: 6px 12px;
    font-size: 12px;
  }
  .oc-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: rgba(0,200,255,0.72);
  }
  .oc-col-chips {
    flex: 0 0 auto;
    max-height: none; /* let it expand naturally — panel body scrolls */
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 10px 12px;
  }
  .oc-col-right {
    flex: 1 0 auto; /* grow to fill, don't clip */
    padding: 10px 12px 16px;
    min-height: 0;
  }
  /* Footer is sticky within the scrollable panel body */
  .oc-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: rgba(4,10,22,0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .oc-resize-handle { display: none; }
  .oc-panel-header  { cursor: default; }
  /* Bigger tag pills on mobile */
  .oc-tag-pills { flex-wrap: wrap !important; overflow-x: visible !important; padding-bottom: 4px; }
  .oc-tag-pill  { min-height: 44px; font-size: 13px; padding: 8px 16px; }
  #oc-btn-minimize { display: none; }
}

/* ── Extra-small phones (≤ 380px) ──────────────────────── */
@media (max-width: 380px) {
  .ildr-pct  { font-size: 32px; }
  .logo-name { font-size: 13px; }
  .rp-btn-main { font-size: 13px; }
}

/* ── Suppress drawer slide animation for reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .sidebar, .right-panel { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   VIEW MODE SWITCHER  —  Compare / Before / After
   ══════════════════════════════════════════════════════════════ */

.view-switcher {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex;
  gap: 2px;
  background: rgba(8,8,13,0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 3px;
  pointer-events: auto;
  white-space: nowrap;
}

.vs-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.50);
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  min-height: 0;
}
.vs-btn:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}
.vs-btn.vs-active {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.95);
}

/* ── Per-mode compare-wrap overrides ──────────────────────── */

/* Compare: normal drag cursor + split behavior (handled by existing CSS + JS) */
.compare-wrap.view-compare { cursor: col-resize; }

/* Before/After: no drag cursor */
.compare-wrap.view-before,
.compare-wrap.view-after   { cursor: default; }

/* After: enhanced image fills full width — no clip */
.compare-wrap.view-after .compare-after {
  clip-path: none !important;
}

/* Mobile: make tap targets large enough */
@media (max-width: 767px) {
  .vs-btn { padding: 7px 10px; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════
   BRANDING / WATERMARK
   ═══════════════════════════════════════════════════════════════ */

/* ── Upload zone ─────────────────────────────────────────────── */
.brand-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 14px 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: center;
  box-sizing: border-box;
  margin-top: 6px;
}
.brand-upload-zone:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.brand-uz-icon {
  font-size: 18px;
  color: var(--accent);
  line-height: 1;
}
.brand-uz-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.brand-uz-sub {
  font-size: 10px;
  color: var(--text-dim);
}

/* ── Logo preview row ────────────────────────────────────────── */
.brand-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.brand-logo-thumb {
  width: 44px;
  height: 28px;
  object-fit: contain;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.brand-logo-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brand-logo-row-name {
  font-size: 10px;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-logo-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--text-dim);
  padding: 0;
  text-align: left;
  transition: color 0.12s ease;
}
.brand-logo-remove-btn:hover { color: var(--error); }

/* ── Controls wrapper ────────────────────────────────────────── */
.brand-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* ── Position presets ────────────────────────────────────────── */
.brand-field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.brand-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brand-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  gap: 3px;
}
.brand-preset-btn {
  width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-sec);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.brand-preset-btn:hover {
  background: var(--card-hover);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.brand-preset-btn.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Sliders ─────────────────────────────────────────────────── */
.brand-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.brand-slider-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.brand-slider-label span { color: var(--text-sec); }
.brand-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.brand-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.brand-slider::-webkit-slider-thumb:hover { transform: scale(1.25); }
.brand-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* ── Action / download buttons ───────────────────────────────── */
.brand-btn-row {
  display: flex;
  gap: 6px;
}
.brand-btn {
  flex: 1;
  padding: 7px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.12s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  text-align: center;
}
.brand-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.brand-btn-primary {
  background: var(--accent-subtle);
  border-color: var(--accent-dim);
  color: var(--accent);
}
.brand-btn-primary:not(:disabled):hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}
.brand-btn-dl {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-sec);
}
.brand-btn-dl:not(:disabled):hover {
  background: var(--card-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

/* ── Overlay layer inside compare-wrap ───────────────────────── */
.brand-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
}
.brand-logo-wrap {
  position: absolute;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
}
.brand-logo-wrap:hover,
.brand-logo-wrap.dragging {
  outline: 1.5px dashed rgba(52, 198, 244, 0.55);
  outline-offset: 4px;
}
.brand-logo-wrap.dragging { cursor: grabbing; }
.brand-logo-overlay {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.brand-logo-resize-handle {
  position: absolute;
  bottom: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--bg);
  border-radius: 3px;
  cursor: se-resize;
  pointer-events: auto;
}
.brand-logo-resize-handle:hover {
  background: var(--accent-bright);
}

/* ══════════════════════════════════════════════════════════════
   MANUAL TRANSFORM PANEL
   Post-enhancement perspective / rotation / framing tool.
   No AI calls — CSS preview + OpenCV backend export.
   ══════════════════════════════════════════════════════════════ */

/* ── Panel container ────────────────────────────────────────── */
.mt-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  min-width: 320px;
  max-height: calc(100vh - 80px);
  background: rgba(4,10,22,0.96);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.70), 0 0 0 1px rgba(52,198,244,0.06);
  z-index: 210;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mt-panel.hidden { display: none; }

/* ── Header ─────────────────────────────────────────────────── */
.mt-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  user-select: none;
}
.mt-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mt-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(245,245,247,0.96);
  line-height: 1.2;
}
.mt-subtitle {
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  letter-spacing: 0.01em;
}
.mt-ctrl-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,245,247,0.55);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.mt-ctrl-btn:hover { background: rgba(255,255,255,0.13); color: var(--text); }

/* ── Scrollable body ─────────────────────────────────────────── */
.mt-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.mt-body::-webkit-scrollbar       { width: 4px; }
.mt-body::-webkit-scrollbar-track { background: transparent; }
.mt-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

/* ── Live preview area ──────────────────────────────────────── */
.mt-preview-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center;
  /* perspective is set inline via JS */
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* Grid SVG overlay — not exported */
.mt-grid-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.mt-grid-svg.hidden { display: none; }

/* ── Quick-action row ───────────────────────────────────────── */
.mt-quick-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mt-quick-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(245,245,247,0.60);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
  white-space: nowrap;
}
.mt-quick-btn:hover {
  background: rgba(255,255,255,0.11);
  color: var(--text);
}
.mt-quick-toggle[aria-pressed="true"] {
  background: rgba(52,198,244,0.13);
  border-color: rgba(52,198,244,0.40);
  color: var(--cyan);
}

/* ── Helper text ────────────────────────────────────────────── */
.mt-helper {
  font-size: 11px;
  color: rgba(245,245,247,0.35);
  line-height: 1.5;
}

/* ── Section label ──────────────────────────────────────────── */
.mt-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.28);
  margin-bottom: -4px;
}

/* ── Sliders ─────────────────────────────────────────────────── */
.mt-sliders {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-slider-row {
  display: grid;
  grid-template-columns: 76px 1fr 36px 22px;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.mt-slider-label {
  font-size: 12px;
  color: rgba(245,245,247,0.60);
  white-space: nowrap;
  cursor: default;
}
.mt-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  accent-color: var(--cyan);
}
.mt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(52,198,244,0.40);
  transition: transform 0.12s;
}
.mt-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
.mt-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--cyan);
  border: 2px solid var(--bg);
  cursor: grab;
}
.mt-slider-val {
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(245,245,247,0.55);
  text-align: right;
  white-space: nowrap;
}
.mt-slider-reset {
  font-size: 13px;
  color: rgba(245,245,247,0.28);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.14s, background 0.14s;
  min-width: 22px;
  min-height: 22px;
}
.mt-slider-reset:hover {
  color: var(--cyan);
  background: rgba(52,198,244,0.08);
}

/* ── Footer ──────────────────────────────────────────────────── */
.mt-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.01);
}
.mt-btn-cancel {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: rgba(245,245,247,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mt-btn-cancel:hover {
  background: rgba(255,255,255,0.11);
  color: rgba(245,245,247,0.80);
}
.mt-btn-apply {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.mt-btn-apply:hover:not(:disabled) {
  background: #5ed6f8;
}
.mt-btn-apply:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Mobile: full-screen panel ──────────────────────────────── */
@media (max-width: 767px) {
  .mt-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 0;
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: none;
    z-index: 230;
  }
  .mt-preview-wrap {
    aspect-ratio: unset;
    height: 38vh;
    min-height: 180px;
  }
  .mt-slider-row {
    grid-template-columns: 80px 1fr 42px 28px;
    min-height: 44px;
  }
  .mt-slider {
    height: 6px;
  }
  .mt-slider::-webkit-slider-thumb {
    width: 20px; height: 20px;
  }
  .mt-slider-label { font-size: 13px; }
  .mt-slider-val   { font-size: 12px; }
  .mt-btn-apply, .mt-btn-cancel { min-height: 48px; font-size: 14px; }
  .mt-quick-btn { min-height: 36px; font-size: 12px; }
  .mt-footer { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* ══════════════════════════════════════════════════════════════
   MANUAL TRANSFORM — DISCOVERABILITY ELEMENTS
   Right-panel card, viewer floating button, mobile bar button.
   ══════════════════════════════════════════════════════════════ */

/* ── Right-panel section card ────────────────────────────────── */
.rp-transform-card {
  background: rgba(52,198,244,0.04);
  border: 1px solid rgba(52,198,244,0.18);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
}
.rp-transform-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.rp-transform-icon {
  font-size: 22px;
  color: var(--cyan);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.rp-transform-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rp-transform-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.rp-transform-desc {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}
.btn-open-transform {
  width: 100%;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 10px rgba(52,198,244,0.28);
}
.btn-open-transform:hover {
  background: #5ed6f8;
  box-shadow: 0 3px 16px rgba(52,198,244,0.40);
}
.btn-open-transform:active {
  transform: scale(0.98);
}

/* ── Floating viewer button ─────────────────────────────────── */
.viewer-transform-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 16;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 9px;
  background: rgba(8,8,13,0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(52,198,244,0.38);
  border-radius: 10px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.viewer-transform-btn:hover {
  background: rgba(52,198,244,0.14);
  border-color: rgba(52,198,244,0.60);
  transform: scale(1.04);
}
.viewer-transform-btn:active { transform: scale(0.97); }
.viewer-transform-btn.hidden { display: none !important; }
.vtb-icon {
  font-size: 15px;
  line-height: 1;
}
.vtb-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* ── Mobile bar Transform button ────────────────────────────── */
@media (max-width: 767px) {
  .mob-bar-transform {
    color: var(--cyan) !important;
  }
  .mob-bar-transform .mob-bar-icon {
    font-size: 20px;
  }
  .mob-bar-transform .mob-bar-label {
    color: var(--cyan);
  }
}

/* ── Bulk status bar (legacy — kept for backwards compat) ──── */
.bulk-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: var(--text-sec);
}
.bulk-status-icon {
  display: inline-block;
  animation: spin 1.4s linear infinite;
  font-size: 13px;
  line-height: 1;
}
.bulk-status-text { flex: 1; }

/* ── Batch Progress Panel ───────────────────────────────────── */
.batch-progress-panel {
  padding: 10px 14px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.bpp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 7px;
}
.bpp-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-sec);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bpp-fraction {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* Progress track — two-layer: active (cyan pulse) behind, done (green) in front */
.bpp-track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.bpp-fill-done,
.bpp-fill-active {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.45s var(--ease);
}
.bpp-fill-active {
  background: var(--accent);
  opacity: 0.38;
  animation: bpp-pulse 1.8s ease-in-out infinite;
}
.bpp-fill-done {
  background: var(--success);
}
@keyframes bpp-pulse {
  0%, 100% { opacity: 0.38; }
  50%       { opacity: 0.58; }
}
/* Stats row — colored chips, one per nonzero count */
.bpp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 18px;
}
.bpp-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.bpp-stat::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bpp-stat--queued    { color: var(--text-dim);  background: rgba(255,255,255,0.05); }
.bpp-stat--queued::before { background: var(--text-dim); }
.bpp-stat--processing { color: var(--accent);   background: var(--accent-subtle); }
.bpp-stat--processing::before { background: var(--accent); animation: pulse 1.2s ease infinite; }
.bpp-stat--retrying  { color: var(--warn);      background: rgba(232,184,75,0.10); }
.bpp-stat--retrying::before  { background: var(--warn); animation: pulse 0.9s ease infinite; }
.bpp-stat--done      { color: var(--success);   background: var(--success-bg); }
.bpp-stat--done::before      { background: var(--success); }
.bpp-stat--failed    { color: var(--error);     background: var(--error-bg); }
.bpp-stat--failed::before    { background: var(--error); }

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT PANEL
═══════════════════════════════════════════════════════════════════════════ */

.ep-panel {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  min-width: 320px;
  max-height: calc(100vh - 80px);
  background: rgba(4,10,22,0.96);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.70), 0 0 0 1px rgba(52,198,244,0.06);
  z-index: 210;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ep-panel.hidden { display: none; }

.ep-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.02);
  user-select: none;
}
.ep-title-block { display: flex; flex-direction: column; gap: 2px; }
.ep-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(245,245,247,0.96);
  line-height: 1.2;
}
.ep-subtitle {
  font-size: 11px;
  color: rgba(245,245,247,0.38);
  letter-spacing: 0.01em;
}
.ep-close-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(245,245,247,0.55);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.ep-close-btn:hover { background: rgba(255,255,255,0.13); color: var(--text); }

.ep-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.10) transparent;
}
.ep-body::-webkit-scrollbar       { width: 4px; }
.ep-body::-webkit-scrollbar-track { background: transparent; }
.ep-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.ep-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(245,245,247,0.38);
  margin-bottom: 8px;
}

/* Option cards */
.ep-option-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ep-option-card {
  padding: 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ep-option-card:hover {
  border-color: rgba(52,198,244,0.35);
  background: rgba(52,198,244,0.05);
}
.ep-option-card.ep-card-selected {
  border-color: rgba(52,198,244,0.65);
  background: rgba(52,198,244,0.08);
}
.ep-card-icon {
  font-size: 20px;
  margin-bottom: 8px;
  color: rgba(245,245,247,0.45);
}
.ep-card-selected .ep-card-icon { color: var(--cyan); }
.ep-card-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245,245,247,0.92);
  line-height: 1.3;
  margin-bottom: 4px;
}
.ep-card-desc {
  font-size: 11px;
  color: rgba(245,245,247,0.42);
  line-height: 1.5;
}

/* Preset cards */
.ep-preset-cards { display: flex; flex-direction: column; gap: 6px; }
.ep-preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ep-preset-card:hover {
  border-color: rgba(52,198,244,0.35);
  background: rgba(52,198,244,0.04);
}
.ep-preset-card.ep-preset-selected {
  border-color: rgba(52,198,244,0.65);
  background: rgba(52,198,244,0.08);
}
.ep-preset-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(245,245,247,0.90);
}
.ep-preset-meta {
  font-size: 11px;
  color: rgba(245,245,247,0.40);
  text-align: right;
}
.ep-preset-selected .ep-preset-name { color: var(--cyan); }

/* Apply-to cards */
.ep-apply-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ep-apply-card {
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  font-size: 13px;
  font-weight: 500;
  color: rgba(245,245,247,0.70);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.ep-apply-card:hover:not(.ep-apply-disabled) {
  border-color: rgba(52,198,244,0.35);
  background: rgba(52,198,244,0.04);
}
.ep-apply-card.ep-apply-selected {
  border-color: rgba(52,198,244,0.65);
  background: rgba(52,198,244,0.08);
  color: var(--cyan);
}
.ep-apply-card.ep-apply-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Crop warning */
.ep-crop-warn {
  font-size: 12px;
  color: rgba(255,200,80,0.85);
  background: rgba(255,200,80,0.06);
  border: 1px solid rgba(255,200,80,0.20);
  border-radius: 7px;
  padding: 9px 13px;
  line-height: 1.5;
}

/* Watermark notice (Free Plan) */
.ep-wm-notice {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: rgba(180, 200, 240, 0.80);
  background: rgba(52, 198, 244, 0.06);
  border: 1px solid rgba(52, 198, 244, 0.18);
  border-radius: 7px;
  padding: 8px 13px;
  line-height: 1.4;
}
.ep-wm-icon { font-size: 14px; flex-shrink: 0; }
.ep-wm-upgrade {
  color: rgba(52, 198, 244, 0.90);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.ep-wm-upgrade:hover { color: #34c6f4; }

/* My Listings watermark notice (inline, Free Plan) */
.lc-wm-notice {
  display: block;
  font-size: 11px;
  color: rgba(180, 200, 240, 0.70);
  padding: 3px 0 0 2px;
}
.lc-wm-upgrade {
  color: rgba(52, 198, 244, 0.85);
  text-decoration: underline;
  cursor: pointer;
}
.lc-wm-upgrade:hover { color: #34c6f4; }

/* Footer */
.ep-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.01);
}
.ep-cancel {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 500;
  color: rgba(245,245,247,0.55);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ep-cancel:hover { background: rgba(255,255,255,0.11); color: rgba(245,245,247,0.80); }
.ep-export-btn { flex: 1 1 auto; }

@media (max-width: 767px) {
  .ep-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: 0;
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: none;
    z-index: 230;
  }
}

/* ── Continue Editing section ─────────────────────────────────────────────── */

/* Handoff confirm banner — replaces primary CTAs while user picks settings */
.rp-handoff-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(52,198,244,0.07);
  border: 1px solid rgba(52,198,244,0.20);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}

.rp-handoff-source {
  font-size: 11px;
  font-weight: 600;
  color: var(--ll-cyan);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rp-handoff-hint {
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.4;
  margin-top: -2px;
  margin-bottom: 2px;
}

.rp-handoff-cancel {
  font-size: 11px;
  color: var(--text-dim);
  padding: 3px 0;
  align-self: flex-start;
}
.rp-handoff-cancel:hover { color: var(--text-sec); background: none; }

/* Continue Editing card header */
.rp-ce-header {
  margin-bottom: 10px;
}

.rp-ce-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 2px;
}

.rp-ce-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Depth warning */
.rp-depth-warning {
  font-size: 11px;
  color: #f0a030;
  background: rgba(240,160,48,0.10);
  border: 1px solid rgba(240,160,48,0.25);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* Continue Editing action buttons */
.rp-ce-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

.rp-ce-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.10s;
  text-align: left;
}
.rp-ce-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.rp-ce-btn:active { transform: none; }

.rp-ce-btn--editor:hover  { border-color: rgba(52,198,244,0.40); background: rgba(52,198,244,0.07); }
.rp-ce-btn--creative:hover{ border-color: rgba(22,136,216,0.45); background: rgba(22,136,216,0.08); }

.rp-ce-btn--reset {
  background: none;
  border-color: rgba(255,255,255,0.07);
}
.rp-ce-btn--reset:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

.rp-ce-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: var(--ll-cyan);
  line-height: 1;
}
.rp-ce-btn--reset .rp-ce-icon { color: var(--text-dim); }

.rp-ce-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rp-ce-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.rp-ce-btn--reset .rp-ce-label { color: var(--text-sec); font-size: 11px; }

.rp-ce-desc {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.3;
}

/* Version history toggle */
.rp-ve-history-wrap {
  margin-top: 6px;
}

.rp-ve-history-toggle {
  background: none;
  border: none;
  color: rgba(245,245,247,0.40);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
  transition: color 0.15s;
  margin-bottom: 4px;
}
.rp-ve-history-toggle:hover { color: rgba(245,245,247,0.70); }

.rp-version-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.rp-version-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: rgba(245,245,247,0.60);
  transition: background 0.12s;
}

.rp-version-item.is-active {
  background: rgba(124,106,247,0.12);
  color: rgba(245,245,247,0.90);
}

.rp-version-item .rp-vi-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,245,247,0.25);
  flex-shrink: 0;
}
.rp-version-item.is-active .rp-vi-dot {
  background: var(--accent, #7c6af7);
}

.rp-version-item .rp-vi-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-version-item .rp-vi-badge {
  font-size: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  padding: 1px 5px;
  color: rgba(245,245,247,0.50);
  flex-shrink: 0;
}
.rp-version-item.is-active .rp-vi-badge {
  background: rgba(124,106,247,0.25);
  color: rgba(245,245,247,0.80);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE UX REDESIGN
   All rules here are mobile-gated and do not affect desktop.
   ══════════════════════════════════════════════════════════════ */

/* ── Desktop-only sub-text in empty state (hidden on mobile) ── */
.cz-sub--desktop { display: block; }

/* ── Mobile-only upload CTA pill (hidden on desktop) ── */
.mob-cz-cta { display: none; }

/* ── OC panel drag handle (hidden on desktop) ── */
.oc-mob-handle { display: none; }

/* ── Choose Tool goal sheet (hidden on desktop) ── */
.mob-choose-tool { display: none; }

@media (max-width: 767px) {

  /* ── Geo chip: hidden on mobile — confusing to normal users ── */
  .qi-geo { display: none !important; }

  /* ── Settings tabs: Advanced + Info hidden on mobile ── */
  .mob-tab--advanced { display: none !important; }

  /* ── Tab bar: 2-tab layout looks better with more width per tab ── */
  .mob-tab-bar { gap: 0; }
  .mob-tab { flex: 1; font-size: 13px; font-weight: 600; }

  /* ── Mobile settings: hide technical/advanced sections ── */

  /* Protection locks — informational badges, not user controls */
  .fe-group:has(.fe-safety-grid)            { display: none !important; }
  #rp-full-enhance-section .fe-section-divider:last-of-type { display: none !important; }

  /* Status / File info — technical metadata */
  #rp-status-section  { display: none !important; }

  /* Branding / Watermark — advanced, desktop-focused */
  #rp-branding-section { display: none !important; }

  /* Manual Transform card — accessible via floating button, not settings */
  #rp-transform-section { display: none !important; }

  /* AI Interior Design: collapse redundant info panels in mobile settings */
  .id-guidance-block   { display: none !important; }
  .id-arch-lock-notice { display: none !important; }
  .id-style-summary    { display: none !important; }

  /* ── Mode cards: premium glass look on mobile ── */
  .mode-cards { gap: 10px; }
  .mode-card {
    border-radius: 14px;
    background: rgba(8,16,30,0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    border-color: rgba(120,150,190,0.18);
  }
  .mode-card.active {
    border-color: rgba(52,198,244,0.50);
    background: rgba(52,198,244,0.06);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.18),
                0 4px 24px rgba(52,198,244,0.10),
                inset 0 1px 0 rgba(52,198,244,0.10);
  }
  .mode-card-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
  .mode-card-desc { font-size: 12.5px; color: rgba(147,163,184,0.65); line-height: 1.5; }

  /* ── Premium empty / upload state ── */
  .center-empty {
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
  }
  .center-drop-zone {
    max-width: 100%;
    padding: 44px 24px 36px;
    border-radius: 22px;
    border: 1.5px dashed rgba(52,198,244,0.30);
    background: rgba(8,16,30,0.72);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.40),
                inset 0 1px 0 rgba(255,255,255,0.05);
    gap: 16px;
  }
  .center-drop-zone.drag-over {
    border-color: var(--ll-cyan);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.20),
                0 12px 48px rgba(0,0,0,0.40),
                inset 0 1px 0 rgba(52,198,244,0.08);
  }
  .cz-icon {
    width: 64px;
    height: 64px;
    background: rgba(52,198,244,0.08);
    border: 1px solid rgba(52,198,244,0.24);
    border-radius: 18px;
    font-size: 30px;
    box-shadow: 0 4px 16px rgba(52,198,244,0.08);
  }
  .cz-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
  }
  .cz-sub {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(147,163,184,0.75);
    max-width: 280px;
  }
  /* Desktop-only sub-text hidden on mobile */
  .cz-sub--desktop { display: none; }
  .cz-retention-notice { font-size: 10.5px; margin-top: 0; }
  .cz-formats { margin-top: 0; gap: 5px; }
  .cz-fmt { font-size: 10px; padding: 3px 7px; }

  /* Mobile primary upload CTA — visible button (covered by file input) */
  .mob-cz-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    max-width: 240px;
    min-height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ll-cyan), var(--ll-blue));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 20px rgba(52,198,244,0.28);
    /* The hidden file input sits above this — tapping anywhere on the
       drop zone (including this button area) opens the file picker. */
    pointer-events: none;
    position: relative;
    z-index: 0;
  }

  /* ── OC panel drag handle ── */
  .oc-mob-handle {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 10px 0 4px;
  }
  .oc-mob-handle::before {
    content: '';
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
  }

  /* Ensure OC panel header is not styled as draggable */
  .oc-panel-header { cursor: default !important; }

  /* ── Mobile bottom bar: larger CTA ── */
  .mob-bar-cta {
    font-size: 14px;
    letter-spacing: -0.015em;
  }

  /* Processing state: subtle pulse so user knows something is happening */
  @keyframes mob-cta-pulse {
    0%, 100% { opacity: 0.30; }
    50%       { opacity: 0.50; }
  }
  .mob-bar-cta[data-mob-cta-state="processing"] {
    animation: mob-cta-pulse 1.6s ease-in-out infinite;
  }

  /* ── OC panel Phase 2: larger close/cancel touch targets ── */
  #oc-btn-close { min-width: 44px; min-height: 44px; }
  .oc-btn-cancel { min-height: 48px; font-size: 14px; }
  .oc-btn-apply  { min-height: 48px; font-size: 14px; font-weight: 700; }

  /* ── Choose Tool sheet: full-screen backdrop + bottom sheet ── */
  .mob-choose-tool {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 260; /* above mob-bar (z:200) and OC panel (z:220) */
  }
  .mob-choose-tool.hidden { display: none; }

  .mct-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,16,0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .mct-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(8,16,30,0.97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(255,255,255,0.09);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 48px rgba(0,0,0,0.60);
  }

  .mct-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 12px auto 0;
  }

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

  .mct-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(245,245,247,0.95);
  }

  .mct-close {
    background: none;
    border: none;
    color: rgba(245,245,247,0.45);
    font-size: 16px;
    padding: 6px;
    min-width: 36px;
    min-height: 36px;
    cursor: pointer;
    border-radius: 8px;
  }
  .mct-close:active { background: rgba(255,255,255,0.07); }

  .mct-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 20px;
  }

  .mct-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(120,150,190,0.15);
    background: rgba(255,255,255,0.04);
    text-align: left;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
    min-height: 72px;
  }
  .mct-card:active {
    background: rgba(52,198,244,0.08);
    border-color: rgba(52,198,244,0.40);
  }

  .mct-card-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(52,198,244,0.08);
    border: 1px solid rgba(52,198,244,0.18);
  }

  .mct-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .mct-card-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(245,245,247,0.95);
  }

  .mct-card-desc {
    font-size: 12.5px;
    color: rgba(147,163,184,0.70);
    line-height: 1.45;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE PREMIUM REBUILD
   Premium design system, Photos/Studio nav, goal sheet redesign,
   OC category improvements, mobile photos sheet.
   All rules are mobile-gated.
   ══════════════════════════════════════════════════════════════ */

/* ── Default (desktop): new mobile-only elements hidden ── */
.mob-photos-sheet { display: none; }

/* ── Premium mob-bar icon treatment ── */
.mob-bar-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.mob-bar-icon svg { display: block; }

@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────────────
     PART A+B — Premium bottom action bar
     ───────────────────────────────────────────────────────────────────── */
  .mob-bar {
    gap: 4px;
    padding: 8px 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(52,198,244,0.14);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.50),
                0 -1px 0 rgba(52,198,244,0.08);
  }

  .mob-bar-side {
    flex: 0 0 52px;
    min-height: 52px;
    border-radius: 12px;
    gap: 3px;
    color: rgba(200,220,240,0.45);
    -webkit-tap-highlight-color: transparent;
  }
  .mob-bar-side:active {
    background: rgba(52,198,244,0.07);
    color: rgba(52,198,244,0.90);
  }

  .mob-bar-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: inherit;
  }

  .mob-bar-cta {
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    box-shadow: 0 4px 22px rgba(52,198,244,0.32),
                0 1px 0 rgba(255,255,255,0.12) inset;
  }
  .mob-bar-cta:active { transform: scale(0.96); box-shadow: 0 2px 10px rgba(52,198,244,0.18); }

  /* ─────────────────────────────────────────────────────────────────────
     PART C — Premium goal sheet redesign
     ───────────────────────────────────────────────────────────────────── */

  /* Header: title + subtitle stacked */
  .mct-header {
    padding: 18px 20px 10px;
    align-items: flex-start;
    gap: 12px;
  }
  .mct-header-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
  }
  .mct-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(245,245,247,0.98);
    line-height: 1.15;
  }
  .mct-subtitle {
    display: block;
    font-size: 12px;
    color: rgba(147,163,184,0.60);
    font-weight: 400;
    letter-spacing: 0;
  }
  .mct-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-top: 2px;
  }

  /* Premium glass cards with SVG icons */
  .mct-cards {
    gap: 8px;
    padding: 10px 16px 24px;
  }
  .mct-card {
    gap: 14px;
    padding: 14px 14px 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(120,150,190,0.13);
    background: rgba(12,22,42,0.70);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    min-height: 76px;
    position: relative;
    overflow: hidden;
  }
  .mct-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(52,198,244,0.04) 0%, transparent 60%);
    pointer-events: none;
  }
  .mct-card:active {
    background: rgba(52,198,244,0.07);
    border-color: rgba(52,198,244,0.45);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.20),
                0 4px 20px rgba(52,198,244,0.12);
    transform: scale(0.985);
  }
  .mct-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(52,198,244,0.07);
    border: 1px solid rgba(52,198,244,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(52,198,244,0.85);
    box-shadow: 0 2px 10px rgba(52,198,244,0.06);
  }
  .mct-card-body {
    flex: 1;
    gap: 2px;
    min-width: 0;
  }
  .mct-card-tag {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(52,198,244,0.70);
    margin-bottom: 2px;
  }
  .mct-card-name {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(245,245,247,0.95);
    line-height: 1.25;
  }
  .mct-card-desc {
    font-size: 12px;
    color: rgba(147,163,184,0.60);
    line-height: 1.4;
    margin-top: 1px;
  }
  .mct-card-arrow {
    flex-shrink: 0;
    color: rgba(147,163,184,0.30);
    display: flex;
    align-items: center;
  }

  /* Taller glass sheet with larger border radius */
  .mct-sheet {
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 60px rgba(0,0,0,0.65),
                0 -1px 0 rgba(52,198,244,0.10);
    border-top: 1px solid rgba(52,198,244,0.12);
    background: rgba(6,13,28,0.97);
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART E — OC Panel premium mobile category nav
     ───────────────────────────────────────────────────────────────────── */

  /* Category strip: full-width horizontal scroll, more prominent */
  .oc-col-nav {
    padding: 10px 12px 8px;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .oc-col-nav::-webkit-scrollbar { display: none; }

  /* Category nav items become clear pill-shaped tabs */
  .oc-nav-item {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(120,150,190,0.18);
    background: rgba(255,255,255,0.04);
    font-size: 13px;
    font-weight: 600;
    color: rgba(200,220,240,0.55);
    letter-spacing: -0.01em;
    border-bottom: 1px solid rgba(120,150,190,0.18);
    border-left: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
  }
  .oc-nav-item.active {
    background: rgba(52,198,244,0.10);
    border-color: rgba(52,198,244,0.40);
    color: rgba(52,198,244,0.95);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.12),
                0 2px 12px rgba(52,198,244,0.10);
  }
  .oc-nav-item:active {
    background: rgba(52,198,244,0.08);
    border-color: rgba(52,198,244,0.30);
  }

  /* Remove the badge from nav (badge count is less useful on mobile) */
  .oc-tab-badge { display: none; }

  /* Chip section: wrap nicely on mobile */
  .oc-col-chips {
    padding: 8px 12px 10px;
  }

  /* Bigger, more touch-friendly preset chips */
  .oc-preset-chip {
    min-height: 40px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
  }

  /* OC panel glass header on mobile */
  .oc-panel-header {
    padding: 0 12px 10px;
  }
  .oc-panel-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.025em;
  }
  .oc-panel-subtitle {
    font-size: 12px;
    line-height: 1.4;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART F — Mobile Photos sheet
     ───────────────────────────────────────────────────────────────────── */
  .mob-photos-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 260;
  }
  .mob-photos-sheet.hidden { display: none; }

  .mps-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,16,0.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .mps-sheet {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: calc(100dvh - env(safe-area-inset-top) - 60px);
    display: flex;
    flex-direction: column;
    background: rgba(6,13,28,0.97);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-radius: 26px 26px 0 0;
    border-top: 1px solid rgba(52,198,244,0.12);
    box-shadow: 0 -12px 60px rgba(0,0,0,0.65);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
  }

  .mps-handle {
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  .mps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 10px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mps-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: rgba(245,245,247,0.95);
  }
  .mps-close {
    background: none;
    border: none;
    color: rgba(245,245,247,0.45);
    cursor: pointer;
    padding: 6px;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }
  .mps-close:active { background: rgba(255,255,255,0.07); }

  .mps-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px;
    align-content: start;
  }

  .mps-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    font-size: 13px;
    color: rgba(147,163,184,0.50);
    line-height: 1.6;
  }

  .mps-thumb {
    position: relative;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.04);
    aspect-ratio: 1;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s;
  }
  .mps-thumb:active { transform: scale(0.94); }
  .mps-thumb.active {
    box-shadow: 0 0 0 2.5px rgba(52,198,244,0.90),
                0 4px 16px rgba(52,198,244,0.22);
  }
  .mps-thumb-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255,255,255,0.05);
  }
  .mps-thumb-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(4,10,22,0.80);
    color: rgba(200,220,240,0.80);
    pointer-events: none;
  }
  .mps-badge--done    { color: rgba(52,198,244,0.90); }
  .mps-badge--processing { color: rgba(255,200,60,0.90); }
  .mps-badge--error   { color: rgba(255,80,80,0.90); }

  .mps-footer {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .mps-upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    background: rgba(52,198,244,0.07);
    border: 1px solid rgba(52,198,244,0.20);
    color: rgba(52,198,244,0.85);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mps-upload-btn:active {
    background: rgba(52,198,244,0.12);
    border-color: rgba(52,198,244,0.35);
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART H — Design system: premium OC panel glass header on mobile
     ───────────────────────────────────────────────────────────────────── */
  .oc-panel {
    background: rgba(5,11,24,0.98);
    border-top: 1px solid rgba(52,198,244,0.12);
    box-shadow: 0 -12px 60px rgba(0,0,0,0.65);
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE POLISH FIXES
   Addresses live iPhone feedback: bar stickers, photo delete, OC usability,
   card redesign, image context in settings.
   All layout and behaviour changes are mobile-gated. Desktop untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Desktop defaults for new mobile-only elements ── */
.mob-ctx-strip { display: none; }
.mps-thumb-del { display: none; }

@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────────────
     PART A — Premium glass pill nav buttons (Photos + Studio)
     Each side button is a self-contained glass capsule, not a bare label.
     ───────────────────────────────────────────────────────────────────── */
  .mob-bar-side {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    transition: background 0.14s, border-color 0.14s, color 0.14s, box-shadow 0.14s;
    gap: 4px;
    min-width: 56px;
  }
  .mob-bar-side:active {
    background: rgba(52,198,244,0.11);
    border-color: rgba(52,198,244,0.38);
    color: rgba(52,198,244,0.95);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.14) inset,
                0 2px 14px rgba(52,198,244,0.13);
  }
  /* Open/selected state — cyan glow when Photos sheet or Studio panel is active */
  .mob-bar-side.open {
    background: rgba(52,198,244,0.10);
    border-color: rgba(52,198,244,0.36);
    color: rgba(52,198,244,0.95);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.12) inset,
                0 2px 16px rgba(52,198,244,0.14);
  }
  .mob-bar-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART B — Delete button on mobile photo thumbnails
     ───────────────────────────────────────────────────────────────────── */
  .mps-thumb { position: relative; }
  .mps-thumb-del {
    display: flex;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(10,14,28,0.72);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(245,245,247,0.85);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, border-color 0.12s;
  }
  .mps-thumb-del:active {
    background: rgba(220,60,60,0.75);
    border-color: rgba(255,100,100,0.40);
  }
  /* Two-tap delete confirm state */
  .mps-thumb--pending-delete .mps-thumb-del {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 10px;
    background: rgba(200,30,30,0.88);
    border-color: rgba(255,80,80,0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
  }
  .mps-thumb--pending-delete .mps-thumb-del::after {
    content: 'Delete';
    margin-left: 4px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART C — Object Cleanup mobile sheet — complete rebuild
     ───────────────────────────────────────────────────────────────────── */

  /* Streamline the panel: hide desktop-oriented sections on mobile */
  .oc-selected-section  { display: none; }
  .oc-generated-section { display: none; }
  .oc-large-item-warning { display: none !important; }
  .oc-noop-warning { display: none !important; }
  .oc-validation-hint { display: none !important; }

  /* OC panel overall: tighter header, clear mobile hierarchy */
  .oc-panel-header {
    padding: 6px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .oc-panel-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(245,245,247,0.97);
  }
  .oc-panel-subtitle {
    font-size: 12.5px;
    color: rgba(200,220,240,0.52);
    margin-top: 2px;
  }
  .oc-ctrl-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
  }

  /* Step labels: ::before pseudo on each section strip */
  .oc-col-nav::before {
    content: "Choose area";
    display: block;
    width: 100%;
    padding: 10px 16px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.45);
    pointer-events: none;
    flex-shrink: 0;
  }

  /* Category nav strip — horizontal scroll, edge fade hint */
  .oc-col-nav {
    display: flex;
    flex-direction: column;
    padding: 0 0 2px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position: relative;
  }
  #oc-nav-section {
    flex-direction: row;
    gap: 6px;
    padding: 0 16px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    white-space: nowrap;
    /* Fade hint: last item partially visible to signal scroll */
    padding-right: 32px;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  #oc-nav-section::-webkit-scrollbar { display: none; }

  /* Category pills — clear, tappable, prominent */
  .oc-nav-item {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(120,150,190,0.20);
    background: rgba(255,255,255,0.04);
    font-size: 13px;
    font-weight: 600;
    color: rgba(200,220,240,0.60);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
    border-bottom: 1.5px solid rgba(120,150,190,0.20);
    border-left: none;
  }
  .oc-nav-item.active {
    background: rgba(52,198,244,0.12);
    border-color: rgba(52,198,244,0.48) !important;
    border: 1.5px solid rgba(52,198,244,0.48);
    color: rgba(52,198,244,0.97);
    box-shadow: 0 0 0 2px rgba(52,198,244,0.10),
                0 2px 14px rgba(52,198,244,0.14);
  }
  .oc-nav-item:active {
    background: rgba(52,198,244,0.09);
    color: rgba(52,198,244,0.85);
  }

  /* Chips section label */
  .oc-col-chips::before {
    content: "Quick remove";
    display: block;
    padding: 10px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.45);
    pointer-events: none;
  }
  .oc-col-chips {
    padding: 0 0 4px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .oc-presets-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 16px 12px;
  }
  .oc-preset-chip {
    min-height: 38px;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid rgba(120,150,190,0.20);
    background: rgba(255,255,255,0.04);
    color: rgba(200,220,240,0.70);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .oc-preset-chip.active {
    background: rgba(52,198,244,0.12);
    border-color: rgba(52,198,244,0.45);
    color: rgba(52,198,244,0.97);
    box-shadow: 0 0 0 1.5px rgba(52,198,244,0.10);
  }
  .oc-preset-chip:active {
    background: rgba(52,198,244,0.09);
  }

  /* Custom instruction area: section label + textarea */
  .oc-col-right {
    padding: 0;
  }
  .oc-additional-section {
    padding: 10px 16px 12px;
  }
  .oc-additional-section > .oc-col-hdr {
    display: block;
    padding: 10px 0 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.45);
  }
  .oc-custom-hint {
    font-size: 12px;
    color: rgba(180,200,225,0.45);
    margin: 0 0 8px;
    line-height: 1.4;
  }
  .oc-textarea {
    min-height: 72px;
    font-size: 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(120,150,190,0.20);
    background: rgba(255,255,255,0.03);
    padding: 12px 14px;
  }
  .oc-textarea:focus {
    border-color: rgba(52,198,244,0.35);
    outline: none;
    background: rgba(52,198,244,0.04);
  }

  /* Footer: sticky, always above Safari chrome */
  .oc-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 16px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    background: rgba(5,11,24,0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    gap: 10px;
  }
  .oc-btn-cancel {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(200,220,240,0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .oc-btn-cancel:active { background: rgba(255,255,255,0.09); }
  .oc-btn-apply {
    flex: 1;
    min-height: 50px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--ll-cyan), var(--ll-blue));
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 18px rgba(52,198,244,0.28);
    transition: opacity 0.15s, transform 0.12s;
  }
  .oc-btn-apply:disabled {
    opacity: 0.28;
    box-shadow: none;
    cursor: not-allowed;
  }
  .oc-btn-apply:not(:disabled):active {
    transform: scale(0.97);
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART D — AI Editor Camera / Angle cards
     ───────────────────────────────────────────────────────────────────── */
  .fe-edit-type-group {
    flex-direction: column;
    gap: 8px;
  }
  .fe-edit-pill {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(120,150,190,0.18);
    background: rgba(255,255,255,0.035);
    text-align: left;
    transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
  }
  .fe-edit-pill[aria-pressed="true"] {
    border-color: rgba(52,198,244,0.45);
    background: rgba(52,198,244,0.08);
    box-shadow: 0 0 0 1.5px rgba(52,198,244,0.10),
                0 2px 14px rgba(52,198,244,0.10);
  }
  .fe-edit-pill:active {
    background: rgba(52,198,244,0.07);
  }
  .fe-edit-pill-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200,220,240,0.65);
    transition: color 0.13s, background 0.13s, border-color 0.13s;
  }
  .fe-edit-pill[aria-pressed="true"] .fe-edit-pill-icon {
    border-color: rgba(52,198,244,0.35);
    background: rgba(52,198,244,0.10);
    color: rgba(52,198,244,0.90);
  }
  .fe-edit-pill-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .fe-edit-pill-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(245,245,247,0.92);
  }
  .fe-edit-pill[aria-pressed="true"] .fe-edit-pill-name {
    color: rgba(52,198,244,0.97);
  }
  .fe-edit-pill-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(180,200,225,0.50);
    line-height: 1.35;
  }
  .fe-edit-pill[aria-pressed="true"] .fe-edit-pill-desc {
    color: rgba(52,198,244,0.55);
  }
  /* Mobile badge sizing */
  .fe-edit-pill-badge {
    font-size: 8px;
    padding: 1.5px 6px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART E — AI Creative tool cards (mobile sizing tweaks only;
     colors and layout now in global rules above)
     ───────────────────────────────────────────────────────────────────── */
  .creative-mode-btn {
    min-height: 62px;
    padding: 13px 16px;
    border-radius: 14px;
  }
  .creative-mode-btn.active {
    border-color: var(--pb-blue-border);
    background: linear-gradient(180deg, rgba(0,136,204,0.12), rgba(0,136,204,0.05));
    box-shadow: 0 0 0 1px rgba(0,136,204,0.16), 0 4px 16px rgba(0,136,204,0.12);
  }
  .creative-mode-btn:active {
    background: var(--pb-blue-soft);
  }
  .creative-mode-btn.active .creative-btn-icon {
    border-color: var(--pb-blue-border);
    background: var(--pb-blue-soft);
    color: var(--pb-blue);
  }
  .creative-mode-btn.active .creative-btn-name {
    color: var(--pb-text);
  }
  .creative-mode-btn.active .creative-btn-desc {
    color: var(--pb-text-muted);
  }

  /* ── Mood cards — mobile overrides (PART E) ──────────────────────── */
  .creative-mood-cards {
    gap: 8px;
    margin-top: 11px;
  }
  .creative-mood-card {
    height: 120px;
    border-radius: 12px;
  }
  .creative-mood-card-body {
    padding: 10px 14px 12px;
  }
  .creative-mood-card-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .creative-mood-card-desc {
    font-size: 12px;
    margin-top: 1px;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART F — Image context strip in mobile settings panel
     ───────────────────────────────────────────────────────────────────── */
  .mob-ctx-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    flex-shrink: 0;
    min-height: 52px;
  }
  .mob-ctx-strip.hidden { display: none; }
  .mob-ctx-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
    background-color: rgba(255,255,255,0.06);
  }
  .mob-ctx-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mob-ctx-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(245,245,247,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
  }
  .mob-ctx-mode {
    font-size: 11px;
    font-weight: 600;
    color: rgba(52,198,244,0.75);
    letter-spacing: 0.02em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE FINAL POLISH
   Addresses remaining live iPhone feedback after 95e816d:
   dock buttons, gear removal, context strip, apply-all, branch cards,
   OC area dropdown, premium prompt textarea.
   All rules mobile-gated. Desktop untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Desktop defaults for new mobile-only elements ── */
.mob-apply-all-wrap  { display: none; }
.mob-oc-area-select  { display: none; }
.mob-oc-area-list    { display: none; }

@media (max-width: 767px) {

  /* ─────────────────────────────────────────────────────────────────────
     Result Ready pane — shown in mobile deck when active job is done
     ───────────────────────────────────────────────────────────────────── */
  .mob-deck-result-header {
    margin-bottom: 8px;
  }
  .mob-deck-result-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(52,198,244,0.92);
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
  .mob-deck-result-sub {
    font-size: 11px;
    color: var(--pb-text-muted);
    line-height: 1.4;
  }
  .mob-deck-result-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .mob-deck-result-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--pb-text);
    cursor: pointer;
    text-align: left;
    min-height: 44px;
    transition: background 0.14s, border-color 0.14s;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
  }
  .mob-deck-result-btn:active {
    background: rgba(52,198,244,0.09);
    border-color: rgba(52,198,244,0.30);
  }
  .mob-deck-result-btn--reset {
    background: transparent;
    border-color: rgba(255,255,255,0.07);
  }
  .mob-deck-result-icon {
    font-size: 13px;
    flex-shrink: 0;
    color: rgba(52,198,244,0.80);
    line-height: 1;
  }
  .mob-deck-result-btn--reset .mob-deck-result-icon { color: var(--pb-text-muted); }
  .mob-deck-result-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .mob-deck-result-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.3;
  }
  .mob-deck-result-btn--reset .mob-deck-result-label { color: var(--pb-text-muted); font-size: 11px; }
  .mob-deck-result-desc {
    font-size: 10px;
    color: var(--pb-text-muted);
    line-height: 1.3;
  }

  /* ─────────────────────────────────────────────────────────────────────
     ISSUE 5 — Error state: large, accessible retry path on mobile
     ───────────────────────────────────────────────────────────────────── */
  .ov-error { max-width: calc(100vw - 48px); padding: 24px 20px; }
  #ov-error-btns-default { flex-direction: column; width: 100%; }
  #btn-retry-error {
    min-height: 44px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    background: var(--pb-blue);
    border: none;
    border-radius: 12px;
    color: #fff;
    width: 100%;
    letter-spacing: -0.01em;
  }
  #btn-dismiss-error {
    min-height: 44px;
    padding: 0 20px;
    font-size: 13px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-sec);
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART A — Premium dock: clear separation between side buttons + CTA
     ───────────────────────────────────────────────────────────────────── */
  .mob-bar {
    gap: 8px;
    padding: 8px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .mob-bar-side {
    flex: 0 0 58px;
    min-width: 58px;
    min-height: 54px;
    border-radius: 16px;
    gap: 5px;
    color: rgba(200,220,240,0.48);
  }
  .mob-bar-cta {
    min-height: 54px;
    border-radius: 15px;
    font-size: 15.5px;
    letter-spacing: -0.02em;
  }
  .mob-bar-label { font-size: 8.5px; letter-spacing: 0.05em; }

  /* ─────────────────────────────────────────────────────────────────────
     PART B — Hide the top-right gear/settings icon on mobile
     It duplicates the Studio action bar button; confusing on phone.
     ───────────────────────────────────────────────────────────────────── */
  #btn-panel-toggle { display: none !important; }

  /* ─────────────────────────────────────────────────────────────────────
     PART D — Apply-to-all: mobile checkbox/toggle, hidden in Tool tab
     ───────────────────────────────────────────────────────────────────── */

  /* Hide the original desktop button on mobile */
  #btn-apply-settings-all { display: none !important; }

  /* Show the mobile replacement (checkbox-style) */
  .mob-apply-all-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 6px 0 2px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
  }
  .mob-apply-all-wrap:active { background: rgba(52,198,244,0.05); }
  .mob-apply-all-wrap.hidden { display: none; }
  .mob-apply-all-cb {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: rgba(52,198,244,0.90);
    cursor: pointer;
  }
  .mob-apply-all-label {
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(200,220,240,0.75);
    letter-spacing: -0.01em;
    flex: 1;
    line-height: 1.3;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART E — Branch cards: Standard / Furnished
     ───────────────────────────────────────────────────────────────────── */
  #fe-branch-pills {
    flex-direction: column;
    gap: 8px;
  }
  .fe-branch-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(120,150,190,0.18);
    background: rgba(255,255,255,0.035);
    text-align: left;
    transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
    cursor: pointer;
  }
  .fe-branch-card[aria-pressed="true"] {
    border-color: rgba(52,198,244,0.45);
    background: rgba(52,198,244,0.08);
    box-shadow: 0 0 0 1.5px rgba(52,198,244,0.10), 0 2px 14px rgba(52,198,244,0.10);
  }
  .fe-branch-card:active { background: rgba(52,198,244,0.07); }
  .fe-branch-card-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200,220,240,0.65);
    transition: color 0.13s, background 0.13s, border-color 0.13s;
  }
  .fe-branch-card[aria-pressed="true"] .fe-branch-card-icon {
    border-color: rgba(52,198,244,0.35);
    background: rgba(52,198,244,0.10);
    color: rgba(52,198,244,0.90);
  }
  .fe-branch-card-body {
    flex: 1;
    min-width: 0;
  }
  .fe-branch-card-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(245,245,247,0.92);
  }
  .fe-branch-card[aria-pressed="true"] .fe-branch-card-label { color: rgba(52,198,244,0.97); }
  .fe-branch-card-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(180,200,225,0.50);
    margin-top: 3px;
    line-height: 1.35;
  }
  .fe-branch-card[aria-pressed="true"] .fe-branch-card-desc { color: rgba(52,198,244,0.55); }

  /* ─────────────────────────────────────────────────────────────────────
     PART F — Object Cleanup: premium custom area dropdown
     ───────────────────────────────────────────────────────────────────── */

  /* Hide the desktop horizontal chip nav on mobile */
  .oc-col-nav { display: none; }

  /* Show the custom dropdown trigger */
  .mob-oc-area-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 16px 0;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(120,150,190,0.22);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.12s, background 0.12s;
    position: relative;
  }
  .mob-oc-area-select.open {
    border-color: rgba(52,198,244,0.45);
    background: rgba(52,198,244,0.06);
  }
  .mob-oc-area-select:active { background: rgba(52,198,244,0.06); }
  .mob-oc-area-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.45);
    margin-right: auto;
    display: block;
  }
  .mob-oc-area-value {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: rgba(245,245,247,0.92);
  }
  .mob-oc-area-chevron {
    flex-shrink: 0;
    color: rgba(200,220,240,0.40);
    transition: transform 0.18s;
  }
  .mob-oc-area-select.open .mob-oc-area-chevron { transform: rotate(180deg); }

  /* Trigger button fills the select container */
  .mob-oc-area-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* Area list — inline, pushes content down instead of overlaying it */
  .mob-oc-area-list {
    display: none;
    /* No absolute positioning — stays in document flow so Quick Remove chips are pushed down */
    border-top: 1px solid rgba(52,198,244,0.18);
    margin: 4px -14px -12px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
  }
  .mob-oc-area-select.open .mob-oc-area-list { display: block; }
  .mob-oc-area-select.open { border-radius: 14px 14px 0 0; overflow: hidden; padding-bottom: 0; }
  .mob-oc-area-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(200,220,240,0.80);
    letter-spacing: -0.01em;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.10s, color 0.10s;
  }
  .mob-oc-area-item:last-child { border-bottom: none; }
  .mob-oc-area-item:active { background: rgba(52,198,244,0.08); }
  .mob-oc-area-item.active {
    color: rgba(52,198,244,0.97);
    background: rgba(52,198,244,0.07);
  }
  .mob-oc-area-item-check {
    flex-shrink: 0;
    color: rgba(52,198,244,0.90);
    display: none;
  }
  .mob-oc-area-item.active .mob-oc-area-item-check { display: block; }

  /* Chip section: label above chips */
  .oc-col-chips::before { content: "Quick remove"; }

  /* ─────────────────────────────────────────────────────────────────────
     PART G — Premium custom cleanup prompt textarea
     ───────────────────────────────────────────────────────────────────── */
  .oc-textarea {
    min-height: 100px;
    font-size: 14.5px;
    line-height: 1.5;
    border-radius: 13px;
    border: 1.5px solid rgba(120,150,190,0.22);
    background: rgba(255,255,255,0.035);
    padding: 14px 16px;
    color: rgba(245,245,247,0.90);
    resize: none;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .oc-textarea:focus {
    border-color: rgba(52,198,244,0.45);
    background: rgba(52,198,244,0.04);
    box-shadow: 0 0 0 2px rgba(52,198,244,0.08);
    outline: none;
  }
  .oc-textarea::placeholder {
    color: rgba(180,200,225,0.35);
    font-size: 13px;
  }
  .oc-additional-section {
    padding: 8px 16px 16px;
  }
  .oc-additional-section > .oc-col-hdr {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.45);
    display: block;
    padding: 12px 0 4px;
  }
  .oc-custom-hint {
    font-size: 12px;
    color: rgba(180,200,225,0.42);
    margin: 0 0 10px;
    line-height: 1.45;
  }
  /* mob-oc-area-list is now inline (no absolute positioning) — no z-index wrapper needed */
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE INTERACTION POLISH
   Addresses final live UX gaps after final-polish deployment:
   Studio glow, branch card previews, premium OC selector, selected targets
   summary, apply-all toggle, auto-close panels on action.
   All rules mobile-gated. Desktop untouched.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Desktop defaults for new mobile-only elements ── */
.mob-oc-selected-summary { display: none; }

/* ── Part A: Studio button looped glow animation ── */
@keyframes mob-studio-glow {
  0%,  100% { box-shadow: 0 0 0 0 rgba(52,198,244,0); }
  50%        { box-shadow: 0 0 14px 3px rgba(52,198,244,0.18), 0 0 0 1px rgba(52,198,244,0.08); }
}

@media (max-width: 767px) {

  /* Part A — Premium looped glow on Studio button when not already open */
  #mob-btn-settings:not(.open) {
    animation: mob-studio-glow 3.2s ease-in-out infinite;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART B — Branch card visual previews
     ───────────────────────────────────────────────────────────────────── */
  .fe-branch-card-preview {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .fe-branch-preview--standard {
    background: linear-gradient(148deg, rgba(220,228,245,0.10) 0%, rgba(195,210,230,0.06) 100%);
    border: 1px solid rgba(205,218,238,0.16);
    color: rgba(200,218,240,0.55);
  }
  .fe-branch-preview--standard::after {
    content: '';
    position: absolute;
    bottom: 13px;
    left: 9px;
    right: 9px;
    height: 1px;
    background: rgba(185,205,228,0.20);
    border-radius: 1px;
  }
  .fe-branch-preview--furnished {
    background: linear-gradient(148deg, rgba(170,115,55,0.16) 0%, rgba(135,85,40,0.09) 100%);
    border: 1px solid rgba(175,128,62,0.22);
    color: rgba(205,162,92,0.78);
  }
  .fe-branch-preview--furnished::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: 10px;
    right: 10px;
    height: 7px;
    background: rgba(168,112,52,0.28);
    border-radius: 3px;
  }
  .fe-branch-card[aria-pressed="true"] .fe-branch-preview--standard,
  .fe-branch-card[aria-pressed="true"] .fe-branch-preview--furnished {
    background: linear-gradient(148deg, rgba(52,198,244,0.13) 0%, rgba(52,198,244,0.06) 100%);
    border-color: rgba(52,198,244,0.32);
    color: rgba(52,198,244,0.82);
  }
  .fe-branch-card[aria-pressed="true"] .fe-branch-preview--standard::after,
  .fe-branch-card[aria-pressed="true"] .fe-branch-preview--furnished::after {
    background: rgba(52,198,244,0.22);
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART C — Premium OC area selector refinements
     ───────────────────────────────────────────────────────────────────── */
  .mob-oc-area-select {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px 12px;
    gap: 4px;
    background: rgba(6,14,30,0.72);
    border: 1.5px solid rgba(52,198,244,0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .mob-oc-area-select::before {
    content: 'Choose area';
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(52,198,244,0.55);
  }
  .mob-oc-area-select.open {
    border-color: rgba(52,198,244,0.48);
    box-shadow: 0 0 0 2.5px rgba(52,198,244,0.09);
  }
  .mob-oc-area-btn {
    justify-content: space-between;
    gap: 8px;
  }
  .mob-oc-area-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: rgba(245,245,250,0.95);
  }
  .mob-oc-area-list {
    background: rgba(6,14,30,0.96);
  }
  .mob-oc-area-item {
    padding: 13px 18px;
    font-size: 14.5px;
  }
  .mob-oc-area-item:hover,
  .mob-oc-area-item:focus-visible {
    background: rgba(52,198,244,0.07);
    color: rgba(52,198,244,0.92);
  }
  .mob-oc-area-item.active {
    color: rgba(52,198,244,0.97);
    background: rgba(52,198,244,0.09);
    font-weight: 700;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART D — Mobile OC selected targets summary
     ───────────────────────────────────────────────────────────────────── */
  .mob-oc-selected-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
    margin: 6px 12px 0;
    border-radius: 13px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .mob-oc-selected-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .mob-oc-selected-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(180,200,225,0.50);
  }
  .mob-oc-selected-clear {
    font-size: 11px;
    font-weight: 600;
    color: rgba(52,198,244,0.72);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-oc-selected-clear.hidden { display: none; }
  .mob-oc-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 18px;
  }
  .mob-oc-selected-empty {
    font-size: 12.5px;
    color: rgba(180,200,225,0.32);
    font-style: italic;
  }
  .mob-oc-sel-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 10px;
    border-radius: 20px;
    background: rgba(52,198,244,0.11);
    border: 1px solid rgba(52,198,244,0.25);
    font-size: 12px;
    font-weight: 600;
    color: rgba(52,198,244,0.92);
    letter-spacing: -0.01em;
  }
  .mob-oc-sel-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(52,198,244,0.14);
    border: none;
    cursor: pointer;
    color: rgba(52,198,244,0.80);
    font-size: 10px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  /* ─────────────────────────────────────────────────────────────────────
     PART E — Apply-to-all real toggle
     ───────────────────────────────────────────────────────────────────── */
  .mob-apply-all-cb {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .mob-apply-all-track {
    flex-shrink: 0;
    width: 40px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.18);
    position: relative;
    transition: background 0.18s, border-color 0.18s;
  }
  .mob-apply-all-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(200,218,240,0.60);
    transition: transform 0.18s cubic-bezier(.4,0,.2,1), background 0.18s;
  }
  .mob-apply-all-cb:checked ~ .mob-apply-all-track {
    background: rgba(52,198,244,0.28);
    border-color: rgba(52,198,244,0.52);
  }
  .mob-apply-all-cb:checked ~ .mob-apply-all-track .mob-apply-all-thumb {
    transform: translateX(16px);
    background: rgba(52,198,244,1.0);
  }
}

/* ── Part A: honour prefers-reduced-motion ── */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #mob-btn-settings { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE + DESKTOP BRANCH PREVIEW CARDS
   Upgrades Standard / Furnished branch selection with real photo previews.
   Assets: /assets/branch-previews/standard-empty-villa.webp  → Standard
           /assets/branch-previews/furnished-villa-interior.webp → Furnished
   All assets are local. No external URLs. Desktop and mobile both upgraded.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Core: photo fills the preview span absolutely ─────────────────────── */
.fe-branch-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  border-radius: inherit;
  opacity: 0.88;
  filter: saturate(0.90) brightness(0.96);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1),
              filter   0.28s ease,
              opacity  0.28s ease;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* Per-image crop: standard shows empty floor area, furnished centres on seating */
.fe-branch-card-photo--standard  { object-position: center 55%; }
.fe-branch-card-photo--furnished { object-position: center 45%; }

/* ── Dark gradient overlay sits above photo, below text ─────────────────── */
.fe-branch-card-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(4,10,24,0.04) 0%,
    rgba(4,10,24,0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Remove CSS shape decorators — real photo replaces them ─────────────── */
.fe-branch-preview--standard::after,
.fe-branch-preview--furnished::after {
  content: none;
}

/* ══ DESKTOP (≥ 768px) ══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Side-by-side card row */
  #fe-branch-pills {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* Card container: column flex, vertical photo-then-text layout */
  .fe-branch-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: auto;
    gap: 0;
    border-radius: 14px;
    border: 1.5px solid rgba(100,130,180,0.22);
    background: rgba(8,14,28,0.76);
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.22s ease,
                box-shadow   0.22s ease,
                transform    0.22s ease;
  }

  .fe-branch-card:hover {
    border-color: rgba(135,170,220,0.42);
    box-shadow: 0 5px 24px rgba(0,0,0,0.24);
    transform: translateY(-1px);
  }

  .fe-branch-card[aria-pressed="true"] {
    border-color: rgba(52,198,244,0.56);
    background: rgba(8,16,34,0.82);
    box-shadow: 0 0 0 1.5px rgba(52,198,244,0.12),
                0 5px 24px rgba(52,198,244,0.13);
    transform: none;
  }

  /* Desktop photo area: full card width, fixed height */
  .fe-branch-card .fe-branch-card-icon {
    display: block;
    width: 100%;
    min-width: unset;
    height: 116px;
    min-height: 116px;
    border-radius: 0;
    border: none;
    background: rgba(8,12,22,0.90);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Desktop text area */
  .fe-branch-card .fe-branch-card-body {
    padding: 10px 13px 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
  }

  .fe-branch-card .fe-branch-card-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(245,245,247,0.94);
  }

  .fe-branch-card .fe-branch-card-desc {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: rgba(185,205,230,0.48);
    margin-top: 3px;
    line-height: 1.44;
    white-space: normal;
  }

  .fe-branch-card[aria-pressed="true"] .fe-branch-card-label {
    color: rgba(52,198,244,1.0);
  }

  .fe-branch-card[aria-pressed="true"] .fe-branch-card-desc {
    color: rgba(52,198,244,0.58);
  }

  /* Hover: subtle photo zoom + brightness lift */
  .fe-branch-card:hover .fe-branch-card-photo {
    transform: scale(1.06);
    opacity: 0.96;
    filter: saturate(0.95) brightness(1.00);
  }

  /* Selected: photo fully vivid */
  .fe-branch-card[aria-pressed="true"] .fe-branch-card-photo {
    opacity: 0.96;
    filter: saturate(0.95) brightness(1.00);
  }

  /* Keyboard focus-visible */
  .fe-branch-card:focus-visible {
    outline: 2px solid rgba(52,198,244,0.72);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(52,198,244,0.10);
  }
}

/* ══ MOBILE (≤ 767px) ══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Ensure row flex layout works on mobile */
  .fe-branch-card {
    display: flex;
  }

  /* Upgrade preview thumbnail: larger square with proper positioning */
  .fe-branch-card .fe-branch-card-icon {
    width: 76px;
    min-width: 76px;
    height: 76px;
    min-height: 76px;
    border-radius: 13px;
    border: none;
    background: rgba(8,12,22,0.90);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Tap feedback: subtle photo zoom */
  .fe-branch-card:active .fe-branch-card-photo {
    transform: scale(1.07);
    opacity: 0.96;
    filter: saturate(0.94) brightness(0.99);
  }

  /* Selected photo: fully vivid on mobile */
  .fe-branch-card[aria-pressed="true"] .fe-branch-card-photo {
    opacity: 0.96;
    filter: saturate(0.95) brightness(1.00);
  }

  /* Clearer description on mobile */
  .fe-branch-card .fe-branch-card-desc {
    font-size: 11.5px;
    line-height: 1.38;
    white-space: normal;
  }

  /* Keyboard focus-visible on mobile */
  .fe-branch-card:focus-visible {
    outline: 2px solid rgba(52,198,244,0.72);
    outline-offset: 2px;
  }
}

/* ── Reduced motion: disable all transitions and transforms ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .fe-branch-card,
  .fe-branch-card-photo {
    transition: none !important;
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREMIUM AI MOVING EDGE SYSTEM
   Reusable glow-edge animation for Studio buttons, cards, and controls.
   Design language: subtle cyan/blue breathing edge — premium, AI-powered,
   not noisy. Box-shadow animation keeps layout unchanged. Scan-line on CTA
   creates the "moving edge" feel. All disabled states are excluded.
   Performance: long durations (3–5 s), GPU-friendly properties only.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared keyframes ─────────────────────────────────────────────────── */

/* Subtle idle pulse — inactive controls, mode cards */
@keyframes fe-glow-pulse {
  0%,  100% { box-shadow: 0 0 0 1px rgba(52,198,244,0.10), 0 2px 8px rgba(52,198,244,0.04); }
  50%        { box-shadow: 0 0 0 1px rgba(52,198,244,0.24), 0 3px 14px rgba(52,198,244,0.09); }
}

/* Stronger breathing pulse — active/selected controls, primary CTA */
@keyframes fe-glow-pulse-cta {
  0%,  100% { box-shadow: 0 0 0 1.5px rgba(52,198,244,0.22), 0 4px 18px rgba(52,198,244,0.10); }
  50%        { box-shadow: 0 0 0 2px   rgba(52,198,244,0.48), 0 6px 26px rgba(52,198,244,0.20); }
}

/* Horizontal scan-line sweep — primary CTA "moving edge" effect */
@keyframes fe-scan-line {
  0%         { left: -45%; opacity: 0; }
  8%         { opacity: 1; }
  92%        { opacity: 1; }
  100%       { left: 145%; opacity: 0; }
}

/* ── Primary CTA buttons ──────────────────────────────────────────────── */

.btn-primary:not(:disabled):not(:hover) {
  animation: fe-glow-pulse-cta 3.4s ease-in-out infinite;
}

.btn-primary:not(:disabled) {
  position: relative;
  overflow: hidden;
}

.btn-primary:not(:disabled)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 36%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent);
  animation: fe-scan-line 5.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

.btn-primary:disabled { animation: none !important; }
.btn-primary:disabled::after { display: none; }

/* ── Mode selector cards ──────────────────────────────────────────────── */

.mode-card:not(.disabled):not(:hover) {
  animation: fe-glow-pulse 5s ease-in-out infinite;
}
.mode-card.active:not(.disabled):not(:hover) {
  animation: fe-glow-pulse-cta 3.2s ease-in-out infinite;
}
.mode-card.disabled { animation: none !important; }

/* ── Scene Type + Interior Style pills (non-branch) ──────────────────── */

.fe-pill:not(.fe-branch-card):not(:hover) {
  animation: fe-glow-pulse 5.5s ease-in-out infinite;
}
.fe-pill:not(.fe-branch-card)[aria-pressed="true"]:not(:hover) {
  animation: fe-glow-pulse-cta 3.2s ease-in-out infinite;
}

/* ── Branch preview cards ─────────────────────────────────────────────── */

.fe-branch-card[aria-pressed="true"]:not(:hover) {
  animation: fe-glow-pulse-cta 3.2s ease-in-out infinite;
}

/* ── Object Cleanup apply button ──────────────────────────────────────── */

.oc-btn-apply:not(:disabled):not(:hover) {
  animation: fe-glow-pulse-cta 3.4s ease-in-out infinite;
}
.oc-btn-apply:disabled { animation: none !important; }

/* ── Mobile bottom CTA ────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .mob-bar-cta:not(:disabled) {
    animation: fe-glow-pulse-cta 3.4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
  }
  .mob-bar-cta:not(:disabled)::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 36%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
    animation: fe-scan-line 6s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
  }
  .mob-bar-cta:disabled { animation: none !important; }
  .mob-bar-cta:disabled::after { display: none; }
}

/* ── Reduced motion: disable all moving effects ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary::after,
  .mode-card,
  .fe-pill,
  .fe-branch-card,
  .oc-btn-apply,
  .mob-bar-cta,
  .mob-bar-cta::after {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE MODE COMMAND DECK
   position:absolute overlay at bottom of .ws-center — image stays full height.
   Scrim gradient bleeds image into the glass panel. No dead gap possible.
   Desktop: always hidden. Mobile: visible when mob-deck--visible is added.
══════════════════════════════════════════════════════════════════════════════ */

/* Desktop/tablet: always hidden */
#mob-deck { display: none; }

@media (max-width: 767px) {

  /* ── Deck outer shell — absolute overlay, bottom of center area ── */
  #mob-deck.mob-deck--visible {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    min-height: var(--mob-deck-min-h);
    border-top: 1px solid var(--pb-blue-border);
  }

  /* ── Scrim — image fades into glass ── */
  .mob-deck-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 110px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(8, 12, 20, 0.55) 55%,
      rgba(8, 12, 20, 0.88) 100%
    );
    pointer-events: none;
  }

  /* ── Glass deck panel — rounded top, blur ── */
  .mob-deck-glass {
    position: relative;
    border-radius: 28px 28px 0 0;
    background: rgba(10, 14, 22, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    overflow: hidden;
    padding: 12px 0 calc(8px + env(safe-area-inset-bottom));
  }

  /* Top sheen hairline inside glass panel */
  .mob-deck-glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.20), transparent);
    pointer-events: none;
  }

  /* ── Horizontal segmented mode switch ── */
  .mob-deck-rail {
    display: flex;
    flex-direction: row;
    gap: 3px;
    margin: 0 14px 12px;
    padding: 3px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid var(--pb-border);
    position: relative;
  }

  .mob-deck-rail-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border: none;
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: rgba(238, 238, 238, 0.46);
    min-height: 44px;
    position: relative;
    z-index: 1;
    transition: color 0.20s ease;
    letter-spacing: -0.01em;
  }

  .mob-deck-rail-btn.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(0,136,204,0.26), rgba(0,136,204,0.14));
    border: 1px solid var(--pb-blue-border);
    box-shadow: 0 4px 14px rgba(0, 136, 204, 0.16);
  }

  .mob-deck-rail-btn:focus-visible {
    outline: 2px solid var(--pb-blue-border);
    outline-offset: -2px;
  }

  .mob-deck-rail-icon {
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
  }

  .mob-deck-rail-label {
    font-size: 13px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
  }

  /* Hide Editor/Creative/Design rail when result is done — result pane replaces it */
  .mob-deck.mob-deck--result-done .mob-deck-rail { display: none; }

  /* ── Panes container ──────────────────────────────────────────── */
  .mob-deck-panes {
    min-width: 0;
    overflow: hidden;
  }

  .mob-deck-pane {
    animation: deck-fade-in 0.40s ease both;
  }

  /* ── Editor / Creative: horizontal scrollable card row ──────────── */
  #mob-deck-pane-editor,
  #mob-deck-pane-creative {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px 2px;
  }

  #mob-deck-pane-editor::-webkit-scrollbar,
  #mob-deck-pane-creative::-webkit-scrollbar { display: none; }

  /* ── Option cards (140px fixed-width, scrollable, icon+meta+check) ── */
  .mob-deck-opt {
    flex: none;
    width: 140px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--pb-border);
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    overflow: hidden;
    position: relative;
    transition: border-color 0.20s, background 0.20s, transform 0.15s;
    min-height: 44px;
  }

  .mob-deck-opt:active { transform: scale(0.97); }

  .mob-deck-opt[aria-pressed="true"],
  .mob-deck-opt.active {
    border-color: var(--pb-blue-border);
    background: rgba(0, 136, 204, 0.14);
    box-shadow: 0 0 0 1px var(--pb-blue-border), 0 6px 20px rgba(0,136,204,0.16);
  }

  .mob-deck-opt:focus-visible {
    outline: 2px solid var(--pb-blue-border);
    outline-offset: 2px;
  }

  /* Icon placeholder — accent-tinted radial gradient */
  .mob-deck-opt-ph {
    width: 100%;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 120% at 30% 0%, rgba(0,136,204,0.13), transparent 70%);
    color: rgba(238, 238, 238, 0.45);
    flex-shrink: 0;
  }

  .mob-deck-opt[aria-pressed="true"] .mob-deck-opt-ph,
  .mob-deck-opt.active .mob-deck-opt-ph {
    color: var(--pb-blue);
  }

  .mob-deck-opt-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 11px 10px;
  }

  .mob-deck-opt-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .mob-deck-opt[aria-pressed="true"] .mob-deck-opt-name,
  .mob-deck-opt.active .mob-deck-opt-name {
    color: #fff;
  }

  .mob-deck-opt-desc {
    display: block;
    font-size: 11px;
    color: var(--pb-text-muted);
    line-height: 1.35;
  }

  /* Check indicator — appears when card is selected */
  .mob-deck-opt-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pb-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.20s, transform 0.20s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .mob-deck-opt[aria-pressed="true"] .mob-deck-opt-check,
  .mob-deck-opt.active .mob-deck-opt-check {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Empty state ──────────────────────────────────────────────── */
  #mob-deck-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
  }

  .mob-deck-empty-text {
    font-size: 13px;
    color: var(--pb-text-muted);
    text-align: center;
  }

  /* ── Interior Design: chip grid (reference .brief pattern) ── */
  #mob-deck-pane-interior {
    padding: 0 14px;
  }

  .mob-deck-id-brief-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pb-blue);
    opacity: 0.80;
    margin-bottom: 8px;
  }

  .mob-deck-id-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }

  .mob-deck-id-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--pb-border);
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    transition: border-color 0.20s, background 0.20s;
    min-height: 44px;
  }

  .mob-deck-id-chip:last-child {
    grid-column: 1 / -1;
  }

  .mob-deck-id-chip:active,
  .mob-deck-id-chip.guiding {
    border-color: var(--pb-blue-border);
    background: var(--pb-blue-soft);
  }

  .mob-deck-id-chip:focus-visible {
    outline: 2px solid var(--pb-blue-border);
    outline-offset: 2px;
  }

  .mob-deck-id-chip-key {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238, 238, 238, 0.38);
    line-height: 1;
  }

  .mob-deck-id-chip-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.2;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* No horizontal overflow anywhere in deck */
  .mob-deck * { box-sizing: border-box; max-width: 100%; }

  /* ── Inline guidance cue (reference .cue pattern — not floating) ── */
  .mob-deck-cue {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 10px 14px 0;
    padding: 9px 13px;
    border-radius: 13px;
    background: rgba(0, 136, 204, 0.10);
    border: 1px solid var(--pb-blue-border);
    animation: deck-cue-in 0.40s ease both;
  }

  .mob-deck-cue:not(.hidden) {
    display: flex;
  }

  .mob-deck-cue-icon {
    flex-shrink: 0;
    color: var(--pb-blue);
  }

  .mob-deck-cue-text {
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    color: rgba(200, 230, 255, 0.88);
    line-height: 1.35;
  }

  /* ── Section deep-link highlight flash ──────────────────────── */
  .deck-highlight {
    animation: deck-section-flash 0.8s ease-out forwards;
    border-radius: 8px;
  }
}

/* Keyframes — outside media query so always registered */
@keyframes deck-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes deck-cue-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

@keyframes deck-section-flash {
  0%   { box-shadow: 0 0 0 2px var(--pb-blue-border), 0 0 16px rgba(0, 136, 204, 0.28); }
  100% { box-shadow: none; }
}

  /* ── Design deck: premium Style Guide card row ─────────────────── */
  .mob-deck-style-cards {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px 2px;
  }

  .mob-deck-style-cards::-webkit-scrollbar { display: none; }

  .mob-deck-style-card {
    flex: none;
    width: 140px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    border: 1px solid var(--pb-border);
    background: rgba(255, 255, 255, 0.045);
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    overflow: hidden;
    position: relative;
    transition: border-color 0.20s, background 0.20s, transform 0.15s;
    min-height: 44px;
  }

  .mob-deck-style-card:active { transform: scale(0.97); }

  .mob-deck-style-card.active {
    border-color: var(--pb-blue-border);
    background: rgba(0, 136, 204, 0.12);
    box-shadow: 0 0 0 1px var(--pb-blue-border), 0 6px 20px rgba(0,136,204,0.16);
  }

  .mob-deck-style-card:focus-visible {
    outline: 2px solid var(--pb-blue-border);
    outline-offset: 2px;
  }

  .mob-deck-style-card-img {
    width: 100%;
    height: 66px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
  }

  .mob-deck-style-card-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px 8px;
  }

  .mob-deck-style-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .mob-deck-style-card.active .mob-deck-style-card-name { color: #fff; }

  .mob-deck-style-card-sub {
    font-size: 10.5px;
    color: var(--pb-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .mob-deck-style-card-check {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pb-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.20s, transform 0.20s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }

  .mob-deck-style-card.active .mob-deck-style-card-check {
    opacity: 1;
    transform: scale(1);
  }

@media (prefers-reduced-motion: reduce) {
  .mob-deck-cue  { animation: none; }
  .mob-deck-pane { animation: none; }
  .deck-highlight { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE UX FINAL PASS — Issues 1-5
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Issue 2: Premium desktop Apply-to-all toggle (matches mobile glass style) ── */
.rp-apply-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  margin: 6px 0 2px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-sec);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
  text-align: left;
  width: 100%;
}
.rp-apply-all:hover { background: rgba(52,198,244,0.06); border-color: rgba(52,198,244,0.20); color: var(--text); }
.rp-apply-all:active { background: rgba(52,198,244,0.09); }
.rp-apply-all.hidden { display: none; }

/* Desktop defaults for new mobile-only elements */
.mob-strip-del { display: none; }
.ep-ready-count { display: none; }

/* ── Result Ready header — desktop right panel ── */
.rp-result-ready-header {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(52,198,244,0.06);
  border: 1px solid rgba(52,198,244,0.18);
}
.rp-result-ready-header.hidden { display: none; }
.rp-result-ready-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(52,198,244,0.90);
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.rp-result-ready-sub {
  font-size: 11px;
  color: var(--text-sec);
  line-height: 1.4;
}

/* Interior continue editing button — same style as editor/creative */
.rp-ce-btn--interior:hover { border-color: rgba(52,198,244,0.40); background: rgba(52,198,244,0.07); }

/* ── Mobile deck: Result Ready pane ── */

/* ── Download / Export Panel — premium mobile bottom sheet ── */
/* Override the old full-screen mobile rule (line 6614) with proper bottom-sheet */
@media (max-width: 767px) {
  .ep-panel {
    /* Bottom sheet — slides up from bottom, not full screen */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: 85dvh !important;
    transform: none !important;
    /* Premium glass */
    border-radius: 24px 24px 0 0 !important;
    background: rgba(10, 14, 28, 0.97) !important;
    backdrop-filter: blur(28px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
    border: none !important;
    border-top: 1px solid rgba(52,198,244,0.22) !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.55) !important;
    z-index: 250 !important;
  }
  .ep-header {
    padding: 20px 20px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: transparent;
    align-items: flex-start;
  }
  .ep-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
  .ep-subtitle { font-size: 12px; color: var(--text-sec); margin-top: 2px; }
  .ep-ready-count {
    display: inline-block;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(52,198,244,0.85);
    background: rgba(52,198,244,0.10);
    border: 1px solid rgba(52,198,244,0.22);
    border-radius: 20px;
    padding: 2px 10px;
  }
  .ep-body {
    padding: 16px 18px;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .ep-section-label {
    font-size: 10px;
    letter-spacing: 0.08em;
    margin-bottom: 9px;
  }
  /* Download scope (apply-to) — show first, larger targets */
  .ep-apply-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ep-apply-card {
    border-radius: 14px;
    min-height: 52px;
    border: 1.5px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
  }
  .ep-apply-card.ep-apply-selected {
    border-color: rgba(52,198,244,0.55) !important;
    background: rgba(52,198,244,0.10) !important;
    color: rgba(52,198,244,0.95);
    box-shadow: 0 0 0 1px rgba(52,198,244,0.15);
  }
  /* Format cards — compact 2-column */
  .ep-option-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ep-option-card {
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid rgba(255,255,255,0.10);
    padding: 14px 14px;
    transition: border-color 0.15s, background 0.15s;
  }
  .ep-option-card.ep-card-selected {
    border-color: rgba(52,198,244,0.55) !important;
    background: rgba(52,198,244,0.09) !important;
    box-shadow: 0 0 0 1px rgba(52,198,244,0.12);
  }
  .ep-card-icon { display: none; }
  .ep-card-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
  .ep-card-desc { font-size: 11px; line-height: 1.4; }
  /* Sticky footer */
  .ep-footer {
    flex-direction: row;
    padding: 14px 18px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(10,14,28,0.90);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
  }
  .ep-export-btn {
    min-height: 50px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    flex: 1;
    background: var(--pb-blue);
    border: none;
    color: #fff;
  }
  .ep-cancel {
    min-height: 50px;
    border-radius: 14px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.13);
    background: transparent;
    color: var(--text-sec);
    padding: 0 20px;
    flex: 0 0 auto;
  }
  .ep-close-btn { margin-left: auto; flex-shrink: 0; }
  #ep-btn-export[disabled] { opacity: 0.38; }
}