/* ============================================================
   AURA THEME — Liquid Glass / Glassmorphism  (v4 – translucent)
   Inspired by iOS / Apple Vision Pro glass design
   ============================================================ */

/* ===================== 1. CUSTOM PROPERTIES ===================== */
:root {
    --aura-pink: #f9a8d4;
    --aura-lavender: #c4b5fd;
    --aura-sky: #93c5fd;
    --aura-mint: #6ee7b7;
    --aura-peach: #fda4af;
    --aura-yellow: #fde68a;

    /* LIGHT: translucent glass */
    --aura-glass-bg: rgba(255, 255, 255, 0.45);
    --aura-glass-border: rgba(255, 255, 255, 0.55);
    --aura-glass-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.75),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --aura-blur: blur(28px) saturate(2) brightness(1.08);
    --aura-radius: 24px;
    --aura-radius-lg: 32px;
    --aura-radius-xl: 40px;

    --aura-gradient: linear-gradient(135deg, #f9a8d4 0%, #c4b5fd 25%, #93c5fd 50%, #6ee7b7 75%, #fde68a 100%);
    --aura-gradient-soft: linear-gradient(135deg, rgba(249,168,212,0.18) 0%, rgba(196,181,253,0.18) 25%, rgba(147,197,253,0.18) 50%, rgba(110,231,183,0.18) 75%, rgba(253,230,138,0.18) 100%);
    --aura-gradient-vivid: linear-gradient(135deg, #f472b6 0%, #a78bfa 25%, #60a5fa 50%, #34d399 75%, #fbbf24 100%);

    /* Override app primary color tokens */
    --color-primary-50:  #faf5ff;
    --color-primary-100: #f3e8ff;
    --color-primary-200: #e9d5ff;
    --color-primary-300: #d8b4fe;
    --color-primary-400: #c084fc;
    --color-primary-500: #a78bfa;
    --color-primary-600: #8b5cf6;
    --color-primary-700: #7c3aed;
    --color-primary-800: #6d28d9;
    --color-primary-900: #5b21b6;

    --aura-body-bg: #ede5ff;
    --aura-card-bg: rgba(255, 255, 255, 0.42);
    --aura-card-border: rgba(255, 255, 255, 0.55);
    --aura-text: #1e1b4b;
    --aura-text-secondary: #6b7280;

    --aura-sidebar-bg: rgba(255, 255, 255, 0.52);
    --aura-header-bg: rgba(255, 255, 255, 0.48);

    /* Glass inner surfaces (inputs, inset panels) */
    --aura-inner-bg: rgba(0, 0, 0, 0.03);
    --aura-inner-border: rgba(0, 0, 0, 0.08);

    /* Glass hover lift */
    --aura-glass-hover-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.9),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.18),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.10),
        0 0 36px rgba(196, 181, 253, 0.07);
}

.dark {
    --aura-glass-bg: rgba(255, 255, 255, 0.06);
    --aura-glass-border: rgba(255, 255, 255, 0.12);
    --aura-glass-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --aura-blur: blur(28px) saturate(2) brightness(1.08);

    --aura-body-bg: #0c0a1d;
    --aura-card-bg: rgba(255, 255, 255, 0.06);
    --aura-card-border: rgba(255, 255, 255, 0.12);
    --aura-text: #ede9fe;
    --aura-text-secondary: #a5b4fc;

    --aura-sidebar-bg: rgba(255, 255, 255, 0.04);
    --aura-header-bg: rgba(255, 255, 255, 0.05);

    --aura-inner-bg: rgba(255, 255, 255, 0.035);
    --aura-inner-border: rgba(255, 255, 255, 0.06);

    --aura-glass-hover-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.18),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 36px rgba(139, 92, 246, 0.05);
}

/* ===================== 2. BODY / BACKGROUND ===================== */
body {
    background-color: var(--aura-body-bg) !important;
    background-image: url('../images/bg0.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: top center !important;
}

.dark body,
body.dark,
html.dark body {
    background-color: #0c0a1d !important;
    background-image: url('../images/bg0.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: top center !important;
    /* overlay aurora glow on top of image */
}

/* Keep landing backdrop identical to light mode even when dark mode is enabled */
html.dark body:has(.aurora-section),
body.dark:has(.aurora-section) {
    background-color: #ede5ff !important;
    background-image: url('../images/bg0.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: top center !important;
}

/* ===================== 3. GLOBAL GLASS CARD / CONTAINER OVERRIDES ===================== */

/* --- Glass Specular Mixin (applied via pseudo-elements) --- */
/* We use a shared approach: ::before = top-edge specular highlight,
   ::after = inner refraction caustic. Both use mix-blend-mode: overlay. */

/* Card glass effects scoped to .card and content-area .bg-white only.
   Layout containers (sidebar, header) have their own glass rules in sections 4-5.
   iOS 26 Liquid Glass — bezel rim highlights + enhanced caustics */
.card,
main .bg-white {
    position: relative;
    background: rgba(255, 255, 255, 0.40) !important;
    backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    border: none !important;
    border-radius: var(--aura-radius) !important;
    box-shadow:
        /* Bezel rim — all edges */
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.12),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.18),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.18),
        /* Depth shadow */
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(196, 181, 253, 0.08) !important;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease !important;
    isolation: isolate;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.90),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.18),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.25),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 20px 60px rgba(0, 0, 0, 0.10),
        0 0 36px rgba(196, 181, 253, 0.07) !important;
}

/* Specular highlight — bezel top-edge refraction bloom */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.65) 0%,
            rgba(255,255,255,0.25) 2%,
            rgba(255,255,255,0.06) 8%,
            transparent 25%
        ),
        linear-gradient(0deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.02) 3%,
            transparent 10%
        );
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
}

/* Inner refraction caustics */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 70% 50% at 20% 5%, rgba(255,255,255,0.20) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 95%, rgba(255,255,255,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(196,181,253,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
}

.dark .card,
.dark main .bg-white,
.dark .bg-dark-800,
.dark .dark\:bg-dark-800 {
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.03),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.04),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
}

.dark .card::before {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 2%,
            rgba(255,255,255,0.01) 8%,
            transparent 25%
        ),
        linear-gradient(0deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.005) 3%,
            transparent 10%
        );
}
.dark .card::after {
    background:
        radial-gradient(ellipse 70% 50% at 20% 5%, rgba(255,255,255,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 95%, rgba(255,255,255,0.02) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(139,92,246,0.02) 0%, transparent 70%);
}

.dark .bg-dark-900:not(.dashboard-sidebar),
.dark .dark\:bg-dark-900:not(.dashboard-sidebar) {
    background: rgba(5, 5, 15, 0.65) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
}

.dark .bg-dark-700,
.dark .dark\:bg-dark-700 {
    background: rgba(255, 255, 255, 0.04) !important;
}

.dark .bg-dark-600,
.dark .dark\:bg-dark-600 {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Border overrides — glass-style translucent */
.border-gray-200 {
    border-color: rgba(196, 181, 253, 0.18) !important;
}
.border-gray-100 {
    border-color: rgba(196, 181, 253, 0.12) !important;
}
.dark .border-gray-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .border-gray-100 {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.dark .border-dark-700,
.dark .dark\:border-dark-700,
.dark .border-dark-600,
.dark .dark\:border-dark-600 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===================== 4. GLASS DASHBOARD SIDEBAR — iOS 26 Liquid Glass ===================== */
.dashboard-sidebar {
    background: rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    border-color: transparent !important;
    border-right: none !important;
    box-shadow:
        /* Outer bezel rim — top edge (light hits curved glass) */
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
        /* Inner side rim — right edge refraction */
        inset -1.5px 0 0 0 rgba(255, 255, 255, 0.30),
        /* Inner bottom rim — subtle */
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.10),
        /* Inner left rim — light wrap */
        inset 1px 0 0 0 rgba(255, 255, 255, 0.20),
        /* Depth shadow */
        4px 0 20px rgba(0, 0, 0, 0.05),
        8px 0 40px -8px rgba(0, 0, 0, 0.08),
        /* Outer glow — glass tint */
        0 0 0 0.5px rgba(196, 181, 253, 0.12) !important;
    isolation: isolate;
    position: relative;
}

/* Sidebar specular highlight — bezel top-edge refraction bloom */
.dashboard-sidebar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background:
        /* Top bezel specular — bright rim light */
        linear-gradient(180deg,
            rgba(255,255,255,0.70) 0%,
            rgba(255,255,255,0.25) 2.5%,
            rgba(255,255,255,0.06) 8%,
            transparent 22%
        ),
        /* Right-edge rim refraction */
        linear-gradient(270deg,
            rgba(255,255,255,0.25) 0%,
            rgba(255,255,255,0.06) 3%,
            transparent 12%
        ) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    mix-blend-mode: overlay !important;
    opacity: 1 !important;
}

/* Sidebar inner caustics — light bending through curved glass */
.dashboard-sidebar::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background:
        /* Upper-left caustic bloom */
        radial-gradient(ellipse 80% 40% at 15% 5%, rgba(255,255,255,0.25) 0%, transparent 65%),
        /* Center caustic — gentle color tint */
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(196,181,253,0.06) 0%, transparent 70%),
        /* Lower-right caustic — secondary refraction */
        radial-gradient(ellipse 50% 35% at 85% 95%, rgba(147,197,253,0.08) 0%, transparent 60%) !important;
    pointer-events: none !important;
    z-index: 10 !important;
    mix-blend-mode: overlay !important;
    opacity: 1 !important;
}

.dark .dashboard-sidebar {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.03),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.04),
        4px 0 20px rgba(0, 0, 0, 0.15),
        8px 0 40px -8px rgba(0, 0, 0, 0.25),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
}

.dark .dashboard-sidebar::before {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 2.5%,
            rgba(255,255,255,0.01) 8%,
            transparent 22%
        ),
        linear-gradient(270deg,
            rgba(255,255,255,0.06) 0%,
            rgba(255,255,255,0.01) 3%,
            transparent 12%
        ) !important;
    opacity: 1 !important;
}
.dark .dashboard-sidebar::after {
    background:
        radial-gradient(ellipse 80% 40% at 15% 5%, rgba(255,255,255,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139,92,246,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 85% 95%, rgba(96,165,250,0.03) 0%, transparent 60%) !important;
    opacity: 1 !important;
}

[dir="rtl"] .dashboard-sidebar {
    border-right: none !important;
    border-left: none !important;
    box-shadow:
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
        inset 1.5px 0 0 0 rgba(255, 255, 255, 0.30),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.10),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.20),
        -4px 0 20px rgba(0, 0, 0, 0.05),
        -8px 0 40px -8px rgba(0, 0, 0, 0.08),
        0 0 0 0.5px rgba(196, 181, 253, 0.12) !important;
}
.dark[dir="rtl"] .dashboard-sidebar {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.06),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.03),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.04),
        -4px 0 20px rgba(0, 0, 0, 0.15),
        -8px 0 40px -8px rgba(0, 0, 0, 0.25),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar logo area — glass divider */
