.auth-modern-page{
  background:radial-gradient(circle at 12% 8%, rgba(23,154,214,.10), transparent 28%), #f5f8fc;
}
.auth-modern-page .topbar{display:none}
.auth-modern-page > .container{
  width:min(1120px, 100%);
  min-height:calc(100vh - 58px);
  padding:clamp(24px, 6vh, 72px) 20px 90px;
  display:flex;
  align-items:center;
}
.auth-modern-page .footerbar{
  background:linear-gradient(90deg, #073a59 0%, #075f83 55%, #0878a5 100%);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 24px rgba(7,58,89,.10);
}
.auth-modern-page .footerbar a{color:#fff}
.auth-modern-shell{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(380px, .95fr);
  overflow:hidden;
  border:1px solid rgba(15,47,68,.08);
  border-radius:30px;
  background:#fff;
  box-shadow:0 28px 70px rgba(15,47,68,.14);
}
.auth-modern-panel{
  position:relative;
  min-height:500px;
  padding:clamp(38px, 5vw, 64px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  background:radial-gradient(circle at 95% 10%, rgba(53,194,240,.22), transparent 35%),
             linear-gradient(145deg, #073a59 0%, #075f83 100%);
}
.auth-modern-panel:before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-150px;
  bottom:-150px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.035);
}
.auth-modern-eyebrow{
  position:relative;
  z-index:1;
  align-self:flex-start;
  margin-bottom:24px;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.auth-modern-logo{
  position:relative;
  z-index:1;
  display:block;
  width:390px;
  max-width:100%;
  height:auto;
  margin-bottom:26px;
}
.auth-modern-copy{
  position:relative;
  z-index:1;
  max-width:430px;
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:16px;
  line-height:1.55;
}
.auth-modern-card{
  padding:clamp(38px, 5vw, 64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-modern-card h1{
  margin:0 0 8px;
  color:#0f172a;
  font-family:"Space Grotesk", "Montserrat", sans-serif;
  font-size:30px;
  letter-spacing:-.03em;
}
.auth-modern-intro{
  margin:0 0 26px;
  color:#64748b;
  font-size:14px;
  line-height:1.5;
}
.auth-modern-alert{
  margin-bottom:16px;
  padding:11px 13px;
  border:1px solid #fecaca;
  border-radius:12px;
  background:#fef2f2;
  color:#991b1b;
  font-size:13px;
}
.auth-modern-alert.ok{
  border-color:#bbf7d0;
  background:#ecfdf5;
  color:#166534;
}
.auth-modern-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:17px;
}
.auth-modern-field label{
  color:#1e293b;
  font-size:13px;
  font-weight:650;
}
.auth-modern-field input{
  width:100%;
  padding:13px 14px;
  border:1px solid #dbe3ec;
  border-radius:12px;
  background:#fbfdff;
  color:#0f172a;
  font-size:15px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.auth-modern-field input:focus{
  outline:none;
  border-color:#179ad6;
  background:#fff;
  box-shadow:0 0 0 4px rgba(23,154,214,.12);
}
.auth-modern-button{
  width:100%;
  padding:13px 18px;
  border:0;
  border-radius:12px;
  background:#0878a5;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 9px 20px rgba(8,120,165,.20);
  transition:background .18s, transform .18s, box-shadow .18s;
}
.auth-modern-button:hover{
  background:#066b94;
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(8,120,165,.25);
}
.auth-modern-back{
  display:block;
  margin-top:18px;
  color:#0878a5;
  font-size:13px;
  font-weight:600;
  text-align:center;
}
.auth-modern-back:hover{text-decoration:underline}
.auth-modern-button:focus-visible,.auth-modern-back:focus-visible{
  outline:3px solid rgba(23,154,214,.25);
  outline-offset:3px;
}
@media (max-width:980px){
  .auth-modern-page > .container{align-items:flex-start;padding-top:24px}
  .auth-modern-shell{grid-template-columns:1fr}
  .auth-modern-panel{min-height:auto;padding:36px}
  .auth-modern-card{padding:36px}
}
@media (max-width:560px){
  .auth-modern-page > .container{padding:12px 12px 100px}
  .auth-modern-shell{border-radius:22px}
  .auth-modern-panel,.auth-modern-card{padding:28px 22px}
  .auth-modern-logo{width:310px}
  .auth-modern-card h1{font-size:26px}
  .auth-modern-page .footerbar__inner{
    justify-content:center;
    text-align:center;
    flex-wrap:wrap;
    gap:4px;
    font-size:11px;
  }
}