:root{
  --gosa-navy:#163a69;
  --gosa-navy-2:#214978;
  --gosa-blue:#2d6ba7;
  --gosa-cyan:#1e9fe4;
  --gosa-text:#14314f;
}
html,body{height:100%}
body{
  margin:0 !important;
  padding:0 !important;
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif !important;
  background:
    linear-gradient(120deg, rgba(7,25,47,.84) 0%, rgba(17,47,83,.78) 42%, rgba(18,115,181,.58) 100%),
    url('../img/gosa-site-hero.png') center/cover no-repeat fixed !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  color:#fff !important;
}

.login-shell{
  width:min(1140px,94vw) !important;
  display:grid !important;
  grid-template-columns:1fr .92fr !important;
  gap:0 !important;
  overflow:hidden !important;
  border-radius:28px !important;
  box-shadow:0 24px 60px rgba(5,16,33,.26) !important;
  background:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(10px) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.login-brand{
  position:relative !important;
  padding:2.1rem 2.15rem 1.95rem !important;
  background:linear-gradient(180deg,rgba(10,31,57,.94) 0%, rgba(18,48,83,.92) 52%, rgba(24,80,136,.86) 100%) !important;
  background-image:none !important;
}
.login-brand::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),transparent 36%),
    radial-gradient(circle at top right,rgba(255,255,255,.08),transparent 24%) !important;
  pointer-events:none !important;
}
.login-brand::after{
  content:"" !important;
  position:absolute !important;
  right:-40px !important;
  bottom:-46px !important;
  width:180px !important;
  height:180px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(255,255,255,.12),transparent 68%) !important;
}
.brand-logo{
  width:min(420px,82%) !important;
  display:block !important;
  margin-bottom:1rem !important;
  background:#fff !important;
  padding:12px 16px !important;
  border-radius:20px !important;
  box-shadow:0 12px 28px rgba(8,26,49,.16) !important;
}
.brand-eyebrow{
  font-size:.78rem !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:800 !important;
}
.login-brand h1{
  font-size:2.2rem !important;
  line-height:1.04 !important;
  margin:.4rem 0 .9rem !important;
  font-weight:900 !important;
  color:#fff !important;
  max-width:520px !important;
}
.login-brand p{
  font-size:.98rem !important;
  color:rgba(255,255,255,.84) !important;
  max-width:500px !important;
  line-height:1.62 !important;
}
.login-bullets{
  margin:1.35rem 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  display:grid !important;
  gap:.78rem !important;
}
.login-bullets li{
  display:flex !important;
  align-items:flex-start !important;
  gap:.78rem !important;
  color:rgba(255,255,255,.88) !important;
  font-weight:700 !important;
}
.login-bullets .dot{
  width:9px !important;
  height:9px !important;
  flex:0 0 9px !important;
  margin-top:.45rem !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#b8eeff,#28aee9) !important;
  box-shadow:0 0 0 5px rgba(143,224,255,.08) !important;
}

