:root {
      --hero-overlay-start: rgba(5, 10, 24, 0.8);
      --hero-overlay-end: rgba(8, 18, 44, 0.58);
      --hero-accent: rgba(255, 255, 255, 0.14);
    }

    body {
      min-height: 100vh;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.2rem;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: #0e1d3a;
    }

    body::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(135deg, var(--hero-overlay-start), var(--hero-overlay-end)),
        url("../../../assets/img/reg-img.jpeg") center center / cover no-repeat;
      transform: scale(1.03);
    }

    body::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 8% 18%, var(--hero-accent), transparent 42%),
        radial-gradient(circle at 85% 78%, rgba(255, 255, 255, 0.08), transparent 45%);
    }

    .card {
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 18px;
      box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
      max-width: 420px;
      width: 100%;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .card h4 {
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .card .text-muted {
      color: #4a5568 !important;
    }

    .form-control {
      border-radius: 0.75rem;
    }

    .btn-primary {
      font-weight: 600;
    }

    @media (max-width: 576px) {
      .card {
        border-radius: 14px;
      }
    }