/* ============================================
   ATHENACORE THEME DEFINITIONS
   All theme color palettes and styling
   ============================================ */

/* =============================================
   TERMINAL: Matrix/Hacker Green
============================================= */
html[data-theme="terminal"],
:root[data-theme="terminal"] {
 --color-background: #0d0208;
 --color-surface: #001100;
 --color-surface-subtle: rgba(0, 255, 65, 0.05);
 --color-surface-elevated: #001a00;

 --text-primary: #00ff41;
 --text-secondary: rgba(0, 255, 65, 0.7);
 --text-tertiary: rgba(0, 255, 65, 0.5);

 --border-light: rgba(0, 255, 65, 0.2);
 --border-medium: rgba(0, 255, 65, 0.4);
 --border-dark: rgba(0, 255, 65, 0.6);

 --google-blue: #00ff41;
 --google-blue-light: #00ff41;
 --google-blue-dark: #00cc33;
 --google-blue-subtle: rgba(0, 255, 65, 0.1);
 
 --google-red: #ff0000;
 --google-yellow: #ffff00;
 --google-green: #00ff41;

 --theme-font: 'Courier New', Courier, monospace;
 --theme-radius-md: 0px;
 --theme-radius-lg: 0px;
 --theme-border-width: 1px;
 --theme-shadow-sm: 0 0 10px rgba(0, 255, 65, 0.2);
 --theme-shadow-md: 0 0 20px rgba(0, 255, 65, 0.3);

 --theme-surface-texture: repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.03) 0px, rgba(0, 255, 65, 0.03) 1px, transparent 1px, transparent 2px);
}

