*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#123a75;--blue:#0869e7;--muted:#8d929a}
html,body{width:100%;height:100%;overflow:hidden}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  color:#333;
  background:#f7f9ff url("assets/login-background.png") center center / cover no-repeat;
}
.page{
  width:100%;
  height:100vh;
  min-height:0;
  display:grid;
  grid-template-columns:56% 44%;
  overflow:hidden;
  background:transparent;
}
.left{position:relative;padding:4vh 5%;background:transparent;overflow:hidden}
.left:after{content:"";position:absolute;width:110%;height:35%;left:-5%;bottom:-15%;background:radial-gradient(ellipse,#c9e8ff55,transparent 65%);border-radius:50%}
.logo{position:relative;z-index:2;width:min(445px,78%);height:auto;display:block;margin-bottom:38px;mix-blend-mode:multiply}
.left h1{position:relative;z-index:2;color:var(--navy);font-size:clamp(25px,2.15vw,39px);line-height:1.3;margin-bottom:48px}
.features{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;color:var(--navy)}
.features>div{font-size:13px;line-height:1.35}.icon{width:70px;height:70px;margin:0 auto 12px;border-radius:17px;display:grid;place-items:center;font-size:28px;border:1.5px solid currentColor;background:#ffffff55}.blue{color:#1775e8}.green{color:#36aa67}.orange{color:#ed9419}.purple{color:#8849e6}
.right{display:flex;align-items:center;justify-content:center;padding:2.5vh 2.5%;background:transparent;min-width:0;min-height:0}
.card{width:min(520px,100%);padding:34px 42px 30px;background:#fff;border-radius:20px;text-align:center;box-shadow:0 20px 55px #19447820}
.avatar{width:68px;height:68px;border-radius:50%;background:#e8f3ff;color:#104b8e;display:grid;place-items:center;margin:0 auto 14px}.avatar svg{width:42px;height:42px}
.card h2{color:#123d76;font-size:31px;margin-bottom:8px}.sub{font-size:15px;margin-bottom:24px;color:#4b5057}
.input{height:55px;width:100%;border:1px solid #d3d8df;border-radius:9px;display:flex;align-items:center;margin-bottom:20px;background:#fff}.input>svg{width:25px;height:25px;color:#7d848c;margin:0 13px}.input input{border:0;outline:0;height:100%;flex:1;font-size:15px;font-family:inherit;color:#333}.input input::placeholder{color:#92969c}.input button{border:0;background:none;color:#7d848c;font-size:19px;margin-right:16px;cursor:pointer}
.options{display:flex;justify-content:space-between;align-items:center;margin:2px 0 20px;font-size:14px}.remember{display:flex;gap:8px;align-items:center}.remember input{accent-color:#1268df}.options a,.new a{color:#1264ca;text-decoration:none;font-weight:700}
.login,.school{width:100%;height:55px;border-radius:9px;font:inherit;font-size:17px;font-weight:750;cursor:pointer}.login{border:0;background:linear-gradient(90deg,#0b6de8,#0b61d9);color:#fff}.school{background:#fff;border:1.5px solid #2c76cc;color:#1161bd}
.or{display:flex;align-items:center;gap:15px;margin:22px 0;color:#555}.or span{height:1px;background:#ddd;flex:1}
.new{margin-top:23px;font-size:13px}
#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);opacity:0;background:#12366f;color:#fff;padding:13px 22px;border-radius:8px;transition:.25s;z-index:10}.show{opacity:1!important;transform:translate(-50%,0)!important}
@media(max-width:900px){
  html,body{height:auto;min-height:100%;overflow:auto}
  .page{height:auto;min-height:100vh;grid-template-columns:1fr}
  .left{min-height:auto;padding:35px 25px 50px}
  .logo{width:300px;max-width:85%}
  .features{grid-template-columns:repeat(2,1fr);gap:25px}
  .right{padding:40px 20px 60px}
  .card{padding:40px 25px}
}
@media(max-width:480px){.left h1{font-size:24px}.card h2{font-size:30px}.input{height:58px}.login,.school{height:58px}.options{font-size:13px}}
/* Final viewport-fit adjustments */
@media (min-width:901px){
  .left h1{font-size:clamp(22px,2vw,34px);margin-bottom:34px}
  .logo{width:min(390px,70%);margin-bottom:28px}
  .features{gap:14px}
  .feature-icon{width:62px;height:62px;font-size:24px;margin-bottom:9px}
  .features>div{font-size:12px}
  .card{max-height:94vh;overflow:hidden}
}

@media (max-height:760px) and (min-width:901px){
  .left{padding-top:3vh}
  .logo{width:min(320px,64%);margin-bottom:20px}
  .left h1{font-size:25px;margin-bottom:25px}
  .feature-icon{width:54px;height:54px}
  .card{padding:27px 34px 24px}
  .avatar{width:58px;height:58px;margin-bottom:10px}
  .avatar svg{width:36px;height:36px}
  .card h2{font-size:27px}
  .subtitle{margin-bottom:18px}
  .input{height:49px;margin-bottom:13px}
  .login,.school{height:49px}
  .options{margin-bottom:15px}
  .or{margin:16px 0}
  .new{margin-top:16px}
}

/* ===== Final alignment: logo + heading aligned with feature row ===== */
@media (min-width:901px){
  .left .logo,
  .left h1{
    margin-left:30px;
  }

  /* Keep the four feature blocks at the same original left edge */
  .features{
    margin-left:0;
    max-width:520px;
  }

  /* Narrower + taller login card, matching the supplied reference */
  .card{
    width:min(500px,100%);
    min-height:80vh;
    padding:48px 42px 44px;
  }

  .avatar{
    width:72px;
    height:72px;
    margin-bottom:17px;
  }

  .avatar svg{
    width:44px;
    height:44px;
  }

  .card h2{
    font-size:34px;
    margin-bottom:10px;
  }

  .sub{
    font-size:16px;
    margin-bottom:31px;
  }

  .input{
    height:62px;
    margin-bottom:20px;
  }

  .input input{
    font-size:16px;
  }

  .options{
    margin:3px 0 28px;
    font-size:15px;
  }

  .login,.school{
    height:62px;
    font-size:18px;
  }

  .or{
    margin:27px 0;
  }

  .new{
    margin-top:31px;
    font-size:14px;
  }
}

@media (min-width:901px) and (max-height:850px){
  .card{
    min-height:0;
    padding:34px 38px 32px;
  }

  .avatar{width:62px;height:62px;margin-bottom:12px}
  .avatar svg{width:38px;height:38px}
  .card h2{font-size:30px}
  .sub{margin-bottom:22px}
  .input{height:54px;margin-bottom:16px}
  .options{margin-bottom:20px}
  .login,.school{height:54px}
  .or{margin:20px 0}
  .new{margin-top:22px}
}