html[data-auth-required]:not([data-auth-state="ready"]) body { visibility: hidden; }
.auth-guard-status { visibility: visible; width: min(460px, calc(100% - 32px)); margin: 18vh auto; padding: 32px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.auth-guard-status h1 { font-size: 21px; }
.auth-guard-status p { color: var(--muted); line-height: 1.8; }
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; background: #f0f2f7; }
.auth-page .auth-shell { width: min(438px, calc(100% - 32px)); margin: 40px auto; }
.auth-page .auth-card { padding: 34px 36px 30px; border: 1px solid #ffffffba; border-radius: 22px; box-shadow: 0 16px 54px #20375e0b; }
.auth-heading { text-align: center; }
.auth-page .auth-logo { display: inline-flex; justify-content: center; margin: 0 auto 16px; border-radius: 18px; }
.auth-logo img { width: 68px; height: 68px; object-fit: contain; }
.auth-page .auth-card h1 { margin: 0 0 8px; font-size: 23px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.auth-subtitle { margin: 0; color: #8993a6; font-size: 13px; line-height: 1.6; }
.auth-page .form-notice { margin: 15px 0; min-height: 20px; font-size: 12px; line-height: 1.65; }
.auth-page .form-notice:empty { min-height: 8px; margin: 12px 0; }
.auth-page .form-notice[data-state="error"] { color: #b34042; }
.auth-page .form-notice[data-state="success"] { color: #20845e; }
.auth-page .account-form { gap: 18px; }
.auth-page .account-form > label { gap: 8px; color: #788298; font-size: 12px; font-weight: 600; }
.auth-input { position: relative; display: block; }
.auth-input > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #a3adc0; width: 17px; height: 17px; pointer-events: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.auth-page .auth-input input { height: 48px; padding: 12px 14px 12px 42px; background: #f7f9fc; border-color: #e0e6ef; border-radius: 10px; font-size: 13px; font-weight: 400; }
.auth-input input::placeholder { color: #a4adbe; }
.auth-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-page .auth-options .remember-option { display: inline-flex; align-items: center; gap: 7px; color: #7d879a; font-size: 12px; font-weight: 500; cursor: pointer; }
.auth-page .remember-option input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--blue); }
.auth-options > a { color: #8a94a8; font-size: 12px; }
.auth-options > a:hover { color: var(--blue); }
.auth-page .account-form > .button { min-height: 47px; margin-top: 2px; border-radius: 10px; font-size: 15px; }
.auth-page .auth-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px; color: #959eb0; }
.auth-page .auth-switch .text-link { color: var(--blue); font-size: 12px; font-weight: 600; }
.auth-page .auth-footnote { margin: 18px 0 0; text-align: center; color: #9aa3b3; font-size: 11px; line-height: 1.7; }
.auth-page .auth-footer { justify-content: center; gap: 12px; margin-top: 20px; color: #9aa3b3; font-size: 11px; }
.auth-page .auth-help { margin-top: 15px; color: #7d879a; font-size: 12px; line-height: 1.75; }
.auth-help a { color: var(--blue); overflow-wrap: anywhere; }
.auth-success { text-align: center; }
.auth-success .button { min-height: 45px; width: 100%; margin: 10px 0 0; }
@media (max-width: 540px) {
  .auth-page .auth-shell { width: calc(100% - 24px); margin: 24px auto; }
  .auth-page .auth-card { padding: 32px 28px 28px; border-radius: 20px; }
  .auth-page .auth-card h1 { font-size: 22px; }
  .auth-logo img { width: 64px; height: 64px; }
  .auth-page .auth-footer { margin-top: 18px; }
}
@media (max-width: 360px) {
  .auth-page .auth-card { padding: 28px 22px 24px; }
  .auth-options { gap: 8px; }
}