@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

background:#090909;

font-family:'Cinzel',serif;

color:#ffffff;

overflow-x:hidden;

}

/* =========================
Scrollbar
========================= */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#8b0000;

border-radius:10px;

}

/* =========================
Sidebar
========================= */

.sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#0f0f0f;

border-right:1px solid #2c2c2c;

padding:20px;

overflow-y:auto;

z-index:1000;

}

.logo-box{

text-align:center;

margin-bottom:30px;

}

.logo-text{

font-size:38px;

font-weight:900;

color:#d40000;

text-shadow:
0 0 10px #ff0000,
0 0 20px #ff0000,
0 0 40px #ff0000;

}

.logo-sub{

color:#999;

font-size:12px;

letter-spacing:2px;

}

.menu-list{

list-style:none;

padding:0;

}

.menu-list li{

margin-bottom:10px;

}

.menu-list li a{

display:block;

padding:12px;

background:#161616;

color:#ffffff;

text-decoration:none;

border-radius:8px;

transition:.3s;

}

.menu-list li a:hover{

background:#8b0000;

transform:translateX(5px);

}

.menu-stats{

margin-top:30px;

}

.stat-box{

background:#161616;

padding:15px;

margin-bottom:10px;

border-radius:10px;

}

.stat-title{

display:block;

color:#999;

font-size:13px;

}

.stat-number{

font-size:22px;

font-weight:bold;

color:#ffffff;

}

/* =========================
Main Content
========================= */

.main-content{

margin-left:280px;

padding:30px;

}

/* =========================
Top Bar
========================= */

.top-bar{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.page-title{

font-size:34px;

color:#ffffff;

}

.search-box{

width:320px;

}

.search-box input{

width:100%;

padding:12px;

background:#181818;

border:1px solid #444;

border-radius:10px;

color:#fff;

}

.search-box input:focus{

outline:none;

border-color:#c00000;

}

/* =========================
Section Title
========================= */

.section-title{

font-size:28px;

margin-bottom:20px;

color:#d40000;

text-shadow:0 0 10px red;

}

/* =========================
Album Cards
========================= */

.album-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(220px,1fr));

gap:25px;

}

.album-card{

background:#151515;

border-radius:15px;

overflow:hidden;

transition:.3s;

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

}

.album-card:hover{

transform:translateY(-8px);

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

}

.album-card img{

width:100%;

height:250px;

object-fit:cover;

}

.album-info{

padding:15px;

}

.album-title{

font-size:20px;

margin-bottom:8px;

}

.album-btn{

display:inline-block;

padding:8px 15px;

background:#8b0000;

color:white;

text-decoration:none;

border-radius:8px;

}

/* =========================
Song Cards
========================= */

.song-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(260px,1fr));

gap:25px;

}

.song-card{

background:#151515;

border-radius:15px;

overflow:hidden;

padding-bottom:15px;

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

transition:.3s;

cursor:pointer;

}

.song-card.playing{

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

transform:translateY(-3px);

}

.song-card a{

display:block;

text-decoration:none;

color:inherit;

}

.song-card:hover{

transform:translateY(-5px);

}

.song-card img{

width:100%;

height:250px;

object-fit:cover;

}

.song-info{

padding:15px;

}

.song-name{

font-size:18px;

margin-bottom:5px;

}

.artist-name{

font-size:13px;

color:#999;

margin-bottom:10px;

}

.song-player{

padding:0 15px;

}

.song-player audio{

width:100%;

}

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

.btn-gothic{

background:#8b0000;

color:white;

border:none;

padding:10px 18px;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.btn-gothic:hover{

background:#c00000;

}

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

.table-dark{

background:#111;

color:white;

}

.table-dark th{

background:#1a1a1a;

}

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

.form-control{

background:#161616;

border:1px solid #333;

color:white;

}

.form-control:focus{

background:#1c1c1c;

color:white;

border-color:#8b0000;

box-shadow:none;

}

/* =========================
Dashboard Cards
========================= */

.dashboard-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:30px;

}

.dashboard-card{

background:#151515;

padding:20px;

border-radius:15px;

text-align:center;

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

}

.dashboard-card h3{

font-size:16px;

color:#999;

}

.dashboard-card h2{

font-size:34px;

color:#fff;

}

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

.footer{

margin-top:60px;

text-align:center;

padding:20px;

color:#666;

}

/* =========================
Mobile
========================= */

@media(max-width:768px){

.sidebar{

position:relative;

width:100%;

height:auto;

}

.main-content{

margin-left:0;

padding:15px;

}

.top-bar{

flex-direction:column;

gap:15px;

}

.search-box{

width:100%;

}

}

.sidebar{

position:fixed;

left:0;

top:0;

width:260px;

height:100vh;

background:#0f0f0f;

border-right:1px solid #2c2c2c;

padding:20px;

overflow-y:auto;

}

.logo-box{

text-align:center;

margin-bottom:40px;

}

.logo-text{

color:#c00000;

font-size:34px;

font-weight:bold;

text-shadow:0 0 20px #ff0000;

}

.logo-sub{

color:#888;

font-size:13px;

}

.menu-list{

list-style:none;

padding:0;

}

.menu-list li{

margin-bottom:10px;

}

