/* ============================================
   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;
    }
}
/* 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;
}

/* =============================================
   LAPIS LAZULI: Deep Blue Crystal With Gold Flecks
============================================= */
html[data-theme="lapis-lazuli"],
:root[data-theme="lapis-lazuli"] {
    --color-background: #030817;
    --color-surface: rgba(6, 18, 48, 0.88);
    --color-surface-subtle: rgba(61, 107, 255, 0.12);
    --color-surface-elevated: rgba(9, 27, 72, 0.94);

    --text-primary: #f4f7ff;
    --text-secondary: #c6d2ef;
    --text-tertiary: #8999c6;

    --border-light: rgba(139, 181, 255, 0.28);
    --border-medium: rgba(74, 129, 255, 0.48);
    --border-dark: rgba(30, 92, 255, 0.72);

    --google-blue: #1a4dff;
    --google-blue-light: #3db8ff;
    --google-blue-dark: #082489;
    --google-blue-subtle: rgba(26, 77, 255, 0.20);

    --google-red: #ff5d66;
    --google-yellow: #d9af3f;
    --google-green: #35d399;

    --theme-font: 'Inter', 'Roboto', system-ui, sans-serif;
    --theme-radius-md: 10px;
    --theme-radius-lg: 14px;
    --theme-border-width: 1px;
    --theme-blur: 22px;
    --theme-saturation: 175%;
    --theme-shadow-sm: 0 10px 26px rgba(0, 7, 25, 0.36), 0 0 18px rgba(26, 77, 255, 0.10);
    --theme-shadow-md: 0 18px 48px rgba(0, 7, 25, 0.52), 0 0 28px rgba(26, 77, 255, 0.16);
    --theme-shadow-lg: 0 30px 90px rgba(0, 7, 25, 0.66), 0 0 42px rgba(26, 77, 255, 0.20);
    --theme-gold: #d9af3f;
    --theme-gold-light: #f5d778;
    --theme-crystal: #39b8ff;
    --theme-crystal-edge:
        linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0 1px, transparent 1px 56%) top left / 86px 86px no-repeat,
        linear-gradient(225deg, rgba(61, 184, 255, 0.32) 0 1px, transparent 1px 58%) top right / 96px 96px no-repeat,
        linear-gradient(45deg, rgba(61, 184, 255, 0.24) 0 1px, transparent 1px 62%) bottom left / 86px 86px no-repeat,
        linear-gradient(315deg, rgba(245, 215, 120, 0.18) 0 1px, transparent 1px 60%) bottom right / 102px 102px no-repeat;
    --theme-surface-texture:
        linear-gradient(122deg, transparent 0 38%, rgba(61, 184, 255, 0.10) 39%, transparent 44%),
        linear-gradient(58deg, transparent 0 52%, rgba(245, 215, 120, 0.08) 53%, transparent 58%);
}

