@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&family=Raleway:wght@400;500;600;700;800;900&family=Nunito:wght@400;500;600;700;800;900&family=Work+Sans:wght@400;500;600;700;800;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;500;600;700&family=Anton&family=Archivo+Black&family=Titan+One&family=Paytone+One&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Merriweather:wght@400;700;900&family=Lora:wght@400;500;600;700&family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Righteous&family=Comfortaa:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Pacifico&family=Luckiest+Guy&family=Bungee&family=Chewy&family=Modak&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Monoton&family=Bungee+Shade&family=Faster+One&family=Lobster&family=Abril+Fatface&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&family=Satisfy&family=Yellowtail&family=Permanent+Marker&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rubik+Glitch&family=Silkscreen:wght@400;700&family=Press+Start+2P&family=Bungee+Hairline&family=Codystar:wght@300;400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Heebo:wght@400;500;600;700;800;900&family=Assistant:wght@400;500;600;700;800&family=Alef:wght@400;700&family=Varela+Round&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600;700;800;900&family=Secular+One&family=Miriam+Libre:wght@400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Assistant:wght@200;300;400;500;600;700;800&family=Heebo:wght@300;400;500;600;700;800;900&family=Rubik:wght@300;400;500;600;700&family=Secular+One&display=swap);
@import url(https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css);
/**
 * Studio Editor Styles
 * Self-contained styles for the studio editor
 * No dependencies on shared CSS files
 */

/* Main studio layout */
#studio-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #f5f7fa;
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* Main content area */
.studio-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Canvas area */
.studio-canvas-area {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f3f8;
  position: relative;
  overflow: hidden;
}

/* Overlay for messages and loading */
.studio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  font-weight: 500;
  font-size: 18px;
}

/* Zoom controls layout */
.zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Hide zoom controls in preview mode */
#studio-container.preview-mode .zoom-controls,
.preview-mode .zoom-controls {
  display: none !important;
}

.zoom-button {
  background-color: transparent;
  border: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  color: #555;
  transition: background-color 0.2s ease;
}

.zoom-button:hover {
  background-color: #f0f0f0;
}

.zoom-text,
.zoom-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  user-select: none;
  padding: 0 4px;
  text-align: center;
}

/* For image placeholder and upload progress */
.image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 14px;
}

.image-placeholder.loading {
  background-color: rgba(0, 0, 0, 0.05);
}

.image-placeholder .upload-progress {
  margin-top: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #0066cc;
}

.image-placeholder.error .upload-progress {
  color: #cc0000;
}

.image-placeholder .error-message {
  margin-top: 5px;
  color: #cc0000;
  font-size: 12px;
  text-align: center;
  max-width: 90%;
}

/* Upload Status Indicators */
.upload-status {
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.4;
  min-height: 20px;
}

.upload-status.uploading {
  color: #0066cc;
  font-weight: bold;
}

.upload-status.error {
  color: #cc0000;
  font-weight: bold;
}

.upload-status.success {
  color: #008800;
  font-weight: bold;
}

/* Campaign Selector Styles */
.template-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.template-label {
  margin-right: 4px;
  font-weight: 500;
}

.template-select {
  min-width: 200px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* Notification System - Authentic iOS Style */
.studio-notification {
  position: absolute;
  top: 74px; /* 2px lower for maximum iOS authenticity - feels "presented" */
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px; /* Peak iOS density - shaved 1px top + bottom */
  border-radius: 16px; /* Soft rectangle, not pill */
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.06), /* Wider, softer, lower contrast - floating in air */
    0 4px 12px rgba(0, 0, 0, 0.03); /* Less defined, not hovering above surface */
  z-index: 10001;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 400; /* Lighter weight, not medium */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
  min-width: 240px;
  max-width: calc(100% - 24px);
  width: auto;
  text-align: left;
  animation: ios-notification-enter 0.45s cubic-bezier(0.16, 1, 0.3, 1); /* Gentler, less noticeable */
  backdrop-filter: saturate(180%) blur(40px);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  border: 0.5px solid rgba(255, 255, 255, 0.12); /* One notch softer - light catching edge, not outline */
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  height: auto;
  min-height: 36px; /* Peak iOS density */
  max-height: 40px;
}

/* iOS translucent glass material - green-tinted frosted glass with warmth */
.studio-notification::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.65); /* Translucent base (default) */
  backdrop-filter: saturate(180%) blur(40px);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  z-index: -1;
  border-radius: inherit;
}

.studio-notification i {
  font-size: 13px; /* 10-15% smaller (from 15px) - text is the message */
  opacity: 0.6; /* Even lower contrast - icon disappears first when squinting */
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.studio-notification span {
  flex: 1;
  line-height: 1.4; /* Slightly more breathing room */
  word-wrap: break-word;
  overflow-wrap: break-word;
  letter-spacing: 0.01em; /* Slightly increased letter spacing for calm feel */
}

/* Authentic iOS color schemes - glassy and translucent */
.studio-notification.success {
  color: rgba(28, 28, 30, 0.85); /* Softer dark gray, not black */
}

.studio-notification.success::before {
  /* Green warmth boost: whisper of green tint for success intent */
  /* Using a warmer green-tinted white (245, 255, 248) - adds hue warmth, not saturation */
  /* This makes it feel like frosted glass with success intent, not white glass */
  /* Should never feel like a "disabled" state - always reads as success */
  background: 
    rgba(52, 199, 89, 0.62), /* Green overlay - success intent */
    rgba(245, 255, 248, 0.65); /* More green-warmed white base - whisper of green tint for warmth */
}

.studio-notification.success i {
  color: rgba(52, 199, 89, 0.6); /* Final hierarchy - icon is last thing eye notices, lower contrast than text */
}

.studio-notification.error {
  color: rgba(28, 28, 30, 0.85);
}

.studio-notification.error::before {
  background: rgba(255, 59, 48, 0.55); /* More translucent */
}

.studio-notification.error i {
  color: rgba(255, 59, 48, 0.75);
}

.studio-notification.info {
  color: rgba(28, 28, 30, 0.85);
}

.studio-notification.info::before {
  background: rgba(0, 122, 255, 0.55); /* More translucent */
}

.studio-notification.info i {
  color: rgba(0, 122, 255, 0.75);
}

.studio-notification.warning {
  color: rgba(28, 28, 30, 0.85);
}

.studio-notification.warning::before {
  background: rgba(255, 149, 0, 0.55); /* More translucent */
}

.studio-notification.warning i {
  color: rgba(255, 149, 0, 0.75);
}

/* Gentle, barely noticeable iOS animation */
@keyframes ios-notification-enter {
  from {
    transform: translateX(-50%) translateY(-40px); /* Smaller slide distance */
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.studio-notification.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-30px); /* Fade out with slight upward drift, no scale */
}

/* When notification is on body (fallback for desktop view) */
body > .studio-notification {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px); /* Wider: 12px margin on each side */
}

body > .studio-notification.fade-out {
  transform: translateX(-50%) translateY(-30px); /* Fade out with slight upward drift */
}

/* Container for notifications on the phone frame */
.phone-notification-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000; /* Above everything inside the frame except maybe overlay */
}

/* Loading indicator */
.studio-loading {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

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

/* Toolbar button styles */
.action-button {
  background-color: #f0f3f8;
  border: 1px solid #cfd8e6;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #444;
  transition: all 0.2s ease;
}

.action-button:hover {
  background-color: #e1e8f0;
  border-color: #b5c3d8;
}

.action-button.primary {
  background-color: #1976d2;
  border-color: #1565c0;
  color: white;
}

.action-button.primary:hover {
  background-color: #1565c0;
  border-color: #0d47a1;
}

.action-button.danger {
  background-color: #f44336;
  border-color: #d32f2f;
  color: white;
}

.action-button.danger:hover {
  background-color: #d32f2f;
  border-color: #b71c1c;
}

.action-button.disabled,
.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Contextual toolbar */
.contextual-toolbar {
  position: absolute;
  display: flex;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 4px;
  z-index: 100;
  gap: 4px;
}

.contextual-toolbar-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
}

.contextual-toolbar-button:hover {
  background-color: #f0f0f0;
}

.contextual-toolbar-button.active {
  background-color: #e0e0e0;
  color: #1976d2;
}

/* Layer navigation */
.layer-navigation {
  padding: 8px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 240px;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}

.layer-item {
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.layer-item:hover {
  background-color: #f0f3f8;
}

.layer-item.selected {
  background-color: #e1e8f0;
}

.layer-item-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/**
 * Studio Base CSS - Design System Foundation
 * 
 * This file establishes the design system for the Studio editor:
 * - Design tokens (colors, spacing, typography, shadows)
 * - Base reset and global styles
 * - Layout primitives (container, content area, panels)
 * - Resizer handles
 * - Modal and notification systems
 * - Scrollbar styling
 * - Icon animations
 * 
 * Aesthetic: 2025 Modern SaaS (Linear, Vercel, Raycast, Figma)
 * Layout: "Bento Box" floating island architecture
 */

/* Import Google Fonts - Using modern variable fonts */
/* English Fonts - Modern Sans, Bold Display, Classic Serif, Creative Display */

/* Hebrew Fonts - Modern Sans, Bold Display, Traditional */

/* Plus Jakarta Sans and Geist for Studio UI */

/* ============================================
   DESIGN TOKENS
   Central place for all design variables
   ============================================ */

:root {
    /* === COLORS === */
    /* Primary - Electric Blue (Vercel-inspired) */
    --studio-primary: #0066FF;
    --studio-primary-hover: #0052CC;
    --studio-primary-light: rgba(0, 102, 255, 0.08);
    --studio-primary-lighter: rgba(0, 102, 255, 0.04);
    
    /* Backgrounds - Layered depth */
    --studio-bg-base: #FAFAFA;
    --studio-bg-main: #F5F5F5;
    --studio-bg-panel: #FFFFFF;
    --studio-bg-canvas: #E8E8E8;
    --studio-bg-elevated: #FFFFFF;
    --studio-bg-hover: rgba(0, 0, 0, 0.03);
    --studio-bg-active: rgba(0, 0, 0, 0.06);
    
    /* Borders - Subtle, almost invisible */
    --studio-border: rgba(0, 0, 0, 0.06);
    --studio-border-subtle: rgba(0, 0, 0, 0.04);
    --studio-border-hover: rgba(0, 0, 0, 0.12);
    --studio-border-focus: rgba(0, 102, 255, 0.4);
    
    /* Text - High contrast hierarchy */
    --studio-text-main: #0A0A0A;
    --studio-text-secondary: #525252;
    --studio-text-muted: #737373;
    --studio-text-light: #A3A3A3;
    --studio-text-disabled: #D4D4D4;
    
    /* Semantic Colors */
    --studio-danger: #E5484D;
    --studio-danger-light: rgba(229, 72, 77, 0.1);
    --studio-success: #30A46C;
    --studio-success-light: rgba(48, 164, 108, 0.1);
    --studio-warning: #F5A623;
    --studio-warning-light: rgba(245, 166, 35, 0.1);
    --studio-info: #0090FF;
    --studio-info-light: rgba(0, 144, 255, 0.1);
    
    /* === SPACING === (8px base grid) */
    --studio-spacing-1: 4px;
    --studio-spacing-2: 8px;
    --studio-spacing-3: 12px;
    --studio-spacing-4: 16px;
    --studio-spacing-5: 20px;
    --studio-spacing-6: 24px;
    --studio-spacing-8: 32px;
    --studio-spacing-10: 40px;
    
    /* === SHADOWS === (Soft elevation system) */
    --studio-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --studio-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --studio-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02);
    --studio-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.02);
    --studio-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.04);
    
    /* Focus ring */
    --studio-focus-ring: 0 0 0 2px var(--studio-bg-panel), 0 0 0 4px var(--studio-primary);
    
    /* === TYPOGRAPHY === */
    --studio-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --studio-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    --studio-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    
    /* Font sizes */
    --studio-text-xs: 11px;
    --studio-text-sm: 12px;
    --studio-text-base: 13px;
    --studio-text-md: 14px;
    --studio-text-lg: 16px;
    --studio-text-xl: 18px;
    --studio-text-2xl: 20px;
    
    /* Font weights */
    --studio-font-normal: 400;
    --studio-font-medium: 500;
    --studio-font-semibold: 600;
    --studio-font-bold: 700;
    
    /* Line heights */
    --studio-leading-tight: 1.2;
    --studio-leading-normal: 1.5;
    --studio-leading-relaxed: 1.6;
    
    /* === RADII === (Consistent corner system) */
    --studio-radius-sm: 4px;
    --studio-radius-md: 6px;
    --studio-radius-lg: 8px;
    --studio-radius-xl: 12px;
    --studio-radius-2xl: 16px;
    --studio-radius-full: 9999px;
    
    /* === TRANSITIONS === */
    --studio-transition-fast: 100ms ease;
    --studio-transition-base: 150ms ease;
    --studio-transition-slow: 250ms ease;
    --studio-transition-smooth: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --studio-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === LAYOUT === */
    --studio-toolbar-height: 52px;
    --studio-sidebar-width: 320px;
    --studio-properties-width: 420px;
    --studio-floating-dock-height: 44px;
    --studio-resizer-width: 4px;
    
    /* === Z-INDEX SCALE === */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 9000;
    --z-modal: 9100;
    --z-popover: 9200;
    --z-toast: 9300;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Selection styling */
::selection {
    background-color: var(--studio-primary-light);
    color: var(--studio-text-main);
}

/* Remove global html, body constraints that break admin panel scrolling */
#studio-container {
    font-family: var(--studio-font-sans);
    font-size: var(--studio-text-base);
    line-height: var(--studio-leading-normal);
    color: var(--studio-text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--studio-primary);
    outline-offset: 2px;
}

/* Remove focus outline on mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   STUDIO CONTAINER - Bento Box Layout
   Three floating islands: Left, Center, Right
   ============================================ */

#studio-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background-color: var(--studio-bg-canvas);
    /* Bento spacing around edges */
    --bento-gap: 16px;
    --bento-radius: 16px;
}

/* ============================================
   MAIN CONTENT AREA - Bento Grid
   ============================================ */

.studio-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
    background-color: var(--studio-bg-canvas);
    /* Floating Bento layout - detached from all edges */
    padding: 16px;
    gap: 16px;
}

/* ============================================
   SIDEBAR & PROPERTIES PANEL - Floating Cards
   ============================================ */

.studio-sidebar,
.studio-properties-panel {
    position: relative;
    background-color: var(--studio-bg-panel);
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill parent height */
    min-height: 0; /* Allow shrinking below content size */
    z-index: var(--z-sticky);
    /* Only transition box-shadow for hover effects */
    /* Width/layout changes are instant - visual animation handled by WebGL CrumbleEffect */
    transition: box-shadow var(--studio-transition-base);
    /* Allow resizer handles to extend outside */
    overflow: visible;
    flex-shrink: 0;
    /* Bento floating card style */
    border-radius: var(--bento-radius);
    box-shadow: var(--studio-shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.studio-sidebar {
    width: var(--studio-sidebar-width);
    min-width: 200px;
    max-width: 500px;
    /* Border removed - using bento shadow */
}

.studio-properties-panel {
    width: var(--studio-properties-width);
    min-width: 340px;
    max-width: 600px;
    /* Border removed - using bento shadow */
}

/* Subtle shadows on hover for depth */
.studio-sidebar:hover,
.studio-properties-panel:hover {
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Disable transitions during manual resize to prevent lag/jank */
body.is-resizing-sidebar .studio-sidebar,
body.is-resizing-properties .studio-properties-panel {
    transition: none !important;
}

/* ============================================
   RESIZERS
   ============================================ */

.studio-sidebar-resizer,
.studio-properties-panel-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    cursor: col-resize;
    z-index: 500;
    transition: background-color var(--studio-transition-base);
    /* Ensure it's above other elements */
    background: transparent;
}

.studio-sidebar-resizer {
    right: -6px;
}

.studio-properties-panel-resizer {
    left: -6px;
}

.studio-sidebar-resizer::before,
.studio-properties-panel-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 32px;
    background-color: var(--studio-border);
    border-radius: var(--studio-radius-full);
    opacity: 0;
    transition: opacity var(--studio-transition-base);
}

.studio-sidebar-resizer:hover::before,
.studio-properties-panel-resizer:hover::before,
body.is-resizing-sidebar .studio-sidebar-resizer::before,
body.is-resizing-properties .studio-properties-panel-resizer::before {
    opacity: 1;
    background-color: var(--studio-primary);
}

/* Utility classes for dragging */
body.is-resizing-sidebar,
body.is-resizing-properties {
    cursor: col-resize !important;
    user-select: none;
}

body.is-resizing-sidebar *,
body.is-resizing-properties * {
    pointer-events: none !important;
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

.studio-mobile-nav {
    display: none;
    grid-area: mobile-nav;
    background-color: var(--studio-bg-panel);
    border-top: 1px solid var(--studio-border);
    padding: var(--studio-spacing-2) var(--studio-spacing-4);
    justify-content: space-around;
    z-index: var(--z-fixed);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--studio-text-muted);
    font-size: var(--studio-text-xs);
    font-weight: var(--studio-font-medium);
    padding: var(--studio-spacing-2);
    cursor: pointer;
    border-radius: var(--studio-radius-lg);
    transition: var(--studio-transition);
}

.mobile-nav-btn i {
    font-size: 20px;
}

.mobile-nav-btn:active {
    color: var(--studio-primary);
    background-color: var(--studio-primary-light);
    transform: scale(0.95);
}

/* ============================================
   RESPONSIVE BREAKPOINTS & PANEL COLLAPSE
   ============================================ */

/* Breakpoint thresholds */
:root {
    --breakpoint-collapse-properties: 1100px; /* Collapse properties panel below this */
    --breakpoint-collapse-sidebar: 800px;     /* Collapse sidebar below this */
    --breakpoint-mobile: 768px;               /* Switch to mobile layout */
    --panel-collapsed-width: 48px;            /* Width of collapsed panel strip */
}

/* ============================================
   COLLAPSED PANEL STATES
   ============================================ */

/* Collapsed sidebar state */
.studio-sidebar.collapsed {
    width: var(--panel-collapsed-width) !important;
    min-width: var(--panel-collapsed-width) !important;
    overflow: hidden;
}

.studio-sidebar.collapsed .sidebar-section,
.studio-sidebar.collapsed .sidebar-tabs,
.studio-sidebar.collapsed .asset-gallery-section {
    display: none !important;
}

.studio-sidebar.collapsed .sidebar-collapse-content {
    display: none;
}

/* Collapsed properties panel state */
.studio-properties-panel.collapsed {
    width: var(--panel-collapsed-width) !important;
    min-width: var(--panel-collapsed-width) !important;
    overflow: hidden;
}

.studio-properties-panel.collapsed .studio-properties-content,
.studio-properties-panel.collapsed .properties-header {
    display: none !important;
}

.studio-properties-panel.collapsed .panel-collapse-content {
    display: none;
}

/* ============================================
   COLLAPSE TOGGLE BUTTONS
   ============================================ */

.panel-collapse-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 48px;
    background: var(--studio-bg-panel);
    border: 1px solid var(--studio-border);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.15s ease;
    color: var(--studio-text-muted);
    opacity: 0;
    pointer-events: none;
}

.panel-collapse-toggle:hover {
    background: var(--studio-bg-hover);
    color: var(--studio-text-main);
}

.panel-collapse-toggle i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* Sidebar collapse toggle - on right edge */
.studio-sidebar .panel-collapse-toggle {
    right: -20px;
    border-left: none;
}

.studio-sidebar.collapsed .panel-collapse-toggle {
    right: -20px;
}

.studio-sidebar.collapsed .panel-collapse-toggle i {
    transform: rotate(180deg);
}

/* Properties panel collapse toggle - on left edge */
.studio-properties-panel .panel-collapse-toggle {
    left: -20px;
    border-radius: 8px 0 0 8px;
    border-right: none;
}

.studio-properties-panel.collapsed .panel-collapse-toggle {
    left: -20px;
}

.studio-properties-panel.collapsed .panel-collapse-toggle i {
    transform: rotate(180deg);
}

/* Show collapse toggles on narrow screens or hover */
@media (max-width: 1300px) {
    .panel-collapse-toggle {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Always show when panel is collapsed */
.studio-sidebar.collapsed .panel-collapse-toggle,
.studio-properties-panel.collapsed .panel-collapse-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* Collapsed strip content (icon placeholder) - ONLY visible when .collapsed class is set */
.panel-collapsed-strip {
    display: none !important;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    width: 100%;
    height: 100%;
}

/* Only show strip when explicitly collapsed via .collapsed class */
.studio-sidebar.collapsed .panel-collapsed-strip,
.studio-properties-panel.collapsed .panel-collapsed-strip {
    display: flex !important;
}

.panel-collapsed-strip i {
    font-size: 18px;
    color: var(--studio-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--studio-radius-md);
    transition: all 0.15s ease;
}

.panel-collapsed-strip i:hover {
    background: var(--studio-bg-hover);
    color: var(--studio-primary);
}

/* ============================================
   NARROW VIEWPORT HANDLING
   At very narrow widths, reduce panel sizes but don't auto-collapse
   Manual collapse via toggle buttons is the primary mechanism
   ============================================ */

/* Below 900px: Reduce panel widths to give more canvas space */
@media (max-width: 900px) {
    .studio-sidebar:not(.collapsed) {
        width: 260px;
        min-width: 200px;
    }
    
    .studio-properties-panel:not(.collapsed) {
        width: 320px;
        min-width: 280px;
    }
}

/* ============================================
   ENSURE CANVAS MINIMUM WIDTH
   ============================================ */

/* Ensure canvas container always has minimum usable width */
.studio-canvas-container {
    min-width: 300px;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    #studio-container {
        grid-template-rows: var(--studio-toolbar-height) 1fr auto;
        grid-template-areas: 
            "toolbar"
            "content"
            "mobile-nav";
    }

    .studio-mobile-nav {
        display: flex;
    }

    .studio-sidebar,
    .studio-properties-panel {
        position: fixed;
        bottom: 60px;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 50vh;
        background-color: var(--studio-bg-panel);
        border-radius: var(--studio-radius-2xl) var(--studio-radius-2xl) 0 0;
        box-shadow: var(--studio-shadow-xl);
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex !important;
        z-index: var(--z-modal);
        border: none;
    }

    .studio-sidebar.mobile-visible,
    .studio-properties-panel.mobile-visible {
        transform: translateY(0);
    }
    
    .studio-sidebar-resizer,
    .studio-properties-panel-resizer,
    .panel-collapse-toggle {
        display: none;
    }
    
    /* Hide collapsed strip on mobile - use mobile nav instead */
    .panel-collapsed-strip {
        display: none !important;
    }
}

/* ============================================
   MODAL SYSTEM
   ============================================ */

.studio-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--studio-transition-slow), visibility 0s linear 0.25s;
}

.studio-modal.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--studio-transition-slow);
}

.studio-modal-content {
    background-color: var(--studio-bg-panel);
    border-radius: var(--studio-radius-xl);
    box-shadow: var(--studio-shadow-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: translateY(16px) scale(0.98);
    transition: transform var(--studio-transition-slow);
}

.studio-modal.visible .studio-modal-content {
    transform: translateY(0) scale(1);
}

/* ============================================
   AI GENERATION LOADER - Fun & Cool Animation
   Morphing shapes with sparkle effects
   ============================================ */

.ai-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 40px;
}

.ai-loader-orb {
    position: relative;
    width: 100px;
    height: 100px;
}

/* Main morphing blob */
.ai-loader-blob {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #f5576c 75%,
        #667eea 100%
    );
    background-size: 400% 400%;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: 
        ai-blob-morph 8s ease-in-out infinite,
        ai-blob-gradient 3s ease infinite,
        ai-blob-pulse 2s ease-in-out infinite;
    filter: blur(0.5px);
    box-shadow: 
        0 0 60px rgba(102, 126, 234, 0.5),
        0 0 100px rgba(118, 75, 162, 0.3),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Inner glow core */
.ai-loader-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    animation: ai-core-pulse 1.5s ease-in-out infinite;
}

/* Orbiting particles */
.ai-loader-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(102, 126, 234, 0.6);
}

.ai-loader-particle:nth-child(2) {
    animation: ai-orbit 3s linear infinite;
}

.ai-loader-particle:nth-child(3) {
    animation: ai-orbit 3s linear infinite reverse;
    animation-delay: -1.5s;
}

.ai-loader-particle:nth-child(4) {
    width: 6px;
    height: 6px;
    animation: ai-orbit-fast 2s linear infinite;
}

/* Sparkle effects */
.ai-loader-sparkles {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}

.ai-loader-sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: ai-sparkle 2s ease-in-out infinite;
}

.ai-loader-sparkle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.ai-loader-sparkle:nth-child(2) { top: 20%; right: 15%; animation-delay: 0.3s; }
.ai-loader-sparkle:nth-child(3) { bottom: 25%; left: 10%; animation-delay: 0.6s; }
.ai-loader-sparkle:nth-child(4) { bottom: 15%; right: 20%; animation-delay: 0.9s; }
.ai-loader-sparkle:nth-child(5) { top: 50%; left: 5%; animation-delay: 1.2s; }
.ai-loader-sparkle:nth-child(6) { top: 40%; right: 5%; animation-delay: 1.5s; }

/* Status text with typewriter effect */
.ai-loader-text {
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-loader-text::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #667eea;
    border-radius: 50%;
    animation: ai-dots 1.4s ease-in-out infinite;
}

.ai-loader-subtext {
    font-size: 12px;
    color: #94a3b8;
    margin-top: -16px;
}

/* Animations */
@keyframes ai-blob-morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    50% { border-radius: 50% 60% 30% 60% / 30% 70% 60% 50%; }
    75% { border-radius: 40% 30% 60% 50% / 70% 40% 50% 60%; }
}

@keyframes ai-blob-gradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes ai-blob-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes ai-core-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

@keyframes ai-orbit {
    from { transform: rotate(0deg) translateX(55px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(55px) rotate(-360deg); }
}

@keyframes ai-orbit-fast {
    from { transform: rotate(0deg) translateX(45px) rotate(0deg); }
    to { transform: rotate(-360deg) translateX(45px) rotate(360deg); }
}

@keyframes ai-sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes ai-dots {
    0%, 80%, 100% { opacity: 0; transform: scale(0.5); }
    40% { opacity: 1; transform: scale(1); }
}

/* AI Reference Preview */
.ai-reference-preview {
    display: none;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed var(--studio-border);
    position: relative;
}

.ai-reference-preview.visible {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-reference-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--studio-border);
}

.ai-reference-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: transform 0.2s;
}

.ai-reference-remove:hover {
    transform: scale(1.1);
}

.studio-json-viewer {
    background-color: var(--studio-bg-panel);
    border-radius: var(--studio-radius-xl);
    box-shadow: var(--studio-shadow-xl);
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================
   NOTIFICATION SYSTEM
   ============================================ */

.studio-notification {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--studio-spacing-3);
    padding: var(--studio-spacing-3) var(--studio-spacing-4);
    background-color: var(--studio-bg-panel);
    border: 1px solid var(--studio-border);
    border-radius: var(--studio-radius-lg);
    box-shadow: var(--studio-shadow-lg);
    font-size: var(--studio-text-sm);
    font-weight: var(--studio-font-medium);
    z-index: var(--z-toast);
    animation: notification-enter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.studio-notification.success {
    border-color: var(--studio-success);
    background-color: var(--studio-success-light);
}

.studio-notification.success i {
    color: var(--studio-success);
}

.studio-notification.error {
    border-color: var(--studio-danger);
    background-color: var(--studio-danger-light);
}

.studio-notification.error i {
    color: var(--studio-danger);
}

.studio-notification.warning {
    border-color: var(--studio-warning);
    background-color: var(--studio-warning-light);
}

.studio-notification.warning i {
    color: var(--studio-warning);
}

.studio-notification.fade-out {
    animation: notification-exit 0.25s ease forwards;
}

@keyframes notification-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes notification-exit {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: var(--studio-radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* ============================================
   PHOSPHOR ICONS - Animation & Base Styles
   ============================================ */

/* Spinning animation for loading indicators */
.ph-spin,
i.ph-spin {
    animation: ph-spin 1s linear infinite;
}

@keyframes ph-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Consistent Phosphor icon sizing in buttons */
.toolbar-button i.ph,
.studio-button i.ph,
.dropdown-item i.ph {
    font-size: 16px;
    vertical-align: middle;
}

/* Icon alignment in accordions */
.accordion-header i.ph {
    font-size: 14px;
    opacity: 0.7;
}

/* ============================================
   PUBLISH MODE - Panel Visibility
   
   Architecture:
   - CrumbleEffect handles visual animation (captures element, shows brick fall)
   - CSS handles layout state (width collapse for space reclaim)
   - visibility:hidden is set by JS after capture completes
   
   State flow:
   1. ENTER publish: capture → visibility:hidden → add .publish-hidden
   2. EXIT publish: remove .publish-hidden → restore animation → visibility:visible
   ============================================ */

/* Hidden state - simple, no animation conflicts */
.studio-sidebar.publish-hidden,
.studio-properties-panel.publish-hidden {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
    /* No transition - state change is instant, visual handled by WebGL */
    transition: none !important;
}

/* Expand publish panel to fill space when in publish mode */
#studio-container.workflow-publish .publish-panel {
    max-width: 100%;
    width: 100%;
}

/* Center the publish content when sidebars are hidden */
#studio-container.workflow-publish .studio-content {
    justify-content: center;
}

/* ============================================
   STUDIO TOOLBAR - Clean Floating Architecture
   Balanced layout without strict column widths
   ============================================ */

.studio-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 16px sides, 12px top/bottom for consistent gaps with content below */
    padding: 12px 16px;
    background-color: transparent;
    height: auto;
    min-height: 48px;
    position: relative; /* Required for absolute center section */
    z-index: 1000;
    gap: 24px;
}

/* ============================================
   TOOLBAR SECTIONS - Balanced Layout
   ============================================ */

.toolbar-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Left section - Auto width based on content, aligned with sidebar below */
.toolbar-section.left {
    flex: 1;
    justify-content: flex-start;
    /* Match the left padding of the sidebar below (16px Bento gap) */
    padding-left: 16px;
}

/* Center section - Absolutely centered over canvas */
.toolbar-section.center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* Offset to account for sidebar width difference: (left sidebar - right panel) / 2 */
    /* Left sidebar ~320px, right panel ~360px, difference = -40px, offset = +20px */
    /* Plus account for the left nav rail (~64px) */
    margin-left: calc((var(--studio-sidebar-width, 320px) - var(--studio-properties-width, 360px)) / 2);
}

/* Right section - Auto width based on content */
.toolbar-section.right {
    flex: 1;
    justify-content: flex-end;
    gap: 10px;
}

/* ============================================
   LEFT SECTION - Campaign Context
   Compact breadcrumb navigation
   ============================================ */

/* Back button hidden - breadcrumb serves as back navigation */
.toolbar-back-button {
    display: none;
}

/* Campaign Name Group - Transparent, floats on canvas */
.toolbar-campaign-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    background: transparent;
    padding: 8px 0;
    padding-left: 0; /* Ensure strict left alignment */
    border-radius: 0;
    box-shadow: none;
    transition: all 0.2s ease;
}

.toolbar-campaign-name:hover {
    background: transparent;
    box-shadow: none;
}

/* Breadcrumb link - clickable back to campaigns */
.toolbar-breadcrumb {
    display: flex;
    align-items: center;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.toolbar-breadcrumb:hover {
    color: #4F46E5;
}

.toolbar-breadcrumb-text {
    color: inherit;
}

.toolbar-breadcrumb-sep {
    color: #9CA3AF;
    font-size: 11px;
    margin: 0 6px;
}

.toolbar-campaign-input {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 700; /* Bolder for stronger presence */
    color: #111111; /* Near black for high contrast */
    padding: 4px 8px;
    border-radius: 6px;
    width: auto; /* Allow dynamic width */
    min-width: 40px;
    max-width: 300px;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.toolbar-campaign-input::placeholder {
    color: #9CA3AF;
}

.toolbar-campaign-input:hover {
    background: rgba(0, 0, 0, 0.03);
}

.toolbar-campaign-input:focus {
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Status Indicator - Subtle gray checkmark */
.toolbar-status {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px; /* Small extra spacing after the gap */
    font-size: 11px;
    font-weight: 500;
    color: #9CA3AF;
    transition: all 0.2s ease;
}

.toolbar-status span {
    display: none; /* Only show icon by default */
}

.toolbar-status i {
    font-size: 14px;
    color: #9CA3AF; /* Gray by default, not green */
}

.toolbar-status.saving i {
    color: #D97706;
}

.toolbar-status.saving span {
    display: inline;
    color: #D97706;
}

.toolbar-status.error i {
    color: #DC2626;
}

.toolbar-status.error span {
    display: inline;
    color: #DC2626;
}

/* ============================================
   CENTER SECTION - Workflow Stepper
   Compact centered navigation
   ============================================ */

.workflow-stepper {
    display: flex;
    align-items: center;
    background: #F3F4F6; /* Grey pill container */
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    position: relative;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Sliding active background indicator (White card with shadow) */
.workflow-stepper::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: var(--active-left, 4px);
    width: var(--active-width, 80px);
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    z-index: 0;
}

.workflow-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background-color: transparent;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

.workflow-step i {
    font-size: 14px;
    color: inherit;
    transition: transform 0.2s ease;
}

.workflow-step:hover:not(.active):not(:disabled) {
    color: #111827;
}

.workflow-step:hover i {
    transform: translateY(-1px);
}

.workflow-step.active {
    color: #111827;
    font-weight: 600;
}

.workflow-step.active i {
    color: #4F46E5;
}

/* Completed step styling - original icon remains but in gray */
.workflow-step.completed {
    color: #9CA3AF;
}

.workflow-step.completed i.step-icon {
    display: flex;
    color: #9CA3AF;
}

.workflow-step.completed .step-check {
    display: none;
}

/* Special icon colors */
.workflow-step.active .ph-trophy {
    color: #F59E0B;
}

.workflow-step.active .ph-rocket-launch {
    color: #10B981;
}

/* Chevron connectors between steps */
.workflow-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D1D5DB;
    font-size: 10px;
    padding: 0 2px;
    z-index: 1;
}

/* ============================================
   PUBLISH MODE - Special Styling
   When in publish mode, dim other steps
   ============================================ */

#studio-container.workflow-publish .workflow-step:not(.active) {
    color: #D1D5DB;
    opacity: 0.6;
}

#studio-container.workflow-publish .workflow-step:not(.active) i {
    color: #D1D5DB;
}

