/* ======================================================
BASE
====================================================== */

:root{
--bg:#020617;
--panel:#142335;
--panel2:#13283a;
--player:#1e3247;
--border:#1a2b3c;
--accent:#28c0c1;
--text:#e6edf3;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:'Exo 2', Arial, sans-serif;
background:var(--bg);
color:var(--text);
font-size:15px;
line-height:1.5;
}

img{
display:block;
max-width:100%;
}

h1,h2,h3,h4{
font-weight:600;
letter-spacing:0.3px;
}

a,
a:hover,
a:focus,
a:active{
    text-decoration:none;
}

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

.site{
max-width:1400px;
margin:0 auto;
}

/* ======================================================
TOP BAR
====================================================== */

.topbar{
width:100%;
background:var(--panel2);
}

.topbar-inner{
max-width:1400px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 25px;
font-size:14px;
}

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

.top-header{
background:#020617;
margin:0;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:190px;
margin-left:20px;
}

.header-art img{
height:240px;
}

.hero-rotator{
position:relative;
width:260px;
height:240px;
display:flex;
align-items:flex-end;
justify-content:flex-end;
overflow:hidden;
}

.hero-rotator img{
position:absolute;
right:0;
bottom:0;
max-height:100%;
width:auto;
opacity:1;
transition:opacity 1s ease-in-out;
}

.hero-rotator img.fade-out{
opacity:0;
}

/* ======================================================
MAIN GRID
====================================================== */

.main-grid{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:0;
}

.content-area{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:15px;
    min-width:0;
    padding:15px;
}

.content{
    background:#fff;
    min-width:0;
}


/* ======================================================
TOP 10
====================================================== */

.top10-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:30px;
    position:relative;
}

.top10-list::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:rgba(255,255,255,0.08);
}

.top10{
    background:#0b1a2a;
    border-radius:6px;
    padding:16px 18px;
    color:#fff;
}
.top10-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px;
}

.top10 h3{
    margin:0 0 14px;
    font-size:18px;
    font-weight:700;
    color:#d13061;
}
.top10-update{
    font-size:11px;
    color:#94a3b8;
    opacity:0.8;
    letter-spacing:0.3px;
}

.top10-item{
    display:grid;
    grid-template-columns:40px 1fr 50px;
    align-items:center;
    gap:10px;
    padding:8px 0;
}

.top10-num{
    font-size:20px;
    font-weight:700;
    width:32px;
    color:#94a3b8;
    text-align:right;
}

.top10-meta{
    display:flex;
    flex-direction:column;
}

.top10-meta strong{
    font-size:14px;
    font-weight:600;
    color:#fff;
    line-height:1.2;
}

.top10-meta span{
    font-size:12px;
    color:#94a3b8;
    line-height:1.2;
}

.top10-list > div{
    display:flex;
    flex-direction:column;
}

.top10-move{
    font-size:12px;
    min-width:40px;
    text-align:right;
}

.top10-up{
    color:#22c55e;
}

.top10-down{
    color:#ef4444;
}

.top10-new{
    color:#f59e0b;
}

.top10-same{
    color:#94a3b8;
}



/* ======================================================
SIDEBAR
====================================================== */

.sidebar{
background:var(--panel);
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar li{
padding:0;
}

.sidebar a{
display:flex;
align-items:left;
padding:14px 16px;
color:var(--text);
text-decoration:none;
width:100%;
border-bottom:1px solid #080f18;
font-weight:500;
}

.sidebar a:hover{
background:#142335;
border-left:3px solid #080f18;
}

.nav-link{
display:flex;
flex-direction:column;
}

.nav-title{
font-size:14px;
font-weight:500;
color:#fff;
}

.nav-sub{
font-size:11px;
opacity:.6;
color:#9ca3af;
margin-top:2px;
}

/* ======================================================
PLAYER BAR
====================================================== */

.player-bar{
display:flex;
justify-content:space-between;
align-items:center;
background:var(--player);
padding:12px 20px;
border-bottom:1px solid var(--border);
}
.np-controls{
display:flex;
align-items:center;
gap:15px;
}

.np-controls i{
cursor:pointer;
opacity:0.85;
transition:0.2s;
}

.np-controls i:hover{
opacity:1;
color:var(--accent);
}

.np-controls input{
width:90px;
}

#play-btn{
background:#141c30;
border:none;
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
color:var(--accent);
}

.player-icon{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:50%;
background:#141c30;
color:var(--accent);
text-decoration:none;
transition:.2s;
}

/* ======================================================
NOW PLAYING BAR
====================================================== */

.now-playing-bar{
display:flex;
justify-content:space-between;
align-items:center;
background:#24394d;
padding:12px 15px;
border-bottom:1px solid var(--border);
width:100%;
}

.np-left{
display:flex;
align-items:center;
gap:12px;
}

#np-art{
width:75px;
height:65px;
flex-shrink:0;
border-radius:3px;
border:solid 2px #141c30;
}

.np-meta{
display:flex;
flex-direction:column;
justify-content:center;
}

#np-title{
font-size:15px;
font-weight:600;
color:#fff;
line-height:1.2;
}

#np-artist{
font-size:13px;
opacity:.75;
color:#fff;
line-height:1.2;
margin-top:2px;
}
.np-request{
font-size:10px;
color:#a8a8a8;
margin-top:4px;
line-height:1.2;
text-transform: uppercase;
}

/* ======================================================
MAIN CONTENT
====================================================== */

#main-content{
background:#ffffff;
color:#000;
}

/* ======================================================
RIGHT SIDEBAR
====================================================== */

.rightbar{
background:#ffffff;
border-left:1px solid #e5e7eb;
padding:15px;
width:300px;
}

.rightbar h3{
margin-top:0;
font-size:18px;
color:#0f2233;
}

