/* ============================================
   OOOOH, SH*T! - Minimal Design System
   ============================================ */

/* Static Site File Browser */
.expand-chevron {
  transition: transform 0.15s ease-out;
}
.rotate-90 {
  transform: rotate(90deg);
}

/* Media Library Drop Zone */
.drop-zone-active {
  background: rgba(59, 130, 246, 0.1) !important;
  outline: 2px dashed rgba(59, 130, 246, 0.5);
  outline-offset: -8px;
}
.editor-light .drop-zone-active {
  background: rgba(59, 130, 246, 0.08) !important;
  outline-color: rgba(59, 130, 246, 0.4);
}
.file-tree-container::-webkit-scrollbar {
  width: 6px;
}
.file-tree-container::-webkit-scrollbar-track {
  background: transparent;
}
.file-tree-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xs);
}
.file-tree-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}
.max-h-\[200px\] {
  max-height: 200px;
}
#monaco-container {
  background: var(--grey-800);
}
#site-editor-overlay {
  background: var(--grey-800);
}
.rounded {
  border-radius: var(--radius-sm);
}
.rounded-sm {
  border-radius: var(--radius-xs);
}

/* Mobile Override Indicators */
input.mobile-overridable,
input.compact-input.mobile-overridable,
.compact-input.mobile-overridable {
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2) !important;
}
input.mobile-overridable:focus,
input.compact-input.mobile-overridable:focus,
.compact-input.mobile-overridable:focus {
  border: 1px solid rgba(34, 197, 94, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important;
}
input.mobile-overridden,
input.compact-input.mobile-overridden,
.compact-input.mobile-overridden,
input[type="text"].mobile-overridden,
input[type="number"].mobile-overridden {
  color: rgb(34, 197, 94) !important;
}
input.mobile-overridden::placeholder,
.compact-input.mobile-overridden::placeholder {
  color: rgba(34, 197, 94, 0.5) !important;
}
.rounded-md {
  border-radius: var(--radius-md);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-t-lg {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.rounded-b-lg {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.2);
}
.bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.3);
}
.bg-accent\/30 {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Prevent text selection on UI elements */
button, label, .tab, .icon-btn, .panel-header, .inspector-section,
.sidebar-tab, .breakpoint-btn, .ai-choice-btn, .dropdown-item,
header, aside, nav, [role="button"], [role="tab"] {
  user-select: none;
  -webkit-user-select: none;
}

/* Global borderless inputs - Polish Peter */
input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button {
  border: none !important;
  outline: none;
  font-family: var(--font-ui) !important;
}

/* ============================================
   AUTH PAGES - Login & Register
   Subtle & Refined motion
   ============================================ */

/**
 * Auth Container - Gentle fade up
 */
.auth-container {
  animation: authFadeIn 500ms var(--ease-out-expo);
}

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

/**
 * Auth Form Fields - Staggered entrance
 * Each field fades up with 60ms delay
 */
#auth-form > div {
  opacity: 0;
  animation: authFieldIn 400ms var(--ease-out-expo) forwards;
}

#auth-form > div:nth-child(1) { animation-delay: 100ms; }
#auth-form > div:nth-child(2) { animation-delay: 160ms; }
#auth-form > div:nth-child(3) { animation-delay: 220ms; }
#auth-form > div:nth-child(4) { animation-delay: 280ms; }
#auth-form > div:nth-child(5) { animation-delay: 340ms; }

#auth-form button[type="submit"] {
  opacity: 0;
  animation: authFieldIn 400ms var(--ease-out-expo) forwards;
  animation-delay: 400ms;
}

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

/* Auth form inputs */
#auth-form input {
  border: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: background var(--duration-fast) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart) !important;
}

#auth-form input:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

#auth-form input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  transform: scale(1.005);
}

#auth-form input::placeholder {
  color: rgba(255, 255, 255, 0.25) !important;
}

/* Auth submit button */
.auth-submit {
  transition: background-color var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart) !important;
  letter-spacing: -0.01em !important;
}

.auth-submit:hover:not(:disabled) {
  background: #f0f0f0 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 60ms !important;
}

/* ============================================
   DROPDOWN MENUS
   Subtle & Refined motion
   ============================================ */

/**
 * User Menu Dropdown - Fade + scale entrance
 */
#user-menu-dropdown {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border: none !important;
  background: rgba(24, 24, 26, 0.85) !important;
  z-index: 9999 !important;
  transform-origin: top right;
  transition: opacity var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-normal) var(--ease-out-expo),
              visibility var(--duration-fast);
}

#user-menu-dropdown.invisible {
  transform: scale(0.95) translateY(-4px);
}

#user-menu-dropdown.visible {
  transform: scale(1) translateY(0);
}

/* Ensure user menu container establishes proper stacking */
#user-menu-container {
  z-index: 9999;
}

/* User dropdown always stays dark */
.editor-light #user-menu-dropdown {
  background: #141414 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.editor-light #user-menu-dropdown > div:first-child {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.editor-light #user-menu-dropdown > div:first-child > div:first-child {
  color: #e5e5e5 !important;
}

.editor-light #user-menu-dropdown > div:first-child > div:last-child {
  color: #888 !important;
}

.editor-light #user-menu-dropdown .dropdown-item {
  color: #888 !important;
}

.editor-light #user-menu-dropdown .dropdown-item:hover {
  color: #e5e5e5 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/**
 * Dropdown Items - Staggered fade in
 */
#user-menu-dropdown .dropdown-item {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--duration-normal) var(--ease-out-quart),
              transform var(--duration-normal) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}

#user-menu-dropdown.visible .dropdown-item {
  opacity: 1;
  transform: translateX(0);
}

#user-menu-dropdown.visible .dropdown-item:nth-child(1) { transition-delay: 30ms; }
#user-menu-dropdown.visible .dropdown-item:nth-child(2) { transition-delay: 60ms; }
#user-menu-dropdown.visible .dropdown-item:nth-child(3) { transition-delay: 90ms; }
#user-menu-dropdown.visible .dropdown-item:nth-child(4) { transition-delay: 120ms; }

.dropdown-item {
  border-radius: 6px;
  margin: var(--space-0) var(--space-1);
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dropdown-item:active {
  transform: scale(0.98) !important;
  transition-duration: 60ms !important;
}

.editor-light .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   ALL MODALS - Unified polish
   Subtle & Refined motion
   ============================================ */

/**
 * Modal Backdrop - Fade in with blur
 */
#account-settings-modal > div:first-child,
#invites-modal > div:first-child,
#project-settings-modal > div:first-child {
  animation: backdropFadeIn var(--duration-normal) var(--ease-out-quart);
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
  }
}

/**
 * Modal Content - Scale + fade entrance
 */
#account-settings-modal > div:last-child,
#invites-modal > div:last-child {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(24, 24, 26, 0.92) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border: none !important;
  animation: modalSlideIn var(--duration-slow) var(--ease-out-expo);
}

.editor-light #account-settings-modal > div:last-child,
.editor-light #invites-modal > div:last-child {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.account-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: none !important;
  transition: all 120ms ease !important;
}

.account-input:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.account-input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
}

.editor-light .account-input {
  background: rgba(0, 0, 0, 0.03) !important;
}

.editor-light .account-input:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.editor-light .account-input:focus {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Account buttons - use .btn class in markup */

/* ============================================
   DASHBOARD & PROJECT CARDS
   Subtle & Refined motion
   ============================================ */

/**
 * Project Card - Staggered entrance on load
 * Uses CSS custom property --card-index set inline
 */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.project-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.04) !important;
  opacity: 0;
  animation: cardFadeIn 400ms var(--ease-out-expo) forwards;
  animation-delay: calc(var(--card-index, 0) * 50ms);
  transition: transform var(--duration-normal) var(--ease-out-quart),
              border-color var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-normal) var(--ease-out-quart) !important;
}

.project-card:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

.project-card:active {
  transform: translateY(0) scale(0.99) !important;
  transition-duration: 60ms !important;
}

.editor-light .project-card {
  background: #fff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.editor-light .project-card:hover {
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important;
}

/* Project card action buttons - fade in on hover */
.project-card .absolute.top-2 {
  transition: opacity var(--duration-fast) var(--ease-out-quart);
  z-index: 10;
  pointer-events: auto !important;
}

.project-card .absolute.top-2 button {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 11;
  transition: background-color var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart);
}

.project-card .absolute.top-2 button:active {
  transform: scale(0.9);
}

/* Thumbnail area */
.thumbnail-preview {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
}

.editor-light .thumbnail-preview {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Empty state */
.empty-state {
  opacity: 0.8;
}

.empty-state > div:first-child {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.editor-light .empty-state > div:first-child {
  background: rgba(0, 0, 0, 0.02) !important;
  border-color: rgba(0, 0, 0, 0.04);
}

/* Dashboard header - avoid backdrop-filter to preserve z-index stacking */

/**
 * New Project / Publish Button
 * - Subtle lift on hover
 * - Quick press feedback
 */
/* Preview & Publish - use .btn class, primary state uses .btn-primary */

/**
 * User Avatar - Refined hover interaction
 * - Subtle scale with spring-like feel
 * - Ring appears on hover for focus indication
 */
.user-avatar {
  transition: transform var(--duration-normal) var(--ease-out-quart),
              box-shadow var(--duration-normal) var(--ease-out-quart) !important;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}

.user-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.user-avatar:active {
  transform: scale(0.95);
  transition-duration: 60ms !important;
}

.editor-light .user-avatar:hover {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* Invite badge */
#invite-badge {
  font-size: var(--text-2xs);
  background: rgba(34, 197, 94, 1.0);
}

/* Invite code items */
.invite-code-item {
  background: rgba(255, 255, 255, 0.06);
}
.editor-light .invite-code-item {
  background: rgba(0, 0, 0, 0.06);
}
.invite-code-used {
  background: rgba(255, 255, 255, 0.02);
}
.editor-light .invite-code-used {
  background: rgba(0, 0, 0, 0.03);
}

/* Modal borders for light mode */
.modal-border {
  border-color: var(--border);
}
.editor-light .modal-border {
  border-color: var(--border);
}

/* ============================================
   ASSETS MODAL - Polish Peter + Motion Engineer
   ============================================ */

/* Modal entrance */
#media-library-popup {
  animation: assetsBackdropIn 300ms var(--ease-out-expo) forwards;
}

#media-library-modal {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  animation: assetsModalIn 350ms var(--ease-out-expo) 50ms forwards;
  background: var(--surface) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

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

@keyframes assetsModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Sidebar refinement */
#media-library-modal > div:last-child > div:first-child {
  background: rgba(0, 0, 0, 0.15);
  border-right: 1px solid var(--border-subtle) !important;
  padding: var(--space-5) var(--space-3);
}

/* Light mode - consistent greys for modal */
.editor-light #media-library-modal {
  background: var(--surface) !important;
}

.editor-light #media-library-modal > div:last-child > div:first-child {
  background: var(--input-bg);
}

.editor-light #media-library-content {
  background: var(--input-bg);
}

/* Tab styling - refined */
.media-tab-active {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text) !important;
}

.media-tab-inactive {
  background: transparent;
  color: var(--text-muted);
  transition: all 200ms var(--ease-out-quart);
}

.media-tab-inactive:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.editor-light .media-tab-active {
  background: rgba(0, 0, 0, 0.06) !important;
}

.editor-light .media-tab-inactive:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Content header - breathing room */
#media-library-main > div:first-child {
  padding: var(--space-7) var(--space-8) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Count badge - refined */
#media-count-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--text-muted) !important;
  padding: var(--space-1) var(--space-4) !important;
  border-radius: 6px !important;
  font-size: var(--text-sm) !important;
}

/* Upload button - refined */
#media-upload-btn,
#sites-upload-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: none !important;
  padding: var(--space-3) var(--space-6) !important;
  border-radius: 8px !important;
  transition: all 200ms var(--ease-out-quart);
}

#media-upload-btn:hover,
#sites-upload-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px);
}

/* Content area - generous padding */
#media-library-content {
  padding: var(--space-8) !important;
  background: rgba(0, 0, 0, 0.1);
}

/* Grid layout - refined gaps */
#media-library-content .grid {
  gap: var(--space-4) !important;
}

/* Media cards - refined with motion */
#media-library-content .grid > div {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: none !important;
  transition: box-shadow 200ms var(--ease-out-quart);
}

#media-library-content .grid > div:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  --tw-ring-color: rgba(255, 255, 255, 0.15) !important;
}

/* Usage badge - refined */
#media-library-content .grid > div > div:has(×),
#media-library-content .grid > div > div[class*="bottom-1.5"][class*="right-1.5"] {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px);
  border-radius: 4px !important;
  font-size: var(--text-xs) !important;
  padding: 3px var(--space-2) !important;
}

/* Delete button - refined */
#media-library-content .grid > div button {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px);
  border-radius: 6px !important;
  padding: var(--space-2) !important;
  transition: background 200ms ease;
}

#media-library-content .grid > div button:hover {
  background: rgba(239, 68, 68, 0.9) !important;
}

/* Empty state - refined */
#media-library-content > div:has(svg):not(.grid):not(.flex-col.gap-2) {
  padding: var(--space-12) var(--space-9) !important;
}

#media-library-content > div:has(svg):not(.grid):not(.flex-col.gap-2) svg {
  opacity: 0.2;
  margin-bottom: var(--space-7);
}

/* Static sites list - refined */
.static-site-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: none !important;
  border-radius: 10px !important;
  transition: background 200ms ease;
}

.static-site-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Site card header - spacing */
.static-site-card > div:first-child {
  padding: var(--space-6) var(--space-7) !important;
}

/* Expand chevron - smooth rotation */
.expand-chevron {
  transition: transform 250ms var(--ease-out-quart);
}

/* File browser - refined */
.file-tree-container {
  background: rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

/* Site action buttons - refined */
.static-site-card button {
  transition: background 200ms ease, color 200ms ease;
}

/* Drop zone active state */
#media-library-content.drop-zone-active {
  background: rgba(255, 255, 255, 0.05);
  outline: 2px dashed rgba(255, 255, 255, 0.2);
  outline-offset: -8px;
  border-radius: 8px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #media-library-popup,
  #media-library-modal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* CSS Variables - Unified Grey Palette */
:root {
  /* Core grey scale */
  --grey-950: #0a0a0a;
  --grey-900: #141414;
  --grey-800: #1e1e1e;
  --grey-700: #2a2a2a;
  --grey-600: #444444;
  --grey-500: #666666;
  --grey-400: #888888;
  --grey-300: #aaaaaa;
  --grey-200: #cccccc;
  --grey-100: #e5e5e5;

  /* Semantic mappings */
  --bg: var(--grey-950);
  --surface: var(--grey-900);
  --surface-2: var(--grey-800);
  --surface-hover: var(--grey-700);
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --text: var(--grey-100);
  --text-muted: var(--grey-400);
  --text-dim: var(--grey-500);
  --accent: #ffffff;
  --accent-muted: rgba(255, 255, 255, 0.12);
  --toggle-bg: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.04);
  --textarea-bg: rgba(255, 255, 255, 0.03);
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 32px;

  /* Font families */
  --font-ui: "Inter", system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;

  /* OpenType features - ss01 for Mona Sans alternate glyphs */
  font-feature-settings: 'zero' on !important;

  font-variant-numeric: tabular-nums;
  /*font-feature-settings: "salt" on !important;*/

  font-family: var(--font-ui);
  font-weight: 400;

  /* Font sizes */
/*  --text-2xs: 9px;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md-sm: 13px;
  --text-md: 14px;
  --text-md-lg: 15px;
  --text-lg: 16px;
  --text-xl: 18px;*/

  --text-base: 13px;
  --text-2xs: 10px !important;
  --text-xs: 10px !important;
  --text-sm: var(--text-base);
 
  --text-md-sm: var(--text-base);
  --text-md: var(--text-base);
  --text-md-lg: var(--text-base);
  --text-lg: var(--text-base);
  --text-xl: 18px;

  /* Spacing scale */
  --space-px: 1px;
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 8px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-12: 48px;

  --spring-easing: linear(
    0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017,
    1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1
  );
  --spring-duration: 0.733s;
}



