@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

/**
 * VANVI MOMENTS — GLOBAL NAVIGATION SYSTEM (MATCHING HOME SCREEN EXACTLY)
 * Exact replica of index.html bottom navigation bar + compact glass Back button
 */

/* Global Viewport Overflow Guard */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* ==========================================================================
   VANVI LUXURY DUAL THEME ENGINE (DAY BLOOM & EMERALD NIGHT)
   Universal across all A-to-Z pages. Manually toggled only.
   Palette:
   - 🖤 Obsidian #0B0D0C (Main Background)
   - 🌲 Deep Emerald #0F3D32 (Major Surfaces / Cards)
   - 💚 Emerald #18A878 (Primary Accent / Glowing Buttons)
   - 🍃 Mint #6EE7B7 (Highlights & Tags)
   - 🩵 Teal #2DD4BF (Secondary Accent / Shimmer)
   - 🤍 Pearl #F1F7F4 (Main Text & Titles)
   - ✨ Champagne Gold #D6B878 (Luxury Details & Borders)
   ========================================================================== */

/* Main Background */
html[data-vanvi-theme="emerald"] body,
html[data-vanvi-theme="dark"] body,
html[data-vanvi-theme="night"] body,
html[data-vanvi-theme="emerald"] .page,
html[data-vanvi-theme="dark"] .page,
html[data-vanvi-theme="night"] .page,
html[data-vanvi-theme="emerald"] main,
html[data-vanvi-theme="dark"] main,
html[data-vanvi-theme="night"] main,
html[data-vanvi-theme="emerald"] .main-content,
html[data-vanvi-theme="dark"] .main-content,
html[data-vanvi-theme="night"] .main-content {
  background: 
    radial-gradient(circle at 10% 12%, rgba(16, 185, 129, 0.18) 0%, transparent 40%),
    radial-gradient(circle at 90% 15%, rgba(245, 158, 11, 0.16) 0%, transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(139, 92, 246, 0.14) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(6, 182, 212, 0.15) 0%, transparent 42%),
    radial-gradient(circle at 15% 85%, rgba(244, 63, 94, 0.13) 0%, transparent 40%),
    #070B0E !important;
  background-size: cover !important;
  background-color: #070B0E !important;
  color: #F8FAFC !important;
}

/* Headers & Navigation Wrappers (Frosted Obsidian Glass + 24K Gold & Cyan Rim) */
html[data-vanvi-theme="emerald"] header,
html[data-vanvi-theme="dark"] header,
html[data-vanvi-theme="night"] header,
html[data-vanvi-theme="emerald"] .nav-wrapper,
html[data-vanvi-theme="dark"] .nav-wrapper,
html[data-vanvi-theme="night"] .nav-wrapper,
html[data-vanvi-theme="emerald"] .nav-pill-box,
html[data-vanvi-theme="dark"] .nav-pill-box,
html[data-vanvi-theme="night"] .nav-pill-box,
html[data-vanvi-theme="emerald"] .app-header,
html[data-vanvi-theme="dark"] .app-header,
html[data-vanvi-theme="night"] .app-header,
html[data-vanvi-theme="emerald"] .site-header,
html[data-vanvi-theme="dark"] .site-header,
html[data-vanvi-theme="night"] .site-header,
html[data-vanvi-theme="emerald"] .fixed-header,
html[data-vanvi-theme="dark"] .fixed-header,
html[data-vanvi-theme="night"] .fixed-header,
html[data-vanvi-theme="emerald"] .navbar,
html[data-vanvi-theme="dark"] .navbar,
html[data-vanvi-theme="night"] .navbar {
  background: rgba(9, 14, 20, 0.94) !important;
  border-color: rgba(245, 158, 11, 0.38) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  color: #F8FAFC !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.75), 0 0 20px rgba(16, 185, 129, 0.12) !important;
}

/* Universal Cards & Containers Transformation (Deep Emerald #0F3D32 + Glass + Gold Trim) */
html[data-vanvi-theme="emerald"] body div[class*="card"],
html[data-vanvi-theme="dark"] body div[class*="card"],
html[data-vanvi-theme="night"] body div[class*="card"],
html[data-vanvi-theme="emerald"] body section[class*="card"],
html[data-vanvi-theme="dark"] body section[class*="card"],
html[data-vanvi-theme="night"] body section[class*="card"],
html[data-vanvi-theme="emerald"] body article[class*="card"],
html[data-vanvi-theme="dark"] body article[class*="card"],
html[data-vanvi-theme="night"] body article[class*="card"],
html[data-vanvi-theme="emerald"] body div[class*="box"],
html[data-vanvi-theme="dark"] body div[class*="box"],
html[data-vanvi-theme="night"] body div[class*="box"],
html[data-vanvi-theme="emerald"] body section[class*="box"],
html[data-vanvi-theme="dark"] body section[class*="box"],
html[data-vanvi-theme="night"] body section[class*="box"],
html[data-vanvi-theme="emerald"] body div[class*="panel"],
html[data-vanvi-theme="dark"] body div[class*="panel"],
html[data-vanvi-theme="night"] body div[class*="panel"],
html[data-vanvi-theme="emerald"] body div[class*="hero"],
html[data-vanvi-theme="dark"] body div[class*="hero"],
html[data-vanvi-theme="night"] body div[class*="hero"],
html[data-vanvi-theme="emerald"] body div[class*="pod"],
html[data-vanvi-theme="dark"] body div[class*="pod"],
html[data-vanvi-theme="night"] body div[class*="pod"],
html[data-vanvi-theme="emerald"] body section[class*="pod"],
html[data-vanvi-theme="dark"] body section[class*="pod"],
html[data-vanvi-theme="night"] body section[class*="pod"],
html[data-vanvi-theme="emerald"] body div[class*="tile"],
html[data-vanvi-theme="dark"] body div[class*="tile"],
html[data-vanvi-theme="night"] body div[class*="tile"],
html[data-vanvi-theme="emerald"] body div[class*="pill"]:not(.nav-btn):not(.btn):not(.dock-link),
html[data-vanvi-theme="dark"] body div[class*="pill"]:not(.nav-btn):not(.btn):not(.dock-link),
html[data-vanvi-theme="night"] body div[class*="pill"]:not(.nav-btn):not(.btn):not(.dock-link),
html[data-vanvi-theme="emerald"] body div[class*="badge"]:not(.nav-btn):not(.btn),
html[data-vanvi-theme="dark"] body div[class*="badge"]:not(.nav-btn):not(.btn),
html[data-vanvi-theme="night"] body div[class*="badge"]:not(.nav-btn):not(.btn),
html[data-vanvi-theme="emerald"] body div[class*="strip"],
html[data-vanvi-theme="dark"] body div[class*="strip"],
html[data-vanvi-theme="night"] body div[class*="strip"],
html[data-vanvi-theme="emerald"] body div[class*="item"]:not(.dock-link):not(.nav-btn):not(.nav-item),
html[data-vanvi-theme="dark"] body div[class*="item"]:not(.dock-link):not(.nav-btn):not(.nav-item),
html[data-vanvi-theme="night"] body div[class*="item"]:not(.dock-link):not(.nav-btn):not(.nav-item),
html[data-vanvi-theme="emerald"] body .card,
html[data-vanvi-theme="dark"] body .card,
html[data-vanvi-theme="night"] body .card,
html[data-vanvi-theme="emerald"] body .template,
html[data-vanvi-theme="dark"] body .template,
html[data-vanvi-theme="night"] body .template,
html[data-vanvi-theme="emerald"] body .template-card,
html[data-vanvi-theme="dark"] body .template-card,
html[data-vanvi-theme="night"] body .template-card,
html[data-vanvi-theme="emerald"] body .catalog-card,
html[data-vanvi-theme="dark"] body .catalog-card,
html[data-vanvi-theme="night"] body .catalog-card,
html[data-vanvi-theme="emerald"] body .glass,
html[data-vanvi-theme="dark"] body .glass,
html[data-vanvi-theme="night"] body .glass,
html[data-vanvi-theme="emerald"] body .category-card,
html[data-vanvi-theme="dark"] body .category-card,
html[data-vanvi-theme="night"] body .category-card,
html[data-vanvi-theme="emerald"] body .make-card,
html[data-vanvi-theme="dark"] body .make-card,
html[data-vanvi-theme="night"] body .make-card,
html[data-vanvi-theme="emerald"] body .about-hero-card,
html[data-vanvi-theme="dark"] body .about-hero-card,
html[data-vanvi-theme="night"] body .about-hero-card,
html[data-vanvi-theme="emerald"] body .about-card,
html[data-vanvi-theme="dark"] body .about-card,
html[data-vanvi-theme="night"] body .about-card,
html[data-vanvi-theme="emerald"] body .idea-card,
html[data-vanvi-theme="dark"] body .idea-card,
html[data-vanvi-theme="night"] body .idea-card,
html[data-vanvi-theme="emerald"] body .why-section,
html[data-vanvi-theme="dark"] body .why-section,
html[data-vanvi-theme="night"] body .why-section,
html[data-vanvi-theme="emerald"] body .why-item,
html[data-vanvi-theme="dark"] body .why-item,
html[data-vanvi-theme="night"] body .why-item,
html[data-vanvi-theme="emerald"] body .flow-section,
html[data-vanvi-theme="dark"] body .flow-section,
html[data-vanvi-theme="night"] body .flow-section,
html[data-vanvi-theme="emerald"] body .flow-step-card,
html[data-vanvi-theme="dark"] body .flow-step-card,
html[data-vanvi-theme="night"] body .flow-step-card,
html[data-vanvi-theme="emerald"] body .contact-hero-card,
html[data-vanvi-theme="dark"] body .contact-hero-card,
html[data-vanvi-theme="night"] body .contact-hero-card,
html[data-vanvi-theme="emerald"] body .contact-card,
html[data-vanvi-theme="dark"] body .contact-card,
html[data-vanvi-theme="night"] body .contact-card,
html[data-vanvi-theme="emerald"] body .channel-card,
html[data-vanvi-theme="dark"] body .channel-card,
html[data-vanvi-theme="night"] body .channel-card,
html[data-vanvi-theme="emerald"] body .office-card,
html[data-vanvi-theme="dark"] body .office-card,
html[data-vanvi-theme="night"] body .office-card,
html[data-vanvi-theme="emerald"] body .concierge-card,
html[data-vanvi-theme="dark"] body .concierge-card,
html[data-vanvi-theme="night"] body .concierge-card,
html[data-vanvi-theme="emerald"] body .faq-card,
html[data-vanvi-theme="dark"] body .faq-card,
html[data-vanvi-theme="night"] body .faq-card,
html[data-vanvi-theme="emerald"] body .faq-item,
html[data-vanvi-theme="dark"] body .faq-item,
html[data-vanvi-theme="night"] body .faq-item,
html[data-vanvi-theme="emerald"] body .faq-question,
html[data-vanvi-theme="dark"] body .faq-question,
html[data-vanvi-theme="night"] body .faq-question,
html[data-vanvi-theme="emerald"] body .creator-vault-card,
html[data-vanvi-theme="dark"] body .creator-vault-card,
html[data-vanvi-theme="night"] body .creator-vault-card,
html[data-vanvi-theme="emerald"] body .dashboard-hero-pod,
html[data-vanvi-theme="dark"] body .dashboard-hero-pod,
html[data-vanvi-theme="night"] body .dashboard-hero-pod,
html[data-vanvi-theme="emerald"] body .user-card,
html[data-vanvi-theme="dark"] body .user-card,
html[data-vanvi-theme="night"] body .user-card,
html[data-vanvi-theme="emerald"] body .rewards-card,
html[data-vanvi-theme="dark"] body .rewards-card,
html[data-vanvi-theme="night"] body .rewards-card,
html[data-vanvi-theme="emerald"] body .metric-tile,
html[data-vanvi-theme="dark"] body .metric-tile,
html[data-vanvi-theme="night"] body .metric-tile,
html[data-vanvi-theme="emerald"] body .mission-pill,
html[data-vanvi-theme="dark"] body .mission-pill,
html[data-vanvi-theme="night"] body .mission-pill,
html[data-vanvi-theme="emerald"] body .balance-overview-pod,
html[data-vanvi-theme="dark"] body .balance-overview-pod,
html[data-vanvi-theme="night"] body .balance-overview-pod,
html[data-vanvi-theme="emerald"] body .balance-box,
html[data-vanvi-theme="dark"] body .balance-box,
html[data-vanvi-theme="night"] body .balance-box,
html[data-vanvi-theme="emerald"] body .wallet-status-capsule,
html[data-vanvi-theme="dark"] body .wallet-status-capsule,
html[data-vanvi-theme="night"] body .wallet-status-capsule,
html[data-vanvi-theme="emerald"] body .wallet-pill,
html[data-vanvi-theme="dark"] body .wallet-pill,
html[data-vanvi-theme="night"] body .wallet-pill,
html[data-vanvi-theme="emerald"] body .quick-nav-bar,
html[data-vanvi-theme="dark"] body .quick-nav-bar,
html[data-vanvi-theme="night"] body .quick-nav-bar,
html[data-vanvi-theme="emerald"] body .quick-tour-panel,
html[data-vanvi-theme="dark"] body .quick-tour-panel,
html[data-vanvi-theme="night"] body .quick-tour-panel,
html[data-vanvi-theme="emerald"] body .trust-badge,
html[data-vanvi-theme="dark"] body .trust-badge,
html[data-vanvi-theme="night"] body .trust-badge,
html[data-vanvi-theme="emerald"] body .trust-item,
html[data-vanvi-theme="dark"] body .trust-item,
html[data-vanvi-theme="night"] body .trust-item,
html[data-vanvi-theme="emerald"] body .trust-grid > div,
html[data-vanvi-theme="dark"] body .trust-grid > div,
html[data-vanvi-theme="night"] body .trust-grid > div,
html[data-vanvi-theme="emerald"] body .trust-strip,
html[data-vanvi-theme="dark"] body .trust-strip,
html[data-vanvi-theme="night"] body .trust-strip,
html[data-vanvi-theme="emerald"] body .tour-pill-btn,
html[data-vanvi-theme="dark"] body .tour-pill-btn,
html[data-vanvi-theme="night"] body .tour-pill-btn,
html[data-vanvi-theme="emerald"] body .btn-quick-nav,
html[data-vanvi-theme="dark"] body .btn-quick-nav,
html[data-vanvi-theme="night"] body .btn-quick-nav,
html[data-vanvi-theme="emerald"] body .quick-nav-btn,
html[data-vanvi-theme="dark"] body .quick-nav-btn,
html[data-vanvi-theme="night"] body .quick-nav-btn,
html[data-vanvi-theme="emerald"] body .arcade-category-pill,
html[data-vanvi-theme="dark"] body .arcade-category-pill,
html[data-vanvi-theme="night"] body .arcade-category-pill,
html[data-vanvi-theme="emerald"] body .category-pill,
html[data-vanvi-theme="dark"] body .category-pill,
html[data-vanvi-theme="night"] body .category-pill,
html[data-vanvi-theme="emerald"] body .tab-pill,
html[data-vanvi-theme="dark"] body .tab-pill,
html[data-vanvi-theme="night"] body .tab-pill,
html[data-vanvi-theme="emerald"] body .ai-prompt-bar,
html[data-vanvi-theme="dark"] body .ai-prompt-bar,
html[data-vanvi-theme="night"] body .ai-prompt-bar,
html[data-vanvi-theme="emerald"] body [class*="ai-prompt"],
html[data-vanvi-theme="dark"] body [class*="ai-prompt"],
html[data-vanvi-theme="night"] body [class*="ai-prompt"],
html[data-vanvi-theme="emerald"] body [class*="capsule"],
html[data-vanvi-theme="dark"] body [class*="capsule"],
html[data-vanvi-theme="night"] body [class*="capsule"],
html[data-vanvi-theme="emerald"] body [class*="badge-box"],
html[data-vanvi-theme="dark"] body [class*="badge-box"],
html[data-vanvi-theme="night"] body [class*="badge-box"],
html[data-vanvi-theme="emerald"] body [class*="trust"],
html[data-vanvi-theme="dark"] body [class*="trust"],
html[data-vanvi-theme="night"] body [class*="trust"],
html[data-vanvi-theme="emerald"] body .dash-hero,
html[data-vanvi-theme="dark"] body .dash-hero,
html[data-vanvi-theme="night"] body .dash-hero,
html[data-vanvi-theme="emerald"] body .metric-card,
html[data-vanvi-theme="dark"] body .metric-card,
html[data-vanvi-theme="night"] body .metric-card,
html[data-vanvi-theme="emerald"] body .vault-item,
html[data-vanvi-theme="dark"] body .vault-item,
html[data-vanvi-theme="night"] body .vault-item,
html[data-vanvi-theme="emerald"] body .feature-row,
html[data-vanvi-theme="dark"] body .feature-row,
html[data-vanvi-theme="night"] body .feature-row,
html[data-vanvi-theme="emerald"] body .plan-card,
html[data-vanvi-theme="dark"] body .plan-card,
html[data-vanvi-theme="night"] body .plan-card,
html[data-vanvi-theme="emerald"] body .pricing-box,
html[data-vanvi-theme="dark"] body .pricing-box,
html[data-vanvi-theme="night"] body .pricing-box,
html[data-vanvi-theme="emerald"] body .pricing-card,
html[data-vanvi-theme="dark"] body .pricing-card,
html[data-vanvi-theme="night"] body .pricing-card,
html[data-vanvi-theme="emerald"] body .tier-card,
html[data-vanvi-theme="dark"] body .tier-card,
html[data-vanvi-theme="night"] body .tier-card,
html[data-vanvi-theme="emerald"] body .tour-nav-pill,
html[data-vanvi-theme="dark"] body .tour-nav-pill,
html[data-vanvi-theme="night"] body .tour-nav-pill,
html[data-vanvi-theme="emerald"] body .action-pill,
html[data-vanvi-theme="dark"] body .action-pill,
html[data-vanvi-theme="night"] body .action-pill,
html[data-vanvi-theme="emerald"] body .filter-chip,
html[data-vanvi-theme="dark"] body .filter-chip,
html[data-vanvi-theme="night"] body .filter-chip,
html[data-vanvi-theme="emerald"] body .checkout-card,
html[data-vanvi-theme="dark"] body .checkout-card,
html[data-vanvi-theme="night"] body .checkout-card,
html[data-vanvi-theme="emerald"] body .order-summary-box,
html[data-vanvi-theme="dark"] body .order-summary-box,
html[data-vanvi-theme="night"] body .order-summary-box,
html[data-vanvi-theme="emerald"] body .payment-card,
html[data-vanvi-theme="dark"] body .payment-card,
html[data-vanvi-theme="night"] body .payment-card,
html[data-vanvi-theme="emerald"] body .arcade-hero,
html[data-vanvi-theme="dark"] body .arcade-hero,
html[data-vanvi-theme="night"] body .arcade-hero,
html[data-vanvi-theme="emerald"] body .arcade-card,
html[data-vanvi-theme="dark"] body .arcade-card,
html[data-vanvi-theme="night"] body .arcade-card,
html[data-vanvi-theme="emerald"] body .game-item,
html[data-vanvi-theme="dark"] body .game-item,
html[data-vanvi-theme="night"] body .game-item,
html[data-vanvi-theme="emerald"] body .game-card,
html[data-vanvi-theme="dark"] body .game-card,
html[data-vanvi-theme="night"] body .game-card,
html[data-vanvi-theme="emerald"] body .legal-card,
html[data-vanvi-theme="dark"] body .legal-card,
html[data-vanvi-theme="night"] body .legal-card,
html[data-vanvi-theme="emerald"] body .auth-card,
html[data-vanvi-theme="dark"] body .auth-card,
html[data-vanvi-theme="night"] body .auth-card,
html[data-vanvi-theme="emerald"] body .auth-box,
html[data-vanvi-theme="dark"] body .auth-box,
html[data-vanvi-theme="night"] body .auth-box,
html[data-vanvi-theme="emerald"] body .coin-hero-card,
html[data-vanvi-theme="dark"] body .coin-hero-card,
html[data-vanvi-theme="night"] body .coin-hero-card,
html[data-vanvi-theme="emerald"] body .referral-section,
html[data-vanvi-theme="dark"] body .referral-section,
html[data-vanvi-theme="night"] body .referral-section,
html[data-vanvi-theme="emerald"] body .wheel-card-section,
html[data-vanvi-theme="dark"] body .wheel-card-section,
html[data-vanvi-theme="night"] body .wheel-card-section,
html[data-vanvi-theme="emerald"] body .lucky-moment-card,
html[data-vanvi-theme="dark"] body .lucky-moment-card,
html[data-vanvi-theme="night"] body .lucky-moment-card,
html[data-vanvi-theme="emerald"] body .coupons-section,
html[data-vanvi-theme="dark"] body .coupons-section,
html[data-vanvi-theme="night"] body .coupons-section,
html[data-vanvi-theme="emerald"] body .rules-card,
html[data-vanvi-theme="dark"] body .rules-card,
html[data-vanvi-theme="night"] body .rules-card,
html[data-vanvi-theme="emerald"] body .history-card,
html[data-vanvi-theme="dark"] body .history-card,
html[data-vanvi-theme="night"] body .history-card,
html[data-vanvi-theme="emerald"] body [style*="background: #fff"],
html[data-vanvi-theme="dark"] body [style*="background: #fff"],
html[data-vanvi-theme="night"] body [style*="background: #fff"],
html[data-vanvi-theme="emerald"] body [style*="background:#fff"],
html[data-vanvi-theme="dark"] body [style*="background:#fff"],
html[data-vanvi-theme="night"] body [style*="background:#fff"],
html[data-vanvi-theme="emerald"] body [style*="background: white"],
html[data-vanvi-theme="dark"] body [style*="background: white"],
html[data-vanvi-theme="night"] body [style*="background: white"],
html[data-vanvi-theme="emerald"] body [style*="background:white"],
html[data-vanvi-theme="dark"] body [style*="background:white"],
html[data-vanvi-theme="night"] body [style*="background:white"],
html[data-vanvi-theme="emerald"] body [style*="background-color: #fff"],
html[data-vanvi-theme="dark"] body [style*="background-color: #fff"],
html[data-vanvi-theme="night"] body [style*="background-color: #fff"],
html[data-vanvi-theme="emerald"] body [style*="background-color:#fff"],
html[data-vanvi-theme="dark"] body [style*="background-color:#fff"],
html[data-vanvi-theme="night"] body [style*="background-color:#fff"],
html[data-vanvi-theme="emerald"] body [style*="background-color: white"],
html[data-vanvi-theme="dark"] body [style*="background-color: white"],
html[data-vanvi-theme="night"] body [style*="background-color: white"],
html[data-vanvi-theme="emerald"] body [style*="background-color:white"],
html[data-vanvi-theme="dark"] body [style*="background-color:white"],
html[data-vanvi-theme="night"] body [style*="background-color:white"],
html[data-vanvi-theme="emerald"] body [style*="background: rgb(255, 255, 255)"],
html[data-vanvi-theme="dark"] body [style*="background: rgb(255, 255, 255)"],
html[data-vanvi-theme="night"] body [style*="background: rgb(255, 255, 255)"],
html[data-vanvi-theme="emerald"] body [style*="background-color: rgb(255, 255, 255)"],
html[data-vanvi-theme="dark"] body [style*="background-color: rgb(255, 255, 255)"],
html[data-vanvi-theme="night"] body [style*="background-color: rgb(255, 255, 255)"],
html[data-vanvi-theme="emerald"] body [style*="background: rgba(255, 255, 255"],
html[data-vanvi-theme="dark"] body [style*="background: rgba(255, 255, 255"],
html[data-vanvi-theme="night"] body [style*="background: rgba(255, 255, 255"] {
  background: linear-gradient(145deg, rgba(12, 22, 28, 0.92) 0%, rgba(8, 28, 22, 0.94) 50%, rgba(18, 15, 30, 0.92) 100%) !important;
  background-color: rgba(10, 18, 22, 0.94) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.38) !important;
  border-radius: 20px !important;
  color: #F8FAFC !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.75), 0 0 20px rgba(16, 185, 129, 0.14), 0 0 32px rgba(245, 158, 11, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}

