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

html,
body{
width:100%;
height:100%;
overflow:hidden;
font-family:Arial,sans-serif;
background:#050008;
color:#fff;
}

body{
position:relative;
}

/* BG VIDEO */

#player{
position:absolute;

top:0;
left:0;

width:100vw;
height:100vh;

opacity:.10;

filter:
blur(1px)
brightness(.9)
saturate(1.2);

pointer-events:none;

transform:scale(1.15);

z-index:1;
}

#player{
width:100vw !important;
height:100vh !important;
overflow:hidden !important;
}

#player iframe{
position:absolute !important;

top:50% !important;
left:50% !important;

width:140vw !important;
height:140vh !important;

transform:translate(-50%,-50%) !important;
}

/* OVERLAY */
.categories-overlay{
position:fixed;
inset:0;

background:rgba(0,0,0,.55);
background: rgba(255,0,255,.16);


opacity:0;
pointer-events:none;



z-index:99998;
}

.categories.open + .categories-overlay{
opacity:1;
pointer-events:auto;
}
.overlay{
position:fixed;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,0,255,.14),
transparent 35%
),

linear-gradient(
180deg,
rgba(0,0,0,.15),
rgba(0,0,0,.88)
);

z-index:2;
pointer-events:none;
}

/* LOGO */

.logo{
position:fixed;
top:1px;
left:50%;

transform:translateX(-50%);

z-index:9999;

padding:10px 28px;

border-radius:999px;


}
.top-logo{
height:42px;
width:auto;
height:88px;
display:block;

filter:
drop-shadow(0 0 18px rgba(255,0,255,.25));
}
/* MAIN */

.layout{
position:relative;
z-index:50;

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

width:100%;
height:100vh;

padding:40px 60px;

overflow:hidden;
}

/* LEFT */

.left{
width:38%;

display:flex;
flex-direction:column;
justify-content:center;

z-index:60;
}

/* =========================
FLOATING CATEGORY DOCK
========================= */
.categories-top{
display:flex;
justify-content:flex-end;
margin-top:-70px;
margin-bottom:10px;
}
.categories{
position:fixed;

left:-320px;
top:0;

width:300px;
height:100vh;

padding:100px 20px 30px;

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

background:rgba(10,0,20,.95);
backdrop-filter:blur(30px);


z-index:99999;


}

.categories.open{
left:0;
}

/* BUTTON */

.menu-toggle{
position:fixed;

top:20px;
left:20px;

width:60px;
height:60px;

border-radius:20px;

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

font-size:28px;

cursor:pointer;

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

border:3px solid rgba(200,0,255,.12);

backdrop-filter:blur(20px);

z-index:999999;
	transition:.15s;
}

.menu-toggle:hover{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

box-shadow:
0 0 28px rgba(255,0,255,.45);

transform:scale(1.08);
}


/* HOVER */

