/* Login-only glass layout. Account portal styles remain in style.css. */
.login-page {
  background: radial-gradient(ellipse at 15% 20%, #e1f0eb, transparent 65%),
    radial-gradient(ellipse at 85% 85%, #e9def2, transparent 65%), #e5e9ed;
  color: #463b52;
  min-height: 100svh;
}
.login-background, .login-shade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-background { object-fit: cover; object-position: center; opacity: 0; filter: blur(1px); transform: scale(1.008); transition: opacity .7s ease; }
.login-background.is-loaded { opacity: 1; }
.login-shade { background: linear-gradient(125deg, rgba(25, 34, 44, .1), rgba(28, 24, 43, .18)); }
.login-page .login-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  width: 100%;
  padding: 42px 20px 78px;
  background: none;
}
.login-page .login-form-wrap {
  display: block;
  width: min(100%, 460px);
  padding: 34px 40px 22px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 30px;
  background: rgba(255, 253, 253, .77);
  backdrop-filter: blur(28px) saturate(125%);
  -webkit-backdrop-filter: blur(28px) saturate(125%);
  box-shadow: 0 24px 80px rgba(30, 25, 45, .18), inset 0 1px rgba(255,255,255,.7);
}
.login-page .login-form-inner { max-width: none; margin: 0; }
.login-heading { text-align: center; margin-bottom: 26px; }
.login-avatar {
  width: 76px; height: 76px; display: block; margin: 0 auto 17px;
  border: 5px solid rgba(255, 255, 255, .94); border-radius: 50%; object-fit: cover;
  box-shadow: 0 6px 24px rgba(101, 77, 122, .18);
}
.login-page .section-kicker { color: #8b719e; font-size: 11px; letter-spacing: 3px; margin-bottom: 7px; }
.login-page #login-title { color: #473950; font-size: 29px; font-weight: 500; letter-spacing: 2px; margin: 0 0 7px; }
.login-page #login-subtitle { color: #7f7188; font-size: 15px; margin: 0; line-height: 1.6; }
.login-page #login-form > label { display: block; margin: 0 0 17px; font-size: 15px; color: #63536f; }
.login-page input:not([type=checkbox]) {
  width: 100%; min-height: 49px; margin-top: 8px; padding: 12px 16px;
  border: 1px solid rgba(159, 135, 179, .29); border-radius: 14px;
  background: rgba(255, 255, 255, .72); color: #44364f; font-size: 17px;
  box-shadow: inset 0 1px 2px rgba(60, 44, 80, .025);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.login-page input::placeholder { color: #a496af; font-size: 15px; }
.login-page input:focus-visible { outline: none; border-color: #ac8fc3; background: rgba(255,255,255,.92); box-shadow: 0 0 0 3px rgba(158, 126, 187, .13); }
.login-page .button:focus-visible, .background-control:focus-visible { outline: 3px solid #a986c6; outline-offset: 4px; }
.login-page .login-submit {
  min-height: 49px; width: 100%; margin-top: 7px; padding: 12px 19px; border-radius: 14px;
  justify-content: center; text-align: center; color: #fff; font-size: 17px; font-weight: 500;
  background: linear-gradient(115deg, #947bb4, #7f78b8);
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 5px 15px rgba(119, 93, 157, .19);
}
.login-page .login-submit:hover { background: linear-gradient(115deg, #8870a8, #726bad); transform: translateY(-1px); }
.login-page .passkey-login:not([hidden]) {
  width: 100%; min-height: 47px; margin-top: 13px; padding: 11px 15px;
  border: 1px solid rgba(151, 125, 175, .33); border-radius: 14px;
  background: rgba(255,255,255,.53); color: #77608b; font-size: 15px; font-weight: 500;
}
.login-page .passkey-login:hover { background: rgba(255,255,255,.86); }
.login-page .passkey-note { font-size: 12px; color: #8c7c98; margin: 9px 0 0; }
.login-page .login-note { font-size: 13px; color: #8c7c98; margin: 23px 0 19px; gap: 7px; }
.login-note svg, .background-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.login-page .login-foot { font-size: 10px; color: #998ba1; padding-top: 16px; letter-spacing: 1.3px; border-top-color: rgba(148, 126, 164, .18); }
.login-page .oauth-client-banner { margin-bottom: 21px; padding: 12px 14px; background: rgba(237, 228, 246, .65); }
.login-page .oauth-client-banner small { font-size: 12px; }
.login-page .form-error { margin: 10px 0; border-radius: 10px; line-height: 1.6; }
.login-page #totp-field > label { font-size: 15px; }
.login-page #totp-field label small { display: block; font-size: 12px; color: #8c7c98; }
.login-page .trust-device-option { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center; column-gap: 12px; row-gap: 6px; font-size: 14px; }
.login-page .trust-device-option input[type="checkbox"] { margin: 0; }
.login-page .trust-device-option small { grid-column: 1 / -1; margin: 0; font-size: 12px; }
.background-control {
  position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.56); border-radius: 30px;
  background: rgba(255,255,255,.72); color: #695575; font-size: 13px; cursor: pointer;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 4px 16px rgba(35,25,50,.08);
}
.background-control:hover { background: rgba(255,255,255,.9); }
.background-control:disabled { opacity: .65; cursor: wait; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 540px) {
  .login-page .login-screen { padding: 24px 16px 78px; }
  .login-page .login-form-wrap { padding: 28px 25px 20px; border-radius: 25px; }
  .login-avatar { width: 68px; height: 68px; margin-bottom: 14px; }
  .login-page #login-title { font-size: 27px; }
  .background-control { bottom: max(15px, env(safe-area-inset-bottom)); right: 16px; }
}
@media (max-width: 640px) {
  .login-page .login-screen { min-height: calc(100svh - 62px); padding-bottom: 24px; }
  .background-control { position: relative; bottom: auto; right: auto; width: max-content; display: flex; margin: 0 auto 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-background, .login-page .login-submit, .login-page input { transition: none; }
  .login-page .login-submit:hover { transform: none; }
}