/* =====================================================
        AURORA NEXUS v1.0
        Neural Audio Experience
        Developed by Masum Billah

        ----------style.css — Part 1 (Foundation + Background + Header + AI Status)-------------
        ✔ CSS Reset ✔ Root Variables ✔ Futuristic Color Theme 
        ✔ Animated Background Grid ✔ Neon Glow Animation ✔ Glassmorphism App Container 
        ✔ Aurora Nexus Header ✔ AI Status Panel ✔ Pulse Animation
===================================================== */

/* =====================================================
                    GOOGLE FONT
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

/* =====================================================
                    ROOT VARIABLES
===================================================== */



/*=========================================================
                AURORA THEME ENGINE
=========================================================*/

:root {

    --accent: #00F5FF;
    --accent-light: #7CF8FF;
    --accent-dark: #009FB5;

    --glow: 0 0 15px var(--accent);

    --glow-strong:
        0 0 10px var(--accent),
        0 0 25px var(--accent);

    --panel-border:
        rgba(0, 245, 255, .18);

    --panel-bg:
        rgba(255, 255, 255, .05);


    --player-glow: 0 0 20px var(--accent);
    
    --player-shadow:
        0 0 10px var(--accent),
        0 0 25px var(--accent);

    --progress-color: var(--accent);

    --visualizer-color: var(--accent);

    --lyrics-color: var(--accent);

    --button-glow: var(--accent);

}

:root {

    --bg: #050816;
    --surface: #0F172A;
    --card: rgba(255, 255, 255, .08);

    --cyan: var(--accent);
    --purple: #7C3AED;
    --green: #00FFA3;
    --red: #FF4D6D;

    --text: #F8FAFC;
    --text-light: #94A3B8;

    --border: rgba(255, 255, 255, .12);

    --shadow: 0 20px 60px rgba(0, 0, 0, .55);

}

/* =====================================================
                        RESET
===================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Outfit', sans-serif;

    color: var(--text);

    background: var(--bg);

    overflow-x: hidden;

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

}

/* =====================================================
                    BACKGROUND GRID
===================================================== */

.background-grid {

    position: fixed;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);

    background-size: 45px 45px;

    z-index: -5;

}

/* =====================================================
                    BACKGROUND GLOW
===================================================== */

.background-glow {

    position: fixed;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    filter: blur(160px);

    opacity: .35;

    z-index: -4;

}

.glow-one {

    background: var(--cyan);

    top: -120px;

    left: -120px;

    animation: moveGlow1 12s infinite alternate ease-in-out;

}

.glow-two {

    background: var(--purple);

    bottom: -150px;

    right: -120px;

    animation: moveGlow2 15s infinite alternate ease-in-out;

}

@keyframes moveGlow1 {

    from {

        transform: translate(0, 0);

    }

    to {

        transform: translate(180px, 140px);

    }

}

@keyframes moveGlow2 {

    from {

        transform: translate(0, 0);

    }

    to {

        transform: translate(-160px, -140px);

    }

}

/* =====================================================
                    MAIN APP
===================================================== */

.app {

    width: 100%;
    max-width: 470px;
    padding: 35px;
    padding-bottom: 140px;
    border-radius: 30px;

    background: rgba(15, 23, 42, .78);

    backdrop-filter: blur(25px);

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    position: relative;

    overflow: hidden;

}

/* =====================================================
                    TOP LIGHT
===================================================== */

.app::before {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    background: var(--cyan);

    filter: blur(120px);

    top: -120px;

    right: -120px;

    opacity: .15;

}




/* =====================================================
                    HEADER
===================================================== */

.header {

    text-align: center;

    margin-bottom: 35px;

}

.logo h1 {

    font-family: 'Orbitron', sans-serif;

    font-size: 34px;

    font-weight: 800;

    color: var(--cyan);

    letter-spacing: 3px;

    text-shadow:

        0 0 15px rgba(0, 245, 255, .6);

}

.logo p {

    margin-top: 10px;

    color: var(--text-light);

    letter-spacing: 2px;

    font-size: 14px;

    text-transform: uppercase;

}



/* =====================================================
                    AI STATUS
===================================================== */

.ai-status {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    padding: 18px;

    margin-bottom: 35px;

    border-radius: 18px;

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

    border: 1px solid var(--border);

}

.status-indicator {

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--green);

    box-shadow:

        0 0 15px var(--green),

        0 0 35px var(--green);

    animation: pulse 1.5s infinite;

}

.status-info h3 {

    font-family: 'Orbitron', sans-serif;

    font-size: 14px;

    letter-spacing: 2px;

}

.status-info p {

    color: var(--green);

    font-size: 15px;

    margin-top: 4px;

}

/*====================================
        HOVER
=====================================*/

.ai-status:hover {

    color: #fff;

    border-color: #3d0fe2;

    background:

        linear-gradient(135deg,
            rgba(255, 60, 120, .22),
            rgba(120, 0, 50, .12));

    box-shadow:

        0 0 12px #71159c,

        0 0 30px rgba(134, 49, 214, 0.35);

    transform:

        translateY(-2px) scale(1.02);

}


@keyframes pulse {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.4);

        opacity: .6;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

} 


/* =====================================================
                    ✅ Part 2 Complete 
💿 Holographic Album 🔄 Rotating Ring 🎵 Animated Album 🌊 Floating Animation 
📈 Modern Progress Bar 🎮 Premium Control Buttons ✨ Neon Hover Effect
=====================================================*/

/* =====================================================
                    ALBUM SECTION
===================================================== */

.album-section {

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 35px;

}

.album-ring {

    width: 260px;

    height: 260px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

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

    border: 2px solid rgba(0, 245, 255, .25);

    box-shadow:

        0 0 30px rgba(0, 245, 255, .25),

        inset 0 0 30px rgba(0, 245, 255, .12);

    animation: floatAlbum 5s ease-in-out infinite;

}

/* Outer Rotating Ring */

.album-ring::before {

    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    border: 2px dashed rgba(0, 245, 255, .5);

    animation: rotateRing 14s linear infinite;

}

/* Inner Ring */

.album-ring::after {

    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 50%;

    border: 1px solid rgba(124, 58, 237, .5);

}

#album-cover {

    width: 210px;

    height: 210px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
    
            0 0 30px rgba(0, 245, 255, .35),
    
            0 0 60px rgba(124, 58, 237, .25),
    
            inset 0 0 20px rgba(255, 255, 255, .12);

    transition: .4s;

        

}

/* Song Playing */

#album-cover.playing {

    animation: spinAlbum 8s linear infinite;

}


/*====================================
        HOLOGRAPHIC DISC
=====================================*/

.album-ring {

    position: relative;

    overflow: hidden;

}

.album-hologram {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:

        conic-gradient(from 0deg,

            transparent,

            rgba(0, 245, 255, .18),

            rgba(124, 58, 237, .18),

            rgba(255, 77, 255, .18),

            transparent);

    mix-blend-mode: screen;

    animation: holoSpin 12s linear infinite;

    pointer-events: none;

}

.album-light {

    position: absolute;

    width: 180%;

    height: 45%;

    left: -40%;

    top: -25%;

    transform: rotate(-25deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    animation: lightSweep 5s linear infinite;

    pointer-events: none;

}


@keyframes holoSpin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes lightSweep {

    from {

        transform:

            translateX(-120%) rotate(-25deg);

    }

    to {

        transform:

            translateX(120%) rotate(-25deg);

    }

}



/* =====================================================
                    SONG INFO
===================================================== */

.song-info {

    text-align: center;

    margin-bottom: 30px;

}

.song-info h2 {

    font-family: 'Orbitron', sans-serif;

    font-size: 28px;

    letter-spacing: 2px;

    color: var(--cyan);

    margin-bottom: 10px;

}

.song-info p {

    color: var(--text-light);

    font-size: 17px;

}

/* =====================================================
                PROGRESS SECTION
===================================================== */

.progress-section {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 35px;

}

.progress-section span {

    width: 55px;

    text-align: center;

    color: var(--text-light);

    font-size: 13px;

}

.progress {

    flex: 1;

    height: 7px;

    appearance: none;

    border-radius: 30px;

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

    cursor: pointer;

}

/* Chrome */

.progress::-webkit-slider-thumb {

    appearance: none;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:

        0 0 15px var(--cyan);

}

/* Firefox */

.progress::-moz-range-thumb {

    width: 18px;

    height: 18px;

    border: none;

    border-radius: 50%;

    background: var(--cyan);

}

/* =====================================================
                    CONTROLS
===================================================== */

.controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 35px;

}

.controls button {

    width: 58px;

    height: 58px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    color: white;

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

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

    transition: .35s;

    font-size: 18px;

    backdrop-filter: blur(15px);

}

