/* ============================================
   APP-SPECIFIC STYLES
   Layout, header, image area, empty state,
   loading, markers, history, compare slider,
   result actions, error toasts, and more
   ============================================ */

/* ── FundingChoices overlay fix ──────────────────────────────────
   Google FundingChoices injects .fc-consent-root with z-index:2147483644
   and an .fc-dialog-overlay that covers the entire viewport with
   pointer-events:auto. Even for non-EEA users or after consent, the
   overlay persists and blocks ALL clicks. This CSS ensures the overlay
   never blocks when the actual dialog is not visible, while keeping
   the consent dialog itself fully interactive.
   ──────────────────────────────────────────────────────────────── */
.fc-consent-root .fc-dialog-overlay {
  pointer-events: none !important;
}
/* Re-enable pointer events on the actual dialog container (buttons etc.) */
.fc-consent-root .fc-dialog-container {
  pointer-events: auto !important;
}
/* Ensure the consent root itself doesn't block when only overlay remains */
.fc-consent-root {
  pointer-events: none !important;
}
.fc-consent-root * {
  /* Allow clicks on actual dialog elements */
}
.fc-consent-root .fc-dialog-container,
.fc-consent-root .fc-dialog-container * {
  pointer-events: auto !important;
}

/* ============================================
   MAIN APP CONTAINER - Full viewport, no scroll
   ============================================ */
.app {
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Editor mode: fixed viewport, grid layout, no scroll */
.app.has-image {
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "header"
    "image"
    "controls"
    "ad";
}

/* ============================================
   TOP BAR - Compact header
   ============================================ */
.top-bar {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  position: relative;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* Native app-like hide on scroll */
  transition: transform 0.25s var(--ease-standard), opacity 0.25s var(--ease-standard);
  /* Ensure touch events work correctly on mobile */
  touch-action: manipulation;
}

/* Hidden state for mobile scroll behavior */
.top-bar.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Sticky nav on homepage — fixed so it stays visible when scrolling past hero */
.app:not(.has-image) .top-bar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  background: rgba(250, 250, 251, 0.85);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom: 1px solid var(--hairline);
  z-index: 200;
}

/* Nav always visible on mobile (removed hide-until-scroll behavior) */

/* Back button - shown when editing (has image) */
.back-btn {
  display: none;
  align-items: center;
  gap: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 14px;
  margin-left: 0;
  border-radius: 8px;
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.back-btn:hover {
  color: var(--primary);
  background: var(--glow);
  border-color: var(--primary);
}

.back-btn:active {
  transform: scale(0.97);
}

.back-btn svg {
  flex-shrink: 0;
  color: currentColor;
}

/* Show back button when editing */
.app.has-image .back-btn {
  display: flex;
}

/* Ensure top-bar is above editor content but below sheets/modals */
.app.has-image .top-bar {
  position: relative;
  z-index: 150;
  isolation: isolate;
  background: var(--bg);
}

/* Ensure image area stays below top-bar in stacking order */
.app.has-image .image-area {
  z-index: 1;
}

.app.has-image .top-bar * {
  pointer-events: auto;
}

/* Logo - shown on homepage */
.logo {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  text-decoration: none;
}

/* Hide logo when editing (back button takes its place) */
.app.has-image .logo {
  display: none;
}

/* Spacer pushes account button to the right */
.nav-spacer {
  flex: 1;
}

/* ============================================
   CREDITS BUTTON - Pill style
   ============================================ */
.credits-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  min-height: 36px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.credits-btn:hover {
  border-color: var(--primary);
  background: var(--glow);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.credits-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.credits-btn.celebrate {
  animation: celebrateCredits 0.5s var(--ease-out);
}

.credits-btn .free {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
}

.credits-btn .count {
  font-weight: 600;
  color: var(--text);
}

.credits-btn .plus {
  color: var(--primary);
  font-weight: 600;
}

/* Next free edit indicator - shown when user has no credits */
.credits-btn .next-free {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================
   HEADER CREDITS BADGE - Always visible when logged in
   ============================================ */
.header-credits {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border: 1px solid color-mix(in srgb, var(--tone-violet) 18%, transparent);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), transform 0.12s var(--ease-standard), box-shadow 0.18s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.header-credits:hover {
  background: var(--tone-violet-100);
  border-color: var(--tone-violet);
  transform: translateY(-1px);
  box-shadow: var(--shadow-tonal-violet);
}

.header-credits:active {
  transform: scale(0.96);
}

.header-credits-count {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--tone-violet-700);
  font-variant-numeric: tabular-nums;
}

.header-credits-label {
  color: color-mix(in srgb, var(--tone-violet-700) 78%, transparent);
  font-weight: 600;
}

/* Show when logged in */
.app.logged-in .header-credits {
  display: flex;
}

/* ============================================
   THEME TOGGLE - Light/Dark mode switch
   ============================================ */
.theme-toggle[hidden] {
  display: none;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md, 8px);
  transition: color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--text);
  background: var(--bg-secondary, rgba(0,0,0,0.04));
}
.theme-toggle:active {
  transform: scale(0.9);
}

/* In light mode: show sun, hide moon */
.theme-icon-moon { display: none; }
.theme-icon-sun { display: block; }

/* In dark/pro mode: show moon, hide sun */
.app.pro-mode .theme-icon-sun { display: none; }
.app.pro-mode .theme-icon-moon { display: block; }

/* ============================================
   HEADER ANONYMOUS CTA - Sign in + Try Free
   ============================================ */
.header-anon-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 4px;
}

.header-signin {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.header-signin:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.header-pricing-link {
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
}

.header-pricing-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.header-try-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.header-try-free::after { display: none; }
.header-try-free svg { flex-shrink: 0; }

.header-try-free:hover {
  transform: translateY(-1px);
  background: var(--primary-hover);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.header-try-free:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Hide anonymous CTA when logged in */
.app.logged-in .header-anon-cta {
  display: none;
}

/* Hide user avatar button when anonymous (they use the CTA buttons) */
.app:not(.logged-in) .user-btn {
  display: none;
}

/* ============================================
   USER MENU - Button + Dropdown
   ============================================ */
.user-menu-wrapper {
  position: relative;
  z-index: 10003;
}

.user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard), background 0.15s var(--ease-standard);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.user-btn:hover {
  border-color: var(--tone-violet);
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  transform: translateY(-1px);
}

.user-btn:active {
  transform: scale(0.92);
  transition: transform 0.05s var(--ease-standard);
}

.user-btn.logged-in {
  background: var(--tone-violet);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-tonal-violet);
}

.user-btn.logged-in:hover {
  border-color: transparent;
  background: var(--tone-violet-700);
  color: #fff;
  box-shadow: 0 8px 24px rgba(124, 92, 252, 0.40);
}

.user-btn-initials {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  color: inherit;
}

/* User dropdown menu — fixed position to escape overflow:hidden on .app */
.user-dropdown {
  position: fixed;
  width: 280px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.15s var(--ease-standard), visibility 0.15s var(--ease-standard), transform 0.15s var(--ease-standard);
  z-index: 10003;
  overflow: hidden;
}

.user-dropdown.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  /* Opening: snappy pop-in */
  transition: opacity 0.15s var(--ease-standard), visibility 0.15s var(--ease-standard), transform 0.15s cubic-bezier(0.2, 0, 0.13, 1.5);
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--tone-violet-50);
  border-bottom: 1px solid var(--hairline);
}

.dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--tone-violet);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-tonal-violet);
}

.dropdown-user-info {
  min-width: 0;
  flex: 1;
}

.dropdown-email {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.dropdown-plan {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 3px;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin: 0;
}

.dropdown-section {
  padding: 8px;
  background: transparent;
}

.dropdown-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px 4px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s var(--ease-standard), color 0.18s var(--ease-standard);
}

.dropdown-item:hover {
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
}

.dropdown-item svg {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.18s var(--ease-standard);
}

.dropdown-item:hover svg {
  color: var(--tone-violet);
}

.dropdown-item-primary {
  background: var(--primary);
  color: white;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.005em;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
}

.dropdown-item-primary:hover {
  background: var(--primary-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet-lg);
}

.dropdown-item-primary svg {
  color: white;
}

.dropdown-item-primary:hover svg {
  color: white;
}

.dropdown-item-subtle {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.dropdown-item-subtle:hover {
  color: var(--text);
}

.dropdown-item-muted {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 400;
  justify-content: center;
  padding: 8px 12px;
}

.dropdown-item-muted:hover {
  color: var(--primary);
  background: transparent;
}

.dropdown-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

.dropdown-credits {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 8px;
}

.credits-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.credits-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
}

/* Language grid in dropdown */
.lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-chip {
  padding: 6px 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.15s;
}

.lang-chip:hover {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.lang-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

/* NAV CTA - removed in nav redesign, hero handles upload CTA */

/* ============================================
   IMAGE AREA - Fills available space
   ============================================ */
.image-area {
  grid-area: image;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: visible;
  min-height: 0;
  min-width: 0;
  padding: 8px;
  background: var(--bg);
}

/* Editor mode: image area clips content, centers image */
.app.has-image .image-area {
  overflow: hidden;
  justify-content: center;
}

/* Hide ambient glow in dark mode (pro mode has its own treatment) */
.app.pro-mode .image-area::after {
  display: none;
}

/* Homepage: content-sized, not viewport-stretched */
.app:not(.has-image) .image-area {
  flex: none;
  padding-top: calc(64px + var(--safe-top));
}

/* Push hero content down when rate limit banner is visible (it's position:fixed) */
.rate-limit-banner.visible ~ .image-area {
  padding-top: calc(140px + var(--safe-top));
}

/* ============================================
   EMPTY STATE - Premium upload area
   ============================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background: rgba(var(--primary-rgb), 0.06);
  border: 2px dashed rgba(var(--primary-rgb), 0.3);
  border-radius: 16px;
  margin: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  animation: empty-state-breathe 3s var(--ease-in-out) infinite;
}

@keyframes empty-state-breathe {
  0%, 100% { border-color: rgba(var(--primary-rgb), 0.3); }
  50% { border-color: rgba(var(--primary-rgb), 0.55); }
}

.empty-icon {
  color: var(--primary);
  margin-bottom: 20px;
  opacity: 0.7;
}

.empty-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  text-align: center;
}

.empty-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
  max-width: 300px;
  line-height: 1.5;
}

.upload-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  padding: 14px 32px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
  transition: all 0.2s var(--ease-standard);
  animation: cta-glow 2.5s var(--ease-in-out) infinite;
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35); }
  50% { box-shadow: 0 4px 24px rgba(var(--primary-rgb), 0.5); }
}

.empty-state:hover .upload-cta {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.empty-state:active,
.empty-state:active .upload-cta {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.empty-state .hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.75;
}

.social-proof {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin-top: 20px;
  opacity: 0.8;
}

.try-free-text {
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  margin-top: 6px;
}

/* Pulse effect - subtle glow */
.pulse-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  pointer-events: none;
}

.pulse-ring {
  width: 120px;
  height: 120px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  opacity: 0.6;
  animation: pulse-glow 3s var(--ease-in-out) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
}

/* ============================================
   IMAGE CONTAINER - Fills available space
   ============================================ */
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.image-container.visible {
  display: flex;
}