/* Light theme for editor */
.editor-light {
  /* Grey scale (light to dark) */
  --grey-950: #ffffff;   /* pure white - main background */
  --grey-900: #fafafa;   /* off-white - secondary surfaces */
  --grey-800: #f0f0f0;   /* light grey - hover states */
  --grey-700: #e5e5e5;   /* light grey - borders, dividers */
  --grey-600: #cccccc;   /* mid grey - disabled text */
  --grey-500: #aaaaaa;   /* mid grey - dim text, placeholders */
  --grey-400: #888888;   /* dark grey - muted text, labels */
  --grey-300: #666666;   /* dark grey - secondary text */
  --grey-200: #444444;   /* very dark - emphasis text */
  --grey-100: #1a1a1a;   /* near black - primary text */

  /* Semantic backgrounds */
  --bg: var(--grey-950);           /* page background */
  --surface: var(--grey-950);      /* panels, cards, active tabs */
  --surface-2: var(--grey-900);    /* nested surfaces */
  --surface-hover: var(--grey-800); /* hover state for surfaces */

  /* Borders */
  --border: rgba(0, 0, 0, 0.08);        /* standard borders */
  --border-subtle: rgba(0, 0, 0, 0.04); /* subtle dividers */
  --light-border: rgba(0, 0, 0, 0.08);  /* sidebar borders */

  /* Text colors */
  --text: var(--grey-100);       /* primary text */
  --text-muted: var(--grey-400); /* secondary text, labels */
  --text-dim: var(--grey-500);   /* placeholders, hints */

  /* Accent (for active toggles, focus states) */
  --accent: #000000;                  /* black - active toggle, focus */
  --accent-muted: rgba(0, 0, 0, 0.08); /* subtle accent backgrounds */

  /* Interactive element backgrounds */
  --input-bg: rgba(0, 0, 0, 0.05);      /* inputs, selects, tab containers */
  --toggle-bg: rgba(0, 0, 0, 0.05);     /* inactive toggle track */
  --textarea-bg: rgba(0, 0, 0, 0.05);   /* textarea background */
  --light-overlay: rgba(0, 0, 0, 0.05); /* subtle overlays */
  --light-overlay-hover: rgba(0, 0, 0, 0.05); /* overlay hover state */

  /* Shadows */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* Light theme - main areas */
.editor-light aside {
  background-color: var(--surface) !important;
  border-color: var(--light-border) !important;
}

/* Header always dark - override variables to dark theme values */
header {
  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1e1e1e;
  --surface-hover: #2a2a2a;
  --text: #e5e5e5;
  --text-muted: #888888;
  --border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.04);
  --toggle-bg: rgba(255, 255, 255, 0.08);

  background: var(--surface);
  border-color: var(--border) !important;
  font-family: var(--font-ui);
}

header .icon-btn {
  color: var(--text-muted) !important;
}

header .icon-btn:hover {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}

header .icon-btn.active {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

header input,
header .text-text,
header .project-name {
  color: var(--text) !important;
  background: transparent !important;
}

header input:focus,
header .project-name:focus {
  background: var(--input-bg) !important;
  color: var(--text) !important;
}

header .text-text-muted {
  color: var(--text-muted) !important;
}

header .text-text-muted:hover {
  color: var(--text) !important;
}

header a {
  color: var(--text-muted) !important;
}

header a:hover {
  color: var(--text) !important;
}

/* Header buttons */
header .btn {
  background: var(--input-bg);
  color: var(--text);
}

header .btn:hover {
  background: var(--toggle-bg);
  color: var(--text);
}

/* Primary button in header (publish with changes) - always white bg, black text */
header .btn-primary,
header .publish-btn.has-changes {
  background: #ffffff;
  color: #0a0a0a;
}

header .btn-primary:hover,
header .publish-btn.has-changes:hover {
  opacity: 0.9;
}

.editor-light main,
.editor-light #canvas-workspace,
.editor-light .bg-bg {
  background-color: var(--bg) !important;
}

/* Light theme - icon buttons */
.editor-light .icon-btn {
  color: var(--text-muted);
}

.editor-light .icon-btn:hover {
  background: var(--light-overlay-hover);
  color: var(--text);
}

.editor-light .icon-btn.active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}

/* Light theme - text colors */
.editor-light .text-text {
  color: var(--text) !important;
}

.editor-light .text-text-muted {
  color: var(--text-muted) !important;
}

.editor-light .text-text-dim {
  color: var(--text-dim) !important;
}

/* Unified input styles for both themes */
input:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.project-name),
select {
  background-color: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

textarea {
  background-color: var(--textarea-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Override Tailwind bg-white classes on inputs */
input[class*="bg-white"]:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(.project-name),
select[class*="bg-white"] {
  background-color: var(--input-bg) !important;
}

textarea[class*="bg-white"] {
  background-color: var(--textarea-bg) !important;
}



/* Convert bg-white classes to use --input-bg variable (both themes) */
[class*="bg-white/5"],
[class*="bg-white/[0.04]"],
[class*="bg-white/[0.05]"],
[class*="bg-white/[0.06]"] {
  background-color: var(--input-bg) !important;
}

/* Convert border-white classes to use --border variable (both themes) */
[class*="border-white/[0.04]"],
[class*="border-white/[0.06]"],
[class*="border-white/[0.08]"],
[class*="border-white/[0.1]"],
[class*="border-white/[0.12]"],
[class*="border-white/[0.2]"],
[class*="border-white/5"],
[class*="border-white/10"] {
  border-color: var(--border) !important;
}
[class*="divide-white"] > * + * {
  border-color: var(--border) !important;
}

[class*="hover:border-white"]:hover {
  border-color: var(--border) !important;
}

input.project-name {
  background-color: transparent !important;
}

/* Light theme - remove hover shadow on project cards */
.editor-light .group.rounded-lg {
  box-shadow: none !important;
}

/* Project settings modal - dark theme polish */
#project-settings-modal > div:last-child {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(24, 24, 26, 0.92) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border: none !important;
  animation: modalSlideIn 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Light theme - project settings modal */
.editor-light #project-settings-modal > div:last-child {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.editor-light #project-settings-modal .bg-surface {
  background-color: var(--accent) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.editor-light #project-settings-modal [class*="bg-white/[0.04]"],
.editor-light #project-settings-modal [class*="bg-white/[0.08]"] {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.editor-light #project-settings-modal [class*="hover:bg-white"]:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

.editor-light #project-settings-modal [class*="divide-white"] > * + * {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Light theme - domain inputs transparent */
.editor-light #project-settings-modal #settings-subdomain-input,
.editor-light #project-settings-modal #settings-custom-domain-input {
  background-color: transparent !important;
}

/* Published URL container no border */
#project-settings-modal .flex.items-center.gap-2.rounded-md {
  border: none !important;
}

/* Light theme - password toggle off state */
.editor-light #project-settings-modal #settings-password-toggle {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.editor-light #project-settings-modal #settings-password-toggle[style*="rgb(16, 185, 129)"],
.editor-light #project-settings-modal #settings-password-toggle[style*="#ffffff"] {
  background-color: var(--grey-900) !important;
}

/* Light theme - password Set/Update button */
.editor-light #project-settings-modal #settings-password-form button {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--bg) !important;
}

.editor-light #project-settings-modal #settings-password-form button:hover {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.editor-light .typo-style-header {
  background-color: transparent !important;
}

.editor-light input:focus,
.editor-light textarea:focus,
.editor-light select:focus {
  background: rgba(0, 0, 0, 0.06) !important;
  outline: none !important;
}

.editor-light input::placeholder,
.editor-light textarea::placeholder {
  color: var(--text-dim) !important;
}

/* Light theme - sidebar tabs container */
.editor-light #left-sidebar-tabs > div {
  background-color: var(--input-bg) !important;
}

/* Light theme - sidebar tabs */
.editor-light .sidebar-tab {
  color: var(--text-muted);
  background-color: transparent !important;
}

.editor-light .sidebar-tab:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.03) !important;
}

.editor-light .sidebar-tab.active {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Light theme - panel selects and mini selects */
.editor-light .mini-select,
.editor-light .panel-select {
  background-color: var(--input-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.editor-light .mini-select:hover,
.editor-light .panel-select:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.editor-light .mini-select:focus,
.editor-light .panel-select:focus {
  outline-color: rgba(0, 0, 0, 0.3) !important;
}

.editor-light .mini-select option,
.editor-light .panel-select option,
.editor-light select option {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
  padding: var(--space-3) !important;
}

.editor-light .mini-select optgroup,
.editor-light .panel-select optgroup,
.editor-light select optgroup {
  background-color: var(--accent) !important;
  color: var(--bg) !important;
}

.editor-light .toggle-btn {
  color: var(--text-muted);
}

.editor-light .toggle-btn:hover:not(.active) {
  color: var(--text);
}

.editor-light .toggle-btn.active {
  color: var(--text);
}

/* Light theme - scrollbar */
.editor-light ::-webkit-scrollbar-track {
  background: var(--bg);
}

.editor-light ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

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

/* Light theme - inspector panel */
.editor-light .inspector-section {
  border-color: var(--light-border);
}

/* Preview & Publish button cursor - defined in main button section above */

/* Light theme - zoom controls */
.editor-light .zoom-controls {
  background: var(--surface);
  /*border-color: var(--light-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
}

.editor-light .zoom-btn,
.editor-light .zoom-level-btn {
  color: var(--text-muted);
}

.editor-light .zoom-btn:hover,
.editor-light .zoom-level-btn:hover {
  background: var(--light-overlay-hover);
  color: var(--text);
}

/* Light theme - page list items */
.editor-light #page-list > div:hover {
  background-color: var(--light-overlay) !important;
}

/* Page list drag-to-reorder styles */
.page-item-wrapper {
  position: relative;
  z-index: 1;
}

/* Selected page - prominent indicator for Cmd+D target */
.page-item-wrapper.is-selected > div {
  background-color: rgba(59, 130, 246, 0.15) !important;
}

.editor-light .page-item-wrapper.is-selected > div {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

.page-item-wrapper.is-idle {
  transition: transform 0.15s ease-out;
}

.page-item-wrapper.is-draggable {
  z-index: 100;
  cursor: grabbing;
  background-color: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
}

.editor-light .page-item-wrapper.is-draggable {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Parent highlight when nesting */
.page-item-wrapper.drop-parent > div {
  background-color: rgba(59, 130, 246, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-sm);
}

.editor-light .page-item-wrapper.drop-parent > div {
  background-color: rgba(37, 99, 235, 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
}

/* Root level drop highlight (when unnesting) */
#page-list.drop-to-root {
  box-shadow: inset 2px 0 0 0 rgba(59, 130, 246, 0.6);
}

.editor-light #page-list.drop-to-root {
  box-shadow: inset 2px 0 0 0 rgba(37, 99, 235, 0.5);
}

/* Copy cursor when Option+dragging blocks */
body.is-copy-drag,
body.is-copy-drag * {
  cursor: copy !important;
}

/* Light theme - color swatches and small UI elements */
.editor-light .color-input-wrapper {
  border-color: var(--light-border);
}

/* Light theme - slider */
.editor-light input[type="range"] {
  background: rgba(0, 0, 0, 0.1) !important;
}

.editor-light input[type="range"]::-webkit-slider-thumb {
  background: #666 !important;
  width: 10px !important;
  height: 10px !important;
}

.editor-light input[type="range"]::-moz-range-thumb {
  background: #666 !important;
  width: 10px !important;
  height: 10px !important;
}

/* Light theme - dividers */
.editor-light .border-b,
.editor-light .border-r,
.editor-light .border-t,
.editor-light .border-l {
  border-color: var(--light-border) !important;
}

/* Light theme - generic panel sections */
.editor-light #sidebar-right,
.editor-light #sidebar-left {
  background-color: var(--surface) !important;
}

/* Light theme - section labels */
.editor-light .text-\[11px\],
.editor-light .text-\[12px\] {
  color: var(--text);
}

/* Light theme - modals */
.editor-light .modal-backdrop,
.editor-light [class*="bg-black\\/"] {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.editor-light .modal-content,
.editor-light [class*="bg-surface"] {
  background-color: var(--surface) !important;
}

/* Light theme - canvas container background */
.editor-light #canvas-container {
  background-color: var(--bg) !important;
}

/* Instant theme transition for main UI areas */
#canvas-workspace,
#canvas-container,
header,
aside,
main,
.bg-bg,
.bg-surface {
  transition: background-color 0ms !important;
}

/* Light theme - AI Modal */
.editor-light .ai-modal {
  background: rgba(255, 255, 255, 0.85);
}

.editor-light .ai-modal::after {
  background: rgba(255, 255, 255, 0.85);
}

.editor-light .ai-modal::before {
  opacity: 0.5;
}

.editor-light .ai-modal-close {
  color: rgba(0, 0, 0, 0.4);
}

.editor-light .ai-modal-close:hover {
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .ai-context-chip {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .ai-context-chip:hover {
  background: rgba(0, 0, 0, 0.1);
}

.editor-light .ai-chip-thumbnail {
  background: rgba(0, 0, 0, 0.1);
}

.editor-light .ai-context-type-badge {
  color: rgba(0, 0, 0, 0.5);
}

.editor-light .ai-context-preview {
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .ai-context-remove {
  color: rgba(0, 0, 0, 0.4);
}

.editor-light .ai-context-remove:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .ai-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.editor-light .ai-send-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #000000;
}

.editor-light .ai-send-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.1);
  color: #000000;
}

.editor-light .ai-chat-history {
  border-color: rgba(0, 0, 0, 0.08);
}

.editor-light .ai-message.user {
  background: rgba(0, 0, 0, 0.05);
}

.editor-light .ai-message.assistant {
  background: rgba(0, 0, 0, 0.02);
}

.editor-light .ai-code-block {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.85);
}

/* Base resets */
html, body, #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Crisp font rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth transitions globally - Framer-style easing */
/* NOTE: transform excluded - only UI elements should animate transform, not canvas/blocks */
* {
  transition-property: background-color, border-color, opacity, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/**
 * Global Button & Link Transitions
 * - Subtle, refined press effect
 * - Quick tactile feedback on active
 */
button, a, [onclick]:not(.editor-block):not([data-page-id]) {
  transition: transform var(--duration-fast) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart),
              opacity var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart);
}

button:active, a:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}

/* ===========================================
   UNIFIED BUTTON SYSTEM
   All buttons should use these base classes
   =========================================== */

/* Base button - all buttons inherit this */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--input-bg);
  color: var(--text);
}

.btn:hover {
  background: var(--toggle-bg);
}

/* Primary button - accent color (white on dark, black on light) */
.btn-primary {
  background: var(--accent);
  color: var(--bg);
}

.btn-primary:hover {
  opacity: 0.9;
}

/* Full width variant */
.btn-full {
  width: 100%;
}

/* Small variant */
.btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-sm);
}

/* Legacy aliases - all inherit from .btn */
.btn-dark,
.btn-light,
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 12px;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  background: var(--input-bg);
  color: var(--text);
}

.btn-dark:hover,
.btn-light:hover,
.mini-btn:hover {
  background: var(--toggle-bg);
}

/* Prompt textarea style */
.prompt-textarea {
  width: 100%;
  background: var(--grey-900);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--text);
  resize: none;
}

.prompt-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.prompt-textarea::placeholder {
  color: var(--grey-500);
}

/* Preset chips */
.preset-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--grey-900);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.preset-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.preset-chip:hover {
  background: var(--grey-800);
  border-color: var(--border);
}

.editor-light .preset-chip {
  background: var(--grey-900);
  border-color: var(--border);
  color: var(--text);
}

.editor-light .preset-chip:hover {
  background: var(--grey-800);
  border-color: var(--border);
}

/* ============================================
   MOTION SYSTEM - Subtle & Refined
   Apple-inspired timing, physics-based easing
   ============================================ */

/* Custom easing curves */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Panel accordion - refined height + opacity with subtle delay */
[id^="panel-content"] {
  transition: height var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-normal) var(--ease-out-quart);
  overflow: hidden;
}

/* Panel content fade-in when expanding */
[id^="panel-content"] > * {
  transition: opacity var(--duration-normal) var(--ease-out-quart) 50ms,
              transform var(--duration-normal) var(--ease-out-quart) 50ms;
}

[id^="panel-content"].collapsed > * {
  opacity: 0;
  transform: translateY(-4px);
}