.menu-list li a{

display:block;

text-decoration:none;

color:#fff;

background:#181818;

padding:12px;

border-radius:8px;

transition:.3s;

}

.menu-list li a:hover{

background:#8b0000;

}

.menu-stats{

margin-top:40px;

}

.stat-box{

background:#181818;

padding:12px;

margin-bottom:10px;

border-radius:8px;

}

.stat-title{

display:block;

color:#999;

}

.stat-number{

color:#fff;

font-size:20px;

font-weight:bold;

}

.album-header{

display:flex;

gap:30px;

align-items:center;

background:#151515;

padding:20px;

border-radius:15px;

margin-bottom:30px;

}

.album-header img{

width:250px;

height:250px;

object-fit:cover;

border-radius:15px;

}

.album-detail h2{

font-size:40px;

margin-bottom:15px;

color:#fff;

}

.album-detail p{

font-size:16px;

color:#aaa;

}

/* =========================
   BOLL GAME PLAYER
========================= */

.player-wrapper{

display:flex;

align-items:center;

gap:30px;

background:linear-gradient(
135deg,
#0d0d0d,
#1a1a1a
);

border:1px solid #330000;

border-radius:20px;

padding:25px;

margin-bottom:40px;

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

overflow:hidden;

}

.player-cover{

flex-shrink:0;

}

.player-cover img{

width:220px;

height:220px;

object-fit:cover;

border-radius:15px;

border:2px solid #8b0000;

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

}

.player-info{

flex:1;

}

.player-info h3{

font-size:34px;

font-weight:700;

margin-bottom:10px;

color:#ffffff;

text-shadow:
0 0 10px rgba(255,0,0,.4);

}

.player-info p{

font-size:16px;

color:#999;

margin-bottom:20px;

letter-spacing:1px;

}

.player-info audio{

width:100%;

height:54px;

}

.now-playing{

display:inline-block;

background:#8b0000;

color:#fff;

padding:6px 15px;

border-radius:30px;

font-size:12px;

font-weight:bold;

letter-spacing:1px;

margin-bottom:15px;

}

.player-stats{

margin-top:10px;

color:#999;

font-size:14px;

}

/* Audio Theme */

audio{

filter:
invert(1)
hue-rotate(180deg);

}

/* =========================
   Mobile Player
========================= */

@media(max-width:768px){

.player-wrapper{

flex-direction:column;

text-align:center;

}

.player-cover img{

width:100%;

max-width:280px;

height:auto;

}

.player-info h3{

font-size:24px;

}

}

.logout-btn{

background:#700000 !important;

border:1px solid #ff0000;

}

.logout-btn:hover{

background:#aa0000 !important;

}

.song-card{
    transition:0.3s;
    cursor:pointer;
}

.song-card.playing{
    transform:translateY(-5px);
    box-shadow:
    0 0 15px #ff0000,
    0 0 30px #ff0000,
    0 0 50px #8b0000;

    border:1px solid #ff0000;
}

.song-card.playing img{
    filter:brightness(1.1);
}

.song-card.playing{
    position:relative;
    border:1px solid #ff0000;
    animation:neonPulse 1s infinite;
}

.song-card.playing img{
    animation:imagePulse 1s infinite;
}

@keyframes neonPulse{

    0%{
        box-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000;
    }

    50%{
        box-shadow:
        0 0 30px #ff0000,
        0 0 60px #ff0000,
        0 0 90px #ff0000;
    }

    100%{
        box-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000;
    }

}

@keyframes imagePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

.song-card.playing::after{

    content:"";

    position:absolute;

    left:10px;
    right:10px;
    bottom:10px;

    height:5px;

    border-radius:20px;

    background:
    linear-gradient(
    90deg,
    #ff0000,
    #ff6666,
    #ff0000
    );

    background-size:300% 100%;

    animation:
    equalizer 1s linear infinite;

}

@keyframes equalizer{

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

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

}

/* =========================
NOW PLAYING EFFECT
========================= */

.song-card.playing{

    position:relative;

    border:1px solid #ff0000;

    animation:neonPulse 1s infinite;

}

.song-card.playing img{

    animation:imagePulse 1s infinite;

}

@keyframes neonPulse{

    0%{

        box-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000;

    }

    50%{

        box-shadow:
        0 0 30px #ff0000,
        0 0 60px #ff0000,
        0 0 90px #ff0000;

    }

    100%{

        box-shadow:
        0 0 10px #ff0000,
        0 0 20px #ff0000;

    }

}

@keyframes imagePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

.song-card.playing{
    border:2px solid #00ffff;
    box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 40px #00ffff,
    0 0 80px #00ffff;

    transform:translateY(-5px);
    transition:all .3s;
}

/* =========================
SPOTIFY + CYBERPUNK UPGRADE
========================= */

.song-card.playing{
    border:2px solid #00ffff !important;
    box-shadow:
    0 0 10px #00ffff,
    0 0 20px #00ffff,
    0 0 40px #00ffff,
    0 0 80px #00ffff !important;
}

.album-card,
.song-card,
.dashboard-card{
    backdrop-filter: blur(8px);
}

@media(max-width:768px){

    .album-grid,
    .song-grid{
        grid-template-columns:1fr;
    }

    .album-card img,
    .song-card img{
        height:auto;
    }

    .page-title{
        font-size:24px;
        text-align:center;
    }
}