/* === variables.css === */
/* ============================================
   CSS VARIABLES - Design System Tokens
   ============================================ */

:root {
  /* ----------------------------------------
     PRIMARY COLORS
     Deep violet with light accents
     ---------------------------------------- */
  --primary: #7C3AED;
  --primary-rgb: 124, 58, 237;
  --primary-hover: #6D28D9;
  --primary-light: #A78BFA;
  --font-display: 'Instrument Serif', Georgia, serif;

  /* ----------------------------------------
     BACKGROUNDS - Light mode
     Clean neutrals, no color tint
     ---------------------------------------- */
  --bg: #ffffff;
  --bg-subtle: #f7f5fb;
  --bg-secondary: #f1f1f4;
  --card: #ffffff;
  --card-hover: #f8f8fa;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.05);

  /* ----------------------------------------
     TEXT COLORS
     ---------------------------------------- */
  --text: #1a1a2e;
  --text-muted: rgba(26, 26, 46, 0.58);
  --text-dimmed: rgba(26, 26, 46, 0.38);

  /* ----------------------------------------
     ACCENT COLOR
     ---------------------------------------- */
  --accent: #38BDF8;

  /* ----------------------------------------
     MARKERS
     Warm coral (softer than pure orange)
     ---------------------------------------- */
  --marker: #F97066;
  --marker-bg: rgba(249, 112, 102, 0.15);

  /* ----------------------------------------
     STATUS COLORS
     ---------------------------------------- */
  --success: #34D399;
  --error: #F87171;

  /* ----------------------------------------
     EFFECTS
     ---------------------------------------- */
  --glow: rgba(124, 58, 237, 0.15);

  /* ----------------------------------------
     VIOLET ATMOSPHERE — Design language tokens
     ---------------------------------------- */
  --violet-wash: rgba(var(--primary-rgb), 0.03);
  --violet-tint: rgba(var(--primary-rgb), 0.08);
  --violet-focus: rgba(var(--primary-rgb), 0.15);
  --border-violet: rgba(var(--primary-rgb), 0.08);
  --shadow-violet-sm: 0 2px 8px rgba(var(--primary-rgb), 0.15), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-violet-md: 0 4px 16px rgba(var(--primary-rgb), 0.2), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-violet-lg: 0 8px 24px rgba(var(--primary-rgb), 0.25), 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ----------------------------------------
     SAFE AREAS (iOS notch, etc.)
     ---------------------------------------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ----------------------------------------
     SPACING SCALE
     ---------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ----------------------------------------
     BORDER RADIUS SCALE
     ---------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  --transition-fast: 0.15s var(--ease-standard);
  --transition-base: 0.2s var(--ease-standard);
  --transition-slow: 0.3s var(--ease-standard);

  /* ----------------------------------------
     ADDITIONAL SEMANTIC COLORS
     ---------------------------------------- */
  --warning: #f59e0b;
  --info: #3b82f6;

  /* ----------------------------------------
     ELEVATION - Clean neutral shadows
     ---------------------------------------- */
  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
  --surface-elevated: rgba(255, 255, 255, 0.95);

  /* ----------------------------------------
     ALIASES (backward compatibility)
     ---------------------------------------- */
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-dimmed);
  --surface: var(--card);
}

/* ----------------------------------------
   PRO MODE - Dark premium theme
   for logged-in users with credits/subscription
   ---------------------------------------- */
.app.pro-mode,
html.pro-mode-hint {
  --bg: #0a0a0f;
  --bg-subtle: #111118;
  --bg-secondary: #141420;
  --card: #111118;
  --card-hover: #181822;
  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --text: #e8e8ec;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-dimmed: rgba(255, 255, 255, 0.35);
  --primary-hover: #8B5CF6;
  --glow: rgba(124, 58, 237, 0.25);
  --marker-bg: rgba(249, 112, 102, 0.2);
  --shadow-color: 124, 58, 237;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(124, 58, 237, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(124, 58, 237, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3), 0 12px 40px rgba(124, 58, 237, 0.15);
  --surface-elevated: rgba(20, 20, 32, 0.85);
}

/* Prevent horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* === base.css === */
/* ============================================
   BASE STYLES
   Reset, typography, focus indicators,
   utility classes, and keyframe animations
   ============================================ */

/* ----------------------------------------
   CSS RESET
   ---------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

/* ----------------------------------------
   FOCUS INDICATORS - Accessibility
   ---------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----------------------------------------
   UTILITY CLASSES
   ---------------------------------------- */
.hidden {
  display: none !important;
}

/* ----------------------------------------
   HIDDEN FILE INPUT
   Using sr-only pattern instead of display:none for mobile browser compatibility.
   display:none breaks label-input association on Samsung Internet and some other mobile browsers.
   ---------------------------------------- */
#fileInput,
#secondFileInput,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Credits button celebration */
@keyframes celebrateCredits {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Ripple effect for empty state */
@keyframes ripple {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Edit marker pulse */
@keyframes marker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Shimmer effect for tips */
@keyframes shimmer {
  0%, 80% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Image reveal animation */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge pulse animation */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================================
   DESKTOP OVERRIDES - Ripple animation
   ============================================ */
@media (min-width: 900px) {
  @keyframes ripple {
    0% { width: 100px; height: 100px; opacity: 0.5; }
    100% { width: 400px; height: 400px; opacity: 0; }
  }
}

/* === components.css === */
/* ============================================
   COMPONENT STYLES
   Reusable UI components: buttons, inputs,
   modals, sheets, credit packs, etc.
   ============================================ */

/* ============================================
   PRICING FLASH PREVENTION
   Hide price values until localized prices load.
   JS adds .pricing-loaded to <html> after /api/pricing returns.
   ============================================ */
html:not(.pricing-loaded) [data-sub-tier-price],
html:not(.pricing-loaded) [data-onetime-price] {
  visibility: hidden;
}

/* ============================================
   BODY SCROLL LOCK
   Applied when modals/sheets are open
   ============================================ */
body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  /* height set dynamically via JS for iOS Safari */
}

/* Prevent touch scroll passthrough on iOS */
body.modal-open .sheet-overlay,
body.modal-open .modal-overlay {
  touch-action: none;
  -webkit-overflow-scrolling: auto;
}

/* Hide GDPR consent banner when modals/sheets are open */
body.modal-open #gdpr-banner,
body.modal-open [id*="gdpr"],
body.modal-open [class*="gdpr"],
body.modal-open [class*="consent-banner"] {
  display: none !important;
}

/* ============================================
   BUTTONS - General
   ============================================ */
.btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-primary:active {
  background: var(--primary-hover);
  transform: scale(0.96);
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.2);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-dimmed);
}

.btn-secondary:active {
  background: var(--border);
  transform: scale(0.96);
}

/* ============================================
   DRAG & DROP OVERLAY
   Full-viewport overlay when dragging files
   ============================================ */
.drag-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(124, 58, 237, 0.08);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.drag-overlay.visible {
  display: flex;
  animation: drag-overlay-in 0.15s var(--ease-out);
}

@keyframes drag-overlay-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(2px);
  }
}

.drag-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 64px;
  background: var(--bg);
  border: 3px dashed var(--primary);
  border-radius: 24px;
  box-shadow:
    0 0 0 8px rgba(124, 58, 237, 0.1),
    0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: drag-content-pulse 1.5s var(--ease-in-out) infinite;
}

@keyframes drag-content-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 8px rgba(124, 58, 237, 0.1),
      0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 0 0 12px rgba(124, 58, 237, 0.15),
      0 30px 60px -12px rgba(0, 0, 0, 0.3);
  }
}

.drag-overlay-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glow);
  border-radius: 20px;
  color: var(--primary);
}

.drag-overlay-icon svg {
  width: 40px;
  height: 40px;
}

.drag-overlay-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
}

.drag-overlay-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Hide hint when no photo loaded yet */
body:not(.has-image) .drag-overlay-hint {
  display: none;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .drag-overlay {
    background: rgba(124, 58, 237, 0.12);
  }

  .drag-overlay-content {
    background: var(--bg-secondary);
    border-color: var(--primary);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .drag-overlay-content {
    padding: 32px 40px;
    margin: 16px;
  }

  .drag-overlay-icon {
    width: 64px;
    height: 64px;
  }

  .drag-overlay-icon svg {
    width: 32px;
    height: 32px;
  }

  .drag-overlay-text {
    font-size: 1.25rem;
  }
}

/* ============================================
   EDIT CARD - Premium unified input
   ============================================ */
.edit-card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  box-shadow:
    0 -4px 16px rgba(124, 58, 237, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s var(--ease-standard);
}

.edit-card:focus-within {
  border-color: rgba(124, 58, 237, 0.15);
  box-shadow:
    0 0 0 3px rgba(124, 58, 237, 0.1),
    0 4px 16px rgba(124, 58, 237, 0.08);
}

/* Post-upload attention animation - draws user to prompt input */
.edit-card.attention {
  animation: edit-card-attention 1.5s var(--ease-standard);
}

@keyframes edit-card-attention {
  0% {
    border-color: var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  }
  25% {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2), 0 4px 20px rgba(124, 58, 237, 0.15);
    transform: scale(1.01);
  }
  50% {
    border-color: var(--primary);
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.15), 0 4px 24px rgba(124, 58, 237, 0.2);
    transform: scale(1.01);
  }
  75% {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1), 0 4px 16px rgba(124, 58, 237, 0.1);
    transform: scale(1.005);
  }
  100% {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--glow), 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: scale(1);
  }
}

/* ============================================
   PROMPT SUGGESTIONS - Post-upload guidance
   Shows clickable example prompts to help users
   understand what to type
   ============================================ */
.prompt-suggestions {
  display: none;
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle);
  animation: prompt-suggestions-appear 0.3s var(--ease-standard);
}

.prompt-suggestions.visible {
  display: block;
}

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

.prompt-suggestions-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.prompt-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--primary);
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  white-space: nowrap;
}

.prompt-chip:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.prompt-chip:active {
  transform: translateY(0);
  background: rgba(124, 58, 237, 0.15);
}

/* Mobile: smaller chips, allow wrapping */
@media (max-width: 480px) {
  .prompt-chip {
    padding: 5px 10px;
    font-size: 12px;
  }

  .prompt-suggestions-list {
    gap: 6px;
  }
}

/* Task prompts guidance — used by suggestions.js for reference-image tasks */
.task-prompts-guidance .guidance-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.task-prompts-guidance .guidance-text {
  line-height: 1.4;
}

/* ============================================
   RESULT TOOLBAR - Compact pill buttons (post-edit)
   ============================================ */
.result-toolbar {
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 12px;
}

.result-toolbar.visible {
  display: flex;
  animation: result-toolbar-in 0.25s var(--ease-out);
}

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

.result-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: var(--radius-pill, 100px);
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s var(--ease-standard);
  border: none;
  white-space: nowrap;
}

.result-pill svg {
  flex-shrink: 0;
}

.result-pill-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.result-pill-primary:active {
  transform: scale(0.95);
}

.result-pill-primary:hover {
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.result-pill-primary.saving {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

.result-pill-primary.saving::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: saving-spin 0.6s linear infinite;
  margin-left: 6px;
  vertical-align: middle;
}

@keyframes saving-spin {
  to { transform: rotate(360deg); }
}

/* Attention pulse on save button after reveal dismissal */
.result-pill-primary.save-attention {
  animation: save-attention-pulse 1.5s var(--ease-out);
}

@keyframes save-attention-pulse {
  0%   { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); transform: scale(1); }
  15%  { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.25), 0 4px 16px rgba(124, 58, 237, 0.5); transform: scale(1.08); }
  30%  { box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15), 0 2px 8px rgba(124, 58, 237, 0.3); transform: scale(1); }
  50%  { box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2), 0 4px 16px rgba(124, 58, 237, 0.4); transform: scale(1.06); }
  70%  { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); transform: scale(1); }
  100% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3); transform: scale(1); }
}

.result-pill-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
}

.result-pill-secondary:active {
  transform: scale(0.95);
  background: var(--bg);
}

.result-pill-secondary:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
}

.result-pill:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Mobile: icon-only pills */
@media (max-width: 480px) {
  .result-pill {
    padding: 8px 12px;
  }
}

.edit-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============================================
   PROMPT INPUT - Clean textarea
   ============================================ */
.prompt-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-subtle);
  color: var(--text);
  font-size: 1rem;
  resize: none;
  min-height: 72px;
  max-height: 160px;
  line-height: 1.55;
  cursor: text;
  transition: background-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), border-color 0.2s var(--ease-standard);
}

.prompt-input:hover {
  border-color: rgba(124, 58, 237, 0.08);
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.prompt-input:focus {
  outline: none;
  background: var(--bg);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.prompt-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.2s var(--ease-standard);
}

.prompt-input:focus::placeholder {
  opacity: 0.4;
}

.prompt-wrapper {
  position: relative;
  width: 100%;
  cursor: text;
}

.prompt-char-count {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.prompt-char-count.visible {
  opacity: 0.6;
}

.prompt-char-count.warning {
  color: #f59e0b;
  opacity: 1;
}

.prompt-char-count.danger {
  color: #ef4444;
  opacity: 1;
}

/* ============================================
   REFERENCE PHOTO SECTION
   Prominent add/preview for reference images
   ============================================ */
.reference-photo-section {
  margin-top: 8px;
}

/* Add Reference Button — minimal inline link */
.add-reference-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s var(--ease-standard);
  text-align: left;
}

.add-reference-btn:hover {
  color: var(--primary);
}

.add-reference-btn:active {
  transform: scale(0.98);
}

.add-reference-icon {
  flex-shrink: 0;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  color: var(--text-dimmed);
  transition: color 0.15s;
}

.add-reference-btn:hover .add-reference-icon {
  color: var(--primary);
}

.add-reference-icon svg {
  width: 15px;
  height: 15px;
}

.add-reference-text {
  flex: 1;
  min-width: 0;
}

.add-reference-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmed);
  transition: color 0.15s;
}

.add-reference-btn:hover .add-reference-label {
  color: var(--primary);
}

.add-reference-hint {
  display: none;
}

.add-reference-plus {
  display: none;
}

/* Reference Preview (when photo added) */
.reference-preview {
  display: none;
  background: var(--bg-subtle);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}

.reference-preview.visible {
  display: block;
}

.reference-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}

.reference-preview-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--primary);
}

.reference-remove-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.reference-remove-btn:hover {
  color: var(--error, #EF4444);
  border-color: var(--error, #EF4444);
  background: rgba(239, 68, 68, 0.1);
}

.reference-preview-content {
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.reference-preview-content img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid rgba(124, 58, 237, 0.3);
  background: var(--bg);
}

.reference-preview-hint {
  flex: 1;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Hide add button when preview is visible */
.reference-preview.visible ~ .add-reference-btn,
.reference-photo-section:has(.reference-preview.visible) .add-reference-btn {
  display: none;
}

/* When reference is added, also hide the photo strip add button */
body.has-two-photos .add-reference-btn {
  display: none;
}

/* Show reference preview when in two-photo mode */
body.has-two-photos .reference-preview {
  display: block;
}

/* Reference section stays visible in result state for chain editing */

/* Mobile: more compact */
@media (max-width: 768px) {
  .reference-photo-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  .add-reference-btn {
    padding: 8px 12px;
    gap: 8px;
  }

  .add-reference-icon {
    width: 28px;
    height: 28px;
  }

  .add-reference-icon svg {
    width: 14px;
    height: 14px;
  }

  .add-reference-label {
    font-size: 0.75rem;
  }

  .add-reference-hint {
    font-size: 0.65rem;
  }

  .reference-preview-content {
    padding: 10px;
    gap: 10px;
  }

  .reference-preview-content img {
    width: 48px;
    height: 48px;
  }

  .reference-preview-hint {
    font-size: 0.75rem;
  }
}

/* ============================================
   EDIT COST INDICATOR
   ============================================ */
.edit-cost-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.edit-cost-indicator .cost-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-cost-indicator.free .cost-text {
  color: #10b981;
  font-weight: 500;
}

.edit-cost-indicator.pro .cost-text {
  color: var(--primary);
}

.edit-cost-indicator.insufficient .cost-text {
  color: #f59e0b;
  font-weight: 500;
}

/* Edit button needs-credits state */
.edit-btn.needs-credits {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  box-shadow:
    0 4px 14px rgba(245, 158, 11, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.edit-btn.needs-credits:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  box-shadow:
    0 8px 24px rgba(245, 158, 11, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Countdown waiting state - muted but still tappable */
.edit-btn.countdown-waiting {
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%);
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(107, 114, 128, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.edit-btn.countdown-waiting:hover {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 50%, #374151 100%);
  box-shadow:
    0 4px 14px rgba(107, 114, 128, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Edit cost caption - subtle text below quality toggle */
.edit-cost-caption {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
  text-align: center;
}

.edit-cost-caption.free {
  color: #10b981;
  font-weight: 500;
}

.edit-cost-caption.warning {
  color: #f59e0b;
}

/* ============================================
   QUALITY TOGGLE - iOS-style segmented control
   ============================================ */
.quality-toggle {
  display: flex;
}

.toggle-track {
  position: relative;
  display: flex;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 2px;
  border: 1px solid var(--border-subtle);
}

.toggle-indicator {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: var(--bg);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toggle-indicator.right {
  transform: translateX(100%);
}

.toggle-option {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 8px 14px;
  min-height: 36px;
  border: none;
  background: transparent;
  color: var(--text-dimmed);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-option.active {
  color: var(--text);
}

.toggle-option#proOption.active {
  color: var(--primary);
}

.toggle-indicator.right {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.1);
}

/* Disabled state for Smart when insufficient credits */
.toggle-option#proOption.insufficient {
  opacity: 0.5;
}

/* ============================================
   QUALITY HELP TOOLTIP
   ============================================ */
.quality-toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  z-index: 20;
}

/* Pro mode inline upsell - appears when Pro selected but can't afford */
.pro-upsell {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  margin-top: 4px;
}

.pro-upsell.visible {
  display: flex;
}

.pro-upsell:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: rgba(124, 58, 237, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

.pro-upsell-text {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 500;
}

.pro-upsell-arrow {
  font-size: 0.8rem;
  color: var(--primary);
}

.quality-help-btn {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-standard);
  flex-shrink: 0;
}

.quality-help-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--primary);
}

.quality-help-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  background: var(--bg);
  border: 1px solid rgba(124, 58, 237, 0.08);
  border-radius: 14px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 12px 40px rgba(124, 58, 237, 0.08);
  z-index: 9999;
  width: 320px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.quality-help-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.quality-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.quality-help-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.quality-help-close:hover {
  color: var(--text);
}

.quality-help-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quality-help-option {
  padding: 14px;
  background: var(--bg-subtle);
  border-radius: 12px;
}

.quality-help-option.smart {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.06) 0%, rgba(124, 58, 237, 0.03) 100%);
  border: 1px solid rgba(124, 58, 237, 0.08);
}

.quality-help-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-help-cost {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 10px;
}

.quality-help-option.smart .quality-help-title {
  color: var(--primary);
}

.quality-help-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.quality-help-examples {
  margin: 0;
  padding-left: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.quality-help-examples li {
  margin-bottom: 2px;
}

/* Mobile: center tooltip */
@media (max-width: 480px) {
  .quality-help-tooltip {
    position: fixed;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    width: calc(100vw - 32px);
    max-width: 360px;
    opacity: 0;
    visibility: hidden;
  }

  .quality-help-tooltip.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    visibility: visible;
  }
}

/* ============================================
   EDIT BUTTON - Primary action
   ============================================ */
.edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 32px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #7C3AED 100%);
  background-size: 200% 200%;
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  min-height: 52px;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  animation:
    edit-btn-gradient 4s var(--ease-in-out) infinite,
    edit-btn-glow 3s var(--ease-in-out) infinite;
}

@keyframes edit-btn-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes edit-btn-glow {
  0%, 100% {
    box-shadow:
      0 4px 14px rgba(124, 58, 237, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(124, 58, 237, 0.45),
      0 0 32px rgba(124, 58, 237, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Shimmer sweep on hover */
.edit-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.edit-btn:hover::after {
  left: 100%;
}

.edit-btn:hover {
  transform: translateY(-2px);
  animation: none;
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.5),
    0 0 40px rgba(124, 58, 237, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.edit-btn:active {
  transform: translateY(0) scale(0.98);
  animation: none;
  box-shadow:
    0 2px 8px rgba(124, 58, 237, 0.3),
    inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.edit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  animation: none;
}

.edit-btn:disabled::after {
  display: none;
}

/* Highlight animation for quick edit flow - draws attention to confirm */
.edit-btn.highlight {
  animation: editBtnHighlight 1.5s var(--ease-standard);
}

@keyframes editBtnHighlight {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  }
  20% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.3), 0 8px 24px rgba(124, 58, 237, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
  }
}

.edit-btn-text {
  font-weight: 700;
}

.edit-btn-icon {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-standard);
}

.edit-btn:hover .edit-btn-icon {
  transform: rotate(15deg) scale(1.1);
}

/* Free edit button state - keep standard purple styling */
.edit-btn.free-edit {
  /* Intentionally no override — stays on-brand */
}

/* ============================================
   REFERENCE IMAGE BUTTON
   ============================================ */
/* ============================================
   REFERENCE IMAGE CARD
   Mobile: Compact thumbnail strip (60px)
   Desktop: Larger preview in sidebar
   ============================================ */
.reference-card {
  display: none;
  flex-direction: column;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.reference-card.visible {
  display: flex;
}

.reference-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.reference-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.reference-card-label svg {
  color: var(--primary);
}

.reference-card-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
}

.reference-card-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--error);
}

.reference-card-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
}

.reference-card-image img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

.reference-card-hint {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  margin-top: 8px;
  text-align: center;
}

/* Tap hint for mobile */
.reference-card-tap-hint {
  display: none;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  text-align: center;
  margin-top: 4px;
}

/* ============================================
   MOBILE: Compact thumbnail strip
   ============================================ */
@media (max-width: 768px) {
  .reference-card {
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
    margin-bottom: 8px;
  }

  .reference-card-header {
    display: none; /* Hide header on mobile, use inline layout */
  }

  .reference-card-image {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  .reference-card-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* Mobile inline content */
  .reference-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .reference-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .reference-card-title svg {
    width: 12px;
    height: 12px;
    color: var(--primary);
  }

  .reference-card-tap-hint {
    display: block;
    text-align: left;
    margin-top: 0;
  }

  .reference-card-hint {
    display: none; /* Hide verbose hint on mobile */
  }

  /* Remove button - inline on mobile */
  .reference-card-remove-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s var(--ease-standard);
  }

  .reference-card-remove-mobile:hover,
  .reference-card-remove-mobile:active {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
  }
}

/* Desktop: Show full card layout */
@media (min-width: 769px) {
  .reference-card-content {
    display: none;
  }

  .reference-card-remove-mobile {
    display: none;
  }
}

/* ============================================
   REFERENCE IMAGE OVERLAY (Mobile expand)
   Full-screen view when tapping thumbnail
   ============================================ */
.reference-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard);
}

