/* =========================================
   HABITQUEST GLOBAL THEMES
========================================= */

/* ---------- DEFAULT ---------- */

body[data-theme="default"] {
    --theme-bg-1: #06151b;
    --theme-bg-2: #082d36;
    --theme-accent: #18c4d8;
    --theme-accent-2: #7cebf5;
    --theme-card: rgba(255,255,255,.06);
    --theme-border: rgba(255,255,255,.08);
    --theme-text: #ffffff;
    --theme-muted: #91a8ad;

    background:
        radial-gradient(
            circle at 10% 10%,
            #0c5966,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--theme-bg-1),
            var(--theme-bg-2),
            var(--theme-bg-1)
        ) !important;

    color: var(--theme-text);
}


/* ---------- NEON COSMOS ---------- */

body[data-theme="neon-cosmos"] {
    --theme-bg-1: #050510;
    --theme-bg-2: #100b28;
    --theme-accent: #7c3aed;
    --theme-accent-2: #22d3ee;
    --theme-card: rgba(80,55,160,.14);
    --theme-border: rgba(139,92,246,.25);
    --theme-text: #ffffff;
    --theme-muted: #b0a9c9;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(124,58,237,.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(34,211,238,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050510,
            #100b28,
            #061827
        ) !important;
}


/* ---------- EMERALD FOCUS ---------- */

body[data-theme="emerald-focus"] {
    --theme-bg-1: #03110c;
    --theme-bg-2: #06231a;
    --theme-accent: #10b981;
    --theme-accent-2: #34d399;
    --theme-card: rgba(11,80,57,.15);
    --theme-border: rgba(52,211,153,.22);
    --theme-text: #ffffff;
    --theme-muted: #9bb8ad;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(16,185,129,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #03110c,
            #06231a,
            #041712
        ) !important;
}


/* ---------- SUNSET PULSE ---------- */

body[data-theme="sunset-pulse"] {
    --theme-bg-1: #170911;
    --theme-bg-2: #281020;
    --theme-accent: #ff5c68;
    --theme-accent-2: #9333ea;
    --theme-card: rgba(120,45,75,.15);
    --theme-border: rgba(255,120,120,.20);
    --theme-text: #ffffff;
    --theme-muted: #c3a8b4;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,92,104,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(147,51,234,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #170911,
            #281020,
            #181027
        ) !important;
}


/* ---------- LIQUID GLASS ---------- */

body[data-theme="liquid-glass"] {
    --theme-bg-1: #17233e;
    --theme-bg-2: #3b2357;
    --theme-accent: #7dd3fc;
    --theme-accent-2: #c084fc;
    --theme-card: rgba(255,255,255,.10);
    --theme-border: rgba(255,255,255,.22);
    --theme-text: #ffffff;
    --theme-muted: #d1d8e8;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(114,215,255,.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(192,132,252,.28),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #17233e,
            #3b2357,
            #0d6570
        ) !important;

    background-attachment: fixed !important;
}


/* =========================================
   COMMON APP SURFACES
========================================= */

body[data-theme] .topbar {
    background:
        color-mix(
            in srgb,
            var(--theme-bg-1) 82%,
            transparent
        ) !important;

    border-color:
        var(--theme-border) !important;

    backdrop-filter:
        blur(18px);
}

body[data-theme] .stat-card,
body[data-theme] .xp-card,
body[data-theme] .habit-card,
body[data-theme] .rank-card,
body[data-theme] .routine-section,
body[data-theme] .today-card,
body[data-theme] .routine-progress-card,
body[data-theme] .week-card,
body[data-theme] .analysis-card,
body[data-theme] .week-range-card,
body[data-theme] .weekly-message-card,
body[data-theme] .ai-analysis-card,
body[data-theme] .current-theme-card,
body[data-theme] .theme-card {
    background:
        var(--theme-card) !important;

    border-color:
        var(--theme-border) !important;
}


/* =========================================
   TEXT
========================================= */

body[data-theme] .small-text,
body[data-theme] .section-heading span,
body[data-theme] .xp-header span,
body[data-theme] .small-label,
body[data-theme] .card-heading span,
body[data-theme] .themes-header > span {
    color:
        var(--theme-accent-2) !important;
}

body[data-theme] p,
body[data-theme] small {
    color:
        var(--theme-muted);
}


/* =========================================
   BUTTONS
========================================= */

body[data-theme] button,
body[data-theme] .add-task-btn,
body[data-theme] .apply-theme-btn {
    border-color:
        var(--theme-border);
}

body[data-theme] .create-habit-btn,
body[data-theme] .save-task-btn {
    background:
        linear-gradient(
            135deg,
            var(--theme-accent),
            var(--theme-accent-2)
        ) !important;
}


/* =========================================
   PROGRESS BARS
========================================= */

body[data-theme] .xp-fill,
body[data-theme] .progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--theme-accent),
            var(--theme-accent-2)
        ) !important;
}


/* =========================================
   RADIAL MENU
========================================= */

body[data-theme] .radial-toggle {
    background:
        linear-gradient(
            135deg,
            var(--theme-accent),
            var(--theme-accent-2)
        ) !important;
}

body[data-theme] .radial-item {
    background:
        color-mix(
            in srgb,
            var(--theme-bg-2) 88%,
            transparent
        ) !important;

    border-color:
        var(--theme-border) !important;
}


/* =========================================
   MODALS / INPUTS
========================================= */

body[data-theme] .modal-box,
body[data-theme] .task-modal {
    background:
        color-mix(
            in srgb,
            var(--theme-bg-2) 90%,
            black
        ) !important;

    border-color:
        var(--theme-border) !important;
}

body[data-theme] input,
body[data-theme] select,
body[data-theme] textarea {
    background:
        rgba(255,255,255,.06) !important;

    border-color:
        var(--theme-border) !important;

    color:
        var(--theme-text) !important;
}


/* =========================================
   LIQUID GLASS EXTRA EFFECT
========================================= */

body[data-theme="liquid-glass"] .stat-card,
body[data-theme="liquid-glass"] .xp-card,
body[data-theme="liquid-glass"] .habit-card,
body[data-theme="liquid-glass"] .rank-card,
body[data-theme="liquid-glass"] .routine-section,
body[data-theme="liquid-glass"] .today-card,
body[data-theme="liquid-glass"] .routine-progress-card,
body[data-theme="liquid-glass"] .week-card,
body[data-theme="liquid-glass"] .analysis-card,
body[data-theme="liquid-glass"] .week-range-card,
body[data-theme="liquid-glass"] .weekly-message-card,
body[data-theme="liquid-glass"] .ai-analysis-card {

    backdrop-filter:
        blur(22px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.18),
        0 15px 40px
        rgba(0,0,0,.18);
}
/* =========================================
   NEON COSMOS — ADVANCED THEME
========================================= */

body[data-theme="neon-cosmos"] {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(124, 58, 237, .26),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 25%,
            rgba(34, 211, 238, .22),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(76, 29, 149, .22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #03030a,
            #09051d,
            #06131d
        ) !important;
}


/* ---------- animated stars ---------- */


/* ---------- moving nebula ---------- */



/* ---------- glass/neon cards ---------- */

body[data-theme="neon-cosmos"] .stat-card,
body[data-theme="neon-cosmos"] .xp-card,
body[data-theme="neon-cosmos"] .habit-card,
body[data-theme="neon-cosmos"] .rank-card,
body[data-theme="neon-cosmos"] .routine-section,
body[data-theme="neon-cosmos"] .today-card,
body[data-theme="neon-cosmos"] .routine-progress-card,
body[data-theme="neon-cosmos"] .week-card,
body[data-theme="neon-cosmos"] .analysis-card,
body[data-theme="neon-cosmos"] .week-range-card,
body[data-theme="neon-cosmos"] .weekly-message-card,
body[data-theme="neon-cosmos"] .ai-analysis-card {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(35, 20, 78, .42),
            rgba(10, 31, 49, .30)
        ) !important;

    border:
        1px solid
        rgba(139, 92, 246, .28) !important;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.30),
        0 0 24px
        rgba(124,58,237,.08);
}


/* ---------- moving highlight on card hover ---------- */

body[data-theme="neon-cosmos"] .stat-card::before,
body[data-theme="neon-cosmos"] .xp-card::before,
body[data-theme="neon-cosmos"] .habit-card::before,
body[data-theme="neon-cosmos"] .rank-card::before {
    content: "";

    position: absolute;

    width: 130%;
    height: 2px;

    left: -140%;
    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #22d3ee,
            #8b5cf6,
            transparent
        );

    opacity: 0;

    transition:
        left .7s ease,
        opacity .25s ease;
}


body[data-theme="neon-cosmos"] .stat-card:hover::before,
body[data-theme="neon-cosmos"] .xp-card:hover::before,
body[data-theme="neon-cosmos"] .habit-card:hover::before,
body[data-theme="neon-cosmos"] .rank-card:hover::before {
    left: 100%;
    opacity: 1;
}


/* ---------- cards float a little ---------- */

body[data-theme="neon-cosmos"] .stat-card:hover,
body[data-theme="neon-cosmos"] .habit-card:hover,
body[data-theme="neon-cosmos"] .rank-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.35),
        0 0 30px
        rgba(34,211,238,.12),
        0 0 34px
        rgba(124,58,237,.10);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* ---------- progress glow ---------- */

body[data-theme="neon-cosmos"] .xp-fill,
body[data-theme="neon-cosmos"] .progress-fill {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #22d3ee,
            #8b5cf6
        ) !important;

    background-size:
        200% 100%;

    box-shadow:
        0 0 14px
        rgba(34,211,238,.35);

    animation:
        cosmosProgressFlow 3s
        linear infinite;
}


@keyframes cosmosProgressFlow {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            200% 50%;
    }

}


/* ---------- topbar ---------- */

body[data-theme="neon-cosmos"] .topbar {
    background:
        rgba(5, 6, 22, .76) !important;

    border-bottom:
        1px solid
        rgba(124,58,237,.22) !important;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.28);

    backdrop-filter:
        blur(20px);
}


/* ---------- radial menu ---------- */

body[data-theme="neon-cosmos"] .radial-toggle {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #22d3ee
        ) !important;

    box-shadow:
        0 10px 34px
        rgba(0,0,0,.35),
        0 0 24px
        rgba(124,58,237,.35),
        0 0 18px
        rgba(34,211,238,.25) !important;
}


body[data-theme="neon-cosmos"] .radial-item {
    background:
        rgba(14, 13, 42, .92) !important;

    border:
        1px solid
        rgba(139,92,246,.30) !important;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.32),
        0 0 14px
        rgba(124,58,237,.12);
}


body[data-theme="neon-cosmos"] .radial-item:hover {
    box-shadow:
        0 10px 30px
        rgba(0,0,0,.35),
        0 0 20px
        rgba(34,211,238,.28),
        0 0 22px
        rgba(124,58,237,.22);
}


/* ---------- buttons ---------- */

body[data-theme="neon-cosmos"] .create-habit-btn,
body[data-theme="neon-cosmos"] .save-task-btn,
body[data-theme="neon-cosmos"] .add-task-btn {
    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #22d3ee
        ) !important;

    color: white !important;

    box-shadow:
        0 8px 24px
        rgba(124,58,237,.22);
}


/* ---------- text accents ---------- */

body[data-theme="neon-cosmos"] .small-text,
body[data-theme="neon-cosmos"] .section-heading span,
body[data-theme="neon-cosmos"] .xp-header span,
body[data-theme="neon-cosmos"] .small-label,
body[data-theme="neon-cosmos"] .card-heading span {
    color:
        #67e8f9 !important;
}

/* =========================================
   NEON COSMOS REAL BACKGROUND FX
========================================= */

body[data-theme="neon-cosmos"] {
    position: relative;
    overflow-x: hidden;
    background:
        linear-gradient(
            145deg,
            #020208,
            #070316,
            #03121c
        ) !important;
}

body[data-theme="neon-cosmos"] > *:not(.theme-background-effects) {
    position: relative;
    z-index: 2;
}

.theme-background-effects {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}


/* STAR LAYERS */

.cosmos-stars {
    position: absolute;

    inset: -20%;

    width: 140%;
    height: 140%;

    background-repeat: repeat;

    transform-origin: center;
}

.stars-one {
    opacity: .45;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.9) 1px,
            transparent 1.5px
        );

    background-size:
        42px 42px;

    animation:
        starsDriftOne 35s
        linear infinite;
}

.stars-two {
    opacity: .25;

    background-image:
        radial-gradient(
            circle,
            rgba(103,232,249,.95) 1px,
            transparent 2px
        );

    background-size:
        73px 73px;

    background-position:
        25px 35px;

    animation:
        starsDriftTwo 55s
        linear infinite;
}

@keyframes starsDriftOne {

    from {
        transform:
            translate3d(0,0,0)
            rotate(0deg);
    }

    to {
        transform:
            translate3d(-120px,-80px,0)
            rotate(.8deg);
    }
}

@keyframes starsDriftTwo {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(130px,-100px,0)
            scale(1.06);
    }
}


/* NEBULAS */

.cosmos-nebula {
    position: absolute;

    border-radius: 50%;

    filter:
        blur(75px);

    opacity: .5;

    will-change: transform;
}

.nebula-purple {
    width: 520px;
    height: 520px;

    left: -120px;
    top: 10%;

    background:
        radial-gradient(
            circle,
            #7c3aed 0%,
            rgba(124,58,237,.45) 35%,
            transparent 70%
        );

    animation:
        purpleNebulaMove 13s
        ease-in-out infinite alternate;
}

.nebula-cyan {
    width: 480px;
    height: 480px;

    right: -100px;
    top: 5%;

    background:
        radial-gradient(
            circle,
            #22d3ee 0%,
            rgba(34,211,238,.35) 35%,
            transparent 72%
        );

    animation:
        cyanNebulaMove 17s
        ease-in-out infinite alternate;
}

