:root{
  --bg:#071212;
  --neon:#35e07a;
  --danger:#ff4b4b;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
html,body{height:100%;background:var(--bg);color:var(--neon)}

/* ---------- MAIN PAGE ---------- */
.container{max-width:720px;margin:18px auto;padding:16px;text-align:center}
.top-logo{text-align:center;padding:12px 0;position:relative}
#site-logo{width:110px;height:110px;object-fit:contain}
.auth-links{position:absolute;right:14px;top:18px}
.small-link{color:var(--neon);text-decoration:none;margin-left:10px;font-size:14px}

.title{font-size:34px;letter-spacing:2px;margin:6px 0 12px}
.input-wrap{margin:8px 0}
#roundId{width:100%;padding:14px 12px;font-size:18px;background:transparent;border:2px solid var(--neon);border-radius:8px;color:var(--neon)}
.helper{font-size:14px;letter-spacing:1px;margin:10px 0;color:rgba(53,224,122,0.85)}

.start{padding:12px 18px;border:2px solid var(--neon);background:transparent;color:var(--neon);font-size:18px;border-radius:10px;cursor:pointer;margin-top:4px}

.buy-glow{margin:14px auto 0;font-size:16px;letter-spacing:1px;text-align:center;display:inline-block;padding:8px 12px;border-radius:8px;color:var(--neon);animation:neonPulse 2s ease-in-out infinite}
@keyframes neonPulse{
  0%{filter:drop-shadow(0 0 6px rgba(53,224,122,0.85));transform:translateY(0)}
  50%{filter:drop-shadow(0 0 16px rgba(53,224,122,0.95));transform:translateY(-2px)}
  100%{filter:drop-shadow(0 0 6px rgba(53,224,122,0.85));transform:translateY(0)}
}

.socials{display:flex;gap:18px;justify-content:center;margin-top:16px}
.social-img{width:40px;height:40px;display:block}
.social{display:inline-flex;align-items:center;justify-content:center}

/* VIP banner */
.vip-banner{max-width:720px;margin:10px auto;padding:8px 12px;border-radius:8px;text-align:center;font-weight:700}
.vip-true{background:rgba(34,85,48,0.06);border:1px solid rgba(57,215,133,0.08);color:#bff7d8}
.vip-false{background:rgba(85,34,34,0.03);border:1px solid rgba(255,107,107,0.05);color:#ffbebe}

/* Modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);padding:12px;z-index:40}
.modal[aria-hidden="false"]{display:flex}
.modal-content{width:100%;max-width:420px;background:#050c10;border:2px solid var(--neon);padding:18px;border-radius:12px;position:relative;text-align:center}
.close{position:absolute;right:12px;top:8px;background:transparent;border:none;color:var(--neon);font-size:24px;cursor:pointer}

/* Result modal */
.result-number{font-size:88px;font-weight:700;margin:6px 0}
.result-texts{display:flex;gap:12px;justify-content:center;margin-top:8px}
.size,.color{font-size:18px;letter-spacing:1px}
.ok{margin-top:16px;padding:10px 18px;border:2px solid var(--neon);background:transparent;color:var(--neon);border-radius:8px;cursor:pointer}

/* Payment modal */
.pay-title{font-size:18px;margin-bottom:10px}
.upi-icons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
.upi-btn{padding:8px 10px;border-radius:8px;border:1px solid var(--neon);text-decoration:none;color:var(--neon);font-size:14px}
.small-note{font-size:13px;margin-bottom:6px;opacity:0.9}

.qr-button{background:transparent;padding:12px 16px;font-size:16px;border:3px solid var(--neon);color:var(--neon);border-radius:10px;cursor:pointer;animation:qrPulse 1.8s infinite}
@keyframes qrPulse{
  0%{box-shadow:0 0 8px rgba(53,224,122,0.08);transform:scale(1)}
  50%{box-shadow:0 0 28px rgba(53,224,122,0.22);transform:scale(1.03)}
  100%{box-shadow:0 0 8px rgba(53,224,122,0.08);transform:scale(1)}
}
.benefits{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:left;padding:8px 6px}
.btn.cancel{border:2px solid var(--danger);color:var(--danger);background:transparent;padding:8px 12px;border-radius:8px;cursor:pointer}

/* ---------- AUTH PAGES (LOGIN / SIGNUP) ---------- */
.auth-body{
  min-height:100vh;
  background: radial-gradient(circle at top, #20ff6b 0%, #111111 40%, #000000 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#00ff66;
}
.auth-screen{width:100%;max-width:420px;padding:16px;text-align:center}
.auth-main-title{
  font-size:28px;
  font-weight:700;
  margin-bottom:18px;
  text-shadow:0 0 12px rgba(0,255,120,0.7);
}
.auth-card{
  background:linear-gradient(145deg,#03101b,#14040b);
  border-radius:18px;
  padding:24px 18px 22px;
  box-shadow:0 0 25px rgba(0,255,120,0.5),0 0 60px rgba(0,0,0,0.8);
  border:1px solid rgba(0,255,120,0.5);
}
.auth-heading{
  font-size:22px;
  margin-bottom:16px;
}
.auth-field{margin:10px 0}
.auth-field input{
  width:100%;
  padding:10px 14px;
  border-radius:999px;
  border:none;
  font-size:16px;
  outline:none;
}
.auth-field input::placeholder{color:#222}
.auth-btn{
  display:inline-block;
  width:70%;
  padding:10px 0;
  border-radius:999px;
  font-size:18px;
  font-weight:700;
  text-align:center;
  margin:10px auto 0;
  cursor:pointer;
  text-decoration:none;
}
.auth-btn-primary{
  border:2px solid #00ff66;
  background:#ff3333;
  color:#000;
}
.auth-btn-secondary{
  border:2px solid #00ff66;
  background:#111;
  color:#00ff66;
}
.auth-subtext{
  margin-top:18px;
  font-size:17px;
  color:#58ff9a;
}
.auth-socials{
  display:flex;
  justify-content:space-between;
  margin-top:24px;
}
.auth-social-btn{
  flex:1;
  margin:0 4px;
  border-radius:999px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  text-decoration:none;
  font-weight:600;
}
.auth-social-btn img{width:20px;height:20px}
.auth-social-wa{background:#06b438;color:#fff;}
.auth-social-yt{background:#ff3333;color:#fff;}
.auth-social-tg{background:#00a8ff;color:#fff;}
.flash{color:#ffbcbc;margin-bottom:10px;font-size:14px}

/* small screens */
@media (min-width:800px){
  .title{font-size:46px}
  .result-number{font-size:120px}
}
.modal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.qr-button {
  margin: 0 auto;
  display: inline-block;
}

.benefits {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}