/* ======================================================
REQUEST LIST
====================================================== */

.request-item{
display:flex;
align-items:center;
gap:10px;
padding:10px 0;
border-bottom:1px solid #ddd;
}

.request-item img{
width:40px;
height:40px;
object-fit:cover;
}

.request-item strong{
display:block;
font-size:14px;
}

.request-item span{
font-size:12px;
opacity:.7;
}

.request-btn{
margin-top:15px;
display:block;
width:100%;
background:#23c2c3;
color:#fff;
text-align:center;
padding:10px;
font-weight:600;
letter-spacing:0.5px;
cursor:pointer;
border-radius:6px;
}

/* ======================================================
HERO (HOME)
====================================================== */

.hero{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:15px;
    margin-bottom:20px;
    align-items:stretch;
}

.hero-main{
    position:relative;
    overflow:hidden;
    height:320px;
}

.hero-main img{
    width:100%;
    height:100%;
}

.np-badge{
    position:absolute;
    top:2px;
    left:2px;
    background:#d33661;
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:5px 10px;
    border-radius:3px;
}

.hero-request{
    margin-top:6px;
    font-size:10px;
    color:#f472b6;
    font-weight:500;
    text-transform: uppercase;
}

/* ===============================
BOTTOM INFO BLOCK
=============================== */

.hero-info{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:8px 10px;
    background:rgba(0,0,0,0.6);
    color:#fff;
}

.hero-chart{
    font-size:11px;
    color:#f0f0f0;
    margin-bottom:4px;
    font-weight:500;

}

.hero-meta-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
    font-size:11px;
}

.hero-meta-left{
    color:#e5e7eb;
}

.hero-meta-right{
    color:#f0f0f0;
    font-weight:400;
    white-space:nowrap;
}

.hero-title{
    font-size:20px;
    font-weight:700;
    line-height:1.2;
}

.hero-extra{
    font-size:11px;
    color:#ccc;
    margin-top:3px;
}

.xr-typing-bar{
    margin:15px 0;
    padding:12px 16px;
    background:linear-gradient(90deg,#0b1a2a,#13283a);
    border-left:4px solid #0585c3;
    border-radius:6px;
    font-size:14px;
    color:#e6edf3;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:6px;
}

.xr-cursor{
    color:#1ec8c8;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%,50%,100%{opacity:1;}
    25%,75%{opacity:0;}
}


/* =========================
SHUFFLE / RANDOM SECTION
========================= */

.shuffle-title{
    margin-bottom:12px;
    font-size:18px;
    font-weight:600;
}

.shuffle-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.shuffle-card{
    background:#0f2233;
    border-radius:8px;
    overflow:hidden;
    transition:.2s;
    opacity:0;
    transform:translateY(10px);
}
.shuffle-card.show{
    opacity:1;
    transform:translateY(0);
    transition:all .4s ease;
}
.shuffle-card img{
    width:100%;
    height:110px;
    display:block;
}

.shuffle-meta{
    padding:10px;
}

.shuffle-meta strong{
    display:block;
    font-size:14px;
    color:#ffffff;
    font-weight:600;
}

.shuffle-meta span{
    font-size:12px;
    color:#9ca3af;
}

.shuffle-card:hover{
    transform:translateY(-2px);
}

#shuffle-area{
    opacity:1;
    transition:opacity .25s ease;
}

#shuffle-area.fade-out{
    opacity:0;
}

#shuffle-area.fade-in{
    opacity:1;
}

/* ===============================
RIGHT SIDE (UPCOMING)
=============================== */

.hero-side{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.hero-card{
    position:relative;
    overflow:hidden;
}

.hero-card img{
    width:100%;
    height:152px;
    display:block;
}

.hero-card .overlay{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:3px 6px;
    background:rgba(0,0,0,0.6);
}

.hero-card strong{
    display:block;
    color:#fff;
    font-size:11px;
    font-weight:600;
    margin-bottom:4px;
}

.hero-tags{
    display:flex;
    gap:2px;
    flex-wrap:wrap;
}

.hero-tag{
    font-size:8px;
    padding:2px 4px;
    background:#2563eb;
    color:#fff;
    font-weight:500;
}

.hero-tag.alt{
    background:#374151;
}

.top-right{
    position:absolute;
    top:6px;
    right:6px;
    background:rgba(0,0,0,0.6);
    padding:4px 6px;
    border-radius:4px;
    font-size:12px;
}


/* ======================================================
SHUFFLE PICKS
====================================================== */

.shuffle{
margin-top:20px;
}

.shuffle h3{
margin-bottom:10px;
}

.shuffle-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.shuffle-card img{
width:100%;
}

.shuffle-card strong{
display:block;
font-size:14px;
margin-top:5px;
}

.shuffle-card span{
font-size:12px;
opacity:.7;
}

/* ======================================================
RECENT REQUESTS
====================================================== */

.request-item{
display:flex;
align-items:center;
gap:12px;
padding:10px;
border-bottom:1px solid #f7f7f7;
}

.request-item img{
width:48px;
height:48px;
object-fit:cover;
border-radius:4px;
}

.request-meta{
flex:1;
overflow:hidden;
}

.request-meta strong{
display:block;
font-size:14px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.request-meta span{
font-size:12px;
opacity:.7;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.request-status{
font-size:11px;
margin-top:2px;
opacity:.8;
}

.request-play{
background:none;
border:none;
font-size:16px;
cursor:pointer;
opacity:.8;
transition:0.2s;
}

.request-play:hover{
opacity:1;
transform:scale(1.1);
}

.btn-processing{ color:#fbbf24; }  /* amber */
.btn-queued{ color:#60a5fa; }      /* blue */
.btn-played{ color:#34d399; }      /* green */
.btn-ignored{ color:#f87171; }     /* red */

.request-meta strong{
color:#1f2937;
font-weight:600;
font-size:14px;
}

.request-meta span{
color:#6b7280;
font-size:12px;
}

.request-status{
font-size:11px;
margin-top:2px;
}


/* ======================================================
SITE STATS
====================================================== */

.site-stats{
margin-top:15px;
padding-top:12px;
border-top:1px solid #c5c5c5;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.stat{
background:#ffffff;
border:1px solid #e5e7eb;
padding:10px;
border-radius:6px;
text-align:center;
}

.stat span{
display:block;
font-size:11px;
color:#6b7280;   /* darker grey */
margin-bottom:2px;
}

.stat strong{
font-size:16px;
color:#111827;   /* strong dark */
font-weight:600;
}

/* ======================================================
SIDEBAR PROMOS
====================================================== */

.sidebar-promo{
margin-top:15px;
border-radius:6px;
overflow:hidden;
background:#fff;
transition:0.6s ease;
}

.sidebar-promo img{
width:100%;
display:block;
transition:opacity .6s ease;
}

.sweeper-player{
margin-top:20px;
}

.sweeper-controls{
display:flex;
gap:10px;
margin-bottom:10px;
}

.sweeper-controls button{
background:var(--panel);
color:var(--accent);
border:none;
padding:10px;
border-radius:6px;
cursor:pointer;
}

.sweeper-progress{
width:100%;
height:6px;
background:#ddd;
margin:10px 0;
border-radius:4px;
overflow:hidden;
}

#progress{
height:100%;
width:0%;
background:var(--accent);
}

#sweeper-playlist{
list-style:none;
padding:0;
margin-top:15px;
}

#sweeper-playlist li{
padding:16px 18px;
border-bottom:1px solid #e5e7eb;
cursor:pointer;
color:#1f2937;
transition:0.2s ease;
}

#sweeper-playlist li:hover{
background:#f5f7fa;
}

#sweeper-playlist li.active{
background:#e9edf2;
font-weight:600;
}

/* ======================================================
CHART LIST (GENERIC)
====================================================== */

.chart-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.chart-item{
    display:grid;
    grid-template-columns: 90px 140px 1fr;
    gap:15px;
    background:#fcfcfc;
    border-bottom:1px solid #e5e7eb;
    padding:12px;
    transition:.2s;
    margin-bottom:4px;
}

.chart-rank{
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.chart-position{
    font-size:36px;
    font-weight:700;
    color:#111827;
}

.chart-move{
    font-size:18px;
    margin-bottom:5px;
}

.chart-art img{
    width:100%;
    height:120px;
    max-height:120px;
    border-radius:6px;
}

.chart-title{
    font-size:18px;
    margin:0;
}

.chart-title a{
    color:#111827;
    text-decoration:none;
}

.chart-artist{
    font-size:14px;
    color:#6b7280;
    opacity:.7;
    margin-bottom:8px;
}

/* meta tags */
.chart-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.chart-tag{
    font-size:12px;
    background: rgba(255,255,255,0.05);
    padding:4px 8px;
    border-radius:4px;
    color:#6b7280;
}

/* movement colours */
.chart-move .fa-arrow-circle-up{ color:#22c55e; }
.chart-move .fa-arrow-circle-down{ color:#ef4444; }
.chart-move .fa-circle{ color:#9ca3af; }
.chart-move .fa-arrow-circle-right{ color:#f59e0b; }




.xr-banner{
    margin-top:15px;
    border-radius:10px;
    overflow:hidden;
}

.xr-banner img{
    width:100%;
    display:block;
    transition:transform .25s ease;
}

.xr-404{
    max-width:600px;
    margin:60px auto;
    padding:40px 20px;
    text-align:center;
}

.xr-404 h1{
    font-size:70px;
    margin:0;
}

.xr-404 h2{
    font-size:24px;
    margin-bottom:20px;
}

.xr-404 p{
    font-size:15px;
    line-height:1.6;
    margin:10px 0;
    opacity:.85;
}

.xr-404 .highlight{
    font-weight:600;
    opacity:1;
    margin:15px 0;
}

.xr-404-actions{
    margin-top:25px;
}

.xr-404 .btn-primary{
    padding:12px 18px;
    border-radius:6px;
    text-decoration:none;
    background:var(--accent);
    color:#000;
    display:inline-block;
}

.nav-link.request-btn{
    display:block;
    text-align:center;
    padding:10px;
    background:#1e3247;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    border:1px solid var(--border);
    transition:.2s;
}

.nav-link.request-btn:hover{
    background:#24394d;
}



/* ======================================================
SONG PAGE
====================================================== */

.song-header{
display:flex;
gap:15px;
align-items:center;
padding:15px;
}

.song-art{
width:240px;
height:240px;
border-radius:6px;
flex-shrink:0;
}

.song-meta h2{
margin:0;
font-size:24px;
font-weight:600;
color:#111827;
}


.song-stats-row{
display:flex;
gap:15px;
margin-top:6px;
font-size:13px;
opacity:.8;
}

.song-stats-row i{
margin-right:5px;
color:var(--accent);
}

.song-last{
margin-top:6px;
font-size:12px;
opacity:.6;
}

.song-actions{
display:flex;
flex-direction:column;
gap:10px;
}

.song-actions .btn{
width:100%;
text-align:left;
}

.info-list{
list-style:none;
padding:0;
margin:0;
font-size:13px;
}

.info-list li{
padding:6px 0;
border-bottom:1px solid #f7f7f7;
}

.tag-list{
display:flex;
flex-wrap:wrap;
gap:6px;
}

.tag-list span{
background:#f5f5f5;
padding:4px 8px;
border-radius:4px;
font-size:12px;
}

.lyrics-box{
font-size:13px;
line-height:1.5;
opacity:.9;
max-height:260px;
overflow:auto;
padding-right:5px;
}

.no-lyrics{
opacity:.6;
display:block;
font-size:13px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.song-card{
background:#142335;
padding:10px;
border-radius:6px;
font-size:13px;
color:#fff;
text-decoration:none;
transition:0.2s;
}

.song-card:hover{
background:#1e3247;
}

.rightbar .card{
margin-bottom:15px;
padding:12px;
}

.card h3{
font-size:14px;
margin:0 0 10px;
display:flex;
align-items:center;
gap:8px;
}

@media(max-width:900px){
.song-header{
flex-direction:column;
align-items:flex-start;
}

.song-art{
width:100%;
height:auto;
max-height:220px;
}
}

/* ======================================================
BUTTON SYSTEM (GLOBAL)
====================================================== */

.btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;

width:100%;
padding:10px;

border-radius:6px;
border:none;
cursor:pointer;

font-size:14px;
font-weight:600;
letter-spacing:0.3px;

transition:0.2s ease;
text-decoration:none;

background:#23c2c3;
color:#fff;
}

/* HOVER */
.btn:hover{
background:#1aa5a6;
transform:translateY(-1px);
}

/* CLICK */
.btn:active{
transform:translateY(0);
}

/* DISABLED */
.btn:disabled{
opacity:0.6;
cursor:not-allowed;
transform:none;
}

/* ======================================================
VARIANTS
====================================================== */

/* LIKE */
.btn-like{
background:#e74c3c;
}

.btn-like:hover{
background:#c0392b;
}

/* UNLIKE */
.btn-alt{
background:#555;
}

.btn-alt:hover{
background:#444;
}

/* LOGIN */
.btn-login{
background:#3b82f6;
}

.btn-login:hover{
background:#2563eb;
}

/* REQUEST */
.btn-request{
background:#23c2c3;
}

.btn-request:hover{
background:#1aa5a6;
}

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

.btn i{
font-size:14px;
}

/* ======================================================
STACK IN RIGHTBAR
====================================================== */

.song-actions{
display:flex;
flex-direction:column;
gap:10px;
}

/* ======================================================
REQUEST RESULT (DEDICATION UI)
====================================================== */

#request-result{
margin-top:15px;
}

.req-success{
background:linear-gradient(to right,#23c2c3,#1aa5a6);
color:#fff;
padding:10px;
border-radius:6px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:12px;
}

.req-message{
font-size:14px;
color:#111827;
margin-bottom:12px;
padding:10px;
background:#edffe9;
border-radius:4px;
border:solid 1px #f5f5f5;
}

.req-message strong{
color:#111827;
}

.req-sub{
font-size:13px;
opacity:.8;
margin-bottom:8px;
}

.req-textarea{
width:100%;
min-height:80px;
padding:10px;
border-radius:6px;
border:1px solid #f7f7f7;
background:#f5f5f5;
color:#111827;
font-size:13px;
resize:none;
outline:none;
transition:0.2s;
}

.req-textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 2px rgba(35,194,195,0.2);
}

.req-submit{
margin-top:10px;
width:100%;
padding:10px;
border-radius:6px;
border:none;
background:#23c2c3;
color:#fff;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

.req-submit:hover{
background:#1aa5a6;
transform:translateY(-1px);
}

/* ======================================================
REQUEST ERROR / BLOCKED
====================================================== */

.req-error{
background:linear-gradient(to right,#ef4444,#dc2626);
color:#fff;
padding:10px;
border-radius:6px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:12px;
}

.req-block{
font-size:14px;
color:#111827;
margin-bottom:14px;
padding:10px;
background:#ffe9e9;
border-radius:4px;
border:1px solid #fecaca;
}

.req-block strong{
color:#991b1b;
font-size:16px;
}

.req-block ul{
margin:6px 0 0 18px;
padding:0;
}

.req-block li{
margin-bottom:4px;
}

.request-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
}

.song-card{
    display:flex;
    gap:14px;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px;
    align-items:flex-start;
    height:auto;
}

.song-card:hover{
    transform:translateY(-2px);
}

.song-art{
    position:relative;
    width:130px;
    min-width:100px;
    height:130px;
}

.song-art img{
    width:100%;
    height:100%;
    border-radius:6px;
}

.song-category{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    font-size:11px;
    padding:4px;
    background:rgba(0,0,0,0.7);
    text-align:center;
}

.song-info{
    padding:4px;
    flex:1;
}

.song-info h3{
    margin:0 0 5px;
    font-size:13px;
    color:#ffffff;
}

.song-artist{
    font-size:11px;
    opacity:.7;
    margin-bottom:6px;
    color:#ffffff;
}

.song-meta{
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:9px;
    opacity:.8;
}

.never{
    color:#d0d3d6;
}


.pagination{
    display:flex;
    gap:8px;
    margin-top:20px;
    padding:0;
    list-style:none;
    justify-content:center;
}

.pagination a,
.pagination span{
    display:inline-block;
    padding:8px 12px;
    background:#142335;
    border-radius:6px;
    text-decoration:none;
    color:var(--text);
    min-width:36px;
    text-align:center;
}

.pagination a:hover{
    background:#20334a;
    color:#000;
}

.pagination .active{
    background:#f1f1f1;
    color:#a8a8a8;
}

/* ======================================================
XR LIVE SEARCH INPUT
====================================================== */

#live-search{
    width:100%;
    padding:12px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#0f172a;
    color:#e6edf3;
    font-size:14px;
    transition:0.2s;
    margin-bottom:15px;
}

#live-search::placeholder{
    color:#94a3b8;
}

#live-search:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(40,192,193,0.2);
}

#search-results{
    margin-top:10px;
}

#search-results p{
    padding:10px;
    font-size:13px;
    color:#94a3b8;
}

/* ======================================================
FOOTER
====================================================== */

.site-footer{
    background:#020617;
    border-top:1px solid var(--border);
    margin-top:40px;
    color:#cbd5e1;
}

.footer-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding:30px 20px;
    max-width:1400px;
    margin:0 auto;
}

.footer-col h4{
    color:#fff;
    margin-bottom:10px;
    position:relative;
}

.footer-col h4::after{
    content:"";
    display:block;
    width:40px;
    height:2px;
    background:var(--accent);
    margin-top:6px;
}

.footer-col p{
    font-size:14px;
    line-height:1.6;
}

.footer-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.footer-tags span{
    font-size:12px;
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:4px;
    background:#0f172a;
    color:#cbd5e1;
}

.footer-bottom{
max-width:1400px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 25px;
border-top:1px solid var(--border);
font-size:13px;
background:#020617;
}

.footer-bottom a{
    color:var(--accent);
    text-decoration:none;
}

.footer-bottom a:hover{
    text-decoration:underline;
}

/* mobile */
@media(max-width:768px){

    .footer-inner{
        grid-template-columns:1fr;
    }

    .footer-bottom{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }
}


/* ======================================================
AUTH PAGE
====================================================== */

.auth-wrapper{
    max-width:900px;
    margin:0 auto;
}

.auth-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:15px;
}

/* CARD */
.auth-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:20px;
    box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.auth-card h3{
    margin:0 0 15px;
    font-size:16px;
    color:#fff;
}

/* INPUTS */
.auth-card input{
    width:100%;
    padding:12px;
    margin-bottom:10px;
    border-radius:6px;
    border:1px solid var(--border);
    background:#0f172a;
    color:#fff;
    font-size:14px;
    transition:0.2s;
}

.auth-card input::placeholder{
    color:#94a3b8;
}

.auth-card input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 2px rgba(40,192,193,0.2);
}

/* BUTTON */
.auth-card .btn{
    margin-top:5px;
    width:100%;
}

/* FORGOT */
.auth-forgot{
    margin-top:20px;
}

/* ALERTS */
.alert{
    padding:10px 12px;
    border-radius:6px;
    margin-bottom:15px;
    font-size:13px;
}

.alert-danger{
    background:#ffcbd0;
    border-left:4px solid #d03160;
    color:#0f2233;
}

.alert-success{
    background:#cbffcc;
    border-left:4px solid #3cd031;
    color:#0f2233;
}

@media(max-width:768px){
    .auth-grid{
        grid-template-columns:1fr;
    }
}

/* ======================================================
XR QUIZ
====================================================== */

.xr-quiz{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 6px;
padding: 25px;
margin-top: 20px;
color:#fff;
}

