:root{
  --bg:#15081f;         /* deep purple background */
  --bg-2:#1b0b29;       /* darker layer */
  --card:#221033;       /* card surface */
  --text:#f3ecff;       /* near-white text with lilac tint */
  --muted:#c9b7ff;      /* muted lilac */
  --primary:#8a4dff;    /* main purple */
  --primary-600:#7037f2;/* hover purple */
  --border:#3a2059;     /* border purple */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* Twinkling stars background starting from top */
body::before,body::after{
  content:"";position:fixed;left:0;right:0;top:-120px;bottom:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(2px 2px at 20% 15%, rgba(255,255,255,.7) 0 2px, transparent 2px) repeat,
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,255,255,.7) 0 1.5px, transparent 1.5px) repeat,
    radial-gradient(1px 1px at 40% 55%, rgba(255,255,255,.6) 0 1px, transparent 1px) repeat;
  background-size: 180px 180px, 220px 220px, 260px 260px;
  opacity:.5;animation:twinkle 8s ease-in-out infinite alternate;
}
body::after{z-index:-1;filter:blur(0.5px);opacity:.35;animation-duration:11s;}
@keyframes twinkle{0%{opacity:.35;transform:translateY(0)}50%{opacity:.6}100%{opacity:.45;transform:translateY(-6px)}}

.container{max-width:780px;margin:0 auto;padding:28px}
.header{border-bottom:1px solid transparent;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,0));position:sticky;top:0}
.brand{font-weight:800;font-size:34px;color:var(--text);text-align:center;letter-spacing:.5px}

.card{background:linear-gradient(180deg, var(--card), var(--bg-2));border:1px solid var(--border);border-radius:22px;padding:26px;margin-top:28px;box-shadow:0 20px 50px rgba(138,77,255,.15)}
.card h1{margin:0 0 16px;font-size:26px;text-align:center}

.label{display:block;margin:12px 0 8px;color:var(--muted);font-size:14px}
.input{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:#180d26;color:var(--text);outline:none;transition:.15s}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(138,77,255,.18)}

/* Packs: single column vertical list */
.packs{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}
.pack{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:16px;background:#1b0f2b;border:1px solid var(--border);color:var(--text);cursor:pointer;transition:.18s ease}
.pack:hover{border-color:var(--primary);transform:translateY(-1px)}
.pack.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(138,77,255,.22) inset}
.pack-stars{font-weight:800;font-size:18px}
.pack-price{color:var(--muted);font-size:15px}

.submit{display:block;margin:14px auto 4px;background:var(--primary);border:none;color:white;padding:14px 22px;border-radius:18px;cursor:pointer;font-weight:800;letter-spacing:.2px}
.submit:hover{background:var(--primary-600)}