:root{
  --bg1:#16022b; --bg2:#5b2cff; --accent1:#caa3ff; --accent2:#ff9bd6; --glass: rgba(255,255,255,0.04);
  --muted: rgba(255,255,255,0.75);
}
*{box-sizing:border-box;font-family:Inter,system-ui,Arial,sans-serif}
html,body{height:100%;margin:0;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#fff}
.container{max-width:1000px;margin:30px auto;padding:16px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));box-shadow:0 20px 50px rgba(0,0,0,0.6)}
.header{display:flex;align-items:center;gap:12px}
.logo{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:#16002b;font-weight:800}
.title{font-weight:800;font-size:20px}
.header-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* layout */
.grid{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:18px}
.panel{padding:14px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}

/* sim cards */
.sim-card{padding:12px;border-radius:12px;margin-bottom:12px;background:linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);transition:transform .18s}
.sim-card:hover{transform:translateY(-6px)}
.sim-title{font-weight:800}
.sim-body{font-size:13px;color:rgba(255,255,255,0.9);line-height:1.45;max-height:220px;overflow:auto;padding-right:6px}

/* small */
.small{font-size:13px;color:rgba(255,255,255,0.8)}

/* buttons */
.btn{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:none;padding:10px 12px;border-radius:10px;color:#16002b;font-weight:800;cursor:pointer}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 10px;border-radius:8px;color:#fff}

/* modal */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:999}
.modal .box{width:100%;max-width:820px;background:linear-gradient(180deg,#0f0720,#16042a);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
.option{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);margin-top:8px;cursor:pointer;background:rgba(255,255,255,0.02)}
.option.correct{outline:3px solid rgba(120,255,200,0.12);background:linear-gradient(90deg, rgba(120,255,200,0.03), rgba(255,255,255,0.01))}
.option.wrong{outline:3px solid rgba(255,90,90,0.12)}

/* profile */
.avatar-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.avatar-item{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent1));display:flex;align-items:center;justify-content:center;cursor:pointer;font-weight:800;color:#16002b}

/* partner */
.partner{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;margin-bottom:8px;background:linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}

/* leaderboard */
.leader{display:flex;justify-content:space-between;padding:8px;border-radius:8px;background:rgba(0,0,0,0.12);margin-bottom:6px}

/* responsive */
@media(max-width:900px){ .grid{grid-template-columns:1fr} .header-right{display:none} }