.reference-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.reference-overlay-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

.reference-overlay-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-overlay-title svg {
  color: var(--primary);
}

.reference-overlay-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all 0.15s var(--ease-standard);
}

.reference-overlay-close:hover,
.reference-overlay-close:active {
  background: rgba(255, 255, 255, 0.2);
}

.reference-overlay-image {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  object-fit: contain;
  border-radius: 12px;
}

.reference-overlay-hint {
  position: absolute;
  bottom: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* Add Reference Button */
.reference-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  flex-shrink: 0;
  min-height: 44px; /* Touch target */
}

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

.reference-btn:active {
  transform: scale(0.98);
}

.reference-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.reference-btn-text {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Hide button when reference is visible */
.reference-card.visible ~ .edit-card .reference-btn {
  display: none;
}

/* ============================================
   PHOTO STRIP (Equal Photos Architecture)
   Horizontal strip of numbered photo thumbnails
   Positioned inside image-area, below the image-container
   ============================================ */
.photo-strip {
  display: none; /* Hidden until photo loaded */
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  flex-shrink: 0;
}

.photo-strip.visible {
  display: flex;
}

.photo-strip-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 0;
}

/* Extra bottom padding for labels in two-photo mode */
.photo-strip.two-photos .photo-strip-scroll {
  padding-bottom: 20px;
}

.photo-strip-scroll::-webkit-scrollbar {
  display: none;
}

.photo-strip-item {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid transparent;
  box-shadow: var(--shadow-sm);
  background: var(--bg-secondary);
  padding: 4px;
  transition: all 0.15s var(--ease-standard);
}

.photo-strip-item:hover {
  border-color: var(--border);
}

.photo-strip-item.active {
  border-color: var(--primary);
  background: var(--glow);
  box-shadow: var(--shadow-md);
}

/* Number badge */
.photo-strip-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.photo-strip-item.active .photo-strip-badge {
  background: var(--primary);
}

/* Reference badge - different color */
.photo-strip-badge-ref {
  font-size: 0.55rem;
  padding: 0 2px;
  width: auto;
  min-width: 20px;
  background: var(--orange, #F97316);
}

.photo-strip-item.active .photo-strip-badge-ref {
  background: var(--orange, #F97316);
}

/* Photo strip label (shown below thumbnail in two-photo mode) */
.photo-strip-label {
  display: none;
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.photo-strip.two-photos .photo-strip-label {
  display: block;
}

/* Thumbnail wrapper */
.photo-thumb-wrapper {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
}

.photo-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Markers badge (shows marker count) */
.photo-markers-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--orange, #F97316);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  display: none;
}

.photo-markers-badge:not(:empty) {
  display: block;
}

/* Remove button (on hover) */
.photo-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid white;
  background: var(--error, #EF4444);
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  z-index: 3;
  transition: transform 0.1s var(--ease-standard);
}

.photo-strip-item:hover .photo-remove-btn {
  display: flex;
}

.photo-remove-btn:hover {
  transform: scale(1.1);
}

/* ============================================
   PHOTO STRIP - Result Showing State
   When showing edit result, strip is view-only
   ============================================ */

/* Disable interaction styling when result is showing */
.has-result .photo-strip-item {
  cursor: default;
  opacity: 0.7;
}

.has-result .photo-strip-item:hover {
  border-color: transparent;
}

.has-result .photo-strip-item.active {
  opacity: 1;
  border-color: var(--primary);
}

/* Hide remove buttons when result is showing */
.has-result .photo-remove-btn {
  display: none !important;
}

/* Hide add button when result is showing */
.has-result .photo-strip-add {
  display: none !important;
}

/* View-only label on strip when result showing */
.photo-strip-view-label {
  display: none;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding: 4px 8px;
  background: var(--bg-secondary);
  border-radius: 6px;
  white-space: nowrap;
}

.has-result .photo-strip.two-photos .photo-strip-view-label {
  display: block;
}

/* Shake animation for blocked interactions */
.photo-strip.shake,
.photo-strip-item.shake {
  animation: photo-strip-shake 0.4s var(--ease-out);
}

@keyframes photo-strip-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Add photo button */
.photo-strip-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  gap: 4px;
  transition: all 0.15s var(--ease-standard);
}

.photo-strip-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--glow);
}

.photo-strip-add span {
  font-size: 0.7rem;
  font-weight: 500;
}

.photo-strip-add svg {
  width: 18px;
  height: 18px;
}

/* Hide add button when both photos loaded */
.photo-strip.two-photos .photo-strip-add {
  display: none;
}

/* Hide photo strip when showing result - UNLESS user has 2 photos */
.has-result .photo-strip:not(.two-photos) {
  display: none !important;
}

/* When 2 photos, show strip even with result (so user can switch) */
.has-result .photo-strip.two-photos {
  display: flex !important;
}

/* ============================================
   PHOTO STRIP MOBILE RESPONSIVENESS
   ============================================ */
@media (max-width: 768px) {
  /* Show photo strip on mobile when visible (image loaded) */
  .photo-strip.visible {
    display: flex !important;
    justify-content: center;
    padding: 8px 16px;
  }

  .photo-thumb-wrapper {
    width: 48px;
    height: 48px;
  }

  .photo-strip-add {
    width: 56px;
    height: 56px;
  }

  .photo-strip-badge {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
  }

  /* Remove button always visible on mobile (no hover state) */
  .photo-strip-item .photo-remove-btn {
    display: flex;
    width: 32px;
    height: 32px;
    top: -10px;
    right: -10px;
    font-size: 16px;
  }

  /* Hide strip when keyboard is open to prevent layout jumps */
  .keyboard-open .photo-strip {
    display: none !important;
  }

  .keyboard-open .reference-preview {
    display: none !important;
  }

  .photo-strip.two-photos .photo-strip-label {
    display: none;
  }
  .photo-strip.two-photos .photo-thumb-wrapper {
    width: 40px;
    height: 40px;
  }
  .photo-strip.two-photos {
    padding: 4px 12px;
  }
  .photo-strip.two-photos .photo-strip-scroll {
    padding-bottom: 0;
  }
}

/* ============================================
   DONE EDITING BUTTON
   ============================================ */
.done-editing-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 4px;
  transition: color 0.15s var(--ease-standard);
}

.done-editing-btn:hover {
  color: var(--text);
}

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

/* Legacy support */
.quality-chip {
  display: none;
}

.quality-row {
  display: none;
}

.quality-row.hidden {
  display: none;
}

.quality-btn {
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 40px;
}

.quality-btn:hover {
  border-color: var(--text-dimmed);
}

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

.quality-btn .cost {
  opacity: 0.7;
  font-size: 0.8rem;
}

/* ============================================
   BOTTOM SHEET (default for buySheet etc)
   ============================================ */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 10001; /* Above GDPR banner (9999) and interstitial (1000) */
  opacity: 0;
  visibility: hidden;
  /* Closing animation */
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard);
}

.sheet-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Opening: faster appearance */
  transition: opacity 0.1s var(--ease-standard), visibility 0.1s var(--ease-standard);
  /* Prevent iOS touch scroll passthrough */
  touch-action: none;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
}

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 24px;
  padding-bottom: calc(24px + var(--safe-bottom));
  z-index: 10002; /* Above GDPR banner (9999) and sheet-overlay (10001) */
  transform: translateY(100%);
  /* Closing animation */
  transition: transform 0.25s var(--ease-standard);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04), 0 -12px 40px rgba(0, 0, 0, 0.08);
  max-height: calc(85dvh - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.bottom-sheet.visible {
  transform: translateY(0);
  /* Opening: faster slide-up for snappier feel */
  transition: transform 0.15s var(--ease-standard);
}

.sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 20px;
  /* Larger touch area without changing visual size */
  padding: 12px 32px;
  margin-top: -12px;
  background-clip: content-box;
  cursor: grab;
  touch-action: pan-y;
}

/* ============================================
   USER SHEET - Centered modal on desktop
   ============================================ */
#userSheetOverlay {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#userSheet {
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.95) !important;
  width: 90%;
  max-width: 380px;
  border-radius: 16px !important;
  padding: 32px;
  border: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 10px 25px -3px rgba(0, 0, 0, 0.08),
    0 20px 50px -4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease-standard), visibility 0.2s var(--ease-standard), transform 0.25s var(--ease-standard);
  overflow: visible;
}

/* Violet ambient glow behind user sheet */
#userSheet::before {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 28px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.10) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

#userSheet.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) !important;
}

#userSheet .sheet-handle {
  display: none;
}

/* Mobile: userSheet becomes bottom sheet */
@media (max-width: 640px) {
  #userSheet {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: translateY(100%) !important;
    width: 100%;
    max-width: none;
    border-radius: 20px 20px 0 0 !important;
    padding: 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
    border: none;
    border-top: 1px solid rgba(124, 58, 237, 0.08);
    box-shadow:
      0 -4px 20px rgba(0, 0, 0, 0.1),
      0 -2px 12px rgba(124, 58, 237, 0.06);
    opacity: 1;
  }

  #userSheet.visible {
    transform: translateY(0) !important;
  }

  #userSheet .sheet-handle {
    display: block;
  }
}

/* Close button for user sheet */
.sheet-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(124, 58, 237, 0.04);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sheet-close-btn:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--text);
}

.sheet-close-btn:active {
  transform: scale(0.9);
  background: var(--border);
}

@media (max-width: 640px) {
  .sheet-close-btn {
    top: 16px;
    right: 16px;
  }
}

.sheet-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 10px;
}

.sheet-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
}

.sheet-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), background 0.2s var(--ease-standard);
}

.sheet-btn-primary {
  background: var(--primary);
  color: white;
}

.sheet-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.sheet-btn-secondary {
  background: rgba(124, 58, 237, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(124, 58, 237, 0.08);
}

.sheet-btn-secondary:hover {
  background: rgba(124, 58, 237, 0.08);
  color: var(--text);
}

/* Magic link button loading state */
.sheet-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.sheet-btn.loading:hover {
  transform: none;
  box-shadow: none;
}

.magic-link-spinner {
  animation: none;
}

.magic-link-spinner.spinning {
  animation: spin 1s linear infinite;
}

/* ============================================
   CREDIT PACKS
   ============================================ */
.credit-pack {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-subtle);
  border: 2px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.credit-pack:hover {
  border-color: var(--text-dimmed);
}

.credit-pack.selected {
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.08);
}

.pack-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

.pack-edits {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pack-detail {
  font-size: 0.75rem;
  color: var(--text-dimmed);
}

.pack-per-edit {
  font-size: 0.75rem;
  color: var(--success);
  font-weight: 600;
  margin-top: 2px;
}

.pack-tagline {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  font-style: normal;
  font-weight: 500;
}

.credit-pack.selected .pack-tagline {
  color: var(--success);
  font-weight: 600;
}

.pack-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.credit-pack.selected .pack-badge {
  background: linear-gradient(135deg, #10b981, #059669);
  animation: pulse-badge 2s var(--ease-in-out) infinite;
}

.pack-badge-best {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.pack-badge-new {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.credit-pack.first-time-discount {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.pack-price-original {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 6px;
}

.pack-trust {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.pack-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--success);
}

.pack-credits {
  font-size: 0.9rem;
}

.pack-bonus {
  font-size: 0.7rem;
}

/* ============================================
   BUY SHEET V9 - SUBSCRIPTION FIRST (Premium)
   Credits-first visual hierarchy with brand accent
   ============================================ */

.buy-sheet-v9 {
  max-height: 85dvh;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: 0; /* Remove base padding, children handle it */
  overflow: hidden;
}

/* Violet atmosphere — ambient glow behind buy sheet */
.buy-sheet-v9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.buy-sheet-v9 > * {
  position: relative;
  z-index: 1;
}

.buy-sheet-v9 .sheet-handle {
  flex-shrink: 0;
  margin: 12px auto 0;
  background-color: rgba(0, 0, 0, 0.15);
}

.buy-sheet-v9 .buy-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 24px 20px;
  -webkit-overflow-scrolling: touch;
}

/* Close button styling */
.buy-sheet-v9 .buy-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s var(--ease-standard);
  z-index: 10;
}

.buy-sheet-v9 .buy-sheet-close:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--border);
}

.buy-sheet-v9 .buy-sheet-close:active {
  transform: scale(0.95);
}

.sheet-headline-v9 {
  font-family: var(--font-display), serif;
  font-size: 1.6rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: -0.02em;
}


/* Buy Sheet Billing Toggle - Segmented Control */
.buy-billing-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 3px;
  display: flex;
  margin: 14px 0 22px;
}

.buy-billing-option {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.buy-billing-option--active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.buy-save-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Legacy toggle hidden (replaced by segmented control) */
.annual-toggle-v9 {
  display: none;
}

/* Subscription Tier Cards - 3-Column Confident Numbers */
.sub-tiers-v9 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 16px;
}

.sub-tier-v9 {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  flex: 1;
  padding: 22px 12px 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s var(--ease-standard);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

.sub-tier-v9:hover {
  border-color: rgba(124, 58, 237, 0.08);
  background: rgba(124, 58, 237, 0.03);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(124, 58, 237, 0.06);
}

.sub-tier-v9--selected {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(165deg, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0.02));
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.12),
    0 0 12px rgba(124, 58, 237, 0.1),
    0 8px 32px -8px rgba(var(--primary-rgb), 0.1);
}

.sub-tier-v9--selected:hover {
  border-color: rgba(124, 58, 237, 0.45);
  transform: translateY(-2px);
}

.sub-tier-v9--popular {
  padding-top: 24px;
}

.sub-tier-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Tier Name - tiny uppercase label */
.sub-tier-name {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dimmed);
  margin-bottom: 4px;
}

.sub-tier-v9--selected .sub-tier-name {
  color: var(--primary);
}

/* Credits - Hero Metric */
.sub-tier-credits-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-tier-credits-num {
  font-family: var(--font-display), serif;
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sub-tier-v9--selected .sub-tier-credits-num {
  color: var(--primary);
}

.sub-tier-credits-label {
  font-size: 0.58rem;
  color: var(--text-dimmed);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Tier Info - hidden on new layout, name moved above */
.sub-tier-main {
  display: none;
}

.sub-tier-credits {
  display: none;
}

/* Price - Secondary */
.sub-tier-price {
  font-family: var(--font-display), serif;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

.sub-tier-v9--selected .sub-tier-price {
  color: var(--text);
}

.sub-tier-price-annual {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-dimmed);
  margin-top: 2px;
}

/* Subscription Benefits */
.sub-benefits-v9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: rgba(124, 58, 237, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(124, 58, 237, 0.06);
}

.sub-benefit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sub-benefit svg {
  width: 13px;
  height: 13px;
  stroke: #059669;
}

/* One-time Pack Section */
.onetime-section-v9 {
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
  margin-top: 8px;
}

.onetime-divider-v9 {
  color: var(--text-dimmed);
  font-size: 0.75rem;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.onetime-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  width: 100%;
  text-align: center;
  transition: color 0.15s;
}

.onetime-toggle:hover {
  color: var(--text);
}

.onetime-toggle-link {
  color: var(--primary);
  font-weight: 600;
}

/* Credits Slider */
.credits-slider-container {
  display: none;
  margin-top: 12px;
  padding: 20px;
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.06);
  border-radius: 14px;
}

.onetime-section-v9.expanded .credits-slider-container {
  display: block;
}

.credits-slider-display {
  text-align: center;
  margin-bottom: 16px;
}

.credits-slider-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.credits-slider-count {
  font-family: var(--font-display), serif;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  transition: opacity 0.15s;
}

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

.credits-slider-bonus {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 4px;
  transition: opacity 0.2s;
}

.credits-slider-bonus.hidden {
  display: none;
}

.credits-slider-price {
  font-family: var(--font-display), serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-top: 6px;
  transition: opacity 0.15s;
}

.credits-slider-per-edit {
  font-size: 0.75rem;
  color: var(--text-dimmed);
  margin-top: 2px;
  transition: opacity 0.15s;
}

/* Range input track */
.credits-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  margin: 0;
}

.credits-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--primary-light);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 12px rgba(124, 58, 237, 0.15);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.credits-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.45), 0 0 16px rgba(124, 58, 237, 0.2);
}

.credits-slider::-webkit-slider-thumb:active {
  transform: scale(1.05);
}

.credits-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--primary-light);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 12px rgba(124, 58, 237, 0.15);
  cursor: pointer;
}

/* Notch labels below slider */
.credits-slider-notches {
  display: flex;
  justify-content: space-between;
  padding: 6px 2px 0;
}

.credits-slider-notches span {
  font-size: 0.7rem;
  color: var(--text-dimmed);
  font-weight: 500;
  min-width: 24px;
  text-align: center;
  transition: color 0.15s;
}

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

/* Buy button (full-width below slider) */
.credits-slider-buy {
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.2s var(--ease-standard);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.15);
  text-underline-offset: 3px;
}

.credits-slider-buy:hover {
  color: #7C3AED;
  text-decoration-color: rgba(124, 58, 237, 0.3);
}

/* Paywall slider variant — slightly more compact */
.paywall-slider {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

/* Subscriber: promoted one-time pack */
.onetime-section-v9.subscriber-primary .onetime-divider-v9 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Upgrade CTA */
.cta-primary-v9.cta-upgrade {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 50%, #5B21B6 100%);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

/* Footer link (Upgrade plan / Manage subscription) */
.buy-sheet-footer-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 0 8px; /* Increased touch target */
  min-height: 44px; /* iOS accessibility guideline */
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-md);
  /* Ensure focus visibility */
  outline: none;
}
.buy-sheet-footer-link:hover {
  color: var(--primary-hover);
  transform: translateY(-1px);
}
.buy-sheet-footer-link:focus {
  color: var(--primary-hover);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
  transform: translateY(-1px);
}
.buy-sheet-footer-link:active {
  transform: translateY(0);
  color: var(--primary-hover);
}
.buy-sheet-footer-link:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}

/* Footer V9 - Sticky at bottom */
.buy-sheet-footer-v9 {
  flex-shrink: 0;
  padding: 16px 24px 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border-subtle);
  /* Ensure footer is always visible */
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.cta-primary-v9 {
  width: 100%;
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #7C3AED 100%);
  background-size: 200% 200%;
  color: white;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px 20px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  animation:
    edit-btn-gradient 4s var(--ease-in-out) infinite,
    edit-btn-glow 3s var(--ease-in-out) infinite;
}

.cta-primary-v9::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.5s var(--ease-standard) 1s infinite;
}

.cta-primary-v9:hover {
  transform: translateY(-2px);
  animation: none;
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5), 0 0 40px rgba(124, 58, 237, 0.15);
}

.cta-primary-v9:active {
  transform: translateY(0);
  animation: none;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2), 0 4px 12px rgba(124, 58, 237, 0.1);
}

/* Reassurance text below CTA */
.footer-reassurance {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Footer Social Proof */
.footer-social-proof {
  text-align: center;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}

/* Footer Trust Line */
.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.footer-trust svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-dimmed);
}

.footer-dot {
  opacity: 0.6;
}

.footer-signin {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 500;
  padding: 0;
}

.footer-signin:hover {
  text-decoration: underline;
}

.footer-signin.hidden {
  display: none;
}

/* ============================================
   BUY SHEET CONVERSION OPTIMIZATIONS (v2)
   New styles for improved conversion rate
   ============================================ */

/* Urgency Header - Creates momentum */
.urgency-header {
  text-align: center;
  margin-bottom: 24px;
}

.sheet-subheadline {
  font-size: 1rem;
  color: var(--text-light);
  margin: 8px 0 16px;
  font-weight: 500;
}

.momentum-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.momentum-badge svg {
  color: var(--primary);
}

/* Pricing tabs with clearer positioning */
.pricing-tabs-container {
  margin-bottom: 20px;
}