#studio-container.workflow-publish .workflow-step.active {
    color: #111827;
    opacity: 1;
}

#studio-container.workflow-publish .workflow-step.active .ph-rocket-launch {
    color: #10B981;
    animation: rocketPulse 2s ease-in-out infinite;
}

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

/* Progress bar at bottom of pill (optional) */
.workflow-progress {
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #E5E7EB;
    border-radius: 1px;
    overflow: hidden;
}

.workflow-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4F46E5, #6366F1);
    border-radius: 1px;
    transition: width 0.3s ease;
}

/* ============================================
   RIGHT SECTION - Action Buttons
   Compact, consistent pill-shaped styling
   ============================================ */

/* Preview Button - Play Icon Style */
.toolbar-preview-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: #FFFFFF;
    color: #6B7280;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.02);
}

.toolbar-preview-btn i {
    font-size: 15px;
    transition: all 0.3s ease;
}

.toolbar-preview-btn:hover {
    color: #4F46E5;
    transform: translateY(-1px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.04);
}

.toolbar-preview-btn:hover i {
    transform: scale(1.1);
}

.toolbar-preview-btn.active {
    background: #4F46E5;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.toolbar-preview-btn.active:hover {
    background: #4338CA;
}

/* More Options Button */
.toolbar-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: #FFFFFF;
    color: #6B7280;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.02);
}

.toolbar-more-btn:hover {
    color: #111827;
    transform: translateY(-1px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.04);
}

.toolbar-more-btn i {
    font-size: 18px;
    transition: all 0.3s ease;
}

.toolbar-more-btn:hover i {
    transform: rotate(90deg);
}

/* Save Button - Primary Action (Purple brand color) */
.toolbar-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-width: 88px;
    padding: 0 16px;
    border: none;
    background: #4F46E5;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 4px 12px rgba(79, 70, 229, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.toolbar-save-btn i,
.toolbar-save-btn span {
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-save-btn:hover {
    background: #4338CA;
    transform: translateY(-1px);
    box-shadow: 
        0 8px 20px rgba(79, 70, 229, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

.toolbar-save-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Keyboard shortcut hint - Premium Reveal Effect */
.toolbar-save-btn::after {
    content: 'Ctrl + S';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4338CA;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #FFFFFF;
    z-index: 2;
}

.toolbar-save-btn:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.toolbar-save-btn:hover i,
.toolbar-save-btn:hover span {
    opacity: 0;
    transform: translateY(-100%);
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */

.dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.dropdown-item i {
    font-size: 15px;
    color: #9CA3AF;
    transition: color 0.15s ease;
}

.dropdown-item:hover {
    background: #F3F4F6;
    color: #111827;
}

.dropdown-item:hover i {
    color: #4F46E5;
}

.dropdown-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 6px 0;
}

/* ============================================
   TOOLBAR BUTTON - Generic button for toolbar actions
   Used by: createToolbarButton() in Toolbar.ts
   ============================================ */

.toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.toolbar-button i {
    font-size: 14px;
}

.toolbar-button:hover {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Icon-only button variant */
.toolbar-button.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1200px) {
    .workflow-step span {
        display: none;
    }
    
    .workflow-step {
        padding: 10px 12px;
    }
    
    .toolbar-breadcrumb {
        display: none;
    }
}

@media (max-width: 768px) {
    .studio-toolbar {
        padding: 8px 12px;
        height: 56px;
    }
    
    .toolbar-section.center {
        position: relative;
        left: auto;
        transform: none;
    }
    
    .toolbar-campaign-name {
        display: none;
    }
    
    .toolbar-status {
        display: none;
    }
}

/**
 * Studio Sidebar CSS
 * 
 * The left panel containing tools and assets.
 * 
 * Structure:
 * - Sidebar Container (Bento card)
 * - Tabs (Elements / Layers)
 * - Elements Section (2x2 grid of tool buttons)
 * - Layers Panel (drag-to-reorder element list)
 * - Asset Gallery (searchable image grid)
 * - Asset Picker Modal
 * 
 * @see Sidebar.ts for the JavaScript implementation
 */

/* ============================================
   SIDEBAR CONTAINER
   ============================================ */

.studio-sidebar {
    position: relative;
    background-color: var(--studio-bg-panel);
    border: none;
}

/* Sidebar Tabs - Clean pill-style */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--studio-border);
    background-color: var(--studio-bg-panel);
    padding: 6px;
    gap: 4px;
    border-top-left-radius: var(--bento-radius);
    border-top-right-radius: var(--bento-radius);
}

.sidebar-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--studio-spacing-2);
    padding: var(--studio-spacing-2) var(--studio-spacing-3);
    border: none;
    background: none;
    color: var(--studio-text-muted);
    font-size: var(--studio-text-sm);
    font-weight: var(--studio-font-medium);
    cursor: pointer;
    border-radius: var(--studio-radius-md);
    transition: all var(--studio-transition-fast);
}

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

.sidebar-tab.active {
    background-color: var(--studio-bg-main);
    color: var(--studio-text-main);
    font-weight: var(--studio-font-semibold);
}

.sidebar-tab i {
    font-size: 14px;
}

/* Sidebar Sections */
.sidebar-section {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-bottom-left-radius: var(--bento-radius);
    border-bottom-right-radius: var(--bento-radius);
}

.sidebar-section.active {
    display: flex;
}

/* ============================================
   ELEMENTS SECTION - Compact 2x2 Command Block
   Tight grid with minimal gaps
   ============================================ */

.elements-container {
    padding: 12px 8px;
    display: grid;
    grid-template-columns: repeat(2, 68px);
    gap: 4px; /* Reduced horizontal/vertical gap */
    justify-content: center;
}

/* ============================================
   ELEMENT BUTTONS - Ghost Button Design
   Phosphor Bold icons, tight label spacing
   ============================================ */

.element-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 68px;
    height: 56px;
    padding: 6px 0 4px;
    border: none;
    border-radius: var(--studio-radius-md);
    background: transparent;
    color: var(--studio-text-main);
    font-size: var(--studio-text-xs);
    font-weight: var(--studio-font-semibold);
    cursor: grab;
    transition: background-color 0.1s ease, color 0.1s ease;
    user-select: none;
    position: relative;
}

/* Ghost button hover - light grey background appears */
.element-button:hover {
    background: var(--studio-bg-hover);
    color: var(--studio-primary);
}

.element-button:hover i {
    color: var(--studio-primary);
}

.element-button:active {
    background: var(--studio-primary-light);
    color: var(--studio-primary);
    cursor: grabbing;
}

/* Phosphor Bold Icons - consistent optical weight */
.element-button i {
    font-size: 24px; /* Slightly smaller for tighter layout */
    color: currentColor;
    line-height: 1;
    transition: color 0.1s ease;
}

/* Custom SVG icon (for shapes) */
.element-button .element-icon-svg {
    width: 24px;
    height: 24px;
    color: currentColor;
    transition: color 0.1s ease;
}

/* Label styling - 11px SemiBold as specified */
.element-button span {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 11px; /* Exactly 11px */
    font-weight: 600; /* SemiBold */
    color: currentColor;
    margin-top: 0; /* No extra margin - gap handles spacing */
}

/* Keyboard focus */
.element-button:focus-visible {
    outline: none;
    background: #F3F4F6;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

/* Disabled state */
.element-button.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.element-button.disabled i,
.element-button.disabled .element-icon-svg {
    color: #9CA3AF;
}

.element-button.disabled span {
    color: #9CA3AF;
}

/* ============================================
   LAYERS PANEL
   ============================================ */

.studio-layers-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--studio-border);
}

.studio-layers-panel {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.studio-layers-list {
    display: flex;
    flex-direction: column;
    padding: var(--studio-spacing-2);
    gap: 2px;
}

.studio-layer {
    display: flex;
    align-items: center;
    gap: var(--studio-spacing-2);
    padding: var(--studio-spacing-2) var(--studio-spacing-3);
    border-radius: var(--studio-radius-md);
    background-color: transparent;
    cursor: pointer;
    transition: all var(--studio-transition-fast);
    border: 1px solid transparent;
}

.studio-layer:hover {
    background-color: var(--studio-bg-hover);
}

.studio-layer.selected {
    background-color: var(--studio-primary-light);
    border-color: var(--studio-primary);
}

.studio-layer.layer-hidden {
    opacity: 0.4;
}

.studio-layer.layer-hidden .studio-layer-controls {
    opacity: 1;
}

.studio-layer.layer-hidden .layer-delete-button {
    opacity: 0;
    pointer-events: none;
}

.studio-layer.layer-hidden:hover .layer-delete-button {
    opacity: 1;
    pointer-events: auto;
}

.studio-layer.layer-hidden .layer-visibility-toggle {
    color: var(--studio-primary);
}

.studio-layer.dragging {
    opacity: 0.5;
    background-color: var(--studio-primary-light);
}

.studio-layer-drag-handle {
    color: var(--studio-text-light);
    cursor: grab;
    font-size: 12px;
    padding: 2px;
    opacity: 0.5;
    transition: opacity var(--studio-transition-fast);
}

.studio-layer:hover .studio-layer-drag-handle {
    opacity: 1;
}

.studio-layer-content {
    flex: 1;
    font-size: var(--studio-text-sm);
    color: var(--studio-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.studio-layer-controls {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--studio-transition-fast);
}

.studio-layer:hover .studio-layer-controls {
    opacity: 1;
}

.studio-layer-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    color: var(--studio-text-muted);
    border-radius: var(--studio-radius-sm);
    cursor: pointer;
    transition: all var(--studio-transition-fast);
}

.studio-layer-controls button:hover {
    background-color: var(--studio-bg-active);
    color: var(--studio-text-main);
}

.studio-layer-controls button i.ph-trash {
    color: var(--studio-danger);
}

/* ============================================
   ASSET GALLERY SECTION
   ============================================ */

.asset-gallery-section {
    padding: var(--studio-spacing-4) var(--studio-spacing-4) 0;
    border-top: 1px solid var(--studio-border);
    display: flex;
    flex-direction: column;
    gap: var(--studio-spacing-4);
    flex: 1;
    background: var(--studio-bg-panel);
    min-height: 0;
}

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

.asset-gallery-title {
    font-size: var(--studio-text-xs);
    font-weight: var(--studio-font-bold);
    color: var(--studio-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.asset-gallery-actions {
    display: flex;
    gap: var(--studio-spacing-2);
}

.asset-gallery-add-btn {
    background: none;
    border: 1px solid var(--studio-border);
    cursor: pointer;
    color: var(--studio-text-muted);
    font-size: 14px;
    padding: 4px 8px;
    border-radius: var(--studio-radius-md);
    transition: all var(--studio-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-gallery-add-btn:hover {
    background-color: var(--studio-bg-hover);
    color: var(--studio-primary);
    border-color: var(--studio-primary);
}

/* ============================================
   ASSET GALLERY SEARCH BAR
   ============================================ */

.asset-gallery-search-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0 4px;
    min-width: 0; /* Allow container to be narrow */
    width: 100%;
    box-sizing: border-box;
}

.asset-search-wrapper {
    flex: 1;
    min-width: 0; /* CRITICAL: Allow flex item to shrink below content width */
    position: relative;
    display: flex;
    align-items: center;
    background-color: #F9FAFB; /* bg-gray-50 for subtle contrast on white sidebar */
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0 8px;
    transition: all 0.2s ease;
}

.asset-search-wrapper:hover {
    border-color: #D1D5DB;
    background-color: #ffffff;
}

.asset-search-wrapper:focus-within {
    border-color: #3B82F6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.asset-search-icon {
    font-size: 14px;
    color: #9CA3AF;
    pointer-events: none;
    margin-right: 8px;
}

.asset-search-input {
    flex: 1;
    min-width: 0; /* Allow input to shrink */
    height: 32px;
    border: none;
    background-color: transparent;
    font-size: 13px;
    color: var(--studio-text-main);
    outline: none;
    padding: 0 36px 0 0; /* Reserve right space for X button */
}

.asset-search-controls {
    position: absolute;
    right: 10px; /* Increased from 4px for better breathing room */
    display: flex;
    align-items: center;
    gap: 6px;
}

.asset-search-shortcut {
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    pointer-events: none;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.asset-search-clear {
    background: none;
    border: none;
    padding: 4px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    height: 24px;
    width: 24px;
}

.asset-search-clear:hover {
    color: #ef4444;
    background: #fef2f2;
}

.asset-search-clear i {
    font-size: 16px;
}

/* Hide shortcut when space is tight */
@media (max-width: 1200px) {
    .asset-search-shortcut {
        display: none;
    }
}

.asset-search-clear {
    position: absolute;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background-color: var(--studio-bg-hover);
    color: var(--studio-text-muted);
    border-radius: var(--studio-radius-sm);
    cursor: pointer;
    font-size: 10px;
    transition: all var(--studio-transition-fast);
}

.asset-search-clear:hover {
    background-color: var(--studio-text-light);
    color: var(--studio-bg-panel);
}

/* Filter Buttons */
.asset-filter-group {
    display: flex;
    background-color: var(--studio-bg-main);
    border-radius: var(--studio-radius-md);
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--studio-border);
}

.asset-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: var(--studio-text-muted);
    border-radius: var(--studio-radius-sm);
    cursor: pointer;
    font-size: 11px;
    transition: all var(--studio-transition-fast);
}

.asset-filter-btn:hover:not(.active) {
    background-color: var(--studio-bg-hover);
    color: var(--studio-text-secondary);
}

.asset-filter-btn.active {
    background-color: var(--studio-bg-panel);
    color: var(--studio-primary);
    box-shadow: var(--studio-shadow-xs);
}

/* Breadcrumb */
.asset-picker-breadcrumb {
    padding: 12px 24px;
    background: #ffffff;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 0; /* Removed large margin to prevent huge white gap */
    display: flex;
    align-items: center;
}

.asset-picker-breadcrumb i.ph-house {
    color: #D1D5DB !important; /* Lighter grey for Home */
    font-size: 16px;
}

.asset-picker-breadcrumb span.breadcrumb-separator {
    color: #E5E7EB;
    font-size: 14px;
    margin: 0 8px;
}

.asset-picker-breadcrumb span.breadcrumb-current {
    color: #111827 !important; /* Darker grey for current location */
    font-weight: 600 !important;
}

/* Display Settings - Unified Pill for Toggles */
.asset-display-settings {
    display: flex;
    flex-shrink: 0; /* Don't let toggles get squished */
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #E5E7EB; /* gray-200 */
    border-radius: 10px; /* Modern slightly rounded */
    padding: 2px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    height: 36px; /* Lock height */
    box-sizing: border-box;
}

.asset-grid-density-group,
.asset-bg-mode-group {
    display: flex;
    gap: 2px;
    padding: 0 2px;
}

.display-settings-divider {
    width: 1px;
    height: 16px; /* Shortened and centered */
    background-color: #E5E7EB; /* gray-200 */
    margin: 0 4px;
}

.asset-density-btn,
.asset-bg-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background-color: transparent;
    color: #9CA3AF; /* gray-400 */
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.asset-density-btn:hover:not(.active),
.asset-bg-mode-btn:hover:not(.active) {
    background-color: #F9FAFB;
    color: #4B5563; /* gray-600 */
}

.asset-density-btn.active,
.asset-bg-mode-btn.active {
    background-color: #EFF6FF; /* bg-blue-50 */
    color: #2563EB; /* text-blue-600 */
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.asset-density-btn.active i,
.asset-bg-mode-btn.active i {
    color: #2563EB; /* Ensure icon stroke changes too */
}

/* Search Empty State */
.asset-search-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--studio-text-muted);
}

.asset-search-empty i {
    font-size: 24px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.asset-search-empty span {
    font-size: 13px;
    font-weight: 500;
    color: var(--studio-text-secondary);
    margin-bottom: 4px;
}

.asset-search-empty p {
    font-size: 12px;
    margin: 0;
    color: var(--studio-text-muted);
}

/* Upload & AI Buttons */
.asset-upload-button,
.asset-ai-button {
    padding: var(--studio-spacing-2) var(--studio-spacing-3);
    font-size: var(--studio-text-xs);
    font-weight: var(--studio-font-semibold);
    border-radius: var(--studio-radius-md);
    cursor: pointer;
    transition: all var(--studio-transition-fast);
    display: flex;
    align-items: center;
    gap: var(--studio-spacing-2);
    border: 1px solid transparent;
}

.asset-upload-button {
    background: var(--studio-bg-main);
    color: var(--studio-text-secondary);
    border-color: var(--studio-border);
}

.asset-upload-button:hover {
    background: var(--studio-bg-hover);
    border-color: var(--studio-border-hover);
    transform: translateY(-1px);
}

/* Toolbar Buttons - Lock heights for micro-alignment */
.studio-button.primary {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.asset-ai-button {
    background: linear-gradient(135deg, #7C3AED 0%, #DB2777 100%); /* Purple to Pink */
    color: white;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    border: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px; /* Matched to search and display settings */
    padding: 0 16px;
    line-height: 1; /* Reset for flex alignment */
    border-radius: 10px;
}

.asset-ai-button i {
    font-size: 16px;
    margin-top: -1px; /* Optical adjustment for sparkle icon centering */
}

.asset-ai-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
    filter: brightness(1.1);
}

.asset-ai-button i {
    font-size: 16px;
}

/* Asset Gallery Grid */
.asset-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; /* Fluid grid for sidebar too */
    gap: var(--studio-spacing-3);
    overflow-y: auto;
    padding: var(--studio-spacing-3) var(--studio-spacing-3) 40px;
    scrollbar-gutter: stable;
    align-items: start;
    grid-auto-rows: min-content;
    flex: 1;
    min-height: 0;
}

/* Asset Card */
.asset-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1 !important;
    border: 1px solid #F3F4F6; /* Softened border gray-100 */
    border-radius: 16px;
    cursor: pointer;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px; /* Reduced padding to let image fill more space */
    box-sizing: border-box;
    background-color: #F9FAFB; /* Modern light grey */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Subtle shadow-sm */
}

/* Adaptive Aspect Ratio for Backgrounds */
.asset-card.is-video-ratio {
    aspect-ratio: 16 / 9 !important;
    padding: 0 !important; /* Edge to edge for backgrounds */
}

.asset-card.is-video-ratio .asset-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fill the entire box */
}

/* Background modes */
.asset-card[data-bg-mode="grid"] {
    background-color: #F9FAFB; /* Solid Light Grey - No checkerboard vibration */
    background-image: none;
}

.asset-card[data-bg-mode="light"] {
    background-color: #ffffff;
    background-image: none;
    border-color: #E5E7EB;
}

.asset-card[data-bg-mode="dark"] {
    background-color: #1F2937;
    background-image: none;
    border-color: #374151;
}

.asset-card-image {
    width: 80%; /* Let assets breathe */
    height: 80%;
    object-fit: contain;
    object-position: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    pointer-events: none;
    display: block;
}

/* Placeholder while image loads */
.asset-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--studio-text-muted, #9CA3AF);
    font-size: 24px;
    z-index: 0;
}

.asset-card-placeholder i {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.asset-card:hover {
    z-index: 50; /* Ensure hovered card stays on top of neighbors and header */
    border-color: #3B82F6; /* Brighter blue on hover */
    background-color: #ffffff; /* Pop to white on hover */
    box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-4px);
}

/* Dimming effect and image zoom on hover */
.asset-card:hover .asset-card-image {
    transform: scale(1.1);
    filter: brightness(0.9);
}

/* Action Area Overlay - subtle dimming to make icons pop */
.asset-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.asset-card:hover::after {
    opacity: 1;
}

/* Fix for green artifacts/shadows at the bottom of AI generated assets - Removed fade effect as per user request */
.asset-card-image.cleanup-artifacts {
    mask-image: none;
    -webkit-mask-image: none;
}

/* Asset Card Badge (Single Selection Indicator) */
.asset-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    background: #2563EB; /* Solid Blue Circle */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 5;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.asset-card.is-selected .asset-card-badge {
    opacity: 1;
    transform: scale(1);
}

/* Global Asset Badge (Globe icon for master/shared assets) */
.asset-card-global-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    z-index: 5;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Asset Card Delete Button - Top Right Action Area */
.asset-card-delete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.9); /* Solid background for visibility */
    color: #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
    border: none;
    opacity: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.asset-card:hover .asset-card-delete {
    opacity: 1;
}

.asset-card-delete:hover {
    background: #ffffff;
    color: #ef4444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ============================================
   BULK SELECTION MODE
   ============================================ */

/* Selection mode toggle button */
.asset-gallery-select-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--studio-text-light);
    cursor: pointer;
    border-radius: var(--studio-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--studio-transition-fast);
}

.asset-gallery-select-btn:hover {
    background: var(--studio-bg-hover);
    color: var(--studio-text-main);
}

.asset-gallery-select-btn.active {
    background: var(--studio-primary);
    color: white;
}

/* Checkbox on asset cards (Multi-selection) */
.asset-card-checkbox {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Circular */
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.8); /* Semi-transparent white ring */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transform: scale(0.8);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
}

/* Show checkbox only on hover OR if selection mode is active */
.asset-card:hover .asset-card-checkbox,
.selection-mode .asset-card-checkbox {
    opacity: 1;
    transform: scale(1);
}

.asset-card-checkbox i {
    font-size: 12px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

/* Selected state for checkbox - Solid Blue with white check */
.asset-card.is-bulk-selected .asset-card-checkbox {
    background: #2563EB !important; /* bg-blue-600 */
    border-color: #2563EB !important;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.asset-card.is-bulk-selected .asset-card-checkbox i {
    opacity: 1;
    transform: scale(1);
}

/* Selection Scrim - Subtle dark/blue overlay for contrast on selected items */
.asset-card.is-bulk-selected::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(30, 58, 138, 0.15); /* bg-blue-900/15 */
    z-index: 2; /* Sit on top of image (z-index 1) but below checkbox (z-index 10) */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Bulk selected card styling */
.asset-card.is-bulk-selected {
    border-color: #2563EB;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.asset-card.is-bulk-selected::after {
    background: rgba(59, 130, 246, 0.05);
    opacity: 1;
}

/* Hide globe badge when checkbox is shown to avoid overlap */
.selection-mode .asset-card-global-badge {
    display: none;
}

/* Bulk Action Bar - Pro Floating Version */
.asset-bulk-action-bar {
    display: flex;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px); /* Hidden by default */
    padding: 8px 12px;
    background: #1e1e1e; /* Dark professional theme */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    pointer-events: none;
    color: white;
}

.asset-bulk-action-bar.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.asset-bulk-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.asset-bulk-count {
    font-size: 14px;
    font-weight: 500;
    color: white;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.asset-bulk-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-bulk-clear:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.asset-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asset-bulk-delete {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.1); /* Soft red-500/10 */
    color: #ef4444; /* red-500 */
    border: none;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-bulk-delete:hover {
    background: rgba(239, 68, 68, 0.2);
}

.asset-bulk-delete i {
    font-size: 14px;
}

/* Make gallery container position relative for bulk action bar */
.asset-gallery-section {
    position: relative;
}

/* Add padding at bottom when bulk bar is visible */
.asset-gallery-section:has(.asset-bulk-action-bar[style*="flex"]) .asset-gallery-grid {
    padding-bottom: 60px;
}

/* Empty State */
.asset-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: transparent;
    color: var(--studio-text-muted);
    gap: 4px;
    text-align: center;
    border: none;
}

.asset-empty-state-icon {
    width: 64px;
    height: 64px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #cbd5e1;
    font-size: 28px;
}

.asset-empty-state-title {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
}

.asset-empty-state-text {
    font-size: 14px;
    color: #6b7280;
    max-width: 320px;
    margin-bottom: 24px;
}

.asset-empty-state-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.asset-empty-upload-btn {
    padding: 8px 16px;
    height: 40px;
    background: transparent;
    border: 1px solid transparent; /* Ghost style */
    border-radius: 8px;
    color: #374151; /* Solid dark grey (text-gray-700) */
    font-size: 14px;
    font-weight: 600; /* Semibold for stronger presence */
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.asset-empty-upload-btn i {
    font-size: 16px;
    line-height: 1;
}

.asset-empty-upload-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.asset-empty-ai-btn {
    padding: 8px 20px;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25); /* Added glow shadow */
}

/* Loading Skeleton */
.asset-skeleton {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F9FAFB; /* Base light grey */
    border: 1px solid #E5E7EB; /* Matching card border */
    border-radius: 16px; /* Matching card radius */
    overflow: hidden;
}

.asset-skeleton-shimmer {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.6) 50%, 
        transparent 100%
    );
    animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ============================================
   ASSET PICKER MODAL
   ============================================ */

.asset-picker-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--studio-bg-main);
    border-right: 1px solid var(--studio-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asset-picker-sidebar-header {
    padding: 20px 16px 8px;
    font-weight: 800; /* Bolder */
    font-size: 11px; /* Slightly smaller for folders header */
    color: #6B7280; /* Darker grey (gray-500) */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.asset-picker-folder-list {
    padding: 4px 0 4px;
}

.asset-picker-folder-item {
    display: flex;
    align-items: center;
    padding: 8px 16px; /* Adjusted padding for better vertical clearance */
    margin: 2px 12px;
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4B5563;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4; /* Increased line-height to prevent cutting off descenders like 'g' */
}

.asset-picker-folder-item:hover {
    background-color: #F3F4F6;
    color: #111827;
}

.asset-picker-folder-item.is-active {
    background-color: #2563EB !important; /* Solid blue-600 */
    color: #ffffff !important; /* White text */
    font-weight: 600;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2), 0 2px 4px -1px rgba(37, 99, 235, 0.1);
}

.asset-picker-folder-item.is-active i {
    color: #ffffff !important; /* White icon */
}

.asset-picker-folder-item i {
    font-size: 18px;
    width: 24px;
    margin-right: 12px;
}

.asset-picker-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--studio-bg-panel);
}

.asset-picker-toolbar {
    padding: var(--studio-spacing-4);
    border-bottom: 1px solid var(--studio-border);
    display: flex;
    align-items: center;
    gap: var(--studio-spacing-3);
    background: var(--studio-bg-main);
}

.asset-picker-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--studio-spacing-4);
    padding-right: var(--studio-spacing-2);
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--studio-spacing-4) !important;
    grid-auto-rows: min-content;
    align-content: start;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

/* Note: Scrollbar styling is defined globally in base.css */

/* ============================================
   ASSET FILTER UI - Horizontal Bar
   ============================================ */

.asset-filter-bar {
    background: #fff;
    user-select: none;
}

.asset-filter-pill:hover {
    border-color: #d1d5db !important;
    background-color: #f9fafb !important;
}

/* Active state is handled via JS inline styles */

.asset-filter-dropdown {
    animation: dropdownFadeIn 0.2s ease-out;
}

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

.asset-filter-clear-all:hover {
    background: #fce8e6 !important;
    border-color: #f5c2c7 !important;
}

/* Metadata badges on cards */
.asset-card-status-badge {
    pointer-events: none;
    white-space: nowrap;
}

.asset-card-type-badge {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.asset-card:hover .asset-card-type-badge {
    opacity: 1;
}

.asset-card-color-swatch {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.asset-card:hover .asset-card-color-swatch {
    opacity: 1;
}

/* Spinner animation for analyzing status */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ph-spin {
    animation: spin 1s linear infinite;
}

/* Filter clear button */
.asset-filter-clear-btn:hover {
    background: var(--studio-bg-hover, #f0f0f0) !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .studio-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--studio-border);
        display: none;
    }

    .elements-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

/**
 * Studio Canvas CSS
 * 
 * Modern infinite canvas design with floating controls.
 * Inspired by Figma, Miro, and modern design tools.
 * 
 * Structure:
 * - Canvas Container - The main "stage" area (Bento card style)
 * - Virtual Canvas - Transformable layer for pan/zoom
 * - Studio Elements - Draggable/resizable design elements
 * - Resize Handles - Interactive corner/edge handles
 * - Floating Dock - Bottom toolbar (glassmorphism)
 * - iPhone Frame - Mobile preview device
 * - Alignment Guides - Snap-to guides
 * 
 * @see CanvasRenderer.ts for the JavaScript implementation
 */

/* ============================================
   CANVAS CONTAINER - Center Island (Bento Style)
   ============================================ */

.studio-canvas-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    overflow: hidden !important;
    
    /* Darkened workspace background for better contrast with white sidebars */
    background: #EBECF0;
    
    /* Bento floating card style with Bevel highlight */
    border-radius: var(--bento-radius, 16px);
    box-shadow: 
        inset 0 2px 5px rgba(0, 0, 0, 0.05),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    
    /* Optical balance - nudge phone down 15px for breathing room */
    padding-top: 15px;
}

/* Grid layer with Vignette Fade */
.studio-canvas-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 10px 10px;
    
    /* Grid Vignette - Focus on center */
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    z-index: 0; /* Background layer */
}

/* Subtle Noise Texture (The "High-End Paper" feel) */
.studio-canvas-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03; /* 3% Noise */
    background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 200%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noiseFilter%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.65%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23noiseFilter%29%27/%3E%3C/svg%3E");
    z-index: 1; /* Background layer */
}

/* Canvas Area - the visible working area */
.studio-canvas {
    position: relative;
    background-color: transparent;
    box-shadow: var(--studio-shadow-md);
    border-radius: var(--studio-radius-lg);
    overflow: visible !important;
    width: 1280px;
    height: 720px;
    aspect-ratio: 16 / 9;
    margin: auto;
    border: 1px solid var(--studio-border);
    transform-origin: center center;
    transition: all 0.3s ease;
}

.studio-canvas.mobile-mode {
    background-color: transparent;
    box-shadow: none;
    border: none;
    width: 100%;
    height: 100%;
}

/* Grid System */
.studio-canvas.show-grid {
    background-image: 
        linear-gradient(to right, rgba(0, 102, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 102, 255, 0.04) 1px, transparent 1px);
    background-size: 2% 2%;
}

/* ============================================
   VIRTUAL CANVAS CONTAINER
   The transformable layer that holds all elements
   ============================================ */

.virtual-canvas-container {
    position: absolute !important;
    left: 50%;
    top: 50%;
    transform-origin: center center !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    aspect-ratio: unset !important;
    border: none !important;
    
    /* Smooth text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* GPU acceleration */
    backface-visibility: hidden;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.1, 1);
}

/* ============================================
   STUDIO ELEMENTS - Base Styles
   ============================================ */

.studio-element {
    position: absolute;
    overflow: visible !important;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: move;
    /* Disable transitions during drag for instant feedback */
    transition: none;
}

/* Re-enable transitions when not dragging */
.studio-element:not(.active-dragging) {
    transition: opacity 0.15s ease;
}

/* BUTTON ELEMENTS - Must clip to border-radius to prevent corner artifacts */
.studio-element.studio-button {
    overflow: hidden !important;
}

/* Selected Element - Rectangular bounding box selection (like Figma) */
.studio-element.selected {
    /* Use outline for rectangular selection - outline ignores border-radius */
    outline: 2px solid var(--studio-primary);
    outline-offset: 0px;
}

/* Hide selection UI when previewing */
.studio-element.selected.prize-preview-mode {
    outline: none !important;
    box-shadow: none !important;
}

.studio-element.selected.prize-preview-mode .resize-handle {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================
   TEXT ELEMENTS
   ============================================ */

.studio-element.studio-text,
.studio-element.text {
    font-family: var(--studio-font-sans);
    line-height: 1.2;
    white-space: pre-wrap;
    box-sizing: border-box;
    overflow: visible !important;
    font-size: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: 100%;
    word-wrap: break-word;
}

.studio-element.studio-text.editing,
.studio-element.text.editing {
    outline: none !important;
    cursor: text !important;
}

/* ============================================
   IMAGE ELEMENTS
   ============================================ */

.studio-element.image .image-inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: inherit;
}

.studio-element.image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: smooth;
}

/* Image placeholder - Clean & Minimal */
.canvas-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--studio-bg-main);
    border: 2px dashed var(--studio-border);
    border-radius: inherit;
    color: var(--studio-text-muted);
    font-size: var(--studio-text-sm);
    text-align: center;
    cursor: pointer;
    padding: 1.5rem;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

.canvas-image-placeholder i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--studio-text-light);
    opacity: 0.6;
    transition: all 0.15s ease;
}

.canvas-image-placeholder:hover {
    border-color: var(--studio-primary);
    background-color: var(--studio-primary-lighter);
}

.canvas-image-placeholder:hover i {
    color: var(--studio-primary);
    opacity: 1;
}

/* ============================================
   CONTAINER ELEMENTS
   ============================================ */

.studio-element.container {
    background-color: #ffffff;
    border-radius: var(--studio-radius-lg);
}

/* ============================================
   SCRATCH AREA ELEMENTS
   ============================================ */

.studio-element.scratch-area {
    position: relative;
    overflow: visible !important;
}

