body{
margin:0;
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#eef2ff,#e0e7ff);
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

/* CARD */
.container{
background:white;
padding:25px;
border-radius:20px;
width:92%;
max-width:420px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
animation:fadeIn 0.5s ease;
}

h1{
text-align:center;
margin:0;
color:#4f46e5;
}

.sub{
text-align:center;
font-size:13px;
color:#666;
margin-bottom:20px;
}

/* ACCORDION */
.accordion{
border-radius:12px;
overflow:hidden;
border:1px solid #e5e7eb;
margin-bottom:10px;
}

.acc-btn{
background:#6366f1;
color:white;
padding:14px;
cursor:pointer;
font-weight:600;
text-align:left;
border:none;
width:100%;
outline:none;
transition:0.2s;
}

.acc-btn:hover{
background:#4f46e5;
}

.panel{
display:none;
padding:15px;
background:#fff;
}

/* BUTTON */
.btn{
width:100%;
padding:12px;
margin-top:8px;
border:none;
border-radius:10px;
font-weight:600;
cursor:pointer;
}

.host{background:#6366f1;color:white;}
.join{background:#10b981;color:white;}
.soft{background:#f3f4f6;color:#333;}

/* INPUT */
input, select{
width:100%;
padding:10px;
margin:5px 0;
border-radius:10px;
border:1px solid #ddd;
outline:none;
font-family:'Poppins';
}

label{
font-size:12px;
color:#555;
}

/* ANIM */
@keyframes fadeIn{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}