/* Headings & Brand Titles (Crisp Diamond White with 24K Gold & Emerald Prismatic Glow) */
html[data-vanvi-theme="emerald"] h1,
html[data-vanvi-theme="dark"] h1,
html[data-vanvi-theme="night"] h1,
html[data-vanvi-theme="emerald"] h2,
html[data-vanvi-theme="dark"] h2,
html[data-vanvi-theme="night"] h2,
html[data-vanvi-theme="emerald"] h3,
html[data-vanvi-theme="dark"] h3,
html[data-vanvi-theme="night"] h3,
html[data-vanvi-theme="emerald"] h4,
html[data-vanvi-theme="dark"] h4,
html[data-vanvi-theme="night"] h4,
html[data-vanvi-theme="emerald"] h5,
html[data-vanvi-theme="dark"] h5,
html[data-vanvi-theme="night"] h5,
html[data-vanvi-theme="emerald"] h6,
html[data-vanvi-theme="dark"] h6,
html[data-vanvi-theme="night"] h6,
html[data-vanvi-theme="emerald"] b,
html[data-vanvi-theme="dark"] b,
html[data-vanvi-theme="night"] b,
html[data-vanvi-theme="emerald"] strong,
html[data-vanvi-theme="dark"] strong,
html[data-vanvi-theme="night"] strong,
html[data-vanvi-theme="emerald"] .brand-title,
html[data-vanvi-theme="dark"] .brand-title,
html[data-vanvi-theme="night"] .brand-title,
html[data-vanvi-theme="emerald"] .brand-link,
html[data-vanvi-theme="dark"] .brand-link,
html[data-vanvi-theme="night"] .brand-link,
html[data-vanvi-theme="emerald"] .header-brand,
html[data-vanvi-theme="dark"] .header-brand,
html[data-vanvi-theme="night"] .header-brand,
html[data-vanvi-theme="emerald"] .brand-logo-text,
html[data-vanvi-theme="dark"] .brand-logo-text,
html[data-vanvi-theme="night"] .brand-logo-text,
html[data-vanvi-theme="emerald"] .nav-link,
html[data-vanvi-theme="dark"] .nav-link,
html[data-vanvi-theme="night"] .nav-link,
html[data-vanvi-theme="emerald"] .nav-pill-box a,
html[data-vanvi-theme="dark"] .nav-pill-box a,
html[data-vanvi-theme="night"] .nav-pill-box a,
html[data-vanvi-theme="emerald"] .nav-pill-box span,
html[data-vanvi-theme="dark"] .nav-pill-box span,
html[data-vanvi-theme="night"] .nav-pill-box span,
html[data-vanvi-theme="emerald"] [class*="title"]:not([class*="gradient"]):not(span),
html[data-vanvi-theme="dark"] [class*="title"]:not([class*="gradient"]):not(span),
html[data-vanvi-theme="night"] [class*="title"]:not([class*="gradient"]):not(span),
html[data-vanvi-theme="emerald"] [class*="heading"]:not([class*="gradient"]):not(span),
html[data-vanvi-theme="dark"] [class*="heading"]:not([class*="gradient"]):not(span),
html[data-vanvi-theme="night"] [class*="heading"]:not([class*="gradient"]):not(span) {
  color: #FFFFFF !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 16px rgba(251, 191, 36, 0.18) !important;
}

