/* ============================================================
   Image Prompt AI — LUMEN CRYSTAL v10
   Ultra-light crystal UI · sky / ice / emerald · glass panels
   Authority skin — loads LAST. Full visual redesign.
   ============================================================ */

:root {
  /* Core crystal palette */
  --lc-sky: #3B82F6;
  --lc-sky-deep: #2563EB;
  --lc-sky-soft: rgba(59, 130, 246, 0.12);
  --lc-cyan: #06B6D4;
  --lc-cyan-deep: #0891B2;
  --lc-cyan-soft: rgba(6, 182, 212, 0.12);
  --lc-indigo: #6366F1;
  --lc-indigo-deep: #4F46E5;
  --lc-indigo-soft: rgba(99, 102, 241, 0.12);
  --lc-emerald: #10B981;
  --lc-emerald-deep: #059669;
  --lc-emerald-soft: rgba(16, 185, 129, 0.12);
  --lc-white: #FFFFFF;
  --lc-ice: #F0F7FF;
  --lc-mist: #F5F8FC;
  --lc-frost: #E8F0FE;

  /* Surfaces */
  --lc-bg: #F4F8FD;
  --lc-bg-soft: #EAF1FB;
  --lc-elevated: rgba(255, 255, 255, 0.82);
  --lc-elevated-strong: rgba(255, 255, 255, 0.94);
  --lc-line: rgba(148, 180, 220, 0.28);
  --lc-line-strong: rgba(100, 140, 200, 0.38);
  --lc-line-cyan: rgba(6, 182, 212, 0.32);

  /* Text */
  --lc-ink: #0F172A;
  --lc-text: #334155;
  --lc-soft: #64748B;
  --lc-muted: #94A3B8;
  --lc-on-accent: #FFFFFF;

  /* Brand */
  --lc-primary: #3B82F6;
  --lc-primary-deep: #2563EB;
  --lc-secondary: #6366F1;
  --lc-secondary-deep: #4F46E5;
  --lc-accent: #06B6D4;
  --lc-accent-deep: #0891B2;
  --lc-warm: #F59E0B;
  --lc-danger: #EF4444;
  --lc-success: #10B981;

  /* Gradients */
  --lc-grad: linear-gradient(135deg, #3B82F6 0%, #6366F1 45%, #06B6D4 100%);
  --lc-grad-btn: linear-gradient(135deg, #3B82F6 0%, #2563EB 40%, #0891B2 100%);
  --lc-grad-soft: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.12));
  --lc-grad-text: linear-gradient(120deg, #1E40AF 0%, #3B82F6 35%, #6366F1 65%, #06B6D4 100%);
  --lc-mesh:
    radial-gradient(ellipse 90% 60% at 8% -10%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 96% 2%, rgba(99, 102, 241, 0.14), transparent 50%),
    radial-gradient(ellipse 55% 40% at 48% 108%, rgba(6, 182, 212, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 35% at 72% 42%, rgba(16, 185, 129, 0.08), transparent 60%),
    radial-gradient(ellipse 30% 25% at 18% 62%, rgba(255, 255, 255, 0.9), transparent 50%);

  /* Crystal glass */
  --lc-glass: rgba(255, 255, 255, 0.62);
  --lc-glass-strong: rgba(255, 255, 255, 0.88);
  --lc-glass-soft: rgba(240, 247, 255, 0.48);
  --lc-blur: 24px;
  --lc-blur-sm: 14px;
  --lc-blur-lg: 36px;
  --lc-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(148, 180, 220, 0.1);
  --lc-glass-shadow:
    0 4px 24px rgba(59, 100, 180, 0.08),
    0 1px 3px rgba(30, 60, 120, 0.05),
    var(--lc-inner-glow);
  --lc-glass-shadow-lg:
    0 20px 56px rgba(59, 100, 180, 0.12),
    0 8px 20px rgba(99, 102, 241, 0.08),
    var(--lc-inner-glow);
  --lc-glow-hover:
    0 14px 40px rgba(59, 130, 246, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 28px rgba(6, 182, 212, 0.15);

  /* Elevation */
  --lc-shadow-xs: 0 1px 3px rgba(30, 60, 120, 0.06);
  --lc-shadow-sm: 0 4px 16px rgba(59, 100, 180, 0.08);
  --lc-shadow: 0 12px 36px rgba(40, 80, 160, 0.1);
  --lc-shadow-lg: 0 24px 60px rgba(40, 80, 160, 0.14);

  /* Radius — sharper modern */
  --lc-r-sm: 12px;
  --lc-r-md: 16px;
  --lc-r-lg: 20px;
  --lc-r-xl: 28px;
  --lc-r-2xl: 36px;
  --lc-pill: 999px;

  /* Type */
  --lc-font: 'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --lc-font-display: 'Outfit', 'Sora', system-ui, sans-serif;

  /* Motion */
  --lc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --lc-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.2);
  --lc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lc-dur: 0.38s;
  --lc-dur-fast: 0.2s;
  --lc-dur-slow: 0.65s;

  /* ---- Legacy token remaps (full cascade override) ---- */
  --nv-bg: var(--lc-bg);
  --nv-bg-soft: var(--lc-bg-soft);
  --nv-white: var(--lc-white);
  --nv-elevated: var(--lc-elevated-strong);
  --nv-muted: var(--lc-mist);
  --nv-line: var(--lc-line);
  --nv-line-strong: var(--lc-line-strong);
  --nv-ink: var(--lc-ink);
  --nv-text: var(--lc-text);
  --nv-soft: var(--lc-soft);
  --nv-muted-text: var(--lc-muted);
  --nv-primary: var(--lc-primary);
  --nv-primary-dark: var(--lc-primary-deep);
  --nv-primary-soft: var(--lc-sky-soft);
  --nv-accent: var(--lc-secondary);
  --nv-accent-soft: var(--lc-indigo-soft);
  --nv-pink: var(--lc-cyan);
  --nv-success: var(--lc-success);
  --nv-warn: var(--lc-warm);
  --nv-grad: var(--lc-grad);
  --nv-grad-btn: var(--lc-grad-btn);
  --nv-grad-soft: var(--lc-grad-soft);
  --nv-mesh: var(--lc-mesh);
  --nv-shadow-xs: var(--lc-shadow-xs);
  --nv-shadow-sm: var(--lc-shadow-sm);
  --nv-shadow: var(--lc-shadow);
  --nv-shadow-lg: var(--lc-shadow-lg);
  --nv-glow: 0 10px 28px rgba(59, 130, 246, 0.28);
  --nv-r-sm: var(--lc-r-sm);
  --nv-r-md: var(--lc-r-md);
  --nv-r-lg: var(--lc-r-lg);
  --nv-r-xl: var(--lc-r-xl);
  --nv-r-2xl: var(--lc-r-2xl);
  --nv-pill: var(--lc-pill);
  --nv-font: var(--lc-font);

  --neu-bg: var(--lc-bg);
  --neu-bg-soft: var(--lc-bg-soft);
  --neu-surface: var(--lc-white);
  --neu-elevated: var(--lc-elevated-strong);
  --neu-line: var(--lc-line);
  --neu-ink: var(--lc-ink);
  --neu-text: var(--lc-text);
  --neu-soft: var(--lc-soft);
  --neu-muted: var(--lc-muted);
  --neu-primary: var(--lc-primary);
  --neu-primary-deep: var(--lc-primary-deep);
  --neu-secondary: var(--lc-secondary);
  --neu-accent: var(--lc-accent);
  --neu-grad: var(--lc-grad);
  --neu-grad-btn: var(--lc-grad-btn);
  --neu-shadow: var(--lc-shadow);
  --neu-shadow-sm: var(--lc-shadow-sm);
  --neu-shadow-lg: var(--lc-shadow-lg);
  --neu-r-md: var(--lc-r-md);
  --neu-r-lg: var(--lc-r-lg);
  --neu-r-xl: var(--lc-r-xl);
  --neu-font: var(--lc-font);

  --fp-blush: #BFDBFE;
  --fp-blush-deep: #93C5FD;
  --fp-blush-soft: var(--lc-sky-soft);
  --fp-lavender: #C7D2FE;
  --fp-lavender-deep: #A5B4FC;
  --fp-lavender-soft: var(--lc-indigo-soft);
  --fp-mint: #A7F3D0;
  --fp-mint-deep: #6EE7B7;
  --fp-mint-soft: var(--lc-emerald-soft);
  --fp-peach: #BAE6FD;
  --fp-peach-deep: #7DD3FC;
  --fp-peach-soft: var(--lc-cyan-soft);
  --fp-white: var(--lc-white);
  --fp-cream: var(--lc-ice);
  --fp-mist: var(--lc-mist);
  --fp-bg: var(--lc-bg);
  --fp-bg-soft: var(--lc-bg-soft);
  --fp-elevated: var(--lc-elevated);
  --fp-elevated-strong: var(--lc-elevated-strong);
  --fp-line: var(--lc-line);
  --fp-line-strong: var(--lc-line-strong);
  --fp-line-mint: var(--lc-line-cyan);
  --fp-ink: var(--lc-ink);
  --fp-text: var(--lc-text);
  --fp-soft: var(--lc-soft);
  --fp-muted: var(--lc-muted);
  --fp-on-accent: var(--lc-on-accent);
  --fp-primary: var(--lc-primary);
  --fp-primary-deep: var(--lc-primary-deep);
  --fp-secondary: var(--lc-secondary);
  --fp-secondary-deep: var(--lc-secondary-deep);
  --fp-accent: var(--lc-accent);
  --fp-accent-deep: var(--lc-accent-deep);
  --fp-warm: var(--lc-warm);
  --fp-danger: var(--lc-danger);
  --fp-success: var(--lc-success);
  --fp-grad: var(--lc-grad);
  --fp-grad-btn: var(--lc-grad-btn);
  --fp-grad-soft: var(--lc-grad-soft);
  --fp-grad-text: var(--lc-grad-text);
  --fp-mesh: var(--lc-mesh);
  --fp-glass: var(--lc-glass);
  --fp-glass-strong: var(--lc-glass-strong);
  --fp-glass-soft: var(--lc-glass-soft);
  --fp-blur: var(--lc-blur);
  --fp-blur-sm: var(--lc-blur-sm);
  --fp-blur-lg: var(--lc-blur-lg);
  --fp-inner-glow: var(--lc-inner-glow);
  --fp-glass-shadow: var(--lc-glass-shadow);
  --fp-glass-shadow-lg: var(--lc-glass-shadow-lg);
  --fp-glow-hover: var(--lc-glow-hover);
  --fp-shadow-xs: var(--lc-shadow-xs);
  --fp-shadow-sm: var(--lc-shadow-sm);
  --fp-shadow: var(--lc-shadow);
  --fp-shadow-lg: var(--lc-shadow-lg);
  --fp-r-sm: var(--lc-r-sm);
  --fp-r-md: var(--lc-r-md);
  --fp-r-lg: var(--lc-r-lg);
  --fp-r-xl: var(--lc-r-xl);
  --fp-r-2xl: var(--lc-r-2xl);
  --fp-pill: var(--lc-pill);
  --fp-font: var(--lc-font);
  --fp-font-display: var(--lc-font-display);
  --fp-ease: var(--lc-ease);
  --fp-ease-soft: var(--lc-ease-soft);
  --fp-ease-spring: var(--lc-ease-spring);
  --fp-dur: var(--lc-dur);
  --fp-dur-fast: var(--lc-dur-fast);
  --fp-dur-slow: var(--lc-dur-slow);

  --primary: var(--lc-primary);
  --primary-dark: var(--lc-primary-deep);
  --accent: var(--lc-accent);
  --bg: var(--lc-bg);
  --text: var(--lc-text);
  --ink: var(--lc-ink);
  --soft: var(--lc-soft);
  --muted: var(--lc-muted);
  --line: var(--lc-line);
  --surface: var(--lc-white);
  --radius: var(--lc-r-lg);
  --shadow: var(--lc-shadow);
  --font: var(--lc-font);
}

/* ============================================================
   BASE — scroll-safe (never trap the page)
   ============================================================ */
html.ipa-lumen-html,
html {
  color-scheme: light only !important;
  scroll-behavior: smooth;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  position: static !important;
}

body.ipa-lumen,
body.ipa-premium-light,
body {
  background: var(--lc-bg) !important;
  background-image: var(--lc-mesh) !important;
  /* fixed attachment + overflow-x hidden can trap scroll in some browsers */
  background-attachment: scroll !important;
  color: var(--lc-text) !important;
  font-family: var(--lc-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  position: relative !important;
  touch-action: pan-y !important;
  /* never leave a stuck inline lock from modals */
}

/* Only lock scroll when a modal intentionally opens (lock html + body) */
html.ipa-modal-open,
body.ipa-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.ipa-lumen::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  contain: strict !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.05), transparent 45%) !important;
  animation: none !important; /* scale animation inflated perceived blank space */
}

