body{

background:#081429;
color:white;
font-family:Arial;
margin:0;

}

.sidebar{

width:220px;
height:100vh;
background:#0f172a;
position:fixed;
padding:20px;

}

.sidebar a{

display:block;
background:#1e293b;
padding:10px;
margin:8px 0;
border-radius:6px;
color:white;
text-decoration:none;

}

.content{

margin-left:240px;
padding:30px;

}

.member-card{

background:#1e293b;
padding:20px;
border-radius:10px;
width:150px;
display:inline-block;
margin:10px;
text-align:center;

}

.member-card img{

width:80px;
height:80px;
border-radius:50%;

}

button{

background:#ef4444;
border:none;
padding:8px 12px;
border-radius:6px;
color:white;

}

.upload-area{

border:2px dashed #3b82f6;
padding:20px;
margin:10px 0;
text-align:center;

}
/* กล่องเพิ่มสมาชิก */

.member-add-box{
background:#1e293b;
padding:20px;
border-radius:15px;
width:400px;
margin-bottom:30px;
}

/* drag upload */

.upload-box{

border:2px dashed #3b82f6;
border-radius:12px;
padding:30px;
text-align:center;
cursor:pointer;
transition:0.3s;
margin-top:10px;

}

.upload-box:hover{

background:#0f172a;

}

/* grid สมาชิก */

.member-grid{

display:grid;
grid-template-columns:repeat(auto-fill,160px);
gap:20px;

}

/* การ์ดสมาชิก */

.member-card{

background:#1e293b;
border-radius:15px;
padding:20px;
text-align:center;
box-shadow:0 0 15px rgba(0,0,0,0.4);
transition:0.2s;

}

.member-card:hover{

transform:scale(1.05);

}

.member-card img{

width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-bottom:10px;

}

.member-card h3{

margin:5px 0;

}

.member-card button{

background:#ef4444;
border:none;
padding:6px 10px;
border-radius:8px;
color:white;
cursor:pointer;

}
/* input ชื่อสมาชิก */

.input-name{

width:100%;
padding:12px 14px;
margin-bottom:10px;

background:#0f172a;
border:2px solid #334155;

border-radius:10px;

color:white;
font-size:14px;

outline:none;
transition:0.2s;

}

.input-name::placeholder{

color:#94a3b8;

}

.input-name:focus{

border-color:#3b82f6;
box-shadow:0 0 8px rgba(59,130,246,0.5);

}

/* ปุ่ม */

.btn-add{

background:#3b82f6;
border:none;
padding:10px;
width:100%;
border-radius:10px;
color:white;
font-size:14px;
cursor:pointer;

transition:0.2s;

}

.btn-add:hover{

background:#2563eb;

}

/* preview รูป */

.preview-img{

width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
margin-top:10px;

}
/* กล่องเพิ่มสมาชิก */

.member-add-box{

background:#1e293b;
padding:20px;
border-radius:15px;
width:400px;
margin-bottom:30px;

}

/* input ชื่อ */

.input-name{

width:100%;
padding:12px;

background:#0f172a;
border:2px solid #334155;

border-radius:10px;

color:white;

margin-bottom:15px;

}

.input-name:focus{

border-color:#3b82f6;
outline:none;

}

/* upload */

.upload-box{

border:2px dashed #3b82f6;
border-radius:12px;

padding:30px;

text-align:center;

cursor:pointer;

transition:0.2s;

}

.upload-box:hover{

background:#0f172a;

}

/* preview */

.preview-img{

width:120px;
height:120px;

border-radius:15px;

object-fit:cover;

display:none;

margin:auto;
margin-top:10px;

}

/* ปุ่ม */

.btn-add{

background:#3b82f6;

border:none;

padding:12px;

width:100%;

border-radius:10px;

color:white;

cursor:pointer;

margin-top:10px;

}

/* grid สมาชิก */

.member-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

gap:20px;

margin-top:20px;

}

/* การ์ดสมาชิก */

.member-card{

background:#1e293b;

border-radius:15px;

padding:20px;

text-align:center;

}

.member-card img{

width:80px;
height:80px;

border-radius:50%;

object-fit:cover;

margin-bottom:10px;

}

.member-card button{

background:#ef4444;

border:none;

padding:6px 12px;

border-radius:8px;

color:white;

cursor:pointer;

}

.rob-box{

background:#1e293b;

padding:25px;

border-radius:15px;

max-width:900px;

}

.input{

width:100%;

padding:12px;

background:#0f172a;

border:1px solid #334155;

border-radius:8px;

color:white;

margin-bottom:15px;

}

.team-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:10px;

margin-bottom:15px;

}

.btn{

background:#ef4444;

border:none;

padding:12px;

width:100%;

border-radius:10px;

color:white;

cursor:pointer;

}
.rob-center{

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

}

.rob-box{

background:#1e293b;
padding:30px;

border-radius:15px;

width:800px;

}

.team-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;

margin-bottom:20px;

}

.input{

width:100%;
padding:12px;

background:#0f172a;
border:1px solid #334155;

border-radius:8px;

color:white;

margin-bottom:15px;

}

.btn{

background:#ef4444;
border:none;

padding:12px;

width:100%;

border-radius:10px;

color:white;

cursor:pointer;

}

.upload-box{

border:2px dashed #3b82f6;

padding:30px;

border-radius:12px;

text-align:center;

cursor:pointer;

margin-bottom:15px;

}

.preview-img{

width:150px;
border-radius:12px;

display:none;

margin:auto;

}

.dashboard{
padding:30px;
color:white;
}

.dash-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.card{
background:#0f1b2d;
padding:20px;
border-radius:15px;
box-shadow:0 0 10px rgba(0,0,0,0.4);
}

.rob{
border:2px solid #facc15;
}

.airdrop{
border:2px solid #22c55e;
}

table{
width:100%;
margin-top:10px;
border-collapse:collapse;
}

th{
text-align:left;
padding:10px;
color:#9ca3af;
}

td{
padding:10px;
border-top:1px solid #1f2937;
}

.badge{
background:#facc15;
color:black;
padding:4px 10px;
border-radius:10px;
font-size:12px;
}

.status{
padding:4px 10px;
border-radius:10px;
font-size:12px;
}

.status.yes{
background:#22c55e;
}

.status.no{
background:#ef4444;
}
.top-card{
background:linear-gradient(180deg,#0f243d,#0a1c33);
border:2px solid #f3c200;
border-radius:20px;
padding:25px;
max-width:900px;
margin:auto;
box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.top-card h2{
color:#ffd700;
margin-bottom:15px;
font-weight:700;
}

.top-table{
width:100%;
border-collapse:collapse;
color:#fff;
}

.top-table th{
text-align:left;
padding:10px;
opacity:0.8;
}

.top-table td{
padding:14px 10px;
border-top:1px solid rgba(255,255,255,0.05);
}

.rank{
font-size:20px;
font-weight:bold;
}

.name{
font-weight:600;
}

.badge{
background:#f3c200;
color:#000;
padding:5px 12px;
border-radius:20px;
font-weight:bold;
}