/* Secondary Copy & Descriptions (Ultra-Clean Luminous Platinum Pearl, NOT Muddy Green!) */
html[data-vanvi-theme="emerald"] p,
html[data-vanvi-theme="dark"] p,
html[data-vanvi-theme="night"] p,
html[data-vanvi-theme="emerald"] li,
html[data-vanvi-theme="dark"] li,
html[data-vanvi-theme="night"] li,
html[data-vanvi-theme="emerald"] label,
html[data-vanvi-theme="dark"] label,
html[data-vanvi-theme="night"] label,
html[data-vanvi-theme="emerald"] .desc,
html[data-vanvi-theme="dark"] .desc,
html[data-vanvi-theme="night"] .desc,
html[data-vanvi-theme="emerald"] .subtext,
html[data-vanvi-theme="dark"] .subtext,
html[data-vanvi-theme="night"] .subtext,
html[data-vanvi-theme="emerald"] .subtitle,
html[data-vanvi-theme="dark"] .subtitle,
html[data-vanvi-theme="night"] .subtitle,
html[data-vanvi-theme="emerald"] [class*="desc"]:not([class*="gradient"]),
html[data-vanvi-theme="dark"] [class*="desc"]:not([class*="gradient"]),
html[data-vanvi-theme="night"] [class*="desc"]:not([class*="gradient"]),
html[data-vanvi-theme="emerald"] [class*="sub"]:not([class*="gradient"]),
html[data-vanvi-theme="dark"] [class*="sub"]:not([class*="gradient"]),
html[data-vanvi-theme="night"] [class*="sub"]:not([class*="gradient"]) {
  color: #E2E8F0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Captions & Highlights (Vibrant Mint Aurora & Starlight Cyan) */
html[data-vanvi-theme="emerald"] small,
html[data-vanvi-theme="dark"] small,
html[data-vanvi-theme="night"] small,
html[data-vanvi-theme="emerald"] .hint,
html[data-vanvi-theme="dark"] .hint,
html[data-vanvi-theme="night"] .hint,
html[data-vanvi-theme="emerald"] .caption,
html[data-vanvi-theme="dark"] .caption,
html[data-vanvi-theme="night"] .caption {
  color: #6EE7B7 !important;
}

/* Breadcrumbs & Navigation Trails */
html[data-vanvi-theme="emerald"] .breadcrumb-trail,
html[data-vanvi-theme="dark"] .breadcrumb-trail,
html[data-vanvi-theme="night"] .breadcrumb-trail,
html[data-vanvi-theme="emerald"] .breadcrumb-bar,
html[data-vanvi-theme="dark"] .breadcrumb-bar,
html[data-vanvi-theme="night"] .breadcrumb-bar,
html[data-vanvi-theme="emerald"] .breadcrumb-bar a,
html[data-vanvi-theme="dark"] .breadcrumb-bar a,
html[data-vanvi-theme="night"] .breadcrumb-bar a,
html[data-vanvi-theme="emerald"] .breadcrumb-trail a,
html[data-vanvi-theme="dark"] .breadcrumb-trail a,
html[data-vanvi-theme="night"] .breadcrumb-trail a {
  color: #38BDF8 !important;
}

/* Back Button Transformation */
html[data-vanvi-theme="emerald"] .vanvi-btn-back,
html[data-vanvi-theme="dark"] .vanvi-btn-back,
html[data-vanvi-theme="night"] .vanvi-btn-back,
html[data-vanvi-theme="emerald"] .btn-nav-back,
html[data-vanvi-theme="dark"] .btn-nav-back,
html[data-vanvi-theme="night"] .btn-nav-back,
html[data-vanvi-theme="emerald"] .btn-back,
html[data-vanvi-theme="dark"] .btn-back,
html[data-vanvi-theme="night"] .btn-back,
html[data-vanvi-theme="emerald"] .nav-back,
html[data-vanvi-theme="dark"] .nav-back,
html[data-vanvi-theme="night"] .nav-back,
html[data-vanvi-theme="emerald"] .btn-back-nav,
html[data-vanvi-theme="dark"] .btn-back-nav,
html[data-vanvi-theme="night"] .btn-back-nav {
  background: rgba(12, 22, 28, 0.92) !important;
  color: #FBBF24 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 15px rgba(245, 158, 11, 0.2) !important;
}

/* Kickers & Feature Tags */
html[data-vanvi-theme="emerald"] .kicker,
html[data-vanvi-theme="dark"] .kicker,
html[data-vanvi-theme="night"] .kicker {
  color: #FBBF24 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

/* ═══════════════════════════════════════════════════════════════
   10 ULTRA-VIBRANT JEWEL & NEON DARK THEME PALETTE UTILITIES
   Rose · Violet · Cyan · Emerald · Royal Gold · Coral Sunset ·
   Orchid · Electric Blue · Mint Glow · Champagne Pearl
   ═══════════════════════════════════════════════════════════════ */
html[data-vanvi-theme="emerald"] .jewel-rose,
html[data-vanvi-theme="dark"] .jewel-rose,
html[data-vanvi-theme="night"] .jewel-rose {
  color: var(--vanvi-neon-rose) !important;
  text-shadow: 0 0 12px rgba(255, 42, 122, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-violet,
html[data-vanvi-theme="dark"] .jewel-violet,
html[data-vanvi-theme="night"] .jewel-violet {
  color: var(--vanvi-neon-violet) !important;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-cyan,
html[data-vanvi-theme="dark"] .jewel-cyan,
html[data-vanvi-theme="night"] .jewel-cyan {
  color: var(--vanvi-neon-cyan) !important;
  text-shadow: 0 0 12px rgba(6, 182, 212, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-emerald,
html[data-vanvi-theme="dark"] .jewel-emerald,
html[data-vanvi-theme="night"] .jewel-emerald {
  color: var(--vanvi-neon-emerald) !important;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-gold,
html[data-vanvi-theme="dark"] .jewel-gold,
html[data-vanvi-theme="night"] .jewel-gold {
  color: var(--vanvi-gold-royal) !important;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-coral,
html[data-vanvi-theme="dark"] .jewel-coral,
html[data-vanvi-theme="night"] .jewel-coral {
  color: var(--vanvi-coral-sunset) !important;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-orchid,
html[data-vanvi-theme="dark"] .jewel-orchid,
html[data-vanvi-theme="night"] .jewel-orchid {
  color: var(--vanvi-orchid-vibrant) !important;
  text-shadow: 0 0 12px rgba(236, 72, 153, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-blue,
html[data-vanvi-theme="dark"] .jewel-blue,
html[data-vanvi-theme="night"] .jewel-blue {
  color: var(--vanvi-electric-blue) !important;
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-mint,
html[data-vanvi-theme="dark"] .jewel-mint,
html[data-vanvi-theme="night"] .jewel-mint {
  color: var(--vanvi-mint-glow) !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.5) !important;
}

html[data-vanvi-theme="emerald"] .jewel-champagne,
html[data-vanvi-theme="dark"] .jewel-champagne,
html[data-vanvi-theme="night"] .jewel-champagne {
  color: var(--vanvi-champagne-pearl) !important;
  text-shadow: 0 0 12px rgba(254, 243, 199, 0.5) !important;
}

/* Vibrant Multi-Chromatic Glowing Cards Hover in Dark Mode */
html[data-vanvi-theme="emerald"] body div[class*="card"]:hover,
html[data-vanvi-theme="dark"] body div[class*="card"]:hover,
html[data-vanvi-theme="night"] body div[class*="card"]:hover,
html[data-vanvi-theme="emerald"] body section[class*="card"]:hover,
html[data-vanvi-theme="dark"] body section[class*="card"]:hover,
html[data-vanvi-theme="night"] body section[class*="card"]:hover,
html[data-vanvi-theme="emerald"] body .template-card:hover,
html[data-vanvi-theme="dark"] body .template-card:hover,
html[data-vanvi-theme="night"] body .template-card:hover,
html[data-vanvi-theme="emerald"] body .catalog-card:hover,
html[data-vanvi-theme="dark"] body .catalog-card:hover,
html[data-vanvi-theme="night"] body .catalog-card:hover {
  border-color: rgba(245, 158, 11, 0.75) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85), 0 0 28px rgba(245, 158, 11, 0.25), 0 0 42px rgba(16, 185, 129, 0.22) !important;
  transform: translateY(-3.5px) !important;
}

/* Multi-colored glowing badges and pills in Dark Mode */
html[data-vanvi-theme="emerald"] .badge,
html[data-vanvi-theme="dark"] .badge,
html[data-vanvi-theme="night"] .badge,
html[data-vanvi-theme="emerald"] .pill:not(.nav-btn),
html[data-vanvi-theme="dark"] .pill:not(.nav-btn),
html[data-vanvi-theme="night"] .pill:not(.nav-btn) {
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2) !important;
}

/* Inputs, Selects & Forms (Onyx Velvet Base with Gold-Emerald Glow Border) */
html[data-vanvi-theme="emerald"] input,
html[data-vanvi-theme="dark"] input,
html[data-vanvi-theme="night"] input,
html[data-vanvi-theme="emerald"] select,
html[data-vanvi-theme="dark"] select,
html[data-vanvi-theme="night"] select,
html[data-vanvi-theme="emerald"] textarea,
html[data-vanvi-theme="dark"] textarea,
html[data-vanvi-theme="night"] textarea {
  background: rgba(9, 14, 20, 0.95) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
html[data-vanvi-theme="emerald"] input:focus,
html[data-vanvi-theme="dark"] input:focus,
html[data-vanvi-theme="night"] input:focus,
html[data-vanvi-theme="emerald"] textarea:focus,
html[data-vanvi-theme="dark"] textarea:focus,
html[data-vanvi-theme="night"] textarea:focus {
  border-color: #34D399 !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25) !important;
}
html[data-vanvi-theme="emerald"] input::placeholder,
html[data-vanvi-theme="dark"] input::placeholder,
html[data-vanvi-theme="night"] input::placeholder,
html[data-vanvi-theme="emerald"] textarea::placeholder,
html[data-vanvi-theme="dark"] textarea::placeholder,
html[data-vanvi-theme="night"] textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 0.75;
}

/* Primary Luxury Buttons (Multi-Jewel Radiant Gradient: Mint Jade -> Cyan -> Royal Violet) */
html[data-vanvi-theme="emerald"] .primary,
html[data-vanvi-theme="dark"] .primary,
html[data-vanvi-theme="night"] .primary,
html[data-vanvi-theme="emerald"] .btn-primary,
html[data-vanvi-theme="dark"] .btn-primary,
html[data-vanvi-theme="night"] .btn-primary,
html[data-vanvi-theme="emerald"] button.primary,
html[data-vanvi-theme="dark"] button.primary,
html[data-vanvi-theme="night"] button.primary,
html[data-vanvi-theme="emerald"] a.primary,
html[data-vanvi-theme="dark"] a.primary,
html[data-vanvi-theme="night"] a.primary {
  background: linear-gradient(135deg, #10B981 0%, #06B6D4 45%, #8B5CF6 100%) !important;
  color: #FFFFFF !important;
  font-weight: 850 !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45), 0 0 20px rgba(6, 182, 212, 0.32) !important;
}

/* Secondary Buttons (Onyx Emerald Glass + 24K Gold Rim) */
html[data-vanvi-theme="emerald"] .secondary,
html[data-vanvi-theme="dark"] .secondary,
html[data-vanvi-theme="night"] .secondary,
html[data-vanvi-theme="emerald"] .btn-secondary,
html[data-vanvi-theme="dark"] .btn-secondary,
html[data-vanvi-theme="night"] .btn-secondary,
html[data-vanvi-theme="emerald"] button.secondary,
html[data-vanvi-theme="dark"] button.secondary,
html[data-vanvi-theme="night"] button.secondary {
  background: rgba(14, 22, 28, 0.90) !important;
  color: #FBBF24 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}

/* Bottom Dock (Obsidian #0B0D0C + 24K Gold Rim & Multi-Jewel Tabs) */
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock,
html[data-vanvi-theme="night"] .vanvi-bottom-dock {
  background: rgba(8, 13, 18, 0.96) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.42) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 28px rgba(245, 158, 11, 0.20), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock button,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock button,
html[data-vanvi-theme="night"] .vanvi-bottom-dock button,
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock a,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock a,
html[data-vanvi-theme="night"] .vanvi-bottom-dock a,
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock .nav-btn,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock .nav-btn,
html[data-vanvi-theme="night"] .vanvi-bottom-dock .nav-btn {
  background: transparent !important;
  color: #A3BFB5 !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock button:hover,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock button:hover,
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock a:hover,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock a:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock #bottomNavHome.active,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock #bottomNavHome.active {
  background: transparent !important;
  color: #ff78af !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock #bottomNavExplore.active,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock #bottomNavExplore.active {
  background: transparent !important;
  color: #c084fc !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock .create,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock .create {
  background: linear-gradient(135deg, #F59E0B 0%, #10B981 50%, #8B5CF6 100%) !important;
  border: 1.5px solid rgba(254, 243, 199, 0.7) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.4) !important;
  color: #ffffff !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock #bottomNavRewards.active,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock #bottomNavRewards.active {
  background: transparent !important;
  color: #fbbf24 !important;
  border: none !important;
  box-shadow: none !important;
}
html[data-vanvi-theme="emerald"] .vanvi-bottom-dock #bottomNavMe.active,
html[data-vanvi-theme="dark"] .vanvi-bottom-dock #bottomNavMe.active {
  background: transparent !important;
  color: #34d399 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Spatial Glass Mode Bottom Dock */
html[data-vanvi-theme="glass"] .vanvi-bottom-dock {
  background: rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 16px 45px rgba(44, 18, 36, 0.12), inset 0 2px 2px rgba(255, 255, 255, 0.95) !important;
}

/* ==========================================================================
   UNIVERSAL TYPOGRAPHY OVERRIDES (APPLIES ACROSS ALL A-TO-Z PAGES)
   Guarantees 100% adherence over any local/inline styles
   ========================================================================== */

/* 1. Royal Atelier (Recommended) */
html[data-vanvi-font="royal"],
html[data-vanvi-font="royal"] body,
html[data-vanvi-font="royal"] p,
html[data-vanvi-font="royal"] span:not(.font-override),
html[data-vanvi-font="royal"] a,
html[data-vanvi-font="royal"] button,
html[data-vanvi-font="royal"] input,
html[data-vanvi-font="royal"] select,
html[data-vanvi-font="royal"] textarea {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
html[data-vanvi-font="royal"] h1,
html[data-vanvi-font="royal"] h2,
html[data-vanvi-font="royal"] h3,
html[data-vanvi-font="royal"] h4,
html[data-vanvi-font="royal"] .brand-title,
html[data-vanvi-font="royal"] .brand-logo-text,
html[data-vanvi-font="royal"] [class*="heading"] {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
}

/* 2. Imperial Majestic (Cinzel) */
html[data-vanvi-font="cinzel"],
html[data-vanvi-font="cinzel"] body,
html[data-vanvi-font="cinzel"] p,
html[data-vanvi-font="cinzel"] span:not(.font-override),
html[data-vanvi-font="cinzel"] a,
html[data-vanvi-font="cinzel"] button,
html[data-vanvi-font="cinzel"] input,
html[data-vanvi-font="cinzel"] select,
html[data-vanvi-font="cinzel"] textarea {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
html[data-vanvi-font="cinzel"] h1,
html[data-vanvi-font="cinzel"] h2,
html[data-vanvi-font="cinzel"] h3,
html[data-vanvi-font="cinzel"] h4,
html[data-vanvi-font="cinzel"] .brand-title,
html[data-vanvi-font="cinzel"] .brand-logo-text,
html[data-vanvi-font="cinzel"] [class*="heading"] {
  font-family: 'Cinzel', Georgia, serif !important;
  letter-spacing: 0.5px !important;
}

/* 3. Editorial Vogue (Playfair Display) */
html[data-vanvi-font="editorial"],
html[data-vanvi-font="editorial"] body,
html[data-vanvi-font="editorial"] p,
html[data-vanvi-font="editorial"] span:not(.font-override),
html[data-vanvi-font="editorial"] a,
html[data-vanvi-font="editorial"] button,
html[data-vanvi-font="editorial"] input,
html[data-vanvi-font="editorial"] select,
html[data-vanvi-font="editorial"] textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
html[data-vanvi-font="editorial"] h1,
html[data-vanvi-font="editorial"] h2,
html[data-vanvi-font="editorial"] h3,
html[data-vanvi-font="editorial"] h4,
html[data-vanvi-font="editorial"] .brand-title,
html[data-vanvi-font="editorial"] .brand-logo-text,
html[data-vanvi-font="editorial"] [class*="heading"] {
  font-family: 'Playfair Display', Georgia, serif !important;
}

/* 4. Modern Minimal (Outfit) */
html[data-vanvi-font="modern"],
html[data-vanvi-font="modern"] body,
html[data-vanvi-font="modern"] p,
html[data-vanvi-font="modern"] span:not(.font-override),
html[data-vanvi-font="modern"] a,
html[data-vanvi-font="modern"] button,
html[data-vanvi-font="modern"] input,
html[data-vanvi-font="modern"] select,
html[data-vanvi-font="modern"] textarea {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}
html[data-vanvi-font="modern"] h1,
html[data-vanvi-font="modern"] h2,
html[data-vanvi-font="modern"] h3,
html[data-vanvi-font="modern"] h4,
html[data-vanvi-font="modern"] .brand-title,
html[data-vanvi-font="modern"] .brand-logo-text,
html[data-vanvi-font="modern"] [class*="heading"] {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
}

/* 5. Romantic Handwritten (Caveat Cursive) */
html[data-vanvi-font="handwritten"],
html[data-vanvi-font="handwritten"] body,
html[data-vanvi-font="handwritten"] p,
html[data-vanvi-font="handwritten"] span:not(.font-override),
html[data-vanvi-font="handwritten"] a,
html[data-vanvi-font="handwritten"] button,
html[data-vanvi-font="handwritten"] input,
html[data-vanvi-font="handwritten"] select,
html[data-vanvi-font="handwritten"] textarea {
  font-family: 'Caveat', cursive, sans-serif !important;
}
html[data-vanvi-font="handwritten"] h1,
html[data-vanvi-font="handwritten"] h2,
html[data-vanvi-font="handwritten"] h3,
html[data-vanvi-font="handwritten"] h4,
html[data-vanvi-font="handwritten"] .brand-title,
html[data-vanvi-font="handwritten"] .brand-logo-text,
html[data-vanvi-font="handwritten"] [class*="heading"] {
  font-family: 'Caveat', cursive, sans-serif !important;
}
body {
  font-family: var(--vanvi-font-body, 'Plus Jakarta Sans', system-ui, sans-serif);
}
h1, h2, h3, h4 {
  font-family: var(--vanvi-font-heading, 'Cormorant Garamond', Georgia, serif);
}
*, *::before, *::after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}

/* Responsive Grid protection for all category and catalog pages */
@media (max-width: 640px) {
  .grid,
  .template-grid,
  .templates-grid {
    grid-template-columns: 1fr !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 14px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 360px) {
  .grid,
  .template-grid,
  .templates-grid {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 10px !important;
  }
}

/* Safe-area bottom padding on pages with dock: ONLY on Mobile (<= 768px) */
@media (max-width: 768px) {
  body.has-vanvi-dock {
    padding-bottom: max(78px, calc(72px + env(safe-area-inset-bottom, 0px))) !important;
  }
}
@media (min-width: 769px) {
  body.has-vanvi-dock {
    padding-bottom: 74px !important;
  }
}

/* ==========================================================================
   1. GLOBAL BOTTOM NAVIGATION DOCK (MOBILE-ONLY SMART DOCK - COMPACT REDESIGN)
   Compact, lightweight, elegant 1-thumb mobile app navigation.
   Sleek height, zero wasted space, refined romantic rose/gold accents.
   ========================================================================== */
.bottom,
.vanvi-bottom-dock {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: max(6px, env(safe-area-inset-bottom, 6px)) !important;
  z-index: 9999 !important;
  width: calc(100% - 20px) !important;
  max-width: 380px !important;
  padding: 3.5px 4px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 180, 215, 0.45) !important;
  box-shadow: 
    0 8px 26px rgba(44, 18, 36, 0.08),
    0 2px 8px rgba(255, 42, 122, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

/* Navigation Tabs & Links — SEAMLESS FLOATING DOCK (NOT CLUNKY BUTTONS) */
html body .bottom .nav-btn:not(.create),
html body .vanvi-bottom-dock .nav-btn:not(.create),
html body .bottom button:not(.create),
html body .bottom a:not(.create),
html body .vanvi-bottom-dock button:not(.create),
html body .vanvi-bottom-dock a:not(.create),
html body #bottomNavHome,
html body #bottomNavExplore,
html body #bottomNavRewards,
html body #bottomNavMe,
.bottom button,
.bottom a,
.vanvi-bottom-dock button,
.vanvi-bottom-dock a,
.vanvi-bottom-dock .nav-btn {
  background: transparent !important;
  color: #6b4d66 !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15px !important;
  padding: 3px 2px 2px !important;
  border-radius: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  text-align: center !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  min-width: 0 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

html body .bottom .nav-btn:not(.create):hover,
html body .vanvi-bottom-dock .nav-btn:not(.create):hover,
html body #bottomNavHome:hover,
html body #bottomNavExplore:hover,
html body #bottomNavRewards:hover,
html body #bottomNavMe:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
}

html body .bottom .nav-btn:not(.create).active,
html body .vanvi-bottom-dock .nav-btn:not(.create).active,
html body #bottomNavHome.active,
html body #bottomNavExplore.active,
html body #bottomNavRewards.active,
html body #bottomNavMe.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 850 !important;
  transform: none !important;
}

.bottom button br,
.bottom a br,
.vanvi-bottom-dock button br,
.vanvi-bottom-dock a br {
  display: none !important;
}

/* Dock Icon & Label Elements */
.dock-icon {
  font-size: 14px !important;
  line-height: 1 !important;
  margin-bottom: 2.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease !important;
}

.dock-svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), stroke 0.18s ease, filter 0.2s ease !important;
}

.dock-svg-plus {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: #ffffff !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.dock-label {
  font-size: 8.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  max-width: 100% !important;
  transition: color 0.18s ease, font-weight 0.18s ease !important;
}

/* Hover & Press Micro-Interactions (Clean 3D Feel without Button Boxes) */
.bottom button:hover,
.bottom a:hover,
.vanvi-bottom-dock button:hover,
.vanvi-bottom-dock a:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.bottom button:active,
.bottom a:active,
.vanvi-bottom-dock button:active,
.vanvi-bottom-dock a:active {
  transform: scale(0.94) !important;
}

/* Active State Base */
.bottom button.active,
.bottom a.active,
.vanvi-bottom-dock button.active,
.vanvi-bottom-dock a.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

/* 1. HOME TAB — CANDY ROSE (Vibrant & Glowing 3D Feel) */
.vanvi-bottom-dock #bottomNavHome:hover .dock-svg,
.bottom #bottomNavHome:hover .dock-svg,
.vanvi-bottom-dock a[href*="index.html"]:hover .dock-svg {
  stroke: #ff2a7a !important;
  filter: drop-shadow(0 2px 6px rgba(255, 42, 122, 0.45)) !important;
  transform: translateY(-2px) scale(1.15) !important;
}
.vanvi-bottom-dock #bottomNavHome:hover .dock-label,
.bottom #bottomNavHome:hover .dock-label {
  color: #ff2a7a !important;
}
.vanvi-bottom-dock #bottomNavHome.active,
.bottom #bottomNavHome.active,
.vanvi-bottom-dock a[href*="index.html"].active {
  color: #ff2a7a !important;
}
.vanvi-bottom-dock #bottomNavHome.active .dock-svg,
.bottom #bottomNavHome.active .dock-svg,
.vanvi-bottom-dock a[href*="index.html"].active .dock-svg {
  stroke: #ff2a7a !important;
  filter: drop-shadow(0 2.5px 8px rgba(255, 42, 122, 0.55)) !important;
  transform: translateY(-1.5px) scale(1.12) !important;
}
.vanvi-bottom-dock #bottomNavHome.active .dock-label,
.bottom #bottomNavHome.active .dock-label {
  color: #ff2a7a !important;
  font-weight: 850 !important;
}
.vanvi-bottom-dock #bottomNavHome.active::after,
.bottom #bottomNavHome.active::after,
.vanvi-bottom-dock a[href*="index.html"].active::after {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #ff2a7a, #ff78af) !important;
  margin: 2px auto 0 !important;
  box-shadow: 0 1px 5px rgba(255, 42, 122, 0.7) !important;
}

/* 2. EXPLORE TAB — ROYAL VIOLET JEWEL */
.vanvi-bottom-dock #bottomNavExplore:hover .dock-svg,
.bottom #bottomNavExplore:hover .dock-svg,
.vanvi-bottom-dock a[href*="templates.html"]:not(.create):hover .dock-svg {
  stroke: #7c3aed !important;
  filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.45)) !important;
  transform: translateY(-2px) scale(1.15) !important;
}
.vanvi-bottom-dock #bottomNavExplore:hover .dock-label,
.bottom #bottomNavExplore:hover .dock-label {
  color: #7c3aed !important;
}
.vanvi-bottom-dock #bottomNavExplore.active,
.bottom #bottomNavExplore.active,
.vanvi-bottom-dock a[href*="templates.html"]:not(.create).active {
  color: #7c3aed !important;
}
.vanvi-bottom-dock #bottomNavExplore.active .dock-svg,
.bottom #bottomNavExplore.active .dock-svg,
.vanvi-bottom-dock a[href*="templates.html"]:not(.create).active .dock-svg {
  stroke: #7c3aed !important;
  filter: drop-shadow(0 2.5px 8px rgba(124, 58, 237, 0.55)) !important;
  transform: translateY(-1.5px) scale(1.12) !important;
}
.vanvi-bottom-dock #bottomNavExplore.active .dock-label,
.bottom #bottomNavExplore.active .dock-label {
  color: #7c3aed !important;
  font-weight: 850 !important;
}
.vanvi-bottom-dock #bottomNavExplore.active::after,
.bottom #bottomNavExplore.active::after,
.vanvi-bottom-dock a[href*="templates.html"]:not(.create).active::after {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #7c3aed, #a855f7) !important;
  margin: 2px auto 0 !important;
  box-shadow: 0 1px 5px rgba(124, 58, 237, 0.7) !important;
}

/* 3. CENTER CREATE BUTTON (+) — THE ONE DELIBERATE 3D CANDY SUNSET BUTTON */
.bottom .create,
.vanvi-bottom-dock .create,
#bottomNavCreate {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff2a7a 0%, #ff529a 38%, #f59e0b 78%, #d97706 100%) !important;
  border-radius: 18px !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  box-shadow: 
    0 8px 24px rgba(255, 42, 122, 0.45),
    0 0 14px rgba(245, 158, 11, 0.32),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(180, 20, 70, 0.35) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
  transform: translateY(-4px) !important;
  margin-top: 0 !important;
  min-height: 40px !important;
  animation: vanviDockCreateFloat 3s ease-in-out infinite alternate !important;
}
@keyframes vanviDockCreateFloat {
  0% { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(255, 42, 122, 0.4), 0 0 12px rgba(245, 158, 11, 0.28); }
  100% { transform: translateY(-6px); box-shadow: 0 10px 28px rgba(255, 42, 122, 0.55), 0 0 20px rgba(245, 158, 11, 0.48); }
}

.bottom .create .create-plus,
.vanvi-bottom-dock .create .create-plus,
#bottomNavCreate .create-plus {
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.bottom .create .dock-label,
.vanvi-bottom-dock .create .dock-label {
  color: #ffffff !important;
}

.bottom .create:hover,
.vanvi-bottom-dock .create:hover,
#bottomNavCreate:hover {
  transform: translateY(-7px) scale(1.05) !important;
  box-shadow: 0 12px 32px rgba(255, 42, 122, 0.6), 0 0 24px rgba(245, 158, 11, 0.55), inset 0 2px 3px #fff !important;
  filter: brightness(1.08) !important;
  color: #ffffff !important;
}

.bottom .create:active,
.vanvi-bottom-dock .create:active,
#bottomNavCreate:active {
  transform: translateY(-2px) scale(0.95) !important;
  box-shadow: 0 4px 12px rgba(255, 42, 122, 0.35) !important;
}

/* 4. REWARDS TAB — SPARKLING AMBER SUNBURST GOLD */
.vanvi-bottom-dock #bottomNavRewards:hover .dock-svg,
.bottom #bottomNavRewards:hover .dock-svg,
.vanvi-bottom-dock a[href*="rewards.html"]:hover .dock-svg {
  stroke: #d97706 !important;
  filter: drop-shadow(0 2px 6px rgba(217, 119, 6, 0.45)) !important;
  transform: translateY(-2px) scale(1.15) !important;
}
.vanvi-bottom-dock #bottomNavRewards:hover .dock-label,
.bottom #bottomNavRewards:hover .dock-label {
  color: #d97706 !important;
}
.vanvi-bottom-dock #bottomNavRewards.active,
.bottom #bottomNavRewards.active,
.vanvi-bottom-dock a[href*="rewards.html"].active {
  color: #d97706 !important;
}
.vanvi-bottom-dock #bottomNavRewards.active .dock-svg,
.bottom #bottomNavRewards.active .dock-svg,
.vanvi-bottom-dock a[href*="rewards.html"].active .dock-svg {
  stroke: #d97706 !important;
  filter: drop-shadow(0 2.5px 8px rgba(217, 119, 6, 0.55)) !important;
  transform: translateY(-1.5px) scale(1.12) !important;
}
.vanvi-bottom-dock #bottomNavRewards.active .dock-label,
.bottom #bottomNavRewards.active .dock-label {
  color: #d97706 !important;
  font-weight: 850 !important;
}
.vanvi-bottom-dock #bottomNavRewards.active::after,
.bottom #bottomNavRewards.active::after,
.vanvi-bottom-dock a[href*="rewards.html"].active::after {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #d97706, #fbbf24) !important;
  margin: 2px auto 0 !important;
  box-shadow: 0 1px 5px rgba(217, 119, 6, 0.7) !important;
}