/* TITLE */
.xr-quiz h2{
margin:0 0 10px;
font-size:22px;
font-weight:600;
color:#fff;
}

/* QUESTION TEXT */
.xr-question{
font-size:18px;
margin:20px 0;
color:#fff;
line-height:1.4;
}

/* QUESTION COUNTER */
.xr-q-count{
font-size:13px;
opacity:.7;
margin-bottom:10px;
}

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

.xr-options{
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

.xr-option{
display:flex;
align-items:center;
gap:12px;
padding:12px 15px;
background: var(--panel2);
border:1px solid var(--border);
border-radius:10px;
cursor:pointer;
transition: all .25s ease;
position:relative;
}

/* HOVER */
.xr-option:hover{
background:#1b3147;
border-color: var(--accent);
transform:translateX(4px);
}

/* RADIO HIDE */
.xr-option input{
position:absolute;
opacity:0;
}

/* CUSTOM DOT */
.xr-option .dot{
width:18px;
height:18px;
border-radius:50%;
border:2px solid #777;
display:inline-block;
flex-shrink:0;
transition:.2s;
}

/* CHECKED */
.xr-option input:checked + .dot{
background: var(--accent);
border-color: var(--accent);
box-shadow:0 0 10px rgba(30,200,200,0.6);
}

/* TEXT */
.xr-option span{
font-size:15px;
color:#fff;
}

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

.xr-btn{
margin-top:20px;
padding:12px 18px;
border:none;
border-radius:8px;
background:linear-gradient(135deg,#1ec8c8,#178f8f);
color:#fff;
font-weight:600;
cursor:pointer;
transition:.25s;
}

.xr-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(30,200,200,0.3);
}

/* ======================================================
SCORE
====================================================== */

.xr-score{
text-align:center;
padding:30px 10px;
}

.xr-score h3{
font-size:26px;
margin-bottom:10px;
}

.xr-stars{
margin-top:10px;
}

.xr-stars i{
color:#e4b600;
margin:0 3px;
font-size:22px;
}

/* ======================================================
XR RESULTS
====================================================== */

.xr-results{
margin-top:25px;
display:flex;
flex-direction:column;
gap:12px;
}

/* EACH ROW */
.xr-result-row{
background: var(--panel2);
border:1px solid var(--border);
border-radius:10px;
padding:14px 16px;
transition:.25s;
}

/* CORRECT */
.xr-result-row.is-correct{
border-left:4px solid #4caf50;
background: rgba(76,175,80,0.08);
}

/* WRONG */
.xr-result-row.is-wrong{
border-left:4px solid #e53935;
background: rgba(229,57,53,0.08);
}

/* QUESTION */
.xr-result-question{
font-size:15px;
font-weight:600;
margin-bottom:6px;
color:#fff;
}

/* ANSWERS */
.xr-result-answer,
.xr-result-user{
font-size:14px;
opacity:.9;
margin-top:2px;
}

/* LABELS */
.xr-result-answer strong{
color:#4caf50;
}

.xr-result-user strong{
color:#ffb300;
}

/* ======================================================
SCORE AREA
====================================================== */

.xr-score{
text-align:center;
margin-top:10px;
}

.xr-score h3{
font-size:28px;
margin-bottom:8px;
}

.xr-stars{
margin:10px 0 5px;
}

.xr-stars i{
font-size:22px;
color:#e4b600;
margin:0 2px;
}

/* ======================================================
PLAY AGAIN BUTTON
====================================================== */

.xr-score-actions{
text-align:center;
margin-top:20px;
}

.xr-score-actions .xr-btn{
padding:12px 20px;
font-size:15px;
}


.xr-score-message{
text-align:center;
margin-top:10px;
}

.xr-score-message h3{
font-size:20px;
line-height:1.4;
font-weight:600;
background: linear-gradient(135deg,#1ec8c8,#178f8f);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ======================================================
SCOREBOARD
====================================================== */

.xr-sub{
opacity:.7;
margin-bottom:15px;
}

.xr-scoreboard{
display:flex;
flex-direction:column;
gap:10px;
margin-top:15px;
}

.xr-score-row{
display:grid;
grid-template-columns:60px 1fr 80px;
align-items:center;
padding:12px 15px;
background: var(--panel2);
border:1px solid var(--border);
border-radius:10px;
transition:.25s;
}

.xr-score-row:hover{
transform:translateX(4px);
border-color: var(--accent);
}

/* TOP 3 */
.gold   { border-left:4px solid gold; }
.silver { border-left:4px solid silver; }
.bronze { border-left:4px solid #cd7f32; }

/* TEXT */
.xr-rank{
font-weight:700;
color:#1ec8c8;
}

.xr-user{
font-weight:600;
}

.xr-score-val{
text-align:center;
font-weight:700;
color:#e4b600;
}

.xr-date{
text-align:right;
font-size:12px;
opacity:.7;
}
.xr-note{
margin-top:8px;
font-size:13px;
opacity:.65;
}
/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

.xr-quiz{
padding:18px;
}

.xr-question{
font-size:16px;
}

.xr-option span{
font-size:14px;
}

}

/* ======================================================
UNSUBSCRIBE CARD
====================================================== */

.xr-card{
background:#142335;
border:1px solid var(--border);
padding:25px;
border-radius:12px;
max-width:500px;
margin:20px auto;
box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* TITLE */
.xr-title{
margin:0 0 10px;
color:#fff;
font-size:22px;
}

/* SUBTEXT */
.xr-sub{
color:#c7d6e6;
font-size:14px;
margin-bottom:20px;
line-height:1.5;
}

/* FORM */
.xr-form{
display:flex;
flex-direction:column;
gap:15px;
}

/* FIELD */
.xr-field label{
display:block;
font-size:13px;
margin-bottom:6px;
color:#8fa9c0;
}

.xr-field input{
width:100%;
padding:12px;
border-radius:8px;
border:1px solid var(--border);
background:#0f1f2e;
color:#fff;
font-size:14px;
outline:none;
}

.xr-field input:focus{
border-color:var(--accent);
box-shadow:0 0 0 2px rgba(30,200,200,0.2);
}

/* BUTTON */
.xr-btn{
background:var(--accent);
color:#000;
border:none;
padding:12px;
border-radius:8px;
font-weight:600;
cursor:pointer;
transition:0.2s;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.xr-btn:hover{
opacity:0.85;
transform:translateY(-1px);
}


/* =========================
DJ GRID
========================= */

.dj-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
}

/* Mobile fallback */
@media(max-width:768px){
    .dj-grid{
        grid-template-columns: 1fr;
    }
}

/* =========================
DJ CARD
========================= */

.dj-card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    transition: all 0.25s ease;
}

.dj-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,0.4);
}

/* Image */
.dj-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    object-position: top;
}