.controls button:hover {

    transform: translateY(-6px) scale(1.08);

    background: var(--cyan);

    color: #000;

    box-shadow:

        0 0 25px rgba(0, 245, 255, .6);

}

#play {

    width: 72px;

    height: 72px;

    font-size: 24px;

    background: linear-gradient(135deg, var(--cyan), var(--purple));

    color: #fff;

    box-shadow:

        0 0 25px rgba(0, 245, 255, .45);

}

#play:hover {

    transform: scale(1.1);

}

/* =====================================================
                    ANIMATIONS
===================================================== */

@keyframes rotateRing {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes spinAlbum {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes floatAlbum {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/* =====================================================
Part-3 (Volume Knob + Audio Visualizer + Equalizer + Playlist + Voice Assistant + Settings Panel)
🎛️ Circular Volume Knob 📊 Audio Visualizer Panel ⚡ Animated Equalizer 
🎵 Mission Playlist 🎙️ Voice Assistant ⚙️ Settings Panel
=====================================================*/


/*====================================
        VOLUME CONTROLLER
=====================================*/

.volume-section {

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.volume-wrapper {

    position: relative;

    width: 120px;

    height: 120px;

}

#volume-ring {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 4px solid rgba(0, 245, 255, .15);

    box-shadow:
        0 0 15px var(--accent),
        inset 0 0 15px var(--accent);

    animation: ringRotate 8s linear infinite;
    pointer-events: none;
}

@keyframes ringRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

#volume-knob {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 80px;

    height: 80px;

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

    border-radius: 50%;

    background: rgba(15, 20, 40, .95);

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    transition: .25s;

    border: 2px solid rgba(0, 245, 255, .25);

    box-shadow:
        0 0 25px rgba(0, 245, 255, .35),
        inset 0 0 20px rgba(255, 255, 255, .05);

    pointer-events: auto;
        z-index: 10;
}

#volume-knob:hover {

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

    box-shadow:
        0 0 45px var(--accent),
        inset 0 0 20px rgba(255, 255, 255, .15);

}

#volume-icon {

    color: var(--accent);

    font-size: 34px;

    transition: .3s;

}

#volume-value {

    margin-top: 18px;

    color: var(--accent);

    font-size: 20px;

    font-weight: 700;

    letter-spacing: 2px;

    text-shadow: 0 0 12px var(--accent);

}


/* =====================================================
                    VISUALIZER
===================================================== */

.visualizer-section {

    margin-bottom: 35px;

}

#visualizer {

    width: 100%;

    height: 120px;

    border-radius: 20px;

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

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

}

/*=====================================================
                AURORA EQUALIZER
=====================================================*/

.equalizer {

    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 10px;

    height: 90px;

    margin: 40px 0;

}

.equalizer span {

    width: 8px;

    height: 60px;

    border-radius: 50px;

    transform-origin: bottom;

    animation: auroraEqualizer .8s ease-in-out infinite alternate;

    background: linear-gradient(to top,

            var(--accent),

            #7C3AED,

            #FF00C8);

    box-shadow:
        0 0 8px var(--accent),
        0 0 18px #7C3AED,
        0 0 30px rgba(0, 245, 255, .4);

}

.equalizer:not(.playing) span {

    animation-play-state: paused;

    transform: scaleY(.2);

    opacity: .4;

}

.equalizer.playing span {

    opacity: 1;

}

.equalizer span:nth-child(1) {

    animation-delay: .1s;

}

.equalizer span:nth-child(2) {

    animation-delay: .25s;

}

.equalizer span:nth-child(3) {

    animation-delay: .4s;

}

.equalizer span:nth-child(4) {

    animation-delay: .15s;

}

.equalizer span:nth-child(5) {

    animation-delay: .5s;

}

.equalizer span:nth-child(6) {

    animation-delay: .3s;

}

.equalizer span:nth-child(7) {

    animation-delay: .6s;

}

@keyframes auroraEqualizer {

    0% {

        transform: scaleY(.25);

    }

    35% {

        transform: scaleY(.55);

    }

    70% {

        transform: scaleY(.95);

    }

    100% {

        transform: scaleY(.45);

    }

}



/*====================================
        PLAYLIST
=====================================*/

.playlist {

    margin-top: 30px;
    
}

.playlist-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.playlist-header h2 {

    color: #fff;

    display: flex;

    gap: 10px;

    align-items: center;

}

#playlist-count {

    color: var(--accent);

}

/*====================================
        PLAYLIST ACTIONS
=====================================*/

.playlist-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}

.queue-btn {

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

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

    color: var(--cyan);

    cursor: pointer;

    transition: .3s;

}

.queue-btn:hover {

    transform: scale(1.15);

    background: var(--cyan);

    color: #000;

    box-shadow: 0 0 15px var(--cyan);

}

/*====================================
            PLAY QUEUE
=====================================*/

.queue-section {

    margin-top: 30px;

    padding: 20px;

    border-radius: 20px;

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

    backdrop-filter: blur(20px);

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

}

/* Hover */

.queue-section:hover {

    transform: translateY(-4px);

    border-color: var(--accent);

    background:
    
            linear-gradient(135deg,
                rgba(255, 60, 120, .22),
                rgba(120, 0, 50, .12));
    
        box-shadow:
    
            0 0 12px #ff4d7d,
    
            0 0 30px rgba(255, 70, 130, .35);

}

.queue-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.queue-header h2 {

    color: var(--cyan);

    font-size: 18px;

    letter-spacing: 2px;

}

#queue-count {

    color: #888;

    font-size: 14px;

}

#queue-list {

    list-style: none;

    padding: 0;

    margin: 0;

}

.queue-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 15px;

    margin-bottom: 10px;

    border-radius: 12px;

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

    transition: .3s;

}

.queue-item:hover {

    background: rgba(0, 245, 255, .08);
    color: #fff;

}

.queue-remove {

    cursor: pointer;

    color: #ff5d73;

    font-size: 18px;

}

/*====================================
        FILTER
=====================================*/

.playlist-filter {

    display: flex;

    gap: 10px;

    overflow-x: auto;

    padding-bottom: 15px;

    scrollbar-width: none;

}

.playlist-filter::-webkit-scrollbar {

    display: none;

}

.filter-btn {

    padding: 10px 18px;

    border: none;

    border-radius: 30px;

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

    color: #fff;

    cursor: pointer;

    transition: .3s;

    white-space: nowrap;

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

}

.filter-btn.active {

    background: var(--accent);

    color: #000;

    box-shadow: 0 0 20px rgba(0, 245, 255, .35);

}

/*====================================
        SEARCH
=====================================*/

.playlist-search {

    position: relative;

    margin-bottom: 20px;

}

.playlist-search input {

    width: 100%;

    padding: 15px 45px 15px 18px;

    border: none;

    border-radius: 18px;

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

    color: #fff;

    outline: none;

}

.playlist-search i {

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--accent);

}

/*====================================
        ITEM
=====================================*/

#playlist {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.playlist-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    border-radius: 18px;

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

    cursor: pointer;

    transition: .3s;

}

.playlist-item:hover {

    transform: translateY(-3px);

    box-shadow: 0 0 20px rgba(0, 245, 255, .25);

}

.playlist-item.active {

    border: 1px solid var(--accent);

}

.playlist-item img {

    width: 60px;

    height: 60px;

    border-radius: 15px;

    object-fit: cover;

}

.playlist-info {

    flex: 1;

}

.playlist-info h4 {

    color: #fff;

    margin-bottom: 5px;

}

.playlist-info p {

    color: #aaa;

    font-size: 14px;

}

.playlist-time {

    color: var(--accent);

    font-size: 13px;

}


/*===============================================================
                            LYRICS PANEL
=================================================================*/

.lyrics {

    margin-top: 30px;
    padding: 20px;

    border-radius: 25px;

    position: relative;
    overflow: hidden;

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

    backdrop-filter: blur(25px);

    border: 1px solid rgba(0, 245, 255, .2);

    box-shadow:
        0 0 30px rgba(0, 245, 255, .18);
}

.lyrics:hover {

    transform: translateY(-4px);

    border-color: var(--accent);

    background:

        linear-gradient(135deg,
            rgba(255, 60, 120, .22),
            rgba(120, 0, 50, .12));

    box-shadow:

        0 0 12px #ff4d7d,

        0 0 30px rgba(255, 70, 130, .35);

}


.lyrics::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(0, 245, 255, .06),
            transparent);

    animation: scan 5s linear infinite;

}


@keyframes scan {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }

}


.lyrics-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

    color: var(--accent);

    font-weight: 700;

    letter-spacing: 2px;

}


.record-dot {

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #ff0040;

    box-shadow:
        0 0 15px #ff0040;

    animation: blink 1s infinite;

}


@keyframes blink {

    50% {
        opacity: .2;
    }

}


