/* =========================================================================
   PREMIUM DARK MODE DESIGN SYSTEM — App Store Screenshot Generator
   Inspired by: Vercel, Linear, Raycast
   ========================================================================= */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-root: #07090D;
  --bg-base: #0D1117;
  --bg-surface: #161B22;
  --bg-raised: #1C2230;
  --bg-overlay: #232D3F;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-focus: rgba(139, 92, 246, 0.6);

  /* Text */
  --text-primary: #E8ECF0;
  --text-secondary: #8B949E;
  --text-muted: #484F58;
  --text-on-accent: #ffffff;

  /* Brand Accents */
  --accent-violet: #8B5CF6;
  --accent-violet-hover: #7C3AED;
  --accent-violet-glow: rgba(139, 92, 246, 0.25);
  --accent-cyan: #22D3EE;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-rose: #F43F5E;

  /* Functional */
  --danger: #EF4444;
  --success: #22C55E;

  /* Layout */
  --sidebar-w: 380px;
  --topbar-h: 52px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-violet: 0 0 20px rgba(139, 92, 246, 0.4);

  /* Transitions */
  --t-fast: all 0.12s ease;
  --t-normal: all 0.22s ease;
  --t-spring: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. RESET & BASE ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-root);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100%;
}

/* Global utilities */
.is-hidden,
[hidden] {
  display: none !important;
}

.aurora,
.coachmark-bubble {
  display: none !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* ── 3. LAYOUT SHELL ──────────────────────────────────────────────────── */
.page-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.workspace {
  display: flex;
  flex: 1;
  width: 100vw;
  overflow: hidden;
}

/* ── 3a. TOP NAVIGATION ────────────────────────────────────────────────── */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 1.5rem;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  z-index: 50;
}

/* ── 3c. HIDE WIZARD FLOW ELEMENTS ────────────────────────────────────── */
.wizard-topbar,
#wizardStepTabs,
.step-progress,
#wizardStepHint,
#wizardStatusLine,
.wizard-options-label,
.wizard-toggle-row {
  display: none !important;
}

/* ── 3b. JS-DRIVEN PREVIEW PANEL SYSTEM ────────────────────────────────── */
/* The JS sets --ui-preview-width and toggles body.preview-open / preview-closed */

/* Default: preview is visible when preview-open */
body.preview-closed .preview-panel {
  display: none;
}

/* When JS sets the CSS var, the preview panel uses it for width */
:root[style*="--ui-preview-width"] .preview-panel {
  flex: none;
  width: var(--ui-preview-width);
}

/* When JS sets it but no --ui-preview-width, fill remaining space */
body.preview-open .preview-panel {
  display: flex;
}

/* Resize handle cursor during drag */
body.preview-resizing {
  cursor: col-resize !important;
}

body.preview-resizing * {
  user-select: none;
  pointer-events: none;
}

body.preview-resizing .preview-resize-handle {
  pointer-events: auto !important;
}

/* ── 4. SIDEBAR ───────────────────────────────────────────────────────── */
.controls-panel {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 20;
  animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

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



.app-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.app-topbar-brand::before {
  content: "";
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-cyan));
  border-radius: var(--r-sm);
  flex-shrink: 0;
  box-shadow: var(--shadow-violet);
}

.app-topbar-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Account button */
.hero-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: var(--t-normal);
}

.hero-account-btn:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.hero-account-btn::before {
  content: "●";
  font-size: 0.5rem;
  color: var(--accent-emerald);
}

/* ── 5. PANEL BLOCKS ──────────────────────────────────────────────────── */
.panel-block {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  animation: fadeInUp 0.4s ease both;
}

.panel-block:nth-child(2) {
  animation-delay: 0.05s;
}

.panel-block:nth-child(3) {
  animation-delay: 0.10s;
}

.panel-block:nth-child(4) {
  animation-delay: 0.15s;
}

.panel-block:nth-child(5) {
  animation-delay: 0.20s;
}

.panel-block:nth-child(6) {
  animation-delay: 0.25s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.panel-block h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.panel-heading h2 {
  margin-bottom: 0;
}

.panel-heading-actions {
  display: flex;
  gap: 0.375rem;
}

.panel-help,
.control-helper,
.workflow-note {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.stack-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.stack-title h2 {
  margin-bottom: 0;
}

#shotCount {
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-full);
}

