@import url("/css/controls-f8ac5549747aedf43755024ee7e96ec9.css");
@import url("/css/pages/auth-2558bdd521431d7e61688fbd2928575a.css");

/* Login surfaces follow the saved theme on desktop and phone. */
body.page-login {
  --login-ink: #19212f;
  --login-muted: #526071;
  --login-surface: #ffffff;
  --login-border: #c8d2df;
  --login-action: #4f378a;
  --login-action-hover: #60459d;
  --login-on-action: #ffffff;
  --login-focus: #2563eb;
  --login-focus-ring: rgb(37 99 235 / 18%);
  --login-error: #b42332;
  --login-selection: #e9ddff;
  --login-background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #dbeafe 100%);
}
/* Dark login reads the shared palette in css/dark-palette.css. Colour only. */
html[data-theme="dark"] body.page-login {
  --login-ink: var(--dark-ink);
  --login-muted: var(--dark-muted);
  --login-surface: var(--dark-surface);
  --login-border: var(--dark-line);
  --login-action: var(--dark-accent);
  --login-action-hover: var(--dark-accent-hover);
  --login-button: var(--dark-button);
  --login-button-hover: var(--dark-button-hover);
  --login-on-action: var(--dark-on-button);
  --login-input-surface: var(--dark-input);
  --login-input-border: var(--dark-input-line);
  --login-focus: var(--dark-focus);
  --login-focus-ring: var(--dark-focus-ring);
  --login-error: var(--dark-danger);
  --login-selection: var(--dark-selection);
  --login-canvas: var(--dark-bg);
  --login-background: radial-gradient(ellipse 65% 85% at 24% 58%, var(--dark-line) 0%, var(--login-canvas) 72%);
  --color-on-surface: var(--login-ink);
  --color-on-surface-variant: var(--login-muted);
  --color-outline: var(--login-muted);
  --color-outline-variant: var(--login-border);
  --color-surface-lowest: var(--login-surface);
  --color-primary: var(--login-action);
  --color-on-primary: var(--login-on-action);
  --color-primary-fixed: var(--login-selection);
  --color-error: var(--login-error);
  --color-focus: var(--login-focus);
  /* auth.css paints phone inputs from these, ahead of the login roles. */
  --dm-auth-bg: var(--login-canvas);
  --dm-auth-surface: var(--login-surface);
  --dm-auth-ink: var(--login-ink);
  --dm-auth-muted: var(--login-muted);
  --dm-auth-line: var(--login-border);
}
@media (min-width: 901px) {
  html[data-theme="dark"] .page-login .login-layout .login-card {
    box-shadow: 0 20px 55px rgb(0 0 0 / 42%) !important;
  }
  /* The card paints above later siblings, so its shadow would dim this line. */
  html[data-theme="dark"] .page-login .form-footer {
    position: relative;
    z-index: 1;
  }
}
/* The id outranks the desktop input rule and auth.css, which otherwise hide both states. */
html[data-theme="dark"] .page-login #jlabBaseContent #submitBtn {
  background: var(--login-button) !important;
}
html[data-theme="dark"] .page-login #jlabBaseContent #submitBtn:not(:disabled):hover {
  background: var(--login-button-hover) !important;
}
html[data-theme="dark"] .page-login #jlabBaseContent .input {
  background: var(--login-input-surface) !important;
  border-color: var(--login-input-border) !important;
}
/* Google paints this button itself, partly inside a cross-origin iframe, so CSS cannot recolour it directly.
   Each matrix maps Google's fill and #3c4043 label onto the requested fill and #231829 label. */