/* Sidebar slide - refined with subtle fade */
#sidebar-left, #sidebar-right {
  transition: margin var(--duration-slow) var(--ease-out-expo),
              opacity var(--duration-normal) var(--ease-out-quart);
}

#sidebar-left.collapsed {
  opacity: 0.5;
}

#sidebar-right.collapsed {
  opacity: 0.5;
}

/* Smooth hover lift for cards/items */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-normal) var(--ease-out-quart);
}

.hover-lift:hover {
  /*transform: translateY(-1px);*/
  box-shadow: var(--shadow-md);
}

/* Input focus micro-interaction - subtle scale + glow */
input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color var(--duration-fast) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart);
  transform-origin: center;
}

input:not([type="range"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  transform: scale(1.005);
}

/* Grid overlay patterns */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.grid-overlay.dots {
  background-image: radial-gradient(circle at 0 0, rgba(255,255,255,0.15) 1px, transparent 1px);
}

.grid-overlay.lines {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Inner margin guides - scale with zoom */
.inner-margin-guides {
  --border-width: calc(1px * var(--ui-scale, 1));
  position: absolute;
  border: var(--border-width) dashed rgba(255, 200, 0, 0.5);
  pointer-events: none;
  z-index: 997;
}

/* Column guides */
.column-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  display: flex;
  gap: var(--gutter-width);
  padding-left: var(--margin-left);
  padding-right: var(--margin-right);
}

.column-guide {
  --border-width: calc(1px * var(--ui-scale, 1));
  flex: 1;
  background: var(--grid-bg);
  border-left: var(--border-width) dashed var(--grid-color);
  border-right: var(--border-width) dashed var(--grid-color);
}

/* Row guides */
.row-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 998;
}

.row-line {
  --line-height: calc(1px * var(--ui-scale, 1));
  position: absolute;
  left: var(--margin-left);
  right: var(--margin-right);
  height: var(--line-height);
  background: rgba(255, 255, 255, 0.08);
}

/* Block base - NO transition on transform for direct manipulation */
.editor-block {
  position: absolute;
  cursor: move;
  user-select: none;
  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1);
  /* No outline transition - prevents blinking on hover */
}

.editor-block.selected {
  /* Selection handled by control-box lines instead */
  outline: none;
}

.editor-block:not(.selected):hover {
  outline: 1px solid var(--block-outline-color, rgba(255, 255, 255, 0.3));
}

.editor-block.locked {
  cursor: not-allowed;
}

.editor-block.hidden {
  opacity: 0.3;
}

/* Pinned block indicator - subtle dot in top-left corner */
.editor-block.pinned::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  background: rgba(16, 185, 129, 0.8);
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
}

/* Pin guide lines - always visible for pinned blocks */
.pin-guides-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  overflow: visible;
}

/* Solid outline around pinned block */
.pin-guide-outline {
  position: absolute;
  border: 1px solid rgb(16, 185, 129);
  opacity: 0.4;
  pointer-events: none;
}

.pin-guide-outline.selected {
  opacity: 1;
}

/* Dashed guide lines from block to canvas edge */
.pin-guide-line {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgb(16, 185, 129) 0px,
    rgb(16, 185, 129) 4px,
    transparent 4px,
    transparent 8px
  );
}

.pin-guide-line.vertical {
  width: 1px;
  background: repeating-linear-gradient(
    180deg,
    rgb(16, 185, 129) 0px,
    rgb(16, 185, 129) 4px,
    transparent 4px,
    transparent 8px
  );
}

.pin-guide-line.horizontal {
  height: 1px;
}

/* Selected state: full opacity */
.pin-guide-line.selected {
  opacity: 1;
}

/* Pin value label */
.pin-guide-label {
  position: absolute;
  background: rgba(16, 185, 129, 0.9);
  color: white;
  font-size: var(--text-xs);
  padding: var(--space-0) 5px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  font-family: var(--font-ui);
}

/* Pin button (auto state) */
.pin-btn {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-4);
  cursor: pointer;
  transition: all 150ms ease;
  min-width: 48px;
  text-align: center;
}

.pin-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* Pin input (active state) */
.pin-input {
  background: rgba(16, 185, 129, 0.15);
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(16, 185, 129, 1);
  font-size: var(--text-base);
  padding: var(--space-1) var(--space-3);
  width: 60px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: all 150ms ease;
  -moz-appearance: textfield;
}

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

.pin-input:hover {
  background: rgba(16, 185, 129, 0.2);
}

.pin-input:focus {
  background: rgba(16, 185, 129, 0.25);
  outline: 1px solid rgba(16, 185, 129, 0.5);
  outline-offset: -1px;
}

/* Pin input group (input + clear button) */
.pin-input-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.pin-input-group .pin-input {
  flex: 0 0 auto;
}

/* Pin clear button */
.pin-clear {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: var(--text-base);
  line-height: 1;
  padding: var(--space-0) var(--space-1);
  cursor: pointer;
  transition: color 150ms ease;
  flex-shrink: 0;
}

.pin-clear:hover {
  color: rgba(239, 68, 68, 0.8);
}

/* Light mode pin styles */
.editor-light .pin-btn {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.4);
}

.editor-light .pin-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.6);
}

.editor-light .pin-input {
  background: rgba(16, 185, 129, 0.12);
  color: rgba(16, 140, 100, 1);
}

.editor-light .pin-input:hover {
  background: rgba(16, 185, 129, 0.18);
}

.editor-light .pin-input:focus {
  background: rgba(16, 185, 129, 0.22);
  outline: 1px solid rgba(16, 185, 129, 0.4);
}

.editor-light .pin-clear {
  color: rgba(0, 0, 0, 0.3);
}

.editor-light .pin-clear:hover {
  color: rgba(239, 68, 68, 0.8);
}

/* Code preview box (inspector) */
.code-preview-box {
  border: 1px solid var(--border);
}

.code-preview-content {
  background: rgba(0, 0, 0, 0.3);
}

.code-preview-text {
  color: rgba(255, 255, 255, 0.4);
}

.code-preview-fade {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.editor-light .code-preview-box {
  border: 1px solid var(--border);
}

.editor-light .code-preview-content {
  background: rgba(0, 0, 0, 0.04);
}

.editor-light .code-preview-text {
  color: rgba(0, 0, 0, 0.5);
}

.editor-light .code-preview-fade {
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
}

/* Code modal */
.code-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: var(--space-9);
}

.code-modal-content {
  background: var(--bg-secondary, #1a1a1a);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.code-modal-header {
  padding: var(--space-7) var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code-modal-title {
  font-size: var(--text-base);
  color: var(--text, #fff);
}

.code-modal-subtitle {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.4);
}

.code-modal-body {
  flex: 1;
  overflow: hidden;
  padding: var(--space-7);
}

.code-modal-editor {
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  resize: none;
  outline: none;
}

.code-modal-footer {
  padding: var(--space-7) var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.editor-light .code-modal-backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.editor-light .code-modal-content {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.editor-light .code-modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.editor-light .code-modal-title {
  color: #1a1a1a;
}

.editor-light .code-modal-subtitle {
  color: rgba(0, 0, 0, 0.4);
}

.editor-light .code-modal-editor {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border);
  color: rgba(0, 0, 0, 0.85);
}

.editor-light .code-modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Typography style highlight */
.editor-block.style-highlighted {
  outline: 2px solid rgba(99, 179, 237, 0.8);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(99, 179, 237, 0.15);
}

/* AI Context highlight - shows blocks added to AI prompt */
.editor-block.ai-context {
  outline: 1px solid rgba(168, 85, 247, 0.6);
  outline-offset: -1px;
  box-shadow:
    inset 0 0 20px 4px rgba(168, 85, 247, 0.25),
    inset 0 0 40px 8px rgba(236, 72, 153, 0.15),
    inset 0 0 60px 12px rgba(251, 146, 60, 0.1);
  animation: aiContextPulse 3s ease-in-out infinite;
}

@keyframes aiContextPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 20px 4px rgba(168, 85, 247, 0.25),
      inset 0 0 40px 8px rgba(236, 72, 153, 0.15),
      inset 0 0 60px 12px rgba(251, 146, 60, 0.1);
  }
  50% {
    box-shadow:
      inset 0 0 25px 6px rgba(236, 72, 153, 0.3),
      inset 0 0 45px 10px rgba(251, 146, 60, 0.2),
      inset 0 0 65px 14px rgba(168, 85, 247, 0.12);
  }
}

/* AI Generating - active pulsating glow while generating */
.editor-block.ai-generating {
  outline: 2px solid rgba(251, 146, 60, 0.7);
  outline-offset: 2px;
  box-shadow:
    0 0 30px 8px rgba(251, 146, 60, 0.4),
    0 0 60px 16px rgba(236, 72, 153, 0.25),
    0 0 90px 24px rgba(168, 85, 247, 0.15);
  animation: aiGeneratingPulse 1.5s ease-in-out infinite;
}

@keyframes aiGeneratingPulse {
  0%, 100% {
    outline-color: rgba(251, 146, 60, 0.7);
    box-shadow:
      0 0 30px 8px rgba(251, 146, 60, 0.4),
      0 0 60px 16px rgba(236, 72, 153, 0.25),
      0 0 90px 24px rgba(168, 85, 247, 0.15);
    transform: scale(1);
  }
  50% {
    outline-color: rgba(236, 72, 153, 0.8);
    box-shadow:
      0 0 40px 12px rgba(236, 72, 153, 0.5),
      0 0 80px 24px rgba(251, 146, 60, 0.3),
      0 0 120px 36px rgba(168, 85, 247, 0.2);
    transform: scale(1.005);
  }
}

/* Resize handles - smooth appearance */
/* Moveable-style control box */
.control-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 100ms ease;
}

.editor-block.selected .control-box {
  opacity: 1;
}

/* Control box border lines */
.control-box-lines {
  position: absolute;
  inset: 0;
}

.control-line {
  position: absolute;
  background: #4af;
  --line-width: calc(1px * var(--ui-scale, 1));
}

.control-line.top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--line-width);
}

.control-line.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--line-width);
}

.control-line.left {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--line-width);
}

.control-line.right {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--line-width);
}

/* Resize handles - scale inversely with zoom to maintain constant visual size */
.resize-handle {
  position: absolute;
  pointer-events: auto;
  z-index: 11;
}

/* Corner handles - rounded, scale with zoom */
.resize-handle.corner {
  --handle-size: calc(10px * var(--ui-scale, 1));
  width: var(--handle-size);
  height: var(--handle-size);
  background: #fff;
  border: 1px solid #4af;
  border-radius: 50%;
}

.resize-handle.corner.nw { top: 0; left: 0; transform: translate(-50%, -50%); }
.resize-handle.corner.ne { top: 0; right: 0; transform: translate(50%, -50%); }
.resize-handle.corner.sw { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.resize-handle.corner.se { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* Corner rotation zones - invisible areas outside corners for rotation, scale with zoom */
.rotation-zone {
  --zone-size: calc(20px * var(--ui-scale, 1));
  --zone-offset: calc(-20px * var(--ui-scale, 1));
  position: absolute;
  width: var(--zone-size);
  height: var(--zone-size);
  pointer-events: auto;
  z-index: 10;
  /* Rotation cursor with white outline */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='-5.2 -5.2 62.4 62.4'%3E%3Cg stroke='%23fff' stroke-width='4' fill='none'%3E%3Cpath d='M48.5,2h-3C44.7,2,44,2.7,44,3.5v7c0,0.9-1,1.5-1.6,0.8l0,0C37.7,6.1,31,3.4,23.7,4.1 c-2.6,0.2-5.1,1-7.4,2.2c-1.2,0.6-2.4,1.3-3.4,2.1c-0.7,0.5-0.8,1.6-0.2,2.3l2.1,2.1c0.5,0.5,1.3,0.6,1.9,0.2 c1.2-0.8,2.5-1.5,3.9-2.1c0.6-0.2,1.3-0.4,2-0.6c6.3-1.2,12.3,1.3,15.7,5.4c1.2,1.4,0.3,2.3-0.7,2.3h-7c-0.8,0-1.6,0.7-1.6,1.5v3 c0,0.8,0.8,1.5,1.6,1.5h18.2c0.7,0,1.2-0.6,1.2-1.3V3.5C50,2.7,49.3,2,48.5,2z'/%3E%3Cpath d='M39.4,37.4c-0.6-0.6-1.5-0.6-2.1,0c-1.6,1.6-3.6,2.9-5.8,3.7c-0.6,0.2-1.3,0.4-2,0.6 c-6.3,1.2-12.3-1.3-15.7-5.4c-1.2-1.4-0.3-2.3,0.7-2.3h7c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5H3.3C2.6,28,2,28.6,2,29.3 v19.2C2,49.3,2.7,50,3.5,50h3C7.3,50,8,49.3,8,48.3v-7c0-0.9,1-1.5,1.6-0.8l0,0c4.6,5.2,11.4,7.9,18.7,7.2c2.6-0.2,5.1-1,7.4-2.2 c2.2-1.1,4.1-2.5,5.7-4.1c0.6-0.6,0.6-1.6,0-2.1L39.4,37.4z'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Cpath d='M48.5,2h-3C44.7,2,44,2.7,44,3.5v7c0,0.9-1,1.5-1.6,0.8l0,0C37.7,6.1,31,3.4,23.7,4.1 c-2.6,0.2-5.1,1-7.4,2.2c-1.2,0.6-2.4,1.3-3.4,2.1c-0.7,0.5-0.8,1.6-0.2,2.3l2.1,2.1c0.5,0.5,1.3,0.6,1.9,0.2 c1.2-0.8,2.5-1.5,3.9-2.1c0.6-0.2,1.3-0.4,2-0.6c6.3-1.2,12.3,1.3,15.7,5.4c1.2,1.4,0.3,2.3-0.7,2.3h-7c-0.8,0-1.6,0.7-1.6,1.5v3 c0,0.8,0.8,1.5,1.6,1.5h18.2c0.7,0,1.2-0.6,1.2-1.3V3.5C50,2.7,49.3,2,48.5,2z'/%3E%3Cpath d='M39.4,37.4c-0.6-0.6-1.5-0.6-2.1,0c-1.6,1.6-3.6,2.9-5.8,3.7c-0.6,0.2-1.3,0.4-2,0.6 c-6.3,1.2-12.3-1.3-15.7-5.4c-1.2-1.4-0.3-2.3,0.7-2.3h7c0.8,0,1.5-0.7,1.5-1.5v-3c0-0.8-0.7-1.5-1.5-1.5H3.3C2.6,28,2,28.6,2,29.3 v19.2C2,49.3,2.7,50,3.5,50h3C7.3,50,8,49.3,8,48.5v-7c0-0.9,1-1.5,1.6-0.8l0,0c4.6,5.2,11.4,7.9,18.7,7.2c2.6-0.2,5.1-1,7.4-2.2 c2.2-1.1,4.1-2.5,5.7-4.1c0.6-0.6,0.6-1.6,0-2.1L39.4,37.4z'/%3E%3C/g%3E%3C/svg%3E") 10 10, pointer;
}

.rotation-zone.nw { top: var(--zone-offset); left: var(--zone-offset); }
.rotation-zone.ne { top: var(--zone-offset); right: var(--zone-offset); }
.rotation-zone.sw { bottom: var(--zone-offset); left: var(--zone-offset); }
.rotation-zone.se { bottom: var(--zone-offset); right: var(--zone-offset); }

/* Edge handles - rounded, scale with zoom */
.resize-handle.edge {
  --handle-size: calc(8px * var(--ui-scale, 1));
  width: var(--handle-size);
  height: var(--handle-size);
  background: #fff;
  border: 1px solid #4af;
  border-radius: 50%;
}

.resize-handle.edge.n { top: 0; left: 50%; transform: translate(-50%, -50%); }
.resize-handle.edge.s { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.resize-handle.edge.e { right: 0; top: 50%; transform: translate(50%, -50%); }
.resize-handle.edge.w { left: 0; top: 50%; transform: translate(-50%, -50%); }

/* Multi-select indicator (simple border for individual blocks) */
.multi-select-indicator {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.multi-select-indicator .control-box-lines .control-line {
  background: #0af;
  opacity: 0.5;
}

/* Multi-select bounding box */
.multi-select-bounds {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

/* Multi-select resize handle cursors */
.multi-select-bounds .resize-handle.corner.nw { cursor: nwse-resize; }
.multi-select-bounds .resize-handle.corner.se { cursor: nwse-resize; }
.multi-select-bounds .resize-handle.corner.ne { cursor: nesw-resize; }
.multi-select-bounds .resize-handle.corner.sw { cursor: nesw-resize; }
.multi-select-bounds .resize-handle.edge.n { cursor: ns-resize; }
.multi-select-bounds .resize-handle.edge.s { cursor: ns-resize; }
.multi-select-bounds .resize-handle.edge.e { cursor: ew-resize; }
.multi-select-bounds .resize-handle.edge.w { cursor: ew-resize; }

.multi-select-bounds .control-box-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.multi-select-bounds .control-line {
  position: absolute;
  background: #0af;
  --line-width: calc(1px * var(--ui-scale, 1));
}

.multi-select-bounds .control-line.top {
  top: 0;
  left: 0;
  right: 0;
  height: var(--line-width);
}

.multi-select-bounds .control-line.bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--line-width);
}

.multi-select-bounds .control-line.left {
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--line-width);
}

.multi-select-bounds .control-line.right {
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--line-width);
}

/* Snap guides - scale with zoom */
.snap-guide {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  z-index: 9999;
  pointer-events: none;
  --guide-width: calc(1px * var(--ui-scale, 1));
}

.snap-guide.horizontal {
  height: var(--guide-width);
  left: 0;
  right: 0;
}

.snap-guide.vertical {
  width: var(--guide-width);
  top: 0;
  bottom: 0;
}

.snap-guide.center {
  background: rgba(255, 100, 200, 0.8);
}

.snap-guide.element-center {
  background: rgba(100, 200, 255, 0.8);
}

.snap-guide.inner-margin {
  background: rgba(255, 200, 0, 0.8);
}

/* Form inputs - minimal style */
input, select, textarea {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: var(--text-base);
}

input:focus, select:focus, textarea:focus {
  background: rgba(255, 255, 255, 0.04);
}

/* Compact input rows */
.input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.input-label {
  font-size: var(--text-base);
  color: var(--text-muted);
  min-width: 60px;
  flex-shrink: 0;
}

.input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.input-field:hover {
  background: rgba(255, 255, 255, 0.06);
}

.input-field:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Panel sections */
.panel-section {
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--border-subtle);
}

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