.dashboard-sidebar > div:first-child {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .dashboard-sidebar > div:first-child {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* Sidebar nav items */
.sidebar-nav {
    scrollbar-color: rgba(196,181,253,0.4) transparent !important;
}
.dark .sidebar-nav {
    scrollbar-color: rgba(139,92,246,0.3) transparent !important;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(196,181,253,0.4) !important;
}
.dark .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(139,92,246,0.3) !important;
}

.sidebar-nav a,
.sidebar-nav button {
    border-radius: 16px !important;
    transition: all 0.2s ease !important;
}

.dashboard-sidebar .sidebar-nav a {
    font-weight: 500 !important;
}

.sidebar-nav a:hover,
.sidebar-nav button:hover {
    background: rgba(196, 181, 253, 0.10) !important;
}

.dark .sidebar-nav a:hover,
.dark .sidebar-nav button:hover {
    background: rgba(196, 181, 253, 0.08) !important;
}

/* Active sidebar items — glass pill indicator (no border) */
.sidebar-nav a.bg-primary-50,
.sidebar-nav a.bg-indigo-50,
.sidebar-nav a.bg-pink-50,
.sidebar-nav a.bg-emerald-50,
.sidebar-nav a[class*="bg-primary-50"],
.sidebar-nav a[class*="bg-indigo-50"],
.sidebar-nav a[class*="bg-pink-50"],
.sidebar-nav a[class*="bg-emerald-50"] {
    background: rgba(196, 181, 253, 0.15) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    border: none !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.25),
        0 2px 8px rgba(139, 92, 246, 0.08) !important;
}

[dir="rtl"] .sidebar-nav a.bg-primary-50,
[dir="rtl"] .sidebar-nav a.bg-indigo-50,
[dir="rtl"] .sidebar-nav a.bg-pink-50,
[dir="rtl"] .sidebar-nav a.bg-emerald-50,
[dir="rtl"] .sidebar-nav a[class*="bg-primary-50"],
[dir="rtl"] .sidebar-nav a[class*="bg-indigo-50"],
[dir="rtl"] .sidebar-nav a[class*="bg-pink-50"],
[dir="rtl"] .sidebar-nav a[class*="bg-emerald-50"] {
    border: none !important;
}

.dark .sidebar-nav a.bg-primary-50,
.dark .sidebar-nav a.bg-indigo-50,
.dark .sidebar-nav a.bg-pink-50,
.dark .sidebar-nav a.bg-emerald-50,
.dark .sidebar-nav a[class*="bg-primary-50"],
.dark .sidebar-nav a[class*="bg-indigo-50"],
.dark .sidebar-nav a[class*="bg-pink-50"],
.dark .sidebar-nav a[class*="bg-emerald-50"],
.dark .sidebar-nav a.dark\:bg-primary-900\/20,
.dark .sidebar-nav a.dark\:bg-indigo-900\/20,
.dark .sidebar-nav a.dark\:bg-pink-900\/20,
.dark .sidebar-nav a.dark\:bg-emerald-900\/20 {
    background: rgba(139, 92, 246, 0.14) !important;
    border: none !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.10),
        0 2px 8px rgba(139, 92, 246, 0.12) !important;
}

/* Active icons: Aura lavender */
.sidebar-nav a.text-primary-600 i,
.sidebar-nav a.text-indigo-600 i,
.sidebar-nav a.text-pink-600 i,
.sidebar-nav a.text-emerald-600 i {
    color: var(--aura-lavender) !important;
}

.dark .sidebar-nav a.dark\:text-primary-400 i,
.dark .sidebar-nav a.dark\:text-indigo-400 i,
.dark .sidebar-nav a.dark\:text-pink-400 i,
.dark .sidebar-nav a.dark\:text-emerald-400 i {
    color: var(--aura-lavender) !important;
}

/* Sidebar section labels */
.dashboard-sidebar .sidebar-nav p {
    color: var(--aura-lavender) !important;
    opacity: 0.6;
}
.dark .dashboard-sidebar .sidebar-nav p {
    color: var(--aura-lavender) !important;
    opacity: 0.4;
}

/* Sidebar bottom user area — glass divider */
.dashboard-sidebar > div:last-child {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .dashboard-sidebar > div:last-child {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

.dashboard-sidebar > div:last-child a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.dark .dashboard-sidebar > div:last-child a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.dashboard-sidebar > div:last-child img {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}
.dark .dashboard-sidebar > div:last-child img {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Sidebar usage bar — glass panel */
.sidebar-usage {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.dark .sidebar-usage {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.2) !important;
}
.sidebar-usage::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%) !important;
    mix-blend-mode: overlay;
}
.dark .sidebar-usage::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 50%) !important;
}

.sidebar-usage-bar__fill {
    background: var(--aura-gradient) !important;
}
.sidebar-usage__progress {
    stroke: url(#sidebar-usage-gradient) !important;
    filter: drop-shadow(0 4px 12px rgba(196,181,253,0.35)) !important;
}
.dark .sidebar-usage__progress {
    filter: drop-shadow(0 4px 12px rgba(139,92,246,0.3)) !important;
}

/* ===================== 5. GLASS DASHBOARD HEADER — iOS 26 Liquid Glass ===================== */
.dashboard-header {
    background: rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.4) brightness(1.10) contrast(1.05) !important;
    border-color: transparent !important;
    border-bottom: none !important;
    box-shadow:
        /* Top bezel rim — bright specular edge */
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
        /* Bottom bezel rim — softer */
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.18),
        /* Left rim light wrap */
        inset 1px 0 0 0 rgba(255, 255, 255, 0.15),
        /* Right rim light wrap */
        inset -1px 0 0 0 rgba(255, 255, 255, 0.15),
        /* Depth shadow — floating glass */
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 8px 32px -4px rgba(0, 0, 0, 0.06),
        /* Outer glow */
        0 0 0 0.5px rgba(196, 181, 253, 0.10) !important;
    position: relative !important;
    isolation: isolate;
}

/* Header specular — bezel top + bottom refraction bloom */
.dashboard-header::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* Top bezel specular — iOS 26 curved glass rim */
        linear-gradient(180deg,
            rgba(255,255,255,0.75) 0%,
            rgba(255,255,255,0.30) 1.5%,
            rgba(255,255,255,0.08) 5%,
            transparent 18%
        ),
        /* Bottom edge — subtle secondary refraction */
        linear-gradient(0deg,
            rgba(255,255,255,0.15) 0%,
            rgba(255,255,255,0.04) 2%,
            transparent 10%
        );
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
}

/* Header Aura gradient line at bottom — glass bezel accent */
.dashboard-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: var(--aura-gradient);
    opacity: 0.35;
    z-index: 11;
}

.dark .dashboard-header {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.04),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.03),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.03),
        0 4px 16px rgba(0, 0, 0, 0.12),
        0 8px 32px -4px rgba(0, 0, 0, 0.22),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
}

.dark .dashboard-header::before {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0.04) 1.5%,
            rgba(255,255,255,0.01) 5%,
            transparent 18%
        ),
        linear-gradient(0deg,
            rgba(255,255,255,0.04) 0%,
            rgba(255,255,255,0.01) 2%,
            transparent 10%
        );
}

.dark .dashboard-header::after {
    opacity: 0.20;
}

/* Header toolbar buttons — glass buttons (NOT dropdown-internal buttons) */
.dashboard-header > div > div > button,
.dashboard-header > div > div > .relative > button,
.dashboard-header > div > button,
.dashboard-header .flex.items-center.gap-3 > button,
.dashboard-header .flex.items-center.gap-3 > .relative > button,
.dashboard-header .flex.items-center.gap-4 > button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(.34,1.56,.64,1) !important;
}
.dashboard-header > div > div > button:hover,
.dashboard-header > div > div > .relative > button:hover,
.dashboard-header > div > button:hover,
.dashboard-header .flex.items-center.gap-3 > button:hover,
.dashboard-header .flex.items-center.gap-3 > .relative > button:hover,
.dashboard-header .flex.items-center.gap-4 > button:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    transform: translateY(-1px);
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.dark .dashboard-header > div > div > button,
.dark .dashboard-header > div > div > .relative > button,
.dark .dashboard-header > div > button,
.dark .dashboard-header .flex.items-center.gap-3 > button,
.dark .dashboard-header .flex.items-center.gap-3 > .relative > button,
.dark .dashboard-header .flex.items-center.gap-4 > button {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.dark .dashboard-header > div > div > button:hover,
.dark .dashboard-header > div > div > .relative > button:hover,
.dark .dashboard-header > div > button:hover,
.dark .dashboard-header .flex.items-center.gap-3 > button:hover,
.dark .dashboard-header .flex.items-center.gap-3 > .relative > button:hover,
.dark .dashboard-header .flex.items-center.gap-4 > button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.14), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Header bg-gray-100 elements (search input wrapper etc) */
.dashboard-header > div > div > .bg-gray-100 {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
.dark .dashboard-header > div > div > .bg-gray-100,
.dark .dashboard-header > div > div > .dark\:bg-dark-800 {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Header search input — glass inner surface */
.dashboard-header input[type="text"] {
    background: var(--aura-inner-bg) !important;
    border: 0.5px solid var(--aura-inner-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.dashboard-header input[type="text"]:focus {
    border-color: rgba(196, 181, 253, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(196,181,253,0.2), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.dark .dashboard-header input[type="text"] {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    color: #ede9fe !important;
}
.dark .dashboard-header input[type="text"]:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Header user avatar — glass ring */
.dashboard-header img[class*="rounded-xl"] {
    border: 2px solid rgba(255, 255, 255, 0.4);
}
.dark .dashboard-header img[class*="rounded-xl"] {
    border-color: rgba(255, 255, 255, 0.12);
}

/* ═══════════════════════════════════════════════════════
   HEADER DROPDOWNS — Liquid Glass / Frosted Panel
   ═══════════════════════════════════════════════════════ */

/* z-index fix: prevent .relative parents from creating stacking contexts
   that would trap the dropdown's z-index. Using z-index:auto means the
   child dropdown's z-index:999 resolves against the header itself. */
.dashboard-header .relative {
    z-index: auto !important;
    overflow: visible !important;
}
/* Modern browsers: elevate parent when dropdown is visible */
.dashboard-header .relative:has(> [x-show]:not([style*="display: none"])) {
    z-index: 100 !important;
}

/* --- Main dropdown panel — iOS 26 Liquid Glass --- */
.dashboard-header .relative > [x-show] {
    position: absolute !important;
    background: rgba(255, 255, 255, 0.40) !important;
    backdrop-filter: blur(48px) saturate(2.4) brightness(1.12) contrast(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.4) brightness(1.12) contrast(1.05) !important;
    border: none !important;
    border-radius: 22px !important;
    box-shadow:
        /* Bezel rim — all edges */
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.20),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.20),
        /* Depth shadow — floating glass panel */
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 24px 60px -8px rgba(0, 0, 0, 0.10),
        0 0 0 0.5px rgba(196, 181, 253, 0.10) !important;
    overflow: hidden !important;
    isolation: isolate;
    z-index: 999 !important;
}

/* --- Top-edge specular — iOS 26 curved bezel bloom --- */
.dashboard-header .relative > [x-show]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.80) 0%,
            rgba(255,255,255,0.30) 2%,
            rgba(255,255,255,0.08) 6%,
            transparent 20%
        ),
        linear-gradient(0deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.03) 3%,
            transparent 10%
        );
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: overlay;
}