html[data-theme="lapis-lazuli"] body {
    background:
        radial-gradient(circle at 16% 6%, rgba(61, 184, 255, 0.20), transparent 25rem),
        radial-gradient(circle at 82% 14%, rgba(15, 65, 220, 0.28), transparent 26rem),
        radial-gradient(circle at 70% 92%, rgba(217, 175, 63, 0.13), transparent 24rem),
        linear-gradient(155deg, #020511 0%, #061638 45%, #020817 100%) !important;
    color: var(--text-primary);
}

html[data-theme="lapis-lazuli"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(116deg, transparent 0 34%, rgba(61, 184, 255, 0.10) 35%, transparent 42%),
        linear-gradient(64deg, transparent 0 58%, rgba(31, 93, 255, 0.12) 59%, transparent 66%),
        radial-gradient(circle at 28% 72%, rgba(217, 175, 63, 0.12), transparent 18rem);
    opacity: 0.88;
}

html[data-theme="lapis-lazuli"] :where(
    .glass-card,
    .card,
    .section,
    .table-container,
    .modal-box,
    .settings-sidebar,
    .settings-content .card,
    .builder-item,
    .project-card,
    .kanban-card,
    .notification-card,
    .message-card,
    .document-card,
    .agent-card,
    .vault-card
) {
    background:
        var(--theme-crystal-edge),
        linear-gradient(90deg, rgba(139, 181, 255, 0.24), transparent 18%, transparent 82%, rgba(61, 184, 255, 0.18)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 22%, transparent 78%, rgba(26, 77, 255, 0.16)),
        linear-gradient(135deg, rgba(36, 92, 255, 0.10), rgba(6, 18, 48, 0.34)),
        var(--theme-surface-texture),
        var(--color-surface-elevated) !important;
    border-color: rgba(124, 174, 255, 0.28) !important;
    box-shadow:
        inset 0 0 0 1px rgba(159, 202, 255, 0.08),
        inset 10px 0 18px rgba(61, 184, 255, 0.06),
        inset -10px 0 18px rgba(217, 175, 63, 0.05),
        var(--theme-shadow-md) !important;
    backdrop-filter: blur(var(--theme-blur)) saturate(var(--theme-saturation));
    -webkit-backdrop-filter: blur(var(--theme-blur)) saturate(var(--theme-saturation));
}

html[data-theme="lapis-lazuli"] :where(h1, h2, h3) {
    color: #f7fbff;
    text-shadow: 0 0 28px rgba(61, 184, 255, 0.24);
}

html[data-theme="lapis-lazuli"] :where(.pill-nav, .pill-nav-sidebar) {
    background:
        var(--theme-crystal-edge),
        linear-gradient(135deg, rgba(8, 24, 64, 0.90), rgba(2, 8, 24, 0.88)),
        var(--theme-surface-texture) !important;
    border: 1px solid rgba(139, 181, 255, 0.34) !important;
    box-shadow: 0 18px 58px rgba(0, 7, 25, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="lapis-lazuli"] :where(.pill-nav__item, .pill-nav-sidebar__item, .pill-nav__dropdown-item) {
    color: var(--text-secondary);
}

html[data-theme="lapis-lazuli"] :where(.pill-nav__item:hover, .pill-nav-sidebar__item:hover, .pill-nav__dropdown-item:hover) {
    background: rgba(61, 184, 255, 0.12) !important;
    color: #ffffff !important;
}

html[data-theme="lapis-lazuli"] :where(.pill-nav__item.active, .pill-nav-sidebar__item.active) {
    background:
        linear-gradient(135deg, rgba(26, 77, 255, 0.96), rgba(4, 31, 130, 0.92)),
        linear-gradient(110deg, transparent 0 42%, rgba(255, 255, 255, 0.24) 43%, transparent 50%) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(139, 181, 255, 0.35), 0 8px 22px rgba(26, 77, 255, 0.34) !important;
}

html[data-theme="lapis-lazuli"] :where(.btn-primary, button.btn-primary) {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.28) 0 1px, transparent 1px 42%) top left / 46px 46px no-repeat,
        linear-gradient(315deg, rgba(245,215,120,0.26) 0 1px, transparent 1px 48%) bottom right / 52px 52px no-repeat,
        linear-gradient(135deg, #1a4dff 0%, #0730b3 58%, #06164c 100%) !important;
    border: 1px solid rgba(139, 181, 255, 0.52) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(26, 77, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html[data-theme="lapis-lazuli"] :where(.btn-primary:hover, button.btn-primary:hover) {
    background: linear-gradient(135deg, #3db8ff 0%, #1a4dff 54%, #082489 100%) !important;
}

html[data-theme="lapis-lazuli"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    background:
        linear-gradient(135deg, rgba(139,181,255,0.18) 0 1px, transparent 1px 54%) top left / 54px 54px no-repeat,
        linear-gradient(315deg, rgba(61,184,255,0.16) 0 1px, transparent 1px 54%) bottom right / 54px 54px no-repeat,
        rgba(2, 10, 31, 0.72) !important;
    border: 1px solid rgba(139, 181, 255, 0.32) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="lapis-lazuli"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):focus {
    border-color: var(--theme-crystal) !important;
    box-shadow: 0 0 0 3px rgba(61, 184, 255, 0.20), 0 0 22px rgba(26, 77, 255, 0.22) !important;
    outline: none !important;
}

html[data-theme="lapis-lazuli"] :where(.badge, .um-badge, .notif-badge) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

html[data-theme="lapis-lazuli"] .pill-nav__theme-panel {
    background:
        var(--theme-crystal-edge),
        radial-gradient(circle at top left, rgba(61, 184, 255, 0.22), transparent 46%),
        linear-gradient(135deg, rgba(8, 24, 64, 0.98), rgba(2, 8, 24, 0.96)),
        var(--theme-surface-texture) !important;
    border-color: rgba(139, 181, 255, 0.42) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 24px 70px rgba(0, 7, 25, 0.62),
        0 0 36px rgba(61, 184, 255, 0.18) !important;
}

.lapis-scene__refractions {
    mix-blend-mode: screen;
}

.lapis-scene__ray {
    position: absolute;
    top: var(--lapis-ray-top);
    left: -34vw;
    width: 168vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(61, 184, 255, 0.16), rgba(255, 255, 255, 0.38), rgba(245, 215, 120, 0.14), transparent);
    box-shadow: 0 0 22px rgba(61, 184, 255, 0.30);
    opacity: 0;
    transform: rotate(-21deg) translateX(-28vw);
    animation: lapisRefractionSweep var(--lapis-ray-duration) ease-in-out var(--lapis-ray-delay) infinite;
}

.lapis-corner-crystal {
    position: absolute;
    width: clamp(9rem, 18vw, 18rem);
    aspect-ratio: 1;
    opacity: 0.46;
    filter: drop-shadow(0 0 26px rgba(61, 184, 255, 0.46));
}

.lapis-corner-crystal span {
    position: absolute;
    display: block;
    background:
        linear-gradient(132deg, rgba(255, 255, 255, 0.54), transparent 24%),
        linear-gradient(52deg, rgba(61, 184, 255, 0.88), rgba(26, 77, 255, 0.38) 52%, rgba(2, 8, 24, 0.08));
    border: 1px solid rgba(159, 202, 255, 0.30);
    clip-path: polygon(50% 0%, 100% 29%, 78% 82%, 44% 100%, 0 70%, 14% 24%);
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.10), inset -10px -18px 28px rgba(2, 8, 24, 0.24);
}

.lapis-corner-crystal span:nth-child(1) {
    inset: 9% 22% 25% 18%;
    transform: rotate(-16deg);
}

.lapis-corner-crystal span:nth-child(2) {
    inset: 24% 4% 10% 38%;
    transform: rotate(18deg) scale(0.72);
}

.lapis-corner-crystal span:nth-child(3) {
    inset: 42% 42% 5% 8%;
    transform: rotate(34deg) scale(0.58);
    background:
        radial-gradient(circle at 45% 36%, rgba(245, 215, 120, 0.74) 0 2px, transparent 3px),
        linear-gradient(132deg, rgba(255, 255, 255, 0.42), transparent 28%),
        linear-gradient(52deg, rgba(61, 184, 255, 0.66), rgba(7, 39, 145, 0.36));
}

.lapis-corner-crystal--top-left {
    transform: translate(-38%, -34%) rotate(8deg);
}

.lapis-corner-crystal--top-right {
    transform: translate(38%, -34%) rotate(-78deg);
}

.lapis-corner-crystal--bottom-left {
    transform: translate(-38%, 36%) rotate(78deg);
}

.lapis-corner-crystal--bottom-right {
    transform: translate(36%, 36%) rotate(188deg);
}

.lapis-scene__shard {
    position: absolute;
    width: var(--lapis-shard-size);
    height: calc(var(--lapis-shard-size) * 1.22);
    clip-path: polygon(50% 0%, 92% 24%, 78% 76%, 48% 100%, 12% 74%, 0 26%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.30), transparent 28%),
        linear-gradient(62deg, rgba(61, 184, 255, 0.62), rgba(8, 42, 148, 0.22) 48%, rgba(2, 8, 24, 0.10));
    border: 1px solid rgba(139, 181, 255, 0.22);
    filter: drop-shadow(0 0 18px rgba(26, 77, 255, 0.30));
}

.lapis-scene__fleck {
    position: absolute;
    border-radius: 50%;
    background: var(--theme-gold-light, #f5d778);
    box-shadow: 0 0 8px rgba(245, 215, 120, 0.84), 0 0 18px rgba(217, 175, 63, 0.34);
    animation: lapisFleckPulse 4s ease-in-out infinite;
}

@keyframes lapisShardDrift {
    from { transform: translate3d(-8px, -6px, 0) rotate(var(--lapis-rotate, -8deg)); }
    to { transform: translate3d(10px, 12px, 0) rotate(10deg); }
}

@keyframes lapisFleckPulse {
    0%, 100% { opacity: 0.18; transform: scale(0.72); }
    50% { opacity: 1; transform: scale(1.12); }
}

@keyframes lapisRefractionSweep {
    0%, 100% { opacity: 0; transform: rotate(-21deg) translateX(-34vw); }
    14%, 32% { opacity: 0.82; }
    52% { opacity: 0.12; transform: rotate(-21deg) translateX(34vw); }
}

@media (prefers-reduced-motion: reduce) {
    .lapis-scene__shard,
    .lapis-scene__fleck,
    .lapis-scene__ray {
        animation: none !important;
    }
}

html[data-theme="lapis-lazuli"] #theme-dynamic-elements {
    mix-blend-mode: normal;
    opacity: 0.94;
}

html[data-theme="lapis-lazuli"] .lapis-shader-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.86;
    contain: strict;
    transform: translateZ(0);
}

/* =============================================
   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);
    }
}
/* 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;
}
/* =============================================
   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);
    }
}
/* 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;
}
/* =============================================
   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);
    }
}
/* 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;
}