.auth-page { min-height: 100vh; margin: 0; color: #102f4b; background: radial-gradient(circle at 12% 12%, rgba(242,178,52,.20), transparent 24rem), radial-gradient(circle at 88% 92%, rgba(8,70,111,.20), transparent 30rem), #f4f7f9; }
.auth-shell { width: min(100% - 32px, 520px); min-height: 100vh; margin: auto; display: grid; align-content: center; gap: 26px; padding: 38px 0; }
.auth-brand { display: inline-flex; width: max-content; gap: 10px; align-items: center; color: #092b48; text-decoration: none; direction: ltr; }
.auth-brand strong { font: 800 16px/1 Manrope, sans-serif; letter-spacing: -.6px; }
.auth-brand strong span { color: #f2ad2f; }.auth-brand small { display: block; margin-top: 3px; font: 500 8px/1.1 Manrope, sans-serif; letter-spacing: .5px; color: #607485; }
.auth-card { padding: clamp(26px, 6vw, 42px); border: 1px solid rgba(14,66,101,.12); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 20px 55px rgba(13,46,70,.12); }
.auth-eyebrow { margin: 0 0 12px; color: #a56b08; font-size: 13px; font-weight: 700; }.auth-card h1 { margin: 0; color: #082d4b; font-size: clamp(25px, 5vw, 34px); line-height: 1.35; }.auth-intro { margin: 11px 0 26px; color: #587083; line-height: 1.9; }
.auth-card form { display: grid; gap: 11px; }.auth-card label { color: #183c58; font-size: 14px; font-weight: 700; }.auth-card input { min-height: 50px; box-sizing: border-box; width: 100%; padding: 0 15px; color: #092e4e; border: 1px solid #c7d4df; border-radius: 11px; background: #fff; font: 600 16px/1.2 "IBM Plex Sans Arabic", sans-serif; outline: none; }.auth-card input:focus { border-color: #0b5a87; box-shadow: 0 0 0 4px rgba(11,90,135,.12); }.auth-card .button { justify-content: center; width: 100%; margin-top: 6px; cursor: pointer; }.auth-card .button:disabled { cursor: wait; opacity: .65; }
.auth-code-heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }.auth-code-heading p { margin: 0; color: #526b7e; line-height: 1.8; }.auth-code-heading strong { color: #092f4e; direction: ltr; unicode-bidi: plaintext; }.text-button { width: max-content; padding: 0; color: #0a5d8b; border: 0; background: none; font: 700 13px/1.5 "IBM Plex Sans Arabic", sans-serif; cursor: pointer; text-decoration: underline; }.auth-status { min-height: 1.6em; margin: 18px 0 0; color: #0b5b44; line-height: 1.7; font-weight: 600; }.auth-status.is-error { color: #af3427; }.auth-note { margin: 19px 0 0; color: #718495; font-size: 12px; line-height: 1.8; }.auth-footer { margin: 0; color: #6b8192; font-size: 12px; text-align: center; }.auth-footer a { color: inherit; }
@media (max-width: 520px) { .auth-shell { width: min(100% - 22px, 520px); padding: 20px 0; }.auth-card { border-radius: 18px; } }