/* --- Inner caustic refractions — light bending through curved glass --- */
.dashboard-header .relative > [x-show]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 80% 45% at 15% 3%, rgba(255,255,255,0.30) 0%, transparent 65%),
        radial-gradient(ellipse 60% 35% at 85% 97%, rgba(255,255,255,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(196,181,253,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: overlay;
}

/* --- Dark mode — frosted dark glass --- */
.dark .dashboard-header .relative > [x-show] {
    background: rgba(15, 12, 35, 0.50) !important;
    backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(48px) saturate(2.2) brightness(1.05) !important;
    border: none !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.04),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.20),
        0 24px 60px -8px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06) !important;
}
.dark .dashboard-header .relative > [x-show]::before {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.05) 4%,
            rgba(255,255,255,0.015) 12%,
            transparent 28%
        );
}
.dark .dashboard-header .relative > [x-show]::after {
    background:
        radial-gradient(ellipse 80% 45% at 15% 3%, rgba(255,255,255,0.10) 0%, transparent 65%),
        radial-gradient(ellipse 60% 35% at 85% 97%, rgba(139,92,246,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(196,181,253,0.03) 0%, transparent 70%);
}

/* --- Notification dropdown header bar — frosted accent --- */
.dashboard-header .relative > [x-show] > div:first-child[class*="bg-gradient"],
.dashboard-header .relative > [x-show] .bg-gradient-to-r {
    background: var(--aura-gradient-soft) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border-color: rgba(196, 181, 253, 0.12) !important;
}
.dark .dashboard-header .relative > [x-show] .bg-gradient-to-r {
    background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(96,165,250,0.08) 50%, rgba(249,168,212,0.06) 100%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Notification dropdown footer — subtle frosted --- */
.dashboard-header .relative > [x-show] .bg-gray-50 {
    background: rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border-color: rgba(196, 181, 253, 0.12) !important;
}
.dark .dashboard-header .relative > [x-show] .bg-gray-50,
.dark .dashboard-header .relative > [x-show] .dark\:bg-dark-700\/50 {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Dropdown internal borders — frosted dividers --- */
.dashboard-header .relative > [x-show] .border-b,
.dashboard-header .relative > [x-show] .border-t {
    border-color: rgba(196, 181, 253, 0.12) !important;
}
.dark .dashboard-header .relative > [x-show] .border-b,
.dark .dashboard-header .relative > [x-show] .border-t {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Dropdown item hover — glass shimmer --- */
.dashboard-header .relative > [x-show] a:hover,
.dashboard-header .relative > [x-show] button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.dark .dashboard-header .relative > [x-show] a:hover,
.dark .dashboard-header .relative > [x-show] button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* --- Notification icon bubbles inside dropdown --- */
.dashboard-header .relative > [x-show] .w-10.h-10.rounded-xl {
    backdrop-filter: blur(10px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35) !important;
}
.dark .dashboard-header .relative > [x-show] .w-10.h-10.rounded-xl {
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08) !important;
}

/* --- Empty state circle inside dropdown --- */
.dashboard-header .relative > [x-show] .w-16.h-16.rounded-full {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
}
.dark .dashboard-header .relative > [x-show] .w-16.h-16.rounded-full {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Unread notification highlight — subtle glass tint --- */
.dashboard-header .relative > [x-show] a[class*="bg-primary-50"] {
    background: rgba(196, 181, 253, 0.10) !important;
}
.dark .dashboard-header .relative > [x-show] a[class*="bg-primary-50"],
.dark .dashboard-header .relative > [x-show] a[class*="dark:bg-primary-900"] {
    background: rgba(139, 92, 246, 0.08) !important;
}

/* --- Language dropdown items glass --- */
.dashboard-header .relative > [x-show] > a {
    transition: background 0.2s ease !important;
}

/* --- Dropdown scrollbar --- */
.dashboard-header .relative > [x-show] .overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}
.dashboard-header .relative > [x-show] .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}
.dashboard-header .relative > [x-show] .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(196, 181, 253, 0.3);
    border-radius: 999px;
}
.dark .dashboard-header .relative > [x-show] .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(196, 181, 253, 0.15);
}

/* ===================== 6. PRIMARY / ACCENT COLOR OVERRIDES ===================== */

/* gradient-orange → aura gradient */
.gradient-orange,
.bg-gradient-to-r.from-primary-500,
[class*="gradient-orange"] {
    background: var(--aura-gradient) !important;
}

/* Primary button overrides */
.btn-primary,
.btn.btn-primary {
    background: var(--aura-gradient) !important;
    border: none !important;
    color: #1e1b4b !important;
}

.dark .btn-primary,
.dark .btn.btn-primary {
    color: #1e1b4b !important;
}

/* Primary text */
.text-primary-500,
.text-primary-600 {
    color: var(--aura-lavender) !important;
}
.dark .dark\:text-primary-400,
.dark .dark\:text-primary-500 {
    color: var(--aura-lavender) !important;
}

.dark .text-primary-500,
.dark .text-primary-600 {
    color: #c4b5fd !important;
}

/* Primary bg accents */
.bg-primary-100 {
    background-color: rgba(196, 181, 253, 0.15) !important;
}
.dark .bg-primary-100,
.dark .dark\:bg-primary-900\/30 {
    background-color: rgba(196, 181, 253, 0.08) !important;
}

.bg-primary-50 {
    background-color: rgba(196, 181, 253, 0.08) !important;
}

/* Featured glow for plan cards */
.featured-glow {
    background: var(--aura-gradient) !important;
    opacity: 0.5;
}

/* gradient-text override */
.gradient-text {
    background: var(--aura-gradient-vivid) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.gradient-text-sky {
    background: linear-gradient(135deg, #93c5fd, #c4b5fd) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===================== 7. AURA GLASS CARD ===================== */
.aura-glass {
    position: relative;
    background: var(--aura-glass-bg);
    backdrop-filter: var(--aura-blur);
    -webkit-backdrop-filter: var(--aura-blur);
    border: 0.5px solid var(--aura-glass-border);
    border-radius: var(--aura-radius);
    box-shadow: var(--aura-glass-shadow);
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
    isolation: isolate;
}
.dark .aura-glass {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
/* Specular highlight */
.aura-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 6%, transparent 32%);
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
}
.dark .aura-glass::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 6%, transparent 32%);
}

.aura-glass:hover {
    transform: translateY(-2px);
    box-shadow: var(--aura-glass-hover-shadow);
}
.dark .aura-glass:hover {
    box-shadow: var(--aura-glass-hover-shadow);
}

/* ===================== 8. GRADIENT BAR / TEXT ===================== */
.aura-gradient-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--aura-gradient);
}

.aura-gradient-text {
    background: var(--aura-gradient-vivid);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================== 9. GLASS STAT CARDS ===================== */
.aura-stat-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    border-radius: var(--aura-radius);
    border: 0.5px solid var(--aura-glass-border);
    box-shadow: var(--aura-glass-shadow);
    backdrop-filter: var(--aura-blur);
    -webkit-backdrop-filter: var(--aura-blur);
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
    isolation: isolate;
}

.aura-stat-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--aura-glass-hover-shadow);
}
.dark .aura-stat-card:hover {
    box-shadow: var(--aura-glass-hover-shadow);
}

.aura-stat-card .aura-stat-icon {
    width: 56px; height: 56px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}
