@font-face{font-family:Shabnam;src:url('../fonts/Shabnam.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Shabnam;src:url('../fonts/Shabnam-Bold.woff2') format('woff2');font-style:normal;font-weight:700 900;font-display:swap}
:root{font-family:Shabnam,Tahoma,sans-serif;color:#172651;background:#edf6ff;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(#ffffff24,#ffffff24),#edf6ff url('../images/login-background.png') center center/cover no-repeat fixed}
button,input,a{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.login-brand{position:absolute;top:42px;right:50px;display:flex;align-items:center;gap:21px;font-family:Arial,sans-serif;font-size:40px;font-weight:700;letter-spacing:.4px}
.brand-mark{color:#117bff;width:58px;height:58px;stroke:none}
.login-page{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:104px 24px 84px}
.login-card{width:min(640px,100%);padding:26px 42px 30px;border:1px solid rgba(255,255,255,.95);outline:1px solid rgba(191,216,253,.45);border-radius:21px;background:linear-gradient(130deg,rgba(255,255,255,.8),rgba(247,251,255,.76));box-shadow:0 28px 70px rgba(55,105,165,.16);backdrop-filter:blur(9px)}
.login-heading{text-align:center}
.portal-mark{display:grid;place-items:center;width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,#e6f0ff,#dfeaff);box-shadow:inset -9px -3px 0 rgba(255,255,255,.18);margin:0 auto 18px}
.portal-mark svg{color:#117bff;width:51px;height:55px;stroke:none}
h1{font-size:32px;line-height:1.4;letter-spacing:-.7px;margin:0 0 8px;font-weight:800}
.login-heading p{font-size:16px;color:#7c89aa;line-height:1.9;margin:0 0 35px;white-space:nowrap;letter-spacing:-.3px}
.login-field{position:relative;background:rgba(255,255,255,.91);border:1.5px solid #d5e1f5;border-radius:15px;transition:border-color .18s,box-shadow .18s;height:69px}
.login-field:focus-within{border-color:#77abff;box-shadow:0 0 0 3px rgba(27,124,255,.1)}.login-field.is-invalid{border-color:#dc6478}
.field-icon{position:absolute;right:17px;top:22px;color:#7b89a8}.username-field .field-icon{color:#5c99ff}
.login-field label{position:absolute;right:58px;top:12px;color:#7886a7;font-size:14px;pointer-events:none}
.login-field input{display:block;width:100%;height:100%;border:0;background:transparent;outline:none;color:#192959;direction:ltr;text-align:left;padding:29px 58px 7px 20px;font-family:Shabnam,Tahoma,sans-serif;font-size:17px;border-radius:inherit;min-width:0}
.login-field input::placeholder{font-size:13px;color:#9ba9c0;direction:rtl;text-align:right}
.password-field{margin-top:26px}.password-field label{top:23px}.password-field input{padding:12px 144px 12px 70px;font-size:22px;letter-spacing:1px}.password-field input::placeholder{font-size:12px;letter-spacing:0;text-align:left;direction:rtl}
.password-toggle{position:absolute;left:12px;top:13px;display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:9px;background:transparent;color:#7886a7}.password-toggle:hover{background:#eff5ff;color:#187aff}.password-toggle svg{width:27px;height:27px}
.login-options{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:18px 0 27px;font-size:14px;min-height:31px}
.remember-option{display:flex;align-items:center;gap:10px;color:#7b88a8;cursor:pointer}.remember-option input{appearance:none;display:grid;place-items:center;width:25px;height:25px;margin:0;border:1.5px solid #bdcfea;border-radius:6px;background:#fff;cursor:pointer}.remember-option input:checked{background:#1181ff;border-color:#1181ff}.remember-option input:checked:after{content:'';width:11px;height:6px;border-left:2px solid white;border-bottom:2px solid white;transform:rotate(-45deg) translateY(-2px)}
.text-button{padding:4px 0;border:0;background:transparent;color:#147aff;font-size:14px}.text-button:hover{text-decoration:underline}
.login-submit{border:1px solid #3296ff;border-radius:15px;width:100%;height:61px;display:flex;align-items:center;justify-content:center;gap:20px;background:linear-gradient(115deg,#2c92ff,#0876ff 75%,#078aff);color:#fff;font-size:21px;font-weight:700;box-shadow:0 7px 15px #167cff30,0 0 0 5px #d7f2ff88;transition:filter .18s,transform .18s}.login-submit:hover{filter:brightness(1.04);transform:translateY(-1px)}.login-submit:disabled{opacity:.75;cursor:wait;transform:none}.login-submit svg{width:25px;height:25px}
.login-divider{display:flex;align-items:center;gap:18px;color:#8490ae;font-size:14px;margin:22px 0 18px}.login-divider:before,.login-divider:after{content:'';height:1px;background:#d4e0f3;flex:1}
.login-help{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:0;border-radius:15px;background:linear-gradient(110deg,#e1ecfcaa,#e5edf9cc);text-align:right;color:#182a56;min-height:82px}
.help-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#f8fbff;color:#107bff}.help-icon svg{width:29px;height:29px}.help-copy{display:flex;flex-direction:column;gap:5px;flex:1;font-size:14px}.help-copy>span{color:#7a89a8;font-size:13px}.help-link{display:flex;align-items:center;gap:12px;color:#147aff;font-size:14px;white-space:nowrap}.help-link svg{width:20px;height:20px}
.login-errors,.login-notice{border:1px solid #f0c4ce;border-radius:10px;padding:10px 14px;margin:0 0 20px;background:#fff1f3;color:#a4324b;font-size:13px;line-height:1.8}.login-errors p{margin:0}.login-notice{border-color:#b8dbf9;background:#eff8ff;color:#296599}
:focus-visible{outline:3px solid #428eff;outline-offset:4px}
dialog{width:min(480px,calc(100% - 32px));padding:28px;border:1px solid #d4e3fb;border-radius:20px;color:#192a56;background:#fbfdff;box-shadow:0 20px 80px #15294b33;line-height:1.9}dialog::backdrop{background:#142c5555;backdrop-filter:blur(4px)}dialog h2{font-size:20px;margin:0 0 18px}dialog p{font-size:14px;color:#687c9f}dialog form{text-align:left;margin-top:20px}.dialog-close{border:0;border-radius:10px;color:#fff;background:#137eff;padding:10px 24px}.recovery-link{color:#1379ef;font-size:14px}
@media(min-width:1700px){.login-card{transform:translateY(6px)}}
@media(max-width:720px){.login-brand{top:24px;right:24px;font-size:28px;gap:12px}.brand-mark{width:43px;height:43px}.login-page{padding:100px 18px 32px}.login-card{padding:25px 24px}.portal-mark{width:82px;height:82px}.portal-mark svg{width:44px;height:48px}h1{font-size:23px;letter-spacing:-.7px}.login-heading p{white-space:normal;font-size:12px;margin-bottom:28px}.login-options{font-size:12px;gap:10px}.text-button{font-size:12px}.login-field input{font-size:15px}.login-field label{font-size:12px}.help-link{font-size:12px;gap:4px}.help-copy{font-size:12px}.help-copy>span{font-size:11px}.help-icon{width:38px;height:38px}.login-help{gap:9px;padding:12px}.remember-option{gap:7px}}
@media(max-width:390px){.login-card{padding:24px 18px}h1{font-size:21px}.login-options{gap:5px}.text-button{font-size:11px}.remember-option input{width:22px;height:22px}.help-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.login-submit:hover{transform:none}}
/* Keep the complete form usable at 100% zoom, including 768px-high laptops. */
@media(min-width:721px){
 .login-brand{top:26px;right:32px;font-size:30px;gap:14px}.brand-mark{width:44px;height:44px}
 .login-page{padding:76px 24px 28px}
 .login-card{width:min(480px,100%);padding:22px 28px 24px;transform:none}
 .portal-mark{width:72px;height:72px;margin-bottom:14px}.portal-mark svg{width:38px;height:42px}
 h1{font-size:24px;line-height:1.5;letter-spacing:-.6px}
 .login-heading p{font-size:12px;white-space:normal;margin-bottom:22px}
 .login-field{height:54px;border-radius:11px}.field-icon{right:14px;top:17px;width:20px;height:20px}
 .login-field label{right:44px;top:7px;font-size:11px}.login-field input{padding:23px 44px 5px 14px;font-size:14px}
 .password-field{margin-top:18px}.password-field label{top:18px}.password-field input{padding:9px 112px 9px 52px;font-size:18px}
 .password-toggle{left:8px;top:8px;width:36px;height:36px}.password-toggle svg{width:22px;height:22px}
 .login-options{margin:13px 0 19px;font-size:11px;min-height:26px}.text-button{font-size:11px}.remember-option{gap:7px}.remember-option input{width:20px;height:20px;border-radius:5px}
 .login-submit{height:48px;font-size:17px;border-radius:11px;gap:14px}.login-submit svg{width:21px;height:21px}
 .login-divider{margin:17px 0 14px;font-size:12px}
 .login-help{min-height:64px;padding:10px 12px;gap:10px;border-radius:11px}.help-icon{width:36px;height:36px}.help-icon svg{width:23px;height:23px}.help-copy{font-size:11px}.help-copy>span{font-size:10px}.help-link{font-size:11px;gap:6px}
 .login-errors,.login-notice{padding:8px 11px;font-size:11px;margin-bottom:14px}
}
@media(min-width:721px) and (max-height:720px){
 .login-page{padding:62px 20px 20px}.login-card{padding-top:18px;padding-bottom:18px}
 .portal-mark{width:58px;height:58px;margin-bottom:10px}.portal-mark svg{width:32px;height:35px}
 h1{font-size:22px}.login-heading p{margin-bottom:16px}.password-field{margin-top:14px}
 .login-options{margin:10px 0 15px}.login-divider{margin:13px 0 10px}.login-help{min-height:58px}
}
@media(max-width:720px){
 .portal-mark{width:70px;height:70px;margin-bottom:14px}.login-heading p{margin-bottom:20px}
 .login-field{height:60px}.field-icon{top:18px}.login-field input{padding-top:25px}.login-field label{top:9px}
 .password-field{margin-top:18px}.password-field input{padding-top:10px}.password-field label{top:19px}.password-toggle{top:9px}
 .login-options{margin:14px 0 20px}.login-submit{height:52px;font-size:18px}
 .login-help{min-height:70px}.login-divider{margin:18px 0 14px}
}