/*====================================
        BOTH LYRICS BOXES
=====================================*/

#player-lyrics-box,
#ai-lyrics-box {

    height: 260px;

    overflow-y: auto;

    padding: 20px;

    border-radius: 15px;

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

    border: 1px solid rgba(0, 245, 255, .12);

    line-height: 2.2;

    display: flex;

    flex-direction: column;

    gap: 18px;

    position: relative;

    z-index: 2;

}


/*====================================
        SCROLLBAR
=====================================*/

#player-lyrics-box::-webkit-scrollbar,
#ai-lyrics-box::-webkit-scrollbar {

    width: 4px;

}


#player-lyrics-box::-webkit-scrollbar-thumb,
#ai-lyrics-box::-webkit-scrollbar-thumb {

    background: var(--accent);

    border-radius: 10px;

}

/*====================================
        ACTIVE LYRIC
=====================================*/

#player-lyrics-box .lyric-line.active,
#ai-lyrics-box .lyric-line.active {

    color: var(--accent);

    font-weight: 700;

    text-shadow:
        0 0 20px var(--accent);

    animation: glow 1s infinite alternate;

    transform: scale(1.03);

    transition: .3s ease;

}


@keyframes glow {

    from {
        opacity: .6;
    }

    to {
        opacity: 1;
    }

}

/*====================================
        AI PANEL LYRIC
=====================================*/

#ai-panel-screen #ai-lyrics-box .lyric-line {

    opacity: .35;

    transform: scale(.98);

    transition:
        opacity .35s ease,
        transform .35s ease,
        color .35s ease,
        text-shadow .35s ease;

}


/*====================================
        AI PANEL ACTIVE LINE
=====================================*/

#ai-panel-screen #ai-lyrics-box .lyric-line.active {

    color: var(--accent);

    opacity: 1;

    transform: scale(1.05);

    font-weight: 700;

    text-shadow:
        0 0 10px var(--accent),
        0 0 20px var(--accent);

}



/* =====================================================
                    VOICE ASSISTANT
===================================================== */

/*====================================
            AI ACTION PANEL
=====================================*/

.ai-actions {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 25px;

}

.action-btn {

    height: 58px;

    border: none;

    border-radius: 16px;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    color: #fff;

    background: linear-gradient(135deg,
            #7C3AED,
            var(--accent));

    box-shadow:
        0 0 20px rgba(0, 245, 255, .25);

    transition: .35s;

}

.action-btn:hover {

    transform: translateY(-4px);

    box-shadow:
        0 0 30px rgba(0, 245, 255, .6);

}

.action-btn i {

    font-size: 18px;

}

.action-btn span {

    font-size: 11px;

    letter-spacing: 1px;

}

.action-btn.active {

    background: linear-gradient(135deg,
            #ff2d75,
            #ff6ea9);

}

/*====================================
        HEART BEAT
=====================================*/

.action-btn.active i {

    animation: heartBeat .6s ease;

    color: #ff2d75;

}

@keyframes heartBeat {

    0% {

        transform: scale(1);

    }

    30% {

        transform: scale(1.35);

    }

    60% {

        transform: scale(.9);

    }

    100% {

        transform: scale(1);

    }

}

/*=====================================================
                    SETTINGS
======================================================*/

.settings {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

}

.settings button {

    padding: 14px;

    border: none;

    border-radius: 14px;

    cursor: pointer;

    color: white;

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

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

    transition: .35s;

}

.settings button:hover {

    background: var(--purple);

    transform: translateY(-5px);

}

/* =====================================================
             Part-4 Complete
🌌 Animated Starfield Background ✨ Floating Particles 💎 Glass Reflection Effect 
🌈 Neon Border Animation 📱 Responsive Design (Desktop, Tablet, Mobile) 
🎨 Custom Scrollbar 🔥 Premium Hover & Transition Effects
=====================================================*/

/*=====================================================
                STARFIELD BACKGROUND
=====================================================*/

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background-image:

        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .9) 1px, transparent 1px),

        radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .8) 1px, transparent 1px),

        radial-gradient(circle at 50% 60%, rgba(255, 255, 255, .7) 1px, transparent 1px),

        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .8) 1px, transparent 1px),

        radial-gradient(circle at 30% 90%, rgba(255, 255, 255, .6) 1px, transparent 1px);

    background-size:

        250px 250px,

        350px 350px,

        450px 450px,

        300px 300px,

        500px 500px;

    opacity: .4;

    animation: starsMove 60s linear infinite;

    pointer-events: none;

}

@keyframes starsMove {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(-400px);

    }

}

/*=====================================================
                FLOATING PARTICLES
=====================================================*/

body::after {

    content: "";

    position: fixed;

    width: 100%;

    height: 100%;

    background:

        radial-gradient(circle, var(--cyan) 2px, transparent 3px);

    background-size: 140px 140px;

    opacity: .08;

    animation: particles 18s linear infinite;

    pointer-events: none;

}

@keyframes particles {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(-220px);

    }

}

/*=====================================================
                GLASS REFLECTION
=====================================================*/

.app::after {

    content: "";

    position: absolute;

    top: -120px;

    left: -180px;

    width: 220px;

    height: 700px;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .08),

            transparent);

    transform: rotate(25deg);

    animation: glassReflection 8s infinite;

}

@keyframes glassReflection {

    from {

        left: -250px;

    }

    to {

        left: 700px;

    }

}

/*=====================================================
                NEON BORDER
=====================================================*/

.app {

    animation: borderGlow 6s linear infinite;

}

@keyframes borderGlow {

    0% {

        border-color: rgba(0, 245, 255, .25);

    }

    50% {

        border-color: rgba(124, 58, 237, .45);

    }

    100% {

        border-color: rgba(0, 245, 255, .25);

    }

}

/*=====================================================
                PREMIUM HOVER
=====================================================*/

button {

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}

button:hover {

    box-shadow:

        0 0 20px rgba(0, 245, 255, .4),

        0 0 45px rgba(0, 245, 255, .2);

}

button:active {

    transform: scale(.95);

}

/*=====================================================
                CUSTOM SCROLLBAR
=====================================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #08111f;

}

::-webkit-scrollbar-thumb {

    background: var(--cyan);

    border-radius: 50px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--purple);

}

/*=====================================================
                TABLET
=====================================================*/

@media(max-width:768px) {

    .app {

        max-width: 95%;

        padding: 25px;

    }

    .album-ring {

        width: 220px;

        height: 220px;

    }

    #album-cover {

        width: 180px;

        height: 180px;

    }

}

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

@media(max-width:480px) {

    .controls {

        gap: 10px;

    }

    .controls button {

        width: 50px;

        height: 50px;

    }

    #play {

        width: 64px;

        height: 64px;

    }

    .logo h1 {

        font-size: 26px;

    }

    .song-info h2 {

        font-size: 22px;

    }

}

/*====================================
        AI BOOT SCREEN
=====================================*/

#boot-screen {

    position: fixed;

    inset: 0;

    background: #02030a;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition: 1s;

}

.boot-container {

    width: 420px;

    max-width: 90%;

    text-align: center;

}

.boot-logo {

    font-family: 'Orbitron', sans-serif;

    font-size: 42px;

    color: var(--cyan);

    letter-spacing: 4px;

    text-shadow:

        0 0 20px var(--cyan);

}

.boot-version {

    margin-top: 10px;

    color: #aaa;

    margin-bottom: 35px;

}

.boot-console {

    text-align: left;

    font-size: 15px;

    line-height: 34px;

    color: #7fffd4;

    font-family: monospace;

}

.boot-line {

    opacity: 0;

    animation: bootText .6s forwards;

}

.boot-line:nth-child(1) {

    animation-delay: .5s;

}

.boot-line:nth-child(2) {

    animation-delay: 1s;

}

.boot-line:nth-child(3) {

    animation-delay: 1.5s;

}

.boot-line:nth-child(4) {

    animation-delay: 2s;

}

.boot-line:nth-child(5) {

    animation-delay: 2.5s;

}

.loading-bar {

    margin-top: 35px;

    height: 8px;

    border-radius: 50px;

    overflow: hidden;

    background: #222;

}

.loading-progress {

    height: 100%;

    width: 0;

    background: linear-gradient(90deg, var(--cyan), var(--purple));

    animation: loading 3s forwards;

}

.hiddenBoot {

    opacity: 0;

    visibility: hidden;

}

@keyframes loading {

    from {

        width: 0;

    }

    to {

        width: 100%;

    }

}

@keyframes bootText {

    to {

        opacity: 1;

    }
}

.playlist-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 18px;

    margin-bottom: 12px;

    border-radius: 15px;

    cursor: pointer;

    transition: .35s;

}

.playlist-item:hover {

    background: rgba(0, 245, 255, .15);

}