/* 5. PROFILE TAB — FRESH JADE EMERALD */
.vanvi-bottom-dock #bottomNavMe:hover .dock-svg,
.bottom #bottomNavMe:hover .dock-svg,
.vanvi-bottom-dock a[href*="profile.html"]:hover .dock-svg {
  stroke: #059669 !important;
  filter: drop-shadow(0 2px 6px rgba(5, 150, 105, 0.45)) !important;
  transform: translateY(-2px) scale(1.15) !important;
}
.vanvi-bottom-dock #bottomNavMe:hover .dock-label,
.bottom #bottomNavMe:hover .dock-label {
  color: #059669 !important;
}
.vanvi-bottom-dock #bottomNavMe.active,
.bottom #bottomNavMe.active,
.vanvi-bottom-dock a[href*="profile.html"].active {
  color: #059669 !important;
}
.vanvi-bottom-dock #bottomNavMe.active .dock-svg,
.bottom #bottomNavMe.active .dock-svg,
.vanvi-bottom-dock a[href*="profile.html"].active .dock-svg {
  stroke: #059669 !important;
  filter: drop-shadow(0 2.5px 8px rgba(5, 150, 105, 0.55)) !important;
  transform: translateY(-1.5px) scale(1.12) !important;
}
.vanvi-bottom-dock #bottomNavMe.active .dock-label,
.bottom #bottomNavMe.active .dock-label {
  color: #059669 !important;
  font-weight: 850 !important;
}
.vanvi-bottom-dock #bottomNavMe.active::after,
.bottom #bottomNavMe.active::after,
.vanvi-bottom-dock a[href*="profile.html"].active::after {
  content: "" !important;
  display: block !important;
  width: 12px !important;
  height: 2.5px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #059669, #34d399) !important;
  margin: 2px auto 0 !important;
  box-shadow: 0 1px 5px rgba(5, 150, 105, 0.7) !important;
}