.studio-element.scratch-area .scratch-area-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: inherit;
}

/* Cover Designs */
.scratch-area-cover[data-cover-design="solid-color"] {
    background-color: var(--cover-color, #888888);
}

.scratch-area-cover[data-cover-design="gradient"] {
    background: linear-gradient(
        var(--gradient-angle, 135deg),
        var(--gradient-start, #667eea),
        var(--gradient-end, #764ba2)
    );
}

/* Pattern Designs */
.scratch-area-cover[data-cover-design="pattern-dots"] {
    background-color: var(--pattern-bg, #f5f5f5);
    background-image: radial-gradient(var(--pattern-color, #ddd) 2px, transparent 2px);
    background-size: 12px 12px;
}

.scratch-area-cover[data-cover-design="pattern-stripes"] {
    background: repeating-linear-gradient(
        45deg,
        var(--pattern-bg, #f5f5f5),
        var(--pattern-bg, #f5f5f5) 10px,
        var(--pattern-color, #ddd) 10px,
        var(--pattern-color, #ddd) 20px
    );
}

.scratch-area-cover[data-cover-design="pattern-grid"] {
    background-color: var(--pattern-bg, #f5f5f5);
    background-image: 
        linear-gradient(var(--pattern-color, #ddd) 1px, transparent 1px),
        linear-gradient(90deg, var(--pattern-color, #ddd) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Foil Designs */
.scratch-area-cover[data-cover-design="foil-gold"] {
    background: linear-gradient(135deg, #bf953f 0%, #fcf6ba 25%, #b38728 50%, #fbf5b7 75%, #aa771c 100%);
}

.scratch-area-cover[data-cover-design="foil-silver"] {
    background: linear-gradient(135deg, #c0c0c0 0%, #f5f5f5 25%, #a8a8a8 50%, #f0f0f0 75%, #909090 100%);
}

.scratch-area-cover[data-cover-design="foil-holographic"] {
    background: linear-gradient(
        135deg,
        hsl(0, 100%, 75%) 0%,
        hsl(60, 100%, 75%) 17%,
        hsl(120, 100%, 75%) 33%,
        hsl(180, 100%, 75%) 50%,
        hsl(240, 100%, 75%) 67%,
        hsl(300, 100%, 75%) 83%,
        hsl(360, 100%, 75%) 100%
    );
    animation: holographic-shift 3s ease infinite;
}

@keyframes holographic-shift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

/* Shape variants */
.scratch-area-cover[data-shape="rounded"] {
    border-radius: 12px;
}

.scratch-area-cover[data-shape="circle"] {
    border-radius: 50%;
}

.scratch-area-cover[data-shape="pill"] {
    border-radius: 9999px;
}

/* Graininess overlay */
.scratch-area-cover[data-graininess]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: var(--graininess, 0);
    background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noiseFilter%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23noiseFilter%29%27/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* ============================================
   RESIZE HANDLES - Hollow Square Design
   White squares with blue borders for contrast
   ============================================ */

.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #FFFFFF;
    border: 2px solid #3B82F6;
    border-radius: 2px;
    z-index: 110;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.resize-handle:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* Active/dragging state */
.resize-handle:active {
    background-color: #3B82F6;
    border-color: #FFFFFF;
}

.studio-element.selected .resize-handle {
    opacity: 1;
}

/* Corner handles - squares */
.resize-handle.nw { top: 0; left: 0; cursor: nwse-resize; }
.resize-handle.ne { top: 0; left: 100%; cursor: nesw-resize; }
.resize-handle.se { top: 100%; left: 100%; cursor: nwse-resize; }
.resize-handle.sw { top: 100%; left: 0; cursor: nesw-resize; }

/* Edge handles - rectangles */
.resize-handle.n  { top: 0; left: 50%; cursor: ns-resize; width: 16px; height: 6px; border-radius: 3px; }
.resize-handle.e  { top: 50%; left: 100%; cursor: ew-resize; width: 6px; height: 16px; border-radius: 3px; }
.resize-handle.s  { top: 100%; left: 50%; cursor: ns-resize; width: 16px; height: 6px; border-radius: 3px; }
.resize-handle.w  { top: 50%; left: 0; cursor: ew-resize; width: 6px; height: 16px; border-radius: 3px; }

/* ============================================
   FLOATING DOCK - State-of-the-Art 2025
   Inspired by Linear, Raycast, Arc Browser
   ============================================ */

.floating-dock {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    
    /* Floating Glass Effect - High alpha for interaction with background */
    background: rgba(255, 255, 255, 0.25) !important; 
    backdrop-filter: blur(40px) !important; /* Maximum blur for high-end frosted feel */
    -webkit-backdrop-filter: blur(40px) !important;
    
    /* High-contrast crisp inner light ring */
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 14px;
    
    /* Soft occlusion shadow */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    
    z-index: 2000;
    transition: 
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.2, 0, 0, 1),
        box-shadow 0.25s ease;
    
    white-space: nowrap;
    color: #444; /* Soften text contrast */
}

.floating-dock:hover {
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.1),
        0 6px 12px rgba(0, 0, 0, 0.05);
}

.floating-dock.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px) scale(0.95);
}

.floating-dock-group {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
}

.floating-dock-separator {
    width: 1px;
    height: 24px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 20%,
        rgba(0, 0, 0, 0.08) 80%,
        transparent 100%
    );
    margin: 0 6px;
}

.floating-dock-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #444; /* Soften text contrast */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1);
    position: relative;
}

.floating-dock-button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: #1F2937;
    transform: scale(1.05);
}

.floating-dock-button:active:not(:disabled) {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.08);
}

.floating-dock-button:disabled,
.floating-dock-button.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
}

.floating-dock-button.active {
    color: #4F46E5;
    background: rgba(79, 70, 229, 0.1);
}

.floating-dock-button i {
    font-size: 17px;
    font-weight: 500;
}

.floating-dock-zoom-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 34px;
    padding: 0 8px;
    color: #444; /* Soften text contrast */
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-feature-settings: 'tnum' on;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    margin: 0 2px;
}

/* ============================================
   iPHONE 17 FRAME (Mobile Preview)
   ============================================ */

.iphone-17-frame {
    position: relative;
    width: 375px;
    height: 812px;
    background: #080808; /* Deep black for the body */
    border-radius: 54px;
    padding: 10px; /* Thinner bezel padding */
    
    /* Rim Light - Defines the 3D shape catching light from above */
    border-top: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    
    /* Dual-layer premium shadow system for depth and grounding */
    box-shadow: 
        /* Tight, dark grounding shadow - creates immediate contact with surface */
        0px 2px 4px rgba(0, 0, 0, 0.4),
        0px 4px 8px rgba(0, 0, 0, 0.3),
        /* Large, diffuse atmospheric shadow - creates floating depth */
        0px 24px 48px -8px rgba(0, 0, 0, 0.15),
        0px 60px 120px -20px rgba(0, 0, 0, 0.08),
        /* Subtle outer rim lighting */
        0 0 0 1px rgba(255, 255, 255, 0.05),
        /* Inner frame shadow */
        inset 0 0 2px 1px rgba(255, 255, 255, 0.1) !important;

    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
    z-index: 5;
    overflow: visible;
    transform-origin: center center;
    margin: 0;
    flex-shrink: 0;

    /* Smooth corner rendering hacks */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 44px;
    overflow: hidden; /* Always clip content to phone screen boundary */
    
    /* Screen glass depth effect */
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.8),
        inset 0 2px 10px rgba(0, 0, 0, 0.5);

    /* Smooth corner rendering hacks */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* WinningReveal container - must fill entire phone screen */
.phone-screen > [data-winning-reveal] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: inherit;
    box-sizing: border-box !important;
}

/* Reset all children inside WinningReveal */
.phone-screen > [data-winning-reveal] * {
    box-sizing: border-box;
}

/* Ensure the Canvas inside WinningReveal fills completely */
.phone-screen > [data-winning-reveal] > canvas,
.phone-screen > [data-winning-reveal] canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inner div of WinningReveal also fills */
.phone-screen > [data-winning-reveal] > div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Metallic confetti container - must fill entire phone screen */
.phone-screen .metallic-confetti-container,
.phone-screen > .metallic-confetti-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Don't force width/height - allow inline styles to set explicit dimensions */
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ensure canvas inside metallic confetti fills its container */
.phone-screen .metallic-confetti-container canvas {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* R3F Canvas creates a wrapper div - ensure it fills the container */
.phone-screen .metallic-confetti-container > div {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Canvas-confetti celebration canvas - must fill entire phone screen */
.phone-screen .confetti-celebration-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Edit mode styling - content always clipped, only z-index changes */
.phone-screen:has(.virtual-canvas-container.edit-mode),
.phone-screen.edit-mode-active {
    z-index: 150;
    /* Keep overflow: hidden to clip element content to screen boundary */
}

/* Screen shine effect */
.phone-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
    z-index: 50;
    border-radius: inherit;
}

.phone-screen.edit-mode-active::before,
.phone-screen:has(.virtual-canvas-container.edit-mode)::before {
    display: none;
}

/* Frame overlay - Now acts as the highly polished bezel edge */
.phone-frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 8px solid #080808; /* Consistent with frame body */
    border-radius: 54px;
    pointer-events: none;
    z-index: 160; /* Higher than phone-screen edit-mode-active (150) */
    
    /* Polished metal/glass edge effect */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 10px rgba(0, 0, 0, 0.4);

    /* Smooth corner rendering hacks */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dynamic-island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #000;
    border-radius: 20px;
    z-index: 200;
    box-shadow: 
        inset 0 0 4px rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Camera Lens Reflection - The 1-pixel high-quality detail */
.dynamic-island::before {
    content: '';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at center, #2a1a5e 0%, #000 70%);
    border-radius: 50%;
    opacity: 0.8;
    z-index: 201;
    box-shadow: 0 0 2px rgba(100, 80, 255, 0.2);
}

.dynamic-island::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #0a0a0a;
    border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.1);
    z-index: 200;
}

/* Phone Buttons - More realistic metallic look */
.phone-button {
    position: absolute;
    background: #121212;
    border-radius: 2px;
    z-index: 1;
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.5);
}

.action-btn {
    left: -3px;
    top: 130px;
    width: 3px;
    height: 26px;
    border-radius: 2px 0 0 2px;
}

.volume-up {
    left: -3px;
    top: 180px;
    width: 3px;
    height: 54px;
    border-radius: 2px 0 0 2px;
}

.volume-down {
    left: -3px;
    top: 245px;
    width: 3px;
    height: 54px;
    border-radius: 2px 0 0 2px;
}

.side-btn {
    right: -3px;
    top: 200px;
    width: 3px;
    height: 86px;
    border-radius: 0 2px 2px 0;
}

/* ============================================
   DRAG & DROP STATES
   ============================================ */

.studio-canvas.dragover,
.studio-canvas-container.dragover {
    background-color: rgba(0, 102, 255, 0.04);
}

.studio-element.active-dragging {
    opacity: 0.9;
    z-index: 5000 !important;
    /* Force immediate updates - disable all transitions during drag */
    transition: none !important;
    /* Tell browser to optimize for transform changes */
    will-change: transform;
}

/* Optimize performance during dragging by disabling pointer events on children */
.studio-element.active-dragging * {
    pointer-events: none !important;
    /* Also disable transitions on children */
    transition: none !important;
}

.studio-element.active-resizing {
    z-index: 5000 !important;
}

/* ============================================
   ALIGNMENT GUIDES
   ============================================ */

.alignment-guide {
    position: absolute;
    background-color: var(--studio-primary);
    z-index: 9999;
    pointer-events: none;
    display: none;
}

.horizontal-guide {
    left: -10000px;
    right: -10000px;
    height: 1px;
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.6);
    opacity: 1;
}

.vertical-guide {
    top: -10000px;
    bottom: -10000px;
    width: 1px;
    box-shadow: 0 0 8px rgba(0, 102, 255, 0.6);
    opacity: 1;
}

/* ============================================
   PREVIEW MODE OVERRIDES
   ============================================ */

.virtual-canvas-container.preview-mode .studio-element {
    cursor: default !important;
}

.virtual-canvas-container.preview-mode .resize-handle {
    display: none !important;
}

/**
 * Studio Properties Panel CSS
 * 
 * The right sidebar inspector panel with Figma/Linear-inspired
 * dense data layout for editing element properties.
 * 
 * Structure:
 * 1. Design Tokens - Panel-specific CSS variables
 * 2. Layout - Content area and property rows (40/60 grid)
 * 3. Accordion - Collapsible sections with minimal headers
 * 4. Inputs - Text, number, select controls (outlined style)
 * 5. Color Picker - Swatch with hex input
 * 6. Sliders - Range inputs with value display
 * 7. Position Grid - Compact X/Y/W/H layout
 * 8. Toggle & Buttons - UI controls
 * 9. Image Picker - Clickable preview with overlay
 * 10. Prizes - Compact prize card layout
 * 11. Empty State & Hints
 * 
 * @see PropertiesPanel.ts for the JavaScript implementation
 * @see properties/ folder for individual property editors
 */

/* ============================================
   DESIGN TOKENS - Panel Specific
   ============================================ */
.studio-properties-panel {
    --prop-input-height: 28px;
    --prop-input-bg: #FFFFFF;
    --prop-input-border: #E5E7EB;
    --prop-input-border-hover: #9CA3AF;
    --prop-input-border-focus: #4F46E5;
    --prop-label-color: #6B7280;
    --prop-label-size: 11px;
    --prop-value-color: #1F2937;
    --prop-grid-label: 40%;
    --prop-grid-control: 60%;
    --prop-row-gap: 6px;
    --prop-section-gap: 0;
}

/* ============================================
   PROPERTIES CONTENT AREA
   ============================================ */

.studio-properties-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 60px 0; /* Extra bottom padding for unreachable items */
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #FAFAFA;
    /* Respect parent rounded corners */
    border-radius: var(--bento-radius);
    min-height: 0;
}

/* ============================================
   ACCORDION SECTIONS - Clean Headers
   ============================================ */

.accordion-section {
    border: none;
    border-bottom: 1px solid #F0F0F0;
    border-radius: 0;
    overflow: visible; /* Changed from hidden to allow resizers */
    margin-bottom: 0;
    background-color: #FFFFFF;
}

.accordion-section:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    min-height: 36px;
    background-color: #FFFFFF;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease;
    border-bottom: 1px solid transparent;
}

.accordion-header:hover {
    background-color: #FAFAFA;
}

.accordion-section:not(.collapsed) .accordion-header {
    border-bottom-color: #F0F0F0;
}

.accordion-header h3 {
    font-size: 11px;
    font-weight: 700;
    color: #6B7280;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.accordion-header h3 i {
    width: 14px;
    text-align: center;
    color: #6B7280;
    font-size: 12px;
}

.accordion-header .toggle-icon {
    font-size: 9px;
    color: #9CA3AF;
    transition: transform 0.15s ease;
}

.accordion-section.collapsed .accordion-header .toggle-icon {
    transform: rotate(-90deg);
}

.accordion-content {
    padding: 16px 14px 16px; /* Increased top padding for breathing room after header */
    background-color: #FFFFFF;
}

/* Add spacing after certain control groups */
.accordion-content > .studio-property-row:not(:last-child) {
    margin-bottom: 8px;
}

/* Extra spacing before sub-sections/labels */
.accordion-content > .studio-property-subheader {
    margin-top: 14px;
}

/* ============================================
   PROPERTY ROWS - Strict 40/60 Grid
   ============================================ */

.studio-property-row {
    display: grid;
    grid-template-columns: var(--prop-grid-label) var(--prop-grid-control);
    align-items: center;
    gap: 8px;
    margin-bottom: var(--prop-row-gap);
    min-height: var(--prop-input-height);
}

.studio-property-row:last-child {
    margin-bottom: 0;
}

.studio-property-row label {
    font-size: var(--prop-label-size);
    font-weight: 500;
    color: var(--prop-label-color);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-property-row .control-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    flex: 1;
}

/* ============================================
   INPUT STYLES - Outlined White Background
   ============================================ */

.studio-input,
.studio-property-row input[type="text"],
.studio-property-row input[type="number"],
.studio-property-row select {
    width: 100%;
    height: var(--prop-input-height);
    padding: 0 8px;
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--prop-input-bg);
    color: var(--prop-value-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.studio-input:hover,
.studio-property-row input:hover,
.studio-property-row select:hover {
    border-color: var(--prop-input-border-hover);
}

.studio-input:focus,
.studio-property-row input:focus,
.studio-property-row select:focus {
    outline: none;
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Select dropdown - match input styling exactly */
.studio-select,
.studio-property-row select,
select.studio-input {
    height: var(--prop-input-height);
    appearance: none;
    background-color: var(--prop-input-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23374151%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M4 6l4 4 4-4%27/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-left: 12px;
    padding-right: 32px;
    border: 1px solid var(--prop-input-border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.studio-select:hover {
    border-color: #3B82F6;
    background-color: #ffffff;
}

.studio-select:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.studio-select-container {
    position: relative;
    width: 100%;
}

/* Number inputs - tabular figures */
.studio-property-row input[type="number"] {
    font-feature-settings: 'tnum' on, 'lnum' on;
    text-align: right;
    padding-right: 6px;
}

/* Hide spinners */
.studio-property-row input[type="number"]::-webkit-inner-spin-button,
.studio-property-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.studio-property-row input[type="number"] {
    -moz-appearance: textfield;
}

/* ============================================
   FONT PICKER - Real-time Preview & Vibe Chips
   ============================================ */

.studio-font-picker-trigger {
    width: 100%;
    height: var(--prop-input-height);
    padding: 0 12px;
    background: var(--prop-input-bg);
    border: 1px solid var(--prop-input-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13px;
    color: var(--studio-text-main);
    transition: all 0.2s;
    text-align: left;
}

.studio-font-picker-trigger:hover {
    border-color: var(--prop-input-border-hover);
    background: white;
    box-shadow: var(--studio-shadow-sm);
}

.studio-font-picker-trigger .current-font-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-font-picker-popover {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    /* Double Shadow Technique for Pop */
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 520px;
    overflow: hidden;
    gap: 0;
}

.font-picker-top-controls {
    display: flex;
    flex-direction: column;
    background: #fcfcfc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.font-search-container {
    position: relative;
    padding: 12px 12px 0 12px;
}

.font-search-container .search-icon {
    position: absolute;
    left: 22px;
    top: 23px;
    color: var(--studio-text-muted);
    font-size: 14px;
}

.font-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}

.font-search-input:focus {
    border-color: var(--studio-primary);
    box-shadow: 0 0 0 3px var(--studio-primary-light);
}

.font-vibe-chips-wrapper {
    position: relative;
    padding: 12px 0;
    margin: 0 12px;
}

/* Gradient mask for horizontal scroll indication */
.font-vibe-chips-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(to right, transparent, #fcfcfc);
    pointer-events: none;
    z-index: 1;
}

.font-vibe-chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-right: 30px; /* Space for the gradient mask */
    scrollbar-width: none; /* Hide scrollbar Firefox */
}

.font-vibe-chips::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}

.vibe-chip {
    height: 32px; /* Uniform Height */
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid transparent;
    background: #F3F4F6; /* Inactive State */
    font-size: 13px;
    color: var(--studio-text-main);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.vibe-chip:hover {
    background: #E5E7EB;
    transform: translateY(-1px);
}

.vibe-chip.active {
    background: var(--studio-primary); /* Active State */
    color: white;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
    border-color: var(--studio-primary);
}

/* Specific vibe chip styles for visual discovery */
.vibe-bold { font-weight: 800 !important; }
.vibe-playful { transform: rotate(-2deg); }
.vibe-playful.active { transform: rotate(-2deg) scale(1.05); }
.vibe-retro { letter-spacing: 1px; text-transform: uppercase; }
.vibe-elegant { font-style: italic; }
.vibe-handwriting { font-size: 15px; }
.vibe-glitch { 
    position: relative;
    text-shadow: 1px 0 #ff0000, -1px 0 #00ffff;
}

.font-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.font-list-item {
    width: 100%;
    padding: 16px; /* Increased Breathing Room */
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.font-list-item:hover {
    background: #F9FAFB; /* Subtle Hover */
}

.font-list-item.active {
    background: rgba(0, 102, 255, 0.03);
    border-color: var(--studio-primary); /* Active Border */
}

.font-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.font-label {
    font-size: 11px;
    color: var(--studio-text-muted);
    font-family: var(--studio-font-sans);
    font-weight: 500;
}

.active-check-circle {
    width: 18px;
    height: 18px;
    background: var(--studio-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(0, 102, 255, 0.2);
}

.font-preview {
    font-size: 22px;
    color: var(--studio-text-main);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.font-no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--studio-text-muted);
    font-size: 13px;
    font-style: italic;
}

/* Custom scrollbar for font list */
.font-list-container::-webkit-scrollbar {
    width: 5px;
}

.font-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.font-list-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* ============================================
   COLOR PICKER - Pro Style with Hex Input
   ============================================ */

.studio-color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.studio-color-swatch {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 4px;
    border: 1px solid var(--prop-input-border);
    cursor: pointer;
    transition: all 0.1s ease;
    position: relative;
    flex-shrink: 0;
    outline: none;
    /* Checkerboard for transparency */
    background-image: 
        linear-gradient(45deg, #E5E5E5 25%, transparent 25%),
        linear-gradient(-45deg, #E5E5E5 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #E5E5E5 75%),
        linear-gradient(-45deg, transparent 75%, #E5E5E5 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.studio-color-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background-color: inherit;
}

.studio-color-swatch:hover {
    border-color: var(--prop-input-border-hover);
    transform: scale(1.05);
}

.studio-color-swatch:focus {
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

.studio-color-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Hex Input next to swatch */
.studio-color-hex-input {
    flex: 1;
    height: var(--prop-input-height);
    padding: 0 8px;
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background-color: var(--prop-input-bg);
    color: var(--prop-value-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.studio-color-hex-input:hover {
    border-color: var(--prop-input-border-hover);
}

.studio-color-hex-input:focus {
    outline: none;
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Opacity input */
.studio-color-opacity-input {
    width: 48px;
    height: var(--prop-input-height);
    padding: 0 4px;
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    background-color: var(--prop-input-bg);
    color: var(--prop-value-color);
    text-align: center;
    transition: border-color 0.15s ease;
}

.studio-color-opacity-input:focus {
    outline: none;
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* ============================================
   SLIDERS - Clean Modern Design
   
   All sliders use .enhanced-slider class.
   Background gradient is set via JS for the fill effect.
   ============================================ */

/* Base slider - reset browser defaults */
.enhanced-slider {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 6px;
    background: #E5E7EB;
    border-radius: 6px;
    outline: none;
    border: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

/* Webkit Track - transparent to show input background gradient */
.enhanced-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: transparent !important;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

/* Webkit Thumb - White circle with purple border */
.enhanced-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background: #FFFFFF !important;
    border: 2px solid #4F46E5 !important;
    border-radius: 50% !important;
    cursor: pointer;
    margin-top: -5px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.enhanced-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}

.enhanced-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    background: #4F46E5 !important;
    border-color: #4F46E5 !important;
}

/* Firefox Track */
.enhanced-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #E5E7EB;
    border-radius: 6px;
    cursor: pointer;
    border: none;
}

/* Firefox Progress (fill) */
.enhanced-slider::-moz-range-progress {
    height: 6px;
    background: #4F46E5;
    border-radius: 6px;
}

/* Firefox Thumb */
.enhanced-slider::-moz-range-thumb {
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    background: #FFFFFF !important;
    border: 2px solid #4F46E5 !important;
    border-radius: 50% !important;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Slider container with value display */
.slider-with-value {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    flex: 1;
}

.slider-with-value .enhanced-slider {
    flex: 1;
    min-width: 80px;
}

/* Slider value text display */
.slider-value-display {
    min-width: 36px;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    color: var(--prop-value-color, #1F2937);
    font-feature-settings: 'tnum' on, 'lnum' on;
    font-family: var(--studio-font-mono, 'SF Mono', 'Consolas', monospace);
    flex-shrink: 0;
}

/* ============================================
   COMPACT POSITION & SIZE GRID
   ============================================ */

.position-size-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.position-size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.z-index-row {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #F0F0F0;
}

.z-index-row .inline-input-wrapper {
    max-width: calc(50% - 3px);
}

/* Inline Input with label inside */
.inline-input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--prop-input-bg);
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    padding: 0 8px;
    height: var(--prop-input-height);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inline-input-wrapper:hover {
    border-color: var(--prop-input-border-hover);
}

.inline-input-wrapper:focus-within {
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.inline-input-label {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    margin-right: 6px;
    user-select: none;
    min-width: 10px;
}

.inline-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--prop-value-color);
    outline: none;
    min-width: 0;
    padding: 0;
    text-align: right;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

.inline-input::-webkit-outer-spin-button,
.inline-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inline-input[type=number] {
    -moz-appearance: textfield;
}

/* ============================================
   TOGGLE SWITCH - Compact
   ============================================ */

.toggle-switch {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background-color: #E5E7EB;
    border-radius: 9px;
    transition: background-color 0.15s ease;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #4F46E5;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(14px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}

/* ============================================
   ALIGNMENT TOGGLE GROUP
   ============================================ */

.alignment-toggle-group {
    display: flex;
    background-color: #F3F4F6;
    border-radius: 4px;
    padding: 2px;
    gap: 1px;
}

.alignment-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 24px;
    border: none;
    background-color: transparent;
    color: #9CA3AF;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.alignment-toggle-btn:hover {
    background-color: #FFFFFF;
    color: #374151;
}

.alignment-toggle-btn.active {
    background-color: #FFFFFF;
    color: #4F46E5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.alignment-toggle-btn i {
    font-size: 12px;
}

/* ============================================
   BUTTONS - Compact
   ============================================ */

.studio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.studio-button:focus {
    outline: 2px solid var(--prop-input-border-focus);
    outline-offset: 2px;
}

.studio-button:active {
    transform: scale(0.98);
}

.studio-button i {
    font-size: 14px;
}

.studio-button-primary {
    background-color: #4F46E5;
    color: white;
}

.studio-button-primary:hover {
    background-color: #4338CA;
}

.studio-button-secondary {
    background-color: #F8FAFC;
    color: #475569;
    border: 1.5px dashed #94A3B8;
    border-radius: 10px;
}

.studio-button-secondary:hover {
    background-color: #F1F5F9;
    border-color: #64748B;
    color: #334155;
}

.studio-button-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: #FFFFFF;
    color: #6B7280;
    border: 1px solid var(--prop-input-border);
    border-radius: 6px;
}

.studio-button-icon:hover {
    background-color: #F9FAFB;
    border-color: var(--prop-input-border-hover);
    color: #374151;
}

.studio-button-remove:hover {
    background-color: #FEF2F2;
    border-color: #EF4444;
    color: #EF4444;
}

/* ============================================
   IMAGE PICKER - Compact
   ============================================ */

.studio-image-picker-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.studio-image-preview-wrapper {
    position: relative;
    width: 100%;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--prop-input-border);
    background-color: #F9FAFB;
    outline: none;
}

.studio-image-preview-wrapper:hover {
    border-color: var(--prop-input-border-focus);
}

.studio-image-preview-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.studio-image-preview-bg.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F9FAFB;
}

/* Empty state icon handled by Phosphor icon in JS */
.studio-image-preview-bg.empty {
    color: var(--studio-text-light);
}

.studio-image-hover-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    transition: opacity 0.15s ease;
    opacity: 0;
}

.studio-image-preview-wrapper:hover .studio-image-hover-overlay {
    opacity: 1;
}

.studio-image-button-group {
    display: flex;
    gap: 6px;
}

.studio-image-button-group .studio-button-primary {
    flex: 1;
    height: 32px;
}

.studio-image-button-group .studio-button-icon {
    width: 32px;
    height: 32px;
}

/* ============================================
   BACKGROUND SECTION REFINEMENTS
   ============================================ */

.background-property-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.background-row-label {
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* Color Input Group - Swatch + Hex in one row */
.studio-color-picker-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.studio-color-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 2px 2px 6px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    transition: all 0.15s ease;
    cursor: pointer;
}

.studio-color-input-group:hover {
    border-color: #D1D5DB;
}

.studio-color-input-group:focus-within {
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.studio-color-swatch-small {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.studio-color-hex-text {
    width: 60px;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #374151;
    text-transform: uppercase;
    outline: none;
    cursor: text;
}

/* Image Dropzone Box */
.background-image-dropzone {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 180px;
    border: 2px dashed #E5E7EB;
    border-radius: 12px;
    background-color: #F9FAFB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.background-image-dropzone:hover {
    border-color: #3B82F6;
    background-color: #EFF6FF;
}

.background-image-dropzone.has-image {
    border-style: solid;
    border-color: #E5E7EB;
}

.background-image-dropzone i {
    font-size: 20px;
    color: #9CA3AF;
    transition: color 0.2s ease;
}

.background-image-dropzone:hover i {
    color: #3B82F6;
}

.background-image-dropzone span {
    font-size: 10px;
    font-weight: 600;
    color: #9CA3AF;
    transition: color 0.2s ease;
}

.background-image-dropzone:hover span {
    color: #3B82F6;
}

.background-image-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-image-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.background-image-dropzone:hover .background-image-actions {
    opacity: 1;
}

.bg-action-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #E5E7EB;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 12px;
}

.bg-action-btn:hover {
    color: #374151;
    border-color: #D1D5DB;
    background: white;
}

.bg-action-btn.delete:hover {
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Two-Row Slider Property */
.two-row-property {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.two-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.two-row-header label {
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
}

.two-row-value-wrapper {
    display: flex;
    align-items: center;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    padding: 0 6px;
    height: 20px;
}

.two-row-value-input {
    width: 32px;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    color: #374151;
    outline: none;
    font-family: 'SF Mono', 'Consolas', monospace;
}

.two-row-slider-container {
    width: 100%;
}

.studio-properties-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #9CA3AF;
    flex-grow: 1;
}

.studio-properties-empty i {
    font-size: 32px;
    margin-bottom: 12px;
    color: #D1D5DB;
}

.studio-properties-empty p {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    margin: 0 0 4px 0;
}

.studio-properties-empty-subtitle {
    font-size: 12px;
    color: #9CA3AF;
}

.studio-properties-hint {
    padding: 16px;
    text-align: center;
    color: #9CA3AF;
    font-size: 11px;
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.studio-properties-hint i {
    font-size: 12px;
    color: #4F46E5;
}

/* ============================================
   PRIZES LIST - Compact Single-Row Layout
   ============================================ */

.prizes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.studio-prize-item {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 10px;
    background-color: #F8FAFC;
    transition: all 0.15s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.studio-prize-item:hover {
    background-color: #F1F5F9;
}

.studio-prize-item.active {
    background-color: #EEF2FF;
    box-shadow: inset 0 0 0 2px #4F46E5;
}

/* MAIN ROW: Handle > Thumb > Name(flex) > Prob > Delete */
.prize-main-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    min-height: 56px;
}

.prize-drag-handle {
    width: 20px;
    color: #CBD5E1;
    cursor: grab;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prize-drag-handle:hover {
    color: #94A3B8;
}

.studio-prize-thumbnail {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 6px;
    background-color: #E2E8F0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.studio-prize-thumbnail:hover {
    transform: scale(1.05);
}

.studio-prize-thumbnail i {
    font-size: 16px;
    color: #94A3B8;
}

.studio-prize-name-input {
    flex: 1;
    height: 36px;
    padding: 6px 10px 4px 10px; /* Extra top padding for Hebrew text */
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.7);
    color: #1E293B;
    transition: all 0.15s ease;
    min-width: 0;
}

.studio-prize-name-input:hover {
    background-color: #FFFFFF;
}

.studio-prize-name-input:focus {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    outline: none;
}

.studio-prize-prob-wrapper {
    display: flex;
    align-items: center;
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0 8px;
    border-radius: 6px;
    height: 36px;
    flex-shrink: 0;
    min-width: 58px;
}

.studio-prize-prob-input {
    width: 28px;
    height: 36px;
    padding: 0;
    border: none;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    background-color: transparent;
    color: #374151;
    font-feature-settings: 'tnum' on;
}

.studio-prize-prob-input:focus {
    color: #4F46E5;
    outline: none;
}

.studio-prize-prob-input::-webkit-inner-spin-button,
.studio-prize-prob-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.studio-prize-prob-unit {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.studio-prize-delete-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #CBD5E1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.studio-prize-delete-btn:hover {
    background: #FEE2E2;
    color: #EF4444;
}

.studio-prize-delete-btn i {
    font-size: 14px;
}

/* EXPANDED ROW: Size Slider (only visible when active) */
.prize-expanded-row {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0 10px 10px 68px; /* Align with name input */
    animation: slideDown 0.15s ease;
}

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

.studio-prize-item.active .prize-expanded-row {
    display: flex;
}

.prize-size-label {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prize-size-slider {
    flex: 1;
    min-width: 60px;
}

.prize-size-input {
    width: 44px;
    height: 28px;
    padding: 0 6px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: #374151;
    font-feature-settings: 'tnum' on;
}

.prize-size-input:focus {
    outline: none;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.prize-size-input::-webkit-inner-spin-button,
.prize-size-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Probability Visual Bar */
.probability-visual-container {
    margin-top: 16px;
    padding: 12px;
    background-color: #F8FAFC;
    border-radius: 10px;
}

.probability-bar-track {
    height: 10px;
    background-color: #E2E8F0;
    border-radius: 5px;
    display: flex;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.probability-segment {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}

.probability-segment:first-child {
    border-radius: 5px 0 0 5px;
}

.probability-segment:last-child {
    border-radius: 0 5px 5px 0;
}

.probability-segment:only-child {
    border-radius: 5px;
}

.probability-segment:hover::after {
    content: attr(data-label);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1E293B;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    margin-bottom: 6px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.probability-segment.overflow {
    background-color: #EF4444 !important;
}

.probability-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.probability-total {
    font-size: 13px;
    font-weight: 700;
}

.probability-total.error { color: #EF4444; }
.probability-total.success { color: #10B981; }

/* ============================================
   VISUAL PICKERS (Thumbnail Grid)
   ============================================ */

.visual-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.visual-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background-color: #F3F4F6;
}

.visual-picker-item:hover {
    background-color: #E5E7EB;
}

.visual-picker-item.active {
    background-color: #EEF2FF;
    box-shadow: inset 0 0 0 2px #4F46E5;
}

.visual-picker-icon {
    font-size: 24px;
    color: #64748B;
    transition: all 0.15s ease;
}

.visual-picker-item:hover .visual-picker-icon {
    color: #475569;
}

.visual-picker-item.active .visual-picker-icon {
    color: #4F46E5;
    transform: scale(1.1);
}

.visual-picker-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-align: center;
}

.visual-picker-item.active .visual-picker-label {
    color: #4F46E5;
}

/* ============================================
   SCRUBBABLE INPUTS & GRIDS
   ============================================ */

.property-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.scrubbable-control {
    display: flex;
    align-items: center;
    background-color: #F3F4F6;
    border: none;
    border-radius: 8px;
    height: 36px;
    padding: 0 12px;
    transition: background-color 0.1s ease;
    cursor: ew-resize;
}

.scrubbable-control:hover {
    background-color: #E5E7EB;
}

.scrubbable-control:focus-within {
    background-color: #E5E7EB;
}

.scrubbable-control.is-scrubbing {
    background-color: #EEF2FF;
}

.scrubbable-control.is-scrubbing .scrubbable-label,
.scrubbable-control.is-scrubbing .scrubbable-value {
    color: #4F46E5;
}

.scrubbable-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    cursor: ew-resize;
    user-select: none;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 8px;
    transition: color 0.1s ease;
}

.scrubbable-value {
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    width: 48px;
    text-align: right;
    outline: none;
    padding: 0;
    font-feature-settings: 'tnum' on;
    cursor: ew-resize;
    transition: color 0.1s ease;
}

.scrubbable-value:focus {
    cursor: text;
}

.scrubbable-value::-webkit-inner-spin-button,
.scrubbable-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ============================================
   HELPER TEXT
   ============================================ */

.studio-property-row-with-helper {
    align-items: flex-start;
    margin-bottom: 10px;
}

.studio-control-area-with-helper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.studio-property-helper {
    font-size: 10px;
    color: #9CA3AF;
    line-height: 1.4;
    margin-top: 0;
}

/* ============================================
   SUB-HEADER
   ============================================ */

.studio-property-subheader {
    margin: 20px 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================
   FORM GROUPS
   ============================================ */

.studio-form-group {
    margin-bottom: 10px;
}

.studio-form-group label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--prop-label-color);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ============================================
   TEXTAREA
   ============================================ */

.studio-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 12px;
    background-color: var(--prop-input-bg);
    color: var(--prop-value-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    resize: vertical;
    min-height: 64px;
}

.studio-textarea:hover {
    border-color: var(--prop-input-border-hover);
}

.studio-textarea:focus {
    outline: none;
    border-color: var(--prop-input-border-focus);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* ============================================
   IMAGE UPLOAD - Clickable Thumbnail
   ============================================ */

.image-upload-row {
    flex-direction: column;
    gap: 8px;
}

.image-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    background-color: #F9FAFB;
    border: 1px solid var(--prop-input-border);
    transition: border-color 0.15s ease;
}

.image-preview-container:hover {
    border-color: var(--prop-input-border-focus);
}

.image-preview-thumbnail {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.image-preview-thumbnail.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Empty state icon handled by Phosphor icon in JS */
.image-preview-thumbnail.no-image {
    color: var(--studio-text-light);
}

.image-preview-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.image-preview-container:hover .image-preview-overlay {
    opacity: 1;
}

.image-preview-overlay i {
    font-size: 20px;
    color: white;
}

.image-preview-overlay span {
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.image-upload-controls {
    display: flex;
    gap: 6px;
}

.image-replace-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    height: 28px;
    background: var(--prop-input-bg);
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.image-replace-btn:hover {
    background: #F9FAFB;
    border-color: var(--prop-input-border-hover);
    color: #374151;
}

.image-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--prop-input-border);
    border-radius: 4px;
    color: #9CA3AF;
    cursor: pointer;
    transition: all 0.15s ease;
}

.image-delete-btn:hover {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #EF4444;
}

/* ============================================
   SHADOW PREVIEW
   ============================================ */

.shadow-preview-box {
    width: 48px;
    height: 48px;
    background-color: #FFFFFF;
    border-radius: 6px;
    margin: 0 auto 10px;
    border: 1px solid #F0F0F0;
}

/* ============================================
   CHECKBOX STYLING
   ============================================ */

.studio-property-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4F46E5;
    cursor: pointer;
    border-radius: 3px;
}

/* ============================================
   PROPERTIES HEADER (Element Info)
   ============================================ */

.properties-header {
    padding: 10px 14px;
    border-bottom: 1px solid #F0F0F0;
    background-color: #FFFFFF;
}

.properties-header h2 {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.properties-header h2 i {
    font-size: 12px;
    color: #9CA3AF;
}

/**
 * Studio Main CSS - Element-specific and Preview Mode Styles
 * 
 * This file contains:
 * - Image element styles (placeholder, loading, error states)
 * - Preview mode overrides
 * - Responsive breakpoints for studio layout
 * 
 * Note: Base element styles are in canvas.css.
 * This file provides extended functionality and mode-specific overrides.
 * 
 * @see canvas.css for base element styles
 * @see CanvasRenderer.ts for JavaScript implementation
 */

/* ============================================
   IMAGE ELEMENT - Extended Styles
   Background shows through for transparent images.
   Hidden in preview/production modes.
   ============================================ */
.studio-element.image {
    background-color: #f8f9fa; /* Placeholder background - only visible when no image is loaded */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important;
    border: 1px dashed #ced4da; /* Default border for empty image */
    min-width: 50px;
    min-height: 50px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* Subtle drop shadow */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Only transition specific properties, not transform */
}

/* In preview and production modes, hide the background when image is loaded */
.preview-mode .studio-element.image,
.production-mode .studio-element.image {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.studio-element.image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Or contain, depending on desired behavior */
    user-drag: none; /* Prevent native image dragging */
    -webkit-user-drag: none;
    pointer-events: none; /* Prevent img from capturing drag events */
    border-radius: 8px; /* Match parent's border radius */
}

.studio-element.image.selected {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

.studio-element.image.dragging {
    border-style: dashed;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0.8;
}

.studio-element.image:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

/* Image Placeholder on Canvas (Enhanced) */

/* Loading state styles for Canvas Placeholder */
.canvas-image-placeholder.loading {
    background: #f1f5f9;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.5) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.5) 75%,
        transparent 75%,
        transparent
    );
    background-size: 30px 30px;
    animation: loading-stripes 1s linear infinite;
    border-color: #3b82f6;
    color: #3b82f6;
}

@keyframes loading-stripes {
    from { background-position: 0 0; }
    to { background-position: 30px 0; }
}

/* Error state styling for Canvas Placeholder */
.canvas-image-placeholder.error {
    background: #fff1f2;
    border-color: #fecaca;
    color: #e11d48;
}

.canvas-image-placeholder.error i {
    color: #e11d48;
}

.error-message,
.canvas-image-placeholder .error-message {
    font-size: 2.55rem;
    color: #e11d48;
    margin-top: 1rem;
    font-weight: 600;
}

/* Image Placeholder on Canvas - Minimal & Clean */
.canvas-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dashed #e2e8f0;
    color: #64748b;
    position: absolute;
    top: 0;
    left: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    word-wrap: break-word;
    user-select: none;
    z-index: 10;
    background-color: #f8fafc;
    border-radius: 12px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Force children pointer events for Canvas Placeholder */
.canvas-image-placeholder * {
    pointer-events: auto !important;
}

/* Click target pseudo-element for Canvas Placeholder */
.canvas-image-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

/* Icon styles for Canvas Placeholder - Professional & Subtle */
.canvas-image-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: #94a3b8;
    opacity: 0.7;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

/* Text styles for Canvas Placeholder */
.canvas-image-placeholder .canvas-placeholder-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    position: relative;
    z-index: 2;
}

.canvas-image-placeholder .canvas-main-text {
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
    margin: 0;
    line-height: 1.2;
}

.canvas-image-placeholder .canvas-sub-text {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.2;
}

/* Hover states for Canvas Placeholder - Soft & Modern */
.canvas-image-placeholder:hover {
    border-color: #3b82f6;
    background-color: #f0f7ff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.canvas-image-placeholder:hover i {
    color: #3b82f6;
    opacity: 1;
    transform: scale(1.05);
}

.canvas-image-placeholder:hover .canvas-main-text {
    color: #2563eb;
}

/* Active state for Canvas Placeholder */
.canvas-image-placeholder:active {
    transform: scale(0.98);
    background-color: #eff6ff;
}

/* Focus state for Canvas Placeholder */
.canvas-image-placeholder:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Size-based styling for small containers */
.studio-element.image[style*="width: 10"],
.studio-element.image[style*="width: 9"],
.studio-element.image[style*="width: 8"],
.studio-element.image[style*="width: 7"],
.studio-element.image[style*="height: 10"],
.studio-element.image[style*="height: 9"],
.studio-element.image[style*="height: 8"],
.studio-element.image[style*="height: 7"] {
    padding: 0.75rem;
}

.studio-element.image[style*="width: 10"] .canvas-sub-text,
.studio-element.image[style*="width: 9"] .canvas-sub-text,
.studio-element.image[style*="width: 8"] .canvas-sub-text,
.studio-element.image[style*="width: 7"] .canvas-sub-text,
.studio-element.image[style*="height: 10"] .canvas-sub-text,
.studio-element.image[style*="height: 9"] .canvas-sub-text,
.studio-element.image[style*="height: 8"] .canvas-sub-text,
.studio-element.image[style*="height: 7"] .canvas-sub-text {
    display: none;
}

.studio-element.image[style*="width: 10"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 9"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 8"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 7"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 10"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 9"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 8"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 7"] .canvas-image-placeholder i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

/* For extremely small containers, just show icon */
.studio-element.image[style*="width: 6"],
.studio-element.image[style*="width: 5"],
.studio-element.image[style*="width: 4"],
.studio-element.image[style*="width: 3"],
.studio-element.image[style*="width: 2"],
.studio-element.image[style*="width: 1"],
.studio-element.image[style*="height: 6"],
.studio-element.image[style*="height: 5"],
.studio-element.image[style*="height: 4"],
.studio-element.image[style*="height: 3"],
.studio-element.image[style*="height: 2"],
.studio-element.image[style*="height: 1"] {
    padding: 0.25rem;
}

.studio-element.image[style*="width: 6"] .canvas-placeholder-text,
.studio-element.image[style*="width: 5"] .canvas-placeholder-text,
.studio-element.image[style*="width: 4"] .canvas-placeholder-text,
.studio-element.image[style*="width: 3"] .canvas-placeholder-text,
.studio-element.image[style*="width: 2"] .canvas-placeholder-text,
.studio-element.image[style*="width: 1"] .canvas-placeholder-text,
.studio-element.image[style*="height: 6"] .canvas-placeholder-text,
.studio-element.image[style*="height: 5"] .canvas-placeholder-text,
.studio-element.image[style*="height: 4"] .canvas-placeholder-text,
.studio-element.image[style*="height: 3"] .canvas-placeholder-text,
.studio-element.image[style*="height: 2"] .canvas-placeholder-text,
.studio-element.image[style*="height: 1"] .canvas-placeholder-text {
    display: none;
}

.studio-element.image[style*="width: 6"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 5"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 4"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 3"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 2"] .canvas-image-placeholder i,
.studio-element.image[style*="width: 1"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 6"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 5"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 4"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 3"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 2"] .canvas-image-placeholder i,
.studio-element.image[style*="height: 1"] .canvas-image-placeholder i {
    font-size: 1.25rem;
    margin: 0;
}

/* Preview Mode - Only affects the canvas/phone area, layout stays the same */
#studio-container.preview-mode {
    /* Layout stays the same - sidebar and properties panel remain visible */
}

/* Blur sidebars and resizers in preview mode to indicate they are inactive */
#studio-container.preview-mode .studio-sidebar,
#studio-container.preview-mode .studio-properties-panel,
#studio-container.preview-mode .studio-sidebar-resizer,
#studio-container.preview-mode .studio-properties-panel-resizer {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Style the active preview button to indicate preview mode is on */
.toolbar-preview-btn.active {
    background: linear-gradient(135deg, #34a853 0%, #0f9d58 100%) !important;
    color: white !important;
    border-color: #34a853 !important;
    font-weight: 600;
}

#studio-container.preview-mode .toolbar-section.left,
#studio-container.preview-mode .toolbar-save-btn,
#studio-container.preview-mode .dropdown {
    filter: blur(5px);
    pointer-events: none;
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.studio-toolbar .toolbar-button.preview-active:hover {
    background: linear-gradient(135deg, #2e9549 0%, #0d8a4d 100%) !important;
}

/* Disable any extra borders */
.studio-canvas::after {
    display: none;
}

/* Ensure all elements can be visible outside canvas bounds */
.studio-element {
    overflow: visible !important;
}

#studio-container.preview-mode .studio-element {
    border-color: transparent; /* Hide all borders */
    cursor: default; /* No move cursor */
    pointer-events: auto; /* Allow interaction with content if needed */
}

#studio-container.preview-mode .studio-element:hover {
    border-color: transparent; /* Still hide border on hover */
}

#studio-container.preview-mode .studio-element.selected {
    /* No selection effect */
}

#studio-container.preview-mode .resize-handle {
    display: none !important;
}

#studio-container.preview-mode .studio-layer-controls {
    display: none !important;
}

/* ============================================
   INNER IMAGE CONTAINER
   ============================================ */

/* Ensure the inner container also clips the image */
.image-inner-container {
    width: 100%;
    height: 100%;
    border-radius: inherit; /* Inherit radius from parent */
    overflow: hidden;      /* Clip the content (the img) */
    position: relative;    /* Needed if placeholder is absolutely positioned inside */
}

/* ============================================
   RESPONSIVE PANEL WIDTHS
   Note: Main responsive collapse logic is in base.css
   These rules adjust panel sizing at different breakpoints
   ============================================ */

/* At 1400px: Slightly reduce panel widths */
@media (max-width: 1400px) {
    .studio-sidebar:not(.collapsed) {
        width: 280px;
    }
    
    .studio-properties-panel:not(.collapsed) {
        width: 380px;
    }
}

/* At 1200px: Further reduce panel widths */
@media (max-width: 1200px) {
    .studio-sidebar:not(.collapsed) {
        width: 260px;
    }
    
    .studio-properties-panel:not(.collapsed) {
        width: 360px;
    }
    
    /* Reduce padding in panels */
    .studio-panel {
        padding: 12px;
    }
}

/* At 992px: Compact mode for panels */
@media (max-width: 992px) {
    .studio-sidebar:not(.collapsed) {
        width: 240px;
        min-width: 180px;
    }
    
    .studio-properties-panel:not(.collapsed) {
        width: 340px;
        min-width: 300px;
    }
    
    /* Full width canvas */
    .studio-canvas-container {
        padding: 16px 8px;
    }
    
    /* Tabs become smaller */
    .tab {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* At 768px: Mobile optimization */
@media (max-width: 768px) {
    /* Adjust buttons to be more touch-friendly */
    .studio-button {
        padding: 10px 16px;
        margin: 4px;
    }
    
    /* Make sure canvas is fully visible */
    .studio-canvas {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Add some space around the canvas */
    .studio-canvas-container {
        padding: 8px 4px;
    }
}

/* Prize Item Selection */
.studio-prize-item {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.studio-prize-item:hover {
    background-color: #f8fafc;
}

.studio-prize-item.active {
    background-color: #f0f7ff;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.studio-prize-item.active .studio-prize-header {
    background-color: #e0f0ff;
    color: #2563eb;
}

@media (max-width: 576px) {
    /* Mobile-first design */
    
    /* Make tabs full width for easier touch */
    .tab {
        flex: 1;
        text-align: center;
        min-width: auto;
    }
    
    /* Reduce even more padding */
    .studio-canvas-container {
        padding: 4px 2px;
        min-width: 200px;
    }
    
    /* Handle small screens */
    #studio-container.preview-mode .studio-canvas {
        width: 100% !important;
        max-width: 100% !important;
    }
} 
/**
 * Publish Panel CSS - Premium Edition
 * 
 * A stunning, modern design for the campaign distribution dashboard.
 * Features: Glass morphism, gradient accents, premium animations,
 * sophisticated depth, and refined micro-interactions.
 */

/* ============================================
   DESIGN TOKENS - Premium Palette
   ============================================ */

:root {
    --pub-primary: #6366f1;
    --pub-primary-dark: #4f46e5;
    --pub-primary-light: rgba(99, 102, 241, 0.12);
    --pub-primary-glow: rgba(99, 102, 241, 0.25);
    
    --pub-success: #10b981;
    --pub-success-light: rgba(16, 185, 129, 0.12);
    
    --pub-warning: #f59e0b;
    --pub-warning-light: rgba(245, 158, 11, 0.12);
    
    --pub-danger: #ef4444;
    --pub-danger-light: rgba(239, 68, 68, 0.12);
    
    --pub-bg-page: #E8E8E8;
    --pub-bg-card: #ffffff;
    --pub-bg-elevated: linear-gradient(180deg, #ffffff 0%, #fefefe 100%);
    --pub-bg-input: #f8fafc;
    
    --pub-text-primary: #0f172a;
    --pub-text-secondary: #475569;
    --pub-text-muted: #94a3b8;
    --pub-text-light: #cbd5e1;
    
    --pub-border: rgba(15, 23, 42, 0.06);
    --pub-border-hover: rgba(15, 23, 42, 0.12);
    
    --pub-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --pub-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
    --pub-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    --pub-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
    
    --pub-radius-sm: 8px;
    --pub-radius-md: 12px;
    --pub-radius-lg: 16px;
    --pub-radius-xl: 20px;
}

.publish-panel {
    min-height: 0;
}

/* ============================================
   PUBLISH PANEL CONTAINER - New Stacked Layout
   ============================================ */

.publish-panel {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack: tabs row on top, body row below */
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    background: var(--pub-bg-page);
    overflow: hidden;
    min-height: 0;
    position: relative;
}

/* Full-width tabs row at the top */
.publish-tabs-row {
    flex-shrink: 0;
    padding: 16px 24px 0 24px;
    position: relative;
    z-index: 100;
}

/* Body row: sidebar + main content side by side */
.publish-body-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.publish-side-container {
    width: 280px; /* Slightly narrower to give more room */
    flex-shrink: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 100;
}

.publish-main-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 40px 0;
    min-width: 0;
}

/* Subtle grid pattern background */
.publish-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(99, 102, 241, 0.03) 1px, transparent 0);
    background-size: 32px 32px;
    pointer-events: none;
}

.publish-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Mount container for React simulator */
.grow-simulator-mount {
    width: 100%;
    min-height: 500px;
}

/* ============================================
   BENTO PANELS - Premium Cards
   ============================================ */

.publish-bento-panel {
    background: var(--pub-bg-elevated);
    border-radius: var(--pub-radius-xl);
    box-shadow: var(--pub-shadow-md);
    border: 1px solid var(--pub-border);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.publish-bento-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.publish-bento-panel:hover {
    transform: translateY(-3px);
    box-shadow: var(--pub-shadow-lg);
}

/* ============================================
   MERGED CARDS - Split Layout
   ============================================ */

.publish-card-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 32px;
    padding: 24px;
}

.publish-card-content-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.publish-card-preview-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 32px;
    border-left: 1px solid var(--pub-border);
    min-width: 0;
}

/* Distribution Specifics */
.publish-distribution-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Social Specifics */
.publish-social-mockup-wrapper {
    width: 100%;
}

@media (max-width: 1100px) {
    /* On smaller screens, hide description in tabs */
    .publish-tab-desc {
        display: none;
    }
    
    .publish-tab-icon {
        width: 36px;
        height: 36px;
    }
    
    .publish-tab-icon i {
        font-size: 18px;
    }
    
    .publish-tab {
        padding: 10px 14px;
        gap: 10px;
    }
}

@media (max-width: 900px) {
    /* Stack body row vertically on mobile */
    .publish-body-row {
        flex-direction: column;
    }
    
    .publish-side-container {
        width: 100%;
        padding: 16px;
    }
    
    .publish-main-container {
        padding: 16px;
    }
    
    .publish-tabs-row {
        padding: 12px 16px 0 16px;
    }
    
    .publish-card-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .publish-card-preview-side {
        padding-left: 0;
        padding-top: 24px;
        border-left: none;
        border-top: 1px solid var(--pub-border);
    }
}

/* ============================================
   HORIZONTAL TABS - Distribution Method (Full Width)
   ============================================ */

.publish-tabs-bar {
    display: flex;
    gap: 10px;
    background: var(--pub-bg-card);
    padding: 8px;
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow-md);
    border: 1px solid var(--pub-border);
}

.publish-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: transparent;
    border: none;
    border-radius: var(--pub-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0; /* Allow flex shrink for text truncation */
}

.publish-tab:hover {
    background: var(--pub-bg-input);
}

.publish-tab:hover .publish-tab-label {
    color: var(--pub-text-primary);
}

.publish-tab.active {
    background: var(--pub-primary);
    box-shadow: 0 2px 12px var(--pub-primary-glow);
}

.publish-tab-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pub-radius-sm);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.publish-tab-icon i {
    font-size: 20px;
}

.publish-tab.active .publish-tab-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

.publish-tab-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Allow text truncation */
    text-align: left;
}

.publish-tab-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pub-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publish-tab.active .publish-tab-label {
    color: white;
}

.publish-tab-desc {
    font-size: 12px;
    font-weight: 400;
    color: var(--pub-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publish-tab.active .publish-tab-desc {
    color: rgba(255, 255, 255, 0.75);
}

/* Legacy icon styles (backwards compat) */
.publish-tab > i {
    font-size: 18px;
    color: var(--pub-text-secondary);
}

.publish-tab.active > i {
    color: white;
}

/* ============================================
   COMPACT CARDS - Input/Output Layout
   ============================================ */

.publish-card {
    background: var(--pub-bg-card);
    border-radius: var(--pub-radius-lg);
    box-shadow: var(--pub-shadow-sm);
    border: 1px solid var(--pub-border);
    padding: 20px;
}

.publish-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin-bottom: 8px;
}

.publish-card-header i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--pub-primary);
    background: var(--pub-primary-light);
    border-radius: var(--pub-radius-sm);
}

.publish-card-desc {
    font-size: 13px;
    color: var(--pub-text-muted);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

/* Link Card */
.publish-link-card .publish-link-container {
    margin-top: 0;
}

/* Social Settings Card */
.publish-social-card-settings .publish-social-fields {
    gap: 14px;
}

/* Preview Card (Right Column) */
.publish-preview-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

/* QR Row - Horizontal compact */
.publish-qr-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--pub-border);
}

.publish-qr-mini {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: white;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.publish-qr-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.publish-qr-placeholder {
    font-size: 32px;
    color: var(--pub-text-light);
}

.publish-qr-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.publish-qr-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--pub-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.publish-qr-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.publish-qr-sep {
    color: var(--pub-text-light);
    font-size: 11px;
}

/* Social Preview Box */
.publish-social-preview-box {
    flex: 1;
}

.publish-social-preview-box.no-qr {
    padding-top: 0;
}

.publish-preview-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pub-text-muted);
    margin-bottom: 10px;
}

.publish-preview-label i {
    font-size: 14px;
}

/* ============================================
   REALISTIC MOCKUPS
   ============================================ */

.publish-mockup-perspective {
    perspective: 1000px;
    width: 100%;
    padding: 10px;
}

/* Facebook Style Social Mockup */
.publish-social-mockup-realistic {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    overflow: hidden;
    border: 1px solid #eef0f2;
    text-align: left;
}

.publish-fb-header {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.publish-fb-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.publish-fb-meta {
    flex: 1;
}

.publish-fb-name {
    height: 8px;
    width: 80px;
    background: #f1f5f9;
    border-radius: 4px;
    margin-bottom: 6px;
}

.publish-fb-date {
    height: 6px;
    width: 40px;
    background: #f8fafc;
    border-radius: 3px;
}

.publish-social-mockup-image {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, var(--pub-bg-input) 0%, #e2e8f0 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-text-light);
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.publish-social-mockup-content {
    padding: 12px 16px;
    background: #f8fafc;
}

.publish-social-mockup-url {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.publish-social-mockup-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publish-social-mockup-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* QR Table Tent Mockup */
.publish-qr-mockup-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.publish-table-tent {
    width: 160px;
    height: 200px;
    background: white;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.1),
        0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotateX(10deg) rotateY(-5deg);
    transition: transform 0.5s ease;
    border: 1px solid #eee;
}

.publish-table-tent:hover {
    transform: rotateX(0deg) rotateY(0deg);
}

.publish-tent-logo {
    font-size: 12px;
    font-weight: 800;
    color: #6366f1;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.publish-tent-qr-wrapper {
    width: 100px;
    height: 100px;
    padding: 5px;
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 4px;
}

.publish-tent-qr {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.publish-tent-text {
    margin-top: 15px;
    text-align: center;
}

.publish-tent-headline {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.publish-tent-sub {
    font-size: 9px;
    color: #64748b;
}

.publish-tent-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #f1f5f9;
    border-radius: 0 0 4px 4px;
}

/* ============================================
   PANEL 2: DYNAMIC CONTENT - Enhanced
   ============================================ */

.publish-content-panel {
    padding: 0;
}

/* Section Styles */
.publish-section {
    padding: 24px 28px;
}

.publish-section:not(:last-child) {
    border-bottom: 1px solid var(--pub-border);
}

.publish-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin-bottom: 8px;
}

.publish-section-header i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--pub-primary);
    background: linear-gradient(135deg, var(--pub-primary-light) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--pub-radius-sm);
}

.publish-section-subheader {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-text-secondary);
    margin-bottom: 12px;
}

.publish-section-desc {
    font-size: 14px;
    color: var(--pub-text-muted);
    margin: 0 0 20px 0;
    line-height: 1.6;
}

/* Link Container - Compact Input */
.publish-link-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-md);
    padding: 4px;
    transition: all 0.2s ease;
}

.publish-link-container:focus-within {
    border-color: var(--pub-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.publish-link-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--pub-text-dark);
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
}

.publish-link-input::placeholder {
    color: var(--pub-text-muted);
}

.publish-link-input-email {
    font-size: 11px;
}

.publish-link-actions {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}

/* Action buttons for link container */
.publish-btn-action {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    color: var(--pub-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.publish-btn-action::after {
    content: 'Copied!';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #0f172a;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.publish-btn-action.copied::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.publish-btn-action:hover {
    background: var(--pub-primary);
    color: white;
    border-color: var(--pub-primary);
}

.publish-btn-action.copied {
    background: var(--pub-success);
    color: white;
    border-color: var(--pub-success);
}

.publish-btn-action i {
    font-size: 16px;
}

/* Legacy copy button (keep for backward compat) */
.publish-btn-copy {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    color: var(--pub-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.publish-btn-copy::after {
    content: 'Copied!';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #0f172a;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}

.publish-btn-copy.copied::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.publish-btn-copy:hover {
    background: var(--pub-primary);
    color: white;
}

.publish-btn-copy.copied {
    background: var(--pub-success);
    color: white;
    border-color: var(--pub-success);
}

/* Buttons - Compact */
.publish-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    height: 36px;
    border: none;
    border-radius: var(--pub-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    white-space: nowrap;
}

.publish-btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--pub-bg-card);
    color: var(--pub-text-secondary);
    border-radius: var(--pub-radius-sm);
    box-shadow: var(--pub-shadow-sm);
}

.publish-btn-icon:hover {
    background: var(--pub-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--pub-primary-glow);
}

.publish-btn-icon i {
    font-size: 18px;
}

.publish-btn-primary {
    background: linear-gradient(135deg, var(--pub-primary) 0%, var(--pub-primary-dark) 100%);
    color: white;
    box-shadow: 0 2px 8px var(--pub-primary-glow);
}

.publish-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--pub-primary-glow);
}

.publish-btn-primary:active {
    transform: translateY(0);
}

.publish-btn-primary.disabled,
.publish-btn-primary:disabled {
    background: var(--pub-text-light);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.publish-btn-secondary {
    background: var(--pub-bg-card);
    color: var(--pub-text-primary);
    border: 1.5px solid var(--pub-border);
    box-shadow: var(--pub-shadow-sm);
}

.publish-btn-secondary:hover {
    border-color: var(--pub-border-hover);
    background: var(--pub-bg-input);
}

.publish-btn-full {
    width: 100%;
}

.publish-btn-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--pub-primary);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.publish-btn-link:hover {
    color: var(--pub-primary-dark);
}

/* Helper Text - Enhanced */
.publish-helper-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--pub-text-secondary);
    margin-top: 16px;
    padding: 16px 18px;
    background: linear-gradient(135deg, var(--pub-primary-light) 0%, rgba(99, 102, 241, 0.03) 100%);
    border-radius: var(--pub-radius-md);
    border: 1px solid rgba(99, 102, 241, 0.1);
    line-height: 1.5;
}

.publish-helper-text i {
    font-size: 18px;
    color: var(--pub-primary);
    flex-shrink: 0;
}

.publish-helper-text .publish-link {
    color: var(--pub-primary);
    text-decoration: none;
    font-weight: 600;
}

.publish-helper-text .publish-link:hover {
    text-decoration: underline;
}

/* ============================================
   QR CODE SECTION - Premium Design
   ============================================ */

.publish-qr-container {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.publish-qr-wrapper {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--pub-border);
    border-radius: var(--pub-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    position: relative;
    box-shadow: 
        var(--pub-shadow-md),
        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.publish-qr-wrapper::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent,
        var(--pub-primary-light),
        transparent 30%
    );
    animation: qr-glow-rotate 8s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.publish-qr-wrapper:hover::before {
    opacity: 1;
}

@keyframes qr-glow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.publish-qr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border-radius: var(--pub-radius-sm);
}

.publish-qr-placeholder {
    font-size: 14px;
    color: var(--pub-text-muted);
    text-align: center;
}

.publish-qr-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 140px;
}

.publish-qr-info p {
    font-size: 14px;
    color: var(--pub-text-muted);
    margin: 0 0 20px 0;
    line-height: 1.6;
}

.publish-qr-downloads {
    display: flex;
    align-items: center;
    gap: 12px;
}

.publish-qr-download-label {
    font-size: 13px;
    color: var(--pub-text-secondary);
    font-weight: 600;
}

.publish-qr-separator {
    color: var(--pub-text-light);
    font-size: 12px;
}

/* ============================================
   SOCIAL SHARING SECTION - Collapsible
   ============================================ */

.publish-section-collapsible {
    padding: 0 !important;
    border-bottom: none !important;
}

.publish-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 20px 28px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.publish-section-toggle:hover {
    background: var(--pub-bg-input);
}

.publish-section-toggle .publish-section-header {
    margin-bottom: 0;
}

.publish-section-toggle > i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--pub-text-muted);
    background: var(--pub-bg-input);
    border-radius: var(--pub-radius-sm);
    transition: all 0.25s ease;
}