.panel-header {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  margin-bottom: var(--space-5);
}

/* Panel section title - consistent header style */
.panel-title {
  font-size: var(--text-base);
  color: var(--text);
  margin-bottom: var(--space-6);
  letter-spacing: -0.01em;
}

/* Panel subtitle for subsections */
.panel-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
  margin-top: var(--space-6);
}

.panel-subtitle:first-child {
  margin-top: 0;
}

/* Controls container - vertical stack of prop-rows */
.controls-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

/* Horizontal controls group */
.controls-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Input with unit suffix - unit displayed inside input */
.input-with-unit {
  position: relative;
  width: 100%;
}

.input-with-unit input,
.input-with-unit input[type="number"].compact-input,
.input-with-unit input[type="number"].panel-input {
  width: 100%;
  padding-right: 28px !important;
  text-align: right !important;
}

.input-unit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--text-dim);
  pointer-events: none;
  opacity: 0.6;
}

/* Color picker row */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}

.color-swatch:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Slider with number input combo */
.slider-with-input {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.slider-with-input input[type="range"] {
  flex: 1;
  min-width: 0;
  max-width: 76px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  outline: none;
}

.slider-with-input input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
}

.slider-with-input input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--text-muted);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Light theme slider-with-input */
.editor-light .slider-with-input input[type="range"] {
  background: rgba(0, 0, 0, 0.1) !important;
}

.editor-light .slider-with-input input[type="range"]::-webkit-slider-thumb {
  background: #888 !important;
}

.editor-light .slider-with-input input[type="range"]::-moz-range-thumb {
  background: #888 !important;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  height: 28px;
}

.panel-slider {
  flex: 1;
  min-width: 0;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

.editor-light .panel-slider {
  background: rgba(0, 0, 0, 0.1);
}

.slider-value {
  width: 40px;
  height: 24px;
  padding: 0 4px;
  font-size: var(--text-base);
  text-align: right;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  -moz-appearance: textfield;
}

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

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

.no-spinners {
  -moz-appearance: textfield;
}

.slider-value:hover {
  background: rgba(255, 255, 255, 0.06);
}

.slider-value:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  outline: none;
}

.editor-light .slider-value:hover {
  background: rgba(0, 0, 0, 0.06);
}

.editor-light .slider-value:focus {
  background: rgba(0, 0, 0, 0.08);
}

/* Icon button row */
.icon-btn-row {
  display: flex;
  gap: var(--space-1);
}

/* Panel button - extends .btn with full width */
.panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 32px;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
}

.panel-btn:hover {
  background: var(--toggle-bg);
}

/* Transition test buttons */
.transition-test-btn {
  flex: 1;
}

/* Light mode - remove canvas shadow, add border */
.editor-light #canvas {
  box-shadow: none !important;
  border: 1px solid var(--light-border) !important;
}

/* Form select dropdown arrow */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* Toggle switch - minimal with spring animation */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-track {
  width: 36px;
  height: 20px;
  background: var(--toggle-bg);
  border-radius: 10px;
  position: relative;
  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: active toggle is lighter grey */
.toggle.active .toggle-track {
  background: #666666;
}

/* Light mode: active toggle is dark */
.editor-light .toggle.active .toggle-track {
  background: #1a1a1a;
}

.toggle-thumb {
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 250ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle.active .toggle-thumb {
  transform: translateX(16px);
}

.toggle:hover .toggle-thumb {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Inline toggle-switch overrides (for toggles with inline styles) */
.toggle-switch {
  background: var(--toggle-bg);
  transition: background 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.toggle-switch.active {
  background: #666666 !important;
}

.editor-light .toggle-switch.active {
  background: #1a1a1a !important;
}

.toggle-switch > div {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 250ms ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch:hover > div {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Property group - visual grouping for related controls */
.prop-group {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.prop-group-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.prop-group-row .prop-label {
  min-width: 52px;
}

.editor-light .prop-group {
  background: rgba(0, 0, 0, 0.03);
}

/* Toast animation - spring entrance */
/**
 * Toast Animation - Subtle & Refined
 * - Gentle slide from right with soft fade
 * - Minimal overshoot for subtle "landing" feel
 * - Quick exit for non-intrusive dismissal
 */
@keyframes toastIn {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(10px);
    opacity: 0;
  }
}

.toast {
  animation: toastIn var(--duration-slow) var(--ease-out-expo);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
}

.toast.hiding {
  animation: toastOut var(--duration-fast) var(--ease-in-out) forwards;
}

/* Custom scrollbar - very subtle */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Canvas - NO transitions for direct manipulation */
.canvas {
  position: relative;
  transform-origin: top left;
  transition: none;
  isolation: isolate; /* Create stacking context for proper z-index behavior */
}

/* Ensure canvas background elements stay behind blocks */
#canvas-bg-video,
#canvas-bg-iframe,
.canvas-bg-iframe {
  z-index: -1 !important;
}

.canvas-wash-overlay {
  z-index: 0 !important;
}

#canvas-wrapper {
  transition: none;
}

/* Smooth transition when switching breakpoints */
.breakpoint-transitioning .canvas,
.breakpoint-transitioning #canvas-wrapper {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.breakpoint-transitioning .editor-block {
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.breakpoint-transitioning .text-content {
  transition: font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Text content div-based paragraph styling */
.text-content > div {
  margin: 0;
  text-indent: var(--text-indent, 0);
  padding-bottom: var(--para-spacing, 0);
}

/* Empty lines (only br) should have no paragraph spacing */
.text-content > div:has(> br:only-child),
.text-content > div:has(> span:only-child > br:only-child) {
  padding-bottom: 0;
}

/* Links in text content */
.text-content a {
  color: inherit;
  text-decoration: underline;
}

/* Legacy p support */
.text-content p {
  margin: 0;
  padding: 0;
  display: block;
}

/* Text Selection Inspector - floating formatting toolbar (matches AI modal) */
.text-selection-inspector {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 48px;
  padding: 0 var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  z-index: 2000;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
}

.text-selection-inspector.visible {
  animation: tsiSlideUp var(--spring-duration) var(--spring-easing) forwards;
  visibility: visible;
}

.text-selection-inspector.hiding {
  animation: tsiSlideDown 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

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

.tsi-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tsi-label {
  color: var(--text-muted);
}

.tsi-btn {
  font: inherit;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  outline: none;
  transition: background 0.15s;
}

.tsi-btn:hover {
  background: var(--surface-hover);
}

.tsi-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
}

/* Color picker group */
.tsi-color-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tsi-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
}

#tsi-color {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#tsi-color-hex {
  width: 70px;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text);
  font: inherit;
  font-family: var(--font-mono);
  outline: none;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* Light theme */
.editor-light .text-selection-inspector {
  background: rgba(255, 255, 255, 0.85);
}

.editor-light .tsi-color-picker {
  background: none !important;
}

.editor-light #tsi-color-hex {
  background: none !important;
  background-color: transparent !important;
}

/* Hide canvas background iframe during transition to prevent flicker */
.breakpoint-transitioning .canvas-bg-iframe {
  transition: opacity 0.2s ease-out !important;
}

/* Hide scrollbars on canvas container */
#canvas-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}

/* Disable all transitions during drag/resize for instant feedback */
.editor-block.dragging,
.editor-block.resizing,
body.space-panning .editor-block,
body.space-panning #canvas-container,
body.space-panning .canvas {
  transition: none !important;
}

#canvas-container::-webkit-scrollbar {
  display: none;
}

/* Space panning */
body.space-panning,
body.space-panning * {
  cursor: grab !important;
}

body.space-panning.grabbing,
body.space-panning.grabbing * {
  cursor: grabbing !important;
}

/* Block overlay */
.block-overlay {
  cursor: move;
  background: transparent;
}

.editor-block.selected .block-overlay {
  background: rgba(255, 255, 255, 0.02);
}

/* Block content layer */
.block-content {
  position: relative;
  z-index: 1;
}

/* Mask editing mode */
.mask-edit-container {
  position: relative;
}

.mask-edit-container .mask-media {
  cursor: move;
}

.mask-edit-container .mask-media img,
.mask-edit-container .mask-media video,
.mask-edit-container .mask-media iframe {
  pointer-events: none;
  user-select: none;
}

.mask-resize-handle:hover {
  background: #fff !important;
  transform: scale(1.1);
}

.editor-block.mask-editing {
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Mask editing mode - outer container uses same styling as regular selection */
.editor-block.mask-editing.selected .control-box {
  opacity: 1;
}

/* Inner media resize handles - rounded to match outer handles, scale with zoom */
.mask-resize-handle {
  --handle-size: calc(10px * var(--ui-scale, 1));
  width: var(--handle-size) !important;
  height: var(--handle-size) !important;
  background: #fff !important;
  border: 1px solid #4af !important;
  border-radius: 50% !important;
}

/* Hover states for interactive elements */
.hover-surface:hover {
  background: rgba(255, 255, 255, 0.05);
}

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

/* ============================================
   Framer-style UI Components
   ============================================ */

/* Tabs */
.tab-bar {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface);
  border-radius: var(--radius-md);
}

.tab-item {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.tab-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.tab-item.active {
  color: var(--text);
  background: var(--surface-2);
}

/* Segmented Control */
.segmented-control {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: var(--space-0);
  gap: var(--space-0);
}

.segment-btn {
  flex: 1;
  padding: 5px var(--space-3);
  font-size: var(--text-base);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

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

.segment-btn.active {
  color: var(--text);
  background: var(--surface-2);
}

/* Property Row - Fixed grid layout for consistent alignment */
.prop-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: 34px;
}

.prop-row + .prop-row {
  margin-top: var(--space-0);
}

/* Variant with wider label */
.prop-row.wide-label {
  grid-template-columns: 100px 1fr;
}

/* Variant for full-width content (no label) */
.prop-row.full-width {
  grid-template-columns: 1fr;
}

.prop-label {
  font-size: var(--text-base);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Panel Input - unified style for all inputs */
.compact-input,
.panel-input {
  width: 100%;
  height: 30px;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--input-bg);
  border: none;
  border-radius: var(--radius-sm);
  transition: all 120ms ease;
}

/* Number inputs - fixed width for consistency */
input[type="number"].compact-input,
input[type="number"].panel-input {
  width: 100%;
  text-align: right;
  padding-right: 8px;
  font-variant-numeric: tabular-nums;
}

/* Small number input variant */
.compact-input.small,
.panel-input.small {
  width: 40px !important;
  height: 26px !important;
  padding: 0 4px !important;
  font-size: var(--text-base) !important;
  text-align: center !important;
  flex-shrink: 0;
}

.compact-input:hover,
.panel-input:hover {
  background: rgba(255, 255, 255, 0.06);
}

.compact-input:focus,
.panel-input:focus {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Panel Select - unified style for all selects */
.mini-select,
.panel-select {
  width: 100%;
  height: 30px;
  padding: 0 28px 0 10px;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--input-bg);
  border: none;
  border-radius: var(--radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L4 4L7 1' stroke='%238a8a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: all 120ms ease;
}

.mini-select:hover,
.panel-select:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.mini-select:focus,
.panel-select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

/* Toggle Button Group */
.toggle-btn-group {
  display: flex;
  background: var(--input-bg);
  border-radius: var(--radius-sm);
  padding: 1px;
  height: 32px;
  gap: var(--space-px);
  width: 100%;
}

.toggle-btn {
  flex: 1;
  padding: 0 8px;
  font-size: var(--text-base);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.toggle-btn.active {
  color: var(--text);
  background: transparent;
}

/* Animated toggle indicator */
.toggle-btn-group.has-indicator {
  position: relative;
}

.toggle-btn-group.has-indicator .toggle-btn.active {
  background: transparent;
}

.toggle-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 4px);
  background: var(--grey-900);
  border-radius: var(--radius-sm);
  transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.editor-light .toggle-indicator {
  background: var(--surface);
}

/* 3-button variant */
.toggle-indicator.toggle-indicator-3 {
  width: calc(33.33% - 4px);
}

.toggle-btn-group.has-indicator .toggle-btn {
  position: relative;
  z-index: 1;
}

/* Icon toggle button variant */
.toggle-btn-group.icons-only {
  width: auto;
}

.toggle-btn-group.icons-only .toggle-btn {
  flex: none;
  width: 28px;
  padding: 0;
}

/* Easing Selector - Horizontal Scrollable Grid */
.easing-container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.easing-grid-scroll {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--space-3) 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.easing-grid-scroll::-webkit-scrollbar {
  height: 4px;
}

.easing-grid-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.easing-grid-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-xs);
}

.easing-grid-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.easing-grid-item {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.0);
  border: 0px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 150ms;
  color: var(--text-muted);
}

.easing-grid-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.easing-grid-item.selected {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--accent);
}

.easing-grid-item .easing-curve-svg {
  opacity: 0.3;
  scale: 0.9;
}

.easing-grid-item:hover .easing-curve-svg,
.easing-grid-item.selected .easing-curve-svg {
  opacity: 1;
}

.timing-section {
  margin-bottom: var(--space-1);
}

/**
 * Icon Button - Refined micro-interaction
 * - Quick color transition
 * - Subtle scale on active for tactile feel
 */
.icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart),
              transform var(--duration-fast) var(--ease-out-quart);
}

.icon-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

.icon-btn:active {
  transform: scale(0.92);
}

.icon-btn.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

button#ai-nav-btn,
button#ai-nav-btn:hover,
button#ai-nav-btn:focus,
button#ai-nav-btn.ai-active svg {
  color: #f472b6 !important;
}

button#ai-nav-btn.ai-active {
  background: rgba(244, 114, 182, 0.2) !important;
}

/* Breakpoint Toggle */
.breakpoint-toggle {
  display: flex;
  gap: var(--space-0);
  padding: 3px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
}