/* Image wrapper - centers image, constrained to container */
.image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
}

/* Current image - scales to fit while maintaining aspect ratio */
#currentImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: opacity 0.3s var(--ease-standard);
}

/* Crossfade: briefly dim before new src is set */
#currentImage.image-transitioning {
  opacity: 0.3;
  transition: opacity 0.2s var(--ease-standard);
}

/* Result image reveal animation */
#currentImage.revealing {
  animation: imageReveal 0.4s var(--ease-out);
}

/* Shimmer loading overlay on image container while edit is processing */
.image-shimmer {
  position: relative;
}
.image-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(26, 26, 46, 0.05) 20%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(26, 26, 46, 0.05) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmerSlide 1.5s var(--ease-in-out) infinite;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
}
@keyframes shimmerSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Original image overlay - positioned over current image for comparison */
#originalImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.15s var(--ease-standard);
  z-index: 5;
  pointer-events: none;
}

#originalImage.show {
  opacity: 1;
}

/* ============================================
   EDIT MARKERS
   ============================================ */
.edit-marker {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 20;
  display: none;
}

.edit-marker.visible {
  display: block;
}

.edit-marker-inner {
  width: 100%;
  height: 100%;
  border: 3px solid var(--marker);
  border-radius: 50%;
  background: var(--marker-bg);
  animation: marker-pulse 1.5s var(--ease-in-out) infinite;
}

.edit-marker-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: var(--marker);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-num {
  font-size: 10px;
  font-weight: 700;
  color: white;
}

.clear-marker-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  z-index: 25;
  display: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s var(--ease-standard);
}

.clear-marker-btn:hover {
  background: white;
  border-color: var(--error);
  color: var(--error);
  transform: scale(1.02);
}

.clear-marker-btn.visible {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================
   LOADING OVERLAY - Elevated AI Processing
   ============================================ */
.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(254, 254, 254, 0.88);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.loading-overlay.visible {
  display: flex;
  animation: loadingFadeIn 0.4s var(--ease-out);
}

@keyframes loadingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Shimmer effect that sweeps across the overlay — violet-tinted */
.loading-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(26, 26, 46, 0.03) 40%,
    rgba(26, 26, 46, 0.05) 50%,
    rgba(26, 26, 46, 0.03) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: loadingShimmer 2.5s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes loadingShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Centered progress card */
.loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 48px;
  background: var(--surface-elevated);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), var(--shadow-tonal-violet);
  position: relative;
  z-index: 1;
  max-width: 320px;
  animation: loadingCardIn 0.5s var(--ease-standard) 0.1s both;
}

@keyframes loadingCardIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Circular progress ring */
.loading-ring {
  width: 100px;
  height: 100px;
  position: relative;
}

.loading-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.loading-ring-bg {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 8;
}

.loading-ring-progress {
  fill: none;
  stroke: var(--tone-violet);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * PI * 45 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.4s var(--ease-standard);
  filter: drop-shadow(0 2px 6px rgba(124, 92, 252, 0.35));
}

.loading-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.loading-percent {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.loading-percent-sign {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Status message */
.loading-message {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  text-align: center;
  animation: loadingPulse 2s var(--ease-in-out) infinite;
}

@keyframes loadingPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Progress stages indicator */
.loading-stages {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 0;
}

.loading-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}

.loading-stage.active {
  opacity: 1;
}

.loading-stage.completed {
  opacity: 0.7;
}

.loading-stage.active .stage-dot {
  background: var(--tone-violet);
  box-shadow: 0 0 0 4px var(--tone-violet-50);
  animation: stagePulse 1.5s var(--ease-in-out) infinite;
}

.loading-stage.completed .stage-dot {
  background: var(--tone-violet);
}

@keyframes stagePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.stage-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: all 0.3s var(--ease-standard);
}

.loading-stage span {
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

.loading-stage.active span {
  color: var(--primary);
}

.loading-stage-line {
  width: 32px;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 18px;
  border-radius: 1px;
  transition: background 0.3s var(--ease-standard);
}

.loading-stage-line.completed {
  background: var(--primary);
}

/* Tip or fun fact */
.loading-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: 12px;
  max-width: 100%;
  animation: tipFadeIn 0.5s var(--ease-out) 0.6s both;
}

@keyframes tipFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.loading-tip-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}

.loading-tip-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   CHANGE PHOTO BUTTON - Floating pill
   ============================================ */
.change-photo-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  z-index: 15;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.change-photo-btn:hover {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BOTTOM CONTROLS - Fixed at bottom
   ============================================ */
.controls {
  grid-area: controls;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface-elevated);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

.controls.hidden {
  display: none;
}

/* ============================================
   EDIT ACTIONS
   ============================================ */
.edit-actions {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-actions.hidden {
  display: none;
}

.action-row {
  display: flex;
  gap: 10px;
}

/* Icon-only button (for change photo) */
.action-row .btn-secondary {
  flex: 0;
  padding: 14px 18px;
  font-size: 1.2rem;
}

/* result-actions replaced by .result-toolbar in components.css */

/* ============================================
   RATE LIMIT BANNER - Shown when 3 free edits/hour exhausted
   Fixed position below header, similar to error toast
   ============================================ */
.rate-limit-banner {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 16px;
  right: 16px;
  max-width: 500px;
  margin: 0 auto;
  z-index: 299;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--tone-amber-50);
  color: var(--tone-amber-700);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 28%, transparent);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  font-family: var(--font-body);
  transition: all 0.3s var(--ease-standard);
}

.rate-limit-banner.visible {
  display: flex;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rate-limit-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.rate-limit-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.rate-limit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rate-limit-title {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--tone-amber-700);
  font-weight: 700;
}

.rate-limit-title strong {
  font-weight: 700;
  color: var(--tone-amber-700);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.rate-limit-subtitle {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--tone-amber-700) 78%, transparent);
}

.rate-limit-btn {
  background: var(--tone-amber-700);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.18s var(--ease-standard), background 0.15s var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}

.rate-limit-btn:hover {
  transform: translateY(-1px);
  background: #92400e;
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.32);
}

@media (max-width: 480px) {
  .rate-limit-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .rate-limit-btn {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   FREE RESOLUTION NOTICE
   Inline notice below prompt for ad-funded users.
   Informs about 1024px cap before they hit submit.
   Fix 2 — PostHog CRO audit Apr 2026.
   ============================================ */
.free-resolution-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tone-amber-700);
  background: var(--tone-amber-50);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 22%, transparent);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  margin-top: 8px;
  line-height: 1.3;
}

.free-resolution-notice a {
  color: var(--tone-amber-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tone-amber) 35%, transparent);
  transition: border-color 160ms var(--ease-standard);
}

.free-resolution-notice a:hover {
  border-bottom-color: var(--tone-amber-700);
}

.free-resolution-notice.hidden {
  display: none;
}

@media (max-width: 768px) {
  .free-resolution-notice {
    font-size: 11.5px;
    padding: 4px 10px;
    gap: 4px;
    margin-top: 6px;
  }
}

/* ============================================
   Out-of-edits inline notice
   Surfaced above the prompt input when user has no credits AND weekly free is used.
   Goal: stop the "type prompt → click send → blocked → repeat" loop seen in sessions.
   ============================================ */
.out-of-edits-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--tone-amber-700);
  background: var(--tone-amber-50);
  border: 1px solid color-mix(in srgb, var(--tone-amber) 35%, transparent);
  border-radius: var(--r-md);
  padding: 8px 10px 8px 12px;
  margin-top: 8px;
  line-height: 1.3;
}

.out-of-edits-notice .oof-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.out-of-edits-notice .oof-text {
  flex: 1;
  min-width: 0;
}

.out-of-edits-notice .oof-cta {
  font-weight: 700;
  color: var(--tone-amber-700);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--tone-amber-100);
  transition: background 160ms var(--ease-standard), transform 120ms var(--ease-standard);
  flex-shrink: 0;
}

.out-of-edits-notice .oof-cta:hover {
  background: color-mix(in srgb, var(--tone-amber) 50%, transparent);
}

.out-of-edits-notice .oof-cta:active {
  transform: scale(0.97);
}

.out-of-edits-notice.hidden {
  display: none;
}

@media (max-width: 768px) {
  .out-of-edits-notice {
    font-size: 12px;
    padding: 6px 8px 6px 10px;
    gap: 8px;
  }
  .out-of-edits-notice .oof-cta {
    padding: 3px 10px;
  }
}

/* Done editing button - shows after "Edit more" */
.done-editing-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s var(--ease-standard);
}

.done-editing-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(26, 26, 46, 0.05);
}

.done-editing-btn.hidden {
  display: none;
}

/* ============================================
   ERROR TOAST
   ============================================ */
.error-toast {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 16px;
  right: 16px;
  background: var(--tone-rose-50);
  color: var(--tone-rose-700);
  border: 1px solid color-mix(in srgb, var(--tone-rose) 26%, transparent);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.3s var(--ease-standard);
  box-shadow: var(--shadow-lg);
}

.error-toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Trust-building technical error toast */
.error-toast.technical-error {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  padding: 16px;
  line-height: 1.4;
}

.technical-error-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.technical-error-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.technical-error-text {
  flex: 1;
}

.technical-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.technical-error-subtitle {
  opacity: 0.95;
  font-size: 0.85rem;
}

/* Retrying spinner animation */
.retrying-spin {
  animation: retrying-spin 1s linear infinite;
}
@keyframes retrying-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Persistent error banner (no auto-dismiss) */
.error-toast.persistent-error {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  padding: 16px;
  line-height: 1.4;
}

.persistent-error-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.persistent-error-text {
  flex: 1;
}

.persistent-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.persistent-error-subtitle {
  opacity: 0.95;
  font-size: 0.85rem;
}

.persistent-error-actions {
  display: flex;
  gap: 8px;
}

.persistent-error-retry {
  background: #fff;
  color: #dc2626;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.persistent-error-retry:hover {
  opacity: 0.9;
}

.persistent-error-dismiss {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.persistent-error-dismiss:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Content safety variant */
.content-safety-error .persistent-error-title {
  font-size: 0.95rem;
}

.safety-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.safety-suggestion {
  background: var(--bg-secondary, rgba(255,255,255,0.1));
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.15));
  color: var(--text, #fff);
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}

.safety-suggestion:hover {
  background: var(--bg-tertiary, rgba(255,255,255,0.18));
  border-color: var(--border, rgba(255,255,255,0.25));
}

/* ============================================
   TOAST CONTAINER - Dynamic stacking toasts
   ============================================ */
.toast-container {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 310;
  width: calc(100% - 32px);
  max-width: 400px;
  pointer-events: none;
}

.toast {
  padding: 12px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: white;
  pointer-events: auto;
  animation: toast-enter 0.35s var(--ease-out) forwards;
  box-shadow: var(--shadow-lg);
}

.toast--success {
  background: var(--tone-emerald);
}

.toast--warning {
  background: var(--tone-amber);
  color: var(--tone-amber-700);
}

.toast--info {
  background: var(--tone-violet);
}