/* Content */
.dj-content{
    padding:15px;
}

.dj-content h3{
    margin:0 0 5px;
    color:#ffffff;
}

.dj-role{
    color:var(--accent);
    font-weight:600;
    margin-bottom:10px;
}

.dj-desc{
    font-size:14px;
    line-height:1.5;
    opacity:0.9;
    color:#f3f3f3;
}

/* Meta tags */
.dj-meta{
    margin-top:12px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    color:#f3f3f3;
}

.dj-meta span{
    background:var(--panel2);
    padding:5px 8px;
    border-radius:6px;
    font-size:12px;
}

.cookie-note{
    font-size:12px;
    line-height:1.4;
    color:#9aa4af;

    margin-top:10px;
    margin-bottom:20px;
    padding:8px 10px;

    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:6px;

    transition:all 0.2s ease;
}

.live-slot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    border-radius:10px;
    margin-bottom:10px;

    background:linear-gradient(90deg,#1e3247,#142335);
    border-left:4px solid #28c0c1;

    color:#fff;
}

.slot-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.badge{
    background:#24394d;
    font-size:11px;
    font-weight:700;
    padding:4px 8px;
    border-radius:4px;
    letter-spacing:1px;
    box-shadow:0 0 6px rgba(255,0,76,0.5);
}

.live-slot img{
    width:80px;
    height:80px;
    border-radius:8px;
    object-fit:cover;
}

.live-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.live-title{
    font-size:12px;
    opacity:0.85;
}

.live-desc{
    font-size:11px;
    opacity:0.65;
}

.live-slot{
    animation:fadeIn 3.5s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(5px);}
    to{opacity:1; transform:translateY(0);}
}


.btn.disabled {
    background: #555;
    cursor: not-allowed;
    opacity: 0.7;
}

.request-note {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #242424;
    line-height: 1.4;

    background: #f8f8f8;
    border: 1px solid rgba(248, 113, 113, 0.6);
    border-left: 4px solid #f87171;

    border-radius: 8px;
}