.breakpoint-btn {
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.breakpoint-btn:hover {
  color: var(--text-muted);
}

.breakpoint-btn.active {
  color: var(--text);
  background: var(--surface-2);
}

/* Light theme breakpoint toggle */
.editor-light .breakpoint-toggle {
  background: rgba(0, 0, 0, 0.04);
}

.editor-light .breakpoint-btn {
  color: var(--text-dim);
}

.editor-light .breakpoint-btn:hover {
  color: var(--text-muted);
}

.editor-light .breakpoint-btn.active {
  color: #fff;
  background: #1a1a1a;
}

/* Mobile mode canvas indicator */
.canvas-mobile-indicator {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 10;
}

/* Panel Section Header */
.panel-section-header {
  display: flex;
  align-items: center;
  justify-content: between;
  padding: var(--space-3) 0;
  cursor: pointer;
}

.panel-section-title {
  font-size: var(--text-base);
  color: var(--text);
}

/* Add Button */
.add-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  color: var(--grey-950);
  background: var(--grey-900);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 120ms ease;
  letter-spacing: -0.01em;
}

.add-btn:hover {
  background: var(--grey-800);
}

.add-btn svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

/* Alignment Icons Row */
.align-row {
  display: flex;
  gap: var(--space-0);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
}

.align-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.align-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.align-btn.active {
  color: var(--text);
  background: var(--surface-2);
}

/* Sidebar Panel */
.sidebar-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

/* Top Tabs (underline style) */
.top-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.top-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: 0 16px;
  font-size: var(--text-base);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 150ms ease;
  position: relative;
}

.top-tab:hover {
  color: var(--text);
}

.top-tab.active {
  color: var(--text);
}

.top-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #fff;
  border-radius: var(--radius-xs);
}

.top-tab-icon {
  width: 16px;
  height: 16px;
}

/* Search Input */
.search-input-wrap {
  position: relative;
  margin-bottom: var(--space-5);
}

.search-input {
  width: 100%;
  height: 32px;
  padding: 0 12px 0 32px;
  font-size: var(--text-base);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: all 150ms ease;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  pointer-events: none;
}

/* Design Section Item */
.design-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.design-item:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.design-item.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.design-item-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

/* Section Divider */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-5) 0;
}

/* Collapsible Section */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  cursor: pointer;
  user-select: none;
}

.section-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}

/**
 * Section Toggle Chevron - Smooth rotation
 * - Gentle rotation with expo easing
 * - Matches panel expand/collapse timing
 */
.section-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: transform var(--duration-normal) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-quart);
}

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

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

/* Custom Range Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 150ms ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--text);
}

input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--text-muted);
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* Sidebar Tab Styles */
.sidebar-tab {
  color: var(--text-muted);
  transition: all 150ms ease;
}

.sidebar-tab:hover {
  color: var(--text);
}

.sidebar-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* Floating Zoom Controls */
.zoom-controls {
  position: fixed;
  bottom: 16px;
  left: 256px; /* 240px sidebar + 16px margin */
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  gap: var(--space-0);
  z-index: 1000;
  /*box-shadow: var(--shadow-lg);*/
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 150ms ease, left 150ms ease;
}

/* Shift left on hover to expand from center */
.zoom-controls:hover {
  transform: translateX(-30px);
}

/**
 * Zoom Button Animation - Staggered Reveal
 * - Buttons fade + scale in with stagger delay
 * - Creates smooth "unfurling" effect on hover
 */
.zoom-btn {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  width: 0;
  padding: 0;
  overflow: hidden;
  transform: scale(0.8);
  transition: opacity var(--duration-normal) var(--ease-out-quart),
              width var(--duration-normal) var(--ease-out-expo),
              transform var(--duration-normal) var(--ease-out-quart),
              background-color var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}

/* Staggered reveal - first button */
.zoom-controls:hover .zoom-btn:first-child {
  opacity: 1;
  width: 28px;
  transform: scale(1);
  transition-delay: 0ms;
}

/* Staggered reveal - second button (last) */
.zoom-controls:hover .zoom-btn:last-child {
  opacity: 1;
  width: 28px;
  transform: scale(1);
  transition-delay: 40ms;
}

/* Fallback for any additional buttons */
.zoom-controls:hover .zoom-btn {
  opacity: 1;
  width: 28px;
  transform: scale(1);
}

.zoom-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.zoom-btn:disabled:hover {
  background: transparent;
  color: var(--text-muted);
}

/* Zoom lock button - appears on left side */
.zoom-lock-btn {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 200ms ease;
}

.zoom-controls:hover .zoom-lock-btn {
  opacity: 1;
  width: 28px;
  transition-delay: 60ms;
}

.zoom-lock-btn.active {
  color: var(--accent);
}

.zoom-controls.zoom-locked .zoom-lock-btn {
  opacity: 1;
  width: 28px;
}

.zoom-level-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.zoom-level-btn {
  height: 28px;
  min-width: 44px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  transition: all 150ms ease;
}

.zoom-level-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.zoom-level-btn .zoom-fit {
  display: none;
}

.zoom-level-btn:hover .zoom-percent {
  display: none;
}

.zoom-level-btn:hover .zoom-fit {
  display: inline;
}

/* Mobile Layout Notice */
.mobile-layout-notice {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-layout-notice.hidden {
  display: none;
}

.mobile-layout-notice-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  border-radius: var(--radius-full);
  color: white;
  font-size: var(--text-base);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  transition: all 150ms ease;
}

.mobile-layout-notice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.mobile-layout-notice-btn svg {
  opacity: 0.9;
}

.mobile-layout-dismiss-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 150ms ease;
}

.mobile-layout-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Light theme */
.editor-light .mobile-layout-notice-btn {
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

/* Window Controls (macOS style) */
.window-control {
  transition: opacity 150ms ease;
}

.window-controls:hover .window-control {
  opacity: 1;
}

/* Canvas Background Pattern */
#canvas-container {
  background-color: var(--bg);
  /*background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0);*/
  background-size: 24px 24px;
}

/* ============================================
   PAGE TRANSITION ANIMATIONS (Viewer)
   ============================================ */

/* Base animation properties for page wrapper */
.page-wrapper {
  animation-duration: var(--duration, 400ms);
  animation-timing-function: var(--easing, ease-out);
  animation-fill-mode: both;
}

.page-leaving,
.page-entering {
  animation-duration: var(--duration, 400ms);
  animation-timing-function: var(--easing, ease-out);
  animation-delay: var(--delay, 0ms);
  animation-fill-mode: both;
}

/* Fade */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* Slide Left */
@keyframes slideInLeft {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Slide Right */
@keyframes slideInRight {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* Slide Up */
@keyframes slideInUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes slideOutUp {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

/* Slide Down */
@keyframes slideInDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes slideOutDown {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

/* Zoom In */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Zoom In Reverse (for zoom-out preset) */
@keyframes zoomInReverse {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOutReverse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Flip */
@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
}

@keyframes flipOut {
  from {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
  to {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg);
  }
}

/* Cube */
@keyframes cubeInLeft {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg) translateZ(50%);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
}

@keyframes cubeOutLeft {
  from {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg) translateZ(50%);
  }
}

@keyframes cubeInRight {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg) translateZ(50%);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
}

@keyframes cubeOutRight {
  from {
    opacity: 1;
    transform: perspective(1000px) rotateY(0) translateZ(0);
  }
  to {
    opacity: 0;
    transform: perspective(1000px) rotateY(-90deg) translateZ(50%);
  }
}

/* Dissolve */
@keyframes dissolveIn {
  from {
    opacity: 0;
    filter: blur(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes dissolveOut {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(20px);
  }
}

/* Custom transition placeholders (AI-generated will use these names) */
@keyframes customEnterForward {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes customLeaveForward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}

@keyframes customEnterBackward {
  from { opacity: 0; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes customLeaveBackward {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(100%); }
}

/* Height drag handle for dynamic mode */
.height-drag-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  cursor: ns-resize;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#canvas:hover .height-drag-handle,
.height-drag-handle:hover {
  opacity: 1;
}

.height-drag-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(59, 130, 246, 0.6);
  pointer-events: none;
}

.height-drag-handle:hover .height-drag-line {
  background: rgba(59, 130, 246, 1);
  height: 3px;
}

.height-drag-label {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  color: rgba(59, 130, 246, 0.9);
  background: rgba(0, 0, 0, 0.7);
  padding: var(--space-0) var(--space-2);
  border-radius: var(--radius-xs);
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================
   AI PANEL STYLES
   ============================================ */

/* AI Nav Button in header */
.ai-nav-btn svg {
  color: var(--text-muted);
  transition: color 200ms ease;
}

.ai-nav-btn:hover svg {
  color: rgb(168, 85, 247);
}

/* AI Floating Button */
.ai-floating-btn {
  position: fixed;
  width: 32px;
  height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.9);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 150ms ease,
              background-color 150ms ease,
              border-color 150ms ease;
  pointer-events: none;
}

.ai-floating-btn.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.ai-floating-btn:hover {
  background: var(--surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
  transform: scale(1.05);
}

.ai-floating-btn:active {
  transform: scale(0.95);
}

.ai-floating-btn svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* AI button inside inspector preview (not fixed positioned) */
.canvas-bg-preview .ai-floating-btn {
  position: absolute;
  z-index: 10;
}

/* Unsaved Changes Dialog */
.unsaved-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: background 200ms ease;
}
.unsaved-dialog-overlay.visible {
  background: rgba(0, 0, 0, 0.6);
}
.unsaved-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-8);
  width: 280px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 200ms ease, transform 200ms ease;
}
.unsaved-dialog-overlay.visible .unsaved-dialog {
  opacity: 1;
  transform: scale(1);
}
.unsaved-dialog-title {
  font-size: var(--text-md);
  color: var(--text);
  margin-bottom: var(--space-3);
}
.unsaved-dialog-text {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-8);
}
.unsaved-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.unsaved-dialog-btn {
  width: 100%;
  padding: var(--space-4) var(--space-7);
  font-size: var(--text-base);
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease;
}
.unsaved-dialog-btn-primary {
  background: white;
  color: #111;
  border: none;
}
.unsaved-dialog-btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}
.unsaved-dialog-btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.unsaved-dialog-btn-danger:hover {
  background: rgba(239, 68, 68, 0.18);
}
.unsaved-dialog-btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.unsaved-dialog-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

/* AI Modal Overlay - minimal, allows interaction with elements behind */
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}

/* AI Modal - Clean ChatGPT style */
.ai-modal {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 600px;
  max-width: calc(100vw - 48px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  overflow: visible;
  animation: aiModalSlideUp var(--spring-duration) var(--spring-easing) forwards;
  pointer-events: auto;
  /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);*/
  /* Smooth height changes when content grows/shrinks */
  transition: transform var(--spring-duration) var(--spring-easing);
}

/* Animated gradient border - hidden by default */
.ai-modal-border {
  display: none;
}

@keyframes aiBorderSlide {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* No glow effects */
.ai-modal::before {
  display: none;
}

/* No inner background needed - using direct background */
.ai-modal::after {
  display: none;
}

@keyframes aiGlowSlide {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

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

/* Exit animation class */
.ai-modal.closing {
  animation: aiModalSlideDown 250ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

/* AI Modal close button - minimal, always visible */
.ai-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  z-index: 10;
  opacity: 1;
  transition: background 150ms ease, color 150ms ease;
}

.ai-modal:hover .ai-modal-close {
  opacity: 1;
}

.ai-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.ai-modal-close svg {
  width: 14px;
  height: 14px;
}

/* Bottom row: chips left, buttons right */
.ai-input-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Context chips */
.ai-context-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.ai-context-area:empty {
  display: none;
}

/* AI Input Actions - model selector + send button */
.ai-input-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.ai-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.ai-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

/* AI Add Menu - positioned from left */
.ai-add-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: rgba(40, 40, 40, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-1);
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 100;
  animation: menuSlideUp 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ai-add-menu.hidden {
  display: none;
}

/* Model menu positions from right */
#ai-model-menu {
  left: auto;
  right: 0;
}

.ai-add-menu-title {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 10px 4px;
}

.ai-add-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 150ms ease;
  text-align: left;
}

.ai-add-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.ai-add-menu-item:active {
  background: rgba(255, 255, 255, 0.12);
}

.ai-add-menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border-radius: var(--radius-sm);
}

.ai-add-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: var(--space-2) 0;
}

.ai-add-menu-empty {
  padding: var(--space-7);
  text-align: center;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-add-menu-loading {
  padding: var(--space-5) var(--space-7);
  text-align: center;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.4);
}

.ai-add-menu-hint {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-mono);
}

.ai-ollama-link {
  color: rgba(59, 130, 246, 0.8);
  text-decoration: none;
  font-size: var(--text-base);
}

.ai-ollama-link:hover {
  color: rgba(59, 130, 246, 1);
  text-decoration: underline;
}

/* AI Model Button - minimal text style */
.ai-model-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.ai-model-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.ai-model-name {
  flex: 1;
}

.ai-model-badge {
  display: none; /* Hide badges for cleaner look */
}

.ai-model-badge.balanced {
  background: rgba(59, 130, 246, 0.2);
  color: rgb(147, 197, 253);
}

.ai-model-badge.powerful {
  background: rgba(168, 85, 247, 0.2);
  color: rgb(216, 180, 254);
}

.ai-model-badge.fast {
  background: rgba(34, 197, 94, 0.2);
  color: rgb(134, 239, 172);
}

/* Cyan chip color for canvas type */
.chip-cyan {
  background: rgba(6, 182, 212, 0.15);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.2);
}

.chip-cyan:hover {
  background: rgba(6, 182, 212, 0.25);
}

/* Context Chips - minimal pill style */
.ai-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-1) var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.7);
  transition: all 150ms ease;
  animation: chipAppear 200ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  width: fit-content;
  flex-shrink: 0;
}

.ai-context-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes chipAppear {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ai-context-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Chip with image thumbnail */
.ai-context-chip.has-thumbnail {
  padding-left: 4px;
  gap: var(--space-2);
}

.ai-chip-thumbnail {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}

.ai-chip-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Color variants - subtle tints */
.ai-context-chip.chip-purple {
  background: rgba(168, 85, 247, 0.12);
}
.ai-context-chip.chip-purple:hover {
  background: rgba(168, 85, 247, 0.2);
}

.ai-context-chip.chip-pink {
  background: rgba(236, 72, 153, 0.12);
}
.ai-context-chip.chip-pink:hover {
  background: rgba(236, 72, 153, 0.2);
}

.ai-context-chip.chip-orange {
  background: rgba(251, 146, 60, 0.12);
}
.ai-context-chip.chip-orange:hover {
  background: rgba(251, 146, 60, 0.2);
}

.ai-context-chip.chip-yellow {
  background: rgba(255, 255, 255, 0.08);
}
.ai-context-chip.chip-yellow:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Newly added chips - subtle highlight */
.ai-context-chip.newly-added {
  background: rgba(255, 255, 255, 0.12);
  animation: chipHighlightFade 1s ease-out forwards;
}

@keyframes chipHighlightFade {
  0% {
    background: rgba(255, 255, 255, 0.15);
  }
  100% {
    background: rgba(255, 255, 255, 0.06);
  }
}

.ai-context-chip.removing {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 150ms ease, transform 150ms ease;
}

.ai-context-type-badge {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.5);
}

.ai-context-preview {
  color: rgba(255, 255, 255, 0.8);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-context-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
  margin-left: 0;
}

.ai-context-remove:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}

.ai-context-remove svg {
  width: 8px;
  height: 8px;
}

/* AI Input Area - main input container */
.ai-input-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-7);
}

/* Input row - add button and textarea */
.ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

/* Bottom row - chips on left, model+send on right */
.ai-bottom-row {
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
}

/* When context has chips, show bottom row and hide inline actions */
.ai-input-area:has(.ai-context-area:not(:empty)) .ai-bottom-row {
  display: flex;
}

.ai-input-area:has(.ai-context-area:not(:empty)) .ai-actions-inline {
  display: none;
}

/* When no chips, show inline actions (bottom row is already hidden) */
.ai-actions-inline {
  display: flex;
}

.ai-actions-bottom {
  display: flex;
}

.ai-input {
  flex: 1;
  min-height: 30px;
  max-height: 120px;
  padding: var(--space-1);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  resize: none;
  font-family: var(--font-ui);
}

.editor-light .ai-input:focus,
.ai-input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ai-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.ai-send-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  color: #000000;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}

