/* =========================================================
   training_app_v3 / login.css
   Login page only
========================================================= */

body.loginBody::before,
body.loginBody::after{
  display:none !important;
}

html{
  background:#0F1A2B;
}

body.loginBody{
  margin:0;
  width:100%;
  min-height:100vh;
  height:100vh;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
  color:var(--text);

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(42, 63, 102, 0.55) 0%,
      rgba(31, 47, 77, 0.42) 22%,
      rgba(26, 39, 66, 0.22) 40%,
      rgba(15, 26, 43, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      #0F1A2B 0%,
      #14213A 38%,
      #1A2742 100%
    );

  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

body.loginBody .appShell,
body.loginBody .appShell--plain,
body.loginBody .appMain,
body.loginBody .appMain--plain,
body.loginBody .pageContainer,
body.loginBody .pageContainer--plain{
  width:100%;
  min-height:100vh !important;
  height:100vh !important;
  min-height:100dvh !important;
  height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}

/* =========================================================
   Layout
========================================================= */

.authPage{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;

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

  padding:24px;
  box-sizing:border-box;

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(42, 63, 102, 0.55) 0%,
      rgba(31, 47, 77, 0.42) 22%,
      rgba(26, 39, 66, 0.22) 40%,
      rgba(15, 26, 43, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      #0F1A2B 0%,
      #14213A 38%,
      #1A2742 100%
    );

  background-repeat:no-repeat;
  background-size:cover;
}

.authBox{
  width:100%;
  max-width:440px;
}

/* =========================================================
   Brand
========================================================= */

.authBrand{
  margin-bottom:22px;
  text-align:center;
}

.authLogo{
  display:none;
}

.authLogoWide{
  display:block;
  width:210px;
  max-width:76%;
  height:auto;
  margin:0 auto 14px;
  object-fit:contain;
  filter:
    drop-shadow(0 10px 24px rgba(63,169,255,0.20))
    drop-shadow(0 2px 8px rgba(0,0,0,0.20));
}

.authBrandTitle{
  display:none;
}

.authBrandSub{
  margin-top:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.075em;
  color:rgba(255,255,255,0.62);
}

/* =========================================================
   Card
========================================================= */

.authCard{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  background:rgba(10, 27, 54, 0.78);
  border:1px solid rgba(136, 167, 220, 0.14);
  border-radius:28px;

  padding:30px 28px;

  box-shadow:
    0 28px 80px rgba(4, 10, 24, 0.50),
    0 8px 24px rgba(10, 24, 52, 0.22);
}

/* =========================================================
   Form
========================================================= */

.authForm{
  display:grid;
  gap:14px;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:640px){

  .authPage{
    padding:16px;
  }

  .authCard{
    padding:22px 18px;
    border-radius:20px;
  }

  .authLogoWide{
    width:176px;
    max-width:74%;
    margin-bottom:12px;
  }

  .authBrandSub{
    font-size:11px;
  }
}