.toast.exiting {
  animation: toast-exit 0.25s var(--ease-out) forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-exit {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

/* Swipeable toast notifications */
.toast, .error-toast {
  touch-action: pan-y;
}
.toast.swiping, .error-toast.swiping {
  transition: none !important;
}

/* ============================================
   SAVE SUCCESS ANIMATION
   ============================================ */
.save-success-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
}

.save-success-check {
  width: 64px;
  height: 64px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: saveCheckPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  box-shadow: 0 4px 24px rgba(16, 185, 129, 0.4);
}

.save-success-check svg {
  width: 32px;
  height: 32px;
  stroke: white;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes saveCheckPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.save-success-overlay.fade-out {
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

/* ============================================
   EDIT HISTORY - Polished timeline strip
   ============================================ */
.history-strip {
  display: none;
  padding: 12px 0;
  flex-shrink: 0;
}

.history-strip.visible {
  display: block;
}

.history-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px;
}

.history-scroll::-webkit-scrollbar {
  display: none;
}

.history-items {
  display: flex;
  gap: 10px;
  align-items: center;
  /* Container is not interactive - items inside are */
  cursor: default;
}

.history-item {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1.5px solid var(--hairline);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: rgba(124, 92, 252, 0.15);
  user-select: none;
  -webkit-user-select: none;
}

.history-item.active {
  border-color: var(--tone-violet);
  box-shadow: 0 0 0 3px var(--tone-violet-50), var(--shadow-tonal-violet);
  transform: scale(1.08);
}

.history-item:not(.active):hover {
  border-color: color-mix(in srgb, var(--tone-violet) 32%, transparent);
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-md);
}

/* Active/pressed state for click feedback */
.history-item:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.05s var(--ease-standard), box-shadow 0.05s var(--ease-standard);
}

.history-item.active:active {
  transform: scale(1.02);
}

/* Focus state for accessibility and keyboard navigation */
.history-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}

.history-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s var(--ease-standard);
  /* Let clicks pass through to parent */
  pointer-events: none;
}

.history-item:hover img {
  transform: scale(1.05);
}

.history-item .step-num {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: white;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  /* Let clicks pass through to parent */
  pointer-events: none;
}

.history-item.original .step-num {
  background: linear-gradient(135deg, var(--primary), #9f8cf7);
}

.history-prompt {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 6px 16px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ============================================
   BEFORE/AFTER COMPARISON SLIDER
   ============================================ */
.compare-slider-container {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 10;
  pointer-events: none;
}

.compare-slider-container.visible {
  display: block;
  pointer-events: auto;
}

.compare-slider-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.compare-slider-clip img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.compare-slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tone-violet);
  cursor: ew-resize;
  z-index: 15;
  box-shadow: 0 0 12px rgba(124, 92, 252, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.compare-slider-handle::before,
.compare-slider-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38px;
  height: 38px;
  background: white;
  border: 2px solid var(--tone-violet);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-tonal-violet);
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-slider-handle::before {
  left: -19px;
  transform: translateY(-50%);
}

.compare-slider-handle::after {
  display: none;
}

.compare-slider-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: white;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-tonal-violet);
  border: 2px solid var(--tone-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--tone-violet-700);
  pointer-events: none;
}

.compare-slider-label {
  position: absolute;
  top: 12px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: white;
  font-size: 0.7rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  z-index: 5;
}

.compare-slider-label.before {
  left: 12px;
}

.compare-slider-label.after {
  right: 12px;
}

/* After image - background layer */
.compare-after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

.compare-slider-clip {
  z-index: 2;
}

/* Floating compare button on image */
.compare-float-btn {
  display: none;
  position: absolute;
  bottom: 50px;
  left: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding: 10px 14px;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  transition: all 0.2s var(--ease-standard);
  z-index: 10;
}

/* Show only when there's a result - with attention animation */
body.has-result .compare-float-btn {
  display: inline-flex;
  animation: compare-btn-pop 0.5s var(--ease-out) 0.5s both;
}

/* ============================================
   RESULT STATE - Global (all viewports)
   Hide pre-edit guidance when viewing a result
   ============================================ */
body.has-result .rate-limit-banner {
  display: none !important;
}

@keyframes compare-btn-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.compare-float-btn:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.compare-float-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.compare-float-btn svg {
  opacity: 0.9;
}

/* Before/After label pill (double-tap toggle on mobile) */
.before-after-label {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: white;
  padding: 5px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
  z-index: 10;
}
.before-after-label.visible {
  opacity: 1;
}

/* ============================================
   HOMEPAGE CONTENT SECTION
   ============================================ */

/* Hide homepage content, dashboard, and footer when in editor mode (image uploaded) */
.app.has-image ~ .homepage-content,
.app.has-image ~ .dashboard-section,
.app.has-image ~ .seo-footer {
  display: none;
}

/* Hide hero sections inside image-area when editing — they're siblings of image-container
   in the DOM and bleed through on mobile if not explicitly hidden */
.app.has-image .hero-dropzone,
.app.has-image .empty-state,
.app.has-image .answer-capsule {
  display: none !important;
}

/* Hide homepage content for pSEO CTA arrivals (?task= param).
   Applied synchronously by early.js to prevent flash of homepage content. */
html.task-mode .homepage-content,
html.task-mode .seo-footer {
  display: none;
}

.homepage-content {
  background: var(--bg);
  overflow-x: hidden;
  width: 100%;
}

/* ============================================
   Popular strip — high-CVR pSEO surfacing
   ============================================ */
.popular-strip {
  padding: 48px 24px 24px;
  background: var(--bg);
}

.popular-strip-inner,
.workflow-strip-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.popular-strip-header,
.workflow-strip-header {
  text-align: center;
  margin-bottom: 28px;
}

.popular-strip-eyebrow,
.workflow-strip-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}

.popular-strip-title,
.workflow-strip-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.025em;
}

.popular-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.popular-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 18px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
  position: relative;
}

.popular-card:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.popular-card-kicker {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-violet-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.popular-card-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.popular-card-arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 0.18s ease, color 0.18s ease;
}

.popular-card:hover .popular-card-arrow {
  transform: translateX(3px);
  color: var(--tone-violet);
}

/* ============================================
   Workflow strip — industry hubs
   ============================================ */
.workflow-strip {
  padding: 40px 24px 48px;
  background: var(--bg);
}

.workflow-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.workflow-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.workflow-card:hover {
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.workflow-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  margin-bottom: 4px;
  transition: transform 0.18s ease;
}

.workflow-card:hover .workflow-card-icon {
  transform: scale(1.05);
}

.workflow-card-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
}

.workflow-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .popular-strip-grid,
  .workflow-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .popular-strip,
  .workflow-strip {
    padding: 32px 16px;
  }
  .popular-strip-title,
  .workflow-strip-title {
    font-size: 1.3rem;
  }
  .popular-strip-grid,
  .workflow-strip-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .popular-card {
    padding: 16px;
  }
  .workflow-card {
    padding: 16px;
  }
}

/* Section Bands - Full-width sections with contained content */
.section-band {
  padding: 56px 24px;
}

.section-band-subtle {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 24px; /* Tighter for testimonial */
}

@media (max-width: 768px) {
  .section-band-subtle {
    padding: 24px 16px;
  }
}

.section-band-features {
  background: var(--bg);
}

.band-inner {
  max-width: 640px;
  margin: 0 auto;
}

.band-inner-wide {
  max-width: 960px;
}

/* Testimonial Spotlight */
.testimonial-spotlight {
  text-align: center;
}

.testimonial-spotlight .quote-mark {
  opacity: 0.08;
  margin-bottom: 12px;
}

.testimonial-spotlight blockquote {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 20px 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.testimonial-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.testimonial-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}

.testimonial-divider {
  color: var(--text-muted);
  opacity: 0.5;
}

.testimonial-note {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================
   USE CASE SHOWCASES - Creative Differentiated Sections
   ============================================ */

/* Base showcase block */
.showcase-block {
  padding: 48px 24px;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Animation enhancement - start visible, animate when JS adds class */
.showcase-block[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-block[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback: show content if JS hasn't run after 2s */
@media (prefers-reduced-motion: no-preference) {
  .showcase-block[data-animate] {
    animation: showcase-fallback 0s 2s forwards;
  }
}

@keyframes showcase-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.showcase-inner {
  width: 100%;
  max-width: none;
  padding: 0 48px;
  box-sizing: border-box;
}

/* Shared typography */
.showcase-headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 16px 0;
}

.showcase-headline-xl {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: white;
  margin: 0 0 20px 0;
}

.showcase-subline {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 500px;
}

.showcase-subline-light {
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.7);
  margin: 0 0 40px 0;
  max-width: 480px;
}

.showcase-text-center {
  text-align: center;
  margin-bottom: 48px;
}

.showcase-text-center .showcase-subline {
  margin: 0 auto;
}

.showcase-chip {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.06);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.showcase-micro-prompt {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 20px 0 0 0;
}

/* Split layout */
.showcase-split {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
}

.showcase-left-col {
  padding-right: 20px;
}

/* === SHOWCASE CONTENT ROW - Horizontal layout === */
.showcase-content-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
}

.showcase-content-row.reverse {
  grid-template-columns: 1.2fr 1fr;
}

.showcase-content-row.reverse .showcase-text-side {
  order: 2;
}

.showcase-content-row.reverse .showcase-image-side {
  order: 1;
}

.showcase-text-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.showcase-text-side .showcase-headline {
  margin: 0;
}

.showcase-text-side .showcase-subline {
  margin: 0;
}

.showcase-image-side {
  width: 100%;
}

/* Before/After Pair */
.before-after-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ba-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.ba-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ba-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: white;
}

/* === REMOVAL SECTION === */
.showcase-removal {
  background: var(--bg);
}

/* === BACKGROUNDS SECTION === */
.showcase-backgrounds {
  background: var(--bg-subtle);
}

.prompt-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.prompt-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 100px;
}


/* === COMBINE SECTION === */
.showcase-combine {
  background: var(--bg);
}

.combine-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.combine-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
}

.combine-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--glow);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.combine-plus,
.combine-arrow {
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.5;
}

.combine-result {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.combine-result svg {
  color: var(--primary);
}

.combine-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.combine-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.combine-input-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.combine-input-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.combine-output {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.combine-output img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.combine-img-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.6);
  color: white;
}

/* === SMART MODE SECTION === */
.showcase-smart {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
  padding: 64px 24px;
  overflow-x: hidden;
}

.smart-header {
  text-align: center;
  margin-bottom: 32px;
}

.smart-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #4a4a66;
  background: rgba(167, 139, 250, 0.15);
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  margin-bottom: 20px;
}

.showcase-headline-light {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  line-height: 1.2;
}

/* Prompt display */
.smart-prompt-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 40px;
}

.smart-prompt-display .prompt-quote {
  font-size: 2rem;
  color: #4a4a66;
  opacity: 0.5;
  font-family: Georgia, serif;
}

.smart-prompt-display p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.9);
  margin: 0;
  font-style: italic;
}

/* Cascade timeline */
.smart-cascade {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  overflow-x: auto;
  padding: 8px 0;
}

.cascade-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cascade-img {
  width: 180px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin-bottom: 12px;
}

.cascade-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.cascade-final .cascade-img {
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), 0 8px 24px rgba(0,0,0,0.4);
  border: 2px solid rgba(167, 139, 250, 0.5);
}