.nebula-blue {
    width: 550px;
    height: 550px;

    left: 35%;
    bottom: -260px;

    background:
        radial-gradient(
            circle,
            rgba(59,130,246,.8),
            rgba(76,29,149,.35) 42%,
            transparent 72%
        );

    animation:
        blueNebulaMove 20s
        ease-in-out infinite alternate;
}

@keyframes purpleNebulaMove {

    from {
        transform:
            translate3d(-40px,-20px,0)
            scale(.95);
    }

    to {
        transform:
            translate3d(110px,80px,0)
            scale(1.18);
    }
}

@keyframes cyanNebulaMove {

    from {
        transform:
            translate3d(30px,-30px,0)
            scale(1);
    }

    to {
        transform:
            translate3d(-130px,100px,0)
            scale(1.15);
    }
}

@keyframes blueNebulaMove {

    from {
        transform:
            translate3d(-70px,10px,0)
            scale(1);
    }

    to {
        transform:
            translate3d(100px,-100px,0)
            scale(1.22);
    }
}


/* PLANET */

.cosmos-planet {
    position: absolute;

    width: 145px;
    height: 145px;

    right: 8%;
    top: 42%;

    border-radius: 50%;

    opacity: .22;

    background:
        radial-gradient(
            circle at 35% 30%,
            #67e8f9,
            #4c1d95 45%,
            #070311 72%
        );

    box-shadow:
        -25px 20px 60px
        rgba(124,58,237,.5);

    animation:
        planetFloat 9s
        ease-in-out infinite alternate;
}

.cosmos-planet::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 45px;

    left: -23px;
    top: 52px;

    border:
        5px solid
        rgba(103,232,249,.22);

    border-radius: 50%;

    transform:
        rotate(-18deg);
}

@keyframes planetFloat {

    from {
        transform:
            translateY(-15px)
            rotate(-3deg);
    }

    to {
        transform:
            translateY(25px)
            rotate(4deg);
    }
}


/* SHOOTING STARS */

.shooting-star {
    position: absolute;

    width: 130px;
    height: 2px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0),
            rgba(103,232,249,.95)
        );

    box-shadow:
        0 0 9px
        rgba(103,232,249,.8);

    transform:
        rotate(-35deg);
}

.star-a {
    top: 15%;
    left: 75%;

    animation:
        shootingStar 8s
        linear infinite;
}

.star-b {
    top: 35%;
    left: 45%;

    animation:
        shootingStar 11s
        linear infinite 3s;
}

.star-c {
    top: 8%;
    left: 20%;

    animation:
        shootingStar 14s
        linear infinite 6s;
}

@keyframes shootingStar {

    0% {
        opacity: 0;

        transform:
            translate3d(0,0,0)
            rotate(-35deg);
    }

    5% {
        opacity: 1;
    }

    16% {
        opacity: 0;

        transform:
            translate3d(-380px,270px,0)
            rotate(-35deg);
    }

    100% {
        opacity: 0;
    }
}
/* =========================================
   EMERALD FOCUS — PRO THEME
========================================= */

body[data-theme="emerald-focus"] {
    position: relative;
    overflow-x: hidden;

    background:
        linear-gradient(
            145deg,
            #010806,
            #03150e,
            #06251a
        ) !important;
}


/* App always above effects */

body[data-theme="emerald-focus"]
> *:not(.theme-background-effects) {
    position: relative;
    z-index: 2;
}

/* ==================================================
   💎 EMERALD FOCUS — CRYSTAL SANCTUARY
================================================== */

body[data-theme="emerald-focus"] {
    position: relative;
    overflow-x: hidden;

    background:
        linear-gradient(
            145deg,
            #010604 0%,
            #03130d 40%,
            #05251a 72%,
            #071a13 100%
        ) !important;
}


body[data-theme="emerald-focus"]
> *:not(.theme-background-effects) {
    position: relative;
    z-index: 5;
}


/* ==================================================
   CRYSTAL WORLD
================================================== */

.emerald-effects {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(16,185,129,.08),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #010604,
            #03140e 45%,
            #052419
        );
}


/* ==================================================
   DEEP EMERALD ATMOSPHERE
================================================== */

.emerald-depth {
    position: absolute;
    inset: -20%;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(16,185,129,.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(45,212,191,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(5,150,105,.20),
            transparent 35%
        );

    filter:
        blur(30px);

    animation:
        emeraldDepthMove
        15s ease-in-out infinite alternate;
}


@keyframes emeraldDepthMove {

    from {
        transform:
            scale(1)
            translate3d(-2%, -2%, 0);
    }

    to {
        transform:
            scale(1.10)
            translate3d(4%, 3%, 0);
    }
}


/* ==================================================
   🎯 FOCUS CORE
================================================== */

.emerald-focus-core {
    position: absolute;

    width: 330px;
    height: 330px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;
}


.focus-center {
    position: absolute;

    width: 70px;
    height: 70px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(236,253,245,.85),
            rgba(110,231,183,.45) 25%,
            rgba(16,185,129,.16) 55%,
            transparent 75%
        );

    filter:
        blur(2px);

    box-shadow:
        0 0 30px rgba(110,231,183,.28),
        0 0 90px rgba(16,185,129,.20);

    animation:
        emeraldFocusBreath
        4s ease-in-out infinite;
}


@keyframes emeraldFocusBreath {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.90);

        opacity: .55;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.12);

        opacity: .9;
    }
}


/* ==================================================
   FOCUS RINGS
================================================== */

.focus-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border:
        1px solid
        rgba(110,231,183,.20);

    transform:
        translate(-50%, -50%);

    box-shadow:
        0 0 18px
        rgba(16,185,129,.05);
}


.focus-ring-1 {
    width: 130px;
    height: 130px;

    animation:
        emeraldRingPulse
        5s ease-out infinite;
}


.focus-ring-2 {
    width: 210px;
    height: 210px;

    animation:
        emeraldRingPulse
        5s ease-out infinite 1.5s;
}


.focus-ring-3 {
    width: 300px;
    height: 300px;

    animation:
        emeraldRingPulse
        5s ease-out infinite 3s;
}


@keyframes emeraldRingPulse {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.72);

        opacity: 0;
    }

    35% {
        opacity: .7;
    }

    100% {
        transform:
            translate(-50%, -50%)
            scale(1.18);

        opacity: 0;
    }
}


/* ==================================================
   💎 FLOATING EMERALD CRYSTALS
================================================== */

.emerald-crystal {
    position: absolute;

    width: 55px;
    height: 110px;

    clip-path:
        polygon(
            50% 0%,
            92% 25%,
            78% 82%,
            50% 100%,
            22% 82%,
            8% 25%
        );

    background:
        linear-gradient(
            120deg,
            rgba(236,253,245,.55) 0%,
            rgba(110,231,183,.42) 15%,
            rgba(16,185,129,.38) 42%,
            rgba(4,120,87,.48) 70%,
            rgba(6,78,59,.50) 100%
        );

    border:
        1px solid
        rgba(167,243,208,.35);

    filter:
        drop-shadow(
            0 0 12px
            rgba(16,185,129,.20)
        );

    opacity: .58;

    will-change:
        transform;
}


/* crystal inner reflection */

.emerald-crystal::before {
    content: "";

    position: absolute;

    width: 35%;
    height: 100%;

    left: 15%;
    top: 0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.42),
            rgba(110,231,183,.08),
            transparent
        );

    transform:
        skewX(-10deg);
}


.crystal-1 {
    left: 8%;
    top: 15%;

    transform:
        rotate(-18deg);

    animation:
        crystalFloatOne
        8s ease-in-out infinite alternate;
}


.crystal-2 {
    right: 10%;
    top: 20%;

    width: 40px;
    height: 85px;

    animation:
        crystalFloatTwo
        10s ease-in-out infinite alternate;
}


.crystal-3 {
    left: 18%;
    bottom: 13%;

    width: 38px;
    height: 78px;

    animation:
        crystalFloatThree
        11s ease-in-out infinite alternate;
}


.crystal-4 {
    right: 18%;
    bottom: 12%;

    width: 68px;
    height: 135px;

    opacity: .42;

    animation:
        crystalFloatOne
        13s ease-in-out infinite alternate-reverse;
}


.crystal-5 {
    left: 70%;
    top: 52%;

    width: 28px;
    height: 58px;

    opacity: .38;

    animation:
        crystalFloatTwo
        9s ease-in-out infinite alternate-reverse;
}


@keyframes crystalFloatOne {

    from {
        transform:
            translateY(15px)
            rotate(-15deg);
    }

    to {
        transform:
            translateY(-35px)
            translateX(18px)
            rotate(-5deg);
    }
}


@keyframes crystalFloatTwo {

    from {
        transform:
            translateY(-10px)
            rotate(12deg);
    }

    to {
        transform:
            translateY(35px)
            translateX(-18px)
            rotate(20deg);
    }
}


@keyframes crystalFloatThree {

    from {
        transform:
            translate3d(-10px,20px,0)
            rotate(-8deg);
    }

    to {
        transform:
            translate3d(22px,-30px,0)
            rotate(8deg);
    }
}


/* ==================================================
   ✨ EMERALD ENERGY PARTICLES
================================================== */

.emerald-particles {
    position: absolute;

    inset: -10%;

    background-repeat: repeat;
}


.particles-1 {
    opacity: .32;

    background-image:
        radial-gradient(
            circle,
            rgba(167,243,208,.85) 1px,
            transparent 2px
        );

    background-size:
        65px 65px;

    animation:
        emeraldParticlesOne
        28s linear infinite;
}


.particles-2 {
    opacity: .18;

    background-image:
        radial-gradient(
            circle,
            rgba(45,212,191,.9) 1px,
            transparent 2px
        );

    background-size:
        105px 105px;

    background-position:
        35px 50px;

    animation:
        emeraldParticlesTwo
        40s linear infinite;
}


@keyframes emeraldParticlesOne {

    from {
        transform:
            translateY(80px);
    }

    to {
        transform:
            translateY(-100px);
    }
}


@keyframes emeraldParticlesTwo {

    from {
        transform:
            translate3d(0,70px,0);
    }

    to {
        transform:
            translate3d(60px,-100px,0);
    }
}


/* ==================================================
   🔺 CRYSTAL REFRACTION BEAMS
================================================== */

.emerald-refraction {
    position: absolute;

    width: 280px;
    height: 150vh;

    top: -25vh;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110,231,183,.03),
            rgba(236,253,245,.08),
            rgba(45,212,191,.04),
            transparent
        );

    filter:
        blur(5px);

    transform:
        rotate(18deg);
}


.refraction-1 {
    left: -35%;

    animation:
        emeraldRefraction
        13s ease-in-out infinite;
}


.refraction-2 {
    left: -55%;

    opacity: .55;

    animation:
        emeraldRefraction
        17s ease-in-out infinite 5s;
}


@keyframes emeraldRefraction {

    0% {
        left: -40%;
    }

    45% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}


/* ==================================================
   FLOOR / SANCTUARY GLOW
================================================== */

.emerald-floor-glow {
    position: absolute;

    width: 100%;
    height: 35%;

    left: 0;
    bottom: -12%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(16,185,129,.20),
            rgba(5,150,105,.07) 40%,
            transparent 72%
        );

    filter:
        blur(25px);

    animation:
        emeraldFloorPulse
        6s ease-in-out infinite alternate;
}


@keyframes emeraldFloorPulse {

    from {
        opacity: .5;

        transform:
            scaleX(.9);
    }

    to {
        opacity: .9;

        transform:
            scaleX(1.1);
    }
}


/* ==================================================
   💎 CRYSTAL CARDS
================================================== */

body[data-theme="emerald-focus"] .stat-card,
body[data-theme="emerald-focus"] .xp-card,
body[data-theme="emerald-focus"] .habit-card,
body[data-theme="emerald-focus"] .rank-card,
body[data-theme="emerald-focus"] .routine-section,
body[data-theme="emerald-focus"] .today-card,
body[data-theme="emerald-focus"] .routine-progress-card,
body[data-theme="emerald-focus"] .week-card,
body[data-theme="emerald-focus"] .analysis-card,
body[data-theme="emerald-focus"] .week-range-card,
body[data-theme="emerald-focus"] .weekly-message-card,
body[data-theme="emerald-focus"] .ai-analysis-card {

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(7,48,34,.68),
            rgba(2,24,17,.76)
        ) !important;

    border:
        1px solid
        rgba(110,231,183,.20)
        !important;

    backdrop-filter:
        blur(18px)
        saturate(125%);

    box-shadow:
        inset 0 1px 0
        rgba(167,243,208,.09),

        0 16px 40px
        rgba(0,0,0,.30),

        0 0 20px
        rgba(16,185,129,.04);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* crystal reflection */

body[data-theme="emerald-focus"]
.stat-card::after,

body[data-theme="emerald-focus"]
.habit-card::after,

body[data-theme="emerald-focus"]
.rank-card::after {

    content: "";

    position: absolute;

    width: 40%;
    height: 180%;

    left: -70%;
    top: -40%;

    transform:
        rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(167,243,208,.12),
            transparent
        );

    transition:
        left .75s ease;
}


body[data-theme="emerald-focus"]
.stat-card:hover::after,

body[data-theme="emerald-focus"]
.habit-card:hover::after,

body[data-theme="emerald-focus"]
.rank-card:hover::after {

    left: 135%;
}


body[data-theme="emerald-focus"]
.stat-card:hover,

body[data-theme="emerald-focus"]
.habit-card:hover,

body[data-theme="emerald-focus"]
.rank-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(110,231,183,.42)
        !important;

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.34),

        0 0 26px
        rgba(16,185,129,.14);
}


