:root{
  --neon-lime:#c6ff00;
  --neon-cyan:#22e6ff;
  --neon-pink:#ff2fd0;
  --neon-purple:#8b5cff;
}

*{ -webkit-tap-highlight-color: transparent; }

body{
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(139,92,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34,230,255,.14), transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(255,47,208,.12), transparent 60%),
    #07070d;
  background-attachment: fixed;
}

/* subtle moving grid */
.grid-bg::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
}

.neon-text{
  text-shadow: 0 0 8px rgba(198,255,0,.55), 0 0 28px rgba(198,255,0,.25);
}
.neon-cyan-text{
  text-shadow: 0 0 8px rgba(34,230,255,.6), 0 0 26px rgba(34,230,255,.3);
}

.card{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-4px); }

.card-pop{
  border-color: rgba(198,255,0,.5);
  box-shadow: 0 0 0 1px rgba(198,255,0,.25), 0 18px 50px -12px rgba(198,255,0,.35);
}

.btn-neon{
  background: linear-gradient(90deg, var(--neon-lime), #7dff9e);
  color:#08130a;
  font-weight:800;
  box-shadow: 0 8px 28px -8px rgba(198,255,0,.7);
  transition: transform .12s ease, box-shadow .25s ease, filter .2s ease;
}
.btn-neon:hover{ transform: translateY(-2px) scale(1.01); filter:brightness(1.05); box-shadow:0 14px 36px -8px rgba(198,255,0,.85); }
.btn-neon:active{ transform: translateY(0) scale(.99); }

.btn-ghost{
  border:1px solid rgba(255,255,255,.16);
  transition: all .18s ease;
}
.btn-ghost:hover{ border-color: rgba(34,230,255,.6); color:#22e6ff; }

.chip{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
}

/* QRIS box */
#qrcode{ display:flex; align-items:center; justify-content:center; }
#qrcode img, #qrcode canvas{ border-radius:14px; }

.pulse-ring{ animation: pulse 1.6s ease-out infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(34,230,255,.5); }
  100%{ box-shadow:0 0 0 22px rgba(34,230,255,0); }
}

.spin{ animation: spin 1s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.pop-in{ animation: popIn .45s cubic-bezier(.2,.8,.2,1.2) both; }
@keyframes popIn{ from{ opacity:0; transform: translateY(14px) scale(.96);} to{opacity:1; transform:none;} }

.float{ animation: floaty 4s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.code-box{
  letter-spacing:.35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(198,255,0,.08);
  border:1px dashed rgba(198,255,0,.5);
}

.bars span{ display:inline-block; width:4px; margin:0 1px; background:var(--neon-cyan); border-radius:2px; animation: bars 1s ease-in-out infinite; }
.bars span:nth-child(2){ animation-delay:.15s } .bars span:nth-child(3){ animation-delay:.3s } .bars span:nth-child(4){ animation-delay:.45s }
@keyframes bars{ 0%,100%{ height:6px } 50%{ height:20px } }

.toast{ animation: toastIn .3s ease, toastOut .3s ease 1.7s forwards; }
@keyframes toastIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes toastOut{ to{opacity:0; transform:translateY(12px)} }