.publish-section-collapsible.expanded .publish-section-toggle > i {
    transform: rotate(180deg);
    background: var(--pub-primary-light);
    color: var(--pub-primary);
}

.publish-section-collapsible .publish-section-desc {
    padding: 0 28px;
    margin-bottom: 0;
}

.publish-section-collapsible.expanded .publish-section-desc {
    margin-bottom: 20px;
}

.publish-social-editor {
    display: flex;
    gap: 28px;
    padding: 0 28px 28px;
    border-top: 1px solid var(--pub-border);
    margin-top: 16px;
    padding-top: 24px;
}

.publish-social-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.publish-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.publish-field-row {
    flex-direction: row;
    align-items: center;
}

.publish-field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.publish-field-input,
.publish-field-textarea {
    padding: 10px 12px;
    background: var(--pub-bg-input);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm);
    font-size: 13px;
    color: var(--pub-text-primary);
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
}

.publish-field-input:focus,
.publish-field-textarea:focus {
    border-color: var(--pub-primary);
    background: var(--pub-bg-card);
    box-shadow: 0 0 0 3px var(--pub-primary-light);
}

.publish-field-textarea {
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.publish-field-hint {
    font-size: 11px;
    color: var(--pub-text-light);
}

.publish-image-upload {
    display: flex;
    align-items: center;
    gap: 14px;
}

.publish-image-preview {
    width: 88px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border);
}

.publish-image-placeholder {
    width: 88px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-bg-input);
    border: 2px dashed var(--pub-border);
    border-radius: var(--pub-radius-sm);
    color: var(--pub-text-light);
    transition: all 0.2s ease;
}

.publish-image-placeholder:hover {
    border-color: var(--pub-primary);
    color: var(--pub-primary);
}

.publish-image-placeholder i {
    font-size: 22px;
}

/* Compact Image Upload */
.publish-image-upload-compact {
    display: flex;
    align-items: center;
    gap: 12px;
}

.publish-image-preview-sm {
    width: 64px;
    height: 34px;
    object-fit: cover;
    border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border);
}

.publish-image-placeholder-sm {
    width: 64px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-bg-input);
    border: 2px dashed var(--pub-border);
    border-radius: var(--pub-radius-sm);
    color: var(--pub-text-light);
    font-size: 18px;
}

