* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {

      --gold-1: #f8df8f;
      --gold-2: #d4af37;
      --gold-3: #b8860b;

      --danger: #ff3b6b;
    }

    body {

      min-height: 100vh;

      overflow: hidden;

      font-family: "Inter", sans-serif;

      background:
        linear-gradient(rgba(0, 0, 0, .82),
          rgba(0, 0, 0, .92)),
        url('/assets/img/poker-bg.jpg');

      background-size: cover;
      background-position: center;

      position: relative;
    }

    /* =========================================
       GOLD AMBIENT LIGHT
    ========================================== */

    body::before {

      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(circle at top left,
          rgba(212, 175, 55, .15),
          transparent 28%),
        radial-gradient(circle at bottom right,
          rgba(212, 175, 55, .12),
          transparent 30%);

      pointer-events: none;
    }

    /* =========================================
       MAIN WRAPPER
    ========================================== */

    .authentication-wrapper {

      width: 100%;
      min-height: 100vh;

      display: flex;
      justify-content: center;
      align-items: center;

      padding: 40px 20px;

      position: relative;
      z-index: 2;
    }

    .authentication-inner {

      width: 100%;
      max-width: 560px;

      position: relative;
    }

    /* =========================================
       GOLD DOTS
    ========================================== */

    .authentication-inner::before {

      content: "";

      position: absolute;

      top: -30px;
      right: -30px;

      width: 120px;
      height: 120px;

      background-image:
        radial-gradient(#d4af37 2px, transparent 2px);

      background-size: 18px 18px;

      opacity: .55;
    }

    .authentication-inner::after {

      content: "";

      position: absolute;

      bottom: -30px;
      left: -30px;

      width: 120px;
      height: 120px;

      background-image:
        radial-gradient(#d4af37 2px, transparent 2px);

      background-size: 18px 18px;

      opacity: .28;
    }

    /* =========================================
       LOGIN CARD
    ========================================== */

    .vault-login-card {

      position: relative;

      overflow: hidden;

      border-radius: 34px;

      padding: 50px 45px;

      background:
        linear-gradient(rgba(8, 8, 8, .84),
          rgba(0, 0, 0, .94)),
        url('/assets/img/pattern.png');

      background-size: cover;
      background-position: center;

      border:
        1px solid rgba(212, 175, 55, .18);

      backdrop-filter: blur(24px);

      box-shadow:
        0 25px 60px rgba(0, 0, 0, .72),
        0 0 50px rgba(212, 175, 55, .08);

      isolation: isolate;
    }

    /* =========================================
       GOLD WAVE
    ========================================== */

    .gold-wave {

      /* position: absolute;

      top: 125px;
      left: -10%;

      width: 120%;
      height: 120px;

      pointer-events: none; */
    }

    .gold-wave::before {

      content: "";

      position: absolute;

      width: 100%;
      height: 4px;

      border-radius: 100px;

      background:
        linear-gradient(90deg,
          transparent,
          var(--gold-1),
          var(--gold-2),
          var(--gold-1),
          transparent);

      top: 10px;

      transform: rotate(-3deg);

      box-shadow:
        0 0 20px rgba(212, 175, 55, .8);
    }

    .gold-wave::after {

      content: "";

      position: absolute;

      width: 100%;
      height: 2px;

      background:
        linear-gradient(90deg,
          transparent,
          rgba(248, 223, 143, .9),
          rgba(212, 175, 55, .3),
          transparent);

      top: 34px;

      transform: rotate(4deg);
    }

    /* =========================================
       LOGO
    ========================================== */

    .top-logo {

      text-align: center;

      margin-bottom: 55px;

      position: relative;
      z-index: 2;
    }

    .top-logo img {

      width: 290px;

      max-width: 100%;

      filter:
        drop-shadow(0 0 15px rgba(212, 175, 55, .22));
    }

    /* =========================================
       TITLE
    ========================================== */

    .welcome-title {

      color: #fff;

      font-size: 39px;

      line-height: 1;

      font-weight: 900;

      margin-bottom: 14px;
    }

    .welcome-subtitle {

      color: rgba(255, 255, 255, .58);

      font-size: 15px;

      margin-bottom: 30px;
    }

    /* =========================================
       ALERT
    ========================================== */

    .alert-danger {

      display: flex;
      align-items: center;
      gap: 10px;

      background:
        rgba(120, 0, 0, .22) !important;

      border:
        1px solid rgba(255, 0, 0, .18) !important;

      color:
        #ffc1c1 !important;

      border-radius: 18px;

      padding: 16px 18px;

      margin-bottom: 28px;

      font-size: 14px;
    }

    .alert-danger i {

      color: var(--danger);

      font-size: 20px;
    }

    /* =========================================
       FORM GROUP
    ========================================== */

    .form-group {

      margin-bottom: 24px;
    }

    .form-group label {

      display: block;

      color: #fff;

      margin-bottom: 12px;

      font-size: 15px;

      font-weight: 600;
    }

    /* =========================================
       INPUT FIELD
    ========================================== */

    .input-box {

      position: relative;

      width: 100%;
    }

    .input-box input {

      width: 100%;

      height: 64px;

      border-radius: 18px;

      background:
        rgba(255, 255, 255, .03);

      border:
        1px solid rgba(255, 255, 255, .08);

      padding: 0 20px;

      color: #fff;

      font-size: 15px;

      transition: .3s;
    }

    .input-box input::placeholder {

      color: rgba(255, 255, 255, .28);
    }

    .input-box input:focus {

      outline: none;

      border-color:
        rgba(212, 175, 55, .55);

      background:
        rgba(255, 255, 255, .04);

      box-shadow:
        0 0 0 4px rgba(212, 175, 55, .08);
    }

    /* =========================================
       PASSWORD FIELD
    ========================================== */

    .password-wrapper {

      position: relative;

      width: 100%;
    }

    .password-wrapper input {

      width: 100%;

      height: 64px;

      border-radius: 18px;

      background:
        rgba(255, 255, 255, .03);

      border:
        1px solid rgba(255, 255, 255, .08);

      padding: 0 60px 0 20px;

      color: #fff;

      font-size: 15px;

      transition: .3s;
    }

    .password-wrapper input::placeholder {

      color: rgba(255, 255, 255, .28);
    }

    .password-wrapper input:focus {

      outline: none;

      border-color:
        rgba(212, 175, 55, .55);

      background:
        rgba(255, 255, 255, .04);

      box-shadow:
        0 0 0 4px rgba(212, 175, 55, .08);
    }

    /* =========================================
       TOGGLE PASSWORD
    ========================================== */

    .toggle-password {

      position: absolute;

      top: 50%;
      right: 20px;

      transform: translateY(-50%);

      display: flex;
      align-items: center;
      justify-content: center;

      cursor: pointer;

      color: var(--danger);

      font-size: 22px;

      transition: .3s;

      z-index: 5;
    }

    .toggle-password:hover {

      color: #ff6b90;
    }

    /* =========================================
       FORGOT PASSWORD
    ========================================== */

    .forgot-row {

      margin-bottom: 30px;
    }

    .forgot-row a {

      color: var(--danger);

      font-size: 14px;

      font-weight: 600;

      text-decoration: none;

      transition: .3s;
    }

    .forgot-row a:hover {

      color: #ff6b90;
    }

    /* =========================================
       LOGIN BUTTON
    ========================================== */

    .login-btn {

      width: 100%;
      height: 66px;

      border: none;

      border-radius: 18px;

      background:
        linear-gradient(135deg,
          var(--gold-1),
          var(--gold-2),
          var(--gold-3));

      color: #111;

      font-size: 20px;

      font-weight: 800;

      letter-spacing: 1px;

      cursor: pointer;

      transition: .35s;

      box-shadow:
        0 15px 30px rgba(212, 175, 55, .22);
    }

    .login-btn:hover {

      transform:
        translateY(-2px) scale(1.01);

      box-shadow:
        0 22px 40px rgba(212, 175, 55, .32);
    }

    /* =========================================
       FOOTER
    ========================================== */

    .signup-text {

      text-align: center;

      margin-top: 30px;

      color: rgba(255, 255, 255, .52);

      font-size: 14px;
    }

    .signup-text a {

      color: var(--gold-2);

      font-weight: 600;

      text-decoration: none;
    }

    /* =========================================
       MOBILE
    ========================================== */

    @media(max-width: 576px) {

      body {
        overflow-y: auto;
      }

      .vault-login-card {

        padding: 38px 24px;
      }

      .top-logo img {

        width: 220px;
      }

      .welcome-title {

        font-size: 40px;
      }

    }