.cascade-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cascade-edits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.cascade-edits span {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.cascade-arrow {
  color: rgba(167, 139, 250, 0.4);
  font-size: 1.5rem;
  margin-top: 60px;
  flex-shrink: 0;
}

/* Value stats */
.smart-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.value-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.value-number {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.value-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.value-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}


/* Final CTA */
.final-cta {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--border);
}

.final-cta h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.final-cta p {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 24px 0;
}

.final-cta .hero-upload-btn {
  font-size: 1rem;
  padding: 14px 28px;
}

/* Mobile responsive */
@media (max-width: 900px) {
  .showcase-content-row,
  .showcase-content-row.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .showcase-content-row.reverse .showcase-text-side,
  .showcase-content-row.reverse .showcase-image-side {
    order: unset;
  }

  .showcase-text-side {
    text-align: center;
  }

  .showcase-text-side .showcase-subline {
    margin: 0 auto;
  }

  .prompt-examples {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .section-band {
    padding: 32px 16px;
  }

  .testimonial-spotlight blockquote {
    font-size: 1.1rem;
  }

  .showcase-block {
    padding: 40px 16px;
  }

  .showcase-inner {
    padding: 0 8px;
  }

  .showcase-headline {
    font-size: 1.5rem;
  }

  .showcase-headline-xl {
    font-size: 1.75rem;
  }

  .showcase-subline {
    font-size: 0.95rem;
  }

  .before-after-pair {
    gap: 12px;
  }

  .ba-image img {
    border-radius: 8px;
  }

  /* Smart mode mobile */
  .showcase-smart {
    padding: 48px 16px;
  }

  .showcase-headline-light {
    font-size: 1.5rem;
  }

  .smart-prompt-display p {
    font-size: 0.95rem;
  }

  .smart-cascade {
    gap: 8px;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -16px;
    margin-right: -16px;
  }

  .cascade-img {
    width: 140px;
  }

  .cascade-edits span {
    font-size: 0.6rem;
    padding: 2px 6px;
  }

  .cascade-arrow {
    font-size: 1.2rem;
    margin-top: 45px;
  }

  .smart-value {
    gap: 20px;
    padding: 20px 24px;
  }

  .value-number {
    font-size: 1.5rem;
  }

  .value-label {
    font-size: 0.65rem;
  }

  .final-cta {
    padding: 48px 16px;
  }

  .final-cta h2 {
    font-size: 1.35rem;
  }

  .final-cta p {
    font-size: 0.9rem;
  }

  /* Combine section mobile */
  .combine-flow {
    justify-content: center;
  }

  .combine-inputs {
    gap: 8px;
  }

  /* Footer links - larger touch targets on mobile */
  .seo-footer-links {
    gap: 2px 8px;
  }

  .seo-footer-links a {
    padding: 12px 6px;
    font-size: 0.9rem;
  }

  .seo-footer-international p {
    line-height: 2.2;
  }

  .seo-footer-international a {
    padding: 12px 8px;
  }
}

/* Legacy - keep for compatibility */
.homepage-content-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Value Proposition */
.value-prop {
  text-align: center;
  margin-bottom: 48px;
}

.value-prop h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.value-prop p {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Use Cases Grid */
.use-cases {
  margin-bottom: 48px;
}

.use-cases h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-align: center;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.use-case-card {
  display: block;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s var(--ease-standard);
}

.use-case-card:hover {
  border-color: var(--primary);
  background: var(--card-hover);
}

.use-case-card .icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.use-case-card .title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.use-case-card .desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* FAQ Section */
.faq-section {
  margin-bottom: 24px;
}

.faq-section h3 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}

.faq-question {
  width: 100%;
  padding: 16px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

.faq-question:hover {
  background: var(--card-hover);
}

.faq-question .toggle {
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease-standard);
}

.faq-item.open .faq-question .toggle {
  transform: rotate(45deg);
}

.faq-answer {
  display: none;
  padding: 0 16px 16px;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.faq-item.open .faq-answer {
  display: block;
}

/* ============================================
   SEO FOOTER
   ============================================ */
.seo-footer {
  background: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32px 20px 24px;
  margin-top: auto;
}

.seo-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.seo-footer-section {
  margin-bottom: 24px;
}

.seo-footer-section:last-child {
  margin-bottom: 0;
}

.seo-footer-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.seo-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.seo-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
  padding: 10px 4px;
  display: inline-block;
}

.seo-footer-links a:hover {
  color: var(--primary);
}

.seo-footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 24px;
}

.seo-footer-bottom p {
  font-size: 0.75rem;
  color: var(--text-dimmed);
}

.seo-footer-international {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  margin-top: 24px;
}

.seo-footer-international p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.international-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.seo-footer-international a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
  padding: 10px 6px;
  display: inline-block;
}

.seo-footer-international a:hover {
  color: var(--primary);
}

/* ============================================
   MOBILE RESPONSIVE - Small screens
   ============================================ */
@media (max-width: 375px) {
  .top-bar {
    padding: 12px 16px;
  }

  .empty-title {
    font-size: 1.3rem;
  }

  .empty-subtitle {
    font-size: 0.9rem;
    max-width: 260px;
  }

  .upload-cta {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  .controls {
    padding: 12px;
  }
}

/* ============================================
   TABLET/DESKTOP RESPONSIVE
   ============================================ */
@media (min-width: 600px) {
  .homepage-content {
    padding: 0; /* Sections handle their own padding */
  }

  .value-prop h2 {
    font-size: 1.75rem;
  }

  .use-cases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .faq-list {
    gap: 8px;
  }
}

/* Tablet: slightly larger thumbnails */
@media (min-width: 768px) {
  .history-item {
    width: 56px;
    height: 56px;
  }

  .history-item .step-num {
    font-size: 9px;
    padding: 2px 6px;
  }

  .seo-footer {
    padding: 40px 24px 32px;
  }

  .seo-footer-sections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .seo-footer-section {
    margin-bottom: 0;
  }

  .seo-footer-links {
    flex-direction: column;
    gap: 8px;
  }
}

/* ============================================
   DESKTOP - Centered, stacked layout
   ============================================ */
@media (min-width: 900px) {
  .app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }

  /* Top bar */
  .top-bar {
    position: relative;
    padding: 18px 32px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
  }

  /* Override absolute positioning on desktop for empty state */
  .app:not(.has-image) .top-bar {
    position: relative;
    left: auto;
    right: auto;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border-subtle);
  }

  .logo {
    font-size: 1.1rem;
  }

  /* Image area - centered, constrained */
  .image-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0; /* Reset: header is position:relative on desktop, in flow */
    min-height: 0;
  }

  /* Homepage: content-sized, no extra padding (header is in-flow on desktop) */
  .app:not(.has-image) .image-area {
    flex: none;
    padding-top: 16px;
  }

  .rate-limit-banner.visible ~ .image-area {
    padding-top: 80px;
  }

  .image-container img {
    border-radius: 12px;
  }

  /* Empty state */
  .empty-icon {
    transform: scale(1.15);
  }

  .empty-title {
    font-size: 2rem;
  }

  .empty-subtitle {
    font-size: 1.05rem;
    max-width: 400px;
  }

  .upload-cta {
    padding: 16px 32px;
    font-size: 1.05rem;
  }

  /* History strip - centered inline */
  .history-strip {
    padding: 12px 0;
  }

  .history-strip .history-items {
    justify-content: center;
  }

  .history-item {
    width: 60px;
    height: 60px;
  }

  /* Controls - centered below image */
  .controls {
    padding: 16px 0 24px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .controls.hidden {
    display: none;
  }

  /* Prompt - clean, full width */
  .prompt-input {
    font-size: 1rem;
    padding: 14px 18px;
    min-height: 52px;
  }

  /* Edit actions on desktop - keep column layout */
  .edit-actions {
    gap: 12px;
  }

  .edit-btn {
    flex: 0 0 auto;
    min-width: 140px;
  }

  /* result-actions removed — see .result-toolbar in components.css */

  /* Compare hint */
  .compare-hint {
    bottom: auto;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Hover states */
  .credits-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px var(--glow);
  }

  .user-btn:hover {
    border-color: var(--primary);
    color: var(--text);
  }

  .history-item:hover:not(.active) {
    transform: scale(1.08);
    border-color: var(--primary);
  }
}

/* ============================================
   LARGER SCREENS
   ============================================ */
@media (min-width: 1200px) {
  .app:not(.has-image) {
    max-width: 1000px;
  }

  .app:not(.has-image) .controls {
    max-width: 650px;
  }
}

/* ============================================
   DESKTOP SIDE-BY-SIDE EDITOR
   Image on left, controls on right, no scrolling
   ============================================ */
@media (min-width: 1024px) {
  .app.has-image {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "header header"
      "image sidebar"
      "ad ad";
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
  }

  .app.has-image .top-bar {
    grid-area: header;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
  }

  .app.has-image .image-area {
    grid-area: image;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg);
    min-height: 0;
    overflow: hidden;
  }

  .app.has-image .image-container {
    max-width: 100%;
    max-height: 100%;
  }

  .app.has-image .image-container img {
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Right sidebar with controls */
  .app.has-image .controls {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--bg);
    border-left: 1px solid var(--border);
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: none;
    width: 100%;
    /* Hide scrollbar unless actually scrolling */
    scrollbar-gutter: stable;
  }

  /* Hide scrollbar when not needed (content fits) */
  .app.has-image .controls::-webkit-scrollbar {
    width: 6px;
  }

  .app.has-image .controls::-webkit-scrollbar-track {
    background: transparent;
  }

  .app.has-image .controls::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .app.has-image .controls::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }

  .app.has-image .controls.hidden {
    display: none;
  }

  /* Edit card fills sidebar natively — no card-in-card */
  .app.has-image .edit-card {
    background: var(--bg);
    border-radius: 0;
    padding: 20px;
    border: none;
    box-shadow: none;
  }

  .app.has-image .edit-card:focus-within {
    border: none;
    box-shadow: none;
  }

  .app.has-image .edit-card.attention {
    animation: none;
  }

  .app.has-image .edit-actions {
    max-width: none;
  }

  .app.has-image .prompt-input {
    font-size: 0.95rem;
    min-height: 96px;
  }

  /* Quality toggle + edit button in sidebar */
  .app.has-image .edit-card-footer {
    flex-direction: column;
    gap: 14px;
  }

  .app.has-image .footer-left {
    width: 100%;
  }

  .app.has-image .quality-toggle {
    width: 100%;
  }

  .app.has-image .quality-pill {
    flex: 1;
  }

  .app.has-image .edit-btn {
    width: 100%;
    padding: 16px 28px;
    font-size: 1.05rem;
    min-height: 52px;
    border-radius: 14px;
  }

  /* Sticky submit button - always visible at bottom of sidebar */
  .app.has-image .edit-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  .app.has-image .edit-card-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding-top: 16px;
    margin-top: auto;
    border-top: 1px solid var(--border);
    z-index: 2;
  }

  .app.has-image .edit-card {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .app.has-image .edit-card-footer {
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Post-edit sidebar: hide reference section, streamline layout */
  body.has-result .app.has-image .reference-photo-section {
    display: none;
  }

  /* Countdown caption below button */
  .app.has-image .edit-cost-caption.free {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
  }

  /* History strip in sidebar - polished timeline */
  .app.has-image .history-strip {
    margin: 16px 0;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border);
  }

  .app.has-image .history-strip .history-items {
    justify-content: flex-start;
  }

  .app.has-image .history-item {
    width: 52px;
    height: 52px;
  }

  /* Reference image button */
  .app.has-image .reference-btn {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }
}

