body{
    margin:0;
    color:#fff;
    font-family:Inter,Arial,sans-serif;
    overflow:hidden;
    background:linear-gradient(-45deg,#050505,#120008,#300010,#050505,#65001e);
    background-size:500% 500%;
    animation:gradientMove 12s ease infinite;
}
@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
body::before{
content:"";
position:fixed;
inset:-20%;
background:
radial-gradient(circle at 20% 20%,rgba(255,0,60,.35),transparent 30%),
radial-gradient(circle at 80% 40%,rgba(255,0,60,.25),transparent 35%),
radial-gradient(circle at 50% 90%,rgba(180,0,0,.25),transparent 30%);
animation:redFlow 15s ease-in-out infinite alternate;
pointer-events:none;
z-index:-1;
}
@keyframes redFlow{
from{transform:translate(-50px,-20px) scale(1);}
to{transform:translate(50px,20px) scale(1.3);}
}



:root{
--bg:#0b0d12;--panel:#171b22;--panel2:#1f2430;--red:#ff2d55;
}
*{box-sizing:border-box}

.bg{
position:fixed;inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(255,45,85,.12),transparent 25%),
radial-gradient(circle at 80% 80%,rgba(255,45,85,.08),transparent 25%),
#0b0d12;
z-index:-1
}
.login-wrap{height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{
width:560px;padding:42px;border-radius:28px;
background:rgba(23,27,34,.92);
border:1px solid rgba(255,45,85,.2)
}
.logo{font-size:46px;font-weight:800;color:var(--red)}
input{
width:100%;padding:14px;margin:10px 0;
background:#101319;border:1px solid #2c3342;border-radius:14px;color:#fff
}
button,.upload{
background:linear-gradient(135deg,#ff2d55,#b31235);
padding:14px 18px;border:none;border-radius:14px;color:#fff;cursor:pointer
}
.layout{
display:grid;
grid-template-columns:220px minmax(800px,1fr) 320px;
height:100vh;
gap:16px;
padding:16px;
}
.left,.right,.video-card{
background:#131821;
border-radius:22px;
padding:16px;
}
.left{display:flex;flex-direction:column}
#users{flex:1}
.right{
display:flex;
flex-direction:column;
}
#chat{
flex:1;
overflow:auto;
}
#chat div{
background:var(--panel2);
padding:12px;
border-left:3px solid var(--red);
border-radius:12px;
margin:8px 0;
}
#users div{
background:var(--panel2);
padding:12px;
border-radius:12px;
margin:8px 0;
}
.center{display:flex}
.video-card{
width:100%;
display:flex;
flex-direction:column;
}
video{
width:100%;
height:calc(100vh - 170px);
background:#000;
border-radius:20px;
border:1px solid rgba(255,45,85,.45);
}
.composer{display:flex;gap:8px;margin-top:10px}
.composer input{margin:0}


/* Red-black animated background */
body{
background: linear-gradient(-45deg,#050505,#120008,#22000f,#050505);
background-size:400% 400%;
animation:bgshift 15s ease infinite;
}
@keyframes bgshift{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.left,.right,.video-card{
background:rgba(15,15,20,0.25)!important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.08)!important;
box-shadow:none!important;
}
#users div{
background:rgba(255,255,255,0.03)!important;
border:1px solid rgba(255,255,255,0.08);
}
button{
box-shadow:none!important;
border:1px solid rgba(255,255,255,0.15);
}



/* Animated red-black background */
body{
 background:#050505;
}
body::before{
 content:"";
 position:fixed;
 inset:-20%;
 background:
 radial-gradient(circle at 20% 20%, rgba(255,0,60,.22), transparent 30%),
 radial-gradient(circle at 80% 30%, rgba(180,0,0,.18), transparent 35%),
 radial-gradient(circle at 50% 80%, rgba(255,0,60,.15), transparent 30%);
 animation:bgFloat 14s ease-in-out infinite alternate;
 z-index:-2;
}
body::after{
 content:"";
 position:fixed;
 inset:0;
 background:linear-gradient(135deg,#050505,#140008,#050505,#1a0000);
 background-size:400% 400%;
 animation:bgShift 18s ease infinite;
 z-index:-3;
}
@keyframes bgShift{
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}
@keyframes bgFloat{
 from{transform:translate(-3%, -2%) scale(1)}
 to{transform:translate(3%, 2%) scale(1.15)}
}


body{
background:linear-gradient(-45deg,#050505,#180008,#3a0015,#050505,#8a0028) !important;
background-size:600% 600% !important;
animation:gradientMove 8s ease infinite !important;
}
body::before{
content:"";
position:fixed;
inset:-30%;
pointer-events:none;
z-index:-1;
background:
radial-gradient(circle at 20% 20%,rgba(255,0,60,.45),transparent 30%),
radial-gradient(circle at 80% 30%,rgba(255,0,0,.35),transparent 30%),
radial-gradient(circle at 50% 80%,rgba(255,20,20,.30),transparent 30%);
animation:redFlow 6s ease-in-out infinite alternate !important;
}

/* Extra background animation layer */
html::before{
content:"";
position:fixed;
inset:-50%;
pointer-events:none;
z-index:-4;
background:
repeating-radial-gradient(circle at center, rgba(255,0,60,.05) 0 2px, transparent 2px 120px);
animation:bgRotate 40s linear infinite;
}
@keyframes bgRotate{
from{transform:rotate(0deg) scale(1);}
to{transform:rotate(360deg) scale(1.1);}
}