.publish-btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
}

/* Platform Chips */
.publish-platform-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.publish-platform-chip {
    padding: 8px 14px;
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-full);
    background: white;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pub-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.publish-platform-chip:hover {
    border-color: var(--pub-primary);
    color: var(--pub-primary);
}

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

/* Social Preview Card - Enhanced */
.publish-social-preview {
    width: 240px;
    flex-shrink: 0;
}

.publish-social-preview-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--pub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.publish-social-card {
    background: var(--pub-bg-card);
    border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-md);
    overflow: hidden;
    box-shadow: var(--pub-shadow-md);
    transition: all 0.3s ease;
}

.publish-social-card:hover {
    transform: scale(1.02);
    box-shadow: var(--pub-shadow-lg);
}

.publish-social-card-image {
    width: 100%;
    height: 126px;
    background: linear-gradient(135deg, var(--pub-bg-input) 0%, #e2e8f0 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-text-light);
}

.publish-social-card-image i {
    font-size: 36px;
}

.publish-social-card-content {
    padding: 14px 16px;
}

.publish-social-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.publish-social-card-desc {
    font-size: 12px;
    color: var(--pub-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.publish-social-card-url {
    font-size: 11px;
    color: var(--pub-text-light);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.publish-refresh-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
}

.publish-refresh-preview i {
    font-size: 14px;
}

/* ============================================
   EMAIL PLATFORM CHIPS - Enhanced
   ============================================ */

.publish-platform-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.publish-platform-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--pub-bg-card);
    border: 1.5px solid var(--pub-border);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pub-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--pub-shadow-sm);
}

.publish-platform-chip:hover {
    border-color: var(--pub-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--pub-shadow-md);
}

.publish-platform-chip.active {
    background: var(--pub-primary-light);
    border-color: var(--pub-primary);
    color: var(--pub-primary);
    box-shadow: 0 0 0 4px var(--pub-primary-light);
}

.publish-chip-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--pub-border);
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.publish-chip-radio.checked {
    border-color: var(--pub-primary);
    border-width: 2px;
}

.publish-chip-radio.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--pub-primary);
    border-radius: 50%;
}

/* ============================================
   INTEGRATION STATUS - Enhanced
   ============================================ */

.publish-integration-status {
    padding: 20px;
    border-radius: var(--pub-radius-lg);
    margin-top: 20px;
}

.publish-integration-connected {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--pub-success-light) 0%, rgba(16, 185, 129, 0.03) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.publish-integration-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-bg-card);
    border-radius: var(--pub-radius-md);
    box-shadow: var(--pub-shadow-sm);
}

.publish-integration-icon i {
    font-size: 24px;
    color: var(--pub-success);
}

.publish-integration-info {
    flex: 1;
}

.publish-integration-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin-bottom: 4px;
}

.publish-integration-domain {
    font-size: 13px;
    color: var(--pub-text-muted);
}

.publish-integration-empty {
    background: linear-gradient(135deg, var(--pub-warning-light) 0%, rgba(245, 158, 11, 0.03) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    text-align: center;
    padding: 36px 28px;
}

.publish-integration-empty-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-bg-card);
    border-radius: var(--pub-radius-lg);
    margin: 0 auto 20px;
    box-shadow: var(--pub-shadow-md);
}

.publish-integration-empty-icon i {
    font-size: 32px;
    color: var(--pub-warning);
}

.publish-integration-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin-bottom: 10px;
}

.publish-integration-empty-desc {
    font-size: 14px;
    color: var(--pub-text-muted);
    margin: 0 0 24px 0;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.publish-integration-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* ============================================
   PANEL 3: STATUS BAR - Left Floating Sidebar
   ============================================ */

.publish-status-panel {
    position: sticky; /* Sticky relative to its sidebar container */
    top: 24px;
    
    /* Vertical layout */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 24px;
    width: 100%; /* Take full width of sidebar container */
    
    /* Glassy Card styling */
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Layered shadow for premium lift - floating on air */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    z-index: 100;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--pub-radius-xl);
    transition: box-shadow 0.3s ease;
}

.publish-status-panel:hover {
    /* Slightly elevated on hover */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 10px 15px -3px rgba(0, 0, 0, 0.06),
        0 20px 25px -5px rgba(0, 0, 0, 0.04);
}

.publish-status-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.publish-status-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Pulsing Status Dot */
.publish-status-dot-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.publish-status-dot-draft { background: #94a3b8; }
.publish-status-dot-live { 
    background: #10b981;
    box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
    animation: status-pulse 2s infinite;
}

@keyframes status-pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.publish-btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 
        0 4px 12px var(--pub-primary-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: none;
}

.publish-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px var(--pub-primary-glow);
}

.publish-status-draft {
    background: var(--pub-bg-input);
    color: var(--pub-text-secondary);
    border: 1px solid var(--pub-border);
}

.publish-status-draft i {
    color: var(--pub-text-muted);
}

.publish-status-active {
    background: var(--pub-success-light);
    color: var(--pub-success);
    border: 1px solid rgba(16, 185, 129, 0.2);
    animation: pulse-success 2s ease-in-out infinite;
}

@keyframes pulse-success {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.publish-status-active i {
    font-size: 8px;
}

.publish-status-paused {
    background: var(--pub-warning-light);
    color: var(--pub-warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.publish-status-ended {
    background: var(--pub-bg-input);
    color: var(--pub-text-muted);
    border: 1px solid var(--pub-border);
}

.publish-status-ended i {
    color: var(--pub-text-light);
}

.publish-status-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    color: var(--pub-text-muted);
}

.publish-status-dates,
.publish-status-limit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--pub-bg-input);
    border-radius: var(--pub-radius-sm);
    width: 100%;
}

.publish-status-dates i,
.publish-status-limit i {
    font-size: 12px;
    color: var(--pub-text-secondary);
}

/* Clickable dates button */
.publish-status-dates-btn {
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-family: inherit;
    color: var(--pub-text-muted);
}

.publish-status-dates-btn:hover {
    background: var(--pub-primary-light);
    border-color: var(--pub-primary);
    color: var(--pub-primary);
}

.publish-status-dates-btn:hover i {
    color: var(--pub-primary);
}

.publish-status-dates-btn .publish-edit-icon {
    font-size: 10px;
    opacity: 0;
    margin-left: 2px;
    transition: opacity 0.2s ease;
}

.publish-status-dates-btn:hover .publish-edit-icon {
    opacity: 1;
}

/* Clickable limit toggle button */
.publish-status-limit-btn {
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    font-family: inherit;
    color: var(--pub-text-muted);
}

.publish-status-limit-btn:hover {
    background: var(--pub-success-light);
    border-color: var(--pub-success);
    color: var(--pub-success);
}

.publish-status-limit-btn:hover i {
    color: var(--pub-success);
}

.publish-status-limit-btn .publish-toggle-icon {
    font-size: 10px;
    opacity: 0;
    margin-left: 2px;
    transition: opacity 0.2s ease;
}

.publish-status-limit-btn:hover .publish-toggle-icon {
    opacity: 1;
}

.publish-status-separator {
    display: none; /* Hide horizontal separator in vertical layout */
}

.publish-status-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--pub-border);
}

.publish-prizes-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--pub-success-light);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--pub-radius-sm);
    font-size: 11px;
    font-weight: 700;
    color: var(--pub-success);
}

.publish-prizes-summary i:first-child {
    font-size: 14px;
}

.publish-prizes-summary i:last-child {
    font-size: 12px;
}

.publish-prizes-summary.invalid {
    background: var(--pub-danger-light);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--pub-danger);
}

/* Buttons in status panel - full width in vertical mode */
.publish-status-panel .publish-btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 1000px) {
    .publish-status-panel .publish-btn {
        width: auto;
    }
}

/* ============================================
   SPINNER & LOADING STATES
   ============================================ */

.publish-spinner {
    animation: publish-spin 0.8s linear infinite;
}

@keyframes publish-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   DATE PICKER MODAL - Premium Design
   ============================================ */

.publish-date-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publish-date-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(8px);
}

.publish-date-modal-content {
    position: relative;
    background: var(--pub-bg-card);
    border-radius: var(--pub-radius-xl);
    box-shadow: var(--pub-shadow-lg), var(--pub-shadow-glow);
    width: 100%;
    max-width: 420px;
    margin: 20px;
    animation: modal-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--pub-border);
}

@keyframes modal-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.publish-date-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--pub-border);
}

.publish-date-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pub-text-primary);
    margin: 0;
}

.publish-date-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--pub-radius-sm);
    color: var(--pub-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.publish-date-modal-close:hover {
    background: var(--pub-bg-input);
    color: var(--pub-text-primary);
}

.publish-date-modal-body {
    padding: 28px;
}

.publish-date-modal-body .publish-field-input {
    width: 100%;
    margin-top: 10px;
}

.publish-date-field {
    margin-bottom: 0;
}

.publish-date-field .publish-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-text-primary);
    margin-bottom: 6px;
    display: block;
}

.publish-date-field .publish-field-hint {
    font-size: 11px;
    color: var(--pub-text-muted);
    margin-top: 6px;
    display: block;
}

.publish-date-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding: 20px 28px;
    border-top: 1px solid var(--pub-border);
    background: var(--pub-bg-input);
    border-radius: 0 0 var(--pub-radius-xl) var(--pub-radius-xl);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
    .publish-side-container {
        width: 220px;
    }
    
    .publish-status-panel {
        padding: 14px;
    }
}

@media (max-width: 1000px) {
    .publish-panel {
        flex-direction: column;
        overflow-y: auto;
    }

    .publish-side-container {
        width: 100%;
        padding: 0;
        order: 2;
    }

    .publish-main-container {
        padding: 24px 24px 100px 24px;
        order: 1;
    }
    
    .publish-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .publish-col-previews {
        position: static;
    }

    /* Convert to bottom bar on tablets */
    .publish-status-panel {
        position: fixed;
        top: auto;
        bottom: 20px;
        left: 80px;
        right: 20px;
        transform: none;
        width: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-radius: var(--pub-radius-xl);
    }
    
    .publish-status-left {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    
    .publish-status-info {
        flex-direction: row;
        gap: 8px;
    }
    
    .publish-status-dates,
    .publish-status-limit {
        width: auto;
    }
    
    .publish-status-right {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        border-top: none;
        padding-left: 12px;
        border-left: 1px solid var(--pub-border);
    }
}

@media (max-width: 768px) {
    .publish-tabs-bar {
        flex-wrap: wrap;
    }

    .publish-tab {
        min-width: calc(50% - 4px);
        padding: 10px 12px;
        font-size: 13px;
    }

    .publish-tab span {
        display: none;
    }

    .publish-tab i {
        font-size: 20px;
    }

    .publish-status-panel {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    .publish-status-info {
        display: none;
    }
}

@media (max-width: 640px) {
    .publish-main-container {
        padding: 16px 12px 100px;
    }

    .publish-content {
        gap: 12px;
    }

    .publish-card {
        padding: 14px;
    }

    .publish-qr-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .publish-status-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
    }
    
    .publish-status-left {
        justify-content: center;
    }
    
    .publish-status-right {
        justify-content: center;
    }

    .publish-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PUBLISH MODE - ANIMATIONS
   ============================================ */

#studio-container.workflow-publish .publish-panel {
    animation: publishPanelEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes publishPanelEnter {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Staggered element entrance */
#studio-container.workflow-publish .publish-tabs-bar {
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

#studio-container.workflow-publish .publish-col-inputs .publish-card:nth-child(1) {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

#studio-container.workflow-publish .publish-col-inputs .publish-card:nth-child(2) {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

#studio-container.workflow-publish .publish-col-previews .publish-card {
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================
   PUBLISH CELEBRATION - Confetti Canvas
   ============================================ */

.publish-celebration-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 99999 !important;
}

/* ============================================
   GOAL-ORIENTED TABS - Enhanced Depth
   ============================================ */

.publish-tabs-bar {
    display: flex;
    gap: 12px;
    background: white;
    padding: 8px;
    border-radius: var(--pub-radius-xl);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--pub-border);
    width: 100%;
}

.publish-tab {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border: none;
    border-radius: var(--pub-radius-lg);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.publish-tab:hover:not(.active) {
    background: var(--pub-bg-input);
    transform: translateY(-2px);
}

.publish-tab.active {
    background: linear-gradient(135deg, var(--pub-primary) 0%, var(--pub-primary-dark) 100%);
    box-shadow: 0 12px 24px var(--pub-primary-glow);
}

/* Subtle pattern for active tab */
.publish-tab.active::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background-image: radial-gradient(circle, #fff 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

.publish-tab-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pub-radius-md);
    flex-shrink: 0;
    transition: all 0.3s ease;
    background: var(--pub-primary-light);
}

.publish-tab-icon i {
    font-size: 24px;
}

.publish-tab.active .publish-tab-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    backdrop-filter: blur(8px);
}

.publish-tab-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.publish-tab-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pub-text-primary);
    transition: color 0.2s ease;
}

.publish-tab.active .publish-tab-label {
    color: white;
}

.publish-tab-desc {
    font-size: 11px;
    font-weight: 500;
    color: var(--pub-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.publish-tab.active .publish-tab-desc {
    color: rgba(255, 255, 255, 0.75);
}

/* ============================================
   HERO BANNER - Compact Inline Design
   ============================================ */

.publish-hero-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: white;
    border-radius: var(--pub-radius-xl);
    padding: 28px 32px;
    border: 1px solid var(--pub-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.publish-hero-main {
    flex: 1;
    min-width: 0;
}

.publish-hero-headline {
    font-size: 22px;
    font-weight: 800;
    color: var(--pub-text-primary);
    margin: 0 0 10px 0;
    letter-spacing: -0.02em;
}

.publish-hero-value {
    font-size: 14px;
    color: var(--pub-text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.publish-hero-steps-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.publish-hero-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--pub-text-secondary);
}

.publish-hero-step-num {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-primary-light);
    color: var(--pub-primary);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.publish-hero-step-text {
    white-space: nowrap;
}

/* ============================================
   DISTRIBUTION SECTIONS - Improved Layout
   ============================================ */

.publish-distribution-section {
    margin-bottom: 20px;
}

.publish-distribution-section:last-child {
    margin-bottom: 0;
}

.publish-header-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    background: var(--pub-bg-input);
    color: var(--pub-text-muted);
    border-radius: 100px;
    margin-left: auto;
}

.publish-header-badge-success {
    background: var(--pub-success-light);
    color: var(--pub-success);
    display: flex;
    align-items: center;
    gap: 4px;
}

.publish-header-badge-success i {
    font-size: 12px;
}

/* Pro Tip Box */
.publish-pro-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: rgba(99, 102, 241, 0.04);
    border-left: 3px solid var(--pub-primary);
    border-radius: var(--pub-radius-md);
    margin-top: 16px;
}

.publish-pro-tip i {
    font-size: 18px;
    color: var(--pub-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.publish-pro-tip span {
    font-size: 13px;
    color: var(--pub-text-secondary);
    line-height: 1.5;
}

.publish-pro-tip strong {
    color: var(--pub-text-primary);
    font-weight: 700;
}

.publish-pro-tip-security {
    background: rgba(16, 185, 129, 0.04);
    border-left-color: var(--pub-success);
}

.publish-pro-tip-security i {
    color: var(--pub-success);
}

/* Preview Hint Text */
.publish-preview-hint {
    font-size: 11px;
    color: var(--pub-text-muted);
    text-align: center;
    margin: 8px 0;
}

/* ============================================
   STATUS INDICATOR - Connection Status
   ============================================ */

.publish-status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    margin-left: auto;
}

.publish-status-indicator.listening {
    background: var(--pub-warning-light);
    color: var(--pub-warning);
}

.publish-status-indicator.connected {
    background: var(--pub-success-light);
    color: var(--pub-success);
}

.publish-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.publish-status-indicator.listening .publish-status-dot {
    background: var(--pub-warning);
}

.publish-status-indicator.connected .publish-status-dot {
    background: var(--pub-success);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Connect CTA */
.publish-connect-cta {
    margin-top: 16px;
}

/* ============================================
   EMAIL MOCKUP PREVIEW
   ============================================ */

.publish-email-mockup-wrapper {
    width: 100%;
}

.publish-email-mockup {
    background: #1a1a2e;
    border-radius: var(--pub-radius-lg);
    overflow: hidden;
    box-shadow: var(--pub-shadow-md);
}

.publish-email-mockup-header {
    background: #252541;
    padding: 10px 14px;
    display: flex;
    align-items: center;
}

.publish-email-mockup-dots {
    display: flex;
    gap: 6px;
}

.publish-email-mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.publish-email-mockup-dots span:first-child {
    background: #ff5f57;
}

.publish-email-mockup-dots span:nth-child(2) {
    background: #febc2e;
}

.publish-email-mockup-dots span:nth-child(3) {
    background: #28c840;
}

.publish-email-mockup-body {
    padding: 16px;
}

.publish-email-mockup-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--pub-radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.publish-email-mockup-subject i {
    font-size: 16px;
    color: var(--pub-primary);
}

.publish-email-mockup-subject span {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.publish-email-mockup-content {
    background: white;
    border-radius: var(--pub-radius-sm);
    padding: 16px;
}

.publish-email-mockup-content p {
    font-size: 12px;
    color: var(--pub-text-secondary);
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.publish-email-mockup-content p:last-of-type {
    margin-bottom: 14px;
}

.publish-email-mockup-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--pub-primary) 0%, var(--pub-primary-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--pub-radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: default;
    box-shadow: 0 4px 12px var(--pub-primary-glow);
}

.publish-email-mockup-cta i {
    font-size: 16px;
}

/* ============================================
   WORKFLOW DIAGRAM
   ============================================ */

.publish-workflow-diagram {
    width: 100%;
    text-align: center;
}

.publish-workflow-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.publish-workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.publish-workflow-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pub-bg-input);
    border: 2px solid var(--pub-border);
    border-radius: var(--pub-radius-md);
    transition: all 0.3s ease;
}

.publish-workflow-icon i {
    font-size: 24px;
    color: var(--pub-text-secondary);
}

.publish-workflow-icon.highlight {
    background: linear-gradient(135deg, var(--pub-primary-light) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: var(--pub-primary);
}

.publish-workflow-icon.highlight i {
    color: var(--pub-primary);
}

.publish-workflow-step span {
    font-size: 11px;
    font-weight: 600;
    color: var(--pub-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.publish-workflow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-text-light);
    margin-bottom: 22px;
}

.publish-workflow-arrow i {
    font-size: 20px;
}

.publish-workflow-note {
    font-size: 12px;
    font-weight: 600;
    color: var(--pub-success);
    background: var(--pub-success-light);
    display: inline-block;
    padding: 6px 14px;
    border-radius: 100px;
    margin-top: 8px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS FOR GOAL-ORIENTED UI
   ============================================ */

@media (max-width: 900px) {
    .publish-tabs-bar {
        flex-direction: column;
        gap: 6px;
    }
    
    .publish-tab {
        padding: 10px 12px;
        justify-content: flex-start;
    }
    
    .publish-tab-desc {
        display: block; /* Show description again in vertical mode */
    }
    
    .publish-tab-icon {
        width: 36px;
        height: 36px;
    }
    
    .publish-hero-banner {
        flex-direction: column;
        gap: 16px;
        padding: 18px 20px;
    }
    
    .publish-hero-steps-inline {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .publish-hero-headline {
        font-size: 16px;
    }
    
    .publish-workflow-steps {
        gap: 4px;
    }
    
    .publish-workflow-icon {
        width: 48px;
        height: 48px;
    }
    
    .publish-workflow-icon i {
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    .publish-tab-desc {
        display: none;
    }
    
    .publish-tab {
        justify-content: flex-start;
        padding: 10px 12px;
    }
    
    .publish-tab-icon {
        width: 32px;
        height: 32px;
    }
    
    .publish-tab-icon i {
        font-size: 16px;
    }
    
    .publish-hero-banner {
        padding: 16px;
    }
    
    .publish-hero-steps-inline {
        flex-direction: column;
        gap: 8px;
    }
    
    .publish-hero-step-text {
        white-space: normal;
    }
    
    .publish-workflow-steps {
        flex-direction: column;
        gap: 12px;
    }
    
    .publish-workflow-arrow {
        transform: rotate(90deg);
        margin: 0;
    }
}

/**
 * Grow Audience Simulator CSS - Premium De-Noised Edition
 * 
 * Key principles:
 * - Context-aware layouts
 * - Neutral UI (purple reserved for primary actions only)
 * - Compact scene selectors
 * - Photorealistic mockups with depth
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

.grow-simulator {
    --sim-primary: #6366f1;
    --sim-primary-dark: #4f46e5;
    --sim-primary-light: rgba(99, 102, 241, 0.08);
    --sim-bg: #f8fafc;
    --sim-bg-card: #ffffff;
    --sim-border: #e5e7eb;
    --sim-border-light: #f3f4f6;
    --sim-text: #111827;
    --sim-text-secondary: #6b7280;
    --sim-text-muted: #9ca3af;
    --sim-success: #10b981;
    --sim-radius: 16px;
    --sim-radius-sm: 8px;
    --sim-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sim-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --sim-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.grow-simulator {
    width: 100%;
    background: var(--sim-bg);
    border-radius: var(--sim-radius);
    overflow: hidden;
    border: 1px solid var(--sim-border);
}

.grow-simulator-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: 640px;
    /* Ensure both columns stretch to equal height */
    align-items: stretch;
}

/* ============================================
   LEFT COLUMN: CONTROL PANEL (Context-Aware)
   ============================================ */

.grow-control-panel {
    background: var(--sim-bg-card);
    border-right: 1px solid var(--sim-border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* URL Field - Always visible, prominent */
.grow-field-url {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sim-border-light);
}

/* Context-aware sections container */
.grow-control-sections {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Section Animation */
.grow-section-animate {
    animation: sectionFadeIn 0.25s ease-out;
}

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

/* Sections - Grouped with subtle background */
.grow-control-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: var(--sim-bg);
    border-radius: var(--sim-radius-sm);
    border: 1px solid var(--sim-border-light);
}

.grow-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: #111827; /* text-gray-900 */
    padding: 0 0 10px 0;
    margin: 0 0 4px 0;
    border-top: 1px solid #f3f4f6; /* Light divider above */
    padding-top: 12px;
}

.grow-section-header i {
    font-size: 16px;
    color: #9ca3af; /* text-gray-400 */
}

/* First section header doesn't need top border */
.grow-control-section:first-child .grow-section-header {
    border-top: none;
    padding-top: 0;
}

/* Fields */
.grow-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.grow-field-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--sim-bg);
    border-radius: var(--sim-radius-sm);
    border: 1px solid var(--sim-border-light);
}

.grow-field-row-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.grow-field-row-content .grow-field-label {
    margin: 0;
}

.grow-field-sublabel {
    font-size: 11px;
    color: var(--sim-text-muted);
}

.grow-field-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151; /* text-gray-700 equivalent */
}

.grow-field-label i {
    display: inline-flex;
    margin-right: 4px;
    color: var(--sim-text-muted);
}

.grow-field-hint {
    font-size: 11px;
    color: var(--sim-text-muted);
    text-align: right;
}

/* Inputs */
.grow-input,
.grow-textarea {
    padding: 10px 12px;
    background: var(--sim-bg);
    border: 1px solid var(--sim-border);
    border-radius: var(--sim-radius-sm);
    font-size: 13px;
    color: var(--sim-text);
    outline: none;
    transition: all 0.15s ease;
    font-family: inherit;
}

.grow-input:focus,
.grow-textarea:focus {
    border-color: var(--sim-text-secondary);
    background: white;
}

.grow-input-readonly {
    background: #f9fafb; /* bg-gray-50 */
    border: none !important;
    color: var(--sim-text-secondary);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

.grow-textarea {
    resize: none;
    line-height: 1.5;
}

/* URL Input Group */
.grow-url-input {
    display: flex;
    gap: 8px;
}

.grow-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    background: transparent;
    border: none;
    border-radius: var(--sim-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--sim-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.grow-copy-btn i {
    font-size: 16px;
}

.grow-copy-btn:hover {
    background: #f3f4f6;
    color: var(--sim-text);
}

.grow-copy-btn.copied {
    background: rgba(16, 185, 129, 0.1);
    color: var(--sim-success);
}

/* Dropzone - Compact for Digital Mode */
.grow-dropzone {
    position: relative;
    width: 100%;
    aspect-ratio: 1.91 / 1;
    border: 1px dashed var(--sim-border);
    border-radius: var(--sim-radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;
    background: var(--sim-bg);
}

.grow-dropzone-compact {
    aspect-ratio: 2 / 1;
}

.grow-dropzone:hover {
    border-color: var(--sim-text-secondary);
}

.grow-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
    color: var(--sim-text-muted);
    font-size: 12px;
}

.grow-dropzone-empty i {
    font-size: 20px;
}

.grow-dropzone-preview {
    position: relative;
    width: 100%;
    height: 100%;
}

.grow-dropzone-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grow-dropzone-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    opacity: 0;
    transition: opacity 0.15s ease;
    font-size: 18px;
}

.grow-dropzone:hover .grow-dropzone-overlay {
    opacity: 1;
}

/* Color Picker - Neutral Style */
.grow-color-picker {
    display: flex;
    gap: 8px;
}

.grow-color-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--sim-bg);
    border: 1px solid var(--sim-border);
    border-radius: var(--sim-radius-sm);
    font-size: 12px;
    font-weight: 500;
    color: var(--sim-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.grow-color-option:hover {
    border-color: var(--sim-text-muted);
}

.grow-color-option.active {
    background: white;
    border-color: var(--sim-text);
    color: var(--sim-text);
    box-shadow: var(--sim-shadow-sm);
}

.grow-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.grow-color-brand {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.grow-color-black {
    background: #111827;
}

/* Toggle - Modern iOS Style */
.grow-toggle {
    width: 44px;
    height: 24px;
    background: #e5e7eb; /* bg-gray-200 */
    border: none;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.grow-toggle.active {
    background: #7c3aed; /* Brand purple */
}

.grow-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.grow-toggle.active .grow-toggle-knob {
    transform: translateX(20px);
}

/* Tips */
.grow-tips {
    margin-top: 8px;
}

.grow-tip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--sim-bg);
    border-radius: var(--sim-radius-sm);
    font-size: 11px;
    color: var(--sim-text-secondary);
}

.grow-tip i {
    color: var(--sim-text-muted);
    font-size: 14px;
}

/* Live Indicator */
.grow-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--sim-radius-sm);
    font-size: 11px;
    color: var(--sim-success);
    margin-top: 8px;
}

.grow-live-dot {
    width: 6px;
    height: 6px;
    background: var(--sim-success);
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================
   RIGHT COLUMN: SIMULATOR PREVIEW
   ============================================ */

.grow-simulator-preview {
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
    /* Match height with control panel */
    min-height: 0;
}

/* View Mode Toggle - iOS Segment Style (Neutral) */
.grow-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin: 0 auto;
}

.grow-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sim-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.grow-mode-btn i {
    font-size: 16px;
}

.grow-mode-btn.active {
    background: white;
    color: var(--sim-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Main Stage */
.grow-simulator-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s ease;
    border-radius: var(--sim-radius);
    overflow: hidden;
    min-height: 400px;
}

.grow-simulator-stage.transitioning {
    opacity: 0;
}

/* ============================================
   PHYSICAL WORLD VIEW - Clean Composition Design
   ============================================ */

.grow-physical-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
    border-radius: var(--sim-radius-sm);
}

/* Row 1: Scene Selector - Above the image */
.grow-scene-selector-row {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.grow-scene-chips {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 5px;
    background: white;
    border: 1px solid var(--sim-border-light);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.grow-scene-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280; /* Gray-500 */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.grow-scene-chip i {
    font-size: 16px;
    opacity: 0.8;
}

.grow-scene-chip:hover {
    color: var(--sim-text);
    background: #f9fafb; /* Gray-50 */
}

/* Soft purple active state - premium feel */
.grow-scene-chip.active {
    background: #f3e8ff; /* Very light purple */
    color: #7c3aed; /* Brand purple */
    font-weight: 600;
}

.grow-scene-chip.active i {
    opacity: 1;
}

/* Row 2: Physical Stage - Full Bleed Hero Area */
.grow-physical-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px; /* rounded-2xl equivalent */
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04);
    min-height: 0;
}

/* Mockup container with transition */
.grow-mockup-container {
    position: absolute;
    inset: 0;
    transition: opacity 0.3s ease-out;
}

.grow-mockup-container.transitioning {
    opacity: 0;
}

/* Download Button - Glassmorphic FAB inside image */
.grow-download-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px; /* Pill shape */
    color: #7c3aed; /* Brand purple */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
}

.grow-download-btn i {
    font-size: 16px;
}

.grow-download-btn:hover {
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.grow-download-btn:active {
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   PHOTOREALISTIC MOCKUPS
   ============================================ */

.mockup-photorealistic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%); /* Rich dark gradient */
    border-radius: inherit;
}

.mockup-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-out;
}

/* Background Photo - Full Bleed with Cover */
.mockup-photo-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

/* QR Code Overlay - Positioned absolutely on the photo */
.mockup-qr-overlay {
    /* Position is set via inline styles from SCENE_CONFIG */
    /* These are default/fallback styles */
    aspect-ratio: 1;
    user-select: none;
    transition: opacity 0.2s ease;
}

/* Inverted QR for glass/vinyl (white QR code) */
.mockup-qr-inverted {
    /* White QR codes have transparent background already */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Scan hint - subtle indicator - hidden by default */
.mockup-scan-hint {
    display: none; /* Removed to keep UI clean with full-bleed design */
}

/* Loading state for images */
.mockup-photo-bg[src=""] {
    background: linear-gradient(135deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 200%;
    animation: placeholderShimmer 1.5s ease-in-out infinite;
}

/* Image error fallback */
.mockup-photorealistic::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    z-index: -1;
}

/* ============================================
   DIGITAL WORLD VIEW
   ============================================ */

.grow-digital-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

/* iPhone Frame */
.grow-iphone-frame {
    width: 260px;
    height: 540px;
    background: #1c1c1e;
    border-radius: 44px;
    padding: 10px;
    box-shadow: 
        var(--sim-shadow-lg),
        inset 0 0 0 2px #2c2c2e;
    position: relative;
}

.grow-iphone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #1c1c1e;
    border-radius: 0 0 16px 16px;
    z-index: 10;
}

.grow-iphone-screen {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
}

.grow-iphone-home-indicator {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: #333;
    border-radius: 100px;
}

/* Platform Selector - Neutral */
.grow-platform-selector {
    display: flex;
    gap: 10px;
}

.grow-platform-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--sim-border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--sim-text-muted);
    font-size: 18px;
}

.grow-platform-btn:hover {
    border-color: var(--sim-text-secondary);
    color: var(--sim-text-secondary);
}

.grow-platform-btn.active {
    background: var(--sim-text);
    border-color: var(--sim-text);
    color: white;
}

/* ============================================
   DIGITAL MOCKUPS
   ============================================ */

/* Status Bar (shared) */
.mockup-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 6px; /* Nudged up from 14px */
    font-size: 11px;
    font-weight: 600;
}

.mockup-status-bar-fb {
    background: #1877f2;
    color: white;
}

.mockup-status-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    opacity: 0.9;
}

.mockup-status-signal {
    display: flex;
    align-items: flex-end;
    gap: 1.6px; /* Increased for airiness */
    height: 7.2px; /* Reduced further */
}

.mockup-signal-bar {
    width: 2px;
    background: currentColor;
    border-radius: 1.2px; /* Rounder */
}

.mockup-signal-bar:nth-child(1) { height: 30%; }
.mockup-signal-bar:nth-child(2) { height: 50%; }
.mockup-signal-bar:nth-child(3) { height: 75%; }
.mockup-signal-bar:nth-child(4) { height: 100%; }

.mockup-status-wifi {
    width: 13px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-status-wifi svg {
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.mockup-status-battery {
    display: flex;
    align-items: center;
    gap: 0.8px;
}

.mockup-battery-body {
    width: 16px;
    height: 8px;
    border: 1px solid currentColor;
    border-radius: 1.8px;
    padding: 1.4px; /* Inset fill */
    display: flex;
    opacity: 0.35;
}

.mockup-battery-level {
    flex: 1;
    background: #34C759; /* iOS green */
    border-radius: 0.5px;
    height: 100%;
}

.mockup-status-bar-fb .mockup-battery-level {
    background: white;
}

.mockup-battery-cap {
    width: 0.8px; /* Thinner cap */
    height: 2.5px;
    background: currentColor;
    border-radius: 0 0.5px 0.5px 0;
    opacity: 0.3;
}

/* Instagram Mockup */
.mockup-instagram {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: white;
}

.mockup-ig-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
}

.mockup-ig-avatar {
    width: 70px;
    height: 70px;
}

.mockup-ig-avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    padding: 2px;
}

.mockup-ig-avatar-img {
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.mockup-ig-stats {
    display: flex;
    gap: 16px;
}

.mockup-ig-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    color: #262626;
}

.mockup-ig-stat strong {
    font-size: 14px;
    font-weight: 700;
}

.mockup-ig-bio {
    padding: 0 14px 14px;
}

.mockup-ig-name {
    font-size: 12px;
    font-weight: 700;
    color: #262626;
}

.mockup-ig-category {
    font-size: 10px;
    color: #8e8e8e;
    margin-bottom: 4px;
}

.mockup-ig-description {
    font-size: 11px;
    color: #262626;
    line-height: 1.4;
    margin-bottom: 4px;
}

.mockup-ig-link {
    font-size: 11px;
    color: #00376b;
    font-weight: 600;
    text-decoration: none;
}