/* ============================================================
   ATMOSPHERE LAYERS — fixed + contained (no document growth)
   ============================================================ */
.lc-atmosphere,
#lcAtmosphere,
.fp-atmosphere,
#fpAtmosphere {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
  contain: strict !important;
  transform: none !important;
  inset: 0 !important;
}

/* Hide legacy atmosphere so it never stacks / leaks height */
.fp-atmosphere,
#fpAtmosphere,
.neu-atmosphere,
#neuAtmosphere {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.lc-orb {
  position: absolute !important;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: lcOrbFloat 18s ease-in-out infinite;
  will-change: transform;
  pointer-events: none !important;
  max-width: 50vw;
  max-height: 50vh;
}

.lc-orb--1 {
  width: 420px; height: 420px;
  top: -8%; left: -6%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.35), transparent 70%);
  animation-duration: 22s;
}
.lc-orb--2 {
  width: 360px; height: 360px;
  top: 15%; right: -8%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 70%);
  animation-duration: 26s;
  animation-delay: -4s;
}
.lc-orb--3 {
  width: 300px; height: 300px;
  bottom: 10%; left: 20%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.22), transparent 70%);
  animation-duration: 20s;
  animation-delay: -8s;
}
.lc-orb--4 {
  width: 240px; height: 240px;
  bottom: -5%; right: 18%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 70%);
  animation-duration: 24s;
  animation-delay: -12s;
}