.playlist-item.active {

    background: linear-gradient(90deg, var(--accent), #7C3AED);

    color: white;

    transform: scale(1.02);

}


.controls button.active {

    background: linear-gradient(135deg, var(--accent), #7C3AED);

    color: #fff;

    box-shadow:

        0 0 20px rgba(0, 245, 255, .6);

}


/*====================================
        VISUALIZER
=====================================*/

.visualizer-section {

    width: 100%;

    height: 180px;

    margin-top: 30px;

    border-radius: 20px;

    overflow: hidden;

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

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

}

#visualizer {

    width: 100%;

    height: 100%;

    display: block;

}

.visualizer-section {

    position: relative;

    overflow: hidden;

    border-radius: 25px;

    background:

        linear-gradient(180deg,

            rgba(255, 255, 255, .04),

            rgba(0, 245, 255, .03));

    box-shadow:

        0 0 35px rgba(0, 245, 255, .15),

        inset 0 0 25px rgba(255, 255, 255, .03);

}

.visualizer-section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(0, 245, 255, .05),

            transparent);

    animation: scanline 6s linear infinite;

}

@keyframes scanline {

    0% {

        transform: translateX(-100%);

    }

    100% {

        transform: translateX(100%);

    }

}
.visualizer-section::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 25px;

    border: 1px solid rgba(0, 245, 255, .15);

    pointer-events: none;

}

/*====================================
        PLAYER PULSE
=====================================*/

.player.pulse {

    animation: pulse .35s ease;

}

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.02);

        box-shadow:

            0 0 60px rgba(0, 245, 255, .45);

    }

    100% {

        transform: scale(1);

    }

}

#visualizer {

    background:

        radial-gradient(circle,

            rgba(124, 58, 237, .12),

            rgba(0, 0, 0, .25));

}

/*====================================
        GALAXY BACKGROUND
=====================================*/

.galaxy-bg {

    position: absolute;

    inset: 0;

    border-radius: 25px;

    overflow: hidden;

    z-index: 0;

    background:
        radial-gradient(circle at 20% 20%, rgba(0, 245, 255, .12), transparent 30%),
        radial-gradient(circle at 80% 40%, rgba(124, 58, 237, .18), transparent 35%),
        radial-gradient(circle at 50% 80%, rgba(255, 0, 200, .10), transparent 30%),
        #050814;

    animation: galaxyMove 15s linear infinite;

}

@keyframes galaxyMove {

    0% {

        transform: scale(1) rotate(0deg);

    }

    100% {

        transform: scale(1.1) rotate(360deg);

    }

}

#visualizer {

    position: relative;

    z-index: 2;

}

/*====================================
        BASS PULSE
=====================================*/

.player.beat {

    animation: beatPulse .25s ease;

}

@keyframes beatPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.02);

        box-shadow:

            0 0 60px rgba(0, 245, 255, .5),

            0 0 100px rgba(124, 58, 237, .3);

    }

    100% {

        transform: scale(1);

    }

}




/*====================================
                Part 1
    AI PANEL || Aurora Nexus v2.0
=====================================*/

.ai-panel {

    margin-top: 40px;

    padding: 25px;

    border-radius: 25px;

    backdrop-filter: blur(25px);

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

    border: 1px solid rgba(0, 245, 255, .15);

    box-shadow:
        0 0 30px rgba(0, 245, 255, .15);

}

.ai-header {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;

}

.ai-avatar {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    background: var(--accent22);

    box-shadow:
        0 0 25px var(--accent);

}

.ai-card {

    padding: 15px;

    margin-top: 15px;

    border-radius: 15px;

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

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

}

.ai-card span {

    color: #888;

    font-size: 13px;

}

.ai-card h3 {

    color: var(--accent);

    margin-top: 8px;

}


/*====================================
        NEURAL MEMORY
=====================================*/

.memory-status {

    margin-top: 25px;

    text-align: center;

}

.memory-status p {

    color: var(--accent);

    font-size: 18px;

    letter-spacing: 2px;

    margin-bottom: 10px;

    text-shadow: 0 0 15px var(--accent);

}

#memory-message {

    color: #ffffff;

    font-size: 15px;

    opacity: .85;

    animation: memoryBlink 1s infinite alternate;

}

.memory-title {

    color: var(--accent);

    font-size: 18px;

    font-weight: 700;

    letter-spacing: 3px;

    text-shadow:

        0 0 10px var(--accent),

        0 0 25px var(--accent);

}

@keyframes memoryBlink {

    from {

        opacity: .35;

    }

    to {

        opacity: 1;

    }

}

/*====================================
        AI TOAST
=====================================*/

.toast {

    position: fixed;

    top: 25px;

    right: -420px;

    width: 320px;

    padding: 18px 22px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    gap: 15px;

    background: rgba(15, 20, 35, .82);

    backdrop-filter: blur(18px);

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

    box-shadow:

        0 0 25px rgba(0, 245, 255, .25);

    color: white;

    transition: .45s;

    z-index: 99999;

}

.toast.show {

    right: 25px;

}

.toast i {

    color: var(--accent);

    font-size: 22px;

}

#toast-message {

    font-size: 15px;

    letter-spacing: 1px;

}

/*====================================
        FAVORITE ANIMATION
=====================================*/

#favorite-btn {

    position: relative;

    overflow: hidden;

}

#favorite-btn i {

    transition: .3s;

}

#favorite-btn.active i {

    color: #ff2d75;

    animation: heartBeat .7s ease;

    text-shadow:

        0 0 10px #ff2d75,

        0 0 20px #ff2d75,

        0 0 40px #ff2d75;

}

@keyframes heartBeat {

    0% {

        transform: scale(1);

    }

    20% {

        transform: scale(1.45);

    }

    40% {

        transform: scale(.9);

    }

    60% {

        transform: scale(1.25);

    }

    100% {

        transform: scale(1);

    }

}

/*==============================
        Pink Glow Pulse
==============================*/

#favorite-btn.active {

    box-shadow:

        0 0 15px #ff2d75,

        0 0 35px #ff2d75,

        0 0 60px rgba(255, 45, 117, .45);

}

/*====================================
        AI BACKGROUND ENGINE
=====================================*/

#bg-layer {

position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: -1;

    pointer-events: none;

    transition: 1s;

    background:
            radial-gradient(circle at top,
                rgba(255, 255, 255, .08),
                transparent 20%),

            radial-gradient(circle at 30% 30%,
                rgba(0, 245, 255, .25),
                transparent 35%),

            radial-gradient(circle at 70% 60%,
                rgba(255, 0, 180, .20),
                transparent 40%),

            #000814;
}

/*==============================
        SONG THEMES
==============================*/

.theme-believer {

    background:
        radial-gradient(circle at top,
            #7C3AED,
            var(--accent),
            #050510 80%);

}

.theme-faded {

    background:
        radial-gradient(circle at top,
            #1D4ED8,
            #38BDF8,
            #030712 80%);

}

.theme-alone {

    background:
        radial-gradient(circle at top,
            #0F172A,
            #2563EB,
            #000000 80%);

}

/*====================================
        AI PANEL
=====================================*/

.ai-panel {

    margin-top: 20px;

    padding: 18px;

    border-radius: 20px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(0, 245, 255, .15);

}

.ai-header {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--accent);

    font-weight: 700;

    margin-bottom: 12px;

    letter-spacing: 1px;

}

#ai-status {

    color: #d6d6d6;

    line-height: 1.8;

    font-size: 15px;

}


/*----------------------------Step 1: Responsive Layout Foundation---------------------------*/

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

@media screen and (max-width:768px) {

    html {
        font-size: 15px;
    }

    body {
        overflow-x: hidden;
    }

    .app {

        width: 100%;
        max-width: 100%;
        padding: 20px 16px 40px;

        display: flex;
        flex-direction: column;
        gap: 22px;

    }

    section {

        width: 100%;

    }

}

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

@media screen and (max-width:768px) {

    .header,
    .ai-status,
    .album-section,
    .song-info,
    .progress-section,
    .controls,
    .ai-actions,
    .volume-section,
    .visualizer-section,
    .equalizer,
    .playlist,
    .queue-section,
    .lyrics,
    .ai-panel,
    .settings {

        width: 100%;
        margin: 0 auto;

    }

}
@media screen and (max-width:768px) {

    img {

        max-width: 100%;
        height: auto;

    }

    canvas {

        width: 100%;
        height: 100%;

    }

}
@media screen and (max-width:768px) {

    * {

        box-sizing: border-box;

    }

}


/*-----------------------Part-2: Responsive Album Cover-------------------------------*/

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

@media screen and (max-width:768px) {

    .album-ring {

        width: 220px;
        height: 220px;

        margin: auto;

    }

    #album-cover {

        width: 190px;
        height: 190px;

    }

}

/*====================================
        MOBILE SONG INFO
=====================================*/