.ai-send-btn:hover:not(:disabled) {
  background: var(--accent);
}

.ai-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.ai-send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ai-send-btn svg {
  width: 16px;
  height: 16px;
}

/* Wrapper for smooth height animation using grid */
.ai-chat-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-chat-wrapper:has(.ai-chat-history:empty) {
  grid-template-rows: 0fr;
}

/* AI Chat History - scrollable message area */
.ai-chat-history {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  scroll-behavior: smooth;
  min-height: 0; /* Required for grid animation */
}

.ai-chat-history:empty {
  padding: 0;
  min-height: 0;
}

/* Custom scrollbar for chat */
.ai-chat-history::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-history::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-history::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xs);
}

.ai-chat-history::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* AI Messages - ChatGPT style */
.ai-message {
  font-size: var(--text-base);
  line-height: 1.6;
  animation: aiMessageSlideIn 350ms cubic-bezier(0.22, 1, 0.36, 1);
  word-wrap: break-word;
}

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

.ai-message.user {
  padding: var(--space-4) var(--space-6);
  background: rgba(55, 55, 60, 0.9);
  color: rgba(255, 255, 255, 0.95);
  margin-left: auto;
  max-width: 85%;
  border-radius: var(--radius-xl);
}

.ai-message.assistant {
  padding: var(--space-1) 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  margin-right: auto;
  max-width: 100%;
}

/* Choice picker - horizontal pill buttons */
.ai-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  flex: 1;
  margin-top: var(--space-3);
}

.ai-choice-btn {
  display: inline-flex;
  padding: var(--space-2) var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.85);
}

.ai-choice-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

.ai-choice-btn:active {
  transform: scale(0.97);
  background: rgba(139, 92, 246, 0.2);
}

.ai-choice-label {
  font-size: var(--text-base);
  color: inherit;
}

.ai-choice-desc {
  display: none; /* Hide description - only show label */
}

/* "Something else" option - more subtle */
.ai-choice-other {
  background: transparent;
  border-style: dashed;
  opacity: 0.6;
}

.ai-choice-other:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.04);
}

.ai-choice-other .ai-choice-label {
  color: rgba(255, 255, 255, 0.6);
}

/* AI Loading Dots */
.ai-loading {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.ai-thinking {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-lg);
  animation: aiThinkingIn 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ai-thinking-text {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin-right: 2px;
}

/* Image generation thinking state */
.ai-thinking-image {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(236, 72, 153, 0.08) 50%, rgba(168, 85, 247, 0.06) 100%);
  border: 1px solid rgba(251, 146, 60, 0.2);
  padding-left: 14px;
  padding-right: 14px;
}

.ai-thinking-image .ai-thinking-text {
  background: linear-gradient(90deg, #fb923c, #ec4899, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-left: 2px;
  padding-right: 4px;
}

.ai-thinking-image .ai-loading-dot {
  background: linear-gradient(135deg, #fb923c, #ec4899);
}

.ai-loading-dot {
  width: 4px;
  height: 4px;
  background: var(--text-dim);
  border-radius: 50%;
  animation: aiLoadingBounce 1.2s infinite ease-in-out both;
}

.ai-loading-dot:nth-child(2) { animation-delay: -0.24s; }
.ai-loading-dot:nth-child(3) { animation-delay: -0.12s; }
.ai-loading-dot:nth-child(4) { animation-delay: 0s; }

@keyframes aiLoadingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* AI Generated Image Preview */
.ai-generated-image-preview {
  margin-top: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
}

.ai-generated-image {
  width: 100%;
  height: auto;
  display: block;
  max-height: 300px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.3);
}

.ai-image-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-image-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all 150ms ease;
  border: none;
}

.ai-image-apply {
  background: rgba(255, 255, 255, 0.08);
  color: var(--grey-100);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.ai-image-apply:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.ai-image-new {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.15));
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.ai-image-new:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.25));
  border-color: rgba(59, 130, 246, 0.5);
}

.ai-image-refine {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.ai-image-refine:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

.editor-light .ai-generated-image-preview {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.editor-light .ai-generated-image {
  background: rgba(0, 0, 0, 0.05);
}

.editor-light .ai-image-actions {
  background: rgba(0, 0, 0, 0.05);
  border-top-color: rgba(0, 0, 0, 0.1);
}

.editor-light .ai-image-apply {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.1));
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.3);
}

.editor-light .ai-image-new {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1));
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.3);
}

.editor-light .ai-image-refine {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
  border-color: rgba(0, 0, 0, 0.1);
}

/* AI Streaming Text */
.ai-streaming {
  display: flex;
  align-items: flex-start;
  gap: 0;
  animation: aiStreamingIn 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ai-streaming.fade-out {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0 !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ai-streaming-text {
  white-space: normal;
  word-break: break-word;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.ai-streaming-text::-webkit-scrollbar {
  display: none;
}

/* Code blocks in streaming text */
.ai-code-block {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 6px 0 4px 0;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.4;
  overflow-x: auto;
  white-space: pre;
  color: rgba(255, 255, 255, 0.85);
}

.ai-code-block code {
  font-family: inherit;
  font-size: inherit;
}

/* Fade mask at top when scrollable */
.ai-streaming-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}

.ai-streaming-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  background: linear-gradient(to bottom, var(--surface-2), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}

.ai-streaming-wrapper.has-overflow::before {
  opacity: 1;
}

.ai-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  margin-top: var(--space-0);
  animation: aiCursorBlink 0.8s infinite;
  flex-shrink: 0;
  align-self: flex-end;
}

@keyframes aiCursorBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* ============================================
   Project Loader
   ============================================ */
.project-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 9999;
  gap: var(--space-7);
}

.project-loader-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: projectLoaderSpin 0.8s linear infinite;
}

.project-loader-text {
  font-size: var(--text-base);
  color: var(--text-muted);
}

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

/* ============================================
   OOOOH SH*T LOGO ANIMATIONS
   ============================================ */

.logo-text {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  font-size: var(--text-base);
  color: #e5e5e5; /* Always light text */
  
}

/* Logo always stays light (dark mode) regardless of theme */
.editor-light .logo-text {
  color: #e5e5e5 !important;
}

.editor-light .logo-text .letter {
  color: #e5e5e5 !important;
}

.logo-text-hero {
  font-size: 126px;
  letter-spacing: -.05em;
  font-weight: 650;
}

.logo-text .word {
  display: inline-flex;
  align-items: baseline;
}

.logo-text .letter {
  display: inline-block;
  will-change: transform, opacity, filter;
  transform-origin: 50% 80%;
  opacity: 0;
  animation-fill-mode: both;
}