html[data-theme="dark"] .page-login #googleBtnContainer > div {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix values='1.0769 0 0 0 -0.1161 0 1.1204 0 0 -0.1871 0 0 1.1011 0 -0.1285 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#t");
}
html[data-theme="dark"] .page-login #googleBtnContainer > div:hover {
  filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='t' color-interpolation-filters='sRGB'%3E%3CfeColorMatrix values='1.1056 0 0 0 -0.1229 0 1.0884 0 0 -0.1790 0 0 1.0642 0 -0.1188 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#t");
}
html[data-theme="dark"] .page-login .toast--error {
  border-color: #8c1d18;
  color: #ffdad6;
  background: #8c1d18;
}
html[data-theme="dark"] .page-login #jlabBaseContent .input:focus {
  border-color: var(--login-focus) !important;
  box-shadow: 0 0 0 3px var(--login-focus-ring) !important;
}
html[data-theme="dark"] .page-login #jlabBaseContent .has-error .input {
  border-color: var(--login-error) !important;
}
html[data-theme="dark"] .page-login input:is(:-webkit-autofill, :autofill) {
  -webkit-text-fill-color: var(--login-ink) !important;
  box-shadow: 0 0 0 1000px var(--login-input-surface) inset !important;
  caret-color: var(--login-focus);
}


/* Preserve the original laptop/desktop presentation. */
@media (min-width: 901px) {
/* Login page */

/* Login chỉ giữ lại nút quay về trang chủ, không dùng auth header. */
.login-home-link {
  position: fixed;
  top: var(--space-4);
  right: var(--space-6);
  z-index: var(--z-header, 100);
}

/* Không chừa một dải nền riêng cho header đã được tối giản. */
body.page-login {
  padding-top: 0 !important;
  position: relative;
  isolation: isolate;
  background: var(--login-background) !important;
  animation: none !important;
}

body.page-login::before {
  display: none !important;
}

.login-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
  background: var(--login-background);
  animation: none;
  will-change: background-position;
}

@keyframes login-background-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.page-login .app-main.app-main--auth {
  background: transparent !important;
  animation: none !important;
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding: clamp(4.5rem, 8vh, 6rem) 1.5rem 2.5rem;
}

.page-login .login-layout {
  display: grid;
  width: min(1120px, 100%);
  grid-template-columns: minmax(0, 0.84fr) minmax(420px, 1.16fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  margin: 0 auto;
}

.page-login .login-mascot-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-login .login-mascot-copy {
  margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
}

.page-login .login-mascot-kicker {
  margin: 0 0 0.35rem;
  color: #6c351b !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.page-login .login-mascot-copy h2 {
  margin: 0;
  color: var(--login-ink) !important;
  font-size: clamp(1.8rem, 4vw, 3.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.06 !important;
}

.page-login .login-mascot-copy p:last-child {
  margin: 0.75rem 0 0;
  color: var(--login-muted) !important;
  font-size: 1rem !important;
}

.page-login .fox-mascot {
  display: block;
  width: min(100%, 530px);
  aspect-ratio: 1024 / 631;
}

.page-login .fox-mascot > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-login .fox-mascot .bobbing-fox,
.page-login .fox-mascot .left-paw,
.page-login .fox-mascot .right-paw,
.page-login .fox-mascot .left-ear,
.page-login .fox-mascot .right-ear,
.page-login .fox-mascot .leaf-sway {
  transform-box: view-box;
  will-change: transform;
}

.page-login .fox-mascot .bobbing-fox {
  transform-origin: 425px 580px;
  animation: login-fox-bob 1.2s ease-in-out infinite;
}

.page-login .fox-mascot .left-paw {
  transform-origin: 268px 413px;
  animation: login-fox-left-wave 0.72s ease-in-out infinite;
}

.page-login .fox-mascot .right-paw {
  transform-origin: 582px 413px;
  animation: login-fox-right-wave 1.2s ease-in-out infinite;
}

.page-login .fox-mascot .left-ear {
  transform-origin: 365px 198px;
  animation: login-fox-left-ear 2.8s ease-in-out infinite;
}

.page-login .fox-mascot .right-ear {
  transform-origin: 520px 211px;
  animation: login-fox-right-ear 2.8s ease-in-out infinite;
}

.page-login .fox-mascot .leaf-sway {
  transform-origin: 449px 94px;
  animation: login-fox-leaf 1.8s ease-in-out infinite;
}

@keyframes login-fox-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px) scaleY(1.008); }
}

