/* Shared look for every login / account page: sign in, request access, set up account, change password, confirmations.
   Same design language as ChemSpace / PDB Retriever: Manrope, cage blue #003372 actions, teal #0e9ab8 focus, 30px controls, 8px radius. */
.au-page, .au-page * { box-sizing: border-box; }
.au-page { margin: 0; min-height: 100vh; font-family: 'Manrope', 'Segoe UI', Arial, sans-serif; color: #1e293b; background: #f4f7fb; -webkit-font-smoothing: antialiased; }
.au-page.au-standalone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px 24px; background-image: radial-gradient(ellipse 70% 50% at 70% -5%, rgba(14,154,184,.09), transparent 70%), radial-gradient(ellipse 50% 40% at 5% 95%, rgba(0,51,114,.06), transparent 60%); }
.au-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.au-shell { zoom: 1.25; width: 100%; max-width: 280px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.au-page.au-in-app { min-height: 0; padding: 36px 16px 64px; background: transparent; }
.au-brand { display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; color: #003372; }
.au-brand img { height: 30px; width: auto; display: block; }
.au-brand span { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }

.au-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px 22px; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.05); }
.au-card h1 { text-align: left; margin: 0 0 4px; font: 700 16px/1.3 'Manrope', sans-serif; color: #0f172a; letter-spacing: -.01em; }
.au-sub { margin: 0 0 16px; font-size: 12px; line-height: 1.5; color: #64748b; font-weight: 500; }

/* field: grey label cell + input, as .pr-field in PDB Retriever */
.au-field { position: relative; display: flex; align-items: center; height: 30px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; overflow: hidden; margin: 0 0 8px; transition: border-color .12s, box-shadow .12s; }
.au-field:focus-within { border-color: #0e9ab8; box-shadow: 0 0 0 3px rgba(14,154,184,.18); }
.au-field.is-invalid { border-color: #dc2626; }
.au-field.is-invalid:focus-within { box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.au-field.is-disabled { background: #f8fafc; }
.au-field > label { flex: none; width: 88px; height: 100%; display: flex; align-items: center; padding: 0 9px; margin: 0; font-size: 11px; font-weight: 700; color: #64748b; background: #f8fafc; border-right: 1px solid #e2e8f0; white-space: nowrap; line-height: 1; }
.au-field .au-req { color: #dc2626; margin-left: 2px; }
.au-field input { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; padding: 0 10px; font: 500 12.5px 'Manrope', sans-serif; color: #1e293b; box-shadow: none; outline: none; }
.au-field input::placeholder { color: #94a3b8; }
.au-field input:disabled { color: #94a3b8; cursor: not-allowed; background: transparent; }
.au-field input::-ms-reveal { display: none; }
.au-form { margin: 0; }
.au-eye { min-width: 0; flex: none; width: 30px; height: 100%; border: 0; background: transparent; color: #94a3b8; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border-radius: 0; }
.au-eye:hover { color: #003372; background: #f8fafc; }
.au-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au-eye .au-eye-off { display: none; }
.au-eye[aria-pressed="true"] .au-eye-on { display: none; }
.au-eye[aria-pressed="true"] .au-eye-off { display: block; }
.au-fielderr { margin: -4px 0 8px; font-size: 11.5px; font-weight: 600; color: #b91c1c; line-height: 1.4; }
.au-hint { margin: -3px 0 8px; font-size: 11px; color: #94a3b8; line-height: 1.4; }

/* error box (above the button) */
.au-error { display: none; margin: 4px 0 10px; padding: 8px 10px; background: #fee2e2; color: #991b1b; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.45; }
.au-error.show, .au-error.server { display: block; }
.au-error ul { margin: 0; padding-left: 16px; }

/* rules checklist (set / change password) */
.au-rules { list-style: none; margin: 2px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.au-rules li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: #64748b; line-height: 1.3; }
.au-rules li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #cbd5e1; background: #fff center / 9px no-repeat; }
.au-rules li.ok { color: #166534; }
.au-rules li.ok::before { border-color: #16a34a; background-color: #16a34a; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.8l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.au-rules li.bad { color: #991b1b; }
.au-rules li.bad::before { border-color: #dc2626; }
.au-rules li.note { color: #94a3b8; font-size: 11px; }
.au-rules li.note::before { border-style: dashed; }

/* buttons */
.au-btn { min-width: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 30px; margin: 0; padding: 0 12px; border: 1px solid #003372; border-radius: 8px; background: #003372; color: #fff; font: 600 12px 'Manrope', sans-serif; cursor: pointer; text-decoration: none; transition: background .12s; }
.au-btn:hover { background: #0a4a9c; border-color: #0a4a9c; color: #fff; text-decoration: none; }
.au-btn:disabled, .au-btn.is-loading { opacity: .7; cursor: default; }
.au-btn.is-loading::before { content: ""; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: au-spin .7s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
/* keyboard focus is always visible, even on pages that load no_focus_ring.css (its rules are !important too, ours are more specific) */
.au-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(14,154,184,.45) !important; }
.au-eye:focus-visible { outline: none !important; box-shadow: inset 0 0 0 2px #0e9ab8 !important; }
.au-link:focus-visible { outline: 2px solid #0e9ab8 !important; outline-offset: 2px; border-radius: 4px; }
.au-foot { text-align: center; font-size: 12px; font-weight: 500; color: #94a3b8; }
.au-link { color: #003372; font-weight: 600; text-decoration: none; }
.au-link:hover { text-decoration: underline; color: #003372; }

/* confirmation / problem cards */
.au-card.au-ok { text-align: center; background: #f0fdf4; border-color: #bbf7d0; }
.au-ok-ico { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #16a34a; display: flex; align-items: center; justify-content: center; }
.au-ok-ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.au-ok h1 { color: #14532d; }
.au-ok .au-sub { color: #166534; margin-bottom: 16px; }
.au-card.au-bad { text-align: center; background: #fef2f2; border-color: #fecaca; }
.au-bad .au-ok-ico { background: #dc2626; }
.au-bad h1 { color: #7f1d1d; }
.au-bad .au-sub { color: #991b1b; margin-bottom: 0; }

@media (max-width: 420px) {
  .au-shell { zoom: 1; }
  .au-card { padding: 20px 16px; }
  .au-field > label { width: 92px; padding: 0 7px; }
  .au-page.au-in-app { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .au-btn.is-loading::before { animation: none; } }
.au-ok h1, .au-bad h1 { text-align: center; }