html,body{min-height:100%}
body.login-page{
  margin:0;
  padding:24px;
  display:grid;
  place-items:center;
  overflow-x:hidden;
  color:#101828;
  background:
    radial-gradient(circle at 50% 12%,rgba(219,234,254,.72),transparent 33%),
    linear-gradient(145deg,#f8fbff 0%,#eef5ff 52%,#f8fafc 100%);
  font-family:"Segoe UI",Arial,sans-serif
}
body.login-page::before,body.login-page::after{
  content:"";position:fixed;z-index:0;width:52vw;height:430px;top:31%;
  pointer-events:none;opacity:.42;
  background:repeating-radial-gradient(ellipse at center,transparent 0 17px,rgba(96,165,250,.28) 18px 19px,transparent 20px 34px)
}
body.login-page::before{left:-26vw;transform:rotate(-13deg)}
body.login-page::after{right:-26vw;transform:scaleX(-1) rotate(-13deg)}
.login-card{
  position:relative;z-index:1;width:min(620px,calc(100vw - 38px));margin:auto;
  border:1px solid #dce5f0;border-radius:26px;background:rgba(255,255,255,.97);
  box-shadow:0 25px 70px rgba(30,64,175,.13),0 3px 12px rgba(15,23,42,.04);
  overflow:hidden
}
.login-shell{padding:38px 40px 28px}
.login-company{display:flex;justify-content:center;min-height:205px;margin-bottom:9px}
.login-company-logo{
  display:block;width:min(480px,78%);height:205px;max-width:100%;object-fit:contain
}
.login-separator{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;margin:5px 0 32px;color:#1670f8
}
.login-separator span{height:1px;background:#d9e2ec}
.login-separator svg,.login-control svg,.login-submit svg,.login-password-toggle svg{
  display:block;width:20px;height:20px;min-width:20px;max-width:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}
.login-heading{margin-bottom:29px;text-align:center}
.login-heading h1{margin:0 0 10px;font-size:31px;line-height:1.12;color:#101828}
.login-heading p{margin:0;color:#667085;font-size:15px}
.login-alert{
  margin:0 0 18px;padding:12px 14px;border:1px solid #fecaca;border-radius:10px;
  background:#fef2f2;color:#991b1b;font-size:13px;font-weight:700
}
.login-form{display:grid;gap:21px}
.login-field{display:grid;gap:8px}
.login-field label{margin:0;color:#101828;font-size:14px;font-weight:800}
.login-control{
  position:relative;display:flex;align-items:center;min-height:58px;
  border:1px solid #ccd8e6;border-radius:10px;background:#fff
}
.login-control:focus-within{border-color:#4f8df7;box-shadow:0 0 0 4px rgba(37,99,235,.11)}
.login-control>svg{flex:0 0 20px;margin-left:19px;color:#64748b}
.login-control input{
  display:block;width:100%;min-width:0;height:56px;padding:0 52px 0 16px;margin:0;
  border:0;outline:0;background:transparent;color:#101828;
  font:inherit;font-size:15px;box-sizing:border-box
}
.login-control input::placeholder{color:#8090a7}
.login-password-toggle{
  position:absolute;right:10px;display:grid;place-items:center;width:42px;height:42px;
  padding:0;border:0;border-radius:8px;background:transparent;color:#536785;cursor:pointer
}
.login-password-toggle:hover{background:#edf4ff}
.login-submit{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  min-height:58px;margin:4px 0 0;padding:11px 18px;border:0;border-radius:9px;
  background:linear-gradient(135deg,#1268f3,#0757db);color:#fff;
  box-shadow:0 10px 22px rgba(37,99,235,.18);
  font:inherit;font-size:18px;font-weight:850;cursor:pointer
}
.login-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.login-footer-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px
}
.login-product-brand{display:flex;align-items:center;gap:9px;min-width:0}
.login-product-brand img{
  display:block;width:58px;height:58px;min-width:58px;max-width:58px;object-fit:contain
}
.login-product-brand span{color:#0f2747;font-size:12px;font-weight:800;white-space:nowrap}
.login-forgot{color:#0866e9;font-size:13px;font-weight:650;white-space:nowrap}
@media(max-width:720px){
  body.login-page{padding:14px}
  .login-card{width:min(560px,calc(100vw - 20px));border-radius:20px}
  .login-shell{padding:28px 24px 22px}
  .login-company{min-height:145px}
  .login-company-logo{width:86%;height:145px}
  .login-heading h1{font-size:26px}
  .login-footer-row{align-items:flex-start;flex-direction:column-reverse}
}
@media(max-width:420px){
  .login-shell{padding-inline:17px}
  .login-company{min-height:115px}
  .login-company-logo{height:115px}
  .login-heading p{font-size:13px}
}