@keyframes login-fox-left-wave {
  0%, 100% { transform: rotate(20deg); }
  28% { transform: rotate(48deg); }
  55% { transform: rotate(14deg); }
  78% { transform: rotate(43deg); }
}

@keyframes login-fox-right-wave {
  0%, 100% { transform: rotate(10deg); }
  50% { transform: rotate(-14deg); }
}

@keyframes login-fox-left-ear {
  0%, 63%, 100% { transform: rotate(0deg); }
  69% { transform: rotate(-7deg); }
  75% { transform: rotate(4deg); }
  81% { transform: rotate(-3deg); }
  87% { transform: rotate(0deg); }
}

@keyframes login-fox-right-ear {
  0%, 66%, 100% { transform: rotate(0deg); }
  72% { transform: rotate(7deg); }
  78% { transform: rotate(-4deg); }
  84% { transform: rotate(3deg); }
  90% { transform: rotate(0deg); }
}

@keyframes login-fox-leaf {
  0%, 100% { transform: rotate(-4deg); }
  32% { transform: rotate(8deg) skewX(2deg); }
  67% { transform: rotate(-7deg) skewX(-2deg); }
}

.page-login .login-layout > .app-main--auth-inner {
  width: 100%;
  max-width: 560px;
  justify-self: center;
}

.page-login .login-layout .login-card {
  border: 1px solid var(--login-border) !important;
  border-radius: 24px;
  background: var(--login-surface) !important;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.page-login .login-layout .login-card .card__body {
  padding: clamp(2rem, 3vw, 3rem);
}

.page-login .toast--login-progress span:nth-child(2) {
  white-space: pre-line;
}

.page-login .password-rules {
  display: grid;
  gap: 2px;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-on-surface-variant);
  font-size: 0.78rem;
  line-height: 1.4;
}

.page-login .password-rules li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.page-login .password-rules i {
  width: 14px;
  font-size: 0.7rem;
  text-align: center;
  color: var(--color-error);
}

.page-login .password-rules .is-valid i {
  color: var(--color-success);
}

.page-login .caps-lock-warning {
  margin: 4px 0 0;
  color: var(--login-muted);
  font-size: var(--text-xs);
}

.page-login #submitBtn.is-rate-limited {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.page-login .app-main--auth-inner {
  max-width: 440px;
}

.page-login #googleSection {
  margin-top: var(--space-4);
}

.page-login #googleBtnContainer {
  display: flex;
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

/* Google GIS gắn width:400px inline vào wrapper; ép wrapper bám đúng form. */
.page-login #googleBtnContainer > div,
.page-login #googleBtnContainer [role="button"],
.page-login #googleBtnContainer iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.page-login .form-divider {
  color: var(--color-on-surface);
  font-weight: 600;
}

/* Login keeps a neutral border and a blue accessibility ring, never purple. */
.page-login .input:focus,
.page-login .select:focus,
.page-login .textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16) !important;
}

.page-login :focus-visible {
  outline-color: #2563eb;
}