@keyframes lcOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.06); }
  66% { transform: translate(-16px, 14px) scale(0.96); }
}

.lc-grid-bg {
  position: absolute !important;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent);
  opacity: 0.6;
  pointer-events: none !important;
}

.lc-particles {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.lc-particle {
  position: absolute !important;
  border-radius: 50%;
  background: var(--lc-sky);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
  animation: lcParticleRise linear infinite;
  will-change: transform, opacity;
  pointer-events: none !important;
  margin: 0 !important;
}
.lc-particle--cyan { background: var(--lc-cyan); box-shadow: 0 0 8px rgba(6, 182, 212, 0.4); }
.lc-particle--indigo { background: var(--lc-indigo); box-shadow: 0 0 8px rgba(99, 102, 241, 0.4); }
.lc-particle--emerald { background: var(--lc-emerald); box-shadow: 0 0 8px rgba(16, 185, 129, 0.35); }

@keyframes lcParticleRise {
  0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.35; }
  100% { transform: translateY(-100vh) translateX(40px) scale(1); opacity: 0; }
}

.lc-light-rays {
  position: absolute !important;
  inset: 0 !important;
  background:
    conic-gradient(from 210deg at 30% 20%, transparent 0deg, rgba(59, 130, 246, 0.04) 20deg, transparent 40deg),
    conic-gradient(from 40deg at 75% 15%, transparent 0deg, rgba(6, 182, 212, 0.03) 25deg, transparent 50deg);
  animation: none; /* spinning full-bleed layer can confuse layout engines */
  pointer-events: none !important;
}

@keyframes lcRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cursor glow */
.lc-cursor-glow {
  position: fixed !important;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 1;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12), transparent 70%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
  mix-blend-mode: multiply;
  margin: 0 !important;
  contain: layout style !important;
}
.lc-cursor-glow.is-active { opacity: 1; }

/* Scroll progress */
.lc-scroll-progress,
.lc-read-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 3px !important;
  width: 0%;
  max-width: 100vw !important;
  z-index: 9999;
  background: var(--lc-grad);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none !important;
  margin: 0 !important;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.hero-title, .read-title, .gallery-hero-title, .related-title,
.neu-search-header h1 {
  font-family: var(--lc-font-display) !important;
  color: var(--lc-ink) !important;
  letter-spacing: -0.025em;
  font-weight: 700;
}

.neu-accent-text,
.hero-title .neu-accent-text,
.lc-accent-text {
  background: var(--lc-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ============================================================
   HEADER — Desktop crystal glass
   ============================================================ */
.advanced-header.site-header,
.advanced-header {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(var(--lc-blur)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--lc-blur)) saturate(1.4) !important;
  border-bottom: 1px solid var(--lc-line) !important;
  box-shadow: 0 4px 24px rgba(59, 100, 180, 0.06) !important;
  transition: background var(--lc-dur) var(--lc-ease), box-shadow var(--lc-dur) var(--lc-ease), transform var(--lc-dur) var(--lc-ease) !important;
}

.advanced-header.is-scrolled,
.advanced-header.ah-scrolled,
body.scrolled .advanced-header {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 32px rgba(59, 100, 180, 0.1) !important;
}

.ah-container {
  max-width: 1280px;
  margin: 0 auto;
}

.ah-nav a {
  color: var(--lc-soft) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  border-radius: var(--lc-pill) !important;
  padding: 8px 14px !important;
  transition: color var(--lc-dur-fast) var(--lc-ease), background var(--lc-dur-fast) var(--lc-ease), transform var(--lc-dur-fast) var(--lc-ease) !important;
  position: relative;
}

.ah-nav a:hover,
.ah-nav a.active {
  color: var(--lc-primary-deep) !important;
  background: var(--lc-sky-soft) !important;
  transform: translateY(-1px);
}

.ah-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: var(--lc-pill);
  background: var(--lc-grad);
}

