/* Presentation only: desktop composition and mobile form use distinct layouts. */
body.nova-admin.login {
  display: flow-root; min-height: 100vh; margin: 0; padding: 0;
  background: radial-gradient(ellipse at 23% 52%, color-mix(in srgb, var(--button-bg) 11%, transparent), transparent 48%), radial-gradient(ellipse at 92% 0, color-mix(in srgb, var(--button-bg) 4%, transparent), transparent 40%), var(--body-bg);
}
body.nova-admin.login #container {
  position: relative; isolation: isolate; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  column-gap: clamp(60px, 8vw, 128px); align-items: center;
  width: min(1120px, calc(100% - 96px)); min-width: 0; max-width: none;
  min-height: max(580px, calc(100vh - 124px)); margin: 16px auto 32px;
  border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none;
}
body.nova-admin.login #header { position: absolute; top: 24px; left: 0; width: 100%; padding: 0; min-height: 0; justify-content: flex-start; background: transparent; border: 0; }
/* Give the absolute header a definite width before sizing its flex children.
   Otherwise the logo's percentage cap participates in shrink-to-fit sizing and
   wraps even a short title. Long brands still shrink and wrap within the page. */
body.nova-admin.login #branding { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
body.nova-admin.login #site-name.nova-custom-brand { min-width: 0; max-width: 100%; margin-inline: 0; }
body.nova-admin.login #site-name.nova-custom-brand a { width: max-content; max-width: 100%; }
body.nova-admin.login #site-name.nova-custom-brand span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
body.nova-admin.login #header h1 { font-size: 19px; line-height: 1.4; margin: 0; }
body.nova-admin.login #container > :is(#content, #main) { grid-column: 2; width: 100%; min-width: 0; margin: 80px 0 30px; }
body.nova-admin.login #main > .content { width: 100%; min-width: 0; }
body.nova-admin.login #content { padding: 0; width: auto; }
body.nova-admin.login #content > .titles-and-tools { margin: 0; }
body.nova-admin.login #content > br.clear, body.nova-admin.login #footer:empty { display: none; }
.nova-login-layout { display: block; }
.nova-login-panel { display: flow-root; min-width: 0; padding: 0; }
.nova-login-art { position: absolute; z-index: -1; pointer-events: none; left: 3%; top: 50%; width: clamp(320px, 36vw, 480px); aspect-ratio: 1; display: grid; place-items: center; transform: translateY(-44%); }
.nova-login-art::before { content: ''; position: absolute; inset: 16%; border-radius: 28%; transform: rotate(-15deg); border: 1px solid color-mix(in srgb, var(--button-bg) 18%, var(--body-bg)); background: linear-gradient(140deg, color-mix(in srgb, var(--button-bg) 13%, var(--nova-panel)), color-mix(in srgb, var(--nova-panel) 75%, transparent)); box-shadow: inset 1px 1px 1px #ffffff66, 0 28px 70px color-mix(in srgb, var(--button-bg) 12%, transparent); }
.nova-login-art::after { content: ''; position: absolute; width: 12px; height: 12px; left: 7%; top: 66%; border-radius: 50%; background: var(--button-bg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--button-bg) 7%, transparent); }
.nova-login-art i { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--button-bg) 22%, transparent); border-radius: 50%; transform: rotate(-25deg) scaleY(.66); }
.nova-login-art i + i { inset: -2%; transform: rotate(45deg) scaleY(.78); border-color: color-mix(in srgb, var(--button-bg) 12%, transparent); }
.nova-login-glyph { position: relative; color: var(--link-fg); font-size: clamp(96px, 12vw, 148px); font-weight: 650; line-height: 1; transform: rotate(-15deg); opacity: .85; }
.nova-login-visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
body.nova-admin.login .form-row { padding: 0; margin: 0 0 20px; }
body.nova-admin.login .form-row label { display: block; padding: 0; margin: 0 0 7px; font-size: 14px; line-height: 1.6; color: var(--body-fg); }
body.nova-admin.login .form-row :is(input[type=text], input[type=password], input[type=email], input[type=number]) { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: var(--nova-login-radius, 9px); background: var(--darkened-bg); color: var(--body-fg); font: inherit; font-size: 16px; box-sizing: border-box; }
body.nova-admin.login :is(input, button, a, summary, select):focus-visible { outline: 2px solid var(--link-fg); outline-offset: 3px; }
body.nova-admin.login .form-row input[aria-invalid=true] { border-color: var(--error-fg); }
body.nova-admin.login .submit-row { display: flex; padding: 3px 0 0; border: 0; margin: 0; background: transparent; box-shadow: none; }
body.nova-admin.login .submit-row :is(input, button) { width: 100%; min-height: 48px; padding: 12px; margin: 0; border-radius: var(--nova-login-radius, 9px); background: var(--button-bg); color: var(--button-fg); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
body.nova-admin.login .submit-row :is(input, button):hover { background: var(--button-hover-bg); }
body.nova-admin.login .submit-row :is(input, button):disabled { opacity: .65; cursor: wait; }
body.nova-admin.login .errornote { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--nova-login-radius, 9px); line-height: 1.65; font-size: 14px; }
body.nova-admin.login .errorlist { margin: 0 0 6px; padding: 0; list-style: none; color: var(--error-fg); }
body.nova-admin.login .help { color: var(--body-quiet-color); font-size: 13px; line-height: 1.7; }
body.nova-admin.login .password-reset-link { margin: -3px 0 12px; font-size: 14px; }
body.nova-admin.login:lang(zh-hans) h1 { letter-spacing: normal; }
@media (max-width: 900px) {
  body.nova-admin.login { background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--button-bg) 8%, transparent), transparent 58%), var(--body-bg); }
  body.nova-admin.login #container { display: block; width: min(480px, calc(100% - 48px)); min-height: 0; margin: 40px auto 48px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.nova-admin.login #header { position: static; padding: 0; margin: 0 0 36px; }
  body.nova-admin.login #container > :is(#content, #main) { width: 100%; margin: 0; }
  .nova-login-panel { padding: 0; }
  .nova-login-art { display: none; }
}
@media (max-width: 360px) {
  body.nova-admin.login #container { width: calc(100% - 40px); }
}
@media (forced-colors: active) {
  .nova-login-art { display: none; }
}

/* A configured image occupies the decorative desktop area only. The form
   keeps a readable surface; the established borderless mobile layout stays. */
body.nova-admin.login .nova-login-art--image::before,
body.nova-admin.login .nova-login-art--image::after { content: none; }
body.nova-admin.login .nova-login-background { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--nova-radius); }
body.nova-admin.login #footer:has(.nova-brand-footer) { grid-column: 1 / -1; width: 100%; align-self: end; }
body.nova-admin.login .nova-brand-footer { padding: 16px 0 0; }