.buy-billing-option .tab-label {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.buy-billing-option .tab-subtitle {
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.8;
}

/* Enhanced tier cards */
.tier-description {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
}

.sub-tier-v9--popular .tier-description {
  color: var(--text);
}

/* Tier feature lists — per-card value props (desktop only) */
.tier-features {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tier-features li {
  font-size: 0.76rem;
  color: var(--text-muted);
  padding: 2px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}

.tier-features li::before {
  content: '\2713';
  color: var(--success);
  font-weight: 700;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.sub-tier-v9--selected .tier-features li {
  color: var(--text);
}

/* Trust signals for packs */
.pack-trust-signals {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.trust-item svg {
  color: var(--success);
  stroke-width: 2.5;
}

/* Improved footer styling */
.footer-social-proof-top {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.footer-trust-container {
  margin-top: 12px;
}

.footer-trust {
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.footer-trust span {
  font-size: 0.75rem;
}

/* Enhanced CTA button */
.cta-primary-v9:hover::after {
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-standard);
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .momentum-badge {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .pack-trust-signals {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .trust-item {
    font-size: 0.75rem;
  }

  .tier-description {
    font-size: 0.75rem;
  }

  .footer-social-proof-top {
    font-size: 0.75rem;
  }
}

/* ============================================
   MOBILE BUY SHEET OPTIMIZATION
   Stack tiers vertically as compact rows.
   Compress spacing to maximize CTA visibility.
   ============================================ */
@media (max-width: 600px) {
  /* Reclaim viewport — mobile buy sheet needs max visible area */
  .buy-sheet-v9 {
    max-height: 92dvh;
  }

  .buy-sheet-v9 .buy-sheet-scroll {
    padding: 12px 16px 8px;
  }

  /* Compress urgency header — less scroll before tiers */
  .urgency-header {
    margin-bottom: 10px;
  }

  .sheet-headline-v9 {
    font-size: 1.25rem;
    margin-bottom: 2px;
  }

  .sheet-subheadline {
    font-size: 0.82rem;
    margin: 2px 0 6px;
  }

  /* Hide momentum badge — takes prime real estate on mobile */
  .momentum-badge {
    display: none;
  }

  /* Billing toggle: tighter */
  .pricing-tabs-container {
    margin-bottom: 12px;
  }

  .buy-billing-toggle {
    margin: 6px 0 12px;
  }

  .buy-billing-option {
    padding: 8px 10px;
    flex-direction: column;
    gap: 1px;
  }

  .buy-billing-option .tab-label {
    font-size: 0.8rem;
  }

  .buy-billing-option .tab-subtitle {
    font-size: 0.65rem;
  }

  /* Stack tier cards vertically — full width instead of cramped 3-col */
  .sub-tiers-v9 {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* Each tier: compact horizontal row */
  .sub-tier-v9 {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    border-radius: 12px;
    gap: 0;
  }

  .sub-tier-v9--popular {
    padding: 12px 16px;
  }

  .sub-tier-v9:hover {
    transform: none;
  }

  /* Badge: inline pill instead of absolute positioned */
  .sub-tier-badge {
    position: static;
    transform: none;
    top: auto;
    left: auto;
    font-size: 0.48rem;
    padding: 2px 6px;
    margin-right: 6px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Name: compact left label */
  .sub-tier-name {
    margin-bottom: 0;
    font-size: 0.55rem;
    min-width: 28px;
  }

  /* Credits: inline row, centered flex-grow area */
  .sub-tier-credits-hero {
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    flex: 1;
    margin-left: 8px;
  }

  .sub-tier-credits-num {
    font-size: 1.5rem;
  }

  .sub-tier-credits-label {
    font-size: 0.6rem;
    margin-bottom: 0;
  }

  /* Price: right-aligned */
  .sub-tier-price {
    margin-left: auto;
    flex-shrink: 0;
    padding-left: 8px;
  }

  /* Selected tier: stronger visual on mobile horizontal layout */
  .sub-tier-v9--selected {
    border-width: 2px;
    border-color: rgba(var(--primary-rgb), 0.6);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), rgba(var(--primary-rgb), 0.03));
  }

  .sub-tier-v9--selected .sub-tier-credits-num {
    font-size: 1.65rem;
  }

  /* Hide verbose descriptions on mobile — tiers are self-explanatory */
  .tier-description {
    display: none;
  }

  /* Compact benefits */
  .sub-benefits-v9 {
    margin-bottom: 10px;
    padding: 8px 10px;
    gap: 4px 10px;
  }

  .sub-benefit {
    font-size: 0.7rem;
  }

  /* Compact one-time section */
  .onetime-section-v9 {
    padding-top: 10px;
    margin-top: 2px;
  }

  .onetime-divider-v9 {
    font-size: 0.7rem;
  }

  .credits-slider-container {
    padding: 12px;
  }

  .credits-slider-display {
    margin-bottom: 10px;
  }

  .credits-slider-count {
    font-size: 1.6rem;
  }

  .credits-slider-price {
    font-size: 1.1rem;
    margin-top: 2px;
  }

  /* Slider thumb: larger for mobile touch (28px visual, ~44px touch area) */
  .credits-slider {
    height: 6px;
  }

  .credits-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .credits-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .credits-slider-buy {
    font-size: 0.85rem;
    padding: 8px 0;
    min-height: 44px;
  }

  .pack-trust-signals {
    margin-top: 10px;
    gap: 6px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pack-trust-signals .trust-item {
    font-size: 0.7rem;
  }

  /* Sticky footer: more prominent CTA */
  .buy-sheet-footer-v9 {
    padding: 10px 16px 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .footer-social-proof-top {
    font-size: 0.7rem;
    margin-bottom: 8px;
  }

  .cta-primary-v9 {
    min-height: 52px;
    font-size: 1rem;
    padding: 14px 16px;
    border-radius: 12px;
  }

  .footer-trust-container {
    margin-top: 8px;
  }

  .footer-trust span {
    font-size: 0.68rem;
  }
}

/* Animation for shimmer effect */
@keyframes ctaShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}


/* Desktop: Full-screen overlay — no-scroll, everything visible */
@media (min-width: 900px) {
  .buy-sheet-v9 {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-standard);
    display: flex;
    flex-direction: column;
    z-index: 10002;
  }

  .buy-sheet-v9.visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .buy-sheet-v9 .sheet-handle { display: none; }

  /* Content: fills viewport, vertically centered when short, scrollable when tall */
  .buy-sheet-v9 .buy-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    padding: 24px 60px 12px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }

  /* Headline — compact for single-screen fit */
  .sheet-headline-v9 {
    font-size: 2rem;
    margin-bottom: 2px;
    letter-spacing: -0.03em;
  }

  .sheet-subheadline {
    margin-bottom: 2px;
  }

  /* Hide momentum badge — value communicated via per-card features */
  .urgency-header .momentum-badge {
    display: none;
  }

  .urgency-header {
    margin-bottom: 8px;
  }

  /* Billing toggle — compact */
  .buy-billing-toggle {
    margin: 4px auto 12px;
    max-width: 360px;
    padding: 3px;
  }

  .buy-billing-option {
    font-size: 0.88rem;
    padding: 9px 16px;
  }

  .buy-save-badge {
    font-size: 0.68rem;
  }

  /* Tier cards — compact with per-card feature bullets */
  .sub-tiers-v9 {
    gap: 14px;
    margin-bottom: 10px;
  }

  .sub-tier-v9 {
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .sub-tier-v9--popular {
    padding-top: 28px;
  }

  .sub-tier-badge {
    font-size: 0.62rem;
    padding: 3px 12px;
  }

  .sub-tier-name {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    margin-bottom: 2px;
  }

  .sub-tier-credits-num {
    font-size: 2.75rem;
  }

  .sub-tier-credits-label {
    font-size: 0.65rem;
    margin-bottom: 6px;
  }

  .sub-tier-price {
    font-size: 0.95rem;
  }

  .sub-tier-price-annual {
    font-size: 0.78rem;
    margin-top: 2px;
  }

  /* Hide description — features replace it */
  .tier-description {
    display: none;
  }

  /* Per-card feature bullets */
  .tier-features {
    display: block;
    margin: 10px auto 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    width: fit-content;
  }

  .tier-features li {
    font-size: 0.74rem;
    padding: 1.5px 0;
  }

  .sub-tier-v9--selected .tier-features {
    border-top-color: rgba(var(--primary-rgb), 0.12);
  }

  /* Hide benefits row — features are now in each card */
  .sub-benefits-v9 {
    display: none;
  }

  /* One-time section: horizontal layout on desktop */
  .onetime-section-v9 {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
  }

  .onetime-divider-v9 {
    font-size: 0.82rem;
    margin-bottom: 4px;
  }

  .buy-sheet-v9 .credits-slider-container {
    padding: 12px 20px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 28px;
  }

  /* Slider display: left column */
  .credits-slider-display {
    grid-column: 1;
    grid-row: 1 / 3;
    margin-bottom: 0;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .credits-slider-count {
    font-size: 2.25rem;
  }

  .credits-slider-label {
    font-size: 1rem;
  }

  .credits-slider-bonus {
    font-size: 0.8rem;
  }

  .credits-slider-price {
    font-size: 1.35rem;
    margin-top: 0;
  }

  .credits-slider-per-edit {
    font-size: 0.82rem;
    margin-top: 0;
    margin-left: 6px;
  }

  /* Slider track: center column, spans rows */
  .credits-slider {
    grid-column: 2;
    grid-row: 1;
    min-width: 240px;
  }

  .credits-slider-notches {
    grid-column: 2;
    grid-row: 2;
    padding-top: 4px;
  }

  .credits-slider-notches span {
    font-size: 0.78rem;
  }

  /* Buy button: right column */
  .credits-slider-buy {
    grid-column: 3;
    grid-row: 1 / 3;
    margin-top: 0;
    font-size: 0.95rem;
    padding: 12px 20px;
    border-radius: 10px;
    width: auto;
    justify-self: end;
    white-space: nowrap;
  }

  /* Hide pack trust signals — slider is self-explanatory on desktop */
  .pack-trust-signals {
    display: none;
  }

  /* Footer — compact, single-line feel */
  .buy-sheet-footer-v9 {
    padding: 10px 60px 18px;
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
  }

  .cta-primary-v9 {
    padding: 14px 24px;
    font-size: 1.1rem;
    border-radius: 12px;
  }

  .footer-social-proof-top {
    font-size: 0.78rem;
    margin-bottom: 8px;
  }

  .footer-reassurance {
    font-size: 0.82rem;
    margin-top: 6px;
  }

  .footer-trust {
    margin-top: 6px;
    font-size: 0.82rem;
    gap: 8px;
  }

  .footer-trust svg {
    width: 14px;
    height: 14px;
  }

  .footer-signin {
    font-size: 0.82rem;
  }

  /* Close button */
  .buy-sheet-v9 .buy-sheet-close {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* ============================================
   BUY SHEET REDESIGN — Shared + Quick Buy + Full Plans
   taste-skill aligned: warm surfaces, fine borders,
   Instrument Serif display, spring-physics CTAs
   ============================================ */

/* ── Shared CTAs ────────────────────────────── */
.cta-fill {
  width: 100%; background: var(--primary); color: white;
  font-size: 0.95rem; font-weight: 600; padding: 16px 20px;
  border: none; border-radius: 12px; cursor: pointer;
  letter-spacing: 0.005em;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-fill:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.3); }
.cta-fill:active { transform: scale(0.98); box-shadow: none; }
.cta-fill:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.cta-ghost {
  width: 100%; background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06); color: var(--text);
  font-size: 0.92rem; font-weight: 600; padding: 15px 20px;
  border-radius: 12px; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-ghost:hover { border-color: rgba(var(--primary-rgb), 0.2); background: rgba(var(--primary-rgb), 0.03); }
.cta-ghost:active { transform: scale(0.98); }
.cta-ghost:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ── Shared layout primitives ───────────────── */
.bs-header { text-align: center; margin-bottom: 28px; padding-top: 4px; }
.bs-title {
  font-family: var(--font-display), serif; font-size: 1.5rem;
  font-weight: 400; color: var(--text);
  letter-spacing: -0.025em; margin: 0 0 6px;
}
.bs-sub { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.45; }

.bs-sep { text-align: center; margin: 28px 0; position: relative; }
.bs-sep::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; height: 1px; background: rgba(0, 0, 0, 0.06);
}
.bs-sep span {
  position: relative; background: var(--bg); padding: 0 14px;
  font-size: 0.72rem; color: var(--text-dimmed); letter-spacing: 0.02em;
}

.bs-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 0.72rem; color: var(--text-muted);
}
.bs-trust svg { stroke: var(--text-dimmed); flex-shrink: 0; opacity: 0.7; }
.bs-trust .footer-signin { margin-left: 8px; }

/* ── Simplified footer (no sticky CTA) ──────── */
.buy-sheet-simple .buy-sheet-footer-v9 {
  border-top: none; padding-top: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* ── Quick Buy: Pack card ───────────────────── */
.bs-pack {
  background: #FAFAF8; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px; padding: 24px 22px;
}
.bs-pack-head {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 20px;
}
.bs-pack-left { display: flex; flex-direction: column; gap: 3px; }
.bs-pack-credits {
  font-family: var(--font-display), serif; font-size: 1.2rem;
  font-weight: 400; color: var(--text);
}
.bs-pack-note { font-size: 0.74rem; color: var(--text-dimmed); }
.bs-pack-price {
  font-family: var(--font-display), serif; font-size: 1.75rem;
  font-weight: 400; color: var(--primary);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.bs-pack .cta-fill { margin-bottom: 20px; }

/* Inline slider zone */
.bs-slider-zone { border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 16px; }
.bs-slider-label {
  display: block; font-size: 0.72rem; color: var(--text-dimmed);
  margin-bottom: 12px; text-align: center; letter-spacing: 0.01em;
}
.bs-slider-readout {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 10px;
  font-size: 0.82rem; color: var(--text-muted); font-weight: 500;
}
.bs-dot { color: var(--text-dimmed); }

.bs-expand,
.bs-pack-link {
  display: block; width: 100%; background: none; border: none;
  color: var(--text-dimmed); font-size: 0.8rem; font-weight: 500;
  padding: 16px 0 0; cursor: pointer; text-align: center;
  transition: color 0.15s;
}
.bs-expand:hover,
.bs-pack-link:hover { color: var(--primary); }

/* ── Full Plans: Back link ──────────────────── */
.bs-back {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-dimmed);
  font-size: 0.8rem; font-weight: 500; padding: 0 0 20px; cursor: pointer;
}
.bs-back:hover { color: var(--primary); }

/* ── Full Plans: Billing toggle ─────────────── */
.bs-toggle { display: flex; justify-content: center; margin-bottom: 28px; }
.bs-toggle-inner {
  display: inline-flex; border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px; padding: 3px;
}
.bs-toggle-btn {
  padding: 7px 18px; border-radius: 8px; font-size: 0.76rem;
  font-weight: 600; border: none; background: none;
  color: var(--text-dimmed); cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.bs-toggle-btn--on { background: var(--text); color: white; }

/* ── Full Plans: Standard hero card ─────────── */
.bs-hero {
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  background: #FAFAF8; border-radius: 16px;
  padding: 28px 22px; margin-bottom: 12px;
}
.bs-hero-top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 6px;
}
.bs-hero-name {
  font-family: var(--font-display), serif; font-size: 1.3rem;
  font-weight: 400; color: var(--text);
}
.bs-hero-price {
  font-family: var(--font-display), serif; font-size: 1.5rem;
  font-weight: 400; color: var(--primary);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.bs-hero-credits { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 4px; }
.bs-hero-perks {
  font-size: 0.74rem; color: var(--text-dimmed);
  margin-bottom: 20px; line-height: 1.5;
}

/* ── Full Plans: Compact plan rows ──────────── */
.bs-plan-row {
  display: flex; align-items: center; padding: 16px 18px;
  border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px;
  cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 8px;
}
.bs-plan-row:hover {
  background: rgba(var(--primary-rgb), 0.02);
  border-color: rgba(var(--primary-rgb), 0.1);
}
.bs-plan-row:active { transform: scale(0.98); }
.bs-row-name {
  font-family: var(--font-display), serif; font-size: 1rem;
  font-weight: 400; color: var(--text); min-width: 36px;
}
.bs-row-credits { font-size: 0.78rem; color: var(--text-muted); margin-left: 6px; flex: 1; }
.bs-row-price {
  font-family: var(--font-display), serif; font-size: 1rem;
  font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.bs-row-arrow { margin-left: 10px; color: var(--text-dimmed); font-size: 0.85rem; }

/* ── Responsive: Mobile ─────────────────────── */
@media (max-width: 600px) {
  .bs-header { margin-bottom: 20px; }
  .bs-title { font-size: 1.35rem; }
  .bs-sub { font-size: 0.82rem; }
  .bs-pack { padding: 20px 18px; }
  .bs-pack-price { font-size: 1.5rem; }
  .bs-sep { margin: 20px 0; }
  .bs-hero { padding: 22px 18px; }
  .bs-hero-price { font-size: 1.3rem; }
  .bs-plan-row { padding: 14px 16px; }
  .cta-fill { padding: 14px 18px; font-size: 0.92rem; }
  .cta-ghost { padding: 14px 18px; font-size: 0.88rem; }
}

/* ── Responsive: Desktop ────────────────────── */
@media (min-width: 900px) {
  .buy-sheet-simple .buy-sheet-scroll { max-width: 520px; }
  .buy-sheet-simple .buy-sheet-footer-v9 { max-width: 520px; }
  .bs-title { font-size: 1.75rem; }
  .bs-pack { padding: 28px 24px; }
  .bs-hero { padding: 32px 28px; }
  .cta-fill { padding: 16px 24px; font-size: 0.98rem; }
  .cta-ghost { padding: 16px 24px; font-size: 0.95rem; }
}

/* ============================================
   MODAL OVERLAY
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
  padding: 20px;
}

.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  /* Must exceed Google FundingChoices consent banner (z-index: 2147483647)
     to prevent consent overlay from blocking success modal taps on mobile */
  z-index: 2147483647;
}

.modal-content {
  background: var(--bg);
  border-radius: 20px;
  padding: 36px 28px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.25s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 24px 64px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.modal-overlay.visible .modal-content {
  transform: scale(1);
}

.modal-icon {
  width: 56px;
  height: 56px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 3rem;
}

.modal-title {
  font-family: var(--font-display), serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.modal-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.subscription-success-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: rgba(124, 58, 237, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.06);
}

/* Subscription success variant - blue accent */
.subscription-success .modal-icon {
  background: rgba(56, 189, 248, 0.1);
}

.subscription-success .modal-stat-value {
  color: var(--accent);
}

.subscription-success .modal-value .value-item {
  color: var(--accent);
}

.success-detail {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.modal-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
  padding: 18px;
  background: rgba(124, 58, 237, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.06);
}

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

.modal-stat-value {
  font-family: var(--font-display), serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--success);
  letter-spacing: -0.02em;
}

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

.modal-value {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding: 18px;
  background: rgba(124, 58, 237, 0.03);
  border-radius: 14px;
  border: 1px solid rgba(124, 58, 237, 0.06);
}

.modal-value .value-item {
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-btn {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  margin-bottom: 10px;
}

.modal-btn:last-child {
  margin-bottom: 0;
}

.modal-btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.modal-btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25), 0 8px 24px rgba(124, 58, 237, 0.15);
}

.modal-btn-secondary {
  background: transparent;
  color: var(--text-muted);
}

.modal-btn-secondary:hover {
  color: var(--text);
}

/* ============================================
   CELEBRATION MODALS - Success states
   ============================================ */
.celebration-modal {
  overflow: hidden;
}

.celebration-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  transform: scale(0);
}

.modal-overlay.visible .celebration-icon {
  animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.celebration-icon svg {
  width: 100%;
  height: 100%;
}

@keyframes celebration-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.checkmark-draw {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

.modal-overlay.visible .checkmark-draw {
  animation: checkmark-draw 0.4s 0.3s var(--ease-out) forwards;
}

@keyframes checkmark-draw {
  to { stroke-dashoffset: 0; }
}

.celebration-stat {
  font-family: var(--font-display), serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(10px);
}

.modal-overlay.visible .celebration-stat {
  animation: stat-entrance 0.5s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.celebration-pack .celebration-stat {
  background: linear-gradient(135deg, #34D399, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-sub .celebration-stat {
  background: linear-gradient(135deg, #7C3AED, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.celebration-stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
}

.modal-overlay.visible .celebration-stat-label {
  animation: stat-entrance 0.5s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stat-entrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.celebration-modal .modal-title,
.celebration-modal .modal-text,
.celebration-modal .subscription-success-details,
.celebration-modal .modal-btn {
  opacity: 0;
}

.celebration-modal .success-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}

.modal-overlay.visible .celebration-modal .modal-title {
  animation: stat-entrance 0.4s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .modal-text {
  animation: stat-entrance 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .subscription-success-details {
  animation: stat-entrance 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .success-detail {
  animation: stat-entrance 0.3s calc(0.7s + var(--i) * 60ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay.visible .celebration-modal .modal-btn {
  animation: stat-entrance 0.4s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.celebration-pack .celebration-icon svg circle {
  stroke: rgba(52, 211, 153, 0.2);
}

.celebration-sub .celebration-icon svg circle {
  stroke: rgba(var(--primary-rgb), 0.2);
}

/* Violet pulse on success icon after celebration-pop completes */
.modal-overlay.visible .celebration-sub .celebration-icon {
  animation: celebration-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             violet-pulse 2s 1s var(--ease-in-out) infinite;
}

@keyframes violet-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(124, 58, 237, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.3)); }
}
/* Reduced motion: skip all celebration animations, show final state immediately.
   Fixes stuck invisible content on iOS low power mode, bfcache restore, and
   when prefers-reduced-motion is active. */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay.visible .celebration-icon { transform: scale(1); animation: none; }
  .modal-overlay.visible .checkmark-draw { stroke-dashoffset: 0; animation: none; }
  .modal-overlay.visible .celebration-stat,
  .modal-overlay.visible .celebration-stat-label,
  .modal-overlay.visible .celebration-modal .modal-title,
  .modal-overlay.visible .celebration-modal .modal-text,
  .modal-overlay.visible .celebration-modal .subscription-success-details,
  .modal-overlay.visible .celebration-modal .success-detail,
  .modal-overlay.visible .celebration-modal .modal-btn {
    opacity: 1; transform: translateY(0); animation: none;
  }
  .modal-overlay.visible .share-option-btn {
    opacity: 1; transform: translateY(0); animation: none;
  }
  /* Disable breathing glow on CTA buttons */
  .edit-btn,
  .cta-primary-v9,
  .header-try-free {
    animation: none !important;
  }
}

/* ============================================
   SHARE MODAL
   ============================================ */
.share-modal {
  max-width: 340px;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.share-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
}

.share-option-btn:hover {
  background: var(--card-hover);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
}

.share-option-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.modal-overlay.visible .share-option-btn {
  animation: share-btn-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay:not(.visible) .share-option-btn {
  opacity: 0;
}

.modal-overlay.visible .share-option-btn:nth-child(1) { animation-delay: 0.1s; }
.modal-overlay.visible .share-option-btn:nth-child(2) { animation-delay: 0.16s; }
.modal-overlay.visible .share-option-btn:nth-child(3) { animation-delay: 0.22s; }

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

.share-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  transition: background 0.2s;
}

.share-option-btn:hover .share-icon {
  background: rgba(var(--primary-rgb), 0.15);
}

.share-icon-svg {
  width: 20px;
  height: 20px;
}

.share-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.share-link-result {
  text-align: center;
  padding: 16px 0;
}

.share-success-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px auto;
  background: var(--success);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.share-success-text {
  color: var(--text);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.share-link-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.share-link-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ============================================
   AD BLOCKER MODAL
   Pre-flight detection modal with two options
   ============================================ */
.adblocker-modal {
  max-width: 380px;
  padding: 32px 24px 24px;
  text-align: center;
  position: relative;
}

/* Entrance animation */
#adBlockerModal.visible .adblocker-modal {
  animation: adBlockerReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes adBlockerReveal {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dismiss button */
.adblocker-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: var(--bg-subtle);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.7;
  transition: opacity 0.2s, background 0.2s;
}

.adblocker-dismiss:hover {
  opacity: 1;
  background: var(--border);
}

/* Icon - red circle with slash */
.adblocker-icon {
  width: 64px;
  height: 64px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #ef4444;
}

.adblocker-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.adblocker-message {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* Two option buttons */
.adblocker-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.adblocker-option {
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adblocker-option:hover {
  background: var(--card-hover);
  border-color: var(--text-dimmed);
  transform: translateY(-1px);
}

.adblocker-option:active {
  transform: translateY(0);
}

/* Primary option - Get Credits */
.adblocker-option.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.adblocker-option.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.adblocker-option.primary .adblocker-option-title,
.adblocker-option.primary .adblocker-option-subtitle {
  color: white;
}

.adblocker-option.primary .adblocker-option-subtitle {
  opacity: 0.85;
}

.adblocker-option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.adblocker-option-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Trust note at bottom */
.adblocker-note {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin: 0;
}

/* Mobile: Full-width treatment */
@media (max-width: 599px) {
  .adblocker-modal {
    max-width: calc(100vw - 32px);
    padding: 28px 20px 20px;
  }

  .adblocker-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }

  .adblocker-icon svg {
    width: 28px;
    height: 28px;
  }

  .adblocker-title {
    font-size: 1.2rem;
  }

  .adblocker-message {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .adblocker-option {
    padding: 14px 16px;
  }
}

/* Small screens (iPhone SE) */
@media (max-width: 375px) {
  .adblocker-modal {
    padding: 24px 16px 16px;
  }

  .adblocker-options {
    gap: 10px;
  }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .adblocker-icon {
    background: rgba(239, 68, 68, 0.15);
  }

  .adblocker-dismiss {
    background: var(--bg-secondary);
  }
}

/* ============================================
   ONBOARDING MODAL
   ============================================ */
.onboarding-modal {
  max-width: 420px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  text-align: center;
}

/* Mobile: Compact onboarding to fit small screens */
@media (max-height: 700px) {
  .onboarding-modal {
    padding: 20px 16px;
    max-height: 95vh;
    max-height: 95dvh;
  }

  .onboarding-header h2 {
    font-size: 1.2rem;
    margin-bottom: 2px;
  }

  .onboarding-subtitle {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  .onboarding-steps {
    gap: 8px;
    margin-bottom: 12px;
  }

  .onboarding-step {
    gap: 8px;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
  }

  .step-text {
    font-size: 0.85rem;
  }

  .onboarding-comparison {
    padding: 12px;
    margin-bottom: 12px;
  }

  .onboarding-comparison h3 {
    font-size: 0.8rem;
    margin-bottom: 4px;
  }

  .comparison-prompt {
    font-size: 0.75rem;
    margin-bottom: 8px;
  }

  .compare-img {
    border-radius: 6px;
  }

  .compare-label,
  .compare-verdict {
    font-size: 0.65rem;
  }

  .compare-mode-label {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  .onboarding-btn {
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* Very small screens - hide comparison to ensure modal fits */
@media (max-height: 550px) {
  .onboarding-comparison {
    display: none;
  }
}

.onboarding-header h2 {
  font-family: var(--font-display);
  margin: 0 0 4px 0;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.onboarding-subtitle {
  margin: 0 0 20px 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  text-align: left;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  font-size: 0.95rem;
  color: var(--text);
}

.onboarding-comparison {
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.onboarding-comparison h3 {
  margin: 0 0 8px 0;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}

.comparison-prompt {
  margin: 0 0 14px 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

.onboarding-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.compare-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.compare-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.compare-column.smart .compare-img {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

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

.compare-mode-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
}

.compare-mode-label.smart {
  color: var(--primary);
}

.compare-mode-label .mode-cost {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 5px;
  border-radius: 6px;
}

.compare-verdict {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: center;
}

.compare-column.smart .compare-verdict {
  color: var(--primary);
  font-weight: 500;
}

.onboarding-btn {
  width: 100%;
  padding: 14px 24px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
}

.onboarding-btn:hover {
  background: var(--primary-hover);
}

/* ============================================
   CONVERSION MODAL V2 - Cinematic Celebration
   ============================================ */

.conversion-modal-v2 {
  max-width: 420px;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 24px 80px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(124, 58, 237, 0.04);
}

/* Entrance animation */
#conversionModal.visible .conversion-modal-v2 {
  animation: conversionReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes conversionReveal {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle X dismiss - delayed visibility */
.conversion-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard) 0.8s, background 0.2s;
}

#conversionModal.visible .conversion-dismiss {
  opacity: 0.6;
}

.conversion-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

/* Hero image - subtle frame */
.conversion-preview-v2 {
  width: 100%;
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  background: var(--bg-secondary);
  overflow: hidden;
  padding: 24px;
}

/* Ambient glow behind image */
.conversion-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 50% 50%,
    rgba(124, 58, 237, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: glowPulse 3s var(--ease-in-out) infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.conversion-preview-v2 img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 1px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 1;
  animation: imageReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Save badge - cleaner, more intentional */
.conversion-save-badge {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  z-index: 2;
  animation: badgeReveal 0.4s var(--ease-out) 0.6s both;
}

@keyframes badgeReveal {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.conversion-save-badge svg {
  opacity: 0.7;
}

/* Legacy save hint - hidden, replaced by badge */
.conversion-save-hint {
  display: none;
}

/* Content area */
.conversion-content {
  padding: 24px 24px 28px;
  text-align: center;
  background: var(--bg);
}

/* Header with staggered reveal */
.conversion-header {
  margin-bottom: 20px;
}

.conversion-celebration {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  animation: textReveal 0.4s var(--ease-out) 0.2s both;
}

@keyframes textReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.conversion-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  animation: textReveal 0.4s var(--ease-out) 0.3s both;
}

/* Primary CTA - prominent, confident */
.conversion-cta {
  width: 100%;
  background: var(--primary);
  border: none;
  border-radius: 14px;
  padding: 18px 24px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  animation: ctaReveal 0.4s var(--ease-out) 0.4s both;
  position: relative;
  overflow: hidden;
}

@keyframes ctaReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer effect on CTA */
.conversion-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.5s var(--ease-standard) 1s infinite;
}

@keyframes ctaShimmer {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}

.conversion-cta:hover {
  transform: translateY(-2px);
  background: var(--primary-hover);
  box-shadow:
    0 8px 24px rgba(var(--primary-rgb), 0.35),
    0 4px 12px rgba(var(--primary-rgb), 0.2);
}

.conversion-cta:active {
  transform: translateY(0);
}

.conversion-cta-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: white;
  position: relative;
  z-index: 1;
}

.conversion-cta-subtext {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.conversion-cta-price {
  font-weight: 600;
}

.conversion-cta-unit {
  opacity: 0.9;
}

/* Trust signals - subtle, credible */
.conversion-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.8rem;
  color: var(--text-dimmed);
  animation: textReveal 0.4s var(--ease-out) 0.5s both;
}

.conversion-trust-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.conversion-trust-item svg {
  color: #f59e0b;
}

.conversion-trust-sep {
  opacity: 0.4;
}

/* One-time CTA - for users who don't want a subscription */
.conversion-onetime-cta {
  width: 100%;
  background: transparent;
  border: none;
  padding: 10px 20px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: textReveal 0.4s var(--ease-out) 0.5s both;
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, 0.3);
  text-underline-offset: 3px;
}

.conversion-onetime-cta:hover {
  text-decoration-color: var(--primary);
}

.conversion-onetime-cta:active {
  transform: scale(0.98);
}

/* Secondary CTA */
.conversion-secondary-cta {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 20px;
  margin-top: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  animation: textReveal 0.4s var(--ease-out) 0.55s both;
}

.conversion-secondary-cta:hover {
  background: var(--glow);
  border-color: var(--primary-light);
  color: var(--text);
}

.conversion-secondary-cta:active {
  transform: scale(0.98);
}

/* Legacy elements - hidden in new design */
.conversion-value-anchor,
.conversion-features-inline,
.conversion-social-proof {
  display: none;
}

/* Legacy intro offer styles (kept for backward compatibility) */
.conversion-intro-offer {
  width: 100%;
}

.conversion-cta-intro {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.conversion-cta-intro:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.conversion-cta-intro:active {
  transform: translateY(0);
}

.conversion-cta-intro-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.conversion-cta-intro-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.conversion-cta-intro-period {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.conversion-cta-intro-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.conversion-cta-intro-credits {
  font-weight: 600;
}

.conversion-cta-intro-renewal {
  opacity: 0.9;
}

.conversion-intro-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.conversion-intro-badge {
  background: #dc2626;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.conversion-intro-cancel {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ============================================
   MOBILE: Full-screen cinematic mode
   ============================================ */
@media (max-width: 599px) {
  .conversion-modal-v2 {
    position: fixed;
    inset: 0;
    z-index: 10002;
    max-width: none;
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
    background: var(--bg);
  }

  .conversion-preview-v2 {
    min-height: min(40dvh, 240px);
    max-height: 45dvh;
    flex: 0 1 auto;
    padding: 20px;
  }

  .conversion-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .conversion-header {
    margin-bottom: 16px;
  }

  .conversion-celebration {
    font-size: 1.5rem;
  }

  .conversion-message {
    font-size: 0.9rem;
  }

  .conversion-cta {
    padding: 16px 24px;
  }

  .conversion-trust {
    margin-top: 12px;
  }
}

/* Very small height screens */
@media (max-width: 599px) and (max-height: 600px) {
  .conversion-preview-v2 {
    min-height: 120px;
    max-height: 140px;
    padding: 16px;
  }

  .conversion-content {
    padding: 16px 20px;
  }

  .conversion-header {
    margin-bottom: 12px;
  }

  .conversion-celebration {
    font-size: 1.25rem;
    margin-bottom: 4px;
  }

  .conversion-message {
    font-size: 0.85rem;
  }

  .conversion-cta {
    padding: 14px 20px;
  }

  .conversion-cta-value {
    font-size: 1rem;
  }

  .conversion-trust {
    margin-top: 10px;
  }

  .conversion-secondary-cta {
    padding: 12px 16px;
    margin-top: 10px;
  }
}

.conversion-signup-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
}

.conversion-signup-offer {
  margin-bottom: 16px;
  text-align: center;
}

.conversion-signup-badge {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.conversion-signup-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.conversion-email-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 12px;
  box-sizing: border-box;
}

.conversion-email-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.modal-btn-signup {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: white;
  width: 100%;
  margin-bottom: 0;
}

.modal-btn-signup:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.modal-btn-signup:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ============================================
   UNIFIED PAYWALL — Single-screen conversion
   Full-screen premium takeover.
   Single centered column on ALL devices.
   ============================================ */

/* Container — full-screen takeover */
.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: touch;
}


/* Violet atmosphere — ambient glow behind conversion modal */
.paywall::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(124, 58, 237, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.paywall > * {
  position: relative;
  z-index: 1;
}
#conversionModal.visible {
  padding: 0;
}

#conversionModal.visible .paywall {
  animation: paywallReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes paywallReveal {
  0% {
    opacity: 0;
    transform: scale(0.97);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Screen visibility system */
.paywall-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 0 24px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  animation: textReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.paywall[data-active-screen="1"] .paywall-screen[data-screen="1"] {
  display: flex;
}
.paywall[data-active-screen="2"] .paywall-screen[data-screen="2"] {
  display: flex;
}
.paywall[data-active-screen="3"] .paywall-screen[data-screen="3"] {
  display: flex;
}

/* Close button — delayed appearance */
.paywall-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-dimmed);
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard) 1.5s, background 0.2s var(--ease-standard), color 0.2s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.paywall-close svg {
  pointer-events: none;
}

#conversionModal.visible .paywall-close {
  opacity: 1;
}

.paywall-close:hover {
  color: var(--text);
  background: var(--bg-secondary);
  border-color: var(--border);
}

.paywall-close:active {
  transform: scale(0.9);
}

/* ---- Hero: Compact, centered ---- */
.paywall-hero {
  width: 100%;
  max-width: 520px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  padding: 24px 24px 28px;
  max-height: none;
}

/* Before/after hero comparison */
.paywall-hero-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.paywall-hero-thumb {
  position: relative;
  flex: 0 1 auto;
  max-width: 48%;
  animation: imageReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.paywall-hero-thumb img {
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--border-subtle);
}

.paywall-hero-thumb:first-child img {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.paywall-hero-thumb--after img {
  opacity: 1 !important;
  filter: none !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--border-subtle),
    0 0 0 2.5px var(--primary), 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.paywall-hero-label {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  white-space: nowrap;
  z-index: 2;
}

.paywall-hero-label--after {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.08);
}

/* Fallback: single image when no original available */
.paywall-hero-compare--single .paywall-hero-thumb:first-child {
  display: none;
}

.paywall-hero-compare--single .paywall-hero-thumb--after {
  max-width: 70%;
}

.paywall-hero-compare--single .paywall-hero-thumb--after img {
  max-height: 140px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--border-subtle);
}

/* ---- Screen 1: Inline Pricing ---- */


/* "Compare all plans" link */
.paywall-see-all {
  display: block;
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s;
}

.paywall-see-all:hover {
  color: var(--primary);
}

/* One-time divider within paywall */
.paywall-onetime-divider {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dimmed);
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.paywall-onetime-divider::before,
.paywall-onetime-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* ---- Screen 1: The Hook ---- */

.paywall-headline {
  font-family: var(--font-display), serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 4px;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.2;
  animation: textReveal 0.4s var(--ease-out) 0.2s both;
}

.paywall-value-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px;
  text-align: center;
  animation: textReveal 0.4s var(--ease-out) 0.25s both;
}

/* Social proof inline */
.paywall-social-proof-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 20px;
  animation: textReveal 0.4s var(--ease-out) 0.3s both;
}

.paywall-social-proof-inline svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* Hero-sized primary CTA */
.paywall-cta--hero {
  min-height: 68px;
  font-size: 1.1rem;
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 0;
  animation: textReveal 0.4s var(--ease-out) 0.35s both;
}

.paywall-cta--hero .paywall-cta-label {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.paywall-cta--hero .paywall-cta-price {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Secondary outline CTA for subscription */
.paywall-cta--secondary-outline {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
  min-height: 52px;
  padding: 12px 24px;
  margin-bottom: 4px;
  animation: textReveal 0.4s var(--ease-out) 0.45s both;
}

.paywall-cta--secondary-outline .paywall-cta-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.paywall-cta--secondary-outline .paywall-cta-price {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.paywall-cta--secondary-outline::after {
  display: none;
}

.paywall-cta--secondary-outline:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

.paywall-cta--secondary-outline:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Offer card — elevated container */
.paywall-offer-card {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.03),
    0 12px 40px rgba(0, 0, 0, 0.06);
  animation: textReveal 0.4s var(--ease-out) 0.3s both;
}

/* Social proof divider — inside offer card */
.paywall-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 16px;
}

.paywall-social-proof::before,
.paywall-social-proof::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Plan card inside offer card */
.paywall-plan-card {
  background: linear-gradient(165deg, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0.02));
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 14px;
  padding: 18px 20px 16px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.plan-popular-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  padding: 3px 8px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.paywall-plan-value-prop {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}

.paywall-plan-pricing {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.plan-price-large {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}

.plan-price-period {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.paywall-plan-billing {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.paywall-plan-name {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 2px;
}

.paywall-plan-credits {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.paywall-plan-unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmed);
  letter-spacing: 0.01em;
}

.paywall-plan-price {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 4px;
}

/* ---- CTA button — Purple gradient ---- */
.paywall-cta {
  width: 100%;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
  color: white;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2), 0 8px 24px rgba(124, 58, 237, 0.15);
  position: relative;
  overflow: hidden;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 16px 24px;
  margin-bottom: 16px;
}

.paywall-cta-label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.paywall-cta-price {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.paywall-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: ctaShimmer 2.5s var(--ease-standard) 1.2s infinite;
}

.paywall-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25), 0 12px 32px rgba(124, 58, 237, 0.2);
}

.paywall-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.2), 0 4px 12px rgba(124, 58, 237, 0.1);
}

.paywall-cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Primary CTA variant */
.paywall-cta--primary {
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 40%, #5B21B6 100%);
  box-shadow:
    0 4px 12px rgba(124, 58, 237, 0.25),
    0 12px 32px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.15);
}

.paywall-cta--primary:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 40%, #6D28D9 100%);
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(124, 58, 237, 0.3),
    0 16px 40px rgba(124, 58, 237, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Amber CTA variant for one-time pack */
.paywall-cta--amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
}

.paywall-cta--amber:hover {
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
}

.paywall-cta--amber::after {
  animation: ctaShimmer 2.5s var(--ease-standard) 0.8s infinite;
}

/* Feature list — Grok-style circle icons */
.paywall-value-demo {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.value-demo-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.value-demo-item:nth-child(1) { animation: textReveal 0.4s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.value-demo-item:nth-child(2) { animation: textReveal 0.4s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.value-demo-item:nth-child(3) { animation: textReveal 0.4s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

.demo-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
}

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

.demo-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.demo-text span {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Reassurance text */
.paywall-reassurance {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dimmed);
  margin: 12px 0 0;
  letter-spacing: 0.01em;
}

/* Screens 2 & 3 removed — single-screen paywall */

/* "No thanks" links */
.paywall-no-thanks {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  text-align: center;
  margin-top: 12px;
  padding: 8px;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.paywall-no-thanks:hover {
  color: var(--text);
  text-decoration-color: var(--text-dimmed);
}

/* Screen 3 save button */
.paywall-save-sd-link {
  display: block;
  margin: 12px auto 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.paywall-save-sd-link:hover {
  color: var(--text);
}


/* ---- Mobile refinements ---- */
@media (max-width: 599px) {
  .paywall-screen {
    padding: 0 20px 24px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .paywall-hero {
    padding: 20px 20px 20px;
    max-height: none;
  }

  .paywall-hero-thumb img {
    max-height: 140px;
  }

  .paywall-hero-compare {
    gap: 10px;
  }

  .paywall-headline {
    font-size: 1.3rem;
  }

  .paywall-offer-card {
    padding: 20px;
  }

  .paywall-cta--hero {
    min-height: 60px;
    padding: 14px 20px;
  }

  .paywall-cta--hero .paywall-cta-label {
    font-size: 1.05rem;
  }

  .paywall-social-proof-inline {
    font-size: 0.7rem;
    margin-bottom: 16px;
  }

}

/* Very short screens */
@media (max-height: 580px) {
  .paywall-hero {
    padding: 12px 16px 16px;
    max-height: none;
  }

  .paywall-hero-thumb img {
    max-height: 90px;
  }

  .paywall-screen {
    padding: 0 16px 16px;
  }

  .paywall-headline {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }

  .paywall-value-text {
    font-size: 0.82rem;
    margin-bottom: 8px;
  }

  .paywall-social-proof-inline {
    margin-bottom: 12px;
    font-size: 0.68rem;
  }

  .paywall-offer-card {
    padding: 16px;
  }

  .paywall-cta--hero {
    min-height: 52px;
    padding: 12px 16px;
  }

  .paywall-onetime-divider {
    margin: 10px 0 6px;
  }

  .demo-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }
}

/* Desktop — floating card with proper image sizing */
@media (min-width: 600px) {
  #conversionModal.visible {
    padding: 24px;
  }

  .paywall {
    max-width: 560px;
    height: auto;
    max-height: 92vh;
    border-radius: 24px;
    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(0, 0, 0, 0.06);
  }

  .paywall-hero {
    padding: 36px 36px 28px;
    max-height: none;
  }

  .paywall-hero-thumb {
    max-width: 48%;
  }

  .paywall-hero-thumb img {
    max-height: 240px;
    border-radius: 12px;
  }

  .paywall-screen {
    max-width: 560px;
    padding: 0 36px 40px;
  }

  .paywall-headline {
    font-size: 1.6rem;
  }

  .paywall-offer-card {
    padding: 28px;
  }

  .paywall-cta {
    padding: 16px 24px;
  }

  .paywall-close {
    position: absolute;
  }

  .paywall-hero-compare--single .paywall-hero-thumb--after img {
    max-height: 200px;
  }

  .paywall-hero-label {
    font-size: 0.65rem;
  }

}


/* ============================================
   LOGIN FORM
   ============================================ */
.login-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.03);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 14px;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
}

.login-input:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.login-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.user-email {
  text-align: center;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  padding: 14px;
  background: rgba(124, 58, 237, 0.03);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
}

/* ============================================
   LOGIN FORM - Enhanced Styling
   ============================================ */
.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
}

.login-form-group {
  margin-bottom: 16px;
}

.login-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 8px;
}

.login-footer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Email Sent State */
.login-sent {
  text-align: center;
  padding: 24px 0;
}

.login-sent-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--primary);
}

.login-sent-email {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
  margin: 8px 0 16px;
}

/* ============================================
   ACCOUNT SHEET - Logged In View
   ============================================ */
.account-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.account-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}

.account-details {
  flex: 1;
  min-width: 0;
}

.account-email {
  font-weight: 500;
  color: var(--text);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.account-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.account-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s var(--ease-standard);
}

.account-action-card:hover {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.06);
  transform: translateY(-2px);
  box-shadow:
    0 2px 8px rgba(124, 58, 237, 0.06),
    0 8px 24px rgba(124, 58, 237, 0.04);
}

.account-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(124, 58, 237, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.account-action-text {
  flex: 1;
  min-width: 0;
}

.account-action-title {
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text);
}

.account-action-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.account-action-arrow {
  color: var(--text-muted);
  flex-shrink: 0;
}

.account-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: center;
}

.account-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 12px;
  transition: all 0.2s var(--ease-standard);
}

.account-link:hover {
  color: var(--error);
  background: rgba(239, 68, 68, 0.1);
}

/* Account credits display */
.account-credits {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: 14px;
}

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

.account-credits-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* Sheet language section */
.sheet-lang-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.sheet-lang-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.sheet-lang-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ============================================
   FIRST-TIME OFFER BANNER
   ============================================ */
.first-offer-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 16px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1500;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

.first-offer-banner.visible {
  display: flex;
}

.first-offer-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.first-offer-text {
  font-weight: 600;
  font-size: 0.95rem;
}

.first-offer-countdown {
  font-family: monospace;
  font-size: 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
}

.first-offer-btn {
  background: white;
  color: #667eea;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.first-offer-btn:hover {
  transform: scale(1.05);
}

.first-offer-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */
.lang-switcher {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

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

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  min-width: 160px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s var(--ease-standard);
  overflow: hidden;
}

.lang-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.9rem;
  transition: background 0.1s;
  cursor: pointer;
}

.lang-option:first-child {
  border-radius: 11px 11px 0 0;
}

.lang-option:last-child {
  border-radius: 0 0 11px 11px;
}

.lang-option:hover {
  background: var(--bg-subtle);
}

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

/* ============================================
   MOBILE RESPONSIVE - Standard phones
   ============================================ */
@media (max-width: 599px) {
  .modal-content {
    padding: 24px 20px;
    max-width: calc(100vw - 40px);
  }

  .modal-stats {
    gap: 24px;
    padding: 14px;
  }

  .modal-stat-value {
    font-size: 1.3rem;
  }

  .bottom-sheet {
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
  }

  .pack-info {
    gap: 3px;
  }

  .pack-detail {
    font-size: 0.8rem;
  }
}

/* ============================================
   MOBILE RESPONSIVE - Small screens (iPhone SE)
   ============================================ */
@media (max-width: 375px) {
  .modal-content {
    padding: 20px 16px;
  }

  .credit-pack {
    padding: 14px 12px;
  }

  .quality-toggle {
    gap: 6px;
  }

  .quality-chip {
    padding: 8px 10px;
    font-size: 0.75rem;
  }

  /* Compact buy sheet for small screens (iPhone SE) */
  #buySheet .buy-sheet-title {
    font-size: 1.1rem;
  }

  #buySheet .plan-option {
    padding: 8px 10px;
    gap: 8px;
  }

  #buySheet .plan-radio {
    width: 16px;
    height: 16px;
  }

  #buySheet .plan-name {
    font-size: 0.8rem;
    min-width: 50px;
  }

  #buySheet .plan-credits {
    font-size: 0.7rem;
  }

  #buySheet .plan-price {
    font-size: 0.85rem;
  }

  #buySheet .benefit {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .credit-pack {
    padding: 10px 10px;
    margin-bottom: 6px;
  }

  .pack-credits {
    font-size: 0.9rem;
  }

  .pack-detail, .pack-per-edit {
    font-size: 0.7rem;
  }

  .pack-bonus {
    font-size: 0.7rem;
  }

  .pack-price {
    font-size: 1rem;
  }

  .pack-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    top: -7px;
  }

  .pack-trust {
    font-size: 0.7rem; /* Smaller on mobile but still visible */
  }

  .sheet-btn {
    padding: 14px;
    font-size: 0.9rem;
    margin-top: 6px;
    min-height: 48px; /* Touch target minimum */
  }

  .sheet-btn-secondary {
    padding: 10px;
    font-size: 0.85rem;
    min-height: 44px;
  }
}