html[data-theme="terminal"] body {
 text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

html[data-theme="terminal"] .glass-card {
 border: 1px solid var(--google-blue);
 background: rgba(0, 20, 0, 0.9);
 box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
}

/* =============================================
   NEON CITY: Cyberpunk Pink/Cyan
============================================= */
html[data-theme="neon"],
:root[data-theme="neon"] {
 --color-background: #0a0a0f;
 --color-surface: rgba(15, 15, 25, 0.9);
 --color-surface-subtle: rgba(236, 72, 153, 0.08);
 --color-surface-elevated: rgba(20, 20, 35, 0.95);

 --text-primary: #f0f0ff;
 --text-secondary: rgba(240, 240, 255, 0.75);
 --text-tertiary: rgba(240, 240, 255, 0.5);

 --border-light: rgba(236, 72, 153, 0.25);
 --border-medium: rgba(236, 72, 153, 0.4);
 --border-dark: rgba(236, 72, 153, 0.6);

 --google-blue: #ec4899;
 --google-blue-light: #f472b6;
 --google-blue-dark: #db2777;
 --google-blue-subtle: rgba(236, 72, 153, 0.15);

 --google-red: #ef4444;
 --google-yellow: #fbbf24;
 --google-green: #22d3ee;

 --theme-shadow-sm: 0 0 15px rgba(236, 72, 153, 0.3), 0 4px 12px rgba(0, 0, 0, 0.6);
 --theme-shadow-md: 0 0 25px rgba(236, 72, 153, 0.4), 0 8px 20px rgba(0, 0, 0, 0.7);
}

html[data-theme="neon"] .glass-card {
 border: 1px solid rgba(236, 72, 153, 0.4);
 box-shadow: 0 0 20px rgba(236, 72, 153, 0.2), inset 0 0 30px rgba(236, 72, 153, 0.05);
}

/* =============================================
   RETRO: 80s/90s Aesthetic
============================================= */
html[data-theme="retro"],
:root[data-theme="retro"] {
 --color-background: #1a1a2e;
 --color-surface: #16213e;
 --color-surface-subtle: rgba(224, 162, 227, 0.1);
 --color-surface-elevated: #0f3460;

 --text-primary: #eee;
 --text-secondary: #e0a2e3;
 --text-tertiary: #a98aad;

 --border-light: #533483;
 --border-medium: #7a52b3;
 --border-dark: #9b72cf;

 --google-blue: #e94560;
 --google-blue-light: #ff6b81;
 --google-blue-dark: #c23b4f;
 --google-blue-subtle: rgba(233, 69, 96, 0.15);

 --google-yellow: #feca57;
 --google-green: #48dbfb;

 --theme-radius-md: 0px;
 --theme-radius-lg: 4px;
 --theme-border-width: 3px;
 --theme-shadow-sm: 4px 4px 0px rgba(0, 0, 0, 0.3);
 --theme-shadow-md: 6px 6px 0px rgba(0, 0, 0, 0.4);
}

/* =============================================
   GLASS/FROSTED: Translucent Modern
============================================= */
html[data-theme="glass"],
:root[data-theme="glass"] {
 --color-background: #08111f;
 --color-surface: rgba(15, 23, 42, 0.82);
 --color-surface-subtle: rgba(125, 211, 252, 0.12);
 --color-surface-elevated: rgba(21, 32, 54, 0.92);

 --text-primary: #ffffff;
 --text-secondary: #e2e8f0;
 --text-tertiary: #cbd5e1;

 --border-light: rgba(186, 230, 253, 0.28);
 --border-medium: rgba(125, 211, 252, 0.42);
 --border-dark: rgba(56, 189, 248, 0.62);

 --google-blue: #38bdf8;
 --google-blue-light: #bae6fd;
 --google-blue-dark: #0284c7;
 --google-blue-subtle: rgba(56, 189, 248, 0.22);

 --theme-blur: 20px;
 --theme-saturation: 150%;
 --theme-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.2);
 --theme-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html[data-theme="glass"] .glass-card {
 backdrop-filter: blur(20px) saturate(150%);
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(186, 230, 253, 0.28);
}

/* =============================================
   VAPORWAVE: Purple/Pink Aesthetic
============================================= */
html[data-theme="vaporwave"],
:root[data-theme="vaporwave"] {
 --color-background: #190428;
 --color-surface: #2d0f4f;
 --color-surface-subtle: rgba(255, 71, 239, 0.08);
 --color-surface-elevated: #3d1661;

 --text-primary: #ff71ef;
 --text-secondary: #ea9ff9;
 --text-tertiary: #b388eb;

 --border-light: rgba(255, 113, 239, 0.25);
 --border-medium: rgba(255, 113, 239, 0.4);
 --border-dark: rgba(255, 113, 239, 0.6);

 --google-blue: #ff71ef;
 --google-blue-light: #ffa6f6;
 --google-blue-dark: #f040d9;
 --google-blue-subtle: rgba(255, 113, 239, 0.15);

 --google-yellow: #ffea00;
 --google-green: #00f5ff;
}

/* =============================================
   SKETCH: Hand-drawn Paper Look
============================================= */
html[data-theme="sketch"],
:root[data-theme="sketch"] {
 --color-background: #fdfbf7;
 --color-surface: #ffffff;
 --color-surface-subtle: #f4f1ea;
 --color-surface-elevated: #ffffff;

 --text-primary: #2c3e50;
 --text-secondary: #5d6d7e;
 --text-tertiary: #95a5a6;

 --border-light: #2c3e50;
 --border-medium: #2c3e50;
 --border-dark: #2c3e50;

 --google-blue: #2980b9;
 --google-red: #c0392b;
 --google-yellow: #f39c12;
 --google-green: #27ae60;

 --theme-font: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
 --theme-radius-md: 255px 15px 225px 15px / 15px 225px 15px 255px;
 --theme-radius-lg: 255px 15px 225px 15px / 15px 225px 15px 255px;
 --theme-border-width: 2px;
 --theme-shadow-sm: 2px 2px 0px rgba(0,0,0,0.2);
 --theme-shadow-md: 4px 4px 0px rgba(0,0,0,0.2);
}

/* =============================================
 FROSTED GLASS: macOS Big Sur Style
============================================= */
html[data-theme="frosted"],
:root[data-theme="frosted"] {
 --color-background: #1c1c1e;
 --color-surface: rgba(44, 44, 46, 0.7);
 --color-surface-subtle: rgba(72, 72, 74, 0.3);
 --color-surface-elevated: rgba(58, 58, 60, 0.8);

 --text-primary: #ffffff;
 --text-secondary: rgba(255, 255, 255, 0.75);
 --text-tertiary: rgba(255, 255, 255, 0.55);

 --border-light: rgba(255, 255, 255, 0.15);
 --border-medium: rgba(255, 255, 255, 0.25);
 --border-dark: rgba(255, 255, 255, 0.4);

 --google-blue: #0a84ff;
 --google-blue-light: #409cff;
 --google-blue-dark: #006edb;
 --google-blue-subtle: rgba(10, 132, 255, 0.15);

 --theme-blur: 30px;
 --theme-saturation: 180%;
 --theme-radius-md: 12px;
 --theme-radius-lg: 18px;
}

html[data-theme="frosted"] .glass-card {
 backdrop-filter: blur(30px) saturate(180%);
}

/* =============================================
   DEEP COSMOS: Space Theme
============================================= */
html[data-theme="cosmos"],
:root[data-theme="cosmos"] {
 --color-background: #050510;
 --color-surface: rgba(20, 20, 40, 0.6);
 --color-surface-subtle: rgba(123, 44, 191, 0.1);
 --color-surface-elevated: rgba(30, 30, 60, 0.8);

 --text-primary: #e0e0ff;
 --text-secondary: #b0b0ff;
 --text-tertiary: #7070a0;

 --border-light: rgba(123, 44, 191, 0.3);
 --border-medium: rgba(123, 44, 191, 0.5);
 --border-dark: rgba(123, 44, 191, 0.7);

 --google-blue: #7b2cbf;
 --google-red: #ff006e;
 --google-yellow: #ffbe0b;
 --google-green: #00f5d4;

 --theme-radius-md: 12px;
 --theme-radius-lg: 20px;
 --theme-shadow-sm: 0 0 15px rgba(123, 44, 191, 0.3);
 --theme-shadow-md: 0 0 30px rgba(123, 44, 191, 0.4);
}

/* =============================================
   MOLTEN/LAVA: Animated Molten Look
============================================= */
html[data-theme="molten"],
html[data-theme="lava"],
:root[data-theme="molten"],
:root[data-theme="lava"] {
 --color-background: #1a0505;
 --color-surface: #2a0a0a;
 --color-surface-subtle: rgba(255, 77, 0, 0.1);
 --color-surface-elevated: #3a0f0f;

 --text-primary: #ffccaa;
 --text-secondary: #ff8866;
 --text-tertiary: #cc4422;

 --border-light: rgba(255, 77, 0, 0.3);
 --border-medium: rgba(255, 77, 0, 0.5);
 --border-dark: #ff4d00;

 --google-blue: #ff4d00;
 --google-blue-light: #ff6b1a;
 --google-blue-dark: #cc3d00;
 --google-blue-subtle: rgba(255, 77, 0, 0.15);
 
 --google-red: #ff0000;
 --google-yellow: #ffcc00;
 --google-green: #00ff00;

 --theme-radius-md: 8px;
 --theme-radius-lg: 12px;
 --theme-shadow-sm: 0 0 10px rgba(255, 77, 0, 0.3);
 --theme-shadow-md: 0 0 20px rgba(255, 77, 0, 0.5);
}

html[data-theme="molten"] .glass-card,
html[data-theme="lava"] .glass-card {
 border: 1px solid #ff4d00;
 box-shadow: 0 0 15px rgba(255, 77, 0, 0.2), inset 0 0 20px rgba(255, 77, 0, 0.1);
}

/* =============================================
   PRISM: Rainbow Gradient
============================================= */
html[data-theme="prism"],
:root[data-theme="prism"] {
 --color-background: #0a0e1a;
 --color-surface: rgba(15, 20, 35, 0.9);
 --color-surface-subtle: rgba(147, 51, 234, 0.08);
 --color-surface-elevated: rgba(20, 25, 45, 0.95);

 --text-primary: #f3f4f6;
 --text-secondary: #d1d5db;
 --text-tertiary: #9ca3af;

 --border-light: rgba(147, 51, 234, 0.25);
 --border-medium: rgba(147, 51, 234, 0.4);
 --border-dark: rgba(147, 51, 234, 0.6);

 --google-blue: #a78bfa;
 --google-blue-light: #c4b5fd;
 --google-blue-dark: #8b5cf6;
 --google-blue-subtle: rgba(167, 139, 250, 0.12);

 --google-green: #34d399;
 --google-yellow: #fbbf24;
 --google-red: #f87171;
}

html[data-theme="prism"] .glass-card {
 background: linear-gradient(135deg, rgba(15, 20, 35, 0.8), rgba(20, 25, 45, 0.9));
 border: 1px solid rgba(147, 51, 234, 0.3);
 box-shadow: 0 0 20px rgba(147, 51, 234, 0.15);
}

/* =============================================
   ATHENA FUSION: Creative, Light, Geometric
============================================= */
html[data-theme="fusion"],
:root[data-theme="fusion"] {
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-subtle: rgba(59, 130, 246, 0.03);
    --color-surface-elevated: #ffffff;

    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;

    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;

    --google-blue: #3b82f6;
    --google-blue-light: #60a5fa;
    --google-blue-dark: #2563eb;
    --google-blue-subtle: rgba(59, 130, 246, 0.1);

    --google-red: #ef4444;
    --google-yellow: #f59e0b;
    --google-green: #10b981;

    --theme-font: "Space Grotesk", system-ui, sans-serif;
    --theme-radius-md: 16px;
    --theme-radius-lg: 24px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --theme-shadow-md: 0 20px 40px -10px rgba(0, 0, 0, 0.08);

    /* Fusion specific variables */
    --fusion-accent-1: #3b82f6;
    --fusion-accent-2: #ef4444;
    --fusion-accent-3: #f59e0b;
}

/* Ensure DB wizard gradient respects theme variables by forcing the CSS variable
   at the end of the theme stylesheet so it overrides earlier defaults. */
:root,
html {
    --db-gradient-primary: linear-gradient(135deg,
        var(--ssms-welcome-gradient-start, var(--db-wizard-gradient-start, var(--google-blue, #4f46e5))) 0%,
        var(--ssms-welcome-gradient-end, var(--db-wizard-gradient-end, var(--google-blue-dark, #8b5cf6))) 100%);
}

/* Per-theme overrides may set --ssms-welcome-gradient-start/end as needed; this default
   ensures that the DB wizard gradient follows theme colors unless explicitly overridden. */

html[data-theme="fusion"] body {
    background-image: 
      radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(245, 158, 11, 0.08) 0%, transparent 50%);
    background-attachment: fixed;
}

html[data-theme="fusion"] .glass-card {
    background: var(--color-surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--theme-shadow-md);
    position: relative;
    overflow: hidden;
}

/* Fusion Card Accents */
html[data-theme="fusion"] .glass-card::before {
    content: '';
    position: absolute;
  top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--fusion-accent-1), var(--fusion-accent-2), var(--fusion-accent-3));
    opacity: 0.8;
}

/* Fusion Button Styles */
html[data-theme="fusion"] .btn-primary {
    background: var(--text-primary);
    color: white;
    border-radius: 12px;
    transition: all 0.3s ease;
}

html[data-theme="fusion"] .btn-primary:hover {
    background: var(--fusion-accent-1);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}

/* Fusion Input Styles */
html[data-theme="fusion"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="fusion"] select,
html[data-theme="fusion"] textarea {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-light);
 border-radius: 0;
    padding: 0.75rem 0;
  transition: all 0.3s ease;
}

html[data-theme="fusion"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
html[data-theme="fusion"] select:focus,
html[data-theme="fusion"] textarea:focus {
    border-bottom-color: var(--fusion-accent-1);
    background: rgba(59, 130, 246, 0.03);
    padding-left: 0.75rem;
    outline: none;
    box-shadow: none;
}

/* Fusion Animations */
@keyframes fusionFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes fusionFloatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(-10deg); }
}

@keyframes fusionFloatRotate {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-20px) rotate(55deg); }
}

/* Sovereign Primary Animations */
@keyframes sovereignFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }
50% {
        transform: translateY(-30px) rotate(5deg);
        opacity: 0.25;
    }
}