/* ============================================
   MOBILE UI/UX PARITY
   Full-screen app-like experience
   ============================================ */

/* Viewport lock - prevents browser chrome jank (only when editing) */
html:has(.app.has-image),
body:has(.app.has-image) {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  overscroll-behavior: none;
  /* Note: touch-action: none removed - it blocks button clicks */
}

.app.has-image {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: -webkit-fill-available;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Only disable touch gestures on the image area, not buttons */
.app.has-image .image-container {
  touch-action: pan-y pinch-zoom;
}

/* Prevent any horizontal overflow on mobile */
@media (max-width: 768px) {
  .app.has-image,
  .app.has-image * {
    max-width: 100vw;
  }

  /* Hide nav bar in editor mode - touch events broken on iOS Safari */
  .app.has-image .top-bar {
    display: none;
  }

  .app.has-image .image-container {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Controls need visible overflow for banners, but prevent horizontal scroll */
  .app.has-image .controls {
    overflow-x: hidden;
    overflow-y: visible;
    overscroll-behavior: none;
  }

  /* Allow vertical touch on controls for scrolling if needed */
  .app.has-image .controls {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* Allow touch on image for tap interactions */
  .app.has-image .image-container {
    touch-action: manipulation;
  }
}

/* ============================================
   MOBILE TOUCH TARGETS (768px and below)
   All interactive elements 44px+ minimum
   ============================================ */
@media (max-width: 768px) {
  /* Header buttons */
  .credits-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .user-btn {
    width: 44px;
    height: 44px;
  }

  /* Header credits badge - mobile touch targets */
  .header-credits {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* Header anonymous CTA - mobile adjustments */
  .header-anon-cta {
    gap: 8px;
  }

  .header-pricing-link {
    display: none; /* Hide on mobile - pricing section is visible on scroll */
  }

  .header-signin {
    padding: 10px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .header-try-free {
    padding: 10px 14px;
    min-height: 44px;
    gap: 6px;
  }

  /* Nav CTA - hide on mobile homepage (redundant with hero CTA) */
  /* Exception: show when user has free edit (green "Upload — Free" button) */
  .app:not(.has-image) .nav-cta:not(.has-free) {
    display: none;
  }

  /* Nav CTA - touch friendly (when visible in other states) */
  .nav-cta {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  /* Mobile back button - show when editing, hide logo */
  .app.has-image .back-btn {
    display: flex;
    min-height: 44px;
  }

  .app.has-image .logo {
    display: none;
  }

  /* User dropdown - use bottom sheet on mobile instead */
  .user-dropdown {
    display: none !important;
  }

  /* Override user button to open bottom sheet on mobile */
  .user-btn {
    /* JS handles opening bottom sheet on mobile */
  }

  /* Quality pills */
  .quality-pill {
    min-height: 44px;
    padding: 8px 12px;
  }

  /* Edit button */
  .edit-btn {
    min-height: 48px;
    padding: 14px 24px;
  }

  /* Change photo button — min 44px tap target (Apple HIG). */
  .change-photo-btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.78rem;
    border-radius: 12px;
  }

  /* Clear marker button */
  .clear-marker-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Hide compare slider on mobile - doesn't work well with touch */
  .compare-slider-container,
  .compare-float-btn {
    display: none !important;
  }

  /* Hide Upload button when editing on mobile */
  .app.has-image .nav-cta {
    display: none !important;
  }

  /* Default history strip */
  .history-strip {
    padding: 4px 0;
  }

  .history-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .history-scroll {
    padding: 2px 12px;
    gap: 6px;
  }

}

/* ============================================
   HISTORY STRIP - Scroll UX enhancements
   ============================================ */
.history-strip {
  position: relative;
}

.history-scroll {
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 4px 16px;
  /* Enable horizontal touch scrolling, prevent accidental vertical scroll */
  touch-action: pan-x;
  cursor: grab;
}

.history-scroll:active {
  cursor: grabbing;
}

.history-item {
  scroll-snap-align: center;
}

/* Fade edge indicators for scroll */
.history-strip::before,
.history-strip::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}

.history-strip::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.history-strip::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.history-strip.can-scroll-left::before,
.history-strip.can-scroll-right::after {
  opacity: 1;
}

/* ============================================
   MOBILE IMAGE OPTIMIZATION
   Maximize image space, compact controls
   ============================================ */
@media (max-width: 768px) {
  /* Image takes priority - reduce padding */
  .image-container {
    padding: 4px;
  }

  /* More compact controls on mobile - maximize image space */
  .app.has-image .controls {
    padding: 6px 10px;
    padding-bottom: calc(6px + var(--safe-bottom));
    gap: 4px;
  }

  /* Prompt input - must be 16px+ to prevent iOS zoom */
  .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px;
  }

  /* Compact action row - put quality and button on same line */
  .action-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .quality-toggle {
    flex-shrink: 0;
  }

  .edit-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  /* ============================================
     MOBILE RESULT STATE - Maximum image focus
     ============================================ */
  body.has-result .image-container {
    padding: 2px;
  }

  /* In result state, photo strip is hidden — reclaim that space for the image */
  body.has-result .app.has-image .image-container {
    max-height: 100%;
  }

  /* Ultra-compact controls when result is showing */
  body.has-result .app.has-image .controls {
    padding: 6px 10px;
    padding-bottom: calc(6px + var(--safe-bottom));
    gap: 4px;
  }

  /* Prompt input after result - still usable for continued editing */
  body.has-result .prompt-input {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 16px;
  }

  /* Compact action row after result */
  body.has-result .action-row {
    gap: 6px;
  }

  body.has-result .quality-pill {
    padding: 6px 10px;
    font-size: 0.7rem;
    min-height: 34px;
  }

  body.has-result .edit-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
    min-height: 38px;
  }

  /* Result toolbar compact on mobile */
  body.has-result .result-toolbar {
    gap: 8px;
    padding: 6px 0 8px;
  }

  /* ============================================
     KEYBOARD-OPEN: Compact editor for mobile keyboard
     Shows image thumbnail + prompt + edit button
     ============================================ */

  /* Restructure grid: thumbnail + controls only, minimal waste */
  .keyboard-open .app.has-image {
    grid-template-rows: 0 80px 1fr 0;
  }

  /* Collapse header area elements */
  .keyboard-open .top-bar,
  .keyboard-open .error-toast,
  .keyboard-open .toast-container,
  .keyboard-open .drag-overlay {
    display: none !important;
  }

  /* Image area: compact thumbnail strip */
  .keyboard-open .image-area {
    max-height: 80px;
    min-height: 0;
    overflow: hidden;
    padding: 4px 8px 0 !important;
    transition: max-height 0.25s var(--ease-standard), padding 0.25s var(--ease-standard);
    align-items: center;
    justify-content: center;
  }

  /* Image container: fixed height thumbnail */
  .keyboard-open .image-container {
    max-height: 72px !important;
    height: 72px !important;
    overflow: hidden;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  .keyboard-open .image-wrapper {
    height: 68px !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  .keyboard-open .image-container img,
  .keyboard-open #currentImage {
    max-height: 68px !important;
    height: 68px !important;
    width: auto !important;
    object-fit: contain;
    border-radius: 8px;
    cursor: zoom-in;
  }

  /* Expand icon hint on keyboard-open thumbnail */
  .keyboard-open .image-wrapper {
    position: relative;
  }
  .keyboard-open .image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    pointer-events: none;
  }

  /* Hide non-essential elements when keyboard is open */
  .keyboard-open .photo-strip,
  .keyboard-open .rate-limit-banner,
  .keyboard-open .reference-photo-section,
  .keyboard-open .quality-toggle-wrapper,
  .keyboard-open .edit-cost-caption,
  .keyboard-open .pro-upsell,
  .keyboard-open .soft-upsell-banner,
  .keyboard-open .result-toolbar,
  .keyboard-open .suggestion-chips,
  .keyboard-open .history-strip,
  .keyboard-open .custom-prompt-section .prompt-char-count {
    display: none !important;
  }

  /* Edit card: compact padding */
  .keyboard-open .edit-card {
    padding: 8px 12px;
    border: none;
    box-shadow: none;
    background: transparent;
  }

  /* Remove focus-within glow when keyboard is open (saves visual space) */
  .keyboard-open .edit-card:focus-within {
    border-color: transparent;
    box-shadow: none;
  }

  /* Prompt: clearly visible, 2 rows minimum */
  .keyboard-open .prompt-input {
    min-height: 48px;
    max-height: 80px;
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* Edit card footer: compact */
  .keyboard-open .edit-card-footer {
    padding: 6px 0 0;
    gap: 8px;
  }

  /* Edit button: clearly visible and tappable */
  .keyboard-open .edit-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.95rem;
  }

  /* Controls: compact, no extra padding */
  .keyboard-open .controls {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 10px !important;
    padding-bottom: calc(4px + var(--safe-bottom)) !important;
    gap: 2px !important;
  }
}

@media (max-width: 768px) and (max-height: 750px) {
  /* Extra small screens - keep prompt but make more compact */
  body.has-result .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px; /* Must stay 16px+ to prevent iOS zoom */
  }

  /* Keep action row but make it minimal */
  body.has-result .action-row {
    gap: 4px;
  }

  body.has-result .quality-toggle-wrapper {
    display: none; /* Hide quality on very small screens */
  }

  body.has-result .reference-btn {
    padding: 4px 8px;
    min-height: 32px;
  }

  body.has-result .reference-btn-text {
    display: none; /* Just show icon on tiny screens */
  }

  /* Compact controls */
  body.has-result .controls {
    padding: 4px 8px;
    padding-bottom: calc(4px + var(--safe-bottom));
  }

  /* Smaller history strip */
  .history-strip {
    padding: 6px 0;
    margin: 8px 0;
  }

  .history-item {
    width: 48px;
    height: 48px;
  }

  /* Compact quality toggle */
  .quality-toggle {
    gap: 4px;
  }

  .quality-pill {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  /* Hide less important elements when space is tight */
  .edit-card-footer .footer-right {
    display: none;
  }
}

/* Extra compact for very small phones */
@media (max-width: 380px) {
  .prompt-input {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 16px; /* Must stay 16px+ to prevent iOS zoom */
  }

  .edit-btn {
    padding: 10px 16px;
  }
}

/* ============================================
   VERY SMALL SCREENS (480px and below)
   Extra compact for small phones
   ============================================ */
@media (max-width: 480px) {
  .reference-card-hint {
    display: none;
  }
}

/* ============================================
   SHORT SCREENS (500px height and below)
   Compact UI when height is limited
   ============================================ */
@media (max-height: 500px) {
  .history-strip {
    padding: 8px 0;
  }

  .history-item {
    width: 48px;
    height: 48px;
  }
}

/* ============================================
   MOBILE IMAGE OPTIMIZATION
   Ensure images fill maximum available space
   ============================================ */
@media (max-width: 768px) {
  /* Image container stretches to fill image-area height
     (overrides parent's align-items: center which would shrink-wrap) */
  .image-container {
    flex: 1;
    min-height: 0;
    align-self: stretch;
  }

  /* Image wrapper fills container fully */
  .image-wrapper {
    flex: 1;
    width: 100%;
    min-height: 0;
    align-self: stretch;
  }

  /* Main image fills available space */
  #currentImage {
    transition: opacity 0.3s var(--ease-standard);
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* ============================================
     MOBILE IMAGE AREA LAYOUT FIX
     Fix excessive spacing and layout issues
     ============================================ */

  /* When image is loaded, use top-aligned layout instead of centered */
  .app.has-image .image-area {
    justify-content: flex-start;
    padding: 8px 8px 0;
  }

  /* Image container takes available space but doesn't force centering */
  .app.has-image .image-container {
    flex: 1 1 auto;
    max-height: calc(100% - 80px); /* Leave room for photo strip */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Photo strip - compact and aligned to bottom of image area */
  .app.has-image .photo-strip {
    flex-shrink: 0;
    margin-top: auto;
  }

  /* When two photos, tighten up the layout */
  .app.has-image .photo-strip.two-photos {
    padding: 8px 12px 4px;
  }

  /* Smooth transitions for layout changes */
  .image-area {
    transition: max-height 0.15s var(--ease-standard), padding 0.15s var(--ease-standard);
  }

  .controls {
    transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
  }

  /* Reference card smooth show/hide - note: can't animate display:none,
     so we rely on the JS to add/remove .visible class for entrance animation */
  .reference-card.visible {
    animation: slideIn 0.15s var(--ease-out);
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================================
   CREDIT BADGE - Compact pill in nav
   ============================================ */
.credit-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-subtle);
  border: none;
  color: var(--text);
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.credit-badge:hover {
  background: var(--glow);
}

.credit-badge:active {
  transform: scale(0.96);
}

.credit-badge .credit-count {
  font-weight: 700;
  color: var(--primary);
}

.credit-badge .credit-label {
  color: var(--text-muted);
  font-weight: 500;
}

/* Credit badge states */
.credit-badge.plenty {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

.credit-badge.low {
  background: transparent;
  border-color: #f59e0b;
  color: #d97706;
}

.credit-badge.low .credit-icon {
  color: #f59e0b;
  opacity: 1;
}

.credit-badge.critical {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
  animation: subtleGlow 2s var(--ease-in-out) infinite;
}

.credit-badge.critical .credit-icon {
  color: #f59e0b;
  opacity: 1;
}

.credit-badge.zero {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
  animation: subtlePulse 2s var(--ease-in-out) infinite;
}

.credit-badge.zero .credit-icon {
  color: #ef4444;
  opacity: 1;
}

.credit-badge.subscriber {
  background: var(--glow);
  border-color: var(--primary);
  color: var(--primary);
}

.credit-badge.subscriber .credit-icon {
  color: var(--primary);
  opacity: 1;
}

/* Gift state - makes free edit feel special */
.credit-badge.has-gift {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #10b981;
  color: #047857;
}

.credit-badge.has-gift .credit-count {
  color: #059669;
}

.credit-badge.has-gift .credit-label {
  color: #047857;
}

.credit-badge.has-gift::before {
  content: '🎁';
  margin-right: 4px;
  font-size: 0.9em;
}

/* Attention animation for recovery after modal dismiss */
.credit-badge.attention {
  animation: badgeAttention 0.5s var(--ease-standard) 3;
}

@keyframes subtleGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.25);
  }
}

@keyframes subtlePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.2);
  }
}