/* ============================================
   MOBILE RESPONSIVE - Edit card
   ============================================ */
@media (max-width: 480px) {
  .edit-card {
    padding: 12px;
    border-radius: 14px;
  }

  .prompt-input {
    min-height: 56px;
    padding: 10px;
    font-size: 0.95rem;
  }

  .edit-card-footer {
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer-left {
    width: 100%;
    justify-content: space-between;
  }

  .quality-toggle {
    flex: 1;
    min-width: 0; /* Prevent overflow */
  }

  .toggle-option {
    padding: 10px 14px;
    min-height: 44px;
    font-size: 0.85rem;
  }

  .edit-btn {
    width: 100%;
    padding: 14px 20px;
    min-height: 48px;
    justify-content: center;
  }

  .reference-btn {
    padding: 8px 12px;
    min-height: 40px;
  }

  .reference-btn svg {
    width: 18px;
    height: 18px;
  }

  .reference-btn-text {
    font-size: 0.8rem;
  }
}

/* ============================================
   MOBILE RESPONSIVE - First offer banner
   ============================================ */
@media (max-width: 600px) {
  .first-offer-banner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .first-offer-text {
    font-size: 0.85rem;
  }
}

/* ============================================
   DESKTOP RESPONSIVE
   ============================================ */
@media (min-width: 900px) {
  /* Bottom sheets - centered */
  .bottom-sheet {
    max-width: 440px;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border-radius: 20px 20px 0 0;
  }

  .bottom-sheet.visible {
    transform: translateX(-50%) translateY(0);
  }

  /* Buy sheet V9 - Full-screen on desktop (overrides bottom-sheet centering) */
  .buy-sheet-v9 {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    height: 100dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-standard);
  }

  .buy-sheet-v9.visible {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  /* Hover states */
  .btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--glow);
  }

  .btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
  }

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

  .quality-btn:hover:not(.active) {
    border-color: var(--primary);
    color: var(--text);
  }

  .text-link:hover {
    color: var(--primary) !important;
  }

  .credit-pack:hover:not(.selected) {
    border-color: var(--primary-light);
  }
}