@media screen and (max-width:768px) {

    #song-title {

        font-size: 1.8rem;
        text-align: center;

    }

    #artist-name {

        font-size: .95rem;

        text-align: center;

        opacity: .8;

    }

}
/*====================================
        MOBILE PROGRESS
=====================================*/

@media screen and (max-width:768px) {

    .progress-section {

        gap: 12px;

    }

    .progress {

        width: 100%;

    }

    #current-time,
    #duration {

        font-size: .85rem;

    }

}

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

@media screen and (max-width:768px) {

    .controls {

        gap: 14px;

        justify-content: center;

    }

    .controls button {

        width: 58px;
        height: 58px;

        font-size: 1.1rem;

    }

    #play {

        width: 72px;
        height: 72px;

        font-size: 1.4rem;

    }

}
/*====================================
        MOBILE VOLUME
=====================================*/

@media screen and (max-width:768px) {

    .volume-section {

        margin-top: 10px;

    }

    #volume-knob {

        width: 65px;
        height: 65px;

    }

    #volume-value {

        font-size: .9rem;

    }

}

/*-------------------------Part-3: Responsive Playlist------------------------------*/

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

@media screen and (max-width:768px) {

    .playlist {

        padding: 18px;

        border-radius: 18px;

    }

    .playlist-header {

        flex-wrap: wrap;
        gap: 10px;

        justify-content: space-between;

        align-items: center;

    }

    .playlist-header h2 {

        font-size: 1rem;

    }

    #playlist-count {

        font-size: .8rem;

    }

}

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

@media screen and (max-width:768px) {

    .playlist-filter {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    .filter-btn {

        width: 100%;

        padding: 10px;

        font-size: .9rem;

    }

}

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

@media screen and (max-width:768px) {

    .playlist-search {

        margin-top: 15px;

    }

    #search-song {

        width: 100%;

        font-size: .95rem;

        padding: 12px 40px 12px 15px;

    }

}

/*====================================
        MOBILE PLAYLIST ITEM
=====================================*/

@media screen and (max-width:768px) {

    .playlist-item {

        padding: 14px;

    }

    .playlist-info strong {

        font-size: .95rem;

    }

    .playlist-info small {

        font-size: .75rem;

    }

    .playlist-actions {

        gap: 12px;

    }

    .queue-btn {

        width: 34px;
        height: 34px;

    }

}

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

@media screen and (max-width:768px) {

    .queue-section {

        padding: 18px;

    }

    .queue-header h2 {

        font-size: 1rem;

    }

    .queue-item {

        padding: 12px;

    }

}

/*---------------------Step 4: — AI Panel Responsive------------------------*/

/*====================================
        MOBILE AI PANEL
=====================================*/

@media screen and (max-width:768px) {

    .ai-panel {

        padding: 20px;

        border-radius: 20px;

    }

    .ai-header {

        gap: 15px;

        margin-bottom: 20px;

    }

    .ai-avatar {

        width: 60px;
        height: 60px;

        font-size: 28px;

    }

    .ai-header h2 {

        font-size: 1.2rem;

    }

    .ai-header p {

        font-size: .8rem;

    }

}

/*====================================
        MOBILE AI CARDS
=====================================*/

@media screen and (max-width:768px) {

    .ai-panel {

        display: grid;

        gap: 14px;

    }

    .ai-card {

        padding: 15px;

        border-radius: 16px;

    }

    .ai-card span {

        font-size: .75rem;

    }

    .ai-card h3 {

        font-size: 1rem;

    }

}

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

@media screen and (max-width: 768px) {

    /*================================
            LYRICS CONTAINER
    ================================*/

    .lyrics {

        padding: 18px;

        margin-top: 20px;

        border-radius: 20px;

    }


    /*================================
            BOTH LYRICS BOXES
    ================================*/

    #player-lyrics-box,
    #ai-lyrics-box {

        height: 180px;

        max-height: 180px;

        overflow-y: auto;

        padding: 15px;

        font-size: .95rem;

        line-height: 1.8;

        gap: 14px;

    }


    /*================================
            LYRIC LINE
    ================================*/

    #player-lyrics-box .lyric-line,
    #ai-lyrics-box .lyric-line {

        font-size: .95rem;

        line-height: 1.8;

        transition:

            color .3s ease,

            transform .3s ease,

            opacity .3s ease;

    }


    /*================================
            ACTIVE LYRIC
    ================================*/

    #player-lyrics-box .lyric-line.active-line,
    #ai-lyrics-box .lyric-line.active-line {

        transform: scale(1.03);

        font-weight: 700;

    }


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

    #player-lyrics-box::-webkit-scrollbar,
    #ai-lyrics-box::-webkit-scrollbar {

        width: 3px;

    }


    #player-lyrics-box::-webkit-scrollbar-thumb,
    #ai-lyrics-box::-webkit-scrollbar-thumb {

        border-radius: 10px;

        background: var(--accent);

    }

}




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

@media screen and (max-width:768px) {

    .settings {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }

    .settings button {

        width: 100%;

        padding: 15px;

        font-size: 1rem;

    }

}

/*====================================
        MOBILE GLASS EFFECT
=====================================*/

@media screen and (max-width:768px) {

    .playlist,
    .queue-section,
    .lyrics,
    .ai-panel {

        backdrop-filter: blur(18px);

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

        box-shadow:

            0 10px 30px rgba(0, 0, 0, .4);

    }

}

/*====================================
        SAFE AREA
=====================================*/

@media screen and (max-width:768px) {

    body {

        padding-bottom: env(safe-area-inset-bottom);

    }

}


/*====================================
        BOTTOM NAVIGATION
=====================================*/


.bottom-dock {

    position: absolute;

    left: 50%;

    bottom: 20px;

    transform: translateX(-50%);

    width: 90%;

    height: 78px;

    display: flex;

    justify-content: space-around;

    align-items: center;

    border-radius: 30px;

    overflow: hidden;

    backdrop-filter: blur(35px);

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .02));

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

    box-shadow:
    
            0 0 18px rgba(0, 245, 255, .08),
    
            0 10px 30px rgba(0, 0, 0, .35),
    
            inset 0 1px 0 rgba(255, 255, 255, .08);

    z-index: 500;

}


/*==================================================
        FLOATING ACTIVE CAPSULE
==================================================*/

.dock-pill {

    position: absolute;

    width: 78px;

    height: 54px;

    top: 11px;

    left: 12px;

    border-radius: 22px;

    background:
        linear-gradient(145deg,
            rgba(0, 245, 255, .20),
            rgba(124, 58, 237, .18));

    border:
        1px solid rgba(0, 245, 255, .42);

    box-shadow:
    
            0 0 8px rgba(0, 245, 255, .18),
    
            0 0 18px rgba(0, 245, 255, .10),
    
            inset 0 0 12px rgba(0, 245, 255, .05);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    pointer-events: none;

    z-index: 0;

    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        width .35s ease;

}

/*==================================================
        DOCK BUTTON
==================================================*/

.dock-btn {

    position: relative;

    flex: 1;

    height: 62px;

    border: 0;

    background: transparent;

    color: rgba(190, 200, 220, .65);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    border-radius: 21px;

    cursor: pointer;

    z-index: 2;

    transition:
        color .3s ease,
        transform .3s ease;

}

.dock-btn span {

    font-size: 10px;

    letter-spacing: .4px;

    opacity: .75;

    transition:
        opacity .3s ease,
        transform .3s ease;

}

.dock-btn.active {

    color: var(--accent);

}


.dock-btn.active .dock-icon i {

    transform:
        translateY(-2px) scale(1.08);

    filter:

        drop-shadow(0 0 4px var(--accent));

}

.dock-btn.active span {

    opacity: 1;

    transform: translateY(-1px);

    text-shadow:

        0 0 8px rgba(0, 245, 255, .65);

}


/*==================================================
                MOVING BORDER
==================================================*/

.bottom-dock::before {

    content: "";

    position: absolute;

    inset: -2px;

    border-radius: 32px;

    background:
    
            linear-gradient(90deg,
    
                transparent,
    
                rgba(0, 245, 255, .35),
    
                rgba(124, 58, 237, .30),
    
                rgba(0, 245, 255, .35),
    
                transparent);

    background-size: 300%;

    animation: dockBorder 8s linear infinite;

    z-index: -2;

}

.bottom-dock::after {

    content: "";

    display: none !important;

    position: absolute;

    inset: 2px;

    border-radius: 30px;

    background:

        rgba(15, 18, 35, .92);

    z-index: -1;

}

@keyframes dockBorder {

    from {

        background-position: 0%;

    }

    to {

        background-position: 300%;

    }

}

/*==================================================
                FLOATING GLOW
==================================================*/

