body {
  background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
  font-family: 'Inter', sans-serif;
  color: #FEFEFE;
  overflow: hidden;
  min-height: 100vh;
}

:root {
  --nioplay-orange: #FF8C00;
  --nioplay-yellow: #FFD300;
  --stroke-glass: rgba(255, 211, 0, 0.25);
  --glass-fill: rgba(255,255,255,0.06);
  --blur-strong: 25px;
  --radius-2xl: 22px;
}

.glass {
  backdrop-filter: blur(var(--blur-strong));
  background: var(--glass-fill);
  border: 1px solid var(--stroke-glass);
  border-radius: var(--radius-2xl);
  box-shadow: 0 10px 40px rgba(255,140,0,0.25);
  transition: all 0.4s ease;
  transform-style: preserve-3d;
}

.glass:hover { 
  box-shadow: 0 14px 55px rgba(255,211,0,0.45); 
  transform: translateY(-3px) translateZ(20px);
}

.layout { 
  display:flex; 
  gap:40px; 
  justify-content:center; 
  align-items:flex-start; 
  padding:60px; 
  perspective:1000px;
  min-height: 100vh;
}

.summary, .payment { 
  width:420px; 
  padding:32px; 
  transform: translateZ(40px);
  transition: transform 0.5s ease;
}

.row { 
  display:flex; 
  justify-content:space-between; 
  padding:6px 0; 
  font-size: 0.95rem;
}

.row.total span:last-child { 
  font-weight:700; 
  font-size: 1.1rem;
  background:linear-gradient(90deg,#FF8C00,#FFD300); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}

hr { 
  border:0; 
  border-top:1px solid rgba(255,211,0,0.15); 
  margin:16px 0; 
}

.wallet { 
  display:flex; 
  justify-content:space-between; 
  font-size: 0.95rem;
}

.vip { 
  display:grid; 
  gap:8px; 
}

.vip-badge { 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:6px 10px; 
  border-radius:14px; 
  background:var(--glass-fill); 
  border:1px solid var(--stroke-glass); 
  backdrop-filter:blur(12px); 
  width: fit-content;
}

.vip-level { 
  font-weight:700; 
  background:linear-gradient(90deg,#FF8C00,#FFD300); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}

.vip-bar { 
  height:10px; 
  border-radius:999px; 
  background:rgba(255,255,255,0.08); 
  overflow:hidden; 
}

.vip-fill { 
  height:100%; 
  width:65%; 
  background:linear-gradient(90deg,#FF8C00,#FFD300); 
  box-shadow:inset 0 0 8px rgba(255,211,0,.6); 
  transition:width .5s ease; 
}

.vip-points { 
  opacity:.9; 
  font-size:0.9rem; 
}

.methods { 
  display:flex; 
  gap:16px; 
  justify-content:space-between; 
  perspective:800px; 
  margin:24px 0; 
  flex-wrap:wrap; 
}

.method { 
  width:80px; 
  height:80px; 
  border-radius:50%; 
  backdrop-filter:blur(20px); 
  background:var(--glass-fill); 
  border:1px solid var(--stroke-glass); 
  box-shadow:0 0 20px rgba(255,140,0,0.25); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  transition:transform .35s ease, box-shadow .35s ease; 
  cursor:pointer; 
  transform:translateZ(16px); 
}

.method:hover { 
  transform:translateY(-4px) scale(1.08) translateZ(25px); 
  box-shadow:0 0 35px rgba(255,211,0,0.55); 
}

.method.active { 
  background:linear-gradient(135deg,#FF8C00,#FFD300); 
  border-color:rgba(255,255,255,0.45); 
  box-shadow:0 0 45px rgba(255,211,0,0.8); 
}

.method img { 
  width:36px; 
  filter:drop-shadow(0 0 4px rgba(255,211,0,0.4)); 
}

.amount, .promo { 
  width:100%; 
  margin-top:12px; 
  padding:14px 16px; 
  border-radius:12px; 
  border:1px solid rgba(255,211,0,0.2); 
  background:rgba(255,255,255,0.05); 
  color:#fff; 
  outline:none; 
  font-family: 'Inter', sans-serif;
}

.amount:focus, .promo:focus { 
  border-color:#FF8C00; 
  box-shadow:0 0 10px rgba(255,140,0,0.4); 
}

.btn-primary { 
  background:linear-gradient(90deg,#FF8C00,#FFD300); 
  color:#fff; 
  border-radius:22px; 
  padding:16px 28px; 
  font-weight:700; 
  box-shadow:0 0 24px rgba(255,140,0,.6); 
  position:relative; 
  overflow:hidden; 
  width:100%; 
  margin-top:20px; 
  cursor:pointer; 
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 211, 0, 0.8);
}

.btn-primary::after { 
  content:''; 
  position:absolute; 
  top:0; 
  left:-200px; 
  width:200px; 
  height:100%; 
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); 
  animation:shimmer 5s linear infinite; 
}

@keyframes shimmer { 
  0%{transform:translateX(0);}
  100%{transform:translateX(400px);} 
}

.stepper { 
  display:flex; 
  gap:12px; 
  justify-content:center; 
  margin-top:24px; 
}

.step { 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:#3a2a00; 
  transition: all 0.3s ease;
}

.step.active { 
  background:#FF8C00; 
  box-shadow:0 0 16px rgba(255,211,0,.8); 
  transform: scale(1.2);
}

.trust { 
  margin-top:20px; 
  text-align:center; 
  font-size:0.85rem; 
  opacity:0.7; 
}

.coin { 
  position:absolute; 
  width:40px; 
  height:40px; 
  border-radius:50%; 
  background:radial-gradient(circle,#FFD300 25%,#FF8C00 100%); 
  box-shadow:0 0 14px rgba(255,211,0,.45); 
  animation:coinFloat 6s ease-in-out infinite; 
  opacity:.9; 
  z-index: -1;
}

@keyframes coinFloat { 
  0%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-16px) rotate(180deg);}
  100%{transform:translateY(0) rotate(360deg);} 
}

.fog { 
  position:absolute; 
  inset:0; 
  background:radial-gradient(ellipse at 50% 60%, rgba(255,140,0,.08), transparent 60%); 
  filter:blur(40px); 
  animation:fogShift 12s ease-in-out infinite alternate; 
  z-index: -2;
}

@keyframes fogShift { 
  from{transform:translateY(0);} 
  to{transform:translateY(-12px);} 
}

@media (max-width: 1024px) {
  .layout {
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
  }
  
  .summary, .payment {
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 480px) {
  .methods {
    justify-content: center;
  }
  
  .method {
    width: 60px;
    height: 60px;
  }
  
  .method img {
    width: 28px;
  }
}