/* ============================================
   HERO SHOWCASE - Text left, Video dominant right
   ============================================ */
.hero-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px 16px;
  gap: 12px;
}

/* On mobile, flatten the structure to allow reordering */
.hero-left {
  display: contents;
}

.hero-right {
  display: contents;
}

/* Mobile order: title → video → subtitle → button → etc */
.hero-title { order: 1; text-align: center; margin: 0; }
.hero-video { order: 2; width: 100%; margin: 8px 0; }
.hero-subtitle { order: 3; text-align: center; max-width: 360px; margin: 0 0 4px; }
.hero-upload-btn { order: 4; }
.hero-free-hint { order: 5; margin: 4px 0 0; }
.hero-proof { order: 6; margin-top: 8px; }
.hero-tags-waterfall { order: 7; display: none; } /* Hide on mobile for cleaner look */

.hero-video {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
}

/* Waterfall tags under video */
.hero-tags-waterfall {
  position: relative;
  height: 100px;
  margin-top: 12px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
}

.waterfall-tag {
  position: absolute;
  top: -5px;
  padding: 5px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  animation: waterfallDrop var(--fall-duration, 1.8s) linear forwards;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

@keyframes waterfallDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  5% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(110px);
    opacity: 0;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.01em;
}

.hero-badge svg {
  width: 12px;
  height: 12px;
}

.hero-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.hero-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 360px;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 2px;
}

.hero-tag {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hero-upload-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s var(--ease-standard), box-shadow 0.1s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  margin-top: 8px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hero-upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
}

.hero-upload-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.hero-upload-btn.loading {
  pointer-events: none;
  opacity: 0.8;
}

.hero-upload-btn.loading .upload-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-upload-btn .upload-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hero-free-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.hero-avatars {
  display: flex;
}

.hero-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -6px;
  border: 2px solid var(--bg);
}

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

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

/* Desktop hero - aligned with nav, video dominant */
@media (min-width: 900px) {
  .hero-showcase {
    flex-direction: row;
    align-items: flex-start;
    padding: 32px 24px;
    gap: 40px;
    max-width: none;
  }

  /* Restore container behavior on desktop */
  .hero-left {
    display: flex;
    flex-direction: column;
    flex: 0 0 280px;
    max-width: 280px;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding-top: 8px;
  }

  .hero-right {
    display: block;
    flex: 1;
  }

  /* Reset order and mobile styles on desktop */
  .hero-title,
  .hero-video,
  .hero-subtitle,
  .hero-upload-btn,
  .hero-free-hint,
  .hero-proof,
  .hero-tags-waterfall {
    order: unset;
    margin: 0;
  }

  .hero-title {
    font-size: 2rem;
    text-align: left;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    max-width: none;
    text-align: left;
  }

  .hero-video {
    width: 100%;
    margin: 0;
  }

  .hero-tags-waterfall {
    display: block;
    margin-top: 20px;
  }

  .hero-proof {
    margin-top: 2px;
  }

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

/* Large desktop */
@media (min-width: 1100px) {
  .hero-showcase {
    padding: 40px 24px;
    gap: 56px;
  }

  .hero-left {
    flex: 0 0 320px;
    max-width: 320px;
  }

  .hero-title {
    font-size: 2.35rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }
}

/* Extra large desktop */
@media (min-width: 1400px) {
  .hero-showcase {
    padding: 48px 24px;
    gap: 72px;
  }

  .hero-left {
    flex: 0 0 380px;
    max-width: 380px;
  }

  .hero-title {
    font-size: 2.65rem;
  }
}

/* ============================================
   VIDEO SHOWCASE SECTION (legacy, below fold)
   ============================================ */
.showcase-section {
  margin: 32px 0;
  text-align: center;
}

.showcase-video {
  width: 100%;
  max-width: 720px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.showcase-tagline {
  margin-top: 20px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
}

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 32px 0;
  padding: 20px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.trust-item svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ============================================
   SOCIAL PROOF
   ============================================ */
.social-proof {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 24px 0 40px;
}

/* Mobile responsive */
@media (max-width: 600px) {
  .showcase-tagline {
    font-size: 1.1rem;
  }

  .trust-bar {
    gap: 16px;
    padding: 16px;
  }

  .trust-item {
    font-size: 0.8rem;
  }

  .trust-item svg {
    width: 18px;
    height: 18px;
  }
}

/* ============================================
   HERO - CLEAN MINIMAL
   ============================================ */
.hero-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================
   BELOW FOLD - PREMIUM
   ============================================ */

/* Value Strip */
.value-strip {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 24px 20px;
  flex-wrap: wrap;
}

.value-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.value-item svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Testimonial Card */
.testimonial-card {
  max-width: 480px;
  margin: 0 auto 48px;
  padding: 0 20px;
}

.testimonial-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.04);
}

.quote-icon {
  position: absolute;
  top: 16px;
  right: 20px;
  color: var(--primary);
}

.testimonial-content .testimonial-quote {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 16px 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c6fe0 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: 32px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* Features Section */
.features-section {
  max-width: 800px;
  margin: 0 auto 56px;
  padding: 0 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 500px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.2s var(--ease-standard);
  position: relative;
}

.feature-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.1);
}

.feature-card.featured {
  border-color: var(--primary-light);
  background: linear-gradient(to bottom, rgba(124, 58, 237, 0.05), transparent);
}

.feature-icon-wrap {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: 12px;
  color: var(--text-muted);
}

.feature-icon-wrap.quick {
  background: rgba(251, 191, 36, 0.1);
  color: #f59e0b;
}

.feature-icon-wrap.smart {
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary);
}

.feature-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px 0;
}

.feature-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.feature-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 100px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.feature-tag.smart {
  background: rgba(124, 58, 237, 0.1);
  color: var(--primary);
}

/* FAQ Section */
.faq-section {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.faq-item summary {
  padding: 16px 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.faq-item[open] summary {
  border-bottom-color: transparent;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex-shrink: 0;
  opacity: 0.3;
  transition: transform 0.2s var(--ease-standard);
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

.faq-item p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  padding-bottom: 16px;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .value-strip {
    gap: 16px;
    padding: 20px 16px;
  }

  .value-item {
    font-size: 0.85rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .testimonial-content {
    padding: 20px;
  }

  .testimonial-content .testimonial-quote {
    font-size: 1rem;
  }
}

.faq-item-minimal p {
  margin: 12px 0 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial {
  background: var(--bg-subtle);
  border-radius: 12px;
  padding: 20px;
  border-left: 3px solid var(--primary);
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 12px 0;
  font-style: italic;
  line-height: 1.5;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

@media (max-width: 600px) {
  .testimonials-section {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TRUST SECTION
   ============================================ */
.trust-section {
  margin: 32px 0;
  text-align: center;
}

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trust-badge svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ============================================
   USE CASES UPGRADED
   ============================================ */
.use-case-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  margin-bottom: 4px;
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta {
  text-align: center;
  margin: 40px 0 20px;
}

.final-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.final-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.4);
}

/* ============================================
   HOW IT WORKS SECTION
   ============================================ */
.how-it-works {
  text-align: center;
  margin: 40px 0 32px;
}

.how-it-works h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
}

.steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-text {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
}

.step-arrow {
  color: var(--text-muted);
  font-size: 1.5rem;
  opacity: 0.5;
}

/* ============================================
   USE CASES SECTION
   ============================================ */
.use-cases-section {
  text-align: center;
  margin: 32px 0;
}

.use-cases-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 20px;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.use-case {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border-radius: 10px;
  text-align: left;
}

.use-case-icon {
  font-size: 1.2rem;
}

.use-case-text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.3;
}

@media (max-width: 600px) {
  .use-cases-grid {
    grid-template-columns: 1fr 1fr;
  }

  .step-arrow {
    display: none;
  }

  .steps-row {
    gap: 12px;
  }
}

/* ============================================
   SOCIAL PROOF SECTION
   ============================================ */
.social-proof-section {
  text-align: center;
  margin: 32px 0;
  padding: 20px;
}

.social-proof-text {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ============================================
   LEGACY - QUICK VS SMART COMPARISON SECTION
   (keeping for backwards compat with pSEO pages)
   ============================================ */
.standard-vs-pro {
  margin: 48px 0;
  padding: 32px;
  background: var(--bg-subtle);
  border-radius: 20px;
  text-align: center;
}

.standard-vs-pro h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 24px;
}

/* Mode showcase - side by side cards */
.comparison-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
}

.mode-showcase {
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--border);
  transition: border-color 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  text-align: left;
}

.mode-showcase:hover {
  transform: translateY(-2px);
}

.mode-showcase.smart {
  border-color: var(--primary);
}

.mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-subtle);
}

.mode-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.mode-showcase.smart .mode-name {
  color: var(--primary);
}

.mode-cost {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
}

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

.mode-prompt {
  padding: 14px 16px;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--border);
  line-height: 1.4;
}

.mode-best-for {
  padding: 10px 16px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.mode-showcase.smart .mode-best-for {
  color: var(--primary);
}

/* Mobile responsive */
@media (max-width: 600px) {
  .standard-vs-pro {
    margin: 32px 0;
    padding: 20px;
  }

  .standard-vs-pro h3 {
    font-size: 1.25rem;
  }

  .comparison-modes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mode-prompt {
    font-size: 0.85rem;
    padding: 12px 14px;
  }
}


/* ============================================
   PRICING SECTION - Homepage pricing cards
   ============================================ */
.pricing-section {
  padding: 80px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, #f8f7ff 100%);
}

.pricing-inner {
  max-width: 1200px;
  margin: 0 auto;
}

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

.pricing-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px 0;
  letter-spacing: -0.03em;
}

.pricing-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.pricing-free-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.free-note-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.free-note-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary);
  fill: rgba(124, 58, 237, 0.2);
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.pricing-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s var(--ease-standard);
}

.pricing-card:hover {
  border-color: var(--text-dimmed);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pricing-card-popular {
  border-color: var(--primary);
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, #fff 100%);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

.pricing-card-popular:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.25);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pricing-card-free {
  background: #fafafa;
  border-style: dashed;
}

.pricing-card-header {
  text-align: center;
  margin-bottom: 16px;
}

.pricing-plan-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.pricing-amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.pricing-period {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-credits {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.credits-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.credits-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}

.pricing-per-edit {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dimmed);
  font-weight: 500;
  margin-bottom: 16px;
}

.pricing-card-popular .pricing-per-edit {
  color: var(--primary);
  font-weight: 600;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex: 1;
}

.pricing-features li {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 4px 0;
}

.pricing-cta {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  background: var(--primary);
  color: white;
}

.pricing-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.pricing-cta-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

.pricing-cta-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--text-dimmed);
  box-shadow: none;
}

.pricing-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 600px;
  margin: 0 auto;
}

/* Pay As You Go Section */
.payg-section {
  margin-top: 40px;
  margin-bottom: 24px;
  text-align: center;
}

.payg-header {
  margin-bottom: 16px;
}

.payg-title {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

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

.payg-options {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.payg-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  min-width: 120px;
}

.payg-option:hover {
  border-color: var(--text-dimmed);
  transform: translateY(-2px);
}

.payg-option-best {
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.05);
}

.payg-option-best:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.payg-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

.payg-credits {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.payg-price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .payg-options {
    gap: 8px;
  }

  .payg-option {
    padding: 14px 16px;
    min-width: 100px;
  }

  .payg-credits {
    font-size: 0.9rem;
  }

  .payg-price {
    font-size: 0.8rem;
  }
}

/* Tablet: 2x2 grid */
@media (max-width: 1024px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: Stack vertically, show popular first */
@media (max-width: 768px) {
  .pricing-section {
    padding: 60px 16px;
  }

  .pricing-title {
    font-size: 1.75rem;
  }

  .pricing-subtitle {
    font-size: 1rem;
  }

  .pricing-free-note {
    font-size: 0.85rem;
    padding: 6px 12px;
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto 24px;
  }

  /* Reorder: Popular first on mobile */
  .pricing-card-popular {
    order: -1;
  }

  .pricing-card {
    padding: 20px 16px;
  }

  .credits-number {
    font-size: 2rem;
  }

  .pricing-amount {
    font-size: 1.75rem;
  }

  .pricing-features li {
    font-size: 0.85rem;
    padding: 6px 0;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .pricing-section {
    padding: 48px 12px;
  }

  .pricing-header {
    margin-bottom: 32px;
  }

  .pricing-title {
    font-size: 1.5rem;
  }
}

/* ============================================
   POST-EDIT OVERLAY - Floating action buttons
   REMOVED: Redundant with bottom action bar (result-actions)
   The bottom bar provides Save/Share/Add Photo/New functionality
   ============================================ */
.post-edit-overlay {
  display: none !important; /* Hidden - use bottom action bar instead */
}

.post-edit-actions {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 16px;
  align-items: flex-end;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.post-edit-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #1f2937;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.post-edit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.post-edit-btn:active {
  transform: scale(0.95);
}

/* Primary button (Download) - prominent styling with pulse */
.post-edit-btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: white;
  padding: 14px 20px;
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
  animation: post-edit-pulse 2s var(--ease-in-out) infinite;
}

.post-edit-btn-primary:hover {
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5);
  animation: none;
}

.post-edit-btn-primary svg {
  stroke: white;
}

/* Pulse animation to draw attention */
@keyframes post-edit-pulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(124, 58, 237, 0.6), 0 0 0 8px rgba(124, 58, 237, 0.15);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .post-edit-actions {
    bottom: 12px;
    gap: 10px;
    padding: 12px;
  }

  .post-edit-btn {
    padding: 10px 14px;
    font-size: 0.75rem;
    border-radius: 12px;
  }

  .post-edit-btn-primary {
    padding: 12px 18px;
  }

  .post-edit-btn span {
    display: none; /* Hide labels on mobile, show only icons */
  }

  .post-edit-btn {
    flex-direction: row;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .post-edit-btn-primary {
    width: 56px;
    height: 56px;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .post-edit-actions {
    bottom: 8px;
    gap: 8px;
  }

  .post-edit-btn {
    width: 44px;
    height: 44px;
  }

  .post-edit-btn svg {
    width: 18px;
    height: 18px;
  }

  .post-edit-btn-primary {
    width: 52px;
    height: 52px;
  }

  .post-edit-btn-primary svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   CELEBRATION CONFETTI - Post-edit dopamine hit
   ============================================ */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 3s var(--ease-out) forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Edit complete success badge */
.edit-success-badge {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  color: white;
  padding: 16px 28px;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4);
  z-index: 10002;
  pointer-events: none;
  animation: success-badge-pop 2s var(--ease-out) forwards;
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-success-badge svg {
  width: 24px;
  height: 24px;
}

@keyframes success-badge-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
}
/* ============================================
   BUY SHEET V7 - Clean, High-Converting Design
   Mobile-first, vertical stack, clear hierarchy
   ============================================ */

.buy-sheet-v7 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 95dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 12px 20px 0;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s;
  z-index: 10002; /* Above GDPR banner (9999) and sheet-overlay (10001) */
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
  touch-action: pan-y;
}

/* Scrollable content area */
.buy-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* Sticky footer with CTA */
.buy-sheet-footer {
  flex-shrink: 0;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.buy-sheet-v7.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

/* Sheet handle - larger touch target */
.buy-sheet-v7 .sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
  /* Larger touch area without changing visual size */
  padding: 12px 32px;
  margin-top: -12px;
  background-clip: content-box;
  cursor: grab;
  touch-action: pan-y;
}

/* Close button */
.buy-sheet-v7 .buy-sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.buy-sheet-v7 .buy-sheet-close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.buy-sheet-v7 .buy-sheet-close:active {
  transform: scale(0.9);
  background: var(--bg-secondary);
}

/* Header */
.buy-header-v7 {
  text-align: center;
  margin-bottom: 12px;
  padding-left: 44px;
  padding-right: 44px; /* Balance for close button */
}

/* Header icon - lightning bolt style */
.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--primary);
}

.header-icon svg {
  width: 24px;
  height: 24px;
}

.buy-title-v7 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.buy-subtitle-v7 {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.buy-social-proof-v7 {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin: 6px 0 0 0;
}

/* Image Preview - shown when user has an edit waiting */
.buy-preview-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}

.buy-preview-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.buy-preview-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

/* Benefits */
.buy-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.03) 100%);
  border-radius: 10px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--text);
}

.benefit-item svg {
  flex-shrink: 0;
  stroke: #10b981;
}

/* ============================================
   INTRO OFFER COMPONENT - Centralized styles
   Variants: card, banner, inline
   ============================================ */

/* Card variant (buy sheet, standalone) */
.intro-offer-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.intro-offer-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  animation: shimmer 3s var(--ease-in-out) infinite;
}

.intro-offer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.intro-offer-card.urgent {
  animation: pulse-urgent 1s var(--ease-in-out) infinite;
  border-color: #dc2626;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.intro-offer-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #f59e0b;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
  z-index: 1;
}

.intro-offer-card.urgent .intro-offer-badge {
  background: #dc2626;
}

.intro-offer-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  z-index: 1;
}

.intro-offer-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.intro-offer-price-amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: #92400e;
}

.intro-offer-price-period {
  font-size: 0.9rem;
  font-weight: 600;
  color: #92400e;
}

.intro-offer-renewal {
  font-size: 0.8rem;
  color: #78716c;
}

.intro-offer-meta {
  font-size: 0.8rem;
  color: #78350f;
}

.intro-offer-meta .intro-offer-credits {
  font-weight: 600;
}

.intro-offer-meta .intro-offer-cancel {
  opacity: 0.7;
}

.intro-offer-meta .intro-offer-credits::after {
  content: ' · ';
}

.intro-offer-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(120, 53, 15, 0.1);
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #78350f;
  flex-shrink: 0;
  z-index: 1;
}

/* Banner variant (editor, compact) */
.intro-offer-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.intro-offer-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.3) 50%, transparent 60%);
  animation: shimmer 3s var(--ease-in-out) infinite;
}