.ah-nav a i {
  color: var(--lc-primary) !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease-bounce);
}
.ah-nav a:hover i { transform: scale(1.15); }

.ah-search-pill {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  transition: border-color var(--lc-dur-fast), box-shadow var(--lc-dur-fast), background var(--lc-dur-fast) !important;
}
.ah-search-pill:focus-within {
  border-color: var(--lc-primary) !important;
  background: var(--lc-white) !important;
  box-shadow: 0 0 0 3px var(--lc-sky-soft), var(--lc-shadow-sm) !important;
}
.ah-search-pill i { color: var(--lc-primary) !important; }
.ah-search-pill input {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font) !important;
}

.ah-icon-btn {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 14px !important;
  color: var(--lc-primary) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.ah-icon-btn:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--lc-glow);
}
.ah-icon-btn i { transition: transform var(--lc-dur-fast) var(--lc-ease-bounce); }
.ah-icon-btn:hover i { transform: scale(1.1); color: #fff !important; }

.ah-badge {
  background: var(--lc-grad) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
  animation: lcBadgePulse 2s ease-in-out infinite;
}
@keyframes lcBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ah-gallery-btn,
.ah-gallery-btn.neu-cta--primary {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3) !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease), box-shadow var(--lc-dur-fast) !important;
}
.ah-gallery-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.4) !important;
}

/* Mobile header */
.mobile-header-modern,
.mobile-header {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--lc-line) !important;
  box-shadow: 0 4px 20px rgba(59, 100, 180, 0.06) !important;
}
.header-icon-btn {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-primary) !important;
  border-radius: 12px !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.header-icon-btn:hover,
.header-icon-btn:active {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ============================================================
   HERO
   ============================================================ */
.hero,
.ipa-hero,
.nova-hero,
.neu-hero {
  position: relative;
  z-index: 1;
}

.nova-hero-panel {
  background: var(--lc-glass) !important;
  backdrop-filter: blur(var(--lc-blur-sm)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--lc-blur-sm)) saturate(1.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: var(--lc-r-2xl) !important;
  box-shadow: var(--lc-glass-shadow-lg) !important;
  position: relative;
  overflow: hidden;
}

.nova-hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lc-grad-soft);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.nova-hero-panel > * { position: relative; z-index: 1; }

.hero-title {
  font-size: clamp(1.85rem, 4.5vw, 3.1rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

.hero-subtitle {
  color: var(--lc-soft) !important;
  font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Premium pill / stats */
.premium-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  padding: 8px 16px 8px 8px !important;
  box-shadow: var(--lc-shadow-sm) !important;
  text-decoration: none !important;
  color: var(--lc-ink) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
  animation: lcPillFloat 4s ease-in-out infinite;
}
.premium-pill:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--lc-glow-hover) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  animation: none;
}
@keyframes lcPillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.pp-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--lc-grad) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
}
.pp-icon i { color: #fff !important; font-size: 0.95rem !important; }
.pp-count {
  font-weight: 800 !important;
  background: var(--lc-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--lc-font-display) !important;
}
.pp-arrow {
  color: var(--lc-primary) !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease);
}
.premium-pill:hover .pp-arrow { transform: translateX(4px); }

/* Hero CTAs */
.btn-hero-primary,
.neu-cta--primary,
.btn-hero-primary.neu-cta {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.32) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::after,
.neu-cta--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--lc-ease);
}
.btn-hero-primary:hover::after,
.neu-cta--primary:hover::after { transform: translateX(100%); }
.btn-hero-primary:hover,
.neu-cta--primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 36px rgba(59, 130, 246, 0.4) !important;
}

.btn-hero-secondary,
.neu-cta--secondary {
  background: var(--lc-white) !important;
  color: var(--lc-primary-deep) !important;
  border: 1.5px solid var(--lc-line-strong) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  box-shadow: var(--lc-shadow-xs) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.btn-hero-secondary:hover,
.neu-cta--secondary:hover {
  background: var(--lc-ice) !important;
  border-color: var(--lc-primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--lc-shadow-sm) !important;
}

/* Search */
.search-wrapper form,
#searchForm {
  background: var(--lc-white) !important;
  border: 1.5px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  transition: border-color var(--lc-dur-fast), box-shadow var(--lc-dur-fast) !important;
  overflow: hidden;
}
.search-wrapper form:focus-within,
#searchForm:focus-within {
  border-color: var(--lc-primary) !important;
  box-shadow: 0 0 0 4px var(--lc-sky-soft), var(--lc-shadow) !important;
}
.search-input {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font) !important;
  background: transparent !important;
}
.search-btn {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease-bounce), box-shadow var(--lc-dur-fast) !important;
}
.search-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Utility nav tags */
.neu-utility-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.neu-utility-nav a {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: var(--lc-pill);
  background: var(--lc-ice);
  border: 1px solid var(--lc-line);
  color: var(--lc-soft) !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--lc-dur-fast) var(--lc-ease);
}
.neu-utility-nav a:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}

/* ============================================================
   CATEGORY SLIDER
   ============================================================ */
