*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,sans-serif;
}

body{
    background:#000;
    color:#fff;
    overflow-x:hidden;
}

/* LOGIN */

.loginWrapper{
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.loginBox{
    width:390px;
    background:#0f0f0f;
    border:1px solid red;
    border-radius:34px;
    padding:40px;
    box-shadow:0 0 50px rgba(255,0,0,0.35);
    overflow:hidden;
}

.loginBox h1{
    font-size:74px;
    margin-bottom:30px;
    text-align:center;
}

.loginBox h2{
    font-size:62px;
    margin-bottom:26px;
    text-align:center;
}

.loginBox h3{
    margin-top:18px;
    margin-bottom:14px;
    font-size:18px;
}

/* INPUTS */

.loginBox input{
    width:100%;
    height:56px;
    border:none;
    outline:none;
    background:#181818;
    border-radius:18px;
    padding:0 18px;
    color:white;
    font-size:18px;
    margin-bottom:16px;
}

/* BUTTONS */

.loginBox button,
.topBtn,
.inputArea button,
.voiceButtons button,
.settingsBtn,
.settingsClose,
.userCard button,
.dmInputArea button{
    transition:0.15s ease;
}

.loginBox button{
    width:100%;
    height:52px;
    border:none;
    border-radius:16px;
    background:#ff1010;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    margin-top:10px;
}

.loginBox button:hover{
    background:#ff2e2e;
}

/* REMEMBER */

.rememberBox{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.rememberBox label{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.rememberBox input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    border:2px solid red;
    border-radius:4px;
    background:#111;
    cursor:pointer;
    position:relative;
    display:block;
    flex:0 0 22px;
    padding:0;
    margin:0;
}

.rememberBox input[type="checkbox"]:checked{
    background:red;
}

.rememberBox input[type="checkbox"]:checked::after{
    content:"✓";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-58%);
    color:white;
    font-size:14px;
    font-weight:bold;
}

/* ADMIN */

.adminPanel{
    width:390px;
    min-height:620px;
    max-height:760px;
    padding-bottom:30px;
    display:flex;
    flex-direction:column;
}

.adminPanel.hasInvite{
    padding-bottom:170px;
}

.adminPanel h1{
    font-size:56px;
    white-space:nowrap;
    margin-bottom:22px;
    text-align:center;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.usersWindow::-webkit-scrollbar{
    width:5px;
}

.usersWindow::-webkit-scrollbar-track{
    background:#111;
    border-radius:10px;
}

.usersWindow::-webkit-scrollbar-thumb{
    background:red;
    border-radius:10px;
}

/* TOPBAR */

.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:70px;
    background:#090909;
    border-bottom:1px solid red;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    z-index:200;
}

.topRight{
    display:flex;
    gap:12px;
}

.topBtn{
    height:42px;
    padding:0 20px;
    border:none;
    border-radius:14px;
    background:#ff1010;
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.topBtn:hover{
    background:#ff2e2e;
}

/* CHAT */

#chat{
    position:fixed;
    top:70px;
    left:0;
    bottom:72px;
    width:calc(100% - 320px);
    overflow-y:auto;
    padding:14px;
    scrollbar-width:none;
    z-index:1;
}

#chat::-webkit-scrollbar{
    display:none;
}

.msg{
    background:#111;
    border-left:3px solid red;
    border-radius:18px;
    padding:6px 14px 4px 14px;
    margin-bottom:10px;
}

.msgTop{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:-4px;
}

.msgAvatar{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid red;
}

.msgText{
    margin-left:54px;
    margin-top:-14px;
    line-height:1.02;
    word-break:break-word;
}

.time{
    color:#888;
    font-size:12px;
    margin-left:8px;
}

/* INPUT */

.inputArea{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:72px;
    background:#090909;
    border-top:1px solid red;
    display:flex;
    z-index:150;
}

.inputArea input{
    flex:1;
    border:none;
    outline:none;
    background:#111;
    color:white;
    padding:0 18px;
    font-size:17px;
}

.inputArea button{
    width:160px;
    border:none;
    background:#ff1010;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
}

/* VOICE */

.voicePanel{
    position:fixed;
    top:100px;
    right:18px;
    width:260px;
    height:330px;
    background:#111;
    border:1px solid red;
    border-radius:24px;
    padding:16px;
    z-index:120;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.voicePanel h3{
    font-size:22px;
    margin-bottom:14px;
}

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

.voiceButtons button{
    height:44px;
    border:none;
    border-radius:14px;
    background:#ff1010;
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.voiceButtons button:hover{
    background:#ff2e2e;
}

.voiceMuteBtn{
    background:#1a1a1a !important;
    border:1px solid red !important;
}

#voiceUsers{
    margin-top:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow-y:auto;
    flex:1;
    scrollbar-width:none;
}

#voiceUsers::-webkit-scrollbar{
    display:none;
}

.voiceUser{
    background:#1a1a1a;
    border-radius:14px;
    padding:12px;
}

.voiceUser.speaking{
    background:#2a0000;
    border:1px solid red;
    box-shadow:0 0 14px rgba(255,0,0,0.45);
}

/* ONLINE USERS */

.onlinePanel{
    position:fixed;
    right:18px;
    bottom:86px;
    width:260px;
    height:330px;
    background:#111;
    border:1px solid red;
    border-radius:24px;
    padding:16px;
    overflow:hidden;
    z-index:120;
    display:flex;
    flex-direction:column;
}

#onlineUsers{
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow-y:auto;
    flex:1;
    scrollbar-width:none;
}

#onlineUsers::-webkit-scrollbar{
    display:none;
}

.onlineUser{
    background:#1a1a1a;
    border-radius:16px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:12px;
}

.avatarWrap{
    position:relative;
}

.avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}

/* DM LAYOUT */

.dmLayout{
position:fixed;

top:88px;
left:18px;
right:18px;
bottom:18px;

min-height:0;

display:grid;

grid-template-columns:
340px
1fr;

gap:24px;

align-items:stretch;

overflow:visible !important;

isolation:isolate;

z-index:1;
}

/* USERS LIST */

#dmUsers{
height:100%;

min-height:0;

position:relative;

z-index:999999;

background:
linear-gradient(
180deg,
#0b0b0b,
#070707
);

border:1px solid #1f1f1f;

border-radius:30px;

padding:20px;

display:flex;
flex-direction:column;

overflow:hidden;

isolation:isolate;
}

#friendsList{
flex:1;
min-height:0;
}

#friendRequests{
max-height:220px;
}

.dmSectionList{
flex:1;

min-height:0;

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

position:relative;

padding-right:0;

scrollbar-width:none;

contain:none !important;

isolation:auto !important;
}

.dmSectionList::-webkit-scrollbar{
display:none;
}
.dmSectionList::-webkit-scrollbar-track{
background:#111;
border-radius:20px;
}

.dmSectionList::-webkit-scrollbar-thumb{
background:#ff2020;
border-radius:20px;
}

.dmSectionList::-webkit-scrollbar-thumb:hover{
background:#ff3b3b;
}

.dmHomeUser{
position:relative;

overflow:visible !important;

z-index:9999;

background:
linear-gradient(
180deg,
#111,
#0c0c0c
);

border:
1px solid #1d1d1d;

border-radius:22px;

padding:16px;

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

transition:.15s;

margin-bottom:12px;

isolation:auto !important;
}

.dmHomeUser:hover{

border-color:#2b2b2b;

background:
linear-gradient(
180deg,
#161616,
#101010
);
}

.dmAvatar{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid red;
}

.dmHomeName{
font-size:17px;
font-weight:700;
}

.dmHomeSub{
font-size:14px;
margin-top:4px;
font-weight:600;
}

.dmFriendLeft{
display:flex;
align-items:center;
gap:14px;
}

/* CHAT AREA */

#dmChatArea{
position:relative;

z-index:1;

height:100%;

min-height:0;

flex:1;

background:
linear-gradient(
180deg,
#0b0b0b,
#070707
);

border:
1px solid #1a1a1a;

border-radius:32px;

display:flex;
flex-direction:column;

overflow:visible;

box-shadow:
0 0 40px rgba(0,0,0,0.45);
}

/* MESSAGES */

.dmMessages{
    flex:1;

    overflow-y:auto;

pointer-events:auto;

    padding:22px;

    display:flex;
    flex-direction:column;

justify-content:flex-start;
align-items:stretch;

    gap:16px;

    scrollbar-width:none;
}