/* ==================================================
   FOCUS PROGRESS
================================================== */

body[data-theme="emerald-focus"]
.xp-fill,

body[data-theme="emerald-focus"]
.progress-fill {

    background:
        linear-gradient(
            90deg,
            #047857,
            #10b981,
            #6ee7b7,
            #2dd4bf,
            #10b981
        ) !important;

    background-size:
        300% 100%;

    box-shadow:
        0 0 16px
        rgba(16,185,129,.38);

    animation:
        emeraldCrystalFlow
        4s linear infinite;
}


@keyframes emeraldCrystalFlow {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            300% 50%;
    }
}


/* ==================================================
   TOPBAR
================================================== */

body[data-theme="emerald-focus"]
.topbar {

    background:
        rgba(2,18,13,.76)
        !important;

    border-bottom:
        1px solid
        rgba(110,231,183,.16)
        !important;

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.26);
}


/* ==================================================
   BUTTONS
================================================== */

body[data-theme="emerald-focus"]
.create-habit-btn,

body[data-theme="emerald-focus"]
.save-task-btn,

body[data-theme="emerald-focus"]
.add-task-btn {

    background:
        linear-gradient(
            135deg,
            #047857,
            #10b981,
            #2dd4bf
        ) !important;

    background-size:
        200% 200%;

    color:
        white !important;

    border:
        1px solid
        rgba(167,243,208,.18);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12),

        0 9px 26px
        rgba(16,185,129,.20);

    animation:
        emeraldButtonFlow
        5s ease infinite;
}


@keyframes emeraldButtonFlow {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


/* ==================================================
   RADIAL MENU
================================================== */

body[data-theme="emerald-focus"]
.radial-toggle {

    background:
        linear-gradient(
            135deg,
            #047857,
            #10b981,
            #5eead4
        ) !important;

    box-shadow:
        0 10px 32px
        rgba(0,0,0,.34),

        0 0 26px
        rgba(16,185,129,.28)
        !important;
}


body[data-theme="emerald-focus"]
.radial-item {

    background:
        rgba(4,38,27,.92)
        !important;

    border:
        1px solid
        rgba(110,231,183,.20)
        !important;

    backdrop-filter:
        blur(16px);
}


body[data-theme="emerald-focus"]
.radial-item:hover {

    background:
        rgba(5,72,51,.96)
        !important;

    border-color:
        rgba(110,231,183,.40)
        !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.30),

        0 0 20px
        rgba(16,185,129,.22);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .emerald-focus-core {
        width: 240px;
        height: 240px;

        opacity: .75;
    }

    .focus-ring-1 {
        width: 100px;
        height: 100px;
    }

    .focus-ring-2 {
        width: 160px;
        height: 160px;
    }

    .focus-ring-3 {
        width: 220px;
        height: 220px;
    }

    .crystal-4,
    .crystal-5 {
        opacity: .25;
    }

    .emerald-refraction {
        opacity: .60;
    }

    .particles-2 {
        opacity: .10;
    }
}
/* ==================================================
   🌅 SUNSET PULSE — CINEMATIC SUNSET WORLD
================================================== */

body[data-theme="sunset-pulse"] {
    position: relative;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            #080617 0%,
            #17102d 28%,
            #481b45 58%,
            #a83d4d 78%,
            #ef6a3a 100%
        ) !important;
}


/* CONTENT ABOVE SCENE */

body[data-theme="sunset-pulse"]
> *:not(.theme-background-effects) {
    position: relative;
    z-index: 5;
}


/* ==================================================
   WHOLE SUNSET WORLD
================================================== */

.sunset-effects {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

    background:
        linear-gradient(
            180deg,
            #080617 0%,
            #17102d 30%,
            #4a1d47 60%,
            #a93f50 80%,
            #ef7040 100%
        );
}


/* ==================================================
   SLOW MOVING SKY
================================================== */

.sunset-sky {
    position: absolute;
    inset: -15%;

    background:
        radial-gradient(
            circle at 50% 75%,
            rgba(255,183,77,.25),
            transparent 35%
        ),
        radial-gradient(
            circle at 20% 45%,
            rgba(236,72,153,.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 35%,
            rgba(126,34,206,.15),
            transparent 35%
        );

    animation:
        sunsetSkyBreath
        12s ease-in-out infinite alternate;
}


@keyframes sunsetSkyBreath {

    from {
        transform:
            scale(1);
    }

    to {
        transform:
            scale(1.08)
            translateY(-2%);
    }
}


/* ==================================================
   EVENING STARS
================================================== */

.sunset-stars {
    position: absolute;

    inset: 0;

    opacity: .25;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.8) 1px,
            transparent 1.5px
        );

    background-size:
        75px 75px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 55%
        );

    animation:
        sunsetStarsMove
        40s linear infinite;
}


@keyframes sunsetStarsMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            150px 75px;
    }
}


/* ==================================================
   ☀️ ACTUAL SUN
================================================== */

.sunset-sun {
    position: absolute;

    width: 180px;
    height: 180px;

    left: 50%;
    top: 62%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    animation:
        sunsetSunFloat
        6s ease-in-out infinite alternate;
}


.sun-core {
    position: absolute;
    inset: 20px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 35%,
            #fffbd5 0%,
            #ffd166 25%,
            #ff8c42 58%,
            #ff4d6d 100%
        );

    box-shadow:
        0 0 25px
        rgba(255,210,100,.9),

        0 0 70px
        rgba(255,120,70,.7),

        0 0 140px
        rgba(255,70,100,.45);

    animation:
        sunPulse
        3.5s ease-in-out infinite;
}


@keyframes sunsetSunFloat {

    from {
        transform:
            translate(-50%, -50%)
            translateY(-6px);
    }

    to {
        transform:
            translate(-50%, -50%)
            translateY(8px);
    }
}


@keyframes sunPulse {

    0%,
    100% {
        transform:
            scale(1);

        box-shadow:
            0 0 25px
            rgba(255,210,100,.85),

            0 0 70px
            rgba(255,120,70,.65),

            0 0 130px
            rgba(255,70,100,.38);
    }

    50% {
        transform:
            scale(1.06);

        box-shadow:
            0 0 35px
            rgba(255,230,130,1),

            0 0 95px
            rgba(255,120,70,.85),

            0 0 180px
            rgba(255,70,100,.55);
    }
}


/* ==================================================
   SUN ENERGY RINGS
================================================== */

.sun-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,180,100,.25);
}


.ring-1 {
    inset: -25px;

    animation:
        sunsetRingPulse
        4s ease-out infinite;
}


.ring-2 {
    inset: -55px;

    animation:
        sunsetRingPulse
        4s ease-out infinite 1.5s;
}


@keyframes sunsetRingPulse {

    0% {
        transform:
            scale(.8);

        opacity: 0;
    }

    30% {
        opacity: .6;
    }

    100% {
        transform:
            scale(1.35);

        opacity: 0;
    }
}