#jlabBaseContent,
    #jlabBaseContent input,
    #jlabBaseContent button,
    #jlabBaseContent select,
    #jlabBaseContent textarea,
    #jlabBaseContent h1,
    #jlabBaseContent h2,
    #jlabBaseContent h3,
    #jlabBaseContent h4,
    #jlabBaseContent h5,
    #jlabBaseContent h6 {
        font-family: -apple-system-body, ui-sans-serif, -apple-system, system-ui,
            "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
            "Segoe UI Emoji", "Segoe UI Symbol" !important;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    #jlabBaseContent input::placeholder {
        color: var(--login-ink) !important;
        opacity: 1;
    }

    #jlabBaseContent .input-wrap__icon {
        color: var(--login-ink) !important;
    }

    #jlabBaseContent .field__link,
    #jlabBaseContent .field__link:hover,
    #jlabBaseContent .form-footer,
    #jlabBaseContent .form-footer a,
    #jlabBaseContent .form-footer a:hover {
        color: var(--login-ink) !important;
    }

    #jlabBaseContent .card__title,
    #jlabBaseContent .btn--primary {
        color: var(--login-ink) !important;
    }

    #jlabBaseContent .card__title {
        font-size: clamp(1.8rem, 4vw, 2.25rem) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #jlabBaseContent .btn--primary .btn__label {
        color: var(--login-on-action) !important;
    }

    #jlabBaseContent .card__title,
    #jlabBaseContent .field__label,
    #jlabBaseContent .field__error,
    #jlabBaseContent .field__link,
    #jlabBaseContent .form-divider,
    #jlabBaseContent .form-footer,
    #jlabBaseContent .form-footer a,
    #jlabBaseContent .login-home-link,
    #jlabBaseContent .input-wrap__action {
        color: var(--login-ink) !important;
    }

  .page-login .login-forgot-mobile,
  .page-login .login-divider-mobile { display: none; }

  body.page-login { color: var(--login-ink); color-scheme: light; }
  html[data-theme="dark"] body.page-login { color-scheme: dark; }
  .page-login #jlabBaseContent .input {
    color: var(--login-ink) !important;
    background: var(--login-surface) !important;
    border-color: var(--login-border) !important;
    caret-color: var(--login-action);
  }
  .page-login #jlabBaseContent input::placeholder,
  .page-login #jlabBaseContent .input-wrap__icon,
  .page-login #jlabBaseContent .input-wrap__action,
  .page-login #jlabBaseContent .form-divider,
  .page-login #jlabBaseContent .form-footer { color: var(--login-muted) !important; opacity: 1; }
  .page-login #jlabBaseContent :is(.field__link, .form-footer a) { color: var(--login-action) !important; }
  .page-login #jlabBaseContent :is(.field__link, .form-footer a):hover { color: var(--login-action-hover) !important; }
  .page-login #jlabBaseContent .field__error { color: var(--login-error) !important; }
  .page-login #jlabBaseContent .has-error .input { border-color: var(--login-error) !important; }
  .page-login #jlabBaseContent #submitBtn {
    color: var(--login-on-action) !important;
    background: var(--login-action) !important;
    border-color: transparent !important;
  }
  .page-login #jlabBaseContent #submitBtn:not(:disabled):hover { background: var(--login-action-hover) !important; }
  .page-login .input:focus {
    border-color: var(--login-focus) !important;
    box-shadow: 0 0 0 3px var(--login-focus-ring) !important;
  }
  .page-login :focus-visible { outline-color: var(--login-focus); }
  .page-login input:is(:-webkit-autofill, :autofill) {
    -webkit-text-fill-color: var(--login-ink) !important;
    box-shadow: 0 0 0 1000px var(--login-surface) inset !important;
    caret-color: var(--login-action);
  }
  .page-login ::selection { color: var(--login-ink); background: var(--login-selection); }
}