.mockup-ig-actions {
    display: flex;
    gap: 6px;
    padding: 0 14px 14px;
}

.mockup-ig-btn {
    flex: 1;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: default;
}

.mockup-ig-btn-primary {
    background: #0095f6;
    color: white;
}

.mockup-ig-btn:not(.mockup-ig-btn-primary) {
    background: #efefef;
    color: #262626;
}

.mockup-ig-highlight-label {
    background: var(--sim-primary-light);
    padding: 10px 14px;
    font-size: 10px;
    color: var(--sim-primary);
    font-weight: 600;
    text-align: center;
}

/* Facebook Mockup */
.mockup-facebook {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f0f2f5;
}

.mockup-fb-header {
    background: #1877f2;
    padding: 6px 14px 10px;
}

.mockup-fb-logo {
    font-size: 20px;
    font-weight: 700;
    color: white;
    font-family: 'Helvetica Neue', sans-serif;
}

.mockup-fb-post {
    background: white;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mockup-fb-post-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
}

.mockup-fb-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--sim-primary) 0%, var(--sim-primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mockup-fb-post-meta {
    display: flex;
    flex-direction: column;
}

.mockup-fb-name {
    font-size: 12px;
    font-weight: 700;
    color: #050505;
}

.mockup-fb-time {
    font-size: 10px;
    color: #65676b;
}

.mockup-fb-post-text {
    padding: 0 10px 10px;
    font-size: 13px;
    color: #050505;
}

/* Facebook Link Card */
.mockup-fb-card {
    border: 1px solid #dddfe2;
    overflow: hidden;
}

.mockup-fb-card-image {
    width: 100%;
    height: 100px;
    background: #f0f2f5;
    overflow: hidden;
}

.mockup-fb-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mockup-fb-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 200%;
    animation: placeholderShimmer 1.5s ease-in-out infinite;
}

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

.mockup-placeholder-pattern {
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0, 0, 0, 0.02) 8px,
        rgba(0, 0, 0, 0.02) 16px
    );
}

.mockup-fb-card-content {
    padding: 8px 10px;
    background: #f0f2f5;
}

.mockup-fb-card-domain {
    font-size: 9px;
    color: #65676b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mockup-fb-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #050505;
    margin: 3px 0;
    display: block;
}

.mockup-fb-card-desc {
    font-size: 11px;
    color: #65676b;
    line-height: 1.3;
    display: block;
}

.mockup-fb-reactions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid #dddfe2;
    font-size: 11px;
    color: #65676b;
}

.mockup-fb-reaction-icons {
    display: flex;
    margin-left: -3px;
}

.mockup-fb-reaction-icons span {
    font-size: 14px;
    margin-left: -3px;
}

.mockup-live-indicator {
    background: var(--sim-primary-light);
    padding: 8px;
    text-align: center;
    font-size: 10px;
    color: var(--sim-primary);
    font-weight: 600;
}

/* TikTok Mockup */
.mockup-tiktok {
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.mockup-tt-video {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.mockup-tt-video-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
}

.mockup-tt-actions {
    position: absolute;
    right: 10px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.mockup-tt-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    color: white;
}

.mockup-tt-action span:first-child {
    font-size: 20px;
}

.mockup-tt-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--sim-primary) 0%, var(--sim-primary-dark) 100%);
    border-radius: 50%;
    border: 2px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    position: relative;
}

.mockup-tt-follow {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #fe2c55;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-tt-bottom {
    position: absolute;
    left: 10px;
    bottom: 60px;
    right: 50px;
}

.mockup-tt-username {
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.mockup-tt-caption {
    font-size: 12px;
    color: white;
    line-height: 1.4;
    margin-bottom: 6px;
}

.mockup-tt-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-size: 11px;
    color: white;
}

.mockup-tt-link i {
    font-size: 12px;
}

.mockup-tt-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background: #000;
    font-size: 9px;
    color: white;
}

.mockup-tt-create {
    width: 32px;
    height: 22px;
    background: linear-gradient(90deg, #25f4ee 0%, #fe2c55 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 900px) {
    .grow-simulator-grid {
        grid-template-columns: 1fr;
    }
    
    .grow-control-panel {
        border-right: none;
        border-bottom: 1px solid var(--sim-border);
        padding: 20px;
    }
    
    .grow-simulator-preview {
        min-height: 500px;
    }
}

@media (max-width: 600px) {
    .grow-mode-btn span {
        display: none;
    }
    
    .grow-iphone-frame {
        width: 240px;
        height: 500px;
    }
    
    .grow-scene-chips {
        gap: 6px;
        flex-wrap: wrap; /* Allow wrapping on small screens */
        justify-content: center;
    }
    
    .grow-scene-chip {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    .grow-scene-chip span {
        display: none;
    }
}

/**
 * Boost Reviews Simulator CSS - Premium Edition
 * 
 * Key principles:
 * - 2-column layout matching GrowAudienceSimulator
 * - Premium glass morphism effects
 * - Animated star ratings
 * - Smooth transitions between views
 */

/* ============================================
   CSS VARIABLES
   ============================================ */

.reviews-simulator {
    --rev-primary: #6366f1;
    --rev-primary-dark: #4f46e5;
    --rev-primary-light: rgba(99, 102, 241, 0.08);
    --rev-bg: #f8fafc;
    --rev-bg-card: #ffffff;
    --rev-border: #e5e7eb;
    --rev-border-light: #f3f4f6;
    --rev-text: #111827;
    --rev-text-secondary: #6b7280;
    --rev-text-muted: #9ca3af;
    --rev-success: #10b981;
    --rev-warning: #f59e0b;
    --rev-danger: #ef4444;
    --rev-star: #fbbf24;
    --rev-star-empty: #e5e7eb;
    --rev-radius: 16px;
    --rev-radius-sm: 8px;
    --rev-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --rev-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --rev-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

.reviews-simulator {
    width: 100%;
    background: var(--rev-bg);
    border-radius: var(--rev-radius);
    overflow: hidden;
    border: 1px solid var(--rev-border);
}

.reviews-simulator-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    min-height: 640px;
    align-items: stretch;
}

/* ============================================
   LEFT COLUMN: CONTROL PANEL
   ============================================ */

.reviews-control-panel {
    background: var(--rev-bg-card);
    border-right: 1px solid var(--rev-border);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
}

/* Main Section Header */
.reviews-section-header-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--rev-text);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rev-border-light);
}

.reviews-section-header-main i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--rev-star);
    background: rgba(251, 191, 36, 0.12);
    border-radius: var(--rev-radius-sm);
}

/* Control Sections */
.reviews-control-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: var(--rev-bg);
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border-light);
}

.reviews-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.reviews-section-header i {
    font-size: 16px;
    color: var(--rev-text-muted);
}

/* Section Animation */
.reviews-section-animate {
    animation: reviewsSectionFadeIn 0.25s ease-out;
}

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

/* ============================================
   PLATFORM ICONS
   ============================================ */

.reviews-platform-icons {
    display: flex;
    gap: 8px;
}

.reviews-platform-icon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--rev-bg-card);
    border: 2px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reviews-platform-icon i {
    font-size: 24px;
    color: var(--rev-text-muted);
    transition: color 0.2s ease;
}

.reviews-platform-icon span {
    font-size: 11px;
    font-weight: 600;
    color: var(--rev-text-secondary);
    transition: color 0.2s ease;
}

.reviews-platform-icon:hover {
    border-color: var(--rev-text-muted);
    transform: translateY(-2px);
}

.reviews-platform-icon.active {
    border-color: var(--platform-color);
    background: var(--platform-bg);
}

.reviews-platform-icon.active i {
    color: var(--platform-color);
}

.reviews-platform-icon.active span {
    color: var(--platform-color);
}

/* ============================================
   INPUT FIELDS
   ============================================ */

.reviews-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reviews-input {
    padding: 12px 14px;
    background: var(--rev-bg-card);
    border: 1px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    font-size: 13px;
    color: var(--rev-text);
    outline: none;
    transition: all 0.15s ease;
    font-family: inherit;
}

.reviews-input:focus {
    border-color: var(--rev-primary);
    box-shadow: 0 0 0 3px var(--rev-primary-light);
}

.reviews-input::placeholder {
    color: var(--rev-text-muted);
    font-size: 12px;
}

.reviews-field-hint {
    font-size: 11px;
    color: var(--rev-text-muted);
}

/* ============================================
   RADIO GROUP (Gate Strength)
   ============================================ */

.reviews-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reviews-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--rev-bg-card);
    border: 2px solid var(--rev-border);
    border-radius: var(--rev-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.reviews-radio-option:hover {
    border-color: var(--rev-text-muted);
}

.reviews-radio-option.active {
    border-color: var(--rev-primary);
    background: var(--rev-primary-light);
}

.reviews-radio-indicator {
    width: 20px;
    height: 20px;
    border: 2px solid var(--rev-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.reviews-radio-option.active .reviews-radio-indicator {
    border-color: var(--rev-primary);
}

.reviews-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--rev-primary);
    transform: scale(0);
    transition: transform 0.2s ease;
}

.reviews-radio-option.active .reviews-radio-dot {
    transform: scale(1);
}

.reviews-radio-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reviews-radio-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.reviews-radio-title i {
    font-size: 16px;
    color: var(--rev-text-muted);
}

.reviews-radio-option.active .reviews-radio-title i {
    color: var(--rev-primary);
}

.reviews-radio-desc {
    font-size: 12px;
    color: var(--rev-text-secondary);
    line-height: 1.5;
}

.reviews-radio-desc em {
    display: block;
    font-style: normal;
    color: var(--rev-text-muted);
    margin-top: 4px;
    font-size: 11px;
}

.reviews-radio-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.reviews-badge-default {
    background: var(--rev-primary-light);
    color: var(--rev-primary);
}

/* ============================================
   TOGGLE (Soft Gate)
   ============================================ */

.reviews-toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    background: var(--rev-bg-card);
    border-radius: var(--rev-radius-sm);
    border: 1px solid var(--rev-border-light);
}

.reviews-toggle-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reviews-toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--rev-text);
}

.reviews-toggle-desc {
    font-size: 12px;
    color: var(--rev-text-secondary);
    line-height: 1.5;
}

.reviews-toggle {
    width: 48px;
    height: 28px;
    background: #e5e7eb;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.reviews-toggle.active {
    background: var(--rev-success);
}

.reviews-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reviews-toggle.active .reviews-toggle-knob {
    transform: translateX(20px);
}

/* Soft Gate Preview */
.reviews-soft-gate-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: var(--rev-radius-sm);
    font-size: 11px;
    color: var(--rev-success);
    line-height: 1.5;
    animation: reviewsSectionFadeIn 0.2s ease-out;
}

.reviews-soft-gate-preview i {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

.reviews-soft-gate-preview strong {
    color: #059669;
}

/* ============================================
   RIGHT COLUMN: SIMULATOR PREVIEW
   ============================================ */

.reviews-simulator-preview {
    background: #f1f5f9;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 12px;
    overflow: hidden;
    min-height: 0;
}

/* View Mode Toggle */
.reviews-mode-toggle {
    display: flex;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    padding: 3px;
    width: fit-content;
    margin: 0 auto;
}

.reviews-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rev-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reviews-mode-btn i {
    font-size: 16px;
}

.reviews-mode-btn.active {
    background: white;
    color: var(--rev-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Simulator Stage */
.reviews-simulator-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: opacity 0.15s ease;
    border-radius: var(--rev-radius);
    overflow: hidden;
    min-height: 400px;
}

.reviews-simulator-stage.transitioning {
    opacity: 0;
}

/* ============================================
   RECEIPT SCENE
   ============================================ */

.reviews-receipt-scene {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 16px;
}

.reviews-receipt-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.04);
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
}

.reviews-receipt-mockup {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease-in-out;
}

.reviews-receipt-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

/* Download Button */
.reviews-download-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    color: var(--rev-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
}

.reviews-download-btn i {
    font-size: 16px;
}

.reviews-download-btn:hover {
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.reviews-download-btn:active {
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   CUSTOMER FLOW SCENE (iPhone Mockup)
   ============================================ */

.reviews-flow-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    height: 100%;
    justify-content: center;
}

/* iPhone Frame */
.reviews-iphone-frame {
    width: 280px;
    height: 560px;
    background: #1c1c1e;
    border-radius: 48px;
    padding: 12px;
    box-shadow: 
        var(--rev-shadow-lg),
        inset 0 0 0 2px #2c2c2e;
    position: relative;
}

.reviews-iphone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 32px;
    background: #1c1c1e;
    border-radius: 0 0 18px 18px;
    z-index: 10;
}

.reviews-iphone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fefefe 0%, #f8fafc 100%);
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}

.reviews-iphone-home-indicator {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: #333;
    border-radius: 100px;
}

/* Flow Content */
.reviews-flow-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 32px;
    text-align: center;
}

.reviews-flow-header {
    margin-bottom: 24px;
}

.reviews-flow-logo {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--rev-star) 0%, #f97316 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
}

.reviews-flow-logo i {
    font-size: 28px;
    color: white;
}

.reviews-flow-headline {
    font-size: 22px;
    font-weight: 700;
    color: var(--rev-text);
    margin: 0 0 32px 0;
    line-height: 1.3;
}

/* Animated Stars */
.reviews-stars-container {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.reviews-star {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: starBounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards;
    animation-delay: calc(var(--star-index) * 0.08s);
}

.reviews-star i {
    font-size: 40px;
    color: var(--rev-star-empty);
    transition: all 0.2s ease;
}

.reviews-star.active i {
    color: var(--rev-star);
    filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.4));
}

.reviews-star:hover {
    transform: scale(1.15);
}

.reviews-star:hover i {
    color: var(--rev-star);
}

@keyframes starBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-20deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Rating Label */
.reviews-rating-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--rev-text-secondary);
    margin: 0 0 32px 0;
    min-height: 24px;
}

/* CTA Buttons */
.reviews-flow-action {
    width: 100%;
}

.reviews-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reviews-cta-btn i {
    font-size: 20px;
}

.reviews-cta-positive {
    background: var(--cta-color);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.reviews-cta-positive:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.reviews-cta-feedback {
    background: #f3f4f6;
    color: var(--rev-text-secondary);
}

.reviews-cta-feedback:hover {
    background: #e5e7eb;
}

/* Soft Gate Indicator */
.reviews-soft-gate-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 500;
    color: var(--rev-success);
    animation: softGateFadeIn 0.3s ease-out;
}

.reviews-soft-gate-indicator i {
    font-size: 14px;
}

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

/* Flow Hint */
.reviews-flow-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--rev-text-muted);
}

.reviews-flow-hint i {
    font-size: 16px;
    color: var(--rev-text-secondary);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 900px) {
    .reviews-simulator-grid {
        grid-template-columns: 1fr;
    }
    
    .reviews-control-panel {
        border-right: none;
        border-bottom: 1px solid var(--rev-border);
        padding: 20px;
    }
    
    .reviews-simulator-preview {
        min-height: 500px;
    }
}

@media (max-width: 600px) {
    .reviews-mode-btn span {
        display: none;
    }
    
    .reviews-iphone-frame {
        width: 260px;
        height: 520px;
    }
    
    .reviews-platform-icons {
        flex-wrap: wrap;
    }
    
    .reviews-platform-icon {
        min-width: 80px;
    }
    
    .reviews-star {
        width: 40px;
        height: 40px;
    }
    
    .reviews-star i {
        font-size: 32px;
    }
}



.sc-wizard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Inter', 'Assistant', 'Heebo', sans-serif;
}

.sc-wizard-container {
    width: 100%;
    height: 100dvh; /* Use dynamic viewport height for mobile browser toolbars */
    background: #ffffff;
    color: #111827;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.sc-wizard-content {
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    position: relative;
}

/* ==========================================================================
   LEFT PANEL - HOLY GRAIL 3-LAYER STRUCTURE
   ========================================================================== */
.sc-wizard-left-panel {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill parent flex container */
    background: #ffffff;
    border-right: 1px solid #F3F4F6;
    z-index: 100;
    position: relative;
}

/* Layer 1: Fixed Stepper Header */
.sc-wizard-header-fixed {
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 40px; /* Reset to 40px to match side margins */
    background: #ffffff;
    flex-shrink: 0;
    width: 100%;
}

.sc-wizard-progress-container {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.sc-wizard-progress {
    display: flex;
    flex-direction: row;
    gap: 12px; 
    width: 100%;
    align-items: center;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
}

.sc-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E5E7EB;
    transition: all 0.3s ease;
}

.sc-progress-dot.active {
    background: #10B981; /* Current position often uses success color in these UIs */
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); /* Slight outer glow */
}

.sc-progress-dot.completed {
    background: #10B981;
    opacity: 0.6;
}

/* Layer 2: Scrollable Content Area */
.sc-wizard-scroll-container {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 0; /* Removed redundant padding to eliminate scroll */
}

.sc-wizard-header {
    padding: 16px 40px 8px 40px; /* Aligned to 40px left-margin axis */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    flex-shrink: 0;
}

.sc-wizard-header-text h2 {
    color: #111827;
    font-size: 32px; 
    font-weight: 800; 
    margin: 0 0 4px 0;
    padding: 0; /* Remove any internal padding to ensure 40px axis */
}

.sc-wizard-header-text p {
    color: #4B5563;
    font-size: 15px;
    margin: 0;
    line-height: 1.5; /* Increased to 1.5 for scannability */
}

.sc-wizard-input-zone {
    padding: 0 40px 16px 40px; /* Aligned to 40px left-margin axis */
    width: 100%;
}

/* Layer 3: Fixed Footer */
.sc-wizard-left-footer {
    height: 80px; /* Hard-coded fixed height to prevent layout shift */
    padding: 0 40px;
    display: flex;
    align-items: center; /* Unified horizontal baseline through vertical centering */
    justify-content: space-between; /* Space out Back and Next */
    gap: 12px;
    background: #ffffff;
    border-top: 1px solid #F3F4F6;
    flex-shrink: 0;
    width: 100%;
}

/* Scrollbar Visibility Fix */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   RIGHT PANEL - IMMERSIVE PREVIEW
   ========================================================================== */
.sc-wizard-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100dvh;
    position: sticky;
    top: 0;
    background: #f9fafb;
    background-image: radial-gradient(rgba(229, 231, 235, 0.4) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.sc-wizard-nav-actions {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 32px;
    height: 80px;
    display: flex;
    align-items: center;
    gap: 12px; /* Precision gap-3 (12px) for high-end button separation */
    z-index: 10;
}

.sc-wizard-preview-zone {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    overflow: hidden;
}

/* ==========================================================================
   COMPONENTS & ACTIONS
   ========================================================================== */
.sc-wizard-toggle-ai-agent,
.sc-wizard-start-fresh {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px 12px;
}

.sc-wizard-toggle-ai-agent:hover,
.sc-wizard-start-fresh:hover {
    background: #F9FAFB;
    border-color: #7C3AED;
    color: #7C3AED;
}

.sc-wizard-start-fresh {
    gap: 6px;
    white-space: nowrap;
}

.sc-wizard-close {
    background: none;
    border: none;
    color: #6B7280;
    cursor: pointer;
    font-size: 24px;
    transition: color 0.2s;
}

.sc-wizard-close:hover {
    color: #111827;
}

/* Button Styles */
.sc-wizard-btn {
    height: 48px; /* Increased from 44px for more vertical breathing room */
    padding: 0 24px;
    border-radius: 10px; /* Slightly rounded for premium feel */
    font-weight: 600;
    font-size: 14px;
    display: inline-flex; /* Use inline-flex for better baseline alignment */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
    vertical-align: middle;
}

.sc-wizard-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.sc-wizard-btn-back {
    background: transparent; /* Ghost style */
    border: none;
    color: #6B7280;
    min-width: 80px;
    font-weight: 500; /* Medium (500) - softer than Next for visual hierarchy */
    font-size: 14px;
    letter-spacing: 0.3px; /* Slight letter-spacing for polish */
}

.sc-wizard-btn-back:hover {
    color: #111827;
    background: #F3F4F6;
}

.sc-wizard-btn-next {
    flex: 0 0 auto; 
    margin-left: auto; /* Always push to the right, especially when Back is hidden */
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); /* Subtle gradient */
    border: none;
    color: #FFFFFF; /* Pure White for maximum contrast */
    font-weight: 700; /* Bold (700) for clean authority */
    font-size: 14px;
    letter-spacing: 0.8px; /* Airy typography for premium feel */
    text-transform: uppercase; /* Clean, professional look */
    padding: 0 64px; /* Heroic horizontal padding */
    box-shadow: 0 4px 8px rgba(124, 58, 237, 0.15); /* Refined 3D presence */
    min-width: 184px; /* Generous min-width for confident presence */
}

.sc-wizard-btn-next:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(124, 58, 237, 0.25); /* Enhanced depth on hover */
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

.sc-wizard-btn-next:disabled {
    background: #E5E7EB !important;
    color: #9CA3AF !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Generating State - Calm, Premium Loading */
.sc-wizard-btn-next.sc-wizard-btn-generating {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 0.7 !important;
    cursor: wait;
    border: none !important;
    box-shadow: none !important;
    animation: sc-btn-pulse 2s ease-in-out infinite !important;
}

@keyframes sc-btn-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.99); }
}

/* Finish Button Shimmer - For the final success moment */
.sc-wizard-btn-finish {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
    background-size: 200% auto !important;
    animation: sc-wizard-shimmer 2s linear infinite !important;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3) !important;
    font-weight: 800 !important; /* ExtraBold (800) for maximum authority */
    letter-spacing: 0.5px !important;
    padding: 0 80px !important; /* Heroic horizontal padding (+25% from 64px) */
    min-width: 220px !important;
    color: #FFFFFF !important;
}

/* Generating state for the final step */
.sc-wizard-btn-next.sc-wizard-btn-final-generating {
    background: #7C3AED !important;
    color: #FFFFFF !important;
    opacity: 0.5 !important;
    cursor: wait;
    font-weight: 800; /* ExtraBold (800) for consistency */
    letter-spacing: 0.5px;
    padding: 0 80px !important;
    min-width: 220px !important;
    border: none !important;
}

@keyframes sc-wizard-shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Loading State */
.sc-wizard-btn.btn-loading {
    cursor: wait;
    pointer-events: none;
    opacity: 0.9;
}

.sc-wizard-btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: sc-wizard-spin 0.6s linear infinite;
}

/* ==========================================================================
   MOBILE INTEGRATION (BOTTOM SHEET)
   ========================================================================== */

/* Mobile Navigation integrated into bottom sheet */
.sc-wizard-mobile-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    padding: 0 24px;
    flex-shrink: 0;
    border-radius: 24px 24px 0 0;
}

.sc-wizard-mobile-progress-bar {
    width: 100%;
    height: 2px;
    background: #F3F4F6;
    margin-bottom: 8px;
    border-radius: 1px;
    overflow: hidden;
}

.sc-wizard-mobile-progress-inner {
    height: 100%;
    background: #7C3AED;
    width: 0;
    transition: width 0.3s ease;
}

.sc-wizard-mobile-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 16px 0; /* Tightened header padding (16px bottom) */
}

.sc-wizard-mobile-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-wizard-mobile-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.sc-wizard-mobile-global-actions {
    display: flex;
    gap: 8px;
}

.sc-wizard-btn-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border: none;
    border-radius: 50%;
    color: #4B5563;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-wizard-btn-icon:active {
    background: #E5E7EB;
    transform: scale(0.95);
}

/* Mobile Layout */
@media (max-width: 768px) {
    .sc-wizard-content {
        flex-direction: column-reverse;
    }

    .sc-wizard-right-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100dvh;
        z-index: 1;
        overflow: hidden; /* Lock background scroll */
        touch-action: none; /* Prevent touch drag on background */
    }

    .sc-wizard-left-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60dvh; /* Default height */
        max-height: 90dvh;
        background: #ffffff;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
        border-right: none;
        z-index: 100;
        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        overflow: visible; /* Allow footer shadow and handle */
    }

    .sc-wizard-header-fixed {
        display: none;
    }

    .sc-wizard-mobile-nav {
        display: flex;
    }

    .sc-wizard-mobile-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #E5E7EB;
        border-radius: 2px;
        margin: 8px auto 12px auto;
        flex-shrink: 0;
    }

    .sc-wizard-header {
        display: none; /* Consolidated into mobile-nav */
    }

    .sc-wizard-scroll-container {
        padding-bottom: 24px; /* Reduced since footer is no longer absolute */
    }

    .sc-wizard-input-zone {
        padding: 0 24px 24px 24px;
    }

    .sc-wizard-left-footer {
        position: relative; /* Changed from absolute to flow with flex */
        bottom: auto;
        left: auto;
        width: 100%;
        padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 20px));
        height: auto;
        background: #ffffff;
        box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.03); /* Subtle shadow to separate from content */
        border-top: 1px solid #F3F4F6;
        z-index: 10;
        margin-top: auto; /* Push to bottom of flex container */
    }

    /* Sticky Footer Gradient removed in favor of clean border/shadow */
    .sc-wizard-left-footer::before {
        display: none;
    }

    .sc-wizard-nav-actions {
        display: none; /* Hide floating desktop actions */
    }
}

/* Tablet Portrait */
@media (min-width: 769px) and (max-width: 1024px) {
    .sc-wizard-content { flex-direction: column; }
    .sc-wizard-right-panel { height: 400px; flex-shrink: 0; }
    .sc-wizard-left-panel { width: 100%; height: auto; border-right: none; }
}

/* Laptop Squeeze - Wider panel for content density */
@media (min-width: 1025px) and (max-width: 1300px) {
    .sc-wizard-left-panel { width: 480px; }
}

/* Prestige Alignment for large screens */
@media (min-width: 1025px) {
    .sc-wizard-header-text,
    .sc-wizard-input-zone,
    .sc-wizard-progress-container,
    .sc-wizard-btn-next {
        max-width: 100%; /* Remove fixed max-width to use full available panel width */
    }
    
    .sc-wizard-header-fixed,
    .sc-wizard-header,
    .sc-wizard-input-zone,
    .sc-wizard-left-footer {
        padding-left: 40px; 
        padding-right: 40px;
        display: flex;
        justify-content: flex-start; /* Left-align content within the 40px axis */
    }

    .sc-wizard-header-text,
    .sc-wizard-input-zone,
    .sc-wizard-progress-container {
        width: 100%;
    }

    .sc-wizard-left-footer {
        justify-content: space-between; /* Space out Back and Next */
    }
}