.category-slider-section {
  position: relative;
  z-index: 2;
}
.category-slider-item {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  color: var(--lc-text) !important;
  font-weight: 600 !important;
  box-shadow: var(--lc-shadow-xs) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.category-slider-item:hover {
  border-color: var(--lc-primary) !important;
  color: var(--lc-primary-deep) !important;
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-sm) !important;
}
.category-slider-item.active {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3) !important;
}
.category-slider-item.active i,
.category-slider-item.active .count-badge {
  color: #fff !important;
}
.category-slider-item i { color: var(--lc-primary) !important; }
.category-slider-item.sort-btn i { color: var(--lc-indigo) !important; }
.count-badge {
  background: var(--lc-sky-soft) !important;
  color: var(--lc-primary-deep) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
}
.category-slider-item.active .count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
.slider-nav-btn {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-primary) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  border-radius: 50% !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.slider-nav-btn:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: scale(1.08);
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.ipa-toolbar {
  background: var(--lc-glass) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-lg) !important;
  box-shadow: var(--lc-shadow-xs) !important;
  padding: 10px 16px !important;
}
.ipa-toolbar-label { color: var(--lc-soft) !important; font-weight: 600 !important; }
.ipa-kbd {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-soft) !important;
  border-radius: 6px !important;
  font-family: var(--lc-font) !important;
  box-shadow: 0 1px 0 var(--lc-line-strong) !important;
}
.ipa-layout-btn,
.layout-toggle button,
[data-layout] {
  border-radius: 10px !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.ipa-layout-btn.active,
.layout-toggle button.active,
[data-layout].active {
  background: var(--lc-grad) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* ============================================================
   PROMPT CARDS
   ============================================================ */
.prompt-card {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-xl) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  overflow: hidden !important;
  transition: transform var(--lc-dur) var(--lc-ease), box-shadow var(--lc-dur) var(--lc-ease), border-color var(--lc-dur) var(--lc-ease) !important;
  position: relative;
}
.prompt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--lc-dur);
  pointer-events: none;
  z-index: 2;
}
.prompt-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: var(--lc-glow-hover) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
.prompt-card:hover::before {
  opacity: 1;
  background: var(--lc-grad);
}

.card-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--lc-r-lg) var(--lc-r-lg) 0 0;
}
.card-image-wrapper img {
  transition: transform 0.7s var(--lc-ease) !important;
  will-change: transform;
}
.prompt-card:hover .card-image-wrapper img {
  transform: scale(1.08) !important;
}

.card-image-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55), transparent 70%) !important;
  opacity: 0;
  transition: opacity var(--lc-dur) var(--lc-ease) !important;
}
.prompt-card:hover .card-image-overlay { opacity: 1 !important; }

.card-overlay-btn {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--lc-primary-deep) !important;
  border: none !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px);
  box-shadow: var(--lc-shadow-sm) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease-bounce) !important;
}
.card-overlay-btn:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  transform: scale(1.12) !important;
}

.model-tag {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: var(--lc-ink) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 600 !important;
  box-shadow: var(--lc-shadow-xs) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.model-tag i { color: var(--lc-primary) !important; }
.model-tag:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.model-tag:hover i { color: #fff !important; }

.card-title {
  font-family: var(--lc-font-display) !important;
  font-weight: 700 !important;
  color: var(--lc-ink) !important;
  transition: color var(--lc-dur-fast) !important;
}
.card-title a:hover { color: var(--lc-primary) !important; }

.card-meta,
.card-views,
.card-time {
  color: var(--lc-soft) !important;
  font-size: 0.8rem !important;
}
.card-views i { color: var(--lc-cyan) !important; }

.prompt-text {
  color: var(--lc-soft) !important;
  line-height: 1.55 !important;
}

.action-btn-sm {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-text) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.action-btn-sm:hover {
  background: var(--lc-sky-soft) !important;
  border-color: rgba(59, 130, 246, 0.35) !important;
  color: var(--lc-primary-deep) !important;
  transform: translateY(-2px);
}
.action-btn-sm i { color: var(--lc-primary) !important; }
.action-btn-sm.btn-like.is-liked,
.action-btn-sm.btn-like.liked {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: var(--lc-danger) !important;
}
.action-btn-sm.btn-like.is-liked i,
.action-btn-sm.btn-like.liked i { color: var(--lc-danger) !important; }

.action-btn-full,
.action-btn-full.neu-cta--primary {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-r-md) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
  position: relative;
  overflow: hidden;
}
.action-btn-full:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.38) !important;
}
.action-btn-full.copied-flash {
  background: linear-gradient(135deg, #10B981, #059669) !important;
}

/* Card stagger entrance */
.ipa-grid-item,
.prompt-card[data-aos] {
  --lc-stagger: 0;
}

/* ============================================================
   FEATURE STRIP
   ============================================================ */
.neu-feature-strip,
.apex-feature-strip,
.ipa-feature-strip-bottom {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 14px !important;
  margin: 40px 0 20px !important;
}
.neu-feature-chip,
.apex-feature-chip {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-lg) !important;
  padding: 18px !important;
  box-shadow: var(--lc-shadow-xs) !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.neu-feature-chip:hover,
.apex-feature-chip:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--lc-shadow) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}
.neu-feature-chip > i,
.apex-feature-chip > i {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: var(--lc-grad-soft) !important;
  color: var(--lc-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  flex-shrink: 0;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.neu-feature-chip:hover > i,
.apex-feature-chip:hover > i {
  background: var(--lc-grad) !important;
  color: #fff !important;
  transform: rotate(-6deg) scale(1.08);
}
.neu-feature-chip strong,
.apex-feature-chip strong {
  display: block;
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-size: 0.95rem;
}
.neu-feature-chip span,
.apex-feature-chip span {
  color: var(--lc-soft) !important;
  font-size: 0.8rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer,
.premium-footer,
.small-footer {
  background: linear-gradient(180deg, transparent, var(--lc-ice) 30%, #E8F0FE) !important;
  border-top: 1px solid var(--lc-line) !important;
  color: var(--lc-text) !important;
  position: relative;
  z-index: 1;
}
.footer-brand-title {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}
.footer-brand-icon--fallback,
.footer-brand-icon {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer-copy { color: var(--lc-soft) !important; }
.footer-col-title {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.02em;
}
.footer-links-compact a {
  color: var(--lc-soft) !important;
  transition: color var(--lc-dur-fast), transform var(--lc-dur-fast) !important;
}
.footer-links-compact a:hover {
  color: var(--lc-primary) !important;
  transform: translateX(3px);
}
.footer-social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 12px !important;
  color: var(--lc-primary) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  text-decoration: none;
}
.footer-social a:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}

/* ============================================================
   MOBILE BOTTOM NAV
   ============================================================ */
.mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-top: 1px solid var(--lc-line) !important;
  box-shadow: 0 -8px 32px rgba(59, 100, 180, 0.08) !important;
}
.mobile-bottom-nav .nav-item {
  color: var(--lc-soft) !important;
  transition: color var(--lc-dur-fast) !important;
}
.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover {
  color: var(--lc-primary) !important;
}
.mobile-bottom-nav .nav-item i {
  transition: transform var(--lc-dur-fast) var(--lc-ease-bounce);
}
.mobile-bottom-nav .nav-item.active i {
  transform: translateY(-2px) scale(1.1);
  color: var(--lc-primary) !important;
}
.nav-gallery-btn {
  background: var(--lc-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
  border: 3px solid var(--lc-white) !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease-bounce) !important;
}
.nav-gallery-btn:hover,
.nav-gallery-btn.active {
  transform: scale(1.08) !important;
}
.play-mini-glow {
  background: rgba(59, 130, 246, 0.4) !important;
  animation: lcGlowPulse 2s ease-in-out infinite;
}
@keyframes lcGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.2; }
}
.gallery-text { color: var(--lc-primary) !important; font-weight: 700 !important; }

