@media (max-width: 900px) {
  html, body { width: 100%; min-height: 100%; margin: 0; }
  body { overflow-x: hidden; }
  .login-shell { width: 100%; min-height: 100vh; min-height: 100dvh; }
  .login-panel {
    box-sizing: border-box; width: 100%; min-height: 100vh; min-height: 100dvh;
    padding: 0; display: flex; align-items: stretch; justify-content: stretch; background: #fff;
  }
  .login-card, .access-card, .first-access-card {
    box-sizing: border-box; width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    padding: calc(68px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px));
    display: flex; flex-direction: column; justify-content: center;
  }
  body.access-body {
    box-sizing: border-box; width: 100%; min-height: 100vh; min-height: 100dvh;
    padding: 0; display: flex; align-items: stretch; justify-content: stretch; background: #fff;
  }
  .login-card > .language-selector, .access-card > .language-selector {
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
  }
  .login-card > :not(.language-selector),
  .access-card > :not(.language-selector) {
    box-sizing: border-box;
    width: 100%;
    max-width: 430px;
    margin-right: auto;
    margin-left: auto;
  }
  .first-access-card > :not(.language-selector) { max-width: 390px; }
}
@media (max-width: 900px) and (max-height: 620px) {
  .login-card, .access-card, .first-access-card { justify-content: flex-start; }
}