/* ====== SEQUENTIAL LETTER FX ====== */
/* Typewriter - crisp instant appear */
@keyframes fxType{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* Wave - smooth sine bounce */
@keyframes fxWave{0%{opacity:0;transform:translateY(20px)}40%{opacity:1;transform:translateY(-12px)}70%{transform:translateY(5px)}100%{opacity:1;transform:none}}
/* Pop - springy scale from center */
@keyframes fxPop{0%{opacity:0;transform:scale(0.01)}50%{opacity:1;transform:scale(1.4)}75%{transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
/* Rainbow - color cycle without movement */
@keyframes fxColor{0%{opacity:0;color:#ff3b7a}15%{opacity:1}25%{color:#ff3b7a}40%{color:#ffb703}55%{color:#4cc9f0}70%{color:#a855f7}85%{color:#22c55e}100%{opacity:1;color:var(--text)}}
/* Slam - dramatic drop from above */
@keyframes fxSlam{0%{opacity:0;transform:translateY(-60px) scaleY(2)}60%{opacity:1;transform:translateY(8px) scaleY(.7)}80%{transform:translateY(-3px) scaleY(1.1)}100%{opacity:1;transform:none}}
/* Drip - liquid falling with stretch */
@keyframes fxDrip{0%{opacity:0;transform:translateY(-30px) scaleY(1.8) scaleX(.6)}50%{opacity:1;transform:translateY(10px) scaleY(.6) scaleX(1.2)}75%{transform:translateY(-4px) scaleY(1.15)}100%{opacity:1;transform:none}}
/* Glitch - digital corruption */
@keyframes fxGlitch{0%{opacity:0;transform:translateX(-8px);filter:hue-rotate(90deg);clip-path:inset(40% 0 40% 0)}20%{opacity:1;transform:translateX(6px);clip-path:inset(20% 0 60% 0)}40%{transform:translateX(-4px);filter:hue-rotate(180deg);clip-path:inset(60% 0 10% 0)}60%{transform:translateX(3px);clip-path:inset(10% 0 30% 0)}80%{transform:translateX(-1px);filter:hue-rotate(270deg);clip-path:inset(0)}100%{opacity:1;transform:none;filter:none;clip-path:none}}
/* Jelly - wobbly squash and stretch */
@keyframes fxJelly{0%{opacity:0;transform:scaleX(.4) scaleY(1.5)}30%{opacity:1;transform:scaleX(1.4) scaleY(.6)}50%{transform:scaleX(.8) scaleY(1.3)}70%{transform:scaleX(1.15) scaleY(.85)}85%{transform:scaleX(.95) scaleY(1.05)}100%{opacity:1;transform:none}}
/* Float - gentle levitation with rotation */
@keyframes fxFloat{0%{opacity:0;transform:translateY(30px) rotate(8deg)}50%{opacity:1;transform:translateY(-10px) rotate(-4deg)}100%{opacity:1;transform:none}}
/* Skew - italic swing in */
@keyframes fxSkew{0%{opacity:0;transform:skewX(-30deg) skewY(5deg)}50%{opacity:1;transform:skewX(15deg) skewY(-2deg)}100%{opacity:1;transform:none}}
/* Flicker - neon sign effect */
@keyframes fxFlicker{0%{opacity:0}10%{opacity:1}15%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}50%{opacity:.3}55%{opacity:1}70%{opacity:.6}75%{opacity:1}100%{opacity:1}}
/* Smear - motion blur horizontal */
@keyframes fxSmear{0%{opacity:0;transform:translateX(-40px) scaleX(2);filter:blur(8px)}60%{opacity:1;transform:translateX(5px) scaleX(.9);filter:blur(0)}100%{opacity:1;transform:none}}
/* Bounce - ball physics */
@keyframes fxSoftBounce{0%{opacity:0;transform:translateY(-40px)}25%{opacity:1;transform:translateY(0)}40%{transform:translateY(-20px)}55%{transform:translateY(0)}70%{transform:translateY(-8px)}85%{transform:translateY(0)}100%{opacity:1;transform:none}}
/* Whisper - soft fade with slight grow */
@keyframes fxWhisper{0%{opacity:0;transform:scale(.8);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
/* Rise - elevator from below */
@keyframes fxSlideUp{0%{opacity:0;transform:translateY(50px);clip-path:inset(95% 0 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
/* Fall - drop from above */
@keyframes fxSlideDown{0%{opacity:0;transform:translateY(-50px);clip-path:inset(0 0 95% 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
/* Spin - 3D flip in */
@keyframes fxRotateIn{0%{opacity:0;transform:perspective(400px) rotateY(-70deg)}60%{opacity:1;transform:perspective(400px) rotateY(15deg)}80%{transform:perspective(400px) rotateY(-5deg)}100%{opacity:1;transform:none}}
/* Pulse - heartbeat throb */
@keyframes fxPulse{0%{opacity:0;transform:scale(0.01)}30%{opacity:1;transform:scale(1.3)}45%{transform:scale(.95)}60%{transform:scale(1.15)}75%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
/* Ghost - ethereal phase in */
@keyframes fxGhost{0%{opacity:0;transform:translateY(15px) scale(1.1);filter:blur(10px)}50%{opacity:.5;filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}

/* ====== HEAVY BOOM FX ====== */
/* Explosion - chaotic blast */
@keyframes fxBoom{
  0%{opacity:0;transform:scale(3) rotate(-45deg);filter:blur(15px) brightness(2);color:#fff}
  30%{opacity:1;transform:scale(.7) rotate(20deg);filter:blur(0) brightness(1.3);color:#ff3b7a}
  50%{transform:scale(1.3) rotate(-10deg);color:#ffb703}
  70%{transform:scale(.9) rotate(5deg);color:#4cc9f0}
  100%{opacity:1;transform:none;filter:none;color:var(--text)}
}
/* Crush - hydraulic press flatten */
@keyframes fxCrush{
  0%{opacity:0;transform:scaleY(2.5) scaleX(.3)}
  30%{opacity:1;transform:scaleY(.2) scaleX(1.8)}
  50%{transform:scaleY(1.4) scaleX(.7)}
  70%{transform:scaleY(.85) scaleX(1.15)}
  100%{opacity:1;transform:none}
}
/* Tornado - violent spin */
@keyframes fxTornado{
  0%{opacity:0;transform:rotate(-720deg) scale(0.01) translateY(-100px)}
  50%{opacity:1;transform:rotate(45deg) scale(1.2) translateY(10px)}
  75%{transform:rotate(-15deg) scale(.95)}
  100%{opacity:1;transform:none}
}
/* Rattle - aggressive shake */
@keyframes fxRattle{
  0%{opacity:0;transform:translateX(-20px)}
  20%{opacity:1;transform:translateX(15px) rotate(5deg)}
  35%{transform:translateX(-12px) rotate(-4deg)}
  50%{transform:translateX(10px) rotate(3deg)}
  65%{transform:translateX(-6px) rotate(-2deg)}
  80%{transform:translateX(3px) rotate(1deg)}
  100%{opacity:1;transform:none}
}
/* Punch - flying fist impact */
@keyframes fxSkullPunch{
  0%{opacity:0;transform:translateX(-50px) scale(1.8);filter:blur(8px)}
  40%{opacity:1;transform:translateX(15px) scale(.85);filter:blur(0)}
  55%{transform:translateX(-8px) scale(1.15)}
  70%{transform:translateX(4px) scale(.97)}
  100%{opacity:1;transform:none}
}

/* Container shake */
@keyframes quake{
  0%{transform:none}
  10%{transform:translate(-2px,1px) rotate(-.6deg)}
  20%{transform:translate(2px,-1px) rotate(.6deg)}
  35%{transform:translate(-2px,0) rotate(-.4deg)}
  50%{transform:translate(2px,1px) rotate(.4deg)}
  65%{transform:translate(-1px,-1px) rotate(-.2deg)}
  80%{transform:translate(1px,1px) rotate(.2deg)}
  100%{transform:none}
}
.logo-text.anim-quake{animation:quake .42s ease-in-out}

/* Line wobble */
@keyframes wobbleLine{0%{transform:none}25%{transform:rotate(-1.2deg) translateY(-1px)}60%{transform:rotate(1.2deg) translateY(1px)}100%{transform:none}}
.logo-text.anim-wobble{animation:wobbleLine .5s ease-in-out}

/* Animation classes */
.logo-text.anim-type .letter{animation-name:fxType;animation-duration:.15s;animation-timing-function:steps(1)}
.logo-text.anim-wave .letter{animation-name:fxWave;animation-duration:.7s;animation-timing-function:ease-in-out}
.logo-text.anim-pop .letter{animation-name:fxPop;animation-duration:.5s;animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}
.logo-text.anim-color .letter{animation-name:fxColor;animation-duration:1.2s;animation-timing-function:linear}
.logo-text.anim-slam .letter{animation-name:fxSlam;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,.68,0,1.5)}
.logo-text.anim-drip .letter{animation-name:fxDrip;animation-duration:.65s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.logo-text.anim-glitch .letter{animation-name:fxGlitch;animation-duration:.25s;animation-timing-function:steps(6)}
.logo-text.anim-jelly .letter{animation-name:fxJelly;animation-duration:.6s;animation-timing-function:ease-out}
.logo-text.anim-float .letter{animation-name:fxFloat;animation-duration:.9s;animation-timing-function:ease-in-out}
.logo-text.anim-skew .letter{animation-name:fxSkew;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text.anim-flicker .letter{animation-name:fxFlicker;animation-duration:.8s;animation-timing-function:steps(10)}
.logo-text.anim-smear .letter{animation-name:fxSmear;animation-duration:.3s;animation-timing-function:ease-out}
.logo-text.anim-softbounce .letter{animation-name:fxSoftBounce;animation-duration:.8s;animation-timing-function:ease-out}
.logo-text.anim-whisper .letter{animation-name:fxWhisper;animation-duration:1s;animation-timing-function:ease-out}
.logo-text.anim-slideup .letter{animation-name:fxSlideUp;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text.anim-slidedown .letter{animation-name:fxSlideDown;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text.anim-rotatein .letter{animation-name:fxRotateIn;animation-duration:.55s;animation-timing-function:ease-out}
.logo-text.anim-pulse .letter{animation-name:fxPulse;animation-duration:.7s;animation-timing-function:ease-out}
.logo-text.anim-ghost .letter{animation-name:fxGhost;animation-duration:1.2s;animation-timing-function:ease-out}

/* Heavy boom classes */
.logo-text.anim-boom .letter{animation-name:fxBoom;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.logo-text.anim-crush .letter{animation-name:fxCrush;animation-duration:.5s;animation-timing-function:ease-in-out}
.logo-text.anim-tornado .letter{animation-name:fxTornado;animation-duration:.7s;animation-timing-function:ease-out}
.logo-text.anim-rattle .letter{animation-name:fxRattle;animation-duration:.4s;animation-timing-function:linear}
.logo-text.anim-skullpunch .letter{animation-name:fxSkullPunch;animation-duration:.45s;animation-timing-function:ease-out}

/* Per-letter mix classes */
.logo-text .letter.fx-type{animation-name:fxType;animation-duration:.15s;animation-timing-function:steps(1, start)}
.logo-text .letter.fx-wave{animation-name:fxWave;animation-duration:.7s;animation-timing-function:ease-in-out}
.logo-text .letter.fx-pop{animation-name:fxPop;animation-duration:.5s;animation-timing-function:cubic-bezier(.175,.885,.32,1.275)}
.logo-text .letter.fx-color{animation-name:fxColor;animation-duration:1.2s;animation-timing-function:linear}
.logo-text .letter.fx-slam{animation-name:fxSlam;animation-duration:.4s;animation-timing-function:cubic-bezier(.22,.68,0,1.5)}
.logo-text .letter.fx-drip{animation-name:fxDrip;animation-duration:.65s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.logo-text .letter.fx-glitch{animation-name:fxGlitch;animation-duration:.25s;animation-timing-function:steps(6)}
.logo-text .letter.fx-jelly{animation-name:fxJelly;animation-duration:.6s;animation-timing-function:ease-out}
.logo-text .letter.fx-float{animation-name:fxFloat;animation-duration:.9s;animation-timing-function:ease-in-out}
.logo-text .letter.fx-skew{animation-name:fxSkew;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text .letter.fx-flicker{animation-name:fxFlicker;animation-duration:.8s;animation-timing-function:steps(10)}
.logo-text .letter.fx-smear{animation-name:fxSmear;animation-duration:.3s;animation-timing-function:ease-out}
.logo-text .letter.fx-softbounce{animation-name:fxSoftBounce;animation-duration:.8s;animation-timing-function:ease-out}
.logo-text .letter.fx-whisper{animation-name:fxWhisper;animation-duration:1s;animation-timing-function:ease-out}
.logo-text .letter.fx-slideup{animation-name:fxSlideUp;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text .letter.fx-slidedown{animation-name:fxSlideDown;animation-duration:.35s;animation-timing-function:ease-out}
.logo-text .letter.fx-rotatein{animation-name:fxRotateIn;animation-duration:.55s;animation-timing-function:ease-out}
.logo-text .letter.fx-pulse{animation-name:fxPulse;animation-duration:.7s;animation-timing-function:ease-out}
.logo-text .letter.fx-ghost{animation-name:fxGhost;animation-duration:1.2s;animation-timing-function:ease-out}
.logo-text .letter.fx-boom{animation-name:fxBoom;animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
.logo-text .letter.fx-crush{animation-name:fxCrush;animation-duration:.5s;animation-timing-function:ease-in-out}
.logo-text .letter.fx-tornado{animation-name:fxTornado;animation-duration:.7s;animation-timing-function:ease-out}
.logo-text .letter.fx-rattle{animation-name:fxRattle;animation-duration:.4s;animation-timing-function:linear}
.logo-text .letter.fx-skullpunch{animation-name:fxSkullPunch;animation-duration:.45s;animation-timing-function:ease-out}


/* Theme-aware utility classes for buttons/toolbars */
.bg-theme-subtle {
  background: var(--input-bg);
}
.bg-theme-hover:hover {
  background: rgba(255, 255, 255, 0.06);
}
.bg-theme-active {
  background: rgba(255, 255, 255, 0.1);
}
.border-theme {
  border-color: rgba(255, 255, 255, 0.06);
}

.editor-light .bg-theme-subtle {
  background: rgba(0, 0, 0, 0.04);
}
.editor-light .bg-theme-hover:hover {
  background: rgba(0, 0, 0, 0.08);
}
.editor-light .bg-theme-active {
  background: rgba(0, 0, 0, 0.12);
}
.editor-light .border-theme {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ============================================
   TEXT EFFECT ANIMATIONS
   ============================================ */

/* Letter base for animations */
.text-effect-letter {
  display: inline-block;
  transform-origin: 50% 80%;
}

/* In editor: disable animations, show final state (prevents restarts on re-render) */
#canvas .editor-block:not(.text-effect-preview) .text-effect-letter {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* Keyframe animations */
@keyframes fxType{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@keyframes fxWave{0%{opacity:0;transform:translateY(20px)}40%{opacity:1;transform:translateY(-12px)}70%{transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes fxPop{0%{opacity:0;transform:scale(0.01)}50%{opacity:1;transform:scale(1.4)}75%{transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes fxColor{0%{opacity:0;color:#ff3b7a}15%{opacity:1}25%{color:#ff3b7a}40%{color:#ffb703}55%{color:#4cc9f0}70%{color:#a855f7}85%{color:#22c55e}100%{opacity:1;color:inherit}}
@keyframes fxSlam{0%{opacity:0;transform:translateY(-60px) scaleY(2)}60%{opacity:1;transform:translateY(8px) scaleY(.7)}80%{transform:translateY(-3px) scaleY(1.1)}100%{opacity:1;transform:none}}
@keyframes fxDrip{0%{opacity:0;transform:translateY(-30px) scaleY(1.8) scaleX(.6)}50%{opacity:1;transform:translateY(10px) scaleY(.6) scaleX(1.2)}75%{transform:translateY(-4px) scaleY(1.15)}100%{opacity:1;transform:none}}
@keyframes fxGlitch{0%{opacity:0;transform:translateX(-8px);filter:hue-rotate(90deg);clip-path:inset(40% 0 40% 0)}20%{opacity:1;transform:translateX(6px);clip-path:inset(20% 0 60% 0)}40%{transform:translateX(-4px);filter:hue-rotate(180deg);clip-path:inset(60% 0 10% 0)}60%{transform:translateX(3px);clip-path:inset(10% 0 30% 0)}80%{transform:translateX(-1px);filter:hue-rotate(270deg);clip-path:inset(0)}100%{opacity:1;transform:none;filter:none;clip-path:none}}
@keyframes fxJelly{0%{opacity:0;transform:scaleX(.4) scaleY(1.5)}30%{opacity:1;transform:scaleX(1.4) scaleY(.6)}50%{transform:scaleX(.8) scaleY(1.3)}70%{transform:scaleX(1.15) scaleY(.85)}85%{transform:scaleX(.95) scaleY(1.05)}100%{opacity:1;transform:none}}
@keyframes fxFloat{0%{opacity:0;transform:translateY(30px) rotate(8deg)}50%{opacity:1;transform:translateY(-10px) rotate(-4deg)}100%{opacity:1;transform:none}}
@keyframes fxSkew{0%{opacity:0;transform:skewX(-30deg) skewY(5deg)}50%{opacity:1;transform:skewX(15deg) skewY(-2deg)}100%{opacity:1;transform:none}}
@keyframes fxFlicker{0%{opacity:0}10%{opacity:1}15%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}50%{opacity:.3}55%{opacity:1}70%{opacity:.6}75%{opacity:1}100%{opacity:1}}
@keyframes fxSmear{0%{opacity:0;transform:translateX(-40px) scaleX(2);filter:blur(8px)}60%{opacity:1;transform:translateX(5px) scaleX(.9);filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes fxSoftBounce{0%{opacity:0;transform:translateY(-40px)}25%{opacity:1;transform:translateY(0)}40%{transform:translateY(-20px)}55%{transform:translateY(0)}70%{transform:translateY(-8px)}85%{transform:translateY(0)}100%{opacity:1;transform:none}}
@keyframes fxWhisper{0%{opacity:0;transform:scale(.8);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
@keyframes fxSlideUp{0%{opacity:0;transform:translateY(50px);clip-path:inset(95% 0 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes fxSlideDown{0%{opacity:0;transform:translateY(-50px);clip-path:inset(0 0 95% 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes fxRotateIn{0%{opacity:0;transform:perspective(400px) rotateY(-70deg)}60%{opacity:1;transform:perspective(400px) rotateY(15deg)}80%{transform:perspective(400px) rotateY(-5deg)}100%{opacity:1;transform:none}}
@keyframes fxPulse{0%{opacity:0;transform:scale(0.01)}30%{opacity:1;transform:scale(1.3)}45%{transform:scale(.95)}60%{transform:scale(1.15)}75%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes fxGhost{0%{opacity:0;transform:translateY(15px) scale(1.1);filter:blur(10px)}50%{opacity:.5;filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
@keyframes fxBoom{0%{opacity:0;transform:scale(3) rotate(-45deg);filter:blur(15px) brightness(2)}30%{opacity:1;transform:scale(.7) rotate(20deg);filter:blur(0) brightness(1.3)}50%{transform:scale(1.3) rotate(-10deg)}70%{transform:scale(.9) rotate(5deg)}100%{opacity:1;transform:none;filter:none}}
@keyframes fxCrush{0%{opacity:0;transform:scaleY(2.5) scaleX(.3)}30%{opacity:1;transform:scaleY(.2) scaleX(1.8)}50%{transform:scaleY(1.4) scaleX(.7)}70%{transform:scaleY(.85) scaleX(1.15)}100%{opacity:1;transform:none}}
@keyframes fxTornado{0%{opacity:0;transform:rotate(-720deg) scale(0.01) translateY(-100px)}50%{opacity:1;transform:rotate(45deg) scale(1.2) translateY(10px)}75%{transform:rotate(-15deg) scale(.95)}100%{opacity:1;transform:none}}
@keyframes fxRattle{0%{opacity:0;transform:translateX(-20px)}20%{opacity:1;transform:translateX(15px) rotate(5deg)}35%{transform:translateX(-12px) rotate(-4deg)}50%{transform:translateX(10px) rotate(3deg)}65%{transform:translateX(-6px) rotate(-2deg)}80%{transform:translateX(3px) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes fxSkullPunch{0%{opacity:0;transform:translateX(-50px) scale(1.8);filter:blur(8px)}40%{opacity:1;transform:translateX(15px) scale(.85);filter:blur(0)}55%{transform:translateX(-8px) scale(1.15)}70%{transform:translateX(4px) scale(.97)}100%{opacity:1;transform:none}}

/* Effect classes */
.text-effect-letter.fx-type{animation:fxType .15s steps(1, start) both}
.text-effect-letter.fx-wave{animation:fxWave .5s ease-in-out both}
.text-effect-letter.fx-pop{animation:fxPop .4s cubic-bezier(.175,.885,.32,1.275) both}
.text-effect-letter.fx-color{animation:fxColor .9s linear both}
.text-effect-letter.fx-slam{animation:fxSlam .35s cubic-bezier(.22,.68,0,1.5) both}
.text-effect-letter.fx-drip{animation:fxDrip .5s cubic-bezier(.34,1.56,.64,1) both}
.text-effect-letter.fx-glitch{animation:fxGlitch .2s steps(6) both}
.text-effect-letter.fx-jelly{animation:fxJelly .45s ease-out both}
.text-effect-letter.fx-float{animation:fxFloat .6s ease-in-out both}
.text-effect-letter.fx-skew{animation:fxSkew .3s ease-out both}
.text-effect-letter.fx-flicker{animation:fxFlicker .6s steps(10) both}
.text-effect-letter.fx-smear{animation:fxSmear .25s ease-out both}
.text-effect-letter.fx-softbounce{animation:fxSoftBounce .6s ease-out both}
.text-effect-letter.fx-whisper{animation:fxWhisper .7s ease-out both}
.text-effect-letter.fx-slideup{animation:fxSlideUp .3s ease-out both}
.text-effect-letter.fx-slidedown{animation:fxSlideDown .3s ease-out both}
.text-effect-letter.fx-rotatein{animation:fxRotateIn .45s ease-out both}
.text-effect-letter.fx-pulse{animation:fxPulse .5s ease-out both}
.text-effect-letter.fx-ghost{animation:fxGhost .8s ease-out both}
.text-effect-letter.fx-boom{animation:fxBoom .5s cubic-bezier(.2,.8,.2,1) both}
.text-effect-letter.fx-crush{animation:fxCrush .4s ease-in-out both}
.text-effect-letter.fx-tornado{animation:fxTornado .55s ease-out both}
.text-effect-letter.fx-rattle{animation:fxRattle .35s linear both}
.text-effect-letter.fx-skullpunch{animation:fxSkullPunch .4s ease-out both}

/* ============================================
   REFINED MOTION POLISH
   Subtle & Apple-style micro-interactions
   ============================================ */

/* 1. ACCESSIBILITY: Reduced Motion Support
   ----------------------------------------
   Critical for users with vestibular disorders.
   Disables all non-essential animations. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential state changes instant but visible */
  .toast,
  .toast.hiding,
  .ai-modal,
  .ai-modal.closing,
  .code-modal-backdrop,
  .code-modal-content {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* 2. CODE MODAL: Subtle entrance/exit
   -----------------------------------
   Scale from 98% + fade for elegant appearance */
@keyframes codeModalIn {
  from {
    opacity: 0;
    transform: scale(0.98) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

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

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

.code-modal-backdrop {
  animation: backdropIn 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.code-modal-backdrop.closing {
  animation: backdropOut 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.code-modal-content {
  animation: codeModalIn 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 50ms;
}

.code-modal-backdrop.closing .code-modal-content {
  animation: codeModalOut 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 0ms;
}

/* 3. ICON BUTTONS: Refined hover lift
   -----------------------------------
   Subtle Y translate creates tactile feel */
.icon-btn {
  transition:
    color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.icon-btn:hover {
  /*transform: translateY(-1px);*/
}

.icon-btn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 80ms;
}

/* Breakpoint buttons - same subtle lift */
.breakpoint-btn {
  transition:
    color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.breakpoint-btn:hover {
  transform: translateY(-1px);
}

.breakpoint-btn:active {
  transform: translateY(0) scale(0.96);
  transition-duration: 80ms;
}

/* 4. FOCUS RINGS: Animated visibility
   -----------------------------------
   Smooth ring expansion for keyboard nav */
.icon-btn:focus-visible,
.breakpoint-btn:focus-visible,
.zoom-btn:focus-visible,
.zoom-level-btn:focus-visible,
.panel-btn:focus-visible,
.btn:focus-visible,
.mini-btn:focus-visible,
.sidebar-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: focusRingIn 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes focusRingIn {
  from {
    outline-offset: 4px;
    outline-color: transparent;
  }
  to {
    outline-offset: 2px;
    outline-color: var(--accent);
  }
}

/* 5. INPUT FOCUS: Subtle background change
   ----------------------------------
   Refined focus state - no borders */
input:focus-visible:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select:focus-visible,
textarea:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.editor-light input:focus-visible:not([type="color"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.editor-light select:focus-visible,
.editor-light textarea:focus-visible {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* 6. SECTION TOGGLE: Spring rotation
   ----------------------------------
   Natural spring physics on chevron */
.section-toggle {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* Expand chevron same spring */
.expand-chevron {
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 7. DROPDOWN ITEMS: Subtle hover slide
   -------------------------------------
   Micro horizontal shift on hover */
.dropdown-item {
  transition:
    background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    padding-left 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dropdown-item:hover {
  padding-left: calc(0.75rem + 2px);
}

/* 8. SIDEBAR TABS: Smooth active state
   ------------------------------------
   Gentle background fade */
.sidebar-tab {
  transition:
    color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.sidebar-tab:hover:not(.active) {
  transform: translateY(-1px);
}

.sidebar-tab:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* 9. PANEL BUTTONS: Use unified button system (no transforms) */

/* 10. PRESET CHIPS: Subtle lift
   -----------------------------
   Consistent hover behavior */
.preset-chip {
  transition:
    background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.preset-chip:hover {
  transform: translateY(-1px);
}

.preset-chip:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ============================================
   DASHBOARD & AUTH MOTION
   Subtle entrance animations
   ============================================ */

/* 11. PROJECT CARDS: Staggered entrance
   --------------------------------------
   Cards fade in with subtle rise */
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.project-card {
  animation: cardEnter 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Stagger via CSS custom property set by JS */
.project-card { animation-delay: calc(var(--card-index, 0) * 50ms); }

/* 12. USER MENU DROPDOWN: Smooth reveal
   -------------------------------------
   Scale + fade from top-right origin */
#user-menu-dropdown {
  transform-origin: top right;
  transition:
    opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 200ms;
}

/* Hidden state - uses Tailwind's opacity-0 class */
#user-menu-dropdown.opacity-0 {
  transform: scale(0.95) translateY(-4px);
}

/* Visible state - uses Tailwind's opacity-100 class */
#user-menu-dropdown.opacity-100 {
  transform: scale(1) translateY(0);
}

/* 13. AUTH PAGE: Form entrance
   ----------------------------
   Subtle fade + rise on load */
@keyframes authFormEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-container {
  animation: authFormEnter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 100ms;
}

/* Auth form inputs - animated focus */
.auth-input {
  transition:
    border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.auth-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Auth submit button */
.auth-submit {
  transition:
    opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* 14. AUTH ERROR: Animated reveal
   --------------------------------
   Slide down + fade for error messages */
@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 100px;
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    margin-top: 0;
  }
}

#auth-error:not([style*="display: none"]):not([style*="display:none"]) {
  animation: errorSlideIn 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* 15. EMPTY STATE: Fade in
   -------------------------
   Gentle appearance for empty project grid */
@keyframes emptyStateEnter {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.empty-state {
  animation: emptyStateEnter 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: 200ms;
}

/* 16. NEW PROJECT BUTTON: Pulse on first visit
   ---------------------------------------------
   Subtle attention grab */
@keyframes subtlePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
  }
}

.new-project-btn-pulse {
  animation: subtlePulse 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2;
}

/* 17. PAGE TRANSITION: Cross-fade
   --------------------------------
   Smooth transition between routes */
@keyframes pageEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

.page-enter {
  animation: pageEnter 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.page-exit {
  animation: pageExit 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ============================================
   Template Gallery Modal
   ============================================ */

.template-gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--grey-900);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  animation: templateGalleryFadeIn 0.2s ease-out;
}

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

.template-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.template-gallery-title {
  font-size: var(--text-xl);
  color: var(--text);
}

.template-gallery-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.template-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.template-back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.template-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  margin-right: 20px;
}

.template-device-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.template-device-btn:hover {
  color: rgba(255, 255, 255, 0.7);
}

.template-device-btn.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.template-gallery-close {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.template-gallery-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.template-gallery-content {
  flex: 1;
  overflow-y: auto;
  padding: 40px;
}

/* Gallery View - Grid of template cards */
.template-grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-9);
  max-width: 1400px;
  margin: 0 auto;
}

.template-card {
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  background: var(--grey-800);
  transition: all 0.2s ease;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.template-card-preview {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-card-preview .template-preview-svg {
  width: 100%;
  height: 100%;
}

.template-card-info {
  padding: var(--space-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-card-name {
  font-size: var(--text-md);
  color: var(--text);
}

.template-card-author {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
}

/* Detail View - Pages grid */
.template-detail-content {
  background: var(--grey-900);
}

.template-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: var(--space-10);
  max-width: 1600px;
  margin: 0 auto;
}

.template-page-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.template-page-preview {
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

.template-page-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.template-page-preview::after {
  content: 'Click to add';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--text);
  padding: var(--space-3) var(--space-7);
  border-radius: 20px;
  font-size: var(--text-base);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.template-page-preview:hover::after {
  opacity: 1;
}

.template-page-preview .template-preview-svg {
  width: 100%;
  height: 100%;
}

.template-page-label {
  font-size: var(--text-md-sm);
  color: rgba(255, 255, 255, 0.6);
}

/* Light mode */
.editor-light .template-gallery-modal {
  background: var(--grey-900);
}

.editor-light .template-gallery-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.editor-light .template-gallery-title {
  color: var(--text);
}

.editor-light .template-back-btn {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

.editor-light .template-back-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}

.editor-light .template-device-btn {
  color: rgba(0, 0, 0, 0.4);
}

.editor-light .template-device-btn:hover {
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .template-device-btn.active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text);
}

.editor-light .template-gallery-close {
  color: rgba(0, 0, 0, 0.5);
}

.editor-light .template-gallery-close:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

.editor-light .template-card {
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.editor-light .template-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.editor-light .template-card-name {
  color: var(--text);
}

.editor-light .template-card-author {
  color: rgba(0, 0, 0, 0.5);
}

.editor-light .template-page-preview {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.editor-light .template-page-preview:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.editor-light .template-page-label {
  color: rgba(0, 0, 0, 0.6);
}

/* Theme Editor Banner (shown when editing a theme) */
.theme-editor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-7);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(59, 130, 246, 0.12));
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.theme-badge {
  display: inline-block;
  padding: var(--space-0) var(--space-3);
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  color: white;
  font-size: var(--text-xs);
  text-transform: uppercase;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.editor-light .theme-editor-banner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(59, 130, 246, 0.08));
  border-bottom-color: rgba(139, 92, 246, 0.15);
}

/* Theme Stacked Card (shown when project is linked to a theme) */
.theme-update-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

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

.theme-updates-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.theme-update-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn-sm:hover {
  opacity: 0.9;
}

.sync-font-styles-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}

.sync-font-styles-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.theme-stacked-card {
  margin-top: var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  overflow: hidden;
}

.theme-stacked-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center top;
}

.theme-stacked-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}

.theme-stacked-name {
  font-size: var(--text-base);
  color: var(--text, #ffffff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-stacked-actions {
  display: flex;
  align-items: center;
  gap: var(--space-0);
  flex-shrink: 0;
}

.icon-btn-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted, rgba(255, 255, 255, 0.4));
  cursor: pointer;
  transition: all 0.15s;
}

.icon-btn-mini:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text, #ffffff);
}

.editor-light .theme-stacked-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

.editor-light .theme-stacked-thumb {
  background-color: rgba(0, 0, 0, 0.04);
}

.editor-light .icon-btn-mini:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Theme Add Button - uses unified button system */
.theme-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 32px;
  font-size: var(--text-base);
  letter-spacing: -0.01em;
  background: var(--input-bg);
  color: var(--text);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms ease;
}

.theme-add-btn:hover {
  background: var(--toggle-bg);
}

/* Legacy - can be removed */
.theme-link-select {
  flex: 1;
  padding: 5px var(--space-3);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #ffffff);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 150ms;
}

.theme-link-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.theme-link-select:focus {
  outline: none;
  border-color: rgba(59, 130, 246, 0.5);
}

.theme-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 150ms;
}

.theme-save-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text, #ffffff);
}

.editor-light .theme-link-panel {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.editor-light .theme-link-select {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
  color: var(--text, #1a1a1a);
}

.editor-light .theme-link-select:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.editor-light .theme-save-btn {
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-muted, rgba(0, 0, 0, 0.5));
}

.editor-light .theme-save-btn:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text, #1a1a1a);
}

/* Page Update Indicator */
.page-update-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.page-update-indicator:hover {
  background: rgba(34, 197, 94, 0.25);
  transform: scale(1.1);
}

.page-update-indicator svg {
  animation: spin-slow 3s linear infinite;
}

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

.page-update-indicator:hover svg {
  animation-duration: 0.8s;
}

.editor-light .page-update-indicator {
  background: rgba(34, 197, 94, 0.12);
}

.editor-light .page-update-indicator:hover {
  background: rgba(34, 197, 94, 0.2);
}

/* New Project Modal */
.new-project-modal-content {
  position: relative;
  background: var(--surface-dark, #1a1a1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  margin: var(--space-7);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.new-project-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-7) var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.new-project-modal-title {
  font-size: var(--text-md);
  color: var(--text, #ffffff);
  flex: 1;
  text-align: center;
}

.new-project-back-btn {
  padding: var(--space-2);
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  transition: all 0.15s;
}

.new-project-back-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #ffffff);
}

.new-project-close-btn {
  padding: var(--space-2);
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
  transition: all 0.15s;
}

.new-project-close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #ffffff);
}

.new-project-modal-body {
  padding: var(--space-9);
}

.new-project-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.new-project-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-9) var(--space-7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.new-project-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.new-project-option-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: var(--space-5);
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

.new-project-option:hover .new-project-option-icon {
  color: var(--text, #ffffff);
}

.new-project-option-title {
  font-size: var(--text-md-sm);
  color: var(--text, #ffffff);
  margin-bottom: var(--space-1);
}

.new-project-option-desc {
  font-size: var(--text-sm);
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

/* Themes Grid in New Project Modal */
.new-project-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
  max-height: 400px;
  overflow-y: auto;
}

.new-project-theme-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.new-project-theme-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.new-project-theme-preview {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.new-project-theme-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.new-project-theme-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
}

.new-project-theme-info {
  padding: var(--space-5);
}

.new-project-theme-name {
  font-size: var(--text-base);
  color: var(--text, #ffffff);
  margin-bottom: var(--space-1);
}

.new-project-theme-meta {
  font-size: var(--text-sm);
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.new-project-public-badge {
  padding: var(--space-0) var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--grey-100);
  font-size: var(--text-xs);
  border-radius: 4px;
}

.new-project-themes-empty {
  text-align: center;
  padding: 40px var(--space-8);
  color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

.new-project-themes-empty p {
  margin-bottom: var(--space-5);
}

.new-project-create-theme-btn {
  padding: var(--space-4) var(--space-8);
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: var(--text-md-sm);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: var(--space-3);
}

.new-project-create-theme-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Light mode for new project modal */
.editor-light .new-project-modal-content {
  background: rgba(255, 255, 255, 1.0);
  border-color: rgba(0, 0, 0, 0.1);
}

.editor-light .new-project-option {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.editor-light .new-project-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

.editor-light .new-project-theme-card {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

/* Theme Gallery Styles */
/* Theme Gallery - Visual Grid */
.themes-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-8);
  max-width: 1200px;
  margin: 0 auto;
}

.theme-gallery-card {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.theme-gallery-card:hover {
  transform: translateY(-4px);
}

.theme-gallery-card:hover .theme-gallery-thumb {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.theme-gallery-card.active .theme-gallery-thumb {
  box-shadow: 0 0 0 2px #3B82F6;
}

.theme-gallery-thumb {
  aspect-ratio: 16 / 10;
  background: var(--grey-900);
  background-size: cover;
  background-position: center top;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.theme-gallery-pages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-0);
  width: 100%;
  height: 100%;
}

.theme-gallery-page {
  overflow: hidden;
}

.theme-gallery-page .template-preview-svg {
  width: 100%;
  height: 100%;
}

.theme-gallery-active {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: var(--text-xs);
  color: white;
  background: #3B82F6;
  padding: 3px var(--space-3);
  border-radius: 4px;
}

.theme-gallery-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px 0;
}

.theme-gallery-name {
  font-size: var(--text-md-sm);
  color: var(--text);
}

.theme-gallery-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Theme Detail View */
.theme-detail-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-9) 40px;
}

.theme-detail-header .template-gallery-title {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.theme-detail-header .theme-back-btn,
.theme-detail-header .template-gallery-close {
  color: rgba(255, 255, 255, 0.7);
}

.theme-detail-header .theme-back-btn:hover,
.theme-detail-header .template-gallery-close:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.15);
}

.theme-back-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  margin-right: 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.theme-back-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.theme-detail-top {
  margin-bottom: var(--space-9);
}

.theme-apply-btn {
  font-size: var(--text-md-sm);
  padding: var(--space-4) var(--space-9);
  border-radius: 6px;
  background: white;
  color: #111;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.theme-apply-btn:hover {
  opacity: 0.9;
}

.theme-active-badge {
  font-size: var(--text-base);
  color: var(--text-muted);
  padding: var(--space-4) 0;
}

.theme-detail-section {
  margin-top: var(--space-3);
}

.theme-detail-section-title {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-7);
}

.theme-detail-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-7);
}

.theme-detail-page {
  cursor: pointer;
}

.theme-detail-page-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.theme-detail-page-thumb .template-preview-svg {
  width: 100%;
  height: 100%;
}

.theme-detail-page-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.theme-detail-page-overlay span {
  font-size: var(--text-base);
  color: white;
  padding: var(--space-2) var(--space-5);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.theme-detail-page:hover .theme-detail-page-thumb {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.theme-detail-page:hover .theme-detail-page-overlay {
  opacity: 1;
}

.theme-detail-page-name {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: var(--space-3);
}

.theme-detail-empty {
  text-align: center;
  padding: var(--space-12) var(--space-9);
  color: var(--text-muted);
  font-size: var(--text-md-sm);
}

/* Legacy theme card styles (keep for backwards compatibility) */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-9);
  max-width: 1400px;
  margin: 0 auto;
}

.theme-card {
  background: var(--grey-800);
  border-radius: 12px;
  padding: var(--space-8);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.theme-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.theme-card.active {
  border-color: #3B82F6;
  background: rgba(59, 130, 246, 0.1);
}

.theme-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.theme-card-name {
  font-size: var(--text-md-lg);
  color: var(--text);
}

.theme-card-active-badge {
  font-size: var(--text-xs);
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.2);
  padding: var(--space-0) var(--space-3);
  border-radius: 10px;
}

.theme-card-meta {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-5);
}

.theme-card-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.theme-action-btn {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-4);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.theme-action-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.theme-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #EF4444;
}

.theme-pages-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.theme-page-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-page-thumb .template-preview-svg {
  width: 100%;
  height: 100%;
}

/* Theme Detail View */
.theme-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-detail-meta {
  font-size: var(--text-md-sm);
  color: rgba(255, 255, 255, 0.5);
}

.theme-detail-actions {
  display: flex;
  gap: var(--space-5);
  align-items: center;
}

.theme-apply-btn {
  font-size: var(--text-md-sm);
  padding: var(--space-3) var(--space-8);
  border-radius: 6px;
  background: #3B82F6;
  color: var(--text);
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.theme-apply-btn:hover {
  background: #2563EB;
}

.theme-active-label {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.5);
}

/* Light mode theme styles */
.editor-light .themes-grid .theme-card {
  background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.editor-light .themes-grid .theme-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.editor-light .theme-card-name {
  color: var(--text);
}

.editor-light .theme-card-meta {
  color: rgba(0, 0, 0, 0.5);
}

.editor-light .theme-action-btn {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.7);
}

.editor-light .theme-action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
}

.editor-light .theme-detail-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.editor-light .theme-detail-meta {
  color: rgba(0, 0, 0, 0.5);
}

/* Add Page Menu */
.add-page-menu {
  background: var(--grey-900);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: var(--space-2) 0;
  min-width: 200px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.add-page-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-base);
  transition: background 0.1s;
}

.add-page-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.add-page-menu-item svg {
  opacity: 0.6;
}

.add-page-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: var(--space-2) var(--space-3);
}

.add-page-menu-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.4);
  padding: 8px 12px 4px;
}

.add-page-menu-thumb {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.add-page-menu-thumb .template-preview-svg {
  width: 100%;
  height: 100%;
}

/* Light mode */
.editor-light .add-page-menu {
  /*background: var(--accent);*/
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.editor-light .add-page-menu-item {
  color: rgba(0, 0, 0, 0.9);
}

.editor-light .add-page-menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.editor-light .add-page-menu-divider {
  background: rgba(0, 0, 0, 0.08);
}

.editor-light .add-page-menu-label {
  color: rgba(0, 0, 0, 0.5);
}
.editor-light .add-page-menu-thumb {
  border-color: rgba(0, 0, 0, 0.1);
}
/* Global font styles */