/* ============================================================
   MENU OVERLAY / MODALS
   ============================================================ */
.menu-overlay-popup .popup-card,
.ipa-cmd-panel,
.ipa-fav-panel,
.custom-sort-modal {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-xl) !important;
  box-shadow: var(--lc-glass-shadow-lg) !important;
  color: var(--lc-ink) !important;
}
.popup-title,
.ipa-fav-header h3,
#ipaSortTitle {
  font-family: var(--lc-font-display) !important;
  color: var(--lc-ink) !important;
}
.popup-item {
  border-radius: var(--lc-r-md) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  border: 1px solid transparent !important;
}
.popup-item:hover {
  background: var(--lc-ice) !important;
  border-color: var(--lc-line) !important;
  transform: translateX(4px);
}
.popup-icon {
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.pi-blue { background: var(--lc-sky-soft) !important; color: var(--lc-primary) !important; }
.pi-orange { background: rgba(245, 158, 11, 0.12) !important; color: var(--lc-warm) !important; }
.pi-pink { background: rgba(239, 68, 68, 0.1) !important; color: var(--lc-danger) !important; }
.pi-purple { background: var(--lc-indigo-soft) !important; color: var(--lc-indigo) !important; }
.pi-green { background: var(--lc-emerald-soft) !important; color: var(--lc-emerald) !important; }

.popup-close,
.sort-close-btn {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: 10px !important;
  color: var(--lc-soft) !important;
  transition: all var(--lc-dur-fast) !important;
}
.popup-close:hover,
.sort-close-btn:hover {
  background: var(--lc-danger) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.sort-option-item {
  border-radius: var(--lc-r-md) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  color: var(--lc-text) !important;
}
.sort-option-item:hover {
  background: var(--lc-ice) !important;
  transform: translateX(3px);
}
.sort-option-item.active {
  background: var(--lc-sky-soft) !important;
  color: var(--lc-primary-deep) !important;
  font-weight: 700 !important;
}
.sort-icon-wrapper i { color: var(--lc-primary) !important; }

/* Command palette */
.ipa-cmd-overlay {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(6px) !important;
}
.ipa-cmd-input-wrap {
  border-bottom: 1px solid var(--lc-line) !important;
}
.ipa-cmd-input-wrap i { color: var(--lc-primary) !important; }
.ipa-cmd-input-wrap input {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font) !important;
}
.ipa-cmd-results [role="option"],
.ipa-cmd-item {
  border-radius: 10px !important;
  transition: background var(--lc-dur-fast) !important;
}
.ipa-cmd-results [aria-selected="true"],
.ipa-cmd-item.is-active,
.ipa-cmd-item:hover {
  background: var(--lc-sky-soft) !important;
}

/* Favorites */
.ipa-fav-overlay {
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(4px) !important;
}

/* ============================================================
   SCROLL TOP + TOAST
   ============================================================ */
.scroll-top {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.scroll-top:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.45) !important;
}
.scroll-top.is-visible,
.scroll-top.show {
  animation: lcBounceIn 0.5s var(--lc-ease-bounce);
}
@keyframes lcBounceIn {
  0% { opacity: 0; transform: scale(0.5) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

#toast {
  background: var(--lc-ink) !important;
  color: #fff !important;
  border-radius: var(--lc-pill) !important;
  box-shadow: var(--lc-shadow-lg) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(12px);
}
#toast i { color: var(--lc-emerald) !important; }
#toast.show {
  animation: lcToastIn 0.4s var(--lc-ease-bounce);
}
@keyframes lcToastIn {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   SINGLE PROMPT PAGE
   ============================================================ */
.ipa-single-prompt .breadcrumb {
  color: var(--lc-soft) !important;
}
.ipa-single-prompt .breadcrumb a {
  color: var(--lc-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color var(--lc-dur-fast);
}
.ipa-single-prompt .breadcrumb a:hover { color: var(--lc-primary-deep) !important; }

.image-card,
.info-card,
.face-ref-card,
.glass-card {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-xl) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  transition: box-shadow var(--lc-dur), transform var(--lc-dur) !important;
}
.image-card:hover,
.info-card:hover {
  box-shadow: var(--lc-shadow) !important;
}
.image-wrapper {
  border-radius: var(--lc-r-lg) !important;
  overflow: hidden;
  position: relative;
}
.image-wrapper img {
  transition: transform 0.6s var(--lc-ease) !important;
}
.image-wrapper:hover img { transform: scale(1.03); }

.model-badge-overlay {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: var(--lc-pill) !important;
  color: var(--lc-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--lc-shadow-sm) !important;
  border: 1px solid var(--lc-line) !important;
}
.model-badge-overlay i { color: var(--lc-primary) !important; }

.image-overlay-like {
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: var(--lc-pill) !important;
  color: var(--lc-danger) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  transition: transform var(--lc-dur-fast) var(--lc-ease-bounce) !important;
}
.image-overlay-like:hover { transform: scale(1.1); }

.ipa-zoom-chip {
  background: rgba(15, 23, 42, 0.7) !important;
  color: #fff !important;
  border-radius: var(--lc-pill) !important;
  backdrop-filter: blur(8px);
  font-weight: 600 !important;
}

.stat-item {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-md) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.stat-item:hover {
  background: var(--lc-white) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-sm);
}
.stat-val {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 800 !important;
}
.stat-lbl { color: var(--lc-soft) !important; }