/* Phone layout changes are isolated from desktop. */
@media (max-width: 900px) {
/* Login owns its layout and form scale; the shared shell is not mounted here. */
body.page-login {
  --login-ink: #19212f;
  --login-muted: #526071;
  --login-surface: #ffffff;
  --login-border: #c8d2df;
  --login-action: #4f378a;
  --login-action-hover: #60459d;
  --login-on-action: #ffffff;
  --login-focus: #2563eb;
  --login-focus-ring: rgb(37 99 235 / 18%);
  --login-error: #b42332;
  --login-selection: #e9ddff;
  padding-top: 0 !important;
  position: relative;
  isolation: isolate;
  color: var(--login-ink);
  background: #eef5ff !important;
  animation: none !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.page-login::before {
  display: none !important;
}

.login-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #f8fbff, #eef5ff 55%, #e2edfb);
}

.page-login .app-main.app-main--auth {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  min-height: 100dvh;
  padding: 24px max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: transparent !important;
}

.page-login .login-layout {
  display: grid;
  width: min(1040px, 100%);
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  margin-block: auto;
}

.page-login .login-mascot-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-login .login-mascot-copy h2 {
  margin: 0;
  color: var(--login-ink);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page-login .login-mascot-copy p {
  margin: 16px 0 8px;
  color: var(--login-muted);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: balance;
}

.page-login .fox-mascot {
  width: min(100%, 470px);
  aspect-ratio: 1024 / 631;
}

.page-login .fox-mascot > svg {
  width: 100%;
  height: 100%;
}

.page-login .fox-mascot .bobbing-fox {
  transform-box: view-box;
  transform-origin: 425px 580px;
  animation: login-fox-bob 3s ease-in-out infinite;
}

.page-login .fox-mascot .left-paw {
  transform-box: view-box;
  transform-origin: 268px 413px;
  animation: login-fox-wave 3s ease-in-out infinite;
}

@keyframes login-fox-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes login-fox-wave {
  0%, 60%, 100% { transform: rotate(20deg); }
  70%, 90% { transform: rotate(42deg); }
  80% { transform: rotate(16deg); }
}

.page-login .login-layout > .app-main--auth-inner {
  width: 100%;
  min-width: 0;
  max-width: 460px;
  justify-self: center;
}

.page-login .login-layout .login-card {
  overflow: visible;
  border: 1px solid var(--login-border) !important;
  border-radius: 16px;
  color: var(--login-ink);
  background: var(--login-surface) !important;
  box-shadow: none !important;
  transform: none;
  backdrop-filter: none;
}

.page-login .login-layout .login-card .card__body {
  padding: 36px;
}

.page-login .login-card .card__header {
  margin-bottom: 28px;
  text-align: left;
}

/* Outrank the optional ownership stylesheet's mobile heading rule. */
.page-login #jlabBaseContent .login-card .card__title {
  margin: 0;
  color: var(--login-ink) !important;
  font-size: 32px !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -0.025em;
}

.page-login .login-card .card__subtitle {
  margin: 10px 0 0;
  color: var(--login-muted);
  font-size: 15px;
  line-height: 1.6;
}

.page-login #loginForm {
  gap: 20px;
}

.page-login :is(.field, .input-wrap, #googleSection) {
  min-width: 0;
  max-width: 100%;
}

.page-login .field {
  gap: 8px;
}

.page-login .field__label {
  color: var(--login-ink) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.page-login .input {
  min-width: 0;
  width: 100%;
  min-height: 52px;
  padding-block: 12px;
  border-color: var(--login-border) !important;
  border-radius: 10px !important;
  color: var(--login-ink) !important;
  background: var(--login-surface) !important;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  caret-color: var(--login-action);
}

.page-login .input::placeholder {
  color: var(--login-muted) !important;
  opacity: 1;
}

.page-login .input-wrap__icon {
  left: 16px;
  color: var(--login-muted);
  font-size: 16px;
}

.page-login .input--with-icon {
  padding-left: 44px;
}

.page-login .input--with-action {
  padding-right: 48px;
}

.page-login .input-wrap__action {
  right: 4px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 8px;
  color: var(--login-muted);
  font-size: 18px;
  touch-action: manipulation;
}

.page-login .input-wrap__action:hover {
  color: var(--login-action);
  background: var(--login-selection);
}

.page-login .field__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  color: var(--login-action);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.page-login :is(.field__link, .form-footer a, .login-home-link):hover {
  color: var(--login-action-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-login #submitBtn {
  min-height: 52px;
  margin-top: -4px;
  padding: 12px 16px;
  border-color: transparent !important;
  border-radius: 10px !important;
  color: var(--login-on-action) !important;
  background: var(--login-action) !important;
  box-shadow: none !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: normal;
  touch-action: manipulation;
}

.page-login #submitBtn:not(:disabled):hover {
  background: var(--login-action-hover) !important;
  transform: none;
}

.page-login #submitBtn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.page-login #submitBtn.is-loading {
  cursor: progress;
}

