/* VPNFORZA SPACE NEON - DESIGN ONLY */
html, body {
  min-height: 100%;
}
body {
  background-color:#020713 !important;
  background-image:
    radial-gradient(circle at 15% 15%,rgba(20,90,255,.16),transparent 28%),
    radial-gradient(circle at 85% 80%,rgba(0,210,255,.10),transparent 30%),
    linear-gradient(135deg,#020611 0%,#06142f 48%,#01030a 100%) !important;
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(60,160,255,.8) 0 1px,transparent 1.5px);
  background-size:150px 150px,280px 280px;
  animation:vfStars 65s linear infinite;
}
.main-menu,.header-navbar,.content-wrapper,.content-body,.app-content,.footer {
  position:relative;
  z-index:1;
}
.main-menu,.header-navbar {
  background:rgba(2,9,25,.88) !important;
  border-color:rgba(0,145,255,.22) !important;
  box-shadow:0 0 35px rgba(0,120,255,.10) !important;
  backdrop-filter:blur(16px);
}
.main-menu .navigation>li>a {
  border-radius:12px !important;
  transition:.25s ease !important;
}
.main-menu .navigation>li>a:hover,
.main-menu .navigation>li.active>a {
  background:linear-gradient(90deg,rgba(0,105,255,.25),rgba(0,210,255,.08)) !important;
  box-shadow:0 0 20px rgba(0,150,255,.16),inset 0 0 18px rgba(0,150,255,.08) !important;
}

/* THE MOVING NEON RING */
.card,
.table-responsive,
.modal-content,
.alert,
.dropdown-menu {
  position:relative !important;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(0,145,255,.28) !important;
  border-radius:18px !important;
  background-color:rgba(3,10,28,.88) !important;
  box-shadow:0 10px 35px rgba(0,0,0,.28),0 0 18px rgba(0,130,255,.08) !important;
}

/* rotating light around the edge */
.card:before,
.table-responsive:before,
.modal-content:before,
.alert:before {
  content:"" !important;
  position:absolute !important;
  inset:-120% !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 315deg,
    rgba(0,110,255,.04) 330deg,
    rgba(0,190,255,.35) 342deg,
    #00d9ff 348deg,
    #ffffff 351deg,
    #00aaff 354deg,
    rgba(0,120,255,.10) 358deg,
    transparent 360deg
  ) !important;
  animation:vfRing 3.8s linear infinite !important;
}

/* inner surface so only the border glow remains visible */
.card:after,
.table-responsive:after,
.modal-content:after,
.alert:after {
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  z-index:-1 !important;
  pointer-events:none !important;
  border-radius:16px !important;
  background:rgba(3,10,28,.97) !important;
  box-shadow:inset 0 0 20px rgba(0,135,255,.055) !important;
}

.card:hover,
.table-responsive:hover,
.modal-content:hover {
  border-color:rgba(0,190,255,.55) !important;
  box-shadow:0 15px 45px rgba(0,0,0,.38),0 0 30px rgba(0,160,255,.20) !important;
}

.card .card-header,.card .card-footer {
  background:rgba(2,12,30,.45) !important;
  border-color:rgba(0,145,255,.13) !important;
}

.form-control,.custom-select,select.form-control,textarea.form-control {
  background:rgba(1,7,20,.78) !important;
  color:#eef9ff !important;
  border:1px solid rgba(65,155,255,.28) !important;
  border-radius:12px !important;
}
.form-control:focus,.custom-select:focus,select.form-control:focus,textarea.form-control:focus {
  border-color:#00c8ff !important;
  box-shadow:0 0 0 3px rgba(0,170,255,.08),0 0 22px rgba(0,150,255,.18) !important;
}
.btn {
  border-radius:11px !important;
  transition:.2s ease !important;
}
.btn:hover {
  transform:translateY(-1px);
  box-shadow:0 0 22px rgba(0,155,255,.22) !important;
}
.btn-primary {
  background:linear-gradient(135deg,#246cff,#00bfff) !important;
  border-color:transparent !important;
}
.table {
  color:rgba(235,247,255,.92) !important;
  background:transparent !important;
}
.table thead th {
  background:rgba(10,70,145,.18) !important;
  border-color:rgba(50,155,255,.15) !important;
}
.table tbody tr:hover {
  background:rgba(0,120,255,.08) !important;
}
.dropdown-menu {
  background:rgba(3,11,28,.97) !important;
}
.dropdown-item:hover {
  background:rgba(0,120,255,.14) !important;
}
a:hover {
  text-shadow:0 0 12px rgba(40,175,255,.38);
}
@keyframes vfRing {
  to { transform:rotate(360deg); }
}
@keyframes vfStars {
  from { background-position:0 0,80px 120px; }
  to { background-position:260px 180px,-140px 340px; }
}
@media (prefers-reduced-motion:reduce) {
  .card:before,.table-responsive:before,.modal-content:before,.alert:before,body:before {
    animation:none !important;
  }
}