@keyframes badgeAttention {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.2);
  }
}

/* Credit badge always visible - important for conversion */
.credit-badge {
  display: flex;
}

/* Make zero state more prominent for conversion */
.credit-badge.zero {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1.5px solid #ef4444;
  color: #dc2626;
  animation: subtlePulse 2s var(--ease-in-out) infinite;
  font-weight: 600;
}

.credit-badge.zero .credit-count,
.credit-badge.zero .credit-label {
  color: #dc2626;
}

/* NAV CTA state styles - removed in nav redesign */



/* ============================================
   FULLSCREEN IMAGE LIGHTBOX (Mobile)
   Tap image to expand fullscreen
   ============================================ */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard);
}

.image-lightbox.visible {
  display: flex;
  opacity: 1;
}

.image-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  /* Pinch-to-zoom and swipe-dismiss: GPU-accelerated transforms */
  transform-origin: center center;
  will-change: transform;
  touch-action: none;
}

/* Smooth spring-back animation when releasing gestures */
.image-lightbox img.lightbox-animating {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* While actively dragging/pinching — no transition delay */
.image-lightbox img.lightbox-dragging {
  transition: none;
}

.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-standard);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-share {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: none; /* hidden by default; shown via JS when Web Share API is available */
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease-standard);
}

.lightbox-share.visible {
  display: flex;
}

.lightbox-share:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Tap hint on mobile image — any loaded image is tappable */
@media (max-width: 768px) {
  .has-image .image-container .image-wrapper {
    cursor: zoom-in;
  }
}

/* ============================================
   HOMEPAGE V2 - Editorial Design System
   ============================================ */

/* === SOCIAL PROOF BAND === */
.proof-band {
  padding: 56px 24px;
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--bg) 100%);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.proof-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.proof-quote-mark {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.5;
  color: var(--tone-violet);
  opacity: 0.12;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.proof-quote {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin: 0 0 24px 0;
  letter-spacing: -0.02em;
  position: relative;
}

.proof-attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.proof-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.proof-author {
  text-align: left;
}

.proof-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.proof-context {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .proof-band {
    padding: 32px 20px;
  }

  .proof-quote {
    font-size: 1.2rem;
  }

  .proof-quote-mark {
    font-size: 4rem;
    top: -12px;
  }
}

/* === CAPABILITIES SECTION === */
.capabilities-section {
  /* No padding - articles handle their own */
}

.capability {
  padding: 64px 24px;
  background: var(--bg);
  overflow: hidden;
}

.capability--alt {
  background: var(--bg-subtle);
}

.capability[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.capability[data-animate] .capability-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate] .capability-visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.capability[data-animate].visible .capability-content,
.capability[data-animate].visible .capability-visual {
  opacity: 1;
  transform: translateY(0);
}

.capability-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.capability-inner--reverse {
  grid-template-columns: 1.1fr 1fr;
}

.capability-inner--reverse .capability-content {
  order: 2;
}

.capability-inner--reverse .capability-visual {
  order: 1;
}

.capability-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.capability-number {
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
}

.capability-headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

.capability-description {
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  max-width: 400px;
}

.capability-prompt {
  display: inline-block;
  font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
  width: fit-content;
}

/* Prompt chips */
.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.prompt-chip {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: white;
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 100px;
  transition: border-color 0.2s, color 0.2s;
}

.prompt-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Combine equation */
.combine-equation {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.eq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  background: white;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
}

.eq-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(0, 0, 0, 0.07);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eq-op {
  color: var(--text-dimmed);
  font-weight: 500;
  font-size: 1.1rem;
}

.eq-result {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(26, 26, 46, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 8px 14px;
  border-radius: 8px;
}

.eq-result svg {
  stroke: var(--primary);
}

.eq-item {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.eq-item:hover {
  transform: translateY(-2px);
}

.eq-result {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s var(--ease-standard);
}

.eq-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

/* === BEFORE/AFTER VISUALS === */
.capability-visual {
  width: 100%;
}

.ba-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ba-figure {
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease-standard);
}

.ba-figure:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(var(--primary-rgb), 0.15);
}

.ba-figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.ba-figure figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Combine grid */
.combine-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}

.combine-input {
  margin: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.combine-input img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.combine-input figcaption,
.combine-result figcaption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.65);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.combine-result {
  grid-column: 1 / -1;
  margin: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}

.combine-result img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* === CAPABILITIES MOBILE === */
@media (max-width: 800px) {
  .capability {
    padding: 48px 20px;
  }

  .capability-inner,
  .capability-inner--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .capability-inner--reverse .capability-content {
    order: 1;
  }

  .capability-inner--reverse .capability-visual {
    order: 2;
  }

  .capability-headline {
    font-size: 2rem;
  }

  .capability-description {
    font-size: 1rem;
  }
}

/* ============================================
   PRICING V9 - Premium Conversion-Optimized
   ============================================ */
.pricing-v9 {
  padding: 80px 24px 100px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--tone-violet-50) 100%);
  position: relative;
  overflow: hidden;
  /* Clears the sticky homepage top-bar (~70px) + iOS safe area, with
     a small buffer so the eyebrow/title aren't kissing the nav border. */
  scroll-margin-top: calc(80px + var(--safe-top, 0px));
}

.pricing-v9::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}

.pricing-v9-inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pricing-v9-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-v9-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tone-violet-700);
  background: var(--tone-violet-50);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  margin: 0 0 14px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pricing-v9-eyebrow::before,
.pricing-v9-eyebrow::after {
  display: none;
}

.pricing-v9-title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0 0 12px 0;
}

.pricing-v9-lead {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 380px;
  line-height: 1.55;
}

.pricing-v9-billing-toggle {
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 4px;
  display: flex;
  width: fit-content;
  margin: 0 auto 40px;
}

.pricing-v9-billing-option {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-tap-highlight-color: transparent;
}

.pricing-v9-billing-option--active {
  background: var(--tone-violet);
  color: white;
  box-shadow: var(--shadow-tonal-violet);
}

.pricing-v9-save-badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--tone-emerald-50);
  color: var(--tone-emerald-700);
  padding: 3px 7px;
  border-radius: var(--r-pill);
}

.pricing-v9-billing-option--active .pricing-v9-save-badge {
  background: rgba(255, 255, 255, 0.22);
  color: white;
}

/* Social Proof */
.pricing-v9-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.pricing-v9-avatars {
  display: flex;
  margin-right: 4px;
}

.avatar-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -8px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.avatar-dot:first-child {
  margin-left: 0;
}

.avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid white;
  margin-left: -10px;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.avatar-img:first-child {
  margin-left: 0;
}

.pricing-v9-social-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.pricing-v9-social-text strong {
  color: var(--text);
  font-weight: 600;
}

/* Pricing Cards Grid */
.pricing-v9-cards {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  align-items: start;
}

/* Individual Card */
.pricing-v9-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: var(--card);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

.pricing-v9-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--tone-violet) 28%, transparent);
}

.pricing-v9-card:active {
  transform: scale(0.98);
  transition-duration: 0.05s;
}

/* Hero Card (Standard) */
.pricing-v9-card--hero {
  padding: 40px 28px;
  border-color: var(--tone-violet);
  background: linear-gradient(180deg, var(--tone-violet-50) 0%, var(--card) 60%);
  box-shadow: var(--shadow-md), var(--shadow-tonal-violet);
  z-index: 2;
}

.pricing-v9-card--hero:hover {
  transform: translateY(-5px);
  border-color: var(--tone-violet);
  box-shadow: var(--shadow-lg), 0 12px 36px rgba(124, 92, 252, 0.22);
}

.pricing-v9-card--hero .pricing-v9-card-glow {
  display: none;
}

