/* ===== EA DRIFT / EIGHT SERVER cyber UI ===== */

.btn-neon {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #001220;
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  box-shadow: 0 0 18px rgba(34,211,238,0.55);
  transition: transform .15s, box-shadow .2s, filter .2s;
  font-size: .85rem;
}
.btn-neon:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(34,211,238,0.85);
  filter: brightness(1.05);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  color: #cfe6ff;
  border: 1px solid rgba(34,211,238,0.5);
  background: rgba(34,211,238,0.05);
  transition: all .2s;
}
.btn-outline:hover {
  background: rgba(34,211,238,0.12);
  border-color: rgba(34,211,238,0.8);
  color: white;
}

.panel {
  background: linear-gradient(180deg, rgba(10,20,36,0.92), rgba(7,14,28,0.92));
  border: 1px solid #11304f;
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
}
.panel::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(transparent 96%, rgba(34,211,238,0.18) 100%) 0 0 / 100% 4px,
    linear-gradient(90deg, transparent 96%, rgba(34,211,238,0.18) 100%) 0 0 / 4px 100%;
  opacity: .15;
}

.card-corner {
  position: relative;
}
.card-corner::before,
.card-corner::after {
  content:"";
  position:absolute;
  width: 18px; height: 18px;
  border: 2px solid #22d3ee;
}
.card-corner::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.card-corner::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }

.hero-glow {
  background:
    radial-gradient(700px 360px at 20% 20%, rgba(34,211,238,0.25), transparent 60%),
    radial-gradient(600px 360px at 80% 30%, rgba(168,85,247,0.18), transparent 60%);
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #67e8f9, #22d3ee 50%, #f8fafc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-gold {
  background: linear-gradient(135deg, #fde68a, #facc15, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.product-card {
  position: relative;
  border: 1px solid #11304f;
  background: linear-gradient(180deg, rgba(10,20,36,0.85), rgba(5,12,24,0.95));
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.7);
  box-shadow: 0 10px 40px rgba(34,211,238,0.25);
}

.feature-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.2rem .6rem; border-radius:999px;
  background: rgba(34,211,238,0.08);
  border:1px solid rgba(34,211,238,0.25);
  font-size:.72rem; color:#7dd3fc;
}

.badge-status {
  display:inline-block; padding:.15rem .6rem; font-size:.7rem;
  border-radius:999px; font-weight:600; letter-spacing:.04em;
}
.badge-status.pending   { background:rgba(250,204,21,.15);  color:#fde68a; border:1px solid rgba(250,204,21,.4); }
.badge-status.paid      { background:rgba(34,197,94,.15);   color:#86efac; border:1px solid rgba(34,197,94,.4); }
.badge-status.cancelled { background:rgba(239,68,68,.15);   color:#fca5a5; border:1px solid rgba(239,68,68,.4); }
.badge-status.refunded  { background:rgba(168,85,247,.15);  color:#d8b4fe; border:1px solid rgba(168,85,247,.4); }
.badge-status.active    { background:rgba(34,197,94,.15);   color:#86efac; border:1px solid rgba(34,197,94,.4); }
.badge-status.provisioning { background:rgba(56,189,248,.15); color:#7dd3fc; border:1px solid rgba(56,189,248,.4); }
.badge-status.suspended { background:rgba(250,204,21,.15);  color:#fde68a; border:1px solid rgba(250,204,21,.4); }
.badge-status.expired   { background:rgba(239,68,68,.15);   color:#fca5a5; border:1px solid rgba(239,68,68,.4); }
.badge-status.revoked   { background:rgba(239,68,68,.15);   color:#fca5a5; border:1px solid rgba(239,68,68,.4); }

.input, .textarea, .select {
  width: 100%;
  padding: .6rem .85rem;
  border-radius: .65rem;
  background: rgba(5,10,20,0.85);
  border: 1px solid #133355;
  color: #e6f1ff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34,211,238,0.2);
}
.label { display:block; font-size:.8rem; color:#9fbcdb; margin-bottom:.35rem; font-weight:500; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:.7rem .8rem; border-bottom:1px solid #0f2540; text-align:left; font-size:.875rem; }
.table th { color:#67e8f9; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.75rem; }
.table tr:hover td { background: rgba(34,211,238,0.04); }

/* Hero car spotlight */
.spotlight {
  position:absolute; inset:0;
  background: radial-gradient(circle at 35% 55%, rgba(34,211,238,0.35), transparent 55%);
  pointer-events:none;
}

/* Drift ring */
.drift-ring {
  position:absolute;
  width: 580px; height: 580px;
  border-radius: 50%;
  border: 1px solid rgba(34,211,238,0.25);
  box-shadow: 0 0 80px rgba(34,211,238,0.15) inset;
}
.drift-ring.r2 { width: 720px; height: 720px; border-color: rgba(34,211,238,0.12); }

/* Loading spinner */
.spinner { border:3px solid rgba(34,211,238,.2); border-top-color:#22d3ee; border-radius:50%; width:1.5rem;height:1.5rem; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }