*{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#102a43;
  --navy2:#173f5f;
  --teal:#0e7490;
  --teal2:#0f8aa8;
  --gold:#c59b45;
  --cream:#f7f4ed;
  --bg:#eef4f7;
  --text:#243746;
  --muted:#718096;
  --white:#fff;
  --danger:#c0392b;
  --shadow:0 22px 55px rgba(16,42,67,.14);
}
body{
  font-family:"Cairo",Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 10%,rgba(197,155,69,.08),transparent 30%),
    radial-gradient(circle at 90% 80%,rgba(14,116,144,.10),transparent 28%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
}
.page-shell{min-height:100vh;display:flex;flex-direction:column}
.top-header{
  background:linear-gradient(120deg,var(--navy),#173f5f 60%,#0e6078);
  color:#fff;padding:20px clamp(20px,6vw,90px);
  display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;
}
.top-header:after{
  content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.1);
  border-radius:50%;left:-90px;top:-190px;
}
.brand{display:flex;align-items:center;gap:14px;z-index:1}
.brand-mark{
  width:70px;height:70px;display:grid;place-items:center;
  
}
.brand h1{font-size:25px;font-weight:800;line-height:1.2}
.brand p{font-size:13px;color:#d7e7ee}
.academic-badge{
  text-align:center;border-right:1px solid rgba(255,255,255,.2);padding-right:22px;z-index:1
}
.academic-badge span{display:block;font-size:20px;font-weight:700;color:#f2d48d}
.academic-badge small{color:#d7e7ee}

main{width:min(1120px,92%);margin:34px auto 45px;flex:1}
.notice{
  background:#fff;border-right:5px solid var(--gold);border-radius:14px;
  padding:17px 22px;display:flex;align-items:center;gap:15px;
  box-shadow:0 8px 25px rgba(16,42,67,.07);margin-bottom:32px
}
.notice-icon{
  width:38px;height:38px;border-radius:50%;background:#fbf4df;color:#a37b25;
  display:grid;place-items:center;font-weight:800;font-size:20px;flex:none
}
.notice strong{color:var(--navy);font-size:16px}
.notice p{color:#657786;font-size:13px;margin-top:2px}

.login-card{
  display:grid;grid-template-columns:43% 57%;direction:ltr;
  background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  min-height:555px
}
.welcome-panel{
  direction:rtl;background:
    linear-gradient(145deg,rgba(16,42,67,.97),rgba(14,116,144,.94)),
    var(--navy);
  color:#fff;padding:55px 42px;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;position:relative;overflow:hidden
}
.welcome-panel:before,.welcome-panel:after{
  content:"";position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:50%;
}
.welcome-panel:before{width:370px;height:370px;top:-170px;right:-170px}
.welcome-panel:after{width:270px;height:270px;bottom:-140px;left:-130px}
.cap-icon{
  width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.11);
  display:grid;place-items:center;font-size:43px;margin-bottom:20px;
  border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(5px);z-index:1
}
.eyebrow{
  font-size:12px;letter-spacing:2px;color:#f0d38d;margin-bottom:11px;z-index:1
}
.welcome-panel h2{font-size:30px;line-height:1.65;font-weight:800;z-index:1}
.welcome-panel p{font-size:20px;color:#dbeaf0;margin-top:3px;z-index:1}
.year{font-size:26px;color:#f0d38d;font-weight:700;margin-top:5px;z-index:1}
.mini-line{width:70px;height:2px;background:var(--gold);margin:22px 0;z-index:1}
.welcome-panel small{color:#c9dbe3;z-index:1}

.form-panel{direction:rtl;padding:48px 55px;display:flex;flex-direction:column;justify-content:center}
.form-heading{display:flex;align-items:center;gap:15px;margin-bottom:30px}
.section-number{font-size:12px;font-weight:800;color:var(--gold);border:1px solid #e5d4aa;border-radius:9px;padding:5px 8px}
.form-heading h2{font-size:25px;color:var(--navy);font-weight:800}
.form-heading p{font-size:12px;color:var(--muted);margin-top:2px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:700;color:#34495e;margin-bottom:8px}
.field label b{color:var(--danger)}
.input-wrap{position:relative}
.input-icon{
  position:absolute;right:15px;top:50%;transform:translateY(-50%);
  color:#78909c;font-size:15px;pointer-events:none
}
.input-wrap input{
  width:100%;height:52px;border:1px solid #d8e1e6;border-radius:10px;
  padding:0 45px 0 45px;font-family:inherit;font-size:13px;color:var(--text);
  outline:none;background:#fbfcfd;transition:.25s
}
.input-wrap input:focus{
  border-color:var(--teal);box-shadow:0 0 0 4px rgba(14,116,144,.10);background:#fff
}
.input-wrap input::placeholder{color:#a0acb5}
.toggle-password{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:#7a8a96;cursor:pointer;font-size:15px
}
.error{display:block;color:var(--danger);font-size:11px;margin-top:4px;min-height:16px}
.form-options{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:1px 0 18px}
.remember{display:flex;gap:7px;align-items:center;color:#687985;cursor:pointer}
.remember input{accent-color:var(--teal)}
.form-options a{color:var(--teal);text-decoration:none;font-weight:700}
.form-options a:hover{text-decoration:underline}
.btn{
  width:100%;height:50px;border:0;border-radius:9px;font-family:inherit;
  cursor:pointer;font-size:14px;font-weight:700;transition:.25s;display:flex;
  justify-content:center;align-items:center;gap:10px
}
.primary{color:#fff;background:linear-gradient(100deg,var(--navy),var(--teal));box-shadow:0 8px 18px rgba(14,116,144,.18)}
.primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px rgba(14,116,144,.25)}
.arrow{font-size:20px}
.divider{display:flex;align-items:center;gap:10px;color:#9aa8b1;font-size:11px;margin:18px 0}
.divider:before,.divider:after{content:"";height:1px;background:#e7ecef;flex:1}
.secondary{background:#fff;color:var(--navy);border:1px solid #dbe3e7}
.secondary:hover{border-color:var(--teal);color:var(--teal);background:#f6fbfc}
.plus{font-size:19px}
.security-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#8b99a2;font-size:10px;margin-top:18px}

footer{
  width:min(1120px,92%);margin:0 auto 20px;border-top:1px solid #dbe4e9;
  padding-top:15px;display:flex;justify-content:space-between;color:#8997a0;font-size:10px
}
.modal{position:fixed;inset:0;background:rgba(7,25,40,.6);display:none;place-items:center;z-index:20;padding:20px}
.modal.show{display:grid}
.modal-box{background:#fff;border-radius:18px;width:min(430px,100%);padding:38px;text-align:center;position:relative;box-shadow:0 25px 70px rgba(0,0,0,.2)}
.close{position:absolute;left:15px;top:12px;border:0;background:#f0f3f5;border-radius:50%;width:32px;height:32px;font-size:21px;color:#64727c;cursor:pointer}
.modal-icon{font-size:38px;margin-bottom:10px}
.modal-box h3{color:var(--navy);font-size:22px}
.modal-box p{color:#788893;font-size:13px;line-height:1.8;margin:8px 0 22px}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:.3s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:850px){
  .login-card{grid-template-columns:1fr}
  .welcome-panel{min-height:330px;padding:35px}
  .welcome-panel h2{font-size:25px}
  .form-panel{padding:35px 28px}
  .academic-badge{display:none}
}
@media(max-width:560px){
  .top-header{padding:16px 20px}
  .brand h1{font-size:20px}
  main{width:94%;margin-top:22px}
  .notice{align-items:flex-start}
  .login-card{border-radius:15px}
  .form-panel{padding:28px 20px}
  footer{flex-direction:column;gap:5px;text-align:center}
}