.dock-glow {

    position: absolute;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    background:

        radial-gradient(circle,

            rgba(0, 245, 255, .35),

            transparent 70%);

    filter: blur(25px);
    
        opacity: .55;

    animation: floatGlow 10s linear infinite;

    pointer-events: none;

}

@keyframes floatGlow {

    0% {

        transform: translateX(-180px);

    }

    100% {

        transform: translateX(380px);

    }

}


/*====================================
        PANEL SCREEN
=====================================*/

.panel-screen {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(180deg,

            #090B16,

            #11162A);

    backdrop-filter: blur(18px);
    transform: translateY(100%);

    transition: .5s;

    z-index: 9998;

    overflow: auto;

    padding: 35px;

}

.panel-screen.active {

    transform: translateY(0);

}



/*====================================
        PANEL CLOSE
=====================================*/

.panel-close {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    color: #fff;

    cursor: pointer;

    z-index: 1000;

}

.panel-close:hover {

    background: var(--accent);

    color: #000;

    transform: rotate(90deg);

}

/*====================================
        EQUALIZER PANEL
=====================================*/

.eq-container {

    max-width: 1100px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 30px;

}

.eq-header {

    text-align: center;

}

.eq-header h2 {

    font-family: Orbitron;

    font-size: 34px;

    color: var(--cyan);

    letter-spacing: 3px;

    text-shadow:

        0 0 12px rgba(0, 245, 255, .6);

}

.eq-header p {

    color: var(--muted);

    margin-top: 10px;

    letter-spacing: 2px;

}


/*====================================
        PRESET GRID
=====================================*/

.preset-grid {

    display: grid;

    grid-template-columns:

        repeat(auto-fit, minmax(140px, 1fr));

    gap: 18px;

}

.preset {

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

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

    border-radius: 18px;

    padding: 15px;

    color: white;

    cursor: pointer;

    font-family: Orbitron;

    transition: .35s;

    backdrop-filter: blur(18px);

}

.preset:hover {

    transform: translateY(-5px);

    box-shadow:

        0 0 20px rgba(0, 245, 255, .35);

}

.preset.active {

    background:

        linear-gradient(135deg,

            var(--purple),

            var(--cyan));

    box-shadow:

        0 0 25px rgba(0, 245, 255, .45);

}


/*====================================
        SLIDER AREA
=====================================*/

.eq-sliders {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 16px;

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

    border-radius: 28px;

    padding: 30px;

    backdrop-filter: blur(20px);

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

}

.slider-box {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 18px;

    flex: 1;

}

.slider-box span {

    color: white;

    font-size: 13px;

    font-family: Orbitron;

}


/*====================================
        VERTICAL SLIDER
=====================================*/

.eq-slider {

    appearance: none;

    width: 180px;

    height: 6px;

    transform: rotate(-90deg);

    background:

        rgba(255, 255, 255, .1);

    border-radius: 20px;

    outline: none;

}

.eq-slider::-webkit-slider-thumb {

    appearance: none;

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow:

        0 0 15px var(--cyan),

        0 0 30px var(--cyan);

    cursor: pointer;

}

.eq-slider::-moz-range-thumb {

    width: 22px;

    height: 22px;

    border: none;

    border-radius: 50%;

    background: var(--cyan);

}


/*====================================
        EQ BACKGROUND
=====================================*/

#equalizer-panel {

    background:

        radial-gradient(circle at top, #1a1d45, #06070f);

}

#equalizer-panel::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(rgba(0, 245, 255, .08),

            transparent 70%);

    pointer-events: none;

}


/*====================================
        RESPONSIVE
=====================================*/

@media(max-width:992px) {

    .eq-sliders {

        overflow-x: auto;

        justify-content: flex-start;

    }

    .slider-box {

        min-width: 70px;

    }

}

@media(max-width:768px) {

    .eq-header h2 {

        font-size: 26px;

    }

    .preset-grid {

        grid-template-columns:

            repeat(2, 1fr);

    }

    .eq-sliders {

        padding: 20px;

    }

    .eq-slider {

        width: 140px;

    }

}

@media(max-width:480px) {

    .preset-grid {

        grid-template-columns: 1fr;

    }

    .eq-slider {

        width: 120px;

    }

}



/*====================================
        CIRCULAR SPECTRUM
=====================================*/

.album-ring {

    position: relative;

}

#circle-spectrum {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

}

/*====================================
      ADVANCED AUDIO CONTROLS
=====================================*/

.advanced-controls {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 35px;

}

.control-card {

    padding: 20px;

    border-radius: 22px;

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

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

    backdrop-filter: blur(20px);

}

.control-card label {

    display: block;

    margin-bottom: 15px;

    font-family: Orbitron;

    color: var(--accent);

    letter-spacing: 2px;

    font-size: 13px;

}

.control-card input {

    width: 100%;

}

@media(max-width:768px) {

    .advanced-controls {

        grid-template-columns: 1fr;

    }

}

/*====================================
        SPATIAL AUDIO
=====================================*/

.spatial-controls {

    margin-top: 25px;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.control-card {

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

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

    border-radius: 18px;

    padding: 20px;

    backdrop-filter: blur(20px);

}

.control-card label {

    display: block;

    margin-bottom: 12px;

    color: var(--accent);

    font-family: Orbitron;

    font-size: 12px;

    letter-spacing: 2px;

}

.control-card input {

    width: 100%;

}





/*====================================
        EQ WAVE VISUALIZER
=====================================*/

.eq-wave {

    position: relative;

    width: 100%;
    height: 110px;

    margin: 18px 0;

    padding: 8px;

    border-radius: 20px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            rgba(0, 245, 255, 0.06),
            rgba(124, 58, 237, 0.10));

    border: 1px solid rgba(0, 245, 255, 0.18);

    box-shadow:

        inset 0 0 25px rgba(0, 245, 255, 0.05),

        0 0 20px rgba(0, 245, 255, 0.06);

    backdrop-filter: blur(12px);

}


/*====================================
        CANVAS
=====================================*/

#eqCanvas {

    display: block;

    width: 100%;
    height: 100%;

}


/*====================================
        SCAN LINE
=====================================*/

.eq-wave::after {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 1px;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(0, 245, 255, 0.8),
            transparent);

    box-shadow:
        0 0 10px rgba(0, 245, 255, 0.7);

    animation: eqScan 3s linear infinite;

    pointer-events: none;

}


@keyframes eqScan {

    0% {
        left: -60%;
    }

    100% {
        left: 120%;
    }

}


/*====================================
        AURORA SETTINGS PANEL
=====================================*/

#settings-panel {
    padding: 25px;
    overflow-y: auto;
   
}

/*====================================
        SETTINGS HEADER
=====================================*/

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    
}

.settings-header h2 {
    margin: 0;
    color: var(--accent);
    font-size: 1.4rem;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(0, 245, 255, .6);
}


/*====================================
        SETTINGS SECTION
=====================================*/

.settings-section {

    margin-bottom: 22px;
    margin-top: 30px;
    padding: 18px;
    border-radius: 20px;
    background:
        rgba(255, 255, 255, .045);

    border:
        1px solid rgba(0, 245, 255, .12);

    box-shadow:
        0 0 20px rgba(0, 245, 255, .05);

    backdrop-filter: blur(15px);
}

.settings-section h3 {
    margin: 0 0 15px;

    color: var(--accent);

    font-size: .85rem;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/*====================================
            SETTING ITEM
=====================================*/

.setting-item {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, .06);
}

.setting-item:last-child {
    border-bottom: none;
}


.setting-item span {
    display: block;

    color: #fff;

    font-size: .9rem;

    font-weight: 600;
}


.setting-item small {
    display: block;

    margin-top: 4px;

    color: rgba(255, 255, 255, .45);

    font-size: .72rem;
}


/*====================================
        SELECT
=====================================*/

.setting-item select {
    min-width: 110px;

    padding: 8px 12px;

    border-radius: 10px;

    border:
        1px solid rgba(0, 245, 255, .2);

    background:
        rgba(0, 0, 0, .35);

    color: var(--accent);

    outline: none;

    cursor: pointer;
}


/*====================================
        TOGGLE SWITCH
=====================================*/

.switch {
    position: relative;

    width: 46px;
    height: 24px;

    flex-shrink: 0;
}


.switch input {
    display: none;
}


.slider {
    position: absolute;

    inset: 0;

    cursor: pointer;

    border-radius: 30px;

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

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

    transition: .3s;
}


.slider::before {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    left: 2px;
    top: 2px;

    border-radius: 50%;

    background: #aaa;

    transition: .3s;
}


/* ON */

.switch input:checked+.slider {
    background:
        rgba(0, 245, 255, .25);

    border-color:
        var(--accent);

    box-shadow:
        0 0 12px rgba(0, 245, 255, .4);
}