.aura-stat-card .aura-stat-value {
    font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.aura-stat-card .aura-stat-label {
    font-size: 0.85rem; opacity: 0.8; margin-top: 0.25rem;
}

/* Pastel variants – translucent glass */
.aura-stat-pink {
    background: linear-gradient(135deg, rgba(249,168,212,0.22) 0%, rgba(249,168,212,0.12) 100%);
    color: #831843;
}
.aura-stat-lavender {
    background: linear-gradient(135deg, rgba(196,181,253,0.22) 0%, rgba(196,181,253,0.12) 100%);
    color: #4c1d95;
}
.aura-stat-sky {
    background: linear-gradient(135deg, rgba(147,197,253,0.22) 0%, rgba(147,197,253,0.12) 100%);
    color: #1e3a5f;
}
.aura-stat-mint {
    background: linear-gradient(135deg, rgba(110,231,183,0.22) 0%, rgba(110,231,183,0.12) 100%);
    color: #064e3b;
}

/* Pastel variants – dark (translucent glass) */
.dark .aura-stat-pink    { color: #fce7f3; background: linear-gradient(135deg, rgba(249,168,212,0.08) 0%, rgba(249,168,212,0.04) 100%); }
.dark .aura-stat-lavender{ color: #ede9fe; background: linear-gradient(135deg, rgba(196,181,253,0.08) 0%, rgba(196,181,253,0.04) 100%); }
.dark .aura-stat-sky     { color: #dbeafe; background: linear-gradient(135deg, rgba(147,197,253,0.08) 0%, rgba(147,197,253,0.04) 100%); }
.dark .aura-stat-mint    { color: #d1fae5; background: linear-gradient(135deg, rgba(110,231,183,0.08) 0%, rgba(110,231,183,0.04) 100%); }

/* ===================== 10. GLASS ICON BUBBLE ===================== */
.aura-icon-bubble {
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 0.5px solid rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark .aura-icon-bubble {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===================== 11. GLASS CHART WRAPPER ===================== */
.aura-chart-wrap {
    position: relative;
    background: var(--aura-card-bg);
    backdrop-filter: var(--aura-blur);
    -webkit-backdrop-filter: var(--aura-blur);
    border: 0.5px solid var(--aura-glass-border);
    border-radius: var(--aura-radius);
    box-shadow: var(--aura-glass-shadow);
    padding: 1.5rem;
    isolation: isolate;
}

/* ===================== 12. GLASS PROGRESS BARS ===================== */
.aura-progress-track {
    height: 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.dark .aura-progress-track {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.aura-progress-fill {
    height: 100%; border-radius: 999px;
    background: var(--aura-gradient);
    transition: width 0.6s ease;
}

/* ===================== 13. GLASS HERO BANNER ===================== */
.aura-hero {
    position: relative; overflow: hidden;
    border-radius: var(--aura-radius-lg);
    padding: 2.5rem;
    background: var(--aura-glass-bg);
    backdrop-filter: var(--aura-blur);
    -webkit-backdrop-filter: var(--aura-blur);
    border: 0.5px solid var(--aura-glass-border);
    box-shadow: var(--aura-glass-shadow);
    isolation: isolate;
}
.dark .aura-hero {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--aura-glass-shadow);
}

/* Specular highlight */
.aura-hero::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 6%, transparent 32%);
    pointer-events: none; z-index: 10;
    mix-blend-mode: overlay;
}
.dark .aura-hero::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 6%, transparent 32%);
}

/* Inner refraction caustic */
.aura-hero::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 70% 50% at 20% 5%, rgba(255,255,255,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 95%, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none; z-index: 10;
    mix-blend-mode: overlay;
}
.dark .aura-hero::after {
    background:
        radial-gradient(ellipse 70% 50% at 20% 5%, rgba(255,255,255,0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 95%, rgba(255,255,255,0.02) 0%, transparent 70%);
}

/* ===================== 14. GLASS BADGE / PILL ===================== */
.aura-badge {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border: 0.5px solid rgba(255, 255, 255, 0.40);
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.aura-badge::before {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 50%);
    pointer-events: none; mix-blend-mode: overlay;
}
.dark .aura-badge {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark .aura-badge::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 50%);
}

/* ===================== 15. FLOATING IMAGE ===================== */
.aura-float-img {
    animation: auraFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 8px 24px rgba(196, 181, 253, 0.35));
}
.dark .aura-float-img {
    filter: drop-shadow(0 8px 24px rgba(139, 92, 246, 0.3));
}
@keyframes auraFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* ===================== 16. SHIMMER ===================== */
.aura-shimmer { position: relative; overflow: hidden; }
.aura-shimmer::after {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(196,181,253,0.08) 50%, transparent 100%);
    animation: auraShimmer 3s ease-in-out infinite;
    pointer-events: none;
}
.dark .aura-shimmer::after {
    background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,0.06) 50%, transparent 100%);
}
@keyframes auraShimmer { 0% { left: -100%; } 100% { left: 100%; } }

/* ===================== 17. SCROLLBAR ===================== */
.aura-scrollbar::-webkit-scrollbar { width: 6px; }
.aura-scrollbar::-webkit-scrollbar-track { background: transparent; }
.aura-scrollbar::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--aura-gradient); }

/* ===================== 18. ACTIVITY ITEM ===================== */
.aura-activity-item {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 0.875rem; border-radius: 18px; transition: background 0.2s ease;
}
.aura-activity-item:hover { background: rgba(255, 255, 255, 0.12); }
.dark .aura-activity-item:hover { background: rgba(255, 255, 255, 0.04); }

/* ===================== 19. SECTION TITLE ===================== */
.aura-section-title {
    font-size: 1.1rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem;
}
.aura-section-title i {
    background: var(--aura-gradient-vivid);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================== 20. GLASS TABLE ===================== */
.aura-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.aura-table tr {
    background: var(--aura-card-bg);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border-radius: 16px;
}
.aura-table td { padding: 0.875rem 1rem; }
.aura-table td:first-child { border-radius: 16px 0 0 16px; }
.aura-table td:last-child  { border-radius: 0 16px 16px 0; }
[dir="rtl"] .aura-table td:first-child { border-radius: 0 16px 16px 0; }
[dir="rtl"] .aura-table td:last-child  { border-radius: 16px 0 0 16px; }

/* ===================== 21. GLOBAL ROUNDED OVERRIDES ===================== */
.rounded-2xl { border-radius: var(--aura-radius) !important; }
.rounded-3xl { border-radius: var(--aura-radius-lg) !important; }
.rounded-xl  { border-radius: 18px !important; }

/* ===================== 22. GLASS INPUT OVERRIDES ===================== */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
input[type="tel"], select, textarea {
    border-radius: 16px !important;
    background: var(--aura-inner-bg) !important;
    border: 0.5px solid var(--aura-inner-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: rgba(196, 181, 253, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(196,181,253,0.2), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.dark input[type="text"], .dark input[type="email"], .dark input[type="password"],
.dark input[type="search"], .dark input[type="number"], .dark select, .dark textarea {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    color: #ede9fe !important;
}
.dark input:focus, .dark select:focus, .dark textarea:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* ===================== 23. BUTTON OVERRIDES ===================== */
.aura-btn {
    border-radius: 16px; padding: 0.625rem 1.5rem; font-weight: 600;
    border: 1px solid var(--aura-card-border);
    transition: all 0.3s ease;
}
.aura-btn-gradient {
    background: var(--aura-gradient); color: #1e1b4b; border: none;
    box-shadow: 0 4px 20px rgba(196, 181, 253, 0.3);
}
.aura-btn-gradient:hover {
    box-shadow: 0 6px 28px rgba(196, 181, 253, 0.45);
    transform: translateY(-1px);
}

/* ===================== 24. ALERT OVERRIDES ===================== */
.alert {
    border-radius: var(--aura-radius) !important;
    border: 1px solid var(--aura-card-border) !important;
}

/* ===================== 25. DARK MODE – GLOBAL TEXT ===================== */
.dark .text-gray-900,
.dark .dark\:text-white {
    color: #ede9fe !important;
}
.dark .text-gray-800 {
    color: #ddd6fe !important;
}
.dark .text-gray-700 {
    color: #c4b5fd !important;
}
.dark .text-gray-600,
.dark .text-gray-500,
.dark .dark\:text-gray-400,
.dark .dark\:text-gray-300 {
    color: #a5b4fc !important;
}
.dark .text-gray-400,
.dark .dark\:text-gray-500 {
    color: rgba(165, 180, 252, 0.6) !important;
}

/* Light mode text refinements */
.text-gray-900 {
    color: #1e1b4b !important;
}

/* ===================== 26. DARK MODE – GLASS BG UTILITIES ===================== */
.dark .bg-gray-100 {
    background: rgba(255, 255, 255, 0.04) !important;
}
.dark .bg-gray-50 {
    background: rgba(255, 255, 255, 0.03) !important;
}
.dark .bg-gray-100\/80 {
    background: rgba(255, 255, 255, 0.04) !important;
}
.dark .bg-white {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Light mode bg — translucent glass */
.bg-gray-100 {
    background: rgba(255, 255, 255, 0.25) !important;
}
.bg-gray-50 {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ===================== 27. GLASS HOVER STATES ===================== */
.hover\:bg-gray-200:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}
.hover\:bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}
.dark .hover\:bg-gray-200:hover,
.dark .dark\:hover\:bg-dark-700:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.dark .hover\:bg-gray-100:hover,
.dark .dark\:hover\:bg-dark-600:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ===================== 28. GLASS PLAN / PRICING CARD OVERRIDES ===================== */
.plan-card .relative.bg-white,
.plan-card > .relative {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
    isolation: isolate;
}
.plan-card:hover .relative.bg-white,
.plan-card:hover > .relative {
    transform: translateY(-4px);
    box-shadow: var(--aura-glass-hover-shadow) !important;
}

.plan-card.featured .relative.bg-white,
.plan-card.featured > .relative {
    border: 1px solid rgba(196, 181, 253, 0.5) !important;
    box-shadow: var(--aura-glass-shadow), 0 0 36px rgba(196, 181, 253, 0.12) !important;
}

.dark .plan-card .relative.bg-white,
.dark .plan-card > .relative {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark .plan-card.featured .relative.bg-white,
.dark .plan-card.featured > .relative {
    border-color: rgba(139,92,246,0.3) !important;
    box-shadow: var(--aura-glass-shadow), 0 0 36px rgba(139, 92, 246, 0.08) !important;
}

/* Feature check marks → aura gradient */
.feature-check.bg-green-500 {
    background: var(--aura-gradient) !important;
}

/* ===================== 29. GLASS USAGE CARD / GAUGE OVERRIDES ===================== */
.usage-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    isolation: isolate;
}
.dark .usage-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.usage-card__button--primary {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
}

.usage-card__button--ghost {
    border-color: var(--aura-card-border) !important;
}

.usage-gauge__progress {
    stroke: url(#usage-gradient) !important;
}

/* Override the default orange gauge gradient stops → Aura rainbow */
#usage-gradient stop:first-child {
    stop-color: #f9a8d4 !important;
}
#usage-gradient stop:last-child {
    stop-color: #6ee7b7 !important;
}

/* Also handle sidebar usage gradient */
#sidebar-usage-gradient stop:first-child {
    stop-color: #f9a8d4 !important;
}
#sidebar-usage-gradient stop:last-child {
    stop-color: #6ee7b7 !important;
}

.usage-card__legend-dot--remaining {
    background: var(--aura-gradient) !important;
}
.usage-card__legend-dot--used {
    background: #e2ddf5 !important;
}
.dark .usage-card__legend-dot--used {
    background: #1c1740 !important;
}

/* Usage card glow → Aura colors */
.usage-card__glow--primary {
    background: radial-gradient(ellipse, rgba(196,181,253,0.15) 0%, transparent 70%) !important;
}
.usage-card__glow--secondary {
    background: radial-gradient(ellipse, rgba(249,168,212,0.10) 0%, transparent 70%) !important;
}
.dark .usage-card__glow--primary {
    background: radial-gradient(ellipse, rgba(139,92,246,0.08) 0%, transparent 70%) !important;
}
.dark .usage-card__glow--secondary {
    background: radial-gradient(ellipse, rgba(249,168,212,0.04) 0%, transparent 70%) !important;
}

/* Usage card plan name → Aura gradient text */
.usage-card__plan {
    background: var(--aura-gradient-vivid) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===================== 30. GLASS ANIMATED BORDER PANELS ===================== */
.animated-border-panel {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: none !important;
}
.dark .animated-border-panel {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
}

/* ===================== 31. MEDIA LIBRARY OVERRIDES ===================== */
.media-card {
    border-radius: var(--aura-radius) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}
.dark .media-card:hover {
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.1);
}

/* ===================== 32. GLASS DROPDOWN OVERRIDES ===================== */
/* Scoped to actual dropdown panels (div with border + shadow), NOT badges/spans */
div[x-show][x-transition].border,
div[x-show][x-transition][class*="shadow"],
div[x-show][x-transition][class*="rounded-2xl"],
div[x-show][x-transition][class*="rounded-xl"] {
    border-radius: 22px !important;
    backdrop-filter: blur(40px) saturate(2.2) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.12) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.60) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 24px 80px -12px rgba(0, 0, 0, 0.12) !important;
}