.page-login .field__error {
  color: var(--login-error);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.page-login .has-error .input {
  border-color: var(--login-error) !important;
}

.page-login .caps-lock-warning {
  color: var(--login-muted);
  font-size: 13px;
  line-height: 1.5;
}

.page-login #googleSection {
  margin-top: 24px;
}

.page-login .form-divider {
  gap: 12px;
  margin-block: 0 16px;
  color: var(--login-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.page-login .form-divider::before,
.page-login .form-divider::after {
  background: var(--login-border);
}

.page-login #googleBtnContainer {
  display: flex;
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

/* GIS injects fixed inline widths. Constrain its outer wrapper to the form. */
.page-login #googleBtnContainer > div,
.page-login #googleBtnContainer [role="button"],
.page-login #googleBtnContainer iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.page-login .form-footer {
  margin: 20px 0 0;
  color: var(--login-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: balance;
}

.page-login .form-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--login-action);
  font-weight: 600;
}

.page-login .input:focus {
  border-color: var(--login-focus) !important;
  box-shadow: 0 0 0 3px var(--login-focus-ring) !important;
}

.page-login :focus-visible {
  outline: 2px solid var(--login-focus);
  outline-offset: 3px;
}

.page-login ::selection {
  color: var(--login-ink);
  background: var(--login-selection);
}

.page-login .toast--login-progress span:nth-child(2) {
  white-space: pre-line;
}

@media (max-width: 900px) {
  .page-login .login-background {
    background: var(--login-surface);
  }

  .page-login .app-main.app-main--auth {
    gap: 20px;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  .page-login .login-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 0;
  }

  .page-login .login-mascot-panel {
    display: none;
  }

  .page-login .login-layout .login-card .card__body {
    padding: 0;
  }

  .page-login .login-layout .login-card {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
  }

  .page-login .login-card .card__header {
    margin-bottom: 32px;
    text-align: center;
  }

  .page-login #jlabBaseContent .login-card .card__title {
    font-size: 22px !important;
  }

  .page-login .login-card .card__subtitle {
    display: none;
  }

  .page-login #loginForm {
    gap: 16px;
  }

  .page-login .field__label {
    font-weight: 500;
  }

  .page-login .input {
    min-height: 48px;
    padding-block: 11px;
    border-radius: 8px !important;
  }

  .page-login .input-wrap__icon {
    display: none;
  }

  .page-login .input--with-icon {
    padding-left: 16px;
  }

  .page-login #submitBtn {
    min-height: 48px;
    margin-top: 0;
    padding-block: 11px;
    border-radius: 8px !important;
  }

  .page-login .field__link {
    font-weight: 500;
  }

  .page-login #googleSection {
    margin-top: 20px;
  }

  .page-login .form-divider {
    font-size: 14px;
  }

  .page-login .form-footer {
    margin-top: 28px;
  }
}

/* Allow browser zoom to reflow the form even below typical phone widths. */
@media (max-width: 280px) {
  .page-login .app-main.app-main--auth {
    gap: 16px;
    padding-inline: 8px;
  }

  .page-login .login-layout .login-card .card__body {
    padding: 0;
  }

  .page-login #jlabBaseContent .login-card .card__title {
    font-size: 20px !important;
  }

  .page-login .form-footer a {
    display: flex;
    justify-content: center;
  }
}

html[data-theme="dark"] body.page-login {
  background: var(--login-canvas) !important;
}

html[data-theme="dark"] .page-login .login-background {
  background: var(--login-canvas);
}


  .page-login .login-forgot-desktop,
  .page-login .login-divider-desktop { display: none; }
}