/* Estilos que no salen de las utilidades de Tailwind */
body { background: #0B0813; }
html, body { overflow-x: hidden; }

.grid-bg {
  background-image:
    linear-gradient(rgba(157,78,221,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157,78,221,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.scanline::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}

.clip-corner { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }

@keyframes blink { 50% { opacity: .2; } }
.blink { animation: blink 1.4s steps(2) infinite; }

.icon-box {
  width: 3rem; height: 3rem; border-radius: .5rem;
  display: grid; place-items: center; color: #00FF66;
  background: rgba(157,78,221,.15); border: 1px solid rgba(157,78,221,.4);
}

.step {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: .25rem;
  display: grid; place-items: center; font-weight: 700;
  background: #00FF66; color: #000;
}

.pay-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  border: 1px solid rgba(157,78,221,.4); border-radius: .25rem; padding: .75rem 1rem;
  transition: border-color .15s;
}
.pay-btn:hover { border-color: #00FF66; }
.pay-btn:disabled { opacity: .5; cursor: wait; }

/* Pestañas de módulos */
.module-tab { background: rgba(21,16,34,.6); }
.module-tab:hover { border-color: rgba(157,78,221,.4); }
.module-tab.is-active { background: #151022; border-color: #00FF66; box-shadow: inset 3px 0 0 #00FF66; }
.module-tab:focus-visible { outline: 2px solid #00FF66; outline-offset: 2px; }