/* ── 6. MAIN CANVAS / PREVIEW ─────────────────────────────────────────── */
.preview-panel {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-root);
  position: relative;
  overflow: hidden;
}

/* Dot-grid */
.preview-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Radial glow in center of canvas */
.preview-panel::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 500px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Preview Topbar */
.preview-topbar {
  position: relative;
  z-index: 5;
  padding: 0 1.5rem;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.preview-topbar-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.preview-topbar h2 {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.preview-close-btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: var(--t-fast);
}

.preview-close-btn:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.preview-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.preview-control select,
.preview-control input[type="range"] {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--r-sm);
  font-family: inherit;
}

.preview-reset-btn {
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--t-fast);
}

.preview-reset-btn:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}

#previewZoomValue {
  font-size: 0.75rem;
  color: var(--text-muted);
  min-width: 32px;
}

.preview-canvas-wrap {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  overflow: auto;
}

.preview-rail {
  margin: auto;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
}

/* ── 6a. PREVIEW CARDS (WORKSPACE ITEMS) ────────────────────────────────── */
.preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: var(--t-spring);
  cursor: pointer;
}

.preview-canvas {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  transition: var(--t-spring);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.preview-card:hover {
  transform: translateY(-8px);
}

.preview-card:hover .preview-canvas {
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.15);
}

.preview-card.active .preview-canvas {
  box-shadow: 0 0 0 3px var(--accent-violet-glow), var(--shadow-lg);
  border-color: var(--accent-violet);
}

.preview-card-label {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--t-fast);
  background: var(--bg-surface);
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
}

.preview-card:hover .preview-card-label,
.preview-card.active .preview-card-label {
  color: var(--text-primary);
  border-color: var(--border-default);
}

.preview-note {
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.5rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  background: rgba(13, 17, 23, 0.6);
  backdrop-filter: blur(8px);
}

/* ── 7. FORM CONTROLS (Premium) ───────────────────────────────────────── */
.field-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  color: var(--text-primary);
}

.wide {
  grid-column: 1 / -1;
}

/* Text + Select inputs */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  transition: var(--t-normal);
  line-height: 1.4;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-violet);
  box-shadow: 0 0 0 3px var(--accent-violet-glow);
  background: var(--bg-overlay);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%238B949E' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  cursor: pointer;
}

select option {
  background: var(--bg-overlay);
}

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

/* Checkbox — Toggle style */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.25rem;
  height: 1.25rem;
  background: var(--bg-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  cursor: pointer;
  position: relative;
  transition: var(--t-normal);
  flex-shrink: 0;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: var(--t-spring);
}

input[type="checkbox"]:checked {
  background: var(--accent-violet);
  border-color: var(--accent-violet);
}

input[type="checkbox"]:checked::after {
  left: calc(2.25rem - 15px);
  background: white;
}

/* Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  background: var(--bg-overlay);
  border-radius: var(--r-full);
  outline: none;
  cursor: pointer;
  border: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-base);
  border: 2px solid var(--accent-violet);
  box-shadow: 0 0 8px var(--accent-violet-glow);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 14px var(--accent-violet-glow);
}

input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--accent-violet-glow);
}

/* Color picker */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 36px;
  padding: 2px;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--t-fast);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: var(--r-sm);
}

input[type="color"]:hover {
  border-color: var(--border-strong);
}

/* ── 8. BUTTONS ───────────────────────────────────────────────────────── */
button {
  font-family: inherit;
}