.cat-btn:hover{
transform:
translateX(8px);

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

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

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

/* ACTIVE */

.cat-btn.active{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

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

/* COUNT */

.cat-btn small{
padding:4px 10px;

border-radius:999px;

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

font-size:11px;

opacity:.85;
}

/* MOBILE */

@media(max-width:980px){

.categories{
position:fixed;

left:-320px;
top:0;

width:300px;
height:100vh;

padding:100px 20px 30px;

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

overflow-y:auto;

z-index:999999;
}

.categories.open{
left:0;
}
}
@media(max-width:980px){

.categories{
background:rgba(10,0,20,.95);
}

}
	.cat-btn{
display:flex;
align-items:center;
justify-content:space-between;

padding:16px 18px;

min-height:54px;

border-radius:26px;

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

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

text-decoration:none;
color:white;

font-size:14px;
font-weight:800;

transition:.15s;

backdrop-filter:blur(20px);

box-shadow:
0 0 18px rgba(0,0,0,.12);
}

.cat-btn:hover{

transform:
translateX(6px)
scale(1.02);

background:
rgba(255,0,255,.14);

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

box-shadow:
0 0 28px rgba(255,0,255,.22);
}

.cat-btn.active{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

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

.cat-btn small{

padding:6px 12px;

border-radius:999px;

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

font-size:12px;

font-weight:700;
}
/* LIVE */

.live{
display:flex;
align-items:center;
gap:12px;
margin-left:30px;
padding:12px 22px;

width:max-content;

border-radius:999px;

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

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

margin-bottom:30px;
}

.live-dot{
width:12px;
height:12px;

border-radius:50%;

background:#ff00ff;

box-shadow:
0 0 20px #ff00ff;
}

/* HERO */

.hero-title{
font-size:92px;
font-weight:900;
line-height:.9;

margin-bottom:24px;
}

.hero-desc{
font-size:23px;
line-height:1.45;
opacity:.8;

max-width:420px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:20px;

margin-top:30px;
}

.hero-btn{
border:none;
cursor:pointer;

padding:22px 44px;

border-radius:17px;

font-size:20px;
font-weight:700;

transition:.15s;
}

.hero-btn-primary{
background:
linear-gradient(
135deg,
#ff00ff,
#8b00ff
);

color:white;

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

.hero-btn-secondary{
background:rgba(255,255,255,.08);

color:white;

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

/* RADIO */

.radio-box{
margin-top:0px;
 position:relative;
  top:22px; /* przesuwa do góry */
width:430px;
 position:relative;
    left:-10px;
padding:30px;

border-radius:17px;

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

border:3px solid rgba(200,0,255,.12);
}

/* =========================
SMOOTH AUDIO WAVE
========================= */

.eq{
display:flex;
align-items:center;
justify-content:center;
gap:13px;

height:70px;

margin-bottom:24px;
}

/* BAR */

.eq-bar{
width:8px;
height:20px;

border-radius:999px;

background:
linear-gradient(
180deg,
#ff00ff,
#7a00ff
);

box-shadow:
0 0 12px rgba(255,0,255,.45);

animation:
musicWave 1s ease-in-out infinite;
}

/* RANDOM SPEED */

.eq-bar:nth-child(1){animation-delay:.1s;}
.eq-bar:nth-child(2){animation-delay:.3s;}
.eq-bar:nth-child(3){animation-delay:.5s;}
.eq-bar:nth-child(4){animation-delay:.2s;}
.eq-bar:nth-child(5){animation-delay:.7s;}
.eq-bar:nth-child(6){animation-delay:.4s;}
.eq-bar:nth-child(7){animation-delay:.6s;}
.eq-bar:nth-child(8){animation-delay:.1s;}
.eq-bar:nth-child(9){animation-delay:.5s;}
.eq-bar:nth-child(10){animation-delay:.2s;}
.eq-bar:nth-child(11){animation-delay:.4s;}
.eq-bar:nth-child(12){animation-delay:.8s;}
.eq-bar:nth-child(13){animation-delay:.7s;}
.eq-bar:nth-child(14){animation-delay:.4s;}
.eq-bar:nth-child(15){animation-delay:.6s;}
.eq-bar:nth-child(16){animation-delay:.1s;}
.eq-bar:nth-child(17){animation-delay:.5s;}
.eq-bar:nth-child(18){animation-delay:.2s;}
.eq-bar:nth-child(19){animation-delay:.4s;}
.eq-bar:nth-child(20){animation-delay:.8s;}
/* ANIMATION */

@keyframes musicWave{

0%{
height:14px;
opacity:.5;
}

25%{
height:55px;
opacity:1;
}

50%{
height:28px;
opacity:.8;
}

75%{
height:65px;
opacity:1;
}

100%{
height:16px;
opacity:.5;
}

}

.radio-title{
font-size:30px;
font-weight:800;

margin-bottom:10px;
}

.radio-sub{
font-size:18px;
opacity:.7;
}

/* RIGHT */

.right{
width:56%;
position:relative;
	display:flex; 
	align-items:center; 
	justify-content:center; 
	overflow:visible; 
	z-index:60; }

/* PLAYLIST */
.playlist-heading{
font-size:24px;
font-weight:900;

margin-bottom:20px;

padding-left:25px;

color:white;

text-shadow:
0 0 18px rgba(255,0,255,.35);
}
.playlist{
position:absolute;

left:-137px;
top:47%;

transform:translateY(-50%);

width:310px;
height:520px;

padding:18px;

border-radius:17px;

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

border:3px solid rgba(200,0,255,.12);

backdrop-filter:blur(8px);


z-index:20;

overflow-y:auto;
overflow-x:hidden;

scrollbar-width:thin;
scrollbar-color:#ff00ff transparent;

}

/* SCROLL */

.playlist::-webkit-scrollbar{
width:10px;
}

.playlist::-webkit-scrollbar-track{

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

border-radius:20px;

margin-top:10px;
margin-bottom:10px;
}

.playlist::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
#ff00ff,
#ff4dff
);

border-radius:20px;

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

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

.playlist::-webkit-scrollbar-thumb:hover{

background:
linear-gradient(
180deg,
#ff4dff,
#ff99ff
);

box-shadow:
0 0 30px rgba(255,0,255,1);
}


.play-item{
display:block;

padding:12px;

border-radius:15px;

margin-bottom:10px;

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

cursor:pointer;

font-size:13px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

will-change: transform;
}

.play-item:hover{
background:rgba(255,0,255,.18);
}	

.play-item.active{
background:rgba(255,0,255,.25);
}

/* FAVORITES DRAWER */
.favorite-title{
pointer-events:auto;
cursor:pointer;
display:block;
width:100%;
}
.drawer-overlay{
z-index:1000 !important;
pointer-events:auto;
}

.favorites-panel{
z-index:999999 !important;
pointer-events:auto !important;

overflow-y:auto;
scrollbar-width:thin;
scrollbar-color:#ff00ff transparent;
}
.favorites-panel::-webkit-scrollbar{
width:8px;
}

.favorites-panel::-webkit-scrollbar-thumb{
background:#ff00ff;
border-radius:999px;
}
.favorites-panel {
pointer-events:auto !important;
}
.favorites-top{
position:relative;

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

width:100%;
top:15px;
margin-bottom:24px;
}

.favorites-top h2{
position:absolute;
left:50%;

transform:translateX(-50%);

margin:0;

font-size:22px;
font-weight:900;
}

.favorites-top .close-btn{
position:absolute;
left:0;
}
.close-btn{
cursor:pointer !important;
pointer-events:auto !important;
}

.favorite-item{
pointer-events:auto !important;
}
.favorites-panel{
position:fixed;

top:0;
right:-420px;

width:400px;
height:100vh;

padding:35px;

background:rgba(10,0,20,.92);

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

backdrop-filter:blur(30px);

overflow-y:auto;

z-index:99999;
}
.favorites-panel *{
pointer-events:auto;
}
.favorites-panel.open{
right:0;
}

.favorite-item{
display:flex;
align-items:center;
gap:14px;

padding:14px;

border-radius:20px;

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

margin-bottom:12px;
}
.favorite-cover{

width:60px;
height:60px;

border-radius:16px;

overflow:hidden;

flex-shrink:0;
}

.favorite-cover img{

width:100%;
height:100%;

object-fit:cover;

display:block;
}
	.favorite-remove{
margin-left:auto;

width:34px;
height:34px;

border-radius:12px;

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

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

font-size:18px;

cursor:pointer;

transition:.15s;

flex-shrink:0;
}

.favorite-remove:hover{
background:
linear-gradient(
135deg,
#ff0066,
#ff00ff
);

transform:scale(1.08);

box-shadow:
0 0 16px rgba(255,0,255,.4);
}
.close-btn{
width:46px;
height:46px;

border:none;
outline:none;

border-radius:16px;

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

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

color:#fff;

font-size:28px;
font-weight:300;

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

cursor:pointer;

transition:.15s;

backdrop-filter:blur(20px);
}

.close-btn:hover{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

border-color:transparent;

transform:
scale(1.08)
rotate(90deg);

box-shadow:
0 0 28px rgba(255,0,255,.45);

color:white;
}

/* VINYL */

/* =========================
PREMIUM VINYL
========================= */
.vinyl-wrap{
position:relative;

margin-left:120px;
margin-top:-60px;

width:430px;
height:430px;

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

/* OUTER RING */

.vinyl-glow{
position:absolute;

width:520px;
height:520px;

border-radius:50%;

border:
4px dashed rgba(255,0,255,.42);

animation:
spinSlow 16s linear infinite;

filter:
drop-shadow(0 0 22px rgba(255,0,255,.35));

opacity:.9;
}

/* SECOND RING */

.vinyl-glow::before{
content:'';

position:absolute;
inset:-28px;

border-radius:50%;

border:
2px solid rgba(0,180,255,.12);

animation:
spinReverse 24s linear infinite;
}

/* VINYL */

.vinyl{
position:relative;

width:390px;
height:390px;

border-radius:50%;

background:
radial-gradient(circle,
#151515 0%,
#080808 45%,
#000 100%);

border:
10px solid #ff00ff;

box-shadow:
0 0 60px rgba(255,0,255,.28),
0 0 120px rgba(0,180,255,.08);

animation:
spin 8s linear infinite,
vinylPulse 3s ease-in-out infinite;

animation-play-state:paused;

overflow:hidden;
}

.vinyl.playing{
animation-play-state:running;
}

/* INNER RINGS */

.vinyl::before{
content:'';

position:absolute;
inset:34px;

border-radius:50%;

border:
2px solid rgba(255,255,255,.06);

box-shadow:
inset 0 0 20px rgba(255,255,255,.03);
}

/* CENTER LOGO */
.vinyl::after{
content:'';

position:absolute;

top:50%;
left:50%;

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

width:162px;
height:162px;

border-radius:50%;

background-size:cover;
background-position:center;

border:6px solid #111;

box-shadow:
0 0 35px rgba(255,0,255,.35),
0 0 70px rgba(0,180,255,.12);

background-image:var(--cover);

background-size:cover;
background-position:center;
}	
.vinyl::after{
background-size:180% !important;
}
	
/* ARM */
.arm{
position:absolute;

right:40px;
top:45px;

width:120px;
height:120px;

z-index:20;
}

.arm::before{
content:'';

position:absolute;

right:0;
top:0;

width:22px;
height:22px;

background:#ddd;

border-radius:50%;

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

.arm::after{
content:'';

position:absolute;

right:10px;
top:14px;

width:8px;
height:160px;

background:
linear-gradient(
180deg,
#f5f5f5,
#666
);

border-radius:20px;

transform:rotate(28deg);

transform-origin:top;

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

/* VINYL GLOW */

.vinyl-glow{
position:absolute;

width:520px;
height:520px;

border-radius:50%;

/* MAIN RING */

border:
4px dashed rgba(255,0,255,.45);

/* EXTRA LIGHT */

box-shadow:
0 0 30px rgba(255,0,255,.28),
0 0 80px rgba(255,0,255,.14),
inset 0 0 30px rgba(255,0,255,.08);

/* ANIMATION */

animation:
spin 10s linear infinite,
glowPulse 3s ease-in-out infinite;

opacity:.95;

filter:
drop-shadow(0 0 18px rgba(255,0,255,.35));
}

/* SECOND RING */

.vinyl-glow::before{
content:'';

position:absolute;
inset:-32px;

border-radius:50%;

border:
2px solid rgba(0,180,255,.12);

animation:
spinReverse 20s linear infinite;

box-shadow:
0 0 40px rgba(0,180,255,.08);
}

/* PULSE */

@keyframes glowPulse{

0%{
box-shadow:
0 0 30px rgba(255,0,255,.18),
0 0 70px rgba(255,0,255,.08);
}

50%{
box-shadow:
0 0 60px rgba(255,0,255,.42),
0 0 140px rgba(255,0,255,.18);
}

100%{
box-shadow:
0 0 30px rgba(255,0,255,.18),
0 0 70px rgba(255,0,255,.08);
}

}

/* SPIN */

@keyframes spin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* REVERSE */

@keyframes spinReverse{

from{
transform:rotate(360deg);
}

to{
transform:rotate(0deg);
}

}
.vinyl.playing{
animation-play-state:running;
}



/* TRACK */

.track-info{
position:absolute;

bottom:-340px;
left:50%;

transform:translateX(-50%);

text-align:center;

z-index:100;

width:420px;

pointer-events:none;
}
.track-title{
font-size:20px !important;
font-weight:900;

line-height:1.15;

text-shadow:
0 0 20px rgba(255,0,255,.35);
}
.track-title::before{
    content:"▶ ";
    margin-right:4px;
	color:#ff00ff;
	text-shadow:0 0 12px #ff00ff;
}
/* SOCIALS */

.socials{
position:fixed;

right:20px;
top:50%;

transform:translateY(-50%);

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

z-index:9999;
}

.social-btn{
width:82px;
height:82px;

border-radius:26px;

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

border:3px solid rgba(200,0,255,.12);

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

cursor:pointer;

font-size:28px;

transition:.15s;

backdrop-filter:blur(20px);
}

.social-btn:hover{
transform:scale(1.08);
background:rgba(255,0,255,.16);
}

/* CONTROLS */

.control-btn{
width:64px;
height:64px;

border-radius:50%;

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

font-size:24px;

cursor:pointer;

background:rgba(255,255,255,.08);
}
.control-btn:hover{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

transform:scale(1.08);

box-shadow:
0 0 28px rgba(255,0,255,.45);

color:#fff;
}
.control-main{
background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);
}

/* MOBILE */

@media(max-width:980px){

html,
body{
overflow:auto;
height:auto;
}

.layout{
flex-direction:column;
padding:20px;
gap:40px;

height:auto;
}

.left,
.right{
width:100%;
}

.hero-title{
font-size:56px;
}

.hero-desc{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
}

.hero-btn{
width:100%;
font-size:18px;
padding:18px;
}

.radio-box{
width:100%;
}

.playlist{
position:fixed;

top:0;
right:-100%;
left:auto;

transform:none;

width:86%;
height:100vh;

z-index:99999;

transition:.4s;

border-radius:0;
}

.playlist.open{
right:0;
}
.favorite-item{
display:flex;
align-items:center;
gap:14px;

padding:14px;

border-radius:20px;

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

margin-bottom:12px;

cursor:pointer;

transition:.15s;
}

.favorite-item:hover{
background:rgba(255,0,255,.14);

transform:scale(1.02);
}

.favorite-cover{
width:60px;
height:60px;

border-radius:16px;

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);
}

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

.favorite-title{
font-size:15px;
font-weight:700;

color:white;

line-height:1.3;

transition:.15s;
}

.favorite-item:hover .favorite-title{
color:#ff4dff;

text-shadow:
0 0 12px rgba(255,0,255,.45);
}
.vinyl-wrap{
position:relative;

width:430px;
height:430px;

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

animation:
vinylFloat 4s ease-in-out infinite;

filter:
drop-shadow(0 0 40px rgba(255,0,255,.18));
}

/* MAIN ENERGY RING */

.vinyl-wrap{
position:relative;

width:360px;
height:360px;

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

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

/* ENERGY RING */

.vinyl-glow{
position:absolute;

width:440px;
height:440px;

border-radius:50%;

background:
conic-gradient(
from 0deg,
rgba(255,0,255,0),
rgba(255,0,255,.28),
rgba(140,0,255,0),
rgba(255,255,255,.08),
rgba(255,0,255,0)
);

filter:
blur(1px)
drop-shadow(0 0 24px rgba(255,0,255,.25));

animation:
spinGlow 14s linear infinite,
pulseGlow 4s ease-in-out infinite;

opacity:.85;
}

/* OUTER RING */

.vinyl-glow::before{
content:'';

position:absolute;
inset:-34px;

border-radius:50%;

border:
12px dashed rgba(255,0,255,.18);

animation:
spinReverse 22s linear infinite;

opacity:.7;
}

/* VINYL */

.vinyl{
position:relative;

width:320px;
height:320px;

border-radius:50%;

background:
radial-gradient(circle,
#171717 0%,
#080808 45%,
#000 100%);

border:8px solid #ff00ff;


box-shadow:
0 0 30px rgba(255,0,255,.22),
0 0 70px rgba(255,0,255,.12);
animation:
spin 7s linear infinite,
vinylPulse 3s ease-in-out infinite;

animation-play-state:paused;

overflow:hidden;
}

.vinyl.playing{
animation-play-state:running;
}

/* INNER RINGS */

.vinyl::before{
content:'';

position:absolute;
inset:24px;

border-radius:50%;

border:
2px solid rgba(255,255,255,.04);
}

/* FLOAT */

@keyframes floatVinyl{

0%{
transform:translateY(0px);
}

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

100%{
transform:translateY(0px);
}

}

/* GLOW */

@keyframes spinGlow{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

/* REVERSE */

@keyframes spinReverse{

from{
transform:rotate(360deg);
}

to{
transform:rotate(0deg);
}

}

/* PULSE */

@keyframes pulseGlow{

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

50%{
opacity:.95;
transform:scale(1.03);
}

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

}

/* VINYL */

@keyframes vinylPulse{

0%{
box-shadow:
0 0 30px rgba(255,0,255,.18),
0 0 70px rgba(255,0,255,.08);
}

50%{
box-shadow:
0 0 55px rgba(255,0,255,.4),
0 0 120px rgba(255,0,255,.16);
}

100%{
box-shadow:
0 0 30px rgba(255,0,255,.18),
0 0 70px rgba(255,0,255,.08);
}

}

/* SPIN */

@keyframes spin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}
.socials{
right:10px;
bottom:220px;

top:auto;

transform:none;
}

.social-btn{
width:65px;
height:65px;
font-size:22px;
}

.controls{
position:fixed;

bottom:20px;
left:46%;

transform:translateX(-50%);

display:flex;
align-items:center;
justify-content:center;
gap:28px;

width:320px;
height:96px;

padding:0 24px;

border-radius:17px;

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

border:3px solid rgba(200,0,255,.12);

backdrop-filter:blur(20px);

z-index:999;

overflow:visible;
}


@keyframes spin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}
.controls{

bottom:20px !important;
}



/* TIME */
.progress-time{
position:relative;

left:-1px;

margin-top:50px;

display:flex;
justify-content:space-between;

font-size:13px;

opacity:.7;
}

/* BAR */
.progress-bar{
position:relative;

width:100%;
height:14px;

border-radius:999px;

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

cursor:pointer;

overflow:visible;

display:flex;
align-items:center;
}

/* FILL */

.progress-fill{
position:absolute;

left:0;
top:0;

height:100%;
width:0%;

border-radius:999px;

background:
linear-gradient(
90deg,
#ff00ff,
#7a00ff
);

box-shadow:
0 0 18px rgba(255,0,255,.45);

transition:.25s;
}
.favorites-toggle{
position:fixed;

top:20px;
right:20px;

width:60px;
height:60px;

border-radius:20px;

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

font-size:28px;

cursor:pointer;

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

border:3px solid rgba(200,0,255,.12);

backdrop-filter:blur(20px);

z-index:999999;


}

.favorites-toggle:hover{

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

box-shadow:
0 0 28px rgba(255,0,255,.45);

transform:scale(1.08);
}
	
/* =========================
dodano do ulubionych
========================= */	
.favorite-toast{
position:fixed;

bottom:110px;
left:50%;

transform:
translateX(-50%)
translateY(30px);

padding:16px 24px;

border-radius:18px;

background:
linear-gradient(
135deg,
#ff00ff,
#7a00ff
);

color:white;

font-size:15px;
font-weight:700;

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

z-index:999999;

opacity:0;

pointer-events:none;


}

.favorite-toast.show{

opacity:1;

transform:
translateX(-50%)
translateY(0);
}
.play-item.active{

background:
linear-gradient(
135deg,
rgba(255,0,255,.22),
rgba(140,0,255,.18)
);

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

box-shadow:
0 0 24px rgba(255,0,255,.22);

transform:scale(1.02);

color:#fff;
}
		/* =========================
szyba reakcja na kursor
========================= */
*{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}
*{
    -webkit-tap-highlight-color: transparent;
}	
button,
a,
div{
    touch-action: manipulation;
}
#player{
filter:none !important;
}

#player iframe{
transform:translate(-50%,-50%) !important;
}
	
/* =========================
MOBILE FINAL CLEAN
========================= */
@media(max-width:980px){
html,
body{
overflow-x:hidden;
overflow-y:auto;
height:100%;
}
	body{
-webkit-overflow-scrolling:touch;
}
/* =========================
LAYOUT
========================= */

.layout{
display:flex;
flex-direction:column;

height:100dvh;
overflow-y:auto;

padding:90px 20px 140px;

gap:40px;
}

.left,
.right{
width:100%;
position:relative;
}

.right{
overflow:visible !important;

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

padding-top:40px;
}

/* =========================
LEFT PANEL
========================= */

.categories{

position:fixed !important;
top:0;
left:-320px;

width:310px;
height:100vh;

padding:100px 20px 30px;

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

overflow-y:auto;

background:#120018 !important;

transition:left .35s ease;

z-index:1000000 !important;

backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;

box-shadow:none !important;
}

.categories.open{
left:0;
}

/* =========================
RIGHT PANEL
========================= */

.favorites-panel{

position:fixed !important;

top:0;
right:-320px;

width:310px;
max-width:88vw;

height:100vh;

z-index:1000001 !important;

background:rgba(10,0,20,.96);

overflow-y:auto;

backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;

box-shadow:none !important;
}

.favorites-panel.open{
right:0;
}
/* =========================
TOP BUTTONS
========================= */

.menu-toggle,
.favorites-toggle{

width:54px;
height:54px;

font-size:24px;

border-radius:18px;

z-index:10 !important;
}

/* =========================
LOGO
========================= */

.logo{
z-index:1 !important;
}

.top-logo{
height:32px !important;
width:auto;
display:block;
}

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

.playlist{

position:relative !important;

top:auto !important;
left:auto !important;
right:auto !important;

transform:none !important;

width:100% !important;

height:320px !important;

margin-top:30px;

overflow-y:auto !important;
overflow-x:hidden;

-webkit-overflow-scrolling:touch;

border-radius:26px;

background:rgba(10,0,20,.96);

z-index:1 !important;

backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;

box-shadow:none !important;
}

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

.controls{

width:92%;

height:82px;

bottom:118px;

padding:0 18px;

border-radius:28px;

box-shadow:none !important;

backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

.control-btn{

width:56px;
height:56px;

font-size:20px;
}

.social-btn{

width:58px;
height:58px;

font-size:22px;

border-radius:18px;

box-shadow:none !important;
}

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

.favorites-top h2{
font-size:18px !important;
}

/* =========================
FAVORITE ITEMS
========================= */
@media(max-width:980px){

.favorite-item{
display:flex;
align-items:center;

gap:14px;

padding:13px;

border-radius:22px;

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

min-height:auto;
}

.favorite-cover{
width:72px;
height:72px;

min-width:72px;
}

.favorite-title{
font-size:14px;
line-height:1.3;
}
}


/* =========================
FAVORITE IMAGE
========================= */

.favorite-cover{

width:65px;
height:50px;

min-width:65px;
min-height:50px;

border-radius:12px;

overflow:hidden;

flex-shrink:0;
}

.favorite-cover img{

width:100%;
height:100%;

object-fit:cover;

display:block;
}

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

#player{
filter:none !important;
transform:none !important;
opacity:.25;
}

#player iframe{

filter:none !important;

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

opacity:.12;
}

}
@media(max-width:980px){

/* LOGO */

.logo{
z-index:100 !important;
}

.top-logo{
height:62px !important;
}

/* BUTTONS */

.menu-toggle,
.favorites-toggle{
z-index:1000002 !important;
}

/* PANELS */

.categories{
z-index:1000000 !important;
}

.favorites-panel{
z-index:1000001 !important;
}

}
@media(max-width:980px){

.logo{
z-index:1 !important;
}

.favorites-panel{
z-index:1000001 !important;
}

}	




/* TIME */

.progress-time{

display:flex;
justify-content:space-between;

margin-bottom:13px;

font-size:13px;

opacity:.85;

/* BAR */
}	
.progress-bar{

width:100%;
height:6px;

border-radius:999px;

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

overflow:visible;
}
	@media(max-width:980px){

.playlist{
margin-top:-20px  !important;
}

}
/* TITLE */
.track-title{

font-size:20px !important;

line-height:1.2;
}



	@media(max-width:768px){

.progress-bar{
height:15px;
}

.progress-fill{
height:15px;
}

.progress-handle{
width:22px;
height:22px;
top:-5px;
}

}
.hero-btn-primary:hover{
transform:scale(1.05);
box-shadow:0 0 45px rgba(255,0,255,.6);
}

/* PROGRESS */

.progress-wrap{

position:absolute !important;

left:64% !important;

bottom:-175px !important;

width:420px !important;

transform:translateX(-50%) !important;
}

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

@media(max-width:980px){

/* MAIN RIGHT SECTION */

.right{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;

width:100% !important;

overflow:visible !important;
}

/* =========================
VINYL
========================= */

.vinyl-wrap{

position:relative !important;

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

width:240px !important;
height:240px !important;

min-width:240px !important;
min-height:240px !important;

max-width:240px !important;
max-height:240px !important;

aspect-ratio:1/1 !important;

margin:20px auto 0 !important;

flex:none !important;

overflow:visible !important;
}
@media(max-width:980px){

.vinyl-wrap{
margin-top:50px !important;
}

}
.vinyl{

display:block !important;

width:240px !important;
height:240px !important;

min-width:240px !important;
min-height:240px !important;

max-width:240px !important;
max-height:240px !important;

aspect-ratio:1/1 !important;

border-radius:50% !important;

flex:none !important;
}

/* GLOW OFF */

.vinyl-glow{
display:none !important;
}

/* =========================
TITLE UNDER VINYL
========================= */

.track-info{

position:relative !important;

display:block !important;

width:100% !important;

margin-top:40px !important;
padding:0 20px !important;

left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;

transform:none !important;

text-align:center !important;

z-index:20 !important;
}

.track-title{

display:block !important;

width:100% !important;

text-align:center !important;

font-size:20px !important;
line-height:1.3 !important;
}

/* =========================
PROGRESS BAR
========================= */

.progress-wrap{

position:relative !important;

display:block !important;

width:90% !important;

margin:20px auto 0 !important;

left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;

transform:none !important;

z-index:20 !important;
}

.progress-bar{
width:100% !important;
}

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

.controls{

position:fixed !important;

left:50% !important;
bottom:110px !important;

transform:translateX(-50%) !important;

width:92% !important;

height:82px !important;

padding:0 18px !important;

border-radius:17px !important;
}
/* =========================
SMALLER ELEMENTS
========================= */

.progress-bar{
height:15px !important;
}

.progress-fill{
height:15px !important;
}

.progress-handle{
width:22px !important;
height:22px !important;
top:-5px !important;
}

}
	@media(max-width:980px){

.controls{
bottom:10px !important;
}

.socials{
bottom:250px !important;
}

}
@media(max-width:980px){

.progress-wrap{
margin-top:-50px !important;
}

}
/* =========================
DESKTOP tytul i pleyerek
========================= */

@media(min-width:981px){

.track-info{

position:absolute;

bottom:-143px !important;
left:58% !important;

transform:translateX(-50%);

width:420px !important;
max-width:420px !important;

text-align:center;

z-index:100;
}

.progress-wrap{
position:absolute !important;

left:75% !important;
bottom:40px !important;

transform:translateX(-50%) !important;

width:420px !important;

display:block !important;

z-index:100 !important;
}

}
@media(min-width:981px){

.controls{
bottom:12px !important;
}

}
.controls{
position:fixed !important;
z-index:9999 !important;
}

.favorites-panel{
position:fixed !important;
z-index:9998 !important;
}

.favorites-panel.open{
z-index:10000 !important;
}
/* =========================
przyciski prawo lewo na mobile
========================= */	
@media(max-width:980px){

.control-btn:hover{
background:rgba(255,255,255,.08) !important;

transform:none !important;

box-shadow:none !important;

color:#fff !important;
}

}
@media(max-width:980px){

.logo{
position:relative !important;

display:flex !important;
justify-content:center !important;

width:100% !important;

margin-top:-80px !important;
margin-bottom:20px !important;
}
.top-logo{
display:block !important;

height:62px !important;
width:auto !important;
}

}
	@media(max-width:980px){

.logo{
z-index:10 !important;
}

.favorites-panel{
z-index:1000001 !important;
}

}
/* =========================
zmiana koloru winyl
========================= */
.vinyl-glow{
position:absolute;

width:470px;
height:470px;

border-radius:50%;

border:14px solid transparent;

background:
linear-gradient(
135deg,
#ff00ff,
#a100ff,
#00c3ff
) border-box;

filter:
drop-shadow(0 0 25px rgba(255,0,255,.35));

opacity:.9;

animation:
spin 10s linear infinite,
glowPulse 3s ease-in-out infinite;

/* ring */

-webkit-mask:
radial-gradient(circle,
transparent 63%,
#000 64%);

mask:
radial-gradient(circle,
transparent 63%,
#000 64%);
}
/* ulubione do gory */	
.favorites-panel{
padding-bottom:70px !important;
}
/* koleczko na pleyerku */		
.progress-bar{
position:relative;
cursor:pointer;
overflow:visible;
}

.progress-fill{
position:relative;
height:100%;
}

.progress-handle{
position:absolute;

right:-10px;
top:50%;

transform:translateY(-50%);

width:18px;
height:18px;

border-radius:50%;

background:#3597F9!important;

pointer-events:none;
}
@media(max-width:768px){

.progress-handle{

width:22px !important;
height:22px !important;

top:-3px !important;

right:-11px !important;

transform:none !important;
}

}
@media(max-width:980px){

.radio-box{

left:auto !important;
right:auto !important;

margin:0 auto !important;

width:100% !important;
max-width:420px !important;

top:30px !important;
}

}
.progress-wrap{
z-index:1 !important;
}

.favorites-panel{
z-index:999999 !important;
}
/* nowa playlista */

.play-item{

width:265px !important;

padding:16px !important;

border-radius:17px !important;

background:
rgba(8,0,20,.78) !important;

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

box-shadow:
0 0 40px rgba(255,0,255,.08) !important;
}

/* ITEM */

.play-item{
position:relative;

display:flex !important;
align-items:center !important;

gap:12px;

padding:9px !important;

border-radius:17px !important;

margin-bottom:14px !important;

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

transition:.18s ease;

overflow:hidden;
}

/* HOVER */

.play-item:hover{

transform:
translateX(5px)
scale(1.015);

background:
rgba(255,0,255,.12) !important;

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

/* ACTIVE */

.play-item.active{

background:
linear-gradient(
135deg,
rgba(255,0,255,.22),
rgba(90,0,255,.18)
) !important;

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

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

/* THUMB */

.playlist-thumb{
width:55px !important;
height:55px !important;

min-width:55px !important;

border-radius:14px;

overflow:hidden;

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

.playlist-thumb img{
width:100%;
height:100%;

object-fit:cover;

display:block;

transition:.25s;
}

.play-item:hover .playlist-thumb img{

transform:scale(1.08);
}

/* META */

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

/* TITLE */

.playlist-title{

font-size:13px !important;
font-weight:800;

line-height:1.35;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

margin-bottom:8px;

color:white;
}

/* SUB */

.playlist-sub{

font-size:13px;

opacity:.72;

display:flex;
align-items:center;
gap:6px;
}

/* TRACK */

.track-title{

max-width:520px;

margin:auto;

font-size:18px !important;

line-height:1.3 !important;

text-shadow:
0 0 22px rgba(255,0,255,.22);
}

/* PROGRESS */

.progress-bar{

height:9px !important;

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

border-radius:999px;

overflow:visible;
}

.progress-fill{

background:
linear-gradient(
90deg,
#ff00ff,
#6a5cff
) !important;

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

/* HANDLE */

.progress-handle{

width:20px !important;
height:20px !important;

right:-10px !important;

background:
linear-gradient(
135deg,
#ff00ff,
#6a5cff
) ;

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

/* MOBILE */

@media(max-width:980px){

.playlist{
width:100% !important;
}

.playlist-thumb{
width:70px !important;
height:70px !important;
min-width:70px !important;
}

.playlist-title{
font-size:14px !important;

}

}
@media(max-width:980px){

.play-item{
width:100% !important;
}

}
/* pleyerek w playlist i po prawej */
.play-icon{
display:inline-flex;
align-items:center;
justify-content:center;

width:14px;
height:14px;

font-size:10px;

border-radius:50%;

background:#ff00ff;
color:white;
}
.social-play{
color:#ff00ff !important;
-webkit-text-fill-color:#ff00ff !important;
}
.arrow-icon{
color:#ff0000 !important;
-webkit-text-fill-color:#ff0000 !important;
}
.social-btn{
color:#ff0000 !important;
}
/* szybszy mobile */
@media(max-width:980px){

/* ciężkie efekty OFF */

*{
filter:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}

/* mniej cieni */

.vinyl,
.vinyl-glow,
.play-item,
.controls,
.radio-box,
.social-btn{
box-shadow:none !important;
}

/* iframe */

#player{
position:absolute !important;
transform:none !important;
opacity:.50 !important;
}

#player iframe{
position:absolute !important;

width:100vw !important;
height:100vh !important;

transform:translate(-50%,-50%) !important;
}

/* glow OFF */

.vinyl-glow{
display:none !important;
}

/* ZOSTAWIAMY obrót płyty */

.vinyl{
animation:
spin 8s linear infinite !important;
}

/* tylko podczas play */

.vinyl:not(.playing){
animation-play-state:paused !important;
}

}