/* ========================================
   Dataria Pulse - Cosmic Theme CSS
   Color scheme inspired by Sanremo Edition
   ======================================== */

:root {
    /* Primary Cosmic Colors - MORE VIBRANT */
    --cosmic-purple: #8B5FD8;
    --cosmic-purple-dark: #5A2E8F;
    --cosmic-purple-light: #B88FE8;
    --cosmic-blue: #5F7FBF;
    --cosmic-pink: #E68FC8;

    /* Background Colors - MORE SATURATED */
    --bg-cosmic-gradient: linear-gradient(135deg, #3D2555 0%, #2A1B45 50%, #3A4A7A 100%);
    --bg-cosmic-overlay: rgba(61, 37, 85, 0.85);
    --bg-card-dark: rgba(45, 25, 65, 0.65);
    --bg-card-darker: rgba(35, 20, 55, 0.75);

    /* Text Colors */
    --text-light: #FFFFFF;
    --text-muted: #C8B8DF;
    --text-accent: #F6D4F8;

    /* Button Colors - MORE VIBRANT */
    --btn-primary-gradient: linear-gradient(135deg, #8B5FD8 0%, #B88FE8 100%);
    --btn-secondary-gradient: linear-gradient(135deg, #5F7FBF 0%, #8B9FCF 100%);
    --btn-hover-glow: rgba(139, 95, 216, 0.6);

    /* Border & Shadow - MORE GLOW */
    --border-cosmic: rgba(184, 143, 232, 0.4);
    --shadow-cosmic: 0 8px 32px rgba(139, 95, 216, 0.3);
    --shadow-glow: 0 0 30px rgba(184, 143, 232, 0.5);
}

/* ========================================
   Global Styles
   ======================================== */

html {
    background: #2A1B45;
    background: linear-gradient(135deg, #3D2555 0%, #2A1B45 50%, #3A4A7A 100%);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior: none;
}

body {
    background: var(--bg-cosmic-gradient);
    background-attachment: fixed;
    color: var(--text-light);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    margin: 0;
    padding: 0;
}

/* Dense Static Starfield - Layer 1: Medium & Large Stars */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Large prominent stars scattered */
        radial-gradient(4px 4px at 10% 15%, white, transparent),
        radial-gradient(4px 4px at 25% 35%, rgba(230, 143, 200, 0.9), transparent),
        radial-gradient(4px 4px at 45% 20%, white, transparent),
        radial-gradient(4px 4px at 65% 50%, rgba(184, 143, 232, 0.9), transparent),
        radial-gradient(4px 4px at 85% 25%, white, transparent),
        radial-gradient(4px 4px at 15% 70%, white, transparent),
        radial-gradient(4px 4px at 55% 85%, rgba(230, 143, 200, 0.9), transparent),
        radial-gradient(4px 4px at 75% 65%, white, transparent),
        radial-gradient(4px 4px at 92% 80%, rgba(184, 143, 232, 0.9), transparent),

        /* Medium stars - Top section */
        radial-gradient(2px 2px at 5% 8%, white, transparent),
        radial-gradient(2px 2px at 8% 18%, white, transparent),
        radial-gradient(2px 2px at 12% 10%, white, transparent),
        radial-gradient(2px 2px at 15% 22%, white, transparent),
        radial-gradient(2px 2px at 18% 5%, white, transparent),
        radial-gradient(2px 2px at 22% 15%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 28% 12%, white, transparent),
        radial-gradient(2px 2px at 32% 25%, white, transparent),
        radial-gradient(2px 2px at 35% 8%, white, transparent),
        radial-gradient(2px 2px at 38% 18%, white, transparent),
        radial-gradient(2px 2px at 42% 22%, rgba(230, 143, 200, 0.8), transparent),
        radial-gradient(2px 2px at 48% 10%, white, transparent),
        radial-gradient(2px 2px at 52% 28%, white, transparent),
        radial-gradient(2px 2px at 58% 15%, white, transparent),
        radial-gradient(2px 2px at 62% 5%, white, transparent),
        radial-gradient(2px 2px at 68% 20%, white, transparent),
        radial-gradient(2px 2px at 72% 12%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 78% 25%, white, transparent),
        radial-gradient(2px 2px at 82% 8%, white, transparent),
        radial-gradient(2px 2px at 88% 18%, white, transparent),
        radial-gradient(2px 2px at 92% 22%, white, transparent),
        radial-gradient(2px 2px at 95% 12%, white, transparent),

        /* Medium stars - Middle section */
        radial-gradient(2px 2px at 3% 35%, white, transparent),
        radial-gradient(2px 2px at 8% 45%, white, transparent),
        radial-gradient(2px 2px at 12% 38%, rgba(230, 143, 200, 0.8), transparent),
        radial-gradient(2px 2px at 18% 48%, white, transparent),
        radial-gradient(2px 2px at 22% 42%, white, transparent),
        radial-gradient(2px 2px at 28% 52%, white, transparent),
        radial-gradient(2px 2px at 32% 38%, white, transparent),
        radial-gradient(2px 2px at 35% 58%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 38% 42%, white, transparent),
        radial-gradient(2px 2px at 42% 55%, white, transparent),
        radial-gradient(2px 2px at 48% 45%, white, transparent),
        radial-gradient(2px 2px at 52% 38%, white, transparent),
        radial-gradient(2px 2px at 58% 52%, rgba(230, 143, 200, 0.8), transparent),
        radial-gradient(2px 2px at 62% 42%, white, transparent),
        radial-gradient(2px 2px at 68% 58%, white, transparent),
        radial-gradient(2px 2px at 72% 48%, white, transparent),
        radial-gradient(2px 2px at 78% 35%, white, transparent),
        radial-gradient(2px 2px at 82% 55%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 85% 42%, white, transparent),
        radial-gradient(2px 2px at 88% 52%, white, transparent),
        radial-gradient(2px 2px at 92% 45%, white, transparent),
        radial-gradient(2px 2px at 95% 58%, white, transparent),
        radial-gradient(2px 2px at 98% 48%, white, transparent),

        /* Medium stars - Bottom section */
        radial-gradient(2px 2px at 5% 65%, white, transparent),
        radial-gradient(2px 2px at 8% 78%, rgba(230, 143, 200, 0.8), transparent),
        radial-gradient(2px 2px at 12% 72%, white, transparent),
        radial-gradient(2px 2px at 18% 82%, white, transparent),
        radial-gradient(2px 2px at 22% 68%, white, transparent),
        radial-gradient(2px 2px at 28% 88%, white, transparent),
        radial-gradient(2px 2px at 32% 75%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 35% 92%, white, transparent),
        radial-gradient(2px 2px at 38% 68%, white, transparent),
        radial-gradient(2px 2px at 42% 82%, white, transparent),
        radial-gradient(2px 2px at 48% 72%, white, transparent),
        radial-gradient(2px 2px at 52% 95%, rgba(230, 143, 200, 0.8), transparent),
        radial-gradient(2px 2px at 58% 78%, white, transparent),
        radial-gradient(2px 2px at 62% 88%, white, transparent),
        radial-gradient(2px 2px at 68% 72%, white, transparent),
        radial-gradient(2px 2px at 72% 92%, white, transparent),
        radial-gradient(2px 2px at 78% 68%, rgba(184, 143, 232, 0.8), transparent),
        radial-gradient(2px 2px at 82% 82%, white, transparent),
        radial-gradient(2px 2px at 88% 75%, white, transparent),
        radial-gradient(2px 2px at 92% 88%, white, transparent),
        radial-gradient(2px 2px at 95% 78%, white, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
}

/* Layer 2: Hundreds of tiny stars filling the sky */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        /* Row 1 - Top 10% */
        radial-gradient(1px 1px at 3% 3%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 7% 7%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 11% 4%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 14% 9%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 17% 2%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 20% 8%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 24% 5%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 27% 9%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 30% 3%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 33% 7%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 37% 4%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 40% 9%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 43% 2%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 47% 8%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 50% 5%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 53% 9%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 57% 3%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 60% 7%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 63% 4%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 67% 9%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 70% 2%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 73% 8%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 77% 5%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 80% 9%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 83% 3%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 87% 7%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 90% 4%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 93% 9%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 97% 6%, rgba(255, 255, 255, 0.6), transparent),

        /* Row 2 - 15-25% */
        radial-gradient(1px 1px at 4% 17%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 9% 21%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 13% 19%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 16% 24%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 19% 16%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 23% 22%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 26% 18%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 29% 24%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 33% 20%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 36% 16%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 39% 23%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 44% 19%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 47% 25%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 51% 17%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 54% 22%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 57% 19%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 61% 24%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 64% 16%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 67% 21%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 71% 18%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 74% 24%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 77% 20%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 81% 16%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 84% 23%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 87% 19%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 91% 25%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 94% 17%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 98% 22%, rgba(255, 255, 255, 0.6), transparent),

        /* Row 3 - 30-40% */
        radial-gradient(1px 1px at 2% 32%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 6% 37%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 10% 34%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 14% 39%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 17% 31%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 21% 36%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 25% 33%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 29% 39%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 34% 35%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 37% 31%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 41% 38%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 44% 34%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 49% 39%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 53% 32%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 56% 37%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 59% 34%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 64% 39%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 67% 31%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 71% 36%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 74% 33%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 79% 38%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 82% 35%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 86% 31%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 89% 39%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 93% 34%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 96% 37%, rgba(255, 255, 255, 0.5), transparent),

        /* Row 4 - 45-55% */
        radial-gradient(1px 1px at 5% 47%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 9% 52%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 13% 49%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 16% 54%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 20% 46%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 24% 51%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 28% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 31% 53%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 36% 50%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 40% 46%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 43% 54%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 46% 49%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 51% 51%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 54% 47%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 57% 53%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 61% 49%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 65% 54%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 69% 46%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 72% 52%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 76% 48%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 79% 54%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 83% 50%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 87% 47%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90% 53%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 94% 49%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 97% 51%, rgba(255, 255, 255, 0.6), transparent),

        /* Row 5 - 60-70% */
        radial-gradient(1px 1px at 3% 62%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 7% 67%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 11% 64%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 15% 69%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 19% 61%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 23% 66%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 27% 63%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 31% 68%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 35% 65%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 39% 61%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 43% 69%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 47% 64%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 51% 67%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 55% 62%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 59% 69%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 63% 65%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 66% 61%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 71% 68%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 75% 63%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 79% 69%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 83% 66%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 87% 62%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 91% 67%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 95% 64%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 98% 69%, rgba(255, 255, 255, 0.6), transparent),

        /* Row 6 - 75-85% */
        radial-gradient(1px 1px at 4% 77%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 8% 82%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 12% 79%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 16% 84%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 20% 76%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 24% 81%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 28% 78%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 32% 83%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 36% 80%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 40% 76%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 44% 84%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 49% 79%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 53% 82%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 56% 77%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 61% 84%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 65% 80%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 69% 76%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 73% 83%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 77% 79%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 81% 84%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 85% 77%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 89% 82%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 93% 79%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 96% 84%, rgba(255, 255, 255, 0.6), transparent),

        /* Row 7 - 90-98% */
        radial-gradient(1px 1px at 6% 92%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 11% 95%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 16% 91%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 21% 96%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 26% 93%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 31% 97%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 36% 91%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 41% 94%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 46% 92%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 51% 96%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 56% 93%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 61% 91%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 66% 97%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 71% 94%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 76% 92%, rgba(184, 143, 232, 0.6), transparent),
        radial-gradient(1px 1px at 81% 96%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 86% 93%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 91% 91%, rgba(230, 143, 200, 0.6), transparent),
        radial-gradient(1px 1px at 96% 95%, rgba(184, 143, 232, 0.6), transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

/* All content above the stars */
.container, .container-fluid, nav, .card, .btn {
    position: relative;
    z-index: 1;
}

/* ========================================
   Cards & Containers
   ======================================== */

.card {
    background: var(--bg-card-dark);
    border: 2px solid var(--border-cosmic);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(139, 95, 216, 0.3), 0 0 20px rgba(139, 95, 216, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 50px rgba(139, 95, 216, 0.5), 0 0 40px rgba(184, 143, 232, 0.3);
    border-color: var(--cosmic-purple-light);
}

.card-body {
    color: var(--text-light);
}

/* ========================================
   Navigation
   ======================================== */

.navbar {
    background: rgba(35, 20, 55, 0.75) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--border-cosmic);
    box-shadow: 0 4px 20px rgba(139, 95, 216, 0.4), 0 0 30px rgba(139, 95, 216, 0.2);
}

.navbar-brand {
    color: var(--text-light) !important;
    font-weight: 600;
}

.navbar-text {
    color: var(--text-muted) !important;
}

/* ========================================
   Buttons
   ======================================== */

.btn-primary {
    background: var(--btn-primary-gradient);
    border: none;
    color: var(--text-light);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(139, 95, 216, 0.5);
    position: relative;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(139, 95, 216, 0.7), 0 0 20px rgba(184, 143, 232, 0.6);
    background: linear-gradient(135deg, #9B6FE8 0%, #C89FF8 100%);
    color: var(--text-light);
}

.btn-outline-primary {
    border: 2px solid var(--cosmic-purple);
    color: var(--cosmic-purple-light);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: var(--cosmic-purple);
    color: var(--text-light);
    box-shadow: var(--btn-hover-glow);
}

.btn-secondary {
    background: var(--btn-secondary-gradient);
    border: none;
    color: var(--text-light);
}

.btn-outline-light {
    border: 2px solid var(--text-light);
    color: var(--text-light);
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--text-light);
    color: var(--text-light);
}

/* ========================================
   Forms
   ======================================== */

.form-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-cosmic);
    color: var(--text-light);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--cosmic-purple-light);
    color: var(--text-light);
    box-shadow: 0 0 0 0.2rem var(--btn-hover-glow);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-label {
    color: var(--text-light);
    font-weight: 500;
}

.form-check-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--border-cosmic);
}

.form-check-input:checked {
    background-color: var(--cosmic-purple);
    border-color: var(--cosmic-purple);
}

.form-text {
    color: var(--text-muted);
}

/* ========================================
   Alerts
   ======================================== */

.alert {
    border: 1px solid var(--border-cosmic);
    backdrop-filter: blur(10px);
    color: var(--text-light);
}

.alert-success {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.4);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.4);
}

.alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.4);
}

.alert-info {
    background: rgba(23, 162, 184, 0.2);
    border-color: rgba(23, 162, 184, 0.4);
}

/* ========================================
   Tables
   ======================================== */

.table {
    color: var(--text-light);
}

.table-dark {
    background: var(--bg-card-darker);
    border-color: var(--border-cosmic);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.table-hover tbody tr:hover {
    background: rgba(107, 75, 154, 0.2);
    color: var(--text-light);
}

/* ========================================
   Badges
   ======================================== */

.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

.badge.bg-primary {
    background: var(--cosmic-purple) !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, #28a745 0%, #4CAF50 100%) !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #dc3545 0%, #E57373 100%) !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #ffc107 0%, #FFD54F 100%) !important;
}

/* ========================================
   Tabs
   ======================================== */

.nav-tabs {
    border-bottom: 1px solid var(--border-cosmic);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    border: none;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--text-light);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    background: var(--bg-card-dark);
    color: var(--text-light);
    border-color: var(--border-cosmic);
    border-bottom-color: transparent;
}

/* ========================================
   Links
   ======================================== */

a {
    color: var(--cosmic-purple-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--cosmic-pink);
    text-decoration: underline;
}

/* ========================================
   Text Colors
   ======================================== */

.text-muted {
    color: var(--text-muted) !important;
}

