/* QIPTV — neon galaxy layout (matched to screenshot) */
:root{
  --text:#f5f2ff;
  --muted:rgba(245,242,255,.72);
  --glow: 0 0 55px rgba(138,92,255,.35), 0 0 32px rgba(34,211,255,.18);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--text);
  background: #050015 url("img/galaxy-bg.jpg") center top / cover fixed no-repeat;
}
.wrap{min-height:100%;display:flex;justify-content:center;padding:32px 14px 44px;}
.card{
  width:min(860px, 96vw);
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(12,6,30,.82), rgba(6,3,18,.72));
  box-shadow: var(--glow), 0 18px 70px rgba(0,0,0,.55);
  overflow:hidden;
  backdrop-filter: blur(10px);
}
.header{padding:24px 22px 16px;text-align:center;}
.logoImg{width:min(560px, 92vw);height:auto;display:block;margin:0 auto 10px;filter: drop-shadow(0 12px 30px rgba(0,0,0,.55));}
.h1{font-size:34px;font-weight:900;margin:8px 0 6px;letter-spacing:.01em;}
.sub{margin:0 0 16px;color:var(--muted);font-size:15px;}
.countStrip{
  width:min(740px, 100%);
  margin: 10px auto 12px;
  border-radius:16px;
  border:1px solid rgba(170,120,255,.25);
  background: rgba(6,3,18,.38);
  box-shadow: 0 0 26px rgba(138,92,255,.22);
  padding: 10px 12px;
}
.countdown{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;}
.cdItem{min-width:130px;text-align:center;padding: 6px 8px;}
.cdNum{font-size:40px;font-weight:950;letter-spacing:.10em;}
.cdLbl{margin-top:2px;font-size:12px;color: rgba(245,242,255,.68);letter-spacing:.18em;}
.noteLine{text-align:center;margin: 10px 0 12px;font-size:14px;color: rgba(245,242,255,.80);}
.content{padding: 0 22px 24px;}
.formBox{
  margin: 10px auto 0;
  width:min(820px, 100%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,3,20,.42);
  box-shadow: 0 0 22px rgba(34,211,255,.10);
  padding: 18px 16px 18px;
}
.grid{display:grid;grid-template-columns: 1fr 1fr;gap:14px;}
@media (max-width: 760px){
  .grid{grid-template-columns:1fr}
  .cdItem{min-width:140px}
  .h1{font-size:28px}
}
.field label{display:block;font-size:14px;font-weight:800;margin: 0 0 6px;}
.field input,.field select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(170,120,255,.22);
  background: rgba(6,3,18,.50);
  color: var(--text);
  outline:none;
}
.field input::placeholder{color: rgba(245,242,255,.40)}
.field input:focus,.field select:focus{
  border-color: rgba(34,211,255,.55);
  box-shadow: 0 0 0 3px rgba(34,211,255,.14);
}
.sectionTitle{margin: 16px 2px 10px;font-weight:950;font-size:18px;}
.sectionHint{color:var(--muted);font-weight:700;font-size:14px;}
.btnRow{display:flex;gap:12px;flex-wrap:wrap;padding: 4px 2px 4px;}
.choiceBtn{
  display:flex;align-items:center;gap:10px;padding: 10px 14px;border-radius: 999px;
  border: 1px solid rgba(170,120,255,.24);background: rgba(7,3,20,.35);
  cursor:pointer;user-select:none;min-height:40px;
}
.choiceBtn input{display:none}
.choiceBtn .dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(34,211,255,.55);box-shadow: 0 0 12px rgba(34,211,255,.10);}
.choiceBtn.on{border-color: rgba(34,211,255,.55);box-shadow: 0 0 0 3px rgba(138,92,255,.14);}
.choiceBtn.on .dot{background: radial-gradient(circle at 30% 30%, rgba(34,211,255,1), rgba(138,92,255,.95));border-color: rgba(245,242,255,.85);}
.tip{margin: 8px 2px 0;color: rgba(245,242,255,.62);font-size:13px;}
.alert{display:none;margin: 10px auto 0;width:min(820px, 100%);padding: 12px 14px;border-radius: 14px;border: 1px solid rgba(255,90,90,.35);background: rgba(255,90,90,.10);}
.alert.show{display:block}
.actions{display:flex;justify-content:center;margin-top:18px;}
.btnPrimary{
  border:none;cursor:pointer;border-radius: 999px;padding: 16px 44px;font-weight:950;font-size:18px;
  color: rgba(255,255,255,.96);
  background: radial-gradient(circle at 30% 20%, rgba(34,211,255,.85), rgba(138,92,255,.90) 55%, rgba(255,0,170,.30) 85%);
  box-shadow: 0 18px 55px rgba(138,92,255,.35);
}
.btnPrimary:active{transform: translateY(1px)}
.footerFine{text-align:center;margin-top:12px;color: rgba(245,242,255,.50);font-size:12px;}