.dmMessages::-webkit-scrollbar{
    display:none;
}

.dmMessageRow{
    display:flex;
    flex-direction:column;
}

.dmMessageContent{
    max-width:70%;
}

.dmMessageTop{
    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:6px;
}

.dmTime{
    color:#777;
    font-size:12px;
}

.dmMessageBubble{
    background:#161616;

    border-left:3px solid red;

    border-radius:18px;

    padding:12px 16px;

    line-height:1.4;

    word-break:break-word;
}

/* INPUT */

.dmInputArea{
    height:64px;

    display:flex;

    border-top:1px solid #1f1f1f;
}

.dmInputArea input{
    flex:1;

    background:#111;

    border:none;
    outline:none;

    color:white;

    padding:0 18px;

    font-size:16px;
}

.dmInputArea button{
    width:150px;

    border:none;

    background:#ff1010;

    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;
}

.dmInputArea button:hover{
    background:#ff2e2e;
}

/* REMOVE TOP RIGHT X */

.settingsX{
    display:none !important;
}

/* FIX BUTTON TEXT */

.settingsBtn,
.settingsClose{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    line-height:1;
}

/* FIX FAT CLOSE BUTTON */

.settingsClose{
    height:58px !important;
    padding:0 !important;
    margin-top:18px;
}

/* FIX CHANGE NAME BUTTON */

.settingsBtn{
    height:58px !important;
    padding:0 !important;
}

/* MAKE UPLOAD ROW RELATIVE */

.settingsRow{
    position:relative;
}

.uploadRow{
    position:relative;
    display:flex;
    align-items:center;
}

.settingsCard{
    position:relative;
}

.settingsArrow{
    position:absolute;
    right:24px;
    top:50%;
    transform:translateY(-50%);
    
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    color:#666;
    font-size:26px;
    line-height:1;

    pointer-events:none;
}

.settingsArrow i{
    display:block;
}

/* TOP BUTTON ICONS */

.topBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 22px;

    background:linear-gradient(
        180deg,
        #ff2a2a,
        #d60000
    );

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

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

.topBtn i{
    font-size:15px;
    position:relative;
    top:1px;
}

.topBtn:hover{
    transform:translateY(-2px);
    box-shadow:
    0 0 24px rgba(255,0,0,0.4);
}

/* INPUT AREA */

.inputArea,
.dmInputArea{
    gap:10px;
    padding:10px;
    background:#080808;
}

/* MESSAGE INPUT */

.inputArea input,
.dmInputArea input{
    border-radius:16px;
    background:#101010;
    border:1px solid #1f1f1f;
}

/* UPLOAD BUTTON */

.uploadBtn{
    width:58px !important;
    min-width:58px;

    border:none;

    border-radius:16px;

    background:#151515 !important;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:.15s;

    border:1px solid #242424;
}

.uploadBtn:hover{
    background:#202020 !important;
}

/* SEND BUTTON */

.sendBtn{
    width:150px !important;

    display:flex;
line-height:1;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #ff2f2f,
        #ff0000
    ) !important;

    color:white;

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

    cursor:pointer;

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

    transition:.15s;
}