/* Animations */
@keyframes sc-wizard-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sc-wizard-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sc-wizard-spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes sc-wizard-springIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sc-wizard-flash {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.animate-spin {
    animation: sc-wizard-spin 1s linear infinite;
}

.animate-spin-once {
    animation: sc-wizard-spin-once 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-flash {
    animation: sc-wizard-flash 0.3s ease-in-out;
}

.wizard-step-content {
    animation: sc-wizard-fadeIn 0.4s ease-out;
    width: 100%;
}

/**
 * Step Component Styles
 * 
 * Designed for the split layout - inputs in Command Deck left panel
 */

/* ============================================
   FORM ELEMENTS
   ============================================ */

.sc-wizard-input-group {
    margin-bottom: 20px;
}

.sc-wizard-label {
    display: block;
    margin-bottom: 8px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-wizard-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sc-input-icon {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.sc-input-icon i {
    font-size: 20px;
    color: #9CA3AF;
}

.sc-wizard-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    color: #111827;
    font-size: 15px;
    transition: all 0.2s ease;
    height: 48px;
    box-sizing: border-box;
}

.sc-wizard-input:hover {
    background: #ffffff;
    border-color: #9CA3AF;
}

.sc-wizard-input:focus {
    outline: none;
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sc-wizard-input::placeholder {
    color: #9CA3AF;
}

/* Input with loader */
.sc-wizard-input-wrapper {
    position: relative;
}

.sc-input-loader {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

.sc-input-loader.visible {
    display: flex;
}

/* ============================================
   STEP 1: IDENTITY
   ============================================ */

.sc-logo-section {
    margin-top: 8px;
}

.sc-logo-upload-zone {
    width: 100%;
    height: 140px;
    border: 1px dashed #D1D5DB;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #F9FAFB;
    position: relative;
    overflow: hidden;
}

.sc-logo-upload-zone:hover {
    border-color: #4f46e5;
    background: #f5f7ff;
}

.sc-logo-upload-zone.dragover {
    border-color: #4f46e5;
    background: #f5f7ff;
    border-style: solid;
}

.sc-logo-upload-zone.has-logo {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.sc-logo-preview {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    animation: sc-step-fadeIn 0.3s ease;
}

.sc-upload-icon {
    font-size: 28px;
    margin-bottom: 8px;
    opacity: 0.4;
}

.sc-upload-text {
    font-size: 13px;
    color: #6B7280;
}

@keyframes sc-step-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Language Badge */
.sc-detected-info {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sc-language-badge {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.sc-language-badge:hover {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* Logo status text */
.sc-logo-status-text {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    color: #6B7280;
}

.sc-logo-status-text.visible {
    display: flex;
}

/* Logo quality warning */
.sc-logo-quality-warning {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    font-size: 12px;
    color: #fbbf24;
}

.sc-logo-quality-warning.visible {
    display: block;
}

/* ============================================
   STEP 2: BUSINESS
   ============================================ */

.sc-vibe-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sc-vibe-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.sc-vibe-item:hover {
    background: #ffffff;
    border-color: #D1D5DB;
}

.sc-vibe-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.sc-vibe-content {
    flex: 1;
}

.sc-vibe-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B7280;
    margin-bottom: 4px;
}

.sc-vibe-value {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.sc-vibe-input {
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    width: 100%;
}

.sc-vibe-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Brand Colors */
.sc-brand-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sc-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-color-swatch:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   STEP 3: GOALS
   ============================================ */

.sc-goals-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.sc-goal-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sc-goal-card:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.sc-goal-card.selected {
    border-color: #4f46e5;
    background: #f5f7ff;
}

.sc-goal-icon {
    font-size: 24px;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.sc-goal-content {
    flex: 1;
}

.sc-goal-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.sc-goal-desc {
    font-size: 12px;
    color: #6B7280;
}

/* ============================================
   STEP 4: PRIZES
   ============================================ */

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

.sc-prize-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
}

.sc-prize-row:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

.sc-prize-rank {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.sc-prize-rank.gold { 
    background: linear-gradient(135deg, #FFD700, #FFA500); 
    color: #000; 
}
.sc-prize-rank.silver { 
    background: linear-gradient(135deg, #E0E0E0, #A0A0A0); 
    color: #000; 
}
.sc-prize-rank.bronze { 
    background: linear-gradient(135deg, #CD7F32, #8B4513); 
}

.sc-prize-input {
    flex: 1;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    color: #111827;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow: visible;
    text-overflow: ellipsis;
    font-family: inherit;
}

.sc-prize-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    background: #ffffff;
}

.sc-prize-input::selection {
    background: rgba(79, 70, 229, 0.2);
    color: #111827;
}

/* Suggested Prizes */
.sc-suggested-prizes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.sc-suggested-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B7280;
    margin-bottom: 10px;
}

.sc-suggested-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sc-suggested-chip {
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    font-size: 12px;
    color: #818cf8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sc-suggested-chip:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* ============================================
   STEP 5: GENERATION
   ============================================ */

.sc-generation-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    padding: 24px;
}

.sc-magic-loader {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, #6366f1, #8b5cf6, #6366f1);
    animation: rotate 1.2s linear infinite;
    position: relative;
    margin-bottom: 32px;
}

.sc-magic-loader::before {
    content: '';
    position: absolute;
    inset: 3px;
    background: #0a0a0c;
    border-radius: 50%;
}

.sc-magic-loader::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    z-index: -1;
    filter: blur(15px);
    opacity: 0.4;
}

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

.sc-generation-status {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111827;
}

.sc-generation-sub {
    color: #6B7280;
    font-size: 13px;
    margin-bottom: 24px;
}

/* Progress Bar */
.sc-generation-progress {
    width: 100%;
    max-width: 280px;
}

.sc-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
}

.sc-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 100px;
    transition: width 0.4s ease-out;
}

/* ============================================
   SECTION HEADERS
   ============================================ */

.sc-section-header {
    margin-bottom: 20px;
    position: relative;
}

.sc-section-title {
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.sc-section-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}


/* ============================================
   DIVIDERS
   ============================================ */

.sc-divider {
    height: 1px;
    background: #E5E7EB;
    margin: 20px 0;
}

/* ============================================
   STEP 3: PHONE SIMULATOR (CSS iPhone)
   ============================================ */

.sc-wizard-container .sc-phone-frame-css {
    position: relative;
    width: 280px;
    height: 500px;
    background: #111827;
    border: 14px solid #111827;
    border-radius: 2.5rem;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

/* Haptic Buttons (Left Side) */
.sc-wizard-container .sc-phone-button {
    position: absolute;
    background: #1F2937;
    border-radius: 0 4px 4px 0;
}

.sc-wizard-container .sc-phone-button-left-1 {
    width: 3px;
    height: 32px;
    left: -17px;
    top: 72px;
}

.sc-wizard-container .sc-phone-button-left-2 {
    width: 3px;
    height: 46px;
    left: -17px;
    top: 124px;
}

.sc-wizard-container .sc-phone-button-left-3 {
    width: 3px;
    height: 46px;
    left: -17px;
    top: 178px;
}

/* Power Button (Right Side) */
.sc-wizard-container .sc-phone-button-right {
    width: 3px;
    height: 64px;
    right: -17px;
    top: 142px;
    border-radius: 4px 0 0 4px;
}

/* Screen Container */
.sc-wizard-container .sc-phone-screen-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    background: #ffffff;
}

/* Dynamic Island (Notch) */
.sc-wizard-container .sc-phone-dynamic-island {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
    background: #000000;
    border-radius: 0 0 1rem 1rem;
    z-index: 20;
}

/* Screen Content */
.sc-wizard-container .sc-phone-screen-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Background Image */
.sc-wizard-container .sc-phone-background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Loading State */
.sc-wizard-container .sc-phone-loading-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F9FAFB;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sc-wizard-container .sc-phone-loading-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 16px;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sc-wizard-container .sc-phone-loading-text {
    font-size: 12px;
    color: #9CA3AF;
    font-weight: 500;
    margin: 0;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Logo Visibility Protection Gradient */
.sc-wizard-container .sc-phone-logo-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px; /* 32 * 4 = 128px (h-32) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
    z-index: 10;
}

/* Logo Overlay (when background is shown) - sits on top of gradient */
.sc-wizard-container .sc-phone-logo-overlay {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 60%;
    max-height: 100px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 20; /* Above gradient (z-10) */
}

.sc-wizard-container .sc-phone-logo-overlay img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    border-radius: 8px; /* rounded-lg */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* shadow-sm */
}

/* ============================================
   STEP 3: DESIGN SELECTION FLOW
   ============================================ */

.sc-design-selection {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0; /* Remove padding to maintain 40px alignment axis */
}

/* Phase Indicator - Segmented Control */
.sc-phase-indicator {
    display: inline-flex;
    align-items: center;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 8px;
    margin-bottom: 8px;
    gap: 4px;
    width: fit-content;
}

.sc-phase-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: default;
    white-space: nowrap;
}

.sc-phase-step.pending {
    color: #6B7280;
    background: transparent;
}

.sc-phase-step.pending:hover {
    color: #374151;
}

.sc-phase-step.active {
    color: #111827;
    background: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sc-phase-step.completed {
    color: #6B7280;
    background: transparent;
}

.sc-phase-step.completed:hover {
    color: #374151;
}

.sc-phase-icon {
    font-size: 14px;
}

.sc-phase-label {
    font-weight: 500;
}

.sc-phase-connector {
    display: none;
}

/* Selection Section */
.sc-selection-section {
    text-align: left; 
    padding-top: 8px;
    padding-left: 0; 
    margin-left: 0; /* Strict left-anchor */
    animation: sc-fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-selection-header {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0;
    margin-left: 0; /* Strict left-anchor */
}

.sc-selection-title {
    font-size: 28px; 
    font-weight: 800; 
    color: #111827;
    margin: 0 0 8px 0;
    padding: 0; 
    margin-left: 0; /* Mathematical alignment with dots and cards */
    letter-spacing: -0.02em; 
}

.sc-selection-subtitle {
    font-size: 15px;
    color: #6B7280; /* Muted Grey */
    margin: 0 0 16px 0;
    line-height: 1.5; /* Increased from default */
}

/* Image Grid - Tight 3-column layout */
.sc-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px; /* Precision gap-3 */
    margin-bottom: 12px; /* Squeezed from 16px */
}

@media (max-width: 639px) {
    .sc-image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 10px;
    }
}

/* Image Option - Tactile Card Style */
.sc-image-option {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #E5E7EB; /* Fixed 2px to prevent layout shift */
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.sc-image-option.interactive:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.2);
    border-color: #7C3AED;
}

.sc-image-option.interactive:active {
    transform: translateY(-2px) scale(0.98);
}

.sc-image-option.selected {
    border-color: #7C3AED;
    border-width: 2px;
    background: #F3F0FF;
    box-shadow: 
        0 8px 16px -4px rgba(124, 58, 237, 0.3),
        inset 0 2px 4px rgba(0, 0, 0, 0.05); /* Added subtle inner shadow */
    transform: scale(1.02);
    z-index: 10;
}

.sc-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3; /* Strict 2:3 aspect ratio */
    overflow: hidden;
    background: #F3F4F6;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.2s ease;
}

.sc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Sticker-specific: Square aspect ratio and contain to show full design with text */
.sc-image-wrapper.sticker {
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #f8f9fa 25%, #f3f4f6 25%),
                linear-gradient(225deg, #f8f9fa 25%, #f3f4f6 25%),
                linear-gradient(45deg, #f8f9fa 25%, #f3f4f6 25%),
                linear-gradient(315deg, #f8f9fa 25%, #eeeff1 25%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 0, 4px -4px, 0 4px;
}

.sc-image-wrapper.sticker img {
    object-fit: contain;
    padding: 8px;
}

.sc-image-option:hover img {
    transform: scale(1.05);
}

.sc-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 12px;
}

.sc-image-option:hover .sc-image-overlay {
    opacity: 1;
}

.sc-image-label-container {
    padding: 8px 6px;
    background: #ffffff;
    border-top: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.sc-image-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #374151;
    text-align: center;
    letter-spacing: -0.025em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sc-image-option.selected .sc-image-label {
    color: #7C3AED;
}

/* Selected Check Animation */
.sc-selected-check {
    position: absolute;
    top: 8px; 
    right: 8px; 
    width: 24px;
    height: 24px;
    background: #7C3AED;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
    border: 2px solid #ffffff; 
    z-index: 30; /* Inside image area corner */
    animation: sc-wizard-springIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.sc-selected-check i {
    font-size: 14px;
    color: #ffffff !important; /* Pure White stroke */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

/* External Link */
.sc-image-open-link {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4B5563;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.sc-image-open-link:hover {
    background: #ffffff;
    color: #7C3AED;
    transform: scale(1.1);
}

/* Skeleton Upgrades - State of the Art */
.sc-skeleton-shimmer-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: sc-skeleton-shimmer 1.5s infinite linear;
    z-index: 2;
}

.sc-skeleton-card .sc-skeleton-content {
    background: #F3F4F6; /* bg-gray-100 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: sc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sc-skeleton-card i {
    display: none; /* Removed icons for "Solid" look */
}

.sc-skeleton-card {
    border: none !important; /* No borders for solid look */
}

.sc-skeleton-pill {
    height: 12px; /* h-3 equivalent */
    width: 80px; /* w-20 equivalent */
    background: #F3F4F6; /* bg-gray-100 */
    border-radius: 9999px; /* rounded-full */
    margin-top: 8px;
    animation: sc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tone-based Skeletons - Subdued pulses */
.sc-skeleton-card[data-tone="warm"] .sc-skeleton-content { background: #FFFBEB; }
.sc-skeleton-card[data-tone="cool"] .sc-skeleton-content { background: #F0F9FF; }
.sc-skeleton-card[data-tone="luxury"] .sc-skeleton-content { background: #FAF5FF; }

/* Regenerate Button - Simple & Beautiful Ghost Style */
.sc-regenerate-btn {
    margin-top: 24px; 
    margin-bottom: 32px;
    width: fit-content;
    padding: 8px 0; /* Vertical padding only */
    padding-left: 0 !important; /* Force flush left alignment */
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px; 
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500; 
    color: #6B7280; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-decoration: none;
}

.sc-regenerate-btn i {
    font-size: 14px; /* Smaller, thinner icon */
    color: #6B7280; /* Match text color */
    transition: all 0.2s ease;
}

.sc-regenerate-btn:hover {
    color: #7C3AED; /* Transition to Main Brand Purple */
    background: transparent; /* No heavy box */
}

.sc-regenerate-btn:hover i {
    color: #7C3AED;
    transform: rotate(15deg);
}

/* Sophisticated underline on hover */
.sc-regenerate-btn::after {
    content: '';
    position: absolute;
    bottom: 4px; /* 4px offset from text */
    left: 20px; /* Offset to start after icon */
    width: 0;
    height: 1px;
    background-color: #7C3AED;
    transition: width 0.2s ease;
}

.sc-regenerate-btn:hover::after {
    width: calc(100% - 20px);
}

.sc-regenerate-btn:active {
    transform: translateY(0);
    opacity: 0.8;
}

@keyframes sc-shimmer-wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* State-of-the-Art Shimmer Animation */
@keyframes sc-skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Copy Selection Skeleton */
.sc-copy-skeleton-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px; /* Align with updated regenerate btn spacing */
}

.sc-copy-skeleton-card {
    position: relative;
    padding: 20px 0; /* Align bones to the exact vertical axis of dots and title */
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Base card shape for visual continuity */
.sc-copy-skeleton-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
    z-index: -1;
    /* The card itself doesn't shimmer, only the bones */
}

.sc-skeleton-bone {
    margin-left: 0; 
    background: linear-gradient(
        45deg, 
        #F3F4F6 25%, 
        #F9FAFB 50%, 
        #F3F4F6 75%
    );
    background-size: 200% 100%;
    animation: sc-skeleton-shimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
}

/* Staggered entry timing for waterfall effect */
.sc-copy-skeleton-card:nth-child(1) .sc-skeleton-bone { animation-delay: 0s; }
.sc-copy-skeleton-card:nth-child(2) .sc-skeleton-bone { animation-delay: 0.15s; }
.sc-copy-skeleton-card:nth-child(3) .sc-skeleton-bone { animation-delay: 0.3s; }

.sc-skeleton-tag {
    width: 80px;
    height: 18px;
    border-radius: 6px;
    margin-left: 28px; /* Tags and content are indented within the card axis */
}

.sc-skeleton-hero {
    width: 60%;
    height: 24px;
    border-radius: 4px;
    margin-left: 28px;
}

.sc-skeleton-desc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 28px;
}

.sc-skeleton-line {
    width: 85%;
    height: 12px;
}

.sc-skeleton-line.short {
    width: 65%;
}

/* Alignment Fix: If the cards start at 40px, and the bars start at 40px, 
   then the cards themselves must have no left padding for the bones. */
.sc-copy-skeleton-card {
    padding-left: 28px; /* Restore padding to match real cards */
}

.sc-skeleton-tag, .sc-skeleton-hero, .sc-skeleton-desc {
    margin-left: 0; /* Content within card aligned to card's internal padding */
}

/* Re-evaluating: "Align the start of every skeleton bar to the exact same vertical baseline 
   as your progress dots and main title." 
   If Title is at 40px, and Card is at 40px, then Bar must be at 40px.
   This means the card border should be transparent or the card shifted left. 
   Most premium UIs align the CARDS to the title, and the CONTENT is indented.
   However, I will follow the user's specific request for the bars. */

.sc-copy-skeleton-card {
    padding-left: 0; /* Bones start at the container's 40px margin */
}

.sc-copy-skeleton-card::before {
    left: -28px; /* Extend card background to the left to match real card edges */
    width: calc(100% + 28px);
}

@keyframes sc-pulse {
    0%, 100% { 
        background-color: #F8FAFC;
    }
    50% { 
        background-color: #F1F5F9;
    }
}

.sc-loading-text {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin: 0 0 8px 0;
}

.sc-loading-subtext {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}

/* Progress bar for generation steps */
.sc-generation-progress {
    width: 100%;
    max-width: 280px;
    margin: 16px auto 8px;
}

.sc-progress-text {
    font-size: 11px; /* text-xs */
    color: #9CA3AF; /* text-gray-400 - more subtle than gray-500 for state of the art look */
    text-align: center;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.sc-progress-bar {
    height: 6px; /* h-1.5 equivalent - 6px */
    background: #F3F4F6; /* bg-gray-100 */
    border-radius: 9999px; /* rounded-full */
    overflow: hidden;
}

.sc-progress-fill {
    height: 100%;
    background: #4f46e5; /* Brand Indigo */
    border-radius: 9999px; /* rounded-full */
    transition: width 0.3s ease;
}

.sc-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    gap: 4px;
}

.sc-progress-step {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #9CA3AF;
    transition: color 0.2s ease;
}

.sc-progress-step.active {
    color: #6366f1;
    font-weight: 500;
}

.sc-progress-step.completed {
    color: #10B981;
}

.sc-progress-step .step-icon {
    font-size: 12px;
}

/* Skeleton card with completion state */
.sc-skeleton-card.completed {
    animation: none;
    background: #ffffff;
    border: 2px solid #10B981;
    position: relative;
}

.sc-skeleton-card.completed::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #10B981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Active generating state - soft glow, no hard border */
.sc-skeleton-card.generating {
    border: none;
    /* Contextual shadows removed to prevent color spill outside card */
    outline: 2px solid rgba(139, 92, 246, 0.1); /* Very subtle internal indicator */
    outline-offset: -2px;
}

.sc-skeleton-card.generating .sc-image-wrapper {
    /* Override tone background with processing indicator */
    filter: blur(6px) saturate(1.4) brightness(1.05);
}

/* Show magic wand icon only on actively generating card */
.sc-skeleton-card.generating .sc-skeleton-content i {
    display: block;
    position: relative;
    z-index: 2;
    color: rgba(255, 255, 255, 0.9);
    font-size: 28px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: sc-wand-wiggle 1.5s ease-in-out infinite;
}

/* Gentle wand wiggle animation */
@keyframes sc-wand-wiggle {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    25% { transform: rotate(8deg) scale(1.05); }
    50% { transform: rotate(-5deg) scale(1); }
    75% { transform: rotate(5deg) scale(1.02); }
}

/* Skeleton card base styles */
.sc-skeleton-card .sc-image-wrapper {
    border: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Skeleton labels - muted but readable (gray-500 for accessibility) */
.sc-skeleton-card .sc-image-label {
    color: #6B7280 !important;
    transition: color 0.3s ease;
}

@keyframes sc-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }
}

/* Time estimate */
.sc-time-estimate {
    font-size: 12px;
    color: #9CA3AF;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sc-time-estimate i {
    font-size: 14px;
}

/* Batch Section (for grouping generated options) */
.sc-batch-section {
    margin-bottom: 24px;
}

.sc-batch-section:first-child {
    margin-top: 0;
}

.sc-batch-label {
    font-size: 12px;
    font-weight: 700; /* Bold (700) */
    text-transform: uppercase; /* All-Caps */
    letter-spacing: 1px; /* 1px letter-spacing */
    color: #6B7280;
    margin-top: 16px; 
    margin-bottom: 12px;
    padding-left: 0;
    display: block;
}

.sc-batch-section:first-child .sc-batch-label {
    color: #7C3AED; /* text-purple-600 */
}

/* Image Grid (for backgrounds & stickers) */
.sc-image-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; /* Reduced from 16px to give cards more horizontal space for labels */
    margin-bottom: 20px;
    width: 100%;
    padding: 4px 0; /* Updated: removed side padding for alignment */
}

/* Scrollbar Utility */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Phone Logo Overlay */
.sc-phone-logo-overlay {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sc-phone-logo-overlay img {
    max-width: 120px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 8px; /* rounded-lg */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* shadow-sm */
}

/* Copy Grid */
.sc-copy-grid {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Uniform mathematical gap of exactly 12px */
    margin-bottom: 0;
}

.sc-copy-option {
    position: relative;
    padding: 12px 28px; 
    background: #ffffff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05); /* 20px blur, 5% opacity ambient shadow */
}

.sc-copy-option:hover {
    background: #FAFAFA;
    box-shadow: 0 20px 25px rgba(124, 58, 237, 0.08); 
    transform: translateY(-1px);
}

.sc-copy-option.selected {
    border: 1.5px solid rgba(124, 58, 237, 0.6); 
    background: #FDFCFF;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08), 
                0 10px 20px -5px rgba(124, 58, 237, 0.12); 
}

.sc-copy-text {
    font-size: 20px;
    font-weight: 700;
    color: #374151; /* Dark Slate Grey hero quote */
    margin-bottom: 8px; 
    line-height: 1.35;
}

.sc-copy-style {
    display: inline-flex;
    align-items: center; 
    gap: 6px; /* Exactly 6px gap between icon and text for breathing room */
    padding: 2px 10px; 
    background: rgba(124, 58, 237, 0.1); 
    border-radius: 6px; 
    font-size: 11px;
    font-weight: 500; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7C3AED;
    margin-bottom: 8px;
}

/* Label text alignment fix */
.sc-copy-style span {
    padding-bottom: 1px; 
}

/* Style label icons - smaller and thinner */
.sc-copy-style i {
    font-size: 12px; 
    color: inherit;
    line-height: 1;
    opacity: 0.8;
}

.sc-copy-reasoning {
    font-size: 13px; 
    color: #6B7280; 
    font-weight: 400;
    line-height: 1.5; /* Exactly 1.5 for consistent scannability */
}

.sc-copy-option .sc-selected-badge {
    top: 50%;
    transform: translateY(-50%);
}

/* Confirm Button */
.sc-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.sc-confirm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* Complete State Summary */
.sc-selections-summary {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
}

.sc-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sc-summary-thumb {
    width: 80px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(99, 102, 241, 0.3);
}

.sc-summary-thumb.sticker {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: linear-gradient(135deg, #1a1a1a 25%, transparent 25%),
                linear-gradient(225deg, #1a1a1a 25%, transparent 25%),
                linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
                linear-gradient(315deg, #1a1a1a 25%, #0a0a0c 25%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 0, 5px -5px, 0 5px;
}

.sc-summary-text {
    padding: 12px 16px;
    background: #f5f7ff;
    border: 1px solid #4f46e5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    max-width: 120px;
}

.sc-summary-item span {
    font-size: 11px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cover Section (shown after complete) */
.sc-cover-section {
    margin-top: 16px; /* Squeezed from 32px to eliminate scroll */
    padding-top: 16px; /* Squeezed from 32px */
    border-top: 1px solid #F3F4F6;
}

.sc-cover-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px; /* Tight gap-2 for 4 columns */
    margin-bottom: 12px; /* Squeezed from 16px */
    width: 100%;
}

.sc-cover-option {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
    width: 100%; /* Flexible width */
}

.sc-cover-option:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.1);
    border-color: #7C3AED;
}

.sc-cover-option.selected {
    border-color: #7C3AED;
    border-width: 2px;
    background: #F3F0FF;
    box-shadow: 0 8px 16px -4px rgba(124, 58, 237, 0.3);
    transform: scale(1.02);
    z-index: 10;
}

.sc-cover-texture-wrapper {
    width: 100%;
    height: 60px; /* Reduced from 80px to save space for 4-cols */
    background: #F3F4F6;
    overflow: hidden;
}

.sc-cover-texture-swatch {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.sc-cover-texture-swatch.concrete-swatch {
    filter: brightness(1.08) contrast(0.85) saturate(0.7) sepia(0.1); /* Warmed up, matte finish to distinct from shiny silver */
}

.sc-cover-option:hover .sc-cover-texture-swatch {
    transform: scale(1.1);
}

.sc-cover-texture-swatch.rainbow-swatch {
    background: linear-gradient(135deg, #FECDD3, #E9D5FF, #BAE6FD); /* rose-200 via-purple-200 to-sky-200 */
    background-size: 200% 200%;
    animation: sc-holographic-shift 8s ease infinite;
}

@keyframes sc-holographic-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sc-cover-label-container {
    padding: 8px 4px;
    background: #ffffff;
    border-top: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.sc-cover-option.selected .sc-cover-label-container {
    background: #F5F3FF;
}

.sc-cover-name {
    font-size: 11px; /* text-xs equivalent */
    font-weight: 500; /* font-medium */
    color: #374151; /* text-gray-700 */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    letter-spacing: -0.01em;
}

.sc-cover-option.selected .sc-cover-name {
    color: #7C3AED;
}

/* Refined Color Picker */
.sc-color-picker-refined {
    margin-top: 16px;
    animation: sc-fade-in-up 0.3s ease-out;
}

/* Color input row - tool control style */
.sc-color-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F9FAFB; /* bg-gray-50 */
    border: 1px solid #E5E7EB; /* border-gray-200 */
    border-radius: 8px;
    padding: 8px 12px;
    height: 40px;
}

.sc-color-swatch-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05); /* Extra border safety for white colors */
}

.sc-hex-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'SF Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    outline: none;
    padding: 0;
    text-transform: uppercase; /* Professional hex code standard */
    letter-spacing: 0.5px;
}

.sc-hidden-picker {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    pointer-events: none;
}

.sc-color-input-row:focus-within {
    border-color: #7C3AED;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
}

.sc-cover-option.selected .sc-cover-name {
    color: #7C3AED;
}

/* Segmented Control (Tabs) */
.sc-segmented-control {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 8px;
}

.sc-tab {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #6B7280;
    font-weight: 500;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.sc-tab:hover {
    color: #374151;
}

.sc-tab.active {
    background: white;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Copy Input Section */
.sc-copy-input-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sc-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-input-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.sc-copy-headline-input,
.sc-copy-subhead-input {
    padding: 12px 16px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.sc-copy-headline-input:focus,
.sc-copy-subhead-input:focus {
    outline: none;
    border-color: #4f46e5;
}

.sc-copy-preview-text {
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 6px;
    font-size: 14px;
    color: #6B7280;
}

.sc-headline-preview {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.sc-subhead-preview {
    font-size: 14px;
    color: #6B7280;
}

/* Phone Text Overlay */
.sc-phone-text-overlay {
    position: absolute;
    bottom: 96px; /* bottom-24 equivalent */
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 24px;
    z-index: 30;
    pointer-events: none;
}

.sc-phone-text-headline {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Assistant', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sc-phone-text-subhead {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
    font-family: 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Color Picker */
.sc-color-picker-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sc-color-option {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sc-color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.sc-color-option.selected {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

.sc-color-picker-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.sc-color-picker-row label {
    font-size: 12px;
    color: #6B7280;
}

.sc-cover-color-picker {
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
}

.sc-color-value {
    font-size: 12px;
    color: #111827;
    font-family: monospace;
}

/* ============================================
   STEP GENERATE - Prize Generation
   ============================================ */

.sc-generate-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 32px;
}

.sc-generate-content {
    text-align: center;
    max-width: 400px;
}

.sc-generate-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.sc-generate-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #E5E7EB;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.sc-generate-icon {
    font-size: 48px;
}

.sc-generate-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.sc-generate-subtitle {
    font-size: 14px;
    color: #6B7280;
    margin: 0;
}

.sc-generate-success .sc-generate-title {
    color: #059669;
}

.sc-generate-error .sc-generate-title {
    color: #DC2626;
}

.sc-generate-prizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.sc-prize-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #F9FAFB;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
}

.sc-prize-badge {
    font-size: 18px;
}

.sc-generate-retry {
    margin-top: 16px;
    padding: 10px 20px;
    background: #4f46e5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.sc-generate-retry:hover {
    background: #4338ca;
}

/**
 * Promo Landing Page - Premium Styling
 * 
 * State-of-the-art design for cold outreach landing pages.
 * Features: Glassmorphism, smooth animations, premium typography.
 * Supports RTL languages (Hebrew).
 * 
 * @module promo/styles
 */

/* ============================================================================
   FONT & ICON IMPORTS
   ============================================================================ */

/* All required fonts: Inter (base), Plus Jakarta Sans (display), and Hebrew fonts */

/* Phosphor Icons */

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

:root {
    /* Brand Colors - Dynamic via --promo-primary */
    --promo-primary: #6366f1;
    --promo-primary-dark: #4f46e5;
    --promo-primary-light: #818cf8;
    --promo-primary-glow: rgba(99, 102, 241, 0.4);
    
    /* Neutral Palette - Sophisticated grays */
    --promo-bg-dark: #0a0a0f;
    --promo-bg-card: rgba(255, 255, 255, 0.03);
    --promo-bg-card-hover: rgba(255, 255, 255, 0.06);
    --promo-border: rgba(255, 255, 255, 0.08);
    --promo-border-hover: rgba(255, 255, 255, 0.15);
    
    /* Text Colors */
    --promo-text-primary: #ffffff;
    --promo-text-secondary: rgba(255, 255, 255, 0.7);
    --promo-text-muted: rgba(255, 255, 255, 0.5);
    
    /* Accent Colors */
    --promo-success: #10b981;
    --promo-warning: #f59e0b;
    --promo-accent-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    
    /* Typography */
    --promo-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --promo-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --promo-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --promo-space-xs: 4px;
    --promo-space-sm: 8px;
    --promo-space-md: 16px;
    --promo-space-lg: 24px;
    --promo-space-xl: 32px;
    --promo-space-2xl: 48px;
    --promo-space-3xl: 64px;
    --promo-space-4xl: 96px;
    
    /* Border Radius */
    --promo-radius-sm: 8px;
    --promo-radius-md: 12px;
    --promo-radius-lg: 16px;
    --promo-radius-xl: 24px;
    --promo-radius-full: 9999px;
    
    /* Shadows */
    --promo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --promo-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
    --promo-shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
    --promo-shadow-glow: 0 0 60px var(--promo-primary-glow);
    
    /* Transitions */
    --promo-transition-fast: 150ms ease;
    --promo-transition-normal: 250ms ease;
    --promo-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================================
   RESET & BASE
   ============================================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background: var(--promo-bg-dark);
    color: var(--promo-text-primary);
    font-family: var(--promo-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

#promo-root {
    min-height: 100vh;
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.promo-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--promo-space-lg);
}

.promo-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--promo-border);
    border-top-color: var(--promo-primary);
    border-radius: 50%;
    animation: promo-spin 1s linear infinite;
}

.promo-loading-text {
    color: var(--promo-text-secondary);
    font-size: 1rem;
}

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

/* ============================================================================
   ERROR STATE
   ============================================================================ */

.promo-error {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--promo-space-xl);
    gap: var(--promo-space-md);
}

.promo-error-icon {
    font-size: 4rem;
    color: var(--promo-warning);
}

.promo-error h2 {
    margin: 0;
    font-family: var(--promo-font-display);
    font-size: 1.5rem;
}

.promo-error p {
    color: var(--promo-text-secondary);
    margin: 0;
}

/* ============================================================================
   PAGE CONTAINER
   ============================================================================ */

.promo-page {
    min-height: 100vh;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ============================================================================
   CHAMELEON THEME - brand tinted background + business vibe
   ============================================================================ */

.promo-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1200px 600px at 15% 25%, color-mix(in srgb, var(--promo-primary) 18%, transparent) 0%, transparent 60%),
        radial-gradient(900px 500px at 85% 15%, color-mix(in srgb, var(--promo-primary) 14%, transparent) 0%, transparent 55%),
        radial-gradient(900px 650px at 50% 90%, color-mix(in srgb, var(--promo-primary) 10%, transparent) 0%, transparent 60%);
    opacity: 0.9;
}

.promo-page--restaurant::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(800px 500px at 20% 35%, rgba(255, 200, 120, 0.08), transparent 60%),
        radial-gradient(700px 450px at 75% 25%, rgba(140, 220, 255, 0.06), transparent 55%),
        radial-gradient(1100px 650px at 50% 100%, rgba(255, 255, 255, 0.04), transparent 60%);
}

.promo-page--retail::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(transparent, transparent),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
    background-size: 100% 100%, 26px 26px;
    opacity: 0.45;
}

.promo-page--ecommerce::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 500px at 30% 30%, rgba(255,255,255,0.04), transparent 60%),
        radial-gradient(1000px 600px at 70% 70%, rgba(255,255,255,0.03), transparent 60%);
    opacity: 0.7;
}

.promo-page--service::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 500px at 35% 35%, rgba(255,255,255,0.05), transparent 60%),
        radial-gradient(700px 450px at 75% 25%, rgba(255,255,255,0.03), transparent 55%);
    opacity: 0.7;
}

.promo-page.promo-page-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Background Particles */
.promo-bg-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(139, 92, 246, 0.1), transparent),
        radial-gradient(ellipse 40% 30% at 20% 70%, rgba(59, 130, 246, 0.08), transparent);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

.promo-nav {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--promo-space-md) var(--promo-space-xl);
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--promo-border);
    transition: background 0.3s ease;
}

.promo-nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.promo-nav-logo img {
    height: 40px;
    width: auto;
}

.promo-nav-cta {
    padding: var(--promo-space-sm) var(--promo-space-lg);
    background: var(--promo-primary);
    color: var(--promo-primary-contrast, white);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--promo-radius-full);
    transition: all var(--promo-transition-normal);
}

.promo-nav-cta:hover {
    background: var(--promo-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--promo-shadow-glow);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.promo-hero {
    min-height: calc(100vh - 80px); /* Fill viewport minus nav */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--promo-space-xl), 5vw, var(--promo-space-3xl)); /* Tightened gap: 32px to 64px range */
    align-items: center; /* Vertically center content */
    padding: var(--promo-space-xl) var(--promo-space-xl);
    position: relative;
    z-index: 1;
    max-width: 1200px; /* max-w-6xl */
    margin: 0 auto;
}

.promo-hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--promo-space-md);
    padding-top: 20px; /* Slight offset for visual balance */
}

/* Hero status pills */
.promo-hero-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--promo-space-sm);
    align-items: center;
    margin-bottom: var(--promo-space-xs); /* Tightened gap */
}

.promo-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--promo-radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--promo-border);
    color: var(--promo-text-secondary);
    font-size: 0.85rem;
    backdrop-filter: blur(14px);
}

.promo-status-pill i {
    color: var(--promo-primary-light);
}

.promo-status-pill-muted {
    opacity: 0.9;
}

.promo-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}

/* Title */
.promo-hero-title {
    margin: 0;
    font-family: var(--promo-font-display);
    font-size: clamp(2rem, 4vw, 3.25rem); /* Reduced slightly for better laptop fit */
    font-weight: 800;
    line-height: 1.15;
    text-wrap: balance;
    max-width: 15ch; /* Encourage better line breaks */
    letter-spacing: -0.03em;
    padding-bottom: 0.05em;
    background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtitle */
.promo-hero-subtitle {
    margin: 0;
    font-size: 1.125rem; /* Slightly smaller for density */
    color: var(--promo-text-secondary);
    max-width: 500px;
}

.promo-hero-subtitle strong {
    color: var(--promo-text-primary);
    font-weight: 700;
}

/* Benefits List */
.promo-benefits {
    list-style: none;
    padding: 0;
    margin: var(--promo-space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--promo-space-md);
}

.promo-benefit {
    display: flex;
    align-items: center;
    gap: var(--promo-space-md);
    font-size: 1rem;
    color: var(--promo-text-secondary);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
    transition-delay: var(--delay, 0s);
}

.promo-page-loaded .promo-benefit {
    opacity: 1;
    transform: translateX(0);
}

.promo-benefit i {
    font-size: 1.25rem;
    color: var(--promo-success);
}

/* CTAs */
.promo-hero-ctas {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px; /* Exact gap-8 */
    margin-top: 40px; /* Exact mt-10 */
}

/* Social Proof */
.promo-social-proof {
    display: flex;
    align-items: center;
    gap: 12px; /* Exact gap-3 */
    margin-top: 48px; /* Exact mt-12 */
    color: var(--promo-text-muted);
    font-size: 0.875rem;
}

.promo-hero-demo-note {
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--promo-text-muted);
    opacity: 0.8;
}

.promo-avatars {
    display: flex;
    gap: 12px; /* gap-3 */
}

.promo-avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--promo-radius-full);
    background: rgba(255, 255, 255, 0.1); /* bg-white/10 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); /* ring-1 ring-white/20 */
    color: var(--promo-text-primary); /* text-white/gray-200 */
    font-size: 14px;
    transition: all var(--promo-transition-normal);
}

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

/* Hero Preview */
.promo-hero-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    max-height: 65vh; /* Constraint based on viewport height */
}

/* Colored brand glow behind phone */
.promo-hero-preview::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 500px;
    background: var(--phone-glow, var(--promo-primary));
    filter: blur(100px);
    opacity: 0.25;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* ============================================================================
   iPHONE MOCKUP - iPhone 15 Pro Style
   ============================================================================ */

.promo-iphone {
    position: relative;
    perspective: 1200px;
    z-index: 1;
    max-height: 65vh; /* Hard limit for phone */
    display: flex;
    align-items: center;
}

.promo-iphone-frame {
    width: auto;
    aspect-ratio: 290 / 600;
    max-height: 65vh; /* Match container constraint */
    background: #1c1c1e;
    border-radius: 54px;
    padding: 10px;
    box-shadow: 
        /* Titanium frame effect */
        0 0 0 2px #3a3a3c,
        0 0 0 4px #1c1c1e,
        /* Outer glow */
        0 30px 60px rgba(0,0,0,0.4),
        0 10px 20px rgba(0,0,0,0.3),
        /* Inner highlight */
        inset 0 1px 1px rgba(255,255,255,0.05);
    position: relative;
    overflow: visible;
    transform: rotateY(-8deg) rotateX(3deg);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.promo-iphone:hover .promo-iphone-frame {
    transform: rotateY(-2deg) rotateX(1deg);
}

/* Dynamic Island */
.promo-iphone-dynamic-island {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 28px;
    background: #000;
    border-radius: 20px;
    z-index: 10;
}

/* Screen */
.promo-iphone-screen {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 46px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Removed padding-top to allow content to fill entire screen */
}

.promo-iphone-screen iframe {
    width: 100%;
    height: 100%;
    flex: 1;
    border: none;
    filter: brightness(1.15); /* OLED pop effect */
    display: block;
}

/* Home Indicator */
.promo-iphone-home {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    z-index: 10;
}

/* Side buttons - Volume */
.promo-iphone-frame::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 120px;
    width: 3px;
    height: 28px;
    background: #3a3a3c;
    border-radius: 2px 0 0 2px;
    box-shadow: 
        0 40px 0 #3a3a3c,
        0 75px 0 #3a3a3c;
}

/* Side button - Power */
.promo-iphone-frame::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 160px;
    width: 3px;
    height: 65px;
    background: #3a3a3c;
    border-radius: 0 2px 2px 0;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--promo-space-sm);
    padding: 12px var(--promo-space-xl); /* Tightened vertical padding from var(--promo-space-md) */
    font-family: var(--promo-font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--promo-radius-md);
    cursor: pointer;
    transition: all var(--promo-transition-normal);
    white-space: nowrap; /* Prevent text wrap */
}

.promo-btn i {
    font-size: 1.25rem;
}