.btn,
.tiny-btn,
.panel-chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5625rem 1rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--t-normal);
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary — Violet gradient */
.btn-primary,
.tiny-btn-primary,
.btn-tone-primary {
  background: linear-gradient(135deg, var(--accent-violet), #6366F1);
  color: white;
  border: none;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
}

.btn-primary:hover,
.tiny-btn-primary:hover,
.btn-tone-primary:hover {
  background: linear-gradient(135deg, var(--accent-violet-hover), #4F46E5);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

.btn-primary:active,
.tiny-btn-primary:active,
.btn-tone-primary:active {
  transform: translateY(0);
}

/* Secondary */
.btn-secondary,
.btn-tone-neutral,
.btn-tone-secondary {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.btn-secondary:hover,
.btn-tone-neutral:hover,
.btn-tone-secondary:hover {
  background: var(--bg-overlay);
  border-color: var(--border-strong);
}

/* Accent (teal) */
.btn-tone-accent {
  background: rgba(34, 211, 238, 0.12);
  color: var(--accent-cyan);
  border-color: rgba(34, 211, 238, 0.25);
}

.btn-tone-accent:hover {
  background: rgba(34, 211, 238, 0.2);
  border-color: rgba(34, 211, 238, 0.4);
}

/* Danger */
.btn-tone-danger,
.tiny-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.25);
}

.btn-tone-danger:hover,
.tiny-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Size variants */
.tiny-btn {
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
  border-radius: var(--r-sm);
}

/* Chip buttons */
.panel-chip-btn {
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-default);
}

.panel-chip-btn:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.panel-chip-btn[aria-pressed="true"],
.panel-chip-btn[data-state="On"] {
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent-violet);
  border-color: rgba(139, 92, 246, 0.35);
}

/* Step continue buttons */
.step-next-row {
  margin-top: 1rem;
}

.step-primary-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ── 9. DROPZONE ──────────────────────────────────────────────────────── */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  background: var(--bg-raised);
  border: 1.5px dashed var(--border-default);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: var(--t-spring);
  text-align: center;
  padding: 1.5rem 1.25rem;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
}

.dropzone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.dropzone:hover::before {
  opacity: 1;
}

.dropzone:hover {
  border-color: var(--accent-violet);
  background: rgba(139, 92, 246, 0.06);
  transform: scale(1.005);
}

.dropzone input[type="file"] {
  display: none;
}

.dropzone span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-violet);
  pointer-events: none;
}

.dropzone small {
  font-size: 0.6875rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* upload icon */
.dropzone::after {
  content: "↑";
  font-size: 1.5rem;
  color: var(--accent-violet);
  opacity: 0.6;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 300;
  transition: var(--t-spring);
  pointer-events: none;
}

.dropzone:hover::after {
  transform: translateX(-50%) translateY(-3px);
  opacity: 1;
}

.dropzone span {
  margin-top: 1.75rem;
  pointer-events: none;
}

/* ── 10. SHOT ITEMS ───────────────────────────────────────────────────── */
.shot-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shot-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: grab;
  transition: var(--t-normal);
  position: relative;
}

.shot-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-overlay);
  transform: translateX(2px);
}

.shot-item.active {
  border-color: var(--accent-violet);
  background: rgba(139, 92, 246, 0.08);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3);
}

.shot-item::before {
  content: "⠿";
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1;
  flex-shrink: 0;
  cursor: grab;
}

.shot-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
}

.shot-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.shot-meta strong {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shot-meta small {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Drag & Drop Feedback */
.shot-item.dragging {
  opacity: 0.4;
  border-style: dashed;
  background: transparent;
}

.shot-item.drop-before {
  border-top-color: var(--accent-violet);
  box-shadow: inset 0 2px 0 var(--accent-violet);
}

.shot-item.drop-after {
  border-bottom-color: var(--accent-violet);
  box-shadow: inset 0 -2px 0 var(--accent-violet);
}

.shot-remove {
  opacity: 0;
  padding: 0.25rem;
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: var(--t-fast);
  font-size: 0.75rem;
}

.shot-item:hover .shot-remove {
  opacity: 1;
}

/* ── 11. WIZARD NAV ───────────────────────────────────────────────────── */
.wizard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.step-counter {
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--bg-raised);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
}

.wizard-step-tabs {
  display: flex;
  background: var(--bg-raised);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
}

.wizard-step-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-spring);
  white-space: nowrap;
}

.wizard-step-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-overlay);
}

.wizard-step-tab.active {
  background: var(--accent-violet);
  color: white;
  box-shadow: var(--shadow-sm);
}

.wizard-step-index {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  font-size: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.wizard-step-tab:not(.active) .wizard-step-index {
  background: var(--bg-overlay);
  color: var(--text-muted);
}

/* Step progress */
.step-progress {
  margin-top: 0.75rem;
  height: 2px;
  background: var(--bg-overlay);
  border-radius: var(--r-full);
  overflow: hidden;
}

#wizardStepProgressFill,
#stepProgressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-cyan));
  border-radius: var(--r-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.wizard-options-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.wizard-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* ── 12. MODE TABS ────────────────────────────────────────────────────── */
.legacy-control-stack {
  display: none;
}

.focus-tabs {
  display: flex;
  background: var(--bg-raised);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
}

.focus-tab {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--t-spring);
}

.focus-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-overlay);
}