/* Ultra-Compact Screens (<= 359px: iPhone SE, older Android) */
@media (max-width: 359px) {
  .bottom,
  .vanvi-bottom-dock {
    width: calc(100% - 12px) !important;
    max-width: 330px !important;
    bottom: 5px !important;
    padding: 2.5px 3px !important;
    gap: 2px !important;
    border-radius: 17px !important;
  }
  .bottom button,
  .bottom a,
  .vanvi-bottom-dock button,
  .vanvi-bottom-dock a {
    font-size: 7px !important;
    padding: 2px 1px !important;
    border-radius: 11px !important;
    min-height: 35px !important;
  }
  .dock-svg {
    width: 13.5px !important;
    height: 13.5px !important;
  }
  .dock-label {
    font-size: 7px !important;
  }
  .bottom .create,
  .vanvi-bottom-dock .create {
    font-size: 7px !important;
    border-radius: 12px !important;
    min-height: 35px !important;
  }
}

/* ==========================================================================
   LAPTOP & DESKTOP SMART FLOATING GLASS PILL DOCK (>= 769px)
   Smartly integrated floating luxury pill dock at bottom center.
   Unobtrusive, beautifully compact, perfectly accessible without disturbing page content.
   ========================================================================== */
@media (min-width: 769px) {
  .bottom,
  .vanvi-bottom-dock,
  .bottom-dock {
    display: inline-flex !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 620px !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border: 1.2px solid rgba(255, 120, 175, 0.35) !important;
    box-shadow: 
      0 16px 45px rgba(225, 29, 72, 0.16),
      0 4px 16px rgba(0, 0, 0, 0.06),
      0 0 24px rgba(255, 42, 122, 0.12),
      inset 0 1.5px 2px #ffffff !important;
    z-index: 9999 !important;
    gap: 6px !important;
    grid-template-columns: unset !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
  }

  /* Desktop Dark / Emerald Theme */
  html[data-vanvi-theme="emerald"] .vanvi-bottom-dock,
  html[data-vanvi-theme="dark"] .vanvi-bottom-dock,
  html[data-vanvi-theme="night"] .vanvi-bottom-dock {
    background: rgba(11, 13, 12, 0.92) !important;
    border: 1.2px solid rgba(214, 184, 120, 0.42) !important;
    box-shadow: 
      0 18px 50px rgba(0, 0, 0, 0.75),
      0 0 25px rgba(24, 168, 120, 0.22),
      inset 0 1px 1px rgba(214, 184, 120, 0.25) !important;
  }

  /* Desktop Nav Tabs — Seamless and Clean */
  .bottom button,
  .bottom a,
  .vanvi-bottom-dock button,
  .vanvi-bottom-dock a,
  .vanvi-bottom-dock .nav-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    min-height: 38px !important;
    min-width: auto !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #55394f !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    letter-spacing: 0.15px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .bottom button:hover,
  .bottom a:hover,
  .vanvi-bottom-dock button:hover,
  .vanvi-bottom-dock a:hover,
  .vanvi-bottom-dock .nav-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    color: #ff2a7a !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(255, 42, 122, 0.1) !important;
  }

  /* Active Tab on Desktop */
  .vanvi-bottom-dock .nav-btn.active,
  .vanvi-bottom-dock a.active {
    transform: translateY(-1px) !important;
    background: rgba(255, 240, 246, 0.8) !important;
    color: #ff2a7a !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(255, 42, 122, 0.15) !important;
    font-weight: 850 !important;
  }

  /* Templates / Create Center Button on Desktop */
  .bottom .create,
  .vanvi-bottom-dock .create {
    transform: none !important;
    background: linear-gradient(135deg, #ff2a7a 0%, #ff529a 50%, #d97706 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(255, 42, 122, 0.35) !important;
    padding: 7px 18px !important;
    font-weight: 850 !important;
  }

  .bottom .create:hover,
  .vanvi-bottom-dock .create:hover {
    transform: none !important;
    box-shadow: 0 8px 22px rgba(255, 42, 122, 0.45) !important;
    color: #ffffff !important;
    filter: brightness(1.08) !important;
  }

  .bottom .create .dock-label,
  .vanvi-bottom-dock .create .dock-label {
    color: #ffffff !important;
    font-weight: 850 !important;
  }

  .bottom .create-plus,
  .vanvi-bottom-dock .create-plus {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bottom .create-plus svg,
  .vanvi-bottom-dock .create-plus svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
  }

  .dock-icon {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .dock-svg {
    width: 16px !important;
    height: 16px !important;
  }

  .dock-label {
    font-size: 11.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Safe Padding so page contents never get overlapped */
  body.has-vanvi-dock {
    padding-bottom: 74px !important;
  }
}

/* ==========================================================================
   2. GLOBAL PREMIUM BACK BUTTON (‹ Back) — Compact Floating Glass
   ========================================================================== */
.vanvi-btn-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 28px !important;
  padding: 3.5px 10px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 244, 248, 0.38) 48%, rgba(240, 235, 255, 0.32) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 0.85px solid rgba(255, 230, 239, 0.68) !important;
  color: #4A293A !important;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15px !important;
  text-decoration: none !important;
  box-shadow: 
    0 2px 8px rgba(74, 41, 58, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.02),
    inset 0 1px 0.8px rgba(255, 255, 255, 0.9),
    inset 0 -0.5px 0.5px rgba(217, 185, 121, 0.28) !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.vanvi-btn-back .back-arrow {
  font-size: 13.5px !important;
  line-height: 1 !important;
  color: #ff2a7a !important;
  font-weight: 500 !important;
  display: inline-block !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.vanvi-btn-back:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 238, 245, 0.54) 48%, rgba(232, 225, 255, 0.46) 100%) !important;
  border-color: rgba(255, 182, 217, 0.85) !important;
  color: #ff2a7a !important;
  transform: translateY(-1px) !important;
  box-shadow: 
    0 4px 14px rgba(74, 41, 58, 0.07),
    0 1px 4px rgba(217, 87, 127, 0.08),
    inset 0 1px 1px #ffffff,
    inset 0 -0.5px 0.5px rgba(217, 185, 121, 0.42) !important;
}

.vanvi-btn-back:hover .back-arrow {
  transform: translateX(-1.5px) !important;
}

.vanvi-btn-back:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 
    0 1px 4px rgba(74, 41, 58, 0.03),
    inset 0 0.8px 0.5px rgba(255, 255, 255, 0.75) !important;
}

/* Prevent duplicate docks */
.bottom-dock:not(.bottom):not(.vanvi-bottom-dock) {
  display: none !important;
}

/* ==========================================================================
   3. GLOBAL PERMANENT BRAND RULE: LOGO = BRAND ONLY, LOGO CLICK = NO ACTION
   ========================================================================== */