/* Dark mode dropdown panels */
.dark div[x-show][x-transition].border,
.dark div[x-show][x-transition][class*="shadow"],
.dark div[x-show][x-transition][class*="rounded-2xl"],
.dark div[x-show][x-transition][class*="rounded-xl"] {
    background: rgba(15, 12, 35, 0.55) !important;
    backdrop-filter: blur(40px) saturate(2) brightness(0.95) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2) brightness(0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
        0 8px 32px rgba(0, 0, 0, 0.25),
        0 24px 80px -12px rgba(0, 0, 0, 0.55) !important;
}

/* ===================== 33. RESPONSIVE ===================== */
@media (max-width: 640px) {
    .aura-hero { padding: 1.5rem; }
    .aura-stat-card { padding: 1.25rem; }
    .aura-stat-card .aura-stat-value { font-size: 1.5rem; }
}

/* ===================== 34. PULSE ===================== */
.aura-pulse { animation: auraPulse 2s ease-in-out infinite; }
@keyframes auraPulse { 0%,100%{opacity:1}50%{opacity:0.5} }

/* ===================== 35. DARK MODE – SHADOW / RING ===================== */
.dark .shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important; }
.dark .shadow-xl { box-shadow: 0 16px 40px rgba(0,0,0,0.3) !important; }
.dark .shadow-2xl { box-shadow: 0 24px 50px rgba(0,0,0,0.35) !important; }

/* Light mode shadows – purple tinted */
.shadow-lg { box-shadow: 0 10px 30px rgba(196,181,253,0.12) !important; }
.shadow-xl { box-shadow: 0 16px 40px rgba(196,181,253,0.14) !important; }

.dark .ring-gray-200,
.dark .dark\:ring-dark-600 {
    --tw-ring-color: rgba(196, 181, 253, 0.12) !important;
}

/* ===================== 36. DARK MODE – SPECIFIC COMPONENT COLORS ===================== */

/* Green accents in dark */
.dark .text-green-500,
.dark .text-green-600,
.dark .dark\:text-green-400 {
    color: var(--aura-mint) !important;
}
.dark .bg-green-100,
.dark .dark\:bg-green-900\/30 {
    background: rgba(110,231,183,0.08) !important;
}

/* Blue accents in dark */
.dark .text-blue-500,
.dark .text-blue-600,
.dark .dark\:text-blue-400 {
    color: var(--aura-sky) !important;
}
.dark .bg-blue-100,
.dark .dark\:bg-blue-900\/30 {
    background: rgba(147,197,253,0.08) !important;
}

/* Purple accents in dark */
.dark .text-purple-500,
.dark .text-purple-600,
.dark .dark\:text-purple-400 {
    color: var(--aura-lavender) !important;
}
.dark .bg-purple-100,
.dark .dark\:bg-purple-900\/30 {
    background: rgba(196,181,253,0.08) !important;
}

/* Pink accents in dark */
.dark .text-pink-500,
.dark .text-pink-600,
.dark .dark\:text-pink-400 {
    color: var(--aura-pink) !important;
}
.dark .bg-pink-100,
.dark .dark\:bg-pink-900\/30 {
    background: rgba(249,168,212,0.08) !important;
}

/* Orange/red accents in dark */
.dark .text-orange-500,
.dark .text-orange-600,
.dark .dark\:text-orange-400 {
    color: var(--aura-peach) !important;
}
.dark .bg-orange-100,
.dark .dark\:bg-orange-900\/30 {
    background: rgba(253,164,175,0.08) !important;
}

.dark .text-red-500,
.dark .text-red-600,
.dark .dark\:text-red-400 {
    color: #fda4af !important;
}
.dark .bg-red-100,
.dark .dark\:bg-red-900\/30 {
    background: rgba(253,164,175,0.06) !important;
}

/* Light mode accent backgrounds (opaque) */
.bg-green-100 { background: #dcfce7 !important; }
.bg-blue-100 { background: #dbeafe !important; }
.bg-purple-100 { background: #ede9fe !important; }
.bg-pink-100 { background: #fce7f3 !important; }
.bg-orange-100 { background: #ffedd5 !important; }
.bg-red-100 { background: #ffe4e6 !important; }
.bg-indigo-50 { background: rgba(196, 181, 253, 0.08) !important; }

/* ===================== 37. DARK CARD-HEADER / CARD-BODY / DIVIDERS ===================== */
.dark .card-header {
    border-color: rgba(196, 181, 253, 0.06) !important;
}
.dark .divide-gray-100 > :not(:last-child),
.dark .divide-gray-200 > :not(:last-child) {
    border-color: rgba(196, 181, 253, 0.06) !important;
}

/* ===================== 38. CHAR/COL MINI CARDS ===================== */
.char-mini-card,
.col-mini-card {
    border-radius: 18px !important;
}

/* ===================== 39. GLOBAL SCROLLBAR ===================== */
/* Light */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(196,181,253,0.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(196,181,253,0.5); }

/* Dark */
.dark ::-webkit-scrollbar { width: 8px; }
.dark ::-webkit-scrollbar-track { background: #0c0a1d; }
.dark ::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 999px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.4); }

/* ===================== 40. BACKGROUND IMAGE ON ALL DASHBOARD PAGES ===================== */
/*
 * Layout: body > #app > .h-screen.flex > aside + div.flex-1 > header + main
 *
 * We inject a fixed pseudo-element on #app that covers the full viewport.
 * This is the most reliable method — it works regardless of overflow,
 * stacking, or container backgrounds.
 */

/* Fixed background layer via #app pseudo-element */
#app {
    position: relative;
}
#app::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url('../images/bg0.png') top center / cover no-repeat;
    background-color: var(--aura-body-bg);
    pointer-events: none;
}

/* Ensure the layout wrapper sits above the bg layer */
.h-screen.flex {
    position: relative;
    z-index: 1;
}

/* Right-side column — transparent so bg shows */
.h-screen.flex > .flex-1,
.h-screen.flex > div.flex-1 {
    background: transparent !important;
}

/* Main content area — transparent */
main,
main.flex-1,
main.min-h-0 {
    background: transparent !important;
}

/* Hide the default bg1.png overlay div inside main */
main > .pointer-events-none,
main.flex-1 > .pointer-events-none {
    display: none !important;
}

/* ===================== 41. GLASS OVERRIDES FOR ALL DASHBOARD COMPONENTS ===================== */

/* --- Stats Card (Dashboard) --- */
.stats-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease !important;
    isolation: isolate;
}
.dark .stats-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.stats-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--aura-glass-hover-shadow) !important;
}

/* --- Plan Card --- */
.plan-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease !important;
    isolation: isolate;
}
.dark .plan-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.plan-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--aura-glass-hover-shadow) !important;
}

/* --- Character Card --- */
.character-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    isolation: isolate;
}
.dark .character-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- Collection Card --- */
.collection-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    isolation: isolate;
}
.dark .collection-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- Generation Card --- */
.generation-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    isolation: isolate;
}
.dark .generation-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.generation-card:hover {
    border-color: rgba(196, 181, 253, 0.5) !important;
    box-shadow: var(--aura-glass-hover-shadow) !important;
}
.dark .generation-card:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
}

/* --- Library Media Card --- */
.library-media-card {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow: var(--aura-glass-shadow) !important;
    isolation: isolate;
}
.dark .library-media-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.library-media-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--aura-glass-hover-shadow) !important;
}