.intro-offer-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.intro-offer-banner.urgent {
  animation: pulse-urgent 1s var(--ease-in-out) infinite;
  border-color: #dc2626;
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.intro-offer-banner-icon {
  font-size: 1.1rem;
  z-index: 1;
}

.intro-offer-banner-text {
  font-size: 0.9rem;
  color: #92400e;
  font-weight: 500;
  z-index: 1;
}

.intro-offer-banner-text strong {
  font-weight: 700;
  color: #78350f;
}

.intro-offer-banner-badge {
  padding: 2px 6px;
  background: #f59e0b;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  z-index: 1;
}

.intro-offer-banner.urgent .intro-offer-banner-badge {
  background: #dc2626;
}

.intro-offer-banner-timer {
  padding: 4px 10px;
  background: rgba(120, 53, 15, 0.1);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #78350f;
  margin-left: auto;
  z-index: 1;
}

/* Inline CTA variant (conversion modal) */
.intro-offer-inline {
  width: 100%;
}

.intro-offer-cta {
  width: 100%;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.intro-offer-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.intro-offer-cta-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.intro-offer-cta-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.intro-offer-cta-period {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.intro-offer-cta-details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.intro-offer-cta-credits {
  font-weight: 600;
}

.intro-offer-cta-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.intro-offer-badge-discount {
  background: #dc2626;
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.intro-offer-cta-cancel {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Dark mode for intro offer */
@media (prefers-color-scheme: dark) {
  .intro-offer-card,
  .intro-offer-banner {
    background: linear-gradient(135deg, #422006 0%, #78350f 100%);
    border-color: #f59e0b;
  }

  .intro-offer-price-amount,
  .intro-offer-price-period,
  .intro-offer-banner-text,
  .intro-offer-banner-text strong {
    color: #fcd34d;
  }

  .intro-offer-renewal {
    color: #d6d3d1;
  }

  .intro-offer-meta {
    color: #fef3c7;
  }

  .intro-offer-timer,
  .intro-offer-banner-timer {
    background: rgba(252, 211, 77, 0.15);
    color: #fcd34d;
  }

  .intro-offer-card.urgent,
  .intro-offer-banner.urgent {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
    border-color: #dc2626;
  }
}

/* Plan cards - vertical stack */
.buy-plans-v7,
.buy-packs-v7 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Pack expiry note */
.pack-expiry-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 8px 0 0;
  opacity: 0.8;
}

/* CTA Button */
.buy-cta-v7 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
  /* Direct text styling - JS may set innerHTML directly */
  color: white;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.buy-cta-v7:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.buy-cta-v7:active {
  transform: translateY(0);
}

.buy-cta-v7 .cta-text {
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

.buy-cta-v7 .cta-price {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Trust signals */
.buy-trust,
.buy-trust-v7 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.buy-trust .trust-item {
  font-size: 0.75rem;
  gap: 4px;
}

.buy-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.buy-trust-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.buy-trust-sep {
  color: var(--text-dimmed);
}

/* Sign-in link for returning users */
.buy-signin-link {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
}

.buy-signin-link:hover {
  color: var(--primary);
}

/* Hide sign-in link when logged in (populated by JS) */
.buy-signin-link.hidden {
  display: none;
}

/* Desktop: wider sheet, centered */
@media (min-width: 600px) {
  .buy-sheet-v7 {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    max-width: 420px;
    border-radius: 20px;
    bottom: 20px;
    /* visibility inherited from base rule */
  }

  .buy-sheet-v7.visible {
    transform: translateX(-50%) translateY(0);
    /* visibility inherited from base .visible rule */
  }

  .buy-header-v7 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================
   New Buy Sheet: Pack Cards + Subscription Row
   ============================================ */

/* Value Anchor Header */
.buy-value-anchor {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.4;
}

.buy-social-proof {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* Pack Cards Grid (2 columns) */
.buy-packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.pack-card,
.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 14px;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Default card - light purple tint */
.pack-card,
.option-card {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.2);
}

.pack-card:hover,
.option-card:hover {
  border-color: var(--primary);
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.pack-card:active,
.option-card:active {
  transform: scale(0.98);
  border-color: var(--primary);
}

/* Best Value card - green tint (overrides purple) */
.pack-card-best {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

.pack-card-best:hover {
  border-color: var(--success);
  background: rgba(52, 211, 153, 0.15);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}

.pack-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--success);
  color: #065f46;
  font-size: 9px;
  font-weight: 700;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pack-card-header {
  margin-bottom: 8px;
}

.pack-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.pack-card-price {
  margin-bottom: 8px;
}

.pack-card-amount {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 2px;
}

.pack-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.pack-card-per-edit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pack-card-savings {
  font-size: 0.7rem;
  font-weight: 600;
  color: #059669;
}

.pack-card-best .pack-card-savings {
  color: #059669;
  font-weight: 600;
}

.pack-card-cta,
.card-cta {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.pack-card:hover .pack-card-cta,
.option-card:hover .card-cta {
  background: var(--primary-hover);
}

.pack-card-best .pack-card-cta,
.pack-card-best .card-cta {
  background: #059669;
}

.pack-card-best:hover .pack-card-cta,
.pack-card-best:hover .card-cta {
  background: #047857;
}

/* Card badge - absolute positioned pill */
.card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--success);
  color: #065f46;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 1;
}

/* Alias for elevated design compatibility */
.card-best {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.3);
}

.card-best:hover {
  border-color: var(--success);
  background: rgba(52, 211, 153, 0.15);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.2);
}

.card-best .card-cta,
.card-best .pack-card-cta {
  background: #059669;
}

.card-best:hover .card-cta,
.card-best:hover .pack-card-cta {
  background: #047857;
}

/* Subscription Divider */
.buy-sub-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.buy-sub-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.buy-sub-divider-text {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  white-space: nowrap;
}

/* Subscription Card - Matches pack card style */
.sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 16px;
  background: rgba(56, 189, 248, 0.08);
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.sub-card:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.12);
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2);
  transform: translateY(-2px);
}

.sub-card:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.sub-card .sub-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0c4a6e;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sub-quantity {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-top: 8px;
}

.sub-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
}

.sub-price-small {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
}

.sub-price-small span {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.8;
}

.sub-unit {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.sub-cta {
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: #0ea5e9;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.15s;
}

.sub-card:hover .sub-cta {
  background: #0284c7;
}

/* Legacy sub-row styles for backward compatibility */
.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: rgba(56, 189, 248, 0.1);
  border: 2px solid rgba(56, 189, 248, 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
  text-align: left;
}

.sub-row:hover {
  border-color: var(--accent);
  background: rgba(56, 189, 248, 0.15);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
}

.sub-row:active {
  transform: scale(0.98);
  border-color: var(--accent);
}

.sub-row-left,
.sub-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sub-row-icon,
.sub-icon {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.sub-row-icon svg,
.sub-icon svg {
  width: 20px;
  height: 20px;
}

.sub-row-info,
.sub-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sub-row-name,
.sub-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-row-badge,
.sub-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #0c4a6e;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
}

.sub-row-details,
.sub-details {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sub-row-right,
.sub-right {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}

.sub-row-pricing,
.sub-pricing {
  display: flex;
  flex-direction: column;
}

.sub-row-price,
.sub-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.sub-row-period,
.sub-period {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.sub-row-arrow,
.sub-arrow {
  color: var(--text-dimmed);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.sub-row-arrow svg,
.sub-arrow svg {
  width: 16px;
  height: 16px;
}

.sub-row:hover .sub-row-arrow,
.sub-card:hover .sub-arrow {
  transform: translateX(2px);
  color: var(--accent);
}

/* Legacy sub-row classes for backward compatibility */
.sub-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.sub-row-edits {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.sub-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sub-row-per-edit {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sub-row-cancel {
  font-size: 0.8rem;
  color: var(--text-dimmed);
}

/* Feature List - Horizontal pill layout */
.buy-features,
.features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0 24px;
}

.buy-feature-item,
.feature-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.buy-feature-item svg,
.feature-pill svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  stroke: var(--primary);
}

.buy-smart-note {
  font-size: 0.8rem;
  color: var(--text-dimmed);
  margin: 8px 0 0;
  padding-left: 24px;
}

/* Premium Perks Section - Elevated design */
.premium-perks-section {
  margin: 16px 0 8px;
  padding: 16px 18px;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.06) 0%, rgba(99, 102, 241, 0.03) 100%);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  position: relative;
}

.perks-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.perks-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, #7C3AED 0%, #7C3AED 100%);
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: white;
  text-transform: uppercase;
  box-shadow: 0 2px 8px -2px rgba(124, 58, 237, 0.4);
}

.perks-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.01em;
}

.perks-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: flex-start;
}

.perk-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 8px;
  transition: background 0.2s var(--ease-standard);
}

.perk-item:hover {
  background: rgba(124, 58, 237, 0.12);
}

.perk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.perk-icon svg {
  width: 14px;
  height: 14px;
  stroke: #A78BFA;
  stroke-width: 2.5;
}

.perk-text {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}

/* Highlight perk - "Credits never expire" */
.perk-item-highlight {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(167, 139, 250, 0.1) 100%);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.perk-item-highlight .perk-icon svg {
  stroke: #A78BFA;
}

.perk-item-highlight .perk-text {
  color: #C4B5FD;
  font-weight: 600;
}

/* Elevated Buysheet v4 - Header */
.buy-header-v7 .sheet-headline {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Step 2 headline - slightly smaller */
#buySheetStep2 .sheet-headline {
  font-size: 1.15rem;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.buy-header-v7 .sheet-subline {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================
   UNIFIED PRICING CARD ELEMENTS
   Consistent styling across buy sheet & homepage
   ============================================ */

/* Quantity - the big number (20, 60, 80) */
.pack-card .card-quantity,
.pricing-card .pricing-card-qty {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

/* Label - "edits" or "edits/mo" */
.pack-card .card-label,
.pricing-card .pricing-card-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* Price row - contains original + current price */
.pack-card .card-price-row,
.pricing-card .pricing-card-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* Current price */
.pack-card .card-price,
.pricing-card .pricing-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* Price suffix (/mo) */
.pack-card .card-price-suffix,
.pricing-card .pricing-card-suffix {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Per-edit unit price */
.pack-card .card-unit,
.pricing-card .pricing-card-unit {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Best value card - green accent for unit */
.pack-card-best .card-unit,
.pricing-card--best .pricing-card-unit {
  color: #059669;
  font-weight: 600;
}

/* Subscription card styling - blue accent */
.pack-card-sub {
  background: rgba(14, 165, 233, 0.08) !important;
  border-color: rgba(14, 165, 233, 0.25) !important;
}

.pack-card-sub:hover {
  border-color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.12) !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15) !important;
}

.pack-card-sub .card-cta {
  background: #0ea5e9;
}

.pack-card-sub:hover .card-cta {
  background: #0284c7;
}

/* Subscription badge - blue */
.card-badge-sub {
  background: #0ea5e9 !important;
  color: white !important;
}

/* Homepage subscription card */
.pricing-card--sub {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.25);
}

.pricing-card--sub:hover {
  border-color: #0ea5e9;
  background: rgba(14, 165, 233, 0.12);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.pricing-card-badge--sub {
  background: #0ea5e9 !important;
  color: white !important;
}

/* Elevated Buysheet v4 - Trust Row */
.buy-sheet-footer .trust-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 10px;
}

.buy-sheet-footer .trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
}

.buy-sheet-footer .trust-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  stroke: var(--primary);
}

/* Mobile: smaller elevated buysheet */
@media (max-width: 380px) {
  .buy-header-v7 .sheet-headline {
    font-size: 1.25rem;
  }

  .pack-card .card-quantity {
    font-size: 1.85rem;
  }

  .buy-sheet-footer .trust-row {
    gap: 10px;
  }

  .buy-sheet-footer .trust-item {
    font-size: 0.62rem;
  }
}

/* Conversion Modal - Value Anchor */
.conversion-value-anchor {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.4;
}

.conversion-features-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Mobile: smaller pack card padding */
@media (max-width: 380px) {
  .buy-packs-grid {
    gap: 8px;
  }

  .pack-card {
    padding: 14px 10px;
  }

  .pack-card-amount {
    font-size: 1.85rem;
  }

  .buy-features,
  .features-row {
    gap: 4px;
    padding: 0 18px;
  }

  .buy-feature-item,
  .feature-pill {
    padding: 5px 8px;
    font-size: 0.65rem;
  }

  /* Premium perks - compact on small mobile */
  .premium-perks-section {
    margin: 0 12px 12px;
    padding: 12px 12px 14px;
  }

  .perks-grid {
    gap: 8px;
  }

  .perk-icon {
    width: 28px;
    height: 28px;
  }

  .perk-icon svg {
    width: 14px;
    height: 14px;
  }

  .perk-text {
    font-size: 0.7rem;
  }
}

/* Very small screens: stack cards vertically */
@media (max-width: 340px) {
  .buy-packs-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FOCUSED DROPZONE HERO (Pre-upload)
   Two-column split: copy left, dropzone right
   Stacks on mobile
   ============================================ */
.hero-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px 16px;
  gap: 24px;
}

/* Left column: copy + trust */
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

/* Right column: dropzone */
.hero-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-dropzone-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--text);
  margin: 0;
  text-align: center;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero-dropzone-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.6;
  max-width: 520px;
}

/* Trust signals row */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
}

.hero-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-trust-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hero-trust-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-trust-sep {
  width: 1px;
  height: 28px;
  background: var(--border-subtle);
  flex-shrink: 0;
}


.dropzone-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  padding: 48px 32px 40px;
  background: #1e1b3a;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.2),
    0 4px 14px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  overflow: visible;
  animation: dropzoneTap 4s ease-in-out 0.5s infinite;
}

/* Periodic tap — gentle press-and-release every 5s */
@keyframes dropzoneTap {
  0%, 90%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 4px 14px rgba(124, 58, 237, 0.2),
      0 4px 14px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  94% {
    transform: translateY(2px) scale(0.98);
    box-shadow:
      0 2px 8px rgba(124, 58, 237, 0.15),
      0 2px 6px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
}

/* Pause tap animation on hover — real interaction takes over */
.dropzone-box:hover {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dropzone-box {
    animation: none;
  }
}

/* Ambient violet glow behind dropzone */
.dropzone-box::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  right: -40px;
  bottom: -40px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
}

/* Shimmer sweep on hover */
.dropzone-box::after {
  content: '';
  position: absolute;
  top: 0;
  border-radius: inherit;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.dropzone-box:hover::after {
  left: 100%;
}

.dropzone-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: #2a2545;
}

.dropzone-box:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 2px 8px rgba(124, 58, 237, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.dropzone-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  color: white;
}

.dropzone-icon svg {
  width: 36px;
  height: 36px;
}

.dropzone-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
}

.dropzone-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ============================================
   FREE EDIT BADGE
   Stuck to bottom of dropzone, half on/half off
   ============================================ */
.free-badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 100px;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.free-badge-icon {
  font-size: 0.9rem;
}


/* ============================================
   ROTATING PROMPT HINT
   Fade-transitioning example prompts
   ============================================ */
.dropzone-prompt {
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.7;
  transition: opacity 0.4s var(--ease-standard);
  min-height: 1.4em;
  text-align: center;
}

.dropzone-prompt.fade-out {
  opacity: 0;
}


/* ============================================
   DROPZONE SUBTEXT
   Value prop under dropzone
   ============================================ */
.dropzone-subtext {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 340px;
  line-height: 1.5;
}

.dropzone-tasks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  max-width: 400px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dropzone-task {
  color: var(--text-secondary);
  font-weight: 500;
}

.dropzone-task-sep {
  color: var(--border);
}

.dropzone-free-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Elevated chips */
.dropzone-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 440px;
}

.dropzone-chip {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 100px;
  transition: all 0.15s var(--ease-standard);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dropzone-chip:active {
  transform: scale(0.96);
  background: var(--glow);
}

.dropzone-chip:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: rgba(124, 58, 237, 0.04);
}

.dropzone-chip--more {
  color: var(--primary);
  border-color: transparent;
  background: rgba(124, 58, 237, 0.08);
}

.dropzone-chip--more:hover {
  background: rgba(124, 58, 237, 0.12);
}

/* Elevated free hint */
.dropzone-free {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.dropzone-free svg {
  color: var(--primary);
  fill: rgba(124, 58, 237, 0.15);
  flex-shrink: 0;
}

.dropzone-free-sep {
  color: var(--border);
}

@media (max-width: 400px) {
  .dropzone-chips {
    gap: 6px;
  }

  .dropzone-chip {
    font-size: 0.75rem;
    padding: 5px 12px;
  }

  .dropzone-free {
    font-size: 0.8rem;
    gap: 6px;
  }
}

/* Tablet — two column */
@media (min-width: 768px) {
  .hero-dropzone {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 40px 32px;
    gap: 24px 40px;
    max-width: 960px;
    margin: 0 auto;
  }

  .hero-copy {
    text-align: left;
    grid-column: 1;
    grid-row: 1;
  }

  .hero-action {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
  }

  .hero-dropzone-title {
    text-align: left;
    font-size: 2.2rem;
  }

  .hero-dropzone-subtitle {
    text-align: left;
    max-width: none;
  }

  .hero-trust {
    justify-content: flex-start;
  }

  /* Showcase strip spans both columns */
  .showcase-strip {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Desktop — more breathing room */
@media (min-width: 1024px) {
  .hero-dropzone {
    padding: 56px 48px;
    gap: 32px 64px;
    max-width: 1120px;
  }

  .hero-dropzone-title {
    font-size: 2.8rem;
    line-height: 1.1;
  }

  .hero-dropzone-subtitle {
    font-size: 1.1rem;
  }

  .hero-trust-num {
    font-size: 1.6rem;
  }

  .dropzone-box {
    max-width: 420px;
    padding: 56px 40px;
  }

  .dropzone-icon {
    width: 88px;
    height: 88px;
    border-radius: 22px;
  }

  .dropzone-icon svg {
    width: 44px;
    height: 44px;
  }

  .dropzone-text {
    font-size: 1.2rem;
  }
}

/* Large desktop */
@media (min-width: 1280px) {
  .hero-dropzone {
    padding: 64px 64px;
    gap: 32px 80px;
  }

  .hero-dropzone-title {
    font-size: 3.2rem;
  }

  .dropzone-box {
    max-width: 460px;
    padding: 64px 48px;
  }
}

/* ============================================
   SHOWCASE STRIP - Transformation Theater
   ============================================ */
.showcase-strip {
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Subtle grain overlay */
.showcase-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.showcase-track {
  display: flex;
  gap: 24px;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.showcase-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual card */
.showcase-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: transform 0.3s var(--ease-standard), opacity 0.3s var(--ease-standard);
}

/* Backlight glow */
.showcase-card::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.08) 0%,
    transparent 70%
  );
  border-radius: 16px;
  filter: blur(8px);
  z-index: -1;
  opacity: 0.8;
  transition: opacity 0.3s var(--ease-standard);
}

/* Hover: spotlight effect */
.showcase-track:hover .showcase-card {
  opacity: 0.5;
}

.showcase-track:hover .showcase-card:hover {
  opacity: 1;
  transform: scale(1.05);
}

.showcase-track:hover .showcase-card:hover::before {
  opacity: 1;
  background: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.2) 0%,
    transparent 70%
  );
}

/* Frame container */
.showcase-frame {
  position: relative;
  width: 180px;
  height: 135px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.showcase-before,
.showcase-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-after {
  clip-path: inset(0 100% 0 0);
  animation: wipe-reveal 5.3s var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes wipe-reveal {
  0%, 35% {
    clip-path: inset(0 100% 0 0);
  }
  45%, 85% {
    clip-path: inset(0 0 0 0);
  }
  95%, 100% {
    clip-path: inset(0 100% 0 0);
  }
}

/* Pause wipe animation on hover */
.showcase-track:hover .showcase-after {
  animation-play-state: paused;
}

/* Label */
.showcase-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Reference card (equation layout) - for future use with reference images */
.showcase-card--reference .showcase-frame {
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.showcase-card--reference .showcase-base,
.showcase-card--reference .showcase-result {
  width: 90px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.showcase-card--reference .showcase-ref {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--primary-light);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.2);
}

.showcase-op {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  text-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

/* Mobile sizing */
@media (max-width: 599px) {
  .showcase-strip {
    padding: 16px 0;
    touch-action: pan-x; /* Allow horizontal swipe on mobile */
    cursor: grab;
  }

  .showcase-strip:active {
    cursor: grabbing;
  }

  .showcase-track {
    gap: 16px;
  }

  .showcase-frame {
    width: 120px;
    height: 90px;
    border-radius: 8px;
  }

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

  .showcase-card--reference .showcase-base,
  .showcase-card--reference .showcase-result {
    width: 72px;
    height: 54px;
  }

  .showcase-card--reference .showcase-ref {
    width: 44px;
    height: 33px;
  }

  .showcase-op {
    font-size: 0.85rem;
  }
}

/* Desktop sizing */
@media (min-width: 900px) {
  .showcase-strip {
    padding: 28px 0;
  }

  .showcase-track {
    gap: 28px;
  }

  .showcase-frame {
    width: 220px;
    height: 165px;
    border-radius: 12px;
  }

  .showcase-label {
    font-size: 0.75rem;
  }

  .showcase-card--reference .showcase-base,
  .showcase-card--reference .showcase-result {
    width: 120px;
    height: 90px;
  }

  .showcase-card--reference .showcase-ref {
    width: 72px;
    height: 54px;
  }
}

/* ============================================
   HERO V2 - Elevated Landing Experience
   ============================================ */
.hero-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 32px 20px;
  gap: 32px;
}

.hero-v2-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 500px;
}

.hero-v2-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 0;
}

.hero-v2-accent {
  color: var(--primary);
}

.hero-v2-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.hero-v2-cta {
  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: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
  margin-top: 8px;
}

.hero-v2-cta:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
}

.hero-v2-cta:active {
  transform: scale(0.98);
}

.hero-v2-free {
  font-size: 0.85rem;
  color: var(--text-dimmed);
  margin: 0;
}

/* Preview card section */
.hero-v2-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 480px;
}

.preview-card {
  position: relative;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

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

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

.preview-after {
  box-shadow: 0 4px 24px rgba(124, 58, 237, 0.25);
}

.preview-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.preview-prompt-icon {
  font-size: 1.2rem;
  color: var(--primary);
  font-weight: 600;
}

.preview-prompt code {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Mobile: stack preview vertically */
@media (max-width: 500px) {
  .hero-v2 {
    padding: 24px 16px;
    gap: 28px;
  }

  .hero-v2-title {
    font-size: 1.7rem;
  }

  .hero-v2-subtitle {
    font-size: 0.95rem;
  }

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

  .hero-v2-preview {
    flex-direction: row;
    gap: 12px;
    max-width: 320px;
  }

  .preview-prompt {
    display: none;
  }
}

/* Desktop: larger hero */
@media (min-width: 900px) {
  .hero-v2 {
    padding: 48px 32px;
    gap: 40px;
  }

  .hero-v2-title {
    font-size: 3rem;
  }

  .hero-v2-subtitle {
    font-size: 1.2rem;
  }

  .hero-v2-cta {
    padding: 18px 40px;
    font-size: 1.15rem;
    border-radius: 16px;
  }

  .hero-v2-preview {
    max-width: 560px;
    gap: 24px;
  }

  .preview-card {
    border-radius: 16px;
  }

  .preview-label {
    font-size: 0.65rem;
    padding: 4px 10px;
    bottom: 8px;
    left: 8px;
  }

  .preview-prompt code {
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}

/* Credit banner removed — info shown in header + edit button text */

/* ============================================
   CUSTOM PROMPT SECTION (Editor)
   Wrapper for textarea and related UI
   ============================================ */
.custom-prompt-section {
  margin-bottom: 0;
}

/* ============================================
   MOBILE: Maximize image visibility
   Hide secondary UI, focus on image + prompt
   ============================================ */
@media (max-width: 768px) {
  /* Photo strip on mobile - keep visible so users can add second photo */
  /* Only hide when keyboard is open (handled separately) */

  /* Photo strip - compact but functional */
  .app.has-image .photo-strip {
    padding: 6px 12px;
  }

  .app.has-image .photo-strip-item {
    padding: 2px;
  }

  .app.has-image .photo-thumb-wrapper {
    width: 40px;
    height: 40px;
  }

  .app.has-image .photo-strip-add {
    padding: 6px 10px;
    font-size: 0.7rem;
  }

  /* Compact edit card */
  .app.has-image .edit-card {
    padding: 10px;
    border-radius: 12px;
  }

  /* Compact edit card footer */
  .app.has-image .edit-card-footer {
    margin-top: 8px;
    gap: 10px;
  }

  /* Hide edit cost caption on mobile to save space (except countdown) */
  .app.has-image .edit-cost-caption:not(.free) {
    display: none;
  }

  /* Pro upsell more compact */
  .app.has-image .pro-upsell {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
}

/* Buy sheet footer */
.footer-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-dimmed);
}

.footer-trust svg {
  width: 12px;
  height: 12px;
  stroke: var(--text-dimmed);
}

.footer-dot {
  color: var(--text-dimmed);
}

.footer-signin {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0;
}

.footer-signin:hover {
  text-decoration: underline;
}

/* ============================================
   SAVED EDITS DRAWER
   Slide-out panel for viewing saved edits
   ============================================ */

/* Overlay */
.saved-edits-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 10001;
  pointer-events: none;
  transition: background 0.25s var(--ease-standard);
}
.saved-edits-drawer-overlay.visible {
  background: rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

/* Drawer panel */
.saved-edits-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 388px;
  max-width: 100vw;
  background: var(--bg);
  z-index: 10002;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-subtle);
  box-shadow:
    -8px 0 32px rgba(0, 0, 0, 0.06),
    -2px 0 16px rgba(124, 58, 237, 0.06);
}
.saved-edits-drawer.visible {
  transform: translateX(0);
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Drawer header */
.drawer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.drawer-header h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}
.drawer-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.drawer-count strong {
  color: var(--text);
  font-weight: 600;
}
.drawer-close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  transition: background 0.2s var(--ease-standard), color 0.2s var(--ease-standard);
}
.drawer-close:hover {
  background: rgba(124, 58, 237, 0.06);
  color: var(--text);
}