.brand,
.brand-link,
.brand-title,
.brand-display,
.ai-brand-logo,
.auth-brand,
.site-logo {
  cursor: default !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   4. GLOBAL RESPONSIVE HEADER & BUTTON MANAGEMENT SYSTEM (ALL DEVICES)
   Adapted for 320px, 360px, 375px, 390px, 414px, 768px, 1024px, 1280px+
   ========================================================================== */

/* Base Header Layout Across All Pages */
header:not(.page-hero):not(.hero):not(.category-hero):not(.site-hero),
.app-header,
.top-nav,
.site-header,
.rewards-header,
.detail-nav {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px clamp(12px, 3vw, 24px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(255, 220, 235, 0.65) !important;
  gap: 8px !important;
}

/* Prevent Horizontal Overflow Globally */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Brand Link / Group Behavior (Brand Only, No Navigation) */
.brand,
.brand-link,
.brand-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: #2c1224 !important;
  cursor: pointer !important;
  user-select: none !important;
  pointer-events: auto !important;
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}
.brand:hover,
.brand-link:hover,
.brand-group:hover,
.header-brand:hover {
  opacity: 0.88 !important;
  transform: scale(0.98) !important;
}
.brand:active,
.brand-link:active,
.header-brand:active {
  transform: scale(0.95) !important;
}

.brand svg,
.brand-link svg,
.brand-spark {
  flex-shrink: 0 !important;
}

/* Header Actions Container */
.header-actions,
.header-nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Base Premium Glass Style for All Header Action Buttons */
.btn-header-action,
.btn-header-link,
.header-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 12px !important;
  border-radius: 99px !important;
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.2px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 220, 235, 0.7) !important;
  color: #72576d !important;
  box-shadow: 0 2px 6px rgba(74, 41, 58, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.btn-header-action:hover,
.btn-header-link:hover,
.header-chip:hover {
  background: #ffffff !important;
  border-color: rgba(255, 42, 122, 0.5) !important;
  color: #ff2a7a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 42, 122, 0.15), inset 0 1px 0 #ffffff !important;
}

/* Primary Header Action (+ Create / + New Moment) */
.btn-header-primary,
.header-actions .btn-header-primary,
.header-nav-actions .btn-header-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6.5px 14px !important;
  border-radius: 99px !important;
  font-family: 'Plus Jakarta Sans', Inter, -apple-system, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 850 !important;
  background: linear-gradient(135deg, #ff2a7a, #ff6599) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: 0 3px 12px rgba(255, 42, 122, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.btn-header-primary:hover {
  background: linear-gradient(135deg, #ff176f, #ff4c8a) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 6px 18px rgba(255, 42, 122, 0.38) !important;
  color: #ffffff !important;
}

/* Sub Breadcrumb Bar Integration */
.breadcrumb-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------
   RESPONSIVE BREAKPOINTS (SMART BUTTON PRIORITY & LOGO PROTECTION)
   ------------------------------------------------------------- */

/* Tablet & Smaller Laptops (769px - 1024px) */
@media (max-width: 1024px) {
  header:not(.page-hero):not(.hero):not(.category-hero):not(.site-hero), .app-header, .top-nav, .site-header, .rewards-header, .detail-nav {
    padding: 9px clamp(12px, 2.5vw, 18px) !important;
  }
}

/* Tablets & Mobile Screens (<= 768px):
   Smart limited buttons so the VANVI MOMENTS logo has 100% ample room to shine!
   Secondary links are hidden here because they already exist in the mobile bottom dock. */
@media (max-width: 768px) {
  header:not(.page-hero):not(.hero):not(.category-hero):not(.site-hero), .app-header, .top-nav, .site-header, .rewards-header, .detail-nav {
    padding: 8px 12px !important;
    gap: 8px !important;
    justify-content: space-between !important;
  }
  .brand, .brand-link, .brand-group {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .brand svg, .brand-link svg, .brand-spark {
    width: clamp(20px, 4vw, 24px) !important;
    height: clamp(20px, 4vw, 24px) !important;
    flex-shrink: 0 !important;
  }
  /* On mobile, hide secondary text links from header to prevent pushing or squishing the logo */
  .header-actions .btn-header-link,
  .header-nav-actions .btn-header-link,
  .header-actions .btn-header-secondary,
  .header-actions a[href*="templates"]:not(.btn-header-primary),
  .header-actions a[href*="ai"]:not(.btn-header-primary),
  .header-actions a[href*="dashboard"]:not(.btn-header-primary),
  .header-actions a[href*="plans"]:not(.btn-header-primary),
  .header-actions a[href*="faq"]:not(.btn-header-primary),
  .header-actions a[href*="terms"]:not(.btn-header-primary),
  .header-actions a[href*="contact"]:not(.btn-header-primary),
  .header-actions a[href*="support"]:not(.btn-header-primary),
  .header-actions .btn-header-action[title*="Templates"],
  .header-actions .btn-header-action[title*="Plans"],
  .header-actions .btn-header-action[title*="AI"],
  .header-actions .btn-header-action[title*="Moments"],
  .header-actions a:not(.btn-header-primary):not(:last-child) {
    display: none !important;
  }
  /* Keep only the primary action button (+ Create or primary CTA) */
  .header-actions,
  .header-nav-actions {
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .btn-header-primary,
  .btn-header-action.btn-header-primary {
    padding: 6px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* Mobile Screens (<= 480px) */
@media (max-width: 480px) {
  header:not(.page-hero):not(.hero):not(.category-hero):not(.site-hero), .app-header, .top-nav, .site-header, .rewards-header, .detail-nav {
    padding: 7px 10px !important;
    gap: 6px !important;
  }
  /* Hide decorative subtitle tags (PLANS, REFUNDS, SHARE, STUDIO, etc.) on small screens to guarantee zero squeeze */
  .brand-tag,
  .brand-badge-matcher,
  .brand-badge,
  .brand-page-tag {
    display: none !important;
  }
  .btn-header-primary {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
  }
}

/* Micro Mobile Screens (<= 360px and 320px) */
@media (max-width: 360px) {
  header:not(.page-hero):not(.hero):not(.category-hero):not(.site-hero), .app-header, .top-nav, .site-header, .rewards-header, .detail-nav {
    padding: 5px 6px !important;
    gap: 4px !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .brand-title, .brand-text, .brand span, .brand-link span {
    font-size: 12.5px !important;
  }
  .btn-header-primary,
  .btn-header-action.btn-header-primary {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  .category-switch-bar,
  .category-bar,
  .category-nav-scroll,
  .vanvi-filter-pills,
  .filter-pills,
  .template-filters {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }
}

/* ==========================================================================
   GLOBAL MASTER FILTER & CATEGORY BUTTON DESIGN SYSTEM
   Readable (12-13px) · Tactile Elevation · Fast Transition · Ultra-Luxury
   ========================================================================== */
.vanvi-filter-pills,
.filter-pills,
.category-nav-scroll,
.template-filters {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}
.vanvi-filter-pills::-webkit-scrollbar,
.filter-pills::-webkit-scrollbar,
.category-nav-scroll::-webkit-scrollbar,
.template-filters::-webkit-scrollbar {
  display: none !important;
}

/* Master Filter Chip & Category Button Base */
.filter-chip,
.filter-pill,
.cat-tab-btn,
.vanvi-filter-btn {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  min-height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(255, 120, 175, 0.28) !important;
  color: #4a2840 !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(255, 120, 175, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s ease, 
              border-color 0.2s ease, 
              background 0.2s ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover & Active States */
.filter-chip:hover,
.filter-pill:hover,
.cat-tab-btn:hover,
.vanvi-filter-btn:hover {
  transform: translateY(-2px) !important;
  border-color: #ff2a7a !important;
  color: #ff2a7a !important;
  background: #fff5f8 !important;
  box-shadow: 0 8px 22px rgba(255, 42, 122, 0.18) !important;
}

.filter-chip:active,
.filter-pill:active,
.cat-tab-btn:active,
.vanvi-filter-btn:active {
  transform: scale(0.96) !important;
}

.filter-chip.active,
.cat-tab-btn.active {
  background: linear-gradient(135deg, #ff2a7a 0%, #ec4899 50%, #9333ea 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 22px rgba(255, 42, 122, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-weight: 850 !important;
}

.filter-pill.active {
  background: linear-gradient(135deg, rgba(255, 42, 122, 0.14), rgba(168, 85, 247, 0.14)) !important;
  border-color: #ff2a7a !important;
  color: #ff2a7a !important;
  font-weight: 850 !important;
  box-shadow: 0 4px 14px rgba(255, 42, 122, 0.18) !important;
}

/* Compact Mobile Filter adjustments */
@media (max-width: 480px) {
  .filter-chip,
  .filter-pill,
  .cat-tab-btn,
  .vanvi-filter-btn {
    padding: 7px 13px !important;
    font-size: 11.5px !important;
    min-height: 34px !important;
    gap: 5px !important;
  }
}

/* ==========================================================================
   GLOBAL TEMPLATE CARD & ACTION BUTTONS (ALL CATEGORIES & EXPLORE)
   ========================================================================== */
.btn-preview {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #4a2840 !important;
  border: 1.2px solid rgba(255, 120, 175, 0.35) !important;
  box-shadow: 0 2px 8px rgba(74, 41, 58, 0.05), inset 0 1px 0 #ffffff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-preview:hover {
  background: #ffffff !important;
  border-color: #ff2a7a !important;
  color: #ff2a7a !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 14px rgba(255, 42, 122, 0.16), inset 0 1px 0 #ffffff !important;
}

.btn-preview:active {
  transform: scale(0.97) !important;
}

.btn-create {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #ff2a7a 0%, #ff5b97 50%, #9333ea 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255, 42, 122, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.btn-create:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 7px 22px rgba(255, 42, 122, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

.btn-create:active {
  transform: scale(0.97) !important;
}

/* Category Switcher Pills */
.switch-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.2px solid rgba(255, 120, 175, 0.3) !important;
  color: #4a2840 !important;
  box-shadow: 0 2px 8px rgba(74, 41, 58, 0.05), inset 0 1px 0 #ffffff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.switch-pill:hover {
  transform: translateY(-1.5px) !important;
  border-color: #ff2a7a !important;
  color: #ff2a7a !important;
  background: #fff5f8 !important;
  box-shadow: 0 4px 14px rgba(255, 42, 122, 0.16) !important;
}

.switch-pill.active {
  background: linear-gradient(135deg, #ff2a7a 0%, #ec4899 50%, #9333ea 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px rgba(255, 42, 122, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  font-weight: 850 !important;
}

/* Price badges */
.price-free {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  font-weight: 850 !important;
}

.price-premium {
  background: rgba(217, 119, 6, 0.12) !important;
  color: #b45309 !important;
  border: 1px solid rgba(217, 119, 6, 0.28) !important;
  font-weight: 850 !important;
}

.pill-sub {
  background: rgba(255, 42, 122, 0.1) !important;
  color: #ff2a7a !important;
  border: 1px solid rgba(255, 42, 122, 0.25) !important;
  font-weight: 800 !important;
}

/* =========================================================
   LUXURY COOKIE CONSENT BANNER (GDPR / DPDP ACT 2023)
   Pearl Glassmorphism · Rose Gold Shimmer · Mobile Guard
   ========================================================= */
.vanvi-cookie-banner {
  position: fixed !important;
  bottom: 24px !important;
  left: 20px !important;
  right: 20px !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  z-index: 10001 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(255, 120, 175, 0.35) !important;
  border-radius: 20px !important;
  padding: 16px 20px !important;
  box-shadow: 0 16px 40px rgba(74, 41, 58, 0.14), 0 4px 12px rgba(255, 42, 122, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
  color: #2c1224 !important;
  animation: vanviBannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@media (max-width: 768px) {
  .vanvi-cookie-banner {
    bottom: max(82px, calc(74px + env(safe-area-inset-bottom, 8px))) !important;
    left: 10px !important;
    right: 68px !important;
    max-width: calc(100% - 78px) !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    z-index: 999 !important;
  }
}

@keyframes vanviBannerIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.vanvi-cookie-content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.vanvi-cookie-icon {
  font-size: 22px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.vanvi-cookie-text {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #4a2840 !important;
  flex: 1 !important;
}

.vanvi-cookie-text strong {
  color: #ff2a7a !important;
  font-weight: 750 !important;
}

.vanvi-cookie-link {
  color: #ff2a7a !important;
  text-decoration: underline !important;
  text-underline-offset: 2.5px !important;
  font-weight: 700 !important;
}

.vanvi-cookie-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.vanvi-cookie-btn {
  padding: 8px 18px !important;
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  outline: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.vanvi-cookie-btn-essential {
  background: rgba(255, 240, 246, 0.9) !important;
  color: #78536d !important;
  border: 1px solid rgba(255, 120, 175, 0.3) !important;
}

.vanvi-cookie-btn-essential:hover {
  background: #fff0f5 !important;
  color: #2c1224 !important;
  transform: translateY(-1px) !important;
}

.vanvi-cookie-btn-accept {
  background: linear-gradient(135deg, #ff2a7a 0%, #ff529a 50%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 42, 122, 0.3) !important;
}

.vanvi-cookie-btn-accept:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 42, 122, 0.42) !important;
}

/* ==========================================================================
   DYNAMIC BUTTON SHIMMER & MICRO-INTERACTIONS (ZERO LAYOUT BREAKAGE)
   ========================================================================== */
.btn-shimmer,
.btn-make-yours,
.home-btn-make-yours,
.btn-step-next,
.btn-copy-link,
.btn-open-live,
.btn-share-whatsapp,
.btn-showcase-cta,
.btn-studio-publish,
.btn-customize-cta,
.btn-open-moment,
button.primary {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s ease !important;
}

.btn-shimmer::after,
.btn-make-yours::after,
.home-btn-make-yours::after,
.btn-step-next::after,
.btn-copy-link::after,
.btn-open-live::after,
.btn-share-whatsapp::after,
.btn-showcase-cta::after,
.btn-studio-publish::after,
.btn-customize-cta::after,
.btn-open-moment::after,
button.primary::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -130% !important;
  width: 65% !important;
  height: 200% !important;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.03) 75%,
    transparent 100%
  ) !important;
  transform: rotate(25deg) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  animation: vanviDynamicShimmer 4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes vanviDynamicShimmer {
  0% {
    left: -130%;
  }
  28%, 100% {
    left: 230%;
  }
}

.btn-shimmer:active,
.btn-make-yours:active,
.home-btn-make-yours:active,
.btn-step-next:active {
  transform: scale(0.97) !important;
}

/* Universal Brand Signature Tag: by VISH */
.brand-by-vish {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 8.5px !important;
  font-weight: 850 !important;
  letter-spacing: 1.1px !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff2a7a 0%, #d97706 70%, #b45309 100%) !important;
  padding: 2px 7.5px 1.5px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  vertical-align: middle;
  margin-left: 4px;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.brand-luxury-polish:hover .brand-by-vish,
.brand-link:hover .brand-by-vish,
.brand:hover .brand-by-vish {
  transform: translateY(-1px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.45) !important;
}
html[data-vanvi-theme="dark"] .brand-by-vish {
  background: linear-gradient(135deg, #ff2a7a 0%, #f59e0b 100%) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35) !important;
  color: #ffffff !important;
}
html[data-vanvi-theme="dark"] .brand-text-main,
html[data-vanvi-theme="dark"] header .brand-text-main,
html[data-vanvi-theme="dark"] .brand-link span {
  color: #ffffff !important;
}
@media (max-width: 480px) {
  .brand-by-vish {
    font-size: 7.5px !important;
    padding: 1.5px 5.5px !important;
    letter-spacing: 0.8px !important;
  }
}

/* Floating Panda AI Assistant cluster display */
.ai-float-cluster {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  position: relative !important;
}

/* ==========================================================================
   VANVI x CLAYLO UNIVERSAL 3D CLAY ENGINE
   Inspired by Claylo (https://claylo.netlify.app/#cta)
   Puffy 3D Clay Surfaces, Specular Inset Highlights, Candy Pastel Accents,
   Disney Squash & Stretch Motion, and Smooth Tactile Interactions.
   ========================================================================== */

:root {
  /* Claylo Inset Physics & Shadow Primitives */
  --vanvi-clay-highlight-sm: inset 0 2px 2.5px rgba(255, 255, 255, 0.95), inset 0 8px 10px -6px rgba(255, 255, 255, 0.85);
  --vanvi-clay-shade-sm: inset 0 -3px 3.5px -1px rgba(180, 50, 110, 0.12);
  --vanvi-clay-contact-sm: 0 2px 4px rgba(180, 50, 110, 0.06);
  --vanvi-clay-ambient-sm: 0 6px 14px -3px rgba(180, 50, 110, 0.08);

  --vanvi-clay-highlight-md: inset 0 3px 3.5px rgba(255, 255, 255, 0.98), inset 0 14px 18px -8px rgba(255, 255, 255, 0.90);
  --vanvi-clay-shade-md: inset 0 -4.5px 5px -1px rgba(180, 50, 110, 0.14);
  --vanvi-clay-contact-md: 0 3px 6px rgba(180, 50, 110, 0.08);
  --vanvi-clay-ambient-md: 0 12px 24px -5px rgba(180, 50, 110, 0.10);

  --vanvi-clay-highlight-lg: inset 0 4px 4px rgba(255, 255, 255, 1), inset 0 20px 26px -10px rgba(255, 255, 255, 0.92);
  --vanvi-clay-shade-lg: inset 0 -6px 7px -2px rgba(180, 50, 110, 0.16);
  --vanvi-clay-contact-lg: 0 4px 8px rgba(180, 50, 110, 0.10);
  --vanvi-clay-ambient-lg: 0 20px 40px -8px rgba(180, 50, 110, 0.12);

  --vanvi-clay-sm: var(--vanvi-clay-highlight-sm), var(--vanvi-clay-shade-sm), var(--vanvi-clay-contact-sm), var(--vanvi-clay-ambient-sm);
  --vanvi-clay-md: var(--vanvi-clay-highlight-md), var(--vanvi-clay-shade-md), var(--vanvi-clay-contact-md), var(--vanvi-clay-ambient-md);
  --vanvi-clay-lg: var(--vanvi-clay-highlight-lg), var(--vanvi-clay-shade-lg), var(--vanvi-clay-contact-lg), var(--vanvi-clay-ambient-lg);

  --vanvi-clay-hover: var(--vanvi-clay-highlight-md), var(--vanvi-clay-shade-md), 0 16px 34px -6px rgba(180, 50, 110, 0.16);
  --vanvi-clay-pressed: inset 0 3px 6px rgba(180, 50, 110, 0.18), inset 0 -1px 2px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(180, 50, 110, 0.08);

  /* Claylo Motion Easings */
  --ease-clay-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-clay-smooth: cubic-bezier(.22, 1, .36, 1);

  /* 10 Ultra-Vibrant Jewel & Neon Tokens for Dark / Emerald Modes */
  --vanvi-neon-rose: #ff2a7a;
  --vanvi-neon-violet: #a855f7;
  --vanvi-neon-cyan: #06b6d4;
  --vanvi-neon-emerald: #10b981;
  --vanvi-gold-royal: #f59e0b;
  --vanvi-coral-sunset: #f97316;
  --vanvi-orchid-vibrant: #ec4899;
  --vanvi-electric-blue: #3b82f6;
  --vanvi-mint-glow: #34d399;
  --vanvi-champagne-pearl: #fef3c7;
}

/* 1. Universal Puffy 3D Clay Elevation on All Cards & Containers (Day Bloom) */
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .glass,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .template-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .catalog-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .category-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .home-game-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .make-format-item,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .compact-ai-concierge-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .about-hero-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .about-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .why-item,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .drawer-wallet-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .reward-card,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .referral-box,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body div[class*="studio-modal-box"],
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .vanvi-template-card {
  box-shadow: var(--vanvi-clay-md) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 26px !important;
  transition: transform 0.28s var(--ease-clay-bounce), box-shadow 0.28s var(--ease-clay-smooth), border-color 0.25s ease !important;
}

/* Card Hover Elevation (Spring Lift) */
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .glass:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .card:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .template-card:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .catalog-card:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .category-card:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .home-game-card:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .make-format-item:hover,
html:not([data-vanvi-theme="emerald"]):not([data-vanvi-theme="dark"]) body .why-item:hover {
  transform: translateY(-3.5px) scale(1.012) !important;
  box-shadow: var(--vanvi-clay-hover) !important;
}

/* 2. Tactile Clay Pill Buttons & Interactive Elements */
.btn,
.primary,
.secondary,
.tbtn,
.btn-make-yours,
.home-btn-make-yours,
.btn-shimmer,
.btn-auth-submit,
.vanvi-btn-submit,
a.primary,
button.primary {
  border-radius: 999px !important;
  box-shadow: var(--vanvi-clay-sm) !important;
  transition: transform 0.22s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth), filter 0.2s ease !important;
}

.btn:hover,
.primary:hover,
.secondary:hover,
.tbtn:hover,
.btn-make-yours:hover,
.home-btn-make-yours:hover,
a.primary:hover,
button.primary:hover {
  transform: translateY(-1.5px) !important;
}

.btn:active,
.primary:active,
.secondary:active,
.tbtn:active,
.btn-make-yours:active,
.home-btn-make-yours:active,
a.primary:active,
button.primary:active {
  transform: scale(0.98) translateY(0) !important;
  box-shadow: var(--vanvi-clay-pressed) !important;
  transition: transform 0.1s var(--ease-smooth) !important;
}

/* 3. Clay Badges & Rounded Candy Pills */
.badge,
.pill,
.eyebrow-pill,
.tab-badge-coins,
.brand-by-vish,
.category-tab,
.tag-pill {
  border-radius: 999px !important;
  box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.95), 0 3px 8px rgba(180, 50, 110, 0.08) !important;
}

/* 4. Claylo Candy Pastel Highlights on Internal Pages */
body:not(.vanvi-home-body) .candy-mint,
body:not(.vanvi-home-body) .tag-green,
body:not(.vanvi-home-body) .status-active {
  background: #EAF8F1 !important;
  color: #166534 !important;
  border: 1.5px solid #A7E3C5 !important;
}

body:not(.vanvi-home-body) .candy-lavender,
body:not(.vanvi-home-body) .tag-purple {
  background: #F4F1FD !important;
  color: #5B4AA8 !important;
  border: 1.5px solid #C7BCF2 !important;
}

body:not(.vanvi-home-body) .candy-pink,
body:not(.vanvi-home-body) .tag-rose {
  background: #FFF0F6 !important;
  color: #B0336A !important;
  border: 1.5px solid #F6A8C0 !important;
}

body:not(.vanvi-home-body) .candy-yellow,
body:not(.vanvi-home-body) .tag-gold,
body:not(.vanvi-home-body) .badge-coins {
  background: #FEF9E7 !important;
  color: #8A6D1A !important;
  border: 1.5px solid #F2D983 !important;
}

body:not(.vanvi-home-body) .candy-blue,
body:not(.vanvi-home-body) .tag-blue {
  background: #F0F7FF !important;
  color: #2F5EA8 !important;
  border: 1.5px solid #A8C8F0 !important;
}

/* 5. Smooth Clay Float Micro-Animation for Hero & Feature Highlights */
@keyframes vanviClayFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.clay-float {
  animation: vanviClayFloat 4.5s ease-in-out infinite alternate !important;
}

/* 6. Clay Bottom Dock Upgrade */
.vanvi-bottom-dock {
  border-radius: 999px !important;
  box-shadow: 
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 10px 14px -6px rgba(255, 255, 255, 0.85),
    inset 0 -3px 4px -1px rgba(180, 50, 110, 0.12),
    0 12px 32px rgba(44, 18, 36, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
}

/* ==========================================================================
   VANVI GLOBAL BUTTON STABILIZATION (ZERO JITTER / ZERO WOBBLE)
   ========================================================================== */
button,
a.primary,
a.secondary,
.btn,
.nav-btn,
.vanvi-btn-back,
.dock-link,
.pill,
.tbtn {
  box-sizing: border-box !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0);
  -webkit-font-smoothing: subpixel-antialiased !important;
}

button:hover,
a.primary:hover,
a.secondary:hover,
.btn:hover,
.nav-btn:hover,
.vanvi-btn-back:hover,
.dock-link:hover {
  transform-origin: center center !important;
}

/* Luxury Transparent Glass Styling for Interactive Keepsakes & Templates */
.glass-luxury-transparent,
[data-transparent="true"],
.template-transparent {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

html[data-vanvi-theme="dark"] .glass-luxury-transparent,
html[data-vanvi-theme="emerald"] .glass-luxury-transparent,
html[data-vanvi-theme="night"] .glass-luxury-transparent {
  background: rgba(15, 61, 50, 0.45) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1.5px solid rgba(214, 184, 120, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.65), 0 0 25px rgba(24, 168, 120, 0.15) !important;
}

/* Hide mobile bottom navigation dock on laptop/desktop screens where top navigation is active */
@media (min-width: 1024px) {
  .vanvi-bottom-dock,
  nav.bottom,
  .bottom {
    display: none !important;
  }
  body {
    padding-bottom: 0 !important;
  }
}

/* ─── UNIVERSAL 3D HARD TACTILE PUSH BUTTON POLISH ─── */
button.primary,
a.primary,
.btn-primary,
.btn-play,
.btn-3d-tactile,
.btn-action-primary {
  box-shadow: 
    0 4px 0 #be185d,
    0 8px 18px rgba(255, 42, 122, 0.35),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.8) !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
}

button.primary:hover,
a.primary:hover,
.btn-primary:hover,
.btn-play:hover,
.btn-action-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 6px 0 #be185d,
    0 12px 24px rgba(255, 42, 122, 0.42),
    inset 0 2px 2px rgba(255, 255, 255, 0.9) !important;
}

button.primary:active,
a.primary:active,
.btn-primary:active,
.btn-play:active,
.btn-action-primary:active {
  transform: translateY(3px) !important;
  box-shadow: 
    0 1px 0 #be185d,
    0 3px 8px rgba(255, 42, 122, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
}

/* Secondary 3D Pill Polish */
button.secondary,
a.secondary,
.btn-secondary,
.btn-nav-back,
.vanvi-btn-back {
  box-shadow: 
    0 3px 0 rgba(220, 150, 185, 0.45),
    0 5px 12px rgba(44, 18, 36, 0.05),
    inset 0 1px 1px #ffffff !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

button.secondary:hover,
a.secondary:hover,
.btn-secondary:hover,
.btn-nav-back:hover,
.vanvi-btn-back:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 
    0 4.5px 0 rgba(220, 150, 185, 0.5),
    0 8px 16px rgba(44, 18, 36, 0.08),
    inset 0 1.5px 1.5px #ffffff !important;
}

button.secondary:active,
a.secondary:active,
.btn-secondary:active,
.btn-nav-back:active,
.vanvi-btn-back:active {
  transform: translateY(2px) !important;
  box-shadow: 
    0 1px 0 rgba(220, 150, 185, 0.4),
    0 2px 4px rgba(44, 18, 36, 0.05),
    inset 0 1px 1px #ffffff !important;
}

/* ==========================================================================
   VANVI MOMENTS — 3RD THEME: LIQUID SPATIAL GLASS (APPLE VISIONOS AESTHETIC)
   Features: Multi-layer Frosted Glass (blur 28px+), Specular Edges, Dynamic Aurora Mesh
   ========================================================================== */

/* 1. Spatial Typography Engine */
html[data-vanvi-font="spatial"],
html[data-vanvi-font="spatial"] body,
html[data-vanvi-font="spatial"] h1,
html[data-vanvi-font="spatial"] h2,
html[data-vanvi-font="spatial"] h3,
html[data-vanvi-font="spatial"] h4,
html[data-vanvi-font="spatial"] h5,
html[data-vanvi-font="spatial"] h6,
html[data-vanvi-font="spatial"] p,
html[data-vanvi-font="spatial"] span,
html[data-vanvi-font="spatial"] a,
html[data-vanvi-font="spatial"] button,
html[data-vanvi-font="spatial"] input,
html[data-vanvi-font="spatial"] textarea,
html[data-vanvi-font="spatial"] select,
html[data-vanvi-font="spatial"] label {
  font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  letter-spacing: -0.015em !important;
}

/* 2. Main Liquid Frosted Aurora Canvas & Body */
html[data-vanvi-theme="glass"] body,
html[data-vanvi-theme="glass"] .page,
html[data-vanvi-theme="glass"] main,
html[data-vanvi-theme="glass"] .main-content,
html[data-vanvi-theme="glass"] .app-body,
html[data-vanvi-theme="glass"] .content-wrapper {
  background:
    radial-gradient(ellipse 95% 65% at 80% 12%, rgba(216, 180, 254, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 75% 55% at 12% 60%, rgba(186, 230, 253, 0.45) 0%, transparent 52%),
    radial-gradient(ellipse 65% 50% at 85% 85%, rgba(254, 205, 211, 0.38) 0%, transparent 48%),
    linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%) !important;
  background-attachment: fixed !important;
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  position: relative !important;
  min-height: 100vh !important;
}

/* Floating Ambient Prismatic Aurora Orbs */
html[data-vanvi-theme="glass"] body::before {
  content: "" !important;
  position: fixed !important;
  top: -120px !important;
  left: -120px !important;
  width: 550px !important;
  height: 550px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.28) 0%, rgba(192, 132, 252, 0.12) 50%, transparent 70%) !important;
  filter: blur(80px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: vanviGlassAurora1 20s ease-in-out infinite alternate !important;
}

html[data-vanvi-theme="glass"] body::after {
  content: "" !important;
  position: fixed !important;
  bottom: -120px !important;
  right: -120px !important;
  width: 650px !important;
  height: 650px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.26) 0%, rgba(147, 197, 253, 0.10) 50%, transparent 70%) !important;
  filter: blur(90px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: vanviGlassAurora2 24s ease-in-out infinite alternate !important;
}

@keyframes vanviGlassAurora1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.12); }
  100% { transform: translate(30px, 120px) scale(0.96); }
}

@keyframes vanviGlassAurora2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -50px) scale(1.08); }
  100% { transform: translate(-30px, -100px) scale(0.92); }
}

/* 3. Floating Glass Headers & Navbars */
html[data-vanvi-theme="glass"] header,
html[data-vanvi-theme="glass"] .nav-wrapper,
html[data-vanvi-theme="glass"] .nav-pill-box,
html[data-vanvi-theme="glass"] .app-header,
html[data-vanvi-theme="glass"] .site-header,
html[data-vanvi-theme="glass"] .fixed-header,
html[data-vanvi-theme="glass"] .navbar,
html[data-vanvi-theme="glass"] .rewards-header,
html[data-vanvi-theme="glass"] .top-nav,
html[data-vanvi-theme="glass"] .detail-nav {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border-bottom: 1.2px solid rgba(255, 255, 255, 0.85) !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  box-shadow: 
    0 12px 35px rgba(15, 23, 42, 0.04),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
}

html[data-vanvi-theme="glass"] .brand-title,
html[data-vanvi-theme="glass"] .brand-text,
html[data-vanvi-theme="glass"] .brand span {
  color: #0f172a !important;
}

/* 4. Complete Universal Frosted Glass Cards Across ALL 58 Pages */
html[data-vanvi-theme="glass"] body div[class*="card"],
html[data-vanvi-theme="glass"] body section[class*="card"],
html[data-vanvi-theme="glass"] body article[class*="card"],
html[data-vanvi-theme="glass"] body div[class*="box"]:not(.color-swatch):not(.game-block):not(.cell),
html[data-vanvi-theme="glass"] body section[class*="box"],
html[data-vanvi-theme="glass"] body div[class*="panel"],
html[data-vanvi-theme="glass"] body div[class*="tile"],
html[data-vanvi-theme="glass"] body div[class*="pod"],
html[data-vanvi-theme="glass"] body .card,
html[data-vanvi-theme="glass"] body .template,
html[data-vanvi-theme="glass"] body .template-card,
html[data-vanvi-theme="glass"] body .catalog-card,
html[data-vanvi-theme="glass"] body .glass,
html[data-vanvi-theme="glass"] body .glass-card,
html[data-vanvi-theme="glass"] body .category-card,
html[data-vanvi-theme="glass"] body .make-card,
html[data-vanvi-theme="glass"] body .about-hero-card,
html[data-vanvi-theme="glass"] body .about-card,
html[data-vanvi-theme="glass"] body .idea-card,
html[data-vanvi-theme="glass"] body .why-section,
html[data-vanvi-theme="glass"] body .auth-card,
html[data-vanvi-theme="glass"] body .auth-box,
html[data-vanvi-theme="glass"] body .plan-card,
html[data-vanvi-theme="glass"] body .pricing-card,
html[data-vanvi-theme="glass"] body .tier-card,
html[data-vanvi-theme="glass"] body .profile-card,
html[data-vanvi-theme="glass"] body .stat-card,
html[data-vanvi-theme="glass"] body .order-card,
html[data-vanvi-theme="glass"] body .vanvi-card,
html[data-vanvi-theme="glass"] body .trust-card,
html[data-vanvi-theme="glass"] body .deep-details-section,
html[data-vanvi-theme="glass"] body .purchase-card,
html[data-vanvi-theme="glass"] body .step-card,
html[data-vanvi-theme="glass"] body .review-item,
html[data-vanvi-theme="glass"] body .faq-item,
html[data-vanvi-theme="glass"] body .faq-card,
html[data-vanvi-theme="glass"] body .product-card,
html[data-vanvi-theme="glass"] body .reward-card,
html[data-vanvi-theme="glass"] body .history-item,
html[data-vanvi-theme="glass"] body .game-wrapper,
html[data-vanvi-theme="glass"] body .score-board,
html[data-vanvi-theme="glass"] body .hud-card {
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 
    0 18px 45px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.02),
    inset 0 1px 1.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(0, 0, 0, 0.02) !important;
  color: #0f172a !important;
  border-radius: 20px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease !important;
}

html[data-vanvi-theme="glass"] body div[class*="card"]:hover,
html[data-vanvi-theme="glass"] body article[class*="card"]:hover,
html[data-vanvi-theme="glass"] body .vanvi-card:hover,
html[data-vanvi-theme="glass"] body .template-card:hover,
html[data-vanvi-theme="glass"] body .catalog-card:hover,
html[data-vanvi-theme="glass"] body .category-card:hover {
  transform: translateY(-3px) scale(1.008) !important;
  box-shadow: 
    0 24px 60px rgba(15, 23, 42, 0.08),
    0 8px 20px rgba(15, 23, 42, 0.03),
    inset 0 1.5px 2px #ffffff !important;
  border-color: rgba(255, 255, 255, 0.98) !important;
}

/* 5. Typography Contrast & Clarity in Glass Mode */
html[data-vanvi-theme="glass"] h1,
html[data-vanvi-theme="glass"] h2,
html[data-vanvi-theme="glass"] h3,
html[data-vanvi-theme="glass"] h4,
html[data-vanvi-theme="glass"] h5,
html[data-vanvi-theme="glass"] h6,
html[data-vanvi-theme="glass"] strong,
html[data-vanvi-theme="glass"] b {
  color: #0f172a !important;
}

html[data-vanvi-theme="glass"] p,
html[data-vanvi-theme="glass"] li,
html[data-vanvi-theme="glass"] label,
html[data-vanvi-theme="glass"] .card-tagline,
html[data-vanvi-theme="glass"] .template-desc,
html[data-vanvi-theme="glass"] .item-desc {
  color: #334155 !important;
}

html[data-vanvi-theme="glass"] .text-muted,
html[data-vanvi-theme="glass"] .muted,
html[data-vanvi-theme="glass"] .subtext,
html[data-vanvi-theme="glass"] .desc,
html[data-vanvi-theme="glass"] .footer-link {
  color: #64748b !important;
}

/* 6. Form Inputs & Search Bars (Pill Shaped Frosted Glass) */
html[data-vanvi-theme="glass"] input[type="text"],
html[data-vanvi-theme="glass"] input[type="email"],
html[data-vanvi-theme="glass"] input[type="search"],
html[data-vanvi-theme="glass"] input[type="tel"],
html[data-vanvi-theme="glass"] input[type="number"],
html[data-vanvi-theme="glass"] input[type="password"],
html[data-vanvi-theme="glass"] select {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(15, 23, 42, 0.03) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-family: inherit !important;
}

html[data-vanvi-theme="glass"] textarea {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  color: #0f172a !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  font-family: inherit !important;
}

html[data-vanvi-theme="glass"] input:focus,
html[data-vanvi-theme="glass"] textarea:focus,
html[data-vanvi-theme="glass"] select:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25), inset 0 1px 1px #fff !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.90) !important;
}

html[data-vanvi-theme="glass"] input::placeholder,
html[data-vanvi-theme="glass"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* 7. Floating Bottom Dock (VisionOS Glass Capsule) */
html[data-vanvi-theme="glass"] .bottom,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock,
html[data-vanvi-theme="glass"] .bottom-dock,
html[data-vanvi-theme="glass"] .floating-dock {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(32px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 
    0 24px 60px rgba(15, 23, 42, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.04),
    inset 0 1.5px 2px #ffffff !important;
}

html[data-vanvi-theme="glass"] .bottom button,
html[data-vanvi-theme="glass"] .bottom a,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock button,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock a,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock .nav-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #334155 !important;
}

html[data-vanvi-theme="glass"] .bottom button:hover,
html[data-vanvi-theme="glass"] .bottom a:hover,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock button:hover,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock a:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

html[data-vanvi-theme="glass"] .bottom button.active,
html[data-vanvi-theme="glass"] .bottom a.active,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock button.active,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock a.active,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock .nav-btn.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 850 !important;
}

/* Center Elevated Create Button (+) */
html[data-vanvi-theme="glass"] .bottom .create,
html[data-vanvi-theme="glass"] .vanvi-bottom-dock .create {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #38bdf8 100%) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
}

/* 8. Filter Pills & Category Chips in Glass */
html[data-vanvi-theme="glass"] .filter-chip,
html[data-vanvi-theme="glass"] .filter-pill,
html[data-vanvi-theme="glass"] .cat-tab-btn,
html[data-vanvi-theme="glass"] .vanvi-filter-btn {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.85) !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 1px #ffffff !important;
}