/* --- Modal Content --- */
.modal-content {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.75),
        0 25px 50px rgba(0, 0, 0, 0.15) !important;
    isolation: isolate;
}
.dark .modal-content {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.12),
        0 25px 50px rgba(0, 0, 0, 0.5) !important;
}
.modal-header {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .modal-header {
    border-color: rgba(255, 255, 255, 0.07) !important;
}
.modal-footer {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .modal-footer {
    border-color: rgba(255, 255, 255, 0.07) !important;
}

/* --- Tool Access Modal --- */
.tool-access-modal__content {
    position: relative;
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: var(--aura-radius-lg) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.75),
        0 25px 50px rgba(0, 0, 0, 0.15) !important;
}
.dark .tool-access-modal__content {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.tool-access-modal__backdrop {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* --- Form Control (global) --- */
.form-control {
    background: var(--aura-inner-bg) !important;
    border: 0.5px solid var(--aura-inner-border) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.dark .form-control {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.form-control:focus {
    border-color: rgba(196, 181, 253, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(196,181,253,0.2), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.dark .form-control:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12), inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* --- Form Section --- */
.form-section {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.5) !important;
}
.dark .form-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--aura-glass-shadow) !important;
}
.dark .dropdown-menu {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.dark .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.dropdown-divider {
    background-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .dropdown-divider {
    background-color: rgba(255, 255, 255, 0.07) !important;
}

/* --- Tool Header --- */
.tool-header {
    border: 0.5px solid var(--aura-card-border) !important;
    box-shadow: var(--aura-glass-shadow) !important;
}

/* --- Settings Panel --- */
.settings-panel {
    background: var(--aura-card-bg) !important;
    backdrop-filter: var(--aura-blur) !important;
    -webkit-backdrop-filter: var(--aura-blur) !important;
    border: 0.5px solid var(--aura-card-border) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.5),
        0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    border-radius: var(--aura-radius) !important;
}
.dark .settings-panel {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08),
        0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
.settings-panel-header {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: var(--aura-gradient-soft) !important;
}
.dark .settings-panel-header {
    border-color: rgba(255, 255, 255, 0.07) !important;
}
.settings-panel-footer {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.03) !important;
}
.dark .settings-panel-footer {
    border-color: rgba(255, 255, 255, 0.07) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

/* --- Alert Glass --- */
.alert {
    position: relative;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
.dark .alert {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
}
.dark .alert-success {
    background: rgba(16, 185, 129, 0.08) !important;
}
.alert-error {
    background: rgba(239, 68, 68, 0.12) !important;
}
.dark .alert-error {
    background: rgba(239, 68, 68, 0.08) !important;
}

/* --- Badge Glass --- */
.badge {
    position: relative;
    backdrop-filter: blur(10px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.4) !important;
}
.dark .badge {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08) !important;
}
.badge-primary {
    background: rgba(196, 181, 253, 0.18) !important;
}
.dark .badge-primary {
    background: rgba(196, 181, 253, 0.10) !important;
}

/* --- Ghost / Secondary Buttons Glass --- */
.btn-secondary {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}
.dark .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.28) !important;
    transform: translateY(-1px);
}
.dark .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
}

.btn-ghost {
    background: transparent !important;
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
}
.dark .btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* --- Admin Table Glass --- */
.admin-table th,
.admin-table td {
    border-color: rgba(0, 0, 0, 0.08) !important;
}
.dark .admin-table th,
.dark .admin-table td {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}
.dark .admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* --- Tooltip Glass --- */
.tooltip::after {
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
    background: rgba(30, 27, 75, 0.85) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
}
.dark .tooltip::after {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* --- Empty State Glass --- */
.empty-state__icon {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(14px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.4) !important;
}
.dark .empty-state__icon {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* --- Media Upload Card Glass --- */
.media-upload-card {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    border: 2px dashed rgba(255, 255, 255, 0.35) !important;
}
.dark .media-upload-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
.media-upload-card:hover {
    border-color: rgba(196, 181, 253, 0.5) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}
.dark .media-upload-card:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* --- Tag Input Container Glass --- */
.tag-input-container {
    background: var(--aura-inner-bg) !important;
    border: 0.5px solid var(--aura-inner-border) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
.dark .tag-input-container {
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* --- Quality Option Glass --- */
.quality-option {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.dark .quality-option {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Drop Zone — remove gradient border --- */
.video-drop-zone,
.gradient-border-animated {
    background: rgb(249 250 251) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    animation: none !important;
}
.dark .video-drop-zone,
.dark .gradient-border-animated {
    background: var(--surface-dark-soft, #1e1b2e) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    animation: none !important;
}

/* ===================== 42. FADE-IN ANIMATION ===================== */
.aura-fade-in {
    animation: auraFadeIn 0.5s ease-out both;
}
@keyframes auraFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║          AURA LANDING PAGE — Liquid Glass Overrides                ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Override landing page CSS variables to match Aura identity ── */
:root {
    --aurora-primary: #c4b5fd;
    --aurora-sky: #93c5fd;
    --aurora-purple: #f9a8d4;
    --aurora-accent: #6ee7b7;
    --gradient-cta: var(--aura-gradient);
    --gradient-hero: var(--aura-gradient);
    --gradient-text-hero: var(--aura-gradient-vivid);
    --glass-surface: rgba(255, 255, 255, 0.42);
    --glass-surface-strong: rgba(255, 255, 255, 0.58);
    --glass-surface-dark: rgba(15, 12, 35, 0.55);
    --surface-ivory: #ede5ff;
    --surface-ivory-strong: #e4d9ff;
    --surface-dark: #0c0a1d;
    --surface-dark-soft: #110e25;
    --border-soft: rgba(196, 181, 253, 0.18);
    --border-strong: rgba(196, 181, 253, 0.30);
    --shadow-soft: 0 22px 60px -40px rgba(139, 92, 246, 0.25);
    --shadow-card:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.75),
        0 8px 24px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* ═══════════════════════════════════════════════════
   43. LANDING NAV — Frosted Glass
   ═══════════════════════════════════════════════════ */
.landing-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: rgba(255, 255, 255, 0.48) !important;
    backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(32px) saturate(2) brightness(1.08) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.15),
        0 4px 24px rgba(0, 0, 0, 0.06) !important;
}
.dark .landing-nav {
    background: rgba(12, 10, 29, 0.65) !important;
    backdrop-filter: blur(32px) saturate(2) brightness(0.95) !important;
    -webkit-backdrop-filter: blur(32px) saturate(2) brightness(0.95) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.04),
        0 4px 24px rgba(0, 0, 0, 0.3) !important;
}
.landing-nav::after {
    background: var(--aura-gradient) !important;
    opacity: 0.45 !important;
    height: 1.5px !important;
}

/* Nav buttons — glass pill */
.landing-nav button,
.landing-nav .bg-gray-100 {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.40) !important;
    transition: all 0.25s ease !important;
}
.landing-nav button:hover,
.landing-nav .bg-gray-100:hover {
    background: rgba(255, 255, 255, 0.30) !important;
}
.dark .landing-nav button,
.dark .landing-nav .bg-gray-100,
.dark .landing-nav .dark\:bg-dark-800 {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08) !important;
}
.dark .landing-nav button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Nav CTA button */
.landing-nav .btn-primary,
.landing-nav .btn.btn-primary {
    background: var(--aura-gradient) !important;
    border: none !important;
    color: #1e1b4b !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 20px rgba(196, 181, 253, 0.35) !important;
}

/* Nav dropdown panels — glass */
.landing-nav .relative > [x-show] {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(40px) saturate(2.2) brightness(1.12) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2.2) brightness(1.12) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 24px 80px -12px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    z-index: 999 !important;
}
.dark .landing-nav .relative > [x-show] {
    background: rgba(15, 12, 35, 0.60) !important;
    backdrop-filter: blur(40px) saturate(2) brightness(0.95) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2) brightness(0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 24px 80px -12px rgba(0, 0, 0, 0.55) !important;
}
.landing-nav .relative > [x-show] a:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
.dark .landing-nav .relative > [x-show] a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
.landing-nav .relative > [x-show] .border-b,
.landing-nav .relative > [x-show] .border-t {
    border-color: rgba(196, 181, 253, 0.12) !important;
}
.dark .landing-nav .relative > [x-show] .border-b,
.dark .landing-nav .relative > [x-show] .border-t {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.landing-nav .relative {
    z-index: auto !important;
    overflow: visible !important;
}
.landing-nav .relative:has(> [x-show]:not([style*="display: none"])) {
    z-index: 100 !important;
}

/* ═══════════════════════════════════════════════════
   44. HERO / AURORA SECTION — Iridescence WebGL
   ═══════════════════════════════════════════════════ */
.aurora-section {
    background: #0c0a1d !important;
    isolation: isolate;
}
.dark .aurora-section {
    background: #0c0a1d !important;
}

/* Iridescence WebGL container — Hero */
#iridescence-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
#iridescence-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
}

/* Beams WebGL container — Studio Pages (Photo / Video) */
#beams-studio-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
#beams-studio-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: inherit;
}

/* Silk WebGL container — Default Theme Studio Pages */
#silk-studio-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
#silk-studio-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: inherit;
}

/* Grainient WebGL2 container — Aura Theme Studio Pages */
#grainient-studio-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}
#grainient-studio-bg canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: inherit;
}

/* Studio hero container — liquid glass bezel */
div.space-y-8 > .relative.overflow-hidden.rounded-3xl {
    box-shadow:
        inset 0 1.5px 0 0 rgba(255, 255, 255, 0.50),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.10),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.15),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 12px 40px -8px rgba(0, 0, 0, 0.12) !important;
}
.dark div.space-y-8 > .relative.overflow-hidden.rounded-3xl {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        inset 0 -0.5px 0 0 rgba(255, 255, 255, 0.04),
        inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
        inset -1px 0 0 0 rgba(255, 255, 255, 0.05),
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 12px 40px -8px rgba(0, 0, 0, 0.30) !important;
}

/* Hero bottom fade — blends iridescence into next section */
.hero-bottom-fade {
    background: linear-gradient(to bottom, transparent 0%, rgba(237, 229, 255, 0.6) 40%, rgba(237, 229, 255, 1) 100%) !important;
    height: 200px !important;
}
.dark .hero-bottom-fade {
    background: linear-gradient(to bottom, transparent 0%, rgba(12, 10, 29, 0.6) 40%, rgba(12, 10, 29, 1) 100%) !important;
    height: 200px !important;
}

/* Hero text — always light on iridescence background */
.aurora-section h1,
.aurora-section .text-slate-900 {
    color: #ffffff !important;
}
.aurora-section p,
.aurora-section .text-slate-600,
.aurora-section .text-xl {
    color: rgba(237, 233, 254, 0.85) !important;
}
.aurora-section .text-slate-600.dark\:text-slate-300 {
    color: rgba(237, 233, 254, 0.80) !important;
}

/* Hero badge — frosted glass pill */
.aurora-section .inline-flex[class*="backdrop-blur"],
.aurora-section span.inline-flex {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.30),
        0 4px 16px rgba(139, 92, 246, 0.15) !important;
    color: var(--aura-lavender) !important;
}
.dark .aurora-section .inline-flex[class*="backdrop-blur"],
.dark .aurora-section span.inline-flex {
    background: rgba(139, 92, 246, 0.12) !important;
    border-color: rgba(196, 181, 253, 0.20) !important;
    color: var(--aura-lavender) !important;
}