/* ==================================================
   SUN RAYS
================================================== */

.sun-rays {
    position: absolute;

    width: 800px;
    height: 600px;

    left: 50%;
    top: 62%;

    transform:
        translate(-50%, -50%);

    background:
        conic-gradient(
            from 0deg,
            transparent,
            rgba(255,190,100,.07),
            transparent 12%,
            transparent 25%,
            rgba(255,150,90,.06),
            transparent 38%,
            transparent 55%,
            rgba(255,190,120,.05),
            transparent 68%
        );

    filter:
        blur(10px);

    animation:
        rotateSunRays
        45s linear infinite;
}


@keyframes rotateSunRays {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* ==================================================
   ☁️ CLOUD SYSTEM
================================================== */

.sunset-cloud {
    position: absolute;

    height: 55px;

    border-radius:
        50px;

    filter:
        blur(12px);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20,10,35,.55),
            rgba(45,20,55,.65),
            transparent
        );
}


.cloud-1 {
    width: 420px;

    top: 32%;
    left: -450px;

    opacity: .65;

    animation:
        cloudMoveOne
        30s linear infinite;
}


.cloud-2 {
    width: 550px;

    top: 48%;
    right: -600px;

    opacity: .50;

    animation:
        cloudMoveTwo
        40s linear infinite;
}


.cloud-3 {
    width: 300px;

    top: 20%;
    left: -350px;

    opacity: .35;

    animation:
        cloudMoveOne
        45s linear infinite 8s;
}


@keyframes cloudMoveOne {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(100vw + 900px)
            );
    }
}


@keyframes cloudMoveTwo {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(
                calc(-100vw - 1100px)
            );
    }
}


/* ==================================================
   HORIZON
================================================== */

.sunset-horizon-line {
    position: absolute;

    width: 100%;
    height: 3px;

    left: 0;
    top: 72%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,180,100,.5),
            rgba(255,220,140,.8),
            rgba(255,180,100,.5),
            transparent
        );

    box-shadow:
        0 0 20px
        rgba(255,120,80,.6),

        0 0 60px
        rgba(255,80,100,.35);

    animation:
        horizonGlow
        4s ease-in-out infinite alternate;
}


@keyframes horizonGlow {

    from {
        opacity: .45;
    }

    to {
        opacity: .9;
    }
}


/* ==================================================
   MOUNTAIN SILHOUETTES
================================================== */

.sunset-mountains {
    position: absolute;

    width: 120%;
    left: -10%;

    clip-path:
        polygon(
            0 100%,
            0 75%,
            8% 55%,
            15% 72%,
            25% 40%,
            34% 68%,
            45% 35%,
            54% 65%,
            65% 42%,
            76% 70%,
            86% 48%,
            100% 72%,
            100% 100%
        );
}


.mountains-back {
    height: 260px;

    bottom: 0;

    opacity: .40;

    background:
        #311737;

    filter:
        blur(3px);

    animation:
        mountainsBackMove
        20s ease-in-out infinite alternate;
}


.mountains-front {
    height: 200px;

    bottom: -10px;

    opacity: .78;

    background:
        linear-gradient(
            180deg,
            #211027,
            #09070e
        );

    animation:
        mountainsFrontMove
        24s ease-in-out infinite alternate;
}


@keyframes mountainsBackMove {

    from {
        transform:
            translateX(-1%);
    }

    to {
        transform:
            translateX(2%);
    }
}


@keyframes mountainsFrontMove {

    from {
        transform:
            translateX(1%);
    }

    to {
        transform:
            translateX(-2%);
    }
}


/* ==================================================
   HORIZON HAZE
================================================== */

.sunset-haze {
    position: absolute;

    width: 120%;
    height: 240px;

    left: -10%;
    top: 60%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,105,80,.12),
            rgba(255,70,100,.08),
            transparent
        );

    filter:
        blur(25px);

    animation:
        hazeMove
        8s ease-in-out infinite alternate;
}


@keyframes hazeMove {

    from {
        transform:
            translateY(-8px);
    }

    to {
        transform:
            translateY(18px);
    }
}


/* ==================================================
   🌅 SUNSET CARDS
================================================== */

body[data-theme="sunset-pulse"] .stat-card,
body[data-theme="sunset-pulse"] .xp-card,
body[data-theme="sunset-pulse"] .habit-card,
body[data-theme="sunset-pulse"] .rank-card,
body[data-theme="sunset-pulse"] .routine-section,
body[data-theme="sunset-pulse"] .today-card,
body[data-theme="sunset-pulse"] .routine-progress-card,
body[data-theme="sunset-pulse"] .week-card,
body[data-theme="sunset-pulse"] .analysis-card,
body[data-theme="sunset-pulse"] .week-range-card,
body[data-theme="sunset-pulse"] .weekly-message-card,
body[data-theme="sunset-pulse"] .ai-analysis-card {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(70,30,58,.60),
            rgba(22,14,38,.72)
        ) !important;

    border:
        1px solid
        rgba(255,130,100,.22)
        !important;

    backdrop-filter:
        blur(20px);

    box-shadow:
        inset 0 1px 0
        rgba(255,200,170,.06),

        0 16px 40px
        rgba(0,0,0,.30),

        0 0 20px
        rgba(255,90,100,.05);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


body[data-theme="sunset-pulse"]
.stat-card:hover,

body[data-theme="sunset-pulse"]
.habit-card:hover,

body[data-theme="sunset-pulse"]
.rank-card:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(255,160,110,.48)
        !important;

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.34),

        0 0 25px
        rgba(255,100,100,.15);
}


/* ==================================================
   PROGRESS — SUNSET FLOW
================================================== */

body[data-theme="sunset-pulse"]
.xp-fill,

body[data-theme="sunset-pulse"]
.progress-fill {

    background:
        linear-gradient(
            90deg,
            #ffd166,
            #fb923c,
            #f43f5e,
            #ec4899,
            #a855f7
        ) !important;

    background-size:
        300% 100%;

    box-shadow:
        0 0 16px
        rgba(255,100,100,.40);

    animation:
        sunsetProgressFlow
        4s linear infinite;
}


@keyframes sunsetProgressFlow {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            300% 50%;
    }
}


/* ==================================================
   BUTTONS
================================================== */

body[data-theme="sunset-pulse"]
.create-habit-btn,

body[data-theme="sunset-pulse"]
.save-task-btn,

body[data-theme="sunset-pulse"]
.add-task-btn {

    background:
        linear-gradient(
            135deg,
            #fb923c,
            #f43f5e,
            #ec4899
        ) !important;

    background-size:
        200% 200%;

    color:
        white !important;

    box-shadow:
        0 8px 25px
        rgba(244,63,94,.25);

    animation:
        sunsetButtonPulse
        5s ease infinite;
}


@keyframes sunsetButtonPulse {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }
}


/* ==================================================
   RADIAL MENU
================================================== */