html[data-vanvi-theme="glass"] .filter-chip:hover,
html[data-vanvi-theme="glass"] .filter-pill:hover,
html[data-vanvi-theme="glass"] .cat-tab-btn:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 6px 18px rgba(56, 189, 248, 0.18) !important;
}

html[data-vanvi-theme="glass"] .filter-chip.active,
html[data-vanvi-theme="glass"] .cat-tab-btn.active {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* 9. Back Button & Action Pills */
html[data-vanvi-theme="glass"] .vanvi-btn-back,
html[data-vanvi-theme="glass"] .btn-nav-back,
html[data-vanvi-theme="glass"] .btn-header-action,
html[data-vanvi-theme="glass"] .btn-header-link,
html[data-vanvi-theme="glass"] .btn-preview {
  background: rgba(255, 255, 255, 0.70) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.9) !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 1px #ffffff !important;
}

html[data-vanvi-theme="glass"] .vanvi-btn-back:hover,
html[data-vanvi-theme="glass"] .btn-nav-back:hover,
html[data-vanvi-theme="glass"] .btn-header-action:hover,
html[data-vanvi-theme="glass"] .btn-preview:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08), inset 0 1px 1px #ffffff !important;
}

html[data-vanvi-theme="glass"] .vanvi-btn-back .back-arrow,
html[data-vanvi-theme="glass"] .btn-nav-back span {
  color: #0f172a !important;
}