.focus-tab.active {
  background: var(--bg-overlay);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-default);
}

/* ── 13. TEMPLATE CHIP RAIL ───────────────────────────────────────────── */
.template-chip-rail,
.font-chip-rail {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}

.template-chip,
.font-chip {
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  cursor: pointer;
  color: var(--text-secondary);
  transition: var(--t-fast);
}

.template-chip:hover,
.font-chip:hover {
  background: var(--bg-overlay);
  color: var(--text-primary);
}

.template-chip.active,
.font-chip.active {
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent-violet);
  border-color: rgba(139, 92, 246, 0.4);
}

.template-switcher-tools {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.template-switcher-tools input[type="text"] {
  flex: 1;
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
}

/* ── 14. SIZE OPTIONS ─────────────────────────────────────────────────── */
.size-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.size-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.68rem;
  color: var(--text-secondary);
  position: relative;
  overflow: hidden;
}

.size-option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(34, 211, 238, 0.05));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.size-option:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.size-option:hover::before {
  opacity: 1;
}

.size-option.selected {
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--accent-violet);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.15), inset 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.size-option.selected::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), transparent);
}

.size-option input[type="checkbox"] {
  accent-color: var(--accent-violet);
}

/* ── 15. WORKFLOW GRID (Removed) ────────────────────────────────────────────────── */

/* Workflow notes — smaller and subtler */
.workflow-note {
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ── 16. TYPOGRAPHY PANEL ─────────────────────────────────────────────── */
.font-target-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.font-target-tabs {
  display: flex;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  overflow: hidden;
  flex: 1;
}

.font-target-tab {
  flex: 1;
  padding: 0.4375rem 0.625rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  transition: var(--t-fast);
}

.font-target-tab.active {
  background: var(--accent-violet);
  color: white;
}

.font-current-badge {
  font-size: 0.625rem;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
}

.font-current-badges {
  display: flex;
  gap: 0.375rem;
}

.typography-control-group {
  padding: 0.75rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  margin-bottom: 0.75rem;
}

.typography-group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.typography-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 17. EXPORT ACTIONS ───────────────────────────────────────────────── */
.actions {
  padding: 0.875rem 1rem;
  background: linear-gradient(180deg, transparent 0%, var(--bg-root) 100%);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  flex-shrink: 0;
}

/* Hero export button — gradient with animated shine */
.actions .btn-primary {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--accent-violet), #6366F1, var(--accent-cyan));
  background-size: 200% 200%;
  animation: exportShine 4s ease-in-out infinite;
  border: none;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.actions .btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%);
  animation: exportShimmer 3s ease-in-out infinite;
}

@keyframes exportShine {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes exportShimmer {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }

  100% {
    transform: translateX(100%) rotate(25deg);
  }
}

.actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Secondary export button — subtle outline */
.actions .btn-secondary {
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
}

.actions .btn-secondary:hover {
  border-color: var(--accent-violet);
  color: var(--text-primary);
  background: rgba(139, 92, 246, 0.06);
}

/* Status line */
.status {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.25rem 0;
}

/* Billing inline notice */
.export-billing-status-line {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--bg-raised) 60%, transparent);
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  margin-top: 0.5rem;
  text-align: center;
}

/* Paywall block — subtle warning card */
.export-paywall-block {
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--r-lg);
  margin-top: 0.5rem;
}

.export-paywall-block .workflow-note {
  font-size: 0.7rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.billing-action-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}

.billing-action-row .btn {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  padding: 0.45rem 0.6rem;
}

/* ── 18. ACCOUNT MENU ─────────────────────────────────────────────────── */
.hero-side-stack {
  position: relative;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  animation: dropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }

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

.account-menu-header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.account-menu-header h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}

.account-theme-row {
  padding: 0.625rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
}

.account-theme-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.account-theme-btn {
  font-family: inherit;
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  cursor: pointer;
}