/* Solaris Gold Animations */
@keyframes solarisFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }
    50% {
     transform: translateY(-100vh) translateX(20px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-200vh) translateX(0);
        opacity: 0;
    }
}

/* Cherry Blossom Sakura Petal Fall */
@keyframes sakuraFall {
    0% {
        transform: translateY(-10vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { 
        opacity: 1; 
    }
    90% { 
    opacity: 1; 
    }
    100% {
        transform: translateY(110vh) translateX(100px) rotate(360deg);
opacity: 0;
    }
}

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

/* Petal element styling */
.petal {
    position: absolute;
    background: #ffb7c5;
    border-radius: 150% 0 150% 50%; /* Petal Shape */
  filter: drop-shadow(0 0 5px rgba(255, 183, 197, 0.5));
    will-change: transform;
    pointer-events: none;
}

/* Silver Metallic Glint */
@keyframes silverGlint {
    0% {
        transform: translate3d(-120%, -120%, 0) rotate(45deg);
        opacity: 0;
 }

/* Default welcome icon gradient (theme-aware): fall back to theme's google-blue values */
:root,
html {
    --ssms-welcome-gradient-start: var(--google-blue, #4f46e5);
    --ssms-welcome-gradient-end: var(--google-blue-dark, #8b5cf6);
    --ssms-welcome-icon-color: white;
    /* default background for welcome icon built from the theme-aware gradient vars */
    --ssms-welcome-bg: linear-gradient(135deg, var(--ssms-welcome-gradient-start) 0%, var(--ssms-welcome-gradient-end) 100%);
}

/* Light / fusion-like themes: use darker icon color for contrast */
html[data-theme="fusion"],
:root[data-theme="fusion"],
html[data-theme="sketch"],
:root[data-theme="sketch"] {
    --ssms-welcome-gradient-start: var(--google-blue, #3b82f6);
    --ssms-welcome-gradient-end: var(--google-blue-dark, #2563eb);
    --ssms-welcome-icon-color: var(--text-primary, #0f172a);
}

/* Ensure theme-scoped welcome icon picks up theme variables and always overrides root fallbacks */
html[data-theme] .ssms-welcome-icon,
:root[data-theme] .ssms-welcome-icon {
    background: var(--ssms-welcome-bg, var(--db-gradient-primary)) !important;
    color: var(--ssms-welcome-icon-color) !important;
}

/* Vaporwave / neon / prism / cosmos: prefer purple/pink gradients */
html[data-theme="vaporwave"],
html[data-theme="neon"],
html[data-theme="prism"],
html[data-theme="cosmos"],
:root[data-theme="vaporwave"],
:root[data-theme="neon"],
:root[data-theme="prism"],
:root[data-theme="cosmos"] {
    --ssms-welcome-gradient-start: var(--google-blue, #7c3aed);
    --ssms-welcome-gradient-end: color-mix(in srgb, var(--google-blue, #7c3aed) 40%, #a78bfa 60%);
    --ssms-welcome-icon-color: white;
}

/* Terminal / molten: adapt to their accent tones */
html[data-theme="terminal"],
html[data-theme="molten"],
:root[data-theme="terminal"],
:root[data-theme="molten"] {
    --ssms-welcome-gradient-start: var(--google-blue, #00ff41);
    --ssms-welcome-gradient-end: color-mix(in srgb, var(--google-blue, #00ff41) 40%, #06b6d4 60%);
    --ssms-welcome-icon-color: black;
}
    50% {
        opacity: 1;
    }
    100% {
     transform: translate3d(120%, 120%, 0) rotate(45deg);
        opacity: 0;
    }
}

@keyframes silverShimmer {
0%, 100% {
        opacity: 0.3;
        transform: scale(1);
  }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Gold Metallic Sparkles */
@keyframes goldSparkle {
    0%, 100% {
        opacity: 0;
      transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

@keyframes goldShimmer {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

/* Glass Liquid Blob Movement - Enhanced with more fluid motion */
@keyframes liquidBlobFloat1 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    33% {
      transform: translate3d(100px, -80px, 0) scale(1.1) rotate(120deg);
    }
    66% {
        transform: translate3d(-50px, 60px, 0) scale(0.9) rotate(240deg);
    }
}

@keyframes liquidBlobFloat2 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
  33% {
        transform: translate3d(-120px, 90px, 0) scale(0.95) rotate(-120deg);
    }
    66% {
   transform: translate3d(80px, -70px, 0) scale(1.05) rotate(-240deg);
    }
}

@keyframes liquidBlobFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    33% {
  transform: translate3d(60px, 100px, 0) scale(1.08) rotate(90deg);
    }
    66% {
        transform: translate3d(-90px, -50px, 0) scale(0.92) rotate(180deg);
    }
}

@keyframes liquidRipple {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
  transform: scale(1.1);
    }
}

/* Prism Particle Animations */
@keyframes prismFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
    50% {
        transform: translate3d(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px, 0) scale(1.5);
     opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
}

@keyframes prismRotate {
    0% {
transform: rotate(0deg);
    }
    100% {
  transform: rotate(360deg);
  }
}

html[data-theme="fusion"] .glass-card:hover {
  animation: fusionFloat 6s ease-in-out infinite;
}

/* Glass Liquid - Add liquid-like quality to components */
html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    animation: liquidCardFloat 6s ease-in-out infinite;
}

@keyframes liquidCardFloat {
    0%, 100% {
        transform: translateY(0px);
        border-radius: 24px;
    }
    33% {
        transform: translateY(-5px);
border-radius: 28px 20px 24px 26px;
    }
    66% {
      transform: translateY(3px);
        border-radius: 20px 28px 26px 22px;
    }
}

html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .button {
    background: rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .button:hover {
    background: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    border-radius: 20px;
}

html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* =============================================
   ANIMATIONS FOR NEW THEMES
============================================= */

/* Sakura Petal Fall with Sway */
@keyframes sakuraFall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 50vh, 0) rotate(180deg);
    }
    90% {
     opacity: 1;
    }
    100% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 110vh, 0) rotate(360deg);
    opacity: 0;
    }
}

/* Silver Glint Movement */
@keyframes silverGlint {
    0% {
        transform: translate3d(-100%, -100%, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(100%, 100%, 0) rotate(45deg);
    }
}

/* Gold Sparkle Flicker */
@keyframes goldFlicker {
    0%, 100% {
        opacity: 0.2;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
      opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

/* Liquid Blob Floating Animations */
@keyframes liquidFloat1 {
  0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(100px, -80px, 0);
    }
    66% {
        transform: translate3d(-50px, 60px, 0);
    }
}

@keyframes liquidFloat2 {
    0%, 100% {
transform: translate3d(0, 0, 0);
    }
    33% {
    transform: translate3d(-120px, 90px, 0);
  }
    66% {
        transform: translate3d(80px, -70px, 0);
    }
}

@keyframes liquidFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(60px, 100px, 0);
    }
    66% {
  transform: translate3d(-90px, -50px, 0);
  }
}

/* Prism Particle Animations */
@keyframes prismFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
    50% {
        transform: translate3d(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px, 0) scale(1.5);
     opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
}

@keyframes prismRotate {
    0% {
transform: rotate(0deg);
    }
    100% {
  transform: rotate(360deg);
  }
}

html[data-theme="fusion"] .glass-card:hover {
  animation: fusionFloat 6s ease-in-out infinite;
}

/* Glass Liquid - Add liquid-like quality to components */
html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    animation: liquidCardFloat 6s ease-in-out infinite;
}

@keyframes liquidCardFloat {
    0%, 100% {
        transform: translateY(0px);
        border-radius: 24px;
    }
    33% {
        transform: translateY(-5px);
border-radius: 28px 20px 24px 26px;
    }
    66% {
      transform: translateY(3px);
        border-radius: 20px 28px 26px 22px;
    }
}

html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .button {
    background: rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .button:hover {
    background: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    border-radius: 20px;
}

html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
 border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  border-radius: 18px;
    outline: none;
}

/* =============================================
   CHERRY BLOSSOM: Soft Pink Japanese Aesthetic
============================================= */
html[data-theme="cherry-blossom"],
:root[data-theme="cherry-blossom"] {
    --color-background: #fff5f7;
    --color-surface: #ffffff;
    --color-surface-subtle: #ffe4e9;
    --color-surface-elevated: #ffffff;

    --text-primary: #4a1c2e;
    --text-secondary: #8b5569;
    --text-tertiary: #b08796;

    --border-light: #ffd1dc;
    --border-medium: #ffb3c6;
    --border-dark: #ff9ab5;

    --google-blue: #ff6b9d;
    --google-blue-light: #ff8fb4;
    --google-blue-dark: #e85384;
    --google-blue-subtle: rgba(255, 107, 157, 0.12);

    --google-red: #ff5c8d;
    --google-yellow: #ffc4d6;
    --google-green: #ff9ab5;

    --theme-radius-md: 20px;
    --theme-radius-lg: 20px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 4px 12px rgba(255, 107, 157, 0.08);
    --theme-shadow-md: 0 8px 20px rgba(255, 107, 157, 0.12);
}

html[data-theme="cherry-blossom"] body {
    background: #fff5f7;
}

html[data-theme="cherry-blossom"] .glass-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: var(--theme-shadow-md);
 transition: all 0.3s ease;
}

html[data-theme="cherry-blossom"] .glass-card:hover {
    box-shadow: 0 12px 30px rgba(255, 107, 157, 0.15);
    transform: translateY(-2px);
}

/* Cherry Blossom Buttons - Soft, rounded with petal-like effects */
html[data-theme="cherry-blossom"] .btn,
html[data-theme="cherry-blossom"] .btn-primary,
html[data-theme="cherry-blossom"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fb4 100%);
    border: none;
    border-radius: 20px;
    color: white;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.2);
  transition: all 0.3s ease;
}

html[data-theme="cherry-blossom"] .btn:hover,
html[data-theme="cherry-blossom"] .btn-primary:hover {
    background: linear-gradient(135deg, #e85384 0%, #ff6b9d 100%);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.3);
    transform: translateY(-2px);
}

/* Cherry Blossom Nav Pill - Soft pink with rounded edges */
html[data-theme="cherry-blossom"] .pill-nav {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ffd1dc;
 border-radius: 30px;
    box-shadow: 0 4px 20px rgba(255, 107, 157, 0.1);
}

html[data-theme="cherry-blossom"] .pill-nav__item {
    border-radius: 20px;
  transition: all 0.3s ease;
}

html[data-theme="cherry-blossom"] .pill-nav__item:hover {
  background: rgba(255, 107, 157, 0.1);
}

html[data-theme="cherry-blossom"] .pill-nav__item.active {
    background: linear-gradient(135deg, #ff6b9d 0%, #ff8fb4 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

/* Cherry Blossom Inputs - Soft, rounded */
html[data-theme="cherry-blossom"] input,
html[data-theme="cherry-blossom"] select,
html[data-theme="cherry-blossom"] textarea {
 background: white;
    border: 1px solid #ffd1dc;
    border-radius: 20px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

html[data-theme="cherry-blossom"] input:focus,
html[data-theme="cherry-blossom"] select:focus,
html[data-theme="cherry-blossom"] textarea:focus {
    border-color: #ff6b9d;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
    outline: none;
}

/* =============================================
   SILVER METALLIC: Sharp, Cold, Metallic
============================================= */
html[data-theme="silver-metallic"],
:root[data-theme="silver-metallic"] {
    --color-background: #e2e8f0;
    --color-surface: #f1f5f9;
    --color-surface-subtle: #cbd5e1;
    --color-surface-elevated: #f8fafc;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;

    --border-light: #94a3b8;
    --border-medium: #64748b;
    --border-dark: #475569;

    --google-blue: #3b82f6;
    --google-blue-light: #60a5fa;
    --google-blue-dark: #2563eb;
    --google-blue-subtle: rgba(59, 130, 246, 0.1);

  --google-red: #ef4444;
    --google-yellow: #f59e0b;
    --google-green: #10b981;

  --theme-radius-md: 4px;
    --theme-radius-lg: 6px;
    --theme-border-width: 2px;
    --theme-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --theme-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="silver-metallic"] body {
    background: #e2e8f0;
}

html[data-theme="silver-metallic"] .glass-card {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid var(--border-light);
  border-radius: 4px;
box-shadow: var(--theme-shadow-md);
    position: relative;
    overflow: hidden;
}

html[data-theme="silver-metallic"] .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.5s ease;
}

html[data-theme="silver-metallic"] .glass-card:hover::before {
    left: 100%;
}

/* Silver Metallic Buttons - Sharp, metallic with beveled edges */
html[data-theme="silver-metallic"] .btn,
html[data-theme="silver-metallic"] .btn-primary,
html[data-theme="silver-metallic"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
    border: 2px solid #94a3b8;
    border-radius: 4px;
  color: #0f172a;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease;
    font-weight: 600;
}

html[data-theme="silver-metallic"] .btn:hover,
html[data-theme="silver-metallic"] .btn-primary:hover {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    border-color: #64748b;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 1);
    transform: translateY(-1px);
}

html[data-theme="silver-metallic"] .btn:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* Silver Metallic Nav Pill - Sharp, metallic with hard edges */
html[data-theme="silver-metallic"] .pill-nav {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #94a3b8;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html[data-theme="silver-metallic"] .pill-nav__item {
    border-radius: 4px;
    transition: all 0.2s ease;
}

html[data-theme="silver-metallic"] .pill-nav__item:hover {
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 50%);
}

html[data-theme="silver-metallic"] .pill-nav__item.active {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Silver Metallic Inputs - Sharp, beveled */
html[data-theme="silver-metallic"] input,
html[data-theme="silver-metallic"] select,
html[data-theme="silver-metallic"] textarea {
    background: white;
    border: 2px solid #94a3b8;
    border-radius: 4px;
    padding: 0.75rem 1rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="silver-metallic"] input:focus,
html[data-theme="silver-metallic"] select:focus,
html[data-theme="silver-metallic"] textarea:focus {
    border-color: #3b82f6;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* =============================================
   GOLD METALLIC: Rich Dark with Gold Accents
============================================= */
html[data-theme="gold-metallic"],
:root[data-theme="gold-metallic"] {
    --color-background: #0f0f00;
    --color-surface: #1a1a0a;
    --color-surface-subtle: rgba(212, 175, 55, 0.08);
 --color-surface-elevated: #252516;

    --text-primary: #f5f0e8;
    --text-secondary: #d4af37;
    --text-tertiary: #9a8a5a;

    --border-light: rgba(212, 175, 55, 0.25);
    --border-medium: rgba(212, 175, 55, 0.4);
    --border-dark: #d4af37;

    --google-blue: #d4af37;
    --google-blue-light: #f0d98f;
    --google-blue-dark: #b8941e;
    --google-blue-subtle: rgba(212, 175, 55, 0.15);

    --google-red: #ff6b6b;
    --google-yellow: #ffd700;
    --google-green: #4ecdc4;

    --theme-radius-md: 8px;
 --theme-radius-lg: 12px;
    --theme-border-width: 1px;
    --theme-shadow-sm: 0 4px 12px rgba(212, 175, 55, 0.2), 0 2px 6px rgba(0, 0, 0, 0.8);
 --theme-shadow-md: 0 8px 24px rgba(212, 175, 55, 0.3), 0 4px 12px rgba(0, 0, 0, 0.9);
}

html[data-theme="gold-metallic"] body {
    background: #0f0f00;
}

html[data-theme="gold-metallic"] .glass-card {
    background: linear-gradient(135deg, rgba(26, 26, 10, 0.95) 0%, rgba(37, 37, 22, 0.9) 100%);
 border: 1px solid var(--border-light);
    box-shadow: var(--theme-shadow-md);
    position: relative;
}

html[data-theme="gold-metallic"] .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    opacity: 0.6;
}

html[data-theme="gold-metallic"] .glass-card:hover {
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.4), 0 6px 16px rgba(0, 0, 0, 0.95);
    border-color: var(--border-medium);
}

html[data-theme="gold-metallic"] h1,
html[data-theme="gold-metallic"] h2,
html[data-theme="gold-metallic"] h3 {
  color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Gold Metallic Buttons - Luxurious gold with glow effect */
html[data-theme="gold-metallic"] .btn,
html[data-theme="gold-metallic"] .btn-primary,
html[data-theme="gold-metallic"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    border: 1px solid #f0d98f;
    border-radius: 8px;
    color: #0f0f00;
    padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

html[data-theme="gold-metallic"] .btn:hover,
html[data-theme="gold-metallic"] .btn-primary:hover {
    background: linear-gradient(135deg, #f0d98f 0%, #d4af37 100%);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Gold Metallic Nav Pill - Dark with gold accents and glow */
html[data-theme="gold-metallic"] .pill-nav {
 background: rgba(26, 26, 10, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2), inset 0 1px 0 rgba(212, 175, 55, 0.1);
}

html[data-theme="gold-metallic"] .pill-nav__item {
    border-radius: 8px;
 color: #d4af37;
 transition: all 0.3s ease;
}

html[data-theme="gold-metallic"] .pill-nav__item:hover {
 background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

html[data-theme="gold-metallic"] .pill-nav__item.active {
    background: linear-gradient(135deg, #d4af37 0%, #b8941e 100%);
    color: #0f0f00;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Gold Metallic Inputs - Dark with gold borders */
html[data-theme="gold-metallic"] input,
html[data-theme="gold-metallic"] select,
html[data-theme="gold-metallic"] textarea {
    background: rgba(26, 26, 10, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #f5f0e8;
    padding: 0.75rem 1rem;
}

html[data-theme="gold-metallic"] input:focus,
html[data-theme="gold-metallic"] select:focus,
html[data-theme="gold-metallic"] textarea:focus {
    border-color: #d4af37;
 box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15), 0 0 10px rgba(212, 175, 55, 0.2);
    outline: none;
}

/* =============================================
   GLASS LIQUID: Frosted Glass with Flowing Colors
============================================= */
html[data-theme="glass-liquid"],
:root[data-theme="glass-liquid"] {
    --color-background: #0a0e1a;
    --color-surface: rgba(255, 255, 255, 0.1);
    --color-surface-subtle: rgba(255, 255, 255, 0.05);
    --color-surface-elevated: rgba(255, 255, 255, 0.15);

    --text-primary: #f0f4f8;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;

    --border-light: rgba(255, 255, 255, 0.15);
    --border-medium: rgba(255, 255, 255, 0.25);
    --border-dark: rgba(255, 255, 255, 0.4);

    --google-blue: #38bdf8;
    --google-blue-light: #7dd3fc;
    --google-blue-dark: #0ea5e9;
    --google-blue-subtle: rgba(56, 189, 248, 0.15);

    --google-red: #f87171;
    --google-yellow: #fbbf24;
    --google-green: #34d399;

 --theme-radius-md: 16px;
    --theme-radius-lg: 24px;
  --theme-border-width: 1px;
    --theme-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
    --theme-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html[data-theme="glass-liquid"] body {
    background: #0a0e1a;
}

html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .glass-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    transform: translateY(-4px);
}

/* Glass Liquid Buttons - Frosted glass with liquid morphing */
html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .btn-primary,
html[data-theme="glass-liquid"] button:not(.pill-nav__item):not(.pill-nav__toggle) {
    background: rgba(56, 189, 248, 0.15);
    backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 16px;
    color: #38bdf8;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .btn-primary:hover {
  background: rgba(56, 189, 248, 0.25);
    border-color: rgba(56, 189, 248, 0.5);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    transform: translateY(-2px);
    border-radius: 20px;
}

/* Glass Liquid Nav Pill - Ultra-frosted with liquid edges */
html[data-theme="glass-liquid"] .pill-nav {
    background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html[data-theme="glass-liquid"] .pill-nav__item {
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .pill-nav__item:hover {
    background: rgba(56, 189, 248, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 18px;
}

html[data-theme="glass-liquid"] .pill-nav__item.active {
  background: rgba(56, 189, 248, 0.2);
    backdrop-filter: blur(15px);
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
border-radius: 20px;
}

/* Glass Liquid Inputs - Frosted glass with liquid focus */
html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
 border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  border-radius: 18px;
    outline: none;
}

/* =============================================
   ANIMATIONS FOR NEW THEMES
============================================= */

/* Sakura Petal Fall with Sway */
@keyframes sakuraFall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 50vh, 0) rotate(180deg);
    }
    90% {
     opacity: 1;
    }
    100% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 110vh, 0) rotate(360deg);
    opacity: 0;
    }
}

/* Silver Glint Movement */
@keyframes silverGlint {
    0% {
        transform: translate3d(-100%, -100%, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(100%, 100%, 0) rotate(45deg);
    }
}

/* Gold Sparkle Flicker */
@keyframes goldFlicker {
    0%, 100% {
        opacity: 0.2;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
      opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

/* Liquid Blob Floating Animations */
@keyframes liquidFloat1 {
  0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(100px, -80px, 0);
    }
    66% {
        transform: translate3d(-50px, 60px, 0);
    }
}

@keyframes liquidFloat2 {
    0%, 100% {
transform: translate3d(0, 0, 0);
    }
    33% {
    transform: translate3d(-120px, 90px, 0);
  }
    66% {
        transform: translate3d(80px, -70px, 0);
    }
}

@keyframes liquidFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(60px, 100px, 0);
    }
    66% {
  transform: translate3d(-90px, -50px, 0);
  }
}

/* Prism Particle Animations */
@keyframes prismFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
    50% {
        transform: translate3d(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px, 0) scale(1.5);
     opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
}

@keyframes prismRotate {
    0% {
transform: rotate(0deg);
    }
    100% {
  transform: rotate(360deg);
  }
}

html[data-theme="fusion"] .glass-card:hover {
  animation: fusionFloat 6s ease-in-out infinite;
}

/* Glass Liquid - Add liquid-like quality to components */
html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    animation: liquidCardFloat 6s ease-in-out infinite;
}

@keyframes liquidCardFloat {
    0%, 100% {
        transform: translateY(0px);
        border-radius: 24px;
    }
    33% {
        transform: translateY(-5px);
border-radius: 28px 20px 24px 26px;
    }
    66% {
      transform: translateY(3px);
        border-radius: 20px 28px 26px 22px;
    }
}

html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .button {
    background: rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .button:hover {
    background: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    border-radius: 20px;
}

html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
 border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  border-radius: 18px;
    outline: none;
}

/* =============================================
   ANIMATIONS FOR NEW THEMES
============================================= */

/* Sakura Petal Fall with Sway */
@keyframes sakuraFall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 50vh, 0) rotate(180deg);
    }
    90% {
     opacity: 1;
    }
    100% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 110vh, 0) rotate(360deg);
    opacity: 0;
    }
}

/* Silver Glint Movement */
@keyframes silverGlint {
    0% {
        transform: translate3d(-100%, -100%, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(100%, 100%, 0) rotate(45deg);
    }
}

/* Gold Sparkle Flicker */
@keyframes goldFlicker {
    0%, 100% {
        opacity: 0.2;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
      opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

/* Liquid Blob Floating Animations */
@keyframes liquidFloat1 {
  0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(100px, -80px, 0);
    }
    66% {
        transform: translate3d(-50px, 60px, 0);
    }
}

@keyframes liquidFloat2 {
    0%, 100% {
transform: translate3d(0, 0, 0);
    }
    33% {
    transform: translate3d(-120px, 90px, 0);
  }
    66% {
        transform: translate3d(80px, -70px, 0);
    }
}

@keyframes liquidFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(60px, 100px, 0);
    }
    66% {
  transform: translate3d(-90px, -50px, 0);
  }
}

/* Prism Particle Animations */
@keyframes prismFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
    50% {
        transform: translate3d(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px, 0) scale(1.5);
     opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
}

@keyframes prismRotate {
    0% {
transform: rotate(0deg);
    }
    100% {
  transform: rotate(360deg);
  }
}

html[data-theme="fusion"] .glass-card:hover {
  animation: fusionFloat 6s ease-in-out infinite;
}

/* Glass Liquid - Add liquid-like quality to components */
html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    animation: liquidCardFloat 6s ease-in-out infinite;
}

@keyframes liquidCardFloat {
    0%, 100% {
        transform: translateY(0px);
        border-radius: 24px;
    }
    33% {
        transform: translateY(-5px);
border-radius: 28px 20px 24px 26px;
    }
    66% {
      transform: translateY(3px);
        border-radius: 20px 28px 26px 22px;
    }
}

html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .button {
    background: rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .button:hover {
    background: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    border-radius: 20px;
}

html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
 border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  border-radius: 18px;
    outline: none;
}

/* =============================================
   ANIMATIONS FOR NEW THEMES
============================================= */

/* Sakura Petal Fall with Sway */
@keyframes sakuraFall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 50vh, 0) rotate(180deg);
    }
    90% {
     opacity: 1;
    }
    100% {
        transform: translate3d(calc(sin(var(--progress, 0.5)) * 100px), 110vh, 0) rotate(360deg);
    opacity: 0;
    }
}