.songmeta {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 10px;
    background: linear-gradient(145deg,#1f2937,#0f172a);
    border: 1px solid rgba(255,255,255,0.08);
}

.metabadge {
    display: inline-block;
    background: #f59e0b;
    color: #111;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.metagrid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(90px,1fr));
    gap: 10px;
}

.metagrid div {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
}

.metagrid span {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.metagrid strong {
    font-size: 16px;
    color: #fff;
}

/* =========================
   CHART PAGE (CLEAN STYLE)
========================= */

.chart-item {
    display: grid;
    grid-template-columns: 80px 120px 1fr;
    gap: 18px;

    padding: 18px 0;
    margin-bottom: 12px;

    border-bottom: 1px solid #e5e7eb;
    background: transparent;
}

/* =========================
   RANK COLUMN
========================= */

.chart-rank {
    text-align: center;
}

.chart-position {
    font-size: 36px;
    font-weight: 700;
    color: #111; /* FIXED (was white) */
}

.chart-move {
    font-size: 18px;
    margin-bottom: 6px;
    opacity: 0.7;
}

/* =========================
   ARTWORK
========================= */

.chart-art img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

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

.chart-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #111;
}

.chart-artist {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* =========================
   META TAGS
========================= */

.chart-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-tag {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #333;
}

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

.chart-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0 25px;
}

.chart-nav .nav-link {
    display: inline-block;
    font-size: 14px;
    color: #2563eb;
    text-decoration: none;
}

.chart-nav .nav-link:last-child {
    margin-left: auto;
    text-align: right;
}

/* =========================
   FILTERS (MATCH CARDS)
========================= */

.chart-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 15px 0 25px;
}