/* Badge — hidden, hierarchy through card size instead */
.pricing-v9-badge {
  display: none;
}

/* Card Header */
.pricing-v9-card-header {
  margin-bottom: 20px;
}

.pricing-v9-tier-name {
  display: block;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

.pricing-v9-card--hero .pricing-v9-tier-name {
  font-size: 1.25rem;
  color: var(--tone-violet-700);
}

.pricing-v9-tier-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Credits - Hero Metric */
.pricing-v9-card-credits {
  margin-bottom: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pricing-v9-credits-num {
  display: block;
  font-family: var(--font-display), serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pricing-v9-card--hero .pricing-v9-credits-num {
  font-size: 3.2rem;
}

.pricing-v9-credits-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 4px;
}

/* Price */
.pricing-v9-card-price {
  margin-bottom: 20px;
}

.pricing-v9-price {
  display: block;
  font-family: var(--font-display), serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pricing-v9-card--hero .pricing-v9-price {
  font-size: 1.3rem;
}

.pricing-v9-per-edit {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 4px;
}

/* CTA Button */
.pricing-v9-card-cta {
  display: block;
  padding: 13px 20px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-v9-card:hover .pricing-v9-card-cta {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pricing-v9-card--hero .pricing-v9-card-cta {
  background: var(--primary);
  color: white;
  border: none;
  padding: 14px 24px;
}

.pricing-v9-card--hero:hover .pricing-v9-card-cta {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
}

/* Benefits */
.pricing-v9-benefits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 32px;
}

.pricing-v9-benefit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.pricing-v9-benefit svg {
  width: 18px;
  height: 18px;
  stroke: var(--success);
  flex-shrink: 0;
}

/* One-time Alternative */
/* Homepage Pack Slider */
.pricing-v9-packs {
  max-width: 420px;
  margin: 0 auto 28px;
}

.pricing-v9-packs-divider {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 16px;
  position: relative;
}

.pricing-v9-packs-divider::before,
.pricing-v9-packs-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 120px);
  height: 1px;
  background: var(--border);
}

.pricing-v9-packs-divider::before { left: 0; }
.pricing-v9-packs-divider::after { right: 0; }

.pricing-v9-slider-wrap {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 24px;
}

.pricing-v9-slider-display {
  text-align: center;
  margin-bottom: 18px;
}

.pricing-v9-slider-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.pricing-v9-slider-count {
  font-family: var(--font-display), serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  transition: opacity 0.15s;
}

.pricing-v9-slider-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

.pricing-v9-slider-bonus {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 2px;
  transition: opacity 0.2s;
}

.pricing-v9-slider-bonus.hidden {
  display: none;
}

.pricing-v9-slider-price {
  font-family: var(--font-display), serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  transition: opacity 0.15s;
}

.pricing-v9-slider-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  transition: opacity 0.15s;
}

/* Reuse credits-slider styles (from components.css) for the light theme */
.pricing-v9-slider-wrap .credits-slider {
  background: rgba(0, 0, 0, 0.08);
}

.pricing-v9-slider-wrap .credits-slider::-webkit-slider-thumb {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pricing-v9-slider-wrap .credits-slider::-moz-range-thumb {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pricing-v9-slider-wrap .credits-slider-notches span {
  color: var(--text-muted);
}

.pricing-v9-slider-wrap .credits-slider-notches span.active {
  color: var(--primary);
  font-weight: 700;
}

.pricing-v9-pack-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-v9-pack-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.15);
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.02);
}

.pricing-v9-pack-btn:active {
  transform: scale(0.98);
}

.pricing-v9-pack-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Free Tier */
.pricing-v9-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 0.78rem;
  color: var(--text-dimmed);
}

.pricing-v9-free svg {
  width: 14px;
  height: 14px;
  fill: var(--text-dimmed);
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .pricing-v9 {
    padding: 48px 20px 60px;
  }

  .pricing-v9-title {
    font-size: 2rem;
  }

  .pricing-v9-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-v9-card--hero {
    order: -1;
    padding: 32px 24px;
  }

  .pricing-v9-card {
    padding: 24px 20px;
  }

  .pricing-v9-credits-num {
    font-size: 2.2rem;
  }

  .pricing-v9-card--hero .pricing-v9-credits-num {
    font-size: 2.6rem;
  }

  .pricing-v9-benefits {
    gap: 12px 16px;
  }

  .pricing-v9-packs {
    max-width: 100%;
  }
}

/* ============================================
   SMART SECTION - Dark Editorial
   ============================================ */
.smart-section {
  padding: 80px 24px;
  background: linear-gradient(165deg, #0d0d14 0%, #151520 50%, #1a1a28 100%);
  overflow: hidden;
}

.smart-section[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
}

.smart-section[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.smart-section-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.smart-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.smart-section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #4a4a66;
  background: rgba(167, 139, 250, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.25);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.smart-section-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  margin: 0;
  line-height: 1.2;
}

/* Prompt block */
.smart-prompt-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  padding: 0 16px;
}

.smart-prompt-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.5rem;
  color: #4a4a66;
  opacity: 0.4;
  line-height: 1;
}

.smart-prompt-text {
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-align: center;
}

/* Cascade v2 */
.smart-cascade-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  overflow-x: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
}

.cascade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
}

.cascade-item img {
  width: 160px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.cascade-item--final img {
  border: 2px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), 0 8px 24px rgba(0,0,0,0.4);
}

.cascade-item-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
}

.cascade-item-ops {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 160px;
}

.cascade-item-ops span {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  padding: 3px 7px;
  border-radius: 4px;
}

.cascade-arrow-v2 {
  color: rgba(167, 139, 250, 0.35);
  font-size: 1.4rem;
  margin-top: 50px;
  flex-shrink: 0;
}

/* Stats */
.smart-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  max-width: 420px;
  margin: 0 auto;
}

.smart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.smart-stat-num {
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.smart-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.smart-stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
}

/* === SMART MOBILE === */
@media (max-width: 600px) {
  .smart-section {
    padding: 56px 16px;
  }

  .smart-section-title {
    font-size: 1.7rem;
  }

  .smart-prompt-text {
    font-size: 1rem;
  }

  .cascade-item img {
    width: 130px;
  }

  .smart-stats {
    gap: 20px;
    padding: 20px 24px;
  }

  .smart-stat-num {
    font-size: 1.6rem;
  }
}

/* ============================================
   FINAL CTA V2
   ============================================ */
.final-cta-v2 {
  text-align: center;
  padding: 72px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(26, 26, 46, 0.03) 50%, var(--bg-subtle) 100%);
}

.final-cta-v2-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px 0;
}

.final-cta-v2-lead {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 28px 0;
}

.final-cta-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  min-height: 52px;
}

.final-cta-v2-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.final-cta-v2-btn:hover::after {
  left: 100%;
}

.final-cta-v2-btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

.final-cta-v2-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 500px) {
  .final-cta-v2 {
    padding: 56px 20px;
  }

  .final-cta-v2-title {
    font-size: 1.6rem;
  }
}

/* ============================================
   SOFT UPSELL BANNER
   Non-blocking thin bar after ad-funded edits
   ============================================ */

.soft-upsell-banner {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 18px;
  background: var(--tone-violet-50);
  color: var(--tone-violet-700);
  border-top: 1px solid color-mix(in srgb, var(--tone-violet) 18%, transparent);
  position: relative;
  z-index: 10;
  font-family: var(--font-body);
}

.soft-upsell-banner.visible {
  display: flex;
  animation: softUpsellSlideIn 0.35s ease forwards;
}

.soft-upsell-banner.dismissing {
  animation: softUpsellSlideOut 0.25s ease forwards;
}

@keyframes softUpsellSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes softUpsellSlideOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

.soft-upsell-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--tone-violet-700);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.soft-upsell-btn {
  background: var(--tone-violet);
  color: white;
  border: none;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.18s ease;
  letter-spacing: 0.005em;
  box-shadow: var(--shadow-tonal-violet);
}

.soft-upsell-btn:hover {
  background: var(--tone-violet-700);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 92, 252, 0.35);
}

.soft-upsell-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.soft-upsell-dismiss {
  background: transparent;
  border: none;
  color: var(--text-dimmed);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  transition: color 0.15s ease;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.soft-upsell-dismiss:hover {
  color: var(--text-muted);
}

/* Hide for paid users */
body.paid-user .soft-upsell-banner {
  display: none !important;
}

/* Mobile: stack text and button vertically */
@media (max-width: 480px) {
  .soft-upsell-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 32px 10px 12px;
  }
  .soft-upsell-text {
    font-size: 0.78rem;
    flex: 1 1 100%;
    text-align: center;
  }
  .soft-upsell-btn {
    margin: 0 auto;
  }
}

/* ============================================
   EDITOR AD BAR
   Bottom strip for free users in editor (part of grid layout)
   ============================================ */

.editor-ad-bar {
  display: none;
  grid-area: ad;
  background: var(--card-tonal);
  border-top: 1px solid var(--hairline);
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-bottom));
  text-align: center;
  overflow: hidden;
  min-height: 0;
  height: 66px;
  max-height: 66px !important;
}

/* Desktop: larger 728x90 leaderboard format */
@media (min-width: 768px) {
  .editor-ad-bar {
    height: 106px; /* 90px ad + 16px padding */
    max-height: 106px !important;
  }
}

/* Only show when visible class is added AND app has image */
.app.has-image .editor-ad-bar.visible {
  display: block;
}

/* Hide for paid users (via body class) */
body.paid-user .editor-ad-bar {
  display: none !important;
}

/* Responsive ad sizing */
.editor-ad-bar .adsbygoogle {
  display: block !important;
  margin: 0 auto;
  /* Mobile: 320x50 */
  width: 320px;
  height: 50px;
}

/* Desktop: 728x90 leaderboard */
@media (min-width: 768px) {
  .editor-ad-bar .adsbygoogle {
    width: 728px;
    height: 90px;
  }
}

/* Clip any oversized ad content */
.editor-ad-bar ins,
.editor-ad-bar iframe {
  overflow: hidden !important;
}

/* Interstitial Ad Overlay (shown during edit generation for free users) */
.interstitial-ad-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 66px; /* Leave room for editor ad bar (mobile: 50px ad + 16px padding) */
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Desktop: larger ad bar */
@media (min-width: 768px) {
  .interstitial-ad-overlay {
    bottom: 106px; /* 90px ad + 16px padding */
  }
}

.interstitial-ad-overlay.visible {
  display: flex;
}

.interstitial-ad-container {
  max-width: 400px;
  max-height: 90vh;
  width: 100%;
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid rgba(26, 26, 46, 0.05);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.12);
}

.interstitial-ad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.interstitial-ad-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.interstitial-ad-timer {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.interstitial-ad-content {
  width: 100%;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
}

.interstitial-ad-content .adsbygoogle {
  width: 100%;
  min-height: 250px;
}

.interstitial-ad-footer {
  padding: 18px 24px;
  text-align: center;
}

/* Skip button — circular progress ring during countdown, pill button when ready */
.interstitial-ad-skip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: default;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.skip-ring {
  position: absolute;
  top: 0;
  left: 0;
}

.skip-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2.5;
}

.skip-ring-fill {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1s linear;
}