/* Hero gradient text — vivid Aura on iridescence */
.aurora-section .text-transparent.bg-clip-text,
.aurora-section [class*="bg-gradient-to-r"][class*="text-transparent"] {
    background: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 40%, #f9a8d4 70%, #c4b5fd 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Hero CTA buttons — glass on iridescence */
.hero-cta-primary {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
    border: 0.5px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.60),
        0 8px 32px rgba(139, 92, 246, 0.35) !important;
    border-radius: 999px !important;
}
.hero-cta-primary:hover {
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.70),
        0 12px 40px rgba(139, 92, 246, 0.50) !important;
    transform: translateY(-2px) scale(1.01);
}
.hero-cta-secondary {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.30),
        0 4px 16px rgba(0, 0, 0, 0.12) !important;
    border-radius: 999px !important;
}
.dark .hero-cta-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #ede9fe !important;
}
.hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    transform: translateY(-1px);
}
.dark .hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Scroll indicator — glass on iridescence */
.aurora-section a[href="#features"].inline-flex {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}
.aurora-section a[href="#features"].inline-flex:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* Floating icons — slightly brighter on iridescence */
.aurora-section .floating-icon img {
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35)) brightness(1.1) !important;
}

/* ═══════════════════════════════════════════════════
   45. PHOTO STUDIO / MARQUEE SECTION — Aura Glass
   ═══════════════════════════════════════════════════ */
section.py-20.bg-white,
section.py-20[class*="bg-white"] {
    background: transparent !important;
}
.dark section.py-20.bg-white,
.dark section.py-20[class*="bg-white"],
section.py-20.dark\:bg-zinc-950 {
    background: transparent !important;
}
.marquee-3d-container {
    background:
        radial-gradient(circle at 20% 20%, rgba(196, 181, 253, 0.15), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(147, 197, 253, 0.12), transparent 60%),
        rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.60),
        0 12px 40px rgba(0, 0, 0, 0.08) !important;
}
.dark .marquee-3d-container {
    background:
        radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.10), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.08), transparent 60%),
        rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.35) !important;
}
.marquee-gradient-overlay {
    background: linear-gradient(to top,
        rgba(237, 229, 255, 0.98) 0%,
        rgba(237, 229, 255, 0.80) 25%,
        rgba(237, 229, 255, 0.40) 50%,
        rgba(237, 229, 255, 0) 100%) !important;
}
.dark .marquee-gradient-overlay {
    background: linear-gradient(to top,
        rgba(12, 10, 29, 0.95) 0%,
        rgba(12, 10, 29, 0.70) 30%,
        rgba(12, 10, 29, 0.35) 60%,
        rgba(12, 10, 29, 0) 100%) !important;
}

/* Photo CTA — Aura */
section.py-20 .inline-flex[class*="bg-gradient-to-r"][class*="from-primary"] {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.30) !important;
}

/* ═══════════════════════════════════════════════════
   46. FEATURES / GLOWING GRID — Aura Glass Cards
   ═══════════════════════════════════════════════════ */
section#features {
    background: transparent !important;
}

/* Section badges — glass pill */
section .inline-flex[class*="bg-gradient-to-r"][class*="from-primary"],
section span.inline-flex[class*="border-primary"] {
    background: rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(16px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
    border: 0.5px solid rgba(196, 181, 253, 0.30) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.50) !important;
    color: var(--aura-lavender) !important;
}
.dark section .inline-flex[class*="bg-gradient-to-r"][class*="from-primary"],
.dark section span.inline-flex[class*="border-primary"] {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(196, 181, 253, 0.18) !important;
}

/* Section heading gradient text */
section h2 .text-transparent.bg-clip-text {
    background: var(--aura-gradient-vivid) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Glowing card inner — glass container */
.glowing-card-border > div:last-child {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    border: none !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.60),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.dark .glowing-card-border > div:last-child {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.10),
        0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Glowing card border — Aura gradient */
.glowing-card-border {
    border-color: rgba(196, 181, 253, 0.15) !important;
}
.dark .glowing-card-border {
    border-color: rgba(196, 181, 253, 0.08) !important;
}

/* Feature icon container — glass */
.glowing-card-border .w-fit.rounded-lg {
    background: rgba(196, 181, 253, 0.12) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 0.5px solid rgba(196, 181, 253, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35) !important;
}
.dark .glowing-card-border .w-fit.rounded-lg {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(196, 181, 253, 0.12) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.06) !important;
}

/* ═══════════════════════════════════════════════════
   47. PRICING SECTION — Aura Glass Cards
   ═══════════════════════════════════════════════════ */
section#pricing {
    background: transparent !important;
}

/* Pricing card — glass */
section#pricing .relative > div[class*="bg-white"],
section#pricing .relative > div[class*="rounded-2xl"] {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.50) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.70),
        0 8px 28px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease !important;
}
section#pricing .relative > div[class*="bg-white"]:hover,
section#pricing .relative > div[class*="rounded-2xl"]:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.80),
        0 16px 48px rgba(139, 92, 246, 0.12) !important;
}
.dark section#pricing .relative > div[class*="bg-white"],
.dark section#pricing .relative > div[class*="rounded-2xl"],
.dark section#pricing .relative > div[class*="dark:bg-dark-800"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.10),
        0 8px 28px rgba(0, 0, 0, 0.3) !important;
}

/* Featured pricing glow — Aura */
section#pricing .absolute.-inset-0\.5 {
    background: var(--aura-gradient) !important;
}
section#pricing .relative > div[class*="border-primary"] {
    border-color: rgba(196, 181, 253, 0.50) !important;
}

/* Plan icon — glass */
section#pricing .w-16.h-16[class*="bg-gradient"] {
    background: var(--aura-gradient-soft) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.45) !important;
}
section#pricing .w-16.h-16[class*="bg-gradient"] i {
    color: var(--aura-lavender) !important;
}

/* Featured badge — Aura */
section#pricing .gradient-orange {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.30) !important;
}

/* Pricing CTA buttons */
section#pricing a[class*="gradient-orange"] {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25) !important;
}
section#pricing a[class*="bg-gray-100"],
section#pricing a[class*="dark:bg-dark-700"] {
    background: rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    border-radius: 18px !important;
}

/* Money back guarantee — glass */
section#pricing .inline-flex[class*="bg-green-50"] {
    background: rgba(16, 185, 129, 0.10) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    border: 0.5px solid rgba(16, 185, 129, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35) !important;
}

/* AI Models badge inside pricing */
section#pricing div[class*="bg-gradient-to-r"][class*="from-primary-50"] {
    background: rgba(196, 181, 253, 0.10) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 0.5px solid rgba(196, 181, 253, 0.20) !important;
}

/* ═══════════════════════════════════════════════════
   48. STATS SECTION — Aura Glass
   ═══════════════════════════════════════════════════ */
section[class*="py-20"][class*="bg-gradient-to-b"] {
    background: transparent !important;
}

/* Stats icon boxes — glass */
section[class*="py-20"] .w-20.h-20[class*="bg-gradient"] {
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.45),
        0 8px 24px rgba(139, 92, 246, 0.15) !important;
}

/* ═══════════════════════════════════════════════════
   49. HOW IT WORKS — Aura Glass Steps
   ═══════════════════════════════════════════════════ */
section.py-24.bg-white,
section.py-24[class*="bg-white"] {
    background: transparent !important;
}
.dark section.py-24.bg-white,
.dark section.py-24[class*="bg-white"] {
    background: transparent !important;
}

/* Step cards — glass */
section.py-24 .relative[class*="bg-gray-50"],
section.py-24 .relative[class*="rounded-2xl"][class*="border"] {
    background: rgba(255, 255, 255, 0.38) !important;
    backdrop-filter: blur(24px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: var(--aura-radius) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.60),
        0 6px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.35s ease !important;
}
section.py-24 .relative[class*="bg-gray-50"]:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.70),
        0 12px 36px rgba(139, 92, 246, 0.10) !important;
}
.dark section.py-24 .relative[class*="bg-gray-50"],
.dark section.py-24 .relative[class*="dark:bg-zinc-900"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08),
        0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Step number boxes — glass with Aura gradient */
section.py-24 .w-14.h-14[class*="bg-gradient"] {
    backdrop-filter: blur(10px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.40),
        0 4px 16px rgba(139, 92, 246, 0.20) !important;
}

/* ═══════════════════════════════════════════════════
   50. TESTIMONIALS — Aura Glass
   ═══════════════════════════════════════════════════ */
section[class*="py-24"][class*="bg-gradient-to-b"] {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════
   51. SECURITY SECTION — Aura Glass
   ═══════════════════════════════════════════════════ */
section[class*="py-20"][class*="bg-gray-50"] {
    background: transparent !important;
}
.dark section[class*="py-20"][class*="dark:bg-zinc-900"] {
    background: transparent !important;
}

/* Security badges — glass cards */
.security-badge {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 18px !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.dark .security-badge {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ═══════════════════════════════════════════════════
   52. FOOTER — Aura Glass
   ═══════════════════════════════════════════════════ */
.landing-footer {
    background: rgba(255, 255, 255, 0.30) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.05) !important;
    border-top: 0.5px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.55),
        0 -4px 24px rgba(0, 0, 0, 0.04) !important;
}
.dark .landing-footer {
    background: rgba(12, 10, 29, 0.55) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(0.95) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(0.95) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        inset 0 0.5px 0 0 rgba(255, 255, 255, 0.06),
        0 -4px 24px rgba(0, 0, 0, 0.25) !important;
}

/* Footer divider — Aura gradient */
.landing-footer__divider {
    background: var(--aura-gradient) !important;
    opacity: 0.25 !important;
    height: 1.5px !important;
}

/* Footer social buttons — glass */
.landing-footer a[class*="bg-gray-100"],
.landing-footer a[class*="rounded-xl"][class*="w-10"] {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.40) !important;
    transition: all 0.25s ease !important;
}
.landing-footer a[class*="bg-gray-100"]:hover {
    background: rgba(196, 181, 253, 0.18) !important;
    border-color: rgba(196, 181, 253, 0.35) !important;
    color: var(--aura-lavender) !important;
}
.dark .landing-footer a[class*="bg-gray-100"],
.dark .landing-footer a[class*="dark:bg-dark-800"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.06) !important;
}
.dark .landing-footer a[class*="bg-gray-100"]:hover {
    background: rgba(139, 92, 246, 0.12) !important;
}

/* Footer CTA button — Aura */
.landing-footer a[class*="gradient-orange"] {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25) !important;
}