/* Silver Glint Movement */
@keyframes silverGlint {
    0% {
        transform: translate3d(-100%, -100%, 0) rotate(45deg);
    }
    100% {
        transform: translate3d(100%, 100%, 0) rotate(45deg);
    }
}

/* Gold Sparkle Flicker */
@keyframes goldFlicker {
    0%, 100% {
        opacity: 0.2;
        transform: translate3d(0, 0, 0) scale(0.8);
    }
    50% {
      opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.2);
    }
}

/* Liquid Blob Floating Animations */
@keyframes liquidFloat1 {
  0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(100px, -80px, 0);
    }
    66% {
        transform: translate3d(-50px, 60px, 0);
    }
}

@keyframes liquidFloat2 {
    0%, 100% {
transform: translate3d(0, 0, 0);
    }
    33% {
    transform: translate3d(-120px, 90px, 0);
  }
    66% {
        transform: translate3d(80px, -70px, 0);
    }
}

@keyframes liquidFloat3 {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    33% {
        transform: translate3d(60px, 100px, 0);
    }
    66% {
  transform: translate3d(-90px, -50px, 0);
  }
}

/* Prism Particle Animations */
@keyframes prismFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
    50% {
        transform: translate3d(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px, 0) scale(1.5);
     opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scale(1);
      opacity: 0.3;
    }
}