.billing-auth-grid {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.billing-auth-grid label {
  gap: 0.375rem;
}

.billing-auth-grid input {
  background: var(--bg-root);
}

.account-menu-billing {
  padding: 0.625rem 1rem 0.875rem;
  border-top: 1px solid var(--border-subtle);
}

.account-menu-billing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.account-menu-billing-head h3 {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.billing-plan-badge {
  font-size: 0.625rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-full);
  font-weight: 600;
}

.billing-plan-badge.free {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.billing-plan-badge.pro {
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent-violet);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.billing-usage {
  font-size: 0.6875rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.billing-promo-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.5rem;
}

.billing-promo-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.billing-feedback {
  padding: 0 1rem 0.5rem;
  font-size: 0.6875rem;
  color: var(--accent-emerald);
}

.account-menu-signed-in {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.billing-logout-btn {
  margin: 0 1rem 0.75rem;
}

.billing-google-section {
  padding: 0 1rem 0.75rem;
}

.billing-google-mount {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.billing-auth-divider {
  text-align: center;
  position: relative;
  margin: 0.5rem 0;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

/* ── 19. QUALITY CHECKS ───────────────────────────────────────────────── */
.quality-checks-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.quality-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: var(--bg-raised);
  border-radius: var(--r-sm);
  font-size: 0.6875rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.quality-check-item.pass {
  border-left: 2px solid var(--success);
}

.quality-check-item.fail {
  border-left: 2px solid var(--danger);
}

/* ── 20. MISC & OVERLAYS ──────────────────────────────────────────────── */
.mobile-preview-toggle {
  display: none !important;
}

.app-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 80;
}

.app-overlay.is-hidden {
  display: none !important;
}

.advanced-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--bg-base);
  z-index: 90;
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-subtle);
}

.advanced-drawer.is-open {
  transform: translateX(0);
}

.advanced-drawer-head {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.advanced-drawer-eyebrow {
  font-size: 0.625rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.advanced-drawer-head h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.advanced-drawer-copy {
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.advanced-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}

/* Style gate block */
.style-gate-block {
  padding: 0.75rem;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-md);
  margin-top: 0.75rem;
}

/* Resize handle */
.preview-resize-handle {
  width: 4px;
  background: var(--border-subtle);
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.2s;
}

.preview-resize-handle:hover {
  background: var(--accent-violet);
}

/* Localization row */
.workflow-localization-controls {
  gap: 0.5rem;
}

/* ── 21. RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 100vw;
  }

  .workspace {
    flex-direction: column;
  }

  .controls-panel {
    width: 100%;
    height: auto;
    min-width: unset;
  }

  .preview-panel {
    display: none;
  }

  .mobile-preview-toggle {
    display: flex !important;
  }
}

/* ── 22. FLOATING HELP POPOVERS ─────────────────────────────────────────── */
.field-help-popover {
  position: absolute;
  z-index: 9999;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xl);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  pointer-events: none;
  font-size: 0.8rem;
  width: max-content;
  max-width: 320px;
  animation: popoverEnter 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popoverEnter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }

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

.field-help-popover[hidden] {
  display: none !important;
}

.field-help-popover-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}

.field-help-popover-body {
  color: var(--text-secondary);
  line-height: 1.4;
  font-size: 0.75rem;
}

/* --- Help Icons Restored per user request --- */
/* Shorten the "Apply Changes To All Shots" toggle labels → replace text via CSS */
.section-apply-toggle .inline-check,
.section-apply-toggle label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  gap: 0.5rem;
}

/* Hide the verbose long text and show a compact version */
.section-apply-toggle .inline-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
}

