/* Full-bleed login composition based on the supplied prototype. */
body:has(.login-scene) { min-height: 100vh; overflow-x: hidden; background: #d0d0d0; }
body:has(.login-scene) main { min-height: 100vh; }
body:has(.login-scene) main > .container { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
body:has(.login-scene) #notification-container:empty,
body:has(.login-scene) #page-loader,
body:has(.login-scene) .alert { display: none; }
.login-scene { position: relative; display: grid; width: 100%; min-height: 100vh; place-items: center; overflow: hidden; isolation: isolate; background: #d0d0d0; }
.login-scene::before { position: absolute; z-index: -2; inset: 0; content: ""; background: url("/static/images/login-background.png") center center / cover no-repeat; }
.login-scene::after { position: absolute; z-index: -1; inset: 0; content: ""; background: rgba(255,255,255,.57); }
.login-panel { width: min(440px, calc(100% - 36px)); padding: 24px 16px; color: #050505; text-align: center; }
.login-panel h1 { margin: 0 0 22px; color: #050505; font-family: 'MainFont', sans-serif; font-size: clamp(2rem, 4vw, 2.55rem); font-weight: 700; line-height: 1.1; }
.login-form-scene { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.login-form-scene > input:not([type="hidden"]) { width: min(100%, 338px); height: 40px; margin: 0; padding: 0 18px; border: 1.5px solid #080808; border-radius: 999px; outline: none; background: #fff; color: #090909; font: 500 1rem/1 'MainFont', sans-serif; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.login-form-scene > input:not([type="hidden"]):focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.login-form-scene > input::placeholder { color: transparent; }
.login-remember { display: flex; align-items: center; gap: 7px; margin-top: -16px; color: #111; font: 500 .8rem/1.2 'MainFont', sans-serif; }
.login-remember input { width: 15px; height: 15px; margin: 0; accent-color: #050505; }
.login-form-scene > button { width: 172px; min-height: 40px; margin: -7px 0 0; padding: 7px 18px; border: 0; border-radius: 11px; background: #050505; color: #fff; cursor: pointer; font: 700 1rem/1.2 'MainFont', sans-serif; transition: transform .16s ease, background .16s ease; }
.login-form-scene > button:hover { transform: translateY(-1px); background: #252525; }
.login-extra-links { display: flex; flex-direction: column; gap: 8px; margin-top: 17px; color: #141414; font-size: .78rem; line-height: 1.35; }
.login-extra-links a { color: #111; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.login-extra-links > span { font-size: .74rem; }
body:has(.login-scene) .fab-container { z-index: 20; }
@media (max-width: 540px) {
  .login-scene::before { background-position: 51% center; }
  .login-scene::after { background: rgba(255,255,255,.62); }
  .login-panel { width: min(390px, calc(100% - 28px)); }
  .login-form-scene { gap: 23px; }
  .login-form-scene > input:not([type="hidden"]) { width: min(100%, 338px); }
}

/* Keep login inputs usable while tablet virtual keyboards resize the visual viewport. */
body:has(.login-scene), body:has(.login-scene) main, body:has(.login-scene) main > .container { min-height:100vh; min-height:100dvh; height:auto; overflow-x:hidden; overflow-y:auto; }
.login-scene { min-height:100vh; min-height:100dvh; height:auto; overflow:visible; padding:clamp(20px, 6vh, 64px) 0; }
.login-panel { flex-shrink:0; }
.login-form-scene > input:not([type="hidden"]) { touch-action:manipulation; -webkit-user-select:text; user-select:text; }
@media (max-height:520px) { .login-scene { place-items:start center; padding:16px 0 28px; } .login-panel { margin:auto 0; } }