@keyframes prismRotate {
    0% {
transform: rotate(0deg);
    }
    100% {
  transform: rotate(360deg);
  }
}

html[data-theme="fusion"] .glass-card:hover {
  animation: fusionFloat 6s ease-in-out infinite;
}

/* Glass Liquid - Add liquid-like quality to components */
html[data-theme="glass-liquid"] .glass-card {
    background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--theme-shadow-md);
    animation: liquidCardFloat 6s ease-in-out infinite;
}

@keyframes liquidCardFloat {
    0%, 100% {
        transform: translateY(0px);
        border-radius: 24px;
    }
    33% {
        transform: translateY(-5px);
border-radius: 28px 20px 24px 26px;
    }
    66% {
      transform: translateY(3px);
        border-radius: 20px 28px 26px 22px;
    }
}

html[data-theme="glass-liquid"] .btn,
html[data-theme="glass-liquid"] .button {
    background: rgba(56, 189, 248, 0.15);
  backdrop-filter: blur(15px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] .btn:hover,
html[data-theme="glass-liquid"] .button:hover {
    background: rgba(56, 189, 248, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.3);
    border-radius: 20px;
}

html[data-theme="glass-liquid"] input,
html[data-theme="glass-liquid"] select,
html[data-theme="glass-liquid"] textarea {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="glass-liquid"] input:focus,
html[data-theme="glass-liquid"] select:focus,
html[data-theme="glass-liquid"] textarea:focus {
    background: rgba(255, 255, 255, 0.12);
 border-color: var(--google-blue);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  border-radius: 18px;
    outline: none;
}