.skip-countdown {
  position: relative;
  z-index: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s;
}

/* Ready state — morph into pill button */
.interstitial-ad-skip.enabled {
  width: auto;
  height: auto;
  padding: 12px 28px;
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  animation: skip-ready 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.interstitial-ad-skip.enabled .skip-ring {
  display: none;
}

.interstitial-ad-skip.enabled .skip-countdown {
  color: var(--text, #1a1a2e);
  font-size: 0.95rem;
  font-weight: 600;
}

.interstitial-ad-skip.enabled:active {
  transform: scale(0.96);
}

@keyframes skip-ready {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.interstitial-ad-upgrade {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-dimmed);
}

.interstitial-ad-upgrade a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.interstitial-ad-upgrade a:hover {
  text-decoration: underline;
}

/* Edit progress bar inside interstitial ad */
.interstitial-ad-progress {
  padding: var(--space-3) 24px 0;
}

.interstitial-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(26, 26, 46, 0.06);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.interstitial-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  /* Linear interpolation matched to the 200ms editProgress tick — the next
     dispatch arrives exactly as the previous transition finishes, so the bar
     moves at a constant velocity instead of rubber-banding. */
  transition: width 200ms linear;
  position: relative;
  overflow: hidden;
  will-change: width;
}

/* Single highlight band sweeping L→R continuously (was a back-and-forth
   background-position oscillation that read as jitter). */
.interstitial-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: interstitial-shimmer 1.6s linear infinite;
  will-change: transform;
}

.interstitial-progress-fill.complete {
  background: var(--success);
}

.interstitial-progress-fill.complete::after {
  animation: none;
  background: transparent;
}

.interstitial-progress-label {
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-slow);
}

.interstitial-progress-label.complete {
  color: var(--success);
  font-weight: 600;
}

@keyframes interstitial-shimmer {
  to { transform: translateX(100%); }
}

/* Hide interstitial ad for paid users */
body.paid-user .interstitial-ad-overlay {
  display: none !important;
}

/* House ad fallback — shown when interstitial ad doesn't fill */
.house-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  gap: 16px;
  width: 100%;
  min-height: 250px;
  background: var(--bg-subtle);
  animation: house-ad-enter 0.4s var(--ease-out) both;
}

@keyframes house-ad-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.house-ad-before-after {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.house-ad-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dimmed);
  padding-left: 2px;
}

.house-ad-label.highlight {
  color: var(--primary);
}

.house-ad-comparison {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.house-ad-comparison.highlight .house-ad-col {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.12);
}

.house-ad-col {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.house-ad-col-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
}

.house-ad-col-icon.check {
  color: var(--primary);
}

.house-ad-col-text {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}

.house-ad-cta {
  width: 100%;
  padding: 13px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.house-ad-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
}

.house-ad-cta:active {
  transform: translateY(0);
}

/* ============================================
   DASHBOARD — Logged-in user edits grid
   ============================================ */

.dashboard-section {
  padding: 24px 16px 80px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Header --- */

.dash-header {
  margin-bottom: 20px;
}

.dash-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.01em;
}

.dash-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.dash-subtitle:empty {
  display: none;
}

.dash-subtitle a {
  color: var(--text, #1a1a2e);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
  text-underline-offset: 2px;
  font-weight: 500;
}

/* --- Search --- */

.dash-search {
  position: relative;
  margin-bottom: 16px;
}

.dash-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.dash-search-input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 0.875rem;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.dash-search-input:focus {
  border-color: var(--primary);
}

.dash-search-input::placeholder {
  color: var(--text-muted);
}

.dash-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-search-clear:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

/* Search autocomplete */
.search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 50;
  overflow: hidden;
}

.ac-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-item:hover {
  background: var(--bg-secondary);
}

.ac-item + .ac-item {
  border-top: 1px solid var(--border);
}

.dash-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.dash-toolbar .dash-search {
  flex: 1;
  margin-bottom: 0;
}
.dash-sort-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-sort-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Density toggle */
.dash-density-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-density-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Hide compact toggle on desktop — only useful on mobile */
@media (min-width: 900px) {
  .dash-density-btn { display: none; }
  .dash-grid-compact .dash-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; }
  .dash-grid-compact .dash-card { border-radius: var(--radius-lg); }
  .dash-grid-compact .dash-card-overlay,
  .dash-grid-compact .dash-card-prompt,
  .dash-grid-compact .dash-card-date { display: flex !important; }
  .dash-grid-compact .dash-card-thumb { aspect-ratio: auto; }
}

/* Compact grid overrides */
.dash-grid-compact .dash-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

@media (min-width: 640px) {
  .dash-grid-compact .dash-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.dash-grid-compact .dash-card {
  border-radius: 8px;
}

.dash-grid-compact .dash-card-overlay,
.dash-grid-compact .dash-card-prompt,
.dash-grid-compact .dash-card-date {
  display: none !important;
}

.dash-grid-compact .dash-card-thumb {
  aspect-ratio: 1;
}

/* Date filter chips */
.dash-filter-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-filter-chip {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dash-filter-chip:hover {
  border-color: var(--text, #1a1a2e);
  color: var(--text);
}
.dash-filter-chip.active {
  background: var(--text, #1a1a2e);
  border-color: var(--text, #1a1a2e);
  color: white;
}

.dash-no-results {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* --- Skeleton --- */

.dash-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dash-skeleton-card {
  aspect-ratio: 1;
  border-radius: 12px;
  background: linear-gradient(110deg, var(--bg-subtle) 30%, var(--border) 50%, var(--bg-subtle) 70%);
  background-size: 200% 100%;
  animation: dash-shimmer 1.5s var(--ease-in-out) infinite;
}

@keyframes dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Empty state (first-time experience) --- */

.dash-empty {
  text-align: center;
  padding: 48px 20px 60px;
}

.dash-empty-hero {
  max-width: 380px;
  margin: 0 auto 28px;
}

.dash-empty-headline {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.dash-empty-sub {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.5;
}

.dash-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--text, #1a1a2e);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  -webkit-tap-highlight-color: transparent;
}

.dash-empty-cta svg {
  flex-shrink: 0;
}

@media (hover: hover) {
  .dash-empty-cta:hover {
    background: #2d2d44;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
  }
}

.dash-empty-cta:active {
  transform: scale(0.97);
}

/* --- Date groups --- */

.dash-date-group {
  margin-bottom: 24px;
}

.dash-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* --- Edit grid --- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .dash-skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .dash-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .dash-skeleton-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Edit card (dashboard variant) --- */

.dash-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.dash-card:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }
}

.dash-card-thumb {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg-subtle);
  overflow: hidden;
}

.dash-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard);
}

.dash-card-thumb img.loaded {
  opacity: 1;
}

.dash-card-thumb img.error {
  display: none;
}

.dash-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dimmed);
}

.dash-card-fallback svg {
  width: 32px;
  height: 32px;
}

.dash-card-lock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 6px;
  padding: 4px;
  color: #fff;
}

.dash-card-lock svg {
  width: 14px;
  height: 14px;
}

/* Overlay bar at bottom */
.dash-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.dash-card-prompt {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-card-date {
  color: rgba(255,255,255,0.7);
  font-size: 0.6875rem;
}

/* Expired */
.dash-card--expired {
  opacity: 0.55;
}

/* Remove animation */
.dash-card.removing {
  animation: dash-card-remove 0.25s var(--ease-out) forwards;
}

@keyframes dash-card-remove {
  to { opacity: 0; transform: scale(0.9); }
}

/* Keyboard focus ring */
.dash-card.kbd-focus {
  outline: 2px solid var(--text, #1a1a2e);
  outline-offset: 2px;
}

/* --- New edit "+" card --- */

.dash-card-new {
  cursor: pointer;
  display: block;
}

.dash-card-new-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--text, #1a1a2e);
  border: none;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.dash-card-new-inner::after {
  display: none;
}

.dash-card-new-inner svg {
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.15s;
}

.dash-card-new-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

@media (hover: hover) {
  .dash-card-new:hover .dash-card-new-inner {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: #2d2d44;
  }
  .dash-card-new:hover .dash-card-new-inner svg {
    transform: scale(1.05);
  }
}

.dash-card-new:active .dash-card-new-inner {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.dash-card-new.drag-over .dash-card-new-inner {
  background: linear-gradient(135deg, #3d3d58 0%, #1a1a2e 50%, #151528 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(0, 0, 0, 0.15);
  transform: scale(1.02);
}

.dash-card-new.drag-over .dash-card-new-inner svg {
  transform: scale(1.15);
}

/* --- Full-screen preview overlay --- */

.dash-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-standard);
}

.dash-preview-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.dash-preview-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: 16px;
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.dash-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 85vh;
  gap: 16px;
  transition: transform 0.2s var(--ease-standard);
}

.dash-preview-img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

.dash-preview-info {
  text-align: center;
  max-width: 400px;
}

.dash-preview-prompt {
  color: #fff;
  font-size: 0.9375rem;
  margin: 0 0 4px;
  line-height: 1.4;
}

.dash-preview-date {
  color: rgba(255,255,255,0.6);
  font-size: 0.8125rem;
}

.dash-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dash-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.dash-preview-btn:active {
  background: rgba(255,255,255,0.2);
}

.dash-preview-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dash-preview-btn--delete {
  color: #ef4444;
  border-color: rgba(239,68,68,0.25);
}

.dash-preview-btn--delete:active {
  background: rgba(239,68,68,0.15);
}

/* --- Pro mode (dark) overrides --- */

.app.pro-mode ~ .dashboard-section,
.pro-mode-hint .dashboard-section {
  /* Text adjusts via CSS variables already */
}

/* --- Homepage hidden when dashboard visible --- */

.dashboard-section:not([hidden]) ~ .homepage-content {
  display: none !important;
}

/* When editing, hide dashboard via JS (hidden attribute) */


/* --- Bulk Select --- */

.dash-select-btn {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.dash-select-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Select mode: hide toolbar controls, show only bulk bar */
.select-mode .dash-search,
.select-mode .dash-sort-btn,
.select-mode .dash-density-btn,
.select-mode .dash-filter-chips {
  display: none;
}
.select-mode .dash-select-btn {
  display: none;
}

/* Card selection checkbox */
.select-mode .dash-card { cursor: pointer; position: relative; }
.select-mode .dash-card::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  z-index: 2;
  transition: all 0.15s var(--ease-standard);
}
.select-mode .dash-card.selected::before {
  background: var(--primary);
  border-color: var(--primary);
}
.select-mode .dash-card.selected::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  z-index: 3;
}
.select-mode .dash-card.selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.select-mode .dash-card-new {
  pointer-events: none;
  opacity: 0.4;
}
.select-mode .dash-card-new::before,
.select-mode .dash-card-new::after { display: none; }

/* Floating bulk action bar */
.bulk-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 100;
}
.bulk-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.bulk-delete-btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  background: #ef4444;
  color: white;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.bulk-delete-btn:hover { background: #dc2626; }
.bulk-cancel-btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8125rem;
  cursor: pointer;
}
.bulk-download-btn {
  padding: 8px 16px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
}
.bulk-download-btn:hover {
  background: var(--primary);
  color: #fff;
}
.bulk-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bulk-cancel-btn:hover { color: var(--text); }