.prompt-box {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-lg) !important;
}
.prompt-label {
  color: var(--lc-primary-deep) !important;
  font-weight: 700 !important;
  font-family: var(--lc-font-display) !important;
}
.btn-copy-sm {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.btn-copy-sm:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn.btn-primary,
.btn-primary {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.btn.btn-primary:hover,
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(59, 130, 246, 0.38) !important;
}
.btn.btn-outline,
.btn-outline {
  background: var(--lc-white) !important;
  color: var(--lc-primary-deep) !important;
  border: 1.5px solid var(--lc-line-strong) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.btn.btn-outline:hover,
.btn-outline:hover {
  border-color: var(--lc-primary) !important;
  background: var(--lc-ice) !important;
  transform: translateY(-2px);
}

.tag-pill {
  background: var(--lc-ice) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-soft) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  text-decoration: none !important;
}
.tag-pill:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}

.face-ref-card {
  border-left: 4px solid transparent !important;
  border-image: var(--lc-grad) 1 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(6, 182, 212, 0.06)) !important;
}
.face-ref-header {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 700 !important;
}
.face-ref-header i { color: var(--lc-primary) !important; }
.btn-face-copy {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.btn-face-copy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35);
}
.btn-face-view {
  background: var(--lc-white) !important;
  color: var(--lc-primary-deep) !important;
  border: 1.5px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) !important;
}
.btn-face-view:hover {
  border-color: var(--lc-primary) !important;
  background: var(--lc-ice) !important;
}

.section-title {
  color: var(--lc-ink) !important;
  font-family: var(--lc-font-display) !important;
  font-weight: 700 !important;
}
.related-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.related-title i { color: var(--lc-primary) !important; }

.faq-item {
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-md) !important;
  margin-bottom: 10px;
  background: var(--lc-ice) !important;
  overflow: hidden;
  transition: border-color var(--lc-dur-fast);
}
.faq-item[open] {
  border-color: rgba(59, 130, 246, 0.35) !important;
  background: var(--lc-white) !important;
  box-shadow: var(--lc-shadow-xs);
}
.faq-question {
  color: var(--lc-ink) !important;
  font-weight: 600 !important;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-answer {
  color: var(--lc-soft) !important;
  padding: 0 16px 14px;
  line-height: 1.7;
}

/* ============================================================
   GALLERY / BLOG
   ============================================================ */
.blog-hero {
  position: relative;
  text-align: center;
  padding: 48px 20px 32px;
}
.blog-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  padding: 8px 16px !important;
  color: var(--lc-primary-deep) !important;
  font-weight: 700 !important;
  box-shadow: var(--lc-shadow-sm) !important;
}
.blog-badge i { color: var(--lc-primary) !important; }
.gallery-hero-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
  margin: 16px 0 12px !important;
}
.gallery-hero-sub { color: var(--lc-soft) !important; max-width: 560px; margin: 0 auto; }

.filter-pill {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-pill) !important;
  color: var(--lc-soft) !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  text-decoration: none !important;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.28) !important;
}

.blog-card,
.content-blog-card,
.blog-grid article {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-xl) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  overflow: hidden;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.blog-card:hover,
.blog-grid article:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--lc-glow-hover) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.neu-search-header {
  text-align: center;
  padding: 40px 20px 24px;
  position: relative;
  z-index: 1;
}
.neu-search-header h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
}
.neu-search-header p { color: var(--lc-soft) !important; }

/* ============================================================
   404
   ============================================================ */
.ipa-404 {
  text-align: center;
  padding: 80px 20px !important;
  position: relative;
  z-index: 1;
}
.ipa-404 h1 {
  font-family: var(--lc-font-display) !important;
  color: var(--lc-ink) !important;
}
.ipa-404 p { color: var(--lc-soft) !important; }
.ipa-404 > div i,
.ipa-404 .lc-404-icon {
  color: var(--lc-primary) !important;
  opacity: 0.35 !important;
  animation: lcOrbFloat 6s ease-in-out infinite;
}

/* ============================================================
   PAGE / READ
   ============================================================ */
.read-container,
.read-content-body {
  position: relative;
  z-index: 1;
}
.read-content-body {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  border-radius: var(--lc-r-xl) !important;
  box-shadow: var(--lc-shadow-sm) !important;
  padding: 32px !important;
}
.read-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
}
.ipa-entry-content { color: var(--lc-text) !important; line-height: 1.75; }
.ipa-entry-content a { color: var(--lc-primary) !important; }

/* ============================================================
   PAGINATION / LOAD MORE
   ============================================================ */
