.login-page { margin:0; min-height:100vh; color:#182d48; background:radial-gradient(ellipse at 10% 30%,#eaf0fa 0,transparent 55%),#f7f9fc; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
.login-header { max-width:1160px; margin:auto; padding:32px 32px 20px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.login-brand { display:flex; align-items:center; gap:13px; color:#1c3554; text-decoration:none; min-width:0; }
.login-brand:hover { color:#1c3554; }
.login-brand-mark { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; border-radius:14px; color:#2361b3; background:#e6eefb; }
.login-brand-mark svg { width:32px; height:32px; }
.login-brand strong { display:block; font-size:1rem; font-weight:650; letter-spacing:-.025em; line-height:1.4; }
.login-brand-caption { display:block; color:#63748a; font-size:.76rem; margin-top:2px; }
.login-header-note { color:#63748a; font-size:.8rem; white-space:nowrap; }
.login-main { max-width:1100px; margin:auto; padding:30px 32px 20px; }
.login-card { display:grid; grid-template-columns:.92fr 1.08fr; min-height:590px; overflow:hidden; border:1px solid #e1e7f0; border-radius:26px; background:#fff; box-shadow:0 20px 65px -28px #233e6238,0 2px 6px #233e6205; }
.login-welcome { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:50px; padding:52px 42px 40px; color:#fff; background:linear-gradient(145deg,#173b65,#14304f 65%,#1c4668); }
.login-pattern { position:absolute; inset:0; width:100%; height:100%; z-index:-1; color:#b6d0e7; opacity:.07; mask-image:linear-gradient(130deg,transparent 10%,#000); }
.login-eyebrow { display:block; color:#b9cee4; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:22px; }
.login-welcome h2 { margin:0 0 20px; font-size:2.25rem; line-height:1.22; font-weight:550; letter-spacing:-.045em; }
.login-welcome-intro > p { color:#c2d3e4; font-size:.91rem; line-height:1.85; margin:0; }
.login-dua { margin:0; padding-top:24px; border-top:1px solid #ffffff26; }
.login-dua-ornament { color:#d4c495; font-size:1.7rem; line-height:1; margin-bottom:18px; }
.login-dua blockquote { margin:0; }
.login-dua-arabic { text-align:left; font-family:"Noto Naskh Arabic","Traditional Arabic","Amiri",serif; font-size:2.1rem; line-height:1.9; margin:0 0 9px; color:#f2e8ce; }
.login-dua-translation { color:#e0e9f2; font-size:.85rem; line-height:1.65; margin:0 0 10px; }
.login-dua figcaption a { color:#b5cce3; font-size:.72rem; text-underline-offset:4px; text-decoration-color:#b5cce350; }
.login-form-panel { padding:51px 55px 35px; display:flex; align-items:center; }
.login-form-content { width:100%; max-width:380px; margin:auto; }
.login-form-eyebrow { display:block; color:#416db0; font-size:.69rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.login-form-panel h1 { font-size:1.78rem; font-weight:650; letter-spacing:-.045em; line-height:1.25; margin:0 0 10px; }
.login-subtitle { color:#63748a; font-size:.88rem; margin:0 0 29px; }
.login-field { margin-bottom:19px; }
.login-field label { display:block; font-size:.83rem; font-weight:600; margin-bottom:8px; color:#30445e; }
.login-field input { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:50px; padding:12px 14px; border:1px solid #d9e1ed; border-radius:10px; font:inherit; font-size:1rem; color:#182d48; background:#fcfdff; transition:border-color .15s,box-shadow .15s; }
.login-field input::placeholder { color:#63748a; opacity:1; }
.login-field input:hover { border-color:#b0bfd4; }
.login-field input:focus { outline:none; border-color:#3476d2; box-shadow:0 0 0 4px #0d6efd14; background:#fff; }
.login-field input[aria-invalid="true"] { border-color:#bd6770; }
.login-password-wrap { position:relative; }
.login-password-wrap input { padding-right:52px; }
.login-password-toggle { position:absolute; right:4px; top:3px; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:8px; color:#62748a; background:transparent; cursor:pointer; }
.login-password-toggle[hidden] { display:none; }
.login-password-toggle:hover { color:#2361b3; background:#ecf2fa; }
.login-password-toggle svg { width:21px; height:21px; }
.login-eye-slash { display:none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display:block; }
.login-recovery { text-align:right; font-size:.77rem; margin:-2px 0 23px; }
.login-recovery a { color:#245fae; text-decoration:none; text-underline-offset:3px; }
.login-recovery a:hover { text-decoration:underline; }
.login-submit,.login-google { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:50px; border-radius:10px; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; transition:background .15s,box-shadow .15s; }
.login-submit { border:1px solid #1763d4; color:#fff; background:#1763d4; box-shadow:0 4px 9px #1763d41a; }
.login-submit:hover { background:#1054bb; box-shadow:0 5px 14px #1763d42b; }
.login-submit:disabled { cursor:wait; opacity:.7; }
.login-google:disabled { cursor:not-allowed; color:#63748a; background:#f7f9fc; }
.login-submit svg { width:18px; height:18px; }
.login-divider { display:flex; align-items:center; gap:14px; margin:23px 0; color:#63748a; font-size:.72rem; }
.login-divider::before,.login-divider::after { content:""; flex:1; height:1px; background:#e6ebf2; }
.login-google { border:1px solid #d9e1ed; color:#30445e; background:#fff; }
.login-google:hover { background:#f6f9fd; border-color:#b7c6d9; }
.login-google svg { width:19px; height:19px; }
.login-access-note { display:flex; gap:7px; align-items:flex-start; margin:25px 0 0; color:#63748a; font-size:.69rem; line-height:1.6; }
.login-access-note svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
.login-footer { margin:24px 0 5px; text-align:center; color:#63748a; font-size:.73rem; }
.login-error { padding:12px 14px; margin-bottom:20px; border:1px solid #edcdd2; border-radius:10px; background:#fff6f7; color:#9a3544; font-size:.8rem; line-height:1.5; }
.login-error strong,.login-error span { display:block; }
.login-error span { margin-top:3px; }
.login-field-help { margin-top:10px; color:#63748a; font-size:.74rem; line-height:1.65; }
.login-field-help ul { padding-left:18px; margin:0; }
.login-field-help li + li { margin-top:4px; }
.login-field-errors { margin-top:8px; color:#9a3544; font-size:.78rem; line-height:1.5; }
.login-field-errors p { margin:0 0 4px; }
.login-back-link { display:flex; justify-content:center; align-items:center; gap:7px; padding:12px 0; margin-top:12px; color:#245fae; font-size:.8rem; text-decoration:none; text-underline-offset:3px; }
.login-back-link:hover { color:#174884; text-decoration:underline; }
.login-action-link { padding:12px 14px; text-align:center; text-decoration:none; line-height:1.5; }
.login-action-link:hover { color:#fff; }
.login-state-icon { display:grid; place-items:center; width:62px; height:62px; margin-bottom:24px; border-radius:18px; color:#2361b3; background:#edf4ff; }
.login-state-icon svg { width:30px; height:30px; }
.login-state-success { background:#e9f7f0; color:#188358; }
.login-info-box { padding:17px 18px; margin-bottom:25px; border:1px solid #e1e8f2; border-radius:12px; background:#f7f9fc; color:#4b607b; font-size:.82rem; line-height:1.65; }
.login-info-box p { margin:5px 0 0; }
.login-page a:focus-visible,.login-page button:focus-visible { outline:3px solid #6e9de0; outline-offset:4px; }
@media(min-height:850px) and (min-width:850px) { .login-main { padding-top:65px; } }
@media(max-width:991px) { .login-welcome { padding:40px 30px 32px; } .login-welcome h2 { font-size:1.95rem; } .login-form-panel { padding:40px 32px; } .login-form-panel h1 { font-size:1.65rem; } }
@media(max-width:767px) {
  .login-header { padding:23px 22px 12px; } .login-header-note { display:none; } .login-brand strong { font-size:.92rem; } .login-brand-mark { width:42px; height:42px; }
  .login-main { max-width:500px; padding:16px 18px 24px; } .login-card { display:flex; flex-direction:column; min-height:0; border-radius:21px; }
  .login-form-panel { order:0; padding:33px 27px 28px; } .login-form-panel h1 { font-size:1.65rem; } .login-subtitle { margin-bottom:25px; }
  .login-welcome { order:1; padding:22px 27px; gap:0; } .login-welcome-intro { display:none; } .login-dua { padding:0; border:0; text-align:center; } .login-dua-ornament { display:none; }
  .login-dua-arabic { text-align:center; font-size:1.8rem; line-height:1.65; margin-bottom:4px; } .login-dua-translation { font-size:.78rem; margin-bottom:5px; } .login-footer { font-size:.67rem; margin-top:20px; }
}
@media(prefers-reduced-motion:reduce) { .login-page input,.login-page button { transition:none; } }