.switch input:checked+.slider::before {
    transform: translateX(22px);

    background: var(--accent);

    box-shadow:
        0 0 12px var(--accent);
}

.settings-section:hover {

    color: #fff;

    border-color: #6f38f0;

    background:

        linear-gradient(135deg,
            rgba(255, 60, 120, .22),
            rgba(120, 0, 50, .12));

    box-shadow:

        0 0 12px #36187a,

        0 0 30px rgba(255, 70, 130, .35);

    transform:

        translateY(-2px) scale(1.02);

}


/*==============================================================
                    FUTURISTIC SELECT
==============================================================*/

#setting-accent-color {

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 145px;

    padding: 12px 42px 12px 14px;

    border-radius: 14px;

    border: 1px solid var(--panel-border);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            rgba(255, 255, 255, .02));

    backdrop-filter: blur(18px);

    color: var(--accent);

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .6px;

    cursor: pointer;

    outline: none;

    transition: .35s;

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, .05),

        0 0 15px rgba(0, 245, 255, .05);

}


/*====================================
                HOVER
=====================================*/

#setting-accent-color:hover {

    border-color: var(--accent);

    box-shadow:

        0 0 10px var(--accent),

        0 0 25px rgba(0, 245, 255, .15);

}


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

#setting-accent-color:focus {

    border-color: var(--accent);

    box-shadow:

        0 0 12px var(--accent),

        0 0 35px rgba(0, 245, 255, .25);

}


/*====================================
        OPTIONS
=====================================*/

#setting-accent-color option {

    background: #111827;

    color: #ffffff;

}


/*====================================
        WRAPPER
=====================================*/

.select-wrapper {

    position: relative;

    display: inline-block;

}




/*====================================
        CLEAR DATA BUTTON
=====================================*/

.settings-action {
    width: 100%;

    padding: 12px;

    margin-top: 5px;

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

    border-radius: 12px;

    background:
        rgba(255, 0, 80, .08);

    color: #ff527c;

    cursor: pointer;

    transition: .3s;
}


.settings-action:hover {
    background:
        rgba(255, 0, 80, .16);

    box-shadow:
        0 0 15px rgba(255, 0, 80, .2);
}



/*==============================================================
                FUTURISTIC RESET BUTTON
==============================================================*/

.reset-settings-btn {

    position: relative;

    width: 100%;

    margin-top: 18px;

    padding: 14px 18px;

    border: 1px solid rgba(255, 70, 120, .35);

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            rgba(255, 40, 90, .12),
            rgba(80, 0, 30, .05));

    color: #FF7A9C;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    overflow: hidden;

    transition: .35s ease;

    backdrop-filter: blur(14px);

    box-shadow:

        inset 0 1px 0 rgba(255, 255, 255, .05),

        0 0 15px rgba(255, 50, 100, .08);

}


/*====================================
        NEON SCAN
=====================================*/

.reset-settings-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:

        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent);

    transform: skewX(-25deg);

    transition: .7s;

}


.reset-settings-btn:hover::before {

    left: 150%;

}


/*====================================
        HOVER
=====================================*/

.reset-settings-btn:hover {

    color: #fff;

    border-color: #ff4d7d;

    background:

        linear-gradient(135deg,
            rgba(255, 60, 120, .22),
            rgba(120, 0, 50, .12));

    box-shadow:

        0 0 12px #ff4d7d,

        0 0 30px rgba(255, 70, 130, .35);

    transform:

        translateY(-2px) scale(1.02);

}


/*====================================
        CLICK
=====================================*/

.reset-settings-btn:active {

    transform:

        scale(.97);

}


/*====================================
        ICON
=====================================*/

.reset-settings-btn::after {

    content: "⚠";

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 16px;

    opacity: .75;

    transition: .3s;

}


.reset-settings-btn:hover::after {

    opacity: 1;

    transform:

        translateY(-50%) rotate(15deg) scale(1.15);

}


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

@media screen and (max-width: 768px) {

    #settings-panel {
        padding: 18px;
    }

    .settings-section {
        padding: 15px;
        border-radius: 17px;
    }

    .setting-item {
        padding: 12px 0;
    }

    .setting-item span {
        font-size: .82rem;
    }

    .setting-item small {
        font-size: .68rem;
    }

}

/*==============================
        COLOR PICKER
==============================*/

#theme-picker {

    width: 50px;

    height: 50px;

    border: none;

    outline: none;

    border-radius: 50%;

    background: none;

    cursor: pointer;

    box-shadow:
        0 0 15px var(--accent);

    transition: .35s;

}

#theme-picker:hover {

    transform: scale(1.15);

    box-shadow:

        0 0 15px var(--accent),

        0 0 35px var(--accent);

}

#theme-picker::-webkit-color-swatch {

    border: none;

    border-radius: 50%;

}

#theme-picker::-webkit-color-swatch-wrapper {

    padding: 0;

}


/*====================================
        AI SLEEP MODE
=====================================*/

.ai-sleep-mode {

    margin-top: 25px;

    padding: 20px;

    border-radius: 20px;

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

    backdrop-filter: blur(20px);

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

    transition: .35s;

}

.ai-sleep-mode:hover {

    transform: translateY(-3px);

    border-color: var(--accent);

    box-shadow:

        0 0 20px rgba(0, 245, 255, .15);

}


/*====================================
        TITLE
=====================================*/

.ai-sleep-mode h3 {

    margin-bottom: 18px;

    color: var(--accent);

    letter-spacing: 2px;

}


/*====================================
        BUTTON GRID
=====================================*/

.sleep-buttons {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}


/*====================================
        TIMER BUTTON
=====================================*/

.sleep-btn {

    padding: 12px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    color: #fff;

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

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

    transition: .3s;

}

.sleep-btn:hover {

    background: var(--accent);

    color: #000;

    box-shadow:

        0 0 20px var(--accent);

}


/*====================================
        END SONG
=====================================*/

.sleep-end-btn {

    width: 100%;

    margin-top: 15px;

    padding: 12px;

    border-radius: 12px;

    border: none;

    cursor: pointer;

    color: #fff;

    background: rgba(124, 58, 237, .18);

    transition: .3s;

}

.sleep-end-btn:hover {

    background: #7C3AED;

    box-shadow:

        0 0 20px #7C3AED;

}


/*====================================
        STATUS
=====================================*/

.sleep-status {

    margin: 18px 0;

    text-align: center;

    color: var(--accent);

    font-weight: 700;

    letter-spacing: 1px;

    text-shadow:

        0 0 12px var(--accent);

}


/*====================================
        CANCEL
=====================================*/

.cancel-sleep-btn {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    color: #ff4d6d;

    background: rgba(255, 0, 70, .08);

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

    transition: .3s;

}

.cancel-sleep-btn:hover {

    background: #ff2d55;

    color: #fff;

    box-shadow:

        0 0 20px #ff2d55;

}




/*====================================
        MUSIC INSIGHTS
=====================================*/


.stats-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    margin-top: 15px;

}

.stat-card {

    position: relative;

    overflow: hidden;

    padding: 22px;

    border-radius: 22px;

    background:

        linear-gradient(145deg,
            rgba(255, 255, 255, .07),
            rgba(255, 255, 255, .02));

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

    backdrop-filter: blur(22px);

    transition: .45s;

    isolation: isolate;

}

.stat-number {

    display: block;

    font-size: 2rem;

    font-weight: 900;

    color: var(--accent);

    letter-spacing: 2px;

    text-shadow:

        0 0 10px var(--accent),

        0 0 25px var(--accent),

        0 0 45px var(--accent);

    animation:

        neonPulse 2s infinite;

}

.stat-label {

    display: block;

    margin-top: 8px;

    font-size: .72rem;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, .72);

}

.stat-card:hover {

    transform:

        translateY(-8px) scale(1.03);

    border-color: var(--accent);

    box-shadow:

        0 0 20px rgba(0, 245, 255, .15),

        0 0 50px rgba(0, 245, 255, .08),

        inset 0 0 15px rgba(255, 255, 255, .04);

}

.stat-card:hover::after {

    top: 140%;

}

.stat-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .03) 1px,
            transparent 1px),

        linear-gradient(90deg,
            rgba(255, 255, 255, .03) 1px,
            transparent 1px);

    background-size: 22px 22px;

    opacity: .18;

    pointer-events: none;

}

.stat-card:hover::before {

    left: 150%;

}

.stat-number {

    display: block;

    font-size: 1.4rem;

    font-weight: 800;

    color: var(--accent);

    text-shadow:

        0 0 12px var(--accent);

    margin-bottom: 8px;

}

.stat-card::after {

    content: "";

    position: absolute;

    top: -100%;

    left: -40%;

    width: 180%;

    height: 45px;

    background:

        linear-gradient(transparent,

            rgba(255, 255, 255, .22),

            transparent);

    transform: rotate(-15deg);

    transition: .8s;

}