.pagination a,
.pagination span,
.nav-links a,
.page-numbers {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-text) !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
}
.pagination a:hover,
.nav-links a:hover,
.page-numbers:hover {
  background: var(--lc-sky-soft) !important;
  border-color: var(--lc-primary) !important;
  color: var(--lc-primary-deep) !important;
  transform: translateY(-2px);
}
.pagination .current,
.page-numbers.current {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3) !important;
}

.ipa-load-more,
.btn-load-more,
[data-ipa-load-more] {
  background: var(--lc-grad-btn) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--lc-pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3) !important;
  transition: all var(--lc-dur) var(--lc-ease) !important;
}
.ipa-load-more:hover,
.btn-load-more:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4) !important;
}

/* ============================================================
   POPULAR TAGS / MICRO GALLERY
   ============================================================ */
.popular-tags a,
.tag-cloud a {
  background: var(--lc-white) !important;
  border: 1px solid var(--lc-line) !important;
  color: var(--lc-soft) !important;
  border-radius: var(--lc-pill) !important;
  transition: all var(--lc-dur-fast) var(--lc-ease) !important;
  text-decoration: none !important;
}
.popular-tags a:hover,
.tag-cloud a:hover {
  background: var(--lc-grad) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

/* ============================================================
   ADVANCED: Reading progress (single)
   ============================================================ */
.lc-read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 10000;
  background: linear-gradient(90deg, #3B82F6, #6366F1, #06B6D4, #10B981);
  background-size: 200% 100%;
  animation: lcGradShift 3s linear infinite;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
@keyframes lcGradShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Floating quick actions dock */
.lc-fab-dock {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
  transition: all 0.4s var(--lc-ease);
}
.lc-fab-dock.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.lc-fab {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--lc-line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  color: var(--lc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--lc-shadow-sm);
  transition: all var(--lc-dur-fast) var(--lc-ease);
  font-size: 1.05rem;
}
.lc-fab:hover {
  background: var(--lc-grad);
  color: #fff;
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35);
}
@media (max-width: 767px) {
  .lc-fab-dock { bottom: 90px; right: 12px; }
  .lc-fab { width: 44px; height: 44px; border-radius: 14px; }
}

/* Skeleton shimmer for images */
.card-image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
  opacity: 0;
}
.prompt-card:hover .card-image-wrapper::after {
  animation: lcShimmer 1.2s var(--lc-ease);
  opacity: 1;
}
@keyframes lcShimmer {
  to { transform: translateX(100%); }
}

/* Magnetic / ripple helpers */
.magnetic-btn { will-change: transform; }
.lc-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: lcRipple 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes lcRipple {
  to { transform: scale(4); opacity: 0; }
}

/* 3D tilt card */
.prompt-card.lc-tilt {
  transform-style: preserve-3d;
  perspective: 800px;
}

/* Counter flash */
[data-counter].lc-counting {
  display: inline-block;
  animation: lcCountPop 0.4s var(--lc-ease-bounce);
}
@keyframes lcCountPop {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Page enter — no transform (transform on main can break scroll/fixed children) */
body.ipa-lumen-ready #main-content {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--lc-primary) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* Selection */
::selection {
  background: rgba(59, 130, 246, 0.22);
  color: var(--lc-ink);
}

/* Main content layering — never trap scroll */
#main-content,
.site-main,
main#main-content {
  position: relative !important;
  z-index: 1;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  transform: none !important;
}

/* Footer — always visible, no blank gap after end */
.site-footer,
.premium-footer,
.small-footer,
.footer-wrapper,
.footer-inner,
.footer-col,
.footer-brand,
.fp-observe.premium-footer,
.premium-footer.fp-observe {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  filter: none !important;
  margin-bottom: 0 !important;
}

.site-footer,
.premium-footer,
.small-footer {
  position: relative !important;
  z-index: 2;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  /* mobile nav clearance only on small screens */
  padding-bottom: 24px !important;
}

@media (max-width: 767px) {
  .site-footer,
  .premium-footer,
  .small-footer {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (min-width: 768px) {
  body.ipa-lumen,
  body {
    padding-bottom: 0 !important;
  }
  .mobile-bottom-nav {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* Frosted observe must not leave blank footer / cards */
.fp-observe {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Closed overlays must never block scroll/wheel */
.menu-overlay-popup[hidden],
.ipa-cmd-overlay[hidden],
.ipa-fav-overlay[hidden],
.custom-sort-modal[hidden],
#ipaSortBackdrop[hidden],
#ipaSortBackdrop[style*="display: none"],
#ipaSortBackdrop[style*="display:none"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

.menu-overlay-popup:not(.active)[hidden],
.ipa-cmd-overlay:not(.active),
.ipa-fav-overlay:not(.active) {
  pointer-events: none !important;
}

/* FAB dock never adds layout height */
.lc-fab-dock {
  position: fixed !important;
  pointer-events: none;
  height: auto !important;
  margin: 0 !important;
}
.lc-fab-dock.is-visible {
  pointer-events: auto;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: var(--lc-grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lc-primary);
  font-size: 1.8rem;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lc-atmosphere,
  .lc-cursor-glow,
  body.ipa-lumen::before {
    display: none !important;
  }
  body.ipa-lumen-ready #main-content {
    animation: none !important;
  }
}

/* ============================================================
   RESPONSIVE POLISH
   ============================================================ */
@media (max-width: 767px) {
  .nova-hero-panel {
    border-radius: var(--lc-r-xl) !important;
    margin: 0 8px;
  }
  .hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .neu-feature-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .neu-feature-chip {
    padding: 12px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .lc-cursor-glow { display: none !important; }
}

@media (min-width: 768px) {
  main#main-content,
  #main-content {
    padding-top: 96px !important;
  }
}

/* Ensure laptop visibility */
@media (min-width: 768px) {
  .advanced-header { display: block !important; }
  .mobile-header,
  .mobile-header-modern,
  .mobile-bottom-nav { display: none !important; }
  [data-aos] {
    opacity: 1;
    pointer-events: auto;
  }
}