.text-white {
    color: var(--text-light) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-light);
    font-weight: 600;
}

/* ========================================
   Footer
   ======================================== */

footer {
    background: var(--bg-card-darker);
    border-top: 1px solid var(--border-cosmic);
    backdrop-filter: blur(10px);
}

footer a {
    color: var(--text-muted);
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--text-light);
}

/* ========================================
   Specific Component Styles
   ======================================== */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, rgba(139, 95, 216, 0.25) 0%, rgba(95, 127, 191, 0.25) 100%);
    backdrop-filter: blur(3px);
    border-bottom: 2px solid var(--border-cosmic);
    box-shadow: 0 10px 50px rgba(139, 95, 216, 0.3);
}

/* Feature Cards */
.feature-card {
    background: var(--bg-card-dark);
    border: 2px solid var(--border-cosmic);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 15px rgba(139, 95, 216, 0.2);
    transition: all 0.3s ease;
}

.feature-card:hover {
    border-color: var(--cosmic-purple-light);
    box-shadow: 0 8px 40px rgba(139, 95, 216, 0.5), 0 0 30px rgba(184, 143, 232, 0.4);
    transform: translateY(-8px);
}

/* Pricing Box */
.pricing-box {
    background: var(--bg-card-dark);
    border: 3px solid var(--cosmic-purple);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 50px rgba(139, 95, 216, 0.5), 0 0 40px rgba(184, 143, 232, 0.4);
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 10px 50px rgba(139, 95, 216, 0.5), 0 0 40px rgba(184, 143, 232, 0.4);
    }
    50% {
        box-shadow: 0 15px 60px rgba(139, 95, 216, 0.7), 0 0 50px rgba(184, 143, 232, 0.6);
    }
}

/* Action Buttons (Floating) */
.action-buttons {
    z-index: 1000;
}

.action-btn {
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-cosmic);
}

/* Password Toggle */
.password-toggle {
    color: var(--text-muted);
}

.password-toggle:hover {
    color: var(--text-light);
}

/* Logo Container */
.logo-container img {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    body::before {
        background-size: 300% 300%;
    }

    .action-buttons {
        bottom: 10px;
        right: 10px;
    }
}

/* ========================================
   Background Variants
   ======================================== */

.bg-light {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-light);
}

.bg-dark {
    background: var(--bg-card-darker) !important;
}

.bg-white {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
}