/* Drawer search */
.drawer-search {
  position: relative;
  padding: 14px 20px 0;
  flex-shrink: 0;
}

.drawer-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.drawer-search-input {
  width: 100%;
  padding: 10px 32px 10px 36px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: rgba(124, 58, 237, 0.03);
  color: var(--text);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  box-sizing: border-box;
}

.drawer-search-input:focus {
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.06);
}

.drawer-search-input::placeholder {
  color: var(--text-muted);
}

.drawer-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-search-clear:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.drawer-controls {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 16px 0;
}
.drawer-controls .drawer-search {
  flex: 1;
  padding: 0;
}
.drawer-sort-btn {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.drawer-sort-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Drawer date filter chips */
.drawer-filter-chips {
  display: flex;
  gap: 5px;
  padding: 8px 16px 0;
  flex-shrink: 0;
}
.drawer-filter-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.drawer-filter-chip:hover {
  border-color: var(--primary);
  color: var(--text);
}
.drawer-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.drawer-no-results {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* Drawer body */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 32px;
}

/* Skeleton loading */
.drawer-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.drawer-skeleton-card {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.drawer-skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(var(--primary-rgb), 0.04) 50%,
    transparent 70%
  );
  animation: drawerShimmer 1.6s var(--ease-in-out) infinite;
}
@keyframes drawerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Login prompt */
.drawer-login {
  text-align: center;
  padding: 48px 20px;
}
.drawer-login-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg-secondary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-login-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.drawer-login h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.drawer-login p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.drawer-login-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.drawer-login-cta:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* Empty state */
.drawer-empty {
  text-align: center;
  padding: 48px 20px;
}
.drawer-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--bg-secondary);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-empty-icon svg {
  width: 24px;
  height: 24px;
  color: var(--text-muted);
}
.drawer-empty h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.drawer-empty p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Date groups */
.drawer-date-group {
  margin-bottom: 20px;
}
.drawer-date-group:last-child {
  margin-bottom: 0;
}
.drawer-date-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px 2px;
}

/* Card grid */
.drawer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Individual card */
.drawer-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: drawerCardIn 0.35s var(--ease-out) forwards;
  transition: border-color 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
}
@keyframes drawerCardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.drawer-card:hover {
  border-color: rgba(124, 58, 237, 0.2);
  box-shadow:
    0 2px 8px rgba(var(--primary-rgb), 0.08),
    0 8px 24px rgba(var(--primary-rgb), 0.06);
  transform: translateY(-2px);
}
.drawer-card.removing {
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.25s var(--ease-standard), opacity 0.25s var(--ease-standard);
}
.drawer-card.kbd-focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Card thumbnail */
.drawer-card-thumb {
  aspect-ratio: 1;
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}
.drawer-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}
.drawer-card-thumb img.loaded {
  opacity: 1;
}
.drawer-card-thumb img.error {
  display: none;
}
@media (hover: hover) {
  .drawer-card:hover .drawer-card-thumb img.loaded {
    transform: scale(1.04);
  }
}

/* Image error fallback */
.drawer-card-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
}
.drawer-card-fallback svg {
  width: 28px;
  height: 28px;
  color: var(--text-dimmed);
  opacity: 0.5;
}

/* Hover action buttons */
.drawer-card-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease-standard), visibility 0.18s var(--ease-standard);
}
@media (hover: hover) {
  .drawer-card:hover .drawer-card-actions {
    opacity: 1;
    visibility: visible;
  }
}
.drawer-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease-standard), transform 0.15s var(--ease-standard);
}
.drawer-action svg {
  width: 15px;
  height: 15px;
}
.drawer-action:hover {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.08);
}
.drawer-action--delete:hover {
  background: rgba(239, 68, 68, 0.85);
}
.drawer-action.success {
  background: rgba(34, 197, 94, 0.85);
}

/* Favorite button on edit cards (shared by drawer + dashboard) */
.edit-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s var(--ease-standard), color 0.15s var(--ease-standard);
  z-index: 2;
  padding: 0;
}
.drawer-card:hover .edit-card-fav,
.dash-card:hover .edit-card-fav,
.edit-card-fav.active {
  opacity: 1;
}
.edit-card-fav.active {
  color: #fbbf24;
}
.edit-card-fav:hover {
  color: #fbbf24;
}

/* Card info */
.drawer-card-info {
  padding: 8px 10px;
}
.drawer-card-prompt {
  font-size: 0.72rem;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.drawer-card-prompt.empty {
  color: var(--text-dimmed);
  font-style: italic;
}
.drawer-card-prompt.expired {
  color: var(--text-dimmed);
  font-size: 0.65rem;
}

/* Expired card state */
.drawer-card--expired {
  opacity: 0.6;
}
.drawer-card--expired .drawer-card-thumb {
  cursor: pointer;
}
.drawer-card--expired .drawer-card-fallback {
  opacity: 0.3;
}
.drawer-card-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  z-index: 2;
}
.drawer-card-lock svg {
  width: 100%;
  height: 100%;
}
.drawer-card-actions--expired {
  opacity: 1;
  visibility: visible;
  background: transparent;
  justify-content: flex-end;
  padding: 6px;
}

/* ============================================
   SAVED EDITS TRIGGER BUTTON
   ============================================ */

.saved-edits-trigger[hidden] {
  display: none;
}
.saved-edits-trigger {
  position: relative;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.saved-edits-trigger svg {
  width: 18px;
  height: 18px;
}
.saved-edits-trigger:hover {
  color: var(--primary);
  background: rgba(124, 58, 237, 0.06);
}

/* Pulse animation on save */
.saved-edits-trigger.pulse {
  animation: triggerPulse 0.6s var(--ease-standard);
}
@keyframes triggerPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* "Saved" badge */
.save-badge {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s var(--ease-standard), transform 0.2s var(--ease-standard);
  pointer-events: none;
}
.save-badge.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   DRAWER RESPONSIVE - Mobile
   ============================================ */

@media (max-width: 600px) {
  .saved-edits-drawer {
    width: 100vw;
    border-left: none;
  }

  .drawer-card-actions {
    opacity: 1;
  }

  .drawer-body {
    padding: 12px 12px 40px;
  }

  .drawer-grid {
    gap: 8px;
  }
}

/* SUGGESTION CHIPS */
.suggestion-chip { flex-shrink: 0; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text); font-size: 0.78rem; font-weight: 500; white-space: nowrap; transition: all var(--transition-fast); line-height: 1.2; }
.suggestion-chip:active { transform: scale(0.95); background: var(--glow); border-color: var(--primary); }
.suggestion-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Old onboarding dim/focus + ref prompt card removed — replaced by onboarding.css V2 spotlight engine */

/* ============================================
   REVEAL ANIMATIONS
   Overlay + blur-to-sharp + merge thumbnail
   + result fade-in for edit completion.
   ============================================ */

/* Reveal overlay — an <img> absolutely positioned over #imageWrapper */
.reveal-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 5;
  pointer-events: none;
}

/* Single-photo: blur-to-sharp reveal — the money shot */
.reveal-blur {
  filter: blur(24px) saturate(0.6);
  opacity: 0;
  transform: scale(0.97);
  animation: revealBlurToSharp 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealBlurToSharp {
  0% {
    filter: blur(24px) saturate(0.6);
    opacity: 0;
    transform: scale(0.97);
  }
  30% {
    opacity: 1;
  }
  100% {
    filter: blur(0) saturate(1);
    opacity: 1;
    transform: scale(1);
  }
}

/* Two-photo: merge thumbnails fly to center */
.reveal-merge-thumb {
  position: absolute;
  width: 35%;
  height: auto;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
              0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-merge-thumb.left {
  left: 5%;
  top: 50%;
  transform: translateY(-50%) scale(0.9) rotate(-2deg);
}

.reveal-merge-thumb.right {
  right: 5%;
  top: 50%;
  transform: translateY(-50%) scale(0.9) rotate(2deg);
}

.reveal-merge-thumb.merged {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  opacity: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Result fade-in after merge */
.reveal-result-fade {
  animation: revealResultFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealResultFade {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   FULLSCREEN REVEAL LIGHTBOX
   Shows edited image full-screen after each edit.
   ============================================ */

.fullscreen-reveal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-reveal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  animation: fsRevealBackdropIn 0.3s var(--ease-out) forwards;
}

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

.fullscreen-reveal img {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  animation: fsRevealImageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

@keyframes fsRevealImageIn {
  from {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(12px);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.fullscreen-reveal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.fullscreen-reveal-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.fullscreen-reveal-close:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.35);
}

.fullscreen-reveal-save {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: white;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.15s;
}

.fullscreen-reveal-save.visible {
  display: flex;
  animation: fsRevealSaveIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fsRevealSaveIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

.fullscreen-reveal-save:hover {
  background: rgba(255, 255, 255, 0.28);
}

.fullscreen-reveal-save:active {
  transform: scale(0.9);
}

.fullscreen-reveal-save.saved {
  background: rgba(76, 175, 80, 0.45);
}

.fullscreen-reveal-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  pointer-events: none;
  animation: fsRevealHintIn 0.6s 0.4s var(--ease-out) both;
}

@keyframes fsRevealHintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Large save bar shown after paywall dismissal */
.fullscreen-reveal-save-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: rgba(124, 58, 237, 0.85);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  animation: fsRevealSaveIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fullscreen-reveal-save-bar:hover {
  background: rgba(124, 58, 237, 0.95);
}

.fullscreen-reveal-save-bar:active {
  transform: scale(0.95);
}

.fullscreen-reveal-save-bar svg {
  flex-shrink: 0;
}

/* Exit animation */
.fullscreen-reveal.closing .fullscreen-reveal-backdrop {
  animation: fsRevealBackdropOut 0.25s var(--ease-out) forwards;
}

.fullscreen-reveal.closing img {
  animation: fsRevealImageOut 0.25s var(--ease-out) forwards;
}

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

@keyframes fsRevealImageOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}

/* ============================================
   BEFORE / AFTER TOGGLE
   Segmented pill control over image.
   Clear active state shows which view is selected.
   ============================================ */

.before-after-toggle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(10, 10, 18, 0.55);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  opacity: 0;
  animation: toggleFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ba-seg {
  all: unset;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.ba-seg--active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ba-seg:active {
  opacity: 0.7;
  transition: opacity 0.15s var(--ease-standard);
}

.ba-seg:not(.ba-seg--active):hover {
  color: rgba(255, 255, 255, 0.75);
}

/* Showing original — tint the active "Before" segment */
.before-after-toggle[data-showing="original"] .ba-seg--active {
  background: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 1px 6px rgba(var(--primary-rgb), 0.2);
}

@keyframes toggleFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* --- Drawer Bulk Select --- */

.drawer-select-btn {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  margin-left: auto;
  margin-right: 8px;
}
.drawer-select-btn:hover {
  border-color: var(--primary);
  color: var(--text);
}

/* Drawer card selection checkbox */
.select-mode .drawer-card { cursor: pointer; position: relative; }
.select-mode .drawer-card::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  z-index: 2;
  transition: all 0.15s var(--ease-standard);
}
.select-mode .drawer-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}
.select-mode .drawer-card.selected::before {
  background: var(--primary);
  border-color: var(--primary);
}
.select-mode .drawer-card.selected::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  z-index: 3;
}

/* Drawer floating bulk action bar */
.drawer-bulk-bar {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  z-index: 10;
}

/* ============================================
   PAYMENT ELEMENT (Stripe Custom Checkout)
   Step 2 of the buy sheet — inline card form.
   Matches the V9 buy sheet design language:
   Instrument Serif for prices, violet glow,
   14px radius, ambient violet tint.
   ============================================ */

/* Step 2 container */
.pe-step-2 {
  padding: 12px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Email input for receipt (hidden when logged in) */
.pe-email-row { margin-top: -8px; }
.pe-email-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 0.9rem;
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg); color: var(--text);
  outline: none; transition: border-color 0.15s;
}
.pe-email-input:focus { border-color: #7C3AED; }
.pe-email-input::placeholder { color: var(--text-dimmed); }

/* Order summary card — mirrors selected tier card aesthetic */
.pe-order-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(165deg, rgba(124, 58, 237, 0.06), rgba(124, 58, 237, 0.02));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(124, 58, 237, 0.08),
    0 0 12px rgba(124, 58, 237, 0.06),
    0 4px 16px -4px rgba(124, 58, 237, 0.08);
}
.pe-order-plan {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text, #1a1a2e);
  letter-spacing: 0.01em;
}
.pe-order-detail {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.pe-order-price {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--primary, #7C3AED);
  font-variant-numeric: tabular-nums;
}

/* Express Checkout (Apple Pay / Google Pay) — collapses when unavailable */
#pe-express-checkout {
  min-height: 0;
}
#pe-express-checkout:empty {
  display: none;
}

/* "Or pay with card" divider — matches onetime-divider-v9 style */
.pe-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-dimmed, rgba(26, 26, 46, 0.38));
  font-size: 0.75rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.pe-divider::before,
.pe-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle, rgba(0,0,0,0.05));
}

/* Payment Element container */
#pe-payment-element {
  min-height: 200px;
}

/* Skeleton loader — violet-tinted shimmer to match brand */
.pe-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.pe-loading-bar {
  height: 44px;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(
    90deg,
    rgba(124, 58, 237, 0.04) 25%,
    rgba(124, 58, 237, 0.08) 50%,
    rgba(124, 58, 237, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: pe-shimmer 1.6s var(--ease-in-out, ease-in-out) infinite;
}
.pe-loading-bar:nth-child(2) { width: 75%; }
.pe-loading-bar:nth-child(3) { width: 50%; }
@keyframes pe-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Inline error message — uses site error palette */
.pe-error {
  display: none;
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--error, #F87171);
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: var(--radius-md, 8px);
}

/* Confirm / Pay button — inherits full cta-primary-v9 gradient + glow.
   The .cta-primary-v9 class is applied in HTML; this adds PE-specific overrides. */
.pe-confirm-btn {
  width: 100%;
  min-height: 54px;
}
.pe-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  animation: none;
  box-shadow: none;
}
.pe-confirm-btn:disabled::after {
  animation: none;
}

/* Social proof + trust — unified subtle footer under CTA */
.pe-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.7rem;
  color: var(--text-dimmed);
  letter-spacing: 0.01em;
}
.pe-proof svg {
  stroke: var(--text-dimmed);
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

/* Back to plans link — matches footer-link styling */
.pe-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0 4px;
  background: none;
  border: none;
  color: var(--text-muted, rgba(26, 26, 46, 0.58));
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
  min-height: 44px; /* iOS a11y tap target */
}
.pe-back-btn:hover,
.pe-back-btn:focus-visible {
  color: var(--primary, #7C3AED);
  transform: translateY(-1px);
}
.pe-back-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-standard, ease);
}
.pe-back-btn:hover svg {
  transform: translateX(-2px);
}

/* ---- Mobile overrides ---- */
@media (max-width: 599px) {
  .pe-step-2 {
    padding: 8px 0 12px;
    gap: 16px;
  }

  .pe-order-summary {
    padding: 14px 16px;
  }
  .pe-order-plan { font-size: 0.85rem; }
  .pe-order-price { font-size: 1.3rem; }

  #pe-payment-element {
    /* 16px min font prevents iOS Safari zoom on input focus */
    font-size: 16px;
  }

  .pe-confirm-btn {
    min-height: 50px;
  }
}

/* === app.css === */
/* ============================================
   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(248, 245, 252, 0.85);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-bottom: 1px solid var(--border-subtle);
  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.65rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  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; /* Hidden by default, shown when logged in */
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
}

.header-credits:hover {
  border-color: var(--primary);
  background: var(--glow);
}

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

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

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

/* 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-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 2px;
  transition: color 0.15s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.header-signin:hover {
  color: var(--primary);
}

.header-pricing-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 8px 4px;
  transition: color 0.15s var(--ease-standard);
}

.header-pricing-link:hover {
  color: var(--primary);
}

.header-try-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #7C3AED 0%, #9333EA 50%, #7C3AED 100%);
  background-size: 200% 200%;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
  animation:
    cta-gradient 4s var(--ease-in-out) infinite,
    cta-breathe 3s var(--ease-in-out) infinite;
}

/* Breathing glow aura */
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 2px 16px rgba(124, 58, 237, 0.4), 0 0 32px rgba(124, 58, 237, 0.12); }
}

/* Shifting gradient */
@keyframes cta-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Shimmer sweep on hover */
.header-try-free::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s var(--ease-standard);
  pointer-events: none;
}

.header-try-free:hover::after {
  left: 100%;
}

/* Floating icon */
.header-try-free svg {
  flex-shrink: 0;
  animation: cta-icon-float 2.5s var(--ease-in-out) infinite;
}

@keyframes cta-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.header-try-free:hover {
  transform: translateY(-2px);
  animation: none;
  background: linear-gradient(135deg, #6D28D9, #7C3AED);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5), 0 0 40px rgba(124, 58, 237, 0.15);
}

.header-try-free:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.3);
}

/* 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: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  /* Fast transition for hover, instant for auth state change */
  transition: transform 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard);
  box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

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

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

.user-btn.logged-in {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.user-btn.logged-in:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

.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.95);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid rgba(124, 58, 237, 0.3);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  /* Closing animation: smooth fade out */
  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: rgba(124, 58, 237, 0.03);
  border-bottom: 1px solid var(--border-subtle);
}

.dropdown-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.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: 10px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease-standard);
}

.dropdown-item:hover {
  background: rgba(124, 58, 237, 0.04);
}

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

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

.dropdown-item-primary {
  background: var(--primary);
  color: white;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
}

.dropdown-item-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.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(124, 58, 237, 0.08) 20%,
    rgba(124, 58, 237, 0.15) 50%,
    rgba(124, 58, 237, 0.08) 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(124, 58, 237, 0.04) 40%,
    rgba(124, 58, 237, 0.08) 50%,
    rgba(124, 58, 237, 0.04) 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: 24px;
  border: 1px solid rgba(124, 58, 237, 0.08);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 12px 40px rgba(124, 58, 237, 0.1);
  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: rgba(124, 58, 237, 0.15);
  stroke-width: 8;
}

.loading-ring-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 283; /* 2 * PI * 45 */
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.4s var(--ease-standard);
}

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

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

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

/* Status message */
.loading-message {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  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(--primary);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.2);
  animation: stagePulse 1.5s var(--ease-in-out) infinite;
}

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

@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(124, 58, 237, 0.2);
}

/* ============================================
   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; /* Just below error toast (300) */
  display: none; /* Hidden by default, JS shows when rate limited */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  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-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.rate-limit-title strong {
  font-weight: 700;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

.rate-limit-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.rate-limit-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}

.rate-limit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

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

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

/* 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(124, 58, 237, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(124, 58, 237, 0.08);
}

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

/* ============================================
   ERROR TOAST
   ============================================ */
.error-toast {
  position: fixed;
  top: calc(60px + var(--safe-top));
  left: 16px;
  right: 16px;
  background: var(--error);
  color: white;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.9rem;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.3s var(--ease-standard);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(248, 113, 113, 0.2);
}

.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;
}

/* ============================================
   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: 14px 18px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: white;
  pointer-events: auto;
  animation: toast-enter 0.35s var(--ease-out) forwards;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

.toast--success {
  background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
}

.toast--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.toast--info {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.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: 12px;
  overflow: hidden;
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  position: relative;
  transition: all 0.2s var(--ease-standard);
  background: var(--bg-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  /* Ensure touch tap highlight for mobile feedback */
  -webkit-tap-highlight-color: rgba(124, 58, 237, 0.3);
  /* Prevent text selection on rapid clicks */
  user-select: none;
  -webkit-user-select: none;
}

.history-item.active {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 4px 16px rgba(124, 58, 237, 0.12);
  transform: scale(1.08);
}

.history-item:not(.active):hover {
  border-color: rgba(124, 58, 237, 0.15);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(124, 58, 237, 0.08);
}

/* 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: 4px;
  background: white;
  cursor: ew-resize;
  z-index: 15;
  box-shadow: 0 0 8px rgba(0,0,0,0.3), 0 0 12px rgba(124, 58, 237, 0.2);
  border-left: 1px solid rgba(124, 58, 237, 0.3);
  border-right: 1px solid rgba(124, 58, 237, 0.3);
}

.compare-slider-handle::before,
.compare-slider-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

.compare-slider-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 12px rgba(124, 58, 237, 0.2);
  border: 1.5px solid rgba(124, 58, 237, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
  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(124, 58, 237, 0.15);
}

.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 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%;
}

/* 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(124, 58, 237, 0.1);
  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: #a78bfa;
  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: #a78bfa;
  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 - small pill on mobile */
  .change-photo-btn {
    padding: 6px 10px;
    font-size: 0.7rem;
    border-radius: 10px;
  }

  /* 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 .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(124, 58, 237, 0.4);
  }
}

/* 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: 48px 24px;
  background: linear-gradient(180deg, var(--bg-subtle) 0%, rgba(124, 58, 237, 0.03) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

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

.proof-quote-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  line-height: 0.5;
  color: var(--primary-light);
  opacity: 0.06;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.proof-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
  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(124, 58, 237, 0.12);
  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(124, 58, 237, 0.12);
  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(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.25);
  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: #FAFAF8;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 60px;
}

.pricing-v9::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), 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-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-dimmed);
  margin: 0 0 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

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

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

.pricing-v9-lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 360px;
  line-height: 1.5;
}

/* Homepage Billing Toggle */
.pricing-v9-billing-toggle {
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: white;
  border-radius: 10px;
  padding: 3px;
  display: flex;
  width: fit-content;
  margin: 0 auto 40px;
}

