/* Isolated from the dashboard, verification and administrator views. */
.md-login .md-login-layout:has(.auth-cards) { max-width: 1040px; gap: 12px; }
.auth-cards {
  --auth-duration: 900ms;
  --auth-ease: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  display: grid;
  min-height: 700px;
  overflow: hidden;
  border: 1px solid #ffffff35;
  border-top-color: #ffffff55;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff16, #ffffff06 50%, #25002730);
  box-shadow: inset 0 1px 0 #ffffff12, 0 24px 80px #00000040;
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
}
.auth-cards .auth-panel {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  min-height: 700px;
  padding: 40px 48px;
  transition: transform var(--auth-duration) var(--auth-ease), opacity var(--auth-duration) var(--auth-ease), visibility var(--auth-duration);
}
.auth-cards .auth-panel[hidden] { display: none; }
.auth-cards .auth-panel--register { margin-left: 50%; }
.auth-cards.is-ready .auth-panel { position: relative; inset: auto; min-height: 700px; }
.auth-cards.is-ready .auth-panel--register { left: auto; margin-left: 50%; }
.auth-cards[data-mode="register"] .auth-panel--login,
.auth-cards[data-mode="login"] .auth-panel--register { opacity: 0; visibility: hidden; pointer-events: none; }
.auth-cards[data-mode="register"] .auth-panel--login { transform: translateX(18%); }
.auth-cards[data-mode="login"] .auth-panel--register { transform: translateX(-18%); }
.md-login .auth-cards .md-login-brand { margin-bottom: 28px; font-size: 18px; }
.md-login .auth-cards h1 { font: 700 36px/1.15 Arial, sans-serif; letter-spacing: -1.1px; margin-bottom: 14px; }
.md-login .auth-cards h1:hover { color: #fff; text-shadow: none; }
.md-login .auth-cards .md-login-description { font-size: 16px; line-height: 1.6; margin-bottom: 27px; max-width: 360px; }
.md-login .auth-cards .md-login-form { gap: 18px; }
.md-login .auth-cards .md-login-field { gap: 8px; }
.md-login .auth-cards label { font-size: 14px; }
.md-login .auth-cards input { height: 50px; font-size: 16px; border-radius: 8px; }
.md-login .auth-cards input:focus { border-color: #80ff00; box-shadow: 0 0 0 3px #80ff001c; }
.md-login .auth-cards .consent { font-size: 12px; line-height: 1.55; gap: 10px; }
.md-login .auth-cards .consent input { height: 20px; }
.md-login .auth-cards .md-login-submit { min-height: 50px; font-size: 16px; border-radius: 8px; margin-top: 4px; }
.md-login .auth-cards .md-login-support { font-size: 14px; margin-top: 22px; }
.md-login .auth-cards .support-small { font-size: 12px; color: #ada5b7; margin-top: 18px; }
.md-login .auth-cards .md-login-brand,
.md-login .auth-cards h1,
.md-login .auth-cards .md-login-description,
.md-login .auth-cards .md-login-field,
.md-login .auth-cards .md-login-submit,
.md-login .auth-cards .md-login-support { animation: none; }
.auth-cover {
  position: absolute;
  inset: 10px auto 10px 10px;
  width: calc(50% - 10px);
  z-index: 2;
  overflow: hidden;
  border-radius: 20px;
  background: #100e22 url('./auth-city-20261025.png') 48% center / cover;
  box-shadow: inset 0 0 0 1px #ffffff18, 0 8px 32px #00000025;
  transition: transform var(--auth-duration) var(--auth-ease);
  will-change: transform;
}
.auth-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #080d2280, #0c092241 35%, #080c1ce6); }
.auth-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, #ffffff1c 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff1c 1px, transparent 1px),
    linear-gradient(110deg, #23002728, #080d221a 60%);
  background-size: 260px 250px, 260px 250px, 100% 100%;
  background-position: center;
  backdrop-filter: blur(8px) saturate(.85);
  -webkit-backdrop-filter: blur(8px) saturate(.85);
  pointer-events: none;
}
.auth-cards[data-mode="login"] .auth-cover { transform: translateX(100%); }
.auth-cover-copy {
  position: absolute;
  inset: 0;
  padding: 65px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  /* Each copy has its own layer. Reveal it only after the other layer has left. */
  transition:
    transform var(--auth-duration) var(--auth-ease),
    opacity calc(var(--auth-duration) * .42) ease calc(var(--auth-duration) * .48),
    visibility 0s linear calc(var(--auth-duration) * .48);
}
.md-login .auth-cover h2 { font: 700 38px/1.12 Arial, sans-serif; letter-spacing: -1.2px; margin: 0 0 20px; color: #fff; text-shadow: 0 2px 24px #070a16a6; }
.md-login .auth-cover h2:hover { color: #fff; }
.auth-cover-copy p { font: 16px/1.6 Arial, sans-serif; color: #e2ddeb; margin: 0 0 30px; max-width: 290px; }
.md-login .auth-switch { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 12px 26px; border-radius: 9px; border: 1px solid #ffffff60; background: #ffffff12; backdrop-filter: blur(12px); color: #fff; font: 600 15px/1.4 Arial, sans-serif; text-decoration: none; transition: background 180ms ease, border-color 180ms ease; }
.md-login .auth-switch:hover { background: #ffffff25; border-color: #baff78; }
.md-login .auth-cards :is(a,button):focus-visible { outline: 2px solid #80ff00; outline-offset: 4px; }
.auth-cards[data-mode="register"] [data-auth-copy="login"],
.auth-cards[data-mode="login"] [data-auth-copy="register"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform var(--auth-duration) var(--auth-ease),
    opacity calc(var(--auth-duration) * .32) ease,
    visibility 0s linear calc(var(--auth-duration) * .32);
}
.auth-cards[data-mode="register"] [data-auth-copy="login"] { transform: translateX(-24%); }
.auth-cards[data-mode="login"] [data-auth-copy="register"] { transform: translateX(24%); }
@media (max-width: 760px) {
  .md-login .md-login-layout:has(.auth-cards) { max-width: 520px; }
  .auth-cards { min-height: 0; border-radius: 23px; display: grid; grid-template-rows: auto 230px; }
  .auth-cards.is-ready { grid-template-rows: var(--auth-form-height) 230px; transition: grid-template-rows var(--auth-duration) var(--auth-ease); }
  .auth-cards .auth-panel, .auth-cards.is-ready .auth-panel { position: relative; inset: auto; align-self: start; width: 100%; min-height: 0; margin: 0; padding: 28px; }
  .auth-cards[data-mode="register"] .auth-panel--login,
  .auth-cards[data-mode="login"] .auth-panel--register { transform: translateY(12px); }
  .auth-cover { position: relative; grid-area: 2 / 1; inset: auto; width: auto; height: 222px; margin: 0 8px 8px; border-radius: 16px; background-position: center 60%; will-change: auto; }
  .auth-cards[data-mode="login"] .auth-cover { transform: none; }
  .auth-cover-copy { padding: 22px; }
  .md-login .auth-cover h2 { font-size: 27px; margin-bottom: 10px; }
  .auth-cover-copy p { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
  .md-login .auth-switch { min-height: 42px; padding: 9px 20px; font-size: 14px; }
  .md-login .auth-cards h1 { font-size: 31px; }
  .md-login .auth-cards .md-login-brand { margin-bottom: 23px; }
  .md-login .auth-cards .md-login-description { font-size: 15px; margin-bottom: 24px; }
  .md-login .auth-cards .auth-inline-switch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-cards, .auth-cards *, .auth-cards *::before, .auth-cards *::after { transition: none !important; animation: none !important; }
}