/* WEB PANEL PROXY public CSS */
*{
margin:0;
padding:0;
box-sizing:border-box;
}


body{

height:100vh;

background:#050505;

font-family:Arial,sans-serif;

color:white;

display:flex;

overflow:hidden;

}



/* Левая часть */

.info{

width:45%;

display:flex;

justify-content:center;

align-items:center;

padding:50px;


background:
linear-gradient(
135deg,
#001b33,
#000
);

}



.box{

max-width:600px;

animation:show 1.5s;

}



@keyframes show{

from{

opacity:0;

transform:translateX(-50px);

}

to{

opacity:1;

transform:translateX(0);

}

}



h1{

font-size:70px;

font-weight:900;


background:
linear-gradient(
90deg,
#00ffff,
#00ff88
);


-webkit-background-clip:text;

color:transparent;

}



h2{

margin-top:25px;

font-size:40px;

}



p{

margin-top:25px;

font-size:22px;

line-height:1.6;

color:#ccc;

}



.status{

margin-top:35px;

color:#00ff88;

font-size:25px;

font-weight:bold;

}





/* Видео */

.video{

width:55%;

position:relative;

}



video{

width:100%;

height:100%;

object-fit:cover;

}



.video:after{

content:"";

position:absolute;

inset:0;

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

pointer-events:none;

}





/* Кнопка звука */

#sound{

position:absolute;

bottom:30px;

right:30px;

z-index:10;


padding:15px 30px;


border:0;

border-radius:40px;


background:#00ffaa;

color:#000;


font-size:18px;

font-weight:bold;

cursor:pointer;

}





/* Музыкальный плеер */


#player{

display:none;

position:absolute;

left:30px;

bottom:30px;

z-index:20;


background:

rgba(0,0,0,.8);


backdrop-filter:blur(10px);


padding:20px;


border-radius:25px;


width:330px;

}



#playlist{

max-height:180px;

overflow-y:auto;

margin-bottom:15px;

}



.track{

padding:10px;

border-radius:10px;

cursor:pointer;

}



.track:hover{

background:

rgba(0,255,170,.3);

}



.track.active{

background:#00ffaa;

color:#000;

font-weight:bold;

}




.controls{

display:flex;

align-items:center;

gap:10px;

}



.controls button{

position:static;

padding:8px 12px;

border:0;

border-radius:50%;

background:#00ffaa;

cursor:pointer;

}



#volume{

width:90px;

}





@media(max-width:800px){


body{

display:block;

}


.info,
.video{

width:100%;

height:50vh;

}


h1{

font-size:45px;

}


}