.stat-label {

    display: block;

    font-size: .75rem;

    color: rgba(255, 255, 255, .7);

    letter-spacing: 1px;

    text-transform: uppercase;

}

@keyframes neonPulse {

    0% {

        text-shadow:

            0 0 8px var(--accent);

    }

    50% {

        text-shadow:

            0 0 25px var(--accent),

            0 0 55px var(--accent);

    }

    100% {

        text-shadow:

            0 0 8px var(--accent);

    }

}

@media(max-width:768px) {

    .stats-grid {

        grid-template-columns: 1fr;

    }

}






/*====================================
        AI DASHBOARD
=====================================*/

.ai-dashboard {

    position: relative;

    overflow: hidden;

}

.ai-dashboard::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at top right,
            rgba(0, 245, 255, .08),
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(124, 58, 237, .08),
            transparent 35%);

    pointer-events: none;

}

.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}

.dashboard-header p {

    color: rgba(255, 255, 255, .55);

    font-size: .75rem;

}

.ai-status-badge {

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--accent);

    font-size: .7rem;

    letter-spacing: 2px;

}

.pulse-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--accent);

    box-shadow: 0 0 12px var(--accent);

    animation: pulse 1.5s infinite;

}

@keyframes pulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.8);
        opacity: .4;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

/* XP */

.xp-card {

    margin: 20px 0;

}

.xp-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 8px;

}

.xp-bar {

    height: 10px;

    border-radius: 20px;

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

    overflow: hidden;

}

#xp-fill {

    width: 0%;

    height: 100%;

    background: linear-gradient(90deg,
            var(--accent),
            #ffffff);

    box-shadow: 0 0 15px var(--accent);

    transition: .5s;

}

/* AI Report */

.ai-report-card {

    margin-top: 25px;

    padding: 18px;

    border-radius: 18px;

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

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

}

.ai-report-card h4 {

    margin-bottom: 10px;

    color: var(--accent);

}

.ai-report-card p {

    line-height: 1.8;

    color: #ddd;

}

/*====================================
        AI RECOMMENDATION
=====================================*/

.recommendation-card {

    margin-top: 20px;

    padding: 18px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .05),
            rgba(255, 255, 255, .02));

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

    backdrop-filter: blur(18px);

}

.recommendation-card h4 {

    color: var(--accent);

    margin-bottom: 15px;

}

.recommend-song {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .05);

    transition: .3s;

    gap: 12px;
    
    margin-bottom: 12px;

}

.recommend-song:last-child {

    border-bottom: none;

}

.recommend-song:hover {

    padding-left: 10px;

    color: var(--accent);

}

.recommend-song span {

    font-size: .8rem;

}

.recommend-cover {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    object-fit: cover;

    box-shadow:

        0 0 15px var(--accent);

}

.recommend-song div {

    flex: 1;

}

.recommend-song strong {

    display: block;

    color: white;

}

.recommend-song small {

    color: #aaa;

}

.recommend-play {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: var(--accent);

    color: white;

    cursor: pointer;

    transition: .3s;

}

.recommend-play:hover {

    transform: scale(1.15);

    box-shadow:

        0 0 20px var(--accent);

}



/*=====================================================
                AURORA CAST — FUTURISTIC UI
=====================================================*/

.aurora-cast-setting {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 20px;
    padding: 14px 16px;

    border: 1px solid rgba(0, 255, 255, 0.18);
    border-radius: 18px;

    background:
        linear-gradient(135deg,
            rgba(0, 255, 255, 0.055),
            rgba(120, 50, 255, 0.09));

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/*=====================================================
                    AURORA GLOW
=====================================================*/

.aurora-cast-setting::before {
    content: "";

    position: absolute;

    top: -80%;
    left: -20%;

    width: 140%;
    height: 260%;

    background:
        radial-gradient(circle,
            rgba(0, 255, 255, 0.08),
            transparent 55%);

    pointer-events: none;

    opacity: 0.7;

    animation: auroraCastGlow 5s ease-in-out infinite;
}


@keyframes auroraCastGlow {

    0% {
        transform: translateX(-10%);
        opacity: 0.35;
    }

    50% {
        transform: translateX(10%);
        opacity: 0.8;
    }

    100% {
        transform: translateX(-10%);
        opacity: 0.35;
    }

}


/*=====================================================
                    HOVER
=====================================================*/

.aurora-cast-setting:hover {

    transform: translateY(-2px);

    border-color:
        rgba(0, 255, 255, 0.55);

    background:
        linear-gradient(135deg,
            rgba(0, 255, 255, 0.09),
            rgba(120, 50, 255, 0.13));

    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.12),
        0 0 35px rgba(120, 50, 255, 0.10),
        inset 0 0 20px rgba(0, 255, 255, 0.035);
}


/*=====================================================
                    CAST ICON
=====================================================*/

.aurora-cast-setting .setting-icon {

    position: relative;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #00ffff;

    background:
        rgba(0, 255, 255, 0.07);

    border:
        1px solid rgba(0, 255, 255, 0.3);

    box-shadow:
        0 0 12px rgba(0, 255, 255, 0.18),
        inset 0 0 12px rgba(0, 255, 255, 0.04);

    z-index: 2;

    transition: 0.3s ease;
}


.aurora-cast-setting:hover .setting-icon {

    color: #ffffff;

    border-color:
        rgba(0, 255, 255, 0.75);

    box-shadow:
        0 0 18px rgba(0, 255, 255, 0.4),
        0 0 35px rgba(0, 255, 255, 0.12);

    transform: scale(1.06);
}


/*=====================================================
                    CAST INFO
=====================================================*/

.aurora-cast-setting .setting-info {

    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;

    gap: 4px;

    z-index: 2;
}


.aurora-cast-setting .setting-info strong {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #ffffff;

    text-shadow:
        0 0 8px rgba(0, 255, 255, 0.35);
}


.aurora-cast-setting .setting-info span {

    font-size: 8px;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.48);

    transition: 0.3s ease;
}


/*=====================================================
                CONNECT BUTTON
=====================================================*/

.cast-connect-btn {

    position: relative;

    z-index: 3;

    min-width: 76px;

    padding: 8px 12px;

    border: 1px solid rgba(0, 255, 255, 0.35);

    border-radius: 10px;

    background:
        rgba(0, 255, 255, 0.055);

    color: #00ffff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.2px;

    cursor: pointer;

    overflow: hidden;

    transition:
        0.3s ease;
}


.cast-connect-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

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

    transition: 0.5s ease;
}


.cast-connect-btn:hover::before {

    left: 100%;
}


.cast-connect-btn:hover {

    color: #ffffff;

    border-color:
        rgba(0, 255, 255, 0.8);

    background:
        rgba(0, 255, 255, 0.12);

    box-shadow:
        0 0 14px rgba(0, 255, 255, 0.3),
        0 0 30px rgba(0, 255, 255, 0.08);

    transform: translateY(-1px);
}


/*=====================================================
                CONNECTED STATE
=====================================================*/

.aurora-cast-setting.connected {

    border-color:
        rgba(0, 255, 255, 0.7);

    background:
        linear-gradient(135deg,
            rgba(0, 255, 255, 0.1),
            rgba(80, 50, 255, 0.14));

    box-shadow:
        0 0 18px rgba(0, 255, 255, 0.18),
        inset 0 0 25px rgba(0, 255, 255, 0.04);
}


.aurora-cast-setting.connected .setting-info span {

    color: #00ffff;

    text-shadow:
        0 0 8px rgba(0, 255, 255, 0.6);

}


/*=====================================================
                CONNECTED ICON PULSE
=====================================================*/

.aurora-cast-setting.connected .setting-icon {

    animation:
        auroraCastPulse 1.8s ease-in-out infinite;
}


@keyframes auroraCastPulse {

    0%,
    100% {

        box-shadow:
            0 0 10px rgba(0, 255, 255, 0.25),
            inset 0 0 10px rgba(0, 255, 255, 0.04);

    }

    50% {

        box-shadow:
            0 0 22px rgba(0, 255, 255, 0.65),
            0 0 40px rgba(120, 50, 255, 0.2),
            inset 0 0 15px rgba(0, 255, 255, 0.08);

    }

}


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

@media (max-width: 600px) {

    .aurora-cast-setting {

        padding: 12px;

        gap: 10px;

        border-radius: 15px;

    }

    .aurora-cast-setting .setting-icon {

        width: 38px;
        height: 38px;

        border-radius: 11px;

    }

    .aurora-cast-setting .setting-info strong {

        font-size: 10px;

        letter-spacing: 1.4px;

    }

    .aurora-cast-setting .setting-info span {

        font-size: 7px;

    }

    .cast-connect-btn {

        min-width: 65px;

        padding: 7px 9px;

        font-size: 7px;

    }

}