/* Footer theme toggle — glass */
.landing-footer button[onclick*="toggleTheme"] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.35) !important;
}
.dark .landing-footer button[onclick*="toggleTheme"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════
   53. LANDING — GLOBAL OVERRIDES
   ═══════════════════════════════════════════════════ */

/* Make all section backgrounds transparent so body bg shows through */
section[class*="bg-zinc-50"],
section[class*="bg-zinc-900"],
section[class*="bg-zinc-950"],
section[class*="bg-gray-50"],
section[class*="dark:bg-dark-950"],
section[class*="dark:bg-zinc-950"] {
    background: transparent !important;
}

/* Gradient orbs in sections — Aura colors */
section .absolute[class*="bg-gradient-to-br"][class*="from-primary"],
section .absolute[class*="bg-primary-500"],
section .absolute[class*="from-primary-500"] {
    background: radial-gradient(circle, rgba(196, 181, 253, 0.20), transparent 70%) !important;
}

/* All gradient text in landing sections */
section .bg-gradient-to-r[class*="from-emerald-500"] {
    background: linear-gradient(135deg, #6ee7b7, #34d399) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Landing page bg-white/80 containers — glass */
section div[class*="bg-white/80"],
section div[class*="dark:bg-zinc-900/80"] {
    background: rgba(255, 255, 255, 0.42) !important;
    backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(28px) saturate(2) brightness(1.08) !important;
}
.dark section div[class*="bg-white/80"],
.dark section div[class*="dark:bg-zinc-900/80"] {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Marquee wrapper — glass border */
section .rounded-3xl[class*="bg-gray-950/5"],
section .rounded-3xl[class*="dark:bg-neutral-800/50"] {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.30) !important;
    box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.45) !important;
}
.dark section .rounded-3xl[class*="bg-gray-950/5"],
.dark section .rounded-3xl[class*="dark:bg-neutral-800/50"] {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ===================== AURA TOOL IDENTITY OVERRIDES ===================== */
/* Remap default brand variables to Aura palette */
:root {
    --brand-primary: #a78bfa !important;
    --brand-secondary-sky: #93c5fd !important;
    --brand-secondary-purple: #c4b5fd !important;
}

/* ---- Pink → Violet remap (tool dropzones, badges, buttons) ---- */
.text-pink-500 { color: #8b5cf6 !important; }
.text-pink-400 { color: #a78bfa !important; }
.text-pink-600 { color: #7c3aed !important; }
.dark .text-pink-400,
.dark .dark\:text-pink-400 { color: #a78bfa !important; }
.dark .text-pink-500 { color: #8b5cf6 !important; }

.bg-pink-50 { background-color: #f5f3ff !important; }
.bg-pink-100 { background-color: #ede9fe !important; }
.bg-pink-400 { background-color: #a78bfa !important; }
.bg-pink-500 { background-color: #8b5cf6 !important; }
.dark .bg-pink-500 { background-color: #7c3aed !important; }
.dark .dark\:bg-pink-900\/10 { background-color: rgba(91, 33, 182, 0.1) !important; }
.dark .dark\:bg-pink-900\/20 { background-color: rgba(91, 33, 182, 0.2) !important; }
.dark .dark\:bg-pink-900\/30 { background-color: rgba(91, 33, 182, 0.3) !important; }
.dark .dark\:bg-pink-900\/40 { background-color: rgba(91, 33, 182, 0.4) !important; }

.border-pink-400 { border-color: #a78bfa !important; }
.border-pink-500 { border-color: #8b5cf6 !important; }

.hover\:border-pink-400:hover { border-color: #a78bfa !important; }
.hover\:bg-pink-100:hover { background-color: #ede9fe !important; }
.dark .dark\:hover\:bg-pink-900\/40:hover { background-color: rgba(91, 33, 182, 0.4) !important; }

.ring-pink-500\/20 { --tw-ring-color: rgba(139, 92, 246, 0.2) !important; }
.ring-pink-500\/50 { --tw-ring-color: rgba(139, 92, 246, 0.5) !important; }

.from-pink-500 { --tw-gradient-from: #8b5cf6 !important; }
.to-pink-500 { --tw-gradient-to: #8b5cf6 !important; }
.from-pink-500\/20 { --tw-gradient-from: rgba(139, 92, 246, 0.2) !important; }
.to-pink-500\/10 { --tw-gradient-to: rgba(139, 92, 246, 0.1) !important; }
.from-pink-500\/30 { --tw-gradient-from: rgba(139, 92, 246, 0.3) !important; }

.hover\:shadow-pink-500\/20:hover {
    --tw-shadow-color: rgba(139, 92, 246, 0.2) !important;
}

/* ---- Orange → Purple remap ---- */
.text-orange-500 { color: #8b5cf6 !important; }
.text-orange-400 { color: #a78bfa !important; }
.text-orange-600 { color: #7c3aed !important; }
.dark .text-orange-400,
.dark .dark\:text-orange-400 { color: #a78bfa !important; }

.bg-orange-50 { background-color: #f5f3ff !important; }
.bg-orange-100 { background-color: #ede9fe !important; }
.bg-orange-500 { background-color: #8b5cf6 !important; }
.dark .dark\:bg-orange-900\/20 { background-color: rgba(91, 33, 182, 0.2) !important; }
.dark .dark\:bg-orange-900\/30 { background-color: rgba(91, 33, 182, 0.3) !important; }

.border-orange-500 { border-color: #8b5cf6 !important; }
.border-orange-400 { border-color: #a78bfa !important; }
.from-orange-500 { --tw-gradient-from: #8b5cf6 !important; }
.to-orange-500 { --tw-gradient-to: #8b5cf6 !important; }
.from-orange-500\/20 { --tw-gradient-from: rgba(139, 92, 246, 0.2) !important; }
.to-orange-500\/20 { --tw-gradient-to: rgba(139, 92, 246, 0.2) !important; }

/* ---- Amber → Indigo/Violet remap ---- */
.text-amber-500 { color: #8b5cf6 !important; }
.text-amber-400 { color: #a78bfa !important; }
.text-amber-600 { color: #7c3aed !important; }
.dark .text-amber-400,
.dark .dark\:text-amber-400 { color: #a78bfa !important; }

.bg-amber-50 { background-color: #f5f3ff !important; }
.bg-amber-100 { background-color: #ede9fe !important; }
.bg-amber-500 { background-color: #8b5cf6 !important; }
.dark .dark\:bg-amber-900\/20 { background-color: rgba(91, 33, 182, 0.2) !important; }
.dark .dark\:bg-amber-900\/30 { background-color: rgba(91, 33, 182, 0.3) !important; }

.border-amber-500 { border-color: #8b5cf6 !important; }
.from-amber-500 { --tw-gradient-from: #8b5cf6 !important; }
.to-amber-500 { --tw-gradient-to: #8b5cf6 !important; }

/* ---- Yellow badge → Violet remap (VIP/Pro badges) ---- */
.from-yellow-500\/20 { --tw-gradient-from: rgba(139, 92, 246, 0.2) !important; }
.to-yellow-500\/20 { --tw-gradient-to: rgba(139, 92, 246, 0.2) !important; }
.from-yellow-500\/30 { --tw-gradient-from: rgba(139, 92, 246, 0.3) !important; }
.to-yellow-500\/30 { --tw-gradient-to: rgba(139, 92, 246, 0.3) !important; }
.border-yellow-500\/50 { border-color: rgba(139, 92, 246, 0.5) !important; }
.ring-yellow-500\/20 { --tw-ring-color: rgba(139, 92, 246, 0.2) !important; }
.ring-yellow-400\/50 { --tw-ring-color: rgba(167, 139, 250, 0.5) !important; }
.text-yellow-400 { color: #a78bfa !important; }

/* ---- Tool header gradients → Aura gradient ---- */
.space-y-8 > .relative.overflow-hidden.rounded-3xl[style*="linear-gradient"] {
    background: var(--aura-gradient) !important;
}

/* ---- Tool Tips section ---- */
[class*="from-violet-500\/10"][class*="to-pink-500\/10"],
[class*="from-pink-500\/10"][class*="to-violet-500\/10"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(196, 181, 253, 0.1)) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
.dark [class*="from-violet-500\/10"][class*="to-pink-500\/10"],
.dark [class*="from-pink-500\/10"][class*="to-violet-500\/10"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(196, 181, 253, 0.08)) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
}

/* ---- Comparison slider — Aura colors ---- */
.comparison-slider-handle {
    border-color: #a78bfa !important;
}
.comparison-label.after {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
}

/* ---- Toggle switch — Aura color ---- */
.toggle-switch.active,
.toggle-switch button.active {
    background: #8b5cf6 !important;
}

/* ---- Upscale/tool action buttons — Aura gradient ---- */
.upscale-btn.active {
    background: var(--aura-gradient) !important;
    color: #1e1b4b !important;
}

/* ---- Featured glow — Aura gradient ---- */
.featured-glow {
    background: var(--aura-gradient) !important;
}

/* ---- Generation card hover — Aura accent ---- */
.generation-card:hover {
    border-color: #a78bfa !important;
}

/* ---- Media upload card — Aura accent ---- */
.media-upload-card:hover,
.media-upload-card.has-image {
    border-color: #a78bfa !important;
}

/* ---- Plan card featured — Aura ---- */
.plan-card--featured {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 1px #a78bfa, 0 25px 50px -12px rgba(139, 92, 246, 0.25) !important;
}

/* ---- Stats card icon primary — Aura ---- */
.stats-card__icon--primary {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(147, 197, 253, 0.2)) !important;
    color: #8b5cf6 !important;
}

/* ---- Empty state icon — Aura ---- */
.empty-state__icon i {
    color: #a78bfa !important;
}

/* ---- Success glow — Aura accent ---- */
.success-glow {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.15) !important;
}

/* ---- Scale-in animation — keep as-is ---- */
.scale-in {
    animation: scaleIn 0.3s ease-out;
}

/* ---- Tool dropzone icon gradient — Aura ---- */
.video-drop-zone .bg-gradient-to-br.from-primary-500,
.gradient-border-animated .bg-gradient-to-br.from-primary-500 {
    background: var(--aura-gradient) !important;
}

/* ---- Dragover state — Aura ---- */
.video-drop-zone.dragover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.3) !important;
}

/* ---- Tool quick suggestion chips ---- */
.bg-pink-50 { background-color: rgba(139, 92, 246, 0.08) !important; }
.hover\:bg-pink-100:hover { background-color: rgba(139, 92, 246, 0.15) !important; }
.text-pink-600 { color: #7c3aed !important; }
.dark .dark\:text-pink-400 { color: #a78bfa !important; }