/* 10. Primary CTA Buttons in Glass Mode */
html[data-vanvi-theme="glass"] .btn-primary,
html[data-vanvi-theme="glass"] .btn-create,
html[data-vanvi-theme="glass"] .btn-header-primary,
html[data-vanvi-theme="glass"] .btn-make-yours,
html[data-vanvi-theme="glass"] .btn-create-moment,
html[data-vanvi-theme="glass"] .btn-buy-now,
html[data-vanvi-theme="glass"] button[class*="primary"] {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.35) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

html[data-vanvi-theme="glass"] .btn-primary:hover,
html[data-vanvi-theme="glass"] .btn-create:hover,
html[data-vanvi-theme="glass"] .btn-header-primary:hover,
html[data-vanvi-theme="glass"] .btn-make-yours:hover,
html[data-vanvi-theme="glass"] .btn-create-moment:hover,
html[data-vanvi-theme="glass"] .btn-buy-now:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.30), inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

/* 11. Modals, Drawers & Studio Aesthetics Panel in Glass */
html[data-vanvi-theme="glass"] .modal-content,
html[data-vanvi-theme="glass"] .studio-panel,
html[data-vanvi-theme="glass"] .modal-card,
html[data-vanvi-theme="glass"] #studioModalContainer,
html[data-vanvi-theme="glass"] div[id*="Modal"] > div {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(36px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(210%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 32px 85px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

/* 12. Footers, Accordions & Dividers in Glass */
html[data-vanvi-theme="glass"] footer,
html[data-vanvi-theme="glass"] .site-footer,
html[data-vanvi-theme="glass"] .footer-container {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-top: 1.2px solid rgba(255, 255, 255, 0.8) !important;
  color: #334155 !important;
}

html[data-vanvi-theme="glass"] hr,
html[data-vanvi-theme="glass"] .divider,
html[data-vanvi-theme="glass"] .border-bottom {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

html[data-vanvi-theme="glass"] .accordion-item,
html[data-vanvi-theme="glass"] .faq-item {
  background: rgba(255, 255, 255, 0.60) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ==========================================================================
   13. GLOBAL FLOATING VANVI AI HUB MODAL (PHONE BOTTOM SHEET & LAPTOP MODAL)
   Fast, accessible, theme-synced (Day Bloom / Emerald Night / Spatial Glass)
   ========================================================================== */
#vanviAiHubModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(15, 23, 42, 0.52) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

#vanviAiHubModal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.vanvi-ai-hub-sheet {
  width: 100% !important;
  max-width: 500px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.95) !important;
  border-radius: 28px !important;
  box-shadow: 
    0 24px 60px rgba(255, 42, 122, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 2px 3px #ffffff !important;
  padding: 24px 22px 22px !important;
  box-sizing: border-box !important;
  position: relative !important;
  transform: translateY(22px) scale(0.96) !important;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#vanviAiHubModal.is-open .vanvi-ai-hub-sheet {
  transform: translateY(0) scale(1) !important;
}

/* Mobile drag pill handle */
.vanvi-ai-drag-handle {
  display: none !important;
  width: 42px !important;
  height: 4.5px !important;
  background: rgba(255, 120, 175, 0.35) !important;
  border-radius: 99px !important;
  margin: 0 auto 14px auto !important;
}

/* Header */
.vanvi-ai-hub-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.vanvi-ai-hub-title-pod {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.vanvi-ai-spark-orb {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff2a7a, #a855f7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: 0 4px 12px rgba(255, 42, 122, 0.3) !important;
  flex-shrink: 0 !important;
}

.vanvi-ai-hub-title {
  font-size: 17px !important;
  font-weight: 850 !important;
  color: #2b1223 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  font-family: inherit !important;
}

.vanvi-ai-hub-subtitle {
  font-size: 12.5px !important;
  color: #7a586d !important;
  margin: 0 0 18px 0 !important;
  line-height: 1.45 !important;
}

.vanvi-ai-close-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 120, 175, 0.3) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #553347 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.vanvi-ai-close-btn:hover {
  background: #ff2a7a !important;
  color: #ffffff !important;
  border-color: #ff2a7a !important;
  transform: scale(1.08) !important;
}

/* Options Grid */
.vanvi-ai-options-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.vanvi-ai-option-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(255, 182, 206, 0.6) !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 
    0 4px 14px rgba(255, 42, 122, 0.08),
    inset 0 1px 1px #ffffff !important;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
}

.vanvi-ai-option-item:hover {
  transform: translateY(-3px) scale(1.015) !important;
  border-color: #ff2a7a !important;
  box-shadow: 
    0 10px 24px rgba(255, 42, 122, 0.22),
    inset 0 1px 1px #ffffff !important;
}

.vanvi-ai-option-item:active {
  transform: scale(0.97) !important;
}

.vanvi-ai-item-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.vanvi-ai-option-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.vanvi-ai-icon-assistant {
  background: linear-gradient(135deg, #fff0f5 0%, #ffd6e7 100%) !important;
  border: 1.5px solid rgba(255, 42, 122, 0.3) !important;
}

.vanvi-ai-icon-matcher {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.3) !important;
}

.vanvi-ai-item-text {
  min-width: 0 !important;
}

.vanvi-ai-badge-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
}

.vanvi-ai-pill {
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
}

.vanvi-ai-pill-rose {
  background: #ffe4ee !important;
  color: #db2777 !important;
}

.vanvi-ai-pill-purple {
  background: #ede9fe !important;
  color: #7c3aed !important;
}

.vanvi-ai-item-heading {
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: #2b1223 !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.25 !important;
}

.vanvi-ai-item-desc {
  font-size: 11.5px !important;
  color: #6d4b60 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

.vanvi-ai-action-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff0f6 !important;
  color: #ff2a7a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease !important;
}

.vanvi-ai-option-item:hover .vanvi-ai-action-arrow {
  transform: translateX(3px) !important;
  background: #ff2a7a !important;
  color: #ffffff !important;
}

/* Theme 2: Emerald Night */
html[data-vanvi-theme="emerald"] .vanvi-ai-hub-sheet {
  background: linear-gradient(145deg, rgba(12, 22, 28, 0.95) 0%, rgba(8, 28, 22, 0.96) 50%, rgba(18, 15, 30, 0.95) 100%) !important;
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85), inset 0 1px 2px rgba(254, 243, 199, 0.3) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-hub-title {
  color: #FFFFFF !important;
  text-shadow: 0 0 16px rgba(251, 191, 36, 0.3) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-hub-subtitle {
  color: #E2E8F0 !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-close-btn {
  background: rgba(14, 22, 28, 0.9) !important;
  color: #FBBF24 !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-option-item {
  background: rgba(12, 18, 24, 0.9) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-option-item:hover {
  border-color: #FBBF24 !important;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.35), 0 0 20px rgba(16, 185, 129, 0.25) !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-item-heading {
  color: #FFFFFF !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-item-desc {
  color: #E2E8F0 !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-action-arrow {
  background: linear-gradient(135deg, #10B981, #06B6D4) !important;
  color: #FFFFFF !important;
}
html[data-vanvi-theme="emerald"] .vanvi-ai-option-item:hover .vanvi-ai-action-arrow {
  background: linear-gradient(135deg, #F59E0B, #FBBF24) !important;
  color: #070B0E !important;
}

/* Theme 3: Spatial Glass */
html[data-vanvi-theme="glass"] .vanvi-ai-hub-sheet {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(36px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(210%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 32px 85px rgba(15, 23, 42, 0.25) !important;
}

/* Mobile Screen Sheet Mode (Smooth Bottom Drawer) */
@media (max-width: 640px) {
  #vanviAiHubModal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .vanvi-ai-drag-handle {
    display: block !important;
  }
  .vanvi-ai-hub-sheet {
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 28px !important;
    border-top-right-radius: 28px !important;
    padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 16px)) !important;
    transform: translateY(100%) !important;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  #vanviAiHubModal.is-open .vanvi-ai-hub-sheet {
    transform: translateY(0) !important;
  }
}