body[data-theme="sunset-pulse"]
.radial-toggle {

    background:
        linear-gradient(
            135deg,
            #ff9f43,
            #f43f5e,
            #c026d3
        ) !important;

    box-shadow:
        0 10px 32px
        rgba(0,0,0,.35),

        0 0 28px
        rgba(244,63,94,.32)
        !important;
}


body[data-theme="sunset-pulse"]
.radial-item {

    background:
        rgba(48,20,43,.92)
        !important;

    border:
        1px solid
        rgba(255,130,110,.24)
        !important;

    backdrop-filter:
        blur(16px);
}


body[data-theme="sunset-pulse"]
.radial-item:hover {

    background:
        rgba(90,32,64,.95)
        !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.32),

        0 0 20px
        rgba(244,114,182,.25);
}


/* ==================================================
   TOPBAR
================================================== */

body[data-theme="sunset-pulse"]
.topbar {

    background:
        rgba(15,8,27,.78)
        !important;

    border-bottom:
        1px solid
        rgba(255,120,100,.18)
        !important;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.25);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .sunset-sun {
        width: 130px;
        height: 130px;

        top: 67%;
    }

    .sun-rays {
        width: 500px;
        height: 500px;

        top: 67%;
    }

    .sunset-horizon-line {
        top: 76%;
    }

    .sunset-cloud {
        filter:
            blur(10px);
    }

    .mountains-back {
        height: 190px;
    }

    .mountains-front {
        height: 150px;
    }

    .sunset-stars {
        opacity: .18;
    }
}
/* ==================================================
   🫧 LIQUID GLASS — FLUID GLASS WORLD
================================================== */

body[data-theme="liquid-glass"] {
    position: relative;
    overflow-x: hidden;

    background:
        linear-gradient(
            145deg,
            #07101f,
            #101b36,
            #182a42,
            #18253d
        ) !important;
}


/* CONTENT ABOVE EFFECTS */

body[data-theme="liquid-glass"]
> *:not(.theme-background-effects) {
    position: relative;
    z-index: 5;
}


/* ==================================================
   LIQUID WORLD
================================================== */

.liquid-effects {
    position: fixed;
    inset: 0;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;

    background:
        linear-gradient(
            145deg,
            #07101f,
            #111a36 35%,
            #172a45 65%,
            #14253a
        );
}


/* ==================================================
   MOVING AMBIENT LIGHT
================================================== */

.liquid-ambient {
    position: absolute;

    inset: -30%;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(56,189,248,.30),
            transparent 27%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(192,132,252,.26),
            transparent 28%
        ),
        radial-gradient(
            circle at 55% 85%,
            rgba(45,212,191,.24),
            transparent 30%
        );

    filter:
        blur(50px);

    animation:
        liquidAmbientMove
        15s ease-in-out infinite alternate;
}


@keyframes liquidAmbientMove {

    from {
        transform:
            translate3d(-3%, -2%, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(6%, 5%, 0)
            scale(1.12)
            rotate(3deg);
    }
}


/* ==================================================
   LIQUID BLOBS
================================================== */

.liquid-blob {
    position: absolute;

    border-radius:
        42% 58% 65% 35% /
        45% 38% 62% 55%;

    filter:
        blur(3px);

    opacity: .55;

    backdrop-filter:
        blur(10px);

    border:
        1px solid
        rgba(255,255,255,.16);

    box-shadow:
        inset 20px 20px 45px
        rgba(255,255,255,.07),

        inset -20px -20px 45px
        rgba(0,0,0,.12),

        0 25px 70px
        rgba(0,0,0,.18);

    will-change:
        transform,
        border-radius;
}


.liquid-blob-1 {
    width: 380px;
    height: 380px;

    left: -90px;
    top: 10%;

    background:
        linear-gradient(
            145deg,
            rgba(56,189,248,.20),
            rgba(192,132,252,.10)
        );

    animation:
        liquidBlobOne
        12s ease-in-out infinite alternate;
}


.liquid-blob-2 {
    width: 330px;
    height: 330px;

    right: -70px;
    top: 35%;

    background:
        linear-gradient(
            145deg,
            rgba(192,132,252,.20),
            rgba(244,114,182,.10)
        );

    animation:
        liquidBlobTwo
        15s ease-in-out infinite alternate;
}


.liquid-blob-3 {
    width: 450px;
    height: 450px;

    left: 35%;
    bottom: -270px;

    background:
        linear-gradient(
            145deg,
            rgba(45,212,191,.18),
            rgba(56,189,248,.12)
        );

    animation:
        liquidBlobThree
        18s ease-in-out infinite alternate;
}


@keyframes liquidBlobOne {

    from {
        transform:
            translate3d(-30px,-20px,0)
            rotate(-8deg)
            scale(.95);

        border-radius:
            42% 58% 65% 35% /
            45% 38% 62% 55%;
    }

    to {
        transform:
            translate3d(130px,100px,0)
            rotate(12deg)
            scale(1.12);

        border-radius:
            60% 40% 35% 65% /
            38% 62% 42% 58%;
    }
}


@keyframes liquidBlobTwo {

    from {
        transform:
            translate3d(30px,-30px,0)
            rotate(10deg);

        border-radius:
            60% 40% 55% 45% /
            35% 55% 45% 65%;
    }

    to {
        transform:
            translate3d(-140px,100px,0)
            rotate(-12deg)
            scale(1.15);

        border-radius:
            38% 62% 40% 60% /
            60% 40% 65% 35%;
    }
}


@keyframes liquidBlobThree {

    from {
        transform:
            translate3d(-100px,20px,0)
            rotate(-5deg);
    }

    to {
        transform:
            translate3d(120px,-120px,0)
            rotate(10deg)
            scale(1.18);
    }
}


/* ==================================================
   🫧 GLASS BUBBLES
================================================== */

.glass-bubble {
    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.32),
            rgba(255,255,255,.08) 25%,
            rgba(125,211,252,.05) 55%,
            rgba(255,255,255,.02) 75%
        );

    border:
        1px solid
        rgba(255,255,255,.22);

    backdrop-filter:
        blur(8px);

    box-shadow:
        inset -12px -15px 25px
        rgba(56,189,248,.08),

        inset 8px 8px 18px
        rgba(255,255,255,.10),

        0 15px 40px
        rgba(0,0,0,.15);

    animation:
        glassBubbleFloat
        8s ease-in-out infinite alternate;
}


.glass-bubble::before {
    content: "";

    position: absolute;

    width: 28%;
    height: 18%;

    left: 20%;
    top: 16%;

    border-radius: 50%;

    background:
        rgba(255,255,255,.25);

    filter:
        blur(3px);

    transform:
        rotate(-35deg);
}


.glass-bubble-1 {
    width: 90px;
    height: 90px;

    left: 12%;
    top: 18%;
}


.glass-bubble-2 {
    width: 55px;
    height: 55px;

    right: 18%;
    top: 22%;

    animation-delay:
        -2s;
}


.glass-bubble-3 {
    width: 125px;
    height: 125px;

    right: 8%;
    bottom: 16%;

    animation-delay:
        -4s;
}


