/* GLOBAL RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial;
}



body{

background:#050505;
color:white;

min-height:100vh;

overflow-x:hidden;

}



/* CONTAINER */

.container{

width:100%;
max-width:1200px;

margin:auto;

padding:20px;

}



/* GLASS CARD */


.card,
.profile-card,
.ticket,
.chat{

background:

rgba(255,255,255,0.08);


backdrop-filter:

blur(20px);


border:

1px solid rgba(255,255,255,.12);


border-radius:25px;


box-shadow:

0 20px 60px rgba(0,0,0,.5);

}





/* INPUTS */


input,
textarea{


width:100%;


padding:14px;


margin:8px 0;


border-radius:14px;


border:

1px solid rgba(255,255,255,.2);


background:

rgba(0,0,0,.5);


color:white;


font-size:15px;


outline:none;


}



input:focus,
textarea:focus{

border-color:#0A84FF;

}



/* BUTTONS */


button{


padding:14px 20px;


border:none;


border-radius:15px;


background:#0A84FF;


color:white;


font-weight:600;


cursor:pointer;


transition:.3s;


}



button:hover{


transform:scale(1.03);

}



/* IMAGES */


img{


max-width:100%;

height:auto;


}




/* CHAT STYLE */


.messages{


height:350px;


overflow-y:auto;


padding:10px;


}



.msg{


max-width:80%;


padding:12px;


margin:10px 0;


border-radius:18px;


}



.user{


background:#0A84FF;


margin-left:auto;


}



.admin{


background:#333;


margin-right:auto;


}





/* MOBILE DESIGN */


@media(max-width:600px){



body{

font-size:14px;

}



.container{


padding:15px;

}




.card,
.profile-card,
.ticket,
.chat{


width:100%;


border-radius:20px;


padding:20px;


}




h1{

font-size:24px;

}


h2{

font-size:20px;

}



button{


width:100%;


}



textarea{

height:100px;

}



.profile-img{


width:110px;


height:110px;


}



}



/* TABLET */


@media(min-width:601px) and (max-width:1000px){


.container{


padding:30px;


}



}
/* ===== FINAL MOBILE FIX ===== */


@media(max-width:600px){


.card,
.chat,
.ticket,
.profile-card{


width:100% !important;

max-width:100% !important;

margin-left:auto;

margin-right:auto;


}



.container,
.profile-container{


width:100%;

padding:15px;


}



body{


overflow-x:hidden;


}



input,
textarea{


width:100% !important;


}



button{


width:100% !important;


}



.profile-container{


margin-top:20px !important;


}



.stats{


flex-wrap:wrap;


gap:20px;


}




}



@media(max-width:400px){



.card,
.chat,
.ticket,
.profile-card{


padding:15px !important;


}



h1{

font-size:22px !important;

}


h2{

font-size:18px !important;

}



}