:root{
  --bg:#0f0b2d;
  --card1: linear-gradient(135deg,#6c1bd9,#ff6a88);
  --muted: #d1c7f0;
  --btn-grad: linear-gradient(90deg,#ff8a00,#ff4e50);
  --glass: rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,#0f0b2d 0%, #2b0b4a 100%);color:#fff}
.container{max-width:420px;margin:22px auto;padding:18px}
.card{background:var(--glass);border-radius:24px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,0.5);backdrop-filter: blur(6px);margin-bottom:18px}
.hero{border-radius:28px;padding:28px 20px;background:var(--card1);text-align:center}
.hero h1{margin:6px 0;font-size:28px;letter-spacing:0.6px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:none;background:rgba(255,255,255,0.06);color:#fff;font-size:15px;margin-bottom:10px}
.label{font-size:13px;color:var(--muted);margin-bottom:6px;display:block}
.btn-primary{display:inline-block;padding:12px 26px;border-radius:30px;background:var(--btn-grad);color:#fff;font-weight:700;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(255,78,80,0.16)}
.queue-list{list-style:none;padding:6px;margin:0}
.queue-list li{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:linear-gradient(90deg, rgba(0,0,0,0.12), rgba(255,255,255,0.02));margin-bottom:8px}
.badge{background:linear-gradient(90deg,#ffd166,#ff8a00);color:#0b0420;padding:8px 10px;border-radius:999px;font-weight:700;min-width:36px;text-align:center}