.promo-btn-primary {
    background: linear-gradient(to right, var(--promo-primary-light), var(--promo-primary));
    color: var(--promo-primary-contrast, white);
    box-shadow: 0 0 20px color-mix(in srgb, var(--promo-primary) 40%, transparent); /* Clean primary glow */
}

.promo-btn-primary:hover {
    background: var(--promo-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--promo-primary-glow);
}

.promo-btn-secondary {
    background: transparent;
    color: var(--promo-text-secondary);
    border: 1px solid var(--promo-border);
    box-shadow: none;
}

.promo-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--promo-border-hover);
    color: var(--promo-text-primary);
}

.promo-btn-large {
    padding: 16px 40px; /* Generous py-4 px-10 */
    font-size: 1.05rem;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */

.promo-section {
    position: relative;
    z-index: 1;
    padding: var(--promo-space-4xl) var(--promo-space-xl);
    max-width: 1400px;
    margin: 0 auto;
}

.promo-section-header {
    text-align: center;
    margin-bottom: var(--promo-space-3xl);
}

.promo-section-tag {
    display: inline-block;
    padding: var(--promo-space-xs) var(--promo-space-md);
    background: var(--promo-bg-card);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--promo-primary-light);
    margin-bottom: var(--promo-space-md);
}

.promo-section-title {
    margin: 0 0 var(--promo-space-md);
    font-family: var(--promo-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Typewriter Effect */
.promo-typewriter-wrapper {
    display: inline-flex;
    align-items: center;
    color: var(--promo-primary-light);
    white-space: nowrap; /* Prevent line breaks during animation */
    min-height: 1.2em;   /* Stabilize height */
    vertical-align: bottom;
}

.promo-typewriter {
    min-width: 2px;
    display: inline-block;
}

.promo-typewriter-cursor {
    margin-left: 2px;
    font-weight: 200;
    animation: promo-cursor-blink 1s step-end infinite;
}

@keyframes promo-cursor-blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

.promo-section-desc {
    margin: 0;
    color: var(--promo-text-secondary);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.promo-scratch-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--promo-space-sm);
    margin: 0;
    color: var(--promo-text-secondary);
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto;
}

.promo-scratch-hint i {
    font-size: 1.25rem;
    color: var(--promo-primary-light);
}

/* ============================================================================
   CARDS + NEW SECTIONS (Why/What/Trust/Urgency)
   ============================================================================ */

.promo-why-grid,
.promo-what-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--promo-space-lg);
}

.promo-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--promo-radius-xl);
    padding: var(--promo-space-xl);
    box-shadow: var(--promo-shadow-md);
    backdrop-filter: blur(18px);
}

.promo-card-strong {
    background:
        radial-gradient(600px 280px at 10% 10%, color-mix(in srgb, var(--promo-primary) 14%, transparent) 0%, transparent 70%),
        rgba(255, 255, 255, 0.03);
}

.promo-card-header {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    margin-bottom: var(--promo-space-md);
}

.promo-card-header i {
    color: var(--promo-primary-light);
    font-size: 1.2rem;
}

/* Gold star icon for reviews */
.promo-icon-gold {
    color: #fbbf24 !important;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.3));
}

.promo-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.promo-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);  /* Bumped from 0.75 for better legibility on black */
    line-height: 1.7;
    font-size: 0.95rem;
}

.promo-psychology-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.promo-psychology-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--promo-radius-lg);
    border: 1px solid var(--promo-border);
    background: rgba(0,0,0,0.25);
    transition: all var(--promo-transition-normal);
}

.promo-psychology-row:hover {
    border-color: var(--promo-border-hover);
    background: rgba(255,255,255,0.04);
}

.promo-psychology-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: var(--promo-primary-light);
    font-size: 1rem;
}

.promo-psychology-text {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--promo-text-secondary);
}

.promo-psychology-text strong {
    color: var(--promo-text-primary);
    margin-left: 4px;
}

/* RTL overrides for psychology list */
.promo-rtl .promo-psychology-row {
    flex-direction: row;
}

.promo-rtl .promo-psychology-icon {
    margin-left: 0;
    margin-right: 0;
}

.promo-rtl .promo-psychology-text {
    text-align: right;
}

.promo-rtl .promo-psychology-text strong {
    margin-left: 4px;
    margin-right: 0;
}

.promo-compare {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--promo-space-md);
}

.promo-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: var(--promo-radius-lg);
    border: 1px solid var(--promo-border);
    background: rgba(0,0,0,0.25);
    color: var(--promo-text-secondary);
}

.promo-compare-row strong {
    color: var(--promo-text-primary);
    font-size: 1.05rem;
}

.promo-compare-row-low strong {
    color: var(--promo-text-muted);
}

.promo-compare-row-highlight {
    border-color: color-mix(in srgb, var(--promo-primary) 35%, var(--promo-border));
    background: color-mix(in srgb, var(--promo-primary) 12%, rgba(0,0,0,0.25));
}

.promo-percent-up {
    color: var(--promo-success) !important;
}

.promo-percent-up::before {
    content: '↑ ';
    font-size: 0.85em;
}

.promo-card-result {
    margin-top: var(--promo-space-md);
    padding-top: var(--promo-space-md);
    border-top: 1px solid var(--promo-border);
    display: grid;
    gap: 6px;
}

.promo-card-result-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    color: var(--promo-text-muted);
    font-weight: 700;
}

.promo-card-result strong {
    color: var(--promo-text-primary);
    font-weight: 700;
}

/* ============================================================================
   REVENUE FLOW SECTION - Horizontal Process Flow
   ============================================================================ */

.promo-flow-section {
    position: relative;
    overflow: hidden;
}

.promo-flow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 48px);
    max-width: 1000px;
    margin: 0 auto;
}

.promo-flow-card {
    flex: 1;
    max-width: 400px;
    padding: var(--promo-space-2xl) var(--promo-space-xl);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 32px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.promo-flow-card.promo-card-strong {
    background:
        radial-gradient(600px 280px at 10% 10%, color-mix(in srgb, var(--promo-primary) 14%, transparent) 0%, transparent 70%),
        rgba(255, 255, 255, 0.03);
}

.promo-flow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}

.promo-flow-card-2 {
    transform: translateX(40px);
}

.promo-flow-card.promo-visible {
    opacity: 1;
    transform: translateX(0);
}

.promo-flow-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-8px);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 40px color-mix(in srgb, var(--promo-primary) 20%, transparent),
        inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.promo-flow-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--promo-space-xl);
    background: linear-gradient(135deg, var(--promo-primary-light) 0%, var(--promo-primary) 100%);
    border-radius: 24px; /* Squircle style */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 10px 25px color-mix(in srgb, var(--promo-primary) 40%, transparent),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.promo-flow-icon i {
    font-size: 2rem;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.promo-flow-icon-action {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 
        0 10px 25px rgba(16, 185, 129, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.promo-flow-card h3 {
    margin: 0 0 var(--promo-space-md);
    font-family: var(--promo-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--promo-text-primary);
    line-height: 1.2;
}

.promo-flow-card p {
    margin: 0;
    color: var(--promo-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: balance;
}

.promo-flow-card strong {
    color: var(--promo-primary-light);
    font-weight: 700;
}

/* Highlight stat in flow card */
.promo-highlight-stat {
    background: linear-gradient(135deg, var(--promo-primary-light) 0%, var(--promo-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    font-size: 1.1em;
}

/* Flow Arrow */
.promo-flow-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 100px;
    opacity: 0;
    transition: all 0.5s ease 0.4s;
}

.promo-flow-arrow.promo-visible {
    opacity: 1;
}

.promo-flow-arrow-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    margin-top: 4px;
}

.promo-flow-arrow-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--promo-text-muted);
    background: rgba(255,255,255,0.05);
    padding: 4px 12px;
    border-radius: var(--promo-radius-full);
}

.promo-flow-arrow i {
    font-size: 1.75rem;
    color: var(--promo-primary-light);
    animation: promo-arrow-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--promo-primary-glow));
}

@keyframes promo-arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(5px); opacity: 1; }
}

/* RTL Flow */
.promo-rtl .promo-flow-container {
    flex-direction: row; /* Natural RTL order puts first child on the right */
}

.promo-rtl .promo-flow-card {
    transform: translateX(40px);
}

.promo-rtl .promo-flow-card-2 {
    transform: translateX(-40px);
}

.promo-rtl .promo-flow-arrow i {
    transform: scaleX(-1);
}

@keyframes promo-arrow-pulse-rtl {
    0%, 100% { transform: translateX(0) scaleX(-1); opacity: 0.7; }
    50% { transform: translateX(-5px) scaleX(-1); opacity: 1; }
}

.promo-rtl .promo-flow-arrow i {
    animation: promo-arrow-pulse-rtl 2s ease-in-out infinite;
}

/* Mobile Flow */
@media (max-width: 768px) {
    .promo-flow-container {
        flex-direction: column;
        gap: var(--promo-space-lg);
    }
    
    .promo-flow-card {
        max-width: 100%;
        transform: translateY(40px);
    }
    
    .promo-flow-card-2 {
        transform: translateY(40px);
    }
    
    .promo-flow-arrow {
        flex-direction: row;
        min-width: auto;
        gap: var(--promo-space-sm);
    }
    
    .promo-flow-arrow-line {
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--promo-primary-light) 50%, transparent 100%);
        display: block;
    }
    
    .promo-flow-arrow i {
        transform: rotate(90deg);
    }
    
    .promo-rtl .promo-flow-container {
        flex-direction: column;
    }
    
    .promo-rtl .promo-flow-card,
    .promo-rtl .promo-flow-card-2 {
        transform: translateY(40px);
    }
    
    .promo-rtl .promo-flow-arrow i {
        transform: rotate(90deg);
        animation: promo-arrow-pulse-mobile 2s ease-in-out infinite;
    }
    
    @keyframes promo-arrow-pulse-mobile {
        0%, 100% { transform: rotate(90deg) translateX(0); opacity: 0.7; }
        50% { transform: rotate(90deg) translateX(5px); opacity: 1; }
    }
}

.promo-trust-list {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.promo-trust-item {
    display: flex;
    align-items: center;
    gap: var(--promo-space-md);
    padding: 14px 16px;
    border-radius: var(--promo-radius-xl);
    border: 1px solid var(--promo-border);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    color: rgba(255, 255, 255, 0.75);  /* Increased contrast */
}

.promo-trust-item strong {
    color: var(--promo-text-primary);
}

.promo-trust-note {
    text-align: center;
    margin-top: var(--promo-space-xl);
    color: var(--promo-primary-light);
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Disclaimer Footer */
.promo-disclaimer {
    padding: var(--promo-space-2xl) var(--promo-space-xl);
    border-top: 1px solid var(--promo-border);
    background: rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
}

.promo-disclaimer-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.promo-disclaimer p {
    font-size: 0.85rem;
    color: var(--promo-text-muted);
    line-height: 1.7;
    margin: 0;
    text-wrap: balance;
    opacity: 0.8;
}

/* Solid green check icon */
.promo-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: #10b981;
    border-radius: 50%;
    color: white;
    font-size: 0.75rem;
}

.promo-check-icon i {
    color: white !important;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Color swatch for brand color display */
.promo-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.promo-color-swatch-ring {
    border: 1px solid rgba(255, 255, 255, 0.25);
    outline: 1px solid rgba(255, 255, 255, 0.1);
    outline-offset: 1px;
}

/* Scroll hint animation */
.promo-scroll-hint {
    margin-top: var(--promo-space-2xl);
    display: flex;
    justify-content: center;
    animation: promo-bounce 2s infinite;
}

@media (min-width: 1025px) {
    .promo-scroll-hint {
        justify-content: flex-start;
        padding-left: var(--promo-space-md);
    }
}

.promo-scroll-hint a {
    color: var(--promo-text-muted);
    font-size: 1.5rem;
    text-decoration: none;
    transition: color var(--promo-transition-fast);
}

.promo-scroll-hint a:hover {
    color: var(--promo-primary-light);
}

@keyframes promo-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* ============================================================================
   LIVE PREVIEW SECTION - Full Width Strip
   ============================================================================ */

.promo-preview-section {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.promo-preview-section .promo-section-header {
    padding: 0 var(--promo-space-xl);
}

.promo-live-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--promo-space-lg);
}

.promo-live-preview iframe {
    width: 100%;
    height: 700px;
    border: none;
    background: #000;
}

.promo-live-preview-hint {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    color: var(--promo-text-muted);
    font-size: 0.875rem;
    animation: promo-pulse 2s ease-in-out infinite;
}

@keyframes promo-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================================================
   MOCKUP GALLERY
   ============================================================================ */

.promo-gallery-section {
    /* Subtle noise texture for visual differentiation */
    background: 
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 60%);
}

.promo-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--promo-space-xl);
}

/* Tabs */
.promo-gallery-tabs {
    display: flex;
    justify-content: center;
    gap: var(--promo-space-sm);
    padding: var(--promo-space-xs);
    background: var(--promo-bg-card);
    border-radius: var(--promo-radius-full);
    border: 1px solid var(--promo-border);
    width: fit-content;
    margin: 0 auto;
}

.promo-gallery-tab {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    padding: var(--promo-space-sm) var(--promo-space-lg);
    background: transparent;
    border: none;
    border-radius: var(--promo-radius-full);
    color: var(--promo-text-secondary);
    font-family: var(--promo-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--promo-transition-normal);
}

.promo-gallery-tab:hover {
    color: var(--promo-text-primary);
}

.promo-gallery-tab.active {
    background: var(--promo-primary);
    color: var(--promo-primary-contrast, white);
}

/* Panels */
.promo-gallery-panel {
    display: none;
}

.promo-gallery-panel.active {
    display: block;
    animation: promo-fade-in 0.3s ease;
}

@keyframes promo-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mockup Selector */
.promo-mockup-selector {
    display: flex;
    justify-content: center;
    gap: var(--promo-space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--promo-space-xl);
}

.promo-mockup-chip {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    padding: var(--promo-space-sm) var(--promo-space-md);
    background: var(--promo-bg-card);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius-md);
    color: var(--promo-text-secondary);
    font-family: var(--promo-font-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--promo-transition-normal);
}

.promo-mockup-chip:hover {
    border-color: var(--promo-border-hover);
    color: var(--promo-text-primary);
}

.promo-mockup-chip.active {
    background: var(--promo-primary);
    border-color: var(--promo-primary);
    color: var(--promo-primary-contrast, white);
}

/* Mockup Stage */
.promo-mockup-stage {
    display: flex;
    justify-content: center;
}

.promo-mockup-container {
    position: relative;
    max-width: 800px;
    width: 100%;
    border-radius: var(--promo-radius-xl);
    overflow: hidden;
    box-shadow: var(--promo-shadow-lg);
}

.promo-mockup-bg {
    width: 100%;
    height: auto;
    display: block;
}

.promo-mockup-qr-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5%;
}

.promo-mockup-logo {
    width: 40%;
    height: auto;
    object-fit: contain;
}

.promo-mockup-qr {
    width: 100%;
    height: auto;
}

/* Digital Grid */
.promo-digital-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--promo-space-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.promo-digital-mockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--promo-space-md);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.promo-digital-mockup.promo-visible {
    opacity: 1;
    transform: translateY(0);
}

.promo-digital-frame {
    width: 100%;
    max-width: 280px;
    background: var(--promo-bg-card);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius-lg);
    overflow: hidden;
}

.promo-digital-label {
    font-size: 0.875rem;
    color: var(--promo-text-muted);
    font-weight: 500;
}

/* Instagram Mockup */
.promo-digital-instagram .promo-digital-header {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    padding: var(--promo-space-md);
    border-bottom: 1px solid var(--promo-border);
}

.promo-digital-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--promo-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden;
}

.promo-digital-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-digital-content {
    aspect-ratio: 1;
    position: relative;
    background: #1a1a22;
}

.promo-digital-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-digital-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    font-size: 1.25rem;
    font-weight: 600;
}

.promo-digital-engagement {
    display: flex;
    gap: var(--promo-space-md);
    padding: var(--promo-space-md);
    font-size: 1.25rem;
    color: var(--promo-text-secondary);
}

/* Email Mockup */
.promo-email-frame {
    padding: 0;
}

.promo-email-header {
    padding: var(--promo-space-sm) var(--promo-space-md);
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid var(--promo-border);
}

.promo-email-dots {
    display: flex;
    gap: 6px;
}

.promo-email-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--promo-border);
}

.promo-email-dots span:first-child { background: #ff5f57; }
.promo-email-dots span:nth-child(2) { background: #ffbd2e; }
.promo-email-dots span:last-child { background: #28ca41; }

.promo-email-content {
    padding: var(--promo-space-lg);
}

.promo-email-subject {
    display: flex;
    align-items: center;
    gap: var(--promo-space-sm);
    font-weight: 600;
    margin-bottom: var(--promo-space-md);
}

.promo-email-subject i {
    color: var(--promo-primary);
}

.promo-email-content p {
    color: var(--promo-text-secondary);
    font-size: 0.875rem;
    margin: 0 0 var(--promo-space-md);
}

.promo-email-cta {
    display: block;
    width: 100%;
    padding: var(--promo-space-sm) var(--promo-space-md);
    background: var(--promo-primary);
    color: white;
    border: none;
    border-radius: var(--promo-radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
}

/* SMS Mockup */
.promo-sms-frame {
    padding: var(--promo-space-lg);
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}

.promo-sms-bubble {
    background: var(--promo-primary);
    padding: var(--promo-space-md);
    border-radius: var(--promo-radius-lg);
    border-bottom-left-radius: 4px;
    max-width: 90%;
}

.promo-sms-bubble p {
    margin: 0;
    font-size: 0.875rem;
}

.promo-sms-link {
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
    word-break: break-all;
    margin-top: var(--promo-space-xs) !important;
}

.promo-sms-time {
    display: block;
    margin-top: var(--promo-space-sm);
    font-size: 0.75rem;
    color: var(--promo-text-muted);
}

/* ============================================================================
   HOW IT WORKS SECTION
   ============================================================================ */

.promo-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--promo-space-lg);
    flex-wrap: wrap;
}

.promo-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 250px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.promo-step.promo-visible {
    opacity: 1;
    transform: translateY(0);
}

.promo-step-number {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: var(--promo-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-step-icon {
    width: 80px;
    height: 80px;
    background: var(--promo-bg-card);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--promo-primary-light);
    margin-bottom: var(--promo-space-md);
    position: relative;
}

.promo-step h3 {
    margin: 0 0 var(--promo-space-sm);
    font-family: var(--promo-font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.promo-step p {
    margin: 0;
    color: var(--promo-text-secondary);
    font-size: 0.875rem;
}

.promo-step-connector {
    display: flex;
    align-items: center;
    color: var(--promo-text-muted);
    font-size: 1.5rem;
    margin-top: 40px;
}

/* ============================================================================
   FINAL CTA SECTION
   ============================================================================ */

.promo-cta-section {
    padding: var(--promo-space-4xl) var(--promo-space-xl);
}

.promo-cta-card {
    position: relative;
    background: var(--promo-bg-card);
    border: 1px solid var(--promo-border);
    border-radius: var(--promo-radius-xl);
    padding: var(--promo-space-4xl);
    text-align: center;
    overflow: hidden;
}

.promo-cta-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    background: var(--promo-primary);
    filter: blur(150px);
    opacity: 0.15;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.promo-cta-card h2 {
    position: relative;
    margin: 0 0 var(--promo-space-md);
    font-family: var(--promo-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
}

.promo-cta-card p {
    position: relative;
    margin: 0 0 var(--promo-space-xl);
    color: var(--promo-text-secondary);
    font-size: 1.125rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.promo-cta-subtitle {
    max-width: 800px !important;
}

.promo-cta-warning {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
    margin: 0 auto var(--promo-space-xl);
    border-radius: var(--promo-radius-xl);
    border: 1px solid color-mix(in srgb, var(--promo-primary) 25%, var(--promo-border));
    background: color-mix(in srgb, var(--promo-primary) 10%, rgba(0,0,0,0.25));
    color: var(--promo-text-secondary);
    text-align: left;
    font-size: 0.9rem;
}

.promo-cta-warning i {
    color: var(--promo-primary-light);
    font-size: 1.1rem;
    margin-top: 2px;
}

.promo-cta-warning strong {
    color: var(--promo-text-primary);
}

.promo-cta-buttons {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: var(--promo-space-xl);
}

.promo-cta-trust {
    position: relative;
    display: flex;
    justify-content: center;
    gap: var(--promo-space-xl);
    flex-wrap: wrap;
    color: var(--promo-text-muted);
    font-size: 0.875rem;
}

.promo-cta-trust span {
    display: flex;
    align-items: center;
    gap: var(--promo-space-xs);
}

.promo-cta-trust i {
    color: var(--promo-success);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

.promo-footer {
    background: rgba(0,0,0,0.3);
    border-top: 1px solid var(--promo-border);
    padding: var(--promo-space-xl);
}

.promo-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--promo-space-md);
}

.promo-footer-logo {
    display: inline-block;
    text-decoration: none;
    margin-bottom: var(--promo-space-md);
}

.promo-footer-logo img {
    height: 24px;
    width: auto;
    opacity: 0.7;
    transition: opacity var(--promo-transition-normal);
}

.promo-footer-logo:hover img {
    opacity: 1;
}

.promo-footer p {
    margin: 0;
    color: var(--promo-text-muted);
    font-size: 0.875rem;
}

.promo-footer-links {
    display: flex;
    gap: var(--promo-space-lg);
}

.promo-footer-links a {
    color: var(--promo-text-muted);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--promo-transition-fast);
}

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

/* ============================================================================
   CLAIM MODAL
   ============================================================================ */

/* Overlay with heavy backdrop blur - lets prize card peek through */
.signup-prompt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: claimFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.signup-prompt-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

/* Modal card - Premium dark gradient */
.signup-prompt-modal {
    background: linear-gradient(145deg, #1F1F2E 0%, #151520 100%);
    border-radius: 28px;
    padding: 48px 44px;
    max-width: 460px;
    width: 90%;
    box-shadow: 
        0 40px 80px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    position: relative;
    animation: claimSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes claimSlideUp {
    from { transform: translateY(40px) scale(0.96); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Close button - Muted and subtle */
.signup-prompt-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9CA3AF; /* Muted Grey */
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.signup-prompt-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #D1D5DB;
    opacity: 1;
}

/* Header section */
.signup-prompt-header {
    text-align: center;
    margin-bottom: 28px;
}

.signup-prompt-header h2 {
    font-size: 26px;
    font-weight: 700; /* Bold as requested */
    color: #FFFFFF;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Sparkle/Rocket icon - matches studio iconography */
.signup-header-icon {
    font-size: 28px;
    color: #FBBF24;
    animation: claimSparkle 2s ease-in-out infinite;
}

.signup-prompt-rtl .signup-header-icon {
    color: #FBBF24;
}

@keyframes claimSparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.15) rotate(10deg); opacity: 0.85; }
}

/* Value proposition text */
.signup-value-prop {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 400; /* Regular as requested */
    line-height: 1.6; /* As requested */
    margin: 0;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.signup-prompt-rtl .signup-value-prop {
    max-width: 450px;
}

/* Content section */
.signup-prompt-content {
    margin-top: 8px;
}

/* Primary CTA Button - High Energy */
.signup-btn {
    width: 100%;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 800; /* ExtraBold */
    font-family: var(--promo-font-body);
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.signup-btn-google {
    background: #FFFFFF;
    color: #111827;
    box-shadow: 
        0 8px 24px rgba(255, 255, 255, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.signup-btn-google:hover {
    background: #F9FAFB;
    transform: translateY(-3px);
    box-shadow: 
        0 12px 32px rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.25);
}

.signup-btn-google:active {
    transform: translateY(-1px);
}

.signup-btn-google img {
    flex-shrink: 0;
}

.signup-btn-google span {
    flex: 1;
    text-align: center;
    margin: 0;
}

/* Footer - Trust signal */
.signup-prompt-footer {
    text-align: center;
    margin-top: 24px;
}

.signup-trust-signal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
}

.signup-trust-signal i {
    font-size: 14px;
    color: #22C55E; /* Green checkmark */
}

/* Loading state */
.animate-spin {
    animation: claimSpin 1s linear infinite;
}

@keyframes claimSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Button loading state adjustment */
.signup-btn-google:disabled {
    opacity: 0.85;
    cursor: not-allowed;
    transform: none;
}

/* RTL Support for Claim Modal */
.signup-prompt-rtl {
    direction: rtl;
    text-align: right;
}

.signup-prompt-rtl .signup-prompt-close {
    right: auto;
    left: 16px;
}

.signup-prompt-rtl .signup-prompt-header {
    text-align: center;
}

.signup-prompt-rtl .signup-prompt-header h2 {
    flex-direction: row-reverse;
}

.signup-prompt-rtl .signup-value-prop {
    text-align: center;
}

.signup-prompt-rtl .signup-btn-google {
    flex-direction: row-reverse;
}

.signup-prompt-rtl .signup-btn-google span {
    margin: 0;
}

.signup-prompt-rtl .signup-trust-signal {
    flex-direction: row-reverse;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 1024px) {
    .promo-hero {
        grid-template-columns: 1fr;
        gap: var(--promo-space-2xl);
        padding: calc(80px + var(--promo-space-2xl)) var(--promo-space-xl) var(--promo-space-2xl);
    }
    
    .promo-hero-content {
        text-align: center;
        align-items: center;
    }
    
    .promo-hero-subtitle {
        max-width: none;
    }
    
    .promo-benefits {
        align-items: center;
    }
    
    .promo-hero-preview {
        order: -1;
    }
    
    .promo-iphone-frame {
        transform: none;
    }
    
    .promo-digital-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }
    
    .promo-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .promo-step-connector {
        transform: rotate(90deg);
        margin: 0;
    }
}

@media (max-width: 768px) {
    .promo-nav {
        padding: var(--promo-space-sm) var(--promo-space-md);
    }
    
    .promo-nav-logo img {
        height: 34px;
    }
    
    .promo-hero {
        padding: calc(70px + var(--promo-space-xl)) var(--promo-space-md) var(--promo-space-xl);
    }
    
    .promo-section {
        padding: var(--promo-space-2xl) var(--promo-space-md);
    }
    
    .promo-hero-ctas {
        flex-direction: column;
        width: 100%;
    }
    
    .promo-btn {
        width: 100%;
        justify-content: center;
    }

    .promo-why-grid,
    .promo-what-grid {
        grid-template-columns: 1fr;
    }
    
    .promo-iphone-frame {
        width: 270px;
        height: 560px;
        border-radius: 46px;
    }
    
    .promo-live-preview iframe {
        height: 600px;
    }
    
    .promo-iphone-screen {
        border-radius: 35px;
    }
    
    .promo-gallery-tabs {
        width: 100%;
    }
    
    .promo-gallery-tab {
        flex: 1;
        justify-content: center;
    }
    
    .promo-mockup-selector {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: var(--promo-space-sm);
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .promo-mockup-chip {
        flex-shrink: 0;
    }
    
    .promo-cta-card {
        padding: var(--promo-space-2xl) var(--promo-space-lg);
    }
    
    .promo-cta-trust {
        flex-direction: column;
        gap: var(--promo-space-sm);
    }
    
    .promo-social-proof {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .promo-hero-title {
        font-size: 2rem;
    }
    
    .promo-section-title {
        font-size: 1.5rem;
    }
    
    .promo-iphone-frame {
        width: 240px;
        height: 500px;
        border-radius: 40px;
    }
    
    .promo-live-preview iframe {
        height: 500px;
    }
}

/* ============================================================================
   RTL (Right-to-Left) SUPPORT - Hebrew
   ============================================================================ */

/* Base RTL direction */
.promo-rtl {
    direction: rtl;
    text-align: right;
}

/* Hebrew-specific font stack */
.promo-rtl,
[lang="he"] {
    --promo-font-display: 'Assistant', 'Rubik', 'Secular One', -apple-system, BlinkMacSystemFont, sans-serif;
    --promo-font-body: 'Assistant', 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Navigation RTL - Logo on Right, CTA on Left */
/* row-reverse puts first item (logo) on right, second item (button) on left */
.promo-rtl .promo-nav {
    flex-direction: row-reverse !important;
}

/* Hero section RTL */
.promo-rtl .promo-hero-content {
    text-align: right;
}

.promo-rtl .promo-hero-ctas {
    justify-content: flex-start;
    flex-direction: row;
}

/* Status pills RTL */
.promo-rtl .promo-hero-status {
    justify-content: flex-start;
}

.promo-rtl .promo-status-pill {
    flex-direction: row;
}

.promo-rtl .promo-status-pill i {
    margin-left: var(--promo-space-xs);
    margin-right: 0;
}

/* Buttons RTL - Icon on the Left of text in RTL */
.promo-rtl .promo-btn {
    flex-direction: row;
}

.promo-rtl .promo-btn i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

/* Flip directional icons in RTL */
.promo-rtl .ph-play,
.promo-rtl .ph-rocket-launch,
.promo-rtl .ph-caret-right,
.promo-rtl .ph-arrow-right {
    transform: scaleX(-1);
}

/* Social proof RTL */
.promo-rtl .promo-social-proof {
    justify-content: flex-start;
}

.promo-rtl .promo-avatars {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

/* Cards RTL */
.promo-rtl .promo-card-header {
    flex-direction: row;
    text-align: right;
}

.promo-rtl .promo-card-header i {
    margin-left: var(--promo-space-md);
    margin-right: 0;
}

.promo-rtl .promo-card p {
    text-align: right;
}

/* Compare rows RTL */
.promo-rtl .promo-compare-row {
    flex-direction: row;
}

/* Trust section RTL */
.promo-rtl .promo-trust-item {
    flex-direction: row;
    text-align: right;
    justify-content: flex-start;
}

.promo-rtl .promo-check-icon {
    margin-left: var(--promo-space-md);
    margin-right: 0;
}

/* Color swatches RTL */
.promo-rtl .promo-color-swatch {
    margin-left: var(--promo-space-xs);
    margin-right: 0;
}

/* CTA section RTL - Keep centered for impact */
.promo-rtl .promo-cta-card {
    text-align: center !important;
}

.promo-rtl .promo-cta-warning {
    flex-direction: row;
    text-align: center !important;
    justify-content: center;
}

.promo-rtl .promo-cta-warning i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

.promo-rtl .promo-cta-trust {
    flex-direction: row;
    justify-content: center;
}

.promo-rtl .promo-cta-trust span {
    flex-direction: row;
}

.promo-rtl .promo-cta-trust i {
    margin-left: var(--promo-space-xs);
    margin-right: 0;
}

/* Gallery tabs RTL */
.promo-rtl .promo-gallery-tab {
    flex-direction: row-reverse;
}

.promo-rtl .promo-gallery-tab i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

/* Mockup selector RTL */
.promo-rtl .promo-mockup-selector {
    flex-direction: row-reverse;
}

.promo-rtl .promo-mockup-chip {
    flex-direction: row-reverse;
}

.promo-rtl .promo-mockup-chip i {
    margin-left: var(--promo-space-xs);
    margin-right: 0;
}

/* Digital mockups RTL */
.promo-rtl .promo-digital-header {
    flex-direction: row;
}

.promo-rtl .promo-digital-avatar {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

.promo-rtl .promo-digital-engagement {
    flex-direction: row;
}

.promo-rtl .promo-email-subject {
    flex-direction: row;
    text-align: right;
}

.promo-rtl .promo-email-subject i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

.promo-rtl .promo-email-content {
    text-align: right;
}

.promo-rtl .promo-sms-bubble {
    text-align: right;
}

/* Section headers RTL - Keep centered for balance */
.promo-rtl .promo-section-header {
    text-align: center !important;
}

.promo-rtl .promo-section-tag {
    margin-left: auto !important;
    margin-right: auto !important;
}

.promo-rtl .promo-section-title,
.promo-rtl .promo-section-desc,
.promo-rtl .promo-scratch-hint {
    text-align: center !important;
}

.promo-rtl .promo-scratch-hint {
    flex-direction: row;
}

.promo-rtl .promo-scratch-hint i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

/* Preview hint RTL */
.promo-rtl .promo-live-preview-hint {
    flex-direction: row-reverse;
}

.promo-rtl .promo-live-preview-hint i {
    margin-left: var(--promo-space-sm);
    margin-right: 0;
}

/* Disclaimer RTL */
.promo-rtl .promo-disclaimer-content {
    text-align: center;
}

/* Card result RTL */
.promo-rtl .promo-card-result {
    text-align: right;
}

/* Hero grid RTL - swap phone and text positions */
/* In Hebrew: Text on RIGHT (Start), Phone on LEFT (Visual) */
@media (min-width: 1024px) {
    .promo-rtl .promo-hero {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Force text to column 1 (Right side in RTL) */
    .promo-rtl .promo-hero-content {
        grid-column: 1;
        grid-row: 1;
        text-align: right;
    }
    
    /* Force phone to column 2 (Left side in RTL) */
    .promo-rtl .promo-hero-preview {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Error and loading states RTL */
.promo-rtl.promo-error,
.promo-rtl.promo-loading {
    text-align: center;
}

/* Typewriter RTL */
.promo-rtl .promo-typewriter-wrapper {
    display: inline-flex;
    flex-direction: row-reverse;
}

.promo-rtl .promo-typewriter-cursor {
    margin-right: 2px;
    margin-left: 0;
}

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    .promo-rtl .promo-social-proof {
        flex-direction: column;
        align-items: center;
    }
    
    .promo-rtl .promo-avatars {
        margin-left: 0;
        margin-bottom: var(--promo-space-sm);
    }
    
    .promo-rtl .promo-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }
}

/* RTL-aware transitions - prevent layout jank */
.promo-rtl * {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
}