.login-card{
  background:linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(248,251,255,.99) 100%) !important;
  padding:2.1rem 2rem 1.8rem !important;
  color:var(--gosa-text) !important;
  display:flex !important;
  align-items:center !important;
}
.login-card-inner{width:100% !important}
.login-card h2{
  font-size:1.85rem !important;
  font-weight:900 !important;
  color:var(--gosa-navy) !important;
  margin:0 0 .3rem !important;
}
.login-card .sub{
  color:#68819d !important;
  margin:0 0 1.25rem !important;
  line-height:1.55 !important;
}
.form-label{
  display:block !important;
  font-weight:800 !important;
  color:var(--gosa-navy) !important;
  margin-bottom:.42rem !important;
}
.form-control{
  width:100% !important;
  padding:.92rem 1rem !important;
  border-radius:15px !important;
  border:1px solid #d0ddec !important;
  background:#fff !important;
  box-sizing:border-box !important;
  color:var(--gosa-text) !important;
  font-size:1rem !important;
  margin:0 0 .95rem !important;
  box-shadow:none !important;
}
.form-control:focus{
  outline:none !important;
  border-color:var(--gosa-cyan) !important;
  box-shadow:0 0 0 .24rem rgba(30,159,228,.12) !important;
}
.submit-btn{
  width:100% !important;
  padding:1rem 1.08rem !important;
  background:linear-gradient(135deg,var(--gosa-navy) 0%, var(--gosa-navy-2) 54%, var(--gosa-cyan) 100%) !important;
  color:#fff !important;
  border:none !important;
  border-radius:16px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  margin-top:.2rem !important;
  font-size:1rem !important;
  box-shadow:0 16px 30px rgba(22,58,105,.16) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.9rem !important;
}
.submit-btn:hover{filter:brightness(.99) !important}
.submit-btn .btn-text{display:inline-block !important}
.submit-btn .btn-arrows{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.submit-btn .btn-arrows img{
  height:22px !important;
  width:auto !important;
  display:block !important;
}

.error-box{
  min-height:24px !important;
  margin-bottom:.45rem !important;
  font-size:.92rem !important;
  color:#c74b4b !important;
  font-weight:800 !important;
}
.login-meta{
  display:flex !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:1rem !important;
  margin-top:1rem !important;
  color:#7990a8 !important;
  font-size:.9rem !important;
  padding-top:.9rem !important;
  border-top:1px solid #e5edf5 !important;
}
.login-meta strong{color:var(--gosa-navy) !important}
.login-meta .meta-logo{display:none !important}

@media (max-width: 960px){
  .login-shell{
    grid-template-columns:1fr !important;
    width:min(720px,94vw) !important;
  }
  .login-brand{
    padding:1.55rem 1.35rem 1.35rem !important;
  }
  .brand-logo{
    width:min(320px,78%) !important;
  }
  .login-brand h1{
    font-size:1.9rem !important;
  }
  .login-card{
    padding:1.45rem 1.2rem 1.3rem !important;
  }
}



/* =========================
   GOSA login responsive only
   Tablet + mobile
   ========================= */
html, body{
  min-height:100%;
}
@media (max-width: 991.98px){
  body{
    display:block !important;
    min-height:100vh !important;
    padding:1rem 0 !important;
    background-position:center center !important;
  }
  .login-shell{
    width:min(760px,94vw) !important;
    margin:0 auto !important;
    grid-template-columns:1fr !important;
    border-radius:24px !important;
  }
  .login-brand{
    padding:1.3rem 1.15rem 1rem !important;
  }
  .brand-logo{
    width:min(290px,78%) !important;
    margin-bottom:.85rem !important;
  }
  .login-brand h1{
    font-size:1.8rem !important;
    margin:.35rem 0 .7rem !important;
  }
  .login-brand p{
    font-size:.94rem !important;
    line-height:1.55 !important;
    max-width:100% !important;
  }
  .login-bullets{
    margin:1rem 0 0 !important;
    gap:.65rem !important;
  }
  .login-card{
    padding:1.25rem 1.1rem 1.05rem !important;
  }
  .login-card-inner{
    width:100% !important;
  }
  .login-card h2{
    font-size:1.55rem !important;
  }
  .login-card .sub{
    font-size:.95rem !important;
  }
  .form-control{
    min-height:46px !important;
    font-size:1rem !important;
  }
  .submit-btn{
    min-height:50px !important;
  }
}
@media (max-width: 767.98px){
  body{
    padding:.75rem 0 !important;
  }
  .login-shell{
    width:min(94vw,560px) !important;
    border-radius:20px !important;
  }
  .login-brand{
    padding:1.05rem .95rem .95rem !important;
  }
  .brand-logo{
    width:min(235px,80%) !important;
    border-radius:16px !important;
  }
  .brand-eyebrow{
    font-size:.66rem !important;
    letter-spacing:.16em !important;
  }
  .login-brand h1{
    font-size:1.5rem !important;
    line-height:1.06 !important;
  }
  .login-brand p,
  .login-bullets li{
    font-size:.9rem !important;
  }
  .login-card{
    padding:1rem .9rem .9rem !important;
  }
  .login-card h2{
    font-size:1.34rem !important;
  }
  .login-card .sub{
    font-size:.9rem !important;
    margin-bottom:1rem !important;
  }
  .form-label{
    font-size:.98rem !important;
  }
  .form-control{
    min-height:44px !important;
    border-radius:14px !important;
    margin-bottom:.85rem !important;
  }
  .submit-btn{
    min-height:48px !important;
    border-radius:14px !important;
    gap:.7rem !important;
    font-size:.96rem !important;
  }
  .submit-btn .btn-arrows img{
    height:18px !important;
  }
  .login-meta{
    margin-top:.85rem !important;
    padding-top:.8rem !important;
    font-size:.84rem !important;
  }
}
@media (max-width: 480px){
  .login-shell{
    width:min(95vw,420px) !important;
    border-radius:18px !important;
  }
  .login-brand{
    padding:.95rem .8rem .85rem !important;
  }
  .brand-logo{
    width:min(205px,82%) !important;
    padding:10px 12px !important;
  }
  .login-brand h1{
    font-size:1.32rem !important;
  }
  .login-brand p,
  .login-bullets li,
  .login-card .sub{
    font-size:.86rem !important;
    line-height:1.45 !important;
  }
  .login-bullets{
    gap:.5rem !important;
  }
  .login-card{
    padding:.92rem .8rem .82rem !important;
  }
  .login-card h2{
    font-size:1.22rem !important;
  }
  .form-control{
    min-height:42px !important;
    padding:.82rem .92rem !important;
    font-size:.95rem !important;
  }
  .submit-btn{
    min-height:46px !important;
    font-size:.94rem !important;
  }
}