.chart-selects {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-selects select,
.chart-search input {
    padding: 12px 14px;
    border-radius: 12px;

    border: 1px solid #e5e7eb;
    background: #fff;

    color: #111;
    font-size: 14px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all .2s ease;
}

.chart-search input {
    width: 100%;
}

.chart-search input::placeholder {
    color: #888;
}

/* Hover */
.chart-selects select:hover,
.chart-search input:hover {
    border-color: #cbd5e1;
}

/* Focus */
.chart-selects select:focus,
.chart-search input:focus {
    border-color: #3b82f6;
}
.xr-live-results {
    border-left: 4px solid #142335;
    padding-left: 12px;
    margin-bottom: 20px;
}

.chart-selects {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

.chart-selects select {
    padding: 12px 14px;
    border-radius: 12px;

    border: 1px solid #e5e7eb;
    background: #fff;

    color: #111;
    font-size: 14px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: all .2s ease;
    width: auto;
}

.chart-selects select:focus {
    border-color: #38bdf8;
    background: #f3f4f6;
}

.chart-selects select {
    min-width: 140px;
}

/* ======================================================
   XR REQUEST LOADER (ISOLATED)
====================================================== */

.xr-req-loading{
    text-align:center;
    padding:25px 15px;
    color:#ccc;
    font-family:monospace;
    animation:xrReqFadeIn .3s ease;
}

.xr-req-tape{
    width:120px;
    height:60px;
    margin:0 auto 12px;
    background:#1a1a1a;
    border:3px solid #444;
    border-radius:6px;
    position:relative;
    box-shadow:0 0 12px rgba(0,0,0,.6);
}

/* reels */
.xr-req-reel{
    width:18px;
    height:18px;
    border:3px solid #aaa;
    border-radius:50%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    animation:xrReqSpin 1s linear infinite;
}

.xr-req-reel.left{ left:18px; }
.xr-req-reel.right{ right:18px; animation-duration:1.3s; }

/* reel center */
.xr-req-reel::after{
    content:'';
    width:6px;
    height:6px;
    background:#aaa;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/* label */
.xr-req-tape::before{
    content:'XR';
    position:absolute;
    left:50%;
    top:8px;
    transform:translateX(-50%);
    font-size:10px;
    color:#999;
    letter-spacing:2px;
}

/* text */
.xr-req-text{
    font-size:13px;
    letter-spacing:1px;
    line-height:1.4;
}

.xr-req-text small{
    display:block;
    font-size:11px;
    color:#888;
    margin-top:3px;
}

/* animations */
@keyframes xrReqSpin{
    from{ transform:translateY(-50%) rotate(0deg); }
    to{ transform:translateY(-50%) rotate(360deg); }
}

@keyframes xrReqFadeIn{
    from{ opacity:0; transform:translateY(5px); }
    to{ opacity:1; transform:translateY(0); }
}

/* INLINE SCHEDULE */

.schedule-inline {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.schedule-day {
    background: linear-gradient(180deg, #0b2235, #081a2a);
    border-radius: 10px;
    padding: 15px;
    color: #fff;
}

.schedule-day.today {
    border-left: 4px solid #0585c3;
}

.day-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.row {
    display: flex;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.row:last-child {
    border-bottom: none;
}

.time {
    width: 70px;
    color: #d13061;
    font-weight: 600;
    font-size: 14px;
}

.info strong {
    display: block;
    font-size: 14px;
}

.info span {
    font-size: 12px;
    opacity: 0.7;
}

.info p {
    margin-top: 3px;
    font-size: 12px;
    opacity: 0.8;
}

.auto {
    margin-top: 10px;
    font-size: 12px;
    opacity: 0.6;
}













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

@media(max-width:768px){

    .chart-item {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
    }

    .chart-art {
        grid-column: 2;
    }

    .chart-position {
        font-size: 28px;
    }
}
#playlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

#playlist li {
    background: transparent !important;
    padding: 0;
    margin: 0;
}

.chart-credit-card {
    margin-top:25px;
    padding:18px;
    border-radius:12px;
    background:rgba(255,255,255,0.05); /* slightly brighter */
    border:1px solid rgba(255,255,255,0.1);
}

.chart-credit-icon {
    font-size:22px; /* slightly bigger */
    color:#60a5fa;
    margin-top:2px;
}

.chart-credit-inner {
    display:flex;
    gap:15px;
    align-items:flex-start;
}

.chart-credit-text strong {
    display:block;
    margin-bottom:5px;
}

.chart-credit-text p {
    margin:5px 0;
    font-size:13px;
    line-height:1.6;
    opacity:0.85;
}

.chart-credit-sub {
    opacity:0.7;
}

.chart-credit-text a {
    color:#60a5fa;
    text-decoration:none;
}

.chart-credit-text a:hover {
    text-decoration:underline;
}


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

@media(max-width:768px){

    .chart-item{
        grid-template-columns: 60px 90px 1fr;
    }

    .chart-position{
        font-size:24px;
    }

    .chart-art img{
        max-height:90px;
    }
}

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

@media (max-width: 1024px){

    /* MAIN GRID ? collapse right sidebar */
    .main-grid{
        grid-template-columns:220px 1fr;
    }

    .rightbar{
        display:none;
    }
}

/* ======================================================
TABLET + MOBILE (NAV + LAYOUT)
====================================================== */

@media (max-width: 768px){

    /* HEADER STACK */
    .header-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .logo img{
        height:240px;
    }

    /* REMOVE RIGHT SIDE IMAGES */
    .hero-rotator,
    .header-art{
        display:none;
    }

    /* MAIN GRID ? single column */
    .main-grid{
        grid-template-columns:1fr;
    }

    /* ======================================================
    MOBILE NAV BUTTONS
    ====================================================== */

    .sidebar{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        padding:10px;
        background:var(--panel);
    }

    .sidebar ul{
        display:contents;
    }

    .sidebar li{
        width:100%;
    }

    .sidebar a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:12px 8px;
        border-radius:6px;
        background:#0f1c2b;
        border:1px solid var(--border);
        font-size:13px;
        transition:0.2s ease;
    }

    .sidebar a:hover{
        background:#142335;
        border-color:var(--accent);
    }

    .sidebar a:active{
        transform:scale(0.96);
    }

    .nav-title{
        font-size:13px;
        font-weight:600;
        color:#fff;
    }

    .nav-sub{
        font-size:10px;
        opacity:.7;
        margin-top:2px;
    }

    /* PLAYER BAR STACK */
    .player-bar{
        flex-direction:column;
        gap:10px;
        align-items:flex-start;
    }

    /* NOW PLAYING STACK */
    .now-playing-bar{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .np-left{
        width:100%;
    }

    #np-art{
        width:60px;
        height:55px;
    }

    /* HERO STACK */
    .hero{
        grid-template-columns:1fr;
    }

    /* SHUFFLE GRID */
    .shuffle-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

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

@media (max-width: 480px){

    body{
        font-size:14px;
    }

    /* TOP BAR */
    .topbar-inner{
        flex-direction:column;
        gap:5px;
        text-align:center;
    }

    /* LOGO */
    .logo img{
        height:210px;
    }

    /* PLAYER BUTTON */
    #play-btn{
        width:38px;
        height:38px;
    }

    /* VOLUME */
    .np-controls input{
        width:70px;
    }

    /* REQUEST ITEMS */
    .request-item{
        padding:8px;
    }

    .request-item img{
        width:40px;
        height:40px;
    }

    /* SHUFFLE ? 1 column */
    .shuffle-grid{
        grid-template-columns:1fr;
    }

    /* HERO TEXT */
    .hero-title{
        font-size:16px;
    }

    /* STATS */
    .site-stats{
        grid-template-columns:1fr 1fr;
    }
}

/* ======================================================
LARGER PHONES (OPTIONAL 3 COL NAV)
====================================================== */

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

    .sidebar{
        grid-template-columns:repeat(3,1fr);
    }
}
/* ======================================================
REAL MOBILE FIXES (CRITICAL)
====================================================== */

@media (max-width:768px){

    /* FIX MAIN CONTENT GRID */
    .content-area{
        grid-template-columns:1fr !important;
        padding:10px;
    }

    /* REMOVE RIGHTBAR COMPLETELY */
    .rightbar{
        display:none !important;
        width:auto;
    }

    /* FULL WIDTH CONTENT */
    .content{
        width:100%;
    }

    /* TOP 10 ? SINGLE COLUMN */
    .top10-list{
        grid-template-columns:1fr;
    }

    .top10-list::after{
        display:none;
    }

    /* REQUEST GRID ? SINGLE */
    .request-grid{
        grid-template-columns:1fr;
    }

    /* SHUFFLE ? 1 COLUMN */
    .shuffle-grid{
        grid-template-columns:1fr;
    }

    /* HERO HEIGHT FIX */
    .hero-main{
        height:auto;
    }

    .hero-main img{
        height:auto;
        object-fit:cover;
    }

    /* LOGO SMALLER */
    .logo img{
        height:90px;
        margin-left:0;
    }

    /* PLAYER CLEANER */
    .player-bar{
        align-items:stretch;
    }

    .np-controls{
        justify-content:space-between;
        width:100%;
    }

    /* NOW PLAYING CLEAN STACK */
    .np-left{
        align-items:flex-start;
    }

    #np-title{
        font-size:14px;
    }

    #np-artist{
        font-size:12px;
    }

    /* CHART FIX */
    .chart-item{
        grid-template-columns:50px 70px 1fr;
        gap:10px;
        padding:8px;
    }

    .chart-position{
        font-size:20px;
    }

    .chart-art img{
        height:70px;
    }

    /* SONG PAGE STACK */
    .song-header{
        flex-direction:column;
    }

    .song-art{
        width:100%;
        height:auto;
    }

    /* FOOTER FIX */
    .footer-inner{
        padding:20px 15px;
    }

    .footer-bottom{
        padding:10px;
    }
}