:root{
  --ecr-navy:#062F46;--ecr-blue:#007DB8;--ecr-teal:#24C7C9;--ecr-teal-dark:#08A9A8;
  --ecr-bg:#F4F7F9;--ecr-text:#062F46;--ecr-muted:#6B7E8C;--ecr-line:#DCE7EC;
}
body.ecr-auth-page{
  min-height:100vh!important;
  padding:24px!important;
  color:var(--ecr-text)!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(36,199,201,.20),transparent 25%),
    radial-gradient(circle at 8% 90%,rgba(0,125,184,.17),transparent 28%),
    linear-gradient(145deg,#052B40 0%,#063A54 54%,#07516D 100%)!important;
  background-attachment:fixed!important;
  font-family:'Tajawal',Arial,sans-serif!important;
}
body.ecr-auth-page::before,body.ecr-auth-page::after{
  content:"";position:fixed;border-radius:50%;pointer-events:none;border:1px solid rgba(255,255,255,.07)
}
body.ecr-auth-page::before{width:420px;height:420px;right:-180px;top:-180px}
body.ecr-auth-page::after{width:520px;height:520px;left:-250px;bottom:-270px}
body.ecr-auth-page .auth-shell{
  width:min(980px,100%)!important;min-height:620px!important;display:grid!important;
  grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr)!important;
  border-radius:30px!important;overflow:hidden!important;
  background:#fff!important;box-shadow:0 34px 100px rgba(0,0,0,.28)!important;
  position:relative;z-index:2;
}
body.ecr-auth-page .brand-side{
  display:flex!important;position:relative;overflow:hidden;min-height:620px;
  padding:42px 34px;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 80% 10%,rgba(36,199,201,.20),transparent 30%),
    linear-gradient(155deg,#062F46,#07506D)!important;
}
body.ecr-auth-page .brand-side::before{
  content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-160px;top:-150px;
  border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018)
}
body.ecr-auth-page .brand-side::after{
  content:"المستجيب\A استجابة أسرع، تواصل أوضح\A\A ECR RESPONDER";
  white-space:pre;text-align:center;color:#fff;font-weight:900;font-size:2rem;line-height:1.55;
  padding-top:165px;background:url('/static/icons/ecr_responder_mark_light.svg') center 10px/145px 145px no-repeat;
  position:relative;z-index:1;width:100%;
}
body.ecr-auth-page .form-side{
  min-height:620px!important;padding:38px 44px 28px!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;background:#fff!important;backdrop-filter:none!important;
}
body.ecr-auth-page .form-box{max-width:430px}
body.ecr-auth-page .auth-mark{
  content:url('/static/icons/ecr_responder_mark.svg');width:72px!important;height:72px!important;padding:10px!important;
  border-radius:22px!important;background:#EAF7FA!important;box-shadow:0 13px 30px rgba(0,125,184,.16)!important;
}
body.ecr-auth-page .page-title{color:var(--ecr-navy)!important;font-size:30px!important;font-weight:900!important}
body.ecr-auth-page .page-sub{color:var(--ecr-muted)!important}
body.ecr-auth-page .form-label{color:#315365!important}
body.ecr-auth-page .form-box :is(input,textarea,select,.form-control){
  border-color:var(--ecr-line)!important;border-radius:14px!important;color:var(--ecr-navy)!important;background:#FBFDFE!important;
}
body.ecr-auth-page .form-box :is(input,textarea,select,.form-control):focus{
  border-color:var(--ecr-blue)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(0,125,184,.11)!important;
}
body.ecr-auth-page .btn-ecr{
  background:linear-gradient(135deg,var(--ecr-blue),var(--ecr-teal-dark))!important;
  border-radius:14px!important;box-shadow:0 13px 27px rgba(0,125,184,.22)!important;
}
body.ecr-auth-page .btn-ecr:hover{box-shadow:0 17px 34px rgba(0,125,184,.28)!important}
body.ecr-auth-page .link-soft{color:var(--ecr-blue)!important}
body.ecr-auth-page .remember input{accent-color:var(--ecr-blue)!important}
body.ecr-auth-page .nafath-btn{border-color:#CBE8EF!important;background:#EEF9FB!important;color:#176682!important}
body.ecr-auth-page .footer-note{color:#91A3AD!important}
body.ecr-auth-page .toast{background:var(--ecr-navy)!important;border-right:4px solid var(--ecr-teal)!important}
body.ecr-auth-page .toast strong{color:#7DEBE3!important}
@media(max-width:820px){
  body.ecr-auth-page{padding:14px!important;align-items:flex-start!important}
  body.ecr-auth-page .auth-shell{display:block!important;min-height:auto!important;max-width:500px!important}
  body.ecr-auth-page .brand-side{min-height:185px!important;padding:18px!important}
  body.ecr-auth-page .brand-side::after{padding-top:92px;background-size:82px 82px;font-size:1.25rem;line-height:1.4}
  body.ecr-auth-page .form-side{min-height:auto!important;padding:28px 22px 22px!important}
}