.sendBtn:hover{
    transform:translateY(-2px);

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

.sendBtn i{
    font-size:16px;
    position:relative;
    top:1px;
}

.hidden{
    display:none !important;
}

/* DM UNREAD BADGE */

.dmHomeUser{
    position:relative;
}

.dmUnread{
position:absolute;

top:8px;
right:8px;

min-width:24px;
height:24px;
padding:0 7px;

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

background:#ff1a1a;

color:white;

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

border-radius:50%;

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

z-index:999;

pointer-events:none;
}

/* DELETE BUTTON */

.msgHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.deleteMsgBtn{
    opacity:0;

    background:none;
    border:none;

    color:#ff4d4d;

    cursor:pointer;

    font-size:15px;

    transition:0.2s;

    padding:6px;

    border-radius:8px;
}

.msg:hover .deleteMsgBtn,
.dmMessageRow:hover .deleteMsgBtn{
    opacity:1;
}

.deleteMsgBtn:hover{
    background:rgba(255,0,0,0.12);
    transform:scale(1.1);
}

/* DM CALL */

.dmHeader{

display:flex;

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

padding:0 26px;

height:88px;

border-bottom:1px solid #1a1a1a;

flex-shrink:0;
}

.dmCallBtn{
    width:48px;
    min-width:48px;

    height:48px;

    border:none;

    border-radius:16px;

    background:linear-gradient(
        180deg,
        #ff2d2d,
        #ff0000
    );

    color:white;

    font-size:18px;

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

    cursor:pointer;

    transition:.15s;
}

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

.callOverlay{

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

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

background:rgba(0,0,0,0.72);

backdrop-filter:blur(8px);

z-index:999999;

pointer-events:auto;

}

.callBox{

width:300px;

background:
linear-gradient(
180deg,
#0d0d0d,
#070707
);

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

border-radius:28px;

padding:26px 20px;

pointer-events:auto;

box-shadow:
0 0 40px rgba(255,0,0,0.22);

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

}

.callStatus{
    color:#ff4d4d;

    font-size:15px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

    text-transform:uppercase;
}

.callUser{

font-size:34px;
font-weight:900;

margin-top:18px;
margin-bottom:20px;

}

.callAvatar{

width:110px;
height:110px;

border-radius:50%;

object-fit:cover;

border:3px solid red;

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

margin-top:8px;

}

.callButtons{

display:flex;

flex-direction:column;

gap:14px;

width:100%;

margin-top:18px;

}

.callControlBtn{

width:100%;

height:74px;

border:none;

border-radius:22px;

font-size:20px;

cursor:pointer;

font-weight:700;

transition:0.2s;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

padding:0 22px;

}

.callMuteBtn{

background:#161616;
color:white;

}

.callEndBtn{

background:
linear-gradient(
180deg,
#ff2d2d,
#d90000
);

color:white;

}

.callControlBtn:hover{

transform:translateY(-2px);

}

.callOverlay.hidden{
    display:none !important;
}

.acceptCallBtn,
.declineCallBtn{

width:100%;

height:74px;

border:none;

border-radius:22px;

color:white;

font-size:22px;

font-weight:700;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

}

.acceptCallBtn{
    background:#1db954;
}

.declineCallBtn{
    background:#ff2d2d;
}

/* MINI VOICE BAR */

.miniVoiceBar{
    position:fixed;

    left:20px;
    right:20px;
    bottom:18px;

    height:68px;

    background:#0b0b0b;

    border:1px solid red;

    border-radius:22px;

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

    padding:0 20px;

    z-index:9999;

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

.miniVoiceLeft{
    display:flex;
    align-items:center;
    gap:14px;
}

.miniVoiceDot{
    width:14px;
    height:14px;

    border-radius:50%;

    background:#19ff58;

    box-shadow:
        0 0 16px #19ff58;
}

.miniVoiceText{
    font-size:16px;
    font-weight:700;
}

.miniVoiceBtns{
    display:flex;
    gap:10px;
}

.miniVoiceBtns button{
    width:48px;
    height:48px;

    border:none;

    border-radius:16px;

    color:white;

    font-size:18px;

    cursor:pointer;
}

.miniMuteBtn{
    background:#1c1c1c;
}

.miniLeaveBtn{
    background:#ff2020;
}

/* FRIENDS */

.friendsTop{
margin-bottom:16px;
}

.addFriendBtn{
width:100%;
height:52px;

border:none;

border-radius:16px;

background:linear-gradient(
180deg,
#ff2d2d,
#ff0000
);

color:white;

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

cursor:pointer;
}

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

.dmDivider{
border:none;

height:1px;

background:
linear-gradient(
90deg,
transparent,
#222,
transparent
);

margin:4px 0 10px 0;
}

/* FRIEND MENU */

.friendMenu{
position:absolute;

top:50%;

right:74px;

transform:translateY(-50%);

width:190px;

background:#111;

border:1px solid #2a2a2a;

border-radius:18px;

z-index:99999;

overflow:hidden;

box-shadow:
0 0 25px rgba(0,0,0,0.45);

animation:friendMenuPop .12s ease;
}

@keyframes friendMenuPop{

from{
opacity:0;
transform:translateY(-50%) scale(.96);
}

to{
opacity:1;
transform:translateY(-50%) scale(1);
}

}

.friendMenuItem{
height:52px;

display:flex;
align-items:center;
gap:12px;

padding:0 16px;

color:white;

cursor:pointer;

font-weight:600;
}

.friendMenuItem:hover{
background:#1a1a1a;
}

.removeFriendBtn{
color:#ff3b3b;
}

/* SETTINGS PAGE */

.settingsPage{
background:#000;
min-height:100vh;
padding:20px;
overflow:auto;
}

.settingsPageWrap{
width:100%;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
box-sizing:border-box;
}

.settingsBox{
width:1200px;
max-width:95%;
min-height:720px;
background:#050505;
border:2px solid #ff0000;
border-radius:40px;
padding:28px;
box-sizing:border-box;
box-shadow:
0 0 40px #ff000033;
display:flex;
flex-direction:column;
justify-content:center;
}

.settingsTop{
margin-bottom:28px;
}

.settingsTitleWrap{
display:flex;
align-items:center;
gap:16px;
}

.settingsIcon{
color:#ff2020;
font-size:52px;
}

.settingsTitle{
font-size:52px;
font-weight:900;
}

.settingsGrid{
display:grid;

grid-template-columns:
360px
minmax(0,1fr);

gap:28px;

width:100%;

align-items:stretch;
}

.settingsLeftColumn{
display:flex;
flex-direction:column;
align-items:stretch;
height:100%;
}

.settingsFriendCard{
height:auto;
}

.settingsLeftPanel{
width:100%;
height:100%;
background:#0b0b0b;
border:1px solid #1d1d1d;
border-radius:30px;
padding:26px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.settingsProfile{
display:flex;
align-items:center;
gap:20px;
}

.settingsAvatar{
width:82px;
height:82px;
border-radius:50%;
object-fit:cover;
border:4px solid #ff2020;
}

.settingsUsername{
font-size:24px;
font-weight:800;
}

.settingsOnline{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
position:relative;
width:max-content;
cursor:pointer;
}

.statusDot{
width:12px;
height:12px;
border-radius:50%;
}

.statusDot.online{
background:#19ff58;
}

.statusDot.idle{
background:#ffcc00;
}

.statusDot.dnd{
background:#ff3030;
}

.statusDot.invisible{
background:#777;
}

.statusMenu{
position:absolute;

left:calc(100% + 10px);

top:50%;
transform:translateY(-50%);

width:220px;

background:#111;

border:1px solid #222;

border-radius:18px;

padding:8px;

display:none;
flex-direction:column;

gap:4px;

z-index:99999;

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

.statusMenu.show{
display:flex;
}

.statusOption{
height:46px;
border-radius:14px;
display:flex;
align-items:center;
gap:12px;
padding:0 14px;
font-weight:600;
cursor:pointer;
}

.statusOption:hover{
background:#1a1a1a;
}

.settingsFriendCard{
background:#090909;
border:1px solid #1d1d1d;
border-radius:28px;
padding:24px;
}

.settingsFriendTop{
display:flex;
align-items:center;
gap:18px;
margin-bottom:20px;
}

.settingsFriendIcon{
width:70px;
height:70px;
border-radius:50%;
background:rgba(255,0,0,0.14);
color:#ff2020;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
}

.settingsFriendTitle{
font-size:22px;
font-weight:700;
}

.settingsFriendSub{
color:#777;
margin-top:6px;
font-size:15px;
}

.noiseCard{
margin-top:24px;

background:#0b0b0b;

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

border-radius:28px;

padding:16px;

width:100%;

max-width:100%;

height:auto;

overflow:hidden;
}

.noiseTop{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}

.noiseLeft{
display:flex;
align-items:flex-start;
gap:16px;

flex:1;
min-width:0;
}

.noiseIcon{
width:54px;
height:54px;

min-width:54px;

border-radius:22px;

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

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

color:#ff2d2d;

font-size:28px;
}

.noiseTexts{
flex:1;
min-width:0;
}

.noiseTitle{
font-size:15px;
font-weight:800;
line-height:1.1;
}

.noiseLine{
width:52px;
height:2px;

background:#ff2d2d;

margin:10px 0;

border-radius:999px;
}

.noiseSub{
font-size:12px;
line-height:1.45;
color:#aaa;
}

.noiseSwitch{
position:relative;

width:58px;
height:32px;

min-width:58px;

display:inline-block;

margin-top:4px;
}

.noiseSwitch input{
opacity:0;
width:0;
height:0;
}

.noiseSlider{
position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:#333;

border-radius:999px;

cursor:pointer;
}

.noiseSlider::before{
content:"";

position:absolute;

width:24px;
height:24px;

left:4px;
top:4px;

background:white;

border-radius:50%;

transition:.2s;
}

.noiseSwitch input:checked + .noiseSlider{
background:#ff2020;
}

.noiseSwitch input:checked + .noiseSlider::before{
transform:translateX(26px);
}

.noiseBottom{
margin-top:16px;

padding-top:14px;

border-top:1px solid rgba(255,255,255,.05);

display:flex;
align-items:flex-start;
gap:10px;

font-size:11px;
line-height:1.5;

color:#888;
}

.noiseBottom i{
color:#ff4d4d;
margin-top:2px;
}

.settingsFriendBottom{
display:flex;
align-items:center;
gap:14px;
}

.settingsFriendCode{
font-size:22px;
font-weight:800;
color:#ff2a2a;
letter-spacing:2px;
}

.copyFriendBtn{
width:52px;
height:52px;
border:none;
border-radius:16px;
background:#111;
border:1px solid #222;
color:white;
font-size:18px;
cursor:pointer;
}

.settingsRightColumn{
display:flex;
flex-direction:column;
gap:22px;
width:100%;
min-width:0;
flex:1;
}

.settingsCard,
.settingsRow{
width:100%;

min-width:0;

background:#0b0b0b;
border:1px solid #1d1d1d;
border-radius:28px;
padding:22px;
display:flex;
align-items:center;
justify-content:space-between;
}

.settingsRowLeft{
display:flex;
align-items:center;
gap:22px;
}

.settingsRowIcon{
width:72px;
height:72px;
border-radius:50%;
background:rgba(255,0,0,0.14);
color:#ff2020;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
}

.settingsRowTitle{
font-size:18px;
font-weight:700;
}

.settingsRowSub{
color:#777;
font-size:14px;
margin-top:6px;
}

.usernameCard{
flex-direction:column;
align-items:flex-start;
}

.usernameBottom{
width:100%;
display:flex;
gap:16px;
margin-top:20px;
}

.settingsInput{
flex:1;
height:56px;
border:none;
outline:none;
background:#111;
border:1px solid #1f1f1f;
border-radius:18px;
padding:0 20px;
font-size:16px;
color:white;
}

@media(max-width:1000px){

.settingsGrid{
grid-template-columns:1fr;
}

.usernameBottom{
flex-direction:column;
}

.settingsBtn{
width:100%;
}

}

/* FIX SWITCH */

.switch{
position:relative;

width:58px;
height:32px;

display:inline-block;
}

.switch input{
opacity:0;
width:0;
height:0;
}

.slider{
position:absolute;
cursor:pointer;

top:0;
left:0;
right:0;
bottom:0;

background:#2a2a2a;

border-radius:999px;

transition:.2s;
}

.slider:before{
content:"";

position:absolute;

height:24px;
width:24px;

left:4px;
top:4px;

background:white;

border-radius:50%;

transition:.2s;
}

.switch input:checked + .slider{
background:#ff2020;
}

.switch input:checked + .slider:before{
transform:translateX(26px);
}

/* FIX SETTINGS BUTTONS */

.settingsBtn{
    min-width:180px;

    height:56px;

    padding:0 22px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        180deg,
        #ff2f2f,
        #ff0000
    );

    color:white;

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

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

    cursor:pointer;

    white-space:nowrap;

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

    flex-shrink:0;
}

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

.settingsClose{
width:100%;

height:56px;

border:none;

border-radius:22px;

background:#0b0b0b;

border:1px solid #1f1f1f;

color:white;

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

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

cursor:pointer;

margin-top:10px;
}

.dmChatUser{
font-size:30px;
font-weight:800;

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

.dmCallBtn{
flex-shrink:0;
}

#dmUsers{
height:100%;
}

.dmMessages{
min-height:0;
}

.dmLayout{
align-items:stretch;
}

/* ADD FRIEND MODERN */

.addFriendModernBox{
width:560px;

max-width:90vw;

background:
linear-gradient(
180deg,
#0b0b0b,
#070707
);

border:2px solid rgba(255,0,0,0.65);

border-radius:42px;

padding:54px;

display:flex;
flex-direction:column;

align-items:center;

gap:28px;

box-shadow:
0 0 90px rgba(255,0,0,0.22),
0 0 180px rgba(255,0,0,0.08);

position:relative;

overflow:hidden;
}

.addFriendTopIcon{
width:120px;
height:120px;

border-radius:50%;

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

font-size:48px;

color:#ff2a2a;

border:2px solid rgba(255,0,0,0.7);

background:
radial-gradient(
circle,
rgba(255,0,0,0.12),
rgba(255,0,0,0.02)
);

box-shadow:
0 0 40px rgba(255,0,0,0.28);
}

.addFriendTitle{
font-size:58px;
font-weight:900;

line-height:1;

letter-spacing:-4px;

text-align:center;

color:white;

text-shadow:
0 0 25px rgba(255,255,255,0.08);
}

.addFriendSub{
font-size:22px;

line-height:1.5;

text-align:center;

max-width:760px;

color:#9d9d9d;
}

.addFriendInputWrap{
position:relative;

width:100%;

margin-top:10px;
}

.addFriendInputIcon{
position:absolute;

left:30px;
top:50%;

transform:translateY(-50%);

color:#ff3a3a;

font-size:30px;
}

.addFriendInput{
width:100%;

height:68px;

background:#101010;

border:2px solid rgba(255,0,0,0.45);

border-radius:30px;

padding-left:88px;
padding-right:28px;

font-size:24px;
font-weight:600;

color:white;

outline:none;

transition:.15s;
}

.addFriendInput:focus{
border-color:#ff2020;

box-shadow:
0 0 25px rgba(255,0,0,0.18);
}

.addFriendButtons{
display:flex;

justify-content:center;

gap:20px;

margin-top:16px;

width:100%;
}

.addFriendConfirm,
.addFriendCancel{
height:64px;

padding:0 42px;

border:none;

border-radius:26px;

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

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

gap:14px;

cursor:pointer;

transition:.15s;
}

.addFriendConfirm{
min-width:240px;

background:
linear-gradient(
180deg,
#ff3d3d,
#ff0000
);

color:white;

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

.addFriendConfirm:hover,
.addFriendCancel:hover{
transform:translateY(-3px);
}

.addFriendCancel{
background:#171717;

border:1px solid #2b2b2b;

color:white;
}

/* ADMIN SEARCH */

.adminSearchWrap{
display:flex;
flex-direction:column;
gap:14px;

margin-bottom:10px;
}

.adminSearchBar{
position:relative;

width:100%;
height:52px;

display:flex;
align-items:center;

background:
linear-gradient(
180deg,
#111,
#0b0b0b
);

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

border-radius:18px;

padding:0 22px;

overflow:hidden;

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

.adminSearchBar:focus-within{
border-color:rgba(255,0,0,0.7);

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

.adminSearchBar i:first-child{
color:#ff2a2a;

font-size:20px;

margin-right:16px;
}

.adminSearchBar i:last-child{
color:#ff2a2a;

font-size:20px;

margin-left:auto;
}

.adminUserSearch{
flex:1;

height:100%;

background:none;

border:none;
outline:none;

color:white;

font-size:14px;
font-weight:600;
}

.adminUserSearch::placeholder{
color:#666;
}

.adminSearchResults{
display:flex;
flex-direction:column;
gap:12px;
}

.adminSearchResults .dmHomeUser{
min-height:74px;

padding:14px 16px;

border-radius:20px;

background:
linear-gradient(
180deg,
#101010,
#0b0b0b
);

border:1px solid #1d1d1d;
}

.adminSearchResults .dmAvatar{
width:52px;
height:52px;
}

.adminSearchResults .dmHomeName{
font-size:16px;
}

.adminSearchResults .dmHomeSub{
font-size:13px;
color:#777;
}

.adminSearchResults .sendBtn{
width:110px !important;

height:42px !important;

border-radius:14px;

font-size:15px;

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

/* DM SECTION TOGGLES */

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

cursor:pointer;

position:sticky;
top:0;
z-index:20;

background:#0b0b0b;

padding-top:4px;
padding-bottom:8px;

margin-top:4px;
margin-bottom:6px;
}

.dmSectionArrow{
font-size:18px;

color:#777;

transition:.15s;
}

.dmSectionArrow.rotate{
transform:rotate(-90deg);
}

/* ===== ULTRA MODERN ADMIN PANEL ===== */

.adminNewLayout{
display:grid;
grid-template-columns:240px 1fr;
height:100vh;
background:#050505;
overflow:hidden;
}

/* SIDEBAR */

.adminSidebar{
background:linear-gradient(180deg,#080808,#030303);
border-right:1px solid rgba(255,0,0,.22);
padding:18px;
display:flex;
flex-direction:column;
}

.adminLogo{
display:flex;
flex-direction:column;
align-items:center;
margin-top:12px;
margin-bottom:28px;
}

.adminLogoCircle{
width:86px;
height:86px;
border-radius:50%;
border:3px solid #ff2020;
display:flex;
align-items:center;
justify-content:center;
font-size:42px;
font-weight:900;
color:#ff2020;
box-shadow:0 0 24px rgba(255,0,0,.25);
}

.adminLogoText{
margin-top:14px;
font-size:30px;
font-weight:900;
color:#ff2020;
}

.adminLogoSub{
margin-top:4px;
font-size:16px;
color:#aaa;
}

.adminNav{
display:flex;
flex-direction:column;
gap:12px;
margin-top:10px;
}

.adminNavBtn{
height:56px;
border:none;
border-radius:18px;
background:transparent;
color:white;
font-size:18px;
font-weight:700;
display:flex;
align-items:center;
gap:14px;
padding:0 18px;
cursor:pointer;
transition:.15s;
}

.adminNavBtn i{
width:22px;
font-size:18px;
color:#d8d8d8;
}

.adminNavBtn.active,
.adminNavBtn:hover{
background:linear-gradient(
90deg,
rgba(255,0,0,.32),
rgba(255,0,0,.06)
);
box-shadow:0 0 24px rgba(255,0,0,.12);
}

.adminBottomProfile{
margin-top:auto;
background:#0d0d0d;
border:1px solid #1e1e1e;
border-radius:22px;
padding:16px;
display:flex;
align-items:center;
gap:14px;
}

.adminBottomAvatar{
width:54px;
height:54px;
border-radius:18px;
background:linear-gradient(180deg,#ff2a2a,#c40000);
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:white;
}

.adminBottomName{
font-size:24px;
font-weight:800;
line-height:1;
}

.adminBottomUser{
margin-top:6px;
color:#ff3030;
font-size:15px;
font-weight:700;
}

/* MAIN */

.adminTop{
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:18px;
}

.adminMainTitle{
font-size:58px;
font-weight:900;
line-height:1;
}

.adminMainSub{
margin-top:10px;
font-size:16px;
color:#777;
}

.adminAccountBox{
background:#0d0d0d;
border:1px solid #1d1d1d;
border-radius:22px;
padding:14px 18px;
display:flex;
align-items:center;
gap:16px;
min-width:320px;
}

.adminAccountIcon{
width:58px;
height:58px;
border-radius:18px;
background:rgba(255,0,0,.1);
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:#ff2020;
}

.adminAccountTop{
font-size:14px;
color:#888;
}

.adminAccountName{
margin-top:4px;
font-size:18px;
font-weight:800;
color:#ff3030;
}

/* STATS */

.adminStats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:18px;
}

.adminStatCard{
background:linear-gradient(180deg,#101010,#090909);
border:1px solid #1b1b1b;
border-radius:24px;
padding:18px;
display:flex;
align-items:center;
gap:18px;
min-height:120px;
}

.adminStatIcon{
width:70px;
height:70px;
border-radius:20px;
background:rgba(255,0,0,.08);
border:1px solid rgba(255,0,0,.22);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:#ff2a2a;
}

.adminStatValue{
font-size:44px;
font-weight:900;
line-height:1;
}

.adminStatLabel{
margin-top:6px;
font-size:15px;
color:#888;
}

/* CONTENT */

.adminContentGrid{
display:grid;

grid-template-columns:
minmax(900px,1fr)
320px;

gap:18px;

flex:1;

align-items:start;

min-height:max-content;

overflow:visible;
}

/* USERS PANEL */

.adminUsersPanel{
background:linear-gradient(180deg,#0b0b0b,#070707);
border:1px solid rgba(255,0,0,.18);
border-radius:28px;
padding:18px;
display:flex;
flex-direction:column;
justify-content:flex-start;
overflow:hidden;
min-width:0;
height:100%;
min-height:0;
}

.adminPanelTop{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:16px;
gap:16px;
}

.adminPanelTitle{
font-size:22px;
font-weight:800;
display:flex;
align-items:center;
gap:12px;
white-space:nowrap;
}

.adminPanelTitle i{
color:#ff2a2a;
}

/* SEARCH */

.adminTableSearch{
width:280px;
height:48px;
background:#0f0f0f;
border:1px solid #2a2a2a;
border-radius:16px;
padding:0 18px;
color:white;
font-size:15px;
outline:none;
}

.adminTableSearch:focus{
border-color:#ff2a2a;
}

/* TABLE */

.usersWindow{
flex:1;

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

padding-right:4px;

min-width:0;

height:650px;

display:flex;
flex-direction:column;

gap:10px;
}

.usersWindow::-webkit-scrollbar{
width:6px;
}

.usersWindow::-webkit-scrollbar-thumb{
background:#ff2020;
border-radius:20px;
}

.userCard:hover{
border-color:#2b2b2b;
}

/* RIGHT */

.adminRight{
display:flex;
flex-direction:column;
gap:18px;
overflow:hidden;
}

.adminInviteCard,
.adminQuickActions{
background:linear-gradient(180deg,#0c0c0c,#070707);
border:1px solid rgba(255,0,0,.16);
border-radius:28px;
padding:22px;
}

.adminInviteText{
font-size:15px;
line-height:1.6;
color:#888;
margin-bottom:18px;
}

.adminBigBtn{
width:100%;
height:60px;
border:none;
border-radius:18px;
background:linear-gradient(180deg,#ff2d2d,#ff0000);
color:white;
font-size:20px;
font-weight:800;
cursor:pointer;
}

.adminInviteBox{
margin-top:18px;
height:66px;
display:flex;
align-items:center;
justify-content:center;
background:#101010;
border:1px dashed rgba(255,0,0,.4);
border-radius:18px;
font-size:18px;
font-weight:800;
color:#ff2a2a;
padding:0 14px;
text-align:center;
}

.adminSecondaryBtn{
width:100%;
height:58px;
border:none;
border-radius:18px;
background:#111;
border:1px solid #232323;
color:white;
font-size:17px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
cursor:pointer;
margin-top:12px;
}

.logoutBtn{
background:linear-gradient(180deg,#ff2d2d,#c00000);
border:none;
}

/* COMPACT */

@media(max-width:1200px){

.adminContentGrid{
grid-template-columns:1fr;
}

.adminRight{
display:grid;
grid-template-columns:1fr 1fr;
}

}

.adminTableHeader{
display:grid;

margin-bottom:8px;

grid-template-columns:
minmax(320px,2fr)
120px
120px
150px
minmax(260px,320px);

padding:0 18px 14px 18px;

color:#888;

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

border-bottom:1px solid #1b1b1b;

margin-bottom:12px;
}

.actionsHeader{
text-align:right;
}

.userCard{
display:grid;

grid-template-columns:
minmax(280px,2fr)
100px
120px
140px
220px;

align-items:center;

background:#0d0d0d;

border:1px solid #1a1a1a;

border-radius:18px;

padding:14px 16px;

margin-bottom:10px;

transition:.15s;

width:100%;

min-width:0;

gap:14px;

min-height:88px;
}

.userCard:hover{
border-color:#2a2a2a;

transform:translateY(-2px);
}

.adminUserMain{
display:flex;
align-items:center;
gap:16px;
}

.adminUserAvatar{
width:52px;
height:52px;

border-radius:50%;

background:linear-gradient(
180deg,
#ff2a2a,
#a50000
);

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

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

color:white;

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

.adminUserName{
font-size:20px;
font-weight:800;
}

.adminMiniText{
margin-top:4px;
font-size:13px;
color:#777;
}

.adminRole{
width:max-content;

padding:8px 14px;

border-radius:12px;

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

background:#171717;

border:1px solid #2a2a2a;
}

.adminRole.admin{
background:#2a0000;

border-color:#ff2020;

color:#ff4d4d;
}

.adminStatus{
display:flex;
align-items:center;
gap:10px;

min-width:110px;

font-weight:700;
}

.adminStatusDot{
width:10px;
height:10px;
border-radius:50%;
}

.adminStatusDot.online{
background:#2bff59;

box-shadow:
0 0 10px #2bff59;
}

.adminStatusDot.offline{
background:#777;
}

.adminJoinedDate{
color:#aaa;
font-weight:600;
}

.adminGiveBtn,
.adminDeleteBtn{
height:38px;

padding:0 12px;

border:none;

border-radius:12px;

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

gap:6px;

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

cursor:pointer;

transition:.15s;

white-space:nowrap;

flex-shrink:0;

min-width:auto;
}

.adminGiveBtn{
background:linear-gradient(
180deg,
#ff2d2d,
#d30000
);

color:white;
}

.adminDeleteBtn{
background:#151515;

border:1px solid #2b2b2b;

color:white;
}

.adminGiveBtn:hover,
.adminDeleteBtn:hover{
transform:translateY(-2px);
}

.adminProtected{
color:#666;
font-size:22px;
font-weight:900;
}

.adminInviteBox{
margin-top:18px;

min-height:84px;

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

background:#0f0f0f;

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

border-radius:18px;

font-size:18px;
font-weight:900;

color:#ff2a2a;

padding:14px;

line-height:1.8;

text-align:center;

word-break:break-word;
}

/* KEEP ADMIN PANEL SAME SIZE */

.adminStats{
grid-template-columns:repeat(3,minmax(0,1fr));
}

.adminStatCard{
min-width:0;
}

.adminTableHeader,
.userCard{
width:100%;
}

.adminActions{
display:flex;
align-items:center;
gap:10px;
justify-content:flex-end;
flex-wrap:wrap;
}

.adminDeleteBtn,
.adminGiveBtn{
white-space:nowrap;
}

@media(max-width:1400px){

.adminNewLayout{
grid-template-columns:220px 1fr;
}

.adminContentGrid{
grid-template-columns:minmax(760px,1fr) 300px;
}

}

@media(max-width:1200px){

.adminContentGrid{
grid-template-columns:1fr;
}

.adminRight{
display:grid;
grid-template-columns:1fr 1fr;
}

}

@media(max-width:1000px){

.adminNewLayout{
grid-template-columns:1fr;
}

.adminSidebar{
display:none;
}

.adminStats{
grid-template-columns:1fr;
}

.adminRight{
grid-template-columns:1fr;
}

.adminTableHeader{
display:none;
}

.userCard{
grid-template-columns:1fr;
gap:14px;
}

.adminActions{
justify-content:flex-start;
flex-wrap:wrap;
}

}

/* ========================= */
/* REDCHAT SERVERS */
/* ========================= */

.serversPage{
background:#000;
overflow:visible;
}

.serversLayout{
position:fixed;

top:88px;
left:18px;
right:18px;
bottom:18px;

display:grid;

grid-template-columns:
300px
minmax(0,1fr)
400px;

gap:22px;

overflow:hidden;
}

/* LEFT */

.serversSidebar{
background:
linear-gradient(
180deg,
#0b0b0b,
#060606
);

border:1px solid #1c1c1c;

border-radius:32px;

padding:24px;

display:flex;
flex-direction:column;

position:relative;
z-index:20;
overflow:visible;
}

.serversSidebarTop{
margin-bottom:20px;
}

.serversTitle{
font-size:64px;
font-weight:900;
line-height:1;
}

.serversSub{
margin-top:12px;
font-size:18px;
color:#666;
}

.createServerBtn{
margin-top:26px;

width:100%;
height:62px;

border:none;

border-radius:20px;

background:
linear-gradient(
180deg,
#ff2d2d,
#d40000
);

color:white;

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

cursor:pointer;

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

gap:12px;

transition:.15s;

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

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

.serverCard{
position:relative;
overflow:visible;
z-index:1;

margin-bottom:18px;

background:
linear-gradient(
180deg,
#111,
#0c0c0c
);

border:1px solid #1f1f1f;

border-radius:24px;

padding:18px;

display:flex;
align-items:center;

gap:16px;

cursor:pointer;

transition:.15s;

min-width:0;
}

.serverCard:hover{
transform:translateY(-2px);

border-color:#2b2b2b;
}

.serverCardIcon{
width:62px;
height:62px;

min-width:62px;
min-height:62px;

flex-shrink:0;

border-radius:20px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a80000
);

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

overflow:hidden;

font-size:26px;
font-weight:900;

color:white;

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

.serverRealIcon{
width:100%;
height:100%;

object-fit:cover;

display:block;
}

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

flex:1;

min-width:0;
}

.serverCardName{
font-size:20px;
font-weight:800;

width:100%;

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

display:block;
}

.serverCardMembers{
margin-top:6px;
font-size:14px;
color:#777;
}

/* CENTER */

.serverCenter{
background:
linear-gradient(
180deg,
#0b0b0b,
#060606
);

border:1px solid #1b1b1b;

border-radius:34px;

overflow:hidden;

display:flex;
flex-direction:column;

position:relative;
z-index:1;
}

.emptyServerState{
flex:1;

display:flex;
flex-direction:column;

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

text-align:center;
}

.emptyServerIcon{
font-size:74px;
opacity:.35;
margin-bottom:24px;
}

.emptyServerState h1{
font-size:58px;
font-weight:900;
}

.emptyServerState p{
margin-top:14px;
font-size:20px;
color:#777;
}

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

height:100%;

overflow:hidden;
}

.serverHeader{
height:96px;

border-bottom:1px solid #1b1b1b;

padding:0 26px;

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

.serverHeaderLeft{
display:flex;
align-items:center;
gap:18px;
}

.serverMainIcon{
width:66px;
height:66px;

border-radius:22px;

background:
linear-gradient(
180deg,
#ff2d2d,
#b50000
);

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

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

.serverMainIcon .serverRealIcon{
width:100%;
height:100%;

object-fit:cover;

border-radius:22px;

display:block;
}

.serverMainName{
font-size:32px;
font-weight:900;
}

.serverMainSub{
margin-top:6px;
color:#777;
}

.generalChatBox{
display:flex;
flex-direction:column;
flex:1;

min-height:0;
}

.generalChatTop{
padding:22px 26px;

border-bottom:1px solid #181818;
}

.generalChatTitle{
font-size:28px;
font-weight:800;
}

.generalChatSub{
margin-top:6px;
color:#777;
}

.serverMessages{
flex:1;

overflow-y:auto;

padding:24px;

display:flex;
flex-direction:column;

gap:16px;

min-height:0;

scrollbar-width:none;
}

.serverMessages::-webkit-scrollbar{
display:none;
}

.serverInputBar{
height:82px;

border-top:1px solid #1b1b1b;

display:flex;
align-items:center;

gap:10px;

padding:10px;

background:#080808;
}

.serverInputBar .uploadBtn{
height:58px !important;
margin-top:0 !important;
}

.serverInputBar .sendBtn{
height:58px !important;
margin-top:0 !important;
padding:0 24px !important;
}

.serverInputBar input{
flex:1;

height:100%;

background:#111;

border:1px solid #1f1f1f;

border-radius:18px;

padding:0 18px;

color:white;

font-size:16px;

outline:none;
}

/* RIGHT */

.serverRight{
background:
linear-gradient(
180deg,
#0b0b0b,
#060606
);

border:1px solid #1b1b1b;

border-radius:32px;

padding:20px;

display:flex;
flex-direction:column;

gap:18px;

overflow:hidden;

height:100%;

min-height:0;

min-width:400px;
}

.serverRightIcon{
width:90px;
height:90px;

border-radius:26px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a00000
);

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

font-size:38px;
font-weight:900;

margin-bottom:18px;
}

.serverRightName{
font-size:30px;
font-weight:900;
}

.serverRightDesc{
margin-top:8px;
color:#777;
}

.addPeopleBox{
background:#0d0d0d;

border:1px solid #1d1d1d;

border-radius:24px;

padding:16px;

display:flex;
flex-direction:column;

overflow:hidden;
}

.voiceBox{
background:#0d0d0d;

border:1px solid #1d1d1d;

border-radius:24px;

padding:16px;

display:flex;
flex-direction:column;

height:340px;

min-height:340px;

max-height:340px;

overflow:hidden;

flex-shrink:0;
}

.addPeopleBox{
padding-bottom:14px;

display:flex;
flex-direction:column;

min-height:0;
}

.membersBox{
background:#0d0d0d;

border:1px solid #1d1d1d;

border-radius:24px;

padding:18px;

display:flex;
flex-direction:column;

height:100%;

min-height:0;

overflow:hidden;

flex:1;
max-height:none;
flex:1;
}

.rightBoxTitle{
font-size:20px;
font-weight:800;
}

.rightBoxSub{
margin-top:6px;
font-size:14px;
color:#777;
}

.addPeopleInput{
display:flex;

gap:10px;

margin-top:16px;
}

.addPeopleInput input{
flex:1;

height:52px;

background:#111;

border:1px solid #1f1f1f;

border-radius:16px;

padding:0 16px;

color:white;

outline:none;
}

.addPeopleInput button{
min-width:76px;

height:52px;

border:none;

border-radius:16px;

background:
linear-gradient(
180deg,
#ff2d2d,
#d30000
);

color:white;

font-weight:900;

font-size:34px;

cursor:pointer;

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

padding-bottom:4px;

flex-shrink:0;
}

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

gap:10px;

margin-top:14px;
}

.memberSuggestion{
background:#111;

border:1px solid #1e1e1e;

border-radius:18px;

padding:12px;

display:flex;
align-items:center;

gap:12px;

cursor:pointer;

transition:.15s;
}

.memberSuggestion:hover{
background:#171717;
}

.suggestionAvatar{
width:44px;
height:44px;

border-radius:50%;

object-fit:cover;

border:2px solid red;
}

.suggestionName{
font-weight:700;
}

.serverMembers{
margin-top:16px;

display:flex;
flex-direction:column;

gap:12px;

height:100%;

min-height:0;

overflow-y:auto;

padding-right:10px;
}

.serverMembers::-webkit-scrollbar{
width:6px;
}

.serverMembers::-webkit-scrollbar-track{
background:#111;
border-radius:20px;
}

.serverMembers::-webkit-scrollbar-thumb{
background:#ff2020;
border-radius:20px;
}

.serverMembers{
scrollbar-width:thin;
scrollbar-color:#ff2020 #111;
}

.serverMember{
background:#111;

border:1px solid #1d1d1d;

border-radius:18px;

padding:14px;

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

.serverMemberLeft{
display:flex;
align-items:center;

gap:14px;
}

.serverMemberAvatar{
width:52px;
height:52px;

border-radius:50%;

object-fit:cover;

border:2px solid red;
}

.serverMemberName{
font-size:16px;
font-weight:800;
}

.serverMemberStatus{
margin-top:5px;

display:flex;
align-items:center;

gap:8px;

font-size:13px;

font-weight:700;
}

.serverMemberStatus .memberDot{
width:10px;
height:10px;

border-radius:50%;

flex-shrink:0;
}

.serverMemberStatus .onlineDot{
background:#19ff58;

box-shadow:
0 0 10px #19ff58;
}

.serverMemberStatus .offlineDot{
background:#777;
}

.serverMemberStatus .onlineText{
color:#19ff58;
}

.serverMemberStatus .offlineText{
color:#888;
}

.memberDot{
width:10px;
height:10px;

border-radius:50%;
}

.onlineDot{
background:#19ff58;

box-shadow:
0 0 10px #19ff58;
}

.offlineDot{
background:#777;
}

.onlineText{
color:#19ff58;
font-weight:700;
}

.offlineText{
color:#888;
font-weight:700;
}

.voiceUsers{
margin-top:14px;
margin-bottom:16px;

color:#777;
}

.joinVoiceBtn{
margin-top:auto;

width:100%;

height:64px;

min-height:62px;

flex-shrink:0;

border:none;

border-top:1px solid #1c1c1c;

border-radius:18px;

background:
linear-gradient(
180deg,
#ff2d2d,
#d80000
);

color:white;

font-size:18px;

font-weight:800;

cursor:pointer;

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

gap:12px;

transition:.2s;
}

.joinVoiceBtn:hover{
transform:translateY(-2px);

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

/* CREATE MODAL */

.serverCreateBox{
width:560px;
max-width:92vw;

background:
linear-gradient(
180deg,
#0b0b0b,
#060606
);

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

border-radius:36px;

padding:42px;

display:flex;
flex-direction:column;

align-items:center;

gap:22px;

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

.serverCreateIcon{
width:110px;
height:110px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,0,0,.18),
rgba(255,0,0,.03)
);

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

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

font-size:42px;
color:#ff2d2d;
}

.serverCreateBox h2{
font-size:56px;
font-weight:900;
}

.serverCreateSub{
color:#777;
font-size:18px;
margin-top:-6px;
}

.serverCreateInput{
width:100%;
height:68px;

background:#111;

border:1px solid #1f1f1f;

border-radius:20px;

padding:0 20px;

font-size:18px;

color:white;

outline:none;
}

.serverCreateBtns{
display:flex;

gap:14px;

width:100%;
margin-top:10px;
}

.serverCreateBtns button{
flex:1;
}

/* TOGGLE */

.voiceToggle{
width:100%;

display:flex;
align-items:center;

gap:16px;

margin-top:4px;
}

.voiceToggle input{
display:none;
}

.voiceSlider{
position:relative;

width:58px;
height:32px;

background:#2a2a2a;

border-radius:999px;

cursor:pointer;

transition:.15s;
}

.voiceSlider::before{
content:"";

position:absolute;

top:4px;
left:4px;

width:24px;
height:24px;

border-radius:50%;

background:white;

transition:.15s;
}

.voiceToggle input:checked + .voiceSlider{
background:#ff2020;
}

.voiceToggle input:checked + .voiceSlider::before{
transform:translateX(26px);
}

.voiceText{
font-size:16px;
font-weight:700;
}

/* SERVER MODAL FIX */

.serverModal{
position:fixed;

top:0;
left:0;
right:0;
bottom:0;

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

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

backdrop-filter:blur(8px);

z-index:999999;
}

.serverModal.hidden{
display:none !important;
}

.serverCardMenu{
position:absolute;
top:14px;
right:14px;
width:34px;
height:34px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:#111;
border:1px solid #222;
color:#fff;
cursor:pointer;
transition:0.2s;
z-index:5;
}

.serverCardMenu:hover{
background:#1a1a1a;
border-color:#ff0000;
color:#ff2b2b;
}

.muteCheck:checked + .muteCustom{
background:#ff1f1f;
border-color:#ff1f1f;
box-shadow:
0 0 12px rgba(255,0,0,0.5);
}

.muteCheck:checked + .muteCustom::after{
content:'';
position:absolute;
top:4px;
left:4px;
width:8px;
height:8px;
border-radius:50%;
background:white;
}

.hidden{
display:none !important;
}

/* ===== SERVER POPUP FINAL FIX ===== */

.serverCardWrapper{
position:relative;
overflow:visible !important;
z-index:50;
}

.serverPopup{
position:absolute;

top:50%;
left:calc(100% + 16px);

transform:translateY(-50%);

width:260px;

background:
linear-gradient(
180deg,
#111,
#080808
);

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

border-radius:24px;

padding:18px;

z-index:999999;

overflow:visible;

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

animation:serverPopupShow .12s ease;
}

@keyframes serverPopupShow{

from{
opacity:0;
transform:
translateY(-50%)
scale(.96);
}

to{
opacity:1;
transform:
translateY(-50%)
scale(1);
}

}

/* ===== PRETTY SERVER POPUP ===== */

.serverPopup{
position:absolute;

top:50%;
left:calc(100% + 16px);

transform:translateY(-50%);

width:280px;

background:
linear-gradient(
180deg,
#111,
#080808
);

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

border-radius:28px;

padding:20px;

z-index:999999;

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

.serverPopupTop{
display:flex;
align-items:center;
gap:16px;

margin-bottom:22px;
}

.serverPopupIcon{
width:60px;
height:60px;

border-radius:18px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a00000
);

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

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

color:white;
}

.serverPopupName{
font-size:28px;
font-weight:900;
}

.serverPopupSub{
margin-top:4px;
color:#777;
font-size:14px;
}

.serverDeleteBtn{
width:100%;
height:54px;

border:none;

border-radius:18px;

background:#151515;

border:1px solid #2a2a2a;

color:#ff3b3b;

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

display:flex;
align-items:center;
gap:12px;

padding:0 18px;

cursor:pointer;

margin-bottom:18px;

transition:.15s;
}

.serverDeleteBtn:hover{
background:#1c1c1c;
border-color:#ff2d2d;
}

.serverMuteRow{
height:60px;

background:#151515;

border:1px solid #222;

border-radius:18px;

display:flex;
align-items:center;

gap:14px;

padding:0 16px;

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

cursor:pointer;
}

.muteCheck{
display:none;
}

.muteCustom{
width:22px;
height:22px;

border-radius:8px;

border:2px solid #555;

background:#111;

position:relative;

transition:.15s;
}

.muteCheck:checked + .muteCustom{
background:#ff2020;
border-color:#ff2020;
}

.muteCheck:checked + .muteCustom::after{
content:'';

position:absolute;

top:4px;
left:4px;

width:8px;
height:8px;

border-radius:50%;

background:white;
}

/* ===== PRETTY SERVER POPUP ===== */

.serverPopupTop{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
}

.serverPopupIcon{
width:58px;
height:58px;

border-radius:18px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a00000
);

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

font-size:30px;
font-weight:900;

color:white;

flex-shrink:0;
}

.serverPopupName{
font-size:22px;
font-weight:900;
color:white;
}

.serverPopupSub{
margin-top:3px;
font-size:14px;
color:#777;
}

.serverPopupButton{
height:54px;

border-radius:18px;

background:#121212;

border:1px solid #222;

display:flex;
align-items:center;

gap:12px;

padding:0 18px;

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

cursor:pointer;

transition:.15s;

margin-bottom:16px;
}

.serverPopupButton:hover{
background:#1a1a1a;
border-color:#ff2d2d;
}

.deletePopupBtn{
color:#ff3b3b;
}

.serverPopupMute{
height:58px;

border-radius:18px;

background:#121212;

border:1px solid #222;

display:flex;
align-items:center;

gap:14px;

padding:0 16px;

cursor:pointer;

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

color:white;
}

.serverPopupMute input{
display:none;
}

.popupMuteSlider{
width:24px;
height:24px;

border-radius:8px;

border:2px solid #555;

background:#0e0e0e;

position:relative;

transition:.15s;
}

.serverPopupMute input:checked
+ .popupMuteSlider{
background:#ff2d2d;
border-color:#ff2d2d;
}

.serverPopupMute input:checked
+ .popupMuteSlider::after{
content:'';

position:absolute;

top:5px;
left:5px;

width:8px;
height:8px;

border-radius:50%;

background:white;
}

.dmFriendMenuWrap{
position:static;

overflow:visible !important;
}

/* ===== DM FRIEND POPUP ===== */

.friendPopup{
position:fixed;

width:250px;

z-index:999999999;

background:
linear-gradient(
180deg,
#111,
#080808
);

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

border-radius:28px;

padding:20px;

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

pointer-events:auto;

transform:none !important;

animation:none !important;
}

@keyframes friendPopupShow{

from{
opacity:0;
transform:scale(.96);
}

to{
opacity:1;
transform:scale(1);
}

}

.friendPopupTop{
display:flex;
align-items:center;
gap:14px;
margin-bottom:22px;
}

.friendPopupIcon{
width:58px;
height:58px;

border-radius:18px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a00000
);

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

font-size:30px;
font-weight:900;

color:white;

flex-shrink:0;
}

.friendPopupName{
font-size:24px;
font-weight:900;
color:white;
}

.friendPopupSub{
margin-top:4px;
font-size:14px;
color:#777;
}

.friendPopupButton{
width:100%;
height:56px;

border:none;

border-radius:18px;

background:#121212;

border:1px solid #222;

display:flex;
align-items:center;

gap:12px;

padding:0 18px;

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

cursor:pointer;

transition:.15s;

margin-bottom:16px;
}

.friendPopupButton:hover{
background:#1a1a1a;
border-color:#ff2d2d;
}

.friendDeleteBtn{
color:#ff3b3b;
}

.friendPopupMute{
height:58px;

border-radius:18px;

background:#121212;

border:1px solid #222;

display:flex;
align-items:center;

gap:14px;

padding:0 16px;

cursor:pointer;

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

color:white;
}

.friendPopupMute input{
display:none;
}

.friendPopupSlider{
width:24px;
height:24px;

border-radius:8px;

border:2px solid #555;

background:#0e0e0e;

position:relative;

transition:.15s;
}

.friendPopupMute input:checked
+ .friendPopupSlider{
background:#ff2d2d;
border-color:#ff2d2d;
}

.friendPopupMute input:checked
+ .friendPopupSlider::after{
content:'';

position:absolute;

top:5px;
left:5px;

width:8px;
height:8px;

border-radius:50%;

background:white;
}

/* VOICE CHAT SCROLL */

.voiceUsers{
flex:1;

min-height:0;

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

padding-right:6px;

margin-top:14px;

scrollbar-width:none;
}

.voiceUsers::-webkit-scrollbar{
display:none;
}

/* MIC BUTTON */

.voiceMicBtn{
width:46px;
height:46px;

border:none;

border-radius:16px;

background:#1a1a1a;

border:1px solid #2a2a2a;

color:white;

font-size:18px;

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

cursor:pointer;

transition:.15s;

flex-shrink:0;
}

.voiceMicBtn:hover{
transform:scale(1.06);
border-color:#ff2d2d;
}

.voiceMicBtn.muted{
background:#2a0000;
border-color:#ff2d2d;
color:#ff4d4d;
box-shadow:
0 0 18px rgba(255,0,0,.25);
}

/* SPEAKING EFFECT */

.serverMember.voiceSpeaking{
border:1px solid #ff2d2d;

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

background:
linear-gradient(
180deg,
#170000,
#0f0f0f
);

animation:
voicePulse 1s infinite;
}

@keyframes voicePulse{

0%{
box-shadow:
0 0 12px rgba(255,0,0,.22);
}

50%{
box-shadow:
0 0 28px rgba(255,0,0,.45);
}

100%{
box-shadow:
0 0 12px rgba(255,0,0,.22);
}

}

.serverNameWrap{
width:100%;
position:relative;
}

.serverNameCounter{
position:absolute;

right:18px;
bottom:16px;

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

color:#777;

pointer-events:none;

transition:.15s;
}

.serverNameCounter.limit{
color:#ff2d2d;

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

/* ===== FINAL CLEAN ADMIN SERVERS PAGE ===== */

.adminServerLeft{
display:flex;
align-items:center;

gap:16px;

min-width:0;
}

.adminServerIcon{
width:64px;
height:64px;

border-radius:20px;

background:
linear-gradient(
180deg,
#ff2d2d,
#a00000
);

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

overflow:hidden;

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

color:white;

flex-shrink:0;
}

.adminServerIcon img{
width:100%;
height:100%;

object-fit:cover;
}

.adminServerInfo{
min-width:0;
}

.adminServerName{
font-size:22px;
font-weight:900;

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

.adminServerSub{
margin-top:6px;

font-size:14px;

color:#777;
}

.adminServerActions{
display:flex;
align-items:center;

gap:12px;

flex-shrink:0;
}

.adminServerBtn{
height:46px;

padding:0 18px;

border:none;

border-radius:16px;

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

cursor:pointer;

transition:.15s;
}

.adminServerDelete{
background:#1a1a1a;

border:1px solid #ff2d2d;

color:#ff4d4d;
}

.adminServerDelete:hover{
background:#2a0000;
}

.adminServerOpen{
background:
linear-gradient(
180deg,
#ff2d2d,
#d30000
);

color:white;
}

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

.adminServerTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

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

.adminServerCount{
color:#888;
font-size:14px;
font-weight:700;
}

.adminExpandBtn,
.adminDeleteServerBtn{
height:42px;

padding:0 14px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:700;

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

.adminExpandBtn{
background:#151515;
color:white;
border:1px solid #2a2a2a;
}

.adminDeleteServerBtn{
background:#2a0000;
color:#ff4d4d;
border:1px solid #ff2d2d;
}

.adminServerMembers{
margin-top:18px;

display:flex;
flex-direction:column;

gap:10px;
}

.adminServerMember{
height:48px;

background:#111;

border:1px solid #1f1f1f;

border-radius:14px;

padding:0 16px;

display:flex;
align-items:center;
gap:12px;

font-weight:700;
}

/* FIX DASHBOARD PAGE */

#dashboardPage{
display:flex;
flex-direction:column;

min-height:max-content;
}

/* FIX SERVERS PAGE */

#serversPage{
display:flex;
flex-direction:column;
flex:1;
height:100%;
min-height:0;
}

/* FIX SERVER TOP */

.adminServerTop{
display:flex;

justify-content:space-between;

align-items:center;

width:100%;
}

/* ===== FINAL ADMIN FIX ===== */

.adminMain{
height:100vh;

padding:24px;

overflow:hidden;

display:flex;
flex-direction:column;
}

#dashboardPage{
flex:1;

min-height:0;

overflow:hidden;

display:flex;
flex-direction:column;
}

.adminContentGrid{
flex:1;

min-height:0;

overflow:hidden;
}

.adminUsersPanel{
height:100%;

min-height:0;

overflow:hidden;
}

.usersWindow{
flex:1;

overflow-y:auto;

height:auto;

min-height:0;
}

/* FINAL ADMIN SERVERS FIX */

.adminServersPanel{
display:flex;
flex-direction:column;
flex:1;
min-height:0;
overflow:hidden;
}

.adminServersList{
flex:1;
overflow-y:auto;
min-height:0;
padding-right:6px;
}

.adminServerCard{
background:linear-gradient(
180deg,
#0f0f0f,
#090909
);

border:1px solid #1f1f1f;

border-radius:24px;

padding:22px;

margin-bottom:18px;

display:flex;
flex-direction:column;

gap:18px;

transition:.15s;
}

.adminServerCard:hover{
border-color:#2b2b2b;

transform:translateY(-2px);

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

.adminServerOwner{
margin-top:6px;

font-size:14px;

color:#777;

font-weight:600;
}

.adminServersPage{
flex:1;
min-height:0;
overflow:hidden;
}

.adminServerCard{
background:linear-gradient(
180deg,
#0f0f0f,
#090909
);

border:1px solid #1f1f1f;

border-radius:24px;

padding:22px;

margin-bottom:18px;

display:flex;
flex-direction:column;

gap:18px;
}

.adminServersList{
overflow-y:auto;
height:100%;
padding-right:6px;
}

.adminServerOwner{
margin-top:6px;
font-size:14px;
color:#777;
}

/* ===== SERVERS PAGE RESPONSIVE FIX ===== */

@media(max-width:1600px){

.serversLayout{
grid-template-columns:
260px
minmax(0,1fr)
320px;
}

.serverRight{
min-width:320px;
}

}

@media(max-width:1300px){

.serversLayout{
grid-template-columns:
240px
minmax(0,1fr)
280px;

gap:16px;
}

.serverRight{
min-width:280px;
}

.serversTitle{
font-size:52px;
}

}

@media(max-width:1100px){

.serversLayout{
position:relative;

top:auto;
left:auto;
right:auto;
bottom:auto;

height:auto;

display:flex;
flex-direction:column;

padding:88px 14px 14px 14px;

overflow:visible;
}

.serversSidebar,
.serverCenter,
.serverRight{
width:100%;
min-width:0;
}

.serverRight{
height:auto;
}

.membersBox{
max-height:420px;
}

.voiceBox{
height:auto;
min-height:220px;
max-height:none;
}

.joinVoiceBtn{
margin-top:20px;
}

body.serversPage{
overflow-y:auto;
}

}

/* ===== USER VOLUME POPUP ===== */

.voiceVolumePopup{
position:fixed;

width:260px;

background:
linear-gradient(
180deg,
#111,
#080808
);

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

border-radius:24px;

padding:18px;

z-index:999999999;

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

.voiceVolumeTitle{
font-size:18px;
font-weight:800;

margin-bottom:16px;
}

.voiceVolumeRow{
display:flex;
align-items:center;
gap:14px;
}

.voiceVolumeSlider{
flex:1;

accent-color:#ff2020;

cursor:pointer;
}

.voiceVolumePercent{
width:52px;

text-align:right;

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

color:#ff4d4d;
}

/* VOICE USER CARDS */

.voiceUserCard{
background:#111;

border:1px solid #1f1f1f;

border-radius:18px;

padding:14px;

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

margin-bottom:12px;
}

.voiceUserLeft{
display:flex;
align-items:center;

gap:14px;
}

.voiceUserAvatar{
width:52px;
height:52px;

border-radius:50%;

object-fit:cover;

border:2px solid red;
}

.voiceUserName{
font-size:16px;
font-weight:800;
}

.voiceUserStatus{
margin-top:5px;

font-size:13px;

font-weight:700;

color:#19ff58;
}