.pricing-v9-billing-option {
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dimmed);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pricing-v9-billing-option--active {
  background: var(--text);
  color: white;
}

.pricing-v9-save-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(52, 211, 153, 0.15);
  color: #059669;
  padding: 2px 6px;
  border-radius: 4px;
}

.pricing-v9-billing-option--active .pricing-v9-save-badge {
  background: rgba(255, 255, 255, 0.2);
  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: white;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

.pricing-v9-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

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

/* Hero Card (Standard) */
.pricing-v9-card--hero {
  padding: 40px 28px;
  border-color: rgba(var(--primary-rgb), 0.15);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  z-index: 2;
}

.pricing-v9-card--hero:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 12px 36px rgba(var(--primary-rgb), 0.1);
}

.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-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.pricing-v9-card--hero .pricing-v9-tier-name {
  font-size: 1.25rem;
}

.pricing-v9-tier-desc {
  font-size: 0.8rem;
  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: #a78bfa;
  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: #a78bfa;
  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(124, 58, 237, 0.04) 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(124, 58, 237, 0.3),
    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;
  }
}

/* ============================================
   EDITOR AD BAR
   Bottom strip for free users in editor (part of grid layout)
   ============================================ */

.editor-ad-bar {
  display: none;
  grid-area: ad;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-bottom));
  text-align: center;
  overflow: hidden;
  min-height: 0;
  /* Mobile: 50px ad + 16px padding */
  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(124, 58, 237, 0.08);
  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;
}

.interstitial-ad-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
  transition: all 0.2s var(--ease-standard);
}

.interstitial-ad-skip.enabled {
  cursor: pointer;
  opacity: 1;
  color: var(--text);
}

.interstitial-ad-skip.enabled:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}

.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: 4px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.interstitial-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-pill);
  transition: width 0.4s var(--ease-standard);
  background-size: 200% 100%;
  animation: interstitial-shimmer 1.5s var(--ease-in-out) infinite;
}

.interstitial-progress-fill.complete {
  background: var(--success);
  animation: interstitial-complete 0.4s var(--ease-out);
}

.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 {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

@keyframes interstitial-complete {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(2.5); }
  100% { transform: scaleY(1); }
}

/* 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(--primary);
  text-decoration: none;
  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(--primary);
  color: var(--text);
}
.dash-filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  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(--primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.25);
  -webkit-tap-highlight-color: transparent;
}

.dash-empty-cta svg {
  flex-shrink: 0;
}

@media (hover: hover) {
  .dash-empty-cta:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.35);
    transform: translateY(-1px);
  }
}

.dash-empty-cta:active {
  transform: scale(0.97);
  background: var(--primary-hover);
}

/* --- 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(--primary);
  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: linear-gradient(135deg, #7C3AED 0%, #6D28D9 50%, #5B21B6 100%);
  border: none;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Shimmer sweep */
.dash-card-new-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s var(--ease-standard);
  pointer-events: 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(-2px);
    box-shadow:
      0 8px 24px rgba(124, 58, 237, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  }
  .dash-card-new:hover .dash-card-new-inner::after {
    transform: translateX(100%);
  }
  .dash-card-new:hover .dash-card-new-inner svg {
    transform: scale(1.1);
  }
}

.dash-card-new:active .dash-card-new-inner {
  transform: translateY(0) scale(0.97);
  box-shadow:
    0 2px 8px rgba(124, 58, 237, 0.25);
}

.dash-card-new.drag-over .dash-card-new-inner {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
  box-shadow:
    0 8px 24px rgba(124, 58, 237, 0.45),
    0 0 0 3px rgba(124, 58, 237, 0.3);
  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); }

/* === pro-mode.css === */
/* ============================================
   PRO MODE - Dark Premium Theme Overrides
   Handles hardcoded colors that don't use CSS vars
   ============================================ */

/* --- Top bar (no image state) --- */
.app.pro-mode:not(.has-image) .top-bar {
  background: rgba(10, 10, 15, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* --- User dropdown --- */
.app.pro-mode .user-dropdown {
  background: #141420;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.app.pro-mode .dropdown-header {
  background: rgba(255, 255, 255, 0.04);
}

.app.pro-mode .dropdown-section {
  background: #141420;
}

.app.pro-mode .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.app.pro-mode .dropdown-credits {
  background: rgba(255, 255, 255, 0.04);
}

/* --- Quality toggle indicator --- */
.app.pro-mode .toggle-indicator {
  background: #1e1e2a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Quality help tooltip --- */
.app.pro-mode .quality-help-tooltip {
  background: #141420;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* --- Empty state / upload card --- */
.app.pro-mode .empty-state {
  background: rgba(124, 58, 237, 0.08) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
}

/* --- Floating buttons on image --- */
.app.pro-mode .clear-marker-btn {
  background: rgba(10, 10, 15, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

.app.pro-mode .clear-marker-btn:hover {
  background: rgba(10, 10, 15, 0.95);
}

.app.pro-mode .change-photo-btn {
  background: rgba(10, 10, 15, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
}

.app.pro-mode .change-photo-btn:hover {
  background: rgba(10, 10, 15, 0.95);
}

/* --- Loading overlay --- */
.app.pro-mode .loading-overlay {
  background: rgba(10, 10, 15, 0.92);
}

.app.pro-mode .loading-card {
  background: #141420;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* --- Credit badge states --- */
.app.pro-mode .credit-badge.critical {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.app.pro-mode .credit-badge.zero {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.app.pro-mode .credit-badge.low {
  color: #fbbf24;
}

.app.pro-mode .credit-badge.has-gift {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10b981;
  color: #34d399;
}

/* --- Conversion save badge --- */
.app.pro-mode .conversion-save-badge {
  background: rgba(20, 20, 32, 0.95);
  color: var(--text);
}


/* --- Ambient glow on image area --- */
.app.pro-mode .image-area {
  position: relative;
}

.app.pro-mode .image-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* --- Post-edit floating buttons (Save, Share, etc.) --- */
.app.pro-mode .post-edit-btn {
  background: rgba(10, 10, 15, 0.85);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.app.pro-mode .post-edit-btn:hover {
  background: rgba(10, 10, 15, 0.95);
}

/* --- Compare slider: keep white for contrast --- */
/* .compare-slider-handle, arrows stay white — they sit on dark images */

/* --- Homepage sections with hardcoded light backgrounds --- */
html.pro-mode-hint .capability--alt {
  background: #111118;
}

/* --- Homepage prompt chips & equation --- */
.app.pro-mode .prompt-chip,
html.pro-mode-hint .prompt-chip {
  background: #1e1e2a;
}

.app.pro-mode .eq-item,
html.pro-mode-hint .eq-item {
  background: #1e1e2a;
}

/* --- Pricing section (visible when scrolling) --- */
.app.pro-mode .pricing-v9,
html.pro-mode-hint .pricing-v9 {
  background: linear-gradient(180deg, #0e0e18 0%, #0a0a0f 100%);
}

.app.pro-mode .pricing-v9-card,
html.pro-mode-hint .pricing-v9-card {
  background: #141420;
}

.app.pro-mode .pricing-v9-card--hero,
html.pro-mode-hint .pricing-v9-card--hero {
  background: linear-gradient(180deg, #1a1a28 0%, #141420 100%);
}

.app.pro-mode .pricing-v9-free,
html.pro-mode-hint .pricing-v9-free {
  background: #1e1e2a;
}

.app.pro-mode .pricing-v9-billing-option--active,
html.pro-mode-hint .pricing-v9-billing-option--active {
  background: #1e1e2a;
}

/* --- Legacy pricing cards --- */
.app.pro-mode .pricing-card,
html.pro-mode-hint .pricing-card {
  background: #141420;
}

.app.pro-mode .pricing-card-popular,
html.pro-mode-hint .pricing-card-popular {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, #141420 100%);
}

/* --- Subscription icon --- */
.app.pro-mode .sub-row-icon,
.app.pro-mode .sub-icon,
html.pro-mode-hint .sub-row-icon,
html.pro-mode-hint .sub-icon {
  background: #1e1e2a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Premium reveal animation (triggers after first purchase) --- */
.pro-mode-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(124, 58, 237, 0.2) 0%,
    rgba(10, 10, 15, 0.65) 55%,
    rgba(10, 10, 15, 0.9) 100%);
  animation: proReveal 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes proReveal {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Slow down all transitions during the reveal for drama */
.app.pro-mode-revealing,
.app.pro-mode-revealing .top-bar,
.app.pro-mode-revealing .edit-card,
.app.pro-mode-revealing .controls,
.app.pro-mode-revealing .image-area,
.app.pro-mode-revealing .empty-state {
  transition: background-color 0.9s ease, color 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease !important;
}

/* --- Smooth transitions (only after initial paint) --- */
.app.pro-mode-ready,
.app.pro-mode-ready .top-bar,
.app.pro-mode-ready .edit-card,
.app.pro-mode-ready .controls,
.app.pro-mode-ready .image-area {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease;
}

/* --- FOUC prevention: dark body before app renders --- */
html.pro-mode-hint body {
  background: #0a0a0f;
}

/* === bento.css === */
/* ============================================
   BENTO — Netflix-style horizontal rows
   ============================================ */

/* ----------------------------------------
   Section Container
   ---------------------------------------- */
.bento-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(124, 58, 237, 0.025) 50%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.bento-inner {
  max-width: 100%;
  margin: 0 auto;
}

.bento-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 24px;
}

.bento-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin: 0 0 12px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bento-eyebrow::before,
.bento-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--primary-light);
  opacity: 0.4;
}

.bento-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}

.bento-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------
   Category Filter Chips (hidden in row mode, kept for compat)
   ---------------------------------------- */
.bento-categories {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-2);
  justify-content: center;
}

.bento-categories::-webkit-scrollbar {
  display: none;
}

.bento-chip {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg);
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.bento-chip:hover {
  border-color: var(--primary);
  color: var(--text);
  background: var(--card-hover);
}

.bento-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.3);
}

.bento-chip__count {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-left: 4px;
}

.bento-chip.active .bento-chip__count {
  opacity: 0.8;
}

/* ----------------------------------------
   Grid container — now holds rows
   ---------------------------------------- */
.bento-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ----------------------------------------
   Netflix-style Row
   ---------------------------------------- */
.bento-row {
  position: relative;
}

.bento-row-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 24px;
  margin-bottom: 16px;
}

.bento-row-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.bento-row-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dimmed);
  padding: 2px 8px;
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
}

/* Horizontal scrolling track */
.bento-row-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 24px 12px;
  /* Edge fade masks */
  mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%);
}

.bento-row-track::-webkit-scrollbar {
  display: none;
}

/* ----------------------------------------
   Task Card (row variant — fixed sizing)
   ---------------------------------------- */
.bento-row-track .task-card {
  flex-shrink: 0;
  width: 240px;
  height: 170px;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--card);
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  opacity: 0;
  transform: translateY(12px);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

/* Override grid sizing classes — all cards are standard in rows */
.bento-row-track .task-card--hero,
.bento-row-track .task-card--featured,
.bento-row-track .task-card--tall {
  grid-column: unset;
  grid-row: unset;
  width: 240px;
  height: 170px;
}

.bento-row-track .task-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--transition-base),
              border-color var(--transition-base);
}

.bento-row-track .task-card.visible:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lg), 0 0 20px rgba(124, 58, 237, 0.08);
  border-color: rgba(var(--primary-rgb), 0.2);
  z-index: 2;
}

/* Images */
.task-card__before,
.task-card__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-card__after {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* Desktop: hover crossfade */
.task-card:hover .task-card__after {
  opacity: 1;
}

/* Mobile: auto-crossfade when card enters viewport */
@media (hover: none) {
  .task-card .task-card__after {
    animation: none;
  }

  .task-card.visible .task-card__after {
    animation: mobileReveal 4s ease-in-out 0.3s infinite alternate;
  }
}

@keyframes mobileReveal {
  0%, 30% { opacity: 0; }
  50%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* Info bar */
.task-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px var(--space-4) var(--space-3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
  color: #fff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.task-card__category {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  font-weight: 500;
}

.task-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hidden cards (filtered out) */
.task-card[hidden] {
  display: none;
}

/* ----------------------------------------
   Task Preview Overlay
   ---------------------------------------- */
.task-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.task-preview-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.task-preview-panel {
  background: var(--card);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 92%;
  max-height: 90vh;
  overflow: auto;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle);
  position: relative;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.task-preview-overlay.active .task-preview-panel {
  transform: scale(1) translateY(0);
}

/* Close button */
.task-preview__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.task-preview__close:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

/* Before/after images */
.task-preview__images {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.task-preview__before,
.task-preview__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-preview__after {
  opacity: 0;
  transition: opacity 2s ease;
}

.task-preview__after.revealed {
  opacity: 1;
}

/* Title */
.task-preview__title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 var(--space-5);
  text-align: center;
}

/* Action buttons */
.task-preview__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.task-preview__cta-primary {
  width: 100%;
  padding: 16px var(--space-6);
  border-radius: var(--radius-md);
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.task-preview__cta-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.35);
  transform: translateY(-1px);
}

.task-preview__cta-primary:active {
  transform: translateY(0);
}

/* Badge */
.task-preview__badge {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-dimmed);
  letter-spacing: 0.01em;
}

/* ----------------------------------------
   Coach Marks
   ---------------------------------------- */
.coach-mark {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3) var(--space-4);
  z-index: 1001;
  max-width: 280px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  animation: coachMarkIn 0.3s ease forwards;
}

.coach-mark--exiting {
  animation: coachMarkOut 0.3s ease forwards;
}

.coach-mark__text {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}

.coach-mark__close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--text-dimmed);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-mark__close:hover {
  color: var(--text);
}

.coach-mark[data-arrow="bottom"]::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}

.coach-mark[data-arrow="top"]::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}

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

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

/* ----------------------------------------
   Skeleton Loaders
   ---------------------------------------- */
.task-card--skeleton {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  opacity: 1;
  transform: none;
}

.task-card--skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bg-secondary) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ----------------------------------------
   Load More Button
   ---------------------------------------- */
.bento-load-more {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: var(--space-8) auto 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.bento-load-more:hover {
  border-color: var(--primary);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.bento-load-more[hidden] {
  display: none;
}

/* ----------------------------------------
   Responsive Design
   ---------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .bento-section {
    padding: 60px 0;
  }

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

  .bento-row-track .task-card,
  .bento-row-track .task-card--hero,
  .bento-row-track .task-card--featured,
  .bento-row-track .task-card--tall {
    width: 220px;
    height: 155px;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .bento-section {
    padding: 48px 0;
  }

  .bento-header {
    padding: 0 var(--space-4);
  }

  .bento-title {
    font-size: 1.5rem;
  }

  .bento-subtitle {
    font-size: 0.95rem;
  }

  .bento-grid {
    gap: 28px;
  }

  .bento-row-header {
    padding: 0 var(--space-4);
  }

  .bento-row-track {
    gap: 10px;
    padding: 4px var(--space-4) 12px;
    mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 16px, black calc(100% - 16px), transparent 100%);
  }

  .bento-row-track .task-card,
  .bento-row-track .task-card--hero,
  .bento-row-track .task-card--featured,
  .bento-row-track .task-card--tall {
    width: 180px;
    height: 130px;
  }

  .bento-row-title {
    font-size: 1.15rem;
  }

  /* Mobile: hide category on cards (row title says it) */
  .bento-row-track .task-card__category {
    display: none;
  }

  /* Mobile: Preview as bottom sheet */
  .task-preview-overlay {
    align-items: flex-end;
  }

  .task-preview-panel {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: none;
    width: 100%;
    max-height: 85vh;
    padding: 24px 20px calc(20px + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .task-preview-overlay.active .task-preview-panel {
    transform: translateY(0);
  }

  /* Bottom sheet drag handle */
  .task-preview-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
}

/* Large desktop — wider cards */
@media (min-width: 1200px) {
  .bento-row-header {
    padding: 0 48px;
  }

  .bento-row-track {
    padding: 4px 48px 12px;
    gap: 16px;
    mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 48px, black calc(100% - 48px), transparent 100%);
  }

  .bento-row-track .task-card,
  .bento-row-track .task-card--hero,
  .bento-row-track .task-card--featured,
  .bento-row-track .task-card--tall {
    width: 280px;
    height: 195px;
  }
}

/* === onboarding.css === */
/* ============================================
   ONBOARDING V2 — Progressive Annotated Walkthrough
   Premium camera-app aesthetic: VSCO / Halide / Lightroom first-run feel
   Scrim + spotlight cutout + handwritten annotations
   Tap anywhere to advance.
   ============================================ */

/* ─── Competing UI suppression ──────────────────────────────────
   Force-hide distracting elements during onboarding.
   Uses body class for CSS specificity, !important to override JS. */
body.onboarding-active .rate-limit-banner,
body.onboarding-active #rateLimitBanner,
body.onboarding-active .free-edit-timer,
body.onboarding-active .editor-timer-banner,
body.onboarding-active .weekly-free-banner,
body.onboarding-active .ad-banner-bottom,
body.onboarding-active .bottom-banner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── Full-screen click blocker ─────────────────────────────────
   Prevents all interaction with underlying UI during onboarding.
   Sits below the highlight but above all app UI. */
.onboarding-blocker {
  position: fixed;
  inset: 0;
  z-index: 9989;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Highlight / Scrim ────────────────────────────────────────
   Deep cinematic scrim — app UI nearly vanishes.
   Only the spotlight cutout remains visible. */
.onboarding-highlight {
  position: fixed;
  z-index: 9990;
  pointer-events: none;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.84),
    0 0 40px 8px rgba(124, 58, 237, 0.25),
    inset 0 0 20px 4px rgba(124, 58, 237, 0.08);
  transition:
    top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: onb-highlight-enter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes onb-highlight-enter {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulsing violet glow ring around spotlight */
.onboarding-highlight::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2.5px solid rgba(124, 58, 237, 0.6);
  box-shadow:
    0 0 16px 4px rgba(124, 58, 237, 0.3),
    inset 0 0 16px 4px rgba(124, 58, 237, 0.1);
  animation: onb-ring-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes onb-ring-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
    box-shadow:
      0 0 16px 4px rgba(124, 58, 237, 0.2),
      inset 0 0 16px 4px rgba(124, 58, 237, 0.05);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
    box-shadow:
      0 0 24px 8px rgba(124, 58, 237, 0.4),
      inset 0 0 20px 6px rgba(124, 58, 237, 0.15);
  }
}

/* Dark mode: even deeper scrim */
.pro-mode .onboarding-highlight {
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.92),
    0 0 50px 12px rgba(124, 58, 237, 0.3),
    inset 0 0 24px 6px rgba(124, 58, 237, 0.1);
}

/* ─── Annotation container ─────────────────────────────────────
   Spring-physics entrance: overshoots then settles. */
.onboarding-annotation {
  position: fixed;
  z-index: 9992;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: onb-annotation-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes onb-annotation-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.85);
  }
  60% {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Handwritten annotation text ──────────────────────────────
   Bold, warm, impossible to miss. Violet-tinged glassmorphism. */
.onboarding-text {
  font-family: 'Caveat', cursive;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  transform: rotate(-1.5deg);
  white-space: nowrap;
  max-width: 340px;
  text-align: center;
  background: rgba(20, 10, 40, 0.75);
  padding: 10px 24px;
  border-radius: 24px;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(124, 58, 237, 0.3);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(124, 58, 237, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 8px rgba(124, 58, 237, 0.4);
  letter-spacing: 0.01em;
}

/* ─── "Tap to continue" hint ───────────────────────────────────
   Gentle bounce — alive, not just fading. */
.onboarding-tap-hint {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  animation: onb-hint-bounce 2.4s ease-in-out infinite;
  animation-delay: 1.2s;
  opacity: 0;
}

@keyframes onb-hint-bounce {
  0% { opacity: 0.65; transform: translateY(0); }
  15% { opacity: 0.9; transform: translateY(-4px); }
  30% { opacity: 0.65; transform: translateY(0); }
  45% { opacity: 0.9; transform: translateY(-3px); }
  60%, 100% { opacity: 0.65; transform: translateY(0); }
}

/* ─── SVG arrow ────────────────────────────────────────────────
   Thick, glowing, undeniable. */
.onboarding-arrow {
  position: absolute;
  z-index: 9991;
  pointer-events: none;
  overflow: visible;
}

.onboarding-arrow path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 6px rgba(124, 58, 237, 0.5))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Draw-in animation — smooth reveal */
.onboarding-arrow path.onb-draw-in {
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: onb-draw 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

@keyframes onb-draw {
  to { stroke-dashoffset: 0; }
}

/* Arrowhead — pops in with scale after line draws */
.onboarding-arrow polygon {
  fill: #fff;
  opacity: 0;
  transform-origin: center;
  filter:
    drop-shadow(0 0 6px rgba(124, 58, 237, 0.5))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  animation: onb-arrowhead-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}

@keyframes onb-arrowhead-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ─── Skip button ──────────────────────────────────────────────
   Subtle glassmorphic pill — present but not competing. */
.onboarding-skip {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9995;
  padding: 8px 20px;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  animation: onb-annotation-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  -webkit-tap-highlight-color: transparent;
}

.onboarding-skip:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.2);
}

.onboarding-skip:active {
  transform: scale(0.94);
}

/* ─── Step counter ─────────────────────────────────────────────
   Understated — information, not decoration. */
.onboarding-counter {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9995;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: onb-annotation-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  letter-spacing: 0.05em;
}

/* ─── Responsive (mobile) ──────────────────────────────────────
   Mobile is the primary viewport — keep text bold and readable. */
@media (max-width: 768px) {
  .onboarding-text {
    font-size: 1.65rem;
    max-width: 280px;
    padding: 8px 20px;
  }
  .onboarding-tap-hint {
    font-size: 0.95rem;
  }
  .onboarding-skip {
    top: 10px;
    right: 10px;
    padding: 6px 16px;
    font-size: 1rem;
  }
  .onboarding-counter {
    top: 12px;
    font-size: 1rem;
  }
}

/* ─── Large screens ────────────────────────────────────────────
   Scale up for desktop — annotation should still command attention. */
@media (min-width: 1024px) {
  .onboarding-text {
    font-size: 2.1rem;
    max-width: 400px;
    padding: 12px 28px;
  }
  .onboarding-tap-hint {
    font-size: 1.15rem;
  }
}