.glass-bubble-4 {
    width: 65px;
    height: 65px;

    left: 25%;
    bottom: 12%;

    animation-delay:
        -6s;
}


@keyframes glassBubbleFloat {

    from {
        transform:
            translateY(20px)
            translateX(-8px)
            rotate(-3deg);
    }

    to {
        transform:
            translateY(-35px)
            translateX(15px)
            rotate(5deg);
    }
}


/* ==================================================
   LIQUID RIPPLES
================================================== */

.liquid-ripple {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(125,211,252,.16);

    box-shadow:
        0 0 35px
        rgba(125,211,252,.05);

    opacity: 0;
}


.ripple-1 {
    width: 250px;
    height: 250px;

    left: 18%;
    top: 48%;

    animation:
        liquidRipple
        7s ease-out infinite;
}


.ripple-2 {
    width: 180px;
    height: 180px;

    right: 15%;
    top: 18%;

    animation:
        liquidRipple
        8s ease-out infinite 3s;
}


@keyframes liquidRipple {

    0% {
        transform:
            scale(.35);

        opacity: 0;
    }

    25% {
        opacity: .45;
    }

    100% {
        transform:
            scale(1.8);

        opacity: 0;
    }
}


/* ==================================================
   REFRACTION LIGHT BEAM
================================================== */

.glass-light-beam {
    position: absolute;

    width: 22vw;
    min-width: 220px;

    height: 160vh;

    left: -35vw;
    top: -30vh;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125,211,252,.03),
            rgba(255,255,255,.09),
            rgba(192,132,252,.05),
            transparent
        );

    filter:
        blur(6px);

    animation:
        glassBeamMove
        11s ease-in-out infinite;
}


@keyframes glassBeamMove {

    0% {
        left: -40vw;
    }

    48% {
        left: 120vw;
    }

    100% {
        left: 120vw;
    }
}


/* ==================================================
   🪟 TRUE GLASS CARDS
================================================== */

body[data-theme="liquid-glass"] .stat-card,
body[data-theme="liquid-glass"] .xp-card,
body[data-theme="liquid-glass"] .habit-card,
body[data-theme="liquid-glass"] .rank-card,
body[data-theme="liquid-glass"] .routine-section,
body[data-theme="liquid-glass"] .today-card,
body[data-theme="liquid-glass"] .routine-progress-card,
body[data-theme="liquid-glass"] .week-card,
body[data-theme="liquid-glass"] .analysis-card,
body[data-theme="liquid-glass"] .week-range-card,
body[data-theme="liquid-glass"] .weekly-message-card,
body[data-theme="liquid-glass"] .ai-analysis-card {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.105),
            rgba(255,255,255,.035)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.20)
        !important;

    backdrop-filter:
        blur(24px)
        saturate(145%);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.20),

        inset 0 -1px 0
        rgba(255,255,255,.04),

        0 18px 45px
        rgba(0,0,0,.22);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* Glass reflection */

body[data-theme="liquid-glass"]
.stat-card::after,

body[data-theme="liquid-glass"]
.habit-card::after,

body[data-theme="liquid-glass"]
.rank-card::after {

    content: "";

    position: absolute;

    width: 55%;
    height: 180%;

    left: -90%;
    top: -40%;

    transform:
        rotate(25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.13),
            transparent
        );

    transition:
        left .75s ease;
}


body[data-theme="liquid-glass"]
.stat-card:hover::after,

body[data-theme="liquid-glass"]
.habit-card:hover::after,

body[data-theme="liquid-glass"]
.rank-card:hover::after {

    left: 140%;
}


body[data-theme="liquid-glass"]
.stat-card:hover,

body[data-theme="liquid-glass"]
.habit-card:hover,

body[data-theme="liquid-glass"]
.rank-card:hover {

    transform:
        translateY(-5px)
        scale(1.01);

    border-color:
        rgba(255,255,255,.34)
        !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.25),

        0 22px 55px
        rgba(0,0,0,.26),

        0 0 25px
        rgba(125,211,252,.10);
}


/* ==================================================
   LIQUID PROGRESS
================================================== */

body[data-theme="liquid-glass"]
.xp-fill,

body[data-theme="liquid-glass"]
.progress-fill {

    position: relative;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #67e8f9,
            #c084fc,
            #5eead4
        ) !important;

    background-size:
        300% 100%;

    box-shadow:
        0 0 16px
        rgba(125,211,252,.40);

    animation:
        liquidProgress
        4s linear infinite;
}


@keyframes liquidProgress {

    from {
        background-position:
            0% 50%;
    }

    to {
        background-position:
            300% 50%;
    }
}


/* ==================================================
   GLASS TOPBAR
================================================== */

body[data-theme="liquid-glass"]
.topbar {

    background:
        rgba(10,20,40,.45)
        !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.15)
        !important;

    backdrop-filter:
        blur(28px)
        saturate(150%);

    box-shadow:
        inset 0 -1px 0
        rgba(255,255,255,.05),

        0 10px 35px
        rgba(0,0,0,.18);
}


/* ==================================================
   GLASS BUTTONS
================================================== */

body[data-theme="liquid-glass"]
.create-habit-btn,

body[data-theme="liquid-glass"]
.save-task-btn,

body[data-theme="liquid-glass"]
.add-task-btn {

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.75),
            rgba(192,132,252,.70)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.22);

    backdrop-filter:
        blur(14px);

    color:
        white !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.20),

        0 10px 25px
        rgba(56,189,248,.15);
}


/* ==================================================
   GLASS RADIAL MENU
================================================== */

body[data-theme="liquid-glass"]
.radial-toggle {

    background:
        linear-gradient(
            135deg,
            rgba(56,189,248,.85),
            rgba(192,132,252,.80)
        ) !important;

    border:
        1px solid
        rgba(255,255,255,.25);

    backdrop-filter:
        blur(18px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.25),

        0 10px 30px
        rgba(0,0,0,.28),

        0 0 24px
        rgba(125,211,252,.20)
        !important;
}


body[data-theme="liquid-glass"]
.radial-item {

    background:
        rgba(255,255,255,.09)
        !important;

    border:
        1px solid
        rgba(255,255,255,.20)
        !important;

    backdrop-filter:
        blur(22px)
        saturate(140%);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12),

        0 10px 25px
        rgba(0,0,0,.20);
}


body[data-theme="liquid-glass"]
.radial-item:hover {

    background:
        rgba(255,255,255,.15)
        !important;

    border-color:
        rgba(255,255,255,.34)
        !important;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.24),

        0 0 18px
        rgba(125,211,252,.14);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 700px) {

    .liquid-blob {
        opacity: .40;
    }

    .liquid-blob-1 {
        width: 280px;
        height: 280px;
    }

    .liquid-blob-2 {
        width: 250px;
        height: 250px;
    }

    .glass-bubble-3 {
        width: 90px;
        height: 90px;
    }

    .glass-light-beam {
        opacity: .65;
    }

}