/* Authentication uses natural page flow so small screens and keyboards can scroll. */
html:has(body.auth-page) {
  height: auto;
  min-height: 100%;
  overflow: auto;
  --app-zoom: 1;
  background: #f3f6f2;
}

body.panda-polished.auth-page {
  display: grid;
  place-items: center;
  min-height: 100svh;
  height: auto;
  overflow: visible;
  padding: 32px 20px;
  background: radial-gradient(ellipse at 50% 0%, #e5efe5, transparent 65%), #f3f6f2;
  color: #26382e;
}

.auth-page.panda-polished .page {
  width: 100%;
  max-width: 420px;
  height: auto;
  min-height: 0;
  padding: 32px;
  margin: 0 auto;
  border: 1px solid #dfe7dd;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 48px rgba(33, 59, 42, .06);
  overflow: visible;
  zoom: 1;
}

.auth-page .page::before,
.auth-page .page::after,
.auth-page .statusbar,
.auth-page .curtain::before,
.auth-page .curtain::after { display: none; }

.auth-page.panda-polished .screen {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
  container-type: normal;
  zoom: 1;
}

.auth-page .curtain {
  display: block;
  min-height: 0;
  padding: 0 0 28px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #26382e;
  animation: none;
  opacity: 1;
  transform: none;
}

.auth-page .lock {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 0;
  color: #26382e;
}
.auth-page .brand-mark { width: 32px; height: 32px; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .auth-page .brand-mark .eye {
    transform-box: fill-box;
    transform-origin: center;
    animation: auth-panda-blink 4.8s ease-in-out -3.6s infinite;
  }
}
@keyframes auth-panda-blink {
  0%, 90%, 96%, 100% { transform: scaleY(1); }
  93% { transform: scaleY(.04); }
}
.auth-page .brand { font-size: 24px; line-height: 1; letter-spacing: -.6px; color: inherit; }
.auth-page .form { display: grid; gap: 20px; padding: 0; animation: none; opacity: 1; transform: none; }
body.auth-page .lock,
body.auth-page .form > * { animation: none; opacity: 1; transform: none; }
.auth-page .form-head { display: block; padding: 0; }
.auth-page .form-head h1 { margin: 0; font: 700 30px/1.15 'Bricolage Grotesque', sans-serif; letter-spacing: -.8px; }
.auth-page .auth-subtitle { margin: -10px 0 2px; font-size: 14px; line-height: 1.5; color: #66746b; }
.auth-page .fields { display: grid; gap: 16px; }
.auth-page .fld { gap: 7px; }
.auth-page .fld > label,
.auth-page .fld .lab label { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.auth-page .lab { align-items: center; }
.auth-page .ctrl {
  min-height: 52px;
  border: 1px solid #d8e1d6;
  border-radius: 10px;
  background: #fbfcfa;
  box-shadow: none;
  overflow: hidden;
}
.auth-page .ctrl:focus-within { border-color: #356b4d; box-shadow: 0 0 0 3px rgba(53, 107, 77, .12); }
.auth-page .ctrl input { height: 50px; padding: 0 14px; font-size: 16px; font-weight: 500; line-height: normal; color: #26382e; }
.auth-page .ctrl input:focus-visible { outline: none; }
.auth-page .ctrl input::placeholder { color: #66746b; font-weight: 400; }
.auth-page .slot { padding-right: 3px; }
.auth-page .eye-btn { width: 44px; height: 44px; border-radius: 7px; color: #657369; }
.auth-page .eye-btn:hover { background: #edf2eb; }
.auth-page .note { font-size: 12px; line-height: 1.4; min-height: 0; color: #66746b; }
.auth-page #si .fld:not(.bad) .note:empty,
.auth-page #si .fld:not(.bad) .note { display: none; }
.auth-page #si .fld:has(.note[data-help]) .note { display: block; }
.auth-page .fld.bad .ctrl { border-color: #b4483c; }
.auth-page .fld.bad .note { color: #a93433; }
.auth-page .fld.ok .ctrl { border-color: #d8e1d6; background: #fbfcfa; }
.auth-page .fld.ok .ctrl:focus-within { border-color: #356b4d; }
.auth-page .fld.ok .note { color: #66746b; }
.auth-page .meter { width: 42px; gap: 3px; }
.auth-page .mini { font-size: 12px; color: #456c51; }
.auth-page #notyou { display: none; }
.auth-page a { color: #275e3f; }
.auth-page a:hover { text-decoration: underline; }
.auth-page :is(a, button, summary):focus-visible { outline: 3px solid #356b4d; outline-offset: 3px; }

.auth-page .auth-optional { margin: -4px 0; font-size: 13px; color: #66746b; }
.auth-page .auth-optional summary { width: fit-content; min-height: 44px; padding: 10px 0; cursor: pointer; }
.auth-page .auth-optional[open] summary { margin-bottom: 4px; }
.auth-page .auth-optional .fld { margin-bottom: 8px; }
.auth-page .dial { background: #f0f4ed; border-color: #d8e1d6; font-size: 14px; }

.auth-page #go {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  background: #275e3f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
  transform: none;
}
.auth-page #go:hover { background: #204e34; }
.auth-page #go:active { background: #19402a; transform: translateY(1px); }
.auth-page #go[aria-disabled="true"] { background: #e4ece2; color: #697b6c; box-shadow: none; }
.auth-page #go .go { display: none; }

.auth-page .devcheck {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  margin: -6px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #66746b;
}
.auth-page .devcheck .fp { width: 17px; height: 17px; flex: 0 0 17px; color: #788a7b; }
.auth-page .dc-copy { min-width: 0; }
.auth-page .dc-copy b { font-size: 12px; font-weight: 400; line-height: 1.4; color: #66746b; }
.auth-page .dc-copy > span { font-size: 12px; line-height: 1.4; color: #66746b; }
.auth-page .devcheck.is-ok .dc-copy > span { display: none; }
.auth-page .dc-state { margin-left: auto; width: 17px; height: 17px; }
.auth-page .dc-state .tickmark { width: 17px; height: 17px; color: #56795e; }
.auth-page .registration-reward-note {
  padding: 14px 0 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #e8ede5;
  border-radius: 0;
  background: none;
  font-size: 12px;
  line-height: 1.6;
  color: #66746b;
}
.auth-page .registration-reward-note strong { display: inline; font-weight: 600; color: #47634d; }
.auth-page .foot { gap: 14px; padding: 0; }
.auth-page .alt { font-size: 14px; line-height: 1.5; color: #66746b; }
.auth-page .alt a { font-weight: 600; }
.auth-page .legal { font-size: 12px; line-height: 1.6; color: #66746b; }

@media (max-width: 480px) {
  body.panda-polished.auth-page { padding: 24px 16px; }
  .auth-page.panda-polished .page { padding: 28px 24px; border-radius: 16px; }
}
@media (max-width: 350px) {
  body.panda-polished.auth-page { padding: 16px 12px; }
  .auth-page.panda-polished .page { padding: 24px 20px; }
  .auth-page .form-head h1 { font-size: 28px; }
}
@media (max-height: 640px) {
  body.panda-polished.auth-page { align-items: start; }
}