/* The text node after the checkbox — clip it */
.section-apply-toggle input[type="checkbox"]+* {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Reduce vertical padding in field-grid for denser layout */
.field-grid {
  gap: 0.6rem !important;
}

/* Tighten slider label+track spacing — the label and input group */
.field-grid label:has(input[type="range"]) {
  gap: 0.25rem;
}

/* Compact slider row: label inline with value, track below */
.field-grid label {
  font-size: 0.75rem !important;
  color: var(--text-secondary) !important;
}

/* Make range inputs shorter so they don't feel so heavy */
input[type="range"] {
  height: 20px;
  margin: 0;
}

/* ── Template chip rail: collapse to a scrollable box ────────────────── */
.template-chip-rail {
  max-height: 130px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  position: relative;
  /* fade bottom edge to hint at scroll */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.template-chip-rail:hover {
  mask-image: none;
  -webkit-mask-image: none;
}

/* Compact template-switcher tools bar */
.template-switcher-tools {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.template-switcher-tools input {
  flex: 1;
  min-width: 0;
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
}

.template-switcher-tools .tiny-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
}

/* Smaller template chips */
.template-chip {
  padding: 0.2rem 0.55rem !important;
  font-size: 0.7rem !important;
  border-radius: var(--r-full) !important;
}

/* Compact panel headings */
.panel-heading {
  padding: 0.6rem 1rem 0.4rem !important;
}

.panel-body {
  padding: 0.5rem 1rem 0.75rem !important;
}

/* Compact inline-check (toggle) rows */
.inline-check {
  padding: 0.35rem 0;
}

/* ── Wizard step tabs: smaller and denser ───────────────────────────── */
.wizard-step-btn {
  font-size: 0.72rem !important;
  padding: 0.3rem 0.5rem !important;
  gap: 0.3rem !important;
}

.wizard-step-num {
  width: 16px !important;
  height: 16px !important;
  font-size: 0.65rem !important;
}

/* ── Selected shot thumbnail list ───────────────────────────────────── */
.shot-list {
  gap: 0.4rem !important;
}

.shot-item {
  padding: 0.4rem 0.6rem !important;
}

/* ── Status text bar at bottom of preview ───────────────────────────── */
.preview-status-bar {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* ── Active step hint — keep it but tiny ───────────────────────────── */
#activeStepHint {
  display: block !important;
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  opacity: 0.7;
}

/* ── Compact section dividers / panel-blocks ────────────────────────── */
.controls-panel>.panel-block+.panel-block {
  border-top: 1px solid var(--border-subtle);
}

/* Compact apply-toggle wrapper */
.section-apply-toggle {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Shorten Apply To All Shots labels via CSS text replacement ─────── */
/* Technique: zero out text node size, then inject short label via ::after */
.section-apply-toggle .inline-check {
  font-size: 0 !important;
  /* hide all text nodes */
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
}

/* Restore the checkbox size */
.section-apply-toggle .inline-check input[type="checkbox"] {
  flex-shrink: 0;
}

/* Inject short label using ::after */
.section-apply-toggle .inline-check::after {
  content: "Apply to all shots";
  font-size: 0.72rem;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* ── Slider label: convert to a tighter two-column display ─────────── */
/* Show label on left, value on right, track below */
.field-grid label:has(input[type="range"]) {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.75rem;
  align-items: baseline;
}

.field-grid label:has(input[type="range"]) input[type="range"] {
  grid-column: 1 / -1;
  margin-top: 0.1rem;
}

/* ── Label row with live value badge ────────────────────────────────── */
/* JS injects .label-row wrapping a <span> name + <output class="value-pill"> */
.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.label-row>span:first-child {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live value badge — right-aligned number */
.value-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text-primary);
  background: var(--bg-surface);
  padding: 0.15rem 0.35rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  min-width: 28px;
  text-align: center;
}

/* ── 23. UX POLISH & CLEANUP (Post-Audit) ─────────────────────────── */

/* 1. Hide the legacy primary step buttons (e.g. Jump to Message) */
.step-primary-btn {
  display: none !important;
}

/* 2. Remove the "1. ", "2. ", "3. " numbering from panel blocks */
/* We can't easily target just the number with CSS, so we'll use a specific string replacement or hide them in JS later if this isn't enough. For now, we will leave the headers as they are as they provide structural visual hierarchy alongside the new scroll layout. */

/* 3. Fix shot-item badge and delete button padding */
.shot-item {
  padding-right: 0.75rem !important;
  /* Ensure the badge/button doesn't touch the edge */
}

.shot-badge {
  margin-right: 0.2rem;
}

/* 4. Expert Panel text contrast improvement */
.advanced-drawer-block .panel-description {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  margin-bottom: 1rem;
}

/* 5. Billing Required banner enhancement */
#billingGateNotice {
  background: rgba(245, 158, 11, 0.1) !important;
  /* Amber tint */
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

/* 6. Typography Layout Spacing - give font pickers breathing room */
#fontSelectorsContainer {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}